WIP Перенесла компоненты

src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue

@@ -0,0 +1,160 @@
+<template lang="pug">
+  .list-wrapper.h-full.flex.gap-y-1.flex-col
+    .p-4.rounded.background
+      q-btn(
+        color="primary",
+        size="16px",
+        label="Создать осмотр",
+        no-caps,
+        icon="add",
+        :style="{width: '100%', height: '40px'}"
+        padding="0",
+        @click="changeShownCreateModal(true)"
+      )
+    .p-4.rounded.background.list
+      .flex
+        base-select(
+          :style="{flex: 1}",
+          :items="sortingYears",
+          v-model="sortingYear",
+          clearable
+        )
+        q-btn.ml-2(
+          icon="app:sort-number",
+          :style="{width: '40px', height: '40px'}",
+          padding="0",
+          :class="sortingClass",
+          @click="invertSorting"
+        )
+      .flex.py-4.w-full.color-grey.text-base.justify-center
+        span.opacity-50 {{ `Осмотров: ${sortingProtocols?.length}` }}
+      .flex.flex-col.gap-y-2
+        medical-protocol-card(
+          v-for="protocol in sortingProtocols", :key="protocol.id",
+          :protocol-data="protocol",
+          @click="openInspection"
+        )
+    base-modal(
+      v-model="showModal",
+      title="Создание осмотра"
+    )
+      medical-protocol-create-modal(
+        :change-shown-create-modal="changeShownCreateModal",
+        :create-inspection="createInspection"
+      )
+</template>
+
+<script>
+import BaseSelect from "@/components/base/BaseSelect.vue";
+import BaseAvatar from "@/components/base/BaseAvatar.vue";
+import MedicalProtocolCard from "@/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCard.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import MedicalProtocolCreateModal from "@/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCreateModal.vue";
+import { mapState } from "vuex";
+export default {
+  name: "MedicalProtocolsList",
+  components: {
+    BaseSelect,
+    BaseAvatar,
+    MedicalProtocolCard,
+    BaseModal,
+    MedicalProtocolCreateModal,
+  },
+  props: {
+    openInspection: Function,
+    createInspection: Function,
+  },
+  data() {
+    return {
+      sorting: false,
+      sortingYear: "",
+      activeProtocolId: 1,
+      showModal: false,
+    };
+  },
+  computed: {
+    ...mapState({
+      protocolsData: (state) => state.medical.protocolsData,
+    }),
+    sortingClass() {
+      return this.sorting
+        ? {
+            "sort-icon-active": true,
+          }
+        : {
+            "sort-icon-default": true,
+          };
+    },
+    sortingYears() {
+      if (!this.protocolsData) return [];
+      let years = this.protocolsData
+        .map((elem) => {
+          return elem?.start.slice(0, 4);
+        })
+        .sort((first, second) => second - first);
+      return this.sorting ? [...new Set(years.reverse())] : [...new Set(years)];
+    },
+    sortingProtocols() {
+      if (!this.protocolsData) return [];
+      let protocols = [];
+      this.protocolsData.forEach((elem) =>
+        protocols.push({
+          id: elem.id,
+          employee: {
+            last_name: elem.employee?.last_name,
+            first_name: elem.employee?.first_name,
+            patronymic: elem.employee?.patronymic,
+            job_title: elem.employee?.job_title,
+            photo: elem.employee?.photo,
+          },
+          start: elem.start,
+          end: elem.end,
+          status: elem.status,
+        })
+      );
+      if (this.sortingYear) {
+        protocols = protocols.filter(
+          (elem) => elem.start.slice(0, 4) === this.sortingYear
+        );
+      }
+      let sorted = protocols.sort((first, second) => {
+        let firstDate = first?.start.split("T")[0];
+        let secondDate = second?.start.split("T")[0];
+        if (firstDate > secondDate) return 1;
+        if (firstDate < secondDate) return -1;
+        return 0;
+      });
+      if (this.sorting) return sorted;
+      return sorted.reverse();
+    },
+  },
+  methods: {
+    invertSorting() {
+      this.sorting = !this.sorting;
+    },
+    changeShownCreateModal(value) {
+      this.showModal = value;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.list-wrapper
+  width: 19.6%
+.list
+  height: calc(100% - 76px)
+  overflow-y: auto
+  &::-webkit-scrollbar
+    width: 0
+.background
+  background-color: var(--default-white)
+.sort-icon-default
+  background-color: var(--bg-light-grey)
+  color: var(--font-grey-color)
+.sort-icon-active
+  background-color: var(--btn-blue-color)
+  color: var(--default-white)
+.color-grey
+  color: var(--font-grey-color)
+</style>