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

WIP Сделала закрытие DescriptionCard на клик вне

Browse Source
This commit is contained in:
Daria Golova
2022-11-11 16:40:07 +03:00
parent c873dbcb3a
commit a044b667b5
5 changed files with 211 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/calendar/components/CalendarColumn.vue
View File

@@ -16,6 +16,7 @@
calendar-event-card(
v-for="event in dayEvents"
:key="event.id"
:id="event.id"
:ownerEvent="event"
:event-types="eventTypes"
:style="eventCardPosition(event.start, event.end)"

58
src/pages/calendar/components/CalendarEventCard.vue
View File

@@ -1,12 +1,12 @@
<template lang="pug">
.wrapper.cursor-pointer.my-1.relative(
@click="transmitEventData",
:style="themeColors",
:class="cardTheme"
)
.card.flex.px-2(
:class="{'py-6px flex-col': longCard}",
:style="cardHeight"
:style="cardHeight",
@click="openDescriptionCard"
)
.header.flex.justify-between.items-center(:class="{'items-start': longCard}")
.header-text
@@ -20,12 +20,17 @@
.col
ul
li.mt-2(v-for="elem in descriptionColumns.rightColumn" :key="elem") {{ elem }}
calendar-event-description-card.right-0(
v-if="isActive"
:style="descriptionCardPosition"
:owner-event="this.ownerEvent"
:event-types="this.eventTypes"
)
calendar-event-description-card.right-0(
v-if="isOpenDescriptionCard"
:style="descriptionCardPosition"
:owner-event="this.ownerEvent"
:event-types="this.eventTypes"
:event-time="this.eventTime"
:event-member="eventMember"
:description="description"
@selected-event="transmitEventData"
@close-description-card="closeDescriptionCard"
)
</template>
<script>
@@ -47,6 +52,7 @@ export default {
pixelsPerHour: 62,
isActive: false,
someDetailsShown: true,
isOpenDescriptionCard: false,
};
},
computed: {
@@ -190,16 +196,29 @@ export default {
composeFullName(object) {
return `${object.last_name} ${object.first_name} ${object.patronymic}`;
},
transmitEventData() {
this.changeTheme();
this.$emit("selected-event", this.ownerEvent);
},
changeTheme() {
this.isActive = !this.isActive;
},
changeDetailsShown() {
this.someDetailsShown = false;
},
transmitEventData() {
this.$emit("selected-event", this.ownerEvent);
this.hideDescriptionCard();
},
hideDescriptionCard() {
this.isOpenDescriptionCard = false;
},
openDescriptionCard() {
if (!this.isOpenDescriptionCard && !this.isActive) {
this.isOpenDescriptionCard = true;
this.changeTheme();
}
},
closeDescriptionCard() {
this.hideDescriptionCard();
this.changeTheme();
},
},
};
</script>
@@ -216,6 +235,8 @@ export default {
background-color: var(--bg-color)
border: 2px solid var(--border-color)
border-left: 4px solid var(--bg-active)
.card:hover
background-color: var(--bg-hover)
.header-text, .body
color: var(--font-color)
.details-count
@@ -240,19 +261,6 @@ export default {
.card
border-radius: 4px
min-height: 23px
&:hover
background-color: var(--bg-hover)
border: 2px solid var(--border-color)
border-left: 4px solid var(--bg-active)
&:hover .header-text
color: var(--font-color)
&:hover .details-count
background-color: var(--bg-active)
color: var(--font-active-color)
&:hover .body
color: var(--font-color)
&:hover li:before
background-color: var(--font-color)
.header
width: 100%

115
src/pages/calendar/components/CalendarEventDescriptionCard.vue
View File

@@ -1,5 +1,23 @@
<template lang="pug">
.wrapper.px-4.pt-14px.pb-4.font-medium
.wrapper.px-4.pt-14px.pb-4.font-medium.cursor-auto(
:style="typeColor",
v-click-outside="close"
)
.flex.justify-between.items-center.mb-2
.flex
span.inline-block.font-bold.text-base.mr-3.mt-2px {{ eventTime }}
.type.text-xxs.px-14px.py-1(v-if="isCertainType")
span.type-text {{ ownerEvent.kind }}
.right-side.flex.gap-x-4.text-sm
.icon-basket.flex.items-center.cursor-pointer
.icon-edit.flex.items-center.cursor-pointer(@click="transmitEventData")
.icon-cancel.text-xxs.flex.items-center.cursor-pointer(@click="close")
.body.mr-6
span.text-base {{ eventMember }}
.flex.text-xxs.mt-4.justify-between
.column
ul
li(v-for="elem in description" :key="elem") {{ elem }}
</template>
<script>
@@ -13,15 +31,108 @@ export default {
return [];
},
},
eventTime: {
type: String,
default: "",
},
eventMember: {
type: String,
default: "",
},
description: Array,
},
data() {
return {
isCertainType: true,
};
},
computed: {
typeColor() {
switch (this.ownerEvent.kind) {
case this.eventTypes[0].label:
return {
"--bg-color": "var(--bg-event-green-color-0)",
"--font-color": this.eventTypes[0].color,
};
case this.eventTypes[1].label:
return {
"--bg-color": "var(--bg-event-red-color-0)",
"--font-color": this.eventTypes[1].color,
};
case this.eventTypes[2].label:
return {
"--bg-color": "var(--bg-event-yellow-color-0)",
"--font-color": "var(--font-black-color)",
};
case this.eventTypes[3].label:
return {
"--bg-color": "var(--bg-event-blue-color-0)",
"--font-color": this.eventTypes[3].color,
};
default:
this.changeType();
return {};
}
},
},
methods: {
changeType() {
this.isCertainType = false;
},
transmitEventData() {
this.$emit("selected-event");
},
close() {
this.$emit("close-description-card");
},
},
};
</script>
<style lang="sass" scoped>
.wrapper
width: 426px
height: auto !important
background-color: var(--default-white)
border-radius: 4px
color: var(--font-black-color)
box-shadow: var(--default-shadow)
.type
background-color: var(--bg-color)
border-radius: 4px
.type-text
color: var(--font-color)
.right-side
height: 16px
color: var(--btn-blue-color)
.icon-basket
color: var(--border-red-color)
.column
max-width: calc(462px/2 - 36px)
ul
list-style-type: none
margin: 0
padding: 0
li
margin-bottom: 8px
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
&:last-child
margin: 0px
li:before
content: ''
display: inline-block
height: 6px
width: 6px
border-radius: 50%
background-color: var(--font-black-color)
margin: 0 8px 1px 0
</style>

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

@@ -1,19 +1,70 @@
<template lang="pug">
.row-wrapper.flex.flex-col.w-full
.row-body.flex.w-full.cursor-pointer(:id="id" @click="(e) => openDetailInfo(e)")
.row-body.flex.w-full.cursor-pointer(
:id="id",
@click="(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="dataClient" :avatar="dataClient.avatar" :avatar-color="dataClient.color" :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")
clients-table-checkbox(
:id="id",
:check="check",
:is-check="isCheck"
)
table-cell-body-name(
:value="dataClient",
:avatar="dataClient.avatar",
:avatar-color="dataClient.color",
: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="true" :rounded="true" :outlined="true" :size="20")
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")
.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"
)
client-detail-info-wrapper(
v-if="isOpenDetailInfo"
:data-address="dataAddress"
@@ -284,6 +335,7 @@ export default {
},
openPopup(e) {
e.target.focus();
e.stopPropagation();
this.isOpenPopup = !this.isOpenPopup;
},
openDetailInfo(e) {