documents: add other files components

- Uses primeng to display other files.

Co-Authored-by: Johnny Mariéthoz <[email protected]>

angular.json

@@ -44,6 +44,7 @@
                 }
               ],
               "outputHashing": "none",
+              "optimization": true,
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,

package.json

@@ -42,10 +42,10 @@
     "@angular/platform-browser-dynamic": "^17.3.10",
     "@angular/router": "^17.3.10",
     "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
-    "@ngx-formly/core": "6.3.2",
-    "@ngx-formly/primeng": "6.3.2",
+    "@ngx-formly/core": "^6.3.6",
+    "@ngx-formly/primeng": "^6.3.6",
     "@ngx-translate/core": "^15.0.0",
-    "@rero/ng-core": "^17.2.1",
+    "@rero/ng-core": "^17.2.2",
     "@types/marked": "^4.0.0",
     "@vpoppy/ngx-translate-extract": "^9.0.0",
     "bootstrap": "^4.6.2",

projects/sonar/src/app/app.module.ts

@@ -31,11 +31,13 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { NgxDropzoneModule } from 'ngx-dropzone';
 import { ToastrModule } from 'ngx-toastr';
 import { DividerModule } from 'primeng/divider';
+import { CarouselModule } from 'primeng/carousel';
 import { DropdownModule } from 'primeng/dropdown';
 import { FileUploadModule } from 'primeng/fileupload';
 import { InputTextModule } from 'primeng/inputtext';
 import { OrderListModule } from 'primeng/orderlist';
 import { PanelModule } from 'primeng/panel';
+import { PaginatorModule } from 'primeng/paginator';
 import { AdminComponent } from './_layout/admin/admin.component';
 import { AppConfigService } from './app-config.service';
 import { AppInitializerService } from './app-initializer.service';
@@ -78,6 +80,9 @@ import { DetailComponent as UserDetailComponent } from './record/user/detail/det
 import { UserComponent } from './record/user/user.component';
 import { ValidationComponent } from './record/validation/validation.component';
 import { UserService } from './user.service';
+import { OtherFilesComponent } from './record/files/other-files/other-files.component';
+import { FaIconClassPipe } from './pipe/fa-icon-class.pipe';
+import { StatsFilesComponent } from './record/files/stats-files/stats-files.component';
 
 export function appInitializerFactory(appInitializerService: AppInitializerService): () => Promise<any> {
   return () => appInitializerService.initialize().toPromise();
@@ -124,7 +129,10 @@ export function minElementError(err: any, field: FormlyFieldConfig) {
     ContributionsComponent,
     ContributionComponent,
     UploadFilesComponent,
-    FileItemComponent
+    FileItemComponent,
+    OtherFilesComponent,
+    FaIconClassPipe,
+    StatsFilesComponent
   ],
   imports: [
     BrowserModule,
@@ -154,7 +162,9 @@ export function minElementError(err: any, field: FormlyFieldConfig) {
     OrderListModule,
     DropdownModule,
     PanelModule,
-    DividerModule
+    DividerModule,
+    CarouselModule,
+    PaginatorModule
   ],
   providers: [
     {

projects/sonar/src/app/pipe/fa-icon-class.pipe.spec.ts

@@ -0,0 +1,25 @@
+/*
+ * SONAR User Interface
+ * Copyright (C) 2019-2024 RERO
+ *
+ * This program 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, version 3 of the License.
+ *
+ * This program 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 this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { FaIconClassPipe } from './fa-icon-class.pipe';
+
+describe('FaIconClassPipe', () => {
+  it('create an instance', () => {
+    const pipe = new FaIconClassPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

projects/sonar/src/app/pipe/fa-icon-class.pipe.ts

@@ -0,0 +1,70 @@
+/*
+ * SONAR User Interface
+ * Copyright (C) 2019-2024 RERO
+ *
+ * This program 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, version 3 of the License.
+ *
+ * This program 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 this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'faIconClass',
+})
+export class FaIconClassPipe implements PipeTransform {
+
+  /**
+   * Get the font awesome class name for a given mime type.
+   *
+   * @param mimetype mime type of a file
+   * @returns the font awesome class
+   */
+  faClassForMimeType(mimetype: string): string {
+    if (mimetype == null) {
+      return 'fa-file-o';
+    }
+    switch (true) {
+      case mimetype.startsWith('image/'):
+        return 'fa-file-image-o';
+      case mimetype.startsWith('audio/'):
+        return 'fa-file-audio-o';
+      case mimetype.startsWith('text/'):
+        return 'fa-file-text-o';
+      case mimetype.startsWith('video/'):
+        return 'fa-file-video-o';
+      case mimetype.startsWith('application/vnd.openxmlformats-officedocument.presentationml'):
+        return 'fa-file-powerpoint-o';
+      case mimetype.startsWith('application/vnd.openxmlformats-officedocument.wordprocessingml'):
+        return 'fa-file-word-o';
+      case mimetype.startsWith('application/vnd.openxmlformats-officedocument.spreadsheetml'):
+        return 'fa-file-excel-o';
+      case mimetype.startsWith('application/pdf'):
+        return 'fa-file-pdf-o';
+    }
+    return 'fa-file-o';
+  }
+
+  /**
+   * Get the font awesome class given a type and a value.
+   *
+   * @param value the value corresponding to the icon
+   * @param type type of the icon i.e. file
+   * @returns the font awesome classes.
+   */
+  transform(value: string, type: string): string | null {
+    switch(type) {
+      case 'file':
+        return this.faClassForMimeType(value);
+    }
+    return null;
+  }
+}