Merge branch 'UC-201' into 'master'

Добавил employee на расписание и стили See merge request andrusyakka/urban-couscous!213
2022-12-21 16:03:07 +00:00
parent e9a9c20fb5 1fd6b62c36
commit 40e0c71347
6 changed files with 92 additions and 23 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -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>
--- a/src/pages/schedule/TheSchedule.vue
+++ b/src/pages/schedule/TheSchedule.vue
@@ -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>
--- a/src/pages/schedule/components/FormChangeShift.vue
+++ b/src/pages/schedule/components/FormChangeShift.vue
@@ -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
--- a/src/pages/schedule/components/ScheduleBody.vue
+++ b/src/pages/schedule/components/ScheduleBody.vue
@@ -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: {
-          label: "",
-          id: null,
-        },
+      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
--- a/src/pages/schedule/components/ScheduleHeader.vue
+++ b/src/pages/schedule/components/ScheduleHeader.vue
@@ -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
--- a/src/shared/fetchWrapper.js
+++ b/src/shared/fetchWrapper.js
@@ -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) {