[WIP] Разбил расписание на компоненты, исправил логику работы

2023-01-11 17:41:29 +03:00
parent 66cb26be6d
commit 5b44d7020f
4 changed files with 320 additions and 195 deletions
--- a/src/pages/schedule/components/ScheduleTableSelect.vue
+++ b/src/pages/schedule/components/ScheduleTableSelect.vue
@@ -0,0 +1,110 @@
+<template lang="pug">
+  .flex.w-full.mt-4(
+    :class="{'schedule-select': selectEmployee.label}"
+  )
+    .edit.flex.items-center.justify-center.h-11.w-11(v-if="selectEmployee.label")
+      .flex.icon-edit(v-if="selectEmployee.label")
+        //- base-button(
+        //-   confirm,
+        //-   rounded,
+        //-   outlined,
+        //-   :size="20",
+        //-   @click="saveEmployee",
+        //-   v-if="selectEmployee.label"
+        //- )
+          //- .icon-ok.text-xsm(class="pt-[3px]")
+    .flex.justify-center.items-center.cursor-pointer(
+      :class="{'select-name': selectEmployee.label}",
+      :style="{color: 'var(--btn-blue-color)'}"
+    )
+      base-custom-select(
+        v-if="!selectEmployee.label",
+        :items="ownersList",
+        v-model="selectEmployee",
+        placeholder="Добавить сотрудника",
+        :style="{border: 'none', justifyContent: 'center'}"
+      )
+      .flex.justify-center(v-else) {{selectEmployee.label}}
+    .row.flex
+      .cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
+        v-if="selectEmployee.label",
+        v-for="day in result",
+        :key="day",
+        :id="selectEmployee.id + day",
+        @click="choiceCell(day, selectEmployee.id)",
+        :class="choiceState(day, selectEmployee.id)",
+        :style="{width: `calc(100% / ${result.length})`}"
+      )
+</template>
+
+<script>
+import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
+
+export default {
+  name: "ScheduleTableSelect",
+  components: { BaseCustomSelect },
+  props: {
+    selectEmployee: Object,
+    result: Array,
+    choiceCell: Function,
+    choiceState: Function,
+    clearEmployee: Array,
+    trimOwnerName: Function,
+  },
+  computed: {
+    ownersList() {
+      if (this.clearEmployee) {
+        let filteredArray = [];
+        this.clearEmployee.forEach((elem) => {
+          filteredArray.push({
+            id: elem.id,
+            label: this.trimOwnerName(
+              elem.last_name,
+              elem.first_name,
+              elem.patronymic
+            ),
+          });
+        });
+        return filteredArray;
+      }
+      return [];
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.edit
+  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)
+
+.schedule-select
+  border-right: 8px solid var(--bg-ligth-blue-color)
+  border-top: 1.5px solid var(--border-light-grey-color-1)
+
+.select-name
+  width: 25%
+  border-right: 1.5px solid var(--border-light-grey-color-1)
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
+
+.row
+  width: calc(75% - 44px)
+
+.cell
+  border-right: 1.5px solid var(--border-light-grey-color-1)
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
+  &:hover
+    background-color: var(--border-light-grey-color-1)
+  &:last-child
+    border-right: none
+
+.set-date
+  background-color: var(--btn-blue-color-4) !important
+
+.status
+  background-color: var(--bg-color-status) !important
+
+.status::after
+  content: var(--text-status)
+</style>