@alliance-droid/status-feedback-system 1.3.9 → 1.3.11
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>
|
|
@@ -24,6 +24,8 @@ export function createFeedbackBoard(options) {
|
|
|
24
24
|
let voteErrors = $state({});
|
|
25
25
|
// Response cache
|
|
26
26
|
const responseCache = {};
|
|
27
|
+
// Track in-flight votes to prevent duplicate requests
|
|
28
|
+
const pendingVotes = new Set();
|
|
27
29
|
async function load() {
|
|
28
30
|
loading = true;
|
|
29
31
|
error = '';
|
|
@@ -76,6 +78,9 @@ export function createFeedbackBoard(options) {
|
|
|
76
78
|
load();
|
|
77
79
|
});
|
|
78
80
|
async function vote(itemId, direction) {
|
|
81
|
+
if (pendingVotes.has(itemId))
|
|
82
|
+
return;
|
|
83
|
+
pendingVotes.add(itemId);
|
|
79
84
|
const prev = votedItems[itemId];
|
|
80
85
|
// Clear any prior error for this item
|
|
81
86
|
if (voteErrors[itemId]) {
|
|
@@ -103,6 +108,9 @@ export function createFeedbackBoard(options) {
|
|
|
103
108
|
voteErrors = rest;
|
|
104
109
|
}, 3000);
|
|
105
110
|
}
|
|
111
|
+
finally {
|
|
112
|
+
pendingVotes.delete(itemId);
|
|
113
|
+
}
|
|
106
114
|
}
|
|
107
115
|
async function getResponses(itemId) {
|
|
108
116
|
if (responseCache[itemId])
|
package/package.json
CHANGED