WIP Набросала строки таблицы

2023-07-26 18:26:24 +03:00
parent 2bb879c0cf
commit a747c1820d
27 changed files with 461 additions and 53 deletions
--- a/src/pages/medcards/TheMedcards.vue
+++ b/src/pages/medcards/TheMedcards.vue
@@ -1,15 +1,15 @@
 <template lang="pug">
  .medcards-wrapper.flex.flex-col.w-full.gap-y-2.h-full
    table-patients
-    medical-card-list
+    medical-card-search
 </template>

 <script>
-import MedicalCardList from "./components/MedicalCardList.vue";
+import MedicalCardSearch from "./components/MedicalCardSearch.vue";
 import TablePatients from "./components/TablePatients.vue";

 export default {
  name: "TheMedcards",
-  components: { MedicalCardList, TablePatients },
+  components: { MedicalCardSearch, TablePatients },
 };
 </script>
--- a/src/pages/medcards/components/BasicDataForms/CurrentPatientForm.vue
+++ b/src/pages/medcards/components/BasicDataForms/CurrentPatientForm.vue
@@ -91,7 +91,7 @@ export default {

 <style lang="sass" scoped>
 .header
-  border-bottom: 1px solid var(--gray-scondary)
+  border-bottom: 1px solid var(--gray-secondary)

 .priority
  height: 8px
--- a/src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue
+++ b/src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue
@@ -120,8 +120,8 @@ export default {
    width: 340px

 .patient
-  border-bottom: 1px solid var(--gray-scondary)
-  border-right: 1px solid var(--gray-scondary)
+  border-bottom: 1px solid var(--gray-secondary)
+  border-right: 1px solid var(--gray-secondary)
  margin-right: 8px
  &:last-child
    border-bottom: none
--- a/src/pages/medcards/components/MedcardFormWrapper.vue
+++ b/src/pages/medcards/components/MedcardFormWrapper.vue
@@ -29,7 +29,7 @@ export default {

 .header
  max-height: 62px
-  border-bottom: 1px solid var(--gray-scondary)
+  border-bottom: 1px solid var(--gray-secondary)

 .grey-color
  color: var(--font-grey-color)
--- a/src/pages/medcards/components/MedicalCardList.vue
+++ b/src/pages/medcards/components/MedicalCardList.vue
@@ -1,17 +0,0 @@
-<template lang="pug">
-  .medical-wrapper.flex.h-full.rounded.w-full
-    list-header
-</template>
-
-<script>
-import ListHeader from "@/pages/medcards/components/MedicalCardListHeader.vue";
-export default {
-  name: "MedicalCardList",
-  components: { ListHeader },
-};
-</script>
-
-<style lang="sass" scoped>
-.medical-wrapper
-  background-color: var(--default-white)
-</style>
--- a/src/pages/medcards/components/MedicalCardSearch.vue
+++ b/src/pages/medcards/components/MedicalCardSearch.vue
@@ -0,0 +1,19 @@
+<template lang="pug">
+  .medical-wrapper.flex.h-full.rounded.w-full.flex-col
+    list-header
+    list-contents
+</template>
+
+<script>
+import ListHeader from "@/pages/medcards/components/MedicalCardSearchHeader.vue";
+import ListContents from "@/pages/medcards/components/MedicalCardSearchList.vue";
+export default {
+  name: "MedicalCardSearch",
+  components: { ListHeader, ListContents },
+};
+</script>
+
+<style lang="sass" scoped>
+.medical-wrapper
+  background-color: var(--default-white)
+</style>
--- a/src/pages/medcards/components/MedicalCardSearchHeader.vue
+++ b/src/pages/medcards/components/MedicalCardSearchHeader.vue
@@ -26,7 +26,7 @@ import BaseInput from "@/components/base/BaseInput.vue";
 import BaseSelect from "@/components/base/BaseSelect.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
 export default {
-  name: "MedicalCardListHeader",
+  name: "MedicalCardSearchHeader",
  components: { BaseInput, BaseSelect, BaseButton },
  data() {
    return {
@@ -65,7 +65,7 @@ export default {
 <style lang="sass" scoped>
 .header-wrapper
  height: 72px
-  border-bottom: 1px solid var(--gray-scondary)
+  border-bottom: 1px solid var(--gray-secondary)

 .search-icon :deep(path)
  fill: var(--font-grey-color)
--- a/src/pages/medcards/components/MedicalCardSearchList.vue
+++ b/src/pages/medcards/components/MedicalCardSearchList.vue
@@ -0,0 +1,194 @@
+<template lang="pug">
+  .list-wrapper.rounded.w-full(id="listWrapper")
+    .w-full.header.h-10.flex
+      .h-full.py-10px.px-4.flex.items-center.justify-start.font-semibold.text-sm.grey-color(
+        v-for="field in headerConfig",
+        :key="field.title",
+        :style="headerStyle(field)"
+      ) {{ field.title }}
+      .h-full.w-8(v-if="scrollPresence")
+    .body.w-full
+      row(
+        v-for="medcard in medcardsInfo",
+        :key="medcard.id"
+        :scroll-presence="scrollPresence",
+        :header-style="headerStyle",
+        :medcard-info="medcard",
+      )
+</template>
+
+<script>
+import { searchListConfig } from "@/pages/medcards/utils/medcardsConfig.js";
+import Row from "@/pages/medcards/components/MedicalCardSearchRow.vue";
+import avatar from "@/assets/images/person.png";
+export default {
+  name: "MedicalCardSearchList",
+  components: { Row },
+  data() {
+    return {
+      headerConfig: searchListConfig,
+      //TODO Взять из конфига
+      medcardsInfo: [
+        {
+          id: 1,
+          first_name: "Арнольд",
+          last_name: "Першин",
+          patronymic: "Витальевич",
+          birthday: "12.12.1986",
+          avatar: avatar,
+          creation_date: "30.07.2023",
+          filling_percentage: 15,
+          priority: 1,
+          medcard: "6112 813812",
+        },
+        {
+          id: 2,
+          first_name: "Арнольд",
+          last_name: "Першин",
+          patronymic: "Витальевич",
+          birthday: "12.12.1986",
+          avatar: avatar,
+          creation_date: "30.07.2023",
+          filling_percentage: 40,
+          priority: 2,
+          medcard: "6112 813812",
+        },
+        {
+          id: 3,
+          first_name: "Арнольд",
+          last_name: "Першин",
+          patronymic: "Витальевич",
+          birthday: "12.12.1986",
+          avatar: avatar,
+          creation_date: "30.07.2023",
+          filling_percentage: 70,
+          priority: 3,
+          medcard: "6112 813812",
+        },
+        {
+          id: 4,
+          first_name: "Арнольд",
+          last_name: "Першин",
+          patronymic: "Витальевич",
+          birthday: "12.12.1986",
+          avatar: avatar,
+          creation_date: "30.07.2023",
+          filling_percentage: 5,
+          priority: null,
+          medcard: "6112 813812",
+        },
+        {
+          id: 5,
+          first_name: "Арнольд",
+          last_name: "Першин",
+          patronymic: "Витальевич",
+          birthday: "12.12.1986",
+          avatar: avatar,
+          creation_date: "30.07.2023",
+          filling_percentage: 56,
+          priority: 1,
+          medcard: "6112 813812",
+        },
+        {
+          id: 6,
+          first_name: "Арнольд",
+          last_name: "Першин",
+          patronymic: "Витальевич",
+          birthday: "12.12.1986",
+          avatar: avatar,
+          creation_date: "30.07.2023",
+          filling_percentage: 56,
+          priority: 1,
+          medcard: "6112 813812",
+        },
+        {
+          id: 7,
+          first_name: "Арнольд",
+          last_name: "Першин",
+          patronymic: "Витальевич",
+          birthday: "12.12.1986",
+          avatar: avatar,
+          creation_date: "30.07.2023",
+          filling_percentage: 56,
+          priority: 1,
+          medcard: "6112 813812",
+        },
+        {
+          id: 8,
+          first_name: "Арнольд",
+          last_name: "Першин",
+          patronymic: "Витальевич",
+          birthday: "12.12.1986",
+          avatar: avatar,
+          creation_date: "30.07.2023",
+          filling_percentage: 56,
+          priority: 1,
+          medcard: "6112 813812",
+        },
+        {
+          id: 9,
+          first_name: "Арнольд",
+          last_name: "Першин",
+          patronymic: "Витальевич",
+          birthday: "12.12.1986",
+          avatar: avatar,
+          creation_date: "30.07.2023",
+          filling_percentage: 56,
+          priority: 1,
+          medcard: "6112 813812",
+        },
+        {
+          id: 10,
+          first_name: "Арнольд",
+          last_name: "Першин",
+          patronymic: "Витальевич",
+          birthday: "12.12.1986",
+          avatar: avatar,
+          creation_date: "30.07.2023",
+          filling_percentage: 56,
+          priority: 1,
+          medcard: "6112 813812",
+        },
+      ],
+    };
+  },
+  computed: {
+    scrollPresence() {
+      return this.medcardsInfo.length > 9;
+      // const wrapper = document.getElementById("listWrapper");
+      // return wrapper?.scrollHeight > wrapper?.clientHeight;
+    },
+  },
+  methods: {
+    headerStyle(field) {
+      return {
+        width:
+          !this.scrollPresence && field.spareWidth
+            ? field.spareWidth
+            : field.width,
+        "min-width":
+          this.scrollPresence && field.compressedMinWidth
+            ? field.compressedMinWidth
+            : field.minWidth,
+        "justify-content": field.title === "Do" ? "center" : "",
+      };
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.header
+  background-color: var(--gray-thirdly)
+  border-bottom: 1px solid var(--gray-secondary)
+.grey-color
+  color: var(--font-grey-color)
+.body
+  height: calc(100vh - 56px - 24px - 360px - 72px - 40px)
+  overflow-y: auto
+  &::-webkit-scrollbar-track
+    margin: 24px 0 24px 0
+    background: #E9E9ED
+  &::-webkit-scrollbar-thumb
+    background: var(--font-grey-color)
+</style>
--- a/src/pages/medcards/components/MedicalCardSearchRow.vue
+++ b/src/pages/medcards/components/MedicalCardSearchRow.vue
@@ -0,0 +1,127 @@
+<template lang="pug">
+  .w-full.row-wrapper.h-14.flex
+    .field.gap-x-3(
+      :style="headerStyle(headerConfig[0])"
+    ) 
+      q-avatar(size="36px")
+        img(:src="medcardInfo.avatar")
+      span.font-semibold.text-dark {{patientName}}
+    .field(:style="headerStyle(headerConfig[1])")
+      span.text-dark {{ convertDate(medcardInfo?.birthday) }} г.
+    .field.gap-x-2(:style="headerStyle(headerConfig[2])")
+      .rounded-full.h-2.w-2(:style="{background: patientPriority?.color}")
+      span(:style="{color: patientPriority?.color}") {{ patientPriority?.text }}
+    .field(:style="headerStyle(headerConfig[3])")
+      .medcard-number.rounded.h-7.py-1.pl-3.pr-2.flex.items-center.justify-between.w-full.cursor-pointer(
+        @click="copyValue(medcardInfo?.medcard)"
+      )
+        span.text-dark.cursor-pointer {{ medcardInfo?.medcard }}
+        q-icon.copy(size="18px", name="app:copy")
+    .field(:style="headerStyle(headerConfig[4])")
+      span.text-dark {{ convertDate(medcardInfo?.creation_date) }} г.
+    .field.gap-x-3(:style="headerStyle(headerConfig[5])")
+      .track.h-2.flex-1.rounded
+        .thumb.h-full.rounded(:style="thumbStyle")
+      span.grey-color {{ medcardInfo?.filling_percentage }}%
+    .field(:style="{...headerStyle(headerConfig[6])}")
+      q-icon.medcard.cursor-pointer(name="app:medcard", size="20px")
+</template>
+
+<script>
+import {
+  searchListConfig,
+  priorityList,
+} from "@/pages/medcards/utils/medcardsConfig.js";
+import * as moment from "moment/moment";
+import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
+import { addNotification } from "@/components/Notifications/notificationContext";
+export default {
+  name: "MedicalCardSearchRow",
+  components: { TheNotificationProvider },
+  props: {
+    scrollPresence: Boolean,
+    headerStyle: Function,
+    medcardInfo: Object,
+  },
+  data() {
+    return {
+      headerConfig: searchListConfig,
+    };
+  },
+  computed: {
+    patientName() {
+      return `${this.medcardInfo?.last_name} ${this.medcardInfo?.first_name} ${this.medcardInfo?.patronymic}`;
+    },
+    patientPriority() {
+      return priorityList?.find(
+        ({ priority }) => this.medcardInfo.priority === priority
+      );
+    },
+    thumbStyle() {
+      let percentage = this.medcardInfo?.filling_percentage;
+      return {
+        width: `calc(${percentage}%)`,
+        "background-color":
+          percentage < 11
+            ? "var(--system-color-red)"
+            : percentage < 51
+            ? "var(--bg-yellow-warning)"
+            : "var(--system-color-green)",
+      };
+    },
+  },
+  methods: {
+    convertDate(date) {
+      return moment(date?.split(".")?.reverse()?.join("-"))?.format(
+        "DD MMMM YYYY"
+      );
+    },
+    copyValue(text) {
+      navigator.clipboard.writeText(text);
+      addNotification(
+        new Date().getTime(),
+        "",
+        "Номер медкарты скопирован",
+        "success",
+        5000
+      );
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.row-wrapper
+  border-bottom: 1px solid var(--gray-secondary)
+  & > .field
+    height: 100%
+    padding: 10px 16px
+    display: flex
+    align-items: center
+    justify-content: start
+    font-size: 14px
+    line-height: 135%
+
+.medcard-number
+  border: 1px solid var(--gray-secondary)
+  background: var(--gray-thirdly)
+  &:hover
+    background: var(--gray-secondary)
+
+.copy :deep(path)
+  fill: var(--font-grey-color)
+
+.medcard :deep(path)
+  fill: var(--btn-blue-color)
+
+span
+  cursor: default
+
+.track
+  background: var(--gray-thirdly)
+
+.thumb
+
+.grey-color
+  color: var(--font-grey-color)
+</style>
--- a/src/pages/medcards/utils/medcardsConfig.js
+++ b/src/pages/medcards/utils/medcardsConfig.js
@@ -0,0 +1,69 @@
+export const searchListConfig = [
+  {
+    title: "ФИО",
+    width: "518px",
+    minWidth: "400px",
+    spareWidth: "550px",
+  },
+  {
+    title: "Дата рождения",
+    width: "220px",
+    minWidth: "160px",
+    compressedMinWidth: "170px",
+  },
+  {
+    title: "Приоритет",
+    width: "220px",
+    minWidth: "140px",
+  },
+  {
+    title: "№ медкарты",
+    width: "280px",
+    minWidth: "220px",
+    compressedMinWidth: "194px",
+  },
+  {
+    title: "Дата создания",
+    width: "215px",
+    minWidth: "160px",
+    compressedMinWidth: "170px",
+  },
+  {
+    title: "Процент заполнения",
+    width: "295px",
+    minWidth: "220px",
+    compressedMinWidth: "194px",
+  },
+  {
+    title: "Do",
+    width: "60px",
+    minWidth: "60px",
+  },
+];
+
+export const priorityList = [
+  {
+    priority: 1,
+    id: 1,
+    text: "Высокий",
+    color: "var(--system-color-red)",
+  },
+  {
+    priority: 2,
+    id: 2,
+    text: "Средний",
+    color: "var(--bg-yellow-warning)",
+  },
+  {
+    priority: 3,
+    id: 3,
+    text: "Низкий",
+    color: "var(--btn-blue-color)",
+  },
+  {
+    priority: null,
+    id: 4,
+    text: "-",
+    color: "#9294A7",
+  },
+];