mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 21:01:08 +02:00
feat(inventory): add quick item creation to workbench ListView
Adds a "Gegenstand hinzufügen" button that expands into an inline form with a collection picker dropdown and name input. Items are created directly via itemsStore.create() without leaving the workbench panel. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
e77ae5d5eb
commit
ea4f05dc11
1 changed files with 150 additions and 1 deletions
|
|
@ -1,13 +1,15 @@
|
|||
<!--
|
||||
Inventory — Workbench ListView
|
||||
Collections and items overview.
|
||||
Collections overview with quick item creation.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
|
||||
import { db } from '$lib/data/database';
|
||||
import { BaseListView } from '@mana/shared-ui';
|
||||
import { Plus } from '@mana/shared-icons';
|
||||
import type { ViewProps } from '$lib/app-registry';
|
||||
import type { LocalCollection, LocalItem } from './types';
|
||||
import { itemsStore } from './stores/items.svelte';
|
||||
|
||||
let { navigate }: ViewProps = $props();
|
||||
|
||||
|
|
@ -29,6 +31,28 @@
|
|||
}
|
||||
|
||||
const totalValue = $derived(items.reduce((sum, i) => sum + (i.purchaseData?.price ?? 0), 0));
|
||||
|
||||
// ── Quick-add item ──────────────────────────────────────
|
||||
let showAdd = $state(false);
|
||||
let newItemName = $state('');
|
||||
let selectedCollectionId = $state<string | null>(null);
|
||||
|
||||
// Default to first collection
|
||||
$effect(() => {
|
||||
if (!selectedCollectionId && collections.length > 0) {
|
||||
selectedCollectionId = collections[0]!.id;
|
||||
}
|
||||
});
|
||||
|
||||
async function addItem() {
|
||||
const name = newItemName.trim();
|
||||
if (!name || !selectedCollectionId) return;
|
||||
await itemsStore.create({
|
||||
collectionId: selectedCollectionId,
|
||||
name,
|
||||
});
|
||||
newItemName = '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<BaseListView items={collections} getKey={(c) => c.id} emptyTitle="Keine Sammlungen">
|
||||
|
|
@ -39,6 +63,43 @@
|
|||
{/if}
|
||||
{/snippet}
|
||||
|
||||
{#snippet listHeader()}
|
||||
{#if collections.length > 0}
|
||||
{#if showAdd}
|
||||
<form
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault();
|
||||
addItem();
|
||||
}}
|
||||
class="quick-add"
|
||||
>
|
||||
<select class="collection-select" bind:value={selectedCollectionId}>
|
||||
{#each collections as col (col.id)}
|
||||
<option value={col.id}>
|
||||
{col.icon ? `${col.icon} ` : ''}{col.name}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
<!-- svelte-ignore a11y_autofocus -->
|
||||
<input
|
||||
class="add-input"
|
||||
bind:value={newItemName}
|
||||
placeholder="Neuer Gegenstand..."
|
||||
autofocus
|
||||
/>
|
||||
<button type="submit" class="submit-btn" disabled={!newItemName.trim()}>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
</form>
|
||||
{:else}
|
||||
<button class="add-toggle" onclick={() => (showAdd = true)}>
|
||||
<Plus size={14} />
|
||||
<span>Gegenstand hinzufügen</span>
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
{#snippet item(collection)}
|
||||
<button
|
||||
onclick={() =>
|
||||
|
|
@ -62,3 +123,91 @@
|
|||
</button>
|
||||
{/snippet}
|
||||
</BaseListView>
|
||||
|
||||
<style>
|
||||
.quick-add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.375rem;
|
||||
margin-bottom: 0.625rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.collection-select {
|
||||
flex-shrink: 0;
|
||||
max-width: 7rem;
|
||||
padding: 0.1875rem 0.375rem;
|
||||
border: none;
|
||||
border-right: 1px solid hsl(var(--color-border));
|
||||
background: transparent;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.6875rem;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.collection-select option {
|
||||
background: hsl(var(--color-card));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.add-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
font-size: 0.8125rem;
|
||||
color: hsl(var(--color-foreground));
|
||||
padding: 0.125rem 0.25rem;
|
||||
}
|
||||
.add-input::placeholder {
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
background: transparent;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.submit-btn:hover:not(:disabled) {
|
||||
background: hsl(var(--color-surface-hover));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
.submit-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.add-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
width: 100%;
|
||||
padding: 0.375rem 0.5rem;
|
||||
margin-bottom: 0.625rem;
|
||||
border: 1px dashed hsl(var(--color-border));
|
||||
border-radius: 0.375rem;
|
||||
background: transparent;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.add-toggle:hover {
|
||||
border-color: hsl(var(--color-border-strong));
|
||||
color: hsl(var(--color-foreground));
|
||||
background: hsl(var(--color-surface-hover));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue