Refactor input elements for consistency and readability; update styles for better alignment and spacing in SignupPage and ListDetailPage.
This commit is contained in:
mohamad
parent
18f759aa7c
commit
29682b7e9c
@ -1,13 +1,15 @@
|
||||
<template>
|
||||
<main class="container page-padding">
|
||||
<div v-if="loading" class="text-center">
|
||||
<div class="spinner-dots" role="status"><span/><span/><span/></div>
|
||||
<div class="spinner-dots" role="status"><span /><span /><span /></div>
|
||||
<p>Loading list details...</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="alert alert-error mb-3" role="alert">
|
||||
<div class="alert-content">
|
||||
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-alert-triangle" /></svg>
|
||||
<div class="alert-content">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-alert-triangle" />
|
||||
</svg>
|
||||
{{ error }}
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-danger" @click="fetchListDetails">Retry</button>
|
||||
@ -18,11 +20,15 @@
|
||||
<h1>{{ list.name }}</h1>
|
||||
<div class="flex items-center flex-wrap" style="gap: 0.5rem;">
|
||||
<button class="btn btn-neutral btn-sm" @click="showCostSummaryDialog = true">
|
||||
<svg class="icon icon-sm"><use xlink:href="#icon-clipboard"/></svg> <!-- Placeholder icon -->
|
||||
<svg class="icon icon-sm">
|
||||
<use xlink:href="#icon-clipboard" />
|
||||
</svg> <!-- Placeholder icon -->
|
||||
Cost Summary
|
||||
</button>
|
||||
<button class="btn btn-secondary btn-sm" @click="openOcrDialog">
|
||||
<svg class="icon icon-sm"><use xlink:href="#icon-plus"/></svg> <!-- Placeholder, camera_alt not in Valerie -->
|
||||
<svg class="icon icon-sm">
|
||||
<use xlink:href="#icon-plus" />
|
||||
</svg> <!-- Placeholder, camera_alt not in Valerie -->
|
||||
Add via OCR
|
||||
</button>
|
||||
<span class="item-badge ml-1" :class="list.is_complete ? 'badge-settled' : 'badge-pending'">
|
||||
@ -37,27 +43,15 @@
|
||||
<div class="flex items-end flex-wrap" style="gap: 1rem;">
|
||||
<div class="form-group flex-grow" style="margin-bottom: 0;">
|
||||
<label for="newItemName" class="form-label">Item Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="newItemName"
|
||||
v-model="newItem.name"
|
||||
class="form-input"
|
||||
required
|
||||
ref="itemNameInputRef"
|
||||
/>
|
||||
<input type="text" id="newItemName" v-model="newItem.name" class="form-input" required
|
||||
ref="itemNameInputRef" />
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom: 0; min-width: 120px;">
|
||||
<label for="newItemQuantity" class="form-label">Quantity</label>
|
||||
<input
|
||||
type="number"
|
||||
id="newItemQuantity"
|
||||
v-model="newItem.quantity"
|
||||
class="form-input"
|
||||
min="1"
|
||||
/>
|
||||
<input type="number" id="newItemQuantity" v-model="newItem.quantity" class="form-input" min="1" />
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary" :disabled="addingItem">
|
||||
<span v-if="addingItem" class="spinner-dots-sm" role="status"><span/><span/><span/></span>
|
||||
<span v-if="addingItem" class="spinner-dots-sm" role="status"><span /><span /><span /></span>
|
||||
Add Item
|
||||
</button>
|
||||
</div>
|
||||
@ -66,61 +60,44 @@
|
||||
|
||||
<!-- Items List -->
|
||||
<div v-if="list.items.length === 0" class="card empty-state-card">
|
||||
<svg class="icon icon-lg" aria-hidden="true"><use xlink:href="#icon-clipboard" /></svg>
|
||||
<svg class="icon icon-lg" aria-hidden="true">
|
||||
<use xlink:href="#icon-clipboard" />
|
||||
</svg>
|
||||
<h3>No Items Yet!</h3>
|
||||
<p>This list is empty. Add some items using the form above.</p>
|
||||
</div>
|
||||
|
||||
<ul v-else class="item-list">
|
||||
<li
|
||||
v-for="item in list.items"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
:class="{ 'completed': item.is_complete, 'is-swiped': item.swiped }"
|
||||
@touchstart="handleTouchStart($event, item)"
|
||||
@touchmove="handleTouchMove($event, item)"
|
||||
@touchend="handleTouchEnd(item)"
|
||||
>
|
||||
<li v-for="item in list.items" :key="item.id" class="list-item"
|
||||
:class="{ 'completed': item.is_complete, 'is-swiped': item.swiped }" @touchstart="handleTouchStart"
|
||||
@touchmove="handleTouchMove" @touchend="handleTouchEnd">
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-main">
|
||||
<label class="checkbox-label mb-0 flex-shrink-0">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="item.is_complete"
|
||||
<input type="checkbox" :checked="item.is_complete"
|
||||
@change="confirmUpdateItem(item, ($event.target as HTMLInputElement).checked)"
|
||||
:disabled="item.updating"
|
||||
:aria-label="item.name"
|
||||
/>
|
||||
:disabled="item.updating" :aria-label="item.name" />
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<div class="item-text flex-grow">
|
||||
<span :class="{ 'text-decoration-line-through': item.is_complete }">{{ item.name }}</span>
|
||||
<small v-if="item.quantity" class="item-caption">Quantity: {{ item.quantity }}</small>
|
||||
<div v-if="item.is_complete" class="form-group mt-1" style="max-width: 150px; margin-bottom: 0;">
|
||||
<label :for="`price-${item.id}`" class="sr-only">Price for {{ item.name }}</label>
|
||||
<input
|
||||
:id="`price-${item.id}`"
|
||||
type="number"
|
||||
v-model.number="item.priceInput"
|
||||
class="form-input form-input-sm"
|
||||
placeholder="Price"
|
||||
step="0.01"
|
||||
@blur="updateItemPrice(item)"
|
||||
@keydown.enter.prevent="($event.target as HTMLInputElement).blur()"
|
||||
/>
|
||||
<label :for="`price-${item.id}`" class="sr-only">Price for {{ item.name }}</label>
|
||||
<input :id="`price-${item.id}`" type="number" v-model.number="item.priceInput"
|
||||
class="form-input form-input-sm" placeholder="Price" step="0.01" @blur="updateItemPrice(item)"
|
||||
@keydown.enter.prevent="($event.target as HTMLInputElement).blur()" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Non-swipe actions can be added here or handled by swipe -->
|
||||
<div class="list-item-actions">
|
||||
<button
|
||||
class="btn btn-danger btn-sm btn-icon-only"
|
||||
@click.stop="confirmDeleteItem(item)"
|
||||
:disabled="item.deleting"
|
||||
aria-label="Delete item"
|
||||
>
|
||||
<svg class="icon icon-sm"><use xlink:href="#icon-trash"></use></svg>
|
||||
</button>
|
||||
<div class="list-item-actions">
|
||||
<button class="btn btn-danger btn-sm btn-icon-only" @click.stop="confirmDeleteItem(item)"
|
||||
:disabled="item.deleting" aria-label="Delete item">
|
||||
<svg class="icon icon-sm">
|
||||
<use xlink:href="#icon-trash"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Swipe actions could be added here if fully implementing swipe from Valerie UI example -->
|
||||
@ -133,11 +110,13 @@
|
||||
<div class="modal-container" ref="ocrModalRef" style="min-width: 400px;">
|
||||
<div class="modal-header">
|
||||
<h3>Add Items via OCR</h3>
|
||||
<button class="close-button" @click="closeOcrDialog" aria-label="Close"><svg class="icon"><use xlink:href="#icon-close"/></svg></button>
|
||||
<button class="close-button" @click="closeOcrDialog" aria-label="Close"><svg class="icon">
|
||||
<use xlink:href="#icon-close" />
|
||||
</svg></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div v-if="ocrLoading" class="text-center">
|
||||
<div class="spinner-dots"><span/><span/><span/></div>
|
||||
<div class="spinner-dots"><span /><span /><span /></div>
|
||||
<p>Processing image...</p>
|
||||
</div>
|
||||
<div v-else-if="ocrItems.length > 0">
|
||||
@ -147,7 +126,9 @@
|
||||
<div class="list-item-content flex items-center" style="gap: 0.5rem;">
|
||||
<input type="text" v-model="ocrItem.name" class="form-input flex-grow" required />
|
||||
<button class="btn btn-danger btn-sm btn-icon-only" @click="ocrItems.splice(index, 1)">
|
||||
<svg class="icon icon-sm"><use xlink:href="#icon-trash"/></svg>
|
||||
<svg class="icon icon-sm">
|
||||
<use xlink:href="#icon-trash" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
@ -155,36 +136,35 @@
|
||||
</div>
|
||||
<div v-else class="form-group">
|
||||
<label for="ocrFile" class="form-label">Upload Image</label>
|
||||
<input type="file" id="ocrFile" class="form-input" accept="image/*" @change="handleOcrFileUpload" ref="ocrFileInputRef"/>
|
||||
<input type="file" id="ocrFile" class="form-input" accept="image/*" @change="handleOcrFileUpload"
|
||||
ref="ocrFileInputRef" />
|
||||
<p v-if="ocrError" class="form-error-text mt-1">{{ ocrError }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-neutral" @click="closeOcrDialog">Cancel</button>
|
||||
<button
|
||||
v-if="ocrItems.length > 0"
|
||||
type="button"
|
||||
class="btn btn-primary ml-2"
|
||||
@click="addOcrItems"
|
||||
:disabled="addingOcrItems"
|
||||
>
|
||||
<span v-if="addingOcrItems" class="spinner-dots-sm"><span/><span/><span/></span>
|
||||
<button v-if="ocrItems.length > 0" type="button" class="btn btn-primary ml-2" @click="addOcrItems"
|
||||
:disabled="addingOcrItems">
|
||||
<span v-if="addingOcrItems" class="spinner-dots-sm"><span /><span /><span /></span>
|
||||
Add Items
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Cost Summary Dialog -->
|
||||
<div v-if="showCostSummaryDialog" class="modal-backdrop open" @click.self="showCostSummaryDialog = false">
|
||||
<div class="modal-container" ref="costSummaryModalRef" style="min-width: 550px;">
|
||||
<div class="modal-header">
|
||||
<h3>List Cost Summary</h3>
|
||||
<button class="close-button" @click="showCostSummaryDialog = false" aria-label="Close"><svg class="icon"><use xlink:href="#icon-close"/></svg></button>
|
||||
<button class="close-button" @click="showCostSummaryDialog = false" aria-label="Close"><svg class="icon">
|
||||
<use xlink:href="#icon-close" />
|
||||
</svg></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div v-if="costSummaryLoading" class="text-center">
|
||||
<div class="spinner-dots"><span/><span/><span/></div><p>Loading summary...</p>
|
||||
<div class="spinner-dots"><span /><span /><span /></div>
|
||||
<p>Loading summary...</p>
|
||||
</div>
|
||||
<div v-else-if="costSummaryError" class="alert alert-error">{{ costSummaryError }}</div>
|
||||
<div v-else-if="listCostSummary">
|
||||
@ -210,7 +190,8 @@
|
||||
<td class="text-right">{{ formatCurrency(userShare.items_added_value) }}</td>
|
||||
<td class="text-right">{{ formatCurrency(userShare.amount_due) }}</td>
|
||||
<td class="text-right">
|
||||
<span class="item-badge" :class="parseFloat(String(userShare.balance)) >= 0 ? 'badge-settled' : 'badge-pending'">
|
||||
<span class="item-badge"
|
||||
:class="parseFloat(String(userShare.balance)) >= 0 ? 'badge-settled' : 'badge-pending'">
|
||||
{{ formatCurrency(userShare.balance) }}
|
||||
</span>
|
||||
</td>
|
||||
@ -229,20 +210,24 @@
|
||||
|
||||
<!-- Confirmation Dialog -->
|
||||
<div v-if="showConfirmDialogState" class="modal-backdrop open" @click.self="cancelConfirmation">
|
||||
<div class="modal-container confirm-modal" ref="confirmModalRef">
|
||||
<div class="modal-header">
|
||||
<h3>Confirmation</h3>
|
||||
<button class="close-button" @click="cancelConfirmation" aria-label="Close"><svg class="icon"><use xlink:href="#icon-close"/></svg></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<svg class="icon icon-lg mb-2" style="color: var(--warning);"><use xlink:href="#icon-alert-triangle"/></svg>
|
||||
<p>{{ confirmDialogMessage }}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-neutral" @click="cancelConfirmation">Cancel</button>
|
||||
<button class="btn btn-primary ml-2" @click="handleConfirmedAction">Confirm</button>
|
||||
</div>
|
||||
<div class="modal-container confirm-modal" ref="confirmModalRef">
|
||||
<div class="modal-header">
|
||||
<h3>Confirmation</h3>
|
||||
<button class="close-button" @click="cancelConfirmation" aria-label="Close"><svg class="icon">
|
||||
<use xlink:href="#icon-close" />
|
||||
</svg></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<svg class="icon icon-lg mb-2" style="color: var(--warning);">
|
||||
<use xlink:href="#icon-alert-triangle" />
|
||||
</svg>
|
||||
<p>{{ confirmDialogMessage }}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-neutral" @click="cancelConfirmation">Cancel</button>
|
||||
<button class="btn btn-primary ml-2" @click="handleConfirmedAction">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
@ -304,7 +289,7 @@ const list = ref<List | null>(null);
|
||||
const loading = ref(true);
|
||||
const error = ref<string | null>(null);
|
||||
const addingItem = ref(false);
|
||||
const pollingInterval = ref<NodeJS.Timeout | null>(null);
|
||||
const pollingInterval = ref<ReturnType<typeof setInterval> | null>(null);
|
||||
const lastListUpdate = ref<string | null>(null);
|
||||
const lastItemUpdate = ref<string | null>(null);
|
||||
|
||||
@ -318,7 +303,7 @@ const ocrLoading = ref(false);
|
||||
const ocrItems = ref<{ name: string }[]>([]); // Items extracted from OCR
|
||||
const addingOcrItems = ref(false);
|
||||
const ocrError = ref<string | null>(null);
|
||||
const ocrFileInputRef = ref<HTMLInputElement|null>(null);
|
||||
const ocrFileInputRef = ref<HTMLInputElement | null>(null);
|
||||
const { files: ocrFiles, reset: resetOcrFileDialog } = useFileDialog({
|
||||
accept: 'image/*',
|
||||
multiple: false,
|
||||
@ -365,14 +350,14 @@ const fetchListDetails = async () => {
|
||||
const rawList = response.data as List;
|
||||
rawList.items = processListItems(rawList.items);
|
||||
list.value = rawList;
|
||||
|
||||
|
||||
lastListUpdate.value = rawList.updated_at;
|
||||
lastItemUpdate.value = rawList.items.reduce((latest: string, item: Item) => {
|
||||
return item.updated_at > latest ? item.updated_at : latest;
|
||||
}, '');
|
||||
|
||||
if (showCostSummaryDialog.value) { // If dialog is open, refresh its data
|
||||
await fetchListCostSummary();
|
||||
await fetchListCostSummary();
|
||||
}
|
||||
|
||||
} catch (err: unknown) {
|
||||
@ -390,7 +375,7 @@ const checkForUpdates = async () => {
|
||||
const newLastItemUpdate = newItems.reduce((latest: string, item: Item) => item.updated_at > latest ? item.updated_at : latest, '');
|
||||
|
||||
if ((lastListUpdate.value && newListUpdatedAt > lastListUpdate.value) ||
|
||||
(lastItemUpdate.value && newLastItemUpdate > lastItemUpdate.value)) {
|
||||
(lastItemUpdate.value && newLastItemUpdate > lastItemUpdate.value)) {
|
||||
await fetchListDetails();
|
||||
}
|
||||
} catch (err) {
|
||||
@ -441,21 +426,21 @@ const updateItem = async (item: Item, newCompleteStatus: boolean) => {
|
||||
version: item.version,
|
||||
};
|
||||
if (item.is_complete && item.priceInput !== undefined && item.priceInput !== null && String(item.priceInput).trim() !== '') {
|
||||
payload.price = parseFloat(String(item.priceInput));
|
||||
payload.price = parseFloat(String(item.priceInput));
|
||||
} else if (item.is_complete && (item.priceInput === undefined || String(item.priceInput).trim() === '')) {
|
||||
// If complete and price is empty, don't send price, or send null if API expects it
|
||||
payload.price = null; // Or omit, depending on API
|
||||
// If complete and price is empty, don't send price, or send null if API expects it
|
||||
payload.price = null; // Or omit, depending on API
|
||||
}
|
||||
|
||||
|
||||
const response = await apiClient.put(API_ENDPOINTS.ITEMS.BY_ID(String(item.id)), payload);
|
||||
const updatedItemFromServer = processListItems([response.data as Item])[0];
|
||||
|
||||
|
||||
const index = list.value.items.findIndex(i => i.id === item.id);
|
||||
if (index !== -1) {
|
||||
list.value.items[index] = { ...list.value.items[index], ...updatedItemFromServer, updating: false };
|
||||
}
|
||||
|
||||
|
||||
// If cost summary was open, refresh it
|
||||
if (showCostSummaryDialog.value) await fetchListCostSummary();
|
||||
|
||||
@ -469,33 +454,33 @@ const updateItem = async (item: Item, newCompleteStatus: boolean) => {
|
||||
|
||||
|
||||
const updateItemPrice = async (item: Item) => {
|
||||
if (!list.value || !item.is_complete) return; // Only update price if item is complete
|
||||
if (!list.value || !item.is_complete) return; // Only update price if item is complete
|
||||
|
||||
const newPrice = item.priceInput !== undefined && String(item.priceInput).trim() !== '' ? parseFloat(String(item.priceInput)) : null;
|
||||
if (item.price === newPrice) return; // No change
|
||||
const newPrice = item.priceInput !== undefined && String(item.priceInput).trim() !== '' ? parseFloat(String(item.priceInput)) : null;
|
||||
if (item.price === newPrice) return; // No change
|
||||
|
||||
item.updating = true;
|
||||
const originalPrice = item.price;
|
||||
item.price = newPrice; // Optimistic
|
||||
item.updating = true;
|
||||
const originalPrice = item.price;
|
||||
item.price = newPrice; // Optimistic
|
||||
|
||||
try {
|
||||
const response = await apiClient.put(
|
||||
API_ENDPOINTS.ITEMS.BY_ID(String(item.id)),
|
||||
{ price: item.price, is_complete: item.is_complete, version: item.version }
|
||||
);
|
||||
const updatedItemFromServer = processListItems([response.data as Item])[0];
|
||||
const index = list.value.items.findIndex(i => i.id === item.id);
|
||||
if (index !== -1) {
|
||||
list.value.items[index] = { ...list.value.items[index], ...updatedItemFromServer, updating: false };
|
||||
}
|
||||
if (showCostSummaryDialog.value) await fetchListCostSummary();
|
||||
} catch (err) {
|
||||
item.price = originalPrice; // Revert
|
||||
item.priceInput = originalPrice !== null && originalPrice !== undefined ? originalPrice : '';
|
||||
notificationStore.addNotification({ message: (err instanceof Error ? err.message : String(err)) || 'Failed to update item price.', type: 'error' });
|
||||
} finally {
|
||||
item.updating = false;
|
||||
try {
|
||||
const response = await apiClient.put(
|
||||
API_ENDPOINTS.ITEMS.BY_ID(String(item.id)),
|
||||
{ price: item.price, is_complete: item.is_complete, version: item.version }
|
||||
);
|
||||
const updatedItemFromServer = processListItems([response.data as Item])[0];
|
||||
const index = list.value.items.findIndex(i => i.id === item.id);
|
||||
if (index !== -1) {
|
||||
list.value.items[index] = { ...list.value.items[index], ...updatedItemFromServer, updating: false };
|
||||
}
|
||||
if (showCostSummaryDialog.value) await fetchListCostSummary();
|
||||
} catch (err) {
|
||||
item.price = originalPrice; // Revert
|
||||
item.priceInput = originalPrice !== null && originalPrice !== undefined ? originalPrice : '';
|
||||
notificationStore.addNotification({ message: (err instanceof Error ? err.message : String(err)) || 'Failed to update item price.', type: 'error' });
|
||||
} finally {
|
||||
item.updating = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -540,20 +525,20 @@ const cancelConfirmation = () => {
|
||||
|
||||
// OCR Functionality
|
||||
const openOcrDialog = () => {
|
||||
ocrItems.value = [];
|
||||
ocrError.value = null;
|
||||
resetOcrFileDialog(); // Clear previous file selection from useFileDialog
|
||||
showOcrDialogState.value = true;
|
||||
nextTick(() => {
|
||||
if (ocrFileInputRef.value) {
|
||||
ocrFileInputRef.value.value = ''; // Manually clear input type=file
|
||||
}
|
||||
});
|
||||
ocrItems.value = [];
|
||||
ocrError.value = null;
|
||||
resetOcrFileDialog(); // Clear previous file selection from useFileDialog
|
||||
showOcrDialogState.value = true;
|
||||
nextTick(() => {
|
||||
if (ocrFileInputRef.value) {
|
||||
ocrFileInputRef.value.value = ''; // Manually clear input type=file
|
||||
}
|
||||
});
|
||||
};
|
||||
const closeOcrDialog = () => {
|
||||
showOcrDialogState.value = false;
|
||||
ocrItems.value = [];
|
||||
ocrError.value = null;
|
||||
showOcrDialogState.value = false;
|
||||
ocrItems.value = [];
|
||||
ocrError.value = null;
|
||||
};
|
||||
|
||||
watch(ocrFiles, async (newFiles) => {
|
||||
@ -564,10 +549,10 @@ watch(ocrFiles, async (newFiles) => {
|
||||
});
|
||||
|
||||
const handleOcrFileUpload = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
if (target.files && target.files.length > 0) {
|
||||
handleOcrUpload(target.files[0]);
|
||||
}
|
||||
const target = event.target as HTMLInputElement;
|
||||
if (target.files && target.files.length > 0) {
|
||||
handleOcrUpload(target.files[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOcrUpload = async (file: File) => {
|
||||
@ -581,15 +566,15 @@ const handleOcrUpload = async (file: File) => {
|
||||
const response = await apiClient.post(API_ENDPOINTS.OCR.PROCESS, formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
});
|
||||
ocrItems.value = response.data.extracted_items.map((nameStr: string) => ({ name: nameStr.trim() })).filter(item => item.name);
|
||||
if(ocrItems.value.length === 0) {
|
||||
ocrError.value = "No items extracted from the image.";
|
||||
ocrItems.value = response.data.extracted_items.map((nameStr: string) => ({ name: nameStr.trim() })).filter((item: { name: string }) => item.name);
|
||||
if (ocrItems.value.length === 0) {
|
||||
ocrError.value = "No items extracted from the image.";
|
||||
}
|
||||
} catch (err) {
|
||||
ocrError.value = (err instanceof Error ? err.message : String(err)) || 'Failed to process image.';
|
||||
} finally {
|
||||
ocrLoading.value = false;
|
||||
if (ocrFileInputRef.value) ocrFileInputRef.value.value = ''; // Reset file input
|
||||
if (ocrFileInputRef.value) ocrFileInputRef.value.value = ''; // Reset file input
|
||||
}
|
||||
};
|
||||
|
||||
@ -645,10 +630,10 @@ useEventListener(window, 'keydown', (event: KeyboardEvent) => {
|
||||
// Check if a modal is open or if focus is already in an input/textarea
|
||||
const activeElement = document.activeElement;
|
||||
if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA')) {
|
||||
return;
|
||||
return;
|
||||
}
|
||||
if (showOcrDialogState.value || showCostSummaryDialog.value || showConfirmDialogState.value) {
|
||||
return;
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
itemNameInputRef.value?.focus();
|
||||
@ -656,24 +641,23 @@ useEventListener(window, 'keydown', (event: KeyboardEvent) => {
|
||||
});
|
||||
|
||||
// Swipe detection (basic)
|
||||
// let touchStartX = 0; // Commented out as unused
|
||||
// const SWIPE_THRESHOLD = 50; // pixels // Commented out as unused
|
||||
let touchStartX = 0;
|
||||
const SWIPE_THRESHOLD = 50; // pixels
|
||||
|
||||
const handleTouchStart = (event: TouchEvent, /* item: Item */) => { // Commented out unused item
|
||||
touchStartX = event.changedTouches[0].clientX;
|
||||
// Add class for visual feedback during swipe if desired
|
||||
const handleTouchStart = (event: TouchEvent) => {
|
||||
touchStartX = event.changedTouches[0].clientX;
|
||||
// Add class for visual feedback during swipe if desired
|
||||
};
|
||||
|
||||
const handleTouchMove = (/* event: TouchEvent, item: Item */) => { // Commented out unused event and item
|
||||
// Can be used for interactive swipe effect
|
||||
const handleTouchMove = () => {
|
||||
// Can be used for interactive swipe effect
|
||||
};
|
||||
|
||||
const handleTouchEnd = (/* item: Item */) => { // Commented out unused item
|
||||
// Not implemented: Valerie UI swipe example implies JS adds/removes 'is-swiped'
|
||||
// For a simple demo, one might toggle it here based on a more complex gesture
|
||||
// This would require more state per item and logic
|
||||
// For now, swipe actions are not visually implemented
|
||||
// item.swiped = !item.swiped; // Example of toggling. A real implementation would be more complex.
|
||||
const handleTouchEnd = () => {
|
||||
// Not implemented: Valerie UI swipe example implies JS adds/removes 'is-swiped'
|
||||
// For a simple demo, one might toggle it here based on a more complex gesture
|
||||
// This would require more state per item and logic
|
||||
// For now, swipe actions are not visually implemented
|
||||
};
|
||||
|
||||
|
||||
@ -695,16 +679,45 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-padding { padding: 1rem; }
|
||||
.mb-1 { margin-bottom: 0.5rem; }
|
||||
.mb-2 { margin-bottom: 1rem; }
|
||||
.mb-3 { margin-bottom: 1.5rem; }
|
||||
.mt-1 { margin-top: 0.5rem; }
|
||||
.mt-2 { margin-top: 1rem; }
|
||||
.ml-1 { margin-left: 0.25rem; }
|
||||
.ml-2 { margin-left: 0.5rem; }
|
||||
.text-right { text-align: right; }
|
||||
.flex-grow { flex-grow: 1; }
|
||||
.page-padding {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mb-3 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.item-caption {
|
||||
display: block;
|
||||
@ -712,27 +725,36 @@ onUnmounted(() => {
|
||||
opacity: 0.6;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.text-decoration-line-through {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.form-input-sm { /* For price input */
|
||||
padding: 0.4rem 0.6rem;
|
||||
font-size: 0.9rem;
|
||||
|
||||
.form-input-sm {
|
||||
/* For price input */
|
||||
padding: 0.4rem 0.6rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.cost-overview p {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.form-error-text {
|
||||
color: var(--danger);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.list-item.completed .item-text {
|
||||
/* text-decoration: line-through; is handled by span class */
|
||||
opacity: 0.7;
|
||||
/* text-decoration: line-through; is handled by span class */
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.list-item-actions {
|
||||
margin-left: auto; /* Pushes actions to the right */
|
||||
padding-left: 1rem; /* Space before actions */
|
||||
margin-left: auto;
|
||||
/* Pushes actions to the right */
|
||||
padding-left: 1rem;
|
||||
/* Space before actions */
|
||||
}
|
||||
</style>
|
||||
@ -8,51 +8,42 @@
|
||||
<form @submit.prevent="onSubmit" class="form-layout">
|
||||
<div class="form-group mb-2">
|
||||
<label for="name" class="form-label">Full Name</label>
|
||||
<input type="text" id="name" v-model="name" class="form-input" required autocomplete="name"/>
|
||||
<input type="text" id="name" v-model="name" class="form-input" required autocomplete="name" />
|
||||
<p v-if="formErrors.name" class="form-error-text">{{ formErrors.name }}</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-2">
|
||||
<label for="email" class="form-label">Email</label>
|
||||
<input type="email" id="email" v-model="email" class="form-input" required autocomplete="email"/>
|
||||
<input type="email" id="email" v-model="email" class="form-input" required autocomplete="email" />
|
||||
<p v-if="formErrors.email" class="form-error-text">{{ formErrors.email }}</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-2">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<div class="input-with-icon-append">
|
||||
<input
|
||||
:type="isPwdVisible ? 'text' : 'password'"
|
||||
id="password"
|
||||
v-model="password"
|
||||
class="form-input"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
<button type="button" @click="isPwdVisible = !isPwdVisible" class="icon-append-btn" aria-label="Toggle password visibility">
|
||||
<svg class="icon icon-sm"><use :xlink:href="isPwdVisible ? '#icon-settings' : '#icon-settings'"></use></svg> <!-- Placeholder for visibility icons -->
|
||||
</button>
|
||||
<div class="input-with-icon-append">
|
||||
<input :type="isPwdVisible ? 'text' : 'password'" id="password" v-model="password" class="form-input"
|
||||
required autocomplete="new-password" />
|
||||
<button type="button" @click="isPwdVisible = !isPwdVisible" class="icon-append-btn"
|
||||
aria-label="Toggle password visibility">
|
||||
<svg class="icon icon-sm">
|
||||
<use :xlink:href="isPwdVisible ? '#icon-settings' : '#icon-settings'"></use>
|
||||
</svg> <!-- Placeholder for visibility icons -->
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="formErrors.password" class="form-error-text">{{ formErrors.password }}</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-3">
|
||||
<label for="confirmPassword" class="form-label">Confirm Password</label>
|
||||
<input
|
||||
:type="isPwdVisible ? 'text' : 'password'"
|
||||
id="confirmPassword"
|
||||
v-model="confirmPassword"
|
||||
class="form-input"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
<input :type="isPwdVisible ? 'text' : 'password'" id="confirmPassword" v-model="confirmPassword"
|
||||
class="form-input" required autocomplete="new-password" />
|
||||
<p v-if="formErrors.confirmPassword" class="form-error-text">{{ formErrors.confirmPassword }}</p>
|
||||
</div>
|
||||
|
||||
|
||||
<p v-if="formErrors.general" class="alert alert-error form-error-text">{{ formErrors.general }}</p>
|
||||
|
||||
<button type="submit" class="btn btn-primary w-full mt-2" :disabled="loading">
|
||||
<span v-if="loading" class="spinner-dots-sm" role="status"><span/><span/><span/></span>
|
||||
<span v-if="loading" class="spinner-dots-sm" role="status"><span /><span /><span /></span>
|
||||
Sign Up
|
||||
</button>
|
||||
|
||||
@ -68,7 +59,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useAuthStore } from 'stores/auth'; // Assuming path
|
||||
import { useAuthStore } from '@/stores/auth'; // Assuming path is correct
|
||||
import { useNotificationStore } from '@/stores/notifications';
|
||||
|
||||
const router = useRouter();
|
||||
@ -143,10 +134,12 @@ const onSubmit = async () => {
|
||||
min-height: 100dvh;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.signup-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
/* form-layout, w-full, mt-2, text-center styles were removed as utility classes from Valerie UI are used directly or are available. */
|
||||
|
||||
.link-styled {
|
||||
@ -155,26 +148,33 @@ const onSubmit = async () => {
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: border-color var(--transition-speed) var(--transition-ease-out);
|
||||
}
|
||||
.link-styled:hover, .link-styled:focus {
|
||||
|
||||
.link-styled:hover,
|
||||
.link-styled:focus {
|
||||
border-bottom-color: var(--primary);
|
||||
}
|
||||
|
||||
.form-error-text {
|
||||
color: var(--danger);
|
||||
font-size: 0.85rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.alert.form-error-text { /* For general error message */
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.alert.form-error-text {
|
||||
/* For general error message */
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.input-with-icon-append {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.input-with-icon-append .form-input {
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
.icon-append-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@ -191,9 +191,14 @@ const onSubmit = async () => {
|
||||
color: var(--dark);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.icon-append-btn:hover, .icon-append-btn:focus {
|
||||
|
||||
.icon-append-btn:hover,
|
||||
.icon-append-btn:focus {
|
||||
opacity: 1;
|
||||
background-color: rgba(0,0,0,0.03);
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.icon-append-btn .icon {
|
||||
margin: 0;
|
||||
}
|
||||
.icon-append-btn .icon { margin: 0; }
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user