Skip to content
Code-Schnipsel Gruppen Projekte
Commit 29e923a2 erstellt von Henning Leutz's avatar Henning Leutz :martial_arts_uniform:
Dateien durchsuchen

Merge branch 'next' into 'master' 

Next

See merge request !84
Übergeordnete 23b3bed2 cf6ad0d1
Keine zugehörigen Branchen gefunden
Tags 3.1.1
2 Merge Requests!140Update 'next-4.x' with latest changes from 'main',!84Next
Pipeline-Nr. 6896 bestanden
Phase: release
Leerzeichenänderungen ausblenden
Inline Nebeneinander
bin/backend/controls/customerFiles/Grid.css
+ 87
− 5
Zeige Datei @ 29e923a2
.drag-drop-dropper { .drag-drop-dropper {
background: rgba(0, 0, 0, 0.5); --_transition: 1s ease all;
height: 100%; --_transition-delay: 1s;
left: 0;
background-color: rgb(249 250 250 / 80%);
position: absolute; position: absolute;
top: 0;
width: 100%;
z-index: 10000; z-index: 10000;
backdrop-filter: blur(4px);
inset: -5px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
} }
.drag-drop-dropper--animation {
animation-name: fadeIn;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.drag-drop-dropper__inner {
border: 5px dashed #d9e4e4;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
width: 70%;
height: 30%;
}
.drag-drop-dropper__icon {
font-size: 4rem;
color: #d3e5e5;
transition: var(--_transition);
transition-delay: var(--_transition-delay);
}
/* animation */
.drag-drop-dropper--animation .drag-drop-dropper__inner {
animation-name: fadeInBorder;
animation-fill-mode: forwards;
animation-delay: 0.1s;
}
/*.drag-drop-dropper--animation .drag-drop-dropper__icon {*/
.drag-drop-dropper .drag-drop-dropper__icon {
animation-name: fadeInIconColor, bounce;
animation-delay: 0.1s, 0.2s;
animation-timing-function: linear, cubic-bezier(0.280, 0.840, 0.420, 1);
animation-duration: 0.3s, 1.25s;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards, forwards
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInBorder {
from {
border-color: #d9e4e4;
}
to {
border-color: #798787;
}
}
@keyframes fadeInIconColor {
from {
color: #d3e5e5;
}
to {
color: #6c7d7d;
}
}
@keyframes bounce {
0% { transform: scale(1,1) translateY(0); }
15% { transform: scale(1.1,.9) translateY(0); }
35% { transform: scale(.9,1.1) translateY(-20px); }
50% { transform: scale(1.05,.95) translateY(0); }
57% { transform: scale(1,1) translateY(-5px); }
64% { transform: scale(1,1) translateY(0); }
100% { transform: scale(1,1) translateY(0); }
}
\ No newline at end of file
bin/backend/controls/customerFiles/Grid.js
+ 84
− 22
Zeige Datei @ 29e923a2
...@@ -23,6 +23,7 @@ define('package/quiqqer/erp/bin/backend/controls/customerFiles/Grid', [ ...@@ -23,6 +23,7 @@ define('package/quiqqer/erp/bin/backend/controls/customerFiles/Grid', [
Binds: [ Binds: [
'openCustomerFiles', 'openCustomerFiles',
'uploadCustomFile',
'removeSelectedFiles', 'removeSelectedFiles',
'$onInject' '$onInject'
], ],
...@@ -50,7 +51,13 @@ define('package/quiqqer/erp/bin/backend/controls/customerFiles/Grid', [ ...@@ -50,7 +51,13 @@ define('package/quiqqer/erp/bin/backend/controls/customerFiles/Grid', [
}); });
// drag drop // drag drop
this.$DropInfo = new Element('div.drag-drop-dropper').inject(this.getElm()); this.$DropInfo = new Element('div', {
'class': 'drag-drop-dropper',
html: '<div class="drag-drop-dropper__inner drag-drop-dropper__child">' +
' <i class="fa-solid fa-upload drag-drop-dropper__icon drag-drop-dropper__child"></i>' +
' </div>'
}).inject(this.getElm());
this.$DropInfo.setStyle('display', 'none'); this.$DropInfo.setStyle('display', 'none');
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
...@@ -63,14 +70,27 @@ define('package/quiqqer/erp/bin/backend/controls/customerFiles/Grid', [ ...@@ -63,14 +70,27 @@ define('package/quiqqer/erp/bin/backend/controls/customerFiles/Grid', [
['dragenter', 'dragover'].forEach(eventName => { ['dragenter', 'dragover'].forEach(eventName => {
this.getElm().addEventListener(eventName, () => { this.getElm().addEventListener(eventName, () => {
this.$DropInfo.setStyle('display', null); this.$DropInfo.setStyle('display', null);
if (!this.$DropInfo.hasClass('drag-drop-dropper--animation')) {
this.$DropInfo.addClass('drag-drop-dropper--animation');
}
}, false); }, false);
}); });
['dragleave', 'drop'].forEach(eventName => { ['dragleave', 'drop'].forEach(eventName => {
this.getElm().addEventListener(eventName, (e) => { this.getElm().addEventListener(eventName, (e) => {
if (!e.relatedTarget || e.relatedTarget.parentNode !== this.getElm()) { if (e.relatedTarget && e.relatedTarget === this.$DropInfo) {
this.$DropInfo.setStyle('display', 'none'); return;
} }
if (e.relatedTarget
&& e.relatedTarget.parentNode
&& e.relatedTarget.getParent('.drag-drop-dropper')) {
return;
}
this.$DropInfo.setStyle('display', 'none');
this.$DropInfo.removeClass('drag-drop-dropper--animation');
}, false); }, false);
}); });
...@@ -79,23 +99,7 @@ define('package/quiqqer/erp/bin/backend/controls/customerFiles/Grid', [ ...@@ -79,23 +99,7 @@ define('package/quiqqer/erp/bin/backend/controls/customerFiles/Grid', [
const files = Array.from(dt.files); const files = Array.from(dt.files);
this.$Grid.showLoader(); this.$Grid.showLoader();
this.$uploadFiles(files);
require(['classes/request/BulkUpload'], (BulkUpload) => {
new BulkUpload({
phpOnFinish: 'package_quiqqer_customer_ajax_backend_files_upload',
params: {
hash: this.getAttribute('hash'),
customerId: this.getAttribute('customerId')
},
events: {
onFinish: (Instance, uploadedFiles) => {
this.addFiles(uploadedFiles).then(() => {
this.refresh();
});
}
}
}).upload(files);
});
}, false); }, false);
// grid // grid
...@@ -119,6 +123,12 @@ define('package/quiqqer/erp/bin/backend/controls/customerFiles/Grid', [ ...@@ -119,6 +123,12 @@ define('package/quiqqer/erp/bin/backend/controls/customerFiles/Grid', [
events: { events: {
click: this.openCustomerFiles click: this.openCustomerFiles
} }
}, {
title: QUILocale.get(lg, 'customer.grid.uploadCustomerFile'),
icon: 'fa fa-upload',
events: {
click: this.uploadCustomFile
}
}, { }, {
text: QUILocale.get(lg, 'customer.grid.button.remove', { text: QUILocale.get(lg, 'customer.grid.button.remove', {
entity: entityTitle entity: entityTitle
...@@ -197,6 +207,7 @@ define('package/quiqqer/erp/bin/backend/controls/customerFiles/Grid', [ ...@@ -197,6 +207,7 @@ define('package/quiqqer/erp/bin/backend/controls/customerFiles/Grid', [
} }
this.$Grid.showLoader(); this.$Grid.showLoader();
this.$Grid.getButtons('remove')[0].disable();
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
QUIAjax.get('package_quiqqer_erp_ajax_customerFiles_getFiles', (files) => { QUIAjax.get('package_quiqqer_erp_ajax_customerFiles_getFiles', (files) => {
...@@ -306,6 +317,38 @@ define('package/quiqqer/erp/bin/backend/controls/customerFiles/Grid', [ ...@@ -306,6 +317,38 @@ define('package/quiqqer/erp/bin/backend/controls/customerFiles/Grid', [
}); });
}, },
/**
* @param files
* @return {Promise<unknown>}
*/
$uploadFiles: function(files) {
return new Promise((resolve) => {
require(['classes/request/BulkUpload'], (BulkUpload) => {
const Instance = new BulkUpload({
phpOnFinish: 'package_quiqqer_customer_ajax_backend_files_upload',
params: {
hash: this.getAttribute('hash'),
customerId: this.getAttribute('customerId')
},
events: {
onFinish: (Instance, uploadedFiles) => {
this.addFiles(uploadedFiles).then(() => {
this.refresh();
resolve();
});
}
}
});
if (files instanceof FileList) {
files = Array.from(files);
}
Instance.upload(files);
});
});
},
/** /**
* open customer file window * open customer file window
*/ */
...@@ -317,7 +360,7 @@ define('package/quiqqer/erp/bin/backend/controls/customerFiles/Grid', [ ...@@ -317,7 +360,7 @@ define('package/quiqqer/erp/bin/backend/controls/customerFiles/Grid', [
userId: this.getAttribute('customerId'), userId: this.getAttribute('customerId'),
events: { events: {
onSelect: (selectedFiles, Win) => { onSelect: (selectedFiles, Win) => {
// @todo // @todo refactor to add files
for (let File of selectedFiles) { for (let File of selectedFiles) {
this.addFile(File.hash); this.addFile(File.hash);
} }
...@@ -329,8 +372,27 @@ define('package/quiqqer/erp/bin/backend/controls/customerFiles/Grid', [ ...@@ -329,8 +372,27 @@ define('package/quiqqer/erp/bin/backend/controls/customerFiles/Grid', [
}); });
}, },
removeSelectedFiles: function() { uploadCustomFile: function() {
const Container = new Element('div', {
html: '<form action="" method="">' +
'<input type="file" name="files" value="upload" multiple />' +
'</form>'
});
Container.getElement('input').click();
Container.getElement('input').addEvent('change', (event) => {
const Target = event.target,
files = Target.files;
if (files.length) {
this.$uploadFiles(files).then(() => {
Container.destroy();
});
}
});
},
removeSelectedFiles: function() {
require(['qui/controls/windows/Confirm'], (QUIConfirm) => { require(['qui/controls/windows/Confirm'], (QUIConfirm) => {
new QUIConfirm({ new QUIConfirm({
maxHeight: 500, maxHeight: 500,
......
locale.xml
+ 4
− 0
Zeige Datei @ 29e923a2
...@@ -1590,6 +1590,10 @@ Allowed characters: Letters, numbers and _ ä ö ü ß]]></en> ...@@ -1590,6 +1590,10 @@ Allowed characters: Letters, numbers and _ ä ö ü ß]]></en>
<de><![CDATA[Kundendateien]]></de> <de><![CDATA[Kundendateien]]></de>
<en><![CDATA[Customer files]]></en> <en><![CDATA[Customer files]]></en>
</locale> </locale>
<locale name="customer.grid.uploadCustomerFile">
<de><![CDATA[Kundendatei hochladen]]></de>
<en><![CDATA[Upload Customer files]]></en>
</locale>
<locale name="customer.grid.customerFiles.title"> <locale name="customer.grid.customerFiles.title">
<de><![CDATA[Datei aus Kundendateien auswählen]]></de> <de><![CDATA[Datei aus Kundendateien auswählen]]></de>
<en><![CDATA[Select file from customer files]]></en> <en><![CDATA[Select file from customer files]]></en>
......
0% oder .
You are about to add 0 people to the discussion. Proceed with caution.
Bearbeitung dieser Nachricht zuerst beenden!
Bitte registrieren oder zum Kommentieren

PCSG & QUIQQER support and DEV System - GitLab