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

docker improvements + delete unused package

Browse Source
This commit is contained in:
Rotimi Best
2025-05-03 14:46:01 +01:00
parent 50e89f90c9
commit f343ca7974
18 changed files with 11683 additions and 15126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/lib/components/Page/Body.svelte
+9
View File
@@ -7,13 +7,22 @@
export let isPageNavHidden = false;
$: padding = isPageNavHidden ? `pb-20 px-4` : padding;
function handleKeydown(event) {
if (event.key === 'Enter' || event.key === ' ') {
onClick();
}
}
</script>
<div
role="button"
tabindex="0"
class="overflow-y-auto {isPageNavHidden
? 'h-[calc(100vh-65px)] lg:h-[calc(100vh-127px)]'
: 'h-[calc(100vh-127px)]'} mx-auto mt-4 {width} {className} relative {padding}"
on:click={onClick}
on:keydown={handleKeydown}
>
{#if $$slots.header}
<div
apps/dashboard/src/lib/utils/functions/supabase.server.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import { env } from '$env/dynamic/private';
import { createClient, SupabaseClient } from '@supabase/supabase-js';
import { config } from '$lib/config';
import { createClient, type SupabaseClient } from '@supabase/supabase-js';
export let supabase: SupabaseClient;
apps/dashboard/src/lib/utils/functions/supabase.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { config } from '$lib/config';
import { createClient, SupabaseClient } from '@supabase/supabase-js';
import { createClient, type SupabaseClient } from '@supabase/supabase-js';
export let supabase: SupabaseClient;
apps/dashboard/src/lib/utils/services/org/domain.ts
+3 -3
View File
@@ -1,11 +1,11 @@
// Code from https://github.com/vercel/platforms/blob/1ed55b13bcae97b037c69ec40b4c32df21c2412c/lib/domains.ts
import {
DomainResponse,
import { env } from '$env/dynamic/private';
import type {
DomainConfigResponse,
DomainResponse,
DomainVerificationResponse
} from '$lib/utils/types/org';
import { env } from '$env/dynamic/private';
export const addDomainToVercel = async (domain: string) => {
return await fetch(
apps/dashboard/src/lib/utils/store/org.ts
+29 -7
View File
@@ -1,12 +1,12 @@
import { writable, derived } from 'svelte/store';
import { dev, browser } from '$app/environment';
import { browser, dev } from '$app/environment';
import { env } from '$env/dynamic/public';
import { STEPS } from '../constants/quiz';
import type { Writable } from 'svelte/store';
import type { CurrentOrg, OrgTeamMember, OrgAudience } from '../types/org';
import { ROLE } from '$lib/utils/constants/roles';
import type { UserLessonDataType } from '$lib/utils/types';
import { PLAN } from 'shared/src/plans/constants';
import type { Writable } from 'svelte/store';
import { derived, writable } from 'svelte/store';
import { STEPS } from '../constants/quiz';
import type { CurrentOrg, OrgAudience, OrgTeamMember } from '../types/org';
export const defaultCurrentOrgState: CurrentOrg = {
id: '',
@@ -86,9 +86,31 @@ export const deleteModal = writable({
isQuestion: false
});
export const quizesStore = writable([]);
interface QuizOption {
id: number;
label: string;
isCorrect: boolean;
}
export const quizStore = writable({
interface QuizQuestion {
id: number;
label: string;
type: string;
options: QuizOption[];
}
interface QuizStore {
uuid: string;
title: string;
questions: QuizQuestion[];
timelimit: string;
theme: string;
pin: string;
}
export const quizesStore = writable<QuizStore[]>([]);
export const quizStore = writable<QuizStore>({
uuid: '',
title: '',
questions: [],
apps/dashboard/src/routes/+layout.server.ts
+8 -5
View File
@@ -1,3 +1,4 @@
import { dev } from '$app/environment';
import { env } from '$env/dynamic/private';
import { IS_SELFHOSTED } from '$env/static/private';
@@ -12,6 +13,8 @@ if (!supabase) {
getSupabase();
}
export const ssr = IS_SELFHOSTED === 'true' ? false : true;
interface LoadOutput {
orgSiteName: string;
isOrgSite: boolean;
@@ -21,7 +24,7 @@ interface LoadOutput {
serverLang: string;
}
const APP_SUBDOMAINS = env.PRIVATE_APP_SUBDOMAINS.split(',');
const APP_SUBDOMAINS = env.PRIVATE_APP_SUBDOMAINS?.split(',');
export const load = async ({ url, cookies, request }): Promise<LoadOutput> => {
const response: LoadOutput = {
@@ -106,7 +109,7 @@ export const load = async ({ url, cookies, request }): Promise<LoadOutput> => {
if (!response.org && !isDev) {
throw redirect(307, 'https://app.classroomio.com/404?type=org');
} else if (!response.org && _orgSiteName) {
cookies.delete('_orgSiteName');
cookies.delete('_orgSiteName', { path: '/' });
}
} else if (subdomain === 'play' || debugPlay === 'true') {
response.skipAuth = true;
@@ -170,10 +173,10 @@ function getBaseMetaTags(url: URL) {
function getSubdomain(url: URL) {
const host = url.host.replace('www.', '');
const parts = host.split('.');
const parts = host?.split('.');
if (host.endsWith(env.PRIVATE_APP_HOST)) {
return parts.length >= 3 ? parts[0] : null;
if (host?.endsWith(env.PRIVATE_APP_HOST)) {
return parts?.length >= 3 ? parts[0] : null;
}
return null;
apps/dashboard/src/routes/api/analytics/dash/+server.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { getServerSupabase } from '$lib/utils/functions/supabase.server';
import { OrganisationAnalytics } from '$lib/utils/types/analytics';
import type { OrganisationAnalytics } from '$lib/utils/types/analytics';
import { json } from '@sveltejs/kit';
const supabase = getServerSupabase();
apps/dashboard/src/routes/api/analytics/user/+server.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import { getServerSupabase } from '$lib/utils/functions/supabase.server';
import { fetchCourses, fetchProfileCourseProgress } from '$lib/utils/services/courses';
import {
import type {
UserAnalytics,
UserCourseAnalytics,
UserExerciseStatsQuery,
apps/dashboard/src/routes/courses/[id]/people/[personId]/+page.svelte
+1 -1
View File
@@ -160,7 +160,7 @@
transition:fade={{ duration: 300 }}
>
<div class="flex w-2/3 items-center gap-4">
<Notebook size={24} class="text-black" />
<svelte:component this={Notebook} size={24} class="text-black" />
<div>
<div class="mb-2">
<a
apps/dashboard/src/routes/org/[slug]/quiz/[slug]/+page.svelte
+111 -53
View File
@@ -1,40 +1,65 @@
<script>
import { onMount } from 'svelte';
<script lang="ts">
import { goto } from '$app/navigation';
import cloneDeep from 'lodash/cloneDeep';
import isBoolean from 'lodash/isBoolean';
import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
import WarningFilledIcon from 'carbon-icons-svelte/lib/WarningFilled.svelte';
import cloneDeep from 'lodash/cloneDeep';
import isBoolean from 'lodash/isBoolean';
import { onMount } from 'svelte';
import { Select, SelectItem } from 'carbon-components-svelte';
import { currentOrgPath, deleteModal } from '$lib/utils/store/org';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import { themeImages, allOptions, booleanOptions, allThemes } from '$lib/utils/constants/quiz';
import { quizStore, quizesStore } from '$lib/utils/store/org';
import DeleteModal from '$lib/components/Org/Quiz/DeleteModal.svelte';
import Preview from '$lib/components/Org/Quiz/Play/Preview.svelte';
import QuizQuestion from '$lib/components/Org/Quiz/QuizQuestion.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { snackbar } from '$lib/components/Snackbar/store';
import { allOptions, allThemes, booleanOptions, themeImages } from '$lib/utils/constants/quiz';
import { supabase } from '$lib/utils/functions/supabase';
import { t } from '$lib/utils/functions/translations';
import { currentOrgPath, deleteModal, quizStore, quizesStore } from '$lib/utils/store/org';
import { Select, SelectItem } from 'carbon-components-svelte';
interface QuizOption {
id: number;
label: string;
isCorrect: boolean;
}
interface QuizQuestion {
id: number;
label: string;
type: string;
options: QuizOption[];
}
export let data;
const { quizId } = data;
// Questionnaire State
let currentQuestion = $quizStore.questions[0] || {
let currentQuestion: QuizQuestion = $quizStore.questions[0] || {
id: 0,
label: '',
type: 'multichoice',
options: []
};
// Behavioural State
let openPreview = false;
let type = 'multichoice';
let errors = [];
let currentError = {};
let errors: Array<{
isLabelEmpty: boolean;
hasOneAnswer: boolean;
id: number;
options: Array<{ id: number; error: boolean }>;
}> = [];
let currentError: {
isLabelEmpty?: boolean;
hasOneAnswer?: boolean;
id?: number;
options?: Array<{ id: number; error: boolean }>;
} = {};
let isFocused = false;
let selectEl = null;
let selectEl: Select | null = null;
function activeClass(q, cq) {
if (q.id === cq.id) {
@@ -44,60 +69,80 @@
}
function addQuestion() {
$quizStore.questions = [
...$quizStore.questions,
{
id: new Date().getTime(),
label: '',
type: 'multichoice',
options: []
}
];
const newQuestion: QuizQuestion = {
id: new Date().getTime(),
label: '',
type: 'multichoice',
options: []
};
$quizStore.questions = [...$quizStore.questions, newQuestion];
type = 'multichoice';
}
function addOption() {
const cOptIds = currentQuestion.options.map((o) => o.id);
const nextOption = cloneDeep(allOptions).find((o) => !cOptIds.includes(o.id));
const nextOption = cloneDeep(allOptions).find((o) => !cOptIds.includes(Number(o.id)));
if (!nextOption) return;
currentQuestion.options = [...currentQuestion.options, nextOption];
currentQuestion.options = [
...currentQuestion.options,
{
id: Number(nextOption.id),
label: nextOption.label,
isCorrect: nextOption.isCorrect
}
];
}
function deleteOption() {
const opt = cloneDeep(currentQuestion.options);
opt.pop();
currentQuestion.options = opt;
}
function handleQuestionTypeChange(type) {
function handleQuestionTypeChange(type: string) {
const opt =
type === 'multichoice'
? cloneDeep(allOptions).filter((o, i) => i < 2)
: cloneDeep(booleanOptions);
? cloneDeep(allOptions)
.filter((o, i) => i < 2)
.map((o) => ({
id: Number(o.id),
label: o.label,
isCorrect: o.isCorrect
}))
: cloneDeep(booleanOptions).map((o) => ({
id: Number(o.id),
label: o.label,
isCorrect: o.isCorrect
}));
currentQuestion.type = type;
currentQuestion.options = opt;
// $quizStore.questions = $quizStore.questions.map((q) =>
// q.id === currentQuestion.id ? cloneDeep(currentQuestion) : q
// );
}
function deleteQuestion() {
// Only leave one question
if ($quizStore.questions.length === 1) return;
$quizStore.questions = $quizStore.questions.filter((q) => q.id !== currentQuestion.id);
currentQuestion = $quizStore.questions[0];
}
function previewQuiz() {
openPreview = !openPreview;
}
function validateQuiz() {
const _errors = [];
const _errors: Array<{
isLabelEmpty: boolean;
hasOneAnswer: boolean;
id: number;
options: Array<{ id: number; error: boolean }>;
}> = [];
$quizStore.questions.forEach((q) => {
const labelError = !!((q.label?.length || 0) < 3);
const options = [];
const options: Array<{ id: number; error: boolean }> = [];
let hasOneAnswer = false;
q.options.forEach((o) => {
@@ -124,11 +169,10 @@
});
errors = _errors;
currentError = errors.find((e) => e.id === currentQuestion.id) || {};
return errors;
}
async function saveQuiz() {
const _errors = validateQuiz();
if (Array.isArray(_errors) && _errors.length && qHasError(null, _errors)) {
@@ -161,6 +205,7 @@
);
});
}
function optionHasError(eId, _errs) {
if (Array.isArray(_errs) && _errs.length) {
return _errs.some((e) => e.id === eId && e.error);
@@ -190,12 +235,12 @@
<Preview exitPreview={previewQuiz} />
{/if}
<section class="w-screen h-full flex justify-between">
<section class="flex h-full w-screen justify-between">
<!-- Questions list -->
<aside class="root w-1/5 p-4 bg-gray-100 dark:bg-neutral-800 h-full">
<div class="h-full flex flex-col">
<aside class="root h-full w-1/5 bg-gray-100 p-4 dark:bg-neutral-800">
<div class="flex h-full flex-col">
<a
class="text-gray-500 dark:text-white text-md flex items-center"
class="text-md flex items-center text-gray-500 dark:text-white"
href={`${$currentOrgPath}/quiz`}
>
<ArrowLeftIcon size={24} class="carbon-icon dark:text-white" /> Back to Quizzes
@@ -206,7 +251,7 @@
<div class="mb-3">
{#each $quizStore.questions as question, i}
<button
class="w-full rounded p-3 mb-3 font-bold text-left text-gray-500 dark:text-white flex justify-between {activeClass(
class="mb-3 flex w-full justify-between rounded p-3 text-left font-bold text-gray-500 dark:text-white {activeClass(
question,
currentQuestion
)}"
@@ -214,6 +259,12 @@
currentQuestion = question;
type = question.type;
}}
on:keydown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
currentQuestion = question;
type = question.type;
}
}}
>
Question {i + 1}
@@ -224,20 +275,20 @@
{/each}
</div>
<div class="w-full flex justify-end">
<div class="flex w-full justify-end">
<PrimaryButton label="Add Question" variant={VARIANTS.CONTAINED} onClick={addQuestion} />
</div>
</div>
</aside>
<div class="container w-3/6 h-full">
<div class="container h-full w-3/6">
<div
class="p-5 h-full"
class="h-full p-5"
style="background: url({themeImages[$quizStore.theme]
?.editor}) no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;"
>
<div class="content m-auto">
<h1 class="text-white font-bold my-5">{$quizStore.title}</h1>
<h1 class="my-5 font-bold text-white">{$quizStore.title}</h1>
<QuizQuestion {currentQuestion} {optionHasError} {currentError} />
@@ -248,7 +299,7 @@
{/if}
{#if currentQuestion.type !== 'boolean'}
<div class="w-full flex justify-center mb-4">
<div class="mb-4 flex w-full justify-center">
{#if currentQuestion.options.length < allOptions.length}
<PrimaryButton
label={$t('components.quiz.add_more')}
@@ -271,7 +322,7 @@
</div>
<!-- Quiz Settings -->
<aside class="settings w-1/5 p-4 bg-gray-100 dark:bg-neutral-800 h-full">
<aside class="settings h-full w-1/5 bg-gray-100 p-4 dark:bg-neutral-800">
<div class="py-5">
<h5>Quiz settings</h5>
<PrimaryButton
@@ -305,7 +356,7 @@
labelText="Question type"
bind:this={selectEl}
bind:selected={type}
class="flex items-center mb-3"
class="mb-3 flex items-center"
on:focus={() => (isFocused = true)}
on:blur={() => (isFocused = false)}
on:change={() => {
@@ -329,7 +380,7 @@
<Select
labelText="Time limit"
bind:selected={$quizStore.timelimit}
class="flex items-center mb-3"
class="mb-3 flex items-center"
>
<SelectItem value="10 seconds" text="10s" />
<SelectItem value="20 seconds" text="20s" />
@@ -346,22 +397,29 @@
{#each allThemes as _theme}
<div
class="theme rounded-md w-full border cursor-pointer mb-5 relative {$quizStore.theme ===
class="theme relative mb-5 w-full cursor-pointer rounded-md border {$quizStore.theme ===
_theme.id && 'border-primary-700'}"
>
{#if $quizStore.theme === _theme.id}
<CheckmarkFilledIcon
size={24}
class="carbon-icon absolute top-4 right-4"
class="carbon-icon absolute right-4 top-4"
style="fill:white;"
/>
{/if}
<div
class="w-full rounded-md h-full border flex flex-col-reverse"
role="button"
tabindex="0"
class="flex h-full w-full flex-col-reverse rounded-md border"
style="background: url({themeImages[_theme.id]?.card});"
on:click={() => ($quizStore.theme = _theme.id)}
on:keydown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
$quizStore.theme = _theme.id;
}
}}
>
<p class="ml-3 mb-3 text-white">{_theme.label}</p>
<p class="mb-3 ml-3 text-white">{_theme.label}</p>
</div>
</div>
{/each}