WIP Изменила BaseAddingNetwork

2023-02-21 19:05:12 +03:00
parent 6c1f1279b2
commit 2f2c331189
8 changed files with 212 additions and 164 deletions
--- a/src/components/HeaderInputs.vue
+++ b/src/components/HeaderInputs.vue
@@ -13,10 +13,10 @@
          .icon-wrapper.mr-2.flex.justify-center
            .icon-ok.text-xs.flex.justify-center.items-center(v-if="filter === selectedFilter")
          .flex.items-center {{ filter }}
-    base-input.p-4(
+    q-input.px-4(
      type="text",
      placeholder="Искать ...",
-      text-color="var(--btn-blue-color)",
+      :input-style="{color: 'var(--btn-blue-color)'}",
      borderless,
      square
    )
@@ -109,4 +109,7 @@ export default {
 .icon-down-arrow
  width: 16px
  height: 16px
+
+.input-height
+  height: 38px
 </style>
--- a/src/components/base/BaseAddingNetwork.vue
+++ b/src/components/base/BaseAddingNetwork.vue
@@ -1,25 +1,34 @@
 <template lang="pug">
  .flex.w-full(class="gap-x-1.5")
-    .flex(:id="value.id" @click="(e) => saveNetworkId(e)")
-      base-select-networks(:style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42")
-    base-input.w-full(v-model="value.username", placeholder="Ссылкa" outlined)
+    base-select(:items="items", v-model="network.kind")  
+    base-input.w-full(v-model="network.username", placeholder="Ссылкa", outlined)
 </template>

 <script>
-import BaseSelectNetworks from "@/components/base/BaseSelectNetworks";
 import BaseInput from "@/components/base/BaseInput";
+import BaseSelect from "@/components/base/BaseSelect.vue";
 export default {
  name: "TableAddingNetwork",
-  components: { BaseInput, BaseSelectNetworks },
+  components: { BaseInput, BaseSelect },
  props: {
-    saveNetworkId: {
-      type: Function,
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    network: {
+      type: Object,
      default: () => {},
    },
-    selectedOption: String,
-    value: Object,
-    listAddingNetworks: Array,
-    chooseNetwork: Function,
+  },
+  computed: {
+    networkInternal: {
+      get() {
+        return this.network;
+      },
+      set(val) {
+        this.$emit("update:network", val);
+      },
+    },
  },
 };
 </script>
--- a/src/components/base/BaseClientFormCreate.vue
+++ b/src/components/base/BaseClientFormCreate.vue
@@ -61,38 +61,36 @@
                      @click="closeAddImage",
                      icon="app:icon-ok"
                    )
-          base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*", outlined)
-      .flex.flex-col.flex-auto.l.gap-y-8
-        .flex
-          button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
-            v-for="form in forms",
-            @click="selectForm(form.component)",
-            :class="{active: form.component === currentForm}",
-            :key="form.id",
-            :id="form.id"
-          ) {{form.title}}
-        component(
-          v-bind:is="currentForm",
-          :basic-info="infoClient.basic",
-          :phone="infoClient.phone",
-          :email="infoClient.email",
-          :save-network-id="saveNetworkId",
-          :add-network="addNewNetwork",
-          :choose-option="chooseOptionNetworks",
-          :choose-priority="choosePriority",
-          :priority-list="priorityList",
-          :identity-document="infoClient.identity_document",
-          :addresses="infoClient.addresses",
-          :save-file="saveDocFile",
-        )
-        q-btn(
-          label="Создать клиента",
-          color="primary",
-          style="height: 40px; width: 180px",
-          no-caps,
-          padding="8px 24px",
-          @click="saveClient",
-        )
+        base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*", outlined)
+    .flex.flex-col.flex-auto.l.gap-y-8
+      .flex
+        button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
+          v-for="form in forms",
+          @click="selectForm(form.component)",
+          :class="{active: form.component === currentForm}",
+          :key="form.id",
+          :id="form.id"
+        ) {{form.title}}
+      component(
+        v-bind:is="currentForm",
+        :basic-info="infoClient.basic",
+        :phone="infoClient.phone",
+        :email="infoClient.email",
+        :add-network="addNewNetwork",
+        :priority-list="priorityList",
+        :identity-document="infoClient.identity_document",
+        :addresses="infoClient.addresses",
+        :save-file="saveDocFile",
+        :networks-list="getNetworksList",
+      )
+      q-btn(
+        label="Создать клиента",
+        color="primary",
+        style="height: 40px; width: 180px",
+        no-caps,
+        padding="8px 24px",
+        @click="saveClient",
+      )
 </template>

 <script>
@@ -129,7 +127,7 @@ export default {
  mixins: [v_model],
  data() {
    return {
-      networksSettings: column.find((el) => el.name === "networks"),
+      networksSettings: column.find((el) => el.name === "networks")?.settings,
      prioritySettings: column.find((el) => el.name === "priority"),
      networkId: "",
      infoClient: {
@@ -142,10 +140,11 @@ export default {
          },
          contacts: [
            {
-              id: "network",
-              kind: "TELEGRAM",
+              kind: {
+                id: "TELEGRAM",
+                icon: "app:icon-tg",
+              },
              username: "",
-              icon: "icon-tg",
            },
          ],
        },
@@ -240,6 +239,16 @@ export default {
        return { label: el.text, id: el.id };
      });
    },
+    getNetworksList() {
+      let contacts = [];
+      this.infoClient.basic.contacts.forEach((elem) =>
+        contacts.push(elem.kind.id)
+      );
+      let filteredNetworks = this.networksSettings.filter(
+        ({ id }) => !contacts.includes(id)
+      );
+      return filteredNetworks;
+    },
  },
  methods: {
    previewImage(event) {
@@ -262,6 +271,7 @@ export default {
      !this.showModal ? this.closeForm() : null;
    },
    createIdentityDocument(id) {
+      let doc = null;
      let filteredData = Object.keys(
        this.filterDataEmptyProperty(this.infoClient.identity_document.pass)
      );
@@ -281,46 +291,62 @@ export default {
            "Паспортные данные не будут записаны в профиль клиента"
          );
        } else
-          fetchWrapper.post("general/identity_document/create/", {
-            series_number: this.infoClient.identity_document.pass.series_number,
-            issued_by_org: this.infoClient.identity_document.pass.issued_by_org,
-            issued_by_date: moment(
-              this.infoClient.identity_document.pass.issued_by_date
-            ).format("YYYY-MM-DD"),
-            issued_by_org_code:
-              this.infoClient.identity_document.pass.issued_by_org_code,
-            person: id,
-            kind: "Паспорт",
-          });
+          fetchWrapper
+            .post("general/identity_document/create/", {
+              series_number:
+                this.infoClient.identity_document.pass.series_number,
+              issued_by_org:
+                this.infoClient.identity_document.pass.issued_by_org,
+              issued_by_date: moment(
+                this.infoClient.identity_document.pass.issued_by_date
+              ).format("YYYY-MM-DD"),
+              issued_by_org_code:
+                this.infoClient.identity_document.pass.issued_by_org_code,
+              person: id,
+              kind: "Паспорт",
+            })
+            .then((res) => (doc = res));
+        return Promise.resolve(doc);
      }
    },
    createAddress(id) {
+      let address = null;
      Object.keys(this.filterDataEmptyProperty(this.infoClient.addresses))
        .length > 0 &&
-        fetchWrapper.post("general/address/create/", {
-          ...this.filterDataEmptyProperty(this.infoClient.addresses),
-          person: id,
-        });
+        fetchWrapper
+          .post("general/address/create/", {
+            ...this.filterDataEmptyProperty(this.infoClient.addresses),
+            person: id,
+          })
+          .then((res) => (address = res));
+      return Promise.resolve(address);
    },
-    createContacts(id) {
+    async createContacts(id) {
+      let phone = null,
+        email = null,
+        contacts = [];
      if (this.infoClient.phone.username)
-        fetchWrapper.post("general/contact/create/", {
+        phone = await fetchWrapper.post("general/contact/create/", {
          ...this.filterDataEmptyProperty(this.infoClient.phone),
          person: id,
        });
      if (this.infoClient.email.username)
-        fetchWrapper.post("general/contact/create/", {
+        email = await fetchWrapper.post("general/contact/create/", {
          ...this.filterDataEmptyProperty(this.infoClient.email),
          person: id,
        });
      this.infoClient.basic.contacts.forEach((el) => {
        if (el.username)
-          fetchWrapper.post("general/contact/create/", {
-            kind: el.kind,
-            username: el.username,
-            person: id,
-          });
+          fetchWrapper
+            .post("general/contact/create/", {
+              kind: el.kind.id,
+              username: el.username,
+              person: id,
+            })
+            .then((res) => contacts.push(res));
      });
+      console.log(Promise.allSettled([phone, email, contacts]));
+      return Promise.allSettled([phone, email, contacts]);
    },
    postNewClient() {
      const formData = new FormData();
@@ -340,12 +366,16 @@ export default {
        .post("general/person/create/", formData, "formData")
        .then((result) => {
          if (result.id) {
-            this.createIdentityDocument(result.id);
-            this.createAddress(result.id);
-            this.createContacts(result.id);
-            this.writeCreatedClientId(result.id);
-            this.setUpdatedClients();
-            this.addSuccessNotification();
+            Promise.allSettled([
+              this.createIdentityDocument(result.id),
+              this.createAddress(result.id),
+              this.createContacts(result.id),
+            ]).then((res) => {
+              console.log(res);
+              this.writeCreatedClientId(result.id);
+              this.setUpdatedClients();
+              this.addSuccessNotification();
+            });
          } else {
            this.addErrorNotification(
              "Клиент не создан",
@@ -364,13 +394,10 @@ export default {
      });
      return postData;
    },
-    saveNetworkId(e) {
-      this.networkId = e.currentTarget.id;
-    },
    choosePriority(e) {
      this.infoClient.basic.priority = e.target.id;
    },
-    chooseOptionNetworks(e) {
+    /*chooseOptionNetworks(e) {
      let index = this.infoClient.basic.contacts.findIndex(
        (el) => el.id === this.networkId
      );
@@ -379,7 +406,7 @@ export default {
      ).icon;
      this.infoClient.basic.contacts[index].kind = e.target.id;
      this.infoClient.basic.contacts[index].icon = icon;
-    },
+    },*/
    saveClient() {
      if (this.checkFormFullness()) {
        this.postNewClient();
@@ -407,14 +434,15 @@ export default {
      });
    },
    addNewNetwork() {
-      this.infoClient.basic.contacts.push({
-        id:
-          this.infoClient.basic.contacts[0].id +
-          this.infoClient.basic.contacts.length,
-        kind: "TELEGRAM",
-        username: "",
-        icon: "icon-tg",
-      });
+      const newNetwork = this.getNetworksList;
+      if (newNetwork[0])
+        this.infoClient.basic.contacts.push({
+          kind: {
+            id: newNetwork[0].id,
+            icon: newNetwork[0].icon,
+          },
+          username: "",
+        });
    },
    selectForm(componentName) {
      this.currentForm = this.forms.find(
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -13,7 +13,19 @@
        map-options
      )
        template(v-slot:selected)
-          span {{ textSelect }}
+          span(v-if="!value.icon") {{ textSelect }}
+          q-icon(
+            v-else,
+            :name="iconSelect",
+            size="20px"
+          )
+        template(
+          v-slot:option="scope",
+          v-if="value.icon"
+        )
+          q-item(v-bind="scope.itemProps", style="justify-content: center")
+            q-item-section(avatar, style="padding: 0px; min-width: 0px")
+              q-icon(:name="scope.opt.icon", size="20px")
 </template>

 <script>
@@ -55,6 +67,9 @@ export default {
    textSelect() {
      return this.value.label ? this.value.label : this.placeholder;
    },
+    iconSelect() {
+      return this.value?.icon ? this.value.icon : this.placeholder;
+    },
  },
 };
 </script>