init
This commit is contained in:
Oscar
7
frontend/.claude/settings.local.json
Normal file
7
frontend/.claude/settings.local.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(pnpm dev *)"
|
||||
]
|
||||
}
|
||||
}
|
||||
108
frontend/app/app.vue
Normal file
108
frontend/app/app.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<header class="app-header">
|
||||
<h1>TMC Items Manager</h1>
|
||||
</header>
|
||||
<main class="panels">
|
||||
<LeftPanel
|
||||
:items="leftItems"
|
||||
:loading="leftLoading"
|
||||
:has-more="leftHasMore"
|
||||
:search="leftSearch"
|
||||
@update:search="leftSearch = $event"
|
||||
@load-more="fetchLeft()"
|
||||
@select="handleSelect"
|
||||
@add="handleAdd"
|
||||
/>
|
||||
<RightPanel
|
||||
:items="rightItems"
|
||||
:loading="rightLoading"
|
||||
:has-more="rightHasMore"
|
||||
:search="rightSearch"
|
||||
@update:search="rightSearch = $event"
|
||||
@load-more="fetchRight()"
|
||||
@deselect="handleDeselect"
|
||||
@reorder="handleReorder"
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, watch } from 'vue'
|
||||
|
||||
const {
|
||||
leftItems,
|
||||
rightItems,
|
||||
leftSearch,
|
||||
rightSearch,
|
||||
leftLoading,
|
||||
rightLoading,
|
||||
leftHasMore,
|
||||
rightHasMore,
|
||||
fetchLeft,
|
||||
fetchRight,
|
||||
selectItem,
|
||||
deselectItem,
|
||||
reorderSelected,
|
||||
addItem,
|
||||
} = useItems()
|
||||
|
||||
onMounted(() => {
|
||||
fetchLeft()
|
||||
fetchRight()
|
||||
})
|
||||
|
||||
watch(leftSearch, () => fetchLeft(true))
|
||||
watch(rightSearch, () => fetchRight(true))
|
||||
|
||||
async function handleSelect(id: number) {
|
||||
await selectItem(id)
|
||||
}
|
||||
|
||||
async function handleDeselect(id: number) {
|
||||
await deselectItem(id)
|
||||
}
|
||||
|
||||
async function handleReorder(ids: number[]) {
|
||||
await reorderSelected(ids)
|
||||
}
|
||||
|
||||
async function handleAdd(id: number) {
|
||||
await addItem(id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
padding: 12px 24px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
background: #fff;
|
||||
flex-shrink: 0;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
}
|
||||
|
||||
.panels {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
> * {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
10
frontend/app/assets/styles/main.scss
Normal file
10
frontend/app/assets/styles/main.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
260
frontend/app/components/LeftPanel.vue
Normal file
260
frontend/app/components/LeftPanel.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h2>All items</h2>
|
||||
<div class="panel-controls">
|
||||
<input
|
||||
class="search-input"
|
||||
type="text"
|
||||
placeholder="Search by ID..."
|
||||
:value="search"
|
||||
@input="onSearchInput"
|
||||
>
|
||||
<button class="btn btn-primary" @click="showAddModal = true">
|
||||
Add item
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<ul class="item-list">
|
||||
<li v-for="item in items" :key="item.id" class="item-row">
|
||||
<span class="item-label">#{{ item.id }}</span>
|
||||
<button class="btn btn-icon" title="Move to selected" @click="emit('select', item.id!)">
|
||||
→
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="loading" class="loading-text">
|
||||
Loading...
|
||||
</div>
|
||||
<div v-if="hasMore && !loading" ref="sentinel" class="sentinel" />
|
||||
<div v-if="!loading && !hasMore && items.length === 0" class="empty-text">
|
||||
No items found
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showAddModal" class="modal-overlay" @click.self="showAddModal = false">
|
||||
<div class="modal">
|
||||
<h3>Add new item</h3>
|
||||
<input
|
||||
v-model.number="addIdInput"
|
||||
class="search-input"
|
||||
type="number"
|
||||
placeholder="Enter item ID"
|
||||
@keydown.enter="submitAdd"
|
||||
>
|
||||
<div class="modal-actions">
|
||||
<button class="btn" @click="showAddModal = false">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn btn-primary" @click="submitAdd">
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Item } from '~/services/api'
|
||||
import { onUnmounted, ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
items: Item[]
|
||||
loading: boolean
|
||||
hasMore: boolean
|
||||
search: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:search', val: string): void
|
||||
(e: 'loadMore'): void
|
||||
(e: 'select', id: number): void
|
||||
(e: 'add', id: number): void
|
||||
}>()
|
||||
|
||||
const sentinel = ref<HTMLElement | null>(null)
|
||||
const showAddModal = ref(false)
|
||||
const addIdInput = ref<number | null>(null)
|
||||
let observer: IntersectionObserver | null = null
|
||||
|
||||
watch(sentinel, (el) => {
|
||||
if (observer) {
|
||||
observer.disconnect()
|
||||
observer = null
|
||||
}
|
||||
if (el) {
|
||||
observer = new IntersectionObserver((entries) => {
|
||||
if (entries[0]?.isIntersecting && props.hasMore && !props.loading) {
|
||||
emit('loadMore')
|
||||
}
|
||||
}, { threshold: 0.1 })
|
||||
observer.observe(el)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
observer?.disconnect()
|
||||
})
|
||||
|
||||
let debounceTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
function onSearchInput(e: Event) {
|
||||
const val = (e.target as HTMLInputElement).value
|
||||
if (debounceTimer)
|
||||
clearTimeout(debounceTimer)
|
||||
debounceTimer = setTimeout(() => {
|
||||
emit('update:search', val)
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function submitAdd() {
|
||||
if (addIdInput.value !== null && Number.isInteger(addIdInput.value)) {
|
||||
emit('add', addIdInput.value)
|
||||
addIdInput.value = null
|
||||
showAddModal.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
border-right: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
background: #f9fafb;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
border-color: #6366f1;
|
||||
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 6px 14px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
border-color: #6366f1;
|
||||
|
||||
&:hover {
|
||||
background: #4f46e5;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-icon {
|
||||
padding: 4px 10px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.item-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
|
||||
&:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 0.9rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.loading-text,
|
||||
.empty-text {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: #9ca3af;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.sentinel {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 24px;
|
||||
min-width: 320px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||
|
||||
h3 {
|
||||
margin: 0 0 16px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
216
frontend/app/components/RightPanel.vue
Normal file
216
frontend/app/components/RightPanel.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h2>Selected items</h2>
|
||||
<div class="panel-controls">
|
||||
<input
|
||||
class="search-input"
|
||||
type="text"
|
||||
placeholder="Search by ID..."
|
||||
:value="search"
|
||||
@input="onSearchInput"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<VueDraggableNext
|
||||
v-model="localItems"
|
||||
tag="ul"
|
||||
class="item-list"
|
||||
handle=".drag-handle"
|
||||
@end="onDragEnd"
|
||||
>
|
||||
<li v-for="item in localItems" :key="item.id" class="item-row">
|
||||
<span class="drag-handle" title="Drag to reorder">⠿</span>
|
||||
<span class="item-label">#{{ item.id }}</span>
|
||||
<button class="btn btn-icon" title="Remove from selected" @click="emit('deselect', item.id!)">
|
||||
←
|
||||
</button>
|
||||
</li>
|
||||
</VueDraggableNext>
|
||||
<div v-if="loading" class="loading-text">
|
||||
Loading...
|
||||
</div>
|
||||
<div v-if="hasMore && !loading" ref="sentinel" class="sentinel" />
|
||||
<div v-if="!loading && !hasMore && items.length === 0" class="empty-text">
|
||||
No items selected
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Item } from '~/services/api'
|
||||
import { onUnmounted, ref, watch } from 'vue'
|
||||
import { VueDraggableNext } from 'vue-draggable-next'
|
||||
|
||||
const props = defineProps<{
|
||||
items: Item[]
|
||||
loading: boolean
|
||||
hasMore: boolean
|
||||
search: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:search', val: string): void
|
||||
(e: 'loadMore'): void
|
||||
(e: 'deselect', id: number): void
|
||||
(e: 'reorder', ids: number[]): void
|
||||
}>()
|
||||
|
||||
const sentinel = ref<HTMLElement | null>(null)
|
||||
let observer: IntersectionObserver | null = null
|
||||
|
||||
watch(sentinel, (el) => {
|
||||
if (observer) {
|
||||
observer.disconnect()
|
||||
observer = null
|
||||
}
|
||||
if (el) {
|
||||
observer = new IntersectionObserver((entries) => {
|
||||
if (entries[0]?.isIntersecting && props.hasMore && !props.loading) {
|
||||
emit('loadMore')
|
||||
}
|
||||
}, { threshold: 0.1 })
|
||||
observer.observe(el)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
observer?.disconnect()
|
||||
})
|
||||
|
||||
let debounceTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
function onSearchInput(e: Event) {
|
||||
const val = (e.target as HTMLInputElement).value
|
||||
if (debounceTimer)
|
||||
clearTimeout(debounceTimer)
|
||||
debounceTimer = setTimeout(() => {
|
||||
emit('update:search', val)
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const localItems = ref([...props.items])
|
||||
|
||||
watch(() => props.items, (val) => {
|
||||
localItems.value = [...val]
|
||||
}, { deep: true })
|
||||
|
||||
function onDragEnd(): void {
|
||||
const ids = localItems.value.map(i => i.id!)
|
||||
emit('reorder', ids)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
background: #f9fafb;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
border-color: #6366f1;
|
||||
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 6px 14px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
&.btn-icon {
|
||||
padding: 4px 10px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.item-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
cursor: grab;
|
||||
color: #9ca3af;
|
||||
font-size: 1.1rem;
|
||||
user-select: none;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
.item-label {
|
||||
flex: 1;
|
||||
font-size: 0.9rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.loading-text,
|
||||
.empty-text {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: #9ca3af;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.sentinel {
|
||||
height: 1px;
|
||||
}
|
||||
</style>
|
||||
103
frontend/app/composables/useItems.ts
Normal file
103
frontend/app/composables/useItems.ts
Normal file
@@ -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,
|
||||
}
|
||||
}
|
||||
383
frontend/app/services/api.ts
Normal file
383
frontend/app/services/api.ts
Normal file
@@ -0,0 +1,383 @@
|
||||
/* eslint-disable */
|
||||
/* tslint:disable */
|
||||
// @ts-nocheck
|
||||
/*
|
||||
* ---------------------------------------------------------------
|
||||
* ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API ##
|
||||
* ## ##
|
||||
* ## AUTHOR: acacode ##
|
||||
* ## SOURCE: https://github.com/acacode/swagger-typescript-api ##
|
||||
* ---------------------------------------------------------------
|
||||
*/
|
||||
|
||||
export interface Item {
|
||||
id?: number;
|
||||
}
|
||||
|
||||
export interface PaginatedItems {
|
||||
data?: Item[];
|
||||
total?: number;
|
||||
page?: number;
|
||||
limit?: number;
|
||||
hasMore?: boolean;
|
||||
}
|
||||
|
||||
import type {
|
||||
AxiosInstance,
|
||||
AxiosRequestConfig,
|
||||
HeadersDefaults,
|
||||
ResponseType,
|
||||
} from "axios";
|
||||
import axios from "axios";
|
||||
|
||||
export type QueryParamsType = Record<string | number, any>;
|
||||
|
||||
export interface FullRequestParams
|
||||
extends Omit<AxiosRequestConfig, "data" | "params" | "url" | "responseType"> {
|
||||
/** set parameter to `true` for call `securityWorker` for this request */
|
||||
secure?: boolean;
|
||||
/** request path */
|
||||
path: string;
|
||||
/** content type of request body */
|
||||
type?: ContentType;
|
||||
/** query params */
|
||||
query?: QueryParamsType;
|
||||
/** format of response (i.e. response.json() -> format: "json") */
|
||||
format?: ResponseType;
|
||||
/** request body */
|
||||
body?: unknown;
|
||||
}
|
||||
|
||||
export type RequestParams = Omit<
|
||||
FullRequestParams,
|
||||
"body" | "method" | "query" | "path"
|
||||
>;
|
||||
|
||||
export interface ApiConfig<SecurityDataType = unknown>
|
||||
extends Omit<AxiosRequestConfig, "data" | "cancelToken"> {
|
||||
securityWorker?: (
|
||||
securityData: SecurityDataType | null,
|
||||
) => Promise<AxiosRequestConfig | void> | AxiosRequestConfig | void;
|
||||
secure?: boolean;
|
||||
format?: ResponseType;
|
||||
}
|
||||
|
||||
export enum ContentType {
|
||||
Json = "application/json",
|
||||
JsonApi = "application/vnd.api+json",
|
||||
FormData = "multipart/form-data",
|
||||
UrlEncoded = "application/x-www-form-urlencoded",
|
||||
Text = "text/plain",
|
||||
}
|
||||
|
||||
export class HttpClient<SecurityDataType = unknown> {
|
||||
public instance: AxiosInstance;
|
||||
private securityData: SecurityDataType | null = null;
|
||||
private securityWorker?: ApiConfig<SecurityDataType>["securityWorker"];
|
||||
private secure?: boolean;
|
||||
private format?: ResponseType;
|
||||
|
||||
constructor({
|
||||
securityWorker,
|
||||
secure,
|
||||
format,
|
||||
...axiosConfig
|
||||
}: ApiConfig<SecurityDataType> = {}) {
|
||||
this.instance = axios.create({
|
||||
...axiosConfig,
|
||||
baseURL: axiosConfig.baseURL || "http://localhost:1337",
|
||||
});
|
||||
this.secure = secure;
|
||||
this.format = format;
|
||||
this.securityWorker = securityWorker;
|
||||
}
|
||||
|
||||
public setSecurityData = (data: SecurityDataType | null) => {
|
||||
this.securityData = data;
|
||||
};
|
||||
|
||||
protected mergeRequestParams(
|
||||
params1: AxiosRequestConfig,
|
||||
params2?: AxiosRequestConfig,
|
||||
): AxiosRequestConfig {
|
||||
const method = params1.method || (params2 && params2.method);
|
||||
|
||||
return {
|
||||
...this.instance.defaults,
|
||||
...params1,
|
||||
...(params2 || {}),
|
||||
headers: {
|
||||
...((method &&
|
||||
this.instance.defaults.headers[
|
||||
method.toLowerCase() as keyof HeadersDefaults
|
||||
]) ||
|
||||
{}),
|
||||
...(params1.headers || {}),
|
||||
...((params2 && params2.headers) || {}),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected stringifyFormItem(formItem: unknown) {
|
||||
if (typeof formItem === "object" && formItem !== null) {
|
||||
return JSON.stringify(formItem);
|
||||
} else {
|
||||
return `${formItem}`;
|
||||
}
|
||||
}
|
||||
|
||||
protected createFormData(input: Record<string, unknown>): FormData {
|
||||
if (input instanceof FormData) {
|
||||
return input;
|
||||
}
|
||||
return Object.keys(input || {}).reduce((formData, key) => {
|
||||
const property = input[key];
|
||||
const propertyContent: any[] =
|
||||
property instanceof Array ? property : [property];
|
||||
|
||||
for (const formItem of propertyContent) {
|
||||
const isFileType = formItem instanceof Blob || formItem instanceof File;
|
||||
formData.append(
|
||||
key,
|
||||
isFileType ? formItem : this.stringifyFormItem(formItem),
|
||||
);
|
||||
}
|
||||
|
||||
return formData;
|
||||
}, new FormData());
|
||||
}
|
||||
|
||||
public request = async <T = any, _E = any>({
|
||||
secure,
|
||||
path,
|
||||
type,
|
||||
query,
|
||||
format,
|
||||
body,
|
||||
...params
|
||||
}: FullRequestParams): Promise<T> => {
|
||||
const secureParams =
|
||||
((typeof secure === "boolean" ? secure : this.secure) &&
|
||||
this.securityWorker &&
|
||||
(await this.securityWorker(this.securityData))) ||
|
||||
{};
|
||||
const requestParams = this.mergeRequestParams(params, secureParams);
|
||||
const responseFormat = format || this.format || undefined;
|
||||
|
||||
if (
|
||||
type === ContentType.FormData &&
|
||||
body &&
|
||||
body !== null &&
|
||||
typeof body === "object"
|
||||
) {
|
||||
body = this.createFormData(body as Record<string, unknown>);
|
||||
}
|
||||
|
||||
if (
|
||||
type === ContentType.Text &&
|
||||
body &&
|
||||
body !== null &&
|
||||
typeof body !== "string"
|
||||
) {
|
||||
body = JSON.stringify(body);
|
||||
}
|
||||
|
||||
return this.instance
|
||||
.request({
|
||||
...requestParams,
|
||||
headers: {
|
||||
...(requestParams.headers || {}),
|
||||
...(type ? { "Content-Type": type } : {}),
|
||||
},
|
||||
params: query,
|
||||
responseType: responseFormat,
|
||||
data: body,
|
||||
url: path,
|
||||
})
|
||||
.then((response) => response.data);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @title TMC Items API
|
||||
* @version 1.0.0
|
||||
* @baseUrl http://localhost:1337
|
||||
*
|
||||
* API for managing items with selection and ordering
|
||||
*/
|
||||
export class Api<
|
||||
SecurityDataType extends unknown,
|
||||
> extends HttpClient<SecurityDataType> {
|
||||
api = {
|
||||
/**
|
||||
* No description
|
||||
*
|
||||
* @tags Items
|
||||
* @name ItemsList
|
||||
* @summary Get unselected items
|
||||
* @request GET:/api/items
|
||||
*/
|
||||
itemsList: (
|
||||
query?: {
|
||||
/** @default 1 */
|
||||
page?: number;
|
||||
/**
|
||||
* @max 20
|
||||
* @default 20
|
||||
*/
|
||||
limit?: number;
|
||||
search?: string;
|
||||
},
|
||||
params: RequestParams = {},
|
||||
) =>
|
||||
this.request<PaginatedItems, any>({
|
||||
path: `/api/items`,
|
||||
method: "GET",
|
||||
query: query,
|
||||
format: "json",
|
||||
...params,
|
||||
}),
|
||||
|
||||
/**
|
||||
* No description
|
||||
*
|
||||
* @tags Items
|
||||
* @name ItemsSelectedList
|
||||
* @summary Get selected items in order
|
||||
* @request GET:/api/items/selected
|
||||
*/
|
||||
itemsSelectedList: (
|
||||
query?: {
|
||||
/** @default 1 */
|
||||
page?: number;
|
||||
/**
|
||||
* @max 20
|
||||
* @default 20
|
||||
*/
|
||||
limit?: number;
|
||||
search?: string;
|
||||
},
|
||||
params: RequestParams = {},
|
||||
) =>
|
||||
this.request<PaginatedItems, any>({
|
||||
path: `/api/items/selected`,
|
||||
method: "GET",
|
||||
query: query,
|
||||
format: "json",
|
||||
...params,
|
||||
}),
|
||||
|
||||
/**
|
||||
* No description
|
||||
*
|
||||
* @tags Items
|
||||
* @name ItemsAddCreate
|
||||
* @summary Queue an item for addition
|
||||
* @request POST:/api/items/add
|
||||
*/
|
||||
itemsAddCreate: (
|
||||
data: {
|
||||
id: number;
|
||||
},
|
||||
params: RequestParams = {},
|
||||
) =>
|
||||
this.request<
|
||||
{
|
||||
queued?: boolean;
|
||||
id?: number;
|
||||
},
|
||||
void
|
||||
>({
|
||||
path: `/api/items/add`,
|
||||
method: "POST",
|
||||
body: data,
|
||||
type: ContentType.Json,
|
||||
format: "json",
|
||||
...params,
|
||||
}),
|
||||
|
||||
/**
|
||||
* No description
|
||||
*
|
||||
* @tags Items
|
||||
* @name ItemsSelectCreate
|
||||
* @summary Queue an item for selection (move to right panel)
|
||||
* @request POST:/api/items/select
|
||||
*/
|
||||
itemsSelectCreate: (
|
||||
data: {
|
||||
id: number;
|
||||
},
|
||||
params: RequestParams = {},
|
||||
) =>
|
||||
this.request<
|
||||
{
|
||||
queued?: boolean;
|
||||
},
|
||||
any
|
||||
>({
|
||||
path: `/api/items/select`,
|
||||
method: "POST",
|
||||
body: data,
|
||||
type: ContentType.Json,
|
||||
format: "json",
|
||||
...params,
|
||||
}),
|
||||
|
||||
/**
|
||||
* No description
|
||||
*
|
||||
* @tags Items
|
||||
* @name ItemsDeselectCreate
|
||||
* @summary Queue an item for deselection (move back to left panel)
|
||||
* @request POST:/api/items/deselect
|
||||
*/
|
||||
itemsDeselectCreate: (
|
||||
data: {
|
||||
id: number;
|
||||
},
|
||||
params: RequestParams = {},
|
||||
) =>
|
||||
this.request<
|
||||
{
|
||||
queued?: boolean;
|
||||
},
|
||||
any
|
||||
>({
|
||||
path: `/api/items/deselect`,
|
||||
method: "POST",
|
||||
body: data,
|
||||
type: ContentType.Json,
|
||||
format: "json",
|
||||
...params,
|
||||
}),
|
||||
|
||||
/**
|
||||
* No description
|
||||
*
|
||||
* @tags Items
|
||||
* @name ItemsReorderUpdate
|
||||
* @summary Queue a reorder of selected items
|
||||
* @request PUT:/api/items/reorder
|
||||
*/
|
||||
itemsReorderUpdate: (
|
||||
data: {
|
||||
ids: number[];
|
||||
},
|
||||
params: RequestParams = {},
|
||||
) =>
|
||||
this.request<
|
||||
{
|
||||
queued?: boolean;
|
||||
},
|
||||
any
|
||||
>({
|
||||
path: `/api/items/reorder`,
|
||||
method: "PUT",
|
||||
body: data,
|
||||
type: ContentType.Json,
|
||||
format: "json",
|
||||
...params,
|
||||
}),
|
||||
};
|
||||
}
|
||||
24
frontend/eslint.config.js
Normal file
24
frontend/eslint.config.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import antfu from '@antfu/eslint-config'
|
||||
|
||||
export default antfu({
|
||||
typescript: true,
|
||||
vue: true,
|
||||
formatters: true,
|
||||
rules: {
|
||||
'no-console': 0,
|
||||
'vue/no-deprecated-slot-attribute': 0,
|
||||
'vue/block-order': ['error', {
|
||||
order: ['template', 'script', 'style'],
|
||||
}],
|
||||
'unused-imports/no-unused-vars': [
|
||||
'warn',
|
||||
{
|
||||
argsIgnorePattern: '^_',
|
||||
varsIgnorePattern: '^_',
|
||||
},
|
||||
],
|
||||
'node/prefer-global/process': 'off',
|
||||
'eslint-comments/no-unlimited-disable': 'off',
|
||||
'eslint-comments/no-unused-disable': 'off',
|
||||
},
|
||||
})
|
||||
16
frontend/nuxt.config.ts
Normal file
16
frontend/nuxt.config.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
export default defineNuxtConfig({
|
||||
devServer: {
|
||||
host: '0.0.0.0',
|
||||
},
|
||||
ssr: false,
|
||||
srcDir: 'app',
|
||||
modules: ['@nuxt/ui'],
|
||||
compatibilityDate: '2024-11-01',
|
||||
devtools: { enabled: true },
|
||||
css: ['~/assets/styles/main.scss'],
|
||||
runtimeConfig: {
|
||||
public: {
|
||||
apiBase: process.env.API_BASE ?? 'http://localhost:1337',
|
||||
},
|
||||
},
|
||||
})
|
||||
28
frontend/package.json
Normal file
28
frontend/package.json
Normal file
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "tmc-frontend",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "nuxt dev",
|
||||
"build": "nuxt build",
|
||||
"preview": "nuxt preview",
|
||||
"lint": "eslint . --fix",
|
||||
"typecheck": "vue-tsc --noEmit",
|
||||
"gen:api": "npx swagger-typescript-api generate --path http://localhost:1337/docs/json --output ./app/services --name api.ts --axios --unwrap-response-data"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxt/ui": "^4.7.1",
|
||||
"axios": "^1.17.0",
|
||||
"nuxt": "^4.4.2",
|
||||
"vue-draggable-next": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antfu/eslint-config": "^9.0.0",
|
||||
"eslint": "^10.4.1",
|
||||
"eslint-plugin-format": "^2.0.1",
|
||||
"sass": "^1.100.0",
|
||||
"swagger-typescript-api": "^13.12.0",
|
||||
"typescript": "^6.0.3",
|
||||
"vue-tsc": "^3.3.3"
|
||||
}
|
||||
}
|
||||
12085
frontend/pnpm-lock.yaml
generated
Normal file
12085
frontend/pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
9
frontend/pnpm-workspace.yaml
Normal file
9
frontend/pnpm-workspace.yaml
Normal file
@@ -0,0 +1,9 @@
|
||||
allowBuilds:
|
||||
'@parcel/watcher': false
|
||||
esbuild: false
|
||||
vue-demi: false
|
||||
minimumReleaseAgeExclude:
|
||||
- axios@1.17.0
|
||||
shellEmulator: true
|
||||
|
||||
trustPolicy: no-downgrade
|
||||
3
frontend/tsconfig.json
Normal file
3
frontend/tsconfig.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
Reference in New Issue
Block a user