[WIP] Добавил чекбоксы на страницу расписания, правка стилей

2023-03-22 16:40:58 +03:00
parent b711644bb7
commit 0d25759081
3 changed files with 82 additions and 28 deletions
--- a/src/pages/schedule/components/ScheduleTable.vue
+++ b/src/pages/schedule/components/ScheduleTable.vue
@@ -22,9 +22,14 @@
          style="margin-right: 10px"
        )
        span Создать смену
-    schedule-table-header(:result="result")
+    schedule-table-header(
+      :result="result",
+      :selected-all="selectedAll",
+      :select="select"
+    )
    schedule-table-body(
      :serialized="serialized",
+      :selected="selected",
      :trim-owner-name="trimOwnerName",
      :result="result",
      :choice-cell="choiceCell",
@@ -93,6 +98,8 @@ export default {
      },
      activeButton: null,
      choiceMonth: null,
+      selected: [],
+      selectedAll: false,
    };
  },
  computed: {
@@ -107,6 +114,15 @@ export default {
    },
  },
  methods: {
+    select() {
+      this.selected = [];
+      if (!this.selectedAll) {
+        for (let i in this.serialized) {
+          this.selected.push(this.serialized[i].id);
+        }
+        this.selectedAll = true;
+      } else this.selectedAll = false;
+    },
    setActiveButton() {
      this.activeButton = this.buttons.find((e) => e.active);
    },
--- a/src/pages/schedule/components/ScheduleTableBody.vue
+++ b/src/pages/schedule/components/ScheduleTableBody.vue
@@ -19,17 +19,25 @@
      //-       :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}}
+      .name-employee.flex.items-center.gap-x-3
+        .flex.w-9
+          q-checkbox(
+            v-model="selected",
+            :val="schedule.id",
+            :style="{border: 'none', sidth: '36px'}",
+            size="32px"
+          )
+        .flex.items-center(:style="{minWidth: '357px', maxWidth: '357px'}")
+          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.pl-3(
+            :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",
@@ -40,8 +48,24 @@
          :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : ''}"
        )
          .flex(
-            :class="{'cell-work': choiceState(day, schedule.id)?.status, 'show-time': showTime}"
+            v-if="!showTime",
+            :class="{'cell-work': choiceState(day, schedule.id)?.status}"
          ) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : '-'}}
+          .flex.flex-col(
+            v-else,
+            :class="{'cell-work': choiceState(day, schedule.id)?.status, 'show-time': showTime}"
+          )
+            .cell-time.flex.justify-center(
+              :style="{backgroundColor: choiceColor(day, schedule)}"
+            ) {{choiceStartTime(day, schedule)}}
+            .cell-time.flex.justify-center(
+            ) {{choiceEndTime(day, schedule)}}
+      //- q-draggable-rows(v-model="order")
+      //-   q-draggable-row.row.flex.w-full.h-14(v-for="schedule in serialized", :key="schedule.id",
+      //-     :id="id"
+      //-     v-model="rows[id].depth"
+      //-     :collapsed.sync="rows[id].collapsed"
+      //-   )
 </template>

 <script>
@@ -56,6 +80,7 @@ export default {
    result: Array,
    scheduleList: Array,
    employees: Array,
+    selected: Array,
    showTime: Boolean,
    trimOwnerName: Function,
    choiceCell: Function,
@@ -96,27 +121,26 @@ export default {
    choiceColor(day, employee) {
      let currentDay = day.format("YYYY-MM-DD");
      let res = employee.schedules.find((e) => e.date === currentDay)?.status;
-      if (res !== "WORKS" && this.showTime) {
-        return "var(--default-white)";
-      }
      return this.statuses.find((e) => e.work === res)?.color;
    },
    choiceWorks(day, employee) {
-      if (this.showTime) {
-        return this.choiceTime(employee, day);
-      }
+      if (this.showTime) return;
      let currentDay = day.format("YYYY-MM-DD");
      return employee.schedules.find((e) => e.date === currentDay)?.status;
    },
-    choiceTime(schedule, day) {
+    choiceStartTime(day, schedule) {
      let currentDay = day.format("YYYY-MM-DD");
      let start = schedule.schedules.find(
-        (e) => e.date === currentDay && e.status === "WORKS"
+        (e) => e.date === currentDay && (e.status === "I" || e.status === "II")
      )?.start_time;
+      return start;
+    },
+    choiceEndTime(day, schedule) {
+      let currentDay = day.format("YYYY-MM-DD");
      let end = schedule.schedules.find(
-        (e) => e.date === currentDay && e.status === "WORKS"
+        (e) => e.date === currentDay && (e.status === "I" || e.status === "II")
      )?.end_time;
-      if (start && end) return `${start} ${end}`;
+      return end;
    },
  },
 };
@@ -128,9 +152,11 @@ export default {
  &:last-child
    border-bottom: none

+.q-checkbox :deep(.q-checkbox__bg)
+  border-radius: 4px
+  border: 1px solid var(--font-grey-color)
+
 .name-employee
-  min-width: 357px
-  max-width: 357px
  color: var(--font-dark-blue-color)

 .cell
@@ -153,6 +179,9 @@ export default {
  text-align: center
  font-size: 12px

+.cell-time
+  width: 74px
+
 .set-date
  background-color: var(--btn-blue-color-4) !important

--- a/src/pages/schedule/components/ScheduleTableHeader.vue
+++ b/src/pages/schedule/components/ScheduleTableHeader.vue
@@ -1,6 +1,7 @@
 <template lang="pug">
  .table-header.flex.w-full.pr-2.pl-6
-    .flex.items-center.pr-9.justify-between(
+    q-checkbox(v-model="selectedAll", @click="select", size="32px")
+    .flex.items-center.pr-9.justify-between.px-4(
      :style="{minWidth: '357px', maxWidth: '357px'}"
    )
      .text.font-semibold.text-sm Сотрудники
@@ -9,7 +10,7 @@
        size="12px",
        style="color: var(--font-dark-blue-color)"
      )
-    .flex
+    .flex.pl-4
      .flex.items-center.justify-center.w-11(
        v-for="day in result",
        :class="{'column-color': changeColumnColor(day)}",
@@ -26,7 +27,11 @@
 <script>
 export default {
  name: "ScheduleTableHeader",
-  props: { result: Array },
+  props: {
+    result: Array,
+    selectedAll: Boolean,
+    select: Function,
+  },
  methods: {
    changeColumnColor(day) {
      return day.format("ddd") === "сб" || day.format("ddd") === "вс"
@@ -47,6 +52,10 @@ export default {
 </script>

 <style lang="sass" scoped>
+.q-checkbox :deep(.q-checkbox__bg)
+  border-radius: 4px
+  border: 1px solid var(--font-grey-color)
+
 .text
  color: var(--font-grey-color)