Merge branch 'ASTRA-70' into 'master'

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

See merge request andrusyakka/urban-couscous!339

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() {

src/pages/newMedicalCard/components/MedicalBaseInfo.vue

@@ -12,6 +12,7 @@ import MedicalSidebar from "@/pages/newMedicalCard/components/MedicalSidebar.vue
 import MedicalBasicDataWrapper from "@/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue";
 import MedicalAllergiesWrapper from "@/pages/newMedicalCard/components/MedicalAllergiesWrapper.vue";
 import MedicalConfidantWrapper from "@/pages/newMedicalCard/components/MedicalConfidantWrapper.vue";
+import MedicalProtocolsWrapper from "@/pages/newMedicalCard/components/MedicalProtocolsWrapper.vue";
 export default {
   name: "MedicalBaseInfo",
   components: {
@@ -19,6 +20,7 @@ export default {
     MedicalBasicDataWrapper,
     MedicalAllergiesWrapper,
     MedicalConfidantWrapper,
+    MedicalProtocolsWrapper,
   },
   data() {
     return {

src/pages/newMedicalCard/components/MedicalProtocolsList.vue

@@ -0,0 +1,64 @@
+<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%'}"
+      )
+    .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>
+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>
+
+<style lang="sass" scoped>
+.list-wrapper
+  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>

src/pages/newMedicalCard/components/MedicalProtocolsWrapper.vue

@@ -0,0 +1,18 @@
+<template lang="pug">
+  .wrapper
+    medical-protocols-list
+</template>
+
+<script>
+import MedicalProtocolsList from "@/pages/newMedicalCard/components/MedicalProtocolsList.vue";
+export default {
+  name: "MedicalProtocolsWrapper",
+  components: { MedicalProtocolsList },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  width: 83.2%
+  overflow-y: auto
+</style>

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -322,7 +322,7 @@ export const baseInfoMenu = [
   {
     title: "Протоколы первичного осмотра",
     id: "protocols",
-    component: "Protocols",
+    component: "MedicalProtocolsWrapper",
   },
   {
     title: "Доверенное лицо",