Merge branch 'ASTRA-46' into 'master'

Resolve ASTRA-46 See merge request andrusyakka/urban-couscous!322
2023-04-20 16:17:32 +00:00
parent 3776ac6c7d 1fae0f4ac4
commit b1a7d106ea
5 changed files with 142 additions and 65 deletions
--- a/src/components/base/BaseCategorySelection.vue
+++ b/src/components/base/BaseCategorySelection.vue
@@ -2,13 +2,19 @@
  .selection-wrapper.flex
    .left-side.flex.flex-col.gap-y-4
      .flex.font-bold.text-xl Категории
-      base-input(placeholder="Поиск", outlined, :width="300")
-        .flex.items-center.cursor-pointer
-          q-icon(
-            name="app:icon-search",
-            size="18px",
-            style="color: var(--font-dark-blue-color)"
-          )
+      base-input(
+        placeholder="Поиск",
+        @keyup.enter="searchCategory",
+        v-model="searchBenefit",
+        outlined,
+        :width="300",
+        iconLeft
+      )
+        q-icon(
+          name="app:icon-search",
+          size="20px",
+          style="color: var(--font-grey-color)"
+        )
      .field.flex.flex-col.overflow-y-scroll
        .flex.items-center(
          v-for="benefit in benefitData",
@@ -24,7 +30,11 @@
          .name.flex.items-center.font-medium.text-xm {{benefit.name}}
      .buttons-group.flex.py-4.px-8.justify-center
        base-button.text-base.font-semibold(outlined, :size="40", @click="closeModalCategories") Отменить
-        base-button.text-base.font-semibold(:size="40", @click="saveCategories(selected[0])") Сохранить
+        base-button.text-base.font-semibold(
+          v-if="selected.length > 0",
+          :size="40",
+          @click="saveCategories(selected[0])"
+        ) Сохранить
    .right-side.flex.px-14.font-bold.relative
      q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
      .flex.py-10.gap-y-6.flex-col(v-if="selected.length > 0 && selected[0]?.name !== 'Без льготы'")
@@ -58,10 +68,12 @@ export default {
    shiftSelected: Function,
    closeModalCategories: Function,
    saveCategories: Function,
+    showModal: Boolean,
  },
  data() {
    return {
      selected: [],
+      searchBenefit: "",
    };
  },
  computed: {
@@ -75,6 +87,11 @@ export default {
      return this.selected[0]?.privileges.split(",");
    },
  },
+  methods: {
+    searchCategory() {
+      this.$emit("search", this.searchBenefit);
+    },
+  },
  watch: {
    selected: {
      immediate: true,
@@ -83,6 +100,12 @@ export default {
        if (this.selected.length >= 2) this.selected.shift();
      },
    },
+    showModal: {
+      immediate: true,
+      handler(newVal) {
+        if (!newVal) this.searchBenefit = "";
+      },
+    },
  },
 };
 </script>
@@ -91,6 +114,7 @@ export default {
 .selection-wrapper
  width: 895px
  height: 660px
+  font-feature-settings: 'pnum' on, 'lnum' on

 .left-side
  width: 364px
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -22,10 +22,12 @@
      :autogrow="autogrow",
      :square="square",
      :standout="standout"
-      :accept="accept"
+      :accept="accept",
      hide-bottom-space
    )
-      slot.cursor-pointer
+      template(v-slot:prepend, v-if="iconLeft")
+        slot
+      slot.cursor-pointer(v-if="!iconLeft")
 </template>

 <script>
@@ -85,6 +87,7 @@ export default {
    disabled: Boolean,
    label: String,
    readonly: Boolean,
+    iconLeft: Boolean,
  },
  emits: ["update:modelValue"],
  computed: {
--- a/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
@@ -13,7 +13,8 @@
        .font-semibold.text-sm.whitespace-nowrap {{insurance.insuranceLabel}}
        .flex.w-full.justify-between.items-center.gap-4(
          v-for="field in insurance.fields",
-          :key="insurance.insuranceKey + field.key"
+          :key="insurance.insuranceKey + field.key",
+          :style="{marginTop: field.label === 'Документы' ? '20px' : null}"
        )
          .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
          .avatar-field.flex.gap-3.items-center.h-10.w-10(v-if="field.type === 'avatar'")
@@ -25,7 +26,7 @@
            .replace-photo.font-medium.text-base.cursor-pointer(
              v-if="isEdit",
              @click="changeModal(insurance.insuranceKey)"
-            ) {{ basic[insurance.insuranceKey][field.key] ? "Заменить фото" : "Добавить фото"}}
+            ) {{ basic[insurance.insuranceKey][field.key]?.photo ? "Заменить фото" : "Добавить фото" }}
            base-modal(
              v-if="insurance.insuranceKey === photoId"
              v-model="showModal",
@@ -36,13 +37,15 @@
                v-model="basic[photoId][field.key]"
                :confirm-upload="confirmChangePhoto" 
              )
-          .flex.h-10.relative(v-else-if="field.type === 'select'")
-            .flex(@click="openModalCategories")
-              q-field.items-center.cursor-pointer(
-                standout,
-                :disable="!isEdit",
-                :outlined="isEdit",
-              ) {{selectCategory(basic[insurance.insuranceKey][field.key])}}
+          .flex.h-10.relative(
+            v-else-if="field.type === 'select'",
+            @click="openModalCategories"
+          )
+            q-field.items-center.cursor-pointer(
+              standout,
+              :readonly="!isEdit",
+              :outlined="isEdit",
+            ) {{selectCategory(basic[insurance.insuranceKey][field.key])}}
            base-modal(
              default-padding,
              hide-header,
@@ -52,9 +55,11 @@
              base-category-selection(
                :benefit-data="benefitData",
                :close-modal-categories="closeModalCategories",
-                :save-categories="saveCategories"
+                :save-categories="saveCategories",
+                :show-modal="showModalCategories",
+                @search="filterDataBenefit"
              )
-            .flex.font-medium.text-smm.absolute.top-10(
+            .flex.font-medium.text-smm.absolute.top-11(
              v-if="basic?.benefit[insurance?.discount]",
              :style="{color: 'var(--font-grey-color)'}"
            )
@@ -62,23 +67,28 @@
              span(
                :style="{color: 'var(--font-dark-blue-color)'}"
              ) {{"\xa0" + basic?.benefit[insurance?.discount] + "%"}}
-          .flex.flex-col.relative(v-else)
+          .input-container.flex.flex-col.relative(v-else)
            base-input(
              v-model="basic[insurance.insuranceKey][field.key]",
              @update:model-value="checkChangeInput",
              :mask="field?.inputMask",
-              :disabled="!isEdit",
+              :readonly="!isEdit",
              :standout="!isEdit",
              :outlined="isEdit",
              :type="field.type",
-              :width="278",
              text-color="black"
            )
+              q-icon.my-auto.text-lg.label-field.cursor-pointer(
+                size="18px",
+                name="app:icon-copy",
+                v-if="checkCopiedFields(field.key)",
+                @click="copyValue(basic[insurance.insuranceKey][field.key])"
+              )
 </template>

 <script>
 import { baseInsuranceForm } from "@/pages/newMedicalCard/utils/medicalConfig";
-import { mapActions, mapGetters, mapState } from "vuex";
+import { mapGetters, mapState } from "vuex";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseAvatar from "@/components/base/BaseAvatar.vue";
 import { fetchWrapper } from "@/shared/fetchWrapper";
@@ -86,6 +96,8 @@ import BaseInput from "@/components/base/BaseInput.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import BaseUploadPhoto from "@/components/base/BaseUploadPhoto.vue";
 import BaseCategorySelection from "@/components/base/BaseCategorySelection.vue";
+import { checkChangeData } from "@/shared/utils/changesObjects";
+import { addNotification } from "@/components/Notifications/notificationContext";

 export default {
  name: "InsuranceForm",
@@ -106,6 +118,7 @@ export default {
      showModal: false,
      showModalCategories: false,
      photoId: "",
+      copiedFields: ["series", "number"],
    };
  },
  computed: {
@@ -118,22 +131,32 @@ export default {
      basic: (state) => state.medical.basicData,
      benefitData: (state) => state.medical.benefitData,
    }),
-    ...mapActions({
-      fetchBenefitData: "getBenefitData",
-    }),
  },
  methods: {
+    filterDataBenefit(text) {
+      if (text.length > 1) {
+        localStorage.setItem("searchBenefit", text);
+        this.$store.dispatch("getBenefitDataSearch");
+      } else {
+        this.$store.dispatch("getBenefitData");
+        localStorage.removeItem("searchBenefit", text);
+      }
+    },
+    checkCopiedFields(key) {
+      return !this.isEdit && this.copiedFields.some((elem) => elem === key);
+    },
+    copyValue(text) {
+      navigator.clipboard.writeText(text);
+    },
    selectCategory(str) {
-      return str && str.length > 30
-        ? str.substr(0, 30) + "..."
-        : !str
-        ? "Выберите категорию"
-        : str;
+      if (str) return str.length > 30 ? str.substr(0, 30) + "..." : str;
+      return "Выберите категорию";
    },
    saveCategories(obj) {
      this.showModalCategories = false;
      this.basic.benefit.id = obj.id;
      this.basic.benefit.name = obj.name;
+      this.basic.benefit.discount = obj.discount;
      this.isCheckChange = true;
    },
    changeModal(id) {
@@ -199,10 +222,9 @@ export default {
        ) {
          insuranceFormDataDMS.append("title", "DMS");
          insuranceFormDataDMS.append("person", personal.id);
-          return fetchWrapper.post(
+          return this.sendData(
            `general/insurance_policy/create/`,
-            insuranceFormDataDMS,
-            "formData"
+            insuranceFormDataDMS
          );
        }
        if (
@@ -213,41 +235,53 @@ export default {
        ) {
          insuranceFormDataOMS.append("title", "OMS");
          insuranceFormDataOMS.append("person", personal.id);
-          return fetchWrapper.post(
+          return this.sendData(
            `general/insurance_policy/create/`,
-            insuranceFormDataOMS,
-            "formData"
+            insuranceFormDataOMS
          );
        }
        if (
+          checkChangeData(this.initDataBasic.insuranceDMS, insuranceDMS) &&
          key === "insuranceDMS" &&
-          insuranceDMS.id &&
-          (insuranceDMS.number ||
-            insuranceDMS.series ||
-            insuranceDMS.photo.file)
+          insuranceDMS.id
        ) {
          insuranceFormDataDMS.append("title", "DMS");
-          return fetchWrapper.post(
+          return this.sendData(
            `general/insurance_policy/${insuranceDMS.id}/update/`,
-            insuranceFormDataDMS,
-            "formData"
+            insuranceFormDataDMS
+          );
+        } else if (
+          insuranceDMS.id &&
+          (!insuranceDMS.series || !insuranceDMS.number)
+        ) {
+          this.addErrorNotification(
+            "Ошибка заполнения формы ДМС",
+            "Пожалуйста заполните все поля"
          );
        }
        if (
+          checkChangeData(this.initDataBasic.insuranceOMS, insuranceOMS) &&
          key === "insuranceOMS" &&
-          insuranceOMS.id &&
-          (insuranceOMS.number ||
-            insuranceOMS.series ||
-            insuranceOMS.photo.file)
+          insuranceOMS.id
        ) {
          insuranceFormDataOMS.append("title", "OMS");
-          return fetchWrapper.post(
+          return this.sendData(
            `general/insurance_policy/${insuranceOMS.id}/update/`,
-            insuranceFormDataOMS,
-            "formData"
+            insuranceFormDataOMS
+          );
+        } else if (
+          insuranceOMS.id &&
+          (!insuranceOMS.series || !insuranceOMS.number)
+        ) {
+          this.addErrorNotification(
+            "Ошибка заполнения формы ОМС",
+            "Пожалуйста заполните все поля"
          );
        }
-        if (key === "benefit" && benefit.id) {
+        if (
+          checkChangeData(this.initDataBasic.benefit, benefit) &&
+          key === "benefit"
+        ) {
          fetchWrapper.post(`general/person/${personal.id}/update/`, {
            benefit: benefit.id,
          });
@@ -256,16 +290,22 @@ export default {
            benefit.photo.photo !== this.initDataBasic.benefit.photo.photo
          ) {
            benefitFormData.append("photo_benefit", benefit.photo.file[0]);
-            return fetchWrapper.post(
+            return this.sendData(
              `general/person/${personal.id}/update/`,
-              benefitFormData,
-              "formData"
+              benefitFormData
            );
          }
        }
      });
      return request;
    },
+    addErrorNotification(title, message) {
+      addNotification(title + message, title, message, "error", 5000);
+    },
+
+    async sendData(url, body) {
+      return await fetchWrapper.post(url, body, "formData");
+    },
    cancelEdit() {
      this.$store.dispatch("returnInitData");
      this.isEdit = false;
@@ -290,7 +330,7 @@ export default {
    showModalCategories: {
      immediate: true,
      handler(newVal) {
-        if (newVal) this.fetchBenefitData;
+        if (newVal) this.$store.dispatch("getBenefitData");
      },
    },
  },
@@ -311,12 +351,12 @@ export default {
 .avatar
  height: 100%

+.input-container
+  width: 302px
+
 .replace-photo
  color: var(--btn-blue-color)

-.input
-  color: purple
-
 .form-wrap
  display: grid
  grid-template-columns: repeat(3, 1fr)
--- a/src/pages/newMedicalCard/utils/medicalConfig.js
+++ b/src/pages/newMedicalCard/utils/medicalConfig.js
@@ -250,13 +250,13 @@ export const baseInsuranceForm = [
        key: "series",
        label: "Серия",
        type: "text",
-        inputMask: "######",
+        inputMask: "####",
      },
      {
        key: "number",
        label: "Номер",
        type: "text",
-        inputMask: "##########",
+        inputMask: "####-####-####",
      },
      {
        key: "photo",
@@ -273,13 +273,13 @@ export const baseInsuranceForm = [
        key: "series",
        label: "Серия",
        type: "text",
-        inputMask: "######",
+        inputMask: "####",
      },
      {
        key: "number",
        label: "Номер",
        type: "text",
-        inputMask: "##########",
+        inputMask: "####-####-####",
      },
      {
        key: "photo",
--- a/src/store/modules/medicalCard.js
+++ b/src/store/modules/medicalCard.js
@@ -47,6 +47,7 @@ const state = () => ({
    },
    benefit: {
      id: null,
+      discount: null,
      name: null,
      photo: null,
    },
@@ -129,6 +130,7 @@ const getters = {
      benefit: {
        name: person?.benefit?.name,
        id: person?.benefit?.id,
+        discount: person?.benefit?.discount,
        photo: person?.photo_benefit
          ? {
              photo: rootState.getUrl + person?.photo_benefit,
@@ -212,6 +214,14 @@ const actions = {
      commit("setBenefitData", res.results);
    });
  },
+  getBenefitDataSearch({ commit }) {
+    fetchWrapper
+      .get(`general/benefit/?name=${localStorage.getItem("searchBenefit")}`)
+      .then((res) => {
+        commit("setBenefitData", res.results);
+      });
+  },
+
  getMedicalCardData({ commit }) {
    fetchWrapper
      .get(