Изменена архитектура проекта, проправлены инпорты и синтаксис html для pug

2022-10-07 16:38:44 +03:00
parent fd3a415788
commit 9471436477
10 changed files with 148 additions and 107 deletions
--- a/src/components/baseComponents/buttons/AddEventButton.vue
+++ b/src/components/baseComponents/buttons/AddEventButton.vue
--- a/src/components/baseComponents/buttons/ButtonPlus.vue
+++ b/src/components/baseComponents/buttons/ButtonPlus.vue
@@ -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}
--- a/src/components/homePageComponents/SidebarComponent.vue
+++ b/src/components/homePageComponents/SidebarComponent.vue
@@ -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>
--- a/src/components/pages/calendarPages/CalendarPages.vue
+++ b/src/components/pages/calendarPages/CalendarPages.vue
@@ -1,4 +1,5 @@
 <template lang="pug">
+  form-add-event
 </template>

 <script>
--- a/src/components/pages/calendarPages/FormAddEvent.vue
+++ b/src/components/pages/calendarPages/FormAddEvent.vue
@@ -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},
--- a/src/components/theComponents/TheButtonSidebar.vue
+++ b/src/components/theComponents/TheButtonSidebar.vue
--- a/src/components/homePageComponents/HeaderComponent.vue
+++ b/src/components/homePageComponents/HeaderComponent.vue
@@ -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
--- a/src/components/theComponents/TheSidebar.vue
+++ b/src/components/theComponents/TheSidebar.vue
@@ -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>