(merge) Merge remote-tracking branch 'origin/product-store_integration' into product-store

app/frontend/src/javascript/components/store/categories/manage-product-category.tsx

@@ -73,7 +73,7 @@ export const ManageProductCategory: React.FC<ManageProductCategoryProps> = ({ pr
         isOpen={isOpen}
         toggleModal={toggleModal}
         closeButton>
-          { (action === 'update' || action === 'delete') && <p className='subtitle'>{productCategory.name}</p>}
+          { action === 'update' && <p className='subtitle'>{productCategory.name}</p>}
         <ProductCategoryForm action={action}
           productCategories={productCategories}
           productCategory={productCategory}

app/frontend/src/javascript/components/store/categories/product-category-form.tsx

@@ -6,8 +6,8 @@ import { FormInput } from '../../form/form-input';
 import { FormSelect } from '../../form/form-select';
 import { ProductCategory } from '../../../models/product-category';
 import { FabButton } from '../../base/fab-button';
-import { FabAlert } from '../../base/fab-alert';
 import ProductCategoryAPI from '../../../api/product-category';
+import { HtmlTranslate } from '../../base/html-translate';
 
 interface ProductCategoryFormProps {
   action: 'create' | 'update' | 'delete',
@@ -95,10 +95,8 @@ export const ProductCategoryForm: React.FC<ProductCategoryFormProps> = ({ action
     <form onSubmit={handleSubmit(onSubmit)} name="productCategoryForm" className="product-category-form">
       { action === 'delete'
         ? <>
-            <FabAlert level='danger'>
-              {t('app.admin.store.product_category_form.delete.confirm')}
-            </FabAlert>
-            <FabButton type='submit'>{t('app.admin.store.product_category_form.save')}</FabButton>
+            <HtmlTranslate trKey="app.admin.store.product_category_form.delete.confirm" options={{ CATEGORY: productCategory?.name }} />
+            <FabButton type='submit'>{t('app.admin.store.product_category_form.delete.save')}</FabButton>
           </>
         : <>
             <FormInput id='name'

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

@@ -48,14 +48,16 @@ export const OrderItem: React.FC<OrderItemProps> = ({ order, currentUser }) => {
       }
       <div className="date">
         <span>{t('app.shared.store.order_item.created_at')}</span>
-        <div>{FormatLib.date(order.created_at)}
-          <div className="fab-tooltip">
-            <span className="trigger"><PlusCircle size={16} weight="light" /></span>
-            <div className="content">
-              {t('app.shared.store.order_item.last_update')}<br />
-              {FormatLib.date(order.updated_at)}
+        <div>
+          <p>{FormatLib.date(order.created_at)}
+            <div className="fab-tooltip">
+              <span className="trigger"><PlusCircle size={16} weight="light" /></span>
+              <div className="content">
+                {t('app.shared.store.order_item.last_update')}<br />
+                {FormatLib.date(order.updated_at)}
+              </div>
             </div>
-          </div>
+          </p>
         </div>
       </div>
       <div className='price'>

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

@@ -28,7 +28,6 @@ import { ActiveFiltersTags } from './filters/active-filters-tags';
 import ProductLib from '../../lib/product';
 import { UIRouter } from '@uirouter/angularjs';
 import SettingAPI from '../../api/setting';
-import { CaretDoubleDown } from 'phosphor-react';
 
 declare const Application: IApplication;
 
@@ -70,13 +69,14 @@ const Store: React.FC<StoreProps> = ({ onError, onSuccess, currentUser, uiRouter
   const [resources, setResources] = useImmer<ProductResourcesFetching>(storeInitialResources);
   const [machinesModule, setMachinesModule] = useState<boolean>(false);
   const [categoriesTree, setCategoriesTree] = useState<CategoryTree[]>([]);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [filtersPanel, setFiltersPanel] = useState<boolean>(false);
   const [pageCount, setPageCount] = useState<number>(0);
   const [productsCount, setProductsCount] = useState<number>(0);
   const [currentPage, setCurrentPage] = useState<number>(1);
 
   useEffect(() => {
-    fetchProducts().then(scrollToProducts);
+    fetchProducts();
     ProductLib.fetchInitialResources(setResources, onError, formatCategories);
     SettingAPI.get('machines_module').then(data => {
       setMachinesModule(data.value === 'true');
@@ -85,7 +85,7 @@ const Store: React.FC<StoreProps> = ({ onError, onSuccess, currentUser, uiRouter
 
   useEffect(() => {
     if (resources.filters.ready) {
-      fetchProducts().then(scrollToProducts);
+      fetchProducts();
       uiRouter.stateService.transitionTo(uiRouter.globals.current, ProductLib.indexFiltersToRouterParams(resources.filters.data));
     }
   }, [resources.filters]);
@@ -221,13 +221,6 @@ const Store: React.FC<StoreProps> = ({ onError, onSuccess, currentUser, uiRouter
     }
   };
 
-  /**
-   * Scroll the view to the product list
-   */
-  const scrollToProducts = () => {
-    window.document.getElementById('content-main').scrollTo({ top: 100, behavior: 'smooth' });
-  };
-
   const selectedCategory = resources.filters.data.categories[0];
   const parent = resources.categories.data.find(c => c.id === selectedCategory?.parent_id);
   return (
@@ -252,13 +245,6 @@ const Store: React.FC<StoreProps> = ({ onError, onSuccess, currentUser, uiRouter
         }
       </ul>
       <aside className={`store-filters ${filtersPanel ? '' : 'collapsed'}`}>
-        <header>
-          <h3>{t('app.public.store.products.filter')}</h3>
-          <div className='grpBtn'>
-            <FabButton onClick={clearAllFilters} className="is-black">{t('app.public.store.products.filter_clear')}</FabButton>
-            <CaretDoubleDown className='filters-toggle' size={16} weight="bold" onClick={() => setFiltersPanel(!filtersPanel)} />
-          </div>
-        </header>
         <div className='grp'>
           <div className="categories">
             <header>

app/frontend/src/stylesheets/application.scss

@@ -99,6 +99,7 @@
 @import "modules/store/orders-dashboard";
 @import "modules/store/orders";
 @import "modules/store/product-categories";
+@import "modules/store/product-category-form";
 @import "modules/store/product-form";
 @import "modules/store/product-stock-form";
 @import "modules/store/product-stock-modal";

app/frontend/src/stylesheets/modules/store/order-item.scss

@@ -1,8 +1,8 @@
 .order-item {
   width: 100%;
   display: grid;
-  grid-template-rows: repeat(2, min-content);
-  grid-template-columns: 2fr 1fr 10ch;
+  grid-template-rows: repeat(3, min-content);
+  grid-template-columns: 1fr 1fr;
   gap: 1.6rem 2.4rem;
   align-items: center;
   padding: 1.6rem;
@@ -52,7 +52,7 @@
     }
   }
   .price {
-    grid-area: 1 / 3 / 3 / 4;
+    grid-area: 3 / 1 / 4 / 2;
     display: flex;
     flex-direction: column;
     justify-self: flex-end;
@@ -62,7 +62,25 @@
     }
     p { @include text-base(600); }
   }
-  button { grid-area: 1 / 4 / 3 / 5; }
+  button {
+    grid-area: 3 / 2 / 4 / 3;
+    justify-self: flex-end;
+    width: 4rem;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  @media (min-width: 640px) {
+    grid-template-rows: repeat(2, min-content);
+    grid-template-columns: 2fr 1fr 10ch;
+    .ref { grid-area: 1 / 1 / 2 / 2; }
+    .fab-state-label { grid-area: 1 / 2 / 2 / 3; }
+    .client { grid-area: 2 / 1 / 3 / 2; }
+    .date { grid-area: 2 / 2 / 3 / 3; }
+    .price { grid-area: 1 / 3 / 3 / 4; }
+    button { grid-area: 1 / 4 / 3 / 5; }
+  }
 
   @media (min-width: 1440px) {
     grid-auto-flow: column;

app/frontend/src/stylesheets/modules/store/product-category-form.scss

@@ -0,0 +1,5 @@
+.product-category-form {
+  span {
+    margin-bottom: 2.4rem;
+  }
+}

config/locales/app.admin.en.yml

@@ -1937,7 +1937,8 @@ en:
             error: "Unable to modify the category: "
             success: "The category has been modified."
           delete:
-            confirm: "Do you really want to delete this product category?"
+            confirm: "Do you really want to delete <strong>{CATEGORY}</strong>?<br>If it has sub-categories, they will also be deleted."
+            save: "Delete"
             error: "Unable to delete the category: "
             success: "The category has been successfully deleted"
           save: "Save"