248 lines
8.2 KiB
Vue
248 lines
8.2 KiB
Vue
<template>
|
|
<div class="intro-y flex items-center mt-8">
|
|
<h2 class="text-lg font-medium mr-auto">Profile</h2>
|
|
</div>
|
|
<div class="intro-y grid grid-cols-1 lg:grid-cols-2 gap-6 mt-5">
|
|
<!-- BEGIN: Entrepreneur -->
|
|
<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">Entrepreneur</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="onEdit(`contacts`, contacts)"
|
|
class="btn btn-primary"
|
|
><EditIcon class="w-4 h-4"
|
|
/></a>
|
|
</div>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="text-base font-medium">Personal</div>
|
|
<div class="flex flex-col md:flex-row">
|
|
<div class="flex-1">
|
|
<!-- Begin first column -->
|
|
<div class="flex m-2">
|
|
<div class="flex font-medium">Name:</div>
|
|
<div class="flex pl-2">Aman</div>
|
|
</div>
|
|
<div class="flex m-2">
|
|
<div class="flex font-medium">Surname:</div>
|
|
<div class="flex pl-2">Amanow</div>
|
|
</div>
|
|
<div class="flex m-2">
|
|
<div class="flex font-medium">Date of birth:</div>
|
|
<div class="flex pl-2">22.02.1990</div>
|
|
</div>
|
|
<div class="flex m-2">
|
|
<div class="flex font-medium">Place of birth:</div>
|
|
<div class="flex pl-2">Ashgabat</div>
|
|
</div>
|
|
</div>
|
|
<!-- End first column -->
|
|
<!-- Begin second column -->
|
|
<div class="flex-1">
|
|
<div class="flex m-2 mt-0 md:m-2">
|
|
<div class="flex font-medium">Atronomical name:</div>
|
|
<div class="flex pl-2">Ammangeldiyewic</div>
|
|
</div>
|
|
<div class="flex m-2">
|
|
<div class="flex font-medium">Citizienship ID:</div>
|
|
<div class="flex pl-2">1233141234</div>
|
|
</div>
|
|
<div class="flex m-2">
|
|
<div class="flex font-medium">VAT TAX code:</div>
|
|
<div class="flex pl-2">22.02.1990</div>
|
|
</div>
|
|
<div class="flex m-2">
|
|
<div class="flex font-medium">Registration address:</div>
|
|
<div class="flex pl-2">Ashgabat</div>
|
|
</div>
|
|
</div>
|
|
<!-- End second column -->
|
|
</div>
|
|
</div>
|
|
</PreviewComponent>
|
|
<!-- END: Entrepreneur -->
|
|
|
|
<!-- BEGIN: Contacts -->
|
|
<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">Contacts</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="onEdit(`contacts`, contacts)"
|
|
class="btn btn-primary"
|
|
><EditIcon class="w-4 h-4"
|
|
/></a>
|
|
</div>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="flex flex-col md:flex-row">
|
|
<div class="flex-1">
|
|
<!-- Begin column -->
|
|
<div class="flex m-2">
|
|
<div class="flex font-medium">Address:</div>
|
|
<div class="flex pl-2">{{ contacts.address }}</div>
|
|
</div>
|
|
<div class="flex m-2">
|
|
<div class="flex font-medium">Phone:</div>
|
|
<div class="flex pl-2">{{ contacts.phone }}</div>
|
|
</div>
|
|
<div class="flex m-2">
|
|
<div class="flex font-medium">Fax:</div>
|
|
<div class="flex pl-2">{{ contacts.fax }}</div>
|
|
</div>
|
|
<div class="flex m-2">
|
|
<div class="flex font-medium">Email:</div>
|
|
<div class="flex pl-2">{{ contacts.email }}</div>
|
|
</div>
|
|
</div>
|
|
<!-- End column -->
|
|
</div>
|
|
</div>
|
|
</PreviewComponent>
|
|
<!-- END: Contacts -->
|
|
|
|
<!-- BEGIN: Bank -->
|
|
<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">Bank</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="onEdit(`bank-account`, bankAccount)"
|
|
class="btn btn-primary"
|
|
><EditIcon class="w-4 h-4"
|
|
/></a>
|
|
</div>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="flex flex-col md:flex-row">
|
|
<div class="flex-1">
|
|
<!-- Begin column -->
|
|
<div class="flex m-2">
|
|
<div class="flex font-medium">Bank name:</div>
|
|
<div class="flex pl-2">{{ bankAccount.bank_name }}</div>
|
|
</div>
|
|
<div class="flex m-2">
|
|
<div class="flex font-medium">Country:</div>
|
|
<div class="flex pl-2">{{ bankAccount.country }}</div>
|
|
</div>
|
|
<div class="flex m-2">
|
|
<div class="flex font-medium">Account number:</div>
|
|
<div class="flex pl-2">{{ bankAccount.account_number }}</div>
|
|
</div>
|
|
<div class="flex m-2">
|
|
<div class="flex font-medium">Account Date:</div>
|
|
<div class="flex pl-2">{{ bankAccount.account_date }}</div>
|
|
</div>
|
|
<div class="flex m-2">
|
|
<div class="flex font-medium">Currency:</div>
|
|
<div class="flex pl-2">{{ bankAccount.currency }}</div>
|
|
</div>
|
|
</div>
|
|
<!-- End column -->
|
|
</div>
|
|
</div>
|
|
</PreviewComponent>
|
|
<!-- END: Bank -->
|
|
|
|
<!-- 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">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="onEdit(`contacts`, contacts)"
|
|
class="btn btn-primary"
|
|
><EditIcon class="w-4 h-4"
|
|
/></a>
|
|
</div>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="flex flex-col md:flex-row">
|
|
<div class="flex-1">
|
|
<!-- Begin column -->
|
|
<div class="flex m-2">
|
|
<div class="flex font-medium">Legalization number:</div>
|
|
<div class="flex pl-2">109090912</div>
|
|
</div>
|
|
<div class="flex m-2">
|
|
<div class="flex font-medium">Expiration date:</div>
|
|
<div class="flex pl-2">10.10.2025</div>
|
|
</div>
|
|
</div>
|
|
<!-- End column -->
|
|
</div>
|
|
</div>
|
|
</PreviewComponent>
|
|
<!-- END: Legalization -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
import router from "@/router";
|
|
import { fetchWrapper } from "@/api";
|
|
|
|
const baseUrl = `${import.meta.env.VITE_API_URL}/api`;
|
|
|
|
const route = useRoute();
|
|
|
|
const isLoading = ref(false);
|
|
|
|
const contacts = reactive({});
|
|
|
|
const bankAccount = reactive({});
|
|
|
|
const onEdit = (name, params) => {
|
|
router.push({ name: name, params: params });
|
|
};
|
|
|
|
const getAccount = async () => {
|
|
try {
|
|
isLoading.value = true;
|
|
|
|
const response = await fetchWrapper.get(`${baseUrl}/account`);
|
|
const data = response.data;
|
|
|
|
console.log("data: ", data);
|
|
|
|
isLoading.value = false;
|
|
|
|
if (data.contacts) Object.assign(contacts, JSON.parse(data.contacts));
|
|
if (data.bank_account)
|
|
Object.assign(bankAccount, JSON.parse(data.bank_account));
|
|
} catch (error) {
|
|
isLoading.value = false;
|
|
}
|
|
};
|
|
|
|
onMounted(async () => {
|
|
const params = route.params;
|
|
|
|
console.log("param: ", params.getAccount);
|
|
|
|
await getAccount();
|
|
});
|
|
</script>
|