From a5acc67c10a29131c9784c0399dd029d8a248040 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 28 Apr 2023 13:56:51 +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=B5=D0=BB=D0=B5=D0=BA=D1=82=20=D0=B8=20=D0=BA?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=BF=D0=BA=D1=83=20=D1=81=D0=BE=D1=80=D1=82=D0=B8?=
 =?UTF-8?q?=D1=80=D0=BE=D0=B2=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseSelect.vue            |  3 +-
 .../components/MedicalProtocolsList.vue       | 39 ++++++++++++++++++-
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/components/base/BaseSelect.vue b/src/components/base/BaseSelect.vue
index abd7492..b498f6a 100644
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   .flex.flex-col.gap-y-2
-    base-input-container(:label="label")
+    base-input-container(:label="label", :style="{width: width}")
       q-select(
         v-model="value",
         :options="items",
@@ -74,6 +74,7 @@ export default {
     disable: Boolean,
     label: String,
     readonly: Boolean,
+    width: String,
   },
   emits: ["update:modelValue"],
   data() {
diff --git a/src/pages/newMedicalCard/components/MedicalProtocolsList.vue b/src/pages/newMedicalCard/components/MedicalProtocolsList.vue
index 004b2cf..5c07cc4 100644
--- a/src/pages/newMedicalCard/components/MedicalProtocolsList.vue
+++ b/src/pages/newMedicalCard/components/MedicalProtocolsList.vue
@@ -9,8 +9,16 @@
         icon="add",
         :style="{width: '100%'}"
       )
-    .p-4.rounded.background.h-full
-      base-select
+    .p-4.rounded.background.h-full.w-full
+      .flex.w-full
+        base-select(:style="{flex: 1}")
+        q-btn.ml-2(
+          icon="sort"
+          :style="{width: '40px', height: '40px'}",
+          padding="0"
+          :class="sortingClass"
+          @click="invertSorting"
+        )
 </template>
 
 <script>
@@ -18,6 +26,27 @@ import BaseSelect from "@/components/base/BaseSelect.vue";
 export default {
   name: "MedicalProtocolsList",
   components: { BaseSelect },
+  data() {
+    return {
+      sorting: false,
+    };
+  },
+  computed: {
+    sortingClass() {
+      return this.sorting
+        ? {
+            "sort-icon-active": true,
+          }
+        : {
+            "sort-icon-default": true,
+          };
+    },
+  },
+  methods: {
+    invertSorting() {
+      this.sorting = !this.sorting;
+    },
+  },
 };
 </script>
 
@@ -26,4 +55,10 @@ export default {
   width: 19.6%
 .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)
 </style>