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

WIP Стянула записи приемов с бэка

Browse Source
This commit is contained in:
Daria Golova
2023-09-19 13:31:05 +03:00
parent fc6c5e61fb
commit 48e2571c77
14 changed files with 176 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/newCalendar/TheCalendar.vue
View File

@@ -83,11 +83,9 @@ export default {
immediate: true, immediate: true,
deep: true, deep: true,
handler(value) { handler(value) {
console.log("отработало в роутинге", this.$route.path === "/calendar");
if (this.$route.path === "/calendar") { if (this.$route.path === "/calendar") {
let dateType = this.calendarShape === "doctor" ? "week" : "day"; let dateType = this.calendarShape === "doctor" ? "week" : "day";
if (!value?.start || !value?.end) { if (!value?.start || !value?.end) {
console.log("тут 1");
this.changeSelectedDates({ this.changeSelectedDates({
from: moment().clone().startOf(dateType), from: moment().clone().startOf(dateType),
to: moment().clone().endOf(dateType), to: moment().clone().endOf(dateType),
@@ -102,14 +100,9 @@ export default {
value?.start !== this.selectedDates?.from?.format("DD.MM.YYYY") || value?.start !== this.selectedDates?.from?.format("DD.MM.YYYY") ||
value?.end !== this.selectedDates?.to?.format("DD.MM.YYYY") value?.end !== this.selectedDates?.to?.format("DD.MM.YYYY")
) { ) {
console.log(
"тут 2",
value?.start !== this.selectedDates?.from?.format("DD.MM.YYYY"),
value?.end !== this.selectedDates?.to?.format("DD.MM.YYYY")
);
this.changeSelectedDates({ this.changeSelectedDates({
from: this.convertDate(value?.start), from: this.convertDate(value?.start).clone().startOf("day"),
to: this.convertDate(value?.end), to: this.convertDate(value?.end).clone().endOf("day"),
}); });
} }
} }

2
src/pages/newCalendar/components/doctorCalendar/CalendarColumn.vue
View File

@@ -44,5 +44,5 @@ export default {
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
@import "@/pages/newCalendar/mixins/columnStyle.sass" @import "@/pages/newCalendar/sass/columnStyle.sass"
</style> </style>

2
src/pages/newCalendar/components/doctorCalendar/CalendarHeader.vue
View File

@@ -151,7 +151,7 @@ export default {
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
@import "@/pages/newCalendar/mixins/headerStyle.sass" @import "@/pages/newCalendar/sass/headerStyle.sass"
</style> </style>
<style lang="sass"> <style lang="sass">
.q-field--outlined.q-field--readonly .q-field__control:before .q-field--outlined.q-field--readonly .q-field__control:before

37
src/pages/newCalendar/components/doctorCalendar/CalendarWrapper.vue
View File

@@ -22,7 +22,7 @@
calendar-clock-column( calendar-clock-column(
:time-coil="timeCoil", :time-coil="timeCoil",
:current-time="currentTime", :current-time="currentTime",
:is-current="isCurrentWeek", :is-current="isCurrent",
:day-end-time="validateEndTime" :day-end-time="validateEndTime"
) )
.time-circle-indicator.left-74px.h-3.w-3.rounded-full.absolute( .time-circle-indicator.left-74px.h-3.w-3.rounded-full.absolute(
@@ -56,7 +56,6 @@ export default {
data() { data() {
return { return {
displayType: "expanded", displayType: "expanded",
isCurrentWeek: true,
}; };
}, },
computed: { computed: {
@@ -104,45 +103,19 @@ export default {
}; };
}, },
}, },
methods: {
//вынести в функции
timeCoilInitialization() {
this.timeCoil = [];
for (let i = this.validateStartTime; i < this.validateEndTime; i++) {
if (
i === this.hours &&
this.hours !== this.validateEndTime &&
this.isCurrentWeek
) {
this.timeCoil.push(this.hoursMinutes);
} else this.timeCoil.push(`${i}:00`);
}
},
},
watch: { watch: {
//вынести в примеси и использовать timeCoilInitialization как функцию
currentTime() {
if (
this.hours === this.validateEndTime &&
this.minutes > 0 &&
this.timer
) {
this.stopTimer();
this.timeCoilInitialization();
}
},
selectedDates: { selectedDates: {
deep: true, deep: true,
handler(newValue) { handler(newValue) {
this.isCurrentWeek = this.isCurrent =
newValue?.from.isSame(moment().clone().startOf("week"), "day") && newValue?.from.isSame(moment().clone().startOf("week"), "day") &&
newValue?.to.isSame(moment().clone().endOf("week"), "day"); newValue?.to.isSame(moment().clone().endOf("week"), "day");
this.isShownIndicator = this.isCurrentWeek; this.isShownIndicator = this.isCurrent;
if (this.timer) { if (this.timer) {
this.stopTimer(); this.stopTimer();
this.timeCoilInitialization(); this.timeCoilInitialization();
} }
if (this.isCurrentWeek) { if (this.isCurrent) {
this.changeCurrentTime(); this.changeCurrentTime();
this.timeCoilInitialization(); this.timeCoilInitialization();
this.startTimer(); this.startTimer();
@@ -158,5 +131,5 @@ export default {
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
@import "@/pages/newCalendar/mixins/wrapperStyle.sass" @import "@/pages/newCalendar/sass/wrapperStyle.sass"
</style> </style>

21
src/pages/newCalendar/components/managerCalendar/CalendarColumn.vue
View File

@@ -6,10 +6,10 @@
size="40px", size="40px",
round round
) )
img(:src="employee?.photo || defaultPhoto", alt="doctor") img(:src="medic?.photo || defaultPhoto", alt="doctor")
.flex.flex-col.justify-between .flex.flex-col.justify-between
span.text-dark {{trimName(employee?.last_name, employee?.first_name, employee?.patronymic)}} span.text-dark {{trimName(medic?.last_name, medic?.first_name, medic?.patronymic)}}
span.text-xsx.color-grey {{employee?.job || "Терапевт"}} span.text-xsx.color-grey {{medic?.job || "Терапевт"}}
button(@click="locked = !locked") button(@click="locked = !locked")
q-icon.lock-icon( q-icon.lock-icon(
:name="locked ? 'app:lock' : 'app:lock-open'", :name="locked ? 'app:lock' : 'app:lock-open'",
@@ -29,35 +29,34 @@
<script> <script>
import { columnMixin } from "@/pages/newCalendar/mixins/columnMixin.js"; import { columnMixin } from "@/pages/newCalendar/mixins/columnMixin.js";
import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js"; import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
import { recordList } from "@/pages/newCalendar/utils/calendarConfig";
import doctorAvatar from "@/assets/images/doctor.png"; import doctorAvatar from "@/assets/images/doctor.png";
import { mapState } from "vuex";
export default { export default {
name: "CalendarColumn", name: "CalendarColumn",
mixins: [columnMixin], mixins: [columnMixin],
props: { props: {
employee: Object, medic: Object,
}, },
data() { data() {
return { return {
trimName: trimName, trimName: trimName,
configEvents: recordList,
defaultPhoto: doctorAvatar, defaultPhoto: doctorAvatar,
locked: false, locked: false,
}; };
}, },
computed: { computed: {
...mapState({
events: (state) => state.calendar.events,
}),
filteredRecords() { filteredRecords() {
// return this.configEvents.filter( return this.events.filter((elem) => elem?.medic?.id === this.medic?.id);
// (elem) => elem?.employee?.id === this.employee?.id
// );
return [];
}, },
}, },
}; };
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
@import "@/pages/newCalendar/mixins/columnStyle.sass" @import "@/pages/newCalendar/sass/columnStyle.sass"
.lock-icon :deep(path) .lock-icon :deep(path)
fill: var(--font-grey-color) fill: var(--font-grey-color)
</style> </style>

3
src/pages/newCalendar/components/managerCalendar/CalendarHeader.vue
View File

@@ -113,7 +113,6 @@ export default {
deep: true, deep: true,
immediate: true, immediate: true,
handler(val) { handler(val) {
console.log(!val?.from.isSame(this.date, "day"), this.date);
if (!val?.from.isSame(this.date, "day")) this.initializeDates(); if (!val?.from.isSame(this.date, "day")) this.initializeDates();
}, },
}, },
@@ -122,7 +121,7 @@ export default {
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
@import "@/pages/newCalendar/mixins/headerStyle.sass" @import "@/pages/newCalendar/sass/headerStyle.sass"
.q-btn-toggle :deep(span) .q-btn-toggle :deep(span)
font-weight: 500 font-weight: 500
.q-btn-toggle :deep(.q-btn-item) .q-btn-toggle :deep(.q-btn-item)

75
src/pages/newCalendar/components/managerCalendar/CalendarWrapper.vue
View File

@@ -6,9 +6,9 @@
.schedule-body.h-full.bg-white.w-full .schedule-body.h-full.bg-white.w-full
.column-wrapper.flex.ml-20(:style="columnWrapperWidth") .column-wrapper.flex.ml-20(:style="columnWrapperWidth")
calendar-column( calendar-column(
v-for="employee in filteringEmployees", v-for="medic in filteringMedics",
:key="employee?.id", :key="medic?.id",
:employee="employee", :medic="medic",
:style="columnStyle", :style="columnStyle",
:expanded-display-type="true", :expanded-display-type="true",
:day-start-time="validateStartTime" :day-start-time="validateStartTime"
@@ -21,7 +21,7 @@
calendar-clock-column( calendar-clock-column(
:time-coil="timeCoil", :time-coil="timeCoil",
:current-time="currentTime", :current-time="currentTime",
:is-current="isCurrentDate", :is-current="isCurrent",
:day-end-time="validateEndTime" :day-end-time="validateEndTime"
) )
.time-circle-indicator.left-74px.h-3.w-3.rounded-full.absolute( .time-circle-indicator.left-74px.h-3.w-3.rounded-full.absolute(
@@ -42,7 +42,6 @@ import CalendarColumn from "@/pages/newCalendar/components/managerCalendar/Calen
import { mapState } from "vuex"; import { mapState } from "vuex";
import * as moment from "moment/moment"; import * as moment from "moment/moment";
import { wrapperMixin } from "@/pages/newCalendar/mixins/wrapperMixin.js"; import { wrapperMixin } from "@/pages/newCalendar/mixins/wrapperMixin.js";
import { recordList } from "@/pages/newCalendar/utils/calendarConfig";
export default { export default {
name: "CalendarWrapper", name: "CalendarWrapper",
components: { components: {
@@ -56,88 +55,64 @@ export default {
data() { data() {
return { return {
displayType: "day", displayType: "day",
isCurrentDate: true,
events: recordList,
}; };
}, },
computed: { computed: {
...mapState({ ...mapState({
selectedDates: (state) => state.calendar.selectedDates, selectedDates: (state) => state.calendar.selectedDates,
//events: (state) => state.calendar.events, events: (state) => state.calendar.events,
}), }),
filteringEmployees() { filteringMedics() {
let employeesList = []; let medicsList = [];
this.events?.forEach(({ employee }) => { this.events?.forEach(({ medic }) => {
if (!employeesList.includes(JSON.stringify(employee))) if (!medicsList.includes(JSON.stringify(medic)))
employeesList.push(JSON.stringify(employee)); medicsList.push(JSON.stringify(medic));
}); });
return employeesList?.map((elem) => JSON.parse(elem)); return medicsList?.map((elem) => JSON.parse(elem));
},
medicsListLength() {
return this.filteringMedics?.length;
}, },
columnStyle() { columnStyle() {
return this.filteringEmployees?.length > 4 return this.medicsListLength > 4
? { ? {
height: `${this.timeCoil.length * this.pixelsPerHour + 60}px`, height: `${this.timeCoil.length * this.pixelsPerHour + 60}px`,
width: "380px", width: "380px",
} }
: { : {
height: `${this.timeCoil.length * this.pixelsPerHour + 60}px`, height: `${this.timeCoil.length * this.pixelsPerHour + 60}px`,
width: `calc(100%/ ${this.filteringEmployees?.length})`, width: `calc(100%/ ${this.medicsListLength})`,
}; };
}, },
backgroundWrapperWidth() { backgroundWrapperWidth() {
return this.filteringEmployees?.length > 4 return this.medicsListLength > 4
? { ? {
width: `${380 * this.filteringEmployees?.length + 80}px`, width: `${380 * this.medicsListLength + 80}px`,
} }
: {}; : {};
}, },
columnWrapperWidth() { columnWrapperWidth() {
return this.filteringEmployees?.length > 4 return this.medicsListLength > 4
? { ? {
width: `${380 * this.filteringEmployees?.length}px`, width: `${380 * this.medicsListLength}px`,
} }
: { : {
width: "calc(100% - 80px)", width: "calc(100% - 80px)",
}; };
}, },
}, },
methods: {
//вынести в функции
timeCoilInitialization() {
this.timeCoil = [];
for (let i = this.validateStartTime; i < this.validateEndTime; i++) {
if (
i === this.hours &&
this.hours !== this.validateEndTime &&
this.isCurrentDate
) {
this.timeCoil.push(this.hoursMinutes);
} else this.timeCoil.push(`${i}:00`);
}
},
},
watch: { watch: {
//вынести в примеси и использовать timeCoilInitialization как функцию
currentTime() {
if (
this.hours === this.validateEndTime &&
this.minutes > 0 &&
this.timer
) {
this.stopTimer();
this.timeCoilInitialization();
}
},
selectedDates: { selectedDates: {
immediate: true,
deep: true, deep: true,
handler(newValue) { handler(newValue) {
this.isCurrentDate = newValue?.from.isSame(moment(), "day"); this.isCurrent = newValue?.from.isSame(moment(), "day");
this.isShownIndicator = this.isCurrentDate; this.isShownIndicator = this.isCurrent;
if (this.timer) { if (this.timer) {
this.stopTimer(); this.stopTimer();
this.timeCoilInitialization(); this.timeCoilInitialization();
} }
if (this.isCurrentDate) { if (this.isCurrent) {
this.changeCurrentTime(); this.changeCurrentTime();
this.timeCoilInitialization(); this.timeCoilInitialization();
this.startTimer(); this.startTimer();
@@ -153,5 +128,5 @@ export default {
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
@import "@/pages/newCalendar/mixins/wrapperStyle.sass" @import "@/pages/newCalendar/sass/wrapperStyle.sass"
</style> </style>

26
src/pages/newCalendar/mixins/wrapperMixin.js
View File

@@ -23,6 +23,7 @@ export const wrapperMixin = {
timeCoil: [], timeCoil: [],
timer: null, timer: null,
pixelsPerHour: 76, pixelsPerHour: 76,
isCurrent: true,
}; };
}, },
computed: { computed: {
@@ -66,7 +67,6 @@ export const wrapperMixin = {
methods: { methods: {
changeCurrentTime() { changeCurrentTime() {
this.currentTime = moment().format("HH:mm:ss"); this.currentTime = moment().format("HH:mm:ss");
console.log(this.currentTime);
}, },
changeTimeCoil() { changeTimeCoil() {
this.timeCoil = this.timeCoil.map((elem) => { this.timeCoil = this.timeCoil.map((elem) => {
@@ -104,6 +104,30 @@ export const wrapperMixin = {
} }
return result; return result;
}, },
timeCoilInitialization() {
this.timeCoil = [];
for (let i = this.validateStartTime; i < this.validateEndTime; i++) {
if (
i === this.hours &&
this.hours !== this.validateEndTime &&
this.isCurrent
) {
this.timeCoil.push(this.hoursMinutes);
} else this.timeCoil.push(`${i}:00`);
}
},
},
watch: {
currentTime() {
if (
this.hours === this.validateEndTime &&
this.minutes > 0 &&
this.timer
) {
this.stopTimer();
this.timeCoilInitialization();
}
},
}, },
beforeUnmount() { beforeUnmount() {
this.stopTimer(); this.stopTimer();

0
src/pages/newCalendar/mixins/columnStyle.sass → src/pages/newCalendar/sass/columnStyle.sass
View File

0
src/pages/newCalendar/mixins/headerStyle.sass → src/pages/newCalendar/sass/headerStyle.sass
View File

0
src/pages/newCalendar/mixins/wrapperStyle.sass → src/pages/newCalendar/sass/wrapperStyle.sass
View File

206
src/pages/newCalendar/utils/calendarConfig.js
View File

@@ -778,7 +778,7 @@ export const services = [
export const recordList = [ export const recordList = [
{ {
id: "c3df0a95-8093-41f1-9584-5b70ee05e71c", id: "asdf0a95-8093-41f1-9584-5b70ee05e71c",
start: "2023-09-18T10:00:00Z", start: "2023-09-18T10:00:00Z",
end: "2023-09-18T11:00:00Z", end: "2023-09-18T11:00:00Z",
employee: { employee: {
@@ -823,7 +823,7 @@ export const recordList = [
], ],
}, },
{ {
id: "ba931000-7140-4977-bd09-1ac212b8b8e5", id: "ss931000-7140-4977-bd09-1ac212b8b8e5",
start: "2023-09-18T15:00:00Z", start: "2023-09-18T15:00:00Z",
end: "2023-09-18T15:30:00Z", end: "2023-09-18T15:30:00Z",
employee: { employee: {
@@ -877,11 +877,11 @@ export const recordList = [
], ],
}, },
{ {
id: "4cd94bec-a0df-4a18-879d-f64cd6d5698e", id: "ccd94bec-a0df-4a18-879d-f64cd6d5698e",
start: "2023-09-18T13:00:00Z", start: "2023-09-18T13:00:00Z",
end: "2023-09-18T14:30:00Z", end: "2023-09-18T14:30:00Z",
employee: { employee: {
id: "464101e6-b4e6-46a4-8ef6-08ecb2921493", id: "111101e6-b4e6-46a4-8ef6-08ecb2921493",
last_name: "Гурцев", last_name: "Гурцев",
first_name: "Семен", first_name: "Семен",
patronymic: "Семенович", patronymic: "Семенович",
@@ -930,105 +930,105 @@ export const recordList = [
}, },
], ],
}, },
// { {
// id: "ba931000-7140-4977-bd09-1ac233b8b8e5", id: "vv931000-7140-4977-bd09-1ac233b8b8e5",
// start: "2023-09-18T15:00:00Z", start: "2023-09-18T15:00:00Z",
// end: "2023-09-18T15:30:00Z", end: "2023-09-18T15:30:00Z",
// employee: { employee: {
// id: "464101e6-b4e6-46a4-8ef6-08ecb2921493", id: "333101e6-b4e6-46a4-8ef6-08ecb2921493",
// last_name: "Лебедев", last_name: "Лебедев",
// first_name: "Леонид", first_name: "Леонид",
// patronymic: "Семенович", patronymic: "Семенович",
// }, },
// person: { person: {
// id: "d340d344-4fc7-4fbe-9db8-b7562b70438d", id: "d340d344-4fc7-4fbe-9db8-b7562b70438d",
// last_name: "Гаранова", last_name: "Гаранова",
// first_name: "Наталья", first_name: "Наталья",
// patronymic: "Романовна", patronymic: "Романовна",
// birth_date: "1990-04-12", birth_date: "1990-04-12",
// photo: personImage, photo: personImage,
// contacts: [ contacts: [
// { {
// value: "+7 (910) 424–13–13", value: "+7 (910) 424–13–13",
// kind: "PHONE", kind: "PHONE",
// }, },
// { {
// value: "Haritonich@mail.ru", value: "Haritonich@mail.ru",
// kind: "EMAIL", kind: "EMAIL",
// }, },
// ], ],
// }, },
// status: "accepted", status: "accepted",
// medicalCard: { medicalCard: {
// status: "not_filled", status: "not_filled",
// }, },
// }, },
// { {
// id: "ba931000-7140-4977-bd09-1ac233b8b8e5", id: "rr931000-7140-4977-bd09-1ac233b8b8e5",
// start: "2023-09-18T15:00:00Z", start: "2023-09-18T15:00:00Z",
// end: "2023-09-18T15:30:00Z", end: "2023-09-18T15:30:00Z",
// employee: { employee: {
// id: "464101e6-b4e6-46a4-8ef6-08ecb1121493", id: "666101e6-b4e6-46a4-8ef6-08ecb7721493",
// last_name: "Петров", last_name: "Петров",
// first_name: "Леонид", first_name: "Леонид",
// patronymic: "Семенович", patronymic: "Семенович",
// }, },
// person: { person: {
// id: "d340d344-4fc7-4fbe-9db8-b7562b70438d", id: "d340d344-4fc7-4fbe-9db8-b7562b70438d",
// last_name: "Гаранова", last_name: "Гаранова",
// first_name: "Наталья", first_name: "Наталья",
// patronymic: "Романовна", patronymic: "Романовна",
// birth_date: "1990-04-12", birth_date: "1990-04-12",
// photo: personImage, photo: personImage,
// contacts: [ contacts: [
// { {
// value: "+7 (910) 424–13–13", value: "+7 (910) 424–13–13",
// kind: "PHONE", kind: "PHONE",
// }, },
// { {
// value: "Haritonich@mail.ru", value: "Haritonich@mail.ru",
// kind: "EMAIL", kind: "EMAIL",
// }, },
// ], ],
// }, },
// status: "accepted", status: "accepted",
// medicalCard: { medicalCard: {
// status: "not_filled", status: "not_filled",
// }, },
// }, },
// { {
// id: "ba931000-7140-4977-bd09-1ac233b8b8e5", id: "ma931000-7140-4977-bd09-1ac233b8b8e5",
// start: "2023-09-18T15:00:00Z", start: "2023-09-18T15:00:00Z",
// end: "2023-09-18T15:30:00Z", end: "2023-09-18T15:30:00Z",
// employee: { employee: {
// id: "464101e6-b4e6-46a4-8ef6-22ecb2921493", id: "999101e6-b4e6-46a4-8ef6-22ecb2921493",
// last_name: "Ленин", last_name: "Ленин",
// first_name: "Леонид", first_name: "Леонид",
// patronymic: "Семенович", patronymic: "Семенович",
// }, },
// person: { person: {
// id: "d340d344-4fc7-4fbe-9db8-b7562b70438d", id: "d340d344-4fc7-4fbe-9db8-b7562b70438d",
// last_name: "Гаранова", last_name: "Гаранова",
// first_name: "Наталья", first_name: "Наталья",
// patronymic: "Романовна", patronymic: "Романовна",
// birth_date: "1990-04-12", birth_date: "1990-04-12",
// photo: personImage, photo: personImage,
// contacts: [ contacts: [
// { {
// value: "+7 (910) 424–13–13", value: "+7 (910) 424–13–13",
// kind: "PHONE", kind: "PHONE",
// }, },
// { {
// value: "Haritonich@mail.ru", value: "Haritonich@mail.ru",
// kind: "EMAIL", kind: "EMAIL",
// }, },
// ], ],
// }, },
// status: "accepted", status: "accepted",
// medicalCard: { medicalCard: {
// status: "not_filled", status: "not_filled",
// }, },
// }, },
]; ];
export const recordPreviewConfig = [ export const recordPreviewConfig = [

4
src/pages/newCalendar/utils/calendarFunctions.js
View File

@@ -3,8 +3,8 @@ export function convertTime(str, startIndex, endIndex) {
} }
export function trimName(lastName, firstName, patronymic) { export function trimName(lastName, firstName, patronymic) {
let checkedFirstName = firstName !== null ? firstName?.[0] + ". " : ""; let checkedFirstName = firstName ? firstName?.[0] + ". " : "";
let checkedPatronymic = patronymic !== null ? patronymic?.[0] + "." : ""; let checkedPatronymic = patronymic ? patronymic?.[0] + "." : "";
return `${lastName} ${checkedFirstName}${checkedPatronymic}`; return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
} }

2
src/store/index.js
View File

@@ -8,7 +8,7 @@ export default createStore({
imgUrl: "https://astra-dev.dopcore.com/api/store/", imgUrl: "https://astra-dev.dopcore.com/api/store/",
routingHistory: window.history, routingHistory: window.history,
userData: {}, userData: {},
calendarShape: "manager", calendarShape: "doctor",
}, },
modules: { modules: {
medical, medical,