[WIP] Добавил отображение сотрудников на графике, поправил стили, изменил запросы логина

2022-12-22 18:18:43 +03:00
parent 838266c0e9
commit 3773c15ad5
6 changed files with 145 additions and 104 deletions
--- a/src/pages/schedule/components/ScheduleBar.vue
+++ b/src/pages/schedule/components/ScheduleBar.vue
@@ -2,25 +2,22 @@
  .wrapper-bar.flex.flex-col.gap-y-4
    .flex.px-5.py-5.w-full.justify-around
      .time-wrapper.flex.justify-between
-        .flex.flex-col.py-14px.px-4.gap-y-14px
-          .text.text-smm Начало рабочего дня
-          base-input-time.item-input.text-base.select(:width-input="40")
-        .flex.flex-col.py-14px.px-4.gap-y-14px
-          .text.span.text-smm Конец рабочего дня
-          base-input-time.item-input.text-base.select(:width-input="40")
+        .flex.flex-col.items-center.py-14px.px-4.gap-y-14px
+          .text.text-smm Начало
+          base-input-date.select(v-model:value="dataSchedule.endTime")
+        .flex.flex-col.items-center.py-14px.px-4.gap-y-14px
+          .text.span.text-smm Конец
+          base-input-date.select(v-model:value="dataSchedule.startTime")
      .status-wrapper.flex.flex-col
        .flex.justify-center.items-center.h-10
          span.font-semibold Статусы
        .flex.justify-around(class="py-2.5")
-          base-button.button-work.font-semibold(
-            :style="{minWidth: '190px', minHeight: '43px'}"
-          ) Работает
-          base-button.button-status.font-semibold(
-            :style="{minWidth: '190px', minHeight: '43px'}"
-          ) Отпуск/больничный
-          base-button.button-free.font-semibold(
-            :style="{minWidth: '190px', minHeight: '43px'}"
-          ) Выходной
+          base-button.font-semibold(
+            v-for="item in buttons",
+            :class="item.work" ,
+            :style="{minWidth: '190px', minHeight: '43px', border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
+            @click="choiceSchedule(item.work)"
+          ) {{item.name}}
      .graph-template.flex
        base-custom-select(
          :items="scheduleList",
@@ -36,9 +33,10 @@
 import BaseButton from "@/components/base/BaseButton.vue";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 import BaseInputTime from "@/components/base/BaseInputTime.vue";
+import BaseInputDate from "@/components/base/BaseInputDate.vue";
 export default {
  name: "ScheduleBar",
-  components: { BaseButton, BaseCustomSelect, BaseInputTime },
+  components: { BaseButton, BaseCustomSelect, BaseInputTime, BaseInputDate },
  data() {
    return {
      scheduleList: [
@@ -48,8 +46,24 @@ export default {
        { label: "5/2", id: 4 },
      ],
      schedule: {},
+      dataSchedule: {
+        startDate: null,
+        endDate: null,
+        status: "",
+      },
+      buttons: [
+        { work: "button-work", name: "Работает", active: false },
+        { work: "button-status", name: "Отпуск/больничный", active: false },
+        { work: "button-free", name: "Статусы", active: false },
+      ],
    };
  },
+  methods: {
+    choiceSchedule(item) {
+      this.buttons.forEach((e) => (e.active = false));
+      this.buttons.find((e) => e.work === item).active = true;
+    },
+  },
 };
 </script>

@@ -60,7 +74,7 @@ export default {
  border-radius: 4px

 .time-wrapper
-  width: 350px
+  width: 420px
  height: 102px
  border: 1.5px solid var(--border-light-grey-color-1)
  border-radius: 4px
@@ -128,4 +142,9 @@ export default {
 .graph-template
  width: 218px
  height: 40px
+
+.select
+  height: 40px
+  border: 1.5px solid var(--border-light-grey-color)
+  border-radius: 4px
 </style>
--- a/src/pages/schedule/components/ScheduleBody.vue
+++ b/src/pages/schedule/components/ScheduleBody.vue
@@ -14,40 +14,40 @@
          .text.flex.font-bold(
            :style="{opacity: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? '0.6' : '1'}"
            ) {{day.format("ddd")}}
-    .schedule-body.flex.w-full(v-if="this.scheduleList[0]?.id")
+    .schedule-body.flex.w-full(v-for="schedule in serialized")
      .edit.flex.items-center.justify-center.h-9.w-9
        .flex.icon-edit
      .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)}}
+        span {{trimOwnerName(schedule.last_name, schedule.first_name, schedule.patronymic)}}
      .flex
        .cell.flex.flex-col.items-center.justify-center.w-11(
          v-for="day in result",
-          :style="{backgroundColor: day.format('YYYY-MM-DD') === choiceDay(day.format('YYYY-MM-DD')) ? choiceColor(day.format('YYYY-MM-DD')) : ''}"
+          :style="{backgroundColor: day.format('YYYY-MM-DD') === choiceDay(day.format('YYYY-MM-DD'), schedule.id) ? choiceColor(day.format('YYYY-MM-DD')) : ''}"
        )
-          .flex {{day.format("YYYY-MM-DD") === choiceDay(day.format("YYYY-MM-DD")) ? choiceWorks(day.format('YYYY-MM-DD')) : ''}}
-    .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="currentEmployee",
-          placeholder="Добавить сотрудника",
-          :style="{border: 'none'}"
+          .flex {{day.format("YYYY-MM-DD") === choiceDay(day.format("YYYY-MM-DD"), schedule.id) ? choiceWorks(day.format('YYYY-MM-DD')) : ''}}
+    //- .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="currentEmployee",
+    //-       placeholder="Добавить сотрудника",
+    //-       :style="{border: 'none'}"
        )
 </template>

@@ -66,8 +66,8 @@ export default {
        return [];
      },
    },
-    schedulesEmployee: Function,
    scheduleList: Array,
+    serialized: Array,
  },
  data() {
    return {
@@ -85,6 +85,7 @@ export default {
        { work: "VACATION", color: "#D7D9FF", text: "О" },
        { work: "DAY_OFF", color: "#9294A7", text: "В" },
      ],
+      curWork: "",
    };
  },
  computed: {
@@ -108,7 +109,6 @@ export default {
  },
  methods: {
    saveEmployee() {
-      this.schedulesEmployee(this.currentEmployee.id);
      this.currentEmployee.label = "";
      this.currentEmployee.id = null;
    },
@@ -140,8 +140,10 @@ export default {
        this.employee.push(this.employeeList[index]);
      }
    },
-    choiceDay(day) {
-      return this.scheduleList.find((e) => day === e.date)?.date;
+    choiceDay(day, employee) {
+      return this.scheduleList.find(
+        (e) => day === e.date && e.employee.id === employee
+      )?.date;
    },
  },