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 name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>logo.svg">
<title><%= htmlWebpackPlugin.options.title %></title>
<title><%= htmlWebpackPlugin.options.title="Астра" %></title>
</head>
<body style="margin: 0; height: 100vh;">
<noscript>

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

@@ -2,7 +2,11 @@
.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-header
schedule-body(:employee-list="employeeList")
schedule-body(
:employee-list="employeeList",
:schedules-employee="fetchSchedulesEmployee",
:schedule-list="scheduleList"
)
schedule-bar
</template>
@@ -17,17 +21,25 @@ export default {
data() {
return {
employeeList: [],
scheduleList: [],
};
},
methods: {
getSchedules() {
fetchSchedules() {
fetchWrapper
.get("general/employee/")
.then((res) => (this.employeeList = res.results));
},
fetchSchedulesEmployee(id) {
fetchWrapper
.get(`accounts/schedules/?employee=${id}`, "api")
.then((data) => {
this.scheduleList = data.results;
});
},
},
mounted() {
this.getSchedules();
this.fetchSchedules();
},
};
</script>

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

@@ -14,7 +14,7 @@
span.text-smm.font-semibold Текущий сотрудник
base-custom-select.h-10(v-model="currentEmployee")
.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")
.time-wrapper.flex.justify-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'}")
.text.font-bold Сотрудник
.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",
:style="{backgroundColor: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? 'var(--bg-white-color-1)' : ''}"
)
@@ -14,15 +14,38 @@
.text.flex.font-bold(
:style="{opacity: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? '0.6' : '1'}"
) {{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
.flex.icon-edit
.name.flex.justify-center.items-center.cursor-pointer(v-if="schedule.employee.label", @click="openSelect")
span {{schedule.employee.label}}
.name.flex(v-if="!schedule.employee.label")
.name-employee.flex.justify-center.items-center.cursor-pointer(@click="openSelect")
span {{trimOwnerName(this.scheduleList[0]?.employee.last_name, this.scheduleList[0]?.employee.first_name, this.scheduleList[0]?.employee.patronymic)}}
.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(
:items="ownersList",
v-model="schedule.employee",
v-model="currentEmployee",
placeholder="Добавить сотрудника",
:style="{border: 'none'}"
)
@@ -31,10 +54,11 @@
<script>
import * as moment from "moment";
import BaseModal from "@/components/base/BaseModal.vue";
import BaseButton from "@/components/base/BaseButton.vue";
import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
export default {
name: "ScheduleBody",
components: { BaseModal, BaseCustomSelect },
components: { BaseModal, BaseButton, BaseCustomSelect },
props: {
employeeList: {
type: Array,
@@ -42,6 +66,8 @@ export default {
return [];
},
},
schedulesEmployee: Function,
scheduleList: Array,
},
data() {
return {
@@ -50,12 +76,15 @@ export default {
startMonth: moment("2022-12-01"),
showSelect: false,
employee: [],
schedule: {
employee: {
currentEmployee: {
label: "",
id: null,
},
},
works: [
{ work: "WORKS", color: "#55CD76", text: "Р" },
{ work: "VACATION", color: "#D7D9FF", text: "О" },
{ work: "DAY_OFF", color: "#9294A7", text: "В" },
],
};
},
computed: {
@@ -78,6 +107,17 @@ export default {
},
},
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() {
this.days = moment().daysInMonth();
},
@@ -99,6 +139,7 @@ export default {
}
},
},
mounted() {
this.changeDays();
this.pushMonth();
@@ -120,7 +161,6 @@ export default {
border-top-right-radius: 2px
.column-wrapper
max-width: 1080px
overflow: auto
.text
@@ -135,6 +175,17 @@ export default {
border-right: 1.5px solid var(--border-light-grey-color-1)
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
border: 1.5px solid var(--border-light-grey-color-1)
border-radius: 4px

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

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