admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #9 from dderbentsov/UC-5

Browse Source 
Изменена архитектура проекта, проправлены инпорты
This commit is contained in:
Алексей Дёмин
2022-10-10 13:27:59 +03:00
committed by GitHub
parent fd3a415788 9471436477
commit 9ed7de6a32
10 changed files with 148 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
package-lock.json generated
View File

@@ -5042,6 +5042,14 @@
"node": ">=0.10" "node": ">=0.10"
} }
}, },
"node_modules/de-indent": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
"integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
"dev": true,
"optional": true,
"peer": true
},
"node_modules/debug": { "node_modules/debug": {
"version": "4.3.4", "version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -12675,6 +12683,18 @@
"integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==", "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
"dev": true "dev": true
}, },
"node_modules/vue-template-compiler": {
"version": "2.7.10",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.10.tgz",
"integrity": "sha512-QO+8R9YRq1Gudm8ZMdo/lImZLJVUIAM8c07Vp84ojdDAf8HmPJc7XB556PcXV218k2AkKznsRz6xB5uOjAC4EQ==",
"dev": true,
"optional": true,
"peer": true,
"dependencies": {
"de-indent": "^1.0.2",
"he": "^1.2.0"
}
},
"node_modules/vue-template-es2015-compiler": { "node_modules/vue-template-es2015-compiler": {
"version": "1.9.1", "version": "1.9.1",
"resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz", "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
@@ -17182,6 +17202,14 @@
"assert-plus": "^1.0.0" "assert-plus": "^1.0.0"
} }
}, },
"de-indent": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
"integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
"dev": true,
"optional": true,
"peer": true
},
"debug": { "debug": {
"version": "4.3.4", "version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -22908,6 +22936,18 @@
} }
} }
}, },
"vue-template-compiler": {
"version": "2.7.10",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.10.tgz",
"integrity": "sha512-QO+8R9YRq1Gudm8ZMdo/lImZLJVUIAM8c07Vp84ojdDAf8HmPJc7XB556PcXV218k2AkKznsRz6xB5uOjAC4EQ==",
"dev": true,
"optional": true,
"peer": true,
"requires": {
"de-indent": "^1.0.2",
"he": "^1.2.0"
}
},
"vue-template-es2015-compiler": { "vue-template-es2015-compiler": {
"version": "1.9.1", "version": "1.9.1",
"resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz", "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",

14
src/App.vue
View File

@@ -1,17 +1,17 @@
<template lang="pug"> <template lang="pug">
div(class="app-container") .app-container
header-component the-header
div(class="pages-container") .pages-container
sidebar-component the-sidebar
router-view router-view
</template> </template>
<script> <script>
import HeaderComponent from "./components/homePageComponents/HeaderComponent"; import TheHeader from "@/components/theComponents/TheHeader";
import SidebarComponent from "./components/homePageComponents/SidebarComponent"; import TheSidebar from "@/components/theComponents/TheSidebar";
export default { export default {
name: 'App', name: 'App',
components: {HeaderComponent, SidebarComponent} components: {TheHeader, TheSidebar}
} }
</script> </script>

0
src/components/buttons/AddEventButton.vue → src/components/baseComponents/buttons/AddEventButton.vue
View File

4
src/components/buttons/ButtonPlus.vue → src/components/baseComponents/buttons/ButtonPlus.vue
View File

@@ -5,8 +5,8 @@
</template> </template>
<script> <script>
import PlusIcon from "../iconsComponents/PlusIcon"; import PlusIcon from "@/components/iconsComponents/PlusIcon"
import BasicIcon from "../iconsComponents/basicIcon/BasicIcon"; import BasicIcon from "@/components/iconsComponents/basicIcon/BasicIcon";
export default { export default {
name: "ButtonPlus", name: "ButtonPlus",
components: {BasicIcon, PlusIcon} components: {BasicIcon, PlusIcon}

43
src/components/homePageComponents/SidebarComponent.vue
View File

@@ -1,43 +0,0 @@
<template lang="pug">
div(class='sidebar-container')
div(class='top-button-container')
button-sidebar-component(id="home" path="#/")
home-icon
button-sidebar-component(id="calendar" path="#/calendar")
calendar-icon
button-sidebar-component(id="user" path="#/user")
user-icon
div(class="bottom-button-container")
button-sidebar-component(id="settings" path="#/settings")
settings-icon
</template>
<script>
import HomeIcon from '../iconsComponents/HomeIcon';
import CalendarIcon from '../iconsComponents/CalendarIcon';
import UserIcon from '../iconsComponents/UserIcon';
import SettingsIcon from '../iconsComponents/SettingsIcon';
import ButtonSidebarComponent from "../ButtonSidebarComponent";
export default {
name: "SidebarComponent",
components: {ButtonSidebarComponent, HomeIcon, CalendarIcon, UserIcon, SettingsIcon},
}
</script>
<style lang="sass">
.sidebar-container
display: flex
flex-direction: column
justify-content: space-between
flex: auto
padding: 24px 0 24px 0
box-sizing: border-box
max-width: 80px
background-color: #F8F8FF
.top-button-container
display: flex
flex-direction: column
row-gap: 24px
</style>

1
src/components/pages/calendarPages/CalendarPages.vue
View File

@@ -1,4 +1,5 @@
<template lang="pug"> <template lang="pug">
form-add-event
</template> </template>
<script> <script>

78
src/components/pages/calendarPages/FormAddEvent.vue
View File

@@ -1,73 +1,73 @@
<template lang="pug"> <template lang="pug">
div.event-form-change(v-if="formOpen") .event-form-change(v-if="formOpen")
div.form-item-container .form-item-container
div.close-icon-position .close-icon-position
span.title-form Ответственный span.title-form Ответственный
basic-icon.close-icon(width="16" height="16" icon-color="#252850" @click="closeEventForm") basic-icon.close-icon(width="16" height="16" icon-color="#252850" @click="closeEventForm")
close-icon close-icon
div.input-container(@click="openSelectResponsible") .input-container(@click="openSelectResponsible")
div.form-select .form-select
div.form-item-input.select-container-res {{eventData.responsible}} .form-item-input.select-container-res {{eventData.responsible}}
div.option-container(v-if="selectResponsibleOpen" id="responsible" @click="(event)=>chooseOption(event)") .option-container(v-if="selectResponsibleOpen" id="responsible" @click="(event)=>chooseOption(event)")
div.option-item(v-for="(responsible, index) in listResponsible" :key="index" :id="index") {{responsible}} .option-item(v-for="(responsible, index) in listResponsible" :key="index" :id="index") {{responsible}}
div.select-form-separator .select-form-separator
basic-icon(width="24" height="24" icon-color="#090A15") basic-icon(width="24" height="24" icon-color="#090A15")
arrow-down-icon arrow-down-icon
div.form-item-container .form-item-container
span.title-form Оновная информация span.title-form Оновная информация
div.form-inform-container .form-inform-container
basic-icon(width="24" height="24" icon-color="#090A15" ) basic-icon(width="24" height="24" icon-color="#090A15" )
clock-icon clock-icon
div.time-input-container .time-input-container
div.input-container .input-container
input.form-item-input(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00") input.form-item-input(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
span — span —
div.input-container .input-container
input.form-item-input(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00") input.form-item-input(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
div.form-inform-container .form-inform-container
basic-icon(width="24" height="24" icon-color="#090A15") basic-icon(width="24" height="24" icon-color="#090A15")
user-icon user-icon
div.input-container .input-container
input.form-item-input(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента") input.form-item-input(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
div.form-item-container(class='additional-information') .form-item-container(class='additional-information')
div.form-inform-container .form-inform-container
span.title-form Дополнительная информация span.title-form Дополнительная информация
button-plus(id="addInfo" @click="(e)=>addFriendInfo(e)") button-plus(id="addInfo" @click="(e)=>addFriendInfo(e)")
div.form-inform-container(v-for="(info, index) in listFriendInfo" :key="index") .form-inform-container(v-for="(info, index) in listFriendInfo" :key="index")
span.number-additional {{info}} span.number-additional {{info}}
div.input-container .input-container
input.form-item-input(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное") input.form-item-input(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное")
div.form-item-container .form-item-container
span.title-form Вид события span.title-form Вид события
div.input-container(@click="openSelectKindEvent") .input-container(@click="openSelectKindEvent")
div.form-select .form-select
div.form-item-input.select-container-kind {{eventData.kindEvent}} .form-item-input.select-container-kind {{eventData.kindEvent}}
div.option-container(v-if="selectKindEventOpen" id="kind" @click="(event)=>chooseOption(event)") .option-container(v-if="selectKindEventOpen" id="kind" @click="(event)=>chooseOption(event)")
div.option-item(v-for="(kind, index) in kindEvents" :key="index" :id="index") {{kind}} .option-item(v-for="(kind, index) in kindEvents" :key="index" :id="index") {{kind}}
div.select-form-separator .select-form-separator
basic-icon(width="24" height="24" icon-color="#090A15") basic-icon(width="24" height="24" icon-color="#090A15")
arrow-down-icon arrow-down-icon
div.form-item-container .form-item-container
div.form-inform-container .form-inform-container
span.title-form Контакты span.title-form Контакты
button-plus(id="addContact" @click="(e)=>addFriendInfo(e)") button-plus(id="addContact" @click="(e)=>addFriendInfo(e)")
div.form-inform-container(v-for="(contact, index) in listContacts" :key="index") .form-inform-container(v-for="(contact, index) in listContacts" :key="index")
basic-icon(width="24" height="20" icon-color="#090A15") basic-icon(width="24" height="20" icon-color="#090A15")
mail-icon mail-icon
div.input-container .input-container
input.form-item-input(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail") input.form-item-input(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
add-event-button(@click="createEvent") add-event-button(@click="createEvent")
</template> </template>
<script> <script>
import BasicIcon from "../../iconsComponents/basicIcon/BasicIcon"; import BasicIcon from "@/components/iconsComponents/basicIcon/BasicIcon";
import ArrowDownIcon from "../../iconsComponents/ArrowDownIcon"; import ArrowDownIcon from "@/components/iconsComponents/ArrowDownIcon";
import ClockIcon from "../../iconsComponents/ClockIcon"; import ClockIcon from "@/components/iconsComponents/ClockIcon";
import UserIcon from "../../iconsComponents/UserSmallIcon"; import UserIcon from "@/components/iconsComponents/UserSmallIcon";
import MailIcon from "../../iconsComponents/MailIcon"; import MailIcon from "@/components/iconsComponents/MailIcon";
import CloseIcon from "../../iconsComponents/CloseIcon" import CloseIcon from "@/components/iconsComponents/CloseIcon"
import AddEventButton from "../../buttons/AddEventButton"; import AddEventButton from "@/components/baseComponents/buttons/AddEventButton";
import ButtonPlus from "../../buttons/ButtonPlus"; import ButtonPlus from "@/components/baseComponents/buttons/ButtonPlus";
export default { export default {
name: "FormChangeEvent", name: "FormChangeEvent",
components: {ClockIcon, ArrowDownIcon, UserIcon, MailIcon, CloseIcon, BasicIcon, AddEventButton, ButtonPlus}, components: {ClockIcon, ArrowDownIcon, UserIcon, MailIcon, CloseIcon, BasicIcon, AddEventButton, ButtonPlus},

0
src/components/ButtonSidebarComponent.vue → src/components/theComponents/TheButtonSidebar.vue
View File

32
src/components/homePageComponents/HeaderComponent.vue → src/components/theComponents/TheHeader.vue
View File

@@ -1,24 +1,24 @@
<template lang="pug"> <template lang="pug">
div.header-wrapper .header-wrapper
div.header-left-side .header-left-side
img.logo-img(src="../../assets/images/logo.svg" alt="Logo") img.logo-img(src="@/assets/images/logo.svg" alt="Logo")
div.header-right-side .header-right-side
div.header-inputs-wrapper .header-inputs-wrapper
img.search-icon(src="../../assets/icons/search.svg" alt="Search") img.search-icon(src="@/assets/icons/search.svg" alt="Search")
select.header-inputs.select(v-model="selectedFilter") select.header-inputs.select(v-model="selectedFilter")
option(v-for="filter in filters" :key="filter" :value="filter") {{ filter }} option(v-for="filter in filters" :key="filter" :value="filter") {{ filter }}
span.header-inputs-separator span.header-inputs-separator
input.header-inputs.search-input(placeholder="Искать ...") input.header-inputs.search-input(placeholder="Искать ...")
button.header-buttons.btn-notification button.header-buttons.btn-notification
img.bell-icon(src="../../assets/icons/bell.svg" alt="Notifications") img.bell-icon(src="@/assets/icons/bell.svg" alt="Notifications")
div.avatar-wrapper .avatar-wrapper
img.avatar-img(:src="avatarSrc") img.avatar-img(:src="avatarSrc")
button.header-buttons.btn-down-arrow button.header-buttons.btn-down-arrow
img.arrow-icon(src="../../assets/icons/down-arrow-2.svg" alt="Down Arrow") img.arrow-icon(src="@/assets/icons/down-arrow-2.svg" alt="Down Arrow")
</template> </template>
<script> <script>
import img from '../../assets/images/avatar.svg' import img from '@/assets/images/avatar.svg'
export default { export default {
name: 'HeaderComponent', name: 'HeaderComponent',
data() { data() {
@@ -33,7 +33,7 @@
<style lang='sass'> <style lang='sass'>
input input
padding: 0 padding: 0
.header-buttons .header-buttons
outline: none outline: none
@@ -59,12 +59,12 @@
.header-left-side .header-left-side
box-sizing: border-box box-sizing: border-box
margin: 4px 0 margin: 4px 0
height: 32px height: 32px
cursor: pointer cursor: pointer
.logo-img .logo-img
height: 32px height: 32px
width: 70px width: 70px
.header-inputs-wrapper .header-inputs-wrapper
display: inline-block display: inline-block
@@ -78,12 +78,12 @@
height: 24px height: 24px
width: 24px width: 24px
color: var(--btn-blue-color) color: var(--btn-blue-color)
opacity: 0.7 opacity: 0.7
.btn-notification .btn-notification
display: flex display: flex
justify-content: center justify-content: center
align-items: center align-items: center
margin-right: 32px margin-right: 32px
.arrow-icon .arrow-icon

43
src/components/theComponents/TheSidebar.vue Normal file
View File

@@ -0,0 +1,43 @@
<template lang="pug">
.sidebar-container
.top-button-container
the-button-sidebar(id="home" path="#/")
home-icon
the-button-sidebar(id="calendar" path="#/calendar")
calendar-icon
the-button-sidebar(id="user" path="#/user")
user-icon
.bottom-button-container
the-button-sidebar(id="settings" path="#/settings")
settings-icon
</template>
<script>
import HomeIcon from '@/components/iconsComponents/HomeIcon';
import CalendarIcon from '@/components/iconsComponents/CalendarIcon';
import UserIcon from '@/components/iconsComponents/UserIcon';
import SettingsIcon from '@/components/iconsComponents/SettingsIcon';
import TheButtonSidebar from "@/components/theComponents/TheButtonSidebar";
export default {
name: "SidebarComponent",
components: {TheButtonSidebar, HomeIcon, CalendarIcon, UserIcon, SettingsIcon},
}
</script>
<style lang="sass">
.sidebar-container
display: flex
flex-direction: column
justify-content: space-between
flex: auto
padding: 24px 0 24px 0
box-sizing: border-box
max-width: 80px
background-color: #F8F8FF
.top-button-container
display: flex
flex-direction: column
row-gap: 24px
</style>