272 lines
9.1 KiB
Vue
272 lines
9.1 KiB
Vue
<template>
|
|
<div class="intro-y grid grid-cols-1 lg:grid-cols-2 gap-6 mt-5">
|
|
<!-- BEGIN: Legalization -->
|
|
<PreviewComponent class="intro-y box flex flex-col">
|
|
<div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
|
|
<h2 class="font-medium text-base mr-auto">{{ $t('LEGALIZATION') }}</h2>
|
|
<div class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0 text-center">
|
|
<a href="javascript:;" @click.prevent="onLegalBtnTapped" class="btn btn-primary">
|
|
<EditIcon class="w-4 h-4 mr-3" /> {{ $t(legalBtnTitle) }}
|
|
<LoadingIcon icon="oval" color="white" class="w-4 h-4 ml-2" v-if="isLegalBtnLoading" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="p-5 border-b border-slate-200/60 dark:border-darkmode-400">
|
|
<div class="flex flex-col md:flex-row min-h-max">
|
|
<div class="flex-1">
|
|
<!-- Begin column -->
|
|
<div class="sm:flex m-2 items-center">
|
|
<div class="sm:w-1/4 font-medium">{{ $t('LEG_NUM') }}:</div>
|
|
<div class="sm:w-3/4 sm:pl-3">{{ legal.number }}</div>
|
|
</div>
|
|
<div class="sm:flex m-2 items-center">
|
|
<div class="sm:w-1/4 font-medium">{{ $t('EXP_DATE') }}:</div>
|
|
<div class="sm:w-3/4 sm:pl-3">{{ legal.expires_at }}</div>
|
|
</div>
|
|
</div>
|
|
<!-- End column -->
|
|
</div>
|
|
</div>
|
|
<!-- <div v-if="!legalNumber" class="flex flex-row items-center p-5">
|
|
<InfoIcon class="w-6 h-6 w-14 text-danger mr-4" />
|
|
<span class="font-medium text-danger">{{ $t('LEG_WARN_INFO') }}</span>
|
|
</div> -->
|
|
</PreviewComponent>
|
|
<!-- END: Legalization -->
|
|
|
|
|
|
<!-- BEGIN: Broker -->
|
|
<PreviewComponent class="intro-y box flex flex-col">
|
|
<div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
|
|
<h2 class="font-medium text-base mr-auto">{{ $t('BROKER') }}</h2>
|
|
<div class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0 text-center">
|
|
<a href="javascript:;" @click.prevent="onBrokerBtnTapped" class="btn btn-primary">
|
|
<EditIcon class="w-4 h-4 mr-3" /> {{ $t(brokerBtnTitle) }}
|
|
<LoadingIcon icon="oval" color="white" class="w-4 h-4 ml-2" v-if="isBrokerBtnLoading" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="p-5 border-b border-slate-200/60 dark:border-darkmode-400">
|
|
<div class="flex flex-col md:flex-row min-h-max">
|
|
<div class="flex-1">
|
|
<!-- Begin column -->
|
|
<div class="sm:flex m-2 items-center">
|
|
<div class="sm:w-1/4 font-medium">{{ $t('LEG_NUM') }}:</div>
|
|
<div class="sm:w-3/4 sm:pl-3">{{ broker.number }}</div>
|
|
</div>
|
|
<div class="sm:flex m-2 items-center">
|
|
<div class="sm:w-1/4 font-medium">{{ $t('EXP_DATE') }}:</div>
|
|
<div class="sm:w-3/4 sm:pl-3">{{ broker.expires_at }}</div>
|
|
</div>
|
|
</div>
|
|
<!-- End column -->
|
|
</div>
|
|
</div>
|
|
<!-- <div v-if="!legalNumber" class="flex flex-row items-center p-5">
|
|
<InfoIcon class="w-6 h-6 w-14 text-danger mr-4" />
|
|
<span class="font-medium text-danger">{{ $t('LEG_WARN_INFO') }}</span>
|
|
</div> -->
|
|
</PreviewComponent>
|
|
<!-- END: Broker -->
|
|
|
|
<!-- <PreviewComponent class="box ">
|
|
Hello 3
|
|
</PreviewComponent>
|
|
<PreviewComponent class="box ">
|
|
Hello 4
|
|
</PreviewComponent> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from "vue";
|
|
import { fetchWrapper } from "@/api";
|
|
import { helper as $h } from "@/utils/helper";
|
|
import { useAuthStore } from "@/stores";
|
|
import router from "@/router";
|
|
|
|
const baseUrl = `${import.meta.env.VITE_API_URL}/api`;
|
|
|
|
const isLoading = ref(false);
|
|
|
|
const broker = reactive({});
|
|
const brokerBtnTitle = ref("");
|
|
const isBrokerBtnLoading = ref(false);
|
|
|
|
// legalization
|
|
const legal = reactive({});
|
|
const legalBtnTitle = ref("");
|
|
const isLegalBtnLoading = ref(false);
|
|
|
|
|
|
const createLegalApplication = async () => {
|
|
isLegalBtnLoading.value = true;
|
|
try {
|
|
const response = await fetchWrapper.get(`${baseUrl}/application/new`);
|
|
const data = response.data;
|
|
|
|
isLegalBtnLoading.value = false;
|
|
return true;
|
|
} catch (error) {
|
|
isLegalBtnLoading.value = false;
|
|
return false;
|
|
}
|
|
};
|
|
|
|
const createBrokerApplication = async () => {
|
|
isBrokerBtnLoading.value = true;
|
|
try {
|
|
const response = await fetchWrapper.get(`${baseUrl}/broker-application/new`);
|
|
const data = response.data;
|
|
|
|
isBrokerBtnLoading.value = false;
|
|
return true;
|
|
} catch (error) {
|
|
isBrokerBtnLoading.value = false;
|
|
return false;
|
|
}
|
|
};
|
|
|
|
const onLegalBtnTapped = async () => {
|
|
console.log("onLegalBtnTapped: ", legal.can_extend, legal.can_apply);
|
|
|
|
if (legal.can_apply || legal.can_extend) {
|
|
const response = await createLegalApplication();
|
|
if (response) router.push({ name: "documents" });
|
|
} else router.push({ name: "documents" });
|
|
};
|
|
|
|
const onBrokerBtnTapped = async () => {
|
|
console.log("onBrokerBtnTapped: ", broker.can_extend, broker.can_apply);
|
|
|
|
if (broker.can_apply || broker.can_extend) {
|
|
const response = await createBrokerApplication();
|
|
if (response) router.push({ name: "broker-applications" });
|
|
} else router.push({ name: "broker-applications" });
|
|
};
|
|
|
|
const prepareLegalBtnTitle = () => {
|
|
|
|
// statuses
|
|
|
|
// draft
|
|
// new
|
|
// accepted
|
|
// acceptedBy
|
|
// refine
|
|
// approved
|
|
// approvedBy
|
|
|
|
|
|
if (legal.can_extend) {
|
|
legalBtnTitle.value = "LEG_BTN_NULL";
|
|
return;
|
|
}
|
|
|
|
if (legal == null || legal.app_status == "" || legal.app_status == null) {
|
|
legalBtnTitle.value = "LEG_BTN_NULL";
|
|
}
|
|
else if (legal.app_status == "draft") {
|
|
legalBtnTitle.value = "LEG_BTN_DRAFT";
|
|
}
|
|
else if (legal.app_status == "new") {
|
|
legalBtnTitle.value = "LEG_BTN_NEW";
|
|
}
|
|
else if (legal.app_status == "refine") {
|
|
legalBtnTitle.value = "LEG_BTN_REFINE";
|
|
}
|
|
else if (legal.app_status == "accepted") {
|
|
// set accepted by, accepted date
|
|
legalBtnTitle.value = "LEG_BTN_ACCEPTED";
|
|
}
|
|
else if (legal.app_status == "approved") {
|
|
// set approved by. approved date
|
|
legalBtnTitle.value = "LEG_BTN_APPROVED";
|
|
}
|
|
};
|
|
|
|
const prepareBrokerBtnTitle = () => {
|
|
|
|
// statuses
|
|
|
|
// draft
|
|
// new
|
|
// accepted
|
|
// acceptedBy
|
|
// refine
|
|
// approved
|
|
// approvedBy
|
|
|
|
|
|
if (broker.can_extend) {
|
|
brokerBtnTitle.value = "BRK_BTN_NULL";
|
|
return;
|
|
}
|
|
|
|
if (broker == null || broker.app_status == "" || broker.app_status == null) {
|
|
brokerBtnTitle.value = "BRK_BTN_NULL";
|
|
}
|
|
else if (broker.app_status == "draft") {
|
|
brokerBtnTitle.value = "BRK_BTN_DRAFT";
|
|
}
|
|
else if (broker.app_status == "new") {
|
|
brokerBtnTitle.value = "BRK_BTN_NEW";
|
|
}
|
|
else if (broker.app_status == "refine") {
|
|
brokerBtnTitle.value = "BRK_BTN_REFINE";
|
|
}
|
|
else if (broker.app_status == "accepted") {
|
|
// set accepted by, accepted date
|
|
brokerBtnTitle.value = "BRK_BTN_ACCEPTED";
|
|
}
|
|
else if (broker.app_status == "approved") {
|
|
// set approved by. approved date
|
|
brokerBtnTitle.value = "BRK_BTN_APPROVED";
|
|
}
|
|
};
|
|
|
|
const fetchStatus = async () => {
|
|
console.log("fetchBroker");
|
|
try {
|
|
isLoading.value = true;
|
|
|
|
const response = await fetchWrapper.get(`${baseUrl}/account/legalization-broker-status`);
|
|
const data = response.data;
|
|
|
|
console.info("fetchBroker data: ", data);
|
|
|
|
if (data.broker) {
|
|
Object.assign(broker, data.broker);
|
|
// if (broker.expires_at) {
|
|
// // convert date format
|
|
// broker.expires_at = $h.formatDate(broker.expires_at, "DD.MM.YYYY");
|
|
// }
|
|
|
|
}
|
|
|
|
if (data.legal) {
|
|
Object.assign(legal, data.legal);
|
|
|
|
// if (legal.expires_at) {
|
|
// // convert date format
|
|
// legal.expires_at = $h.formatDate(legal.expires_at, "DD.MM.YYYY");
|
|
// }
|
|
}
|
|
|
|
prepareLegalBtnTitle();
|
|
prepareBrokerBtnTitle();
|
|
|
|
isLoading.value = false;
|
|
} catch (error) {
|
|
isLoading.value = false;
|
|
|
|
// logout on error
|
|
const authStore = useAuthStore();
|
|
await authStore.logout();
|
|
}
|
|
};
|
|
|
|
onMounted(async () => {
|
|
await fetchStatus();
|
|
});
|
|
</script> |