astra-frontend/src/pages/schedule/components/ScheduleTableBody.vue

<template lang="pug">
  .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), {'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) : '-'}}
</template>

<script>
import FormChangeShift from "@/pages/schedule/components/FormChangeShift.vue";
import BaseAvatar from "@/components/base/BaseAvatar";

export default {
  name: "ScheduleTableBody",
  components: { FormChangeShift, BaseAvatar },
  props: {
    serialized: Array,
    result: Array,
    scheduleList: Array,
    employees: Array,
    showTime: Boolean,
    trimOwnerName: Function,
    choiceCell: Function,
    clearSelect: Function,
    choiceState: Function,
    openForm: Function,
    changeShift: Function,
    setActiveCell: Function,
    replacementSheet: Object,
    selectEmployee: Object,
  },
  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(
        (e) => current === e.date && e.employee.id === employee
      )?.date;
    },
    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);
      }
      let currentDay = day.format("YYYY-MM-DD");
      return employee.schedules.find((e) => e.date === currentDay)?.status;
    },
    choiceTime(schedule, day) {
      let currentDay = day.format("YYYY-MM-DD");
      let start = schedule.schedules.find(
        (e) => e.date === currentDay && e.status === "WORKS"
      )?.start_time;
      let end = schedule.schedules.find(
        (e) => e.date === currentDay && e.status === "WORKS"
      )?.end_time;
      if (start && end) return `${start} ${end}`;
    },
  },
};
</script>

<style lang="sass" scoped>
.row
  border-bottom: 1.5px solid var(--border-light-grey-color-1)
  &:last-child
    border-bottom: none

.name-employee
  min-width: 357px
  max-width: 357px
  color: var(--font-dark-blue-color)

.cell
  height: 48px
  min-width: 74px
  max-width: 74px
  border-radius: 4px
  &:hover
    background-color: var(--border-light-grey-color-1)
  &:last-child
    border-right: none

.cell-work
  display: none

.empty-cell
  border: 1px solid #E7ECF0

.show-time
  text-align: center
  font-size: 12px

.set-date
  background-color: var(--btn-blue-color-4) !important

.status
  background-color: var(--bg-color-status) !important

.status::after
  content: var(--text-status)

.set-template
  background-color: var(--bg-event-orange-color) !important

.set-template::after
  content: var(--text-status)
</style>