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