CLASSROOMIO-T-177: Upload Widget
improve banner image Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-177 Merge branch 'CLASSROOMIO-T-177' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-177 CLASSROOMIO-T-177: Moved API call to backend general ux improvements Merge branch 'CLASSROOMIO-T-177' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-177 CLASSROOMIO-T-177: Resolved Feedbacks CLASSROOMIO-T-177: UI improvements CLASSROOMIO-T-177: fix styling or image CLASSROOMIO-T-177: Resolved Feedbacks CLASSROOMIO-T-177: Landing Page Max Width CLASSROOMIO-T-177: Refactor Upload Widget Merge branch 'main' into CLASSROOMIO-T-177 CLASSROOMIO-T-177: Completion of Upload Widget Merge branch 'main' into CLASSROOMIO-T-177 CLASSROOMIO-T-177: Widget Test Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com> Co-authored-by: Tunji Adeyemi <tunji@digdippa.com> Merge-request: CLASSROOMIO-MR-86 Merged-by: Best Admin <best@digdippa.com>
This commit is contained in:
tunny17
committed by
Space Cloud
Space Cloud
co-authored by
Rotimi Best
Rotimi Best
parent
589a61fe44
commit
804e5cdeb9
@@ -1,55 +1,15 @@
|
||||
<script lang="ts">
|
||||
import { settings } from '$lib/components/Course/components/Settings/store';
|
||||
import TextArea from '$lib/components/Form/TextArea.svelte';
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { supabase } from '$lib/utils/functions/supabase';
|
||||
import { updateCourse } from '$lib/utils/services/courses';
|
||||
import { landingPage } from '../../store';
|
||||
import { handleOpenWidget } from '../../store';
|
||||
|
||||
export let course = {};
|
||||
let fileInput;
|
||||
let imageBuffer;
|
||||
let avatar;
|
||||
|
||||
const uploadImage = async (image: File) => {
|
||||
if (image) {
|
||||
const filename = `landingpage/${Date.now()}` + image.name;
|
||||
const { data } = await supabase.storage.from('avatars').upload(filename, image, {
|
||||
cacheControl: '3600',
|
||||
upsert: false
|
||||
});
|
||||
|
||||
if (data) {
|
||||
const { data: response } = await supabase.storage.from('avatars').getPublicUrl(filename);
|
||||
|
||||
$landingPage.imageUrl = response.publicUrl;
|
||||
$settings.image = $landingPage.imageUrl;
|
||||
|
||||
await updateCourse(course.id, avatar, {
|
||||
logo: $settings.image
|
||||
});
|
||||
|
||||
course.logo = $settings.image;
|
||||
|
||||
$landingPage.uploadingImage = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onFileSelected = () => {
|
||||
$landingPage.uploadingImage = true;
|
||||
const image = fileInput.files[0];
|
||||
if (image) {
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(image);
|
||||
reader.onload = (e) => {
|
||||
imageBuffer = image;
|
||||
uploadImage(image);
|
||||
};
|
||||
}
|
||||
};
|
||||
function widgetControl() {
|
||||
$handleOpenWidget.open = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<TextField className="mt-5" labelClassName="font-bold" label="Title" bind:value={course.title} />
|
||||
@@ -71,18 +31,7 @@
|
||||
type="text"
|
||||
bind:value={course.metadata.videoUrl}
|
||||
/>
|
||||
<div>
|
||||
<PrimaryButton
|
||||
variant={VARIANTS.LINK}
|
||||
label="Replace Banner image"
|
||||
className="-ml-6"
|
||||
onClick={() => fileInput.click()}
|
||||
/>
|
||||
<input
|
||||
type="file"
|
||||
accept=".jpg, .jpeg, .png"
|
||||
style="display: none;"
|
||||
bind:this={fileInput}
|
||||
on:change={onFileSelected}
|
||||
/>
|
||||
<div class="mt-7">
|
||||
<p class="font-bold mb-3">Replace cover image</p>
|
||||
<PrimaryButton label="Replace" variant={VARIANTS.OUTLINED} onClick={widgetControl} />
|
||||
</div>
|
||||
|
||||
@@ -1,29 +1,33 @@
|
||||
<script lang="ts">
|
||||
import UploadWidget from '$lib/components/UploadWidget/index.svelte';
|
||||
import get from 'lodash/get';
|
||||
import { observeIntersection } from './components/IntersectionObserver';
|
||||
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import pluralize from 'pluralize';
|
||||
import { page } from '$app/stores';
|
||||
import { landingPage } from './store';
|
||||
import { Loading } from 'carbon-components-svelte';
|
||||
import Notebook from 'carbon-icons-svelte/lib/Notebook.svelte'; //note
|
||||
import PresentationFile from 'carbon-icons-svelte/lib/PresentationFile.svelte'; // exercise
|
||||
import Video from 'carbon-icons-svelte/lib/Video.svelte'; //video
|
||||
import PageNumber from 'carbon-icons-svelte/lib/PageNumber.svelte';
|
||||
import PlayFilled from 'carbon-icons-svelte/lib/PlayFilled.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import PricingSection from './components/PricingSection.svelte';
|
||||
import { observeIntersection } from './components/IntersectionObserver';
|
||||
import { getLectureNo } from '../Course/function';
|
||||
import { NAV_ITEMS } from './constants';
|
||||
import Avatar from '$lib/components/Avatar/index.svelte';
|
||||
import Chip from '../Chip/index.svelte';
|
||||
import { getEmbedId } from '$lib/utils/functions/formatYoutubeVideo';
|
||||
import type { Course, Lesson, Review } from '$lib/utils/types';
|
||||
import Modal from '../Modal/index.svelte';
|
||||
import { reviewsModalStore } from './store';
|
||||
import Chip from '../Chip/index.svelte';
|
||||
import Avatar from '$lib/components/Avatar/index.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { getEmbedId } from '$lib/utils/functions/formatYoutubeVideo';
|
||||
import type { Course, Lesson, Review } from '$lib/utils/types';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
|
||||
import { calDateDiff } from '$lib/utils/functions/date';
|
||||
import { landingPage } from './store';
|
||||
import { Loading } from 'carbon-components-svelte';
|
||||
import { handleOpenWidget } from './store';
|
||||
|
||||
export let editMode = false;
|
||||
export let courseData: Course;
|
||||
const ratingsImg = [
|
||||
@@ -124,6 +128,10 @@
|
||||
startCoursePayment = true;
|
||||
}}
|
||||
/>
|
||||
|
||||
{#if $handleOpenWidget.open}
|
||||
<UploadWidget />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Banner Image getEmbedId(videoUrl) -->
|
||||
@@ -146,12 +154,12 @@
|
||||
/>
|
||||
</div> -->
|
||||
{:else}
|
||||
<div class="w-2/3 relative rounded-md overflow-hidden">
|
||||
<div class="banner-image md:w-2/3 relative rounded-md overflow-hidden">
|
||||
<img
|
||||
style="min-width:280px; min-height:200px"
|
||||
alt="About us"
|
||||
src={bannerImage ? bannerImage : '/images/classroomio-course-img-template.jpg'}
|
||||
class="mt-2 md:mt-0 rounded-md w-full relative"
|
||||
class="mt-2 md:mt-0 rounded-md w-full h-full max-w-[500px] max-h-[400px] relative"
|
||||
/>
|
||||
{#if $landingPage.uploadingImage}
|
||||
<Loading withOverlay={true} small class="absolute top-0 w-full h-full" />
|
||||
|
||||
@@ -64,3 +64,7 @@ export const landingPage = writable({
|
||||
uploadingImage: false,
|
||||
imageUrl: ''
|
||||
});
|
||||
|
||||
export let handleOpenWidget = writable({
|
||||
open: false
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user