ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CLASROOMIO-T-11:Removed the upload component,made the certificate logo and name to be gotten from the organisation settings,and also used svg for the images

Browse Source
This commit is contained in:
emmanuel
2023-07-27 12:50:20 +01:00
parent d9c8d93803
commit 567c57791e
10 changed files with 133 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Course/components/Ceritficate/Design.svelte
+32 -20
View File
@@ -4,15 +4,17 @@
RadioButton,
Toggle,
} from 'carbon-components-svelte';
import UploadImage from './Upload.svelte';
import { goto } from '@sapper/app';
import PrimaryButton from '../../../PrimaryButton/index.svelte';
import TextArea from '../../../Form/TextArea.svelte';
import { certificateInfo } from './store';
import Professional from './certificates/Professional.svelte';
import Plain from './certificates/Plain.svelte';
import { course } from '../../store';
import { currentOrg } from '../../../../utils/store/org';
const professional = './theme1.png';
const plain = './theme2.png';
const professional = './professional.svg';
const plain = './plain.svg';
const student = 'Name of student';
const themes = [
{ label: 'professional', src: professional },
@@ -20,6 +22,7 @@
];
let Selectedtheme = themes[0];
const saveCertificate = () => {};
const onToggle = (e) => {
console.log(e);
@@ -46,12 +49,21 @@
<div>
<p class="text-xs font-normal text-black my-2">Brand Logo</p>
<p class="text-base font-normal mt-2 mb-4">
We recommend using a PNG file with transparency. Maximum size: 1200 x
600px.
We recommend using a PNG file with transparency. Maximum size: 512px x
512px.
</p>
<UploadImage />
<div>
<p class="text-base mt-1">
To update your brand image, go to <strong class="font-semibold"
>Settings &gt; Organisation settings</strong
> and upload you brand logo
</p>
<PrimaryButton
label="Go to Settings"
className="rounded-md mt-1"
onClick={() => goto(`org/${$currentOrg.siteName}/settings`)}
/>
</div>
<span class="my-4">
<p class="text-xs font-normal mt-4 mb-2">Course Description</p>
<TextArea
@@ -59,34 +71,30 @@
rows={6}
placeholder="a little description about the course"
bgColor="bg-gray-100"
bind:value={$certificateInfo.Desc}
onChange={$certificateInfo.Desc}
bind:value={$course.description}
onChange={$course.description}
/>
</span>
<Toggle
labelText="Add date of completion"
on:toggle={(e) => onToggle(e)}
class="my-2"
size="sm"
>
<span slot="labelA" style="color: #161616">Automatic</span>
<span slot="labelB" style="color: green">Automatic</span>
<span slot="labelA" style="color: #161616">Date</span>
<span slot="labelB" style="color: green">Date</span>
</Toggle>
</div>
</section>
<section
class="certbg flex justify-center items-center rounded-md w-full md:w-3/5"
>
<div class="flex justify-center items-center h-5/6 w-5/6">
<div class="certContainer flex justify-center items-center h-5/6">
{#if Selectedtheme.label == 'professional'}
<Professional />
<Professional studentName={student} />
{:else}
<Plain />
<Plain studentName={student} />
{/if}
<!-- <img src="./certImg.png" alt="cert" class="object-cover" /> -->
<!-- <img src={Selectedtheme.src} alt="cert" class="img object-cover" /> -->
<!-- {Selectedtheme.label} -->
</div>
</section>
</div>
@@ -103,6 +111,10 @@
p {
color: #262626;
}
.certContainer {
width: 95%;
max-width: 95%;
}
.certbg {
background-color: #f5f8fe;
}
src/components/Course/components/Ceritficate/Reports.svelte
+4 -4
View File
@@ -39,9 +39,9 @@
<section class="mt-14 border-t border-gray-300">
<StructuredList>
<StructuredListHead class="bg-blue-50 py-1">
<StructuredListRow head>
<StructuredListCell head>
<StructuredListHead class="bg-blue-50 py-0">
<StructuredListRow head class="py-0">
<StructuredListCell head class="py-0">
<div
class="flex-3 flex flex-row items-center justify-start w-full text-blue-600 text-sm font-medium"
>
@@ -51,7 +51,7 @@
</p>
</div>
</StructuredListCell>
<StructuredListCell head>
<StructuredListCell head class="py-0">
<div
class="flex-2 items-center w-full text-blue-900 text-sm font-medium"
>
src/components/Course/components/Ceritficate/Upload.svelte
-43
View File
@@ -1,43 +0,0 @@
<script>
import Camera from 'carbon-icons-svelte/lib/Camera20';
export let avatar = null;
export let src = null;
let fileinput;
const onFileSelected = (e) => {
const image = e.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(image);
reader.onload = (e) => {
avatar = image;
src = e.target.result;
};
};
</script>
<section class="width-fit flex flex-col items-center">
<p
class="width-fit text-blue-700 flex items-center cursor-pointer text-sm"
on:click={() => {
fileinput.click();
}}
>
<Camera /> <span class="ml-2">Upload Image</span>
</p>
<input
style="display:none"
type="file"
accept=".jpg, .jpeg, .png"
on:change={(e) => onFileSelected(e)}
bind:this={fileinput}
/>
</section>
<style>
.width-fit {
width: fit-content;
}
</style>
src/components/Course/components/Ceritficate/certificates/Plain.svelte
+20 -15
View File
@@ -1,18 +1,24 @@
<script>
import TextField from '../../../../Form/TextField.svelte';
import TextArea from '../../../../Form/TextArea.svelte';
import { certificateInfo } from '../store';
import { course } from '../../../store';
import { currentOrg } from '../../../../../utils/store/org';
export let studentName;
let borderwidth = 'border-4';
let bordercolor = 'border-pink-700';
let logo = './certLogo.png';
let logo = './logo-512.png';
</script>
<div
class="flex flex-col items-center justify-center {borderwidth} {bordercolor}"
>
<div>
<img src={logo} alt="logo" />
<div class="flex items-center gap-1 my-2">
<img
src={$currentOrg.avatar_url ? $currentOrg.avatar_url : logo}
alt="logo"
class=" w-14 h-14 rounded-md"
/>
<p class="font-semibold capitalize">{$currentOrg.name}</p>
</div>
<div class="w-full px-5 py-3">
<p
@@ -23,7 +29,7 @@
<div class="border-b border-gray-500 mb-4">
<p class="text-xs text-black font-medium">This is to certify that</p>
<TextField
bind:value={$certificateInfo.Name}
bind:value={studentName}
inputClassName="text-center placeholder:text-black"
placeholder="Name of student"
bgColor="bg-transparent"
@@ -33,16 +39,15 @@
<p class="text-xs text-black font-medium">
has successfully completed a courses in
</p>
<TextArea
bind:value={$certificateInfo.Title}
inputClassName=""
placeholder="Name of course"
bgColor="clamp bg-transparent text-base font-semibold text-pink-700 text-center placeholder:text-black placeholder:text-base placeholder:font-semibold uppercase resize-none"
rows="1"
maxRows="2"
/>
<div>
<p
class="clamp bg-transparent text-base font-semibold text-pink-700 text-center uppercase"
>
{$course.title}
</p>
</div>
</div>
<p class="desc text-center">{$certificateInfo.Desc}</p>
<p class="desc text-center">{$course.description}</p>
</div>
</div>
src/components/Course/components/Ceritficate/certificates/Professional.svelte
+20 -15
View File
@@ -1,11 +1,12 @@
<script>
import TextField from '../../../../Form/TextField.svelte';
import TextArea from '../../../../Form/TextArea.svelte';
import { certificateInfo } from '../store';
import { course } from '../../../store';
import { currentOrg } from '../../../../../utils/store/org';
export let studentName;
let borderwidth = 'border-l-8';
let bordercolor = 'border-blue-800';
let logo = './certLogo.png';
let logo = './logo-512.png';
</script>
<div
@@ -19,7 +20,7 @@
<div class="border-b border-gray-500 mb-4">
<p class="text-xs text-black font-medium">This is to certify that</p>
<TextField
bind:value={$certificateInfo.Name}
bind:value={studentName}
inputClassName="text-center placeholder:text-black"
placeholder="Name of student"
bgColor="bg-transparent"
@@ -29,18 +30,22 @@
<p class="text-xs text-black font-medium">
has successfully completed introductory courses in
</p>
<TextArea
bind:value={$certificateInfo.Title}
inputClassName=""
placeholder="Name of course"
bgColor="clamp bg-transparent font-semibold text-blue-800 text-center placeholder:text-black placeholder:text-base placeholder:font-semibold uppercase resize-none border-none"
rows="1"
maxRows="2"
/>
<div>
<p
class="clamp bg-transparent text-base font-semibold text-blue-800 text-center uppercase"
>
{$course.title}
</p>
</div>
</div>
<p class="desc mb-2 text-justify">{$certificateInfo.Desc}</p>
<div>
<img src={logo} alt="logo" class="my-2" />
<p class="desc mb-2 text-justify">{$course.description}</p>
<div class="flex items-center gap-1 my-2">
<img
src={$currentOrg.avatar_url ? $currentOrg.avatar_url : logo}
alt="logo"
class="w-14 h-14 rounded-md"
/>
<p class="font-semibold capitalize">{$currentOrg.name}</p>
</div>
</div>
</div>
src/components/Course/components/Ceritficate/store.js
-10
View File
@@ -1,9 +1,5 @@
import { writable } from 'svelte/store';
// export const deleteMemberModal = writable({
// open: false,
// });
export const issueCertificateModal = writable({
open: false,
automatic: false,
@@ -12,12 +8,6 @@ export const issueCertificateModal = writable({
message: '',
});
export const certificateInfo = writable({
Name: 'Name of student',
Title: 'Desiging functional components',
Desc: '(Introduction to Digital Devices, The Internet Mobile Applications, Introduction to Social Media, Using social media for business, Digital Content Creation and Distribution, Using mobile money in business, Digital financial management,Digital Empowerment,Digital Safety)',
});
export const resetForm = () =>
issueCertificateModal.update(() => ({
open: false,