Merge pull request #212 from dderbentsov/UC-155

[WIP] Исправил стили, добавил расписание и возможность удаления note, фикс стилей

src/assets/icons/close_circle_remove_delete_icon_149506 1 (1).svg

@@ -1,10 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2219_45392)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23.375C18.2822 23.375 23.375 18.2822 23.375 12C23.375 5.71776 18.2822 0.625 12 0.625C5.71776 0.625 0.625 5.71776 0.625 12C0.625 18.2822 5.71776 23.375 12 23.375ZM16.5459 18.8899L18.844 16.5918L14.2478 11.9956L18.8555 7.38793L16.5574 5.08984L11.9497 9.69751L7.35351 5.10131L5.05541 7.39941L9.65161 11.9956L5.06689 16.5803L7.36499 18.8784L11.9497 14.2937L16.5459 18.8899Z" fill="#FF6565"/>
-</g>
-<defs>
-<clipPath id="clip0_2219_45392">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>

src/assets/sass/variables.sass

@@ -50,6 +50,7 @@
   --btn-light-green-color: rgba(60, 217, 75, 0.2)
   --border-light-grey-color-1: rgba(211, 212, 220, 0.5)
   --bg-white-color-0: rgba(255, 255, 255, 0.3)
+  --bg-white-color-1: rgba(255, 255, 255, 0.5)
   --border-red-color: #ff6565
   --btn-grey-color: #e8e8f3
   --pagination-item-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)

src/components/TheHeader.vue

@@ -84,7 +84,7 @@ export default {
   methods: {
     logout() {
       localStorage.removeItem("tokenAccess");
-      this.$router.push("/login");
+      this.$router.go("/login");
     },
     openPopup() {
       this.showPopup = !this.showPopup;

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -126,13 +126,26 @@
             .flex.flex-col.gap-y-4(v-if="section === 'addresses' && isChange")
               client-detail-section-address(:dope-address="dopeAddress")
             .flex.flex-col.gap-y-2(v-if="section === 'additional' && isChange")
-              //- .title-section.text-xxs.font-semibold {{item.title}}
+              .flex.justify-between
-              client-detail-input.text-sm.w-max-fit(
+                .title-section.text-xxs.font-semibold Заголовок
+                .icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(
+                  v-if="isChange",
+                  :id="item.id",
+                  @click="deleteNote(item.id)"
+                )
+              client-detail-input.text-sm.w-max-fit.pr-12.relative(
+                :maxLength="40",
                 :style="{fontWeight:key === 'numba'&&600}",
                 v-model:value="sectionInfo[key].title",
                 placeholder="Заголовок"
               )
+                .text.flex.absolute.text-xsx.top-18px(
+                  class="right-2.5",
+                  :style="{color: 'var(--font-grey-color)'}"
+                ) {{`${sectionInfo[key].title.length}/40`}}
+              .title-section.text-xxs.font-semibold Описание
               client-detail-input.text-sm.w-max-fit(
+                :maxLength="40",
                 :style="{fontWeight:key === 'numba'&&600}",
                 v-model:value="sectionInfo[key].description",
                 placeholder="Описание"
@@ -193,6 +206,7 @@ export default {
     sectionInfo: Object,
     section: String,
     deleteDoc: Function,
+    deleteNote: Function,
     updateDocument: Function,
     updateAddress: Function,
     updateNotes: Function,

src/pages/clients/components/ClientDetailInfoWrapper.vue

@@ -32,7 +32,8 @@
         :section-info="dataNotes",
         :lack-notes="lackNotes",
         :create-note="createNote",
-        :update-notes="updateNotes"
+        :update-notes="updateNotes",
+        :delete-note="deleteNote"
       )
 </template>
 
@@ -47,6 +48,7 @@ export default {
     dataNotes: Array,
     saveNewDoc: Function,
     deleteDoc: Function,
+    deleteNote: Function,
     dataDocument: Object,
     updateDocument: Function,
     updateAddress: Function,

src/pages/clients/components/ClientDetailInput.vue

@@ -7,6 +7,7 @@
       :cols="24",
       @input="$emit('update:value', $event.target.value)",
       :placeholder="placeholder",
+      :maxLength="maxLength"
     )
     input.w-full.outline-0.not-italic.font-medium(
       v-else,
@@ -30,6 +31,7 @@ export default {
       default: "Поиск",
     },
     rows: Number,
+    maxLength: Number,
   },
   directives: { mask },
   computed: {

src/pages/clients/components/ClientsTableRow.vue

@@ -95,14 +95,15 @@
         :data-notes="dataNotes"
         :save-new-doc="saveNewDoc",
         :delete-doc="deleteDoc",
+        :delete-note="postDeleteNote"
         :update-document="postUpdateIdentityDocument",
         :update-address="postUpdateAddress",
         :update-notes="postUpdateNotes",
         :lack-data="lackData",
         :lack-address="lackAddress",
-        :dope-address="dopeAddress",
         :lack-attachments="lackAttachments",
-        :lack-notes="lackNotes"
+        :lack-notes="lackNotes",
+        :dope-address="dopeAddress",
         :create-address="postCreateAddress",
         :create-document="postCreateIdentityDocument",
         :create-note="postCreateNote",
@@ -433,15 +434,14 @@ export default {
       this.lackAttachments = this.dataAttachments[0]?.id ? true : false;
     },
     saveNote(data) {
-      if (data?.note[0]) {
+      this.dataNotes = data?.note.filter((e) => !e.deleted_flg);
-        this.dataNotes = [...data.note];
+      if (this.dataNotes[0]) {
         this.lackNotes = true;
       } else {
         this.lackNotes = false;
         this.dataNotes = [{ title: "", description: "" }];
       }
     },
-
     saveIdentityDocument(data) {
       if (data?.id) {
         this.docId = data.id;
@@ -659,6 +659,11 @@ export default {
             .then(() => this.fetchClientDetail(this.id));
       });
     },
+    postDeleteNote(noteId) {
+      fetchWrapper
+        .del(`general/note/${noteId}/delete/`)
+        .then(() => this.fetchClientDetail(this.id));
+    },
   },
 
   watch: {
@@ -764,5 +769,5 @@ export default {
 .closed-detail .detail
   max-height: 0
 .dots-wrapper
-  width: 36px
+  width: 53px
 </style>

src/pages/clients/components/ClientsWrapper.vue

@@ -34,4 +34,5 @@ export default {
 .wrapper
   overflow: auto
   border-top-left-radius: 4px
+  border-top-right-radius: 4px
 </style>

src/pages/clients/components/TableCreateNote.vue

@@ -16,6 +16,7 @@
 <script>
 import BaseButton from "@/components/base/BaseButton";
 import BaseInput from "@/components/base/BaseInput";
+
 export default {
   name: "TableCreateNote",
   components: { BaseButton, BaseInput },
@@ -25,7 +26,6 @@ export default {
   },
   data() {
     return {
-      username: "",
       title: "",
       description: "",
     };

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

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.box-border.px-8.pr-4.items-center.gap-x-3.w-full.text-sm(
+  .flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(
     :style="{ minWidth : width + 'px', maxWidth : width + 'px' }",
   )
     base-avatar(:size="36", :color="avatarColor", v-if="!photo") {{avatar}}

src/pages/login/TheLogin.vue

@@ -25,7 +25,7 @@
               :type="changeType",
               placeholder="Введите ваш пароль"
             )
-            img.absolute.z-10.right-4.bottom-14px.cursor-pointer(:src="changeIcon", alt="eyePassword", @click="changeView")
+            img.absolute.z-10.right-4.bottom-10px.cursor-pointer(:src="changeIcon", alt="eyePassword", @click="changeView")
           span.font-medium(:style="{color: this.redColor}", v-show="wrongData") Неверный логин или пароль
           .flex.items-center.gap-x-11px
             input.w-4.h-4.checkbox.cursor-pointer(@click="persist", type="checkbox")

src/pages/medicalCard/components/MedicalCardWrapper.vue

@@ -11,6 +11,7 @@ export default { name: "MedicalCardWrapper" };
 .wrapper
   overflow: auto
   border-top-left-radius: 4px
+  border-top-right-radius: 4px
 .wrapper-medical
   background-color: var(--default-white)
   height: calc(100vh - 64px)

src/pages/schedule/TheSchedule.vue

@@ -0,0 +1,86 @@
+<template lang="pug">
+  .wrapper.flex.w-full.relative.mx-2
+    .schedule-wrapper.relative.flex.flex-col.px-6.py-6.h-full.w-full
+      .schedule.flex-col
+        .schedule-header.flex.w-full
+          .flex.items-center(:style="{padding: '16px 102px'}")
+            .text.font-bold Сотрудник
+          .column-wrapper.flex
+            .schedule-column.flex.flex-col.items-center.justify-center.px-2(
+              v-for="day in result",
+              :style="{backgroundColor: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? 'var(--bg-white-color-1)' : ''}"
+            )
+              .day.flex {{day.format("D")}}
+              .week.flex {{day.format("ddd")}}
+        .schedule-body.flex.w-full
+          .edit.flex.items-center.justify-center.h-9.w-9
+            .flex.icon-edit
+          .name.flex
+</template>
+
+<script>
+import * as moment from "moment";
+export default {
+  name: "TheSchedule",
+  data() {
+    return {
+      days: "",
+      result: [],
+      startMonth: moment("2022-12-01"),
+    };
+  },
+  methods: {
+    changeDays() {
+      this.days = moment().daysInMonth();
+    },
+    pushMonth() {
+      this.result.push(this.startMonth);
+      for (let i = 2; i <= this.days; i++) {
+        this.result.push(this.startMonth.clone().add(i - 1, "d"));
+      }
+    },
+  },
+  mounted() {
+    this.changeDays();
+    this.pushMonth();
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  overflow: auto
+  border-top-left-radius: 4px
+  border-top-right-radius: 4px
+
+.schedule-wrapper
+  background-color: var(--default-white)
+  height: calc(100vh - 64px)
+
+.schedule
+  border: 1.5px solid var(--border-light-grey-color-1)
+  border-radius: 4px
+  min-height: 87px
+
+.schedule-header
+  height: 50px
+  background-color: #D7D9FF
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
+  border-top-left-radius: 2px
+  border-top-right-radius: 2px
+
+.column-wrapper
+  max-width: 1080px
+  overflow: auto
+
+.text
+  color: var(--btn-blue-color)
+
+.name
+  min-width: 255px
+  max-width: 255px
+  border-right: 1.5px solid var(--border-light-grey-color-1)
+
+.edit
+  border-right: 1.5px solid var(--border-light-grey-color-1)
+</style>

src/pages/settings/TheSettings.vue

@@ -1,58 +1,11 @@
 <template lang="pug">
-  div
+  the-schedule
-    v-select(:items="items", placeholder="Выберите значение", v-model="value" )
-    BaseButton(@click="showModal = true") Открыть модалку
-    base-modal(v-model="showModal", title="Тестовый заголовок окна" )
-    base-button(@click="addNotification") Добавить уведомление
-    base-loader
 </template>
 
 <script>
-import VSelect from "@/components/base/BaseSelect";
+import TheSchedule from "@/pages/schedule/TheSchedule.vue";
-import BaseModal from "@/components/base/BaseModal";
-import BaseButton from "@/components/base/BaseButton";
-import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
-import { addNotification } from "@/components/Notifications/notificationContext";
-import BaseLoader from "@/components/Loader/BaseLoader";
 export default {
   name: "TheSettings",
-  components: {
+  components: { TheSchedule },
-    BaseLoader,
-    TheNotificationProvider,
-    BaseButton,
-    BaseModal,
-    VSelect,
-  },
-  data() {
-    return {
-      items: [
-        {
-          id: "1",
-          label: "12312312",
-        },
-        {
-          id: "2",
-          label: "123123afsdfasdf12",
-        },
-        {
-          id: "3",
-          label: "123fasvcbxcvbxcvbxcvbxcvdfasdfasdfasdfasd12312",
-        },
-      ],
-      value: "",
-      showModal: false,
-    };
-  },
-  methods: {
-    addNotification() {
-      addNotification(
-        new Date().getTime(),
-        "test",
-        "test-text",
-        "warning",
-        3000
-      );
-    },
-  },
 };
 </script>

src/router.js

@@ -4,6 +4,7 @@ import TheUser from "@/pages/clients/TheClients";
 import TheSettings from "@/pages/settings/TheSettings";
 import TheLogin from "@/pages/login/TheLogin";
 import LoggedInLayout from "@/components/LoggedInLayout";
+import TheMedicalCard from "@/pages/medicalCard/TheMedicalCard";
 
 const ifNotAuthenticated = (to, from, next) => {
   if (!localStorage.getItem("tokenAccess")) {
@@ -37,6 +38,7 @@ export default createRouter({
         { path: "calendar", component: TheCalendar },
         { path: "clients", component: TheUser },
         { path: "settings", component: TheSettings },
+        { path: "medicalCard", component: TheMedicalCard },
       ],
     },
   ],

tailwind.config.js

@@ -41,6 +41,7 @@ module.exports = {
         "13px": "13px",
         "14px": "14px",
         "15px": "15px",
+        "18px": "18px",
         "19px": "19px",
         "22px": "22px",
         "23px": "23px",