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

Настроена работа чек боксов, добавлено popup окно активностей по клиенту, исправлены ошибки стилизации

Browse Source
This commit is contained in:
DwCay
2022-10-13 21:01:27 +03:00
parent 852f41719d
commit 56011797be
15 changed files with 168 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@
.flex.flex-col.gap-y-2
.flex.justify-between.pt-2
span.not-italic.text-xs.opacity-40.leading-3 Ответственный
.icon-cancel.close-icon.text-xs(@click="closeEventForm")
.icon-cancel.close-icon.cursor-pointer.text-xs(@click="closeEventForm")
base-select(
id="responsible"
width="205px"
@@ -14,27 +14,27 @@
:select-open="openSelectResponsible"
)
.flex.flex-col.gap-y-2
span.not-italic.text-xs.opacity-40.leading-3 Оновная информация
span.not-italic.text-xs.opacity-40.leading-3 Основная информация
.flex.gap-x-4.items-center
.icon-time.text-xl.icon
.flex.gap-x-2.items-center
.form-item.flex.gap-x-2.px-4.py-2.items-center
input.item-input.no-italic.text-base(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
.form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
span —
.form-item.flex.gap-x-2.px-4.py-2.items-center
input.item-input.no-italic.text-base(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
.form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
.flex.gap-x-4.items-center
.icon-person.text-xl.icon
.form-item.flex.gap-x-2.px-4.py-2.items-center
input.item-input.no-italic.text-base(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
.form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
.flex.flex-col.gap-y-2(class='additional-information')
.flex.gap-x-4.items-center
span.not-italic.text-xs.opacity-40.leading-3 Дополнительная информация
button-plus(id="addInfo" @click="(e)=>addFriendInfo(e)")
.flex.gap-x-4.items-center(v-for="(info, index) in listFriendInfo" :key="index")
span.ml-1 {{info}}
.form-item.flex.gap-x-2.px-4.py-2.items-center
input.item-input.no-italic.text-base(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное")
.form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное")
.flex.flex-col.gap-y-2
span.not-italic.text-xs.opacity-40.leading-3 Вид события
base-select(
@@ -52,8 +52,8 @@
button-plus(id="addContact" @click="(e)=>addFriendInfo(e)")
.flex.gap-x-4.items-center(v-for="(contact, index) in listContacts" :key="index")
.icon-mail.text-xl.icon
.form-item.flex.gap-x-2.px-4.py-2.items-center
input.item-input.no-italic.text-base(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
.form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
add-event-button(@click="createEvent")
</template>
@@ -135,7 +135,6 @@ export default {
box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
border-radius: 4px
.form-item
cursor: pointer
border-radius: 4px
width: fit-content
background-color: var(--bg-ligth-blue-color)
@@ -143,7 +142,6 @@ export default {
appearance: none
border: none
outline: none
cursor: pointer
color: rgba(9, 10, 21, 0.5)
background-color: rgba(9, 10, 21, 0)
&::-webkit-calendar-picker-indicator
@@ -154,7 +152,6 @@ export default {
height: 24px
color: var(--font-dark-blue-color)
.close-icon
cursor: pointer
color: var(--font-dark-blue-color)
&:hover
color: var(--btn-blue-color)

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

@@ -1,14 +1,16 @@
<template lang="pug">
.popup-wrapper.absolute.flex.flex-col.gap-y-3.w-10.h-10.right-2.top-5.p-4
.keep-redaction.flex.gap-x-3
.icon-edit.icon-redaction
span Редактировать
.keep-redaction.flex.gap-x-3
.icon-star.icon-redaction
span На ведение
.delete.flex.gap-x-3
.icon-basket
span Удалить
.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
span Редактировать
.button.keep-redaction.flex.gap-x-3
img(src="@/assets/icons/star.svg" alt="Star")
span На ведение
.button.delete.flex.gap-x-3
img(src="@/assets/icons/basket.svg" alt="Basket")
span Удалить
</template>
<script>
@@ -20,14 +22,25 @@ export default {
<style lang="sass" scoped>
.popup-wrapper
width: 180px
height: 136px
height: 128px
border-radius: 4px 0 4px 4px
background-color: var(--default-white)
background-color: var(--bg-white-color)
box-shadow: var(--default-shadow)
z-index: 1
.keep-redaction
color: var(--font-dark-blue-color)
.icon-redaction
color: var(--btn-blue-color)
.delete
color: var(--btn-red-color)
.button
&:hover
opacity: 0.7
.corner
width: 8px
height: 8px
border-top-left-radius: 100%
background-color: var(--bg-white-color)
z-index: 2
overflow: hidden
</style>

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

@@ -4,43 +4,45 @@
thead.head-table
tr.head-row
th.w-3
.checkbox.px-4.py-3
clients-table-checkbox
.px-4.py-3
clients-table-checkbox(:is-check="selectAll" :check="selectedCheck" id="all")
th.name
.flex.px-4.justify-between.gap-x-40
.flex.px-4.justify-between
span.text-sm ФИО
.icon-down-arrow.text-xsm.mt-1
img.cursor-pointer(src="@/assets/icons/sort-number.svg" alt="SortNumber")
th.age
.flex.px-4.justify-between
span.text-sm Возраст
.icon-down-arrow.text-xsm.mt-1
th
.icon.icon-down-arrow.text-xsm.mt-1.cursor-pointer
th.job-title
.px-4.text-left
span.text-sm Должность
th.priority
.flex.px-4.justify-between
.flex.relative.px-4.justify-between
span.text-sm Приоритет
.icon-down-arrow.text-xsm.mt-1
th
.phone.px-4.text-left
.icon.icon-down-arrow.text-xsm.mt-1.cursor-pointer
th.phone
.px-4.text-left
span.text-sm Телефон
th
.email.px-4.text-left
th.email
.px-4.text-left
span.text-sm Email
th
.networks.px-4.text-left
span.text-sm Сети
th.networks
.px-4.text-left
span.text-sm.leading-8 Сети
th.meeting
.flex.px-4.justify-between.gap-x-11
span.text-sm Ближайшая встреча
.icon-down-arrow.text-xsm.mt-1
span.text-sm.leading-4.whitespace-nowrap Ближайшая встреча
.icon.icon-down-arrow.text-xsm.mt-1.cursor-pointer
th.w-5
.do.px-4
span.text-sm Do
tbody
tbody.tbody
clients-table-row(v-for="client in dataClients"
:key="client.id"
:id="client.id"
:is-check="marked.includes(client.id)"
:check="selectedCheck"
:full-name="client.fullName"
:age="client.age"
:job-title="client.jobTitle"
@@ -60,6 +62,8 @@ export default {
components: { ClientsTableCheckbox, ClientsTableRow },
data() {
return {
selectAll: false,
marked: [],
dataClients: [
{
id: "1",
@@ -75,25 +79,85 @@ export default {
time: "18:30–19:30",
},
},
{
id: "2",
fullName: "Астафоркина Екатерина Геннадьевна",
age: "54",
jobTitle: "Менеджер",
priority: "-",
phone: "+7 (574) 364–53–36",
email: "antimag@gmail.com",
networks: [],
meetingTime: {
date: "14.07.22",
time: "17:30–21:30",
},
},
],
};
},
methods: {
selectedCheck(e) {
if (e.target.id === "all") {
this.selectAll = !this.selectAll;
this.marked = this.dataClients.map((el) => el.id);
!this.selectAll ? (this.marked = []) : true;
} else {
if (e.target.checked) {
this.marked = [...this.marked, e.target.id];
}
if (!e.target.checked) {
this.marked = this.marked.filter((el) => el !== e.target.id);
}
if (this.marked.length !== this.dataClients.length) {
this.selectAll = false;
} else {
this.selectAll = true;
}
}
},
},
};
</script>
<style lang="sass" scoped>
.check-box
min-width: 36px
max-width: 36px
.name
min-width: 400px
.age
min-width: 140px
.job-title
min-width: 200px
.priority
min-width: 124px
.phone
min-width: 190px
.email
min-width: 250px
.network
min-width: 152px
.meeting
max-width: 220px
.dots
min-width: 53px
max-width: 53px
.icon
color: var(--font-dark-blue-color)
&.priority-open
transform: rotate(180deg)
.head-table
color: var(--font-grey-color)
border-collapse: separate
border-bottom: 8px solid transparent
.meeting
max-width: 180px
.priority
max-width: 80px
.tbody:before
content: "-"
display: block
line-height: 8px
color: transparent
.head-row
border-bottom: 1px solid #D3D4DC
.wrapper
background-color: var(--default-white)
background-color: var(--bg-white-color)
.color
background-color: red
</style>

7
src/pages/clients/components/ClientsTableCheckbox.vue
View File

@@ -1,10 +1,15 @@
<template lang="pug">
input.checkbox(type="checkbox")
input.checkbox.cursor-pointer(type="checkbox" :id="id" :checked="isCheck" @change="(e) => check(e)")
</template>
<script>
export default {
name: "ClientsTableCheckBox",
props: {
id: String,
check: Function,
isCheck: Boolean,
},
};
</script>

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

@@ -1,8 +1,8 @@
<template lang="pug">
tr.row-client.text-ms.cursor-pointer(:id="id")
td.py-5
.px-4.items-center
clients-table-checkbox
.px-4.items-center.w-fit
clients-table-checkbox(:is-check="isCheck" :check="check" :id="id")
td.py-5
.px-4.font-semibold {{fullName}}
td.py-5
@@ -26,8 +26,8 @@
span.meeting-time.text-xs.leading-5 {{meetingTime.time}}
td.py-5
.px-4
.relative.dots-button.icon-dots.text-center.cursor-pointer.leading-6
clients-action-popup
.relative.dots-button.icon-dots.text-center.cursor-pointer.leading-6(@click="openPopup")
clients-action-popup(v-if="isOpenPopup")
</template>
<script>
@@ -36,8 +36,15 @@ import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbo
export default {
name: "ClientsTableRow",
components: { ClientsTableCheckbox, ClientsActionPopup },
data() {
return {
isOpenPopup: false,
};
},
props: {
id: String,
check: Function,
isCheck: Boolean,
fullName: String,
age: String,
jobTitle: String,
@@ -47,6 +54,11 @@ export default {
networks: Array,
meetingTime: Object,
},
methods: {
openPopup() {
this.isOpenPopup = !this.isOpenPopup;
},
},
};
</script>
@@ -68,5 +80,5 @@ export default {
color: var(--font-grey-color)
&:hover
background-color: var(--btn-blue-color)
color: var(--default-white)
color: var(--bg-white-color)
</style>

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

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