CLASSROOMIO-T-27
CLASSROOMIO-T-27: Remove unused variable Merge branch 'CLASSROOMIO-T-27' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-27 CLASSROOMIO-T-27: Complete reviews functionality CLASSROOMIO-T-27: Review Render Update CLASSROOMIO-T-27: - Resolved Feedbacks CLASSROOMIO-T-27: Fixed Ratings Data CLASSROOMIO-T-27: - Added Ratings Svg - Fixed avatar_url feedback CLASSROOMIO-T-27: Import Adjustment CLASSROOMIO-T-27: Code Review CLASSROOM-T-27: Added Add Review Functionality CLASSROOMIO-T-27: - Unresolved Review - Enhance Code Redability CLASSROOMIO-T-27: Completed the delete functionality CLASSROOMIO-T-27: Hide/Show functionality CLASSROOMIO-T-27: Double Quotation Update CLASSROOMIO-T-27: Testing toggle functinality CLASSROOMIO-T-27: Added the icons CLASSROOMIO-T-27: Completion of the hide/show functionality CLASSROOMIO-T-27: Display the store data on the review page for styling CLASSROOMIO-T-27: Styling of the review component & connecting it's data CLASSROOMIO-T-27: - Add ReviewsForm - Completion of the Reviews Form Structure/Styling CLASSROOMIO-T-27: Added a reviews modal CLASSROOMIO-T-27: Logic update for review section CLASSROOMIO-T-50: Logic for overlapping reviews CLASSROOMIO-T-27: - Completion of the structure & styling with mock data. - Addition of custom ratings assets CLASSROOMIO-T-27: - Review Section Code Structure - Import Profile Picture Assets Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com> Co-authored-by: Tunji Adeyemi <tunji@digdippa.com> Co-authored-by: tunny17 <tvnji17@gmail.com> Merge-request: CLASSROOMIO-MR-26 Merged-by: Best Admin <best@digdippa.com>
This commit is contained in:
tunny17
committed by
Space Cloud
Space Cloud
co-authored by
Rotimi Best
Tunji Adeyemi
Rotimi Best
Tunji Adeyemi
parent
375be2f7f3
commit
7f994b5c8f
@@ -0,0 +1,99 @@
|
||||
<script>
|
||||
import Save24 from 'carbon-icons-svelte/lib/Save24';
|
||||
import Delete24 from 'carbon-icons-svelte/lib/Delete24';
|
||||
import { Toggle } from 'carbon-components-svelte';
|
||||
import IconButton from '../../../IconButton/index.svelte';
|
||||
import UploadImage from '../../../UploadImage/index.svelte';
|
||||
import TextArea from '../../../Form/TextArea.svelte';
|
||||
import TextField from '../../../Form/TextField.svelte';
|
||||
import { uploadAvatar } from '../../../../utils/services/courses';
|
||||
|
||||
export let courseId;
|
||||
export let reviews = [];
|
||||
export let review = {};
|
||||
export let errors = {};
|
||||
export let onExpand = () => {};
|
||||
|
||||
let avatar;
|
||||
|
||||
// function to delete review
|
||||
function deleteReviewData() {
|
||||
reviews = reviews.filter((r) => r.id !== review.id);
|
||||
}
|
||||
|
||||
async function onAvatarChange(_avatar) {
|
||||
if (!_avatar) return;
|
||||
|
||||
review.avatar_url = await uploadAvatar(courseId, _avatar);
|
||||
}
|
||||
|
||||
$: onAvatarChange(avatar);
|
||||
</script>
|
||||
|
||||
<div class="flex items-center flex-col w-full">
|
||||
<UploadImage
|
||||
bind:avatar
|
||||
src={review.avatar_url}
|
||||
widthHeight="w-20 h-20"
|
||||
errorMessage={errors.avatar_url}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
className="mt-2 w-full"
|
||||
labelClassName="font-normal"
|
||||
label="Full Name"
|
||||
placeholder=""
|
||||
type="text"
|
||||
bind:value={review.name}
|
||||
errorMessage={errors.name}
|
||||
/>
|
||||
|
||||
<!-- Description -->
|
||||
<TextArea
|
||||
label="Description"
|
||||
rows="4"
|
||||
className="mt-2 w-full"
|
||||
labelClassName="font-normal"
|
||||
placeholder=""
|
||||
bind:value={review.description}
|
||||
errorMessage={errors.description}
|
||||
/>
|
||||
|
||||
<div class="flex justify-between w-full items-center mt-2">
|
||||
<!-- Rating -->
|
||||
<TextField
|
||||
className="mt-2 w-20"
|
||||
labelClassName="font-normal"
|
||||
label="Rating"
|
||||
type="number"
|
||||
min={1}
|
||||
max={5}
|
||||
bind:value={review.rating}
|
||||
errorMessage={errors.rating}
|
||||
/>
|
||||
|
||||
<!-- Toggle -->
|
||||
<div class="w-24">
|
||||
<Toggle labelText="Hide Review" size="sm" bind:toggled={review.hide} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flex justify-between items-center w-full">
|
||||
<IconButton
|
||||
contained={true}
|
||||
value="delete"
|
||||
onClick={deleteReviewData}
|
||||
size="large"
|
||||
>
|
||||
<Delete24 class="carbon-icon" />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
contained={true}
|
||||
value="save"
|
||||
onClick={() => onExpand(review.id)}
|
||||
size="large"
|
||||
>
|
||||
<Save24 class="carbon-icon" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,144 @@
|
||||
<script>
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import get from 'lodash/get';
|
||||
import set from 'lodash/set';
|
||||
import z from 'zod';
|
||||
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
|
||||
import IconButton from '../../../IconButton/index.svelte';
|
||||
import { isMobile } from '../../../../utils/store/useMobile';
|
||||
import PrimaryButton from '../../../PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '../../../PrimaryButton/constants';
|
||||
import ReviewFormEditor from './ReviewFormEditor.svelte';
|
||||
import Avatar from '../../../Avatar/index.svelte';
|
||||
import { processErrors } from '../../../../utils/functions/validator';
|
||||
|
||||
export let course = {};
|
||||
|
||||
let reviews = get(course, 'metadata.reviews', []);
|
||||
let reviewToExpand = null;
|
||||
let errors = {};
|
||||
|
||||
function setter(value, setterKey) {
|
||||
if (!value) return;
|
||||
|
||||
const _course = cloneDeep(course);
|
||||
set(_course, setterKey, value);
|
||||
course = _course;
|
||||
}
|
||||
|
||||
function addReviewForm() {
|
||||
const _review = {
|
||||
id: new Date().getTime(),
|
||||
hide: false,
|
||||
name: '',
|
||||
avatar_url: '',
|
||||
rating: 1,
|
||||
created_at: new Date().getTime(),
|
||||
description: '',
|
||||
};
|
||||
reviews = [...reviews, _review];
|
||||
reviewToExpand = _review.id;
|
||||
}
|
||||
|
||||
function validateReviews(id) {
|
||||
const review = reviews.find((r) => r.id === id);
|
||||
const reviewSchema = z.object({
|
||||
name: z.string().min(5, {
|
||||
message: 'Name is too short, min of 5 character',
|
||||
invalid_type_error: 'Must not be empty',
|
||||
}),
|
||||
avatar_url: z.string().min(6, {
|
||||
message: 'Upload an image',
|
||||
invalid_type_error: 'Must not be empty',
|
||||
}),
|
||||
rating: z
|
||||
.number()
|
||||
.min(1, {
|
||||
message: 'Rating must be from 1-5',
|
||||
invalid_type_error: 'Must not be empty',
|
||||
})
|
||||
.max(5, {
|
||||
message: 'Rating must be from 1-5',
|
||||
invalid_type_error: 'Must not be empty',
|
||||
}),
|
||||
description: z.string().min(10, {
|
||||
message: 'Description is too short, min of 5 character',
|
||||
invalid_type_error: 'Must not be empty',
|
||||
}),
|
||||
});
|
||||
|
||||
const { error } = reviewSchema.safeParse(review);
|
||||
return processErrors(error);
|
||||
}
|
||||
|
||||
function onExpand(id) {
|
||||
errors = {};
|
||||
|
||||
if (reviewToExpand) {
|
||||
const validationRes = validateReviews(reviewToExpand);
|
||||
if (Object.keys(validationRes).length) {
|
||||
errors = Object.assign(errors, validationRes);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (id === reviewToExpand) {
|
||||
reviewToExpand = null;
|
||||
return;
|
||||
}
|
||||
|
||||
reviewToExpand = id;
|
||||
}
|
||||
|
||||
$: setter(reviews, 'metadata.reviews');
|
||||
</script>
|
||||
|
||||
<!-- Sections - Reviews -->
|
||||
<section id="reviews">
|
||||
<div class="">
|
||||
{#each reviews || [] as review}
|
||||
<div
|
||||
id={review.id}
|
||||
class="relative flex items-center flex-col border border-gray-300 rounded-lg p-2 my-2.5"
|
||||
>
|
||||
{#if review.id !== reviewToExpand}
|
||||
<!-- the headers -->
|
||||
<div class="flex w-full justify-between items-center">
|
||||
<Avatar
|
||||
src={review.avatar_url}
|
||||
name={review.name}
|
||||
className="mt-1"
|
||||
/>
|
||||
<p class="text-sm">{review.name}</p>
|
||||
|
||||
<IconButton
|
||||
value="expand"
|
||||
onClick={() => onExpand(review.id)}
|
||||
size={$isMobile ? 'large' : 'small'}
|
||||
>
|
||||
<ChevronDown16 class="carbon-icon" />
|
||||
</IconButton>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- the body -->
|
||||
{#if review.id === reviewToExpand}
|
||||
<ReviewFormEditor
|
||||
bind:reviews
|
||||
bind:review
|
||||
{errors}
|
||||
courseId={course.id}
|
||||
{onExpand}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<!-- create reviews button -->
|
||||
<PrimaryButton
|
||||
label="Add Reviews"
|
||||
variant={VARIANTS.CONTAINED}
|
||||
onClick={addReviewForm}
|
||||
className="w-5 rounded-md mt-8"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
@@ -12,6 +12,7 @@
|
||||
import DescriptionForm from './DescriptionForm.svelte';
|
||||
import PricingForm from './PricingForm.svelte';
|
||||
import GoalsForm from './GoalsForm.svelte';
|
||||
import ReviewsForm from './ReviewsForm.svelte';
|
||||
import InstructorForm from './InstructorForm.svelte';
|
||||
import PrimaryButton from '../../../PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '../../../PrimaryButton/constants';
|
||||
@@ -43,10 +44,14 @@
|
||||
},
|
||||
{
|
||||
key: 5,
|
||||
title: 'Instructor',
|
||||
title: 'Reviews',
|
||||
},
|
||||
{
|
||||
key: 6,
|
||||
title: 'Instructor',
|
||||
},
|
||||
{
|
||||
key: 7,
|
||||
title: 'Pricing',
|
||||
},
|
||||
];
|
||||
@@ -64,6 +69,16 @@
|
||||
function handleSectionSelect(sectionKey) {
|
||||
return () => {
|
||||
selectedSection = sections.find((section) => section.key === sectionKey);
|
||||
if (selectedSection) {
|
||||
const sectionId = selectedSection.title.toLowerCase();
|
||||
const sectionEl = document.getElementById(sectionId);
|
||||
if (sectionEl) {
|
||||
sectionEl.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start',
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -146,7 +161,7 @@
|
||||
<h3 class="dark:text-white">{selectedSection.title}</h3>
|
||||
</div>
|
||||
|
||||
<div class="p-2 h-4/5 overflow-y">
|
||||
<div class="title-content p-2 overflow-y-auto">
|
||||
{#if selectedSection.key === 1}
|
||||
<HeaderForm bind:course />
|
||||
{:else if selectedSection.key === 2}
|
||||
@@ -156,10 +171,18 @@
|
||||
{:else if selectedSection.key === 4}
|
||||
<GoalsForm bind:course />
|
||||
{:else if selectedSection.key === 5}
|
||||
<InstructorForm bind:course />
|
||||
<ReviewsForm bind:course />
|
||||
{:else if selectedSection.key === 6}
|
||||
<InstructorForm bind:course />
|
||||
{:else if selectedSection.key === 7}
|
||||
<PricingForm bind:course />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</Container>
|
||||
|
||||
<style>
|
||||
.title-content {
|
||||
height: 90%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,6 +4,7 @@ export const SECTION_KEYS = {
|
||||
DESCRIPTION: '#description',
|
||||
GOALS: '#goals',
|
||||
LESSONS: '#lessons',
|
||||
REVIEWS: '#reviews',
|
||||
INSTRUCTOR: '#instructor',
|
||||
};
|
||||
|
||||
@@ -24,6 +25,10 @@ export const NAV_ITEMS = [
|
||||
key: SECTION_KEYS.LESSONS,
|
||||
label: 'Lessons',
|
||||
},
|
||||
{
|
||||
key: SECTION_KEYS.REVIEWS,
|
||||
label: 'Reviews',
|
||||
},
|
||||
{
|
||||
key: SECTION_KEYS.INSTRUCTOR,
|
||||
label: 'Instructor',
|
||||
|
||||
@@ -4,6 +4,8 @@
|
||||
import { onMount } from 'svelte';
|
||||
import pluralize from 'pluralize';
|
||||
import { stores } from '@sapper/app';
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import Notebook from 'carbon-icons-svelte/lib/Notebook16/Notebook16.svelte'; //note
|
||||
import PresentationFile from 'carbon-icons-svelte/lib/PresentationFile16/PresentationFile16.svelte'; // exercise
|
||||
import Video from 'carbon-icons-svelte/lib/Video16/Video16.svelte'; //video
|
||||
@@ -13,17 +15,37 @@
|
||||
import PricingSection from './components/PricingSection.svelte';
|
||||
import { getLectureNo } from '../Course/function';
|
||||
import { NAV_ITEMS } from './constants';
|
||||
import Avatar from '../../components/Avatar/index.svelte';
|
||||
import Chip from '../Chip/index.svelte';
|
||||
import { getEmbedId } from '../../utils/functions/formatYoutubeVideo';
|
||||
import type { Course, Lesson } from '../../utils/types';
|
||||
import type { Course, Lesson, Review } from '../../utils/types';
|
||||
import Modal from '../Modal/index.svelte';
|
||||
import { reviewsModalStore } from './store';
|
||||
import { VARIANTS } from './../PrimaryButton/constants';
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
export let courseData: Course = {
|
||||
id: '',
|
||||
title: '',
|
||||
description: '',
|
||||
};
|
||||
const ratingsImg = [
|
||||
'/images/rating-1.svg',
|
||||
'/images/rating-2.svg',
|
||||
'/images/rating-3.svg',
|
||||
'/images/rating-4.svg',
|
||||
'/images/rating-5.svg',
|
||||
];
|
||||
|
||||
let lessons: Array<Lesson> = [];
|
||||
let reviews: Review[] = [];
|
||||
let player: any;
|
||||
let averageRating = 0;
|
||||
let totalRatings = 0;
|
||||
|
||||
// initialize the expandDescription array with 'false' values for each review.
|
||||
let expandDescription = Array(reviews.length).fill(false);
|
||||
|
||||
const { page } = stores();
|
||||
// const paystackApi = paystack('');
|
||||
@@ -59,6 +81,10 @@
|
||||
window.player = plyr;
|
||||
}
|
||||
|
||||
function toggleDescription(id: number) {
|
||||
expandDescription[id] = !expandDescription[id];
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
window.onhashchange = locationHashChanged;
|
||||
});
|
||||
@@ -67,6 +93,14 @@
|
||||
$: lessons = get(courseData, 'lessons', []);
|
||||
$: instructor = courseData?.metadata?.instructor || {};
|
||||
$: initPlyr(player, video);
|
||||
$: {
|
||||
reviews = get(courseData, 'metadata.reviews') || [];
|
||||
totalRatings = reviews?.reduce(
|
||||
(acc = 0, review) => acc + (review?.rating || 0),
|
||||
0
|
||||
);
|
||||
averageRating = totalRatings / reviews?.length;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -75,7 +109,7 @@
|
||||
|
||||
<div class="w-full bg-white dark:bg-gray-800 flex flex-col items-center">
|
||||
<!-- Header Section -->
|
||||
<header class="banner w-full flex items-center justify-center p-">
|
||||
<header id="header" class="banner w-full flex items-center justify-center p-">
|
||||
<div
|
||||
class="md:w-5/6 w-full flex items-center justify-between flex-col-reverse md:flex-row"
|
||||
>
|
||||
@@ -252,6 +286,139 @@
|
||||
{/each}
|
||||
</section>
|
||||
|
||||
<!-- Sections - Reviews -->
|
||||
{#if reviews && reviews.length > 0}
|
||||
<section id="reviews">
|
||||
<h2 class="my-16 mr-0 mb-6 ml-0 font-semibold">Reviews</h2>
|
||||
<div class="flex flex-wrap">
|
||||
{#each reviews.slice(0, 4) as review, id}
|
||||
{#if !review.hide}
|
||||
<!-- review -->
|
||||
<div class="flex flex-row item-start w-2/4 my-2">
|
||||
<!-- image container -->
|
||||
{#if review.avatar_url}
|
||||
<Avatar
|
||||
src={review.avatar_url}
|
||||
name="Avatar"
|
||||
className="mt-1"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- profile content -->
|
||||
<div class="pl-2.5 w-11/12">
|
||||
<p class="mb-0.5 font-medium">{review.name}</p>
|
||||
<!-- ratings -->
|
||||
<div class="flex flex-row items-center">
|
||||
{#if review.rating}
|
||||
<img
|
||||
src={ratingsImg[review.rating - 1]}
|
||||
class="w-24 mr-4 mt-1"
|
||||
alt=""
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
<div
|
||||
class="read-more-content mb-2"
|
||||
style="max-height: {expandDescription[id]
|
||||
? 'none'
|
||||
: '50px'}"
|
||||
>
|
||||
<p class="text-sm my-2 leading-5 text-gray-600">
|
||||
{review.description}
|
||||
</p>
|
||||
</div>
|
||||
{#if !expandDescription[id] && review.description.split(' ').length > 9}
|
||||
<button
|
||||
class="underline text-blue-700 mt-2 font-normal"
|
||||
on:click={() => toggleDescription(id)}
|
||||
>See More</button
|
||||
>
|
||||
{/if}
|
||||
{#if expandDescription[id]}
|
||||
<button
|
||||
class="underline text-blue-700 mt-2 font-normal"
|
||||
on:click={() => toggleDescription(id)}
|
||||
>See Less</button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{#if reviews.length > 4}
|
||||
<PrimaryButton
|
||||
label="See All"
|
||||
className="w-3/12 p-4 mt-2"
|
||||
variant={VARIANTS.OUTLINED}
|
||||
onClick={() => ($reviewsModalStore.open = true)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- Reviews Modal -->
|
||||
<Modal
|
||||
onClose={() => ($reviewsModalStore.open = false)}
|
||||
bind:open={$reviewsModalStore.open}
|
||||
width="w-9/12"
|
||||
modalHeading="Reviews"
|
||||
>
|
||||
<div class="flex">
|
||||
<!-- ratings -->
|
||||
<div class="w-1/3">
|
||||
<h2 class="text-xl font-bold">
|
||||
{averageRating} Rating
|
||||
</h2>
|
||||
<h2 class="text-lg font-semibold mt-2">
|
||||
{reviews.length} Ratings
|
||||
</h2>
|
||||
</div>
|
||||
<!-- reviews -->
|
||||
<div class="flex flex-wrap w-4/6">
|
||||
{#each reviews as review, id}
|
||||
<!-- review -->
|
||||
<div class="flex flex-row item-start w-full my-2">
|
||||
<!-- image container -->
|
||||
{#if review.avatar_url}
|
||||
<Avatar
|
||||
src={review.avatar_url}
|
||||
name={review.name}
|
||||
className="mt-1"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- profile content -->
|
||||
<div class="pl-2.5 w-11/12">
|
||||
<p class="mb-0.5 font-medium">{review.name}</p>
|
||||
<!-- ratings -->
|
||||
<div class="flex flex-row">
|
||||
<img
|
||||
src="/images/rating-full.svg"
|
||||
alt=""
|
||||
class="mr-2"
|
||||
/>
|
||||
<p class="text-xs text-gray-600">
|
||||
{dayjs(review.created_at).fromNow(true)} ago
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="read-more-content mb-2"
|
||||
style="max-height: {expandDescription[id]
|
||||
? 'none'
|
||||
: '50px'}"
|
||||
>
|
||||
<p class="text-sm my-2 leading-5 text-gray-600">
|
||||
{review.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<!-- Sections - Instructor -->
|
||||
<section id="instructor" class="mt-8 pb-10">
|
||||
<h3 class="text-2xl font-bold mt-0 mb-3">Instructor</h3>
|
||||
@@ -350,4 +517,17 @@
|
||||
:global(.plyr) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.read-more-content {
|
||||
max-height: 100px; /* Adjust this value to set the maximum height for the truncated content */
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.read-more-button {
|
||||
cursor: pointer;
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -43,4 +43,20 @@ export const landingPageStore = writable({
|
||||
description:
|
||||
'*Learn creative skills, from absolute beginner to advanced mastery.*\nVideo School exists to help you succeed in life. Each course has been hand-tailored to teach a specific skill from photography and video to art, design and business.\n**Whether you’re trying to learn a new skill from scratch, or want to refresh your memory on something you’ve learned in the past, you’ve come to the right place.**\nEducation makes the world a better place. Make your world better with new skills!\nOur courses can be watched 24/7 wherever you are. Most are fully downloadable so you can take them with you. You can also view them on mobile devices with the Udemy mobile app.\nAll courses have a 30-day money-back guarantee so that you can check it out, make sure it’s the right course for you, and get a refund if it’s not!',
|
||||
},
|
||||
reviews: [
|
||||
{
|
||||
id: 1,
|
||||
show: true,
|
||||
name: 'Adeyemi Adetunji',
|
||||
avatar_url: '/logo-192.png',
|
||||
rating: 1,
|
||||
created_at: new Date(),
|
||||
description:
|
||||
'rice ventore officiis maxime laudantium recusandae sit dolor.',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export const reviewsModalStore = writable({
|
||||
open: false,
|
||||
});
|
||||
|
||||
@@ -17,6 +17,8 @@
|
||||
export let autoFocus = false;
|
||||
export let isRequired = false;
|
||||
export let isDisabled = false;
|
||||
export let min = undefined;
|
||||
export let max = undefined;
|
||||
export let errorMessage = '';
|
||||
export let helperMessage = '';
|
||||
export let autoComplete = true;
|
||||
@@ -80,6 +82,8 @@
|
||||
autocomplete={autoComplete ? 'on' : 'off'}
|
||||
on:blur={onChange}
|
||||
{name}
|
||||
{min}
|
||||
{max}
|
||||
/>
|
||||
{#if isPassword}
|
||||
<span class="password-eye">
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
export let src = null;
|
||||
export let widthHeight = null;
|
||||
export let shape = 'rounded-full';
|
||||
export let errorMessage = null;
|
||||
|
||||
let fileinput;
|
||||
|
||||
@@ -45,6 +46,9 @@
|
||||
>
|
||||
<Camera /> <span class="ml-2">Upload Image</span>
|
||||
</p>
|
||||
{#if errorMessage}
|
||||
<p class="text-sm text-red-500">{errorMessage}</p>
|
||||
{/if}
|
||||
|
||||
<input
|
||||
style="display:none"
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
export function toggleBodyByTheme(isDark) {
|
||||
if (!document) return;
|
||||
|
||||
if (isDark) {
|
||||
document.body.className = document.body.className.concat(' ', 'dark');
|
||||
} else {
|
||||
|
||||
@@ -80,7 +80,7 @@ export const getConfirmPasswordError = ({ password, confirmPassword }) => {
|
||||
: null;
|
||||
};
|
||||
|
||||
const processErrors = (error, mapToId) => {
|
||||
export const processErrors = (error, mapToId) => {
|
||||
const errors = {};
|
||||
|
||||
if (Array.isArray(error?.issues)) {
|
||||
|
||||
@@ -19,6 +19,7 @@ interface CourseMetadata {
|
||||
description: string;
|
||||
imgUrl: string;
|
||||
};
|
||||
reviews?: Array<Review>;
|
||||
}
|
||||
|
||||
// Generated from https://supabase-schema.vercel.app/
|
||||
@@ -218,3 +219,13 @@ export interface Question_answer {
|
||||
groupmember?: Groupmember;
|
||||
submission?: Submission;
|
||||
}
|
||||
|
||||
export interface Review {
|
||||
id: number;
|
||||
hide: boolean;
|
||||
name: string;
|
||||
avatar_url: string;
|
||||
rating: number;
|
||||
created_at: number;
|
||||
description: string;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user