[WIP] Добавил на форму создания записи: ФИО, Основную информацию, ДУЛ, Адрес, изображение

src/components/base/BaseInputFullName.vue

@@ -0,0 +1,95 @@
+<template lang="pug">
+  .flex.gap-x-4.h-fit
+    .flex.gap-x-3.w-full
+      q-btn(
+        color="secondary",
+        text-color="primary",
+        style="width: 40px; height: 40px",
+        rounded
+        no-caps
+        padding="0 16px"
+      )
+        q-icon(v-if="image === defaultIcon", name="app:icon-download")
+        q-avatar(v-else, size="40px", round)
+          img(:src="image")
+        q-menu(anchor="bottom middle", self="top right", v-model="showPopup")
+          .flex.flex-col.p-4.gap-y-3
+            .flex.items-center.gap-x-2.cursor-pointer(@click="changeOpenModal")
+              q-icon(name="app:computer", size="18px", color="primary")
+              span.text-smm.title Загрузить с компьютера
+            .flex.items-center.gap-x-2.cursor-pointer
+              q-icon(name="app:camera", size="18px", color="primary")
+              span.text-smm.title Сделать фото
+        base-modal(v-model="showModal", title="Загрузить изображение")
+          .flex.flex-col.items-center.justify-center(
+            :style="{padding: '153px 370px'}"
+          )
+            .avatar-wrapper.flex.relative
+              base-input(
+                circle,
+                type="file",
+                id="image-upload",
+                accept="image/*",
+                @change="(e) => previewImage(e)"
+              )
+              .avatar.flex.absolute.items-center.gap-x-6
+                img.avatar.object-cover(for="image-upload", :src="image", v-if="image")
+                q-btn(round, color="primary", @click="closeAddImage", icon="app:icon-ok")
+      base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*", outlined)
+</template>
+
+<script>
+import BaseModal from "./BaseModal.vue";
+import BaseInput from "./BaseInput.vue";
+import addImageIcon from "@/assets/icons/photo.svg";
+
+export default {
+  name: "BaseInputFullName",
+  components: { BaseModal, BaseInput },
+  props: { infoClient: Object },
+  data() {
+    return {
+      defaultIcon: addImageIcon,
+      showModal: false,
+      showPopup: false,
+      image: addImageIcon,
+    };
+  },
+  methods: {
+    closeAddImage() {
+      this.showModal = false;
+      this.showPopup = false;
+    },
+    changeOpenModal() {
+      this.showModal = true;
+      this.showPopup = false;
+    },
+    previewImage(event) {
+      let picture = event.target.files;
+      let reader = new FileReader();
+      reader.onload = (e) => {
+        this.image = e.target.result;
+      };
+      reader.readAsDataURL(picture[0]);
+    },
+  },
+  watch: {
+    showModal: function () {
+      if (this.showModal === false) {
+        this.closeAddImage();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.avatar-wrapper
+  width: 400px
+  height: 400px
+  border-radius: 50%
+
+.avatar
+  height: 100%
+  border-radius: 50%
+</style>

src/pages/newCalendar/TheCalendar.vue

@@ -3,7 +3,8 @@
     calendar-sidebar(v-if="!isOpen", :open-sidebar="openSidebar", :create-form="createForm")
     calendar-open-sidebar(v-else, :open-sidebar="openSidebar", :create-form="createForm")
     calendar-wrapper.ml-2(:open-sidebar="isOpen")
-    record-creation-form(:is-show-form="isShowForm")
+    base-modal(v-model="isShowForm", title="Создание записи")
+      record-creation-form(v-model="isShowForm")
 </template>
 
 <script>
@@ -12,6 +13,7 @@ import CalendarOpenSidebar from "@/pages/newCalendar/components/CalendarOpenSide
 import CalendarWrapper from "@/pages/newCalendar/components/CalendarWrapper";
 import RecordCreationForm from "@/pages/newCalendar/components/RecordCreationForm";
 import * as moment from "moment/moment";
+import BaseModal from "@/components/base/BaseModal.vue";
 
 export default {
   name: "TheCalendar",
@@ -20,6 +22,7 @@ export default {
     CalendarOpenSidebar,
     CalendarWrapper,
     RecordCreationForm,
+    BaseModal,
   },
   data() {
     return {

src/pages/newCalendar/components/RecordCreationForm.vue

@@ -1,5 +1,4 @@
 <template lang="pug">
-  base-modal(v-model="isShowForm", title="Создание записи")
   .flex.flex-col.pt-6.gap-y-4(:style="{maxWidth: '682px'}")
     .flex.gap-x-10
       .flex.flex-col.gap-y-4.text-smm
@@ -36,31 +35,151 @@
           .change.flex.items-center
             q-btn(dense, padding="24px 8px")
               q-icon(name="app:icon-plus", size="12px")
-      .flex.items-center.gap-x-3
+    .flex.items-center.gap-x-3.text-smm
-        .text.font-semibold.text-smm Услуги
+      .text.font-semibold Услуги:
       .flex.gap-x-1
-          .services.flex
+        .services.flex.items-center.px-4.font-medium.text
-          .change.flex.w-7.h-7
+          span Выберите услуги
+        q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
+          img(:src="folder")
+    base-input-full-name(:info-client="infoClient")
+    .flex.flex-col.flex-auto.l.gap-y-8
+      .flex
+        button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
+          v-for="form in forms",
+          @click="selectForm(form.component)",
+          :class="{active: form.component === currentForm}",
+          :key="form.id",
+          :id="form.id"
+        ) {{form.title}}
+      component(
+        v-bind:is="currentForm",
+        :basic-info="infoClient.basic",
+        :phone="infoClient.phone",
+        :email="infoClient.email",
+        :add-network="addNewNetwork",
+        :priority-list="priorityList",
+        :identity-document="infoClient.identity_document",
+        :addresses="infoClient.addresses",
+        :save-file="saveDocFile",
+        :networks-list="getNetworksList",
+      )
 </template>
 
 <script>
+import { column } from "@/pages/clients/utils/tableConfig";
+import { v_model } from "@/shared/mixins/v-model";
 import BaseModal from "@/components/base/BaseModal.vue";
 import noname from "@/assets/icons/noname.svg";
 import folder from "@/assets/icons/folder.svg";
 import time from "@/assets/icons/time.svg";
 import calendar from "@/assets/icons/calendar-grey.svg";
+import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo";
+import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateIdentityDocuments";
+import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseInputFullName from "@/components/base/BaseInputFullName.vue";
 
 export default {
   name: "RecordCreationForm",
-  components: { BaseModal },
+  components: {
+    BaseModal,
+    FormCreateBasicInfo,
+    FormCreateIdentityDocuments,
+    FormCreateAddresses,
+    BaseInput,
+    BaseInputFullName,
+  },
   props: { isShowForm: Boolean },
+  mixins: [v_model],
   data() {
-    return { noname, folder, time, calendar, isPhoto: false };
+    return {
+      noname,
+      folder,
+      time,
+      calendar,
+      isPhoto: false,
+      infoClient: {
+        basic: { contacts: [] },
+        phone: { username: "" },
+        email: { username: "" },
+        identity_document: {},
+        addresses: {},
+      },
+      forms: [
+        {
+          title: "Основное",
+          id: "basic",
+          component: "form-create-basic-info",
+        },
+        {
+          title: "ДУЛ",
+          id: "doc",
+          component: "form-create-identity-documents",
+        },
+        {
+          title: "Адрес",
+          id: "address",
+          component: "form-create-addresses",
+        },
+      ],
+      currentForm: "form-create-basic-info",
+      priorityList: [
+        {
+          id: 1,
+          label: "Высокий",
+        },
+        {
+          id: 2,
+          label: "Средний",
+        },
+        {
+          id: 3,
+          label: "Низкий",
+        },
+        {
+          id: 4,
+          label: "-",
+        },
+      ],
+      networksSettings: column.find((el) => el.name === "networks")?.settings,
+    };
+  },
+  computed: {
+    getNetworksList() {
+      let contacts = [];
+      this.infoClient.basic.contacts.forEach((elem) =>
+        contacts.push(elem.kind.id)
+      );
+      let filteredNetworks = this.networksSettings.filter(
+        ({ id }) => !contacts.includes(id)
+      );
+      return filteredNetworks;
+    },
   },
   methods: {
     changePhoto() {
       this.isPhoto = true;
     },
+    selectForm(componentName) {
+      this.currentForm = this.forms.find(
+        (elem) => elem.component === componentName
+      )?.component;
+    },
+    saveDocFile(e) {
+      this.infoClient.doc = e.target.files;
+    },
+    addNewNetwork() {
+      const newNetwork = this.getNetworksList;
+      if (newNetwork[0])
+        this.infoClient.basic.contacts.push({
+          kind: {
+            id: newNetwork[0].id,
+            icon: newNetwork[0].icon,
+          },
+          username: "",
+        });
+    },
   },
 };
 </script>
@@ -102,4 +221,14 @@ export default {
   border-radius: 6px
   height: 28px
   width: 560px
+
+.title-info
+  color: var(--font-grey-color)
+  border-bottom: 1.5px solid var(--font-grey-color)
+  &:hover
+    color: var(--btn-blue-color)
+    border-bottom: 1.5px solid var(--btn-blue-color)
+  &.active
+    color: var(--btn-blue-color)
+    border-bottom: 1.5px solid var(--btn-blue-color)
 </style>