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

src/assets/icons/close_circle_remove_delete_icon_149506 1 (1).svg

@@ -1,10 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2219_45392)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23.375C18.2822 23.375 23.375 18.2822 23.375 12C23.375 5.71776 18.2822 0.625 12 0.625C5.71776 0.625 0.625 5.71776 0.625 12C0.625 18.2822 5.71776 23.375 12 23.375ZM16.5459 18.8899L18.844 16.5918L14.2478 11.9956L18.8555 7.38793L16.5574 5.08984L11.9497 9.69751L7.35351 5.10131L5.05541 7.39941L9.65161 11.9956L5.06689 16.5803L7.36499 18.8784L11.9497 14.2937L16.5459 18.8899Z" fill="#FF6565"/>
-</g>
-<defs>
-<clipPath id="clip0_2219_45392">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -126,13 +126,26 @@
             .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}}
+              .flex.justify-between
-              client-detail-input.text-sm.w-max-fit(
+                .title-section.text-xxs.font-semibold Заголовок
+                .icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(
+                  v-if="isChange",
+                  :id="item.id",
+                  @click="deleteNote(item.id)"
+                )
+              client-detail-input.text-sm.w-max-fit.pr-12.relative(
+                :maxLength="40",
                 :style="{fontWeight:key === 'numba'&&600}",
                 v-model:value="sectionInfo[key].title",
                 placeholder="Заголовок"
               )
+                .text.flex.absolute.text-xsx.top-18px(
+                  class="right-2.5",
+                  :style="{color: 'var(--font-grey-color)'}"
+                ) {{`${sectionInfo[key].title.length}/40`}}
+              .title-section.text-xxs.font-semibold Описание
               client-detail-input.text-sm.w-max-fit(
+                :maxLength="40",
                 :style="{fontWeight:key === 'numba'&&600}",
                 v-model:value="sectionInfo[key].description",
                 placeholder="Описание"
@@ -193,6 +206,7 @@ export default {
     sectionInfo: Object,
     section: String,
     deleteDoc: Function,
+    deleteNote: Function,
     updateDocument: Function,
     updateAddress: Function,
     updateNotes: Function,

src/pages/clients/components/ClientDetailInfoWrapper.vue

@@ -32,7 +32,8 @@
         :section-info="dataNotes",
         :lack-notes="lackNotes",
         :create-note="createNote",
-        :update-notes="updateNotes"
+        :update-notes="updateNotes",
+        :delete-note="deleteNote"
       )
 </template>
 
@@ -47,6 +48,7 @@ export default {
     dataNotes: Array,
     saveNewDoc: Function,
     deleteDoc: Function,
+    deleteNote: Function,
     dataDocument: Object,
     updateDocument: Function,
     updateAddress: Function,

src/pages/clients/components/ClientDetailInput.vue

@@ -7,6 +7,7 @@
       :cols="24",
       @input="$emit('update:value', $event.target.value)",
       :placeholder="placeholder",
+      :maxLength="maxLength"
     )
     input.w-full.outline-0.not-italic.font-medium(
       v-else,
@@ -30,6 +31,7 @@ export default {
       default: "Поиск",
     },
     rows: Number,
+    maxLength: Number,
   },
   directives: { mask },
   computed: {

src/pages/clients/components/ClientsTableRow.vue

@@ -95,14 +95,15 @@
         :data-notes="dataNotes"
         :save-new-doc="saveNewDoc",
         :delete-doc="deleteDoc",
+        :delete-note="postDeleteNote"
         :update-document="postUpdateIdentityDocument",
         :update-address="postUpdateAddress",
         :update-notes="postUpdateNotes",
         :lack-data="lackData",
         :lack-address="lackAddress",
-        :dope-address="dopeAddress",
         :lack-attachments="lackAttachments",
-        :lack-notes="lackNotes"
+        :lack-notes="lackNotes",
+        :dope-address="dopeAddress",
         :create-address="postCreateAddress",
         :create-document="postCreateIdentityDocument",
         :create-note="postCreateNote",
@@ -433,15 +434,14 @@ export default {
       this.lackAttachments = this.dataAttachments[0]?.id ? true : false;
     },
     saveNote(data) {
-      if (data?.note[0]) {
+      this.dataNotes = data?.note.filter((e) => !e.deleted_flg);
-        this.dataNotes = [...data.note];
+      if (this.dataNotes[0]) {
         this.lackNotes = true;
       } else {
         this.lackNotes = false;
         this.dataNotes = [{ title: "", description: "" }];
       }
     },
-
     saveIdentityDocument(data) {
       if (data?.id) {
         this.docId = data.id;
@@ -659,6 +659,11 @@ export default {
             .then(() => this.fetchClientDetail(this.id));
       });
     },
+    postDeleteNote(noteId) {
+      fetchWrapper
+        .del(`general/note/${noteId}/delete/`)
+        .then(() => this.fetchClientDetail(this.id));
+    },
   },
 
   watch: {

src/pages/clients/components/ClientsWrapper.vue

@@ -34,4 +34,5 @@ export default {
 .wrapper
   overflow: auto
   border-top-left-radius: 4px
+  border-top-right-radius: 4px
 </style>

src/pages/clients/components/TableCreateNote.vue

@@ -16,6 +16,7 @@
 <script>
 import BaseButton from "@/components/base/BaseButton";
 import BaseInput from "@/components/base/BaseInput";
+
 export default {
   name: "TableCreateNote",
   components: { BaseButton, BaseInput },
@@ -25,7 +26,6 @@ export default {
   },
   data() {
     return {
-      username: "",
       title: "",
       description: "",
     };

src/pages/medicalCard/components/MedicalCardWrapper.vue

@@ -11,6 +11,7 @@ export default { name: "MedicalCardWrapper" };
 .wrapper
   overflow: auto
   border-top-left-radius: 4px
+  border-top-right-radius: 4px
 .wrapper-medical
   background-color: var(--default-white)
   height: calc(100vh - 64px)

src/router.js

@@ -4,6 +4,7 @@ import TheUser from "@/pages/clients/TheClients";
 import TheSettings from "@/pages/settings/TheSettings";
 import TheLogin from "@/pages/login/TheLogin";
 import LoggedInLayout from "@/components/LoggedInLayout";
+import TheMedicalCard from "@/pages/medicalCard/TheMedicalCard";
 
 const ifNotAuthenticated = (to, from, next) => {
   if (!localStorage.getItem("tokenAccess")) {
@@ -37,6 +38,7 @@ export default createRouter({
         { path: "calendar", component: TheCalendar },
         { path: "clients", component: TheUser },
         { path: "settings", component: TheSettings },
+        { path: "medicalCard", component: TheMedicalCard },
       ],
     },
   ],

tailwind.config.js

@@ -41,6 +41,7 @@ module.exports = {
         "13px": "13px",
         "14px": "14px",
         "15px": "15px",
+        "18px": "18px",
         "19px": "19px",
         "22px": "22px",
         "23px": "23px",