Merge pull request #69 from dderbentsov/UC-22

WIP Добавлена возможность редактирования данных клиента таблицы

server.js

@@ -170,34 +170,21 @@ const dataClients = {
 const clientDetail = [
   {
     person_id: "14ff401c-2b7b-4d9a-9159-720c74d8b23c",
-    additional_info: {
     snils: {
-        number: {
+      numba: "812–183–139 21",
-          value: "812–183–139 21",
-          copy: true,
-        },
     },
     inn: {
-        number: {
+      numba: "138291382731",
-          value: "138291382731",
-          copy: true,
-        },
     },
     birthday: {
-        date: {
+      date: "1994-12-04",
-          value: "1994-12-04",
-        },
     },
     addresses: {
-        registrationPlace: {
+      registrationPlace:
-          value:
         "371311, Московская обл., г. Москва, ул. Комсомольская, д.6, кв. 13",
-        },
+      actualPlace:
-        actualPlace: {
-          value:
         "371311, Московская обл., г. Москва, ул. Комсомольская, д.6, кв. 13",
     },
-      },
     docs: [
       {
         name: "Договор оферты.pdf",
@@ -251,37 +238,23 @@ const clientDetail = [
       },
     ],
   },
-  },
   {
     person_id: "db831a14-e836-481f-a653-6325de7c311e",
-    additional_info: {
     snils: {
-        number: {
+      numba: "834–001–555 35",
-          value: "834–001–555 35",
-          copy: true,
-        },
     },
     inn: {
-        number: {
+      numba: "371942327342",
-          value: "371942327342",
-          copy: true,
-        },
     },
     birthday: {
-        date: {
+      date: "1997-09-03",
-          value: "1997-09-03",
-        },
     },
     addresses: {
-        registrationPlace: {
+      registrationPlace:
-          value:
         "371311, Московская обл., г. Владимир, ул. Гагарина, д.12, кв. 24",
-        },
+      actualPlace:
-        actualPlace: {
-          value:
         "371311, Московская обл., г. Владимир, ул. Гагарина, д.12, кв. 24",
     },
-      },
     docs: [
       {
         name: "Договор покупки.pdf",
@@ -333,37 +306,23 @@ const clientDetail = [
       },
     ],
   },
-  },
   {
     person_id: "db8jd58x-e836-481f-a653-oq1m4e7c09e1",
-    additional_info: {
     snils: {
-        number: {
+      numba: "812–183–139 21",
-          value: "812–183–139 21",
-          copy: true,
-        },
     },
     inn: {
-        number: {
+      numba: "138291382731",
-          value: "138291382731",
-          copy: true,
-        },
     },
     birthday: {
-        date: {
+      date: "1990-11-05",
-          value: "1990-11-05",
-        },
     },
     addresses: {
-        registrationPlace: {
+      registrationPlace:
-          value:
         "371311, Московская обл., г. Москва, ул. Комсомольская, д.6, кв. 13",
-        },
+      actualPlace:
-        actualPlace: {
-          value:
         "371311, Московская обл., г. Москва, ул. Комсомольская, д.6, кв. 13",
     },
-      },
     docs: [
       {
         name: "Договор оферты.pdf",
@@ -417,37 +376,23 @@ const clientDetail = [
       },
     ],
   },
-  },
   {
     person_id: "cs5ms771-e836-kdc4-a653-sc4n567sx123",
-    additional_info: {
     snils: {
-        number: {
+      numba: "834–001–555 35",
-          value: "834–001–555 35",
-          copy: true,
-        },
     },
     inn: {
-        number: {
+      numba: "371942327342",
-          value: "371942327342",
-          copy: true,
-        },
     },
     birthday: {
-        date: {
+      date: "2000-08-17",
-          value: "2000-08-17",
-        },
     },
     addresses: {
-        registrationPlace: {
+      registrationPlace:
-          value:
         "371311, Московская обл., г. Владимир, ул. Гагарина, д.12, кв. 24",
-        },
+      actualPlace:
-        actualPlace: {
-          value:
         "371311, Московская обл., г. Владимир, ул. Гагарина, д.12, кв. 24",
     },
-      },
     docs: [
       {
         name: "Договор покупки.pdf",
@@ -499,7 +444,6 @@ const clientDetail = [
       },
     ],
   },
-  },
 ];
 
 export function clientsServer() {

src/components/TheSidebar.vue

@@ -2,14 +2,14 @@
   .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border
     .flex.flex-col.gap-y-6
       the-button-sidebar(id="home" path="#/")
-        .icon-home
+        .icon-home.icon
       the-button-sidebar(id="calendar" path="#/calendar")
-        .icon-calendar-2
+        .icon-calendar-2.icon
       the-button-sidebar(id="user" path="#/clients")
-        .icon-person-2
+        .icon-person-2.icon
     .flex.text-4xl.flex-col.gap-y-6
       the-button-sidebar(id="settings" path="#/settings")
-        .icon-settings
+        .icon-settings.icon
 </template>
 
 <script>
@@ -27,4 +27,6 @@ export default {
   min-width: 80px
   background-color: var(--default-white)
   border-top-right-radius: 4px
+.icon
+  min-width: 44px
 </style>

src/components/base/BaseAddingNetwork.vue

@@ -0,0 +1,27 @@
+<template lang="pug">
+  .flex(class="gap-x-1.5")
+    base-select(:for-networks="true" :style-border="true" :list-data="listAddingNetworks" :option-data="value.kind")
+    base-input.input-info.w-full(v-model:value="value.username" :id="value.id" placeholder="Ссылкa")
+</template>
+
+<script>
+import BaseSelect from "@/components/base/BaseSelect";
+import BaseInput from "@/components/base/BaseInput";
+export default {
+  name: "TableAddingNetwork",
+  components: { BaseInput, BaseSelect },
+  props: {
+    value: Object,
+    listAddingNetworks: Array,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.icon
+  color: var(--font-dark-blue-color)
+  width: 48px
+  height: 42px
+  border: 2px solid var(--border-light-grey-color)
+  border-radius: 4px
+</style>

src/components/base/BaseInput.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5" :style="{ minWidth: widthInput + 'px' }")
-    input.w-full.outline-0.text-base.not-italic(:value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
+    input.w-full.outline-0.not-italic(:style="{ backgroundColor: backgroundInput, fontSize: fontSizeInput }" :value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
     .slot(v-if="withIcon" :class="iconPosition")
       slot.cursor-pointer
 </template>
@@ -36,4 +36,5 @@ export default {
 .input-wrapper
   border: 2px solid var(--border-light-grey-color)
   border-radius: 4px
+  background-color: var(--default-white)
 </style>

src/components/base/BasePopup.vue

@@ -0,0 +1,32 @@
+<template lang="pug">
+  .flex.flex-col.items-end.absolute
+    .corner
+    .popup-wrapper.flex.flex-col.gap-y-3.p-4.h-fit(:style="{ width : width + 'px' }")
+      slot
+</template>
+
+<script>
+export default {
+  name: "BasePopup",
+  props: {
+    width: Number,
+    top: Number,
+    right: Number,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.popup-wrapper
+  border-radius: 4px 0 4px 4px
+  background-color: var(--default-white)
+  box-shadow: var(--default-shadow)
+  z-index: 1
+.corner
+  width: 8px
+  height: 8px
+  border-top-left-radius: 100%
+  background-color: var(--default-white)
+  z-index: 2
+  overflow: hidden
+</style>

src/components/base/BaseSelect.vue

@@ -1,11 +1,14 @@
 <template lang="pug">
-  .flex.justify-between.px-4.w-full.container.items-center.cursor-pointer(@click="openSelect" class="py-2.5" :class="{border: styleBorder}" :style="{ minWidth : widthSelect + 'px'}")
+  .flex.justify-between.box-border.px-4.w-full.container.items-center.cursor-pointer(@click="openSelect" class="py-2.5" :class="{border: styleBorder}" :style="{ minWidth : widthSelect + 'px'}")
     .relative.flex.flex-col
-      .not-italic.text-base.select.cursor-pointer.w-full {{optionData}}
+      .not-italic.select.cursor-pointer.w-full(v-if="!forNetworks") {{optionData}}
-        .absolute.options(v-show="isSelectOpen" :id="id")
+        .absolute.options(v-show="isSelectOpen" :id="id" :style="{ minWidth : widthSelect + 'px'}")
-          .not-italic.text-base.option(v-for="(responsible, index) in listData" @click="(e) => chooseOption(e)" :key="index" :id="index") {{responsible}}
+          .not-italic.option.pl-4.py-1(v-for="responsible in listData" @click="(e) => chooseOption(e)" :key="responsible" :id="responsible") {{responsible}}
-    .select-form-separator.cursor-pointer(v-if="withSeparator" )
+      .not-italic.select.cursor-pointer.w-full(v-if="forNetworks" :class="optionData")
-    .text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(:class="{ open: isSelectOpen}")
+        .absolute.options(v-show="isSelectOpen" :id="id" :style="{ minWidth : widthSelect + 'px'}")
+          .not-italic.option.pl-4.py-1(v-for="responsible in listData" @click="(e) => chooseOption(e)" :key="responsible.network" :id="responsible.network" :class="responsible.icon")
+    .select-form-separator.cursor-pointer(v-if="withSeparator")
+    .text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(v-if="!forNetworks" :class="{ open: isSelectOpen}")
 </template>
 
 <script>
@@ -23,6 +26,7 @@ export default {
     optionData: String,
     listData: Array,
     chooseOption: Function,
+    forNetworks: Boolean,
   },
   data() {
     return {
@@ -33,9 +37,6 @@ export default {
     openSelect() {
       this.isSelectOpen = !this.isSelectOpen;
     },
-    closeSelect() {
-      this.isSelectOpen = false;
-    },
   },
 };
 </script>
@@ -46,7 +47,7 @@ export default {
   width: fit-content
   background-color: var(--bg-ligth-blue-color)
   &.border
-    background-color: rgba(255, 255, 255, 0)
+    background-color: var(--default-white)
     border: 2px solid var(--border-light-grey-color)
 .select
   appearance: none
@@ -60,9 +61,14 @@ export default {
 .options
   z-index: 3
   width: max-content
-  background-color: var(--bg-ligth-blue-color)
+  background-color: var(--default-white)
+  border: 2px solid var(--border-light-grey-color)
+  border-top: none
+  border-radius: 0 0 4px 4px
+  left: -18px
 .option
   color: var(--font-black-color)
+  border-bottom: 1px solid var(--border-light-grey-color)
   &:hover
     background-color: var(--btn-blue-color)
 .select-form-separator

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -10,14 +10,16 @@
           table-adding-new-doc(v-if="section === 'docs' && isOpenAddingWrap" :add-new-doc="addNewDoc" :save-docs="saveDocs" :new-docs="docData")
           table-adding-new-additional(v-if="section === 'additional' && isOpenAddingWrap" :new-additional-data="additionalData" :add-new-additional="addDocAdditional" :save-additional="saveDocs" )
     .section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4
-      .flex.flex-col(v-for="(item, key) in settings[section].options" class="gap-y-1.5")
+      .flex.flex-col(v-for="(item, key) in sectionInfo" class="gap-y-1.5")
-        span.title-section.font-semibold.text-xs(v-if="settings[section].options") {{item}}
+        span.title-section.font-semibold.text-xs(v-if="settings[section].options") {{settings[section].options[key]}}
         span.title-section.font-semibold.text-xs(v-if="item.header") {{item.header}}
-        client-detail-input.text-sm.text-sm.w-max-fit(v-if="isChange && item.value" :style="{fontWeight:item.copy&&600}" v-model:value="sectionInfo[key]" :width="settings[section].width")
+        client-detail-input.text-sm.text-sm.w-max-fit(v-if="isChange" :style="{fontWeight:key === 'numba'&&600}" v-model:value="sectionInfo[key]" :width="settings[section].width")
-          .copy.icon-copy.cursor-pointer(v-if="item.copy")
+          .copy.icon-copy.cursor-pointer(v-if="item.copy" @click="() => copyValue(item)")
+        .flex(v-if="settings[section].options && !isChange")
+          span.text-sm.w-fit(:style="{fontWeight:key === 'numba'&&600}") {{item}}
+          .copy.icon-copy.cursor-pointer.pl-4(v-if="key === 'numba'" @click="() => copyValue(item)")
         .flex(v-if="item.value && !isChange")
-          span.text-sm.w-fit(:style="{fontWeight:item.copy&&600}") {{item.value}}
+          span.text-sm.w-fit {{item.value}}
-          .copy.icon-copy.cursor-pointer.pl-4(v-if="item.copy")
         .flex.items-center(v-if="item.name")
           .icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(v-if="isChange" :id="item.name" @click="(e) => deleteDoc(e, section)")
           .icon-files.cursor-pointer.pr-3.text-xl(:style="{color:settings.docsColor[item.type]}")
@@ -62,6 +64,9 @@ export default {
     };
   },
   methods: {
+    copyValue(text) {
+      navigator.clipboard.writeText(text);
+    },
     openInterfaceChange() {
       this.isOpenChange = !this.isOpenChange;
     },

src/pages/clients/components/ClientDetailInfoWrapper.vue

@@ -24,5 +24,3 @@ export default {
   },
 };
 </script>
-
-<style lang="sass" scoped></style>

src/pages/clients/components/ClientsActionPopup.vue

@@ -2,20 +2,23 @@
   .flex.flex-col.items-end.absolute.right-2.top-5
     .corner
     .popup-wrapper.flex.flex-col.gap-y-3.w-10.h-10.p-4
-      .button.keep-redaction.flex.gap-x-3
+      .button.keep-redaction.flex.gap-x-3(@click="openChangeData")
-        .icon-edit.icon-redaction
+        .icon-edit.icon
         span Редактировать
       .button.keep-redaction.flex.gap-x-3
-        img(src="@/assets/icons/star.svg" alt="Star")
+        .icon-star-off.icon
         span На ведение
       .button.delete.flex.gap-x-3
-        img(src="@/assets/icons/basket.svg" alt="Basket")
+        .icon-basket.icon-delete
         span Удалить
 </template>
 
 <script>
 export default {
   name: "ClientsActionPopup",
+  props: {
+    openChangeData: Function,
+  },
 };
 </script>
 
@@ -29,7 +32,7 @@ export default {
   z-index: 1
 .keep-redaction
   color: var(--font-dark-blue-color)
-.icon-redaction
+.icon
   color: var(--btn-blue-color)
 .delete
   color: var(--btn-red-color)
@@ -43,4 +46,6 @@ export default {
   background-color: var(--default-white)
   z-index: 2
   overflow: hidden
+.icon-delete
+  color: var(--btn-red-color)
 </style>

src/pages/clients/components/ClientsTable.vue

@@ -10,10 +10,7 @@
           :id="client.id"
           :is-check="marked.includes(client.id)"
           :check="selectedCheck"
-          :full-name="[client.last_name, client.first_name, client.patronymic]"
+          :client="client"
-          :age="client.birth_date"
-          :priority="client.priority"
-          :contacts="client.contacts"
           )
 </template>
 

src/pages/clients/components/ClientsTableHat.vue

@@ -2,7 +2,7 @@
   .flex.justify-between.w-full.h-fit
     .flex.gap-2.w-fit.h-fit
       .input
-        base-input(:with-icon="true")
+        base-input(:with-icon="true" icon-position="left")
           .icon-search
       button.filter-button.flex.items-center.justify-center.box-border(class="px-2.5")
         .icon-filter.text-xl.leading-4

src/pages/clients/components/ClientsTableRow.vue

@@ -3,16 +3,17 @@
     .row-body.flex.w-full.cursor-pointer(:id="id" @dblclick="(e) => openDetailInfo(e)")
       .check-box.flex.justify-center.items-center
         clients-table-checkbox(:id="id" :check="check" :is-check="isCheck")
-      table-cell-body-name(:value="fullName" :width="columnBody.find(el => el.name === 'fullName').width")
+      table-cell-body-name(:value="dataClient" :avatar="dataClient.avatar" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'fullName').width")
-      table-cell-body-age(:value="age" :width="columnBody.find(el => el.name === 'age').width")
+      table-cell-body-age(:value="dataClient" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'age').width")
-      table-cell-body-priority(:value="priority" :width="columnBody.find(el => el.name === 'priority').width")
+      table-cell-body-priority(:value="dataClient.priority" :choose-priority="choosePriority" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'priority').width")
-      table-cell-body-phone(:value="contacts" :width="columnBody.find(el => el.name === 'phone').width")
+      table-cell-body-phone(:value="dataClient" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'phone').width")
-      table-cell-body-email(:value="contacts" :width="columnBody.find(el => el.name === 'email').width")
+      table-cell-body-email(:value="dataClient" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'email').width")
-      table-cell-body-networks(:networks="contacts" :width="columnBody.find(el => el.name === 'networks').width")
+      table-cell-body-networks(:delete-network="deleteNetwork" :networks="dataClient.contacts" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'networks').width")
       .dots.flex.justify-center.items-center
-        .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(:tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
+        base-button-ok(v-if="isOpenChange" :size="20" :icon-size="10" :dark-style="true" @click="closeChangeData")
-          clients-action-popup(v-if="isOpenPopup")
+        .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(v-if="!isOpenChange" :tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
-    client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-detail="dataDetail" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
+          clients-action-popup(v-if="isOpenPopup" :open-change-data="openChangeData")
+    client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-detail="dataDetail" :data-document="dataIdentityDocument" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
 </template>
 
 <script>
@@ -27,6 +28,7 @@ import TableCellBodyName from "@/pages/clients/components/cells/TableCellBodyNam
 import ClientsActionPopup from "@/pages/clients/components/ClientsActionPopup";
 import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
 import ClientDetailInfoWrapper from "@/pages/clients/components/ClientDetailInfoWrapper";
+import BaseButtonOk from "@/components/base/buttons/BaseButtonOk";
 import { column } from "@/pages/clients/utils/tableConfig";
 export default {
   name: "ClientsTableRow",
@@ -42,6 +44,7 @@ export default {
     TableCellBodyNetworks,
     TableCellBodyMeeting,
     ClientDetailInfoWrapper,
+    BaseButtonOk,
   },
   data() {
     return {
@@ -50,20 +53,50 @@ export default {
       isOpenDetailInfo: false,
       isOpenPopup: false,
       columnBody: column,
+      isOpenChange: false,
+      dataClient: {},
     };
   },
   props: {
     id: String,
     check: Function,
     isCheck: Boolean,
-    fullName: Array,
+    client: Object,
-    age: String,
-    priority: {
-      default: null,
   },
-    contacts: Array,
+  created() {
+    this.dataClient = {
+      fullName: `${this.client.last_name} ${this.client.first_name} ${this.client.patronymic}`,
+      age: this.client.birth_date,
+      priority: this.client.priority,
+      phone: this.client.contacts.find((el) => el.kind === "PHONE") || {
+        kind: "EMAIL",
+        username: "",
+      },
+      email: this.client.contacts.find((el) => el.kind === "EMAIL") || {
+        kind: "EMAIL",
+        username: "",
+      },
+      contacts: [...this.client.contacts],
+      avatar: `${this.client.last_name[0]}${this.client.first_name[0]}`,
+    };
   },
   methods: {
+    deleteNetwork(e) {
+      this.dataClient.contacts = this.dataClient.contacts.filter(
+        (el) => el.id !== e.target.id
+      );
+    },
+    choosePriority(e) {
+      this.dataClient.priority = this.columnBody
+        .find((el) => el.name === "priority")
+        ["settings"].find((el) => el.text === e.target.id).priority;
+    },
+    closeChangeData() {
+      this.isOpenChange = false;
+    },
+    openChangeData() {
+      this.isOpenChange = true;
+    },
     fetchClientDetail(id) {
       // eslint-disable-next-line
       fetch(`/api/detail/${id}`).then((res) => res.json()).then((data) => this.saveClientDetail(data))
@@ -76,7 +109,12 @@ export default {
       this.dataDetail = data;
     },
     saveIdentityDocument(data) {
-      this.dataIdentityDocument = 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,
+      };
     },
     openPopup(e) {
       e.target.focus();
@@ -84,8 +122,7 @@ export default {
     },
     openDetailInfo(e) {
       this.isOpenDetailInfo = !this.isOpenDetailInfo;
-      this.isOpenDetailInfo && this.fetchClientDetail(e.currentTarget.id);
+      this.isOpenDetailInfo && this.fetchClientDetail(e.currentTarget.id),
-      this.isOpenDetailInfo &&
         this.fetchClientIdentityDocument(e.currentTarget.id);
     },
     handleUnFocusPopup() {

src/pages/clients/components/FormCreateBasicInfo.vue

@@ -20,7 +20,7 @@
         span.text-sm Ссылки на соцсети
         .flex(class="gap-x-1.5" v-for="network in basicInfo.networks" :key="network.id")
           .icon.flex.justify-center.items-center
-            span.icon-telegram.leading-2.text-lg
+            span.icon-tg.leading-2.text-lg
           base-input.input-info.w-full(v-model:value="network.network" :id="network.id" placeholder="Ссылкa")
         span.add-network.cursor-pointer(@click="addNetwork") Добавить соцсеть
     base-create-button(text="Создать клиента" @click="saveClient")

src/pages/clients/components/cells/TableCellBodyAge.vue

@@ -1,14 +1,18 @@
 <template lang="pug">
   .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
-    span.text-sm {{new Date().getFullYear() - new Date(value).getFullYear()}}
+    span.text-sm(v-if="!isOpenChange") {{new Date().getFullYear() - new Date(value.age).getFullYear()}}
+    base-input(v-if="isOpenChange" type="date" v-model:value="value.age" :width-input="124")
 </template>
 
 <script>
+import BaseInput from "@/components/base/BaseInput";
 export default {
   name: "TableCellBodyAge",
+  components: { BaseInput },
   props: {
-    value: String,
+    value: Object,
     width: Number,
+    isOpenChange: Boolean,
   },
 };
 </script>

src/pages/clients/components/cells/TableCellBodyEmail.vue

@@ -1,14 +1,18 @@
 <template lang="pug">
   .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
-    span.text-sm {{value.some((el) => el.kind === "EMAIL")?value.find((el) => el.kind === "EMAIL").username:''}}
+    span.text-sm(v-if="!isOpenChange") {{value.email.username}}
+    base-input(v-if="isOpenChange" :width-input="234" v-model:value="value.email.username" :placeholder="value.email.username" )
 </template>
 
 <script>
+import BaseInput from "@/components/base/BaseInput";
 export default {
   name: "TableCellBodyEmail",
+  components: { BaseInput },
   props: {
-    value: Array,
+    value: Object,
     width: Number,
+    isOpenChange: Boolean,
   },
 };
 </script>

src/pages/clients/components/cells/TableCellBodyName.vue

@@ -1,17 +1,22 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.gap-x-3.w-full(:style="{ minWidth : width + 'px' }")
+  .flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(:style="{ minWidth : width + 'px' }")
     .flex.avatar.justify-center.items-center
-      span {{`${value[0][0]}${value[1][0]}`}}
+      span {{avatar}}
-    span.text-sm.font-semibold {{value.join(' ')}}
+    span.text-sm.font-semibold(v-if="!isOpenChange") {{value.fullName}}
+    base-input(v-if="isOpenChange" type="text" v-model:value="value.fullName" :width-input="300")
 </template>
 
 <script>
+import BaseInput from "@/components/base/BaseInput";
 export default {
   name: "TableCellBodyName",
+  components: { BaseInput },
   props: {
-    value: Array,
+    value: Object,
+    avatar: String,
     width: Number,
     imgUrl: String,
+    isOpenChange: Boolean,
   },
 };
 </script>

src/pages/clients/components/cells/TableCellBodyNetworks.vue

@@ -1,21 +1,66 @@
 <template lang="pug">
   .network-cell.flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
-    .text-xl.icon(v-for="network in networks.filter((el) => el.kind !== 'EMAIL' && el.kind !== 'PHONE')" :id="network.id" :class="settings.settings.find((el) => el.network === network.kind).icon")
+    .flex.gap-x-1
+      .text-xl.icon.relative(v-for="network in getNetworks" :class="settings.settings.find((el) => el.network === network.kind).icon")
+        .absolute.icon-cancel-mini.delete.flex.w-4.h-4.justify-center.items-center.bottom-4.left-2(v-if="isOpenChange" :id="network.id" @click="(e) => deleteNetwork(e)")
+    .flex.relative
+      base-button-plus.ml-3(v-if="isOpenChange && settings.settings.length !== getNetworks.length" :with-border="true" @click="openPopupAdding")
+      base-popup.right-3.top-6(v-if="isOpenPopupAdding" :width="485")
+        base-adding-network(:value="network" :list-adding-networks="getAddingNetworks")
+        base-create-button(text="Добавить" @click="closePopupAdding")
 </template>
 
 <script>
+import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
+import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
+import BasePopup from "@/components/base/BasePopup";
+import BaseButtonPlus from "@/components/base/buttons/BaseButtonPlus";
 import { column } from "@/pages/clients/utils/tableConfig";
 export default {
   name: "TableCellBodyNetworks",
+  components: {
+    BaseButtonPlus,
+    BasePopup,
+    BaseAddingNetwork,
+    BaseCreateButton,
+  },
   props: {
     networks: Array,
     width: Number,
+    isOpenChange: Boolean,
+    deleteNetwork: Function,
+    addNetwork: Function,
   },
   data() {
     return {
+      isOpenPopupAdding: false,
+      network: {
+        id: Math.floor(Math.random() * 100000),
+        kind: "TELEGRAM",
+        username: "",
+      },
       settings: column.find((el) => el.name === "networks"),
     };
   },
+  computed: {
+    getAddingNetworks() {
+      let kinds = this.networks.map((el) => el.kind);
+      return this.settings.settings.filter((el) => !kinds.includes(el.network));
+    },
+    getNetworks() {
+      return this.networks.filter(
+        (el) => el.kind !== "EMAIL" && el.kind !== "PHONE"
+      );
+    },
+  },
+  methods: {
+    closePopupAdding() {
+      this.isOpenPopupAdding = false;
+    },
+    openPopupAdding() {
+      this.isOpenPopupAdding = true;
+    },
+  },
 };
 </script>
 
@@ -24,4 +69,9 @@ export default {
   column-gap: 2px
 .icon
   color: var(--btn-blue-color)
+.delete
+  border-radius: 50%
+  background-color: var(--btn-red-color)
+  color: var(--default-white)
+  font-size: 8px
 </style>

src/pages/clients/components/cells/TableCellBodyPhone.vue

@@ -1,14 +1,18 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
+  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px' }")
-    span.text-sm {{value.some((el) => el.kind === "PHONE")?value.find((el) => el.kind === "PHONE").username:''}}
+    span.text-sm(v-if="!isOpenChange") {{value.phone.username}}
+    base-input(v-if="isOpenChange" :width-input="154" v-model:value="value.phone.username" :placeholder="value.phone.username")
 </template>
 
 <script>
+import BaseInput from "@/components/base/BaseInput";
 export default {
   name: "TableCellBodyPhone",
+  components: { BaseInput },
   props: {
-    value: Array,
+    value: Object,
     width: Number,
+    isOpenChange: Boolean,
   },
 };
 </script>

src/pages/clients/components/cells/TableCellBodyPriority.vue

@@ -1,17 +1,23 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.gap-x-2.w-full(:style="{ minWidth : width + 'px' }")
+  .flex.box-border.px-4.items-center.w-full.gap-x-2(:style="{ minWidth : width + 'px' }")
+    .flex.gap-x-2.items-center(v-if="!isOpenChange")
       .dot.w-2.h-2(:style="{ backgroundColor : settings.settings.find((el) => el.priority == value).color }")
       span.text-sm(:style="{ color : settings.settings.find((el) => el.priority == value).color }") {{settings.settings.find((el) => el.priority == value).text}}
+    .flex.gap-x-2.text-sm
+      base-select(v-if="isOpenChange" :width-select="120" :option-data="settings.settings.find((el) => el.priority == value).text" :list-data="selectData" :style-border="true" :choose-option="choosePriority")
 </template>
 
 <script>
 import { column } from "@/pages/clients/utils/tableConfig";
+import BaseSelect from "@/components/base/BaseSelect";
 export default {
   name: "TableCellBodyPriority",
-  props: ["value", "width"],
+  props: ["value", "width", "isOpenChange", "choosePriority"],
+  components: { BaseSelect },
   data() {
     return {
       settings: column.find((el) => el.name === "priority"),
+      selectData: ["Высокий", "Средний", "Низкий", "-"],
     };
   },
 };

src/pages/clients/utils/tableConfig.js

@@ -106,14 +106,14 @@ export const detail = {
   snils: {
     title: "СНИЛС",
     options: {
-      number: "Номер",
+      numba: "Номер",
     },
     width: 180,
   },
   inn: {
     title: "ИНН",
     options: {
-      number: "Номер",
+      numba: "Номер",
     },
     width: 180,
   },

tailwind.config.js

@@ -6,6 +6,7 @@ module.exports = {
         sans: ["Raleway", "sans-serif"],
       },
       fontSize: {
+        smx: ["6px", { lineHeight: "8px" }],
         xsm: ["10px", { lineHeight: "12px" }],
         ins: ["11px", { lineHeight: "12px" }],
         xxs: ["12px", { lineHeight: "14px" }],