diff --git a/src/components/HeaderInputs.vue b/src/components/HeaderInputs.vue
index bd379c1..ffa62a0 100644
--- 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
diff --git a/src/components/base/BaseAddingNetwork.vue b/src/components/base/BaseAddingNetwork.vue
index dd9056c..56e0ca9 100644
--- a/src/components/base/BaseAddingNetwork.vue
+++ b/src/components/base/BaseAddingNetwork.vue
@@ -1,25 +1,34 @@
.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)
diff --git a/src/components/base/BaseClientFormCreate.vue b/src/components/base/BaseClientFormCreate.vue
index 70383e7..5d9d1f3 100644
--- 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",
+ )
diff --git a/src/pages/clients/components/ClientsTableRow.vue b/src/pages/clients/components/ClientsTableRow.vue
index 21d9572..1b9b2c8 100644
--- 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) {
diff --git a/src/pages/clients/components/FormCreateBasicInfo.vue b/src/pages/clients/components/FormCreateBasicInfo.vue
index 12efb74..92afdc2 100644
--- 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"
) Добавить соцсеть
@@ -45,7 +42,6 @@
diff --git a/src/pages/clients/components/cells/TableCellBodyNetworks.vue b/src/pages/clients/components/cells/TableCellBodyNetworks.vue
index 4000b54..151f4a1 100644
--- a/src/pages/clients/components/cells/TableCellBodyNetworks.vue
+++ b/src/pages/clients/components/cells/TableCellBodyNetworks.vue
@@ -1,40 +1,43 @@
.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
diff --git a/src/pages/clients/utils/tableConfig.js b/src/pages/clients/utils/tableConfig.js
index 215ed75..c499d57 100644
--- 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,