diff --git a/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.css b/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.css
new file mode 100644
index 0000000000000000000000000000000000000000..a07fe94a91e0ab3802d1c778104f5f642795c7d3
--- /dev/null
+++ b/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.css
@@ -0,0 +1,72 @@
+.file_picker .preview-images-zone {
+ width: 100%;
+ border: 1px solid #ddd;
+ min-height: 180px;
+ /* display: flex; */
+ padding: 5px 5px 0px 5px;
+ position: relative;
+ overflow:auto;
+}
+.file_picker .preview-images-zone > .preview-image-small {
+ height: 90px !important;
+ width: 90px !important;
+}
+.file_picker .preview-images-zone > .preview-image {
+ height: 185px;
+ width: 185px;
+ position: relative;
+ margin-right: 5px;
+ float: left;
+ margin-bottom: 5px;
+}
+.file_picker .preview-images-zone > .preview-image > .image-zone {
+ width: 100%;
+ height: 100%;
+}
+.file_picker .preview-images-zone > .preview-image > .image-add {
+ text-align: center;
+ font-size: 30px;
+ padding-top: calc(50% - 20px);
+}
+.file_picker .preview-images-zone > .preview-image > .image-zone > img {
+ width: 100%;
+ height: 100%;
+}
+.file_picker .preview-images-zone > .preview-image > .tools-edit-image {
+ position: absolute;
+ z-index: 100;
+ color: #fff;
+ bottom: 0;
+ width: 100%;
+ text-align: center;
+ margin-bottom: 10px;
+ display: none;
+}
+.file_picker .preview-images-zone > .preview-image > .image-cancel {
+ font-size: 18px;
+ position: absolute;
+ top: 0;
+ right: 0;
+ font-weight: bold;
+ margin-right: 10px;
+ cursor: pointer;
+ display: none;
+ z-index: 100;
+}
+.file_picker .preview-image:hover > .image-add,
+.file_picker .preview-image:hover > .image-zone {
+ cursor: pointer;
+ opacity: .5;
+}
+.preview-image:hover > .tools-edit-image,
+.file_picker .preview-image:hover > .image-cancel {
+ display: block;
+}
+.file_picker .ui-sortable-helper {
+ width: 90px !important;
+ height: 90px !important;
+}
+
+.file_picker .container {
+ padding-top: 50px;
+}
diff --git a/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.html b/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.html
new file mode 100644
index 0000000000000000000000000000000000000000..99df493fc9ff47ee174c988e8186561d4e72c4de
--- /dev/null
+++ b/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.html
@@ -0,0 +1,39 @@
+
+<link rel="stylesheet" ng-href="{{ folderUrl }}/file_picker.css">
+
+<div class="file_picker">
+
+ <label for="{{:refresh:field.id}}" id="{{:refresh:field.id}}_label" class="control-label" data-translate="{{:refresh:field.label}}"></label>
+
+ <!-- Visioneuse Images -->
+ <div ng-if="field.type === 'image_wsdata'" class="preview-images-zone">
+ <div ng-repeat="image in aPreviewImages"
+ ng-class="{'preview-image-small' : aPreviewImages.length > 4}"
+ class="preview-image preview-show-{{$index}}">
+ <div class="image-cancel" data-no="{{$index}}">x</div>
+ <div class="image-zone"><img id="pro-img-{{$index}}" ng-src="{{image.src}}"></div>
+ <div class="tools-edit-image">
+ <a href="javascript:void(0)" data-no="{{$index}}" class="btn btn-light btn-edit-image">
+ <span class="ison-zoom-in"></span>
+ </a>
+ </div>
+ </div>
+ <div ng-if="!field.displayOnly"
+ ng-class="{'preview-image-small' : aPreviewImages.length > 4}"
+ class="preview-image preview-show-{{$index}}">
+ <div class="image-add" ng-click="searchNewFile()"><span class="icon-plus"></span></div>
+ </div>
+ </div>
+
+ <!-- Visioneuse fichiers -->
+ <div ng-show="aFiles.length > 0" tabindex="500" class="form-control file-caption kv-fileinput-caption">
+ <div class="file-caption-name" title="7 fichiers sélectionné(s)"><span class="glyphicon glyphicon-file kv-caption-icon"></span> {{aFiles.length}} fichier(s) à modifier</div>
+ </div>
+
+ <!-- Bouton caché input -->
+ <div class="hide"
+ ng-if="!field.displayOnly">
+ <input ng-if="!field.multiple" type="file" id="{{:refresh:field.id}}" class="file" name="{{:refresh:field.name}}" class="form-control" ng-required="field.required">
+ <input ng-if="field.multiple" type="file" id="{{:refresh:field.id}}" class="file" name="{{:refresh:field.name}}" class="form-control" ng-required="field.required" multiple>
+ </div>
+</div>
diff --git a/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.js b/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.js
new file mode 100644
index 0000000000000000000000000000000000000000..781f80451d9a560deb803c3bf5f68ba068add3a7
--- /dev/null
+++ b/src/vitis/client/javascript/externs/formReader/component/file_picker/file_picker.js
@@ -0,0 +1,226 @@
+/* global goog, ol, nsVitisComponent, vitisApp, formReader, bootbox */
+
+/**
+ * @author: Anthony Borghi, Armand Bahi
+ * @Description: Fichier contenant la classe nsVitisComponent.Map
+ * Permet d'instancier un composant OpenLayers3
+ */
+
+'use strict';
+
+goog.provide('nsVitisComponent.FilePicker');
+
+goog.require('formReader');
+goog.require('nsVitisComponent.Map');
+
+/**
+ * FilePicker Directive
+ * @param {type} $timeout
+ * @returns {nsVitisComponent.FilePickerDirective}
+ * @ngInject
+ */
+nsVitisComponent.FilePickerDirective = function ($timeout, $translate, propertiesSrvc, formReaderService, $log, $q) {
+ return {
+ restrict: 'A',
+ scope: {
+ 'field': '=appField',
+ 'oFormDefinition': '=appFormDef',
+ 'sFormDefinitionName': '=appFormDefName',
+ 'oFormValues': '=appFormVal'
+ },
+ // controller: 'AppFilePickerController',
+ controllerAs: 'ctrl',
+ templateUrl: window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '') + "/" + sessionStorage["appEnv"] + '/javascript/externs/formReader/component/file_picker/file_picker.html',
+ compile: function (element, attributes) {
+ return {
+ pre: function (scope, element, attributes, controller, transcludeFn) {
+ $log.log("formReader.FilePickerDirective.pre");
+
+ scope.folderUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '') + "/" + sessionStorage["appEnv"] + '/javascript/externs/formReader/component/file_picker';
+
+ /**
+ * Fichiers à envoyer
+ */
+ scope['aFiles'] = [];
+
+ /**
+ * Liste des URL des images à afficher
+ */
+ scope['aPreviewImages'] = [];
+
+ /**
+ * Add the added files to scope.aFiles
+ * @param {type} event
+ * @export
+ */
+ scope['addFiles'] = function(event) {
+ var files = event['target']['files'];
+ for (var i = 0; i < files.length; i++) {
+ if (scope['isFilePresent'](files[i])) {
+ console.error('file already present');
+ } else {
+ scope['aFiles'].push(files[i]);
+ }
+ }
+
+ console.log("scope['aFiles']: ", scope['aFiles']);
+ }
+
+ /**
+ * Initialise l'élément bootstrap fileInput
+ * @export
+ */
+ scope['initBootstrapFileInputs'] = function() {
+
+ var deferred = $q.defer();
+
+ if (!goog.isDefAndNotNull(scope["field"]["display_width"])) {
+ scope["field"]["display_width"] = "100%";
+ }
+ // Si sélection d'un fichier à uploader : sauve ses paramètres.
+ element[0].addEventListener("change", function () {
+ var oFileList = {
+ "aFiles": this.files
+ };
+ if (goog.isDefAndNotNull(scope["field"]["width"]) && goog.isDefAndNotNull(scope["field"]["height"])) {
+ oFileList["width"] = scope["field"]["width"];
+ oFileList["height"] = scope["field"]["height"];
+ }
+
+ scope["oFormValues"][scope["sFormDefinitionName"]][element[0].name] = oFileList;
+ }, false);
+ // Passage de paramètres de définition du champ d'upload ?
+ // var oOptions = {
+ // "showPreview": false,
+ // "showRemove": false,
+ // "showUpload": false,
+ // "allowedFileTypes": ['image']
+ // };
+ // oOptions["mainClass"] = "input-file-" + scope["oFormDefinition"][scope["sFormDefinitionName"]]["input_size"];
+ //
+ // // Langue.
+ // if (propertiesSrvc["language"] != "en")
+ // oOptions["language"] = propertiesSrvc["language"];
+
+ // Intégration du plugin "bootstrap-fileinput" dans tous les champ d'upload de fichiers.
+ setTimeout(function () {
+ var oInput = $(element).find('#' + scope['field']['id']);
+ // $(oInput)["fileinput"](oOptions);
+ deferred.resolve(oInput);
+ });
+
+ return deferred.promise;
+ }
+
+ /**
+ * Init the images preview
+ * @export
+ */
+ scope['initImagesPreview'] = function() {
+
+ scope['aPreviewImages'] = [];
+
+ var file;
+ for (var i = 0; i < scope['aFiles'].length; i++) {
+ file = scope['aFiles'][i];
+
+ if (!file.type.match('image')) continue;
+
+ var picReader = new FileReader();
+ picReader.addEventListener('load', angular.bind(this, function (file, event) {
+ var picFile = event.target;
+ scope.$applyAsync(function(){
+ scope['aPreviewImages'].push({
+ 'name': file['name'],
+ 'src': picFile['result']
+ });
+ });
+ }, file));
+
+ picReader.readAsDataURL(file);
+ }
+ }
+
+ /**
+ * Test if a file is already present
+ * @param {object} oFile file to test
+ * @return {boolean} true if the file is already present
+ * @export
+ */
+ scope['isFilePresent'] = function(oFile) {
+ var bIsFilePresent = false;
+ for (var i = 0; i < scope['aFiles'].length; i++) {
+ if (scope['aFiles'][i]['name'] === oFile['name']) {
+ bIsFilePresent = true;
+ }
+ }
+ return bIsFilePresent;
+ }
+
+ /**
+ * Show the finder to search no files to add
+ * @export
+ */
+ scope['searchNewFile'] = function() {
+ var oInput = $(element).find('#' + scope['field']['id']);
+ $(oInput).click();
+ }
+ },
+ post: function (scope, element, attributes, controller, transcludeFn) {
+ $log.log("formReader.FilePickerDirective.post");
+
+ console.log("field: ", scope['field']);
+ console.log("oFormDefinition: ", scope['oFormDefinition']);
+ console.log("sFormDefinitionName: ", scope['sFormDefinitionName']);
+ console.log("oFormValues: ", scope['oFormValues']);
+
+ // Initialise l'élément bootstrap fileInput
+ scope['initBootstrapFileInputs']().then(function(oInput) {
+
+ // Écoute les changements pour afficher les images dans la liste
+ $(oInput).change(function(e){
+
+ // Ajoute les fichiers
+ scope['addFiles'](e);
+
+ // Affichage des images
+ if (scope['field']['type'] === 'image_wsdata') {
+ scope['initImagesPreview']();
+ }
+
+ // Set la nouvelle valeur de l'attibut
+ setTimeout(function () {
+ oInput[0]['files_vitis'] = scope['aFiles'];
+ });
+ });
+ });
+
+ // Initialise l'affichage des images
+ if (scope['field']['type'] === 'image_wsdata') {
+ scope['initImagesPreview']();
+ }
+ }
+ };
+ }
+ };
+};
+formReader.module.directive('appFilePicker', nsVitisComponent.FilePickerDirective);
+
+// /**
+// * FilePicker Controller
+// * @param {type} $scope
+// * @param {type} $log
+// * @returns {nsVitisComponent.FilePickerController}
+// * @ngInject
+// */
+// nsVitisComponent.FilePickerController = function ($scope, $log) {
+// $log.info("FilePickerController");
+// var this_ = this;
+//
+// this.$log_ = $log;
+// this.$scope_ = $scope;
+//
+// console.log("$scope: ", $scope);
+//
+// };
+// formReader.module.controller('AppFilePickerController', nsVitisComponent.FilePickerController);
diff --git a/src/vitis/client/javascript/externs/formReader/formReader.html b/src/vitis/client/javascript/externs/formReader/formReader.html
index bec175d509bb7cc60b97fc19e66fa200af6d4c44..82e6b378dcf08fd01341ae116a0f000f9604d668 100755
--- a/src/vitis/client/javascript/externs/formReader/formReader.html
+++ b/src/vitis/client/javascript/externs/formReader/formReader.html
@@ -368,14 +368,28 @@
</div>
<!-- image ws_data -->
<div ng-switch-when="image_wsdata">
- <label for="{{:refresh:field.id}}" id="{{:refresh:field.id}}_label" class="control-label" data-translate="{{:refresh:field.label}}"></label>
+
+ <div id="{{:refresh:field.id}}_image_picker"
+ data-app-file-picker=""
+ data-app-field="field"
+ data-app-form-def="oFormDefinition"
+ data-app-form-def-name="sFormDefinitionName"
+ data-app-form-val="oFormValues"></div>
+
+ <!-- <label for="{{:refresh:field.id}}" id="{{:refresh:field.id}}_label" class="control-label" data-translate="{{:refresh:field.label}}"></label>
+ <input ng-if="!field.multiple" data-app-form-field-specific-params="" type="file" id="{{:refresh:field.id}}" class="file" name="{{:refresh:field.name}}" class="form-control" ng-required="field.required">
+ <input ng-if="field.multiple" data-app-form-field-specific-params="" type="file" id="{{:refresh:field.id}}" class="file" name="{{:refresh:field.name}}" class="form-control" ng-required="field.required" multiple> -->
+
+
+
+ <!-- <label for="{{:refresh:field.id}}" id="{{:refresh:field.id}}_label" class="control-label" data-translate="{{:refresh:field.label}}"></label> -->
<!--Si l'image n'existe pas-->
- <div ng-if="!field.displayOnly" ng-show="!oFormValues[sFormDefinitionName][field.name].length > 0">
+ <!-- <div ng-if="!field.displayOnly" ng-show="!oFormValues[sFormDefinitionName][field.name].length > 0">
<input ng-if="!field.multiple" data-app-form-field-specific-params="" type="file" id="{{:refresh:field.id}}" class="file" name="{{:refresh:field.name}}" class="form-control" ng-required="field.required">
<input ng-if="field.multiple" data-app-form-field-specific-params="" type="file" id="{{:refresh:field.id}}" class="file" name="{{:refresh:field.name}}" class="form-control" ng-required="field.required" multiple>
- </div>
+ </div> -->
<!--Si l'image existe-->
- <div ng-show="oFormValues[sFormDefinitionName][field.name].length > 0">
+ <!-- <div ng-show="oFormValues[sFormDefinitionName][field.name].length > 0">
<img id="{{:refresh:field.id}}_img" ng-src="{{oFormValues[sFormDefinitionName][field.name]}}" alt="image" class="img-responsive" width="{{field.display_width}}"/>
<div ng-if="!field.displayOnly">
<div style="float: left; width:95%">
@@ -386,7 +400,9 @@
<a ng-href="{{oFormValues[sFormDefinitionName][field.name]}}" download class="btn btn-xs btn-success"><span class="glyphicon glyphicon-download"></span></a>
</div>
</div>
- </div>
+ </div> -->
+
+
</div>
<!-- Boutons -->
<div ng-switch-when="button">
diff --git a/src/vitis/client/javascript/externs/formReader/formReaderDrtv.js b/src/vitis/client/javascript/externs/formReader/formReaderDrtv.js
index 7d3a99d1e45dde528478d33d0d8d8591a5ff6162..49bc4b74cfe3be5fcf16eaf31b3f9ea51fe80594 100644
--- a/src/vitis/client/javascript/externs/formReader/formReaderDrtv.js
+++ b/src/vitis/client/javascript/externs/formReader/formReaderDrtv.js
@@ -7,6 +7,7 @@
*/
goog.provide('formReader.directive.formReaderDirective');
goog.require('nsVitisComponent.MapWorkbench');
+goog.require('nsVitisComponent.FilePicker');
goog.require('formReader');
/**
@@ -916,46 +917,46 @@ formReader.appFormFieldSpecificParamsDrtv = function ($timeout, $translate, prop
// Intégration du plugin "bootstrap-fileinput" dans tous les champ d'upload de fichiers.
$(element)["fileinput"](oOptions);
break;
- case 'image_wsdata':
-
- // Évite la multiplication des champs depuis le studio
- // quand on coche/décoche "Multiple documents"
- if ($(element).parent().find('.file-input').length > 0) {
- $(element).remove();
- break;
- }
-
- if (!goog.isDefAndNotNull(scope["field"]["display_width"])) {
- scope["field"]["display_width"] = "100%";
- }
- // Si sélection d'un fichier à uploader : sauve ses paramètres.
- element[0].addEventListener("change", function () {
- var oFileList = {
- "aFiles": this.files
- };
- if (goog.isDefAndNotNull(scope["field"]["width"]) && goog.isDefAndNotNull(scope["field"]["height"])) {
- oFileList["width"] = scope["field"]["width"];
- oFileList["height"] = scope["field"]["height"];
- }
-
- scope["oFormValues"][scope["sFormDefinitionName"]][element[0].name] = oFileList;
- }, false);
- // Passage de paramètres de définition du champ d'upload ?
- var oOptions = {
- "showPreview": false,
- "showRemove": false,
- "showUpload": false,
- "allowedFileTypes": ['image']
- };
- oOptions["mainClass"] = "input-file-" + scope["oFormDefinition"][scope["sFormDefinitionName"]]["input_size"];
-
- // Langue.
- if (propertiesSrvc["language"] != "en")
- oOptions["language"] = propertiesSrvc["language"];
-
- // Intégration du plugin "bootstrap-fileinput" dans tous les champ d'upload de fichiers.
- $(element)["fileinput"](oOptions);
- break;
+ // case 'image_wsdata':
+ //
+ // // Évite la multiplication des champs depuis le studio
+ // // quand on coche/décoche "Multiple documents"
+ // if ($(element).parent().find('.file-input').length > 0) {
+ // $(element).remove();
+ // break;
+ // }
+ //
+ // if (!goog.isDefAndNotNull(scope["field"]["display_width"])) {
+ // scope["field"]["display_width"] = "100%";
+ // }
+ // // Si sélection d'un fichier à uploader : sauve ses paramètres.
+ // element[0].addEventListener("change", function () {
+ // var oFileList = {
+ // "aFiles": this.files
+ // };
+ // if (goog.isDefAndNotNull(scope["field"]["width"]) && goog.isDefAndNotNull(scope["field"]["height"])) {
+ // oFileList["width"] = scope["field"]["width"];
+ // oFileList["height"] = scope["field"]["height"];
+ // }
+ //
+ // scope["oFormValues"][scope["sFormDefinitionName"]][element[0].name] = oFileList;
+ // }, false);
+ // // Passage de paramètres de définition du champ d'upload ?
+ // var oOptions = {
+ // "showPreview": false,
+ // "showRemove": false,
+ // "showUpload": false,
+ // "allowedFileTypes": ['image']
+ // };
+ // oOptions["mainClass"] = "input-file-" + scope["oFormDefinition"][scope["sFormDefinitionName"]]["input_size"];
+ //
+ // // Langue.
+ // if (propertiesSrvc["language"] != "en")
+ // oOptions["language"] = propertiesSrvc["language"];
+ //
+ // // Intégration du plugin "bootstrap-fileinput" dans tous les champ d'upload de fichiers.
+ // $(element)["fileinput"](oOptions);
+ // break;
case 'email':
scope["field"]["pattern"] = "^(([a-zA-Z]|[0-9])|([-]|[_]|[.]))+[@](([a-zA-Z]|[0-9])|([-]|[_]|[.])){2,63}[.](([a-zA-Z0-9]){2,63})+$";
// Utile dans le studio pour mémoriser la patern
diff --git a/src/vitis/client/modules/vitis/forms/user/user_vitis_user.json b/src/vitis/client/modules/vitis/forms/user/user_vitis_user.json
index a5dacd7e5ccd46a776a8381a46c298adce8ab53f..f5b906f14e010effaa5637ebb3275aa7155d3aa2 100644
--- a/src/vitis/client/modules/vitis/forms/user/user_vitis_user.json
+++ b/src/vitis/client/modules/vitis/forms/user/user_vitis_user.json
@@ -49,6 +49,52 @@
}
]
},
+ {
+ "fields":[
+ {
+ "type":"image_wsdata",
+ "name":"image",
+ "label":"Image",
+ "required":false,
+ "pattern":"",
+ "nb_cols":12,
+ "id":"Element_0_11_1",
+ "display_width":"100%",
+ "multipleFiles":true,
+ "multiple":true
+ }
+ ]
+ },
+ {
+ "fields":[
+ {
+ "type":"image_wsdata",
+ "name":"image_bis",
+ "label":"Imabe Bis",
+ "required":false,
+ "pattern":"",
+ "nb_cols":12,
+ "id":"Element_2_9_1",
+ "display_width":"100%",
+ "multiple":true
+ }
+ ]
+ },
+ {
+ "fields":[
+ {
+ "type":"file_wsdata",
+ "name":"rapport_doc",
+ "nb_cols":12,
+ "id":"Element_0_12_1",
+ "label":"Rapport",
+ "default_value":"",
+ "displayOnly":false,
+ "multipleFiles":true,
+ "multiple":true
+ }
+ ]
+ },
{
"fields": [
{