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>
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/src/pages/clients/components/ClientsTableRow.vue
@@ -381,11 +381,14 @@ export default {
      });
    },
    addNetwork(network) {
-      this.dataClient.contacts.push(network);
+      this.dataClient.contacts.push({
+        kind: network.kind?.id,
+        username: network.username,
+      });
    },
    deleteNetwork(e) {
      this.dataClient.contacts = this.dataClient.contacts.filter(
-        (el) => el.kind !== e.target.id
+        (el) => el.kind !== e.currentTarget.id
      );
    },
    choosePriority(e) {
--- a/src/pages/clients/components/FormCreateBasicInfo.vue
+++ b/src/pages/clients/components/FormCreateBasicInfo.vue
@@ -28,16 +28,13 @@
      )
      .flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5")
        span.text-sm.font-semibold.opacity-40.input-info Ссылки на соцсети
-        .flex(class="gap-x-1.5" v-for="network in basicInfo.contacts" :key="network.id")
+        .flex(class="gap-x-1.5" v-for="network in basicInfo.contacts" :key="network.kind.id")
          base-adding-network(
-            :list-adding-networks="networks.settings",
-            :selected-option="network.icon",
-            :value="network",
-            :choose-network="chooseOption",
-            :save-network-id="saveNetworkId"
+            :items="networksList",
+            :network="network",
          )
        span.add-network.cursor-pointer(
-          v-show="networks.settings.length !== basicInfo.contacts.length",
+          v-show="networksList.length !== 0",
          @click="addNetwork"
        ) Добавить соцсеть
 </template>
@@ -45,7 +42,6 @@
 <script>
 import BaseInput from "@/components/base/BaseInput";
 import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
-import { column } from "@/pages/clients/utils/tableConfig";
 import BaseSelect from "@/components/base/BaseSelect";

 export default {
@@ -56,20 +52,13 @@ export default {
    BaseSelect,
  },
  props: {
-    choosePriority: Function,
    priorityList: Array,
-    saveNetworkId: Function,
-    chooseOption: Function,
    phone: Object,
    email: Object,
    basicInfo: Object,
    saveClient: Function,
    addNetwork: Function,
-  },
-  data() {
-    return {
-      networks: column.find((el) => el.name === "networks"),
-    };
+    networksList: Array,
  },
 };
 </script>
--- a/src/pages/clients/components/cells/TableCellBodyNetworks.vue
+++ b/src/pages/clients/components/cells/TableCellBodyNetworks.vue
@@ -1,40 +1,43 @@
 <template lang="pug">
  .flex.box-border.px-4.items-center.w-full(:style="{ width: width + 'px'}")
    .flex.gap-x-1
-      .text-xl.icon.relative(
+      q-icon(
        v-for="network in getNetworks",
-        :class="settings.settings.find((el) => el.network === network.kind)?.icon || ''"
+        :name="settings.find((el) => el.id === network.kind)?.icon || ''",
+        size="20px", 
+        class="icon",
+        :id="`icon-${network.kind}`"
      )
-        .absolute.icon-cancel-mini.delete.flex.w-4.h-4.justify-center.items-center.bottom-4.left-2(
+        q-badge.delete(
          v-if="isOpenChange",
-          :id="network.kind",
-          @click.stop="(e) => deleteNetwork(e)"
+          floating,
+          rounded
        )
+          q-btn(
+            icon="app:icon-cancel",
+            size="5px"
+            font-color="white",
+            padding="5px 5px",
+            :id="network.kind",
+            @click.stop="(e) => deleteNetwork(e)"
+          )
    .flex.relative
      q-btn(
        icon="add",
        size="14px",
        class="add-button"
-        v-if="isOpenChange && settings.settings.length !== getNetworks.length",
+        v-if="isOpenChange && settings.length !== getNetworks.length",
        @click.stop
        round,
        dense,
        no-caps,
        padding="1px"
      )
-        //base-popup.right-3.top-6.z-20(
-          v-if="isOpenPopupAdding",
-          @click.stop,
-          v-click-outside="closePopup",
-          :width="485"
-        //)
        q-menu(v-model="isOpenPopupAdding", anchor="bottom left", self="top right")
          .menu-wrapper.flex.flex-col.gap-y-3.p-4
            base-adding-network(
-              :value="network",
-              :selected-option="getSelectedIcon",
-              :list-adding-networks="getAddingNetworks",
-              :choose-network="chooseNetwork"
+              :items="getAddingNetworks",
+              :network="network",
            )
            .w-fit
              q-btn(
@@ -73,11 +76,8 @@ export default {
  data() {
    return {
      isOpenPopupAdding: false,
-      network: {
-        kind: "TELEGRAM",
-        username: "",
-      },
-      settings: column.find((el) => el.name === "networks"),
+      network: {},
+      settings: column.find((el) => el.name === "networks")?.settings,
    };
  },
  computed: {
@@ -86,33 +86,31 @@ export default {
        (el) => el.kind !== "EMAIL" && el.kind !== "PHONE"
      );
    },
-    getSelectedIcon() {
-      return this.settings.settings.find(
-        (el) => el.network === this.network.kind
-      ).icon;
-    },
    getAddingNetworks() {
      let kinds = this.networks.map((el) => el.kind);
-      return this.settings.settings.filter((el) => !kinds.includes(el.network));
+      return this.settings.filter((el) => !kinds.includes(el.id));
    },
  },
  methods: {
-    chooseNetwork(e) {
-      this.network.kind = e.target.id;
-    },
    closePopup() {
      this.isOpenPopupAdding = false;
    },
    saveNetwork() {
      this.addNetwork(this.network);
      this.isOpenPopupAdding = false;
-      this.network = {
-        kind: "TELEGRAM",
-        username: "",
-      };
    },
-    openPopupAdding() {
-      this.isOpenPopupAdding = true;
+  },
+  watch: {
+    isOpenPopupAdding(newValue) {
+      if (newValue === true && this.getAddingNetworks[0]) {
+        this.network = {
+          kind: {
+            id: this.getAddingNetworks[0]?.id,
+            icon: this.getAddingNetworks[0]?.icon,
+          },
+          username: "",
+        };
+      }
    },
  },
 };
@@ -122,12 +120,10 @@ export default {
 .icon
  color: var(--btn-blue-color)
  &:last-child
-    padding-right: 46px
+    padding-right: 0
+    margin-right: 46px
 .delete
-  border-radius: 50%
  background-color: var(--btn-red-color)
-  color: var(--default-white)
-  font-size: 8px
 .add-button
  border: 2px solid var(--btn-blue-color)
  color: var(--btn-blue-color)
@@ -136,4 +132,9 @@ export default {
    color: var(--default-white)
 .menu-wrapper
  width: 484px
+.q-badge
+  padding: 0
+.q-badge--floating
+  top: -8px
+  right: -6px
 </style>
--- a/src/pages/clients/utils/tableConfig.js
+++ b/src/pages/clients/utils/tableConfig.js
@@ -66,32 +66,32 @@ export const column = [
    title: "Сети",
    settings: [
      {
-        network: "VK",
-        icon: "icon-vk",
+        id: "VK",
+        icon: "app:icon-vk",
      },
      {
-        network: "TELEGRAM",
-        icon: "icon-tg",
+        id: "TELEGRAM",
+        icon: "app:icon-tg",
      },
      {
-        network: "GMAIL",
-        icon: "icon-google",
+        id: "GMAIL",
+        icon: "app:icon-google",
      },
      {
-        network: "SLACK",
-        icon: "icon-slack",
+        id: "SLACK",
+        icon: "app:icon-slack",
      },
      {
-        network: "DISCORD",
-        icon: "icon-discord",
+        id: "DISCORD",
+        icon: "app:icon-discord",
      },
      {
-        network: "VIBER",
-        icon: "icon-mail",
+        id: "VIBER",
+        icon: "wifi_calling_3",
      },
      {
-        network: "WHATS_APP",
-        icon: "icon-mail",
+        id: "WHATS_APP",
+        icon: "call",
      },
    ],
    iconHead: false,