From 0a307dfa86b60fc11c11bb6335028604fac97434 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 30 Mar 2023 15:03:30 +0200
Subject: [PATCH] feat: selecSearchElement

---
 .../elements/forms/inputSelectSearch.svelte   |  1 +
 src/lib/elements/index.ts                     |  1 +
 src/lib/elements/selectSearchItem.svelte      | 28 +++++++++++++++++++
 .../attributes/relationship.svelte            |  8 +++++-
 .../attributes/relationship.svelte            | 18 +++++++++---
 .../relationshipsModal.svelte                 |  4 +--
 .../collection-[collection]/table.svelte      |  7 +++--
 7 files changed, 57 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/elements/selectSearchItem.svelte

diff --git a/src/lib/elements/forms/inputSelectSearch.svelte b/src/lib/elements/forms/inputSelectSearch.svelte
index ecb69de83..7c965fce0 100644
--- a/src/lib/elements/forms/inputSelectSearch.svelte
+++ b/src/lib/elements/forms/inputSelectSearch.svelte
@@ -6,6 +6,7 @@
     type Option = $$Generic<{
         value: string | boolean | number;
         label: string;
+        data?: string[];
     }>;
     type OptionArray = Option[];
 
diff --git a/src/lib/elements/index.ts b/src/lib/elements/index.ts
index 2ebcd3892..ffd1477bb 100644
--- a/src/lib/elements/index.ts
+++ b/src/lib/elements/index.ts
@@ -1 +1,2 @@
 export { default as Pill } from './pill.svelte';
+export { default as SelectSearchItem } from './selectSearchItem.svelte';
diff --git a/src/lib/elements/selectSearchItem.svelte b/src/lib/elements/selectSearchItem.svelte
new file mode 100644
index 000000000..cb1ad1952
--- /dev/null
+++ b/src/lib/elements/selectSearchItem.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { tooltip } from '$lib/actions/tooltip';
+
+    export let data: string[] = [];
+
+    console.log(data);
+</script>
+
+<div class="u-flex u-cross-baseline u-gap-12">
+    <span
+        class="/*u-flex-basis-140*/ u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray">
+        <slot />
+    </span>
+    {#if data.length}
+        <span
+            class="u-flex u-trim-1 u-gap-4"
+            use:tooltip={{
+                content: data.map((e) => e ?? 'n/a').join(' | ')
+            }}>
+            {#each data as item, i}
+                {#if i}
+                    <span class="u-text-color-gray">|</span>
+                {/if}
+                <span class="text">{item ?? 'n/a'}</span>
+            {/each}
+        </span>
+    {/if}
+</div>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte
index b323d76c1..96f5ecf40 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte
@@ -44,6 +44,7 @@
     import arrowOne from './arrow-one.svg';
     import arrowTwo from './arrow-two.svg';
     import { camelize } from '$lib/helpers/string';
+    import { SelectSearchItem } from '$lib/elements';
 
     // Props
     export let data: Partial<Models.AttributeRelationship>;
@@ -141,7 +142,12 @@
     required
     placeholder="Select a collection"
     disabled={editing}
-    options={collections?.map((n) => ({ value: n.$id, label: n.name })) ?? []} />
+    options={collections?.map((n) => ({ value: n.$id, label: n.$id, data: [n.name] })) ?? []}
+    let:option={o}>
+    <SelectSearchItem data={o.data}>
+        {o.label}
+    </SelectSearchItem>
+</InputSelectSearch>
 
 {#if data?.relatedCollection}
     <div>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
index 6f5cb72b7..29f297ebb 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
+    import { SelectSearchItem } from '$lib/elements';
     import { Button, InputSelectSearch, Label } from '$lib/elements/forms';
     import { organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
@@ -153,8 +154,17 @@
         placeholder={`Select ${attribute.key}`}
         bind:search
         bind:value
-        options={documentList?.documents?.map((n) => ({
-            value: n.$id,
-            label: n?.[displayNames[0]]
-        })) ?? []} />
+        options={documentList?.documents?.map((n) => {
+            const data = displayNames.filter((name) => name !== '$id').map((name) => n?.[name]);
+            return {
+                value: n.$id,
+                label: n.$id,
+                data
+            };
+        }) ?? []}
+        let:option={o}>
+        <SelectSearchItem data={o.data}>
+            {o.label}
+        </SelectSearchItem>
+    </InputSelectSearch>
 {/if}
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
index b43035f00..efb673c25 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
@@ -6,7 +6,7 @@
     import type { Models } from '@appwrite.io/console';
 
     export let show = false;
-    export let data: Models.Document[];
+    export let data: [];
     export let selectedRelationship: Models.AttributeRelationship = null;
     const projectId = $page.params.project;
     const databaseId = $page.params.database;
@@ -35,7 +35,7 @@
                         {#if i}
                             <span class="clickable-list-title-sep">|</span>
                         {/if}
-                        <span>{doc[arg]}</span>
+                        <span>{doc[arg] ?? 'n/a'}</span>
                     {/each}
                     <svelte:fragment slot="desc">
                         {doc.$id}
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
index d2bde0334..c5aa0cae8 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -28,7 +28,7 @@
     const databaseId = $page.params.database;
     let showRelationships = false;
     let selectedRelationship: Models.AttributeRelationship = null;
-    let relationshipData: Models.Document;
+    let relationshipData: [];
 
     onMount(() => {
         teamPrefs.load($organization.$id);
@@ -129,8 +129,9 @@
                                         {#each args as arg, i}
                                             {#if arg !== undefined}
                                                 {i ? '|' : ''}
-                                                <span class="text"
-                                                    >{document[column.id]?.[arg]}</span>
+                                                <span class="text">
+                                                    {document[column.id]?.[arg] ?? 'n/a'}
+                                                </span>
                                             {/if}
                                         {/each}
                                     </button>