VCST-1526: Quick Orders Filters (#426)

feat: Quick Orders Filters by Customer, Organization and Store. feat: Improve Order filter panel UX feat: Extends the filter details with filter by organization.
VirtoCommerce · Jul 18, 2024 · 44045ae · 44045ae
1 parent 271d3ae
commit 44045ae
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 28 deletions.
diff --git a/src/VirtoCommerce.OrdersModule.Web/Localizations/de.VirtoCommerce.Orders.json b/src/VirtoCommerce.OrdersModule.Web/Localizations/de.VirtoCommerce.Orders.json
@@ -59,7 +59,10 @@
           "total": "Total",
           "currency": "Währung",
           "store": "Store",
-          "created": "Erstellt"
+          "created": "Erstellt",
+          "copy-id": "ID kopieren",
+          "copy-number": "Nummer kopieren",
+          "filter-by": "Filtern nach"
         },
         "placeholders": {
           "select-filter": "Wählen Sie den Filter."

diff --git a/src/VirtoCommerce.OrdersModule.Web/Localizations/en.VirtoCommerce.Orders.json b/src/VirtoCommerce.OrdersModule.Web/Localizations/en.VirtoCommerce.Orders.json
@@ -48,7 +48,7 @@
         "title": "Customer orders",
         "labels": {
           "new-filter": "Add new filter",
-          "unnamed-filter": "Unnamed filter",
+          "unnamed-filter": "Filter by",
           "today-filter": "Today",
           "last-day-filter": "Yesterday",
           "last-week-filter": "Last week",
@@ -63,7 +63,8 @@
           "store": "Store",
           "created": "Created",
           "copy-id": "Copy ID",
-          "copy-number": "Copy number"
+          "copy-number": "Copy number",
+          "filter-by": "Filter by"
         },
         "placeholders": {
           "select-filter": "Select filter"

diff --git a/src/VirtoCommerce.OrdersModule.Web/Localizations/ru.VirtoCommerce.Orders.json b/src/VirtoCommerce.OrdersModule.Web/Localizations/ru.VirtoCommerce.Orders.json
@@ -60,7 +60,10 @@
           "total": "Итог",
           "currency": "Валюта",
           "store": "Магазин",
-          "created": "Создан"
+          "created": "Создан",
+          "copy-id": "Копировать ID",
+          "copy-number": "Копировать номер",
+          "filter-by": "Отфильтровать по"
         },
         "placeholders": {
           "select-filter": "Выбрать фильтр"

diff --git a/src/VirtoCommerce.OrdersModule.Web/Scripts/blades/customerOrder-list.js b/src/VirtoCommerce.OrdersModule.Web/Scripts/blades/customerOrder-list.js
@@ -117,7 +117,12 @@ angular.module('virtoCommerce.orderModule')
         document.execCommand('copy');
         window.getSelection().removeAllRanges();
         copyElement.remove();
-    };
+        };
+
+    $scope.filterBy = function(field, value) {
+        filter.keyword = `${field}:"${value}"`;
+        blade.refresh();
+        };
 
     $scope.deleteList = function (list) {
         var dialog = {
@@ -190,8 +195,10 @@ angular.module('virtoCommerce.orderModule')
         $localStorage.orderSearchFilterId = filter.current ? filter.current.id : null;
         if (filter.current && !filter.current.id) {
             filter.current = null;
+            filter.keyword = '';
             showFilterDetailBlade({ isNew: true });
         } else {
+            filter.keyword = filter.current ? filter.keyword : '';
             bladeNavigationService.closeBlade({ id: 'filterDetail' });
             filter.criteriaChanged();
         }
@@ -330,8 +337,17 @@ angular.module('virtoCommerce.orderModule')
 
     function addPredefinedFilters(baseFilters) {
         var predefinedFilters = buildPredefinedFilters();
+        var filterWithoutId = null;
+
+        // Remove the filter without an id from baseFilters if it exists
+        for (var j = 0; j < baseFilters.length; j++) {
+            if (!baseFilters[j].id) {
+                filterWithoutId = baseFilters.splice(j, 1)[0];
+                break;
+            }
+        }
 
-        // add or replace predefinded filters in base filters
+        // Add or replace predefined filters in baseFilters
         for (var i = 0; i < predefinedFilters.length; i++) {
             var predefinedFilter = _.findWhere(baseFilters, { id: predefinedFilters[i].id });
             if (predefinedFilter) {
@@ -340,9 +356,10 @@ angular.module('virtoCommerce.orderModule')
                 baseFilters.push(predefinedFilters[i]);
             }
         }
-    }
 
-    // actions on load
-    //No need to call this because page 'pageSettings.currentPage' is watched!!! It would trigger subsequent duplicated req...
-    //blade.refresh();
+        // Push the filter without an id back to the end of baseFilters if it exists
+        if (filterWithoutId) {
+            baseFilters.push(filterWithoutId);
+        }
+    }
 }]);
diff --git a/src/VirtoCommerce.OrdersModule.Web/Scripts/blades/customerOrder-list.tpl.html b/src/VirtoCommerce.OrdersModule.Web/Scripts/blades/customerOrder-list.tpl.html
@@ -1,18 +1,21 @@
 <div class="blade-static">
     <div class="form-group">
-        <div class="form-input __search">
-            <input placeholder="{{'platform.placeholders.search-keyword' | translate}}" ng-model="filter.keyword" ng-keyup="$event.which === 13 && filter.criteriaChanged()" ng-style="blade.isExpanded && { 'width': '190px' }">
-            <button class="btn __other" style="position: relative;right: 45px;">
-                <i class="btn-ico fa fa-remove" title="Clear" ng-click="filter.keyword=null;filter.criteriaChanged()"></i>
-            </button>
-            <ui-select ng-if="blade.isExpanded" ng-model="filter.current" ng-change="filter.change()" style="left: 220px;position: absolute;width: 190px;top: 0px;">
-                <ui-select-match allow-clear="true" placeholder="{{'orders.blades.customerOrder-list.placeholders.select-filter' | translate}}">{{$select.selected.name | translate}}</ui-select-match>
-                <ui-select-choices repeat="x in $localStorage.orderSearchFilters | filter: $select.search">
-                    <span ng-bind-html="x.name | translate | highlight: $select.search"></span>
-                </ui-select-choices>
-            </ui-select>
+      <div style="display: flex;align-items: center;">
+        <a class="add" left-click-menu data-target="filterSearch{{blade.id}}" style="margin: 0 20px 0 0;">{{ filter.current ? filter.current.name : 'orders.blades.customerOrder-list.placeholders.select-filter' | translate }} <i class="form-ico fa fa-caret-down"></i></a>
+        <ul class="menu __context" role="menu" id="filterSearch{{blade.id}}" style="width: 170px;">
+          <li ng-repeat="x in $localStorage.orderSearchFilters" class="splited-element menu-item">
+            <i class="menu-ico fas fa-plus" ng-if="!x.id"></i> <span ng-click='filter.current=x;filter.change();' ng-bind-html="x.name | translate"></span>
+            <i class="fa fa-pencil right-alignment" ng-click='filter.current=x;filter.edit($event)' ng-if="x.id"></i>
+          </li>
+        </ul>
+
+        <div class="form-input" style="flex-grow: 1; flex-grow: 1; max-width: 400px">
+          <input ng-model="filter.keyword" ng-keyup="$event.which === 13 && filter.criteriaChanged()" placeholder="{{'platform.placeholders.search-keyword' | translate}}">
+          <button class="btn __other" style="position: relative;right: 45px;" ng-click="filter.current=null;filter.change()">
+            <i class="btn-ico fa fa-remove" title="Clear"></i>
+          </button>
         </div>
-        <a href="" ng-if="blade.isExpanded" ng-click="filter.edit()" style="left: 416px; top:25px; position:absolute;" class="form-edit"><i class="form-ico fa fa-pencil"></i></a>
+      </div>
     </div>
 </div>
 <div class="blade-static __bottom" ng-if="pageSettings.itemsPerPageCount < pageSettings.totalItems" ng-include="'pagerTemplate.html'"></div>
@@ -31,6 +34,17 @@
                   <li class="menu-item" ng-click='copy(contextMenuEntity.number)'>
                     <i class="menu-ico fa fa-copy"></i> {{'orders.blades.customerOrder-list.labels.copy-number' | translate}}
                   </li>
+
+                  <li class="menu-item" ng-if="useIndexedSearch" ng-click='filterBy("CustomerName", contextMenuEntity.customerName)'>
+                    <i class="menu-ico fa fa-filter"></i> {{'orders.blades.customerOrder-list.labels.filter-by' | translate}} `{{contextMenuEntity.customerName}}`
+                  </li>
+                  <li class="menu-item" ng-if="useIndexedSearch && contextMenuEntity.organizationName" ng-click='filterBy("OrganizationName", contextMenuEntity.organizationName)'>
+                    <i class="menu-ico fa fa-filter"></i> {{'orders.blades.customerOrder-list.labels.filter-by' | translate}} `{{contextMenuEntity.organizationName}}`
+                  </li>
+                  <li class="menu-item" ng-if="useIndexedSearch" ng-click='filterBy("StoreId", contextMenuEntity.storeId)'>
+                    <i class="menu-ico fa fa-filter"></i> {{'orders.blades.customerOrder-list.labels.filter-by' | translate}} `{{contextMenuEntity.storeId}}`
+                  </li>
+
                   <li class="menu-item" ng-if='!blade.hideDelete' ng-click='deleteList([contextMenuEntity])' va-permission="order:delete">
                     <i class="menu-ico fas fa-trash-alt"></i> {{'platform.commands.delete' | translate}}
                   </li>

diff --git a/src/VirtoCommerce.OrdersModule.Web/Scripts/blades/filter-detail.js b/src/VirtoCommerce.OrdersModule.Web/Scripts/blades/filter-detail.js
@@ -19,13 +19,21 @@ angular.module('virtoCommerce.orderModule')
             criteria.deepSearch = true;
             criteria.sort = 'name';
 
+            return members.search(criteria);
+            };
+
+        blade.fetchOrganizations = function (criteria) {
+            criteria.memberType = 'Organization';
+            criteria.deepSearch = true;
+            criteria.sort = 'name';
+
             return members.search(criteria);
         };
 
         $scope.applyCriteria = function () {
             angular.copy(blade.currentEntity, blade.origEntity);
             if (blade.isNew) {
-                $localStorage.orderSearchFilters.push(blade.origEntity);
+                $localStorage.orderSearchFilters.unshift(blade.origEntity);
                 $localStorage.orderSearchFilterId = blade.origEntity.id;
                 blade.parentBlade.filter.current = blade.origEntity;
                 blade.isNew = false;

diff --git a/src/VirtoCommerce.OrdersModule.Web/Scripts/blades/filter-detail.tpl.html b/src/VirtoCommerce.OrdersModule.Web/Scripts/blades/filter-detail.tpl.html
@@ -40,6 +40,15 @@
   </div>
 </script>
 
+<script type="text/ng-template" id="filter-organizationSelector.html">
+  <div class="form-input">
+    <ui-scroll-drop-down data="blade.fetchOrganizations(criteria)"
+                         ng-model="blade.currentEntity.organizationId"
+                         placeholder="'orders.blades.filter-detail.placeholders.all'">
+    </ui-scroll-drop-down>
+  </div>
+</script>
+
 <script type="text/ng-template" id="filter-employeeSelector.html">
   <div class="form-input">
     <ui-scroll-drop-down data="blade.fetchEmployees(criteria)"

diff --git a/src/VirtoCommerce.OrdersModule.Web/Scripts/order.js b/src/VirtoCommerce.OrdersModule.Web/Scripts/order.js
@@ -597,6 +597,16 @@ angular.module(moduleName, [
                         title: "orders.blades.customerOrder-detail.labels.store",
                         templateUrl: 'storeSelector.html'
                     },
+                    {
+                        name: 'customerId',
+                        title: "orders.blades.customerOrder-detail.labels.customer",
+                        templateUrl: 'customerSelector.html'
+                    },
+                    {
+                        name: 'organizationId',
+                        title: "orders.blades.customerOrder-detail.labels.organization",
+                        templateUrl: 'filter-organizationSelector.html'
+                    },
                     {
                         name: 'startDate',
                         title: "orders.blades.filter-detail.labels.from",
@@ -607,11 +617,6 @@ angular.module(moduleName, [
                         title: "orders.blades.filter-detail.labels.to",
                         valueType: "DateTime"
                     },
-                    {
-                        name: 'customerId',
-                        title: "orders.blades.customerOrder-detail.labels.customer",
-                        templateUrl: 'customerSelector.html'
-                    },
                     {
                         name: 'employeeId',
                         title: "orders.blades.shipment-detail.labels.employee",