Фикс багов

src/pages/newCalendar/components/CalendarSidebar.vue

@@ -39,7 +39,7 @@
             .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7.px-2(
               v-for="status in patientData.statuses"
             )
-              img(:src="status.icon")
+              .priority.rounded-full.flex.mr-1.5px(:class="choiceClass(status.id)")
               span {{status.name}}
       q-menu(
         v-if="svg.name === 'medcard'",
@@ -53,7 +53,7 @@
             .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7.px-2(
               v-for="medical in medicalData"
             )
-              img(:src="medical.icon")
+              q-icon(:name="medical.icon", size="20px")
               span {{medical.name}}
       q-menu.overflow-hidden(
         v-if="svg.name === 'group'",
@@ -78,13 +78,12 @@
                   iconRight
                 )
                   template(v-slot:iconLeft)
-                    q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
+                    q-icon.input-icon(name="app:search", size="16px")
                   template(v-slot:iconRight)
-                    q-icon.cursor-pointer(
+                    q-icon.cursor-pointer.input-icon(
                       @click="copyValue(foundPerson)"
-                      name="app:icon-copy",
-                      size="16px",
-                      style="color: var(--font-grey-color)"
+                      name="app:copy",
+                      size="16px"
                     )
                 q-btn.ml-2(
                   @click="sortPerson(patientsData)",
@@ -99,6 +98,7 @@
               )
                 .flex.items-center.gap-x-2
                   .all-icon.flex.items-center.justify-center
+                    //- q-icon(name="app:patients")
                     calendar-sidebar-svg.p-6px(name-svg="group", active)
                   .flex.flex-col.font-medium
                     .text-smm Все
@@ -113,12 +113,13 @@
                   img.h-10.w-10.object-cover.rounded-full(:src="person.avatar")
                   .flex.flex-col.font-medium
                     .text-smm {{trimOwnerName(person.last_name, person.first_name, person.patronymic)}}
-                    .grey-color.text.text-xsx {{person.birthday}}
+                    .grey-color.text.text-xsx {{trimBirthday(person.birthday)}}
                 img.h-6.w-6(v-if="person.check", :src="icon_ok")
               .gradient.flex.absolute(v-if="isGradient")
 </template>
 
 <script>
+import * as moment from "moment";
 import arrow from "@/assets/icons/double_left_arrow.svg";
 import icon_ok from "@/assets/icons/icon_ok.svg";
 import sort_word from "@/assets/icons/sort_word.svg";
@@ -186,6 +187,14 @@ export default {
         if (e.name === name) e.active = !e.active;
       });
     },
+    choiceClass(priority) {
+      return {
+        "none-priority": !priority,
+        "red-color": priority === 1,
+        "blue-color": priority === 2,
+        "green-color": priority === 3,
+      };
+    },
     copyValue(text) {
       navigator.clipboard.writeText(text);
     },
@@ -207,6 +216,9 @@ export default {
           this.foundPerson.toLowerCase()
       );
     },
+    trimBirthday(birthday) {
+      return moment(birthday, "DD MM YYYY").format("DD MMMM YYYY");
+    },
     choiceData(arr) {
       return this.foundPerson ? this.sortData : arr;
     },
@@ -280,7 +292,6 @@ export default {
 .status
   height: 40px
   width: 100%
-
   &:hover
     height: 40px
     background: var(--gray-thirdly)
@@ -319,6 +330,9 @@ export default {
 .input :deep(.q-field__append)
   padding-left: 6px
 
+.input-icon :deep(path)
+  fill: var(--font-grey-color)
+
 .separator
   transition: 0.1s
   opacity: 0
@@ -378,6 +392,23 @@ export default {
 
 .plus :deep(path)
   fill: var(--default-white)
+
+.priority
+  height: 15px
+  width: 15px
+
+.none-priority
+  border: 1.5px solid var(--font-grey-color)
+
+.red-color
+  background: var(--system-color-red)
+
+.blue-color
+  background: var(--btn-blue-color)
+
+.green-color
+  background: var(--system-color-green)
+
 .button-svg
   &:hover
     .svg :deep(.hover)