(wip) user orders dashboard

app/frontend/src/javascript/components/store/orders-dashboard.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { react2angular } from 'react2angular';
+import { Loader } from '../base/loader';
+import { IApplication } from '../../models/application';
+import { StoreListHeader } from './store-list-header';
+
+declare const Application: IApplication;
+
+interface OrdersDashboardProps {
+  onError: (message: string) => void
+}
+/**
+* Option format, expected by react-select
+* @see https://github.com/JedWatson/react-select
+*/
+type selectOption = { value: number, label: string };
+
+/**
+ * This component shows a list of all orders from the store for the current user
+ */
+// TODO: delete next eslint disable
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const OrdersDashboard: React.FC<OrdersDashboardProps> = ({ onError }) => {
+  const { t } = useTranslation('public');
+
+  /**
+   * Creates sorting options to the react-select format
+   */
+  const buildOptions = (): Array<selectOption> => {
+    return [
+      { value: 0, label: t('app.public.store.orders_dashboard.sort.newest') },
+      { value: 1, label: t('app.public.store.orders_dashboard.sort.oldest') }
+    ];
+  };
+  /**
+   * Display option: sorting
+   */
+  const handleSorting = (option: selectOption) => {
+    console.log('Sort option:', option);
+  };
+
+  return (
+    <section className="orders-dashboard">
+      <header>
+        <h2>{t('app.public.store.orders_dashboard.heading')}</h2>
+      </header>
+
+      <div className="store-list">
+        <StoreListHeader
+          productsCount={0}
+          selectOptions={buildOptions()}
+          onSelectOptionsChange={handleSorting}
+        />
+      </div>
+    </section>
+  );
+};
+
+const OrdersDashboardWrapper: React.FC<OrdersDashboardProps> = (props) => {
+  return (
+    <Loader>
+      <OrdersDashboard {...props} />
+    </Loader>
+  );
+};
+
+Application.Components.component('ordersDashboard', react2angular(OrdersDashboardWrapper, ['onError']));

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

@@ -9,7 +9,6 @@ import { StoreListHeader } from './store-list-header';
 import { AccordionItem } from './accordion-item';
 import { OrderItem } from './order-item';
 import { MemberSelect } from '../user/member-select';
-import { FabInput } from '../base/fab-input';
 
 declare const Application: IApplication;
 
@@ -31,6 +30,8 @@ type checklistOption = { value: number, label: string };
 /**
  * Admin list of orders
  */
+// TODO: delete next eslint disable
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Orders: React.FC<OrdersProps> = ({ onSuccess, onError }) => {
   const { t } = useTranslation('admin');
 

app/frontend/src/javascript/components/store/product-stock-modal.tsx

@@ -21,6 +21,8 @@ interface ProductStockModalProps<TFieldValues, TContext extends object> {
 /**
  * Form to manage a product's stock movement and quantity
  */
+// TODO: delete next eslint disable
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const ProductStockModal = <TFieldValues, TContext extends object> ({ product, register, control, formState, onError, onSuccess }: ProductStockModalProps<TFieldValues, TContext>) => {
   const { t } = useTranslation('admin');
 

app/frontend/src/javascript/components/store/show-order.tsx

@@ -16,6 +16,8 @@ interface ShowOrderProps {
 /**
  * This component shows an order details
  */
+// TODO: delete next eslint disable
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const ShowOrder: React.FC<ShowOrderProps> = ({ orderRef, onError, onSuccess }) => {
   const { t } = useTranslation('admin');
 

app/frontend/src/javascript/components/store/store-settings.tsx

@@ -22,6 +22,8 @@ interface Settings {
 /**
  * Shows store settings
  */
+// TODO: delete next eslint disable
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const StoreSettings: React.FC<StoreSettingsProps> = (onError, onSuccess) => {
   const { t } = useTranslation('admin');
 

app/frontend/src/javascript/router.js

@@ -227,6 +227,15 @@ angular.module('application.router', ['ui.router'])
           }
         }
       })
+      .state('app.logged.dashboard.orders', {
+        url: '/orders',
+        views: {
+          'main@': {
+            templateUrl: '/dashboard/orders.html',
+            controller: 'DashboardController'
+          }
+        }
+      })
       .state('app.logged.dashboard.wallet', {
         url: '/wallet',
         abstract: !Fablab.walletModule,

app/frontend/src/stylesheets/application.scss

@@ -92,6 +92,7 @@
 @import "modules/settings/user-validation-setting";
 @import "modules/socials/fab-socials";
 @import "modules/store/_utilities";
+@import "modules/store/orders-dashboard";
 @import "modules/store/orders";
 @import "modules/store/product-categories";
 @import "modules/store/product-form";

app/frontend/src/stylesheets/modules/store/orders-dashboard.scss

@@ -0,0 +1,14 @@
+.orders-dashboard {
+  max-width: 1600px;
+  margin: 0 auto;
+  padding-bottom: 6rem;
+  @include grid-col(12);
+  gap: 3.2rem;
+  align-items: flex-start;
+
+  header {
+    @include header();
+    padding-bottom: 0;
+    grid-column: 2 / -2;
+  }
+}

app/frontend/templates/dashboard/nav.html

@@ -19,6 +19,7 @@
           <li ui-sref-active="active"><a class="text-black" ui-sref="app.logged.dashboard.events" translate>{{ 'app.public.common.my_events' }}</a></li>
           <li ui-sref-active="active" ng-show="$root.modules.invoicing"><a class="text-black" ui-sref="app.logged.dashboard.invoices" translate>{{ 'app.public.common.my_invoices' }}</a></li>
           <li ui-sref-active="active" ng-show="$root.modules.invoicing"><a class="text-black" ui-sref="app.logged.dashboard.payment_schedules" translate>{{ 'app.public.common.my_payment_schedules' }}</a></li>
+          <li ui-sref-active="active"><a class="text-black" ui-sref="app.logged.dashboard.orders" translate>{{ 'app.public.common.my_orders' }}</a></li>
           <li ng-show="$root.modules.wallet" ui-sref-active="active"><a class="text-black" ui-sref="app.logged.dashboard.wallet" translate>{{ 'app.public.common.my_wallet' }}</a></li>
         </ul>
       </section>

app/frontend/templates/dashboard/orders.html

@@ -0,0 +1,9 @@
+<div>
+  <section class="heading">
+    <div class="row no-gutter">
+      <ng-include src="'/dashboard/nav.html'"></ng-include>
+    </div>
+  </section>
+
+  <orders-dashboard on-error="onError" />
+</div>

app/frontend/templates/shared/header.html.erb

@@ -48,6 +48,7 @@
         <li><a ui-sref="app.logged.dashboard.events" translate>{{ 'app.public.common.my_events' }}</a></li>
         <li><a ui-sref="app.logged.dashboard.invoices" ng-show="$root.modules.invoicing" translate>{{ 'app.public.common.my_invoices' }}</a></li>
         <li><a ui-sref="app.logged.dashboard.payment_schedules" ng-show="$root.modules.invoicing" translate>{{ 'app.public.common.my_payment_schedules' }}</a></li>
+        <li><a ui-sref="app.logged.dashboard.orders" translate>{{ 'app.public.common.my_orders' }}</a></li>
         <li ng-show="$root.modules.wallet"><a ui-sref="app.logged.dashboard.wallet" translate>{{ 'app.public.common.my_wallet' }}</a></li>
         <li class="divider" ng-if="isAuthorized(['admin', 'manager'])"></li>
         <li><a class="text-black pointer" ng-click="help($event)" ng-if="isAuthorized(['admin', 'manager'])"><i class="fa fa-question-circle"></i> <span translate>{{ 'app.public.common.help' }}</span> </a></li>

config/locales/app.public.en.yml

@@ -22,6 +22,7 @@ en:
         my_events: "My Events"
         my_invoices: "My Invoices"
         my_payment_schedules: "My payment schedules"
+        my_orders: "My orders"
         my_wallet: "My Wallet"
         #contextual help
         help: "Help"