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/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>