From 669c6b8e53199039b6ed090d00088d653e29eb3e Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 3 May 2023 17:08:20 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB?=
 =?UTF-8?q?=D0=B0=20=D1=81=D0=BE=D1=80=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=BA?=
 =?UTF-8?q?=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseSelect.vue            | 12 +--
 .../components/MedicalProtocolCard.vue        | 11 ++-
 .../components/MedicalProtocolsList.vue       | 81 +++++++++++++++----
 3 files changed, 82 insertions(+), 22 deletions(-)

diff --git a/src/components/base/BaseSelect.vue b/src/components/base/BaseSelect.vue
index 9b78e71..6b06f4d 100644
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -14,7 +14,8 @@
         dense,
         :behavior="behavior",
         emit-value,
-        map-options
+        map-options,
+        :clearable="clearable"
       )
         template(v-slot:selected)
           span(v-if="!value?.icon") {{ textSelect }}
@@ -76,13 +77,9 @@ export default {
     label: String,
     readonly: Boolean,
     width: String,
+    clearable: Boolean,
   },
   emits: ["update:modelValue"],
-  data() {
-    return {
-      open: false,
-    };
-  },
   computed: {
     value: {
       get() {
@@ -93,6 +90,7 @@ export default {
       },
     },
     textSelect() {
+      if (typeof this.modelValue === "string") return this.value;
       return this.value?.label ? this.value.label : this.placeholder;
     },
     iconSelect() {
@@ -102,6 +100,8 @@ export default {
 };
 </script>
 <style lang="sass">
+.q-menu
+  font-feature-settings: 'pnum' on, 'lnum' on !important
 .q-btn--outline:before, .q-field--outlined .q-field__control:before
   border-width: 1px !important
 .q-field__marginal
diff --git a/src/pages/newMedicalCard/components/MedicalProtocolCard.vue b/src/pages/newMedicalCard/components/MedicalProtocolCard.vue
index 5c3f266..37f463c 100644
--- a/src/pages/newMedicalCard/components/MedicalProtocolCard.vue
+++ b/src/pages/newMedicalCard/components/MedicalProtocolCard.vue
@@ -6,7 +6,7 @@
         .text-smm.color-grey.flex.items-center.gap-x-6px.line-height
           span.align-middle {{ protocolDate?.dayMonth }}
           .rounded-full.h-1.w-1.background-grey
-          span.align-middle {{ `${protocolData?.start_time} - ${protocolData?.end_time}` }}
+          span.align-middle {{ `${time?.start} - ${time?.end}` }}
       .flex.items-center.justify-center.h-6.w-6.rounded(
         :style="statusСolors"
       )
@@ -66,7 +66,8 @@ export default {
       }
     },
     protocolDate() {
-      let date = moment(this.protocolData?.date)
+      let date = moment
+        .parseZone(this.protocolData?.start)
         .format("DD.MM.YYYY")
         .split(".");
       return {
@@ -74,6 +75,12 @@ export default {
         dayMonth: date[0] + "." + date[1],
       };
     },
+    time() {
+      return {
+        start: moment.parseZone(this.protocolData?.start).format("HH:mm"),
+        end: moment.parseZone(this.protocolData?.end).format("HH:mm"),
+      };
+    },
   },
 };
 </script>
diff --git a/src/pages/newMedicalCard/components/MedicalProtocolsList.vue b/src/pages/newMedicalCard/components/MedicalProtocolsList.vue
index eef441b..8816037 100644
--- a/src/pages/newMedicalCard/components/MedicalProtocolsList.vue
+++ b/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() {