feat(core/forms): add file field

To be used for generic file uploads in forms

src/core/forms/BUILD.bazel

@@ -17,17 +17,21 @@ ng_module(
         exclude = ["**/*.spec.ts"],
     ),
     assets = [
+        ":file-field.css",
         ":read-only-field.css",
+        ":read-only-file-field.css",
         ":read-only-table-field.css",
     ] + glob(["**/*.html"]),
     module_name = "@ajf/core/forms",
     deps = [
         "//src/core/common",
+        "//src/core/file-input",
         "//src/core/models",
         "//src/core/page-slider",
         "//src/core/utils",
         "@npm//@angular/core",
         "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
         "@npm//@types/esprima",
         "@npm//date-fns",
     ],
@@ -39,12 +43,24 @@ sass_library(
     deps = [],
 )
 
+sass_binary(
+    name = "file_field_scss",
+    src = "file-field.scss",
+    deps = [],
+)
+
 sass_binary(
     name = "read_only_field_scss",
     src = "read-only-field.scss",
     deps = [],
 )
 
+sass_binary(
+    name = "read_only_file_field_scss",
+    src = "read-only-file-field.scss",
+    deps = [],
+)
+
 sass_binary(
     name = "read_only_table_field_scss",
     src = "read-only-table-field.scss",

src/core/forms/file-field.html

@@ -0,0 +1 @@
+<ajf-file-input *ngIf="control|async as ctrl" [formControl]="ctrl!"></ajf-file-input>

src/core/forms/file-field.ts

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright (C) Gnucoop soc. coop.
+ *
+ * This file is part of the Advanced JSON forms (ajf).
+ *
+ * Advanced JSON forms (ajf) is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ *
+ * Advanced JSON forms (ajf) is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Advanced JSON forms (ajf).
+ * If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  ViewEncapsulation
+} from '@angular/core';
+
+import {AjfBaseFieldComponent} from './base-field';
+import {AjfFormRendererService} from './form-renderer';
+import {AJF_WARNING_ALERT_SERVICE, AjfWarningAlertService} from './warning-alert-service';
+
+@Component({
+  selector: 'ajf-file-field',
+  templateUrl: 'file-field.html',
+  styleUrls: ['file-field.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class AjfFileFieldComponent extends AjfBaseFieldComponent {
+  constructor(
+      cdr: ChangeDetectorRef, service: AjfFormRendererService,
+      @Inject(AJF_WARNING_ALERT_SERVICE) was: AjfWarningAlertService) {
+    super(cdr, service, was);
+  }
+}

src/core/forms/forms-module.ts

@@ -21,8 +21,10 @@
  */
 
 import {AjfCommonModule} from '@ajf/core/common';
+import {AjfFileInputModule} from '@ajf/core/file-input';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
 
 import {AjfAsFieldInstancePipe} from './as-field-instance';
 import {AjfAsRepeatingSlideInstancePipe} from './as-repeating-slide-instance';
@@ -33,6 +35,7 @@ import {AjfExpandFieldWithChoicesPipe} from './expand-input-with-choices';
 import {AjfFieldHost} from './field-host';
 import {AjfFieldIconPipe} from './field-icon';
 import {AjfFieldIsValidPipe} from './field-is-valid';
+import {AjfFileFieldComponent} from './file-field';
 import {AjfFormRendererService} from './form-renderer';
 import {AjfGetTableCellControlPipe} from './get-table-cell-control';
 import {AjfIncrementPipe} from './increment';
@@ -41,6 +44,7 @@ import {AjfIsRepeatingSlideInstancePipe} from './is-repeating-slide';
 import {AjfNodeCompleteNamePipe} from './node-complete-name';
 import {AjfRangePipe} from './range';
 import {AjfReadOnlyFieldComponent} from './read-only-field';
+import {AjfReadOnlyFileFieldComponent} from './read-only-file-field';
 import {AjfReadOnlyTableFieldComponent} from './read-only-table-field';
 import {AjfTableRowClass} from './table-row-class';
 import {AjfTableVisibleColumnsPipe} from './table-visible-columns';
@@ -58,19 +62,26 @@ import {AjfValidationService} from './validation-service';
     AjfFieldHost,
     AjfFieldIconPipe,
     AjfFieldIsValidPipe,
+    AjfFileFieldComponent,
     AjfGetTableCellControlPipe,
     AjfIncrementPipe,
     AjfIsCellEditablePipe,
     AjfIsRepeatingSlideInstancePipe,
     AjfNodeCompleteNamePipe,
     AjfRangePipe,
     AjfReadOnlyFieldComponent,
+    AjfReadOnlyFileFieldComponent,
     AjfReadOnlyTableFieldComponent,
     AjfTableRowClass,
     AjfTableVisibleColumnsPipe,
     AjfValidSlidePipe,
   ],
-  imports: [AjfCommonModule, CommonModule],
+  imports: [
+    AjfCommonModule,
+    AjfFileInputModule,
+    CommonModule,
+    ReactiveFormsModule,
+  ],
   exports: [
     AjfAsFieldInstancePipe,
     AjfAsRepeatingSlideInstancePipe,
@@ -81,13 +92,15 @@ import {AjfValidationService} from './validation-service';
     AjfFieldHost,
     AjfFieldIconPipe,
     AjfFieldIsValidPipe,
+    AjfFileFieldComponent,
     AjfGetTableCellControlPipe,
     AjfIncrementPipe,
     AjfIsCellEditablePipe,
     AjfIsRepeatingSlideInstancePipe,
     AjfNodeCompleteNamePipe,
     AjfRangePipe,
     AjfReadOnlyFieldComponent,
+    AjfReadOnlyFileFieldComponent,
     AjfReadOnlyTableFieldComponent,
     AjfTableRowClass,
     AjfTableVisibleColumnsPipe,

src/core/forms/public-api.ts

@@ -36,6 +36,7 @@ export * from './field-service';
 export * from './field-utils';
 export * from './field-warning-alert-result';
 export * from './field-with-choices';
+export * from './file-field';
 export * from './form';
 export * from './form-renderer';
 export * from './forms-module';
@@ -47,6 +48,7 @@ export * from './is-cell-editable';
 export * from './is-repeating-slide';
 export * from './node-complete-name';
 export * from './range';
+export * from './read-only-file-field';
 export * from './search-alert-threshold';
 export * from './serializers/attachments-origin-serializer';
 export * from './serializers/choices-origin-serializer';
@@ -87,6 +89,7 @@ export * from './interface/fields/field-components-map';
 export * from './interface/fields/field-size';
 export * from './interface/fields/field-type';
 export * from './interface/fields/field-with-choices';
+export * from './interface/fields/file-field';
 export * from './interface/fields/formula-field';
 export * from './interface/fields/multiple-choice-field';
 export * from './interface/fields/number-field';

src/core/forms/read-only-file-field.html

@@ -0,0 +1,3 @@
+<a [href]="fileUrl|async" [download]="fileName|async">
+  <img [src]="fileIcon"> {{ fileName|async }}
+</a>

src/core/forms/read-only-file-field.scss

@@ -0,0 +1,8 @@
+ajf-read-only-file-field {
+  img {
+    width: 32px;
+    height: 32px;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+}

src/core/forms/read-only-file-field.ts

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright (C) Gnucoop soc. coop.
+ *
+ * This file is part of the Advanced JSON forms (ajf).
+ *
+ * Advanced JSON forms (ajf) is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ *
+ * Advanced JSON forms (ajf) is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Advanced JSON forms (ajf).
+ * If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {AjfFile, fileIcon} from '@ajf/core/file-input';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  ViewEncapsulation
+} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {Observable} from 'rxjs';
+import {filter, map, shareReplay, startWith, switchMap} from 'rxjs/operators';
+
+import {AjfBaseFieldComponent} from './base-field';
+import {AjfFormRendererService} from './form-renderer';
+import {AJF_WARNING_ALERT_SERVICE, AjfWarningAlertService} from './warning-alert-service';
+
+@Component({
+  selector: 'ajf-read-only-file-field',
+  templateUrl: 'read-only-file-field.html',
+  styleUrls: ['read-only-file-field.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class AjfReadOnlyFileFieldComponent extends AjfBaseFieldComponent {
+  readonly fileIcon: SafeResourceUrl;
+  readonly fileUrl: Observable<SafeResourceUrl>;
+  readonly fileName: Observable<string>;
+
+  constructor(
+      cdr: ChangeDetectorRef, service: AjfFormRendererService,
+      @Inject(AJF_WARNING_ALERT_SERVICE) was: AjfWarningAlertService, domSanitizer: DomSanitizer) {
+    super(cdr, service, was);
+    this.fileIcon = domSanitizer.bypassSecurityTrustResourceUrl(fileIcon);
+    const fileStream = this.control.pipe(
+                           filter(control => control != null),
+                           switchMap(control => {
+                             control = control as FormControl;
+                             return control.valueChanges.pipe(
+                                 startWith(control.value),
+                             );
+                           }),
+                           filter(value => value != null),
+                           shareReplay(1),
+                           ) as Observable<AjfFile>;
+    this.fileUrl = fileStream.pipe(
+        map(file => domSanitizer.bypassSecurityTrustResourceUrl(file.content)),
+    );
+    this.fileName = fileStream.pipe(map(file => file.name));
+  }
+}

src/dev-app/ion-forms/form.ts

@@ -19,6 +19,7 @@
  * If not, see http://www.gnu.org/licenses/.
  *
  */
+
 export const formContext: any = {
   'string': 'lorem ipsum',
   'value1': 1,
@@ -256,7 +257,15 @@ export const formSchema: any = {
       label: 'Multiple Slide',
       nodeType: 4,
       nodes: [
-        {parent: 5, id: 5001, name: name, label: 'Child\'s name', nodeType: 0, fieldType: 0}, {
+        {
+          parent: 5,
+          id: 5001,
+          name: name,
+          label: 'Child\'s name',
+          nodeType: 0,
+          fieldType: 0,
+        },
+        {
           parent: 5001,
           id: 5002,
           name: 'birthweight',
@@ -302,8 +311,23 @@ export const formSchema: any = {
         nodeType: 0,
         fieldType: 11,
         rowLabels: ['row1', 'row2', 'row3'],
-        columnLabels: ['value1', 'value2', 'sum']
+        columnLabels: ['value1', 'value2', 'sum'],
       }]
-    }
+    },
+    {
+      parent: 7,
+      id: 8,
+      name: 'files',
+      label: 'File upload fields',
+      nodeType: 3,
+      nodes: [{
+        id: 801,
+        parent: 8,
+        name: 'file',
+        label: 'Generic file',
+        nodeType: 0,
+        fieldType: 14,
+      }]
+    },
   ]
 };

src/dev-app/mat-forms/form.ts

@@ -257,7 +257,15 @@ export const formSchema: any = {
       label: 'Multiple Slide',
       nodeType: 4,
       nodes: [
-        {parent: 5, id: 5001, name: name, label: 'Child\'s name', nodeType: 0, fieldType: 0}, {
+        {
+          parent: 5,
+          id: 5001,
+          name: name,
+          label: 'Child\'s name',
+          nodeType: 0,
+          fieldType: 0,
+        },
+        {
           parent: 5001,
           id: 5002,
           name: 'birthweight',
@@ -303,8 +311,23 @@ export const formSchema: any = {
         nodeType: 0,
         fieldType: 11,
         rowLabels: ['row1', 'row2', 'row3'],
-        columnLabels: ['value1', 'value2', 'sum']
+        columnLabels: ['value1', 'value2', 'sum'],
       }]
-    }
+    },
+    {
+      parent: 7,
+      id: 8,
+      name: 'files',
+      label: 'File upload fields',
+      nodeType: 3,
+      nodes: [{
+        id: 801,
+        parent: 8,
+        name: 'file',
+        label: 'Generic file',
+        nodeType: 0,
+        fieldType: 14,
+      }]
+    },
   ]
 };

src/ionic/forms/field-service.ts

@@ -23,7 +23,9 @@
 import {
   AjfFieldService as CoreService,
   AjfFieldType,
+  AjfFileFieldComponent,
   AjfReadOnlyFieldComponent,
+  AjfReadOnlyFileFieldComponent,
   AjfReadOnlyTableFieldComponent
 } from '@ajf/core/forms';
 import {Injectable} from '@angular/core';
@@ -98,5 +100,9 @@ export class AjfFieldService extends CoreService {
       component: AjfBarcodeFieldComponent,
       readOnlyComponent: AjfReadOnlyFieldComponent
     };
+    this.componentsMap[AjfFieldType.File] = {
+      component: AjfFileFieldComponent,
+      readOnlyComponent: AjfReadOnlyFileFieldComponent
+    };
   }
 }