init

frontend/app/composables/useItems.ts

@@ -0,0 +1,103 @@
+import type { Item, PaginatedItems } from '~/services/api'
+import { ref } from 'vue'
+import { Api } from '~/services/api'
+
+export function useItems() {
+  const config = useRuntimeConfig()
+  const client = new Api({ baseURL: config.public.apiBase })
+
+  const leftItems = ref<Item[]>([])
+  const rightItems = ref<Item[]>([])
+  const leftSearch = ref('')
+  const rightSearch = ref('')
+  const leftLoading = ref(false)
+  const rightLoading = ref(false)
+  const leftPage = ref(1)
+  const rightPage = ref(1)
+  const leftHasMore = ref(true)
+  const rightHasMore = ref(true)
+
+  async function fetchLeft(reset = false): Promise<void> {
+    if (reset) {
+      leftPage.value = 1
+      leftItems.value = []
+      leftHasMore.value = true
+    }
+    if (!leftHasMore.value || leftLoading.value)
+      return
+    leftLoading.value = true
+    try {
+      const data: PaginatedItems = await client.api.itemsList({
+        page: leftPage.value,
+        limit: 20,
+        ...(leftSearch.value ? { search: leftSearch.value } : {}),
+      })
+      leftItems.value.push(...(data.data ?? []))
+      leftHasMore.value = data.hasMore ?? false
+      leftPage.value++
+    }
+    finally {
+      leftLoading.value = false
+    }
+  }
+
+  async function fetchRight(reset = false): Promise<void> {
+    if (reset) {
+      rightPage.value = 1
+      rightItems.value = []
+      rightHasMore.value = true
+    }
+    if (!rightHasMore.value || rightLoading.value)
+      return
+    rightLoading.value = true
+    try {
+      const data: PaginatedItems = await client.api.itemsSelectedList({
+        page: rightPage.value,
+        limit: 20,
+        ...(rightSearch.value ? { search: rightSearch.value } : {}),
+      })
+      rightItems.value.push(...(data.data ?? []))
+      rightHasMore.value = data.hasMore ?? false
+      rightPage.value++
+    }
+    finally {
+      rightLoading.value = false
+    }
+  }
+
+  async function selectItem(id: number): Promise<void> {
+    await client.api.itemsSelectCreate({ id })
+    await Promise.all([fetchLeft(true), fetchRight(true)])
+  }
+
+  async function deselectItem(id: number): Promise<void> {
+    await client.api.itemsDeselectCreate({ id })
+    await Promise.all([fetchLeft(true), fetchRight(true)])
+  }
+
+  async function reorderSelected(ids: number[]): Promise<void> {
+    await client.api.itemsReorderUpdate({ ids })
+  }
+
+  async function addItem(id: number): Promise<void> {
+    await client.api.itemsAddCreate({ id })
+    await Promise.all([fetchLeft(true), fetchRight(true)])
+  }
+
+  return {
+    leftItems,
+    rightItems,
+    leftSearch,
+    rightSearch,
+    leftLoading,
+    rightLoading,
+    leftHasMore,
+    rightHasMore,
+    fetchLeft,
+    fetchRight,
+    selectItem,
+    deselectItem,
+    reorderSelected,
+    addItem,
+  }
+}