Update ListDetailPage to change item quantity type from number to string; enhance logging for API calls and component lifecycle events for better debugging.

This commit is contained in:
mohamad 2025-05-08 22:53:38 +02:00
parent e484c9e9a8
commit 8b6ddb91f8

View File

@ -198,7 +198,7 @@ import { useQuasar, QFile } from 'quasar';
interface Item { interface Item {
id: number; id: number;
name: string; name: string;
quantity?: number | undefined; quantity?: string | undefined;
is_complete: boolean; is_complete: boolean;
version: number; version: number;
updating?: boolean; updating?: boolean;
@ -234,9 +234,9 @@ const pollingInterval = ref<ReturnType<typeof setInterval> | undefined>(undefine
const lastListUpdate = ref<string | null>(null); const lastListUpdate = ref<string | null>(null);
const lastItemUpdate = ref<string | null>(null); const lastItemUpdate = ref<string | null>(null);
const newItem = ref<{ name: string; quantity?: number }>({ name: '' }); const newItem = ref<{ name: string; quantity?: string }>({ name: '' });
const editingItemName = ref(''); const editingItemName = ref('');
const editingItemQuantity = ref<number | undefined>(undefined); const editingItemQuantity = ref<string | undefined>(undefined);
// OCR related state // OCR related state
const showOcrDialog = ref(false); const showOcrDialog = ref(false);
@ -257,10 +257,12 @@ const itemNameInput = ref<{ focus: () => void } | null>(null);
const fetchListDetails = async () => { const fetchListDetails = async () => {
loading.value = true; loading.value = true;
error.value = null; error.value = null;
console.log('Fetching list details for ID:', route.params.id);
try { try {
const response = await apiClient.get( const response = await apiClient.get(
API_ENDPOINTS.LISTS.BY_ID(String(route.params.id)) API_ENDPOINTS.LISTS.BY_ID(String(route.params.id))
); );
console.log('List details response:', response.data);
list.value = response.data as List; list.value = response.data as List;
lastListUpdate.value = response.data.updated_at; lastListUpdate.value = response.data.updated_at;
// Find the latest item update time // Find the latest item update time
@ -329,7 +331,10 @@ const onAddItem = async () => {
try { try {
const response = await apiClient.post( const response = await apiClient.post(
API_ENDPOINTS.LISTS.ITEMS(String(list.value.id)), API_ENDPOINTS.LISTS.ITEMS(String(list.value.id)),
newItem.value {
name: newItem.value.name,
quantity: newItem.value.quantity?.toString()
}
); );
list.value.items.push(response.data as Item); list.value.items.push(response.data as Item);
newItem.value = { name: '' }; newItem.value = { name: '' };
@ -352,7 +357,7 @@ const updateItem = async (item: Item) => {
API_ENDPOINTS.LISTS.ITEM(String(list.value.id), String(item.id)), API_ENDPOINTS.LISTS.ITEM(String(list.value.id), String(item.id)),
{ {
name: editingItemName.value, name: editingItemName.value,
quantity: editingItemQuantity.value, quantity: editingItemQuantity.value?.toString(),
completed: item.is_complete, completed: item.is_complete,
version: item.version, version: item.version,
} }
@ -418,11 +423,11 @@ const addOcrItems = async () => {
for (const item of ocrItems.value) { for (const item of ocrItems.value) {
if (!item.name) continue; if (!item.name) continue;
const response = await apiClient.post<Item>( const response = await apiClient.post(
API_ENDPOINTS.LISTS.ITEMS(list.value.id), API_ENDPOINTS.LISTS.ITEMS(String(list.value.id)),
{ name: item.name, quantity: 1 } { name: item.name, quantity: "1" }
); );
list.value.items.push(response.data); list.value.items.push(response.data as Item);
} }
$q.notify({ $q.notify({
@ -478,7 +483,7 @@ const deleteItem = async (item: Item) => {
item.deleting = true; item.deleting = true;
try { try {
await apiClient.delete( await apiClient.delete(
API_ENDPOINTS.LISTS.ITEM(list.value.id.toString(), item.id.toString()) API_ENDPOINTS.LISTS.ITEM(String(list.value.id), String(item.id))
); );
const index = list.value.items.findIndex((i) => i.id === item.id); const index = list.value.items.findIndex((i) => i.id === item.id);
if (index !== -1) { if (index !== -1) {
@ -496,6 +501,12 @@ const deleteItem = async (item: Item) => {
// Add keyboard event listeners // Add keyboard event listeners
onMounted(() => { onMounted(() => {
console.log('Component mounted, route params:', route.params);
if (!route.params.id) {
console.error('No list ID found in route params');
error.value = 'No list ID provided';
return;
}
void fetchListDetails().then(() => { void fetchListDetails().then(() => {
startPolling(); startPolling();
}); });