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

src/pages/clients/components/ClientsTableRow.vue

@@ -410,7 +410,7 @@ export default {
         "handler-click-popup",
         "medical",
         this.client.id,
-        this.client?.medical_history[0]?.id
+        this.client?.medical_history?.find((elem) => elem?.id)?.id
       );
     },
     transmitDeleteClient() {
@@ -453,7 +453,7 @@ export default {
       this.lackAttachments = this.dataAttachments[0]?.id ? true : false;
     },
     saveNote(data) {
-      this.dataNotes = data?.note.filter((e) => e?.deleted_flg === false);
+      this.dataNotes = data?.note.filter((e) => !e?.deleted_flg);
       if (this.dataNotes[0]) {
         this.lackNotes = true;
       } else {
@@ -715,7 +715,7 @@ export default {
               (el) =>
                 el.priority === this.client.priority ||
                 this.client.priority === el.id
-            ).text,
+            )?.text,
             phone: {
               id:
                 this.client.contacts.find((el) => el.kind === "PHONE")?.id ||
@@ -741,8 +741,8 @@ export default {
             avatar: this.client.first_name
               ? this.client.last_name[0] + this.client.first_name[0]
               : this.client.last_name.substr(0, 2),
-            color: this.client.color,
+            color: this.client?.color,
-            photo: this.client.photo,
+            photo: this.client?.photo,
           };
         }
       },

src/pages/clients/components/cells/TableCellBodyPriority.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
   .flex.box-border.px-4.items-center.w-full.gap-x-2(:style="{ width : width + 'px'}")
     .flex.gap-x-2.items-center(v-if="!isOpenChange")
-      .dot.w-2.h-2(:style="{ backgroundColor: prioritySettings.settings.find((el) => el.text == value.priority).color }")
+      .dot.w-2.h-2(:style="{ backgroundColor: prioritySettings.settings.find((el) => el.text == value.priority)?.color }")
-      span.text-sm(:style="{ color: prioritySettings.settings.find((el) => el.text == value.priority).color }") {{value.priority}}
+      span.text-sm(:style="{ color: prioritySettings.settings.find((el) => el.text == value.priority)?.color }") {{value?.priority}}
     .flex.gap-x-2.text-sm(class="w-[164px]")
       base-select(
         v-if="isOpenChange",

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="routes[routingHistory.state.back]")
-        q-breadcrumbs-el(:label="`Медкарта #${medicalCardData?.number}`")
+        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: [
+      menuItem: headerMenuItem,
-        {
+      routes: routesDictionary,
-          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",
     };
   },
   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: [
+      menuItem: 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",
-        },
-      ],
     };
   },
   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": "Медкарта",
+};

src/store/index.js

@@ -4,6 +4,7 @@ import medical from "./modules/medicalCard";
 export default createStore({
   state: {
     url: "https://astra-dev.dopcore.com",
+    routingHistory: window.history,
   },
   modules: {
     medical,

src/store/modules/medicalCard.js

@@ -90,6 +90,19 @@ const actions = {
   returnInitData({ commit }) {
     commit("setBasicData");
   },
+  removeMedicalCardData({ commit, rootState }) {
+    fetchWrapper
+      .del(
+        `medical_card/medical_history/${localStorage.getItem(
+          "medicalId"
+        )}/delete/`
+      )
+      .then(() => {
+        rootState.routingHistory.back();
+        commit("setMedicalCard", {});
+        localStorage.removeItem("medicalId");
+      });
+  },
 };
 
 const mutations = {