hl-core 0.0.7-beta.2 → 0.0.7-beta.20

package/components/Form/Documents.vue

@@ -0,0 +1,107 @@
+<template>
+  <section class="w-full px-[10px] pt-[14px] flex flex-col gap-2" :class="[$libStyles.scrollPage]" v-if="$dataStore.signedDocumentList && $dataStore.signedDocumentList.length">
+    <base-content-block v-for="document of $dataStore.signedDocumentList as DocumentItem[]" :key="document.id" :class="[$libStyles.textSimple]">
+      <h5 class="text-center font-medium mb-4">
+        {{ document.fileTypeName }}
+      </h5>
+      <div :class="[$libStyles.whiteBg, $libStyles.rounded]" class="p-2 h-12 flex items-center relative">
+        <span class="ml-2">{{ document.fileName }}</span>
+        <i
+          class="transition-all cursor-pointer mdi mdi-dots-vertical pl-2 mr-3 border-l-[1px] text-xl absolute right-0"
+          :class="[$libStyles.greenTextHover]"
+          @click="openPanel(document)"
+        ></i>
+      </div>
+    </base-content-block>
+  </section>
+  <base-list-empty v-else></base-list-empty>
+  <Teleport v-if="$dataStore.panelAction === null" to="#panel-actions">
+    <base-fade-transition>
+      <div :class="[$libStyles.flexColNav]">
+        <base-btn :disabled="documentLoading" :loading="documentLoading" text="Открыть" @click="getFile('view')"></base-btn>
+        <base-btn :disabled="documentLoading" :loading="documentLoading" text="Скачать" @click="getFile('download')"></base-btn>
+      </div>
+    </base-fade-transition>
+  </Teleport>
+</template>
+
+<script lang="ts">
+import { DocumentItem } from '@/composables/classes';
+
+export default defineComponent({
+  setup() {
+    const dataStore = useDataStore();
+    const formStore = useFormStore();
+    const currentDocument = ref<DocumentItem>(new DocumentItem());
+    const documentLoading = ref<boolean>(false);
+
+    const currentState = reactive<{ action: string; text: string }>({
+      action: '',
+      text: '',
+    });
+    const object_list = computed(() => Object.values(dataStore.signedDocumentList));
+    const unSignedList = computed(() => document_list.value.filter(doc => doc.signed === false || doc.signed === null));
+    const document_list = computed(() =>
+      object_list.value.filter(obj => {
+        if (obj.fileTypeCode === '19' || obj.fileTypeCode === '5') {
+          return obj;
+        }
+      }),
+    );
+
+    const openPanel = async (document: DocumentItem) => {
+      dataStore.panelAction = null;
+      dataStore.panel.title = document.fileTypeName!;
+      currentDocument.value = document;
+      dataStore.panel.open = true;
+    };
+
+    watch(
+      () => document_list.value,
+      () => {
+        if (document_list.value.length > 1 && unSignedList.value.length) {
+          currentState.action = 'submit';
+          currentState.text = 'Все документы подписаны';
+        } else {
+          currentState.action = 'upload';
+          currentState.text = 'Сохранить';
+        }
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    const getFile = async (type: FileActions) => {
+      if (currentDocument.value) {
+        documentLoading.value = true;
+        const fileExtension = currentDocument.value.fileName!.match(/\.([0-9a-z]+)(?:[\?#]|$)/i)![1];
+        await dataStore.getFile(currentDocument.value, type, fileExtension);
+        documentLoading.value = false;
+      }
+    };
+
+    const onInit = async () => {
+      await dataStore.getDicFileTypeList();
+      await dataStore.getSignedDocList(formStore.applicationData.processInstanceId);
+    };
+
+    onInit();
+
+    onUnmounted(() => {
+      dataStore.panel.open = false;
+      dataStore.panelAction = null;
+    });
+
+    return {
+      // State
+      documentLoading,
+      DocumentItem,
+
+      // Functions
+      openPanel,
+      getFile,
+    };
+  },
+});
+</script>

package/components/Form/FormBlock.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="pt-3 rounded-lg border-[1px]" :class="[$libStyles.whiteBg]">
+    <div class="ml-5">
+      <p :class="[$libStyles.textTitle, $libStyles.greenText]">{{ title }}</p>
+      <p v-if="!!subtitle" :class="[$libStyles.greyText, $libStyles.textSimple]">{{ subtitle }}</p>
+    </div>
+    <div class="ml-5 mt-6 grid grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7 auto-rows-fr items-center">
+      <span :class="[$libStyles.textSimple]" class="font-medium">{{ $t('form.fullName') }}</span>
+      <span :class="[$libStyles.textSimple]" class="font-medium">{{ $t('form.iin') }}</span>
+      <span :class="[$libStyles.textSimple]" class="font-medium hidden lg:block"> {{ $t('form.gender') }}</span>
+      <span :class="[$libStyles.textSimple]" class="font-medium"> {{ $t('form.birthDate') }} </span>
+      <span :class="[$libStyles.textSimple]" class="font-medium hidden lg:block">{{ $t('form.Country') }} </span>
+      <span :class="[$libStyles.textSimple]" class="font-medium hidden lg:block"> {{ $t('code') }}</span>
+    </div>
+    <div v-if="isMultiple" class="ml-5 flex flex-col">
+      <div v-for="(each, index) of member" :key="index" class="grid grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7 auto-rows-fr items-center relative">
+        <span :class="[getMemberInfo(each).fullName === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(each).fullName }}</span>
+        <span :class="[getMemberInfo(each).iin === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(each).iin }}</span>
+        <span :class="[getMemberInfo(each).gender === null && $libStyles.emptyBlockCol]" class="hidden lg:block">{{ getMemberInfo(each).gender }} </span>
+        <span :class="[getMemberInfo(each).birthDate === null && $libStyles.emptyBlockCol]"> {{ getMemberInfo(each).birthDate }} </span>
+        <span :class="[getMemberInfo(each).birthPlace === null && $libStyles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(each).birthPlace }} </span>
+        <span :class="[getMemberInfo(each).sectorCode === null && $libStyles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(each).sectorCode }} </span>
+        <div
+          class="rounded-br-lg transition-all h-[70px] w-[60px] place-self-end cursor-pointer"
+          :class="[$libStyles.blueBgLight, $libStyles.blueBgLightHover]"
+          @click="$emit('onMore', { whichForm, index })"
+        >
+          <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"> </i>
+        </div>
+      </div>
+    </div>
+    <div v-else class="ml-5 grid grid-cols-4 md:gap-5 md:grid-cols-4 lg:grid-cols-7 auto-rows-fr items-center relative">
+      <span :class="[getMemberInfo(member).fullName === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(member).fullName }}</span>
+      <span :class="[getMemberInfo(member).iin === null && $libStyles.emptyBlockCol]">{{ getMemberInfo(member).iin }}</span>
+      <span :class="[getMemberInfo(member).gender === null && $libStyles.emptyBlockCol]" class="hidden lg:block">{{ getMemberInfo(member).gender }} </span>
+      <span :class="[getMemberInfo(member).birthDate === null && $libStyles.emptyBlockCol]"> {{ getMemberInfo(member).birthDate }} </span>
+      <span :class="[getMemberInfo(member).birthPlace === null && $libStyles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(member).birthPlace }} </span>
+      <span :class="[getMemberInfo(member).sectorCode === null && $libStyles.emptyBlockCol]" class="hidden lg:block"> {{ getMemberInfo(member).sectorCode }} </span>
+      <div
+        class="rounded-br-lg transition-all h-[70px] w-[60px] place-self-end cursor-pointer"
+        :class="[$libStyles.blueBgLight, $libStyles.blueBgLightHover]"
+        @click="$emit('onMore', { whichForm })"
+      >
+        <i class="mdi mdi-dots-vertical text-xl absolute top-[20px] right-[20px]"> </i>
+      </div>
+    </div>
+    <div
+      v-if="isMultiple && more"
+      :class="[$libStyles.blueBg, $libStyles.whiteText, $libStyles.textSimple]"
+      class="cursor-pointer rounded-b-lg h-[36px] flex items-center font-medium justify-center"
+      @click="memberStore.addMember(whichForm)"
+    >
+      {{ $t('buttons.add') }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Member } from '@/composables/classes';
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    subtitle: {
+      type: String,
+      default: '',
+    },
+    whichForm: {
+      type: String as PropType<MemberFormTypes>,
+      default: '',
+    },
+    more: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['onMore', 'addMember'],
+  setup(props) {
+    const dataStore = useDataStore();
+    const formStore = useFormStore();
+    const memberStore = useMemberStore();
+    const multipleMembers = ['insuredForm', 'beneficiaryForm', 'beneficialOwnerForm'];
+    const isMultiple = ref(multipleMembers.includes(props.whichForm));
+    const member: Member = formStore[props.whichForm as MemberKeys];
+
+    const getMemberInfo = (memberData: Member) => {
+      return {
+        fullName: computed(() => (memberData && memberData.getFullNameShorted() ? memberData.getFullNameShorted() : null)).value,
+        iin: computed(() => (memberData && memberData.iin ? memberData.iin : null)).value,
+        gender: computed(() => (memberData && memberData.gender.nameRu ? (memberData.gender.nameRu as string).charAt(0) : null)).value,
+        birthDate: computed(() => (memberData && memberData.birthDate ? memberData.birthDate : null)).value,
+        birthPlace: computed(() => (memberData && memberData.birthPlace.nameRu ? (memberData.birthPlace.nameRu as string).substring(0, 3) : null)).value,
+        sectorCode: computed(() => (memberData && memberData.economySectorCode.ids ? (memberData.economySectorCode.ids as string).slice(-1) : null)).value,
+      };
+    };
+
+    return {
+      // State
+      formStore,
+      memberStore,
+      member,
+      isMultiple,
+
+      // Computed
+
+      // Functions
+      getMemberInfo,
+    };
+  },
+});
+</script>

package/components/Form/FormSection.vue

@@ -0,0 +1,18 @@
+<template>
+  <section :class="[$libStyles.blueBgLight, $libStyles.rounded]" class="mt-[14px] p-4 flex flex-col gap-[1px]">
+    <h2 :class="[$libStyles.textTitle]" class="font-medium text-center w-full mb-4">{{ title }}</h2>
+    <slot></slot>
+  </section>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: 'Заголовок',
+      required: true,
+    },
+  },
+});
+</script>

package/components/Form/FormTextSection.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="flex flex-col justify-between rounded-lg" :class="[$libStyles.whiteBg]">
+    <span v-if="title" class="p-4" :class="[$libStyles.textTitle]">{{ title }}</span>
+    <span v-if="subtitle" class="p-4 text-[#99A3B3] border-t-[1px]" :class="[$libStyles.textSimple]">{{ subtitle }}</span>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+    },
+    subtitle: {
+      type: String,
+    },
+  },
+});
+</script>

package/components/Form/FormToggle.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="h-[74px] !pl-2 md:!pl-5 flex items-center justify-start gap-4"
+    :class="[$libStyles.whiteBg, hasBorder ? 'border-[1px] rounded-lg' : 'border-b-[1px] border-b-[#f3f6fc] rounded']"
+  >
+    <v-switch class="base-toggle" :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)" color="#009C73" hide-details :disabled="disabled"> </v-switch>
+    <p :class="[$libStyles.textSimple]">{{ `${title}` }}</p>
+    <p class="mr-3" :class="[modelValue ? $libStyles.greenText : '', $libStyles.textSimple]">{{ `${modelValue ? $dataStore.t('confirm.yes') : $dataStore.t('confirm.no')}` }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    hasBorder: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ['update:modelValue'],
+});
+</script>
+
+<style>
+.v-input.base-toggle {
+  width: fit-content;
+  flex: unset !important;
+}
+</style>