(feat) products list ordering

app/frontend/src/javascript/components/store/products.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';
 import { IApplication } from '../../models/application';
-import { Product, ProductIndexFilter, ProductsIndex } from '../../models/product';
+import { Product, ProductIndexFilter, ProductsIndex, ProductSortOption } from '../../models/product';
 import { ProductCategory } from '../../models/product-category';
 import { FabButton } from '../base/fab-button';
 import { ProductItem } from './product-item';
@@ -30,7 +30,7 @@ interface ProductsProps {
  * Option format, expected by react-select
  * @see https://github.com/JedWatson/react-select
  */
- type selectOption = { value: number, label: string };
+ type selectOption = { value: ProductSortOption, label: string };
 
 /** This component shows the admin view of the store */
 const Products: React.FC<ProductsProps> = ({ onSuccess, onError }) => {
@@ -163,7 +163,12 @@ const Products: React.FC<ProductsProps> = ({ onSuccess, onError }) => {
 
   /** Display option: sorting */
   const handleSorting = (option: selectOption) => {
-    console.log('Sort option:', option);
+    setFilters(draft => {
+      return {
+        ...draft,
+        sort: option.value
+      };
+    });
   };
 
   /** Clear filters */
@@ -174,10 +179,10 @@ const Products: React.FC<ProductsProps> = ({ onSuccess, onError }) => {
   /** Creates sorting options to the react-select format */
   const buildSortOptions = (): Array<selectOption> => {
     return [
-      { value: 0, label: t('app.admin.store.products.sort.name_az') },
-      { value: 1, label: t('app.admin.store.products.sort.name_za') },
-      { value: 2, label: t('app.admin.store.products.sort.price_low') },
-      { value: 3, label: t('app.admin.store.products.sort.price_high') }
+      { value: 'name-asc', label: t('app.admin.store.products.sort.name_az') },
+      { value: 'name-desc', label: t('app.admin.store.products.sort.name_za') },
+      { value: 'amount-asc', label: t('app.admin.store.products.sort.price_low') },
+      { value: 'amount-desc', label: t('app.admin.store.products.sort.price_high') }
     ];
   };
 
@@ -264,5 +269,6 @@ const initFilters: ProductIndexFilter = {
   stock_from: 0,
   stock_to: 0,
   is_active: false,
-  page: 1
+  page: 1,
+  sort: ''
 };

app/frontend/src/javascript/components/store/store-list-header.tsx

@@ -2,12 +2,13 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import Select from 'react-select';
 import Switch from 'react-switch';
+import { ProductSortOption } from '../../models/product';
 
 interface StoreListHeaderProps {
   productsCount: number,
   selectOptions: selectOption[],
   onSelectOptionsChange: (option: selectOption) => void,
-  selectValue?: number,
+  selectValue?: ProductSortOption,
   switchLabel?: string,
   switchChecked?: boolean,
   onSwitch?: (boolean) => void
@@ -16,7 +17,7 @@ interface StoreListHeaderProps {
  * Option format, expected by react-select
  * @see https://github.com/JedWatson/react-select
  */
- type selectOption = { value: number, label: string };
+ type selectOption = { value: ProductSortOption, label: string };
 
 /**
  * Renders an accordion item

app/frontend/src/javascript/models/product.ts

@@ -3,6 +3,8 @@ import { ApiFilter, PaginatedIndex } from './api';
 import { ProductCategory } from './product-category';
 import { Machine } from './machine';
 
+export type ProductSortOption = 'name-asc' | 'name-desc' | 'amount-asc' | 'amount-desc' | '';
+
 export interface ProductIndexFilter {
   is_active?: boolean,
   page?: number,
@@ -12,6 +14,7 @@ export interface ProductIndexFilter {
   stock_type?: 'internal' | 'external',
   stock_from?: number,
   stock_to?: number,
+  sort?: ProductSortOption
 }
 
 export interface ProductIndexFilterIds extends Omit<Omit<ProductIndexFilter, 'categories'>, 'machines'>, ApiFilter {

app/services/product_service.rb

@@ -12,6 +12,7 @@ class ProductService
       products = filter_by_machines(products, filters)
       products = filter_by_keyword_or_reference(products, filters)
       products = filter_by_stock(products, filters)
+      products = products_ordering(products, filters)
 
       total_count = products.count
       products = products.page(filters[:page] || 1).per(PRODUCTS_PER_PAGE)
@@ -115,5 +116,13 @@ class ProductService
 
       products
     end
+
+    def products_ordering(products, filters)
+      key, order = filters[:sort].split('-')
+      key ||= 'created_at'
+      order ||= 'desc'
+
+      products.order(key => order)
+    end
   end
 end