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

src/assets/sass/variables.sass

@@ -92,7 +92,7 @@
   --bg-chip-pink-color: #F7D9FF
   --gray-thirdly: #f4f4f6
   --surface-blue-big: #ecf0fe
-  --gray-scondary: #dddde8
+  --gray-secondary: #dddde8
   --system-color-red: #f34549
   --system-color-green: #21ba72
 

src/components/base/BaseAddingNetwork.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .flex.w-full(class="gap-x-1.5")
-    base-select(:items="items", v-model="network.kind")  
+    base-select(:items="items", v-model="network.kind", size="M")  
     base-input.w-full(v-model="network.username", placeholder="Ссылкa", :rule="ruleInput", size="M")
 </template>
 

src/components/base/BaseSelect.vue

@@ -12,7 +12,8 @@
         emit-value,
         map-options,
         :clearable="clearable",
-        dropdown-icon="app:down-arrow"
+        dropdown-icon="app:down-arrow",
+        :menu-offset="[0, 8]"
       )
         template(v-slot:selected)
           span(v-if="!value?.icon", :class="{placeholder: placeholder}") {{ textSelect }}
@@ -190,7 +191,7 @@ export default {
   height: 20px
 
 .item
-  border-bottom: 1px solid var(--gray-scondary)
+  border-bottom: 1px solid var(--gray-secondary)
   &:last-child
     border-bottom: none
   &:hover

src/pages/clients/components/ClientDetailSectionAddress.vue

@@ -6,7 +6,8 @@
       labelStyle="text-xxs",
       placeholder="Введите город",
       v-model="dopeAddress.city",
-      label="Город"
+      label="Город",
+      size="S"
     )
     base-input(
       disabled,

src/pages/clients/components/FormCreateBasicInfo.vue

@@ -5,7 +5,8 @@
         :items="priorityList",
         placeholder="Приоритет клиента",
         v-model="basicInfo.priority",
-        label="Приоритет"
+        label="Приоритет",
+        size="M"
       )
       base-input-date(
         v-model="basicInfo.birth_date",

src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue

@@ -5,7 +5,8 @@
       placeholder="Категория договора",
       v-model="category",
       :items="categories",
-      label="Категория"          
+      label="Категория",
+      size="M"          
     )
     .flex.justify-between.gap-4
       base-input(
@@ -30,7 +31,8 @@
       placeholder="Поручить",
       v-model="employee",
       :items="employees",
-      label="Исполнитель"
+      label="Исполнитель",
+      size="M"
     )
 </template>
 

src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue

@@ -5,7 +5,8 @@
       placeholder="Категория договора",
       v-model="category",
       :items="categories",
-      label="Категория"   
+      label="Категория",
+      size="M"
     )
     .flex.gap-x-4
       base-input(
@@ -30,7 +31,8 @@
       placeholder="Поручить",
       v-model="employee",
       :items="employees",
-      label="Исполнитель"
+      label="Исполнитель",
+      size="M"
     )
 </template>
 

src/pages/clients/components/TableCreatePackageDoc.vue

@@ -23,7 +23,7 @@
         .flex.gap-x-4
           .flex.flex-col.w-full(class="gap-y-1.5")
             .counter.font-semibold.text-smm Тип документа
-            base-select.h-10(placeholder="Выберите тип")
+            base-select.h-10(placeholder="Выберите тип", size="M")
           .flex.flex-col(class="gap-y-1.5")
             .counter.font-semibold.text-smm Дата подписания
             .input-date.flex.h-10.justify-center
@@ -32,7 +32,7 @@
         span.font-bold Дополнительное
         .flex.flex-col.mb-124px(class="gap-y-1.5")
           .counter.font-semibold.text-smm Риски
-          base-select.h-10(placeholder="Выберите риски")
+          base-select.h-10(placeholder="Выберите риски", size="M")
     .services.flex.flex-col.gap-y-6(v-else)
       .flex.flex-col.gap-y-6
         .flex.flex-col.gap-y-2
@@ -47,7 +47,7 @@
               placeholder="Поиск",
             )
               .counter.icon-search
-            base-select.h-10(placeholder="Вид услуги")
+            base-select.h-10(placeholder="Вид услуги", size="M")
           .flex.items-center.px-11px.py-9px(
             :style="{borderBottom: '1px solid var(--btn-grey-color)'}"
           )

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

@@ -9,7 +9,8 @@
         @click.stop,
         :items="getPriorityList",
         v-model="value.priority",
-        :placeholder="value.priority"
+        :placeholder="value.priority",
+        size="M"
       )
 </template>
 

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>

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

src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue

@@ -120,8 +120,8 @@ export default {
     width: 340px
 
 .patient
-  border-bottom: 1px solid var(--gray-scondary)
+  border-bottom: 1px solid var(--gray-secondary)
-  border-right: 1px solid var(--gray-scondary)
+  border-right: 1px solid var(--gray-secondary)
   margin-right: 8px
   &:last-child
     border-bottom: none

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)

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>

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>

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)

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>

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>

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",
+  },
+];

src/pages/newCalendar/components/CalendarOpenSidebar.vue

@@ -234,7 +234,7 @@ export default {
   font-size: 20px
 
 .button-open
-  border: 1px solid var(--gray-scondary)
+  border: 1px solid var(--gray-secondary)
   color: var(--font-grey-color)
   background: var(--bg-light-grey)
 

src/pages/newCalendar/components/CalendarSidebar.vue

@@ -88,7 +88,7 @@
                     )
                 q-btn.ml-2(
                   @click="sortPerson(patientsData)",
-                  :style="{width: '32px', height: '32px', border: '1px solid var(--gray-scondary)'}",
+                  :style="{width: '32px', height: '32px', border: '1px solid var(--gray-secondary)'}",
                   padding="0",
                   :class="sortingClass"
                 )
@@ -350,14 +350,14 @@ export default {
   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--default-white) 100%)
 
 .button-open
-  border: 1px solid var(--gray-scondary)
+  border: 1px solid var(--gray-secondary)
   color: var(--font-grey-color)
   background: var(--bg-light-grey)
 
 .sort-icon-default
   background-color: var(--bg-light-grey)
   color: var(--font-grey-color)
-  border: 1px solid var(--gray-scondary)
+  border: 1px solid var(--gray-secondary)
 
 .sort-icon-active
   background-color: var(--btn-blue-color)

src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue

@@ -36,7 +36,8 @@
               :outlined="isEdit"
               :standout="!isEdit"
               :items="genderOptions"
-              bg-color="#e9e9f6"
+              bg-color="#e9e9f6",
+              size="M"
             )
           base-input-date(
             v-else-if="field.type === 'date'",

src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue

@@ -14,7 +14,8 @@
           :style="{flex: 1}",
           :items="sortingYears",
           v-model="sortingYear",
-          clearable
+          clearable,
+          size="M"
         )
         q-btn.ml-2(
           icon="app:sort-number",

src/pages/oldCalendar/components/CalendarFormAddEvent.vue

@@ -11,7 +11,8 @@
           v-if="selectedEventData.id"
           v-model="status",
           :items="statusesList",
-          label="Статус приема"
+          label="Статус приема",
+          size="M"
         )
         base-input(
           v-else,
@@ -24,13 +25,15 @@
           :items="ownersList",
           v-model="employees.employee",
           placeholder="Выберите сотрудника"
-          label="Сотрудник"
+          label="Сотрудник",
+          size="M"
         )
         base-select(
           :items="membersList",
           v-model="members.person",
           placeholder="Выберите клиента",
-          label="Клиент"
+          label="Клиент",
+          size="M"
         )
       .flex.gap-x-4
         base-input(

src/pages/schedule/components/FormChangeShift.vue

@@ -22,7 +22,8 @@
         :items="ownersList",
         v-model="replacementSheet.replacementEmployee",
         label="Замена сотрудника",
-        placeholder="Выберите сотрудника"
+        placeholder="Выберите сотрудника",
+        size="M"
       )
       .time-wrapper.flex.justify-center.gap-x-6
         base-input(

src/pages/schedule/components/ScheduleBar.vue

@@ -34,7 +34,8 @@
           :items="templateList",
           v-model="template.item",
           placeholder="Выберите шаблон"
-          label="Шаблоны графиков"
+          label="Шаблоны графиков",
+          size="M"
         )
     .flex.justify-center.gap-x-6.h-10
       q-btn(

src/pages/schedule/components/ScheduleTableSelect.vue

@@ -13,7 +13,8 @@
         v-if="!selectEmployee.label",
         :items="ownersList",
         v-model="selectEmployee",
-        placeholder="Добавить сотрудника"
+        placeholder="Добавить сотрудника",
+        size="M"
       )
       .flex.justify-center(v-else) {{selectEmployee.label}}
     .row.flex