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

Merge branch 'master' into UC-21

Browse Source
This commit is contained in:
frontgavrilin
2022-10-25 00:59:49 +03:00
committed by GitHub
parent 96f1316b27 75acc3a032
commit 9f618c9322
15 changed files with 388 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
server.js
View File

@@ -255,8 +255,8 @@ export function clientsServer() {
results: [
{
id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
start: "2022-10-20T20:23:49Z",
end: "2022-10-20T21:23:53Z",
start: "2022-10-24T20:23:49Z",
end: "2022-10-24T21:23:53Z",
kind: "call",
subkind: null,
description: "",
@@ -296,10 +296,53 @@ export function clientsServer() {
},
],
},
{
id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
start: "2022-10-24T15:23:49Z",
end: "2022-10-24T16:23:53Z",
kind: "call",
subkind: null,
description: "",
location: null,
members: [
{
id: "f7648f9a-e824-4bb3-a260-2b32dae9bc74",
person: {
id: "98dd401c-2b7b-4d9a-9159-720c74d8b23v",
last_name: "Захарченко",
first_name: "Юлия",
patronymic: "Николаевна",
},
role: null,
},
],
employees: [
{
id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
employee: {
id: "db541a67-e836-481f-a653-6325de7c567e",
last_name: "Захарова",
first_name: "Ольга",
patronymic: "Александровна",
},
role: null,
},
{
id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
employee: {
id: "db831a14-e836-481f-a653-6325de7c311e",
last_name: "Жмыхов",
first_name: "Егор",
patronymic: "Сергеевич",
},
role: "owner",
},
],
},
{
id: "7faa7bb7-2de6-422c-a401-1b35cd455303",
start: "2022-10-20T10:00:00Z",
end: "2022-10-20T11:10:00Z",
start: "2022-10-23T10:00:00Z",
end: "2022-10-23T11:10:00Z",
kind: "call",
subkind: null,
description: "",
@@ -315,6 +358,16 @@ export function clientsServer() {
},
role: null,
},
{
id: "a9239f9a-e824-4bb3-a260-2b32dae9bc76",
person: {
id: "15ff465c-2b7b-4d9a-9159-720c74d8b56d",
last_name: "Елесеевская",
first_name: "Татьяна",
patronymic: "Ивановна",
},
role: "primary",
},
],
employees: [
{
@@ -341,20 +394,20 @@ export function clientsServer() {
},
{
id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
start: "2022-10-20T10:00:00Z",
end: "2022-10-20T11:10:00Z",
start: "2022-10-24T10:00:00Z",
end: "2022-10-24T11:10:00Z",
kind: "call",
subkind: null,
description: "",
location: null,
members: [
{
id: "b0509f9a-e824-4bb3-a260-2b32dae9bc81",
id: "a9239f9a-e824-4bb3-a260-2b32dae9bc76",
person: {
id: "14ff401c-2b7b-4d9a-9159-720c74d8b23c",
last_name: "Гагарин",
first_name: "Юрий",
patronymic: "Алексеевич",
id: "15ff465c-2b7b-4d9a-9159-720c74d8b56d",
last_name: "Елесеевская",
first_name: "Татьяна",
patronymic: "Ивановна",
},
role: null,
},
@@ -383,26 +436,36 @@ export function clientsServer() {
],
},
{
id: "6faa6bb2-1de4-425c-a401-1b35cd455303",
start: "2022-10-20T20:23:49Z",
end: "2022-10-20T21:23:53Z",
id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
start: "2022-10-24T10:00:00Z",
end: "2022-10-24T11:10:00Z",
kind: "call",
subkind: null,
description: "",
location: null,
members: [
{
id: "b0509f9a-e824-4bb3-a260-2b32dae9bc81",
id: "a9239f9a-e824-4bb3-a260-2b32dae9bc76",
person: {
id: "14ff401c-2b7b-4d9a-9159-720c74d8b23c",
last_name: "Гагарин",
first_name: "Юрий",
patronymic: "Алексеевич",
id: "15ff465c-2b7b-4d9a-9159-720c74d8b56d",
last_name: "Елесеевская",
first_name: "Татьяна",
patronymic: "Ивановна",
},
role: null,
},
],
employees: [
{
id: "f451a0c3-c734-4f73-91c2-d7a5674459e422",
employee: {
id: "dv841a15-e867-331f-a658-6325de7c311e",
last_name: "Коломойцев",
first_name: "Илья",
patronymic: "Петрович",
},
role: "owner",
},
{
id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
employee: {
@@ -413,16 +476,6 @@ export function clientsServer() {
},
role: null,
},
{
id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
employee: {
id: "db831a14-e836-481f-a653-6325de7c311e",
last_name: "Жмыхов",
first_name: "Егор",
patronymic: "Сергеевич",
},
role: null,
},
],
},
],

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

@@ -26,4 +26,5 @@
--bg-event-blue-color: #3ba3ee
--light-grey-bg-color: #f8f9fa
--btn-green-color: rgba(60, 217, 75, 1)
--btn-light-green-color: rgba(60, 217, 75, 0.2)
--btn-light-green-color: rgba(60, 217, 75, 0.2)
--border-light-grey-color-1: rgba(211, 212, 220, 0.5)

20
src/components/base/BaseInput.vue
View File

@@ -1,7 +1,8 @@
<template lang="pug">
.input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5" :style="{ minWidth: widthInput + 'px' }")
img.cursor-pointer( v-if="withIcon" :class="position" src="@/assets/icons/search-black.svg" alt="SearchTable")
input.w-full.outline-0.text-base.not-italic(:style="{ backgroundColor: backgroundInput, fontSize: fontSizeInput }" :value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder")
input.w-full.outline-0.text-base.not-italic(:style="{ backgroundColor: backgroundInput, fontSize: fontSizeInput }" :value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
.slot(v-if="withIcon" :class="iconPosition")
slot.cursor-pointer
</template>
<script>
@@ -11,11 +12,14 @@ export default {
type: {
default: "text",
},
maxLength: Number,
value: String,
withIcon: {
default: false,
},
iconPosition: String,
iconPosition: {
default: "right",
},
placeholder: {
default: "Поиск",
},
@@ -23,20 +27,12 @@ export default {
backgroundInput: String,
fontSizeInput: String,
},
computed: {
position() {
if (this.iconPosition === "right") {
return "right";
}
return "left";
},
},
};
</script>
<style lang="sass" scoped>
.left
order: 0
order: -1
.right
order: 1
.input-wrapper

0
src/components/base/buttons/BassExportButton.vue → src/components/base/buttons/BaseExportButton.vue
View File

25
src/pages/calendar/components/CalendarBackground.vue
View File

@@ -8,6 +8,7 @@
:key="owner.id"
:owner-data="owner"
:style="calculateColumnPosition(index)"
:day-events="filterEventsByOwner(owner)"
)
.header(:style="backgroundExtendedWidth")
.body.flex.flex-col(
@@ -29,6 +30,8 @@ export default {
props: {
hoursArray: Array,
eventsData: Array,
currentDate: Object,
sidebarWidth: String,
},
data() {
return {
@@ -91,11 +94,19 @@ export default {
(previous, subsequent) => Boolean(subsequent.id) - Boolean(previous.id)
);
},
filteredEventsByDate() {
return this.eventsData.filter(
({ start }) =>
start.slice(0, 10) === this.currentDate.format("YYYY-MM-DD")
);
},
},
methods: {
calculateColumnPosition(elemIndex) {
let deductible = parseInt(this.sidebarWidth.slice(0, -2), 10) - 72;
if (this.ownersArrayLength < 4) {
this.columnWidth = this.backgroundWidth / this.ownersArrayLength;
this.columnWidth =
(this.backgroundWidth - deductible) / this.ownersArrayLength;
return {
width: `${this.columnWidth}px`,
height: `${this.backgroundHeight}px`,
@@ -116,6 +127,18 @@ export default {
(item) => JSON.stringify(item) === JSON.stringify(object)
);
},
filterEventsByOwner(owner) {
let filteredArray = [];
this.filteredEventsByDate.forEach((item) => {
let foundEvent = item.employees.find(
(elem) =>
JSON.stringify(elem.employee) === JSON.stringify(owner) &&
elem.role === "owner"
);
if (foundEvent) filteredArray.push(item);
});
return filteredArray;
},
},
mounted() {
this.calculateBackgroundWidth();

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

@@ -6,16 +6,23 @@
span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
base-doc-ok-button
div
.px-1
calendar-event-card(
v-for="event in dayEvents"
:key="event.id"
:ownerEvent="event"
)
</template>
<script>
import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
import CalendarEventCard from "./CalendarEventCard.vue";
export default {
name: "CalendarColumn",
components: { BaseDocOkButton },
components: { BaseDocOkButton, CalendarEventCard },
props: {
ownerData: Object,
dayEvents: Array,
},
computed: {
ownerName() {

55
src/pages/calendar/components/CalendarEventCard.vue Normal file
View File

@@ -0,0 +1,55 @@
<template lang="pug">
.wrapper.flex.px-2.my-1.cursor-pointer
.header.flex.justify-between.items-center
.header-text
span.inline-block.align-middle.font-bold.text-base.mr-4 {{ eventTime }}
span.inline-block.align-middle.font-medium.text-base {{ eventMember }}
</template>
<script>
export default {
name: "CalendarEventCard",
props: {
ownerEvent: Object,
},
computed: {
eventTime() {
return `${this.trimTime(this.ownerEvent.start)} - ${this.trimTime(
this.ownerEvent.end
)}`;
},
eventMember() {
let membersArray = this.ownerEvent.members;
if (membersArray.length > 1) {
let primaryMember = membersArray.find(
(elem) => elem.role === "primary"
);
return this.composeFullName(primaryMember.person);
}
return this.composeFullName(membersArray[0].person);
},
},
methods: {
trimTime(time) {
return time.slice(11, -4);
},
composeFullName(object) {
return `${object.last_name} ${object.first_name} ${object.patronymic}`;
},
},
};
</script>
<style lang="sass" scoped>
.wrapper
width: 100%
height: 23px
border-radius: 4px
background-color: var(--bg-event-yellow-color)
color: var(--font-black-color)
position: relative
z-index: 2
.header
width: 100%
</style>

2
src/pages/calendar/components/CalendarSchedule.vue
View File

@@ -16,8 +16,10 @@
:day-end-time="validateEndTime"
)
calendar-background(
:current-date="currentDate"
:hours-array="hoursArray"
:events-data="eventsData"
:sidebar-width="sidebarWidth"
)
.time-circle-indicator.left-74px(
v-if="isShownIndicator"

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

@@ -5,18 +5,22 @@
.flex.items-center.gap-x-8(v-if="isOpenChange")
base-button-ok(@click="saveChange" v-if="isChange" :size="20" :icon-size="10" :dark-style="true")
.edit.icon-edit.cursor-pointer.text-sm(v-if="!isChange" @click="changeClientData")
base-button-plus(v-if="settings[section].addFile" :size="20" :icon-size="10" :with-border="true")
.flex.relative
base-button-plus(v-if="settings[section].addFile" :size="20" :icon-size="10" :with-border="true" @click="openAddingWrap")
table-adding-new-doc(v-if="section === 'docs' && isOpenAddingWrap" :add-new-doc="addNewDoc" :save-docs="saveDocs" :new-docs="docData")
table-adding-new-additional(v-if="section === 'additional' && isOpenAddingWrap" :new-additional-data="additionalData" :add-new-additional="addDocAdditional" :save-additional="saveDocs" )
.section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4
.flex.flex-col(v-for="(item, key) in sectionInfo" class="gap-y-1.5")
span.title-section.font-semibold.text-xs(v-if="settings[section].options") {{settings[section].options[key]}}
span.title-section.font-semibold.text-xs(v-if="item.header") {{item.header}}
client-detail-input.text-sm.text-sm.w-max-fit(v-if="isChange && item.value" :style="{fontWeight:item.copy&&600}" v-model:value="item.value" :width="settings[section].width")
.copy.icon-copy.cursor-pointer(v-if="item.copy")
.flex.gap-x-4(v-if="item.value && !isChange")
.flex(v-if="item.value && !isChange")
span.text-sm.w-fit(:style="{fontWeight:item.copy&&600}") {{item.value}}
.copy.icon-copy.cursor-pointer(v-if="item.copy")
.flex.gap-x-4(v-if="item.name")
.icon-files.cursor-pointer(:style="{color:settings.docsColor[item.type]}")
.copy.icon-copy.cursor-pointer.pl-4(v-if="item.copy")
.flex.items-center(v-if="item.name")
.icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(v-if="isChange" :id="item.name" @click="(e) => deleteDoc(e, section)")
.icon-files.cursor-pointer.pr-3.text-xl(:style="{color:settings.docsColor[item.type]}")
span.text-sm {{item.name}}
</template>
@@ -24,16 +28,34 @@
import ClientDetailInput from "@/pages/clients/components/ClientDetailInput";
import BaseButtonOk from "@/components/base/buttons/BaseButtonOk";
import BaseButtonPlus from "@/components/base/buttons/BaseButtonPlus";
import TableAddingNewDoc from "@/pages/clients/components/TableAddingNewDoc";
import TableAddingNewAdditional from "@/pages/clients/components/TableAddingNewAdditional";
import { detail } from "@/pages/clients/utils/tableConfig";
export default {
name: "ClientDetailInfoSection",
components: { BaseButtonPlus, BaseButtonOk, ClientDetailInput },
components: {
TableAddingNewAdditional,
BaseButtonPlus,
BaseButtonOk,
ClientDetailInput,
TableAddingNewDoc,
},
props: {
saveNewDoc: Function,
sectionInfo: Object,
section: String,
deleteDoc: Function,
},
data() {
return {
additionalData: {
header: "",
value: "",
name: "",
type: "",
},
docData: [],
isOpenAddingWrap: false,
isOpenChange: false,
isChange: false,
settings: detail,
@@ -50,6 +72,32 @@ export default {
this.isOpenChange = false;
this.isChange = false;
},
openAddingWrap() {
this.isOpenAddingWrap = true;
},
addNewDoc(e) {
this.docData = [...this.docData, ...e.target.files];
},
addDocAdditional(e) {
this.additionalData.name = e.target.files[0].name;
this.additionalData.type = e.target.files[0].type;
},
saveDocs() {
if (this.section === "additional") {
this.saveNewDoc(this.section, [this.additionalData]);
} else {
this.saveNewDoc(this.section, this.docData);
}
this.isOpenAddingWrap = false;
this.isOpenChange = false;
this.docData = [];
this.additionalData = {
header: "",
value: "",
name: "",
type: "",
};
},
},
};
</script>
@@ -87,4 +135,8 @@ export default {
color: var(--btn-blue-color)
&:hover
opacity: 0.6
.cancel
color: var(--font-grey-color)
&:hover
opacity: 0.6
</style>

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

@@ -7,8 +7,8 @@
.flex.flex-col.gap-y-2
client-detail-info-section(:section-info="dataDetail.birthday" section="birthday")
client-detail-info-section(:section-info="dataDetail.addresses" section="addresses")
client-detail-info-section(:section-info="dataDetail.docs" section="docs")
client-detail-info-section(:section-info="dataDetail.additional" section="additional")
client-detail-info-section(:section-info="dataDetail.docs" section="docs" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
client-detail-info-section(:section-info="dataDetail.additional" section="additional" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
</template>
<script>
@@ -18,6 +18,8 @@ export default {
components: { ClientDetailInfoSection },
props: {
dataDetail: Object,
saveNewDoc: Function,
deleteDoc: Function,
},
};
</script>

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

@@ -13,7 +13,7 @@ export default {
},
computed: {
heightInput() {
return ((this.width / 100) * 70) / 8;
return ((this.width / 100) * 70) / 11;
},
},
};

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

@@ -3,11 +3,12 @@
.flex.gap-2.w-fit.h-fit
.input
base-input(:with-icon="true")
.icon-search
button.filter-button.flex.items-center.justify-center.box-border(class="px-2.5")
.icon-filter.text-xl.leading-4
clients-table-header-actions(v-if="!!isOpenActions" :is-selected-one="isOpenActions===1")
.flex.w-fit.h-fit.gap-x-2
bass-export-button(:only-icon="true")
base-export-button(:only-icon="true")
base-create-button(@click="openFormCreate" :with-icon="true")
</template>
@@ -15,13 +16,13 @@
<script>
import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
import BassExportButton from "@/components/base/buttons/BassExportButton";
import BaseExportButton from "@/components/base/buttons/BaseExportButton";
import BaseInput from "@/components/base/BaseInput";
export default {
name: "ClientsTableHat",
components: {
BaseInput,
BassExportButton,
BaseExportButton,
BaseCreateButton,
ClientsTableHeaderActions,
},

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

@@ -14,7 +14,7 @@
.dots.flex.justify-center.items-center
.relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(:tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
clients-action-popup(v-if="isOpenPopup")
client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-detail="dataDetail")
client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-detail="dataDetail" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
</template>
<script>
@@ -85,6 +85,21 @@ export default {
handleUnFocusPopup() {
this.isOpenPopup = false;
},
saveNewDoc(section, data) {
this.dataDetail[section] = [...this.dataDetail[section], ...data];
},
deleteDoc(e, section) {
if (section === "additional") {
this.dataDetail[section].forEach((el, index) => {
if (el.name === e.target.id) {
delete this.dataDetail[section][index].name;
}
});
}
this.dataDetail[section] = this.dataDetail[section].filter(
(el) => el.name !== e.target.id
);
},
},
};
</script>

66
src/pages/clients/components/TableAddingNewAdditional.vue Normal file
View File

@@ -0,0 +1,66 @@
<template lang="pug">
.flex.absolute.flex-col.items-end.right-3.top-5
.corner
.wrap.flex.flex-col.p-4.gap-y-4
.flex.flex-col.gap-y-1
base-input(:with-icon="true" v-model:value="newAdditionalData.header" icon-position="right" :max-length="140" placeholder="Заголовок")
span.counter {{`${newAdditionalData.header.length}/140`}}
.description.flex.px-4.py-3
textarea.w-full.h-full.outline-0.resize-none(:value="newAdditionalData.value" @input="$emit('update:newAdditionalData.value', $event.target.value)" placeholder="Описание" style="py-10")
.place.flex.flex-col.justify-center.items-center.py-3
.upload.text-center.text-sm.flex.w-fit
input.hidden(@change="(e) => addNewAdditional(e)" type="file" id="file-upload")
span Загрузите элемент
label.label.cursor-pointer(for="file-upload") с компьютера
span или перетащите их сюда
base-create-button(text="Добавить" @click="saveAdditional")
</template>
<script>
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
import BaseInput from "@/components/base/BaseInput";
export default {
name: "TableAddingNewAdditional",
components: { BaseInput, BaseCreateButton },
props: {
addNewAdditional: Function,
saveAdditional: Function,
newAdditionalData: Object,
},
};
</script>
<style lang="sass" scoped>
.wrap
width: 485px
height: fit-content
background-color: var(--default-white)
border-radius: 8px 0 8px 8px
box-shadow: var(--default-shadow)
.corner
width: 8px
height: 8px
border-top-left-radius: 100%
background-color: var(--default-white)
z-index: 2
overflow: hidden
.place
width: 100%
border: 2px dashed var(--font-grey-color)
border-radius: 4px
color: var(--font-grey-color)
.upload
width: 240px
.name-doc
border-radius: 4px
background-color: var(--border-light-grey-color-1)
width: fit-content
.description
min-height: 77px
border-radius: 4px
border: 2px solid var(--border-light-grey-color)
.label
color: var(--btn-blue-color)
.counter
color: var(--font-grey-color)
</style>

57
src/pages/clients/components/TableAddingNewDoc.vue Normal file
View File

@@ -0,0 +1,57 @@
<template lang="pug">
.flex.absolute.flex-col.items-end.right-3.top-5
.corner
.wrap.flex.flex-col.p-4.gap-y-4
.flex.flex-col.gap-y-2
.place.flex.flex-col.justify-center.items-center.py-3
.upload.text-center.text-sm.flex.w-fit
input.hidden(@change="(e) => addNewDoc(e)" type="file" id="file-upload" multiple)
span Загрузите элемент
label.label.cursor-pointer(for="file-upload") с компьютера
span или перетащите их сюда
.flex.flex-col
span.name-doc.py-2.px-3(v-for="doc in newDocs") {{doc.name}}
base-create-button(text="Добавить" @click="saveDocs")
</template>
<script>
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
export default {
name: "TableAddingNewDoc",
components: { BaseCreateButton },
props: {
addNewDoc: Function,
saveDocs: Function,
newDocs: Array,
},
};
</script>
<style lang="sass" scoped>
.wrap
width: 485px
height: fit-content
background-color: var(--default-white)
border-radius: 8px 0 8px 8px
box-shadow: var(--default-shadow)
.corner
width: 8px
height: 8px
border-top-left-radius: 100%
background-color: var(--default-white)
z-index: 2
overflow: hidden
.place
width: 100%
border: 2px dashed var(--font-grey-color)
border-radius: 4px
color: var(--font-grey-color)
.upload
width: 240px
.name-doc
border-radius: 4px
background-color: var(--border-light-grey-color-1)
width: fit-content
.label
color: var(--btn-blue-color)
</style>