hemp/tmc-test-task
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
Oscar
2026-06-04 13:58:24 +03:00
parent 40a281b87e
commit 2d665fab66
7 changed files with 174 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.claude/settings.json Normal file
View File

@@ -0,0 +1,5 @@
{
"permissions": {
"defaultMode": "bypassPermissions"
}
}

2
backend/src/routes/items.ts
View File

@@ -13,6 +13,8 @@ export const itemsRouter = Router()
* properties:
* id:
* type: integer
* value:
* type: string
* PaginatedItems:
* type: object
* properties:

51
backend/src/services/itemsStore.ts
View File

@@ -1,28 +1,54 @@
export interface Item {
id: number
value: string
}
export interface PaginatedResult {
data: { id: number }[]
data: Item[]
total: number
page: number
limit: number
hasMore: boolean
}
const allItems: number[] = Array.from({ length: 1_000_000 }, (_, i) => i + 1)
const CHARS = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
function randomString(): string {
const len = 6 + Math.floor(Math.random() * 7)
let result = ''
for (let i = 0; i < len; i++) {
result += CHARS[Math.floor(Math.random() * CHARS.length)]
}
return result
}
const itemsById = new Map<number, string>()
const allItemsOrder: number[] = []
for (let i = 1; i <= 1_000_000; i++) {
itemsById.set(i, randomString())
allItemsOrder.push(i)
}
const selectedIds = new Set<number>()
const orderedSelected: number[] = []
export function getItems(page: number, limit: number, search?: string): PaginatedResult {
let filtered: number[]
if (search) {
filtered = allItems.filter(id => !selectedIds.has(id) && String(id).includes(search))
const s = search.toLowerCase()
filtered = allItemsOrder.filter(
id => !selectedIds.has(id) && (String(id).includes(search) || itemsById.get(id)!.toLowerCase().includes(s)),
)
}
else {
filtered = allItems.filter(id => !selectedIds.has(id))
filtered = allItemsOrder.filter(id => !selectedIds.has(id))
}
const total = filtered.length
const start = (page - 1) * limit
const slice = filtered.slice(start, start + limit)
return {
data: slice.map(id => ({ id })),
data: slice.map(id => ({ id, value: itemsById.get(id)! })),
total,
page,
limit,
@@ -33,7 +59,11 @@ export function getItems(page: number, limit: number, search?: string): Paginate
export function getSelectedItems(page: number, limit: number, search?: string): PaginatedResult {
let filtered: number[]
if (search) {
filtered = orderedSelected.filter(id => String(id).includes(search))
const s = search.toLowerCase()
filtered = orderedSelected.filter((id) => {
const value = itemsById.get(id)!
return String(id).includes(search) || value.toLowerCase().includes(s)
})
}
else {
filtered = [...orderedSelected]
@@ -42,7 +72,7 @@ export function getSelectedItems(page: number, limit: number, search?: string):
const start = (page - 1) * limit
const slice = filtered.slice(start, start + limit)
return {
data: slice.map(id => ({ id })),
data: slice.map(id => ({ id, value: itemsById.get(id)! })),
total,
page,
limit,
@@ -51,13 +81,14 @@ export function getSelectedItems(page: number, limit: number, search?: string):
}
export function addItem(id: number): boolean {
if (allItems.includes(id) || selectedIds.has(id)) return false
allItems.push(id)
if (itemsById.has(id)) return false
itemsById.set(id, randomString())
allItemsOrder.push(id)
return true
}
export function selectItem(id: number): boolean {
if (selectedIds.has(id)) return false
if (selectedIds.has(id) || !itemsById.has(id)) return false
selectedIds.add(id)
orderedSelected.push(id)
return true

25
frontend/app/components/LeftPanel.vue
View File

@@ -25,7 +25,7 @@
<input
class="search-input"
type="text"
placeholder="Search by ID..."
placeholder="Search..."
:value="search"
@input="onSearchInput"
>
@@ -40,7 +40,8 @@
class="item-row"
:style="{ '--i': Math.min(index, 14) }"
>
<span class="item-id">{{ item.id }}</span>
<span class="item-id">#{{ item.id }}</span>
<span class="item-value">{{ item.value }}</span>
<button class="action-btn" title="Move to selected" @click="emit('select', item.id!)">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<path d="M2.5 7H11.5M8.5 3.5L12 7L8.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
@@ -339,7 +340,7 @@ function submitAdd() {
.item-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 12px 9px 20px;
border-bottom: 1px solid var(--border);
animation: item-in 350ms cubic-bezier(0.16, 1, 0.3, 1) both;
@@ -356,15 +357,21 @@ function submitAdd() {
}
.item-id {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--text-muted);
flex-shrink: 0;
min-width: 44px;
}
.item-value {
flex: 1;
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--text-primary);
&::before {
content: '#';
color: var(--text-muted);
margin-right: 1px;
}
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.action-btn {

95
frontend/app/components/RightPanel.vue
View File

@@ -17,20 +17,21 @@
<input
class="search-input"
type="text"
placeholder="Search by ID..."
placeholder="Search..."
:value="search"
@input="onSearchInput"
>
</div>
</div>
<div class="panel-body">
<div ref="panelBody" class="panel-body">
<VueDraggableNext
v-model="localItems"
tag="ul"
class="item-list"
handle=".drag-handle"
@end="onDragEnd"
@start="onDragStarted"
@end="onDragEndFull"
>
<li
v-for="(item, index) in localItems"
@@ -48,8 +49,8 @@
<circle cx="6" cy="10" r="1.2" />
</svg>
</span>
<!-- <span class="item-order">{{ index + 1 }}</span> -->
<span class="item-id">{{ item.id }}</span>
<span class="item-id">#{{ item.id }}</span>
<span class="item-value">{{ item.value }}</span>
<button class="action-btn" title="Remove from selected" @click="emit('deselect', item.id!)">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<path d="M11.5 7H2.5M5.5 3.5L2 7L5.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
@@ -92,6 +93,7 @@ const emit = defineEmits<{
}>()
const sentinel = ref<HTMLElement | null>(null)
const panelBody = ref<HTMLElement | null>(null)
let observer: IntersectionObserver | null = null
watch(sentinel, (el) => {
@@ -109,10 +111,67 @@ watch(sentinel, (el) => {
}
})
// ── Auto-scroll during drag ──────────────────────────────────────────────────
const SCROLL_ZONE = 80
const SCROLL_MAX_SPEED = 12
let isDragging = false
let scrollSpeed = 0
let scrollRafId: number | null = null
function scrollLoop() {
if (!isDragging || !panelBody.value) {
scrollRafId = null
return
}
if (scrollSpeed !== 0) {
panelBody.value.scrollTop += scrollSpeed
}
scrollRafId = requestAnimationFrame(scrollLoop)
}
function onPointerMoveDrag(e: PointerEvent) {
if (!isDragging || !panelBody.value) return
const rect = panelBody.value.getBoundingClientRect()
const y = e.clientY - rect.top
if (y >= 0 && y < SCROLL_ZONE) {
scrollSpeed = -((SCROLL_ZONE - y) / SCROLL_ZONE) * SCROLL_MAX_SPEED
}
else {
scrollSpeed = 0
}
}
function onDragStarted() {
isDragging = true
scrollSpeed = 0
document.addEventListener('pointermove', onPointerMoveDrag)
scrollRafId = requestAnimationFrame(scrollLoop)
}
function onDragEndFull(event: { oldIndex: number, newIndex: number }): void {
isDragging = false
scrollSpeed = 0
document.removeEventListener('pointermove', onPointerMoveDrag)
if (scrollRafId !== null) {
cancelAnimationFrame(scrollRafId)
scrollRafId = null
}
const moved = localItems.value[event.newIndex]
if (!moved) return
const after = event.newIndex > 0 ? localItems.value[event.newIndex - 1] : null
emit('reorder', moved.id!, after?.id ?? null)
}
onUnmounted(() => {
observer?.disconnect()
document.removeEventListener('pointermove', onPointerMoveDrag)
if (scrollRafId !== null) cancelAnimationFrame(scrollRafId)
})
// ── Search ───────────────────────────────────────────────────────────────────
let debounceTimer: ReturnType<typeof setTimeout> | null = null
function onSearchInput(e: Event) {
@@ -124,17 +183,13 @@ function onSearchInput(e: Event) {
}, 300)
}
// ── Local items for drag-and-drop ────────────────────────────────────────────
const localItems = ref([...props.items])
watch(() => props.items, (val) => {
localItems.value = [...val]
}, { deep: true })
function onDragEnd(event: { oldIndex: number, newIndex: number }): void {
const moved = localItems.value[event.newIndex]
const after = event.newIndex > 0 ? localItems.value[event.newIndex - 1] : null
emit('reorder', moved.id!, after?.id ?? null)
}
</script>
<style scoped lang="scss">
@@ -296,26 +351,22 @@ function onDragEnd(event: { oldIndex: number, newIndex: number }): void {
}
}
.item-order {
.item-id {
font-family: var(--font-mono);
font-size: 0.68rem;
font-size: 0.72rem;
color: var(--text-muted);
min-width: 18px;
text-align: right;
flex-shrink: 0;
min-width: 44px;
}
.item-id {
.item-value {
flex: 1;
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--text-primary);
&::before {
content: '#';
color: var(--text-muted);
margin-right: 1px;
}
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.action-btn {

42
frontend/app/composables/useItems.ts
View File

@@ -21,12 +21,25 @@ export function useItems() {
async function fetchLeft(reset = false): Promise<void> {
if (reset) {
leftPage.value = 1
leftItems.value = []
leftHasMore.value = true
if (leftLoading.value) return
leftLoading.value = true
try {
const data = await client.api.itemsList({
page: 1,
limit: 20,
...(leftSearch.value ? { search: leftSearch.value } : {}),
})
leftItems.value = [...(data.data ?? [])]
leftHasMore.value = data.hasMore ?? false
leftItemsTotal.value = data.total || 0
leftPage.value = 2
}
finally {
leftLoading.value = false
}
if (!leftHasMore.value || leftLoading.value)
return
}
if (!leftHasMore.value || leftLoading.value) return
leftLoading.value = true
try {
const data = await client.api.itemsList({
@@ -46,12 +59,25 @@ export function useItems() {
async function fetchRight(reset = false): Promise<void> {
if (reset) {
rightPage.value = 1
rightItems.value = []
rightHasMore.value = true
if (rightLoading.value) return
rightLoading.value = true
try {
const data = await client.api.itemsSelectedList({
page: 1,
limit: 20,
...(rightSearch.value ? { search: rightSearch.value } : {}),
})
rightItems.value = [...(data.data ?? [])]
rightHasMore.value = data.hasMore ?? false
rightItemsTotal.value = data.total || 0
rightPage.value = 2
}
finally {
rightLoading.value = false
}
if (!rightHasMore.value || rightLoading.value)
return
}
if (!rightHasMore.value || rightLoading.value) return
rightLoading.value = true
try {
const data = await client.api.itemsSelectedList({

1
frontend/app/services/api.ts
View File

@@ -12,6 +12,7 @@
export interface Item {
id?: number;
value?: string;
}
export interface PaginatedItems {