Merge branch 'UC-213' into 'master'

[WIP] Изменил таблицу расписания в соответствии с макетом, правка стилей See merge request andrusyakka/urban-couscous!283
2023-03-21 15:06:43 +00:00
parent d648389c11 9c44be3379
commit 6f7a74a95c
4 changed files with 109 additions and 99 deletions
--- 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,
--- 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>
--- 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
--- 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>