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

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",
@@ -123,7 +129,8 @@
               .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].description",
+                placeholder="Описание"
               )
             .flex.items-center(v-if="item.title && section !== 'additional'")
               .icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(
@@ -148,6 +155,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 +174,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 +198,7 @@ export default {
     dopeAddress: Object,
     createAddress: Function,
     createDocument: Function,
+    createNote: Function,
     addressId: String,
     docId: String,
   },
@@ -313,10 +322,12 @@ 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();
+          this.createNote();
+        } 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,12 +627,12 @@ export default {
             );
         });
     },
-    postCreateNote() {
+    postCreateNote(title, description) {
       fetchWrapper
         .post("general/note/create/", {
           person_id: this.id,
-          title: this.dataNotes[0].title,
-          description: this.dataNotes[0].title,
+          title: title,
+          description: 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>