🚀 enhance: Indexed DB integration to sync products over counters and improve frontend products search

devAsadNur commented 1 year ago

The IndexedDB has been integrated to sync products over multiple counters. Also, improved frontend product searching.

Fixes: #125

Summary by CodeRabbit

New Features
- Added product refresh functionality with a new refresh icon for updating products.
- Introduced synchronization of product logs over the Heartbeat API.
- Added methods to manage product data in IndexedDB.
- Implemented REST API endpoints for managing product logs.
Bug Fixes
- Corrected typos in variable names related to search functionality for consistency and proper operation.
Improvements
- Enhanced product search functionality with new methods for filtering and extracting product IDs.
- Updated styles for the new refresh-products section.
- Improved handling of product logs and counters in a WooCommerce environment.
Chores
- Added enqueueing of the 'heartbeat' script and localization for the current cashier.
- Updated installation and uninstallation processes to handle new database tables and data efficiently.

coderabbitai[bot] commented 3 months ago

Walkthrough

The recent updates introduce significant enhancements to the wePOS system, including improved product search functionality, product log synchronization, and database management. Key changes involve fixing variable name typos, adding new methods for product handling, and integrating IndexedDB for efficient product data management. These updates aim to streamline product searches and ensure accurate product data synchronization across the platform.

Changes

Files/Groups	Change Summary
`assets/less/style.less`	Added new style block `.refresh-products-tooltip-wrapper` for tooltip styling.
`assets/src/frontend/components/CustomerSearch.vue`, `ProductSearch.vue`	Corrected typos in variable names (`serachInput` to `searchInput`); updated method names for consistency and functionality.
`assets/src/frontend/components/Home.vue`	Added `refresh-products` section, methods for product logs management, and updated IndexedDB logic.
`assets/src/utils/Bootstrap.js`	Imported `productIndexedDb` and `productLogs`, added synchronization logic.
`assets/src/utils/productIndexedDb.js`, `productLogs.js`	Introduced functions for IndexedDB management and product logs synchronization.
`includes/Admin/Updates.php`, `upgrade-1.3.0.php`	Added updater functions for version 1.3.0, including product log database table creation.
`includes/Ajax.php`, `Assets.php`	Added methods for handling Heartbeat data and enqueueing scripts.
`includes/Installer.php`	Added methods for installation tasks and database table creation.
`includes/ProductsLog.php`	Added methods for managing product logs and counters.
`includes/REST/Manager.php`, `ProductsLogController.php`	Updated REST API manager and added `ProductsLogController` for product logs management.
`includes/Uninstaller.php`	Added functionality for uninstalling specific capabilities.
`includes/functions.php`	Added function to retrieve cashier data based on user ID.
`wepos.php`	Updated activation and deactivation methods to utilize `Installer` and `Uninstaller` classes.

Sequence Diagram(s) (Beta)

sequenceDiagram
    participant User
    participant Frontend
    participant Backend
    participant IndexedDB
    participant WooCommerce

    User->>Frontend: Search Product
    Frontend->>IndexedDB: Query Products by Keyword
    IndexedDB-->>Frontend: Return Matching Products
    Frontend-->>User: Display Products

    User->>Frontend: Refresh Products
    Frontend->>Backend: Fetch Product Logs
    Backend->>WooCommerce: Get Product Data
    WooCommerce-->>Backend: Return Product Data
    Backend->>IndexedDB: Update Product Data
    IndexedDB-->>Frontend: Confirm Update
    Frontend-->>User: Display Updated Products

Assessment against linked issues

Objective (Issue #125)	Addressed	Explanation
Ensure all products can be found by searching	✅
Improve product loading performance	✅
Handle large datasets efficiently	✅

Poem

In the code where products hide, A search now swift, no need to bide. IndexedDB, a rabbit's friend, Ensures the search will never end. With logs and sync, the data flows, WePOS, the system grows. 🐇✨

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

shashwatahalder01 commented 3 months ago

Scenario: The search doesn't work. Also, nothing is stored in indexedDB.

Steps to reproduce:

search for a product on the pos dashboard

Screenshot: Screenshot at May 30 09-15-31 Screenshot at May 30 09-16-02

shashwatahalder01 commented 3 months ago

@devAsadNur, kindly update the target upgrader version to the next release version(1.2.8).

shashwatahalder01 commented 3 months ago

Scenario: DB error while building the PR

DB Error:

[03-Jun-2024 06:55:45 UTC] WordPress database error Table 'wepos.pos_wepos_login' doesn't exist for query SELECT user_id, outlet_id, counter_id, is_logged_in FROM pos_wepos_login WHERE user_id=1 AND `is_logged_in`='1' made by require('wp-admin/plugins.php'), require_once('wp-admin/admin.php'), require_once('wp-load.php'), require_once('wp-config.php'), require_once('wp-settings.php'), do_action('init'), WP_Hook->do_action, WP_Hook->apply_filters, WePOS->init_classes, WeDevs\WePOS\ProductsLog->__construct, wepos_get_cashier_data_by_user_id
[03-Jun-2024 06:55:45 UTC] WordPress database error Table 'wepos.pos_wepos_login' doesn't exist for query SELECT user_id, outlet_id, counter_id, is_logged_in FROM pos_wepos_login WHERE user_id=1 AND `is_logged_in`='1' made by require('wp-admin/plugins.php'), require_once('wp-admin/admin-header.php'), do_action('admin_enqueue_scripts'), WP_Hook->do_action, WP_Hook->apply_filters, WeDevs\WePOS\Assets->register, WeDevs\WePOS\Assets->register_localize, wepos_get_cashier_data_by_user_id
[03-Jun-2024 06:55:45 UTC] WordPress database error Table 'wepos.pos_wepos_login' doesn't exist for query SELECT user_id, outlet_id, counter_id, is_logged_in FROM pos_wepos_login WHERE user_id=1 AND `is_logged_in`='1' made by require('wp-admin/admin-ajax.php'), require_once('wp-load.php'), require_once('wp-config.php'), require_once('wp-settings.php'), do_action('init'), WP_Hook->do_action, WP_Hook->apply_filters, WePOS->init_classes, WeDevs\WePOS\ProductsLog->__construct, wepos_get_cashier_data_by_user_id
[03-Jun-2024 06:55:47 UTC] WordPress database error Table 'wepos.pos_wepos_login' doesn't exist for query SELECT user_id, outlet_id, counter_id, is_logged_in FROM pos_wepos_login WHERE user_id=1 AND `is_logged_in`='1' made by require('index.php'), require('wp-blog-header.php'), require_once('wp-load.php'), require_once('wp-config.php'), require_once('wp-settings.php'), do_action('init'), WP_Hook->do_action, WP_Hook->apply_filters, WePOS->init_classes, WeDevs\WePOS\ProductsLog->__construct, wepos_get_cashier_data_by_user_id
[03-Jun-2024 06:55:47 UTC] WordPress database error Table 'wepos.pos_wepos_login' doesn't exist for query SELECT user_id, outlet_id, counter_id, is_logged_in FROM pos_wepos_login WHERE user_id=1 AND `is_logged_in`='1' made by require('index.php'), require('wp-blog-header.php'), require_once('wp-load.php'), require_once('wp-config.php'), require_once('wp-settings.php'), do_action('init'), WP_Hook->do_action, WP_Hook->apply_filters, WePOS->init_classes, WeDevs\WePOS\ProductsLog->__construct, wepos_get_cashier_data_by_user_id

weDevsOfficial / wepos