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_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": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -12675,6 +12683,18 @@
"integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
"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": {
"version": "1.9.1",
"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"
}
},
"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": {
"version": "4.3.4",
"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": {
"version": "1.9.1",
"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">
div(class="app-container")
header-component
div(class="pages-container")
sidebar-component
.app-container
the-header
.pages-container
the-sidebar
router-view
</template>
<script>
import HeaderComponent from "./components/homePageComponents/HeaderComponent";
import SidebarComponent from "./components/homePageComponents/SidebarComponent";
import TheHeader from "@/components/theComponents/TheHeader";
import TheSidebar from "@/components/theComponents/TheSidebar";
export default {
name: 'App',
components: {HeaderComponent, SidebarComponent}
components: {TheHeader, TheSidebar}
}
</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>
<script>
import PlusIcon from "../iconsComponents/PlusIcon";
import BasicIcon from "../iconsComponents/basicIcon/BasicIcon";
import PlusIcon from "@/components/iconsComponents/PlusIcon"
import BasicIcon from "@/components/iconsComponents/basicIcon/BasicIcon";
export default {
name: "ButtonPlus",
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">
form-add-event
</template>
<script>

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

@@ -1,73 +1,73 @@
<template lang="pug">
div.event-form-change(v-if="formOpen")
div.form-item-container
div.close-icon-position
.event-form-change(v-if="formOpen")
.form-item-container
.close-icon-position
span.title-form Ответственный
basic-icon.close-icon(width="16" height="16" icon-color="#252850" @click="closeEventForm")
close-icon
div.input-container(@click="openSelectResponsible")
div.form-select
div.form-item-input.select-container-res {{eventData.responsible}}
div.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}}
div.select-form-separator
.input-container(@click="openSelectResponsible")
.form-select
.form-item-input.select-container-res {{eventData.responsible}}
.option-container(v-if="selectResponsibleOpen" id="responsible" @click="(event)=>chooseOption(event)")
.option-item(v-for="(responsible, index) in listResponsible" :key="index" :id="index") {{responsible}}
.select-form-separator
basic-icon(width="24" height="24" icon-color="#090A15")
arrow-down-icon
div.form-item-container
.form-item-container
span.title-form Оновная информация
div.form-inform-container
.form-inform-container
basic-icon(width="24" height="24" icon-color="#090A15" )
clock-icon
div.time-input-container
div.input-container
.time-input-container
.input-container
input.form-item-input(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
span —
div.input-container
.input-container
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")
user-icon
div.input-container
.input-container
input.form-item-input(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
div.form-item-container(class='additional-information')
div.form-inform-container
.form-item-container(class='additional-information')
.form-inform-container
span.title-form Дополнительная информация
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}}
div.input-container
.input-container
input.form-item-input(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное")
div.form-item-container
.form-item-container
span.title-form Вид события
div.input-container(@click="openSelectKindEvent")
div.form-select
div.form-item-input.select-container-kind {{eventData.kindEvent}}
div.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}}
div.select-form-separator
.input-container(@click="openSelectKindEvent")
.form-select
.form-item-input.select-container-kind {{eventData.kindEvent}}
.option-container(v-if="selectKindEventOpen" id="kind" @click="(event)=>chooseOption(event)")
.option-item(v-for="(kind, index) in kindEvents" :key="index" :id="index") {{kind}}
.select-form-separator
basic-icon(width="24" height="24" icon-color="#090A15")
arrow-down-icon
div.form-item-container
div.form-inform-container
.form-item-container
.form-inform-container
span.title-form Контакты
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")
mail-icon
div.input-container
.input-container
input.form-item-input(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
add-event-button(@click="createEvent")
</template>
<script>
import BasicIcon from "../../iconsComponents/basicIcon/BasicIcon";
import ArrowDownIcon from "../../iconsComponents/ArrowDownIcon";
import ClockIcon from "../../iconsComponents/ClockIcon";
import UserIcon from "../../iconsComponents/UserSmallIcon";
import MailIcon from "../../iconsComponents/MailIcon";
import CloseIcon from "../../iconsComponents/CloseIcon"
import AddEventButton from "../../buttons/AddEventButton";
import ButtonPlus from "../../buttons/ButtonPlus";
import BasicIcon from "@/components/iconsComponents/basicIcon/BasicIcon";
import ArrowDownIcon from "@/components/iconsComponents/ArrowDownIcon";
import ClockIcon from "@/components/iconsComponents/ClockIcon";
import UserIcon from "@/components/iconsComponents/UserSmallIcon";
import MailIcon from "@/components/iconsComponents/MailIcon";
import CloseIcon from "@/components/iconsComponents/CloseIcon"
import AddEventButton from "@/components/baseComponents/buttons/AddEventButton";
import ButtonPlus from "@/components/baseComponents/buttons/ButtonPlus";
export default {
name: "FormChangeEvent",
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">
div.header-wrapper
div.header-left-side
img.logo-img(src="../../assets/images/logo.svg" alt="Logo")
div.header-right-side
div.header-inputs-wrapper
img.search-icon(src="../../assets/icons/search.svg" alt="Search")
.header-wrapper
.header-left-side
img.logo-img(src="@/assets/images/logo.svg" alt="Logo")
.header-right-side
.header-inputs-wrapper
img.search-icon(src="@/assets/icons/search.svg" alt="Search")
select.header-inputs.select(v-model="selectedFilter")
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="Искать ...")
button.header-buttons.btn-notification
img.bell-icon(src="../../assets/icons/bell.svg" alt="Notifications")
div.avatar-wrapper
img.bell-icon(src="@/assets/icons/bell.svg" alt="Notifications")
.avatar-wrapper
img.avatar-img(:src="avatarSrc")
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>
<script>
import img from '../../assets/images/avatar.svg'
import img from '@/assets/images/avatar.svg'
export default {
name: 'HeaderComponent',
data() {
@@ -33,7 +33,7 @@
<style lang='sass'>
input
padding: 0
padding: 0
.header-buttons
outline: none
@@ -59,12 +59,12 @@
.header-left-side
box-sizing: border-box
margin: 4px 0
height: 32px
height: 32px
cursor: pointer
.logo-img
height: 32px
width: 70px
width: 70px
.header-inputs-wrapper
display: inline-block
@@ -78,12 +78,12 @@
height: 24px
width: 24px
color: var(--btn-blue-color)
opacity: 0.7
opacity: 0.7
.btn-notification
display: flex
justify-content: center
align-items: center
align-items: center
margin-right: 32px
.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>