eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: onboarding

Browse Source
This commit is contained in:
Jannat Patel
2024-10-29 23:00:38 +05:30
parent df3bca6405
commit 19b759e9fb
9 changed files with 141 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
frontend/src/pages/CourseForm.vue
View File

@@ -27,10 +27,11 @@
<FormControl
v-model="course.short_introduction"
:label="__('Short Introduction')"
:placeholder="__('A one line introduction to the course that appears on the course card')"
class="mb-4"
/>
<div class="mb-4">
<div class="mb-1.5 text-sm text-gray-700">
<div class="mb-1.5 text-sm text-gray-600">
{{ __('Course Description') }}
</div>
<TextEditor
@@ -41,49 +42,69 @@
editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
/>
</div>
<FileUploader
v-if="!course.course_image"
:fileTypes="['image/*']"
:validateFile="validateFile"
@success="(file) => saveImage(file)"
>
<template
v-slot="{ file, progress, uploading, openFileSelector }"
>
<div class="mb-4">
<Button @click="openFileSelector" :loading="uploading">
{{
uploading ? `Uploading ${progress}%` : 'Upload an image'
}}
</Button>
</div>
</template>
</FileUploader>
<div v-else class="mb-4">
<div class="text-xs text-gray-600 mb-1">
<div class="mb-4">
<div class="text-xs text-gray-600 mb-2">
{{ __('Course Image') }}
</div>
<div class="flex items-center">
<div class="border rounded-md p-2 mr-2">
<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
<FileUploader
v-if="!course.course_image"
:fileTypes="['image/*']"
:validateFile="validateFile"
@success="(file) => saveImage(file)"
>
<template
v-slot="{ file, progress, uploading, openFileSelector }"
>
<div class="flex items-center">
<div class="border rounded-md w-fit py-5 px-20">
<Image class="size-5 stroke-1 text-gray-700" />
</div>
<div class="ml-4">
<Button @click="openFileSelector">
{{ __("Upload") }}
</Button>
<div class="mt-2 text-gray-600 text-sm">
{{ __("Appears on the course card in the course list") }}
</div>
</div>
</div>
</template>
</FileUploader>
<div v-else class="mb-4">
<div class="flex items-center">
<img :src="course.course_image.file_url" class="border rounded-md w-40" />
<div class="ml-4">
<Button @click="removeImage()">
{{ __("Remove") }}
</Button>
<div class="mt-2 text-gray-600 text-sm">
{{ __("Appears on the course card in the course list") }}
</div>
</div>
</div>
<div class="flex flex-col">
<span>
{{ course.course_image.file_name }}
</span>
<span class="text-sm text-gray-500 mt-1">
{{ getFileSize(course.course_image.file_size) }}
</span>
</div>
<X
@click="removeImage()"
class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
/>
<!-- <div class="flex items-center">
<div class="border rounded-md p-2 mr-2">
<img :src="course.course_image.file_url" class="border rounded-md" />
</div>
<div class="flex flex-col">
<span>
{{ course.course_image.file_name }}
</span>
<span class="text-sm text-gray-500 mt-1">
{{ getFileSize(course.course_image.file_size) }}
</span>
</div>
<X
@click="removeImage()"
class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
/>
</div> -->
</div>
</div>
<FormControl
v-model="course.video_link"
:label="__('Preview Video')"
:placeholder="__('Paste the youtube link of a short video introducing the course')"
class="mb-4"
/>
<div class="mb-4">
@@ -104,6 +125,8 @@
</div>
<FormControl
v-model="newTag"
:placeholder="__('Keywords for the course')"
class="w-52"
@keyup.enter="updateTags()"
id="tags"
/>
@@ -130,7 +153,7 @@
<div class="grid grid-cols-3 gap-10 mb-4">
<div
v-if="user.data?.is_moderator"
class="flex flex-col space-y-3"
class="flex flex-col space-y-4"
>
<FormControl
type="checkbox"
@@ -231,7 +254,7 @@ import {
updateDocumentTitle,
} from '@/utils'
import Link from '@/components/Controls/Link.vue'
import { FileText, X } from 'lucide-vue-next'
import { FileText, Image, X } from 'lucide-vue-next'
import { useRouter } from 'vue-router'
import CourseOutline from '@/components/CourseOutline.vue'
import MultiSelect from '@/components/Controls/MultiSelect.vue'