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
@ -7,7 +7,9 @@
|
||||
|
||||
<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>
|
||||
<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,24 +43,12 @@
|
||||
<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>
|
||||
@ -66,31 +60,23 @@
|
||||
|
||||
<!-- 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">
|
||||
@ -98,28 +84,19 @@
|
||||
<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()"
|
||||
/>
|
||||
<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 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>
|
||||
@ -133,7 +110,9 @@
|
||||
<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">
|
||||
@ -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,19 +136,15 @@
|
||||
</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"
|
||||
>
|
||||
<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>
|
||||
@ -180,11 +157,14 @@
|
||||
<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>
|
||||
@ -232,10 +213,14 @@
|
||||
<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>
|
||||
<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>
|
||||
<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">
|
||||
@ -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);
|
||||
|
||||
@ -581,7 +566,7 @@ 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);
|
||||
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.";
|
||||
}
|
||||
@ -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
|
||||
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
|
||||
const handleTouchMove = () => {
|
||||
// Can be used for interactive swipe effect
|
||||
};
|
||||
|
||||
const handleTouchEnd = (/* item: Item */) => { // Commented out unused item
|
||||
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
|
||||
// item.swiped = !item.swiped; // Example of toggling. A real implementation would be more complex.
|
||||
};
|
||||
|
||||
|
||||
@ -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 */
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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>
|
||||
@ -21,16 +21,13 @@
|
||||
<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 -->
|
||||
<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>
|
||||
@ -38,14 +35,8 @@
|
||||
|
||||
<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>
|
||||
|
||||
@ -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,15 +148,20 @@ 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 */
|
||||
|
||||
.alert.form-error-text {
|
||||
/* For general error message */
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@ -172,9 +170,11 @@ const onSubmit = async () => {
|
||||
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);
|
||||
}
|
||||
.icon-append-btn .icon { margin: 0; }
|
||||
|
||||
.icon-append-btn .icon {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user