From 9c44be3379e8a7ace4ef4fdb3c360f51a1496c2a Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Tue, 21 Mar 2023 18:05:57 +0300
Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=82=D0=B0=D0=B1=D0=BB=D0=B8=D1=86=D1=83=20=D1=80?=
 =?UTF-8?q?=D0=B0=D1=81=D0=BF=D0=B8=D1=81=D0=B0=D0=BD=D0=B8=D1=8F=20=D0=B2?=
 =?UTF-8?q?=20=D1=81=D0=BE=D0=BE=D1=82=D0=B2=D0=B5=D1=82=D1=81=D1=82=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=B8=20=D1=81=20=D0=BC=D0=B0=D0=BA=D0=B5=D1=82=D0=BE?=
 =?UTF-8?q?=D0=BC,=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B0=20=D1=81=D1=82?=
 =?UTF-8?q?=D0=B8=D0=BB=D0=B5=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/schedule/TheSchedule.vue            |   2 +
 .../schedule/components/ScheduleTable.vue     |  28 ++---
 .../schedule/components/ScheduleTableBody.vue | 119 ++++++++++--------
 .../components/ScheduleTableHeader.vue        |  59 +++++----
 4 files changed, 109 insertions(+), 99 deletions(-)

diff --git a/src/pages/schedule/TheSchedule.vue b/src/pages/schedule/TheSchedule.vue
index 474e3e0..3b0d440 100644
--- a/src/pages/schedule/TheSchedule.vue
+++ b/src/pages/schedule/TheSchedule.vue
@@ -187,6 +187,8 @@ export default {
             id: e.employee.id,
             last_name: e.employee.last_name,
             patronymic: e.employee.patronymic,
+            photo: e.employee.photo,
+            color: e.employee.color,
             schedules: [
               {
                 date: e.date,
diff --git a/src/pages/schedule/components/ScheduleTable.vue b/src/pages/schedule/components/ScheduleTable.vue
index 24af508..ff2a0e4 100644
--- a/src/pages/schedule/components/ScheduleTable.vue
+++ b/src/pages/schedule/components/ScheduleTable.vue
@@ -6,16 +6,20 @@
         outlined
       )
         .flex.items-center.cursor-pointer
-          q-icon(name="app:icon-search", size="18px" style="color: var(--font-dark-blue-color)")
+          q-icon(
+            name="app:icon-search",
+            size="18px",
+            style="color: var(--font-dark-blue-color)"
+          )
       q-btn(
         color="primary",
         padding="8px 25px",
-        no-caps,
+        no-caps
       )
         q-icon(
           name="app:icon-plus",
           size="12px",
-          style="margin-right: 10px",
+          style="margin-right: 10px"
         )
         span Создать смену
     schedule-table-header(:result="result")
@@ -27,7 +31,6 @@
       :clear-select="clearSelect",
       :select-employee="selectEmployee",
       :choice-state="choiceState",
-      :buttons="buttons",
       :show-time="showTime",
       :schedule-list="scheduleList",
       :open-form="openForm",
@@ -36,23 +39,6 @@
       :change-shift="changeShift"
       :set-active-cell="setActiveCell"
     )
-    schedule-table-select(
-      v-if="employees.length > 0",
-      :select-employee="selectEmployee",
-      :employees="employees",
-      :result="result",
-      :choice-cell="choiceCell",
-      :choice-state="choiceState",
-      :trim-owner-name="trimOwnerName"
-    )
-    schedule-bar(
-      :buttons="buttons",
-      :times="times",
-      :create-schedules="createSchedules",
-      :delete-schedule="deleteSchedule",
-      :template="template"
-      :clear-cell="clearCell"
-    )
 </template>
 
 <script>
diff --git a/src/pages/schedule/components/ScheduleTableBody.vue b/src/pages/schedule/components/ScheduleTableBody.vue
index baea05f..4663368 100644
--- a/src/pages/schedule/components/ScheduleTableBody.vue
+++ b/src/pages/schedule/components/ScheduleTableBody.vue
@@ -1,50 +1,59 @@
 <template lang="pug">
-  .schedule-wrapper.flex.w-full.flex-col
-    .flex.w-full(v-for="schedule in serialized", :key="schedule.id")
-      q-btn(
-        flat,
-        class="edit",
-        icon="app:icon-edit",
-        size="12px",
-        no-caps,
-        padding="10px 13px",
-        @click="openForm(schedule)"
-      )
-        q-menu(v-model="showForm")
-          form-change-shift(
-            v-model="showForm",
-            :replacement-sheet="replacementSheet",
-            :employees="employees",
-            :trim-owner-name="trimOwnerName",
-            :serialized="serialized",
-            :change-shift="changeShift"
-          )
-      .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(
+  .flex.flex-col.pl-6
+    .row.flex.w-full.h-14(v-for="schedule in serialized", :key="schedule.id")
+      //- q-btn(
+      //-   flat,
+      //-   class="edit",
+      //-   icon="app:icon-edit",
+      //-   size="12px",
+      //-   no-caps,
+      //-   padding="10px 13px",
+      //-   @click="openForm(schedule)"
+      //- )
+      //-   q-menu(v-model="showForm")
+      //-     form-change-shift(
+      //-       v-model="showForm",
+      //-       :replacement-sheet="replacementSheet",
+      //-       :employees="employees",
+      //-       :trim-owner-name="trimOwnerName",
+      //-       :serialized="serialized",
+      //-       :change-shift="changeShift"
+      //-     )
+      .name-employee.flex.items-center.gap-x-3.pr-9.pl-4
+        base-avatar.font-medium.text-sm(
+          :size="36",
+          :color="schedule.color",
+          v-if="!schedule.photo"
+        ) {{trimInitials(schedule.last_name, schedule.first_name)}}
+        base-avatar(:size="36", v-else-if="schedule.photo")
+          img.h-full.object-cover(:src="url + schedule.photo")
+        .font-semibold.text-sm(
+          :style="{minWidth: '228px', maxWidth: '228px'}"
+        ) {{schedule.last_name + " " + schedule.first_name + " " + schedule.patronymic}}
+      .flex.overflow-hidden
+        .cell.flex.flex-col.items-center.justify-center.m-1.cursor-pointer.transition(
           v-for="day in result",
           :key="day",
           :id="schedule.id + day",
           @click="choiceCell(day, schedule.id, schedule); clearSelect(selectEmployee); setActiveCell()",
-          :class="choiceState(day, schedule.id)",
-          :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : '', width: `calc(100% / ${result.length})`}"
+          :class="choiceState(day, schedule.id), {'empty-cell': !choiceDay(day, schedule.id)}",
+          :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : ''}"
         )
           .flex(
             :class="{'cell-work': choiceState(day, schedule.id)?.status, 'show-time': showTime}"
-          ) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : ''}}
+          ) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : '-'}}
 </template>
 
 <script>
 import FormChangeShift from "@/pages/schedule/components/FormChangeShift.vue";
+import BaseAvatar from "@/components/base/BaseAvatar";
 
 export default {
   name: "ScheduleTableBody",
-  components: { FormChangeShift },
+  components: { FormChangeShift, BaseAvatar },
   props: {
     serialized: Array,
     result: Array,
-    buttons: Array,
     scheduleList: Array,
     employees: Array,
     showTime: Boolean,
@@ -61,9 +70,23 @@ export default {
   data() {
     return {
       showForm: false,
+      statuses: [
+        { work: "I", status: "I", color: "#B1F4C5" },
+        { work: "II", status: "II", color: "#E2CDFE" },
+        { work: "VACATION", status: "О", color: "#E7ECF0" },
+        { work: "DAY_OFF", status: "В", color: "#CCE4FB" },
+        { work: "PARTIAL", status: "Ч", color: "#FED1E9" },
+        { work: "DUTY", status: "Д", color: "#FF00FF" },
+      ],
     };
   },
+
   methods: {
+    trimInitials(firstName, lastName) {
+      let croppedFirstName = firstName !== null ? firstName[0] : "";
+      let croppedLastName = lastName !== null ? lastName[0] : "";
+      return croppedLastName + croppedFirstName;
+    },
     choiceDay(day, employee) {
       let current = day.format("YYYY-MM-DD");
       return this.scheduleList.find(
@@ -76,15 +99,14 @@ export default {
       if (res !== "WORKS" && this.showTime) {
         return "var(--default-white)";
       }
-      return this.buttons.find((e) => e.work === res)?.color;
+      return this.statuses.find((e) => e.work === res)?.color;
     },
     choiceWorks(day, employee) {
       if (this.showTime) {
         return this.choiceTime(employee, day);
       }
       let currentDay = day.format("YYYY-MM-DD");
-      let res = employee.schedules.find((e) => e.date === currentDay)?.status;
-      return this.buttons.find((e) => e.work === res)?.text[1];
+      return employee.schedules.find((e) => e.date === currentDay)?.status;
     },
     choiceTime(schedule, day) {
       let currentDay = day.format("YYYY-MM-DD");
@@ -101,31 +123,21 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.schedule-wrapper
-  overflow-y: scroll
-  max-height: 351px
+.row
   border-bottom: 1.5px solid var(--border-light-grey-color-1)
-  &::-webkit-scrollbar-track
-    border-radius: 0
-
-.edit
-  border-radius: 0
-  border-right: 1.5px solid var(--border-light-grey-color-1)
-  border-bottom: 1.5px solid var(--border-light-grey-color-1)
-  border-left: 1.5px solid var(--border-light-grey-color-1)
+  &:last-child
+    border-bottom: none
 
 .name-employee
-  width: 25%
-  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)
-
-.row
-  width: calc(75% - 44px)
+  min-width: 357px
+  max-width: 357px
+  color: var(--font-dark-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)
+  height: 48px
+  min-width: 74px
+  max-width: 74px
+  border-radius: 4px
   &:hover
     background-color: var(--border-light-grey-color-1)
   &:last-child
@@ -134,6 +146,9 @@ export default {
 .cell-work
   display: none
 
+.empty-cell
+  border: 1px solid #E7ECF0
+
 .show-time
   text-align: center
   font-size: 12px
diff --git a/src/pages/schedule/components/ScheduleTableHeader.vue b/src/pages/schedule/components/ScheduleTableHeader.vue
index 53ba0a0..fe96196 100644
--- a/src/pages/schedule/components/ScheduleTableHeader.vue
+++ b/src/pages/schedule/components/ScheduleTableHeader.vue
@@ -1,21 +1,26 @@
 <template lang="pug">
-  .table-header.flex.w-full.pr-2
-    .flex.items-center.justify-center.pl-11(
-      :style="{width: 'calc(25% + 43px)'}"
+  .table-header.flex.w-full.pr-2.pl-6
+    .flex.items-center.pr-9.justify-between(
+      :style="{minWidth: '357px', maxWidth: '357px'}"
     )
-      .text.font-bold Сотрудник
-    .column-wrapper.flex
-      .flex.flex-col.items-center.justify-center.w-11(
-        v-for="day in result",
-        :class="{'column-color': changelColumnColor(day)}",
-        :style="{width: `calc(100% / ${result.length})`}"
+      .text.font-semibold.text-sm Сотрудники
+      q-icon(
+        name="app:icon-sort-number",
+        size="12px",
+        style="color: var(--font-dark-blue-color)"
       )
-        .text.flex.font-bold(
-          :style="{opacity: changeOpacity(day)}"
-        ) {{day.format("D")}}
-        .text.flex.font-bold(
-          :style="{opacity: changeOpacity(day)}"
-        ) {{day.format("ddd")}}
+    .flex
+      .flex.items-center.justify-center.w-11(
+        v-for="day in result",
+        :class="{'column-color': changeColumnColor(day)}",
+        :style="{width: '82px'}"
+      )
+        .text.flex.font-semibold.text-smm(
+          :style="{color: changeColor(day)}"
+        ) {{day.format("D") + "\xa0"}}
+        .text.flex.font-semibold.text-smm(
+          :style="{opacity: '0.5', color: changeColor(day)}"
+        ) {{formatDay(day)}}
 </template>
 
 <script>
@@ -23,34 +28,36 @@ export default {
   name: "ScheduleTableHeader",
   props: { result: Array },
   methods: {
-    changelColumnColor(day) {
+    changeColumnColor(day) {
       return day.format("ddd") === "сб" || day.format("ddd") === "вс"
         ? true
         : false;
     },
-    changeOpacity(day) {
+    changeColor(day) {
       return day.format("ddd") === "сб" || day.format("ddd") === "вс"
-        ? "0.6"
-        : "1";
+        ? "var(--border-red-color)"
+        : null;
+    },
+    formatDay(day) {
+      let str = day.format("ddd");
+      return str.charAt(0).toUpperCase() + str.slice(1) + ".";
     },
   },
 };
 </script>
 
 <style lang="sass" scoped>
+.text
+  color: var(--font-grey-color)
+
 .table-header
-  height: 50px
-  background-color: #D7D9FF
+  overflow: hidden
+  height: 36px
   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
-  overflow-x: hidden
-  width: calc(75% - 44px)
-
 .column-color
   background-color: var(--bg-white-color-1)
 </style>