feature/IVYPORTAL-17851-Upload-document-should-display-supporte… (#1225)

* feature/IVYPORTAL-17851-CODED-Upload-document-should-display-supported-file-types _ adding support file type depend on variable _ adapt UI _ Handle error _ change cms
axonivy-market · Nov 22, 2024 · 9fad70a · 9fad70a
1 parent 679b31a
commit 9fad70a
Show file tree

Hide file tree

Showing 12 changed files with 171 additions and 53 deletions.
diff --git a/AxonIvyPortal/portal/cms/cms.yaml b/AxonIvyPortal/portal/cms/cms.yaml
@@ -873,7 +873,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     toUser: User
     userSelectionWatermark: Please select a user...
   taskDetails:
-    addDocumentHelpText: To upload files, drag & drop or select files
+    addDocumentHelpText: 'To upload files, drag & drop or '
     addNoteHelpText: Write your text here.
     afterEscalation: After escalation
     businessCase: Business Case

diff --git a/AxonIvyPortal/portal/cms/cms_de.yaml b/AxonIvyPortal/portal/cms/cms_de.yaml
@@ -416,6 +416,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     addDocument: Dokument hinzufügen
     addNote: Notiz hinzufügen
     allCategories: Alle Kategorien
+    allTypes: Alle Typen
     allowPng: Nur das png Format wird unterstützt
     apply: Anwenden
     at: am
@@ -553,6 +554,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     second: Sekunde
     seconds: Sekunden
     seeDetail: Details anzeigen
+    select: Auswählen
     selectAll: Alle selektieren
     selectUsers: Benutzer auswählen
     selectedDay: '{0} ausgewählte Tag(e)'
@@ -584,6 +586,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     typeAdmin: Alle Administratoren
     typeAllUsers: Alle Benutzer
     typeOnlyMe: Nur für mich
+    uploadHere: Hier hochladen
     uploadOneHere: Auswählen
     user: '{0} Benutzer'
     users: Benutzer
@@ -1103,7 +1106,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     toUser: Benutzer
     userSelectionWatermark: Bitte wählen Sie einen Benutzer aus...
   taskDetails:
-    addDocumentHelpText: Zum Hochladen Dateien per Drag & Drop hier ablegen oder Dateien auswählen
+    addDocumentHelpText: 'Zum Hochladen Dateien per Drag & Drop hier ablegen oder '
     addNoteHelpText: Schreiben Sie hier Ihren Text
     afterEscalation: Nach Eskalation
     businessCase: Vorgang
@@ -1121,6 +1124,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     processingTime: Bearbeitungszeit
     setDelayTimestamp: '{0} ({1}) hat die Verzügerungszeit des Tasks #{2} auf {3} gesetzt.'
     setExpiryActivatorAndTimeNotes: '{0} und weisen Sie {1} als Aktivator für die Aufgabeneskalation zu'
+    supportFileTypes: 'Unterstützte Dateitypen für Uploads: {0}'
     taskCategory: Aufgabenkategorie
     taskExpiryDisable: Es kann keine Ablaufzeit gesetzt werden, da diese Aufgabe keine Eskalationslogik enthält.
     technicalCase: Technischer Vorgang

diff --git a/AxonIvyPortal/portal/cms/cms_en.yaml b/AxonIvyPortal/portal/cms/cms_en.yaml
@@ -415,6 +415,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     addDocument: Add document
     addNote: Add note
     allCategories: All Categories
+    allTypes: All types
     allowPng: Only png types allowed
     apply: Apply
     at: at
@@ -552,6 +553,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     second: second
     seconds: seconds
     seeDetail: See details
+    select: Select
     selectAll: Select All
     selectUsers: Select user(s)
     selectedDay: '{0} selected day(s)'
@@ -583,6 +585,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     typeAdmin: All administrators
     typeAllUsers: All users
     typeOnlyMe: Only me
+    uploadHere: Upload here
     uploadOneHere: Upload one here
     user: '{0} user'
     users: Users
@@ -1105,7 +1108,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     toUser: User
     userSelectionWatermark: Please select a user...
   taskDetails:
-    addDocumentHelpText: To upload files, drag & drop or select files
+    addDocumentHelpText: 'To upload files, drag & drop or '
     addNoteHelpText: Write your text here.
     afterEscalation: After escalation
     businessCase: Business Case
@@ -1123,6 +1126,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     processingTime: Processing Time
     setDelayTimestamp: '{0} ({1}) has set delay time to task #{2} to {3}'
     setExpiryActivatorAndTimeNotes: '{0} and assign {1} as the task escalation activator'
+    supportFileTypes: ' Upload file type supported: {0}'
     taskCategory: Task Category
     taskExpiryDisable: This task does not contain any escalation handling logic, therefore no expiry time can be set.
     technicalCase: Technical Case

diff --git a/AxonIvyPortal/portal/cms/cms_es.yaml b/AxonIvyPortal/portal/cms/cms_es.yaml
@@ -417,6 +417,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     addDocument: Agregar documento
     addNote: Agregar nota
     allCategories: Todas las categorias
+    allTypes: Todos los tipos
     allowPng: Solo se permiten los tipos png
     apply: Aplicar
     at: en
@@ -554,6 +555,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     second: segundo
     seconds: segundos
     seeDetail: Mostrar detalles
+    select: Seleccionar
     selectAll: Seleccionar todo
     selectUsers: Seleccione usuario(s)
     selectedDay: '{0} Día(s) selecionados'
@@ -585,6 +587,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     typeAdmin: Todos los administradores
     typeAllUsers: Todos los usuarios
     typeOnlyMe: Solo yo
+    uploadHere: Cargue aquí
     uploadOneHere: Seleccionar
     user: '{0} usuario'
     users: Usuarios
@@ -1102,7 +1105,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     toUser: Usuario
     userSelectionWatermark: Por favor seleccione un usuario...
   taskDetails:
-    addDocumentHelpText: Para cargar archivos, arrastrar y soltar o seleccionar archivos
+    addDocumentHelpText: 'Para cargar archivos, arrastrar y soltar o '
     addNoteHelpText: Escriba su texto aquí.
     afterEscalation: Después de la escalada
     businessCase: Caso comercial
@@ -1120,6 +1123,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     processingTime: Tiempo de procesado
     setDelayTimestamp: '{0} ({1}) Ha modificado el tiempo de demora para la tarea #{2} a {3}'
     setExpiryActivatorAndTimeNotes: '{0} y asignar {1} como el usuario de la tarea escalada'
+    supportFileTypes: 'Tipos de archivos admitidos para cargar: {0}'
     taskCategory: Categoría de tarea
     taskExpiryDisable: Esta tarea no tiene manejo lógico de escalado, por lo tanto no se puede establecer el tiempo de expiración.
     technicalCase: Caso técnico

diff --git a/AxonIvyPortal/portal/cms/cms_fr.yaml b/AxonIvyPortal/portal/cms/cms_fr.yaml
@@ -414,6 +414,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     addDocument: Ajouter un document
     addNote: Ajouter une note
     allCategories: Toutes les catégories
+    allTypes: Tous les types
     allowPng: Seulement les types .png autorisés
     apply: Utiliser
     at: le
@@ -551,6 +552,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     second: seconde
     seconds: secondes
     seeDetail: Afficher les détails
+    select: Sélectionner
     selectAll: Sélectionner tout
     selectUsers: Sélectionnez un ou plusieurs utilisateurs
     selectedDay: '{0} jour(s) sélectionné(s)'
@@ -582,6 +584,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     typeAdmin: Tous les administrateurs
     typeAllUsers: Tous les utilisateurs
     typeOnlyMe: Seulement pour moi
+    uploadHere: Téléchargez ici
     uploadOneHere: Téléchargez-en un ici
     user: '{0} utilisateur'
     users: Utilisateurs
@@ -1100,7 +1103,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     toUser: Utilisateur
     userSelectionWatermark: Veuillez sélectionner un utilisateur…
   taskDetails:
-    addDocumentHelpText: Pour ajouter des fichiers, glissez-les ou sélectionnez-les
+    addDocumentHelpText: 'Pour ajouter des fichiers, glissez-les ou '
     addNoteHelpText: Ecrivez votre texte ici
     afterEscalation: Après escalade
     businessCase: Dossier
@@ -1118,6 +1121,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     processingTime: Durée de traitement
     setDelayTimestamp: '{0} ({1}) a fixé le délai d''attente de la tâche #{2} à {3}'
     setExpiryActivatorAndTimeNotes: '{0} et assigner {1} comme activateur d''escalade de tâches'
+    supportFileTypes: 'Types de fichiers pris en charge pour le téléchargement : {0}'
     taskCategory: Catégorie de tâche
     taskExpiryDisable: Cette tâche ne contient pas de logique d'escalade. Aucune période d'expiration ne peut donc être définie.
     technicalCase: Dossier technique

diff --git a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/bean/MasterDataBean.java b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/bean/MasterDataBean.java
@@ -2,12 +2,14 @@
 
 import java.io.Serializable;
 import java.util.Arrays;
+import java.util.List;
 
 import javax.faces.application.FacesMessage;
 import javax.faces.bean.ManagedBean;
 import javax.faces.bean.SessionScoped;
 import javax.faces.context.FacesContext;
 
+import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.io.FileUtils;
 import org.apache.commons.lang.BooleanUtils;
 import org.primefaces.PrimeFaces;
@@ -23,6 +25,7 @@
 import ch.ivy.addon.portalkit.ivydata.service.impl.LanguageService;
 import ch.ivy.addon.portalkit.masterdata.AwesomeIcon;
 import ch.ivy.addon.portalkit.masterdata.MasterData;
+import ch.ivy.addon.portalkit.service.CaseDocumentService;
 import ch.ivy.addon.portalkit.util.GrowlMessageUtils;
 import ch.ivy.addon.portalkit.util.SecurityServiceUtils;
 import ch.ivyteam.ivy.environment.Ivy;
@@ -125,4 +128,12 @@ public String getApplicationName() {
   public String getUserLanguage() {
     return LanguageService.getInstance().getUserLanguage();
   }
+
+  public String getAllowedUploadFileType() {
+    List<String> extensionList = CaseDocumentService.getAllowedUploadFileType();
+    if (CollectionUtils.isEmpty(extensionList)) {
+      return Ivy.cms().co("/ch.ivy.addon.portalkit.ui.jsf/common/allTypes");
+    } else
+      return String.join(", ", extensionList);
+  }
 }
diff --git a/...al/portal/src_hd/ch/ivy/addon/portalkit/component/CaseItemDocument/CaseItemDocument.xhtml b/...al/portal/src_hd/ch/ivy/addon/portalkit/component/CaseItemDocument/CaseItemDocument.xhtml
@@ -103,30 +103,59 @@
       </div>
     </h:form>
   </div>
-
-  <p:dialog id="document-upload-dialog" widgetVar="document-upload-dialog" appendTo="@(body)"
-    header="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/addDocument')}" modal="true" resizable="false"
-    showEffect="fade" hideEffect="fade" styleClass="case-upload-dialog" dynamic="true" fitViewport="true"
-    responsive="true">
-    <h:form id="document-upload-form">
-      <p:messages id="upload-messages" />
-      <h:outputText value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/caseDetails/addDocumentHelpText')}" />
-      <p:fileUpload styleClass="document-upload" id="document-upload-panel" listener="#{logic.uploadDocument}"
-        chooseIcon="#{visibilityBean.generateButtonIcon('si si-add-small')}"
-        mode="advanced" dragDropSupport="true" multiple="true"
-        update="#{cc.clientId}:document-upload-form:upload-messages #{cc.attrs.componentToUpdate} #{cc.clientId}:case-document-form"
-        label="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/select')}" auto="true"
-        invalidSizeMessage="#{masterDataBean.getFileUploadInvalidSizeMessage()}"
-        sizeLimit="#{masterDataBean.fileUploadSizeLimit}" oncomplete="handleCaseDetailsTable()"/>
-    </h:form>
-    <f:facet name="footer">
-      <p:commandButton id="document-upload-close-command" type="button"
-        icon="#{visibilityBean.generateButtonIcon('si si-remove')}"
-        value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/close')}"
-        onclick="PF('document-upload-dialog').hide();" />
-    </f:facet>
-    <p:ajax event="close" global="false" listener="#{logic.resetDataUploadDialog()}"
-      update="#{cc.clientId}:document-upload-form:upload-messages" />
+
+    <p:dialog id="document-upload-dialog"
+    widgetVar="document-upload-dialog" appendTo="@(body)" dynamic="true"
+    modal="true" resizable="false" showEffect="fade" hideEffect="fade" fitViewport="true"
+    header="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/addDocument')}"
+    closeOnEscape="true" responsive="true" closable="true"
+    width="450px">
+    <div class="ui-g">
+      <h:form id="document-upload-form" style="width: 450px">
+      <div class="w-full">
+          <p:messages id="upload-messages" />
+          <div style="display: none;" id="error-message" />
+        </div>
+       <div class="w-full">
+        <h6 class="import-header-title">
+        <h:outputText value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/taskDetails/supportFileTypes',[masterDataBean.allowedUploadFileType])}" />
+        </h6>
+        </div>
+        <div class="w-full">
+          <p:fileUpload id="document-upload-panel"
+            listener="#{logic.uploadDocument}" mode="advanced"
+            chooseIcon="#{visibilityBean.generateButtonIcon('si si-add-small')}"
+            style="display: none;" dragDropSupport="true"
+            label="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/select')}"
+            auto="true" multiple="true"
+            sizeLimit="#{masterDataBean.fileUploadSizeLimit}"
+            invalidSizeMessage="#{masterDataBean.getFileUploadInvalidSizeMessage()}"
+            update="#{cc.clientId}:document-upload-form:upload-messages #{cc.attrs.componentToUpdate} #{cc.clientId}:case-document-form @form"
+            oncomplete="handleCaseDetailsTable()"
+            onvalidationfailure="handleUploadFileFail();"
+            dropZone="document-upload-file-panel" widgetVar="documentUpload" />
+        </div>
+        <div class="ui-g-12">
+          <p:outputPanel id="document-upload-file-panel" styleClass="ui-document-upload-file-panel">
+            <span class="ui-document-upload-file-label"> 
+            <i class="si si-file-code-upload-1" id="ui-document-upload-file-icon" />
+              <p:outputLabel value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/taskDetails/addDocumentHelpText')}">
+                <p:link value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/uploadHere')}"
+                  onclick="PF('documentUpload').show();return false" />
+              </p:outputLabel>
+            </span>
+          </p:outputPanel>
+        </div>
+      </h:form>
+      <div class="ui-g-12">
+        <p:commandButton id="document-upload-close-command" type="button"
+          value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/close')}"
+          onclick="PF('document-upload-dialog').hide();" styleClass="w-full" />
+      </div>
+      <p:ajax event="close" global="false"
+        listener="#{logic.resetDataUploadDialog()}"
+        update="#{cc.clientId}:document-upload-form:upload-messages @this" />
+    </div>
   </p:dialog>
 
   <ui:decorate template="/layouts/decorator/portal-dialog-with-icon.xhtml">
@@ -147,6 +176,14 @@
         oncomplete="PF('document-deletion-dialog').hide();handleCaseDetailsTable();" />
     </ui:define>
   </ui:decorate>
-
+  <script type="text/javascript">
+    function handleUploadFileFail() {
+      let errorMessageElement = document.getElementById('error-message');
+      let uploadError = document.getElementsByClassName('ui-messages ui-widget ui-helper-hidden ui-fileupload-messages');
+      let uploadErrorElement = uploadError[0];
+      errorMessageElement.style.display = 'block';
+      errorMessageElement.appendChild(uploadErrorElement);
+    }
+    </script>
 </cc:implementation>
 </html>