mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
tentative to add asyncupload into modal
This commit is contained in:
nobohan
parent
154f976762
commit
5f71b46bb7
@ -16,8 +16,8 @@
|
||||
<div class="input-group mb-3">
|
||||
<select class="form-select" v-model="template">
|
||||
<option disabled selected value="">{{ $t('choose_a_template') }}</option>
|
||||
<template v-for="t in templates">
|
||||
<option v-bind:value="t.id">{{ t.name.fr || 'Aucun nom défini' }}</option>
|
||||
<template v-for="t in templates" :key="t.id">
|
||||
<option :value="t.id" >{{ t.name.fr || 'Aucun nom défini' }}</option>
|
||||
</template>
|
||||
</select>
|
||||
<a v-if="canGenerate" class="btn btn-update btn-sm change-icon" :href="buildUrlGenerate" @click.prevent="clickGenerate($event, buildUrlGenerate)"><i class="fa fa-fw fa-cog"></i></a>
|
||||
|
||||
@ -4,12 +4,12 @@ var initializeDownload = require('./downloader.js');
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
* define a dropzone for chill usage
|
||||
*
|
||||
* An event is launched when dropzone is initialize, allowing to customize events
|
||||
*
|
||||
* An event is launched when dropzone is initialize, allowing to customize events
|
||||
* on dropzone :
|
||||
*
|
||||
*
|
||||
* ```
|
||||
* window.addEventListener("chill_dropzone_initialized", (e) => {
|
||||
* // do something with dropzone:
|
||||
@ -18,7 +18,7 @@ var initializeDownload = require('./downloader.js');
|
||||
* });
|
||||
* });
|
||||
* ```
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
// load css
|
||||
@ -37,7 +37,6 @@ var keyDefinition = {
|
||||
|
||||
var searchForZones = function(root) {
|
||||
var zones = root.querySelectorAll('div[data-stored-object]');
|
||||
|
||||
for(let i=0; i < zones.length; i++) {
|
||||
initialize(zones[i]);
|
||||
}
|
||||
@ -48,32 +47,32 @@ var getUploadUrl = function(zoneData, files) {
|
||||
generateTempUrlPost = zoneData.zone.querySelector('input[data-async-file-upload]').dataset.generateTempUrlPost,
|
||||
oReq = new XMLHttpRequest()
|
||||
;
|
||||
|
||||
|
||||
// arg, dropzone, you cannot handle async upload...
|
||||
oReq.open("GET", generateTempUrlPost, false);
|
||||
oReq.send();
|
||||
|
||||
|
||||
if (oReq.readyState !== XMLHttpRequest.DONE) {
|
||||
throw new Error("Error while fetching url to upload");
|
||||
}
|
||||
|
||||
|
||||
zoneData.params = JSON.parse(oReq.responseText);
|
||||
|
||||
|
||||
return zoneData.params.url;
|
||||
};
|
||||
|
||||
var encryptFile = function(originalFile, zoneData, done) {
|
||||
var
|
||||
var
|
||||
iv = crypto.getRandomValues(new Uint8Array(16)),
|
||||
reader = new FileReader(),
|
||||
jsKey, rawKey
|
||||
;
|
||||
|
||||
|
||||
zoneData.originalType = originalFile.type;
|
||||
|
||||
|
||||
reader.onload = e => {
|
||||
window.crypto.subtle.generateKey(keyDefinition, true, [ "encrypt", "decrypt" ])
|
||||
.then(key => {
|
||||
.then(key => {
|
||||
jsKey = key;
|
||||
|
||||
// we register the key somwhere
|
||||
@ -90,34 +89,34 @@ var encryptFile = function(originalFile, zoneData, done) {
|
||||
rawKey: rawKey,
|
||||
iv: iv
|
||||
};
|
||||
|
||||
|
||||
done(new File( [ encrypted ], zoneData.suffix));
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
reader.readAsArrayBuffer(originalFile);
|
||||
};
|
||||
|
||||
var addBelowButton = (btn, zone, zoneData) => {
|
||||
let
|
||||
belowZone = zone.querySelector('.chill-dropzone__below-zone');
|
||||
|
||||
|
||||
if (belowZone === null) {
|
||||
belowZone = document.createElement('div');
|
||||
belowZone.classList.add('chill-dropzone__below-zone');
|
||||
zone.appendChild(belowZone);
|
||||
}
|
||||
|
||||
|
||||
belowZone.appendChild(btn);
|
||||
};
|
||||
|
||||
var createZone = (zone, zoneData) => {
|
||||
var
|
||||
var
|
||||
created = document.createElement('div'),
|
||||
initMessage = document.createElement('div'),
|
||||
initContent = zone.dataset.labelInitMessage,
|
||||
dropzoneI;
|
||||
|
||||
|
||||
created.classList.add('dropzone');
|
||||
initMessage.classList.add('dz-message');
|
||||
initMessage.appendChild(document.createTextNode(initContent));
|
||||
@ -142,7 +141,7 @@ var createZone = (zone, zoneData) => {
|
||||
return zoneData.suffix;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
dropzoneI.on("sending", function(file, xhr, formData) {
|
||||
formData.append("redirect", zoneData.params.redirect);
|
||||
formData.append("max_file_size", zoneData.params.max_file_size);
|
||||
@ -150,24 +149,24 @@ var createZone = (zone, zoneData) => {
|
||||
formData.append("expires", zoneData.params.expires);
|
||||
formData.append("signature", zoneData.params.signature);
|
||||
});
|
||||
|
||||
|
||||
dropzoneI.on("success", function(file, response) {
|
||||
zoneData.currentFile = file;
|
||||
storeDataInForm(zone, zoneData);
|
||||
});
|
||||
|
||||
|
||||
dropzoneI.on("addedfile", function(file) {
|
||||
if (zoneData.hasOwnProperty('currentFile')) {
|
||||
dropzoneI.removeFile(zoneData.currentFile);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
dropzoneI.on("removedfile", function(file) {
|
||||
removeDataInForm(zone, zoneData);
|
||||
});
|
||||
|
||||
zone.insertBefore(created, zone.firstChild);
|
||||
|
||||
|
||||
let event = new CustomEvent("chill_dropzone_initialized", {
|
||||
detail: {
|
||||
dropzone: dropzoneI,
|
||||
@ -179,7 +178,7 @@ var createZone = (zone, zoneData) => {
|
||||
|
||||
|
||||
var initialize = function(zone) {
|
||||
var
|
||||
var
|
||||
allowRemove = zone.dataset.allowRemove,
|
||||
zoneData = { zone: zone, suffix: createFilename(), allowRemove: allowRemove, old: null }
|
||||
;
|
||||
@ -204,13 +203,13 @@ var createFilename = () => {
|
||||
};
|
||||
|
||||
var storeDataInForm = (zone, zoneData) => {
|
||||
var
|
||||
var
|
||||
inputKey = zone.querySelector('input[data-stored-object-key]'),
|
||||
inputIv = zone.querySelector('input[data-stored-object-iv]'),
|
||||
inputObject = zone.querySelector('input[data-async-file-upload]'),
|
||||
inputType = zone.querySelector('input[data-async-file-type]')
|
||||
;
|
||||
|
||||
|
||||
inputKey.value = JSON.stringify(zoneData.crypto.rawKey);
|
||||
inputIv.value = JSON.stringify(Array.from(zoneData.crypto.iv));
|
||||
inputType.value = zoneData.originalType;
|
||||
@ -220,18 +219,18 @@ var storeDataInForm = (zone, zoneData) => {
|
||||
};
|
||||
|
||||
const restoreDataInForm = (zone, zoneData) => {
|
||||
var
|
||||
var
|
||||
inputKey = zone.querySelector('input[data-stored-object-key]'),
|
||||
inputIv = zone.querySelector('input[data-stored-object-iv]'),
|
||||
inputObject = zone.querySelector('input[data-async-file-upload]'),
|
||||
inputType = zone.querySelector('input[data-async-file-type]')
|
||||
;
|
||||
|
||||
|
||||
if (zoneData.old === null) {
|
||||
console.log('should not have restored data');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
inputKey.value = zoneData.old.key;
|
||||
inputIv.value = zoneData.old.iv;
|
||||
inputType.value = zoneData.old.type;
|
||||
@ -241,21 +240,21 @@ const restoreDataInForm = (zone, zoneData) => {
|
||||
};
|
||||
|
||||
const hasDataInForm = (zone, zoneData) => {
|
||||
var
|
||||
var
|
||||
inputObject = zone.querySelector('input[data-async-file-upload]')
|
||||
;
|
||||
|
||||
|
||||
return inputObject.value.length > 0;
|
||||
};
|
||||
|
||||
var removeDataInForm = (zone, zoneData) => {
|
||||
var
|
||||
var
|
||||
inputKey = zone.querySelector('input[data-stored-object-key]'),
|
||||
inputIv = zone.querySelector('input[data-stored-object-iv]'),
|
||||
inputObject = zone.querySelector('input[data-async-file-upload]'),
|
||||
inputType = zone.querySelector('input[data-async-file-type]')
|
||||
;
|
||||
|
||||
|
||||
// store data for future usage
|
||||
zoneData.old = {
|
||||
key: inputKey.value,
|
||||
@ -268,7 +267,7 @@ var removeDataInForm = (zone, zoneData) => {
|
||||
inputIv.value = "";
|
||||
inputType.value = "";
|
||||
inputObject.value = "";
|
||||
|
||||
|
||||
insertDownloadButton(zone);
|
||||
};
|
||||
|
||||
@ -279,25 +278,25 @@ var insertRemoveButton = (zone, zoneData) => {
|
||||
labelRemove = zone.dataset.dictRemove,
|
||||
labelCancel = 'Restaurer'
|
||||
;
|
||||
|
||||
|
||||
removeButton.classList.add('btn', 'btn-delete');
|
||||
removeButton.textContent = labelRemove;
|
||||
|
||||
|
||||
cancelButton.classList.add('btn', 'btn-cancel');
|
||||
cancelButton.textContent = labelCancel;
|
||||
|
||||
|
||||
removeButton.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
if (zoneData.allowRemove === 'true') {
|
||||
removeDataInForm(zone, zoneData);
|
||||
cancelButton.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
|
||||
restoreDataInForm(zone, zoneData);
|
||||
|
||||
|
||||
cancelButton.remove();
|
||||
zone.querySelector('.dropzone').remove();
|
||||
|
||||
|
||||
initialize(zone);
|
||||
});
|
||||
}
|
||||
@ -306,16 +305,16 @@ var insertRemoveButton = (zone, zoneData) => {
|
||||
removeButton.remove();
|
||||
createZone(zone, zoneData);
|
||||
});
|
||||
|
||||
|
||||
addBelowButton(removeButton, zone, zoneData);
|
||||
// zone.appendChild(removeButton);
|
||||
};
|
||||
|
||||
const removeDownloadButton = (zone, zoneData) => {
|
||||
var
|
||||
var
|
||||
existingButtons = zone.querySelectorAll('a[data-download-button]')
|
||||
;
|
||||
|
||||
|
||||
// remove existing
|
||||
existingButtons.forEach(function(b) {
|
||||
b.remove();
|
||||
@ -323,7 +322,7 @@ const removeDownloadButton = (zone, zoneData) => {
|
||||
};
|
||||
|
||||
var insertDownloadButton = (zone, zoneData) => {
|
||||
var
|
||||
var
|
||||
existingButtons = zone.querySelectorAll('a[data-download-button]'),
|
||||
newButton = document.createElement('a'),
|
||||
inputKey = zone.querySelector('input[data-stored-object-key]'),
|
||||
@ -336,18 +335,18 @@ var insertDownloadButton = (zone, zoneData) => {
|
||||
tempUrlGenerator = zone.dataset.tempUrlGenerator,
|
||||
tempUrlGeneratorParams = new URLSearchParams()
|
||||
;
|
||||
|
||||
|
||||
// remove existing
|
||||
existingButtons.forEach(function(b) {
|
||||
b.remove();
|
||||
});
|
||||
|
||||
|
||||
if (inputObject.value === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
tempUrlGeneratorParams.append('object_name', inputObject.value);
|
||||
|
||||
|
||||
newButton.dataset.downloadButton = true;
|
||||
newButton.dataset.key = inputKey.value;
|
||||
newButton.dataset.iv = inputIv.value;
|
||||
@ -357,7 +356,7 @@ var insertDownloadButton = (zone, zoneData) => {
|
||||
newButton.dataset.tempUrlGetGenerator = tempUrlGenerator + '?' + tempUrlGeneratorParams.toString();
|
||||
newButton.classList.add('btn', 'btn-download', 'dz-bt-below-dropzone');
|
||||
newButton.textContent = labelQuietButton;
|
||||
|
||||
|
||||
addBelowButton(newButton, zone, zoneData);
|
||||
//zone.appendChild(newButton);
|
||||
initializeDownload(zone);
|
||||
@ -370,3 +369,5 @@ window.addEventListener('load', function(e) {
|
||||
window.addEventListener('collection-add-entry', function(e) {
|
||||
searchForZones(e.detail.entry);
|
||||
});
|
||||
|
||||
export { searchForZones };
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
<a class="btn btn-create" :title="$t(buttonTitle)" @click="openModal">
|
||||
<span>{{ $t(buttonTitle) }}</span>
|
||||
</a>
|
||||
|
||||
<teleport to="body">
|
||||
<div>
|
||||
<modal v-if="modal.showModal"
|
||||
@ -14,7 +13,24 @@
|
||||
</template>
|
||||
|
||||
<template v-slot:body>
|
||||
modal body
|
||||
<div id="dropZoneWrapper">
|
||||
<div
|
||||
data-stored-object="data-stored-object"
|
||||
data-label-preparing="Preparing"
|
||||
data-label-quiet-button="Download existing file"
|
||||
data-label-ready="Ready to show"
|
||||
data-dict-file-too-big="File too big"
|
||||
data-dict-default-message="Drop your file or click here"
|
||||
data-dict-remove-file="Remove file in order to upload a new one"
|
||||
data-dict-max-files-exceeded="Max files exceeded. Remove previous files"
|
||||
data-dict-cancel-upload="Cancel upload"
|
||||
data-dict-cancel-upload-confirm="Are you sure you want to cancel this upload ?"
|
||||
data-dict-upload-canceled="Upload canceled"
|
||||
data-dict-remove="Remove existing file"
|
||||
data-allow-remove="true"
|
||||
data-temp-url-generator="url">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:footer>
|
||||
@ -28,6 +44,7 @@
|
||||
|
||||
<script>
|
||||
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
|
||||
import { searchForZones } from '../../module/async_upload/uploader';
|
||||
|
||||
export default {
|
||||
name: "AddAsyncUpload",
|
||||
@ -45,14 +62,13 @@ export default {
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
openModal() {
|
||||
this.modal.showModal = true;
|
||||
let dropZoneWrapper = document.getElementById('dropZoneWrapper');
|
||||
console.log(dropZoneWrapper)
|
||||
searchForZones(document); //TODO: only searchforzone in modal body
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</script>
|
||||
@ -65,7 +65,7 @@
|
||||
<h5>{{ $t('Documents') }} :</h5>
|
||||
|
||||
<div class="flex-table">
|
||||
<div class="item-bloc" v-for="d in evaluation.documents">
|
||||
<div class="item-bloc" v-for="(d, i) in evaluation.documents" :key="i">
|
||||
<div class="item-row">
|
||||
<div class="item-col"><h6>{{ d.template.name.fr }}</h6></div>
|
||||
<div class="item-col">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user