Merge branch 'UC-204' into 'master'

Resolve UC-204 See merge request andrusyakka/urban-couscous!272
2023-02-22 13:17:40 +00:00
parent cd01915419 888550f3c5
commit 8f07d76fa2
9 changed files with 153 additions and 322 deletions
--- a/src/components/HeaderInputs.vue
+++ b/src/components/HeaderInputs.vue
@@ -1,22 +1,22 @@
 <template lang="pug">
-  .header-inputs-wrapper.flex.items-center.font-medium.text-base(:class="{ open: isOpen }")
-    .select-container(@click="changeState", v-click-outside="closeOptions")
-      .select-wrapper.flex.items-center.cursor-pointer.mx-4.my-2
-        .icon-wrapper.icon-search.flex.text-lg.justify-center.items-center
-        span.custom-input.select-input.inline-block.box-border.align-middle.pl-2.pr-1 {{ selectedFilter }}
-        .arrow.icon-down-arrow.text-xsm.mt-px.flex.justify-center.items-center
-      .options-wrapper.flex.flex-col.box-border.p-4.mt-1(v-if="isOpen")
-        .option-list.cursor-pointer.flex.flex-row.mb-4(
-          v-for="filter in filters",
-          :key="filter", @click="selectFilter(filter)"
+  .header-inputs-wrapper.flex.items-center.font-medium.text-base
+    q-select.w-40.pl-3.pr-2.selected(
+      v-model="selectedFilter",
+      :options="filters",
+      borderless,
+      dense
+    )
+      template(v-slot:selected)
+        span(:style="{color: 'var(--btn-blue-color)'}") {{ selectedFilter }}
+      template(v-slot:prepend)
+        q-icon.pr-1(
+          name="app:icon-search",
+          size="18px",
+          :style="{color: 'var(--btn-blue-color)', opacity: '0.7'}"
        )
-          .icon-wrapper.mr-2.flex.justify-center
-            .icon-ok.text-xs.flex.justify-center.items-center(v-if="filter === selectedFilter")
-          .flex.items-center {{ filter }}
    q-input.px-4(
      type="text",
      placeholder="Искать ...",
-      :input-style="{color: 'var(--btn-blue-color)'}",
      borderless,
      square
    )
@@ -24,10 +24,11 @@

 <script>
 import BaseInput from "@/components/base/BaseInput";
+import BaseSelect from "@/components/base/BaseSelect";

 export default {
  name: "HeaderInputs",
-  components: { BaseInput },
+  components: { BaseInput, BaseSelect },
  data() {
    return {
      selectedFilter: "Календарь",
@@ -36,80 +37,20 @@ export default {
    };
  },
  methods: {
-    changeState() {
-      this.isOpen = !this.isOpen;
-    },
    selectFilter(filter) {
      this.selectedFilter = filter;
    },
-    closeOptions() {
-      this.isOpen = false;
-    },
  },
 };
 </script>

 <style lang="sass" scoped>
-.open
-  .arrow
-    transform: rotate(180deg)
-
 .header-inputs-wrapper
  height: 40px
  background-color: var(--default-white)
  border-radius: 4px
  border: 1px solid var(--border-light-grey-color)

-.select-container
+.selected
  border-right: 1px solid var(--border-light-grey-color)
-
-.icon-wrapper
-  width: 24px
-  height: 24px
-
-.custom-input
-  border: none
-  outline: none
-  background-color: transparent
-  color: var(--btn-blue-color)
-  height: 100%
-
-.select-wrapper
-  position: relative
-  z-index: 2
-
-.select-input
-  width: 100px
-
-.options-wrapper
-  width: 172px
-  background-color: var(--default-white)
-  color: var(--font-dark-blue-color)
-  border-radius: 4px
-  position: absolute
-  box-shadow: var(--default-shadow)
-
-.search-input
-  &::placeholder
-    color: var(--font-grey-color)
-
-.icon-search
-  color: var(--btn-blue-color)
-  opacity: 0.5
-
-.option-list
-  &:last-child
-    margin: 0
-  &:hover
-    color: var(--btn-blue-color)
-
-.arrow
-  color: var(--btn-blue-color)
-
-.icon-down-arrow
-  width: 16px
-  height: 16px
-
-.input-height
-  height: 38px
 </style>
--- a/src/components/base/BasePagination.vue
+++ b/src/components/base/BasePagination.vue
@@ -3,9 +3,12 @@
    q-pagination(
      v-model="value",
      :max="max",
+      :min="min",
      :max-pages="maxPages",
+      :size="`${size}px`",
      :boundary-numbers="boundaryNumbers",
-      :direction-links="directionLinks"
+      :direction-links="directionLinks",
+      @click="chCurrentPage"
    )
 </template>

@@ -18,6 +21,10 @@ export default {
      default: 1,
      type: Number,
    },
+    min: {
+      default: 1,
+      type: Number,
+    },
    maxPages: {
      default: 6,
      type: Number,
@@ -30,6 +37,12 @@ export default {
      default: false,
      type: Boolean,
    },
+    size: Number,
+  },
+  methods: {
+    chCurrentPage() {
+      this.$emit("st-current-page", this.value);
+    },
  },
 };
 </script>
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -53,6 +53,14 @@ export default {
      type: String,
      default: "menu",
    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    size: {
+      type: Number,
+      default: 18,
+    },
    disable: Boolean,
    label: String,
  },
--- a/src/components/base/BaseStepperQuasar.vue
+++ b/src/components/base/BaseStepperQuasar.vue
@@ -0,0 +1,79 @@
+<template lang="pug">
+  q-stepper(
+    v-model="currentStep",
+    :color="color",
+    :flat="flat",
+    class="font-input",
+    animated
+  )
+    q-step.overflow-hidden(
+      v-for="step in steps",
+      :name="step.id",
+      :title="step.value",
+      :key="step.id",
+      :prefix="step.id + 1"
+      :done="currentStep > step.id"
+    )
+      slot
+      q-stepper-navigation.flex.justify-between
+        .flex
+          q-btn(
+            @click="prevStep",
+            v-if="currentStep !== 0",
+            outline,
+            no-caps,
+            label="Назад",
+            color="primary",
+            padding="8px 24px"
+          )
+        .flex
+          q-btn(
+            @click="nextStep",
+            v-if="currentStep < steps.length-1",
+            no-caps,
+            label="Далее",
+            color="primary",
+            padding="8px 24px"
+          )
+          q-btn(
+            @click="finish",
+            v-if="currentStep === steps.length-1",
+            no-caps,
+            :label="finishLabel",
+            color="primary",
+            padding="8px 24px"
+          )
+</template>
+
+<script>
+export default {
+  name: "BaseStepperQuasar",
+  props: {
+    name: Number,
+    steps: Array,
+    currentStep: {
+      type: Number,
+      default: 0,
+    },
+    nextStep: Function,
+    prevStep: Function,
+    flat: {
+      type: Boolean,
+      default: false,
+    },
+    color: {
+      type: String,
+      default: "primary",
+    },
+    finishLabel: {
+      type: String,
+      default: "Завершить",
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.font-input
+  font-feature-settings: 'pnum' on, 'lnum' on
+</style>
--- a/src/pages/clients/components/ClientTablePagination.vue
+++ b/src/pages/clients/components/ClientTablePagination.vue
@@ -1,147 +0,0 @@
-<template lang="pug">
-  .flex.items-center.gap-2.text-base.w-full.justify-center
-    button.item.default-theme.flex.items-center.justify-center.pr-1(
-      @click="previousHandler",
-      :disabled="disabledPreviousButton"
-    )
-      .icon-down-arrow.arrow-left
-    button.item.flex.items-center.justify-center.transition.duration-100.ease-linear(
-      v-for="page, index in pageCount",
-      :key="index",
-      :id="page",
-      :class="currentPageStyle(page)",
-      :disabled="disabledMissingPages(page)"
-      @click="changeCurrentPage"
-    ) {{ page }}
-    button.item.default-theme.flex.items-center.justify-center.pl-1(
-      @click="nextHandler",
-      :disabled="disabledNextButton"
-    )
-      .icon-down-arrow.arrow-right
-</template>
-
-<script>
-export default {
-  name: "ClientTablePagination",
-  props: {
-    length: Number,
-    currentPage: Number,
-    totalVisible: {
-      type: Number,
-      default: 7,
-    },
-    paginationInfo: Object,
-  },
-  computed: {
-    pageCount() {
-      let countArray = [];
-      for (let i = 1; i <= this.paginationInfo.length; i++) {
-        countArray.push(i);
-      }
-      if (this.paginationInfo.length <= this.totalVisible) return countArray;
-      let incompleteCountArray = [];
-      if (
-        this.paginationInfo.currentPage <= 2 ||
-        this.paginationInfo.currentPage >=
-          countArray[this.paginationInfo.length - 2]
-      ) {
-        countArray.forEach((elem, index, arr) => {
-          if (index <= 2 || index >= arr.length - 3)
-            incompleteCountArray.push(elem);
-          else if (!incompleteCountArray.includes("..."))
-            incompleteCountArray.push("...");
-        });
-        return incompleteCountArray;
-      }
-      if (this.paginationInfo.currentPage <= 4) {
-        countArray.forEach((elem, index, arr) => {
-          if (index <= 4 || index === arr.length - 1)
-            incompleteCountArray.push(elem);
-          else if (!incompleteCountArray.includes("..."))
-            incompleteCountArray.push("...");
-        });
-        return incompleteCountArray;
-      }
-      if (
-        this.paginationInfo.currentPage >=
-        countArray[this.paginationInfo.length - 4]
-      ) {
-        countArray.forEach((elem, index, arr) => {
-          if (index === 0 || index >= arr.length - 5)
-            incompleteCountArray.push(elem);
-          else if (!incompleteCountArray.includes("..."))
-            incompleteCountArray.push("...");
-        });
-        return incompleteCountArray;
-      }
-      countArray.forEach((elem, index, arr) => {
-        if (index === 0) incompleteCountArray.push(elem, "...");
-        if (
-          index >= this.paginationInfo.currentPage - 2 &&
-          index <= this.paginationInfo.currentPage
-        )
-          incompleteCountArray.push(elem);
-        if (index === arr.length - 1) incompleteCountArray.push("...", elem);
-      });
-      return incompleteCountArray;
-    },
-    disabledNextButton() {
-      return this.paginationInfo.currentPage === this.paginationInfo.length;
-    },
-    disabledPreviousButton() {
-      return this.paginationInfo.currentPage === 1;
-    },
-  },
-  methods: {
-    currentPageStyle(number) {
-      if (number === this.paginationInfo.currentPage)
-        return {
-          "active-theme": true,
-        };
-      return {
-        "default-theme": true,
-      };
-    },
-    previousHandler() {
-      if (this.paginationInfo.currentPage !== 1) this.$emit("previous-page");
-    },
-    nextHandler() {
-      if (this.paginationInfo.currentPage !== this.paginationInfo.length)
-        this.$emit("next-page");
-    },
-    changeCurrentPage(e) {
-      this.$emit("set-current-page", parseInt(e.target.id));
-    },
-    disabledMissingPages(page) {
-      return isNaN(parseInt(page));
-    },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.item
-  width: 32px
-  height: 32px
-  border-radius: 4px
-  &:disabled
-    opacity: 0.5
-
-.default-theme
-  background-color: var(--default-white)
-  color: var(--font-black-color)
-  box-shadow: var(--pagination-item-shadow)
-
-.active-theme
-  background-color: var(--btn-blue-color)
-  color: var(--default-white)
-  box-shadow: var(--pagination-current-item-shadow)
-
-.arrow-left
-  transform: rotate(90deg)
-  color: var(--font-grey-color)
-
-.arrow-right
-  transform: rotate(270deg)
-  color: var(--font-grey-color)
-</style>
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -36,18 +36,14 @@
              :created-client-name="createdClientName",
              @recover-client="clearDeletedRowId",
            )
-        client-table-pagination(
+        base-pagination(
          v-if="paginationInfo.length > 1"
-          :pagination-info="paginationInfo"
-          @previous-page="switchPreviousPage",
-          @next-page="switchNextPage",
-          @set-current-page="changeCurrentTablePage"
+          :max="paginationInfo.length",
+          :value="currentTablePage",
+          :size="18"
+          @st-current-page="changeCurrentTablePage",
+          directionLinks
        )
-        //- base-pagination(
-        //-   :max="paginationInfo.length",
-        //-   :value="currentTablePage",
-        //-   directionLinks
-        //- )
        base-modal(
          v-model="showModal",
          :title="titleModal"
@@ -68,12 +64,13 @@ import ClientsTableHeader from "@/pages/clients/components/ClientsTableHeader";
 import ClientsTableHat from "@/pages/clients/components/ClientsTableHat";
 import ClientsTableRow from "@/pages/clients/components/ClientsTableRow";
 import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
-import ClientTablePagination from "./ClientTablePagination.vue";
+import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
 import BaseModal from "@/components/base/BaseModal.vue";
 import ClientTableModal from "./ClientTableModal.vue";
 import FormCreateMedicalCard from "@/pages/clients/components/FormCreateMedicalCard";
 import BaseLoader from "@/components/Loader/BaseLoader.vue";
 import BasePagination from "@/components/base/BasePagination.vue";
+
 export default {
  name: "ClientsTable",
  components: {
@@ -81,7 +78,7 @@ export default {
    ClientsTableRow,
    ClientsTableHat,
    ClientsTableHeader,
-    ClientTablePagination,
+    BaseClientFormCreate,
    BaseModal,
    ClientTableModal,
    FormCreateMedicalCard,
@@ -250,12 +247,6 @@ export default {
        }
      }
    },
-    switchPreviousPage() {
-      this.currentTablePage -= 1;
-    },
-    switchNextPage() {
-      this.currentTablePage += 1;
-    },
    changeCurrentTablePage(value) {
      this.currentTablePage = value;
    },
--- a/src/pages/clients/components/FormCreateIdentityDocuments.vue
+++ b/src/pages/clients/components/FormCreateIdentityDocuments.vue
@@ -39,8 +39,7 @@
          mask="###-###-### ##",
          v-model="identityDocument.snils.number",
          placeholder="000–000–000 00",
-          label="Номер СНИЛС",
-          outlined
+          label="Номер СНИЛС"
        )
        base-input(
          disabled,
@@ -48,8 +47,7 @@
          mask="############",
          v-model="identityDocument.inn.number",
          placeholder="000000000000",
-          label="Номер ИНН",
-          outlined
+          label="Номер ИНН"
        )
 </template>

--- a/src/pages/clients/components/FormCreateMedicalCard.vue
+++ b/src/pages/clients/components/FormCreateMedicalCard.vue
@@ -3,43 +3,18 @@
    .flex.flex.flex-col.gap-y-6
      span.text-center.font-bold.text-xl Создание медицинской карты стоматологического пациента
      .flex.self-center
-        base-stepper(
+        base-stepper-quasar(
          :steps="steps",
-          :currentStep="currentStep"
-        )
-      component(
-        v-bind:is="currentTabComponent",
-        :client-detail="clientData",
-      )
-    .flex.justify-between
-      .flex
-        q-btn(
-          @click="prevStep",
-          v-if="currentStep !== 0",
-          outline,
-          no-caps,
-          label="Назад",
-          color="primary",
-          padding="8px 24px"
-        )
-      .flex
-        q-btn(
-          @click="nextStep",
-          v-if="currentStep < steps.length-1",
-          no-caps,
-          label="Далее",
-          color="primary",
-          padding="8px 24px"
-        )
-        q-btn(
-          @click="finish",
-          v-if="currentStep === steps.length-1",
-          no-caps,
-          label="Создать медицинскую карту",
-          style="width: 272px",
-          color="primary",
-          padding="8px 24px"
+          :currentStep="currentStep",
+          :next-step="nextStep",
+          :prev-step="prevStep",
+          finishLabel="Создать медицинскую карту",
+          flat
        )
+          component(
+            v-bind:is="currentTabComponent",
+            :client-detail="clientData"
+          )
 </template>

 <script>
@@ -48,8 +23,8 @@ import BaseSelect from "@/components/base/BaseSelect";
 import MedicalBaseData from "@/pages/medicalCard/components/MedicalBaseData";
 import MedicalIdentityDocuments from "@/pages/medicalCard/components/MedicalIdentityDocuments";
 import MedicalPolicyDocuments from "@/pages/medicalCard/components/MedicalPolicyDocuments";
-import BaseStepper from "@/components/base/BaseStepper.vue";
 import { fetchWrapper } from "@/shared/fetchWrapper.js";
+import BaseStepperQuasar from "@/components/base/BaseStepperQuasar";

 export default {
  name: "FormCreateMedicalCard",
@@ -59,7 +34,7 @@ export default {
    MedicalBaseData,
    MedicalIdentityDocuments,
    MedicalPolicyDocuments,
-    BaseStepper,
+    BaseStepperQuasar,
  },
  props: {
    selectedClientId: String,
--- a/src/pages/clients/components/StepperCreateAgreement.vue
+++ b/src/pages/clients/components/StepperCreateAgreement.vue
@@ -1,56 +1,29 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6.justify-between
-    .flex.flex-col.gap-y-6
-      span.font-bold.text-xl Договор
-      .flex.self-center
-        base-stepper(
-          :steps="steps",
-          :currentStep="currentStep"
-        )      
+  .flex.flex-col.justify-between
+    span.font-bold.text-xl Договор
+    base-stepper-quasar(
+      :currentStep="currentStep",
+      :steps="steps",
+      :next-step="nextStep",
+      :prev-step="prevStep",
+      flat
+    )
      component(v-bind:is="currentTabComponent")
-    .flex.justify-between
-      .flex
-        q-btn(
-          @click="prevStep",
-          v-if="currentStep !== 0",
-          outline,
-          no-caps,
-          label="Назад",
-          color="primary",
-          padding="8px 24px"
-        )
-      .flex
-        q-btn(
-          @click="nextStep",
-          v-if="currentStep < steps.length-1",
-          no-caps,
-          label="Далее",
-          color="primary",
-          padding="8px 24px"
-        )
-        q-btn(
-          @click="finish",
-          v-if="currentStep === steps.length-1",
-          no-caps,
-          label="Завершить",
-          color="primary",
-          padding="8px 24px"
-        )
 </template>

 <script>
-import BaseStepper from "@/components/base/BaseStepper";
 import AgreementCommon from "./FormsAgreementCreate/AgreementCommon";
 import AgreementPerson from "./FormsAgreementCreate/AgreementPerson";
 import AgreementServices from "./FormsAgreementCreate/AgreementServices";
+import BaseStepperQuasar from "@/components/base/BaseStepperQuasar";

 export default {
  name: "StepperCreateAgreement",
  components: {
-    BaseStepper,
    AgreementCommon,
    AgreementPerson,
    AgreementServices,
+    BaseStepperQuasar,
  },
  data() {
    return {