Merge branch 'ASTRA-101' into 'master'

[WIP] Добавил отображение сайдбра в открытом состоянии

See merge request andrusyakka/urban-couscous!390

src/pages/newCalendar/components/CalendarOpenSidebar.vue

@@ -18,33 +18,116 @@
         :style="{width: '100%', height: '40px'}",
         padding="0"
       )
-    .flex.flex-col.gap-y-1
+    .flex.flex-col.gap-y-1(v-for="elem in list")
       q-expansion-item.expansion.font-bold.text-xm(
         expand-separator
-        label="Статус приема"
-      )
-        .flex.flex-col.font-medium.text-smm.p-4.pt-2
-          .flex Не принят
-          .flex Принят
-          .flex Отказ
-          .flex На приеме
-      q-expansion-item.expansion.font-bold.text-xm(
-        expand-separator
-        label="Первичная медкарта"
-      )
-      q-expansion-item.expansion.font-bold.text-xm(
-        expand-separator
-        label="Пациенты"
+        :label="elem.label"
       )
+        .flex.flex-col.font-medium.text-smm.px-4.pt-2(
+          v-if="elem.label !== 'Пациенты'",
+          v-for="item in elem.data"
+        )
+          .status.flex.items-center.gap-x-1.px-2
+            img(:src="item.icon")
+            span {{item.name}}
+        .flex.flex-col.p-4(v-else)
+          .flex.h-8.w-full.items-center.justify-between
+            base-input(
+              id="input",
+              placeholder="Найти пациента...",
+              outlined,
+              :width="160",
+              iconLeft,
+              fontSize="12px",
+              lineHeight="16px",
+              textColor="var(--font-grey-color)"
+            )
+              q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
+            q-btn.sort.ml-2(
+              icon="app:sort-number",
+              :style="{width: '32px', height: '32px'}",
+              padding="0"
+            )
+          .flex.items-center.justify-between.font-medium.text-smm
+            span Все
+            img(:src="icon_ok")
 </template>
 
 <script>
 import arrow from "@/assets/icons/double_left_arrow.svg";
+import accepted from "@/assets/icons/status_accepted.svg";
+import not_accepted from "@/assets/icons/status_not_accepted.svg";
+import rejected from "@/assets/icons/status_rejected.svg";
+import reception from "@/assets/icons/status_reception.svg";
+import filled from "@/assets/icons/medcard_filled.svg";
+import partially_filled from "@/assets/icons/medcard_partially_filled.svg";
+import not_filled from "@/assets/icons/medcard_not_filled.svg";
+import icon_ok from "@/assets/icons/icon_ok.svg";
+import BaseInput from "@/components/base/BaseInput.vue";
+
 export default {
   name: "CalendarOpenSidebar",
   props: { openSidebar: Function },
+  components: { BaseInput },
   data() {
-    return { arrow };
+    return {
+      arrow,
+      icon_ok,
+      list: [
+        {
+          label: "Статус приема",
+          data: [
+            { name: "Не принят", icon: not_accepted },
+            { name: "Принят", icon: accepted },
+            { name: "Отказ", icon: rejected },
+            { name: "На приеме", icon: reception },
+          ],
+        },
+        {
+          label: "Первичная медкарта",
+          data: [
+            { name: "Не заполнена", icon: not_filled },
+            { name: "Частично заполнена", icon: partially_filled },
+            { name: "Заполнена", icon: filled },
+          ],
+        },
+        {
+          label: "Пациенты",
+          data: [
+            {
+              first_name: "Александр",
+              last_name: "Герасимов",
+              patronymic: "Александрович",
+              birthday: "28.03.1980",
+            },
+            {
+              first_name: "Петр",
+              last_name: "Сложный",
+              patronymic: "Олегович",
+              birthday: "01.03.1975",
+            },
+            {
+              first_name: "Олег",
+              last_name: "Пложкин",
+              patronymic: "Васильевич",
+              birthday: "13.07.1999",
+            },
+            {
+              first_name: "Самвел",
+              last_name: "Акопян",
+              patronymic: "Робертович",
+              birthday: "11.11.1991",
+            },
+            {
+              first_name: "Евгений",
+              last_name: "Вольный",
+              patronymic: "Алексеевич",
+              birthday: "12.03.1989",
+            },
+          ],
+        },
+      ],
+    };
   },
 };
 </script>
@@ -62,4 +145,35 @@ export default {
   background: var(--default-white)
   border-radius: 4px
   color: var(--font-dark-blue-color)
+
+.status
+  border-radius: 4px
+  height: 28px
+  &:hover
+    background: var(--bg-light-grey)
+    cursor: pointer
+
+.q-expansion-item
+  border-radius: 0
+
+.q-expansion-item :deep(.q-separator)
+  display: none
+
+.q-expansion-item :deep(.q-expansion-item__content)
+  padding-bottom: 16px
+
+.sort
+  background-color: var(--bg-light-grey)
+  color: var(--font-grey-color)
+
+#input :deep(.q-field__control)
+  height: 32px
+  .q-field__prepend
+    height: 32px
+
+.q-expansion-item :deep(.q-item__section--main ~ .q-item__section--side)
+  padding-left: 0px
+
+.q-expansion-item :deep(.q-item__label)
+  line-height: 135% !important
 </style>