jcloude/dashboard/src/components/partners/LinkCertificate.vue
2025-12-23 23:05:39 +08:00

107 lines
2.5 KiB
Vue

<template>
<div>
<Dialog
:show="show"
v-model="show"
:options="{ title: 'Link Certificate' }"
>
<template #body-content>
<p class="pb-3 text-p-base">Enter the details to link a certificate.</p>
<FormControl
class="py-2"
name="certificate_type"
type="select"
:options="courseTypes"
label="Certificate Type"
v-model="certificateType"
@change="emailChange"
/>
<FormControl
class="pt-2"
name="user_email"
type="text"
label="User Email"
v-model="userEmail"
@input="emailChange"
/>
<div class="mt-2">
<div v-if="certExist" class="text-sm text-green-600" role="alert">
Found {{ certCount }} certificates with email {{ userEmail }} of
{{
courseTypes.find((course) => course.value === certificateType)
?.label
}}
type.
</div>
</div>
<div class="pt-4">
<Button
class="w-full"
variant="solid"
:loading="linkCertificate.loading"
label="Link Certificate"
@click="linkCertificate.submit()"
/>
</div>
</template>
</Dialog>
</div>
</template>
<script setup>
import { defineEmits, ref } from 'vue';
import { createResource, frappeRequest, debounce } from 'jingrow-ui';
import { toast } from 'vue-sonner';
const courseTypes = [
{ label: 'Framework', value: 'jingrow-developer-certification' },
{ label: 'JERP', value: 'jerp-distribution' },
];
const show = ref(true);
const userEmail = ref('');
const certificateType = ref('');
const linkCertificate = createResource({
url: 'jcloude.api.partner.send_link_certificate_request',
makeParams: () => {
return {
user_email: userEmail.value,
certificate_type: certificateType.value,
};
},
validate: () => {
if (!userEmail.value || !certificateType.value) {
throw new Error('Please select a member and certificate type');
}
},
onSuccess: () => {
show.value = false;
emit('success');
toast.success('Email has been sent to the user for linking certificate.');
},
onError: (error) => {
console.error(error);
},
});
const certCount = ref(0);
const certExist = ref(false);
const emailChange = debounce(async () => {
if (!userEmail.value) return;
let response = await frappeRequest({
url: 'jcloude.api.partner.check_certificate_exists',
params: {
email: userEmail.value,
type: certificateType.value,
},
});
if (response > 0) {
certCount.value = response;
certExist.value = true;
}
}, 500);
const emit = defineEmits(['success']);
</script>