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

Добавил employee на расписание и стили

Browse Source
This commit is contained in:
megavrilinvv
2022-12-21 19:00:45 +03:00
parent e9a9c20fb5
commit 1fd6b62c36
6 changed files with 92 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>logo.svg"> <link rel="icon" href="<%= BASE_URL %>logo.svg">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title="Астра" %></title>
</head> </head>
<body style="margin: 0; height: 100vh;"> <body style="margin: 0; height: 100vh;">
<noscript> <noscript>

18
src/pages/schedule/TheSchedule.vue
View File

@@ -2,7 +2,11 @@
.wrapper.flex.w-full.relative.mx-2 .wrapper.flex.w-full.relative.mx-2
.schedule-wrapper.relative.flex.flex-col.px-6.py-6.h-full.w-full.gap-y-5 .schedule-wrapper.relative.flex.flex-col.px-6.py-6.h-full.w-full.gap-y-5
schedule-header schedule-header
schedule-body(:employee-list="employeeList") schedule-body(
:employee-list="employeeList",
:schedules-employee="fetchSchedulesEmployee",
:schedule-list="scheduleList"
)
schedule-bar schedule-bar
</template> </template>
@@ -17,17 +21,25 @@ export default {
data() { data() {
return { return {
employeeList: [], employeeList: [],
scheduleList: [],
}; };
}, },
methods: { methods: {
getSchedules() { fetchSchedules() {
fetchWrapper fetchWrapper
.get("general/employee/") .get("general/employee/")
.then((res) => (this.employeeList = res.results)); .then((res) => (this.employeeList = res.results));
}, },
fetchSchedulesEmployee(id) {
fetchWrapper
.get(`accounts/schedules/?employee=${id}`, "api")
.then((data) => {
this.scheduleList = data.results;
});
},
}, },
mounted() { mounted() {
this.getSchedules(); this.fetchSchedules();
}, },
}; };
</script> </script>

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

@@ -14,7 +14,7 @@
span.text-smm.font-semibold Текущий сотрудник span.text-smm.font-semibold Текущий сотрудник
base-custom-select.h-10(v-model="currentEmployee") base-custom-select.h-10(v-model="currentEmployee")
.flex.flex-col(class="gap-y-1.5") .flex.flex-col(class="gap-y-1.5")
span.text-smm.font-semibold Замена сотрдника span.text-smm.font-semibold Замена сотрудника
base-custom-select.h-10(v-model="currentEmployee") base-custom-select.h-10(v-model="currentEmployee")
.time-wrapper.flex.justify-center .time-wrapper.flex.justify-center
.flex.flex-col.py-14px.px-4.gap-y-14px.items-center .flex.flex-col.py-14px.px-4.gap-y-14px.items-center

73
src/pages/schedule/components/ScheduleBody.vue
View File

@@ -4,7 +4,7 @@
.flex.items-center(:style="{padding: '16px 102px'}") .flex.items-center(:style="{padding: '16px 102px'}")
.text.font-bold Сотрудник .text.font-bold Сотрудник
.column-wrapper.flex .column-wrapper.flex
.schedule-column.flex.flex-col.items-center.justify-center.px-2( .schedule-column.flex.flex-col.items-center.justify-center.w-11(
v-for="day in result", v-for="day in result",
:style="{backgroundColor: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? 'var(--bg-white-color-1)' : ''}" :style="{backgroundColor: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? 'var(--bg-white-color-1)' : ''}"
) )
@@ -14,15 +14,38 @@
.text.flex.font-bold( .text.flex.font-bold(
:style="{opacity: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? '0.6' : '1'}" :style="{opacity: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? '0.6' : '1'}"
) {{day.format("ddd")}} ) {{day.format("ddd")}}
.schedule-body.flex.w-full .schedule-body.flex.w-full(v-if="this.scheduleList[0]?.id")
.edit.flex.items-center.justify-center.h-9.w-9 .edit.flex.items-center.justify-center.h-9.w-9
.flex.icon-edit .flex.icon-edit
.name.flex.justify-center.items-center.cursor-pointer(v-if="schedule.employee.label", @click="openSelect") .name-employee.flex.justify-center.items-center.cursor-pointer(@click="openSelect")
span {{schedule.employee.label}} span {{trimOwnerName(this.scheduleList[0]?.employee.last_name, this.scheduleList[0]?.employee.first_name, this.scheduleList[0]?.employee.patronymic)}}
.name.flex(v-if="!schedule.employee.label") .flex(v-for="day in result")
.cell.flex.flex-col.items-center.justify-center.w-11(
v-for="item in scheduleList",
:style="{backgroundColor: day.format('YYYY-MM-DD') === item.date ? choiceColor(item.status) : ''}"
)
.flex {{day.format("YYYY-MM-DD") === item.date ? choiceWorks(item.status) : ''}}
.schedule-body.flex.w-full
.edit.flex.items-center.justify-center.h-9.w-9
.flex.items-center.gap-x-8
base-button(
confirm,
rounded,
outlined,
:size="20",
@click="saveEmployee",
v-if="currentEmployee.label"
)
.icon-ok.text-xsm(class="pt-[3px]")
.name.flex.justify-center.items-center.cursor-pointer(
v-if="currentEmployee.label",
@click="openSelect"
)
span {{currentEmployee.label}}
.name.flex(v-if="!currentEmployee.label")
base-custom-select( base-custom-select(
:items="ownersList", :items="ownersList",
v-model="schedule.employee", v-model="currentEmployee",
placeholder="Добавить сотрудника", placeholder="Добавить сотрудника",
:style="{border: 'none'}" :style="{border: 'none'}"
) )
@@ -31,10 +54,11 @@
<script> <script>
import * as moment from "moment"; import * as moment from "moment";
import BaseModal from "@/components/base/BaseModal.vue"; import BaseModal from "@/components/base/BaseModal.vue";
import BaseButton from "@/components/base/BaseButton.vue";
import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue"; import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
export default { export default {
name: "ScheduleBody", name: "ScheduleBody",
components: { BaseModal, BaseCustomSelect }, components: { BaseModal, BaseButton, BaseCustomSelect },
props: { props: {
employeeList: { employeeList: {
type: Array, type: Array,
@@ -42,6 +66,8 @@ export default {
return []; return [];
}, },
}, },
schedulesEmployee: Function,
scheduleList: Array,
}, },
data() { data() {
return { return {
@@ -50,12 +76,15 @@ export default {
startMonth: moment("2022-12-01"), startMonth: moment("2022-12-01"),
showSelect: false, showSelect: false,
employee: [], employee: [],
schedule: { currentEmployee: {
employee: {
label: "", label: "",
id: null, id: null,
}, },
}, works: [
{ work: "WORKS", color: "#55CD76", text: "Р" },
{ work: "VACATION", color: "#D7D9FF", text: "О" },
{ work: "DAY_OFF", color: "#9294A7", text: "В" },
],
}; };
}, },
computed: { computed: {
@@ -78,6 +107,17 @@ export default {
}, },
}, },
methods: { methods: {
saveEmployee() {
this.schedulesEmployee(this.currentEmployee.id);
this.currentEmployee.label = "";
this.currentEmployee.id = null;
},
choiceWorks(work) {
return this.works.find((e) => e.work === work).text;
},
choiceColor(work) {
return this.works.find((e) => e.work === work).color;
},
changeDays() { changeDays() {
this.days = moment().daysInMonth(); this.days = moment().daysInMonth();
}, },
@@ -99,6 +139,7 @@ export default {
} }
}, },
}, },
mounted() { mounted() {
this.changeDays(); this.changeDays();
this.pushMonth(); this.pushMonth();
@@ -120,7 +161,6 @@ export default {
border-top-right-radius: 2px border-top-right-radius: 2px
.column-wrapper .column-wrapper
max-width: 1080px
overflow: auto overflow: auto
.text .text
@@ -135,6 +175,17 @@ export default {
border-right: 1.5px solid var(--border-light-grey-color-1) border-right: 1.5px solid var(--border-light-grey-color-1)
color: var(--btn-blue-color) color: var(--btn-blue-color)
.name-employee
min-width: 255px
max-width: 255px
border-right: 1.5px solid var(--border-light-grey-color-1)
border-bottom: 1.5px solid var(--border-light-grey-color-1)
color: var(--btn-blue-color)
.cell
border-right: 1.5px solid var(--border-light-grey-color-1)
border-bottom: 1.5px solid var(--border-light-grey-color-1)
.modal-wrapper .modal-wrapper
border: 1.5px solid var(--border-light-grey-color-1) border: 1.5px solid var(--border-light-grey-color-1)
border-radius: 4px border-radius: 4px

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

@@ -1,6 +1,6 @@
<template lang="pug"> <template lang="pug">
.flex.flex-col.gap-y-5 .flex.flex-col.gap-y-5
.flex.justify-center.pl-8.pr-20.font-bold.text-xl Индивидуальный график .flex.justify-center.pl-8.pr-20.font-bold.text-xl Планировщик смен
form-change-shift(v-if="showForm", :close-form="closeForm") form-change-shift(v-if="showForm", :close-form="closeForm")
.flex .flex
.calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6 .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6

14
src/shared/fetchWrapper.js
View File

@@ -5,6 +5,11 @@ function prepareUrl(url) {
return `https://astra-dev.dopcore.com/api/${url}`; return `https://astra-dev.dopcore.com/api/${url}`;
} }
function prepareUrlApi(url) {
if (url.startsWith("http")) return url;
return `https://astra-dev.dopcore.com/${url}`;
}
function handleRequest(method, url, headers, attempts, body, type) { function handleRequest(method, url, headers, attempts, body, type) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
(function internalRequest() { (function internalRequest() {
@@ -67,12 +72,13 @@ function request(method, url, headers = {}, body, type = "") {
body: JSON.stringify(body), body: JSON.stringify(body),
}; };
} }
if (type === "api") {
return fetch(prepareUrl(url), requestOptions); return fetch(prepareUrlApi(url), requestOptions);
} else return fetch(prepareUrl(url), requestOptions);
} }
function get(url, headers, attempts = 3) { function get(url, type, headers, attempts = 3) {
return handleRequest("GET", url, headers, attempts, null); return handleRequest("GET", url, headers, attempts, null, type);
} }
function del(url, headers, attempts = 3) { function del(url, headers, attempts = 3) {