Merge branch 'master' into UC-21

server.js

@@ -255,8 +255,8 @@ export function clientsServer() {
         results: [
           {
             id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
-            start: "2022-10-20T20:23:49Z",
+            start: "2022-10-24T20:23:49Z",
-            end: "2022-10-20T21:23:53Z",
+            end: "2022-10-24T21:23:53Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -296,10 +296,53 @@ export function clientsServer() {
               },
             ],
           },
+          {
+            id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
+            start: "2022-10-24T15:23:49Z",
+            end: "2022-10-24T16:23:53Z",
+            kind: "call",
+            subkind: null,
+            description: "",
+            location: null,
+            members: [
+              {
+                id: "f7648f9a-e824-4bb3-a260-2b32dae9bc74",
+                person: {
+                  id: "98dd401c-2b7b-4d9a-9159-720c74d8b23v",
+                  last_name: "Захарченко",
+                  first_name: "Юлия",
+                  patronymic: "Николаевна",
+                },
+                role: null,
+              },
+            ],
+            employees: [
+              {
+                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
+                employee: {
+                  id: "db541a67-e836-481f-a653-6325de7c567e",
+                  last_name: "Захарова",
+                  first_name: "Ольга",
+                  patronymic: "Александровна",
+                },
+                role: null,
+              },
+              {
+                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
+                employee: {
+                  id: "db831a14-e836-481f-a653-6325de7c311e",
+                  last_name: "Жмыхов",
+                  first_name: "Егор",
+                  patronymic: "Сергеевич",
+                },
+                role: "owner",
+              },
+            ],
+          },
           {
             id: "7faa7bb7-2de6-422c-a401-1b35cd455303",
-            start: "2022-10-20T10:00:00Z",
+            start: "2022-10-23T10:00:00Z",
-            end: "2022-10-20T11:10:00Z",
+            end: "2022-10-23T11:10:00Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -315,6 +358,16 @@ export function clientsServer() {
                 },
                 role: null,
               },
+              {
+                id: "a9239f9a-e824-4bb3-a260-2b32dae9bc76",
+                person: {
+                  id: "15ff465c-2b7b-4d9a-9159-720c74d8b56d",
+                  last_name: "Елесеевская",
+                  first_name: "Татьяна",
+                  patronymic: "Ивановна",
+                },
+                role: "primary",
+              },
             ],
             employees: [
               {
@@ -341,20 +394,20 @@ export function clientsServer() {
           },
           {
             id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
-            start: "2022-10-20T10:00:00Z",
+            start: "2022-10-24T10:00:00Z",
-            end: "2022-10-20T11:10:00Z",
+            end: "2022-10-24T11:10:00Z",
             kind: "call",
             subkind: null,
             description: "",
             location: null,
             members: [
               {
-                id: "b0509f9a-e824-4bb3-a260-2b32dae9bc81",
+                id: "a9239f9a-e824-4bb3-a260-2b32dae9bc76",
                 person: {
-                  id: "14ff401c-2b7b-4d9a-9159-720c74d8b23c",
+                  id: "15ff465c-2b7b-4d9a-9159-720c74d8b56d",
-                  last_name: "Гагарин",
+                  last_name: "Елесеевская",
-                  first_name: "Юрий",
+                  first_name: "Татьяна",
-                  patronymic: "Алексеевич",
+                  patronymic: "Ивановна",
                 },
                 role: null,
               },
@@ -383,26 +436,36 @@ export function clientsServer() {
             ],
           },
           {
-            id: "6faa6bb2-1de4-425c-a401-1b35cd455303",
+            id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
-            start: "2022-10-20T20:23:49Z",
+            start: "2022-10-24T10:00:00Z",
-            end: "2022-10-20T21:23:53Z",
+            end: "2022-10-24T11:10:00Z",
             kind: "call",
             subkind: null,
             description: "",
             location: null,
             members: [
               {
-                id: "b0509f9a-e824-4bb3-a260-2b32dae9bc81",
+                id: "a9239f9a-e824-4bb3-a260-2b32dae9bc76",
                 person: {
-                  id: "14ff401c-2b7b-4d9a-9159-720c74d8b23c",
+                  id: "15ff465c-2b7b-4d9a-9159-720c74d8b56d",
-                  last_name: "Гагарин",
+                  last_name: "Елесеевская",
-                  first_name: "Юрий",
+                  first_name: "Татьяна",
-                  patronymic: "Алексеевич",
+                  patronymic: "Ивановна",
                 },
                 role: null,
               },
             ],
             employees: [
+              {
+                id: "f451a0c3-c734-4f73-91c2-d7a5674459e422",
+                employee: {
+                  id: "dv841a15-e867-331f-a658-6325de7c311e",
+                  last_name: "Коломойцев",
+                  first_name: "Илья",
+                  patronymic: "Петрович",
+                },
+                role: "owner",
+              },
               {
                 id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
                 employee: {
@@ -413,16 +476,6 @@ export function clientsServer() {
                 },
                 role: null,
               },
-              {
-                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
-                employee: {
-                  id: "db831a14-e836-481f-a653-6325de7c311e",
-                  last_name: "Жмыхов",
-                  first_name: "Егор",
-                  patronymic: "Сергеевич",
-                },
-                role: null,
-              },
             ],
           },
         ],

src/assets/sass/variables.sass

@@ -27,3 +27,4 @@
   --light-grey-bg-color: #f8f9fa
   --btn-green-color: rgba(60, 217, 75, 1)
   --btn-light-green-color: rgba(60, 217, 75, 0.2)
+  --border-light-grey-color-1: rgba(211, 212, 220, 0.5)

src/components/base/BaseInput.vue

@@ -1,7 +1,8 @@
 <template lang="pug">
   .input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5" :style="{ minWidth: widthInput + 'px' }")
-    img.cursor-pointer( v-if="withIcon" :class="position" src="@/assets/icons/search-black.svg" alt="SearchTable")
+    input.w-full.outline-0.text-base.not-italic(:style="{ backgroundColor: backgroundInput, fontSize: fontSizeInput }" :value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
-    input.w-full.outline-0.text-base.not-italic(:style="{ backgroundColor: backgroundInput, fontSize: fontSizeInput }" :value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder")
+    .slot(v-if="withIcon" :class="iconPosition")
+      slot.cursor-pointer
 </template>
 
 <script>
@@ -11,11 +12,14 @@ export default {
     type: {
       default: "text",
     },
+    maxLength: Number,
     value: String,
     withIcon: {
       default: false,
     },
-    iconPosition: String,
+    iconPosition: {
+      default: "right",
+    },
     placeholder: {
       default: "Поиск",
     },
@@ -23,20 +27,12 @@ export default {
     backgroundInput: String,
     fontSizeInput: String,
   },
-  computed: {
-    position() {
-      if (this.iconPosition === "right") {
-        return "right";
-      }
-      return "left";
-    },
-  },
 };
 </script>
 
 <style lang="sass" scoped>
 .left
-  order: 0
+  order: -1
 .right
   order: 1
 .input-wrapper

src/pages/calendar/components/CalendarBackground.vue

@@ -8,6 +8,7 @@
       :key="owner.id"
       :owner-data="owner"
       :style="calculateColumnPosition(index)"
+      :day-events="filterEventsByOwner(owner)"
       )
     .header(:style="backgroundExtendedWidth")
     .body.flex.flex-col(
@@ -29,6 +30,8 @@ export default {
   props: {
     hoursArray: Array,
     eventsData: Array,
+    currentDate: Object,
+    sidebarWidth: String,
   },
   data() {
     return {
@@ -91,11 +94,19 @@ export default {
         (previous, subsequent) => Boolean(subsequent.id) - Boolean(previous.id)
       );
     },
+    filteredEventsByDate() {
+      return this.eventsData.filter(
+        ({ start }) =>
+          start.slice(0, 10) === this.currentDate.format("YYYY-MM-DD")
+      );
+    },
   },
   methods: {
     calculateColumnPosition(elemIndex) {
+      let deductible = parseInt(this.sidebarWidth.slice(0, -2), 10) - 72;
       if (this.ownersArrayLength < 4) {
-        this.columnWidth = this.backgroundWidth / this.ownersArrayLength;
+        this.columnWidth =
+          (this.backgroundWidth - deductible) / this.ownersArrayLength;
         return {
           width: `${this.columnWidth}px`,
           height: `${this.backgroundHeight}px`,
@@ -116,6 +127,18 @@ export default {
         (item) => JSON.stringify(item) === JSON.stringify(object)
       );
     },
+    filterEventsByOwner(owner) {
+      let filteredArray = [];
+      this.filteredEventsByDate.forEach((item) => {
+        let foundEvent = item.employees.find(
+          (elem) =>
+            JSON.stringify(elem.employee) === JSON.stringify(owner) &&
+            elem.role === "owner"
+        );
+        if (foundEvent) filteredArray.push(item);
+      });
+      return filteredArray;
+    },
   },
   mounted() {
     this.calculateBackgroundWidth();

src/pages/calendar/components/CalendarColumn.vue

@@ -6,16 +6,23 @@
         span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       base-doc-ok-button
-    div
+    .px-1
+      calendar-event-card(
+        v-for="event in dayEvents"
+        :key="event.id"
+        :ownerEvent="event"
+        )
 </template>
 
 <script>
 import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
+import CalendarEventCard from "./CalendarEventCard.vue";
 export default {
   name: "CalendarColumn",
-  components: { BaseDocOkButton },
+  components: { BaseDocOkButton, CalendarEventCard },
   props: {
     ownerData: Object,
+    dayEvents: Array,
   },
   computed: {
     ownerName() {

src/pages/calendar/components/CalendarEventCard.vue

@@ -0,0 +1,55 @@
+<template lang="pug">
+  .wrapper.flex.px-2.my-1.cursor-pointer
+    .header.flex.justify-between.items-center
+      .header-text
+        span.inline-block.align-middle.font-bold.text-base.mr-4 {{ eventTime }}
+        span.inline-block.align-middle.font-medium.text-base {{ eventMember }}
+  </template>
+
+<script>
+export default {
+  name: "CalendarEventCard",
+  props: {
+    ownerEvent: Object,
+  },
+  computed: {
+    eventTime() {
+      return `${this.trimTime(this.ownerEvent.start)} - ${this.trimTime(
+        this.ownerEvent.end
+      )}`;
+    },
+    eventMember() {
+      let membersArray = this.ownerEvent.members;
+      if (membersArray.length > 1) {
+        let primaryMember = membersArray.find(
+          (elem) => elem.role === "primary"
+        );
+        return this.composeFullName(primaryMember.person);
+      }
+      return this.composeFullName(membersArray[0].person);
+    },
+  },
+  methods: {
+    trimTime(time) {
+      return time.slice(11, -4);
+    },
+    composeFullName(object) {
+      return `${object.last_name} ${object.first_name} ${object.patronymic}`;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  width: 100%
+  height: 23px
+  border-radius: 4px
+  background-color: var(--bg-event-yellow-color)
+  color: var(--font-black-color)
+  position: relative
+  z-index: 2
+
+.header
+  width: 100%
+</style>

src/pages/calendar/components/CalendarSchedule.vue

@@ -16,8 +16,10 @@
           :day-end-time="validateEndTime"
           )
       calendar-background(
+        :current-date="currentDate"
         :hours-array="hoursArray"
         :events-data="eventsData"
+        :sidebar-width="sidebarWidth"
         )
       .time-circle-indicator.left-74px(
         v-if="isShownIndicator"

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -5,18 +5,22 @@
       .flex.items-center.gap-x-8(v-if="isOpenChange")
         base-button-ok(@click="saveChange" v-if="isChange" :size="20" :icon-size="10" :dark-style="true")
         .edit.icon-edit.cursor-pointer.text-sm(v-if="!isChange" @click="changeClientData")
-        base-button-plus(v-if="settings[section].addFile" :size="20" :icon-size="10" :with-border="true")
+        .flex.relative
+          base-button-plus(v-if="settings[section].addFile" :size="20" :icon-size="10" :with-border="true" @click="openAddingWrap")
+          table-adding-new-doc(v-if="section === 'docs' && isOpenAddingWrap" :add-new-doc="addNewDoc" :save-docs="saveDocs" :new-docs="docData")
+          table-adding-new-additional(v-if="section === 'additional' && isOpenAddingWrap" :new-additional-data="additionalData" :add-new-additional="addDocAdditional" :save-additional="saveDocs" )
     .section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4
       .flex.flex-col(v-for="(item, key) in sectionInfo" class="gap-y-1.5")
         span.title-section.font-semibold.text-xs(v-if="settings[section].options") {{settings[section].options[key]}}
         span.title-section.font-semibold.text-xs(v-if="item.header") {{item.header}}
         client-detail-input.text-sm.text-sm.w-max-fit(v-if="isChange && item.value" :style="{fontWeight:item.copy&&600}" v-model:value="item.value" :width="settings[section].width")
           .copy.icon-copy.cursor-pointer(v-if="item.copy")
-        .flex.gap-x-4(v-if="item.value && !isChange")
+        .flex(v-if="item.value && !isChange")
           span.text-sm.w-fit(:style="{fontWeight:item.copy&&600}") {{item.value}}
-          .copy.icon-copy.cursor-pointer(v-if="item.copy")
+          .copy.icon-copy.cursor-pointer.pl-4(v-if="item.copy")
-        .flex.gap-x-4(v-if="item.name")
+        .flex.items-center(v-if="item.name")
-          .icon-files.cursor-pointer(:style="{color:settings.docsColor[item.type]}")
+          .icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(v-if="isChange" :id="item.name" @click="(e) => deleteDoc(e, section)")
+          .icon-files.cursor-pointer.pr-3.text-xl(:style="{color:settings.docsColor[item.type]}")
           span.text-sm {{item.name}}
 </template>
 
@@ -24,16 +28,34 @@
 import ClientDetailInput from "@/pages/clients/components/ClientDetailInput";
 import BaseButtonOk from "@/components/base/buttons/BaseButtonOk";
 import BaseButtonPlus from "@/components/base/buttons/BaseButtonPlus";
+import TableAddingNewDoc from "@/pages/clients/components/TableAddingNewDoc";
+import TableAddingNewAdditional from "@/pages/clients/components/TableAddingNewAdditional";
 import { detail } from "@/pages/clients/utils/tableConfig";
 export default {
   name: "ClientDetailInfoSection",
-  components: { BaseButtonPlus, BaseButtonOk, ClientDetailInput },
+  components: {
+    TableAddingNewAdditional,
+    BaseButtonPlus,
+    BaseButtonOk,
+    ClientDetailInput,
+    TableAddingNewDoc,
+  },
   props: {
+    saveNewDoc: Function,
     sectionInfo: Object,
     section: String,
+    deleteDoc: Function,
   },
   data() {
     return {
+      additionalData: {
+        header: "",
+        value: "",
+        name: "",
+        type: "",
+      },
+      docData: [],
+      isOpenAddingWrap: false,
       isOpenChange: false,
       isChange: false,
       settings: detail,
@@ -50,6 +72,32 @@ export default {
       this.isOpenChange = false;
       this.isChange = false;
     },
+    openAddingWrap() {
+      this.isOpenAddingWrap = true;
+    },
+    addNewDoc(e) {
+      this.docData = [...this.docData, ...e.target.files];
+    },
+    addDocAdditional(e) {
+      this.additionalData.name = e.target.files[0].name;
+      this.additionalData.type = e.target.files[0].type;
+    },
+    saveDocs() {
+      if (this.section === "additional") {
+        this.saveNewDoc(this.section, [this.additionalData]);
+      } else {
+        this.saveNewDoc(this.section, this.docData);
+      }
+      this.isOpenAddingWrap = false;
+      this.isOpenChange = false;
+      this.docData = [];
+      this.additionalData = {
+        header: "",
+        value: "",
+        name: "",
+        type: "",
+      };
+    },
   },
 };
 </script>
@@ -87,4 +135,8 @@ export default {
   color: var(--btn-blue-color)
   &:hover
     opacity: 0.6
+.cancel
+  color: var(--font-grey-color)
+  &:hover
+    opacity: 0.6
 </style>

src/pages/clients/components/ClientDetailInfoWrapper.vue

@@ -7,8 +7,8 @@
     .flex.flex-col.gap-y-2
       client-detail-info-section(:section-info="dataDetail.birthday" section="birthday")
       client-detail-info-section(:section-info="dataDetail.addresses" section="addresses")
-    client-detail-info-section(:section-info="dataDetail.docs" section="docs")
+    client-detail-info-section(:section-info="dataDetail.docs" section="docs" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
-    client-detail-info-section(:section-info="dataDetail.additional" section="additional")
+    client-detail-info-section(:section-info="dataDetail.additional" section="additional" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
 </template>
 
 <script>
@@ -18,6 +18,8 @@ export default {
   components: { ClientDetailInfoSection },
   props: {
     dataDetail: Object,
+    saveNewDoc: Function,
+    deleteDoc: Function,
   },
 };
 </script>

src/pages/clients/components/ClientDetailInput.vue

@@ -13,7 +13,7 @@ export default {
   },
   computed: {
     heightInput() {
-      return ((this.width / 100) * 70) / 8;
+      return ((this.width / 100) * 70) / 11;
     },
   },
 };

src/pages/clients/components/ClientsTableHat.vue

@@ -3,11 +3,12 @@
     .flex.gap-2.w-fit.h-fit
       .input
         base-input(:with-icon="true")
+          .icon-search
       button.filter-button.flex.items-center.justify-center.box-border(class="px-2.5")
         .icon-filter.text-xl.leading-4
     clients-table-header-actions(v-if="!!isOpenActions" :is-selected-one="isOpenActions===1")
     .flex.w-fit.h-fit.gap-x-2
-      bass-export-button(:only-icon="true")
+      base-export-button(:only-icon="true")
       base-create-button(@click="openFormCreate" :with-icon="true")
 
 </template>
@@ -15,13 +16,13 @@
 <script>
 import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
 import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
-import BassExportButton from "@/components/base/buttons/BassExportButton";
+import BaseExportButton from "@/components/base/buttons/BaseExportButton";
 import BaseInput from "@/components/base/BaseInput";
 export default {
   name: "ClientsTableHat",
   components: {
     BaseInput,
-    BassExportButton,
+    BaseExportButton,
     BaseCreateButton,
     ClientsTableHeaderActions,
   },

src/pages/clients/components/ClientsTableRow.vue

@@ -14,7 +14,7 @@
       .dots.flex.justify-center.items-center
         .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(:tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
           clients-action-popup(v-if="isOpenPopup")
-    client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-detail="dataDetail")
+    client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-detail="dataDetail" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
 </template>
 
 <script>
@@ -85,6 +85,21 @@ export default {
     handleUnFocusPopup() {
       this.isOpenPopup = false;
     },
+    saveNewDoc(section, data) {
+      this.dataDetail[section] = [...this.dataDetail[section], ...data];
+    },
+    deleteDoc(e, section) {
+      if (section === "additional") {
+        this.dataDetail[section].forEach((el, index) => {
+          if (el.name === e.target.id) {
+            delete this.dataDetail[section][index].name;
+          }
+        });
+      }
+      this.dataDetail[section] = this.dataDetail[section].filter(
+        (el) => el.name !== e.target.id
+      );
+    },
   },
 };
 </script>

src/pages/clients/components/TableAddingNewAdditional.vue

@@ -0,0 +1,66 @@
+<template lang="pug">
+  .flex.absolute.flex-col.items-end.right-3.top-5
+    .corner
+    .wrap.flex.flex-col.p-4.gap-y-4
+      .flex.flex-col.gap-y-1
+        base-input(:with-icon="true" v-model:value="newAdditionalData.header" icon-position="right" :max-length="140" placeholder="Заголовок")
+          span.counter {{`${newAdditionalData.header.length}/140`}}
+        .description.flex.px-4.py-3
+          textarea.w-full.h-full.outline-0.resize-none(:value="newAdditionalData.value" @input="$emit('update:newAdditionalData.value', $event.target.value)" placeholder="Описание" style="py-10")
+      .place.flex.flex-col.justify-center.items-center.py-3
+        .upload.text-center.text-sm.flex.w-fit
+          input.hidden(@change="(e) => addNewAdditional(e)" type="file" id="file-upload")
+          span Загрузите элемент
+            label.label.cursor-pointer(for="file-upload")  с компьютера
+            span  или перетащите их сюда
+      base-create-button(text="Добавить" @click="saveAdditional")
+</template>
+
+<script>
+import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
+import BaseInput from "@/components/base/BaseInput";
+export default {
+  name: "TableAddingNewAdditional",
+  components: { BaseInput, BaseCreateButton },
+  props: {
+    addNewAdditional: Function,
+    saveAdditional: Function,
+    newAdditionalData: Object,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrap
+  width: 485px
+  height: fit-content
+  background-color: var(--default-white)
+  border-radius: 8px 0 8px 8px
+  box-shadow: var(--default-shadow)
+.corner
+  width: 8px
+  height: 8px
+  border-top-left-radius: 100%
+  background-color: var(--default-white)
+  z-index: 2
+  overflow: hidden
+.place
+  width: 100%
+  border: 2px dashed var(--font-grey-color)
+  border-radius: 4px
+  color: var(--font-grey-color)
+.upload
+  width: 240px
+.name-doc
+  border-radius: 4px
+  background-color: var(--border-light-grey-color-1)
+  width: fit-content
+.description
+  min-height: 77px
+  border-radius: 4px
+  border: 2px solid var(--border-light-grey-color)
+.label
+  color: var(--btn-blue-color)
+.counter
+  color: var(--font-grey-color)
+</style>

src/pages/clients/components/TableAddingNewDoc.vue

@@ -0,0 +1,57 @@
+<template lang="pug">
+  .flex.absolute.flex-col.items-end.right-3.top-5
+    .corner
+    .wrap.flex.flex-col.p-4.gap-y-4
+      .flex.flex-col.gap-y-2
+        .place.flex.flex-col.justify-center.items-center.py-3
+          .upload.text-center.text-sm.flex.w-fit
+            input.hidden(@change="(e) => addNewDoc(e)" type="file" id="file-upload" multiple)
+            span Загрузите элемент
+              label.label.cursor-pointer(for="file-upload")  с компьютера
+              span  или перетащите их сюда
+        .flex.flex-col
+          span.name-doc.py-2.px-3(v-for="doc in newDocs") {{doc.name}}
+      base-create-button(text="Добавить" @click="saveDocs")
+</template>
+
+<script>
+import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
+export default {
+  name: "TableAddingNewDoc",
+  components: { BaseCreateButton },
+  props: {
+    addNewDoc: Function,
+    saveDocs: Function,
+    newDocs: Array,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrap
+  width: 485px
+  height: fit-content
+  background-color: var(--default-white)
+  border-radius: 8px 0 8px 8px
+  box-shadow: var(--default-shadow)
+.corner
+  width: 8px
+  height: 8px
+  border-top-left-radius: 100%
+  background-color: var(--default-white)
+  z-index: 2
+  overflow: hidden
+.place
+  width: 100%
+  border: 2px dashed var(--font-grey-color)
+  border-radius: 4px
+  color: var(--font-grey-color)
+.upload
+  width: 240px
+.name-doc
+  border-radius: 4px
+  background-color: var(--border-light-grey-color-1)
+  width: fit-content
+.label
+  color: var(--btn-blue-color)
+</style>