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

Merge pull request #189 from dderbentsov/UC-157

Browse Source 
WIP Сделана анимация блока информации
This commit is contained in:
Daria Golova
2022-12-09 15:43:50 +03:00
committed by GitHub
parent 343ded6c07 5923d8350f
commit 9cc2abb420
8 changed files with 49 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/base/BaseInputDate.vue
View File

@@ -3,7 +3,7 @@
class="py-2.5",
:style="{ minWidth: widthInput + 'px' }"
)
input.input.w-full.outline-0.not-italic.date(
input.input.w-full.outline-0.not-italic.date.cursor-text(
:value="value",
type="date",
@input="$emit('update:value', $event.target.value)",

2
src/components/base/BaseInputTime.vue
View File

@@ -3,7 +3,7 @@
class="py-2.5"
:style="{ minWidth: widthInput + 'px' }"
)
input.input.w-full.outline-0.not-italic(
input.input.w-full.outline-0.not-italic.cursor-text(
:value="value"
type="time"
@input="$emit('update:value', $event.target.value)"

4
src/pages/calendar/components/CalendarFormAddEvent.vue
View File

@@ -37,14 +37,14 @@
.flex.gap-x-2.items-center
.flex.flex-col(class="gap-y-1.5")
span.text-xs.opacity-40.font-bold.leading-3 Начало
base-input-time.item-input.text-base.cursor-text.select(
base-input-time.item-input.text-base.select(
v-model:value="startTime",
:width-input="72"
)
span.mt-4 —
.flex.flex-col(class="gap-y-1.5")
span.text-xs.opacity-40.font-bold.leading-3 Конец
base-input-time.item-input.text-base.cursor-text.select(
base-input-time.item-input.text-base.select(
v-model:value="endTime",
:width-input="72"
)

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

@@ -256,7 +256,7 @@ export default {
}
if (this.section === "addresses") {
if (!this.addressId) {
if (this.sectionInfo.join_adress === "") this.isAddress = false;
if (this.sectionInfo.full_address === "") this.isAddress = false;
this.createAddress();
} else this.updateAddress();
}

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

@@ -1,5 +1,5 @@
<template lang="pug">
.w-full.h-fit.pt-4.flex.gap-x-4(class="px-[52px] pb-[30px]")
.w-full.h-fit.flex.gap-x-4
client-detail-info-section(
v-model:section-info="dataDocument",
section="pass",

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

@@ -7,7 +7,7 @@
:change-clearing-text-search="changeClearingTextSearch",
@search="filterDataClients",
)
.flex.flex-col.h-full.gap-y-2.table-container.w-full.mt-8.mb-3
.flex.flex-col.h-full.table-container.w-full.mt-8.mb-3
clients-table-header(:check="selectedCheck" :is-check="selectAll")
.flex.flex-col
clients-table-row(

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

@@ -5,7 +5,7 @@
)
button.recover-btn(@click="stopTimer") Восстановить
.countdown 0:{{ countdown }}
.row-wrapper.flex.flex-col.w-full
.row-wrapper.flex.flex-col.w-full(:class="closedDetail")
.row-body.flex.w-full.cursor-pointer(
:id="id",
@click="(e) => openDetailInfo(e)",
@@ -84,9 +84,8 @@
:disabled-delete="!!deletedClientId && !rowOverlay",
@delete-client="transmitDeleteClient"
)
transition(name="detail")
client-detail-info-wrapper.detail(
v-if="isOpenDetailInfo",
client-detail-info-wrapper.detail.px-52px(
:class="{'pb-[30px] pt-4': isOpenDetailInfo}"
:data-address="dataAddress",
:data-detail="dataDetail",
:data-attachments="dataAttachments",
@@ -185,6 +184,11 @@ export default {
rowOverlay() {
return this.deletedClientId === this.client.id;
},
closedDetail() {
return {
"closed-detail": !this.isOpenDetailInfo,
};
},
},
methods: {
stopTimer() {
@@ -340,7 +344,7 @@ export default {
addNotification(new Date().getTime(), title, message, "success", 5000);
},
addErrorNotification(title, message) {
addNotification(title, title, message, "error", 0);
addNotification(title, title, message, "error", 5000);
},
fetchClientDetail(id) {
fetchWrapper
@@ -420,15 +424,15 @@ export default {
},
saveAddress(data) {
this.addressId = data?.id;
if (data?.join_adress && data?.join_adress.substr(0, 4) !== "None") {
if (data?.full_address) {
this.dataAddress = {
join_adress: data?.join_adress,
full_address: data.full_address,
};
this.lackAddress = true;
} else {
this.lackAddress = false;
this.dataAddress = {
join_adress: "",
full_address: "",
};
}
},
@@ -455,7 +459,8 @@ export default {
postUpdateAddress() {
fetchWrapper
.post(`general/address/${this.addressId}/update/`, {
full_address: this.mergeFullAddress() || this.dataAddress.join_adress,
full_address:
this.mergeFullAddress() || this.dataAddress.full_address,
})
.then((response) => {
this.fetchClientDetail(this.id);
@@ -501,7 +506,8 @@ export default {
fetchWrapper
.post("general/address/create/", {
person_id: this.id,
full_address: this.mergeFullAddress() || this.dataAddress.join_adress,
full_address:
this.mergeFullAddress() || this.dataAddress.full_address,
})
.then((response) => {
this.fetchClientDetail(this.id);
@@ -601,9 +607,7 @@ export default {
.row-wrapper
border-bottom: 1px solid var(--border-light-grey-color)
min-width: 1556px
.row-wrapper:hover .detail
background-color: var(--bg-hover-row-table)
.row-wrapper:hover .row-body
.row-wrapper:hover
background-color: var(--bg-hover-row-table)
.row-body
color: var(--font-dark-blue-color)
@@ -634,18 +638,10 @@ export default {
color: var(--btn-blue-color)
.countdown
color: var(--font-grey-color )
.detail-enter-from
opacity: 0
transform: translateY(-2px)
pointer-events: none
.detail-enter-active
transition: 0.1s ease
.detail-leave-to
opacity: 0
transform: translateY(-2px)
pointer-events: none
.detail-leave-active
transition: 0.1s ease
.detail-move
transition: 0.1s ease
.detail
max-height: 560px
transition: 0.3s ease all
overflow: hidden
.closed-detail .detail
max-height: 0
</style>

2
tailwind.config.js
View File

@@ -44,7 +44,9 @@ module.exports = {
"22px": "22px",
"23px": "23px",
"29_25px": "29.25px",
"30px": "30px",
"45px": "45px",
"52px": "52px",
"74px": "74px",
"148px": "148px",
},