[WIP] Добавил отображение текста при выборе даты и выбор employee

2022-12-26 13:31:03 +03:00
parent f8e82c64b4
commit 1dd0c79360
3 changed files with 95 additions and 45 deletions
--- a/src/pages/schedule/components/ScheduleBar.vue
+++ b/src/pages/schedule/components/ScheduleBar.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
  .wrapper-bar.flex.flex-col.gap-y-4
-    .flex.px-5.py-5.w-full.justify-around
+    .flex.px-5.py-5.w-full.justify-around.gap-x-4
      .time-wrapper.flex.justify-between
        .flex.flex-col.items-center.py-14px.px-4.gap-y-14px
          .text.text-smm Начало
@@ -14,7 +14,7 @@
        .flex.justify-around(class="py-2.5")
          base-button.font-semibold(
            v-for="item in buttons",
-            :class="item.class" ,
+            :class="item.class",
            :key="item",
            :style="{minWidth: '190px', minHeight: '43px', border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
            @click="choiceSchedule(item.class)"
@@ -38,7 +38,7 @@ import BaseInputDate from "@/components/base/BaseInputDate.vue";
 export default {
  name: "ScheduleBar",
  components: { BaseButton, BaseCustomSelect, BaseInputTime, BaseInputDate },
-  props: { dataSchedule: Object, selectWork: Function, buttons: Array },
+  props: { dataSchedule: Object, buttons: Array },
  data() {
    return {
      scheduleList: [
@@ -90,7 +90,7 @@ export default {
  color: var(--font-grey-color)

 .status-wrapper
-  width: 690px
+  min-width: 690px
  height: 102px
  border: 1.5px solid var(--border-light-grey-color-1)
  border-radius: 4px
--- a/src/pages/schedule/components/ScheduleBody.vue
+++ b/src/pages/schedule/components/ScheduleBody.vue
@@ -16,11 +16,11 @@
            :style="{opacity: changeOpacity(day)}"
            ) {{day.format("ddd")}}
    .schedule-body.flex.w-full(v-for="schedule in serialized", :key="schedule.id")
-      .edit.flex.items-center.justify-center.h-9.w-9
+      .edit.flex.items-center.justify-center.h-11.w-11
        .flex.icon-edit
      .name-employee.flex.justify-center.items-center.cursor-pointer(@click="openSelect(schedule)")
        span {{trimOwnerName(schedule.last_name, schedule.first_name, schedule.patronymic)}}
-      .cell.flex.flex-col.items-center.justify-center.w-11.cursor-pointer(
+      .cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
        v-for="day in result",
        :key="day",
        :id="schedule.id + day",
@@ -29,30 +29,40 @@
        :style="{backgroundColor: day.format('YYYY-MM-DD') === choiceDay(day, schedule.id) ? choiceColor(day) : ''}"
      )
        .flex {{day.format("YYYY-MM-DD") === choiceDay(day, schedule.id) ? choiceWorks(day) : ''}}
-    //- .schedule-body.flex.w-full
-    //-   .edit.flex.items-center.justify-center.h-9.w-9
-    //-     .flex.items-center.gap-x-8
-    //-       base-button(
-    //-         confirm,
-    //-         rounded,
-    //-         outlined,
-    //-         :size="20",
-    //-         @click="saveEmployee",
-    //-         v-if="currentEmployee.label"
-    //-       )
-    //-         .icon-ok.text-xsm(class="pt-[3px]")
-    //-   .name.flex.justify-center.items-center.cursor-pointer(
-    //-     v-if="currentEmployee.label",
-    //-     @click="openSelect"
-    //-   )
-    //-     span {{currentEmployee.label}}
-    //-   .name.flex(v-if="!currentEmployee.label")
-    //-     base-custom-select(
-    //-       :items="ownersList",
-    //-       v-model="currentEmployee",
-    //-       placeholder="Добавить сотрудника",
-    //-       :style="{border: 'none'}"
+    .schedule-body.flex.w-full(v-if="clearEmployee")
+      .edit.flex.items-center.justify-center.h-11.w-11(:style="{borderBottom: 'none'}")
+        .flex.icon-edit(v-if="currentEmployee.label")
+          //- base-button(
+          //-   confirm,
+          //-   rounded,
+          //-   outlined,
+          //-   :size="20",
+          //-   @click="saveEmployee",
+          //-   v-if="currentEmployee.label"
+          //- )
+            //- .icon-ok.text-xsm(class="pt-[3px]")
+      .name.flex.justify-center.items-center.cursor-pointer(
+        v-if="currentEmployee.label",
+        @click="openSelect"
+      )
+        span {{currentEmployee.label}}
+      .name.flex(v-if="!currentEmployee.label")
+        base-custom-select(
+          :items="ownersList",
+          v-model="currentEmployee",
+          placeholder="Добавить сотрудника",
+          :style="{border: 'none'}"
        )
+      .cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
+        v-if="currentEmployee.label",
+        v-for="day in result",
+        :key="day",
+        :id="currentEmployee.id + day",
+        @click="choiceCell(day, currentEmployee.id)",
+        :class="selectTime(day, currentEmployee.id)",
+        :style="{backgroundColor: day.format('YYYY-MM-DD') === choiceDay(day, currentEmployee.id) ? choiceColor(day) : '', borderBottom: 'none'}"
+      )
+        .flex {{day.format("YYYY-MM-DD") === choiceDay(day, currentEmployee.id) ? choiceWorks(day) : ''}}
 </template>

 <script>
@@ -76,6 +86,7 @@ export default {
    dataSchedule: Object,
    buttons: Array,
    startMonth: Object,
+    clearEmployee: Array,
  },
  data() {
    return {
@@ -99,9 +110,9 @@ export default {
  },
  computed: {
    ownersList() {
-      if (this.employeeList) {
+      if (this.clearEmployee) {
        let filteredArray = [];
-        this.employeeList.forEach((elem) => {
+        this.clearEmployee.forEach((elem) => {
          filteredArray.push({
            id: elem.id,
            label: this.trimOwnerName(
@@ -119,6 +130,7 @@ export default {
      this.setActiveButton();
      return {
        "--bg-color-status": this.activeButton?.color,
+        "--text-status": this.activeButton?.text,
      };
    },
  },
@@ -142,6 +154,7 @@ export default {
        this.dateInterval.id = id;
      } else if (time.isAfter(this.dateInterval.start)) {
        this.dateInterval.end = formatTime;
+        this.$emit("new-date", this.dateInterval);
      } else this.dateInterval.start = formatTime;
    },
    selectTime(day, id) {
@@ -175,7 +188,7 @@ export default {
    choiceWorks(day) {
      let currentDay = day.format("YYYY-MM-DD");
      let a = this.scheduleList.find((e) => e.date === currentDay).status;
-      return this.buttons.find((e) => e.work === a).text;
+      return this.buttons.find((e) => e.work === a).text[1];
    },
    choiceColor(day) {
      let currentDay = day.format("YYYY-MM-DD");
@@ -203,11 +216,12 @@ export default {
    //   }
    // },
    choiceDay(day, employee) {
-      let currentDay = day.format("YYYY-MM-DD");
+      let current = day.format("YYYY-MM-DD");
      return this.scheduleList.find(
-        (e) => currentDay === e.date && e.employee.id === employee
+        (e) => current === e.date && e.employee.id === employee
      )?.date;
    },
+
    changeOpacity(day) {
      return day.format("ddd") === "сб" || day.format("ddd") === "вс"
        ? "0.6"
@@ -233,6 +247,7 @@ export default {
  border: 1.5px solid var(--border-light-grey-color-1)
  border-radius: 4px
  min-height: 87px
+  width: fit-content

 .schedule-body
  &:hover
@@ -256,14 +271,14 @@ export default {
  border-bottom: 1.5px solid var(--border-light-grey-color-1)

 .name
-  min-width: 255px
-  max-width: 255px
+  min-width: 247px
+  max-width: 247px
  border-right: 1.5px solid var(--border-light-grey-color-1)
  color: var(--btn-blue-color)

 .name-employee
-  min-width: 255px
-  max-width: 255px
+  min-width: 247px
+  max-width: 247px
  border-right: 1.5px solid var(--border-light-grey-color-1)
  border-bottom: 1.5px solid var(--border-light-grey-color-1)
  color: var(--btn-blue-color)
@@ -281,6 +296,9 @@ export default {
 .status
  background-color: var(--bg-color-status)

+.status::before
+  content: var(--text-status)
+
 .from-date
  background: limegreen