Implemented: Added basic support for storing transfer order detail data in IndexedDB using Dexie.js

[R-Sourabh]

Related Issues

Short Description and Why It's Useful

Integrated Dexie.js to cache transfer order data in IndexedDB and reducing API calls for repeated page loads. Data is stored with orderId as the key and API response as the value.

Added a new file in the util (dexie.ts)

• Created a singleton Dexie database following Dexie TypeScript convention.
• Defined Order interface: { orderId: string; data: any; lastUpdatedStamp: number; } for type safety.
• Declared typed orders table with EntityTable<Order, 'orderId'>.
• Schema: db.version(1).stores({ orders: 'orderId, lastUpdatedStamp' }); (primary key: orderId; indexed: lastUpdatedStamp for potential cache expiration).
• Added functions:
  • getOrder(orderId: string): Retrieves order from Dexie.
  • saveOrder(orderId: string, data: any): Saves/updates order in Dexie.

Changes in Vuex Action (fetchTransferOrderDetail)

• Added Dexie check: Call getOrder(orderId) first; if cached, use cachedOrder.data and skip API.
• If no cache, proceed with API calls and save response via saveOrder(orderId, order).

Contribution and Currently Important Rules Acceptance

• I read and followed contribution rules

[patelanil]

I need some more context to better understand the the workflow.

Tell me if I am wrong

1. You are working on Find/View Transfer Order UI workflow.
2. The user will find the TO and then select one TO to see its details and do something with it.

Functions:
getOrder: The code you have written using Dexie.js, to cache the TO in PWA. Get TO from serverside, only if it is not available in local storage.
Use saveOrder function to save new TO to the local storage.

[R-Sourabh]

Thank you for providing feedback! Let me clarify the workflow.

This implementation enhances the TransferOrderDetails page in our PWA, where users select a transfer order (TO) from the list to view details and perform some actions. Dexie.js caches TO data in IndexedDB to enable offline access and reduce API calls on page reloads. When the page loads (ionViewWillEnter), the fetchTransferOrderDetail action checks the cache first and falls back to the server if needed, storing the API response for future use.

You’re correct about the UI workflow: users find a TO, select it to view details, and interact with it. Your description of the functions is mostly accurate:

• getOrder: Checks the Dexie.js cache (IndexedDB, not localStorage) for a TO by orderId. If not found, the action fetches from the server.
• saveOrder: Saves or updates the TO in IndexedDB after an API call.

Clarifications:

• The implementation uses IndexedDB via Dexie.js, not localStorage, as IndexedDB better supports complex data structures like TOs (with orderId as the key and API response as the value).
• Current limitation: No mechanism detects data changes since the last load/refresh, so cached data may be stale. We can address this in the future using lastUpdatedStamp or server-side validation.