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

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