WIP Сделала сортировку

src/pages/newMedicalCard/components/MedicalProtocolsList.vue

@@ -14,6 +14,9 @@
       .flex
         base-select(
           :style="{flex: 1}",
+          :items="sortingYears",
+          v-model="sortingYear",
+          clearable
         )
         q-btn.ml-2(
           icon="app:sort-number",
@@ -23,10 +26,10 @@
           @click="invertSorting"
         )
       .flex.py-4.w-full.color-grey.text-base.justify-center
-        span.opacity-50 Осмотров: 5
+        span.opacity-50 {{ `Осмотров: ${protocolsData?.length}` }}
       .flex.flex-col.gap-y-2
         medical-protocol-card(
-          v-for="protocol in protocolsData", :key="protocol.id",
+          v-for="protocol in sortingProtocols", :key="protocol.id",
           :protocol-data="protocol",
           @click="openInspection"
         )
@@ -43,6 +46,7 @@ export default {
   data() {
     return {
       sorting: false,
+      sortingYear: "",
       activeProtocolId: 1,
       protocolsData: [
         {
@@ -54,9 +58,8 @@ export default {
             job_title: "Хирург",
             photo: "",
           },
-          date: "2023-04-20",
-          start_time: "18:30",
-          end_time: "19:00",
+          start: "2023-03-23T13:00:00+03:00",
+          end: "2023-03-23T13:40:00+03:00",
           status: "filled",
         },
         {
@@ -68,9 +71,8 @@ export default {
             job_title: "Терапевт",
             photo: "",
           },
-          date: "2077-03-20",
-          start_time: "15:30",
-          end_time: "16:00",
+          start: "2023-04-11T18:00:00+03:00",
+          end: "2023-04-11T18:30:00+03:00",
           status: "partially filled",
         },
         {
@@ -82,9 +84,8 @@ export default {
             job_title: "Хирург",
             photo: "",
           },
-          date: "2023-02-15",
-          start_time: "18:30",
-          end_time: "19:00",
+          start: "2021-08-23T10:00:00+03:00",
+          end: "2021-08-23T13:00:00+03:00",
           status: "filled",
         },
         {
@@ -96,11 +97,23 @@ export default {
             job_title: "Ортодонт",
             photo: "",
           },
-          date: "2023-05-21",
-          start_time: "13:30",
-          end_time: "15:00",
+          start: "2023-05-23T14:10:00+03:00",
+          end: "2023-05-23T15:10:00+03:00",
           status: "",
         },
+        {
+          id: 5,
+          employee: {
+            last_name: "Захаров",
+            first_name: "Алексей",
+            patronymic: "Сергеевич",
+            job_title: "Хирург",
+            photo: "",
+          },
+          start: "2022-01-23T13:10:00+03:00",
+          end: "2022-01-23T13:30:00+03:00",
+          status: "filled",
+        },
       ],
     };
   },
@@ -114,6 +127,46 @@ export default {
             "sort-icon-default": true,
           };
     },
+    sortingYears() {
+      let years = this.protocolsData
+        .map((elem) => {
+          return elem?.start.slice(0, 4);
+        })
+        .sort((first, second) => first - second);
+      return [...new Set(years)];
+    },
+    sortingProtocols() {
+      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() {