(bug) unable set a main image of product and remove an image of product

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Fix a bug: broken display of machines pages
 - Fix a bug: some automated tests were randomly failing because ElasticSearch was not synced
 - Fix a bug: payment related objects are not synced on Stripe when enabling the online payment module
+- Fix a bug: unable set a main image of product and remove an image of product
 
 ## v5.5.4 2022 November 17
 

app/frontend/src/javascript/components/form/form-image-upload.tsx

@@ -60,11 +60,12 @@ export const FormImageUpload = <TFieldValues extends FieldValues, TContext exten
         attachment_name: f.name
       });
       setValue(
-        id as Path<TFieldValues>,
-        {
-          attachment_name: f.name,
-          _destroy: false
-        } as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
+        `${id}[attachment_name]` as Path<TFieldValues>,
+        f.name as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
+      );
+      setValue(
+        `${id}[_destroy]` as Path<TFieldValues>,
+        false as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
       );
       if (typeof onFileChange === 'function') {
         onFileChange({ attachment_name: f.name });

app/frontend/src/javascript/components/form/form-multi-file-upload.tsx

@@ -6,9 +6,10 @@ import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FormComponent, FormControlledComponent } from '../../models/form-component';
 import { AbstractFormItemProps } from './abstract-form-item';
 import { UseFormSetValue } from 'react-hook-form/dist/types/form';
-import { ArrayPath, FieldArray, useFieldArray } from 'react-hook-form';
+import { ArrayPath, FieldArray, Path, useFieldArray, useWatch } from 'react-hook-form';
 import { FileType } from '../../models/file';
 import { UnpackNestedValue } from 'react-hook-form/dist/types';
+import { FieldPathValue } from 'react-hook-form/dist/types/path';
 
 interface FormMultiFileUploadProps<TFieldValues, TContext extends object> extends FormComponent<TFieldValues>, FormControlledComponent<TFieldValues, TContext>, AbstractFormItemProps<TFieldValues> {
   setValue: UseFormSetValue<TFieldValues>,
@@ -20,13 +21,26 @@ interface FormMultiFileUploadProps<TFieldValues, TContext extends object> extend
  * This component allows to upload multiple files, in forms managed by react-hook-form.
  */
 export const FormMultiFileUpload = <TFieldValues extends FieldValues, TContext extends object>({ id, className, register, control, setValue, formState, addButtonLabel, accept }: FormMultiFileUploadProps<TFieldValues, TContext>) => {
-  const { fields, append, remove } = useFieldArray({ control, name: id as ArrayPath<TFieldValues> });
+  const { append } = useFieldArray({ control, name: id as ArrayPath<TFieldValues> });
+  const output = useWatch({ control, name: id as Path<TFieldValues> });
+
+  /**
+   * Remove an file
+   */
+  const handleRemoveFile = (file: FileType, index: number) => {
+    return () => {
+      setValue(
+        `${id}.${index}._destroy` as Path<TFieldValues>,
+        true as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
+      );
+    };
+  };
 
   return (
     <div className={`form-multi-file-upload ${className || ''}`}>
       <div className="list">
-        {fields.map((field: FileType, index) => (
-          <FormFileUpload key={field.id}
+        {output.map((field: FileType, index) => (
+          <FormFileUpload key={index}
             defaultFile={field}
             id={`${id}.${index}`}
             accept={accept}
@@ -34,7 +48,7 @@ export const FormMultiFileUpload = <TFieldValues extends FieldValues, TContext e
             setValue={setValue}
             formState={formState}
             className={field._destroy ? 'hidden' : ''}
-            onFileRemove={() => remove(index)}/>
+            onFileRemove={() => handleRemoveFile(field, index)}/>
         ))}
       </div>
       <FabButton

app/frontend/src/javascript/components/form/form-multi-image-upload.tsx

@@ -20,7 +20,7 @@ interface FormMultiImageUploadProps<TFieldValues, TContext extends object> exten
  * This component allows to upload multiple images, in forms managed by react-hook-form.
  */
 export const FormMultiImageUpload = <TFieldValues extends FieldValues, TContext extends object>({ id, className, register, control, setValue, formState, addButtonLabel }: FormMultiImageUploadProps<TFieldValues, TContext>) => {
-  const { fields, append, remove } = useFieldArray({ control, name: id as ArrayPath<TFieldValues> });
+  const { append } = useFieldArray({ control, name: id as ArrayPath<TFieldValues> });
   const output = useWatch({ control, name: id as Path<TFieldValues> });
 
   /**
@@ -44,14 +44,10 @@ export const FormMultiImageUpload = <TFieldValues extends FieldValues, TContext
           true as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
         );
       }
-      if (typeof image.id === 'string') {
-        remove(index);
-      } else {
-        setValue(
-          `${id}.${index}._destroy` as Path<TFieldValues>,
-          true as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
-        );
-      }
+      setValue(
+        `${id}.${index}._destroy` as Path<TFieldValues>,
+        true as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>
+      );
     };
   };
 
@@ -74,8 +70,8 @@ export const FormMultiImageUpload = <TFieldValues extends FieldValues, TContext
   return (
     <div className={`form-multi-image-upload ${className || ''}`}>
       <div className="list">
-        {fields.map((field: ImageType, index) => (
-          <FormImageUpload key={field.id}
+        {output.map((field: ImageType, index) => (
+          <FormImageUpload key={index}
             defaultImage={field}
             id={`${id}.${index}`}
             accept="image/*"

app/models/product.rb

@@ -15,7 +15,7 @@ class Product < ApplicationRecord
   accepts_nested_attributes_for :product_files, allow_destroy: true, reject_if: :all_blank
 
   has_many :product_images, as: :viewable, dependent: :destroy
-  accepts_nested_attributes_for :product_images, allow_destroy: true, reject_if: ->(i) { i[:attachment].blank? }
+  accepts_nested_attributes_for :product_images, allow_destroy: true, reject_if: ->(i) { i[:attachment].blank? && i[:id].blank? }
 
   has_many :product_stock_movements, dependent: :destroy
   accepts_nested_attributes_for :product_stock_movements, allow_destroy: true, reject_if: :all_blank

app/views/api/products/_product.json.jbuilder

@@ -4,12 +4,12 @@ json.extract! product, :id, :name, :slug, :sku, :is_active, :product_category_id
               :low_stock_threshold, :machine_ids, :created_at
 json.description sanitize(product.description)
 json.amount product.amount / 100.0 if product.amount.present?
-json.product_files_attributes product.product_files do |f|
+json.product_files_attributes product.product_files.order(created_at: :asc) do |f|
   json.id f.id
   json.attachment_name f.attachment_identifier
   json.attachment_url f.attachment_url
 end
-json.product_images_attributes product.product_images do |f|
+json.product_images_attributes product.product_images.order(created_at: :asc) do |f|
   json.id f.id
   json.attachment_name f.attachment_identifier
   json.attachment_url f.attachment_url