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

3
src/assets/icons/basket.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 4.3607H2.8M19 4.3607H17.2M2.8 4.3607L4.49205 18.122C4.55369 18.6234 4.97948 19 5.48457 19H14.5154C15.0205 19 15.4463 18.6234 15.508 18.122L17.2 4.3607M2.8 4.3607H7.6M17.2 4.3607H12.4M8.2 8.30205V15.0587M11.8 8.30205V15.0587M7.6 4.3607C7.4 3.42229 7.6 1 10 1C12.4 1 12.6 3.42229 12.4 4.3607M7.6 4.3607H12.4" stroke="#FF6565" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 483 B

3
src/assets/icons/sort-number.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1H10.913M1 4.5H7.78261M1 8H5.17391M10.3913 3.5V11M10.3913 11L7.78261 8M10.3913 11L13 8" stroke="#252850" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 269 B

3
src/assets/icons/star.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.48073 1.49871C9.67288 1.03674 10.3273 1.03673 10.5195 1.49871L12.6454 6.61017C12.7264 6.80493 12.9096 6.938 13.1199 6.95485L18.6381 7.39725C19.1369 7.43723 19.3391 8.05964 18.9591 8.38514L14.7548 11.9866C14.5946 12.1238 14.5246 12.3391 14.5736 12.5443L15.858 17.9292C15.9741 18.4159 15.4447 18.8005 15.0177 18.5397L10.2933 15.6541C10.1133 15.5441 9.88691 15.5441 9.7069 15.6541L4.98251 18.5397C4.55551 18.8005 4.02606 18.4159 4.14215 17.9292L5.42664 12.5443C5.47558 12.3391 5.40562 12.1238 5.24543 11.9866L1.04111 8.38514C0.661119 8.05964 0.863352 7.43723 1.36209 7.39725L6.88034 6.95485C7.0906 6.938 7.27375 6.80493 7.35476 6.61017L9.48073 1.49871Z" stroke="#4772F2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 851 B

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

@@ -1,6 +1,6 @@
\:root
--bg-lavender-color: #e9e9f6
--bg-white-color: #f8f8ff
--bg-white-color: #FFFFFF
--bg-ligth-blue-color: #e6eafc
--font-dark-blue-color: #252850
--font-black-color: #090a15
@@ -10,5 +10,4 @@
--border-light-grey-color: #d3d4dc
--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: #FFFFFF
--btn-red-color: #FF6F6F

1
src/components/TheSidebar.vue
View File

@@ -24,6 +24,7 @@ export default {
<style lang="sass" scoped>
.sidebar
max-width: 80px
min-width: 80px
background-color: #FFFFFF
border-top-right-radius: 4px
</style>

6
src/components/base/BaseSelect.vue
View File

@@ -1,7 +1,7 @@
<template lang="pug">
.flex.gap-2.py-2.px-4.w-full.container(@click="selectOpen")
.flex.gap-2.py-2.px-4.w-full.container.cursor-pointer(@click="selectOpen")
.relative.flex.flex-col
.not-italic.text-base.select(:style="{ minWidth : width}") {{optionData}}
.not-italic.text-base.select.cursor-pointer(:style="{ minWidth : width}") {{optionData}}
.absolute.options(v-if="isOpen" :id="id" @click="(event)=>chooseOption(event)")
.not-italic.text-base.option(v-for="(responsible, index) in listData" :key="index" :id="index") {{responsible}}
.select-form-separator
@@ -26,7 +26,6 @@ export default {
<style lang="sass" scoped>
.container
align-items: center
cursor: pointer
border-radius: 4px
width: fit-content
background-color: var(--bg-ligth-blue-color)
@@ -34,7 +33,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

3
src/components/base/buttons/BaseAddEvent.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
button.event-button.not-italic.leading-5.text-base.py-3.px-4 Создать событие
button.event-button.cursor-pointer.not-italic.leading-5.text-base.py-3.px-4 Создать событие
</template>
<script>
@@ -12,7 +12,6 @@ export default {
.event-button
outline: none
border: none
cursor: pointer
width: fit-content
color: var(--bg-white-color)
background-color: var(--btn-blue-color)

5
src/components/base/buttons/BaseButtonPlus.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
button.icon-plus.button-plus.text-xs.pt-1
button..cursor-pointer.icon-plus.button-plus.text-xs.pt-1
</template>
<script>
@@ -12,11 +12,10 @@ export default {
.button-plus
outline: none
border: none
cursor: pointer
width: 24px
height: 24px
max-height: 24px
color: #4772F2
color: var(--btn-blue-color)
background-color: rgba(65, 105, 225, 0.25)
border-radius: 50%
</style>

7
src/components/base/buttons/BaseSidebarButton.vue
View File

@@ -1,6 +1,6 @@
<template lang="pug">
a(:href="path")
button.button.text-4xl.py-3.pr-4.pl-3(:id="id")
button.button.cursor-pointer.text-4xl.py-3.pr-4.pl-3(:id="id")
slot
</template>
@@ -23,7 +23,6 @@ export default {
<style lang="sass" scoped>
.button
width: fit-content
cursor: pointer
background-color: rgba(65, 105, 225, 0)
border-radius: 0 4px 4px 0
border-left-color: rgba(65, 105, 225, 0)
@@ -35,9 +34,9 @@ export default {
.button:focus
background-color: rgba(65, 105, 225, 0.3)
border-left-color: rgba(65, 105, 225, 1)
color: #4169E1
color: var(--btn-blue-color)
.button:hover
background-color: rgba(65, 105, 225, 0.3)
border-left-color: rgba(65, 105, 225, 1)
color: #4169E1
color: var(--btn-blue-color)
</style>

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)

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

@@ -1,13 +1,15 @@
<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
.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 Редактировать
.keep-redaction.flex.gap-x-3
.icon-star.icon-redaction
.button.keep-redaction.flex.gap-x-3
img(src="@/assets/icons/star.svg" alt="Star")
span На ведение
.delete.flex.gap-x-3
.icon-basket
.button.delete.flex.gap-x-3
img(src="@/assets/icons/basket.svg" alt="Basket")
span Удалить
</template>
@@ -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>