From 2e3764c6acd4e89cef323d801bedc8d080cbe767 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Mon, 24 Jul 2023 18:37:58 +0300
Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20wrapper=20=D0=BD=D0=B0=20=D1=84=D0=BE=D1=80=D0=BC?=
 =?UTF-8?q?=D1=8B=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B=20?=
 =?UTF-8?q?=D0=BC=D0=B5=D0=B4=D0=BA=D0=B0=D1=82=D0=BE=D1=87=D0=B5=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/medcards/TheMedcards.vue            |  2 +-
 .../BasicDataForms/CurrentPatientForm.vue     | 14 +++++++
 .../BasicDataForms/TodaysPatientsForm.vue     | 15 +++++++
 .../ViewedMedicalRecordsForm.vue              | 14 +++++++
 .../components/MedcardFormWrapper.vue         | 41 +++++++++++++++++++
 .../medcards/components/TablePatients.vue     | 16 +++++++-
 6 files changed, 100 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/medcards/components/BasicDataForms/CurrentPatientForm.vue
 create mode 100644 src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue
 create mode 100644 src/pages/medcards/components/BasicDataForms/ViewedMedicalRecordsForm.vue
 create mode 100644 src/pages/medcards/components/MedcardFormWrapper.vue

diff --git a/src/pages/medcards/TheMedcards.vue b/src/pages/medcards/TheMedcards.vue
index e4efc7b..39c4891 100644
--- a/src/pages/medcards/TheMedcards.vue
+++ b/src/pages/medcards/TheMedcards.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .medcards-wrapper.flex.flex-col
+  .medcards-wrapper.flex.flex-col.w-full
     table-patients
     medical-card-search
 </template>
diff --git a/src/pages/medcards/components/BasicDataForms/CurrentPatientForm.vue b/src/pages/medcards/components/BasicDataForms/CurrentPatientForm.vue
new file mode 100644
index 0000000..6ad92e0
--- /dev/null
+++ b/src/pages/medcards/components/BasicDataForms/CurrentPatientForm.vue
@@ -0,0 +1,14 @@
+<template lang="pug">
+  medcard-form-wrapper(title="Пациент на приеме", title-link="Медкарта")
+</template>
+
+<script>
+import MedcardFormWrapper from "@/pages/medcards/components/MedcardFormWrapper.vue";
+
+export default {
+  name: "CurrentPatientForm",
+  components: { MedcardFormWrapper },
+};
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue b/src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue
new file mode 100644
index 0000000..1dccefe
--- /dev/null
+++ b/src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue
@@ -0,0 +1,15 @@
+<template lang="pug">
+  medcard-form-wrapper(title="Пациенты на сегодня", :quantity="13", title-link="Календарь")
+    .flex gwiefujm
+</template>
+
+<script>
+import MedcardFormWrapper from "@/pages/medcards/components/MedcardFormWrapper.vue";
+
+export default {
+  name: "TodaysPatientsForm",
+  components: { MedcardFormWrapper },
+};
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/pages/medcards/components/BasicDataForms/ViewedMedicalRecordsForm.vue b/src/pages/medcards/components/BasicDataForms/ViewedMedicalRecordsForm.vue
new file mode 100644
index 0000000..00f88f3
--- /dev/null
+++ b/src/pages/medcards/components/BasicDataForms/ViewedMedicalRecordsForm.vue
@@ -0,0 +1,14 @@
+<template lang="pug">
+  medcard-form-wrapper(title="Недавно просмотренные медкарты")
+</template>
+
+<script>
+import MedcardFormWrapper from "@/pages/medcards/components/MedcardFormWrapper.vue";
+
+export default {
+  name: "ViewedMedicalRecordsForm",
+  components: { MedcardFormWrapper },
+};
+</script>
+
+<style lang="sass" scoped></style>
diff --git a/src/pages/medcards/components/MedcardFormWrapper.vue b/src/pages/medcards/components/MedcardFormWrapper.vue
new file mode 100644
index 0000000..bae968a
--- /dev/null
+++ b/src/pages/medcards/components/MedcardFormWrapper.vue
@@ -0,0 +1,41 @@
+<template lang="pug">
+  .form-wrapper.flex.flex-col.w-full.rounded
+    .header.flex.items-center.text-sm.font-bold.justify-between.w-full.px-6.py-5
+      .left-side.flex.gap-x-2.items-center
+        span {{title}}
+        .grey-color(v-if="quantity") {{quantity}}
+      .link.flex.items-center.cursor-pointer(v-if="titleLink", @click="link")
+        span.font-medium {{ titleLink }}
+    slot
+</template>
+
+<script>
+export default {
+  name: "MedcardFormWrapper",
+  props: {
+    title: String,
+    titleLink: String,
+    link: Function,
+    quantity: Number,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.form-wrapper
+  height: 360px
+  background: var(--default-white)
+  color: var(--font-dark-blue-color)
+
+.header
+  max-height: 62px
+  border-bottom: 1px solid var(--gray-scondary)
+
+.grey-color
+  color: var(--font-grey-color)
+
+.link
+  color: var(--btn-blue-color)
+  &:hover
+    opacity: 0.7
+</style>
diff --git a/src/pages/medcards/components/TablePatients.vue b/src/pages/medcards/components/TablePatients.vue
index e68196d..3cdf1d3 100644
--- a/src/pages/medcards/components/TablePatients.vue
+++ b/src/pages/medcards/components/TablePatients.vue
@@ -1,9 +1,23 @@
 <template lang="pug">
-  .table-wrapper.flex
+  .table-wrapper.flex.gap-x-2    
+    todays-patients-form
+    current-patient-form
+    viewed-medical-records-form
 </template>
 
 <script>
+import CurrentPatientForm from "./BasicDataForms/CurrentPatientForm.vue";
+import TodaysPatientsForm from "./BasicDataForms/TodaysPatientsForm.vue";
+import ViewedMedicalRecordsForm from "./BasicDataForms/ViewedMedicalRecordsForm.vue";
+
 export default {
   name: "TablePatients",
+  components: {
+    TodaysPatientsForm,
+    CurrentPatientForm,
+    ViewedMedicalRecordsForm,
+  },
 };
 </script>
+
+<style lang="sass" scoped></style>