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:
megavrilinvv
2023-03-06 17:21:17 +03:00
parent a81dba8429
commit f60eea81fe
7 changed files with 83 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/calendar/TheCalendar.vue
View File

@@ -56,6 +56,8 @@ import CalendarSidebar from "./components/CalendarSidebar.vue";
import CalendarFormAddEvent from "./components/CalendarFormAddEvent.vue";
import BaseModal from "@/components/base/BaseModal.vue";
import CalendarDeleteModal from "./components/CalendarDeleteModal.vue";
import { calendarConfig } from "@/pages/calendar/utils/calendarConfig";
export default {
name: "TheCalendar",
components: {
@@ -84,51 +86,7 @@ export default {
isOpenForm: false,
WORKING_STATUS: "WORKS",
changeFormWasClosed: false,
//TODO: Вынести eventStatuses в config
eventStatuses: [
{
id: 0,
label: "Планируется прием",
value: "PLANNED",
color: "var(--default-white)",
},
{
id: 1,
label: "Отменил",
value: "CANCELED",
color: "var(--bg-event-grey-color)",
},
{
id: 2,
label: "Ожидается прием",
value: "EXPECTED",
color: "var(--bg-event-yellow-color)",
},
{
id: 3,
label: "Опаздывает",
value: "LATE",
color: "var(--bg-event-orange-color)",
},
{
id: 4,
label: "Идет прием",
value: "RECEPTION",
color: "var(--bg-event-blue-color)",
},
{
id: 5,
label: "Прием завершен",
value: "COMPLETED",
color: "var(--bg-event-green-color)",
},
{
id: 6,
label: "Не пришел",
value: "DID_NOT_COME",
color: "var(--bg-event-red-color)",
},
],
eventStatuses: calendarConfig,
};
},
methods: {

44
src/pages/calendar/utils/calendarConfig.js Normal file
View File

@@ -0,0 +1,44 @@
export const calendarConfig = [
{
id: 0,
label: "Планируется прием",
value: "PLANNED",
color: "var(--default-white)",
},
{
id: 1,
label: "Отменил",
value: "CANCELED",
color: "var(--bg-event-grey-color)",
},
{
id: 2,
label: "Ожидается прием",
value: "EXPECTED",
color: "var(--bg-event-yellow-color)",
},
{
id: 3,
label: "Опаздывает",
value: "LATE",
color: "var(--bg-event-orange-color)",
},
{
id: 4,
label: "Идет прием",
value: "RECEPTION",
color: "var(--bg-event-blue-color)",
},
{
id: 5,
label: "Прием завершен",
value: "COMPLETED",
color: "var(--bg-event-green-color)",
},
{
id: 6,
label: "Не пришел",
value: "DID_NOT_COME",
color: "var(--bg-event-red-color)",
},
];

4
src/pages/schedule/components/FormChangeShift.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
.flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.fixed.right-6.bottom-6
.event-form.flex.flex-col.gap-y-6.pt-6.pb-7.px-8.fixed.right-6.bottom-6
.flex.justify-between
span.title.text-xl.font-bold Замена смен
.flex.pt-2
@@ -11,7 +11,7 @@
v-model="replacementSheet.date",
outlined
)
base-input.input(,
base-input(,
type="text"
v-model="replacementSheet.currentEmployee",
label="Текущий сотрудник",

20
src/pages/schedule/components/ScheduleBar.vue
View File

@@ -26,7 +26,6 @@
:label="item.name",
:class="item.class",
text-color="white",
no-caps,
style="width: 200px"
)
@@ -106,21 +105,6 @@ export default {
border: 1.5px solid var(--border-light-grey-color-1)
border-radius: 4px
.select
height: 40px
border: 1.5px solid var(--border-light-grey-color)
border-radius: 4px
.item-input
appearance: none
outline: none
height: 40px
&::-webkit-calendar-picker-indicator
display: none
-webkit-appearance: none
&::placeholder
color: var(--font-black-color-1)
.status-wrapper
min-width: 540px
height: 120px
@@ -164,8 +148,4 @@ export default {
.graph-template
width: 218px
height: 120px
.delete-button
background-color: var(--bg-event-red-color)
border: none
</style>

102
src/pages/schedule/components/ScheduleHeader.vue
View File

@@ -1,54 +1,49 @@
<template lang="pug">
.flex.flex-col.gap-y-5
.flex.justify-center.pl-8.pr-20.font-bold.text-xl Планировщик смен
.flex
.calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
.flex
q-btn.mr-4(
text-color="primary",
color="secondary"
round,
size="14px",
dense,
@click="previousHandler",
)
q-icon(name="arrow_back_ios", right)
q-btn.mr-6(
@click="nextHandler",
text-color="primary",
color="secondary"
icon="arrow_forward_ios",
round,
size="14px",
dense,
)
.text.flex.items-center
.text.font-medium.text-base {{ dateString }}
.opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
.flex.gap-x-4.h-10
q-btn(
:label="textButton",
color="primary",
no-caps,
padding="8px 24px",
style="width: 174px"
@click="changeShowTime",
)
.flex.items-center.justify-between.py-3.pl-5.pr-6.h-14.w-full
.flex
q-btn.mr-4(
text-color="primary",
color="secondary"
round,
size="14px",
dense,
@click="previousHandler",
)
q-icon(name="arrow_back_ios", right)
q-btn.mr-6(
@click="nextHandler",
text-color="primary",
color="secondary"
icon="arrow_forward_ios",
round,
size="14px",
dense,
)
.text.flex.items-center(:style="{color: 'var(--font-dark-blue-color)'}")
.text.font-medium.text-base {{ dateString }}
.opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
.flex.gap-x-4.h-10
q-btn(
:label="textButton",
color="primary",
no-caps,
padding="8px 24px",
style="width: 174px"
@click="changeShowTime",
)
</template>
<script>
import * as moment from "moment";
import FormChangeShift from "@/pages/schedule/components/FormChangeShift.vue";
export default {
name: "ScheduleHeader",
components: { FormChangeShift },
props: {
showTime: Boolean,
startMonth: Object,
replacementSheet: Object,
changeShowTime: Function,
changeShift: Function,
},
data() {
return {
@@ -87,36 +82,3 @@ export default {
},
};
</script>
<style lang="sass" scoped>
.calendar-header-wrapper
width: 100%
background-color: var(--default-white)
height: 56px
border-radius: 4px
z-index: 10
.left-arrow
padding: 3px 4px 0 4px !important
transform: rotate(90deg)
.right-arrow
padding: 3px 4px 0 4px !important
transform: rotate(270deg)
.text
color: var(--font-dark-blue-color)
.secondary
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
&:hover
background-color: var(--btn-blue-color-hover)
border: 1px solid var(--btn-blue-color-hover)
color: var(--btn-blue-color)
&:disabled, &[disabled]
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
</style>

2
src/pages/schedule/components/ScheduleTable.vue
View File

@@ -39,7 +39,6 @@
<script>
import * as moment from "moment";
import BaseModal from "@/components/base/BaseModal.vue";
import ScheduleTableHeader from "@/pages/schedule/components/ScheduleTableHeader.vue";
import ScheduleTableBody from "@/pages/schedule/components/ScheduleTableBody.vue";
import ScheduleTableSelect from "@/pages/schedule/components/ScheduleTableSelect.vue";
@@ -48,7 +47,6 @@ import ScheduleBar from "@/pages/schedule/components/ScheduleBar.vue";
export default {
name: "ScheduleTable",
components: {
BaseModal,
ScheduleTableHeader,
ScheduleTableBody,
ScheduleTableSelect,

8
src/pages/schedule/components/ScheduleTableHeader.vue
View File

@@ -3,9 +3,7 @@
.flex.items-center.justify-center.pl-11(
:style="{width: 'calc(25% + 43px)'}"
)
.text.font-bold(
:style="{color: 'var(--btn-blue-color)'}"
) Сотрудник
.text.font-bold Сотрудник
.column-wrapper.flex
.flex.flex-col.items-center.justify-center.w-11(
v-for="day in result",
@@ -46,6 +44,7 @@ export default {
border-bottom: 1.5px solid var(--border-light-grey-color-1)
border-top-left-radius: 2px
border-top-right-radius: 2px
color: var(--btn-blue-color)
.column-wrapper
overflow: auto
@@ -54,7 +53,4 @@ export default {
.column-color
background-color: var(--bg-white-color-1)
.text
color: var(--btn-blue-color)
</style>