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

2023-04-18 17:30:16 +03:00
parent 3db47ddc67
commit 595a7a2160
4 changed files with 137 additions and 28 deletions
--- a/src/components/base/BaseCategorySelection.vue
+++ b/src/components/base/BaseCategorySelection.vue
@@ -0,0 +1,111 @@
+<template lang="pug">
+  .selection-wrapper.flex
+    .left-side.flex.flex-col.gap-y-4
+      .flex.font-bold.text-xl Категории
+      base-input(placeholder="Поиск", outlined, :width="300")
+        .flex.items-center.cursor-pointer
+          q-icon(
+            name="app:icon-search",
+            size="18px",
+            style="color: var(--font-dark-blue-color)"
+          )
+      .flex.flex-col(:style="{height: '457px'}")
+        .flex.items-center.h-10.gap-x-1(v-for="benefit in benefitData", :key="benefit.id")
+          q-checkbox(
+            v-model="selected"
+            :val="benefit",
+            :style="{border: 'none', sidth: '36px'}",
+            size="32px"
+          )
+          .name.flex.h-10.items-center {{benefit.name}}
+      .buttons-group.flex.py-4.px-8.justify-center
+        base-button.text-base.font-semibold(outlined :size="40" @click="closeModalCategories") Отменить
+        base-button.text-base.font-semibold(:size="40") Сохранить
+    .right-side.flex.px-14.font-bold.relative
+      q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
+      .flex.py-10.gap-y-6.flex-col(v-if="selected.length > 0 && selected[0]?.name !== 'Без льготы'")
+        .flex.text-6xl {{selected[0]?.name}}
+        .flex.text-xm.flex-col.gap-y-3 Критерии:
+          .flex.flex-col.gap-y-2
+            .flex.font-medium.text-smm(v-for="item in choiceCriteria", :key="item.id")
+              span {{"- " + item}}
+        .flex.text-xm.flex-col.gap-y-3 Документы для подтверждения: 
+          .flex.flex-col.gap-y-2
+            .flex.font-medium.text-smm(v-for="item in choiceDocumentation", :key="item.id")
+              span {{"- " + item}}
+        .flex.text-xm.flex-col.gap-y-3 Льготы:
+          .flex.flex-col.gap-y-2
+            .flex.font-medium.text-smm(v-for="item in choicePrivileges", :key="item.id")
+              span {{"- " + item}}
+      .flex.items-center.h-full.w-full.justify-center.font-medium.text-6xl(
+        v-else,
+        :style="{color: 'var(--font-grey-color)'}"
+       ) Выберите категорию
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+export default {
+  name: "BaseCategorySelection",
+  components: { BaseInput, BaseButton },
+  props: {
+    benefitData: Array,
+    shiftSelected: Function,
+    closeModalCategories: Function,
+  },
+  data() {
+    return {
+      selected: [],
+    };
+  },
+  computed: {
+    choiceCriteria() {
+      return this.selected[0]?.criteria.split(",");
+    },
+    choiceDocumentation() {
+      return this.selected[0]?.documentation.split(",");
+    },
+    choicePrivileges() {
+      return this.selected[0]?.privileges.split(",");
+    },
+  },
+  watch: {
+    selected: {
+      immediate: true,
+      deep: true,
+      handler() {
+        if (this.selected.length >= 2) this.selected.shift();
+      },
+    },
+  },
+};
+</script>
+<style lang="sass" scoped>
+.selection-wrapper
+  width: 895px
+  height: 660px
+
+.left-side
+  width: 364px
+  padding: 32px 28px 0px
+
+.name
+  border-bottom: 1px solid var(--bg-light-grey)
+  width: 268px
+
+.q-checkbox :deep(.q-checkbox__bg)
+  border-radius: 50%
+  border: 1.5px solid var(--font-grey-color)
+
+.buttons-group
+  border-top: 1px solid #D3D4D0
+  margin-left: -28px
+  margin-right: -28px
+  column-gap: 7px
+
+.right-side
+  background: var(--bg-light-grey)
+  width: 531px
+  height: 100%
+</style>