WIP Сделано модальное окно, начат overlay
This commit is contained in:
Daria Golova
@@ -1,91 +1,108 @@
|
||||
<template lang="pug">
|
||||
.row-wrapper.flex.flex-col.w-full
|
||||
.row-body.flex.w-full.cursor-pointer(
|
||||
:id="id",
|
||||
@click="(e) => openDetailInfo(e)"
|
||||
.wrapper.flex
|
||||
.row-overlay.flex.justify-center.items-center.gap-x-2.text-base(
|
||||
v-if="rowOverlay",
|
||||
:style="rowSize"
|
||||
)
|
||||
.check-box.flex.justify-center.items-center
|
||||
clients-table-checkbox(
|
||||
:id="id",
|
||||
:check="check",
|
||||
:is-check="isCheck"
|
||||
button.recover-btn Восстановить
|
||||
div 0:30
|
||||
.row-wrapper.flex.flex-col.w-full(ref="rowWrapper")
|
||||
.row-body.flex.w-full.cursor-pointer(
|
||||
:id="id",
|
||||
@click="(e) => openDetailInfo(e)",
|
||||
:class="{'row-overlay-color': rowOverlay}"
|
||||
)
|
||||
.check-box.flex.justify-center.items-center(
|
||||
:style="{'opacity': rowOverlay && '0.5'}"
|
||||
)
|
||||
table-cell-body-name(
|
||||
:value="dataClient",
|
||||
:avatar="dataClient.avatar",
|
||||
:avatar-color="dataClient.color",
|
||||
:photo="dataClient.photo"
|
||||
: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",
|
||||
:add-network="addNetwork",
|
||||
:networks="dataClient.contacts",
|
||||
:is-open-change="isOpenChange",
|
||||
:width="columnBody.find(el => el.name === 'networks').width"
|
||||
)
|
||||
.dots.flex.justify-center.items-center
|
||||
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"
|
||||
:delete-client="deleteClient"
|
||||
clients-table-checkbox(
|
||||
:id="id",
|
||||
:check="check",
|
||||
:is-check="isCheck"
|
||||
)
|
||||
client-detail-info-wrapper(
|
||||
v-if="isOpenDetailInfo"
|
||||
:data-address="dataAddress"
|
||||
:data-detail="dataDetail"
|
||||
:data-attachments="dataAttachments"
|
||||
:data-document="dataIdentityDocument"
|
||||
:save-new-doc="saveNewDoc"
|
||||
:delete-doc="deleteDoc"
|
||||
:update-document="postUpdateIdentityDocument"
|
||||
:update-address="postUpdateAddress"
|
||||
:lack-data="lackData"
|
||||
:lack-address="lackAddress"
|
||||
:dope-address="dopeAddress"
|
||||
:lack-attachments="lackAttachments"
|
||||
:create-address="postCreateAddress"
|
||||
:create-document="postCreateIdentityDocument"
|
||||
:address-id="addressId"
|
||||
:doc-id="docId"
|
||||
)
|
||||
table-cell-body-name(
|
||||
:style="{'opacity': rowOverlay && '0.5'}"
|
||||
:value="dataClient",
|
||||
:avatar="dataClient.avatar",
|
||||
:avatar-color="dataClient.color",
|
||||
:photo="dataClient.photo"
|
||||
:is-open-change="isOpenChange",
|
||||
:width="columnBody.find(el => el.name === 'fullName').width"
|
||||
)
|
||||
table-cell-body-age(
|
||||
v-if="!rowOverlay",
|
||||
:value="dataClient",
|
||||
:is-open-change="isOpenChange",
|
||||
:width="columnBody.find(el => el.name === 'age').width"
|
||||
)
|
||||
table-cell-body-priority(
|
||||
v-if="!rowOverlay",
|
||||
:value="dataClient.priority",
|
||||
:choose-priority="choosePriority",
|
||||
:is-open-change="isOpenChange",
|
||||
:width="columnBody.find(el => el.name === 'priority').width"
|
||||
)
|
||||
table-cell-body-phone(
|
||||
v-if="!rowOverlay",
|
||||
:value="dataClient",
|
||||
:is-open-change="isOpenChange",
|
||||
:width="columnBody.find(el => el.name === 'phone').width"
|
||||
)
|
||||
table-cell-body-email(
|
||||
v-if="!rowOverlay",
|
||||
:value="dataClient",
|
||||
:is-open-change="isOpenChange",
|
||||
:width="columnBody.find(el => el.name === 'email').width"
|
||||
)
|
||||
table-cell-body-networks(
|
||||
v-if="!rowOverlay",
|
||||
:delete-network="deleteNetwork",
|
||||
:add-network="addNetwork",
|
||||
:networks="dataClient.contacts",
|
||||
: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"
|
||||
@delete-client="transmitDeleteClient"
|
||||
)
|
||||
client-detail-info-wrapper(
|
||||
v-if="isOpenDetailInfo && !rowOverlay",
|
||||
:data-address="dataAddress"
|
||||
:data-detail="dataDetail"
|
||||
:data-attachments="dataAttachments"
|
||||
:data-document="dataIdentityDocument"
|
||||
:save-new-doc="saveNewDoc"
|
||||
:delete-doc="deleteDoc"
|
||||
:update-document="postUpdateIdentityDocument"
|
||||
:update-address="postUpdateAddress"
|
||||
:lack-data="lackData"
|
||||
:lack-address="lackAddress"
|
||||
:dope-address="dopeAddress"
|
||||
:lack-attachments="lackAttachments"
|
||||
:create-address="postCreateAddress"
|
||||
:create-document="postCreateIdentityDocument"
|
||||
:address-id="addressId"
|
||||
:doc-id="docId"
|
||||
:current-year="currentYear"
|
||||
)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -152,6 +169,8 @@ export default {
|
||||
check: Function,
|
||||
isCheck: Boolean,
|
||||
client: Object,
|
||||
currentYear: Number,
|
||||
rowOverlay: Boolean,
|
||||
},
|
||||
created() {
|
||||
this.dataClient = {
|
||||
@@ -183,6 +202,15 @@ export default {
|
||||
photo: this.client.photo,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
rowSize() {
|
||||
let size = this.$refs["rowWrapper"].getBoundingClientRect();
|
||||
return {
|
||||
height: `${size.height}px`,
|
||||
width: `${size.width}px`,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
postUpdateClient() {
|
||||
fetchWrapper.post(`general/person/${this.client.id}/update/`, {
|
||||
@@ -271,10 +299,11 @@ export default {
|
||||
openChangeData() {
|
||||
this.isOpenChange = true;
|
||||
},
|
||||
async deleteClient() {
|
||||
await fetchWrapper.del(`general/person/${this.dataClient.id}/delete/`);
|
||||
transmitDeleteClient() {
|
||||
/* await fetchWrapper.del(`general/person/${this.dataClient.id}/delete/`);
|
||||
this.handleUnFocusPopup();
|
||||
this.$emit("update-clients");
|
||||
this.$emit("update-clients");*/
|
||||
this.$emit("delete-client", this.dataClient.id);
|
||||
},
|
||||
fetchClientDetail(id) {
|
||||
fetchWrapper
|
||||
@@ -456,4 +485,12 @@ export default {
|
||||
&:hover
|
||||
background-color: var(--btn-blue-color)
|
||||
color: var(--default-white)
|
||||
.row-overlay
|
||||
background: transparent
|
||||
position: absolute
|
||||
z-index: 100
|
||||
.row-overlay-color
|
||||
background: var(--row-overlay-color)
|
||||
.recover-btn
|
||||
color: var(--btn-blue-color)
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user