[WIP] Разделил компоненты календаря

2023-05-25 12:51:06 +03:00
parent 17bf66c00f
commit 34674bd248
19 changed files with 29 additions and 1 deletions
--- a/src/pages/oldCalendar/components/CalendarSidebar.vue
+++ b/src/pages/oldCalendar/components/CalendarSidebar.vue
@@ -0,0 +1,113 @@
+<template lang="pug">
+  .sidebar.flex.flex-col.bg-white(:class="openSidebar")
+    .sidebar-wrapper.h-full.my-13px.flex.flex-col.justify-between(:style="sidebarWidth")
+      .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
+        q-btn(
+          color="primary",
+          round,
+          icon="add",
+          size="13px",
+          @click="openFormCreate",
+          v-if="!isOpen"
+        )
+        q-btn(
+          no-caps
+          label="Создать событие",
+          color="primary",
+          class="text-weight-medium, full-width",
+          icon-right="add",
+          @click="openFormCreate",
+          v-else
+        )
+        calendar-sidebar-event(:is-open="isOpen", :event-statuses="eventStatuses")
+        calendar-sidebar-teammate(:team-data="teamData", :is-open="isOpen", :url="url")
+        //.button-wrapper.flex.justify-center.mb-23px
+          q-btn(
+            round,
+            icon="app:icon-long-arrow",
+            size="13px",
+            color="secondary",
+            text-color="primary"
+            :style="{ transform: `rotate(${turnButton})`}",
+            @click="changeSize",
+          )
+</template>
+
+<script>
+import CalendarSidebarEvent from "./CalendarSidebarEvent.vue";
+import CalendarSidebarTeammate from "./CalendarSidebarTeammate.vue";
+
+export default {
+  name: "CalendarSidebar",
+  components: {
+    CalendarSidebarEvent,
+    CalendarSidebarTeammate,
+  },
+  props: {
+    schedulesData: Array,
+    openFormCreate: Function,
+    eventStatuses: Array,
+    url: String,
+  },
+  data() {
+    return {
+      widthSidebarOpen: "232px",
+      widthSidebarClose: "72px",
+      isOpen: false,
+      turnButton: "180deg",
+    };
+  },
+  computed: {
+    openSidebar() {
+      return {
+        "open-sidebar": this.isOpen,
+      };
+    },
+    sidebarWidth() {
+      if (this.isOpen) {
+        return {
+          width: this.widthSidebarOpen,
+        };
+      }
+      return {
+        width: this.widthSidebarClose,
+      };
+    },
+    teamData() {
+      if (this.schedulesData.length === 0) return [];
+      return this.schedulesData.map((elem) => elem.employee);
+    },
+  },
+  methods: {
+    changeSize() {
+      this.isOpen = !this.isOpen;
+      this.$emit(
+        "width",
+        this.isOpen ? this.widthSidebarOpen : this.widthSidebarClose
+      );
+      this.turnButton = this.isOpen ? "0deg" : "180deg";
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.sidebar
+  border-top-right-radius: 4px
+
+.sidebar-wrapper
+  border-left: 2px solid var(--btn-blue-color-3)
+
+.open-sidebar
+  .sidebar-content
+    display: flex
+    flex-direction: column
+    row-gap: 32px
+    padding: 19px 16px
+    align-items: center
+    width: 232px
+
+  .button-wrapper
+    justify-content: end
+    padding-right: 16px
+</style>