fix
This commit is contained in:
sajjadtalkhabi
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="cns" @click="emit('show-details', consultant)">
|
||||
<div class="cns__heading">
|
||||
<p class="cns__title">{{ consultant.title }}</p>
|
||||
<p class="cns__subtitle">شماره درخواست : {{ consultant.requestNumber }}</p>
|
||||
</div>
|
||||
|
||||
<div class="cns__meta">
|
||||
<Badge
|
||||
variant="neutral"
|
||||
size="sm"
|
||||
icon="calendar"
|
||||
:label="`زمان :`"
|
||||
:value="`${consultant.timeLabel} | ${consultant.dateLabel}`"
|
||||
/>
|
||||
<Badge :variant="tone" size="sm" dot :value="consultant.statusLabel" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import Badge from '@/global-components/Badge.vue'
|
||||
|
||||
const TONE_MAP = {
|
||||
approved: 'success',
|
||||
rejected: 'danger',
|
||||
pending: 'neutral',
|
||||
closed: 'info',
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
consultant: { type: Object, required: true },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['show-details'])
|
||||
|
||||
const tone = computed(() => TONE_MAP[props.consultant.status] || 'neutral')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cns {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 1.25rem;
|
||||
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;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 75%);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: 0.875rem 2rem;
|
||||
}
|
||||
|
||||
&__heading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
text-align: end;
|
||||
gap: 0.125rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
min-width: 7rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 400;
|
||||
font-size: 0.95rem;
|
||||
color: #4b4b4b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 400;
|
||||
font-size: 0.7rem;
|
||||
color: #4b4b4b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.5rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="rcf">
|
||||
<form class="rcf__form" @submit.prevent="onSubmit">
|
||||
<div class="rcf__row">
|
||||
<div class="rcf__cell">
|
||||
<SelectField
|
||||
v-model="form.title"
|
||||
name="title"
|
||||
label="عنوان مشاوره درخواستی"
|
||||
placeholder="انتخاب کنید"
|
||||
:options="titleOptions"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
:error="errors.title"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rcf__row">
|
||||
<div class="rcf__cell rcf__cell--full">
|
||||
<TextareaField
|
||||
v-model="form.description"
|
||||
name="description"
|
||||
label="توضیحات خود را وارد نمایید"
|
||||
placeholder="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
|
||||
:row="5"
|
||||
:error="errors.description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rcf__divider" />
|
||||
|
||||
<div class="rcf__actions">
|
||||
<BaseButton
|
||||
type="submit"
|
||||
text="درخواست مشاوره"
|
||||
custom-class="rcf__submit"
|
||||
:loading="submitting"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="arrow-left" :size="16" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as yup from 'yup'
|
||||
import { computed, ref } from 'vue'
|
||||
import useYup from '@/composables/useYup'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import SelectField from '@/components/form/SelectField.vue'
|
||||
import TextareaField from '@/components/form/TextareaField.vue'
|
||||
import { useStudentConsultantTitlesQuery } from '@/services/query/student-consultants'
|
||||
|
||||
defineProps({
|
||||
submitting: { type: Boolean, default: false },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['submit'])
|
||||
|
||||
const form = ref({
|
||||
title: '',
|
||||
description: '',
|
||||
})
|
||||
|
||||
const schema = yup.object({
|
||||
title: yup.string().required('عنوان مشاوره را انتخاب کنید'),
|
||||
description: yup
|
||||
.string()
|
||||
.trim()
|
||||
.min(5, 'توضیحات حداقل ۵ کاراکتر باشد')
|
||||
.required('توضیحات را وارد کنید'),
|
||||
})
|
||||
|
||||
const { validate, errors } = useYup(schema)
|
||||
|
||||
const { data: titles } = useStudentConsultantTitlesQuery()
|
||||
const titleOptions = computed(() => titles.value ?? [])
|
||||
|
||||
const onSubmit = async () => {
|
||||
const { isValid, payload } = await validate(form.value)
|
||||
if (!isValid) return
|
||||
emit('submit', { ...payload })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rcf {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
|
||||
&__form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
&__cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
&__divider {
|
||||
height: 0.75px;
|
||||
background: #ddd;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&__submit {
|
||||
min-width: 14rem;
|
||||
height: 2.5rem;
|
||||
padding: 0 2.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="student-consultants">
|
||||
<BoxedIconTitleBlock
|
||||
class="student-consultants__heading"
|
||||
title="مشاوره"
|
||||
desc="درخواست مشاوره جدید ثبت کنید یا تاریخچه مشاورههای خود را مشاهده نمایید."
|
||||
>
|
||||
<template #icon>
|
||||
<SvgIcon name="chat" :size="24" color="var(--color-primary)" />
|
||||
</template>
|
||||
</BoxedIconTitleBlock>
|
||||
|
||||
<TabsBlock v-model="activeTab" :tabs="tabs">
|
||||
<template #create>
|
||||
<RequestConsultantForm :submitting="createMutation.isPending.value" @submit="onSubmit" />
|
||||
</template>
|
||||
|
||||
<template #history>
|
||||
<SkeletonLoaderBlock v-if="historyLoading" :rows="3" :cols-per-row="1" />
|
||||
<div v-else-if="consultants.length > 0">
|
||||
<ConsultantItem
|
||||
v-for="consultant in consultants"
|
||||
:key="consultant.id"
|
||||
:consultant="consultant"
|
||||
@show-details="onShowDetails"
|
||||
/>
|
||||
</div>
|
||||
<NoItems v-else title="موردی نیست" desc="هنوز درخواست مشاورهای ثبت نکردهاید." />
|
||||
<PaginationBlock :pagination="historyMeta" @update:page="setHistoryPage" />
|
||||
</template>
|
||||
</TabsBlock>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { toast } from 'vue3-toastify'
|
||||
import { useQueryClient } from '@tanstack/vue-query'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import NoItems from '@/components/blocks/NoItems.vue'
|
||||
import TabsBlock from '@/components/blocks/TabsBlock.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 ConsultantItem from '@/features/student/consultants/components/ConsultantItem.vue'
|
||||
import RequestConsultantForm from '@/features/student/consultants/components/RequestConsultantForm.vue'
|
||||
import {
|
||||
studentConsultantsKeys,
|
||||
useCreateStudentConsultantMutation,
|
||||
useStudentConsultantsQuery,
|
||||
} from '@/services/query/student-consultants'
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const tabs = [
|
||||
{ name: 'create', label: 'درخواست مشاوره', icon: 'chat' },
|
||||
{ name: 'history', label: 'تاریخچه مشاوره ها', icon: 'list-bullets' },
|
||||
]
|
||||
const activeTab = ref('create')
|
||||
|
||||
const historyFilters = ref({})
|
||||
const { pagination: historyPagination, setPage: setHistoryPage } = usePagination({
|
||||
page: 1,
|
||||
perPage: 10,
|
||||
})
|
||||
|
||||
const { data: historyData, isLoading: historyLoading } = useStudentConsultantsQuery(
|
||||
historyFilters,
|
||||
historyPagination,
|
||||
{
|
||||
enabled: () => activeTab.value === 'history',
|
||||
keepPreviousData: true,
|
||||
}
|
||||
)
|
||||
|
||||
const consultants = computed(() => historyData.value?.data ?? [])
|
||||
const historyMeta = computed(() => ({
|
||||
page: historyPagination.value.page,
|
||||
perPage: historyPagination.value.perPage,
|
||||
...historyData.value?.meta,
|
||||
}))
|
||||
|
||||
const createMutation = useCreateStudentConsultantMutation()
|
||||
|
||||
const onSubmit = async (payload) => {
|
||||
try {
|
||||
await createMutation.mutateAsync(payload)
|
||||
toast.success('درخواست مشاوره با موفقیت ثبت شد.')
|
||||
await queryClient.invalidateQueries({ queryKey: studentConsultantsKeys.all })
|
||||
activeTab.value = 'history'
|
||||
} catch {
|
||||
toast.error('ثبت درخواست با خطا مواجه شد.')
|
||||
}
|
||||
}
|
||||
|
||||
const onShowDetails = () => {}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.student-consultants {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
&__heading {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user