Migrates to svelte 5
This commit is contained in:
Christian Beutel
@@ -2,8 +2,6 @@
|
||||
import Modal from "$lib/components/base/modal.svelte";
|
||||
import type { Trail } from "$lib/models/trail";
|
||||
import { TrailShare } from "$lib/models/trail_share";
|
||||
import type { User } from "$lib/models/user";
|
||||
import { show_toast } from "$lib/stores/toast_store";
|
||||
import {
|
||||
shares,
|
||||
trail_share_create,
|
||||
@@ -11,30 +9,31 @@
|
||||
trail_share_index,
|
||||
trail_share_update,
|
||||
} from "$lib/stores/trail_share_store";
|
||||
import { users_search } from "$lib/stores/user_store";
|
||||
import { getFileURL } from "$lib/util/file_util";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { _ } from "svelte-i18n";
|
||||
import Button from "../base/button.svelte";
|
||||
import Search, { type SearchItem } from "../base/search.svelte";
|
||||
import type { SelectItem } from "../base/select.svelte";
|
||||
import Select from "../base/select.svelte";
|
||||
import UserSearch from "../user_search.svelte";
|
||||
|
||||
let openModal: (() => void) | undefined = undefined;
|
||||
export let closeModal: (() => void) | undefined = undefined;
|
||||
export function openShareModal() {
|
||||
fetchShares();
|
||||
if (openModal) {
|
||||
openModal();
|
||||
}
|
||||
interface Props {
|
||||
trail: Trail;
|
||||
onsave?: () => void;
|
||||
}
|
||||
|
||||
export let trail: Trail;
|
||||
let { trail, onsave }: Props = $props();
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
let modal: Modal;
|
||||
|
||||
let copyButtonText = $_("copy-link");
|
||||
export function openModal() {
|
||||
openShareModalLocal();
|
||||
}
|
||||
async function openShareModalLocal() {
|
||||
modal.openModal();
|
||||
await fetchShares();
|
||||
}
|
||||
|
||||
let copyButtonText = $state($_("copy-link"));
|
||||
|
||||
let sharesLoading: boolean = false;
|
||||
|
||||
@@ -51,8 +50,8 @@
|
||||
}
|
||||
|
||||
function close() {
|
||||
dispatch("save");
|
||||
closeModal!();
|
||||
onsave?.();
|
||||
modal.closeModal!();
|
||||
}
|
||||
|
||||
async function shareTrail(item: SelectItem) {
|
||||
@@ -85,64 +84,68 @@
|
||||
id="share-modal"
|
||||
title={$_("share-this-trail")}
|
||||
size="max-w-sm overflow-visible"
|
||||
bind:openModal
|
||||
bind:closeModal
|
||||
bind:this={modal}
|
||||
>
|
||||
<div slot="content">
|
||||
<UserSearch includeSelf={false} on:click={(e) => shareTrail(e.detail)}
|
||||
></UserSearch>
|
||||
<h4 class="font-semibold mt-4">{$_("shared-with")}</h4>
|
||||
{#snippet content()}
|
||||
<div>
|
||||
<UserSearch includeSelf={false} onclick={(item) => shareTrail(item)}
|
||||
></UserSearch>
|
||||
<h4 class="font-semibold mt-4">{$_("shared-with")}</h4>
|
||||
|
||||
{#if $shares.length == 0}
|
||||
<p class="text-gray-500 text-center mt-2 text-sm">
|
||||
{$_("trail-not-shared")}
|
||||
</p>
|
||||
{:else}
|
||||
{#each $shares as share}
|
||||
{#if share.expand}
|
||||
<div class="flex items-center gap-x-2 p-2">
|
||||
<img
|
||||
class="rounded-full w-8 aspect-square mr-2"
|
||||
src={getFileURL(
|
||||
share.expand.user,
|
||||
share.expand.user.avatar,
|
||||
) ||
|
||||
`https://api.dicebear.com/7.x/initials/svg?seed=${share.expand.user.username}&backgroundType=gradientLinear`}
|
||||
alt="avatar"
|
||||
/>
|
||||
<p>{share.expand.user.username}</p>
|
||||
<span
|
||||
class="basis-full text-sm text-center text-gray-500"
|
||||
>{$_("can")}</span
|
||||
>
|
||||
<div class="shrink-0">
|
||||
<Select
|
||||
bind:value={share.permission}
|
||||
items={permissionSelectItems}
|
||||
on:change={(e) =>
|
||||
updateSharePermission(share, e.detail)}
|
||||
></Select>
|
||||
{#if $shares.length == 0}
|
||||
<p class="text-gray-500 text-center mt-2 text-sm">
|
||||
{$_("trail-not-shared")}
|
||||
</p>
|
||||
{:else}
|
||||
{#each $shares as share}
|
||||
{#if share.expand}
|
||||
<div class="flex items-center gap-x-2 p-2">
|
||||
<img
|
||||
class="rounded-full w-8 aspect-square mr-2"
|
||||
src={getFileURL(
|
||||
share.expand.user,
|
||||
share.expand.user.avatar,
|
||||
) ||
|
||||
`https://api.dicebear.com/7.x/initials/svg?seed=${share.expand.user.username}&backgroundType=gradientLinear`}
|
||||
alt="avatar"
|
||||
/>
|
||||
<p>{share.expand.user.username}</p>
|
||||
<span
|
||||
class="basis-full text-sm text-center text-gray-500"
|
||||
>{$_("can")}</span
|
||||
>
|
||||
<div class="shrink-0">
|
||||
<Select
|
||||
value={share.permission}
|
||||
items={permissionSelectItems}
|
||||
onchange={(value) =>
|
||||
updateSharePermission(share, value)}
|
||||
></Select>
|
||||
</div>
|
||||
|
||||
<button
|
||||
aria-label="Delete share"
|
||||
class="btn-icon text-red-500"
|
||||
onclick={() => deleteShare(share)}
|
||||
><i class="fa fa-trash"></i></button
|
||||
>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn-icon text-red-500"
|
||||
on:click={() => deleteShare(share)}
|
||||
><i class="fa fa-trash"></i></button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
<div slot="footer" class="flex justify-between items-center gap-4">
|
||||
<Button
|
||||
secondary={true}
|
||||
disabled={copyButtonText == $_("link-copied")}
|
||||
on:click={copyURLToClipboard}
|
||||
>
|
||||
<i class="fa fa-link mr-2"></i>
|
||||
{copyButtonText}
|
||||
</Button>
|
||||
<button class="btn-primary" on:click={close}>{$_("close")}</button>
|
||||
</div></Modal
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
{#snippet footer()}
|
||||
<div class="flex justify-between items-center gap-4">
|
||||
<Button
|
||||
secondary={true}
|
||||
disabled={copyButtonText == $_("link-copied")}
|
||||
onclick={copyURLToClipboard}
|
||||
>
|
||||
<i class="fa fa-link mr-2"></i>
|
||||
{copyButtonText}
|
||||
</Button>
|
||||
<button class="btn-primary" onclick={close}>{$_("close")}</button>
|
||||
</div>
|
||||
{/snippet}</Modal
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user