From d7fd2b43299d57147ff0b12a34185cde29bf4ce2 Mon Sep 17 00:00:00 2001
From: Armand Bahi <armand.bahi@veremes.com>
Date: Tue, 15 Jan 2019 15:24:02 +0100
Subject: [PATCH] Upload de documents
---
.../component/file_picker/file_picker.css | 17 +-
.../component/file_picker/file_picker.html | 26 +++-
.../component/file_picker/file_picker.js | 147 +++++++++++++-----
.../externs/formReader/formReader.html | 12 +-
4 files changed, 149 insertions(+), 53 deletions(-)
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
index a03c5f80..22e32042 100644
--- 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
@@ -1,7 +1,7 @@
.file_picker .preview-images-zone {
width: 100%;
border: 1px solid #ddd;
- min-height: 180px;
+ min-height: 90px;
/* display: flex; */
padding: 5px 5px 0px 5px;
position: relative;
@@ -39,7 +39,6 @@
bottom: 0;
width: 100%;
text-align: center;
- /* margin-bottom: 10px; */
margin-bottom: calc(50% - 20px);
display: none;
}
@@ -57,6 +56,14 @@
display: none;
z-index: 100;
}
+.file_picker .preview-documents-zone > .preview-document > .document-cancel {
+ font-weight: bold;
+ margin-left: 50px;
+ cursor: pointer;
+ float: right;
+ margin-right: 65%;
+ display: none;
+}
.file_picker .preview-image:hover > .image-add,
.file_picker .preview-image:hover > .image-zone {
cursor: pointer;
@@ -66,6 +73,12 @@
.file_picker .preview-image:hover > .image-cancel {
display: block !important;
}
+.file_picker .preview-document:hover > .document-cancel {
+ display: inline !important;
+}
+.file_picker .preview-document:hover > .document-link {
+ text-decoration: underline;
+}
.file_picker .ui-sortable-helper {
width: 90px !important;
height: 90px !important;
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
index 74c36fce..18827747 100644
--- 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
@@ -8,7 +8,7 @@
<!-- 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 > 1}"
+ ng-class="{'preview-image-small' : aPreviewImages.length !== 1}"
class="preview-image preview-show-{{$index}}">
<div class="image-cancel" data-no="{{$index}}" ng-click="removeFile(image)">x</div>
<div class="image-zone"><img id="pro-img-{{$index}}" ng-src="{{image.src}}"></div>
@@ -22,16 +22,30 @@
</div>
</div>
<div ng-if="!field.displayOnly"
- ng-class="{'preview-image-small' : aPreviewImages.length > 1}"
+ ng-class="{'preview-image-small' : aPreviewImages.length !== 1}"
class="preview-image preview-show-{{$index}}">
<div class="image-add" ng-click="searchNewFile()"><span class="icon-plus"></span></div>
</div>
</div>
- <!-- Visioneuse nombre fichiers -->
- <div tabindex="500" class="form-control file-caption kv-fileinput-caption">
- <div ng-show="aFiles.length > 0" 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 ng-show="aFiles.length == 0" class="file-caption-name" title="7 fichiers sélectionné(s)"><span class="glyphicon glyphicon-file kv-caption-icon"></span> Aucun fichier disponible</div>
+ <!-- Visioneuse documents -->
+ <div ng-if="field.type === 'file_wsdata'" class="preview-documents-zone">
+ <div ng-repeat="document in aPreviewDocuments"
+ class="preview-document preview-show-{{$index}}">
+ <a class="document-link" href="javascript:void(0)" ng-click="downloadFile(document)">{{document.name}}</a>
+ <span class="document-cancel" data-no="{{$index}}" ng-click="removeFile(document)">x</span>
+ </div>
+ </div>
+
+ <!-- Fichiers à envoyer -->
+ <div ng-class="{'input-group input-file-xxs' : field.type === 'file_wsdata'}" ng-click="searchNewFile()">
+ <div tabindex="500" class="form-control file-caption kv-fileinput-caption">
+ <div ng-show="aFiles.length > 0" class="file-caption-name" title="7 fichiers sélectionné(s)"><span class="glyphicon glyphicon-file kv-caption-icon"></span> {{aFiles.length}} fichier(s)</div>
+ <div ng-show="aFiles.length == 0" class="file-caption-name" title="7 fichiers sélectionné(s)"><span class="glyphicon glyphicon-file kv-caption-icon"></span> Aucun fichier disponible</div>
+ </div>
+ <div ng-if="field.type === 'file_wsdata'" class="input-group-btn">
+ <div tabindex="500" class="btn btn-primary btn-file"><i class="glyphicon glyphicon-folder-open"></i> Ajouter…</div>
+ </div>
</div>
<!-- Bouton caché input -->
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
index a4f8d77f..ec460403 100644
--- 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
@@ -35,7 +35,10 @@ nsVitisComponent.FilePickerDirective = function ($timeout, $translate, propertie
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';
+ /**
+ * URL vers le dossier fliepicker
+ */
+ scope['folderUrl'] = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '') + "/" + sessionStorage["appEnv"] + '/javascript/externs/formReader/component/file_picker';
/**
* Fichiers à envoyer
@@ -47,10 +50,14 @@ nsVitisComponent.FilePickerDirective = function ($timeout, $translate, propertie
*/
scope['aPreviewImages'] = [];
+ /**
+ * Liste des URL des documents à afficher
+ */
+ scope['aPreviewDocuments'] = [];
+
/**
* Add the added files to scope.aFiles
* @param {type} event
- * @export
*/
scope['addFiles'] = function(event) {
var files = event['target']['files'];
@@ -63,9 +70,45 @@ nsVitisComponent.FilePickerDirective = function ($timeout, $translate, propertie
}
}
+ /**
+ * Download the given file
+ * @param {object} oFile
+ */
+ scope['downloadFile'] = function(oFile) {
+
+ var oBlob;
+ var sFileName = oFile['name'];
+
+ // Trouve le fichier correspondant
+ for (var i = 0; i < scope['aFiles'].length; i++) {
+ if(scope['aFiles'][i]['name'] === oFile['name']){
+ oBlob = scope['aFiles'][i];
+ }
+ }
+
+ // Télécharge le fichier
+ if (goog.isDefAndNotNull(oBlob)) {
+
+ // IE
+ if (window.navigator['msSaveOrOpenBlob']) {
+ window.navigator['msSaveOrOpenBlob'](oBlob, sFileName);
+ }
+ // Others
+ else {
+ var a = document.createElement("a");
+ var url = window.URL.createObjectURL(oBlob);
+ document.body.appendChild(a);
+ a.style = "display: none";
+ a.href = url;
+ a.download = sFileName;
+ a.click();
+ window.URL.revokeObjectURL(url);
+ }
+ }
+ }
+
/**
* Initialise l'élément bootstrap fileInput
- * @export
*/
scope['initBootstrapFileInputs'] = function() {
@@ -98,38 +141,44 @@ nsVitisComponent.FilePickerDirective = function ($timeout, $translate, propertie
}
/**
- * Init the images preview
- * @export
+ * Init the preview in scope.aPreviewImages or scope.aPreviewDocuments
*/
- scope['initImagesPreview'] = function() {
+ scope['initPreview'] = function() {
+
+ var sPreviewContainer = 'aPreviewDocuments';
+ if (scope['field']['type'] === 'image_wsdata') {
+ sPreviewContainer = 'aPreviewImages';
+ }
// Vide les images qui ont étés supprimées de aFiles
var bIsPresent;
- for (var i = scope['aPreviewImages'].length - 1; i >= 0; i--) {
+ for (var i = scope[sPreviewContainer].length - 1; i >= 0; i--) {
bIsPresent = false;
for (var ii = 0; ii < scope['aFiles'].length; ii++) {
if (!bIsPresent) {
- if(scope['aPreviewImages'][i]['name'] === scope['aFiles'][ii]['name']){
+ if(scope[sPreviewContainer][i]['name'] === scope['aFiles'][ii]['name']){
bIsPresent = true;
}
}
}
if (!bIsPresent) {
- scope['aPreviewImages'].splice(i, 1);
+ scope[sPreviewContainer].splice(i, 1);
}
}
// Ajoute les nouvelles images
- var file;
+ var oFile;
for (var i = 0; i < scope['aFiles'].length; i++) {
bIsPresent = false;
- file = scope['aFiles'][i];
+ oFile = scope['aFiles'][i];
- if (!file.type.match('image')) continue;
+ if (scope['field']['type'] === 'image_wsdata') {
+ if (!oFile.type.match('image')) continue;
+ }
// Vérifie que l'image ne soit pas déjà ajoutée
- for (var ii = 0; ii < scope['aPreviewImages'].length; ii++) {
- if(scope['aFiles'][i]['name'] === scope['aPreviewImages'][ii]['name']){
+ for (var ii = 0; ii < scope[sPreviewContainer].length; ii++) {
+ if(scope['aFiles'][i]['name'] === scope[sPreviewContainer][ii]['name']){
bIsPresent = true;
}
}
@@ -137,25 +186,29 @@ nsVitisComponent.FilePickerDirective = function ($timeout, $translate, propertie
// Ajoute les nouvelles images
if (!bIsPresent) {
var picReader = new FileReader();
- picReader.addEventListener('load', angular.bind(this, function (file, event) {
+ picReader.addEventListener('load', angular.bind(this, function (oFile, event) {
var picFile = event.target;
scope.$applyAsync(function(){
- scope['aPreviewImages'].push({
- 'name': file['name'],
+ scope[sPreviewContainer].push({
+ 'name': oFile['name'],
'src': picFile['result']
});
});
- }, file));
- picReader.readAsDataURL(file);
+ }, oFile));
+ picReader.readAsDataURL(oFile);
}
}
+
+ // Rafraichit la vue
+ scope.$applyAsync(function(){
+ scope[sPreviewContainer] = scope[sPreviewContainer];
+ });
}
/**
* 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;
@@ -170,28 +223,40 @@ nsVitisComponent.FilePickerDirective = function ($timeout, $translate, propertie
/**
* Remove the given file
* @param {object} oImage
- * @export
*/
scope['removeFile'] = function(oFile) {
- console.log("removeFile: ", oFile);
- for (var i = 0; i < scope['aFiles'].length; i++) {
- if(scope['aFiles'][i]['name'] === oFile['name']){
- scope['aFiles'].splice(i, 1);
- }
- }
+ bootbox['confirm']({
+ 'message': "Supprimer <b>" + oFile['name'] + "</b> ?",
+ 'buttons': {
+ 'confirm': {
+ 'label': 'Oui',
+ 'className': 'btn-danger'
+ },
+ 'cancel': {
+ 'label': 'Non',
+ 'className': 'btn-default'
+ }
+ },
+ 'callback': function (result) {
+ if (result) {
+ for (var i = 0; i < scope['aFiles'].length; i++) {
+ if(scope['aFiles'][i]['name'] === oFile['name']){
+ scope['aFiles'].splice(i, 1);
+ }
+ }
- // Affichage des images
- if (scope['field']['type'] === 'image_wsdata') {
- setTimeout(function () {
- scope['initImagesPreview']();
- });
- }
+ // Affichage des images
+ setTimeout(function () {
+ scope['initPreview']();
+ });
+ }
+ }
+ });
}
/**
* Show the finder to search no files to add
- * @export
*/
scope['searchNewFile'] = function() {
var oInput = $(element).find('#' + scope['field']['id']);
@@ -201,14 +266,14 @@ nsVitisComponent.FilePickerDirective = function ($timeout, $translate, propertie
/**
* Show the given image on a modal
* @param {object} oImage
- * @export
*/
scope['showImageModal'] = function(oImage) {
- var dialog = bootbox.dialog({
+ var dialog = bootbox['dialog']({
title: oImage['name'],
message: '<div class="modal-image-zone"><img src="' + oImage['src'] + '"></div>'
});
}
+
},
post: function (scope, element, attributes, controller, transcludeFn) {
$log.log("formReader.FilePickerDirective.post");
@@ -227,10 +292,8 @@ nsVitisComponent.FilePickerDirective = function ($timeout, $translate, propertie
// Ajoute les fichiers
scope['addFiles'](e);
- // Affichage des images
- if (scope['field']['type'] === 'image_wsdata') {
- scope['initImagesPreview']();
- }
+ // Affichage des images/documents dans l'espace de prévisualisation
+ scope['initPreview']();
// Set la nouvelle valeur de l'attibut
setTimeout(function () {
@@ -240,9 +303,7 @@ nsVitisComponent.FilePickerDirective = function ($timeout, $translate, propertie
});
// Initialise l'affichage des images
- if (scope['field']['type'] === 'image_wsdata') {
- scope['initImagesPreview']();
- }
+ scope['initPreview']();
}
};
}
diff --git a/src/vitis/client/javascript/externs/formReader/formReader.html b/src/vitis/client/javascript/externs/formReader/formReader.html
index 82e6b378..5b0593ae 100755
--- a/src/vitis/client/javascript/externs/formReader/formReader.html
+++ b/src/vitis/client/javascript/externs/formReader/formReader.html
@@ -490,14 +490,22 @@
</div>
<!-- File WS_Data -->
<div ng-switch-when="file_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>
<div>
<a ng-href="{{oFormValues[sFormDefinitionName][field.name]}}" download>{{getLinkFileName(oFormValues[sFormDefinitionName][field.name])}}</a>
</div>
<div ng-if="!field.displayOnly && !field.disabled">
<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> -->
</div>
<!-- UI Grid -->
<div ng-switch-when="ui_grid">
--
GitLab