add create patient popup

src/components/PatientCreationForm.vue

@@ -0,0 +1,183 @@
+<template lang="pug">
+  .flex.flex-col.pt-6.gap-y-4(:style="{maxWidth: '682px'}")
+    base-input-full-name(v-model="patientData" )
+    .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",
+          :disabled="form.disabled"
+        ) {{form.title}}
+      component(
+        v-bind:is="currentForm",
+        v-model="patientData"
+      )
+  .footer.flex.gap-2
+    base-button(type="secondary", label="Отменить", width="126px", @click="$emit('close')")
+    base-button(width="168px", label="Создать", @click="createPatient")
+</template>
+
+<script>
+import { v_model } from "@/shared/mixins/v-model";
+import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo.vue";
+import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateIdentityDocuments.vue";
+import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses.vue";
+import FormCreateAttachments from "@/pages/clients/components/FormCreateAttachments.vue";
+import BaseInputFullName from "@/components/base/BaseInputFullName.vue";
+import HeaderRecordForm from "../pages/newCalendar/components/HeaderRecordForm.vue";
+import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import ServicesModal from "../pages/newCalendar/components/ServicesModal.vue";
+import { fetchWrapper } from "@/shared/fetchWrapper";
+
+const forms = [
+  {
+    title: "Основное",
+    id: "basic",
+    component: "form-create-basic-info",
+  },
+  {
+    title: "ДУЛ",
+    id: "doc",
+    component: "form-create-identity-documents",
+    disabled: true,
+  },
+  {
+    title: "Адрес",
+    id: "address",
+    component: "form-create-addresses",
+    disabled: true,
+  },
+  {
+    title: "Дополнительное",
+    id: "additional",
+    component: "form-create-attachments",
+    disabled: true,
+  },
+];
+
+export default {
+  name: "PatientCreationForm",
+  components: {
+    FormCreateBasicInfo,
+    FormCreateIdentityDocuments,
+    FormCreateAddresses,
+    FormCreateAttachments,
+    BaseInputFullName,
+    BaseCalendar,
+    HeaderRecordForm,
+    BaseButton,
+    BaseModal,
+    ServicesModal,
+  },
+  emits: ["close"],
+  mixins: [v_model],
+  data() {
+    return {
+      patientData: {
+        full_name: "",
+        phone: "",
+        birth_date: "",
+      },
+      currentForm: "form-create-basic-info",
+      forms,
+    };
+  },
+  computed: {
+    nameObject() {
+      const nameArr = this.patientData?.full_name?.split(" ");
+      return {
+        last_name: nameArr?.[0] || "",
+        first_name: nameArr?.[1] || "",
+        patronymic: nameArr?.[2] || "",
+      };
+    },
+  },
+  methods: {
+    async createPatient() {
+      const body = {
+        ...this.nameObject,
+      };
+      if (this.patientData.phone) {
+        body.contacts = [
+          {
+            category: "PHONE",
+            value: this.patientData.phone,
+          },
+        ];
+      }
+      if (this.patientData.birth_date)
+        body.birth_date = this.patientData.birth_date;
+      const data = await fetchWrapper.post("persons/", body);
+      this.$emit("close", data);
+    },
+    handleChangePatientData(val) {
+      this.patientData = { ...this.patientData, ...val };
+    },
+    selectForm(componentName) {
+      this.currentForm = this.forms.find(
+        (elem) => elem.component === componentName
+      )?.component;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.dark-blue
+  color: var(--font-dark-blue-color)
+  min-width: 50px
+
+.text
+  color: var(--font-grey-color)
+  width: 76px
+
+.change
+  background: var(--bg-light-grey)
+  color: var(--font-grey-color)
+
+.services
+  background: var(--bg-light-grey)
+  color: var(--font-grey-color)
+  width: 560px
+
+.service
+  display: -webkit-box
+  overflow: hidden
+
+.gradient
+  width: 10%
+  height: 28px
+  right: 0
+
+.other
+  width: 46px
+  background: var(--bg-light-grey)
+
+.price
+  background: var(--bg-light-grey)
+  width: 82px
+  color: var(--font-grey-color)
+
+.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)
+
+.footer
+  border-top: 1px solid var(--border-light-grey-color)
+  margin: 40px -32px 0px
+  padding: 16px 32px 0px 32px
+
+.icon :deep(path)
+  fill: var(--font-grey-color)
+</style>

src/components/base/BaseInputFullName.vue

@@ -41,7 +41,7 @@
                 padding="2px 0 0 0"
               )
                 q-icon(name="app:ok", size="20px")
-    base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО пациента*", size="M")
+    base-input.w-full(v-model="value.full_name", placeholder="ФИО пациента*", size="M")
 </template>
 
 <script>
@@ -49,11 +49,12 @@ import BaseModal from "./BaseModal.vue";
 import addImageIcon from "@/assets/icons/photo.svg";
 import BaseButton from "@/components/base/BaseButton.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
+import { v_model } from "@/shared/mixins/v-model";
 
 export default {
   name: "BaseInputFullName",
   components: { BaseModal, BaseInput, BaseButton },
-  props: { infoClient: Object },
+  mixins: [v_model],
   data() {
     return {
       defaultIcon: addImageIcon,

src/components/base/BaseInputWithSearch.vue

@@ -47,7 +47,7 @@ export default {
     BaseSelect,
   },
   mixins: [v_model],
-  emits: ["createPerson"],
+  emits: ["create-person"],
   data() {
     return {
       fullName: "",
@@ -76,7 +76,8 @@ export default {
   },
   methods: {
     createPerson() {
-      this.$emit("createPerson");
+      this.$refs?.selectRef?.hidePopup();
+      this.$emit("create-person");
     },
     filterFn(val, update) {
       fetchWrapper.get(`persons/?full_name=${val}`).then((result) => {

src/components/base/BaseSelect.vue

@@ -164,6 +164,9 @@ export default {
     updateInputValue(value, noFilter) {
       this.$refs?.selectRef?.updateInputValue(value, noFilter);
     },
+    hidePopup() {
+      this.$refs?.selectRef?.hidePopup();
+    },
   },
 };
 </script>

src/pages/clients/components/FormCreateAddresses.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
-  .wrapper-addresses.h-full
+  .wrapper-form.h-full
     .flex.flex-col.gap-y-6
       base-input(
-        v-model="addresses.full_address",
+        v-model="form.full_address",
         placeholder="Введите адрес целиком",
         label="Полный адрес",
         size="M"
@@ -12,42 +12,42 @@
         span.text-sm.separator.px-2 или
       .grid.grid-cols-2.gap-y-6.gap-x-4
         base-input(
-          v-model="addresses.city",
+          v-model="form.city",
           label="Город",
           placeholder="Введите город",
           disabled,
           size="M"
         )
         base-input(
-          v-model="addresses.region",
+          v-model="form.region",
           label="Область",
           placeholder="Введите область",
           disabled,
           size="M"
         )
         base-input(
-          v-model="addresses.street",
+          v-model="form.street",
           label="Улица",
           placeholder="Введите улицу",
           disabled,
           size="M"
         )
         base-input(
-          v-model="addresses.house",
+          v-model="form.house",
           label="Дом",
           placeholder="Номер дома",
           disabled,
           size="M"
         )
         base-input(
-          v-model="addresses.flat",
+          v-model="form.flat",
           label="Квартира",
           placeholder="Номер квартиры",
           disabled,
           size="M"
         )
         base-input(
-          v-model="addresses.zip_code",
+          v-model="form.zip_code",
           label="Индекс",
           mask="######",
           placeholder="000000",
@@ -63,17 +63,32 @@ import BaseInput from "@/components/base/BaseInput.vue";
 export default {
   name: "FormCreateAddresses",
   components: { BaseInput, BaseCustomSelect },
-  props: {
+  emits: ["change"],
-    addresses: Object,
+  data() {
-    saveClient: Function,
+    return {
-    saveFile: Function,
+      form: {
+        full_address: "",
+        city: "",
+        region: "",
+        street: "",
+        house: "",
+        flat: "",
+        zip_code: "",
+      },
+    };
+  },
+  watch: {
+    form(val) {
+      this.$emit("change", val);
+    },
   },
 };
 </script>
 
 <style lang="sass" scoped>
-.wrapper-addresses
+.wrapper-form
   height: 380px
+  width: 570px
   overflow-y: auto
   &::-webkit-scrollbar
     width: 4px

src/pages/clients/components/FormCreateAttachments.vue

@@ -2,7 +2,7 @@
   .wrapper.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
     .place.flex.flex-col.justify-center.items-center.py-3
       .upload.text-center.text-sm.flex.w-fit
-        input.hidden(@change="(e) => addAttachment(e)" type="file" id="file-upload")
+        input.hidden(@change="() => {}" type="file" id="file-upload")
         span Загрузите элемент
           label.label.cursor-pointer(for="file-upload")  с компьютера
           span  или перетащите их сюда
@@ -11,9 +11,6 @@
 <script>
 export default {
   name: "FormCreateAttachments",
-  props: {
-    addAttachment: Function,
-  },
 };
 </script>
 

src/pages/clients/components/FormCreateBasicInfo.vue

@@ -1,46 +1,21 @@
 <template lang="pug">
-  .wrapper-info.h-full
+  .wrapper-info
     .grid.grid-cols-2.gap-x-4.gap-y-6
-      base-select(
-        :items="priorityList",
-        placeholder="Приоритет клиента",
-        v-model="basicInfo.priority",
-        label="Приоритет",
-        size="M"
-      )
       base-input-date(
-        v-model="basicInfo.birth_date",
+        v-model="value.birth_date",
         size="M",
         important,
         label="Дата рождения",
         placeholder="Дата рождения"
       )
       base-input(
-        v-model="phone.username",
+        v-model="value.phone",
         placeholder="+7 (915) 644–92–23",
         mask="+7 (###) ###-##-##",
         label="Номер телефона",
         size="M",
         important
       )
-      base-input(
-        v-model="email.username",
-        placeholder="user@yandex.ru",
-        label="Email",
-        important,
-        size="M",
-      )
-      .flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5")
-        span.text-sm.font-semibold.opacity-40.input-info Ссылки на соцсети
-        .flex(class="gap-x-1.5" v-for="network in basicInfo.contacts" :key="network.kind.id")
-          base-adding-network(
-            :items="networksList",
-            :network="network",
-          )
-        span.add-network.cursor-pointer(
-          v-show="networksList.length !== 0",
-          @click="addNetwork"
-        ) Добавить соцсеть
 </template>
 
 <script>
@@ -48,6 +23,7 @@ import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
 import BaseSelect from "@/components/base/BaseSelect";
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputDate from "@/components/base/BaseInputDate.vue";
+import { v_model } from "@/shared/mixins/v-model";
 
 export default {
   name: "FormCreateBasicInfo",
@@ -57,22 +33,12 @@ export default {
     BaseSelect,
     BaseInputDate,
   },
-  props: {
+  mixins: [v_model],
-    priorityList: Array,
-    phone: Object,
-    email: Object,
-    basicInfo: Object,
-    saveClient: Function,
-    addNetwork: Function,
-    networksList: Array,
-  },
 };
 </script>
 
 <style lang="sass" scoped>
 .wrapper-info
-  max-height: 336px
-  min-height: 272px
   overflow-y: auto
   &::-webkit-scrollbar
     width: 4px

src/pages/clients/components/FormCreateIdentityDocuments.vue

@@ -4,27 +4,27 @@
       span.title-info.text-base.font-bold Паспортные данные
       .grid.grid-cols-2.gap-x-4.gap-y-6
         base-input(
-          v-model="identityDocument.pass.series_number",
+          v-model="form.series_number",
           mask="#### ######",
           placeholder="0000 000000",
           label="Серия и номер",
           size="M"
         )
         base-input(
-          v-model="identityDocument.pass.issued_by_org",
+          v-model="form.issued_by_org",
           placeholder="Точно как в паспорте",
           label="Кем выдан",
           size="M"
         )
         base-input(
-          v-model="identityDocument.pass.issued_by_org_code",
+          v-model="form.issued_by_org_code",
           mask="###-###",
           placeholder="000–000",
           label="Код подразделения",
           size="M"
         )
         base-input-date(
-          v-model="identityDocument.pass.issued_by_date",
+          v-model="form.issued_by_date",
           placeholder="Дата",
           label="Дата выдачи",
           size="M"
@@ -33,7 +33,7 @@
       span.title-info.text-base.font-bold СНИЛС и ИНН
       .grid.grid-cols-2.gap-x-4.gap-y-6
         base-input(
-          v-model="identityDocument.snils.number",
+          v-model="form.snils",
           mask="###-###-### ##",
           placeholder="000–000–000 00",
           label="Номер СНИЛС",
@@ -41,7 +41,7 @@
           size="M"
         )
         base-input(
-          v-model="identityDocument.inn.number",
+          v-model="form.inn",
           placeholder="000000000000",
           mask="############",
           label="Номер ИНН",
@@ -57,9 +57,23 @@ import BaseInputDate from "@/components/base/BaseInputDate.vue";
 export default {
   name: "FormCreateIdentityDocuments",
   components: { BaseInput, BaseInputDate },
-  props: {
+  emits: ["change"],
-    identityDocument: Object,
+  data() {
-    saveClient: Function,
+    return {
+      form: {
+        series_number: "",
+        issued_by_org: "",
+        issued_by_org_code: "",
+        issued_by_date: "",
+        snils: "",
+        inn: "",
+      },
+    };
+  },
+  watch: {
+    form(val) {
+      this.$emit("change", val);
+    },
   },
 };
 </script>

src/pages/newCalendar/TheCalendar.vue

@@ -3,7 +3,7 @@
     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")
-    base-modal(v-model="isShowForm", title="Создание записи <Переделка>", modal-padding)
+    base-modal(v-model="isShowForm", title="Создание записи", modal-padding)
       create-event-form(:close-form="closeForm")
     base-modal(v-model="previewVisibility", :hideHeader="true", :modalPadding="true")
       calendar-record-preview(v-model:preview-visibility="previewVisibility")

src/pages/newCalendar/components/CreateEventForm.vue

@@ -6,7 +6,7 @@
     :choice-status="choiceStatus"
     v-model="time"
   )
-  base-input-with-search(v-model="patient", @createPerson="createPerson")
+  base-input-with-search(v-model="patient", @create-person="createPerson")
   .flex.flex-col.flex-auto.l.gap-y-8
     .wrapper-info.h-full
       .grid.grid-cols-2.gap-x-4.gap-y-6
@@ -31,6 +31,8 @@
   .footer.flex.gap-2
     base-button(type="secondary", label="Отменить", width="126px", @click="closeForm")
     base-button(width="168px", label="Создать запись", @click="createEvent")
+  base-modal(v-model="showCreateModal", title="Создать пациента", modal-padding)
+    patient-creation-form(@close="handleClosePatientForm")
 </template>
 
 <script>
@@ -43,6 +45,8 @@ import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputDate from "@/components/base/BaseInputDate.vue";
 import { fetchWrapper } from "@/shared/fetchWrapper";
 import { mapActions } from "vuex";
+import PatientCreationForm from "@/components/PatientCreationForm.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
 
 export default {
   name: "CreateEventForm",
@@ -53,6 +57,8 @@ export default {
     BaseInputWithSearch,
     BaseInput,
     BaseInputDate,
+    PatientCreationForm,
+    BaseModal,
   },
   props: { isShowForm: Boolean, closeForm: Function },
   data() {
@@ -63,6 +69,7 @@ export default {
       time: {},
       patientData: patientData,
       currentStatus: patientData.statuses.find((e) => e.name === "Не принят"),
+      showCreateModal: false,
     };
   },
   computed: {
@@ -75,12 +82,17 @@ export default {
       getEvents: "getEvents",
     }),
     createPerson() {
-      alert("crea");
+      this.showCreateModal = true;
     },
 
     choiceStatus(e) {
       this.currentStatus = e;
     },
+    handleClosePatientForm(val) {
+      this.showCreateModal = false;
+      if (!val) return;
+      this.patient = val;
+    },
     async createEvent() {
       const event = await fetchWrapper.post("events", {
         start: this.time.start.toISOString(),

src/pages/newCalendar/components/del_RecordCreationForm copy.vue

@@ -1,264 +0,0 @@
-<template lang="pug">
-  .flex.flex-col.pt-6.gap-y-4(:style="{maxWidth: '682px'}")
-    header-record-form(
-      :current-status="currentStatus",
-      :statuses="patientData.statuses",
-      :choice-status="choiceStatus"
-    )
-    .flex.items-center.gap-x-3.text-smm
-      .text.font-semibold Жалобы:
-      .flex.gap-x-1
-        .services.flex.items-center.px-4.font-medium.text-smm.gap-x-1.h-9.rounded-md(
-          :class="{'other-serivices': services.length}"
-        )
-          .service.flex.gap-x-1.items-center.rounded.relative(
-            :style="{ width: otherColor ? '415px' : 'full'}"
-          )
-            span(v-if="!services.length") Выберите услуги
-            .dark-blue.flex.px-4.items-center.rounded.h-7(
-              id="service",
-              v-else,
-              v-for="service in services",
-              :style="{background: service.color}"
-            ) {{service.title}}
-            .gradient.flex.absolute(
-              :style="{background: `linear-gradient(270deg, ${otherColor} 0%, rgba(247, 217, 255, 0) 100%)`}"
-            )
-          .other.flex.h-7.items-center.justify-center.rounded(v-if="otherColor") {{`+${otherServices.length}`}}
-        .price.flex.items-center.items-center.justify-center.rounded-md(v-if="services.length") {{sumService}}
-        q-btn.change.flex.w-7.h-9.rounded-md(@click="isShowServices = true", dense, padding="4px 4px")
-          q-icon.icon(name="app:folder", size="20px")
-        base-modal(v-model="isShowServices", title="Услуги", modal-padding)
-          services-modal(:close-services="closeServices", :save-services="saveServices")
-    base-input-full-name(:info-client="patientData")
-    .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="patientData.basic",
-        :phone="patientData.phone",
-        :email="patientData.email",
-        :add-network="addNewNetwork",
-        :priority-list="patientData.priorityList",
-        :identity-document="patientData.identity_document",
-        :addresses="patientData.addresses",
-        :save-file="saveDocFile",
-        :networks-list="getNetworksList",
-      )
-  .footer.flex.gap-2
-    base-button(type="secondary", label="Отменить", width="126px", @click="closeForm")
-    base-button(width="168px", label="Создать запись", @click="closeForm", disabled)
-</template>
-
-<script>
-import folder from "@/assets/icons/folder.svg";
-import { column } from "@/pages/clients/utils/tableConfig";
-import { v_model } from "@/shared/mixins/v-model";
-import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo";
-import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateIdentityDocuments";
-import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
-import FormCreateAttachments from "@/pages/clients/components/FormCreateAttachments.vue";
-import BaseInputFullName from "@/components/base/BaseInputFullName.vue";
-import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
-import HeaderRecordForm from "./HeaderRecordForm.vue";
-import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
-import BaseButton from "@/components/base/BaseButton.vue";
-import BaseModal from "@/components/base/BaseModal.vue";
-import ServicesModal from "./ServicesModal.vue";
-
-export default {
-  name: "RecordCreationForm",
-  components: {
-    FormCreateBasicInfo,
-    FormCreateIdentityDocuments,
-    FormCreateAddresses,
-    FormCreateAttachments,
-    BaseInputFullName,
-    BaseCalendar,
-    HeaderRecordForm,
-    BaseButton,
-    BaseModal,
-    ServicesModal,
-  },
-  props: { isShowForm: Boolean, closeForm: Function },
-  mixins: [v_model],
-  data() {
-    return {
-      folder,
-      isPhoto: false,
-      patientData: patientData,
-      currentStatus: patientData.statuses.find((e) => e.name === "Не принят"),
-      services: [
-        { id: 0, title: "Чистка зубов", price: 500, color: "#D8E3FF" },
-        { id: 1, title: "Осмотр", price: 1300, color: "#FFF0CA" },
-        {
-          id: 2,
-          title: "Лечение среднего кариеса",
-          price: 500,
-          color: "#F7D9FF",
-        },
-        { id: 3, title: "Осмотр зубов", price: 1300, color: "#FFF0CA" },
-      ],
-      forms: [
-        {
-          title: "Основное",
-          id: "basic",
-          component: "form-create-basic-info",
-        },
-        {
-          title: "ДУЛ",
-          id: "doc",
-          component: "form-create-identity-documents",
-        },
-        {
-          title: "Адрес",
-          id: "address",
-          component: "form-create-addresses",
-        },
-        {
-          title: "Дополнительное",
-          id: "additional",
-          component: "form-create-attachments",
-        },
-      ],
-      currentForm: "form-create-basic-info",
-      networksSettings: column.find((el) => el.name === "networks")?.settings,
-      otherColor: null,
-      otherServices: [],
-      isShowServices: false,
-    };
-  },
-  computed: {
-    getNetworksList() {
-      let contacts = [];
-      this.patientData.basic.contacts.forEach((elem) =>
-        contacts.push(elem.kind.id)
-      );
-      let filteredNetworks = this.networksSettings.filter(
-        ({ id }) => !contacts.includes(id)
-      );
-      return filteredNetworks;
-    },
-    sumService() {
-      let sum = this.services.reduce((acc, el) => acc + el.price, 0) + " ₽";
-      return sum.length >= 5
-        ? sum.replace(/(\d{1,3}(?=(?:\d\d\d)+(?!\d)))/g, "$1" + " ")
-        : sum;
-    },
-  },
-  methods: {
-    changePhoto() {
-      this.isPhoto = true;
-    },
-    selectForm(componentName) {
-      this.currentForm = this.forms.find(
-        (elem) => elem.component === componentName
-      )?.component;
-    },
-    saveDocFile(e) {
-      this.patientData.doc = e.target.files;
-    },
-    addNewNetwork() {
-      const newNetwork = this.getNetworksList;
-      if (newNetwork[0])
-        this.patientData.basic.contacts.push({
-          kind: {
-            id: newNetwork[0].id,
-            icon: newNetwork[0].icon,
-          },
-          username: "",
-        });
-    },
-    choiceStatus(e) {
-      this.currentStatus = e;
-    },
-    addShadow() {
-      let defaultWidth = 415;
-      const target = document.querySelectorAll("#service");
-      target.forEach((e) => {
-        defaultWidth = defaultWidth - e.offsetWidth;
-        if (defaultWidth <= 10) return this.otherServices.push(e);
-      });
-      this.otherColor = this.otherServices[0]?.style.background;
-    },
-    closeServices() {
-      this.isShowServices = false;
-    },
-    saveServices(selectedServices) {
-      this.isShowServices = false;
-      selectedServices.forEach((e) => this.services.push(e));
-    },
-  },
-  mounted() {
-    this.addShadow();
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.dark-blue
-  color: var(--font-dark-blue-color)
-  min-width: 50px
-
-.text
-  color: var(--font-grey-color)
-  width: 76px
-
-.change
-  background: var(--bg-light-grey)
-  color: var(--font-grey-color)
-
-.services
-  background: var(--bg-light-grey)
-  color: var(--font-grey-color)
-  width: 560px
-
-.service
-  display: -webkit-box
-  overflow: hidden
-
-.gradient
-  width: 10%
-  height: 28px
-  right: 0
-
-.other-serivices
-  width: 474px
-  padding: 4px
-  border: 1px solid var(--border-light-grey-color)
-  background: var(--default-white)
-
-.other
-  width: 46px
-  background: var(--bg-light-grey)
-
-.price
-  background: var(--bg-light-grey)
-  width: 82px
-  color: var(--font-grey-color)
-
-.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)
-
-.footer
-  border-top: 1px solid var(--border-light-grey-color)
-  margin: 40px -32px 0px
-  padding: 16px 32px 0px 32px
-
-.icon :deep(path)
-  fill: var(--font-grey-color)
-</style>

test/specs/test.e2e.js

@@ -8,7 +8,7 @@ describe("Smoke test", function () {
     expect(await browser.getUrl()).toMatch("/#/login");
   });
 
-  it("should display login page", async function () {
+  it("should auth to system", async function () {
     await browser.url("/");
 
     await $("#app").waitForDisplayed();