Добавил возможность добавления документов, поправил стили окна создания документов

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .section-wrapper.flex.flex-col.h-fit.cursor-pointer(
-    :style="{flexDirection:settings[section].rowFlex && 'row', width : settings[section].width + 'px', height : settings[section].height + 'px', background: changeBackground}"
+    :style="{flexDirection:settings[section].rowFlex && 'row', width: settings[section].width + 'px', height: settings[section].height + 'px', background: changeBackground}"
   )
     .section-header.flex.items-center.justify-between.pl-4.pr-3(:class="{small:settings[section].rowFlex}")
       span.text-sm.font-semibold.whitespace-nowrap {{settings[section].title}}
@@ -47,7 +47,7 @@
               :new-docs="docData",
               :close-modal="changeShowModal",
             )
-            table-create-package-doc(v-if="isOpenCreateDoc")
+            table-create-package-doc(v-if="isOpenPackage")
           table-adding-new-additional(
             v-if="section === 'additional' && isOpenAddingWrap"
             :new-additional-data="additionalData",
@@ -109,11 +109,10 @@
               img(:src="iconDictionary[item?.document?.substr(item.document.lastIndexOf('.') + 1)]")
               span.text-sm {{item.title}}
             span.text-sm(v-if="item.document") {{`.${item?.document?.substr(item.document.lastIndexOf(".") + 1)}`}}
-    .section-add-doc.flex.justify-center.items-center.cursor-pointer(
+    .section-add.flex.justify-center.items-center.cursor-pointer(
       v-else,
       @click="openAddDoc"
-    )
+    ) Добавить данные
-      span Добавить данные
 </template>
 
 <script>
@@ -183,9 +182,15 @@ export default {
       isData: true,
       isAddress: true,
       isAttachments: true,
-      iconDictionary: { doc: wordIcon, pdf: pdfIcon, xls: exelIcon },
+      iconDictionary: {
+        doc: wordIcon,
+        docx: wordIcon,
+        odt: wordIcon,
+        pdf: pdfIcon,
+        xls: exelIcon,
+      },
+      isOpenPackage: false,
       isOpenAddDoc: false,
-      isOpenCreateDoc: false,
       showModal: false,
     };
   },
@@ -205,21 +210,23 @@ export default {
         this.isAddress = true;
       } else if (this.section === "docs") {
         this.isAttachments = true;
+        this.showModal = true;
+        this.isOpenAddDoc = true;
       }
     },
     changeOpenAddDoc() {
       this.showModal = true;
-      this.isOpenAddDoc = true;
+      this.isOpenPackage = true;
       this.isOpenAddingWrap = false;
     },
     changeOpenCreateDoc() {
       this.showModal = true;
-      this.isOpenCreateDoc = true;
+      this.isOpenAddDoc = true;
       this.isOpenAddingWrap = false;
     },
     clearDocs() {
+      this.isOpenPackage = false;
       this.isOpenAddDoc = false;
-      this.isOpenCreateDoc = false;
     },
     changeShowModal() {
       this.showModal = false;
@@ -313,18 +320,23 @@ export default {
   color: var(--font-dark-blue-color)
   &.click
     background-color: var(--light-grey-bg-color)
+
 .section-header
   min-height: 44px
   border-bottom: 1px solid var(--border-light-grey-color)
+
 .small
   border-bottom: none
   border-right: 1px solid var(--border-light-grey-color)
   min-width: 180px
+
 .title-section
   color: var(--font-grey-color)
+
 .copy
   color: var(--btn-blue-color)
   opacity: 0.6
+
 .section-body
   overflow-y: auto
   &::-webkit-scrollbar
@@ -335,25 +347,31 @@ export default {
   &::-webkit-scrollbar-thumb
     border-radius: 8px
     background-color: var(--btn-blue-color)
+
 .edit
   color: var(--btn-blue-color)
   &:hover
     opacity: 0.6
+
 .cancel
   color: var(--font-grey-color)
   &:hover
     opacity: 0.6
-.section-add-doc
+
+.section-add
   height: 100%
   min-height: 64px
   color: var(--btn-blue-color)
+
 .line
   width: 100%
   height: 1px
   background-color: var(--border-light-grey-color)
   z-index: 0
+
 .separation
   width: 100%
+
 .text-separation
   width: 38px
   z-index: 1

src/pages/clients/components/ClientsTableRow.vue

@@ -394,6 +394,16 @@ export default {
     },
     saveNewDoc(data) {
       this.dataAttachments = [...data];
+      const formData = new FormData();
+      this.dataAttachments.forEach((e) => {
+        formData.append("person_id", this.id);
+        formData.append("document", e);
+        formData.append("title", e.name.substr(0, e.name.lastIndexOf(".")));
+        fetchWrapper
+          .post("general/attachment/create/", formData, "formData")
+          .then(() => this.fetchClientDetail(this.id));
+      });
+      this.dataAttachments = [];
     },
     deleteDoc(attachmentId) {
       fetchWrapper

src/pages/clients/components/TableChoiceAddingDoc.vue

@@ -1,6 +1,8 @@
 <template lang="pug">
   .flex.flex-col.gap-y-3
-    .button.keep-redaction.flex.items-center.gap-x-2
+    .button.flex.items-center.gap-x-2(
+      :style="{color: 'var(--font-dark-blue-color)'}"
+    )
       img(:src="docIcon")
       .text-smm(@click="changeOpenAddDoc") Создать пакет документов
     .button.keep-redaction.flex.items-center.gap-x-3
@@ -25,9 +27,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.keep-redaction
-  color: var(--font-dark-blue-color)
-
 .button
   &:hover
     opacity: 0.7

src/pages/clients/components/TableCreatePackageDoc.vue

@@ -3,19 +3,22 @@
     .flex.flex.flex-col.gap-y-9
       span.font-bold.text-xl Создание пакета документов
       .flex.justify-center.items-center.gap-x-2
-        base-button(:size="32", :rounded="true")
+        base-button.button(:size="32", :rounded="true")
           span(v-if="!isServices") 1
           .icon-ok.text-xs(v-else)
         span(:style="{color: 'var(--btn-blue-color)'}") Основное
         .line.flex.mx-2
-        base-button(:class="{'active-button': !isServices}", :size="32", :rounded="true") 2
+        base-button.button(:class="{'active-button': !isServices}", :size="32", :rounded="true") 2
         span(:style="{color: isServices ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") Услуги
     .base.flex.flex-col.gap-y-6(v-if="!isServices")
       .flex.flex-col.gap-y-6
         span.font-bold Основное
         .flex.flex-col(class="gap-y-1.5")
           .counter.font-semibold.text-smm Название пакета
-          base-input(v-model:value="packageDocs.packageName", placeholder="Введите название для пакета документов")
+          base-input(
+            v-model:value="packageDocs.packageName",
+            placeholder="Введите название для пакета документов"
+          )
             span.counter 
         .flex.gap-x-4
           .flex.flex-col.w-full(class="gap-y-1.5")
@@ -37,21 +40,41 @@
           .counter.text-smm Выберите подходищие из списка
         .services-wrapper.flex.flex-col.pt-4.px-4
           .flex.gap-x-2
-            base-input(:with-icon="true", icon-position="left", :width-input="310", placeholder="Поиск")
+            base-input(
+              :with-icon="true",
+              icon-position="left",
+              :width-input="310",
+              placeholder="Поиск"
+            )
               .counter.icon-search
             base-select.h-10(placeholder="Вид услуги")
-          .flex.items-center.px-11px.py-9px(:style="{borderBottom: '1px solid var(--btn-grey-color)'}")
+          .flex.items-center.px-11px.py-9px(
+            :style="{borderBottom: '1px solid var(--btn-grey-color)'}"
+          )
             .flex.items-center.gap-x-3
-              input.counter.w-4.h-4.checkbox.cursor-pointer(type="checkbox")
+              input.counter.w-4.h-4.checkbox.cursor-pointer(
+                type="checkbox",
+                @click="selectAll",
+                v-model="isAllServices"
+              )
               .counter.flex.p-2(:style="{width: '358px'}") Название услуги
             .counter Вид услуги
           .list-services.flex.flex-col.px-11px.py-9px
             .flex.items-center(v-for="service in services", :key="service.id")
               .flex.items-center.gap-x-3
-                input.w-4.h-4.checkbox.cursor-pointer(type="checkbox")
+                input.w-4.h-4.checkbox.cursor-pointer(
+                  type="checkbox",
+                  v-model="userIds",
+                  :value="service.id"
+                )
                 .flex.p-2(:style="{width: '358px'}") {{service.name}}
               .counter {{service.type}}
-  base-button.custom-button(v-if="!isServices", :disabled="disabledButton", :size="40", @click="changeServices")
+  base-button.custom-button(
+    v-if="!isServices",
+    :disabled="disabledButton",
+    :size="40",
+    @click="changeServices"
+  )
     span.font-semibold Далее
   base-button.custom-button(:size="40", v-else)
     span.font-semibold Создать пакет документов
@@ -71,6 +94,8 @@ export default {
       packageDocs: {
         packageName: "",
       },
+      isAllServices: false,
+      userIds: [],
       services: [
         { id: 1, name: "Создание сайта", type: "Разработка" },
         {
@@ -102,6 +127,12 @@ export default {
     changeServices() {
       this.isServices = !this.isServices;
     },
+    selectAll() {
+      this.userIds = [];
+      if (!this.isAllServices) {
+        this.services.forEach((el) => this.userIds.push(el.id));
+      }
+    },
   },
 };
 </script>
@@ -110,7 +141,7 @@ export default {
 .wrap
   width: 570px
   height: fit-content
-  min-height: 700px
+  min-height: 640px
 
 .services-wrapper
   border: 1px solid var(--btn-grey-color)
@@ -124,10 +155,18 @@ export default {
   border: 1.5px solid var(--border-light-grey-color)
   border-radius: 4px
 
+.button
+  &:hover
+    background-color: var(--btn-blue-color)
+    border: none
+
 .active-button
   background: var(--btn-grey-color)
   color: var(--font-dark-blue-color)
   border-color: var(--btn-grey-color)
+  &:hover
+    background-color: var(--btn-grey-color)
+    border: none
 
 .line
   width: 78px

src/shared/fetchWrapper.js

@@ -3,10 +3,10 @@ function prepareUrl(url) {
   return `http://45.84.227.122:8080/api/${url}`;
 }
 
-function handleRequest(method, url, headers, attempts, body) {
+function handleRequest(method, url, headers, attempts, body, type) {
   return new Promise((resolve, reject) => {
     (function internalRequest() {
-      return request(method, url, headers, body)
+      return request(method, url, headers, body, type)
         .then(resolve)
         .catch((err) => (--attempts > 0 ? internalRequest() : reject(err)));
     })();
@@ -25,8 +25,9 @@ function handleRequest(method, url, headers, attempts, body) {
  * @param {string} url - endpoint url.
  * @param {object} body - request body.
  * @param {object} headers - request headers
+ * @param {string} type - request type
  */
-function request(method, url, headers = {}, body) {
+function request(method, url, headers = {}, body, type = "") {
   let token = localStorage.getItem("tokenAccess");
   let requestOptions = {};
   if (method === "GET" || method === "DELETE") {
@@ -39,6 +40,17 @@ function request(method, url, headers = {}, body) {
     };
   }
   if (method === "POST" || method === "PUT") {
+    if (type && type === "formData") {
+      requestOptions = {
+        method: method,
+        headers: {
+          Authorization: `Bearer ${token}`,
+          Accept: "application/json",
+          ...headers,
+        },
+        body: body,
+      };
+    } else
       requestOptions = {
         method: method,
         headers: {
@@ -50,6 +62,7 @@ function request(method, url, headers = {}, body) {
         body: JSON.stringify(body),
       };
   }
+
   return fetch(prepareUrl(url), requestOptions);
 }
 
@@ -61,8 +74,8 @@ function del(url, headers, attempts = 3) {
   return handleRequest("DELETE", url, headers, attempts, null);
 }
 
-function post(url, body, headers, attempts = 3) {
+function post(url, body, type, headers, attempts = 3) {
-  return handleRequest("POST", url, headers, attempts, body);
+  return handleRequest("POST", url, headers, attempts, body, type);
 }
 
 function put(url, headers, body, attempts = 3) {