implements trail sharing

web/src/lib/components/trail/trail_share_modal.svelte

@@ -1,15 +1,35 @@
 <script lang="ts">
     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,
+        trail_share_delete,
+        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 { users_search } from "$lib/stores/user_store";
-    import type { User } from "$lib/models/user";
-    import { show_toast } from "$lib/stores/toast_store";
+    import type { SelectItem } from "../base/select.svelte";
+    import Select from "../base/select.svelte";
 
-    export let openModal: (() => void) | undefined = undefined;
+    let openModal: (() => void) | undefined = undefined;
     export let closeModal: (() => void) | undefined = undefined;
+    export function openShareModal() {
+        fetchShares();
+        if (openModal) {
+            openModal();
+        }
+    }
+
+    export let trail: Trail;
 
     const dispatch = createEventDispatcher();
 
@@ -17,14 +37,21 @@
 
     let searchItems: SearchItem[] = [];
 
+    let sharesLoading: boolean = false;
+
+    const permissionSelectItems: SelectItem[] = [
+        { text: $_("view"), value: "view" },
+        { text: $_("edit"), value: "edit" },
+    ];
+
     async function updateUsers(q: string) {
         try {
             const users: User[] = await users_search(q);
             searchItems = users.map((u) => ({
                 text: u.username!,
-                value: u.id,
-                icon: "user"
-            }))
+                value: u,
+                icon: "user",
+            }));
         } catch (e) {
             console.error(e);
             show_toast({
@@ -47,21 +74,90 @@
         dispatch("save");
         closeModal!();
     }
+
+    async function shareTrail(item: SelectItem) {
+        const share = new TrailShare(item.value.id, trail.id!, "view");
+        await trail_share_create(share);
+        fetchShares();
+    }
+
+    async function updateSharePermission(share:TrailShare, permission: "view"| "edit" ) {
+        share.permission = permission;
+        await trail_share_update(share);
+    }
+
+    async function deleteShare(share: TrailShare) {
+        await trail_share_delete(share);
+        fetchShares();
+    }
+
+    async function fetchShares() {
+        sharesLoading = true;
+        await trail_share_index(trail.id!);
+        sharesLoading = false;
+    }
 </script>
 
 <Modal
     id="share-modal"
-    title="Share this trail"
-    size="max-w-lg"
+    title={$_('share-this-trail')}
+    size="max-w-sm overflow-visible"
     bind:openModal
     bind:closeModal
 >
     <div slot="content">
         <Search
             on:update={(e) => updateUsers(e.detail)}
+            on:click={(e) => shareTrail(e.detail)}
             placeholder={`${$_("username")}`}
             items={searchItems}
-        ></Search>
+        >
+            <img
+                slot="item-header"
+                let:item
+                class="rounded-full w-8 aspect-square mr-2"
+                src={getFileURL(item.value, item.value.avatar) ||
+                    `https://api.dicebear.com/7.x/initials/svg?seed=${item.value.username}&backgroundType=gradientLinear`}
+                alt="avatar"
+            />
+        </Search>
+        <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>
+                        </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