-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Allow users to submit milestone images (#184)
- backend
- add SubmittedMilestoneImage to models
- add /submitted-milestone-images post endpoint for users
- add admin endpoints to get, approve and delete submitted images
- frontend
- button to Milestone component for user to upload an image
- add SubmitMilestoneImageModal
- with a checkbox for user to agree to conditions before submitting the image
- admin-frontend
- add tab with submitted images for review (accept / delete)
- add text prop to SaveButton component
- resolves #50- Loading branch information
Showing
20 changed files
with
514 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,18 @@ | ||
| <svelte:options runes={true} /> | ||
| <svelte:options runes={true}/> | ||
|
|
||
| <script lang="ts"> | ||
| import CheckOutline from "flowbite-svelte-icons/CheckOutline.svelte"; | ||
| import Button from "flowbite-svelte/Button.svelte"; | ||
| import { _ } from "svelte-i18n"; | ||
| let { onclick, disabled = false }: { onclick: () => void; disabled?: boolean } = | ||
| $props(); | ||
| let { | ||
| onclick, | ||
| text = $_("admin.save-changes"), | ||
| disabled = false, | ||
| }: { onclick: () => void; text?: string; disabled?: boolean } = $props(); | ||
| </script> | ||
|
|
||
| <Button color="green" {onclick} {disabled} | ||
| ><CheckOutline class="me-2 h-5 w-5" /> {$_('admin.save-changes')}</Button | ||
| > | ||
| <CheckOutline class="me-2 h-5 w-5"/> {text}</Button | ||
| > |
116 changes: 116 additions & 0 deletions
116
frontend/src/lib/components/Admin/SubmittedMilestoneImages.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| <svelte:options runes={true}/> | ||
|
|
||
| <script lang="ts"> | ||
| import { refreshMilestoneGroups } from "$lib/admin.svelte"; | ||
| import { | ||
| approveSubmittedMilestoneImage, | ||
| deleteSubmittedMilestoneImage, | ||
| getSubmittedMilestoneImages, | ||
| } from "$lib/client/services.gen"; | ||
| import type { SubmittedMilestoneImagePublic } from "$lib/client/types.gen"; | ||
| import DeleteButton from "$lib/components/Admin/DeleteButton.svelte"; | ||
| import DeleteModal from "$lib/components/Admin/DeleteModal.svelte"; | ||
| import SaveButton from "$lib/components/Admin/SaveButton.svelte"; | ||
| import { milestoneGroups } from "$lib/stores/adminStore"; | ||
| import { | ||
| Card, | ||
| Table, | ||
| TableBody, | ||
| TableBodyCell, | ||
| TableBodyRow, | ||
| TableHead, | ||
| TableHeadCell, | ||
| } from "flowbite-svelte"; | ||
| import { onMount } from "svelte"; | ||
| import { _, locale } from "svelte-i18n"; | ||
| let images = $state([] as Array<SubmittedMilestoneImagePublic>); | ||
| let currentImageId = $state(0); | ||
| let showDeleteModal: boolean = $state(false); | ||
| async function refreshImages() { | ||
| const { data, error } = await getSubmittedMilestoneImages(); | ||
| if (error || !data) { | ||
| console.log(error); | ||
| } else { | ||
| images = data; | ||
| } | ||
| } | ||
| async function deleteCurrentImage() { | ||
| const { data, error } = await deleteSubmittedMilestoneImage({ | ||
| path: { | ||
| submitted_milestone_image_id: currentImageId, | ||
| }, | ||
| }); | ||
| if (error || !data) { | ||
| console.log(error); | ||
| } else { | ||
| await refreshImages(); | ||
| } | ||
| } | ||
| async function approveImage(image_id: number) { | ||
| const { data, error } = await approveSubmittedMilestoneImage({ | ||
| path: { | ||
| submitted_milestone_image_id: image_id, | ||
| }, | ||
| }); | ||
| if (error || !data) { | ||
| console.log(error); | ||
| } else { | ||
| await refreshImages(); | ||
| await refreshMilestoneGroups(); | ||
| } | ||
| } | ||
| onMount(async () => { | ||
| await refreshImages(); | ||
| }); | ||
| </script> | ||
|
|
||
| {#if $locale} | ||
| <Card size="xl" class="m-5 w-full"> | ||
| <h3 class="mb-3 text-xl font-medium text-gray-900 dark:text-white"> | ||
| {$_("admin.users")} | ||
| </h3> | ||
| <Table> | ||
| <TableHead> | ||
| <TableHeadCell>{$_('admin.milestone')}</TableHeadCell> | ||
| <TableHeadCell>{$_('admin.image')}</TableHeadCell> | ||
| <TableHeadCell>{$_('admin.actions')}</TableHeadCell> | ||
| </TableHead> | ||
| <TableBody> | ||
| {#each $milestoneGroups as milestoneGroup (milestoneGroup.id)} | ||
| {@const groupTitle = milestoneGroup.text[$locale].title} | ||
| {#each milestoneGroup.milestones as milestone (milestone.id)} | ||
| {@const milestoneTitle = `${groupTitle} / ${milestone.text[$locale].title}`} | ||
| {#each images as image (image.id)} | ||
| {#if image.milestone_id === milestone.id} | ||
| <TableBodyRow> | ||
| <TableBodyCell> | ||
| {milestoneTitle} | ||
| </TableBodyCell> | ||
| <TableBodyCell> | ||
| <img src={`${import.meta.env.VITE_MONDEY_API_URL}/static/ms/${image.id}.webp`} | ||
| alt={`${image.id}`}/> | ||
| </TableBodyCell> | ||
| <TableBodyCell> | ||
| <SaveButton text={$_("admin.approve")} onclick={() => {approveImage(image.id)}}/> | ||
| <DeleteButton onclick={() => { | ||
| currentImageId = image.id; | ||
| showDeleteModal = true; | ||
| }} | ||
| /> | ||
| </TableBodyCell> | ||
| </TableBodyRow> | ||
| {/if} | ||
| {/each} | ||
| {/each} | ||
| {/each} | ||
| </TableBody> | ||
| </Table> | ||
| </Card> | ||
| {/if} | ||
|
|
||
| <DeleteModal bind:open={showDeleteModal} onclick={deleteCurrentImage}></DeleteModal> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.