fix
This commit is contained in:
sajjadtalkhabi
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div class="cert">
|
||||
<div class="cert__course">
|
||||
<div class="cert__thumb">
|
||||
<img v-if="certificate.thumbnailUrl" :src="certificate.thumbnailUrl" :alt="courseTitle" />
|
||||
<SvgIcon v-else name="scroll" :size="24" color="#f55d6d" />
|
||||
</div>
|
||||
<div class="cert__course-info">
|
||||
<p class="cert__title">{{ courseTitle }}</p>
|
||||
<div class="cert__teacher">
|
||||
<SvgIcon name="user" :size="11" color="#bcbcbc" />
|
||||
<span class="cert__teacher-label">استاد :</span>
|
||||
<span class="cert__teacher-name">{{ teacherName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cert__dates">
|
||||
<div class="cert__date">
|
||||
<span class="cert__date-label">تاریخ شروع :</span>
|
||||
<span class="cert__date-value">{{ certificate.startDate || '—' }}</span>
|
||||
</div>
|
||||
<span class="cert__date-divider" />
|
||||
<div class="cert__date">
|
||||
<span class="cert__date-label">تاریخ پایان :</span>
|
||||
<span class="cert__date-value">{{ certificate.endDate || '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cert__actions">
|
||||
<BaseButton
|
||||
ref="downloadBtnRef"
|
||||
text="دانلود گواهینامه"
|
||||
custom-class="cert__download-btn"
|
||||
@click="toggleMenu"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="caret-down" :size="14" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<DropdownMenu
|
||||
v-model="menuOpen"
|
||||
:reference="menuTrigger"
|
||||
:items="downloadItems"
|
||||
placement="bottom-end"
|
||||
min-width="14rem"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import DropdownMenu from '@/components/DropdownMenu.vue'
|
||||
|
||||
const props = defineProps({
|
||||
certificate: { type: Object, required: true },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['download'])
|
||||
|
||||
const courseTitle = computed(() => props.certificate.courseTitle || '—')
|
||||
const teacherName = computed(() => props.certificate.teacherName || '—')
|
||||
|
||||
const downloadBtnRef = ref(null)
|
||||
const menuTrigger = ref(null)
|
||||
const menuOpen = ref(false)
|
||||
|
||||
const toggleMenu = (event) => {
|
||||
menuTrigger.value = event.currentTarget
|
||||
menuOpen.value = !menuOpen.value
|
||||
}
|
||||
|
||||
const onDownload = (format) => {
|
||||
emit('download', { certificate: props.certificate, format })
|
||||
}
|
||||
|
||||
const downloadItems = computed(() => [
|
||||
{
|
||||
key: 'pdf',
|
||||
label: 'دانلود به صورت PDF',
|
||||
icon: 'upload',
|
||||
onClick: () => onDownload('pdf'),
|
||||
},
|
||||
{
|
||||
key: 'jpg',
|
||||
label: 'دانلود به صورت JPG',
|
||||
icon: 'upload',
|
||||
onClick: () => onDownload('jpg'),
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cert {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding: 0.875rem 1rem;
|
||||
background: rgba(255, 255, 255, 58%);
|
||||
box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
|
||||
border-radius: 0.75rem;
|
||||
margin-bottom: 0.625rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: 0.875rem 2rem;
|
||||
}
|
||||
|
||||
&__course {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
flex: 1;
|
||||
order: 3;
|
||||
min-width: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__thumb {
|
||||
width: 3rem;
|
||||
height: 3.25rem;
|
||||
border-radius: 0.625rem;
|
||||
background: #f4f4f4;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&__course-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
text-align: end;
|
||||
gap: 0.25rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 400;
|
||||
font-size: 0.95rem;
|
||||
color: #4b4b4b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__teacher {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.65rem;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
|
||||
&__teacher-label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&__teacher-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__dates {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.3rem 0.875rem;
|
||||
border-radius: 0.75rem;
|
||||
background: rgba(107, 107, 107, 4%);
|
||||
font-family: var(--font-family-fa);
|
||||
white-space: nowrap;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&__date {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
&__date-label {
|
||||
font-weight: 400;
|
||||
font-size: 0.65rem;
|
||||
color: #535353;
|
||||
}
|
||||
|
||||
&__date-value {
|
||||
font-family: var(--font-family-en);
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
color: #5d5d5d;
|
||||
}
|
||||
|
||||
&__date-divider {
|
||||
width: 1px;
|
||||
height: 0.55rem;
|
||||
background: #dadada;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
order: 1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
&__download-btn {
|
||||
min-width: 9rem;
|
||||
height: 2rem;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="student-certificates">
|
||||
<BoxedIconTitleBlock
|
||||
class="student-certificates__heading"
|
||||
title="گواهینامه های شما"
|
||||
desc="در این قسمت شما میتوانید گواهینامه هر دوره ای را که گذرانده اید را مشاهده کنید."
|
||||
>
|
||||
<template #icon>
|
||||
<SvgIcon name="scroll" :size="24" color="var(--color-primary)" />
|
||||
</template>
|
||||
</BoxedIconTitleBlock>
|
||||
|
||||
<SimpleTitleIconBlock title="گواهینامه های شما" class="student-certificates__section-title">
|
||||
<template #header-icon>
|
||||
<SvgIcon name="list-bullets" :size="16" color="#bcbcbc" />
|
||||
</template>
|
||||
</SimpleTitleIconBlock>
|
||||
|
||||
<SkeletonLoaderBlock v-if="isLoading" :rows="3" :cols-per-row="1" />
|
||||
<div v-else-if="certificates.length > 0">
|
||||
<CertificateItem
|
||||
v-for="certificate in certificates"
|
||||
:key="certificate.id"
|
||||
:certificate="certificate"
|
||||
@download="onDownload"
|
||||
/>
|
||||
</div>
|
||||
<NoItems v-else title="موردی نیست" desc="هنوز گواهینامهای ندارید." />
|
||||
<PaginationBlock :pagination="meta" @update:page="setPage" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { toast } from 'vue3-toastify'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import NoItems from '@/components/blocks/NoItems.vue'
|
||||
import { usePagination } from '@/composables/usePagination'
|
||||
import PaginationBlock from '@/components/blocks/PaginationBlock.vue'
|
||||
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
|
||||
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
|
||||
import SimpleTitleIconBlock from '@/components/blocks/SimpleTitleIconBlock.vue'
|
||||
import CertificateItem from '@/features/student/certificates/components/CertificateItem.vue'
|
||||
import {
|
||||
useDownloadStudentCertificateMutation,
|
||||
useStudentCertificatesQuery,
|
||||
} from '@/services/query/student-certificates'
|
||||
|
||||
const filters = ref({})
|
||||
const { pagination, setPage } = usePagination({ page: 1, perPage: 10 })
|
||||
|
||||
const { data, isLoading } = useStudentCertificatesQuery(filters, pagination, {
|
||||
keepPreviousData: true,
|
||||
})
|
||||
|
||||
const certificates = computed(() => data.value?.data ?? [])
|
||||
const meta = computed(() => ({
|
||||
page: pagination.value.page,
|
||||
perPage: pagination.value.perPage,
|
||||
...data.value?.meta,
|
||||
}))
|
||||
|
||||
const downloadMutation = useDownloadStudentCertificateMutation()
|
||||
|
||||
const onDownload = async ({ certificate, format }) => {
|
||||
try {
|
||||
const response = await downloadMutation.mutateAsync({ id: certificate.id, format })
|
||||
const url = response?.data?.url
|
||||
if (url && url !== '#') {
|
||||
window.open(url, '_blank')
|
||||
} else {
|
||||
toast.info('فایل گواهینامه در دسترس نیست.')
|
||||
}
|
||||
} catch {
|
||||
toast.error('دانلود گواهینامه با خطا مواجه شد.')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.student-certificates {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
&__heading {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
&__section-title {
|
||||
margin-block: 0.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user