282 lines
11 KiB
Vue
282 lines
11 KiB
Vue
<template>
|
|
<div class="intro-y flex items-center mt-8">
|
|
<h2 class="text-lg font-medium mr-auto">Entrepreneur</h2>
|
|
</div>
|
|
<div class="grid grid-cols-12 gap-6 mt-5">
|
|
<div class="intro-y col-span-12 lg:col-span-6">
|
|
<!-- BEGIN: Form Validation -->
|
|
<PreviewComponent class="intro-y box">
|
|
<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">Company Form</h2>
|
|
</div>
|
|
<div class="p-5">
|
|
<!-- BEGIN: Validation Form -->
|
|
<form class="validate-form" @submit.prevent="onRegister">
|
|
<!-- Begin name -->
|
|
<div class="input-form">
|
|
<label for="validation-form-6" class="form-label w-full flex flex-col sm:flex-row">
|
|
Name
|
|
<span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required, at least 10 characters</span>
|
|
</label>
|
|
<input type="text" id="validation-form-6" v-model.trim="validate.name.$model" class="form-control"
|
|
:class="{ 'border-danger': validate.name.$error }" name="name" placeholder="Type company name" />
|
|
<template v-if="validate.name.$error">
|
|
<div v-for="(error, index) in validate.name.$errors" :key="index" class="text-danger mt-2">
|
|
{{ error.$message }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<!-- End name -->
|
|
|
|
<!-- Begin Short name -->
|
|
<div class="input-form mt-3">
|
|
<label for="validation-form-6" class="form-label w-full flex flex-col sm:flex-row">
|
|
Short name
|
|
<span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required</span>
|
|
</label>
|
|
<input type="text" id="validation-form-6" v-model.trim="validate.short_name.$model" class="form-control"
|
|
:class="{ 'border-danger': validate.short_name.$error }" name="short_name"
|
|
placeholder="Type company short name" />
|
|
<template v-if="validate.short_name.$error">
|
|
<div v-for="(error, index) in validate.short_name.$errors" :key="index" class="text-danger mt-2">
|
|
{{ error.$message }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<!-- End Short name -->
|
|
|
|
<!-- Begin Registration number -->
|
|
<div class="input-form mt-3">
|
|
<label for="validation-form-6" class="form-label w-full flex flex-col sm:flex-row">
|
|
Registration number
|
|
<span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required</span>
|
|
</label>
|
|
<input type="text" id="validation-form-6" v-model.trim="validate.registration_number.$model"
|
|
class="form-control" :class="{
|
|
'border-danger': validate.registration_number.$error,
|
|
}" name="registration_number" placeholder="Type registration number" />
|
|
<template v-if="validate.registration_number.$error">
|
|
<div v-for="(error, index) in validate.registration_number.$errors" :key="index"
|
|
class="text-danger mt-2">
|
|
{{ error.$message }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<!-- End Registration number -->
|
|
|
|
<!-- Begin Registration Date -->
|
|
<div class="input-form mt-3">
|
|
<label for="validation-form-2" class="form-label w-full flex flex-col sm:flex-row">
|
|
Registration Date
|
|
<span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required</span>
|
|
</label>
|
|
<!-- <input
|
|
id="validation-form-2"
|
|
v-model.trim="validate.account_date.$model"
|
|
type="text"
|
|
name="account_date"
|
|
class="form-control"
|
|
:class="{ 'border-danger': validate.account_date.$error }"
|
|
placeholder="Select account date"
|
|
/> -->
|
|
<!-- Begin Date picker -->
|
|
<div class="relative mx-auto mt-3">
|
|
<div
|
|
class="absolute rounded-l w-10 h-full flex items-center justify-center bg-slate-100 border text-slate-500 dark:bg-darkmode-700 dark:border-darkmode-800 dark:text-slate-400">
|
|
<CalendarIcon class="w-4 h-4" />
|
|
</div>
|
|
<Litepicker v-model="date" :options="{
|
|
maxDate: maxDate,
|
|
format: 'DD.MM.YYYY',
|
|
dropdowns: {
|
|
minYear: 1900,
|
|
maxYear: null,
|
|
months: true,
|
|
years: true,
|
|
},
|
|
}" class="form-control pl-12" />
|
|
</div>
|
|
<!-- End Date picker -->
|
|
<template v-if="validate.registration_date.$error">
|
|
<div v-for="(error, index) in validate.registration_date.$errors" :key="index" class="text-danger mt-2">
|
|
{{ error.$message }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<!-- End Registration Date -->
|
|
|
|
<!-- Begin State Registration Agency -->
|
|
<div class="input-form mt-3">
|
|
<label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
|
|
State Registration Agency
|
|
<span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required</span>
|
|
</label>
|
|
<input id="validation-form-4" v-model.trim="validate.state_registration_agency.$model" type="text"
|
|
name="state_registration_agency" class="form-control" :class="{
|
|
'border-danger': validate.state_registration_agency.$error,
|
|
}" placeholder="Type state registration agency" />
|
|
<template v-if="validate.state_registration_agency.$error">
|
|
<div v-for="(error, index) in validate.state_registration_agency
|
|
.$errors" :key="index" class="text-danger mt-2">
|
|
{{ error.$message }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<!-- End State Registration Agency -->
|
|
|
|
<!-- Begin Registration Place -->
|
|
<div class="input-form mt-3">
|
|
<label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
|
|
Registration Place
|
|
<span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required</span>
|
|
</label>
|
|
<input id="validation-form-4" v-model.trim="validate.registration_place.$model" type="text"
|
|
name="registration_place" class="form-control"
|
|
:class="{ 'border-danger': validate.registration_place.$error }"
|
|
placeholder="Type company registration place" />
|
|
<template v-if="validate.registration_place.$error">
|
|
<div v-for="(error, index) in validate.registration_place.$errors" :key="index"
|
|
class="text-danger mt-2">
|
|
{{ error.$message }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<!-- End Registration Place -->
|
|
|
|
<!-- Begin Registration Address -->
|
|
<div class="input-form mt-3">
|
|
<label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
|
|
Registration Address
|
|
<span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500">Required</span>
|
|
</label>
|
|
<input id="validation-form-4" v-model.trim="validate.registration_address.$model" type="text"
|
|
name="registration_address" class="form-control" :class="{
|
|
'border-danger': validate.registration_address.$error,
|
|
}" placeholder="Type registration address" />
|
|
<template v-if="validate.registration_address.$error">
|
|
<div v-for="(error, index) in validate.registration_address
|
|
.$errors" :key="index" class="text-danger mt-2">
|
|
{{ error.$message }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<!-- End Registration Address -->
|
|
|
|
<button type="submit" class="btn btn-primary mt-5">
|
|
Register
|
|
<LoadingIcon icon="oval" color="white" class="w-4 h-4 ml-2" v-if="isLoading" />
|
|
</button>
|
|
</form>
|
|
<!-- END: Validation Form -->
|
|
</div>
|
|
</PreviewComponent>
|
|
<!-- END: Form Validation -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, watch, ref, toRefs, onMounted } from "vue";
|
|
import { required, alpha, integer } from "@vuelidate/validators";
|
|
import { useVuelidate } from "@vuelidate/core";
|
|
import { fetchWrapper } from "@/api";
|
|
import { useRoute } from "vue-router";
|
|
import router from "@/router";
|
|
import _ from "lodash";
|
|
import { helper as $h } from "@/utils/helper";
|
|
|
|
const baseUrl = `${import.meta.env.VITE_API_URL}/api`;
|
|
|
|
const route = useRoute();
|
|
|
|
const maxDate = new Date();
|
|
|
|
const isLoading = ref(false);
|
|
|
|
const date = ref("");
|
|
|
|
const formData = reactive({
|
|
name: "",
|
|
short_name: "",
|
|
registration_number: "",
|
|
registration_date: "",
|
|
state_registration_agency: "",
|
|
registration_place: "",
|
|
registration_address: "",
|
|
});
|
|
|
|
const rules = {
|
|
name: {
|
|
required,
|
|
},
|
|
|
|
short_name: {
|
|
required,
|
|
},
|
|
|
|
registration_number: {
|
|
required,
|
|
},
|
|
|
|
registration_date: {
|
|
required,
|
|
},
|
|
|
|
state_registration_agency: {
|
|
required,
|
|
},
|
|
|
|
registration_place: {
|
|
required,
|
|
},
|
|
|
|
registration_address: {
|
|
required,
|
|
},
|
|
};
|
|
|
|
const validate = useVuelidate(rules, toRefs(formData));
|
|
|
|
watch(date, (currentValue, oldValue) => {
|
|
formData.registration_date = $h.changeDateFormat(currentValue);
|
|
});
|
|
|
|
const onRegister = async () => {
|
|
|
|
validate.value.$touch();
|
|
|
|
if (validate.value.$invalid) return;
|
|
|
|
console.log("onRegister: ", formData);
|
|
|
|
try {
|
|
isLoading.value = true;
|
|
|
|
const response = await fetchWrapper.put(
|
|
`${baseUrl}/account/profile`,
|
|
formData
|
|
);
|
|
|
|
isLoading.value = false;
|
|
console.log("response onRegister: ", response);
|
|
|
|
// refresh LS "profile"
|
|
localStorage.removeItem("profile");
|
|
localStorage.setItem("profile", JSON.stringify(formData));
|
|
|
|
router.push({ name: "profile", params: { loadFromLS: true } });
|
|
} catch (error) {
|
|
isLoading.value = false;
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
const params = JSON.parse(localStorage.getItem("profile"))
|
|
|
|
if (params) {
|
|
Object.assign(formData, params);
|
|
date.value = $h.formatDate(formData.registration_date, "DD.MM.YYYY");
|
|
}
|
|
});
|
|
</script>
|