Merge pull request #210 from dderbentsov/UC-155

[WIP] Доработал note и возможность их создания, добавил уведомление об ошибке

src/components/base/BaseInput.vue

@@ -9,7 +9,7 @@
       :type="type",
       @input="$emit('update:value', $event.target.value)",
       :placeholder="placeholder",
-      :maxlength="maxLength",
+      :maxLength="maxLength",
       :max="maxDate",
       :disabled="disabled"
     )

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -54,6 +54,12 @@
               v-click-outside="closeAddDocs"
             )
             table-create-package-doc(v-if="isOpenPackage")
+          base-popup.right-3.top-5(
+            v-if="section === 'additional' && isOpenAddingWrap",
+            v-click-outside="closePopup",
+            :width="485"
+          )
+            table-create-note(:create-note="createNote", :close-popup="closePopup")
     transition(name="section", mode="out-in")
       .flex.justify-center.items-center(
         v-if="sectionDataPresence",
@@ -120,10 +126,16 @@
             .flex.flex-col.gap-y-4(v-if="section === 'addresses' && isChange")
               client-detail-section-address(:dope-address="dopeAddress")
             .flex.flex-col.gap-y-2(v-if="section === 'additional' && isChange")
-              .title-section.text-xxs.font-semibold {{item.title}}
+              //- .title-section.text-xxs.font-semibold {{item.title}}
               client-detail-input.text-sm.w-max-fit(
                 :style="{fontWeight:key === 'numba'&&600}",
-                v-model:value="sectionInfo[key].description"
+                v-model:value="sectionInfo[key].title",
+                placeholder="Заголовок"
+              )
+              client-detail-input.text-sm.w-max-fit(
+                :style="{fontWeight:key === 'numba'&&600}",
+                v-model:value="sectionInfo[key].description",
+                placeholder="Описание"
               )
             .flex.items-center(v-if="item.title && section !== 'additional'")
               .icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(
@@ -148,6 +160,7 @@ import BaseButton from "@/components/base/BaseButton";
 import TableAddingNewDoc from "@/pages/clients/components/TableAddingNewDoc";
 import TableAddingNewAdditional from "@/pages/clients/components/TableAddingNewAdditional";
 import TableCreatePackageDoc from "@/pages/clients/components/TableCreatePackageDoc";
+import TableCreateNote from "@/pages/clients/components/TableCreateNote";
 import ClientDetailSectionAddress from "@/pages/clients/components/ClientDetailSectionAddress";
 import TableChoiceAddingDoc from "@/pages/clients/components/TableChoiceAddingDoc";
 import BasePopup from "@/components/base/BasePopup";
@@ -166,17 +179,17 @@ export default {
     BaseInputDate,
     BasePopup,
     BaseModal,
+    BaseLoader,
     ClientDetailInput,
     ClientDetailSectionAddress,
     TableAddingNewAdditional,
     TableCreatePackageDoc,
     TableAddingNewDoc,
     TableChoiceAddingDoc,
-    BaseLoader,
+    TableCreateNote,
   },
   props: {
     saveNewDoc: Function,
-    createNote: Function,
     sectionInfo: Object,
     section: String,
     deleteDoc: Function,
@@ -190,6 +203,7 @@ export default {
     dopeAddress: Object,
     createAddress: Function,
     createDocument: Function,
+    createNote: Function,
     addressId: String,
     docId: String,
   },
@@ -252,6 +266,7 @@ export default {
         this.isOpenAddDoc = true;
       } else if (this.section === "additional") {
         this.isNotes = true;
+        this.isOpenAddingWrap = true;
       }
     },
     changeOpenAddDoc() {
@@ -313,10 +328,11 @@ export default {
         } else this.updateAddress();
       }
       if (this.section === "additional") {
-        if (!this.sectionInfo[0].id) {
+        if (!this.sectionInfo[0]?.id) {
           this.isNotes = false;
-          this.createAddress();
-        } else this.updateNotes();
+        } else {
+          this.updateNotes();
+        }
       }
     },
     copyValue(text) {

src/pages/clients/components/ClientDetailInfoWrapper.vue

@@ -46,7 +46,6 @@ export default {
     dataAttachments: Array,
     dataNotes: Array,
     saveNewDoc: Function,
-    createNote: Function,
     deleteDoc: Function,
     dataDocument: Object,
     updateDocument: Function,
@@ -59,6 +58,7 @@ export default {
     dopeAddress: Object,
     createAddress: Function,
     createDocument: Function,
+    createNote: Function,
     addressId: String,
     docId: String,
   },

src/pages/clients/components/ClientsTableRow.vue

@@ -433,9 +433,15 @@ export default {
       this.lackAttachments = this.dataAttachments[0]?.id ? true : false;
     },
     saveNote(data) {
-      this.dataNotes = [...data.note];
-      this.lackNotes = this.dataNotes[0]?.id ? true : false;
+      if (data?.note[0]) {
+        this.dataNotes = [...data.note];
+        this.lackNotes = true;
+      } else {
+        this.lackNotes = false;
+        this.dataNotes = [{ title: "", description: "" }];
+      }
     },
+
     saveIdentityDocument(data) {
       if (data?.id) {
         this.docId = data.id;
@@ -621,22 +627,37 @@ export default {
             );
         });
     },
-    postCreateNote() {
-      fetchWrapper
-        .post("general/note/create/", {
-          person_id: this.id,
-          title: this.dataNotes[0].title,
-          description: this.dataNotes[0].title,
-        })
-        .then(() => this.fetchClientDetail(this.id));
+    postCreateNote(title, description) {
+      if (!title || !description) {
+        this.addErrorNotification(
+          "Ошибка создания дополнительных данных",
+          "Все поля должны быть заполнены"
+        );
+      } else
+        fetchWrapper
+          .post("general/note/create/", {
+            person_id: this.id,
+            title: title,
+            description: description,
+          })
+          .then(() => this.fetchClientDetail(this.id));
     },
     postUpdateNotes() {
-      fetchWrapper
-        .post(`general/note/${this.dataNotes[0].id}/update/`, {
-          title: this.dataNotes[0].title,
-          description: this.dataNotes[0].description,
-        })
-        .then(() => this.fetchClientDetail(this.id));
+      this.dataNotes.forEach((e) => {
+        if (!e.title || !e.description) {
+          this.addErrorNotification(
+            "Ошибка изменения дополнительных данных",
+            "Поля не могут быть пустыми"
+          );
+          this.fetchClientDetail(this.id);
+        } else
+          fetchWrapper
+            .post(`general/note/${e.id}/update/`, {
+              title: e.title,
+              description: e.description,
+            })
+            .then(() => this.fetchClientDetail(this.id));
+      });
     },
   },
 

src/pages/clients/components/TableCreateNote.vue

@@ -0,0 +1,65 @@
+<template lang="pug">
+  .flex.flex-col.gap-y-3
+    .flex.flex-col.gap-y-3.relative
+      base-input.text-smm(placeholder="Заголовок", v-model:value="title", :maxLength="40")
+      .text.flex.absolute.text-xsx.right-7.top-3 {{`${changeValue}/40`}}
+    .input-wrapper.flex.gap-x-2.px-4.box-border.w-max-fit.text-smm(class="py-2.5")
+      textarea.place-input.w-full.outline-0.not-italic.resize-none(
+        :cols="24",
+        placeholder="Описание",
+        v-model="description"
+      )
+    .flex
+      base-button(:size="40", @click="sendNote") Добавить
+</template>
+
+<script>
+import BaseButton from "@/components/base/BaseButton";
+import BaseInput from "@/components/base/BaseInput";
+export default {
+  name: "TableCreateNote",
+  components: { BaseButton, BaseInput },
+  props: {
+    createNote: Function,
+    closePopup: Function,
+  },
+  data() {
+    return {
+      username: "",
+      title: "",
+      description: "",
+    };
+  },
+  computed: {
+    changeValue() {
+      return this.title.length;
+    },
+  },
+  methods: {
+    sendNote() {
+      this.createNote(this.title, this.description);
+      this.closePopup();
+      this.title = "";
+      this.description = "";
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.title
+  min-height: 39px
+.description
+  min-height: 70px
+.input-wrapper
+  border: 2px solid var(--border-light-grey-color)
+  border-radius: 4px
+  background-color: var(--default-white)
+textarea
+  overflow: hidden
+.text
+  color: var(--font-grey-color)
+.button
+  &:hover
+    opacity: 0.7
+</style>

src/pages/clients/utils/tableConfig.js

@@ -175,6 +175,9 @@ export const detail = {
   },
   additional: {
     title: "Дополнительные данные",
+    placeholder: {
+      numba: "Редактировать данные",
+    },
     height: 280,
     width: 360,
     addFile: true,

tailwind.config.js

@@ -10,6 +10,7 @@ module.exports = {
         xsm: ["10px", { lineHeight: "12px" }],
         ins: ["11px", { lineHeight: "12px" }],
         xxs: ["12px", { lineHeight: "14px" }],
+        xsx: ["12px", { lineHeight: "16px" }],
         xs: ["13px", { lineHeight: "15px" }],
         xss: ["13px", { lineHeight: "19px" }],
         sm: ["14px", { lineHeight: "16px" }],