diff --git a/src/components/base/BaseSelectNetworks.vue b/src/components/base/BaseSelectNetworks.vue
index 2de527b..53bba8d 100644
--- a/src/components/base/BaseSelectNetworks.vue
+++ b/src/components/base/BaseSelectNetworks.vue
@@ -1,19 +1,21 @@
.flex.box-border.container.items-center.cursor-pointer.justify-center.relative(
- @click="changeSelect"
+ @click="changeSelect",
+ v-click-outside="closeSelect",
:class="{border: styleBorder}"
- )
+ )
.flex.select.cursor-pointer.w-full.text-xl.items-center.networks(:class="optionData, 'px-2.5'")
.absolute.options.top-11.left-0(
- v-show="isSelectOpen"
- :id="id")
+ v-show="isSelectOpen",
+ :id="id"
+ )
.flex.option.justify-center.py-1.text-xl(
- v-for="data in listData"
- @click="(e) => chooseOption(e)"
- :key="data.network"
- :id="data.network"
+ v-for="data in listData",
+ @click="(e) => chooseOption(e)",
+ :key="data.network",
+ :id="data.network",
:class="data.icon"
- )
+ )
.select-form-separator.cursor-pointer.mr-6px(v-if="separator")
@@ -45,6 +47,9 @@ export default {
changeSelect() {
this.isSelectOpen = !this.isSelectOpen;
},
+ closeSelect() {
+ this.isSelectOpen = false;
+ },
},
};
diff --git a/src/pages/clients/components/ClientsActionPopup.vue b/src/pages/clients/components/ClientsActionPopup.vue
index 3bab5c2..ce26080 100644
--- a/src/pages/clients/components/ClientsActionPopup.vue
+++ b/src/pages/clients/components/ClientsActionPopup.vue
@@ -1,5 +1,5 @@
- .flex.flex-col.items-end.absolute.right-2.top-5
+ .flex.flex-col.absolute.left-2.top-6
.corner
.popup-wrapper.flex.flex-col.gap-y-3.w-10.h-10.p-4
.button.keep-redaction.flex.gap-x-3(@click="openChangeData")
@@ -64,7 +64,7 @@ export default {
.corner
width: 8px
height: 8px
- border-top-left-radius: 100%
+ border-top-right-radius: 100%
background-color: var(--default-white)
z-index: 12
overflow: hidden
diff --git a/src/pages/clients/components/ClientsTableRow.vue b/src/pages/clients/components/ClientsTableRow.vue
index 8bf257a..7e35aac 100644
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/src/pages/clients/components/ClientsTableRow.vue
@@ -11,14 +11,37 @@
@click="(e) => openDetailInfo(e)",
:class="{'row-overlay-color': rowOverlay}"
)
- .check-box.flex.justify-center.items-center(
- :class="{'row-opacity': rowOverlay}"
+ .flex.items-center.px-2(
+ v-show="!isOpenChange",
+ :tabindex="1",
+ @click="(e) => openPopup(e)",
+ @blur="handleUnFocusPopup"
)
- clients-table-checkbox(
- :id="id",
- :check="check",
- :is-check="isCheck"
- )
+ .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center
+ clients-action-popup(
+ v-if="isOpenPopup",
+ :open-change-data="openChangeData",
+ :disabled-delete="!!deletedClientId && !rowOverlay",
+ @delete-client="transmitDeleteClient"
+ )
+ .dots.flex.justify-center.items-center(v-if="!rowOverlay")
+ .flex.pl-5.z-10(v-if="isOpenChange")
+ base-button(
+ @click="closeChangeData",
+ confirm,
+ rounded,
+ outlined,
+ :size="20"
+ )
+ .icon-ok.text-xsm(class="pt-[3px]")
+ //- .check-box.flex.justify-center.items-center(
+ //- :class="{'row-opacity': rowOverlay}"
+ //- )
+ //- clients-table-checkbox(
+ //- :id="id",
+ //- :check="check",
+ //- :is-check="isCheck"
+ //- )
table-cell-body-name(
:class="{'row-opacity': rowOverlay}"
:value="dataClient",
@@ -62,28 +85,6 @@
:is-open-change="isOpenChange",
:width="columnBody.find(el => el.name === 'networks').width"
)
- .dots.flex.justify-center.items-center(v-if="!rowOverlay")
- base-button(
- v-if="isOpenChange",
- @click="closeChangeData",
- confirm,
- rounded,
- outlined,
- :size="20"
- )
- .icon-ok.text-xsm(class="pt-[3px]")
- .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(
- v-show="!isOpenChange",
- :tabindex="1",
- @click="(e) => openPopup(e)",
- @blur="handleUnFocusPopup"
- )
- clients-action-popup(
- v-if="isOpenPopup",
- :open-change-data="openChangeData",
- :disabled-delete="!!deletedClientId && !rowOverlay",
- @delete-client="transmitDeleteClient"
- )
client-detail-info-wrapper.detail.px-52px(
:class="{'pb-[30px] pt-4': isOpenDetailInfo}"
:data-address="dataAddress",
@@ -286,7 +287,9 @@ export default {
)
updateContacts.push(this.dataClient.email);
});
- createContacts.forEach((el) => this.postCreateContact(el));
+ createContacts.forEach((el) => {
+ if (!el.id) this.postCreateContact(el);
+ });
deleteContacts.forEach((el) => this.postDeleteContact(el));
updateContacts.forEach((el) => this.postUpdateContact(el));
},
@@ -300,11 +303,13 @@ export default {
.then(() => this.fetchDataClients());
},
postUpdateContact(contact) {
- fetchWrapper.post(`general/contact/${contact.id}/update/`, {
- kind: contact.kind,
- username: contact.username,
- person_id: this.client.id,
- });
+ fetchWrapper
+ .post(`general/contact/${contact.id}/update/`, {
+ kind: contact.kind,
+ username: contact.username,
+ person_id: this.client.id,
+ })
+ .then(() => this.fetchDataClients());
},
postDeleteContact(contact) {
fetchWrapper.del(`general/contact/${contact.id}/delete/`);
@@ -555,45 +560,55 @@ export default {
});
},
},
- created() {
- this.dataClient = {
- id: this.client.id,
- fullName: `${this.client.last_name || ""} ${
- this.client.first_name || ""
- } ${this.client.patronymic || ""}`,
- age: this.client.birth_date || "",
- priority: this.prioritySettings.settings.find(
- (el) =>
- el.priority === this.client.priority || this.client.priority === el.id
- ).text,
- phone: {
- id: this.client.contacts.find((el) => el.kind === "PHONE")?.id || "",
- kind: "PHONE",
- username:
- this.client.contacts.find((el) => el.kind === "PHONE")?.username ||
- "",
- },
- email: {
- id: this.client.contacts.find((el) => el.kind === "EMAIL")?.id || "",
- kind: "EMAIL",
- username:
- this.client.contacts.find((el) => el.kind === "EMAIL")?.username ||
- "",
- },
- contacts: [...this.client.contacts],
- avatar: this.client.first_name
- ? this.client.last_name[0] + this.client.first_name[0]
- : this.client.last_name.substr(0, 2),
- color: this.client.color,
- photo: this.client.photo,
- };
- },
watch: {
rowOverlay() {
if (this.rowOverlay) this.startTimer();
},
+ client: {
+ deep: true,
+ immediate: true,
+ handler(newValue) {
+ if (newValue) {
+ this.dataClient = {
+ id: this.client.id,
+ fullName: `${this.client.last_name || ""} ${
+ this.client.first_name || ""
+ } ${this.client.patronymic || ""}`,
+ age: this.client.birth_date || "",
+ priority: this.prioritySettings.settings.find(
+ (el) =>
+ el.priority === this.client.priority ||
+ this.client.priority === el.id
+ ).text,
+ phone: {
+ id:
+ this.client.contacts.find((el) => el.kind === "PHONE")?.id ||
+ "",
+ kind: "PHONE",
+ username:
+ this.client.contacts.find((el) => el.kind === "PHONE")
+ ?.username || "",
+ },
+ email: {
+ id:
+ this.client.contacts.find((el) => el.kind === "EMAIL")?.id ||
+ "",
+ kind: "EMAIL",
+ username:
+ this.client.contacts.find((el) => el.kind === "EMAIL")
+ ?.username || "",
+ },
+ contacts: [...this.client.contacts],
+ avatar: this.client.first_name
+ ? this.client.last_name[0] + this.client.first_name[0]
+ : this.client.last_name.substr(0, 2),
+ color: this.client.color,
+ photo: this.client.photo,
+ };
+ }
+ },
+ },
},
-
beforeUnmount() {
if (this.timer) {
this.deleteClient();
@@ -615,7 +630,7 @@ export default {
.check-box
min-width: 36px
.dots
- min-width: 53px
+ min-width: 14px
.dots-button
width: 20px
height: 20px
diff --git a/src/pages/clients/components/cells/TableCellBodyName.vue b/src/pages/clients/components/cells/TableCellBodyName.vue
index ee405f9..edec08e 100644
--- a/src/pages/clients/components/cells/TableCellBodyName.vue
+++ b/src/pages/clients/components/cells/TableCellBodyName.vue
@@ -1,5 +1,8 @@
- .flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(:style="{ minWidth : width + 'px' }")
+ .flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(
+ :style="{ minWidth : width + 'px' }",
+ :class="{'open-change': isOpenChange}"
+ )
base-avatar(:size="36", :color="avatarColor", v-if="!photo") {{avatar}}
base-avatar(:size="36", v-else)
img.h-full.object-cover(:src="url + photo")
@@ -39,4 +42,6 @@ export default {
border-radius: 50%
background-color: var(--font-grey-color)
color: var(--font-dark-blue-color)
+.open-change
+ padding-left: 52px
diff --git a/src/pages/clients/components/cells/TableCellBodyNetworks.vue b/src/pages/clients/components/cells/TableCellBodyNetworks.vue
index 469a01c..b167da8 100644
--- a/src/pages/clients/components/cells/TableCellBodyNetworks.vue
+++ b/src/pages/clients/components/cells/TableCellBodyNetworks.vue
@@ -23,7 +23,7 @@
base-popup.right-3.top-6(
v-if="isOpenPopupAdding",
@click.stop,
- v-click-outside="closePopup",
+ v-click-outside.stop="closePopup",
:width="485"
)
base-adding-network(
diff --git a/src/pages/clients/utils/tableConfig.js b/src/pages/clients/utils/tableConfig.js
index 7187c2c..43a015d 100644
--- a/src/pages/clients/utils/tableConfig.js
+++ b/src/pages/clients/utils/tableConfig.js
@@ -1,8 +1,9 @@
export const column = [
{
- name: "checkbox",
+ name: "dots",
+ title: "Do",
iconHead: false,
- width: 36,
+ width: 53,
},
{
name: "fullName",
@@ -73,7 +74,7 @@ export const column = [
icon: "icon-tg",
},
{
- network: "GOOGLE",
+ network: "GMAIL",
icon: "icon-google",
},
{
@@ -96,12 +97,11 @@ export const column = [
iconHead: false,
width: 152,
},
- {
- name: "dots",
- title: "Do",
- iconHead: false,
- width: 53,
- },
+ // {
+ // name: "checkbox",
+ // iconHead: false,
+ // width: 36,
+ // },
];
export const detail = {