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

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.text-sm.font-semibold {{value.join(' ')}}
+      span {{avatar}}
+    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' }")
-    span.text-sm {{value.some((el) => el.kind === "PHONE")?value.find((el) => el.kind === "PHONE").username:''}}
+  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px' }")
+    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' }")
-    .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.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: ["Высокий", "Средний", "Низкий", "-"],
     };
   },
 };