feat: Add new surveyjs widgets to manage files

libs/shared/jest.config.ts

@@ -53,6 +53,8 @@ export default {
     '<rootDir>/src/lib/components/record-history/record-history-table/*.spec.ts',
     '<rootDir>/src/lib/components/record-history/record-history-cards/*.spec.ts',
     '<rootDir>/src/lib/components/field-history-question/*.spec.ts',
+    '<rootDir>/src/lib/components/files-upload-question/*.spec.ts',
+    '<rootDir>/src/lib/components/files-management-question/*.spec.ts',
     '<rootDir>/src/lib/components/form/form.component.spec.ts',
     '<rootDir>/src/lib/components/widgets/common/tab-actions/*.spec.ts',
     '<rootDir>/src/lib/components/widgets/common/tab-actions/read-only-fields-modal/*.spec.ts',
@@ -82,6 +84,8 @@ export default {
     '<rootDir>/src/lib/survey/components/resource.spec.ts',
     '<rootDir>/src/lib/survey/components/resources.spec.ts',
     '<rootDir>/src/lib/survey/components/field-history.spec.ts',
+    '<rootDir>/src/lib/survey/components/files-upload.spec.ts',
+    '<rootDir>/src/lib/survey/components/files-management.spec.ts',
     '<rootDir>/src/lib/survey/components/utils/*.spec.ts',
     '<rootDir>/src/lib/survey/widgets/*.spec.ts',
     '<rootDir>/src/lib/survey/widgets/utils/*.spec.ts',

libs/shared/src/i18n/en.json

@@ -1104,6 +1104,34 @@
       "title": "Email preview",
       "to": "To"
     },
+    "filesManagement": {
+      "empty": "No files yet.",
+      "field": "Document type",
+      "fileName": "File name",
+      "language": "Language",
+      "noLanguage": "No language",
+      "status": "Status",
+      "statusActive": "Active",
+      "statusOutdated": "Outdated",
+      "statusPending": "To upload"
+    },
+    "filesUpload": {
+      "addFiles": "Add files",
+      "dropFilesHere": "Drop files here",
+      "empty": "No files to upload yet.",
+      "errors": {
+        "invalidType": "\"{{name}}\" is not an accepted file type.",
+        "maxSizeExceeded": "\"{{name}}\" exceeds the maximum allowed size.",
+        "maximumAllowedFiles": "Maximum number of files allowed: {{number}}",
+        "noTargetField": "Select a file question before adding files.",
+        "singleFileOnly": "This question only accepts a single file.",
+        "uploadFailed": "The files could not be added, please try again."
+      },
+      "field": "Document type",
+      "fileName": "File name",
+      "language": "Language",
+      "targetField": "Document type"
+    },
     "form": {
       "aggregation": {
         "delete": {

libs/shared/src/i18n/fr.json

@@ -1104,6 +1104,34 @@
       "title": "Prévisualisation de mail",
       "to": "À"
     },
+    "filesManagement": {
+      "empty": "Aucun fichier pour le moment.",
+      "field": "Type de document",
+      "fileName": "Nom du fichier",
+      "language": "Langue",
+      "noLanguage": "Sans langue",
+      "status": "Statut",
+      "statusActive": "Actif",
+      "statusOutdated": "Obsolète",
+      "statusPending": "À téléverser"
+    },
+    "filesUpload": {
+      "addFiles": "Ajouter des fichiers",
+      "dropFilesHere": "Déposez les fichiers ici",
+      "empty": "Aucun fichier à téléverser pour le moment.",
+      "errors": {
+        "invalidType": "« {{name}} » n'est pas un type de fichier accepté.",
+        "maxSizeExceeded": "« {{name}} » dépasse la taille maximale autorisée.",
+        "maximumAllowedFiles": "Nombre maximum de fichiers autorisé : {{number}}",
+        "noTargetField": "Sélectionnez une question de type fichier avant d'ajouter des fichiers.",
+        "singleFileOnly": "Cette question n'accepte qu'un seul fichier.",
+        "uploadFailed": "Les fichiers n'ont pas pu être ajoutés, veuillez réessayer."
+      },
+      "field": "Type de document",
+      "fileName": "Nom du fichier",
+      "language": "Langue",
+      "targetField": "Type de document"
+    },
     "form": {
       "aggregation": {
         "delete": {

libs/shared/src/i18n/test.json

@@ -1104,6 +1104,34 @@
       "title": "******",
       "to": "******"
     },
+    "filesManagement": {
+      "empty": "******",
+      "field": "******",
+      "fileName": "******",
+      "language": "******",
+      "noLanguage": "******",
+      "status": "******",
+      "statusActive": "******",
+      "statusOutdated": "******",
+      "statusPending": "******"
+    },
+    "filesUpload": {
+      "addFiles": "******",
+      "dropFilesHere": "******",
+      "empty": "******",
+      "errors": {
+        "invalidType": "****** {{name}} ******",
+        "maxSizeExceeded": "****** {{name}} ******",
+        "maximumAllowedFiles": "****** {{number}}",
+        "noTargetField": "******",
+        "singleFileOnly": "******",
+        "uploadFailed": "******"
+      },
+      "field": "******",
+      "fileName": "******",
+      "language": "******",
+      "targetField": "******"
+    },
     "form": {
       "aggregation": {
         "delete": {

libs/shared/src/i18n/uk.json

@@ -1104,6 +1104,34 @@
       "title": "Попередній перегляд електронного листа",
       "to": "Кому"
     },
+    "filesManagement": {
+      "empty": "Поки що немає файлів.",
+      "field": "Тип документа",
+      "fileName": "Назва файлу",
+      "language": "Мова",
+      "noLanguage": "Без мови",
+      "status": "Статус",
+      "statusActive": "Активний",
+      "statusOutdated": "Застарілий",
+      "statusPending": "До завантаження"
+    },
+    "filesUpload": {
+      "addFiles": "Додати файли",
+      "dropFilesHere": "Перетягніть файли сюди",
+      "empty": "Поки що немає файлів для завантаження.",
+      "errors": {
+        "invalidType": "«{{name}}» не є дозволеним типом файлу.",
+        "maxSizeExceeded": "«{{name}}» перевищує максимально дозволений розмір.",
+        "maximumAllowedFiles": "Максимальна кількість файлів: {{number}}",
+        "noTargetField": "Виберіть питання типу «файл», перш ніж додавати файли.",
+        "singleFileOnly": "Це питання приймає лише один файл.",
+        "uploadFailed": "Не вдалося додати файли, спробуйте ще раз."
+      },
+      "field": "Тип документа",
+      "fileName": "Назва файлу",
+      "language": "Мова",
+      "targetField": "Тип документа"
+    },
     "form": {
       "aggregation": {
         "delete": {

libs/shared/src/lib/components/files-management-question/files-management-question.component.html

@@ -0,0 +1,96 @@
+<kendo-grid
+  class="files-management-question"
+  [data]="rows"
+  [sortable]="true"
+  [sort]="sort"
+  (sortChange)="onSortChange($event)"
+  [scrollable]="'none'"
+>
+  <kendo-grid-column
+    field="file.name"
+    [title]="'components.filesManagement.fileName' | translate"
+  >
+    <ng-template kendoGridCellTemplate let-dataItem>
+      <span class="inline-flex items-center gap-2">
+        <span class="k-icon" [ngClass]="dataItem.icon"></span>
+        <span [title]="dataItem.file.name">{{ dataItem.file.name }}</span>
+      </span>
+    </ng-template>
+  </kendo-grid-column>
+  <kendo-grid-column
+    field="fieldTitle"
+    [title]="'components.filesManagement.field' | translate"
+  ></kendo-grid-column>
+  <kendo-grid-column
+    field="languageLabel"
+    [title]="'components.filesManagement.language' | translate"
+  >
+    <ng-template kendoGridCellTemplate let-dataItem>
+      <span *ngIf="dataItem.languageLabel; else noLanguageTmpl">
+        {{ dataItem.languageLabel }}
+      </span>
+      <ng-template #noLanguageTmpl>
+        <span class="italic text-gray-500">
+          {{ 'components.filesManagement.noLanguage' | translate }}
+        </span>
+      </ng-template>
+    </ng-template>
+  </kendo-grid-column>
+  <kendo-grid-column
+    field="status"
+    [title]="'components.filesManagement.status' | translate"
+    [width]="140"
+  >
+    <ng-template kendoGridCellTemplate let-dataItem>
+      <span
+        *ngIf="dataItem.status === 'pending'"
+        class="inline-flex items-center gap-1 text-gray-500"
+      >
+        <span class="k-icon k-i-upload"></span>
+        {{ 'components.filesManagement.statusPending' | translate }}
+      </span>
+      <span
+        *ngIf="dataItem.status === 'outdated'"
+        class="inline-flex items-center gap-1 text-amber-600"
+      >
+        <span class="k-icon k-i-warning"></span>
+        {{ 'components.filesManagement.statusOutdated' | translate }}
+      </span>
+      <span
+        *ngIf="dataItem.status === 'active'"
+        class="inline-flex items-center gap-1 text-green-700"
+      >
+        <span class="k-icon k-i-check"></span>
+        {{ 'components.filesManagement.statusActive' | translate }}
+      </span>
+    </ng-template>
+  </kendo-grid-column>
+  <kendo-grid-column
+    [title]="'common.actions' | translate"
+    [sortable]="false"
+    [width]="140"
+  >
+    <!-- Same actions as the file questions -->
+    <ng-template kendoGridCellTemplate let-dataItem>
+      <shared-file-item-actions
+        class="justify-end"
+        [file]="dataItem.file"
+        [outdated]="dataItem.outdated"
+        [showOutdatedWarning]="false"
+        [canDownload]="true"
+        [canOutdate]="dataItem.canOutdate"
+        [canRemove]="dataItem.canRemove"
+        [permanentRemoval]="dataItem.permanentRemoval"
+        [toggleOutdated]="dataItem.toggleOutdated"
+        [removeFile]="dataItem.removeFile"
+      ></shared-file-item-actions>
+    </ng-template>
+  </kendo-grid-column>
+  <ng-template kendoGridNoRecordsTemplate>
+    <shared-empty
+      class="m-auto"
+      icon="draft"
+      [title]="'components.filesManagement.empty' | translate"
+    ></shared-empty>
+  </ng-template>
+</kendo-grid>

libs/shared/src/lib/components/files-management-question/files-management-question.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}