fix: admin courses

2026-05-27 14:47:19 +03:30
parent 7eb2984f5e
commit cb86920015
50 changed files with 787 additions and 649 deletions
@@ -1,96 +1,63 @@
 <template>
-  <BasicModal width="95%" max-width="60rem" min-width="auto" :show-close-button="true">
+  <BasicModal
+    title="جزئیات جلسه"
+    title-en="details"
+    width="95%"
+    max-width="60rem"
+    min-width="auto"
+    :show-close-button="true"
+  >
    <template #default="{ close }">
      <div class="session-details">
-        <LineTitleBlock title="جزئیات جلسه" title-en="Session Details" />
-
        <SkeletonLoaderBlock v-if="isLoading" :rows="3" :cols-per-row="1" />
        <template v-else-if="session">
-          <div class="session-details__hero">
-            <div class="session-details__image">
-              <img v-if="session.image" :src="session.image" :alt="session.title" />
-              <SvgIcon v-else name="book" :size="36" color="#bcbcbc" />
-            </div>
-            <div class="session-details__hero-info">
-              <p class="session-details__title">{{ session.title || '—' }}</p>
-              <p v-if="session.course?.title" class="session-details__sub">
-                دوره: {{ session.course.title }}
-              </p>
-            </div>
-          </div>
-
          <div class="session-details__grid">
-            <LineInfoBlock title="نوع جلسه" :desc="sessionTypeLabel" />
-            <LineInfoBlock title="مدت زمان" :numeric-desc="durationLabel" />
-            <LineInfoBlock title="ترتیب" :numeric-desc="session.order ?? '—'" />
-            <LineInfoBlock title="درس‌های مرتبط" :numeric-desc="usedInTermsCount" />
-          </div>
+            <LineInfoBlock title="عنوان جلسه" :desc="session.title || '—'" />
+            <LineInfoBlock
+              title="تاریخ شروع"
+              :numeric-desc="formatJalaaliDate(session.startsAt) || '—'"
+            />
+            <LineInfoBlock
+              title="تاریخ پایان"
+              :numeric-desc="formatJalaaliDate(session.endsAt) || '—'"
+            />
+            <LineInfoBlock title="مدت زمان جلسه" :numeric-desc="durationLabel" />

-          <div v-if="hasConfig" class="session-details__config">
-            <LineTitleBlock title="تنظیمات جلسه" title-en="Session Config" />
-            <div class="session-details__grid">
-              <LineInfoBlock
-                v-if="session.sessionConfig?.startTime"
-                title="تاریخ و ساعت شروع"
-                :numeric-desc="
-                  formatJalaaliDate(session.sessionConfig.startTime) ||
-                  session.sessionConfig.startTime
-                "
-              />
-              <LineInfoBlock
-                v-if="session.sessionConfig?.location"
-                title="مکان"
-                :desc="session.sessionConfig.location"
-              />
-              <LineInfoBlock
-                v-if="session.sessionConfig?.meetingLink"
-                title="لینک جلسه"
-                :desc="session.sessionConfig.meetingLink"
-              />
-              <LineInfoBlock
-                v-if="session.sessionConfig?.platform"
-                title="پلتفرم"
-                :desc="
-                  SESSION_PLATFORM[session.sessionConfig.platform] || session.sessionConfig.platform
-                "
-              />
-              <LineInfoBlock
-                v-if="session.sessionConfig?.minWatchedPercent != null"
-                title="حداقل درصد مشاهده"
-                :numeric-desc="`${session.sessionConfig.minWatchedPercent}%`"
-              />
-              <LineInfoBlock
-                v-if="session.sessionConfig?.minReadPercent != null"
-                title="حداقل درصد مطالعه"
-                :numeric-desc="`${session.sessionConfig.minReadPercent}%`"
-              />
-              <LineInfoBlock
-                v-if="session.sessionConfig?.mustCompleteBeforeNext != null"
-                title="الزام تکمیل قبل از جلسه بعدی"
-                :desc="session.sessionConfig.mustCompleteBeforeNext ? 'بله' : 'خیر'"
-              />
-            </div>
+            <LineInfoBlock title="نوع جلسه" :desc="sessionTypeLabel" />
+            <LineInfoBlock title="دوره مرتبط" :desc="courseTitle" />
+            <LineInfoBlock title="متعلق به" :desc="termTitle" />
+            <LineInfoBlock title="محتوای جلسه" :desc="contentTypeLabel" />
          </div>

          <div v-if="session.description" class="session-details__desc">
-            <LineInfoBlock title="توضیحات" :desc="session.description" />
+            <LineInfoBlock title="توضیحات جلسه" :desc="session.description" />
          </div>

-          <div v-if="session.materials?.length" class="session-details__materials">
-            <LineTitleBlock title="فایل‌های جلسه" title-en="Materials" />
-            <ul class="session-details__materials-list">
-              <li v-for="material in session.materials" :key="material.id">
-                <a
-                  :href="material.filePath || material.fileUrl || '#'"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="session-details__file"
-                >
-                  <SvgIcon name="file" :size="16" color="var(--color-prim-gray)" />
-                  <span>{{ material.title || `فایل ${material.id}` }}</span>
-                </a>
-              </li>
-            </ul>
+          <div v-if="isOnline && session.link" class="session-details__link-row">
+            <LineInfoBlock title="لینک جلسه" :desc="session.link" />
+          </div>
+
+          <div v-if="mediaUrl || session.contentType" class="session-details__media">
+            <VideoPlayerBlock
+              v-if="session.contentType === 'video'"
+              :src="mediaUrl"
+              :video-id="session.id"
+            />
+            <VoiceRecorder
+              v-else-if="session.contentType === 'voice'"
+              :model-value="mediaUrl"
+              :disabled="true"
+            />
+            <a
+              v-else-if="mediaUrl"
+              :href="mediaUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="session-details__file"
+            >
+              <SvgIcon name="file" :size="18" color="var(--color-primary)" />
+              <span>{{ mediaFileName }}</span>
+            </a>
          </div>
        </template>
        <NoItems v-else title="یافت نشد" desc="اطلاعات این جلسه در دسترس نیست." />
@@ -98,7 +65,7 @@
        <div class="session-details__divider" />

        <div class="session-details__footer">
-          <BaseButton text="بستن" custom-class="session-details__close-btn" @click="close">
+          <BaseButton text="تایید" custom-class="session-details__close-btn" @click="close">
            <template #appendIcon>
              <SvgIcon name="arrow-left" :size="18" color="#fff" />
            </template>
@@ -117,10 +84,11 @@ import BaseButton from '@/components/BaseButton.vue'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
 import NoItems from '@/components/blocks/NoItems.vue'
 import { formatJalaaliDate } from '@/utils/date-utils'
-import { SESSION_PLATFORM, SESSION_TYPE } from '@/enums'
-import LineTitleBlock from '@/components/LineTitleBlock.vue'
+import { COURSE_CONTENT_TYPE, SESSION_TYPE } from '@/enums'
+import VoiceRecorder from '@/components/form/VoiceRecorder.vue'
 import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue'
 import { useAdminSessionQuery } from '@/services/query/admin-sessions'
+import VideoPlayerBlock from '@/components/blocks/VideoPlayerBlock.vue'
 import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'

 defineOptions({ name: 'SessionDetailsModal' })
@@ -135,20 +103,30 @@ const { data: session, isLoading } = useAdminSessionQuery(sessionId, {
 })

 const sessionTypeLabel = computed(
-  () => session.value?.sessionTypeFa || SESSION_TYPE[session.value?.sessionType] || '—'
+  () => SESSION_TYPE[session.value?.type] || session.value?.typeFa || '—'
 )

 const durationLabel = computed(() =>
  session.value?.durationMinutes == null ? '—' : `${session.value.durationMinutes} دقیقه`
 )

-const usedInTermsCount = computed(() => session.value?.usedInTerms?.length ?? 0)
+const courseTitle = computed(() => session.value?.course?.title || '—')

-const hasConfig = computed(() => {
-  const c = session.value?.sessionConfig
-  if (!c) return false
-  return Object.values(c).some((v) => v !== '' && v !== null && v !== undefined)
-})
+const termTitle = computed(
+  () => session.value?.course?.term?.title || session.value?.term?.title || '—'
+)
+
+const contentTypeLabel = computed(() => COURSE_CONTENT_TYPE[session.value?.contentType] || '—')
+
+const isOnline = computed(() => session.value?.type === 'online')
+
+const mediaUrl = computed(
+  () => session.value?.contentMedia?.url || session.value?.contentMedia?.downloadUrl || ''
+)
+
+const mediaFileName = computed(
+  () => session.value?.contentMedia?.fileName || session.value?.contentMedia?.name || 'فایل پیوست'
+)
 </script>

 <style lang="scss" scoped>
@@ -156,51 +134,6 @@ const hasConfig = computed(() => {
  width: 100%;
  text-align: start;

-  &__hero {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin: 1rem 0;
-  }
-
-  &__image {
-    width: 5rem;
-    height: 5rem;
-    border-radius: 0.5rem;
-    background: #f5f5f5;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    flex-shrink: 0;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
-  &__hero-info {
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__title {
-    font-family: var(--font-family-fa);
-    font-size: 1.1rem;
-    font-weight: 500;
-    color: #4b4b4b;
-    margin: 0 0 0.375rem;
-  }
-
-  &__sub {
-    font-family: var(--font-family-fa);
-    font-size: 0.8rem;
-    color: #838383;
-    margin: 0;
-  }
-
  &__grid {
    display: grid;
    grid-template-columns: 1fr;
@@ -211,33 +144,43 @@ const hasConfig = computed(() => {
    }

    @media (min-width: 1024px) {
-      grid-template-columns: repeat(3, 1fr);
+      grid-template-columns: repeat(4, 1fr);
    }
  }

-  &__config,
  &__desc,
-  &__materials {
-    margin-top: 1rem;
+  &__link-row {
+    margin-top: 0.5rem;
  }

-  &__materials-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+  &__link-row {
+    display: grid;
+    grid-template-columns: 1fr;
+
+    @media (min-width: 640px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: 1024px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  &__media {
+    margin-top: 1rem;
    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
+    justify-content: center;
  }

  &__file {
    display: inline-flex;
    align-items: center;
-    gap: 0.375rem;
+    gap: 0.5rem;
    color: var(--color-primary);
    text-decoration: none;
    font-family: var(--font-family-fa);
-    font-size: 0.85rem;
+    font-size: 0.875rem;
+    padding: 0.5rem 0;

    &:hover {
      text-decoration: underline;