feat(components.file): add an onremove callback on file input (#847)

* feat(components.file): add an onremove callback

Add a way to know when an attachment is removed
ref: UK-196

Signed-off-by: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>

* feat(components.file): add an onremove callback on file input

Add a test when file is removed
ref: UK-196

Signed-off-by: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>

* feat(components.file): add an onremove callback on file input

Add a story to test onSelect and onRemove callbacks
ref: UK-196

Signed-off-by: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>

* feat(components.file): add an onremove callback on file input

fix an english error
ref: Uk-196

Signed-off-by: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>

---------

Signed-off-by: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
Co-authored-by: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>

Author: MaximeBajeux

packages/apps/workshop/stories/design-system/components/file/file-webcomponent.stories.js

@@ -4,6 +4,7 @@ import { forModule } from 'storybook-addon-angularjs';
 import Field from '@ovh-ux/ui-kit.field';
 import File from '@ovh-ux/ui-kit.file';
 import FormActions from '@ovh-ux/ui-kit.form-actions';
+import Message from '@ovh-ux/ui-kit.message';
 
 import readme from '@ovh-ux/ui-kit.file/README.md';
 import { compileTemplate } from '../../../../src/utils';
@@ -16,6 +17,7 @@ angular.module(moduleName, [
   // For examples
   Field,
   FormActions,
+  Message,
 ]);
 
 export default {
@@ -147,3 +149,42 @@ export const Validation = forModule(moduleName).createElement(
     },
   ),
 );
+
+export const EventHandling = forModule(moduleName).createElement(
+  () => compileTemplate(
+    `
+    <oui-message
+      type="info"
+      ng-if="$ctrl.message">
+      {{$ctrl.message}}
+    </oui-message>
+    <oui-file
+      disabled="$ctrl.disabled"
+      model="$ctrl.model"
+      multiple
+      on-select="$ctrl.onSelect(modelValue)"
+      on-remove="$ctrl.onRemove(modelValue)"
+    >
+    </oui-file>
+    `,
+    {
+      $ctrl: new (class {
+        constructor() {
+          this.message = '';
+        }
+
+        onSelect(model) {
+          const plural = model.length > 1;
+          this.message = `You've selected a file ! Currently ${model.length} file${plural ? 's' : ''} selected`;
+        }
+
+        onRemove(model) {
+          const plural = model.length > 1;
+          this.message = `You've removed a file ! Currently ${model.length} file${plural ? 's' : ''} selected`;
+        }
+      })(),
+    },
+  ),
+);
+
+EventHandling.storyName = 'Trigger event on selection and deletion';

packages/components/file/README.md

@@ -51,3 +51,4 @@ angular.module('myModule', ['oui.file'])
 | `droparea`        | boolean           | <?        | yes               | `true`, `false`   | `false`   | enable a drop area to drag files
 | `preview`         | boolean           | <?        | yes               | `true`, `false`   | `false`   | show preview of image files (works only with `image/*` files.)
 | `on-select`       | function          | &         | no                | n/a               | n/a       | handler triggered when files are selected
+| `on-remove`       | function          | &         | no                | n/a               | n/a       | handler triggered when an attachment is removed

packages/components/file/src/js/file.component.js

@@ -18,6 +18,7 @@ export default {
     droparea: '<?',
     preview: '<?',
     onSelect: '&',
+    onRemove: '&',
   },
   controller,
   template,

packages/components/file/src/js/file.controller.js

@@ -103,12 +103,14 @@ export default class {
   removeFile(file) {
     if (angular.isArray(this.model)) {
       remove(this.model, (item) => item === file);
+      this.onRemove({ modelValue: this.model });
     }
   }
 
   resetFile() {
     this.model = undefined;
     this.fileSelector[0].value = '';
+    this.onRemove({ modelValue: this.model });
 
     if (this.form && this.form[this.name]) {
       this.form[this.name].$setValidity('maxsize', true);

packages/components/file/src/js/file.spec.js

@@ -190,15 +190,20 @@ describe('ouiFile', () => {
       let element;
       let controller;
       let onSelectSpy;
+      let onRemoveSpy;
 
       beforeEach(() => {
         onSelectSpy = jasmine.createSpy('onSelectSpy');
+        onRemoveSpy = jasmine.createSpy('onRemoveSpy');
         element = TestUtils.compileTemplate(`
                 <oui-file
                     model="$ctrl.model"
-                    on-select="$ctrl.onSelectSpy(modelValue)">
+                    on-select="$ctrl.onSelectSpy(modelValue)"
+                    on-remove="$ctrl.onRemoveSpy(modelValue)"
+                >
                 </oui-file>`, {
           onSelectSpy,
+          onRemoveSpy,
         });
         controller = element.controller('ouiFile');
 
@@ -254,6 +259,7 @@ describe('ouiFile', () => {
         controller.addFiles(mockFiles);
         controller.removeFile(mockFile);
         expect(controller.model.length).toBe(0);
+        expect(onRemoveSpy).toHaveBeenCalledWith(controller.model);
       });
     });