@alliance-droid/status-feedback-system 1.3.9 → 1.3.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6,9 +6,11 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import { untrack } from 'svelte';
|
|
8
8
|
import { Button } from '@alliance-droid/svelte-component-library';
|
|
9
|
+
import type { BoardItem } from '../api.js';
|
|
9
10
|
import { createFeedbackBoard, type CategoryConfig, type FeedbackBoardState } from './board/index.js';
|
|
10
11
|
import FeedbackSidebar from './board/FeedbackSidebar.svelte';
|
|
11
12
|
import FeedbackList from './board/FeedbackList.svelte';
|
|
13
|
+
import FeedbackDetail from './board/FeedbackDetail.svelte';
|
|
12
14
|
import FeedbackSubmitForm from './board/FeedbackSubmitForm.svelte';
|
|
13
15
|
|
|
14
16
|
interface Props {
|
|
@@ -33,19 +35,20 @@
|
|
|
33
35
|
submitCategories = [],
|
|
34
36
|
}: Props = $props();
|
|
35
37
|
|
|
36
|
-
let board: FeedbackBoardState = $
|
|
37
|
-
|
|
38
|
+
let board: FeedbackBoardState = $derived(
|
|
39
|
+
createFeedbackBoard({ apiUrl, apiKey, categoryConfig })
|
|
38
40
|
);
|
|
39
41
|
|
|
40
|
-
// Recreate board only when connection details change
|
|
41
|
-
$effect(() => {
|
|
42
|
-
const url = apiUrl;
|
|
43
|
-
const key = apiKey;
|
|
44
|
-
const config = categoryConfig;
|
|
45
|
-
board = createFeedbackBoard({ apiUrl: url, apiKey: key, categoryConfig: config });
|
|
46
|
-
});
|
|
47
|
-
|
|
48
42
|
let showForm = $state(false);
|
|
43
|
+
let selectedItem = $state<BoardItem | null>(null);
|
|
44
|
+
|
|
45
|
+
function selectItem(item: BoardItem) {
|
|
46
|
+
selectedItem = item;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
function clearSelection() {
|
|
50
|
+
selectedItem = null;
|
|
51
|
+
}
|
|
49
52
|
</script>
|
|
50
53
|
|
|
51
54
|
<div class="flex gap-6 min-h-[400px]">
|
|
@@ -84,7 +87,21 @@
|
|
|
84
87
|
</div>
|
|
85
88
|
{/if}
|
|
86
89
|
|
|
87
|
-
<!-- Items -->
|
|
88
|
-
|
|
90
|
+
<!-- Items / Detail -->
|
|
91
|
+
{#if selectedItem}
|
|
92
|
+
<div class="mb-4">
|
|
93
|
+
<button
|
|
94
|
+
onclick={clearSelection}
|
|
95
|
+
class="text-sm text-foreground-secondary hover:text-foreground transition-colors mb-3"
|
|
96
|
+
>
|
|
97
|
+
<i class="fa-solid fa-arrow-left mr-1" aria-hidden="true"></i> Back to list
|
|
98
|
+
</button>
|
|
99
|
+
<div class="rounded-xl border border-border bg-surface p-5">
|
|
100
|
+
<FeedbackDetail {board} item={selectedItem} />
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
{:else}
|
|
104
|
+
<FeedbackList {board} onSelect={selectItem} />
|
|
105
|
+
{/if}
|
|
89
106
|
</main>
|
|
90
107
|
</div>
|
package/package.json
CHANGED