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

WIP Сделано модальное окно, начат overlay

Browse Source
This commit is contained in:
Daria Golova
2022-11-30 16:01:04 +03:00
parent 5ed39c0038
commit 8dbfff1a10
6 changed files with 162 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/sass/variables.sass
View File

@@ -18,6 +18,7 @@
--bg-btn-icons-color: rgba(215, 217, 255, 0.6)
--font-grey-color: #9294a7
--border-light-grey-color: #d3d4dc
--row-overlay-color: #f5f6ff
--default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
--bg-hover-row-table: rgba(215, 217, 255, 0.25)
--default-white: #fff

8
src/pages/clients/components/ClientTableDeleteModal.vue
View File

@@ -1,6 +1,6 @@
<template lang="pug">
.flex.flex-col.mb-1.mt-4
span.font-medium.text-base.modal-text.mb-3 Вы действительно хотите удалить клиента?
span.font-medium.text-base.modal-text Вы действительно хотите удалить клиента?
.flex.gap-x-3.mt-6.font-semibold
base-button(
outlined,
@@ -10,7 +10,7 @@
base-button(
outlined-red,
:size=40,
@click="deleteEvent"
@click=""
) Удалить
</template>
@@ -32,8 +32,8 @@ export default {
color: var(--font-grey-color)
.card-container
width: 374px
height: 82px
width: 420px
height: 194px
border-radius: 4px
border: 1px solid var(--border-light-grey-color-1)
</style>

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

@@ -8,7 +8,7 @@
.button.keep-redaction.flex.gap-x-3
.icon-star-off.icon
span На ведение
.button.delete.flex.gap-x-3(@click="deleteClient")
.button.delete.flex.gap-x-3(@click="transmitDeleteClient")
.icon-basket.icon-delete
span Удалить
</template>
@@ -18,7 +18,11 @@ export default {
name: "ClientsActionPopup",
props: {
openChangeData: Function,
deleteClient: Function,
},
methods: {
transmitDeleteClient() {
this.$emit("delete-client");
},
},
};
</script>

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

@@ -15,8 +15,9 @@
:is-check="marked.includes(client.id)",
:check="selectedCheck",
:client="client",
:fetch-data-clients="fetchDataClients",
@update-clients="updateDataClient"
:current-year="currentYear",
:row-overlay="deletedClientId === client.id",
@delete-client="deleteClientHandler",
)
client-table-pagination(
v-if="paginationInfo.length > 1"
@@ -29,6 +30,9 @@
v-model="showModal",
title="Удалить клиента"
)
client-table-delete-modal(
:close-modal="changeShowModal"
)
</template>
<script>
@@ -40,6 +44,7 @@ import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbo
import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
import ClientTablePagination from "./ClientTablePagination.vue";
import BaseModal from "@/components/base/BaseModal.vue";
import ClientTableDeleteModal from "./ClientTableDeleteModal.vue";
export default {
name: "ClientsTable",
components: {
@@ -50,6 +55,7 @@ export default {
BaseClientFormCreate,
ClientTablePagination,
BaseModal,
ClientTableDeleteModal,
},
props: {
openForm: Function,
@@ -63,14 +69,15 @@ export default {
marked: [],
dataClients: [],
currentTablePage: 1,
limit: 4,
limit: 14,
count: 0,
textSearch: "",
paginationInfo: {
currentPage: 0,
length: 0,
},
showModal: true,
showModal: false,
deletedClientId: "",
};
},
computed: {
@@ -144,6 +151,17 @@ export default {
changeCurrentTablePage(value) {
this.currentTablePage = value;
},
changeShowModal() {
this.showModal = false;
},
openModal() {
this.showModal = true;
},
deleteClientHandler(id) {
this.deletedClientId = id;
console.log(this.deletedClientId);
this.openModal();
},
},
watch: {
updatedClients() {
@@ -160,6 +178,9 @@ export default {
currentTablePage() {
this.fetchDataClients();
},
/*showModal() {
if (!this.showModal) this.deletedClientId = "";
},*/
},
mounted() {
this.fetchDataClients();

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

@@ -9,12 +9,11 @@
placeholder="Введите фамилию"
)
.icon-search
base-button(
outlined,
base-button.font-semibold(
@click="searchLastName",
:size=40
) Поиск
base-button(
base-button.font-semibold(
v-if="searchClient.length > 0",
secondary,
@click="resetLastName",

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

@@ -1,16 +1,27 @@
<template lang="pug">
.row-wrapper.flex.flex-col.w-full
.wrapper.flex
.row-overlay.flex.justify-center.items-center.gap-x-2.text-base(
v-if="rowOverlay",
:style="rowSize"
)
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)"
@click="(e) => openDetailInfo(e)",
:class="{'row-overlay-color': rowOverlay}"
)
.check-box.flex.justify-center.items-center(
:style="{'opacity': rowOverlay && '0.5'}"
)
.check-box.flex.justify-center.items-center
clients-table-checkbox(
:id="id",
:check="check",
:is-check="isCheck"
)
table-cell-body-name(
:style="{'opacity': rowOverlay && '0.5'}"
:value="dataClient",
:avatar="dataClient.avatar",
:avatar-color="dataClient.color",
@@ -19,34 +30,39 @@
: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
.dots.flex.justify-center.items-center(v-if="!rowOverlay")
base-button(
v-if="isOpenChange",
@click="closeChangeData",
@@ -65,10 +81,10 @@
clients-action-popup(
v-if="isOpenPopup",
:open-change-data="openChangeData"
:delete-client="deleteClient"
@delete-client="transmitDeleteClient"
)
client-detail-info-wrapper(
v-if="isOpenDetailInfo"
v-if="isOpenDetailInfo && !rowOverlay",
:data-address="dataAddress"
:data-detail="dataDetail"
:data-attachments="dataAttachments"
@@ -85,6 +101,7 @@
:create-document="postCreateIdentityDocument"
:address-id="addressId"
:doc-id="docId"
:current-year="currentYear"
)
</template>
@@ -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>