Merge branch 'ASTRA-147' into 'master'

[WIP] Отредактировал стили на модальном окне создания льгот, согласно дизайну

See merge request andrusyakka/urban-couscous!470

src/assets/sass/variables.sass

@@ -72,6 +72,7 @@
   --bg-event-grey-color: #87898f
   --bg-event-grey-color-0: #d3d4d7
   --bg-event-grey-color-1: #acadb1
+  --bg-event-gret-color-2: #d3d4d0
   --light-grey-bg-color: #f8f9fa
   --btn-green-color: rgba(60, 217, 75, 1)
   --btn-light-green-color: rgba(60, 217, 75, 0.2)

src/components/base/BaseCategorySelection.vue

@@ -1,36 +1,37 @@
 <template lang="pug">
   .selection-wrapper.flex
-    .left-side.flex.flex-col.gap-y-4
+    .left-side.flex.flex-col
-      .flex.font-bold.text-xl Категории
+      .flex.flex-col.gap-y-4.h-full
-      base-input(
+        .flex.flex-col.gap-y-6
-        placeholder="Поиск",
+          .flex.font-bold.text-xl Категории
-        @keyup.enter="searchCategory",
+          base-input.input(
-        @input="searchCategory",
+            placeholder="Поиск",
-        v-model="searchBenefit",
+            @keyup.enter="searchCategory",
-        debounce="10",
+            @input="searchCategory",
-        outlined,
+            v-model="searchBenefit",
-        :width="300",
+            debounce="10",
-        iconLeft
+            outlined,
-      )
+            :width="300",
-        q-icon(
+            iconLeft
-          name="app:icon-search",
-          size="20px",
-          style="color: var(--font-grey-color)"
-        )
-      .field.flex.flex-col.overflow-y-scroll
-        .flex.items-center(
-          v-for="benefit in benefitData",
-          :key="benefit.id",
-          :style="{alignItems: benefit.name.length > 28 ? 'start' : 'center'}"
-        )
-          q-checkbox(
-            v-model="selected",
-            :val="benefit",
-            :style="{border: 'none', width: '36px'}",
-            size="32px"
           )
-          .name.flex.items-center.font-medium.text-xm {{benefit.name}}
+            q-icon(
-      .buttons-group.flex.py-4.px-8.justify-center
+              name="app:icon-search",
+              size="20px",
+              style="color: var(--font-grey-color)"
+            )
+        .field.flex.flex-col.overflow-y-scroll(:class="{'filed-category': findSelected(selected?.id)}")
+          .flex.items-center(v-for="benefit in benefitData", :key="benefit.id")
+            q-item(tag="label", :style="{alignItems: benefit.name.length > 28 ? 'start' : 'center'}")
+              q-item-section(top)
+                q-radio(
+                  v-model="selected",
+                  :val="benefit",
+                  :style="{border: 'none', width: '36px'}",
+                  size="32px",
+                )
+              q-item-label
+                .name.flex.items-center.font-medium.text-xm {{benefit.name}}
+      .buttons-group.flex.py-4.px-8.justify-center(v-if="!findSelected(selected?.id)")
         base-button(
           type="secondary",
           label="Сбросить",
@@ -38,27 +39,24 @@
           @click="closeModalCategories"
         )
         base-button(
-          v-if="selected[0]?.id",
           label="Сохранить",
           width="146px",
           @click="saveCategories(selected[0])"
         )
-    .right-side.flex.px-14.font-bold.relative
+    .right-side.flex.px-10.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[0]?.id && selected[0]?.name !== 'Без льготы'")
+      .flex.gap-y-6.flex-col.w-full(v-if="selected?.id && selected?.name !== 'Без льготы'")
-        .flex.text-6xl {{selected[0]?.name}}
+        .right-header.flex
-        .flex.text-xm.flex-col.gap-y-3 Критерии:
+          span.text-6xl {{selected?.name}}
+        .flex.text-xm.flex-col.gap-y-3.mt-1 Критерии:
           .flex.flex-col.gap-y-2
-            .flex.font-medium.text-smm(v-for="item in choiceCriteria", :key="item.id")
+            .grey-color.flex.font-medium.text-smm(v-for="item in choiceCriteria", :key="item.id") {{"- " + item}}
-              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")
+            .grey-color.flex.font-medium.text-smm(v-for="item in choiceDocumentation", :key="item.id") {{"- " + item}}
-              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")
+            .grey-color.flex.font-medium.text-smm(v-for="item in choicePrivileges", :key="item.id") {{"- " + item}}
-              span {{"- " + item}}
       .flex.items-center.h-full.w-full.justify-center.font-medium.text-6xl(
         v-else,
         :style="{color: 'var(--font-grey-color)'}"
@@ -68,6 +66,7 @@
 <script>
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
+
 export default {
   name: "BaseCategorySelection",
   components: { BaseInput, BaseButton },
@@ -81,43 +80,37 @@ export default {
   },
   data() {
     return {
-      selected: [],
+      selected: {},
       searchBenefit: "",
     };
   },
   computed: {
     choiceCriteria() {
-      return this.selected[0]?.criteria.split(",");
+      return this.selected?.criteria.split(",");
     },
     choiceDocumentation() {
-      return this.selected[0]?.documentation.split(",");
+      return this.selected?.documentation.split(",");
     },
     choicePrivileges() {
-      return this.selected[0]?.privileges.split(",");
+      return this.selected?.privileges.split(",");
     },
   },
   methods: {
+    findSelected(id) {
+      return this.basic?.id === id ? true : false;
+    },
     searchCategory() {
       this.$emit("search", this.searchBenefit);
     },
   },
   watch: {
-    selected: {
-      immediate: true,
-      deep: true,
-      handler() {
-        if (this.selected.length >= 2) this.selected.shift();
-      },
-    },
     showModal: {
       immediate: true,
       handler(newVal) {
         if (!newVal) {
           this.searchBenefit = "";
         } else {
-          this.selected.push(
+          this.selected = this.benefitData.find((e) => e.name === "Без льготы");
-            this.benefitData.find((e) => e.name === "Без льготы")
-          );
         }
       },
     },
@@ -126,13 +119,9 @@ export default {
       deep: true,
       handler() {
         if (this.benefitData && this.showModal && !this.basic.id) {
-          this.selected.push(
+          this.selected = this.benefitData.find((e) => e.name === "Без льготы");
-            this.benefitData.find((e) => e.name === "Без льготы")
-          );
         } else if (this.basic.id) {
-          this.selected.push(
+          this.selected = this.benefitData.find((e) => e.id === this.basic.id);
-            this.benefitData.find((e) => e.id === this.basic.id)
-          );
         }
       },
     },
@@ -145,36 +134,80 @@ export default {
   width: 895px
   height: 660px
   font-feature-settings: 'pnum' on, 'lnum' on
+  color: var(--font-dark-blue-color)
 
 .left-side
   width: 364px
-  padding: 32px 28px 0px
+  padding: 28px 32px 0px
 
 .field
-  height: 457px
+  height: 456px
-  margin-right: -12px
+  margin-right: -16px
   &::-webkit-scrollbar
     width: 4px
+  &::-webkit-scrollbar-track:vertical
+    margin-bottom: 24px
+
+.filed-category
+  height: 100%
+  &::-webkit-scrollbar-track:vertical
+    margin-bottom: 16px
 
 .name
   min-height: 40px
-  padding-top: 4px
+  padding-top: 8px
   padding-bottom: 4px
   border-bottom: 1px solid var(--bg-light-grey)
-  width: 268px
+  width: 264px
 
 .q-checkbox :deep(.q-checkbox__bg)
   border-radius: 50%
   border: 1.5px solid var(--font-grey-color)
 
 .buttons-group
-  border-top: 1px solid #D3D4D0
+  border-top: 1px solid var(--bg-event-gret-color-2)
-  margin-left: -28px
+  margin-left: -32px
-  margin-right: -28px
+  margin-right: -32px
   column-gap: 7px
 
 .right-side
-  background: var(--bg-light-grey)
+  line-height: 135%
+  background: var(--default-white)
+  border-left: 1px solid var(--border-light-grey-color)
   width: 531px
   height: 100%
+
+.right-header
+  padding: 27px 40px
+  margin-left: -40px
+  margin-right: -40px
+  border-bottom: 1px solid var(--border-light-grey-color)
+
+.grey-color
+  color: var(--font-grey-color)
+
+.q-item
+  padding: 0
+  min-height: 40px
+
+.q-item__section
+  width: 36px
+  min-width: 36px
+
+.q-item :deep(.q-focus-helper)
+  width: 0
+  height: 0
+
+.input :deep(.q-field__native)
+  color: var(--font-grey-color)
+  font-size: 16px !important
+  font-style: normal
+  line-height: normal !important
+
+.input :deep(.q-field__control)
+  color: var(--font-dark-blue-color)
+  &:hover:before
+    border: 1px solid var(--font-dark-blue-color)
+  &:after
+    border-width: 1px !important
 </style>

src/components/base/BaseModal.vue

@@ -140,6 +140,7 @@ export default {
   padding: 28px 32px
 
 .base-content
+  overflow-x: hidden
   width: auto
   background-color: var(--default-white)
   box-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)

src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue

@@ -48,7 +48,8 @@
             v-else-if="field.type === 'select'",
             @click="openModalCategories"
           )
-            q-field.items-center.cursor-pointer(
+            q-field.items-center(
+              :style="{cursor: isEdit ? 'pointer' : 'default'}",
               standout,
               :readonly="!isEdit",
               :outlined="isEdit",
@@ -417,6 +418,7 @@ export default {
 .q-badge
   padding: 4px
   cursor: pointer
+
 .delete
   background-color: var(--btn-red-color)
 </style>