Merge branch 'master' into UC-21

2022-10-21 21:39:07 +03:00
parent bd1e96a552 346238cc9f
commit 00658f25a8
21 changed files with 638 additions and 180 deletions
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -4,7 +4,7 @@
    calendar-schedule(
      :current-date="currentDate"
      :time-information="timeInformation"
-      :column-information="columnInformation"
+      :events-data="eventsData"
      @previous-date="switchPreviousDate"
      @next-date="switchNextDate"
      @selected-layout="changeCalendarLayout"
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -1,11 +1,12 @@
 <template lang="pug">
  .calendar-background-wrapper.flex.flex-col(
    ref="backgroundWrapper"
+    :class="scrollPresence"
    )
    calendar-column(
-      v-for="(owner, index) in columnInformation.owners"
-      :key="owner"
-      :column-information="owner"
+      v-for="(owner, index) in filteredOwners"
+      :key="owner.id"
+      :owner-data="owner"
      :style="calculateColumnPosition(index)"
      )
    .header(:style="backgroundExtendedWidth")
@@ -27,7 +28,7 @@ export default {
  components: { CalendarColumn },
  props: {
    hoursArray: Array,
-    columnInformation: Object,
+    eventsData: Array,
  },
  data() {
    return {
@@ -39,7 +40,7 @@ export default {
  },
  computed: {
    ownersArrayLength() {
-      return this.columnInformation.owners.length;
+      return this.filteredOwners.length;
    },
    backgroundExtendedWidth() {
      if (this.ownersArrayLength > 3) {
@@ -54,6 +55,42 @@ export default {
    backgroundHeight() {
      return (this.hoursArray.length - 1) * this.pixelsPerHour + 48;
    },
+    scrollPresence() {
+      return {
+        scroll: this.ownersArrayLength > 3,
+      };
+    },
+    filteredOwners() {
+      let filteredArray = [];
+      let ownerAbsence = {
+        id: null,
+        last_name: null,
+        first_name: null,
+        patronymic: null,
+      };
+      this.eventsData.forEach(({ employees }) => {
+        let findedElement = employees.find((elem) => elem.role === "owner");
+        let emptyObjectPresence = this.findObjectInArray(
+          filteredArray,
+          ownerAbsence
+        );
+        if (!findedElement && !emptyObjectPresence) {
+          filteredArray.push(ownerAbsence);
+        }
+        if (findedElement) {
+          let ownerPresence = this.findObjectInArray(
+            filteredArray,
+            findedElement.employee
+          );
+          if (!ownerPresence) {
+            filteredArray.push(findedElement.employee);
+          }
+        }
+      });
+      return filteredArray.sort(
+        (previous, subsequent) => Boolean(subsequent.id) - Boolean(previous.id)
+      );
+    },
  },
  methods: {
    calculateColumnPosition(elemIndex) {
@@ -74,6 +111,11 @@ export default {
    calculateBackgroundWidth() {
      this.backgroundWidth = this.$refs.backgroundWrapper.offsetWidth;
    },
+    findObjectInArray(array, object) {
+      return array.find(
+        (item) => JSON.stringify(item) === JSON.stringify(object)
+      );
+    },
  },
  mounted() {
    this.calculateBackgroundWidth();
@@ -82,10 +124,12 @@ export default {
 </script>

 <style lang="sass" scoped>
+.scroll
+  overflow-x: scroll
+
 .calendar-background-wrapper
  width: 100%
  position: relative
-  overflow-x: scroll

 .header
  height: 48px
--- a/src/pages/calendar/components/CalendarClockColumn.vue
+++ b/src/pages/calendar/components/CalendarClockColumn.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pt-9.pb-12.px-3
+  .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pt-9.pb-45px.px-3
    span.text-base(
      v-for="hour in hoursArray"
      :key="hour"
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -3,7 +3,7 @@
    .header.flex.items-center.justify-between.py-2.px-6
      .flex.items-center
        img.avatar-wrapper.mr-2(src="@/assets/images/team-member.svg" alt="Team member")
-        span.owner-name.font-medium.text-base.mr-6 {{ columnInformation }}
+        span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
        img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
      base-doc-ok-button
    div
@@ -15,7 +15,18 @@ export default {
  name: "CalendarColumn",
  components: { BaseDocOkButton },
  props: {
-    columnInformation: String,
+    ownerData: Object,
+  },
+  computed: {
+    ownerName() {
+      if (this.ownerData.id) {
+        return `${this.ownerData.last_name} ${this.ownerData.first_name.slice(
+          0,
+          1
+        )}.${this.ownerData.patronymic.slice(0, 1)}.`;
+      }
+      return null;
+    },
  },
 };
 </script>
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -17,7 +17,7 @@
          )
      calendar-background(
        :hours-array="hoursArray"
-        :column-information="columnInformation"
+        :events-data="eventsData"
        )
      .time-circle-indicator.left-74px(
        v-if="isShownIndicator"
@@ -54,10 +54,10 @@ export default {
        return {};
      },
    },
-    columnInformation: {
-      type: Object,
+    eventsData: {
+      type: Array,
      default() {
-        return {};
+        return [];
      },
    },
  },
@@ -219,7 +219,7 @@ export default {
 <style lang="sass" scoped>
 .schedule
  background-color: var(--default-white)
-  width: calc(100% - 8px)
+  width: calc(100% - 80px)

 .time-line-indicator
  width: calc(100% - 80px)
--- a/src/pages/clients/components/ClientDetailInfoSection.vue
+++ b/src/pages/clients/components/ClientDetailInfoSection.vue
@@ -1,30 +1,56 @@
 <template lang="pug">
-  .section-wrapper.flex.flex-col.h-fit(:style="{ minWidth : settings.width + 'px' }" :class="{flexRow:settings.rollFlex}")
-    .section-header.flex.items-center.justify-start.pt-4.pb-3.pl-4(:class="{styleBorder:settings.rollFlex}")
-      span.text-sm.font-semibold {{settings.title}}
+  .section-wrapper.flex.flex-col.h-fit.cursor-pointer(@dblclick="openInterfaceChange" :class="{click:isOpenChange}" :style="{ flexDirection:settings[section].rowFlex&&'row', width : settings[section].width + 'px', height : settings[section].height+'px'}")
+    .section-header.flex.items-center.justify-between.pl-4.pr-3(:class="{small:settings[section].rowFlex}")
+      span.text-sm.font-semibold.whitespace-nowrap {{settings[section].title}}
+      .flex.items-center.gap-x-8(v-if="isOpenChange")
+        base-button-ok(@click="saveChange" v-if="isChange" :size="20" :icon-size="10" :dark-style="true")
+        .edit.icon-edit.cursor-pointer.text-sm(v-if="!isChange" @click="changeClientData")
+        base-button-plus(v-if="settings[section].addFile" :size="20" :icon-size="10" :with-border="true")
    .section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4
      .flex.flex-col(v-for="(item, key) in sectionInfo" class="gap-y-1.5")
-        span.title-section.font-semibold.text-xs(v-if="settings.options") {{settings.options[key]}}
-        .flex.gap-x-4
-          .icon-files.cursor-pointer(v-if="!!item.file" style="color:red")
-          span.text-sm.text-sm.text-center.w-fit(v-if="!!item.value" :style="{fontWeight:item.copy&&600}") {{item.value}}
-          span.text-sm.text-center(v-if="!!item.file") {{item.file}}
-          .icon-copy.cursor-pointer(v-if="item.copy")
+        span.title-section.font-semibold.text-xs(v-if="settings[section].options") {{settings[section].options[key]}}
+        span.title-section.font-semibold.text-xs(v-if="item.header") {{item.header}}
+        client-detail-input.text-sm.text-sm.w-max-fit(v-if="isChange && item.value" :style="{fontWeight:item.copy&&600}" v-model:value="item.value" :width="settings[section].width")
+          .copy.icon-copy.cursor-pointer(v-if="item.copy")
+        .flex.gap-x-4(v-if="item.value && !isChange")
+          span.text-sm.w-fit(:style="{fontWeight:item.copy&&600}") {{item.value}}
+          .copy.icon-copy.cursor-pointer(v-if="item.copy")
+        .flex.gap-x-4(v-if="item.name")
+          .icon-files.cursor-pointer(:style="{color:settings.docsColor[item.type]}")
+          span.text-sm {{item.name}}
 </template>

 <script>
+import ClientDetailInput from "@/pages/clients/components/ClientDetailInput";
+import BaseButtonOk from "@/components/base/buttons/BaseButtonOk";
+import BaseButtonPlus from "@/components/base/buttons/BaseButtonPlus";
 import { detail } from "@/pages/clients/utils/tableConfig";
 export default {
  name: "ClientDetailInfoSection",
+  components: { BaseButtonPlus, BaseButtonOk, ClientDetailInput },
  props: {
    sectionInfo: Object,
    section: String,
  },
  data() {
    return {
-      settings: detail.find((el) => el.name === this.section),
+      isOpenChange: false,
+      isChange: false,
+      settings: detail,
    };
  },
+  methods: {
+    openInterfaceChange() {
+      this.isOpenChange = !this.isOpenChange;
+    },
+    changeClientData() {
+      this.isChange = true;
+    },
+    saveChange() {
+      this.isOpenChange = false;
+      this.isChange = false;
+    },
+  },
 };
 </script>

@@ -33,13 +59,32 @@ export default {
  border: 1px solid var(--border-light-grey-color)
  border-radius: 4px
  color: var(--font-dark-blue-color)
-  &.flex-row
-    flex-direction: row
+  &.click
+    background-color: var(--light-grey-bg-color)
 .section-header
+  min-height: 44px
  border-bottom: 1px solid var(--border-light-grey-color)
-  &.style-border
-    border-bottom: none
-    border-right: 1px solid var(--border-light-grey-color)
+.small
+  border-bottom: none
+  border-right: 1px solid var(--border-light-grey-color)
+  min-width: 180px
 .title-section
  color: var(--font-grey-color)
+.copy
+  color: var(--btn-blue-color)
+  opacity: 0.6
+.section-body
+  overflow-y: auto
+  &::-webkit-scrollbar
+    width: 4px
+  &::-webkit-scrollbar-track
+    background-color: rgba(211, 212, 220, 0.5)
+    border-radius: 8px
+  &::-webkit-scrollbar-thumb
+    border-radius: 8px
+    background-color: var(--btn-blue-color)
+.edit
+  color: var(--btn-blue-color)
+  &:hover
+    opacity: 0.6
 </style>
--- a/src/pages/clients/components/ClientDetailInfoWrapper.vue
+++ b/src/pages/clients/components/ClientDetailInfoWrapper.vue
@@ -1,12 +1,14 @@
 <template lang="pug">
  .w-full.h-fit.pt-4.flex.gap-x-4(class="px-[52px] pb-[30px]")
-    client-detail-info-section(:section-info="dataDetail.pass" section="pass")
+    client-detail-info-section(v-model:section-info="dataDetail.pass" section="pass")
    .flex.flex-col.gap-y-2
      client-detail-info-section(:section-info="dataDetail.snils" section="snils" )
      client-detail-info-section(:section-info="dataDetail.inn" section="inn" )
    .flex.flex-col.gap-y-2
      client-detail-info-section(:section-info="dataDetail.birthday" section="birthday")
      client-detail-info-section(:section-info="dataDetail.addresses" section="addresses")
+    client-detail-info-section(:section-info="dataDetail.docs" section="docs")
+    client-detail-info-section(:section-info="dataDetail.additional" section="additional")
 </template>

 <script>
--- a/src/pages/clients/components/ClientDetailInput.vue
+++ b/src/pages/clients/components/ClientDetailInput.vue
@@ -0,0 +1,27 @@
+<template lang="pug">
+  .input-wrapper.flex.gap-x-2.px-3.box-border.w-max-fit(class="py-2.5")
+    textarea.place-input.w-full.outline-0.text-sm.not-italic.resize-none(:rows="Math.ceil(value.length/heightInput)" :value="value" @input="$emit('update:value', $event.target.value)")
+    slot
+</template>
+
+<script>
+export default {
+  name: "ClientDetailInput",
+  props: {
+    value: String,
+    width: Number,
+  },
+  computed: {
+    heightInput() {
+      return ((this.width / 100) * 70) / 8;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.input-wrapper
+  border: 2px solid var(--border-light-grey-color)
+  border-radius: 4px
+  background-color: var(--default-white)
+</style>
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -10,7 +10,7 @@
          :id="client.id"
          :is-check="marked.includes(client.id)"
          :check="selectedCheck"
-          :full-name="client.fullName"
+          :full-name="`${client.last_name} ${client.first_name} ${client.patronymic}`"
          :age="client.age"
          :job-title="client.jobTitle"
          :priority="client.priority"
@@ -46,7 +46,7 @@ export default {
  },
  methods: {
    saveDataClients(data) {
-      this.dataClients = data.dataClients;
+      this.dataClients = data;
    },
    fetchDataClients() {
      // eslint-disable-next-line
--- a/src/pages/clients/components/ClientsTableHat.vue
+++ b/src/pages/clients/components/ClientsTableHat.vue
@@ -18,7 +18,7 @@ import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
 import BassExportButton from "@/components/base/buttons/BassExportButton";
 import BaseInput from "@/components/base/BaseInput";
 export default {
-  name: "ClientsTAbleHeader",
+  name: "ClientsTableHat",
  components: {
    BaseInput,
    BassExportButton,
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/src/pages/clients/components/ClientsTableRow.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
  .row-wrapper.flex.flex-col.w-full
-    .row-body.flex.w-full.cursor-pointer(@click="openDetailInfo")
+    .row-body.flex.w-full.cursor-pointer(:id="id" @dblclick="(e) => openDetailInfo(e)")
      .check-box.flex.justify-center.items-center
        clients-table-checkbox(:id="id" :check="check" :is-check="isCheck")
      table-cell-body-name(:value="fullName" :width="columnBody.find(el => el.name === 'fullName').width")
@@ -67,9 +67,9 @@ export default {
    meetingTime: Object,
  },
  methods: {
-    fetchClientDetail() {
+    fetchClientDetail(id) {
      // eslint-disable-next-line
-      fetch("/api/detail/1").then((res) => res.json()).then((data) => this.saveClientDetail(data))
+      fetch(`/api/detail/${id}`).then((res) => res.json()).then((data) => this.saveClientDetail(data))
    },
    saveClientDetail(data) {
      this.dataDetail = data;
@@ -78,9 +78,9 @@ export default {
      e.target.focus();
      this.isOpenPopup = !this.isOpenPopup;
    },
-    openDetailInfo() {
+    openDetailInfo(e) {
      this.isOpenDetailInfo = !this.isOpenDetailInfo;
-      this.isOpenDetailInfo && this.fetchClientDetail();
+      this.isOpenDetailInfo && this.fetchClientDetail(e.currentTarget.id);
    },
    handleUnFocusPopup() {
      this.isOpenPopup = false;
--- a/src/pages/clients/utils/tableConfig.js
+++ b/src/pages/clients/utils/tableConfig.js
@@ -60,9 +60,8 @@ export const column = [
  },
 ];

-export const detail = [
-  {
-    name: "pass",
+export const detail = {
+  pass: {
    title: "Паспортные данные",
    options: {
      number: "Серия и номер",
@@ -72,30 +71,26 @@ export const detail = [
    },
    width: 280,
  },
-  {
-    name: "snils",
+  snils: {
    title: "СНИЛС",
    options: {
      number: "Номер",
    },
    width: 180,
  },
-  {
-    name: "inn",
+  inn: {
    title: "ИНН",
    options: {
      number: "Номер",
    },
    width: 180,
  },
-  {
-    name: "birthday",
+  birthday: {
    title: "Дата рождения",
    width: 292,
-    rollFlex: true,
+    rowFlex: true,
  },
-  {
-    name: "addresses",
+  addresses: {
    title: "Адреса",
    options: {
      registrationPlace: "Адрес постоянной регистрации",
@@ -103,16 +98,21 @@ export const detail = [
    },
    width: 292,
  },
-  {
-    name: "docs",
+  docs: {
    title: "Документы",
    height: 280,
    width: 360,
+    addFile: true,
  },
-  {
-    name: "additional",
+  additional: {
    title: "Дополнительные данные",
    height: 280,
    width: 360,
+    addFile: true,
  },
-];
+  docsColor: {
+    "application/pdf": "#ff6969",
+    "application/msword": "#6993ff",
+    "application/vnd.ms-excel": "#61c57d",
+  },
+};