Skip to content

Commit

Permalink
Merge pull request #101 from ssciwr/svelte5
Browse files Browse the repository at this point in the history
Svelte 5
  • Loading branch information
lkeegan authored Oct 9, 2024
2 parents aaa5152 + b8fd293 commit 729220c
Show file tree
Hide file tree
Showing 22 changed files with 336 additions and 292 deletions.
6 changes: 3 additions & 3 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"@sveltejs/adapter-auto": "^3.2.5",
"@sveltejs/adapter-static": "^3.0.5",
"@sveltejs/kit": "^2.5.28",
"@sveltejs/vite-plugin-svelte": "^3.1.2",
"@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
"@tailwindcss/typography": "^0.5.15",
"@testing-library/svelte": "^5.2.1",
"@types/eslint": "^9.6.1",
Expand All @@ -29,13 +29,13 @@
"eslint-plugin-svelte": "^2.44.0",
"flowbite": "^2.5.1",
"flowbite-svelte": "^0.46.17",
"flowbite-svelte-icons": "^1.6.1",
"flowbite-svelte-icons": "2.0.0-next.16",
"globals": "^15.9.0",
"jsdom": "^25.0.1",
"prettier": "^3.3.3",
"prettier-plugin-svelte": "^3.2.6",
"prettier-plugin-tailwindcss": "^0.6.6",
"svelte": "^4.2.19",
"svelte": "5.0.0-next.263",
"svelte-check": "^3.8.6",
"tailwindcss": "^3.4.13",
"typescript": "^5.6.2",
Expand Down
223 changes: 100 additions & 123 deletions frontend/pnpm-lock.yaml

Large diffs are not rendered by default.

73 changes: 73 additions & 0 deletions frontend/src/lib/admin.svelte.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import { milestoneGroups, userQuestions } from '$lib/stores/adminStore';
import {
authCookieLogin,
getMilestoneGroupsAdmin,
getUserQuestionsAdmin,
usersCurrentUser
} from '$lib/client/services.gen';
import type {
GetLanguagesResponse,
MilestoneGroupAdmin,
UserQuestionAdmin,
UserRead,
Body_auth_cookie_login_auth_login_post
} from '$lib/client/types.gen';

function AdminUser() {
let user = $state(null as UserRead | null);
return {
get value(): UserRead | null {
return user;
},
login: async function (loginData: Body_auth_cookie_login_auth_login_post) {
console.log(loginData);
const { data, error } = await authCookieLogin({ body: loginData });
if (error) {
return error?.detail as string;
} else {
await this.refresh();
if (!user || !user.is_superuser) {
return 'Admin account required';
}
return '';
}
},
refresh: async function () {
const { data, error } = await usersCurrentUser();
if (error || data === undefined) {
console.log('Failed to get current User');
user = null;
} else {
user = data;
}
}
};
}

export const adminUser = AdminUser();

export async function refreshMilestoneGroups() {
console.log('refreshMilestoneGroups...');
const { data, error } = await getMilestoneGroupsAdmin();
if (error || data == undefined) {
console.log('Failed to get MilestoneGroups');
milestoneGroups.set([]);
} else {
milestoneGroups.set(data);
}
}

export function milestoneGroupImageUrl(id: number) {
return `${import.meta.env.VITE_MONDEY_API_URL}/static/mg${id}.jpg`;
}

export async function refreshUserQuestions() {
console.log('refreshQuestions...');
const { data, error } = await getUserQuestionsAdmin();
if (error || data === undefined) {
console.log('Failed to get UserQuestions');
userQuestions.set([]);
} else {
userQuestions.set(data);
}
}
28 changes: 0 additions & 28 deletions frontend/src/lib/admin.ts

This file was deleted.

9 changes: 5 additions & 4 deletions frontend/src/lib/components/Admin/AddButton.svelte
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
<svelte:options runes={true} />

<script lang="ts">
import { Button } from 'flowbite-svelte';
import Button from 'flowbite-svelte/Button.svelte';
import PlusOutline from 'flowbite-svelte-icons/PlusOutline.svelte';
import { _ } from 'svelte-i18n';
export let onClick: () => void;
export let disabled: boolean = false;
let { onclick, disabled = false }: { onclick: () => void; disabled?: boolean } = $props();
</script>

<Button color="blue" {disabled} on:click={onClick}
<Button color="blue" {onclick} {disabled}
><PlusOutline class="me-2 h-5 w-5" /> {$_('admin.add')}</Button
>
13 changes: 13 additions & 0 deletions frontend/src/lib/components/Admin/CancelButton.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<svelte:options runes={true} />

<script lang="ts">
import Button from 'flowbite-svelte/Button.svelte';
import CloseOutline from 'flowbite-svelte-icons/CloseOutline.svelte';
import { _ } from 'svelte-i18n';
let { onclick = () => {} }: { onclick?: () => void } = $props();
</script>

<Button color="alternative" {onclick}
><CloseOutline class="me-2 h-5 w-5" /> {$_('admin.cancel')}</Button
>
10 changes: 5 additions & 5 deletions frontend/src/lib/components/Admin/DeleteButton.svelte
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<svelte:options runes={true} />

<script lang="ts">
import { Button } from 'flowbite-svelte';
import Button from 'flowbite-svelte/Button.svelte';
import TrashBinOutline from 'flowbite-svelte-icons/TrashBinOutline.svelte';
import { _ } from 'svelte-i18n';
export let onClick: () => void;
let { onclick }: { onclick: (event: Event) => void } = $props();
</script>

<Button color="red" on:click={onClick}
><TrashBinOutline class="me-2 h-5 w-5" /> {$_('admin.delete')}</Button
>
<Button color="red" {onclick}><TrashBinOutline class="me-2 h-5 w-5" /> {$_('admin.delete')}</Button>
7 changes: 4 additions & 3 deletions frontend/src/lib/components/Admin/DeleteModal.svelte
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<svelte:options runes={true} />

<script lang="ts">
import { Button, Modal } from 'flowbite-svelte';
import ExclamationCircleOutline from 'flowbite-svelte-icons/ExclamationCircleOutline.svelte';
import { _ } from 'svelte-i18n';
export let open: boolean;
export let onClick: () => void;
let { open = $bindable(false), onclick }: { open: boolean; onclick: () => void } = $props();
</script>

<Modal bind:open size="xs" autoclose>
Expand All @@ -13,7 +14,7 @@
<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
{$_('admin.delete-are-you-sure')}
</h3>
<Button color="red" class="me-2" on:click={onClick}>
<Button color="red" class="me-2" {onclick}>
{$_('admin.yes-sure')}
</Button>
<Button color="alternative">{$_('admin.no-cancel')}</Button>
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/lib/components/Admin/EditButton.svelte
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<svelte:options runes={true} />

<script lang="ts">
import { Button } from 'flowbite-svelte';
import Button from 'flowbite-svelte/Button.svelte';
import EditOutline from 'flowbite-svelte-icons/EditOutline.svelte';
import { _ } from 'svelte-i18n';
export let onClick: () => void;
let { onclick }: { onclick: (event: Event) => void } = $props();
</script>

<Button color="yellow" on:click={onClick}
><EditOutline class="me-2 h-5 w-5" /> {$_('admin.edit')}</Button
>
<Button color="yellow" {onclick}><EditOutline class="me-2 h-5 w-5" /> {$_('admin.edit')}</Button>
32 changes: 15 additions & 17 deletions frontend/src/lib/components/Admin/EditMilestoneGroupModal.svelte
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@
<svelte:options runes={true} />

<script lang="ts">
import {
Button,
InputAddon,
Textarea,
Label,
ButtonGroup,
Fileupload,
Modal
} from 'flowbite-svelte';
import { InputAddon, Textarea, Label, ButtonGroup, Fileupload, Modal } from 'flowbite-svelte';
import { _ } from 'svelte-i18n';
import { onMount } from 'svelte';
import { languages } from '$lib/stores/adminStore';
import type { MilestoneGroupAdmin } from '$lib/client/types.gen';
import { updateMilestoneGroupAdmin, uploadMilestoneGroupImage } from '$lib/client/services.gen';
import { milestoneGroupImageUrl, refreshMilestoneGroups } from '$lib/admin';
import { milestoneGroupImageUrl, refreshMilestoneGroups } from '$lib/admin.svelte';
import SaveButton from '$lib/components/Admin/SaveButton.svelte';
import CancelButton from '$lib/components/Admin/CancelButton.svelte';
export let open: boolean = false;
export let milestoneGroup: MilestoneGroupAdmin | null = null;
let {
open = $bindable(false),
milestoneGroup
}: { open: boolean; milestoneGroup: MilestoneGroupAdmin | null } = $props();
let files: FileList | undefined = $state(undefined);
let image: string = $state('');
const textKeys = ['title', 'desc'];
let files: FileList;
let image: string = '';
onMount(() => {
if (milestoneGroup) {
Expand Down Expand Up @@ -85,7 +83,7 @@
<img src={image} width="48" height="48" alt="MilestoneGroup" class="mx-2" />
<Fileupload
bind:files
on:change={updateImageToUpload}
onchange={updateImageToUpload}
accept=".jpg, .jpeg"
id="img_upload"
class="mb-2 flex-grow-0"
Expand All @@ -94,7 +92,7 @@
</div>
{/if}
<svelte:fragment slot="footer">
<Button color="green" on:click={saveChanges}>{$_('admin.save-changes')}</Button>
<Button color="alternative">{$_('admin.cancel')}</Button>
<SaveButton onclick={saveChanges} />
<CancelButton />
</svelte:fragment>
</Modal>
28 changes: 12 additions & 16 deletions frontend/src/lib/components/Admin/EditMilestoneModal.svelte
Original file line number Diff line number Diff line change
@@ -1,25 +1,21 @@
<svelte:options runes={true} />

<script lang="ts">
import {
Button,
InputAddon,
Textarea,
Label,
ButtonGroup,
Fileupload,
Modal
} from 'flowbite-svelte';
import { InputAddon, Textarea, Label, ButtonGroup, Fileupload, Modal } from 'flowbite-svelte';
import { languages } from '$lib/stores/adminStore';
import SaveButton from '$lib/components/Admin/SaveButton.svelte';
import CancelButton from '$lib/components/Admin/CancelButton.svelte';
import { _ } from 'svelte-i18n';
import type { MilestoneAdmin } from '$lib/client/types.gen';
import { refreshMilestoneGroups } from '$lib/admin';
import { refreshMilestoneGroups } from '$lib/admin.svelte';
import { updateMilestone, uploadMilestoneImage } from '$lib/client/services.gen';
export let open: boolean = false;
export let milestone: MilestoneAdmin | null = null;
let { open = $bindable(false), milestone }: { open: boolean; milestone: MilestoneAdmin | null } =
$props();
let files: FileList | undefined = $state(undefined);
let images: Array<string> = $state([]);
const textKeys = ['title', 'desc', 'obs', 'help'];
let files: FileList;
let images: string[] = [];
function updateImagesToUpload(event: Event) {
const target = event.target as HTMLInputElement;
Expand Down Expand Up @@ -95,7 +91,7 @@
</div>
{/if}
<svelte:fragment slot="footer">
<Button color="green" on:click={saveChanges}>{$_('admin.save-changes')}</Button>
<Button color="alternative">{$_('admin.cancel')}</Button>
<SaveButton onclick={saveChanges} />
<CancelButton />
</svelte:fragment>
</Modal>
22 changes: 14 additions & 8 deletions frontend/src/lib/components/Admin/EditUserQuestionModal.svelte
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
<svelte:options runes={true} />

<script lang="ts">
import {
Button,
Expand All @@ -16,16 +18,20 @@
import { languages } from '$lib/stores/adminStore';
import { updateUserQuestion } from '$lib/client/services.gen';
import InputPreview from '$lib/components/Admin/InputPreview.svelte';
import SaveButton from '$lib/components/Admin/SaveButton.svelte';
import CancelButton from '$lib/components/Admin/CancelButton.svelte';
import type { UserQuestionAdmin } from '$lib/client/types.gen';
import { refreshUserQuestions } from '$lib/admin';
import { refreshUserQuestions } from '$lib/admin.svelte';
export let open: boolean = false;
export let userQuestion: UserQuestionAdmin | null = null;
let {
open = $bindable(false),
userQuestion
}: { open: boolean; userQuestion: UserQuestionAdmin | undefined } = $props();
let preview_lang_id = '1';
let preview_answer = '';
let preview_lang_id = $state('1');
let preview_answer = $state('');
const inputTypes: SelectOptionType<string>[] = [
const inputTypes: Array<SelectOptionType<string>> = [
{ value: 'text', name: 'text' },
{ value: 'select', name: 'select' }
];
Expand Down Expand Up @@ -144,7 +150,7 @@
</div>
{/if}
<svelte:fragment slot="footer">
<Button color="green" on:click={saveChanges}>{$_('admin.save-changes')}</Button>
<Button color="alternative">{$_('admin.cancel')}</Button>
<SaveButton onclick={saveChanges} />
<CancelButton />
</svelte:fragment>
</Modal>
18 changes: 10 additions & 8 deletions frontend/src/lib/components/Admin/InputPreview.svelte
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
<svelte:options runes={true} />

<script lang="ts">
import { Input, Select, Label } from 'flowbite-svelte';
export let data;
export let lang_id;
export let answer = '';
import { Input, Select, Label, type SelectOptionType } from 'flowbite-svelte';
import type { UserQuestionAdmin } from '$lib/client/types.gen';
let { data, lang_id, answer }: { data: UserQuestionAdmin; lang_id: string; answer: string } =
$props();
let items: Array<SelectOptionType<string>> = $derived(parse_options_json());
function parse_options_json(options_json) {
function parse_options_json() {
try {
return JSON.parse(data.text[lang_id].options_json);
const options_json = data.text[lang_id].options_json;
return JSON.parse(options_json);
} catch (e) {
console.log("Couldn't parse options_json");
console.log(e);
}
return [];
}
$: items = parse_options_json(data.text[lang_id].options_json);
</script>

<div class="mb-5">
Expand Down
Loading

0 comments on commit 729220c

Please sign in to comment.