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

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);
     },

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
+      .name-employee.flex.items-center.gap-x-3
-        base-avatar.font-medium.text-sm(
+        .flex.w-9
-          :size="36",
+          q-checkbox(
-          :color="schedule.color",
+            v-model="selected",
-          v-if="!schedule.photo"
+            :val="schedule.id",
-        ) {{trimInitials(schedule.last_name, schedule.first_name)}}
+            :style="{border: 'none', sidth: '36px'}",
-        base-avatar(:size="36", v-else-if="schedule.photo")
+            size="32px"
-          img.h-full.object-cover(:src="url + schedule.photo")
+          )
-        .font-semibold.text-sm(
+        .flex.items-center(:style="{minWidth: '357px', maxWidth: '357px'}")
-          :style="{minWidth: '228px', maxWidth: '228px'}"
+          base-avatar.font-medium.text-sm(
-        ) {{schedule.last_name + " " + schedule.first_name + " " + schedule.patronymic}}
+            :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) {
+      if (this.showTime) return;
-        return this.choiceTime(employee, day);
-      }
       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
 

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)