WIP Сделано удаление, breadcrumbs

src/pages/newMedicalCard/TheMedicalCard.vue

@@ -1,24 +1,45 @@
 <template lang="pug">
   .w-full.h-full
-    medical-card-header.mb-2(v-model="currentMenuItem")
+    medical-card-header.mb-2(
+      v-model="currentMenuItem",
+      :change-shown-remove-modal="changeShownRemoveModal",
+    )
     component(
       v-if="currentMenuItem",
       v-bind:is="currentMenuItem",
     )
+    base-modal(
+      v-model="isShownRemoveModal",
+      title="Удаление медкарты"
+    )
+      medical-card-remove-modal(:change-shown-remove-modal="changeShownRemoveModal")
 </template>
 
 <script>
 import MedicalCardHeader from "@/pages/newMedicalCard/components/MedicalCardHeader.vue";
 import MedicalCardBaseInfo from "@/pages/newMedicalCard/components/MedicalCardBaseInfo.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import MedicalCardRemoveModal from "@/pages/newMedicalCard/components/MedicalCardRemoveModal.vue";
 import { mapState } from "vuex";
 export default {
   name: "TheMedicalCard",
-  components: { MedicalCardHeader, MedicalCardBaseInfo },
+  components: {
+    MedicalCardHeader,
+    MedicalCardBaseInfo,
+    BaseModal,
+    MedicalCardRemoveModal,
+  },
   data() {
     return {
       currentMenuItem: "MedicalCardBaseInfo",
+      isShownRemoveModal: false,
     };
   },
+  methods: {
+    changeShownRemoveModal(value) {
+      this.isShownRemoveModal = value;
+    },
+  },
   computed: mapState({
     medical: (state) => state.medical.medicalCard,
   }),

src/pages/newMedicalCard/components/MedicalCardHeader.vue

@@ -8,14 +8,15 @@
             name="app:long-arrow",
             color="grey",
           )
-        q-breadcrumbs-el(label="Календарь")
-        q-breadcrumbs-el(:label="`Медкарта #${medicalCardData?.number}`")
+        q-breadcrumbs-el(:label="routes[routingHistory.state.back]")
+        q-breadcrumbs-el(:label="`${routes[routingHistory.state.current]} #${medicalCardData?.number}`")
       q-btn(
         flat,
         text-color="grey",
         no-caps,
         padding="6px"
         size="md"
+        @click="changeShownRemoveModal(true)",
       )
         q-icon(left, name="app:basket", size="16px")
         span Удалить медкарту
@@ -83,42 +84,29 @@
 import { v_model } from "@/shared/mixins/v-model";
 import { column } from "@/pages/clients/utils/tableConfig.js";
 import * as moment from "moment/moment";
+import {
+  headerMenuItem,
+  routesDictionary,
+} from "@/pages/newMedicalCard/utils/configMedical.js";
 export default {
   name: "MedicalCardHeader",
   mixins: [v_model],
+  props: {
+    changeShownRemoveModal: Function,
+  },
   data() {
     return {
-      menuItem: [
-        {
-          title: "Общая информация",
-          id: "basic",
-          component: "MedicalCardBaseInfo",
-        },
-        {
-          title: "Журнал посещений",
-          id: "session-log",
-          component: "SessionLog",
-        },
-        {
-          title: "Планы лечения",
-          id: "treatment-plans",
-          component: "TreatmentPlans",
-        },
-        {
-          title: "Статистика",
-          id: "statistics",
-          component: "Statistics",
-        },
-        {
-          title: "История контактов",
-          id: "contact-history",
-          component: "ContactHistory",
-        },
-      ],
-      url: "https://astra-dev.dopcore.com",
+      menuItem: headerMenuItem,
+      routes: routesDictionary,
     };
   },
   computed: {
+    routingHistory() {
+      return this.$store.state.routingHistory;
+    },
+    url() {
+      return this.$store.state.url;
+    },
     medicalCardData() {
       return this.$store.state.medical.medicalCard;
     },
@@ -177,6 +165,7 @@ export default {
 .patient-info
   width: 83.2%
   height: 18.7%
+  min-height: 190px
   background-color: var(--default-white)
 .menu-item
   color: var(--font-grey-color)

src/pages/newMedicalCard/components/MedicalCardRemoveModal.vue

@@ -0,0 +1,45 @@
+<template lang="pug">
+  .modal
+    .text.mt-4.mb-6.text-base Вы действительно хотите удалить медкарту?
+    .flex.gap-x-3
+      q-btn(
+        label="Отменить",
+        no-caps,
+        outline,
+        color="primary",
+        padding="10px 24px",
+        @click="changeShownRemoveModal(false)"
+      )
+      q-btn(
+        label="Удалить",
+        no-caps,
+        outline,
+        style="color: var(--border-red-color)",
+        padding="10px 24px",
+        @click="removeMedicalCard"
+      )
+</template>
+
+<script>
+export default {
+  name: "MedicalCardRemoveModal",
+  props: {
+    changeShownRemoveModal: Function,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    removeMedicalCard() {
+      this.changeShownRemoveModal(false);
+      this.$store.dispatch("removeMedicalCardData");
+    },
+  },
+};
+</script>
+<style scoped lang="sass">
+.modal
+  width: 350px
+.text
+  color: var(--font-grey-color)
+</style>

src/pages/newMedicalCard/components/MedicalCardSidebar.vue

@@ -11,48 +11,13 @@
 
 <script>
 import { v_model } from "@/shared/mixins/v-model";
+import { baseInfoMenu } from "@/pages/newMedicalCard/utils/configMedical.js";
 export default {
   name: "MedicalCardSidebar",
   mixins: [v_model],
   data() {
     return {
-      menuItem: [
-        {
-          title: "Основные данные",
-          id: "basic-data",
-          component: "BasicDataForm",
-        },
-        {
-          title: "Протоколы первичного осмотра",
-          id: "protocols",
-          component: "Protocols",
-        },
-        {
-          title: "Доверенное лицо",
-          id: "trusted-person",
-          component: "TrustedPerson",
-        },
-        {
-          title: "Аллергии",
-          id: "allergies",
-          component: "Allergies",
-        },
-        {
-          title: "Состояние здоровья",
-          id: "health-status",
-          component: "HealthStatus",
-        },
-        {
-          title: "История болезней",
-          id: "medical-history",
-          component: "MedicalHistory",
-        },
-        {
-          title: "Зубная формула",
-          id: "dental-formula",
-          component: "DentalFormula",
-        },
-      ],
+      menuItem: baseInfoMenu,
     };
   },
   methods: {

src/pages/newMedicalCard/utils/configMedical.js

@@ -109,3 +109,75 @@ export const genderOptions = [
     label: "Женский",
   },
 ];
+
+export const headerMenuItem = [
+  {
+    title: "Общая информация",
+    id: "basic",
+    component: "MedicalCardBaseInfo",
+  },
+  {
+    title: "Журнал посещений",
+    id: "session-log",
+    component: "SessionLog",
+  },
+  {
+    title: "Планы лечения",
+    id: "treatment-plans",
+    component: "TreatmentPlans",
+  },
+  {
+    title: "Статистика",
+    id: "statistics",
+    component: "Statistics",
+  },
+  {
+    title: "История контактов",
+    id: "contact-history",
+    component: "ContactHistory",
+  },
+];
+
+export const baseInfoMenu = [
+  {
+    title: "Основные данные",
+    id: "basic-data",
+    component: "BasicDataForm",
+  },
+  {
+    title: "Протоколы первичного осмотра",
+    id: "protocols",
+    component: "Protocols",
+  },
+  {
+    title: "Доверенное лицо",
+    id: "trusted-person",
+    component: "TrustedPerson",
+  },
+  {
+    title: "Аллергии",
+    id: "allergies",
+    component: "Allergies",
+  },
+  {
+    title: "Состояние здоровья",
+    id: "health-status",
+    component: "HealthStatus",
+  },
+  {
+    title: "История болезней",
+    id: "medical-history",
+    component: "MedicalHistory",
+  },
+  {
+    title: "Зубная формула",
+    id: "dental-formula",
+    component: "DentalFormula",
+  },
+];
+
+export const routesDictionary = {
+  "/clients": "Клиенты",
+  "/calendar": "Календарь",
+  "/medical-card": "Медкарта",
+};