[WIP] Настроил поля ввода документов, карточку создания события

package.json

@@ -8,9 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@vuelidate/core": "^2.0.0",
+    "@vuelidate/validators": "^2.0.0",
     "moment": "^2.29.4",
     "vue": "^3.2.13",
     "vue-router": "^4.1.5",
+    "vue-the-mask": "^0.11.1",
     "vuex": "^4.0.2"
   },
   "devDependencies": {

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.absolute.right-2.bottom-14
     .flex.justify-between
-      span.title.text-xl.font-bold Назначение события
+      span.title.text-xl.font-bold {{!selectedEventData.id ? "Назначение события" : "Изменение события"}}
       .flex.pt-2
         .icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="clearForm")
     .flex.flex-col.gap-y-8
@@ -337,7 +337,9 @@ export default {
       };
     },
     postCreateEvent(event) {
-      fetchWrapper.post("registry/event/create/", event);
+      fetchWrapper
+        .post("registry/event/create/", event)
+        .then(this.$emit("update-events"));
     },
     postUpdateEvent(id, event) {
       fetchWrapper

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -46,6 +46,7 @@ export default {
     sectionInfo: Object,
     section: String,
     deleteDoc: Function,
+    updateDocument: Function,
   },
   data() {
     return {
@@ -75,6 +76,7 @@ export default {
     saveChange() {
       this.isOpenChange = false;
       this.isChange = false;
+      this.updateDocument();
     },
     openAddingWrap() {
       this.isOpenAddingWrap = true;

src/pages/clients/components/ClientDetailInfoWrapper.vue

@@ -1,10 +1,18 @@
 <template lang="pug">
   .w-full.h-fit.pt-4.flex.gap-x-4(class="px-[52px] pb-[30px]")
-    client-detail-info-section(v-model:section-info="dataDocument" section="pass")
+    client-detail-info-section(
+      v-model:section-info="dataDocument"
+      section="pass"
+    )
     .flex.flex-col
       client-detail-info-section(:section-info="dataAddress" section="addresses")
     .flex.flex-col
-      client-detail-info-section(:section-info="dataAttachments" section="docs" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
+      client-detail-info-section(
+        :section-info="dataAttachments"
+        section="docs"
+        :save-new-doc="saveNewDoc"
+        :delete-doc="deleteDoc"
+      )
 </template>
 
 <script>

src/pages/clients/components/ClientsTableRow.vue

@@ -14,7 +14,15 @@
           .icon-ok.text-xsm(class="pt-[3px]")
         .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(v-show="!isOpenChange" :tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
           clients-action-popup(v-if="isOpenPopup" :open-change-data="openChangeData")
-    client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-address="dataAddress" :data-detail="dataDetail" :data-attachments="dataAttachments" :data-document="dataIdentityDocument" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
+    client-detail-info-wrapper(
+      v-if="isOpenDetailInfo"
+      :data-address="dataAddress"
+      :data-detail="dataDetail"
+      :data-attachments="dataAttachments"
+      :data-document="dataIdentityDocument"
+      :save-new-doc="saveNewDoc"
+      :delete-doc="deleteDoc"
+    )
 </template>
 
 <script>
@@ -165,6 +173,14 @@ export default {
     postDeleteContact(contact) {
       fetchWrapper.del(`general/contact/${contact.id}/delete/`);
     },
+    postUpdateIdentityDocument() {
+      fetchWrapper.post(
+        `general/identity_document/${this.identity_document}/update/`,
+        {
+          series_number: this.dataIdentityDocument.numba,
+        }
+      );
+    },
     addNetwork(network) {
       this.dataClient.contacts.push(network);
     },
@@ -200,15 +216,15 @@ export default {
     },
     saveIdentityDocument(data) {
       this.dataIdentityDocument = {
-        numba: data?.numba || "-",
-        issued_by_org: data?.issued_by_org || "-",
-        issued_by_org_code: data?.issued_by_org_code || "-",
-        issued_by_date: data?.issued_by_date || "-",
+        numba: data?.numba || "",
+        issued_by_org: data?.issued_by_org || "",
+        issued_by_org_code: data?.issued_by_org_code || "",
+        issued_by_date: data?.issued_by_date || "",
       };
     },
     saveAddress(data) {
       this.dataAddress = {
-        join_adress: data?.join_adress || "-",
+        join_adress: data?.join_adress || "",
       };
     },
     saveAttachments(data) {

src/pages/clients/components/FormCreateIdentityDocuments.vue

@@ -5,13 +5,13 @@
       .grid.grid-cols-2.gap-x-4.gap-y-6
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm Серия и номер
-          base-input.input-info(v-model:value="identityDocument.pass.series_number" placeholder="0000 000000" :width-input="277")
+          base-input.input-info(v-mask="'#### ######'" v-model:value="identityDocument.pass.series_number" placeholder="0000 000000" :width-input="277")
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm Кем и когда выдан
           base-input.input-info(v-model:value="identityDocument.pass.issued_by_org" placeholder="Точно как в паспорте" :width-input="277")
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm Код подразделения
-          base-input.input-info(v-model:value="identityDocument.pass.issued_by_org_code" placeholder="000–000" :width-input="277")
+          base-input.input-info(v-mask="'###-###'" v-model:value="identityDocument.pass.issued_by_org_code" placeholder="000–000" :width-input="277")
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm Дата выдачи
           base-input.input-info( type="date" v-model:value="identityDocument.pass.issued_by_date" placeholder="Дата" :width-input="277")
@@ -20,10 +20,10 @@
       .grid.grid-cols-2.gap-x-4.gap-y-6
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm Номер СНИЛС
-          base-input.input-info(v-model:value="identityDocument.snils.numba" placeholder="000–000–000 00" :width-input="277")
+          base-input.input-info(v-mask="'###-###-### ##'" v-model:value="identityDocument.snils.numba" placeholder="000–000–000 00" :width-input="277")
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm Номер ИНН
-          base-input.input-info(v-model:value="identityDocument.inn.numba" placeholder="000000000000" :width-input="277")
+          base-input.input-info(v-mask="'##########'" v-model:value="identityDocument.inn.numba" placeholder="000000000000" :width-input="277")
     .px-4
       base-button(@click="saveClient" :size="40")
         span.font-semibold Создать клиента
@@ -32,6 +32,7 @@
 <script>
 import BaseButton from "@/components/base/BaseButton";
 import BaseInput from "@/components/base/BaseInput";
+import { mask } from "vue-the-mask";
 export default {
   name: "FormCreateIdentityDocuments",
   components: { BaseInput, BaseButton },
@@ -39,6 +40,7 @@ export default {
     identityDocument: Object,
     saveClient: Function,
   },
+  directives: { mask },
 };
 </script>