admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
DwCay
2022-10-26 16:11:56 +03:00
parent a9ae13b943
commit a2715a712f
21 changed files with 515 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
server.js
View File

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

10
src/components/TheSidebar.vue
View File

@@ -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>

27
src/components/base/BaseAddingNetwork.vue Normal file
View File

@@ -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>

3
src/components/base/BaseInput.vue
View File

@@ -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(:style="{ backgroundColor: backgroundInput, fontSize: fontSizeInput }" :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>
@@ -38,4 +38,5 @@ export default {
.input-wrapper
border: 2px solid var(--border-light-grey-color)
border-radius: 4px
background-color: var(--default-white)
</style>

32
src/components/base/BasePopup.vue Normal file
View File

@@ -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>

26
src/components/base/BaseSelect.vue
View File

@@ -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}}
.absolute.options(v-show="isSelectOpen" :id="id")
.not-italic.text-base.option(v-for="(responsible, index) in listData" @click="(e) => chooseOption(e)" :key="index" :id="index") {{responsible}}
.not-italic.select.cursor-pointer.w-full(v-if="!forNetworks") {{optionData}}
.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" :id="responsible") {{responsible}}
.not-italic.select.cursor-pointer.w-full(v-if="forNetworks" :class="optionData")
.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(:class="{ open: isSelectOpen}")
.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

17
src/pages/clients/components/ClientDetailInfoSection.vue
View File

@@ -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")
span.title-section.font-semibold.text-xs(v-if="settings[section].options") {{item}}
.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") {{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")
.copy.icon-copy.cursor-pointer(v-if="item.copy")
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" @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}}
.copy.icon-copy.cursor-pointer.pl-4(v-if="item.copy")
span.text-sm.w-fit {{item.value}}
.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;
},

2
src/pages/clients/components/ClientDetailInfoWrapper.vue
View File

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

15
src/pages/clients/components/ClientsActionPopup.vue
View File

@@ -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
.icon-edit.icon-redaction
.button.keep-redaction.flex.gap-x-3(@click="openChangeData")
.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>

5
src/pages/clients/components/ClientsTable.vue
View File

@@ -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]"
:age="client.birth_date"
:priority="client.priority"
:contacts="client.contacts"
:client="client"
)
</template>

2
src/pages/clients/components/ClientsTableHat.vue
View File

@@ -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

71
src/pages/clients/components/ClientsTableRow.vue
View File

@@ -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-age(:value="age" :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-phone(:value="contacts" :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-networks(:networks="contacts" :width="columnBody.find(el => el.name === 'networks').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="dataClient" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'age').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="dataClient" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'phone').width")
table-cell-body-email(:value="dataClient" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'email').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")
clients-action-popup(v-if="isOpenPopup")
client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-detail="dataDetail" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
base-button-ok(v-if="isOpenChange" :size="20" :icon-size="10" :dark-style="true" @click="closeChangeData")
.relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(v-if="!isOpenChange" :tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
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,
age: String,
priority: {
default: null,
client: Object,
},
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.isOpenDetailInfo && this.fetchClientDetail(e.currentTarget.id),
this.fetchClientIdentityDocument(e.currentTarget.id);
},
handleUnFocusPopup() {

2
src/pages/clients/components/FormCreateBasicInfo.vue
View File

@@ -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")

8
src/pages/clients/components/cells/TableCellBodyAge.vue
View File

@@ -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>

8
src/pages/clients/components/cells/TableCellBodyEmail.vue
View File

@@ -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>

13
src/pages/clients/components/cells/TableCellBodyName.vue
View File

@@ -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>

52
src/pages/clients/components/cells/TableCellBodyNetworks.vue
View File

@@ -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>

10
src/pages/clients/components/cells/TableCellBodyPhone.vue
View File

@@ -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>

10
src/pages/clients/components/cells/TableCellBodyPriority.vue
View File

@@ -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: ["Высокий", "Средний", "Низкий", "-"],
};
},
};

4
src/pages/clients/utils/tableConfig.js
View File

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

1
tailwind.config.js
View File

@@ -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" }],