From a770a3615468286d74d1661df08cda07bd47e244 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 20 Apr 2023 21:26:58 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BF=D1=80=D0=BE=D0=B2=D0=B5=D1=80?=
 =?UTF-8?q?=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseInput.vue             |   6 +-
 .../BasicDataForms/DocumentsForm.vue          | 202 +++++++++---------
 .../newMedicalCard/utils/medicalConfig.js     |  42 ++--
 src/shared/utils/rulesInputs.js               |  13 ++
 src/store/modules/medicalCard.js              |  14 +-
 5 files changed, 144 insertions(+), 133 deletions(-)

diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index 8f57aa5..8caeb18 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -1,9 +1,10 @@
 <template lang="pug">
-  base-input-container.gap-y-2(:label="label")
+  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
     q-input(
       v-model="value",
+      :name="name",
       :class="{'circle': circle, 'font-input': true}",
-      :input-style="{ color: textColor, width: width + 'px' , borderColor: borderColor}",
+      :input-style="{ color: textColor, borderColor: borderColor}",
       :borderless="borderless",
       :placeholder="placeholder",
       :outlined="outlined",
@@ -11,7 +12,6 @@
       :type="type",
       :readonly="readonly",
       :disable="disabled",
-      :name="name"
       :filled="filled",
       :bg-color="filled || standout ? '' : 'white'",
       :rules="rule",
diff --git a/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
index b39390c..a307d56 100644
--- a/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
@@ -7,7 +7,7 @@
     :open-edit="openEdit",
     :save="saveChange"
   )
-    .form-wrap.gap-24.w-full
+    q-form.form-wrap.gap-24.w-full(ref="documentForm", :no-error-focus="true")
       .data-section.flex.flex-col.gap-4(v-for="data in configData", :key="data.dataLabel")
         .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
         .flex.w-full.justify-between.items-center.gap-4(
@@ -16,11 +16,22 @@
         )
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
           .photo-field.flex.gap-3.items-center(v-if="field.type === 'photo'")
-            img.h-10.w-10.object-cover(
-              v-if="docData[data.dataKey][field.key]?.photo",
-              :src="docData[data.dataKey][field.key]?.photo",
-              :alt="docData[data.dataKey][field.label]",
+            q-avatar(
+              square,
+              size="40px",
+              v-if="docData[data.dataKey][field.key]?.photo"
             )
+              img.h-10.w-10.object-cover(
+                :src="docData[data.dataKey][field.key]?.photo",
+                :alt="docData[data.dataKey][field.label]"
+              )
+              q-badge.delete(
+                floating,
+                v-if="isEdit",
+                rounded,
+                @click="removeImage(data?.dataKey, field?.key)"
+              )
+                q-icon(name="app:icon-cancel", size="8px")
             .replace-photo.font-medium.text-base.cursor-pointer(
               v-if="isEdit",
               @click="openModal(data.dataKey)",
@@ -33,15 +44,17 @@
           base-input(
             v-else,
             v-model="docData[data.dataKey][field.key]",
-            @update:model-value="checkChangeDocData"
+            :name="field.key",
+            @update:model-value="checkChangeDocData",
             :readonly="!isEdit",
             :type="field.type",
-            textColor="var(--font-dark-blue-color)"
-            :width="checkCopiedFields(field.key) ? 260 : 278",
+            textColor="var(--font-dark-blue-color)",
+            :width="302",
             :standout="!isEdit",
             :outlined="isEdit", 
+            :mask="field?.inputMask",
             :rule="field.rules",
-            :mask="field?.inputMask"
+            :autogrow="field.key === 'issued_by_org'"
           )
             .icon-copy.my-auto.text-lg.label-field(
               v-if="checkCopiedFields(field.key)",
@@ -56,9 +69,11 @@ import BaseInput from "@/components/base/BaseInput.vue";
 import BaseAvatar from "@/components/base/BaseAvatar.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import BaseUploadPhoto from "@/components/base/BaseUploadPhoto.vue";
-import { checkChangeData } from "@/shared/utils/changesObjects.js";
+import {
+  checkChangeData,
+  getFieldsNameUnvalidated,
+} from "@/shared/utils/changesObjects.js";
 import { fetchWrapper } from "@/shared/fetchWrapper.js";
-import * as moment from "moment/moment";
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
 import { addNotification } from "@/components/Notifications/notificationContext";
 export default {
@@ -103,6 +118,7 @@ export default {
           photo_tax_identification_number: null,
         },
       },
+      personDataField: ["insurance_number", "tax_identification_number"],
       showModal: false,
       photoId: "",
     };
@@ -113,6 +129,10 @@ export default {
     },
   },
   methods: {
+    removeImage(docKey, field) {
+      this.docData[docKey][field] = {};
+      this.isCheckChange = true;
+    },
     copyValue(text) {
       navigator.clipboard.writeText(text);
     },
@@ -141,103 +161,74 @@ export default {
       this.isCheckChange = true;
     },
     saveChange() {
-      this.updateDocData();
-    },
-    updateDocData() {
-      let { insurance_number: insurance, tax_identification_number: tax } =
-        this.docData;
-      let passport = JSON.parse(JSON.stringify(this.docData.passport));
-      passport.issued_by_date = moment(passport.issued_by_date).format(
-        "YYYY-MM-DD"
-      );
-      passport.photo = this.docData.passport.photo;
-      let initData = JSON.parse(JSON.stringify(this.initialDocData));
-      initData.passport.issued_by_date = moment(
-        initData.passport.issued_by_date
-      ).format("YYYY-MM-DD");
-      let documentsFormData = new FormData();
-      let passportFormData = new FormData();
-      this.fillResultData(initData, passport, "passport", passportFormData);
-      this.fillResultData(
-        initData,
-        insurance,
-        "insurance_number",
-        documentsFormData
-      );
-      this.fillResultData(
-        initData,
-        tax,
-        "tax_identification_number",
-        documentsFormData
-      );
-      let request = [];
-      if (!passport.id)
-        request.push(
-          this.sendData("general/identity_document/create/", passportFormData)
-        );
-      else
-        request.push(
-          this.sendData(
-            `general/identity_document/${passport.id}/update/`,
-            passportFormData
-          )
-        );
-      request.push(
-        this.sendData(
-          `general/person/${this.$store.state.medical?.basicData?.personalData?.id}/update/`,
-          documentsFormData
-        )
-      );
-      Promise.allSettled(request).then(() => {
-        this.$store.dispatch("getMedicalCardData");
-        this.isEdit = false;
-        this.isCheckChange = false;
-      });
-    },
-    fillResultData(initObj, updateObj, id, formData) {
-      Object.keys(updateObj).forEach((key) => {
-        let config = this.configData
-          .find(({ dataKey }) => dataKey === id)
-          ?.fields.find((el) => el.key === key);
-        if (
-          config?.type === "photo" &&
-          this.checkChengePhoto(initObj[id], updateObj, key)
-        ) {
-          if (config.inputMask && !config.checkField(updateObj[key])) {
-            this.addErrorNotification(
-              config.errorMessage.title,
-              config.errorMessage.message
+      const form = this.$refs.documentForm;
+      form.validate().then((validate) => {
+        if (!validate) {
+          getFieldsNameUnvalidated(form).forEach((elem) => {
+            let error = {};
+            this.configData.forEach(({ fields }) => {
+              let findedElem = fields.find((el) => el.key === elem);
+              if (findedElem) error = findedElem?.errorMessage;
+            });
+            this.addErrorNotification(error?.title, error?.message);
+          });
+          this.cancelEdit();
+        } else {
+          let passportFormData = new FormData();
+          let documentsFormData = new FormData();
+          form.getValidationComponents().forEach((elem) => {
+            if (!this.personDataField.includes(elem.name))
+              passportFormData.append(elem.name, elem.modelValue ?? "");
+            else documentsFormData.append(elem.name, elem.modelValue ?? "");
+          });
+          this.checkChengePhoto("passport", "photo", passportFormData);
+          this.checkChengePhoto(
+            "insurance_number",
+            "photo_insurance_number",
+            documentsFormData
+          );
+          this.checkChengePhoto(
+            "tax_identification_number",
+            "photo_tax_identification_number",
+            documentsFormData
+          );
+          let request = [];
+          if (!this.initialDocData.passport?.id) {
+            passportFormData.append("kind", "PASSPORT");
+            passportFormData.append(
+              "person",
+              this.$store.state.medical?.basicData?.personalData?.id
             );
-            return;
-          }
-          formData.append(key, updateObj[key]?.file[0]);
-          return;
-        }
-        if (
-          config?.type !== "photo" &&
-          this.checkChangeField(initObj[id], updateObj, key)
-        ) {
-          if (config.inputMask && !config.checkField(updateObj[key])) {
-            this.addErrorNotification(
-              config.errorMessage.title,
-              config.errorMessage.message
+            request.push(
+              this.sendData(
+                "general/identity_document/create/",
+                passportFormData
+              )
             );
-            return;
-          }
-          formData.append(key, updateObj[key]);
-          return;
+          } else
+            request.push(
+              this.sendData(
+                `general/identity_document/${this.initialDocData.passport?.id}/update/`,
+                passportFormData
+              )
+            );
+          request.push(
+            this.sendData(
+              `general/person/${this.$store.state.medical?.basicData?.personalData?.id}/update/`,
+              documentsFormData
+            )
+          );
+          Promise.allSettled(request).then(() => {
+            this.$store.dispatch("getMedicalCardData");
+            this.isEdit = false;
+            this.isCheckChange = false;
+          });
         }
       });
-      return;
     },
-    checkChangeField(initObj, updatedObj, field) {
-      return updatedObj[field] && initObj[field] !== updatedObj[field];
-    },
-    checkChengePhoto(initObj, updatedObj, field) {
-      return (
-        updatedObj[field]?.file &&
-        initObj[field]?.photo !== updatedObj[field]?.photo
-      );
+    checkChengePhoto(updatedObjId, field, formData) {
+      if (this.docData[updatedObjId][field]?.file)
+        formData.append(field, this.docData[updatedObjId][field]?.file[0]);
     },
     async sendData(url, body) {
       return await fetchWrapper.post(url, body, "formData");
@@ -280,4 +271,9 @@ export default {
   min-width: 302px
 .icon-copy .cursor
   cursor: pointer !important
+.q-badge
+  padding: 4px
+  cursor: pointer
+.delete
+  background-color: var(--btn-red-color)
 </style>
diff --git a/src/pages/newMedicalCard/utils/medicalConfig.js b/src/pages/newMedicalCard/utils/medicalConfig.js
index 28fb543..942a278 100644
--- a/src/pages/newMedicalCard/utils/medicalConfig.js
+++ b/src/pages/newMedicalCard/utils/medicalConfig.js
@@ -3,6 +3,8 @@ import {
   ruleEmailValue,
   ruleMaxLength,
   ruleNotValue,
+  ruleDateValue,
+  ruleOptionalFields,
 } from "@/shared/utils/rulesInputs";
 
 export const baseDataForm = [
@@ -369,49 +371,53 @@ export const documentForm = [
         label: "Серия",
         type: "text",
         inputMask: "####",
-        checkField: (field) => {
-          return field.length === 4;
-        },
         errorMessage: {
           title: "Ошибка валидации",
-          message: "Серия паспорта заполнена неправильно",
+          message: "Серия паспорта менее 4 цифр или не заполнена",
         },
+        rules: [(val) => ruleLengthValue(val, 4)],
       },
       {
         key: "number",
         label: "Номер",
         type: "text",
         inputMask: "######",
-        checkField: (field) => {
-          return field.length === 6;
-        },
         errorMessage: {
           title: "Ошибка валидации",
-          message: "Номер паспорта заполнен неправильно",
+          message: "Номер паспорта менее 6 цифр или не заполнен",
         },
+        rules: [(val) => ruleLengthValue(val, 6)],
       },
       {
         key: "issued_by_org",
         label: "Кем выдан",
         type: "text",
+        errorMessage: {
+          title: "Ошибка валидации",
+          message: "Поле 'Кем выдан' не заполнено",
+        },
+        rules: [(val) => ruleNotValue(val)],
       },
       {
         key: "issued_by_org_code",
         label: "Код подраздел.",
         type: "text",
         inputMask: "###-###",
-        checkField: (field) => {
-          return field.length === 7;
-        },
         errorMessage: {
           title: "Ошибка валидации",
-          message: "Код подразделения заполнен неправильно",
+          message: "Код подразделения менее 6 цифр или не заполнен",
         },
+        rules: [(val) => ruleLengthValue(val, 7)],
       },
       {
         key: "issued_by_date",
         label: "Дата выдачи",
         type: "date",
+        rules: [(val) => ruleDateValue(val)],
+        errorMessage: {
+          title: "Ошибка валидации",
+          message: "Дата выдачи паспорта позднее текущего дня",
+        },
       },
       {
         key: "photo",
@@ -429,13 +435,11 @@ export const documentForm = [
         label: "Номер СНИЛС",
         type: "text",
         inputMask: "###-###-### ##",
-        checkField: (field) => {
-          return field.length === 14;
-        },
         errorMessage: {
           title: "Ошибка валидации",
-          message: "СНИЛС заполнен неправильно",
+          message: "СНИЛС содержит менее 11 цифр",
         },
+        rules: [(val) => ruleOptionalFields(val, 14)],
       },
       {
         key: "photo_insurance_number",
@@ -453,13 +457,11 @@ export const documentForm = [
         label: "Номер ИНН",
         type: "text",
         inputMask: "############",
-        checkField: (field) => {
-          return field.length === 12;
-        },
         errorMessage: {
           title: "Ошибка валидации",
-          message: "ИНН заполнен неправильно",
+          message: "ИНН содержит менее 12 цифр",
         },
+        rules: [(val) => ruleOptionalFields(val, 12)],
       },
       {
         key: "photo_tax_identification_number",
diff --git a/src/shared/utils/rulesInputs.js b/src/shared/utils/rulesInputs.js
index 1a1a004..3e61452 100644
--- a/src/shared/utils/rulesInputs.js
+++ b/src/shared/utils/rulesInputs.js
@@ -1,3 +1,4 @@
+import * as moment from "moment/moment";
 export function ruleNotValue(val, text) {
   return !!val || text || false;
 }
@@ -6,6 +7,10 @@ export function ruleLengthValue(val, minLength, text) {
   return (val && val.length === minLength) || text || false;
 }
 
+export function ruleOptionalFields(val, minLength, text) {
+  return !val || val.length === minLength || text || false;
+}
+
 export function ruleEmailValue(val, text) {
   return (
     (val &&
@@ -21,3 +26,11 @@ export function ruleEmailValue(val, text) {
 export function ruleMaxLength(val, maxLength, text) {
   return (!!val && val.length <= maxLength) || text || false;
 }
+
+export function ruleDateValue(val, text) {
+  return (
+    (val && !moment(val).isAfter(moment().format("YYYY-MM-DD"))) ||
+    text ||
+    false
+  );
+}
diff --git a/src/store/modules/medicalCard.js b/src/store/modules/medicalCard.js
index c984dae..ff8ab84 100644
--- a/src/store/modules/medicalCard.js
+++ b/src/store/modules/medicalCard.js
@@ -147,11 +147,11 @@ const getters = {
     );
     return {
       passport: {
-        id: passport?.id,
-        series: passport?.series,
-        number: passport?.number,
-        issued_by_org: passport?.issued_by_org,
-        issued_by_org_code: passport?.issued_by_org_code,
+        id: passport?.id ?? "",
+        series: passport?.series ?? "",
+        number: passport?.number ?? "",
+        issued_by_org: passport?.issued_by_org ?? "",
+        issued_by_org_code: passport?.issued_by_org_code ?? "",
         issued_by_date: passport?.issued_by_date
           ? new Date(passport?.issued_by_date)
           : null,
@@ -163,7 +163,7 @@ const getters = {
           : {},
       },
       insurance_number: {
-        insurance_number: person?.insurance_number,
+        insurance_number: person?.insurance_number ?? "",
         photo_insurance_number: person?.photo_insurance_number
           ? {
               photo: rootState.getUrl + person.photo_insurance_number,
@@ -172,7 +172,7 @@ const getters = {
           : {},
       },
       tax_identification_number: {
-        tax_identification_number: person?.tax_identification_number,
+        tax_identification_number: person?.tax_identification_number ?? "",
         photo_tax_identification_number: person?.photo_tax_identification_number
           ? {
               photo: rootState.getUrl + person?.photo_tax_identification_number,