Merge branch 'UC-204' into 'master'
Resolve UC-204 See merge request andrusyakka/urban-couscous!277
This commit is contained in:
@@ -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
44
src/pages/calendar/utils/calendarConfig.js
Normal 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)",
|
||||
},
|
||||
];
|
||||
@@ -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="Текущий сотрудник",
|
||||
|
||||
@@ -26,7 +26,6 @@
|
||||
:label="item.name",
|
||||
:class="item.class",
|
||||
text-color="white",
|
||||
|
||||
no-caps,
|
||||
style="width: 200px"
|
||||
)
|
||||
@@ -43,7 +42,7 @@
|
||||
color="primary",
|
||||
style="width: 144px",
|
||||
padding="4px 24px",
|
||||
@click="createSchedules",
|
||||
@click="createSchedules(); clearCell()",
|
||||
no-caps
|
||||
)
|
||||
q-btn(
|
||||
@@ -72,6 +71,7 @@ export default {
|
||||
times: Object,
|
||||
createSchedules: Function,
|
||||
deleteSchedule: Function,
|
||||
clearCell: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -105,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
|
||||
@@ -163,8 +148,4 @@ export default {
|
||||
.graph-template
|
||||
width: 218px
|
||||
height: 120px
|
||||
|
||||
.delete-button
|
||||
background-color: var(--bg-event-red-color)
|
||||
border: none
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
<template lang="pug">
|
||||
.schedule.flex-col(
|
||||
:style="themeCell",
|
||||
v-click-outside="clearCell"
|
||||
)
|
||||
.schedule.flex-col(:style="themeCell")
|
||||
schedule-table-header(:result="result")
|
||||
schedule-table-body(
|
||||
:serialized="serialized",
|
||||
@@ -36,12 +33,12 @@
|
||||
:create-schedules="createSchedules",
|
||||
:delete-schedule="deleteSchedule",
|
||||
:template="template"
|
||||
:clear-cell="clearCell"
|
||||
)
|
||||
</template>
|
||||
|
||||
<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";
|
||||
@@ -50,7 +47,6 @@ import ScheduleBar from "@/pages/schedule/components/ScheduleBar.vue";
|
||||
export default {
|
||||
name: "ScheduleTable",
|
||||
components: {
|
||||
BaseModal,
|
||||
ScheduleTableHeader,
|
||||
ScheduleTableBody,
|
||||
ScheduleTableSelect,
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
:serialized="serialized",
|
||||
:change-shift="changeShift"
|
||||
)
|
||||
.name-employee.flex.justify-center.items-center.cursor-pointer
|
||||
.name-employee.flex.justify-center.items-center
|
||||
span {{trimOwnerName(schedule.last_name, schedule.first_name, schedule.patronymic)}}
|
||||
.row.flex
|
||||
.cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer.transition(
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
)
|
||||
.edit.flex.items-center.justify-center.h-11.w-11(v-if="selectEmployee.label")
|
||||
.flex.icon-edit
|
||||
.flex.justify-center.items-center.cursor-pointer(
|
||||
.flex.justify-center.items-center(
|
||||
:class="{'select-name': selectEmployee.label}",
|
||||
:style="{color: 'var(--btn-blue-color)'}"
|
||||
)
|
||||
@@ -68,6 +68,7 @@ export default {
|
||||
.edit
|
||||
border-bottom: 1.5px solid var(--border-light-grey-color-1)
|
||||
border-left: 1.5px solid var(--border-light-grey-color-1)
|
||||
border-right: 1.5px solid var(--border-light-grey-color-1)
|
||||
|
||||
.schedule-select
|
||||
border-right: 8px solid var(--bg-ligth-blue-color)
|
||||
|
||||
Reference in New Issue
Block a user