Skip to content
Snippets Groups Projects
Commit 2822251e authored by Steinwender, Tamara's avatar Steinwender, Tamara
Browse files

Refactor clipboard webcomponent

parent dd0896c8
Branches
No related tags found
No related merge requests found
Pipeline #44138 failed
......@@ -803,7 +803,6 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
if (act.subscribe === undefined || !act.subscribe.includes("lang:")) {
elm.setAttribute("lang", this.lang);
}
return elm;
}
......
......@@ -62,8 +62,8 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
nextcloudName: { type: String, attribute: 'nextcloud-name' },
nextcloudFileURL: { type: String, attribute: 'nextcloud-file-url' },
isFileSource: {type: Boolean, attribute: 'file-sink' },
isFileSink: {type: Boolean, attribute: 'file-source' },
isFileSource: {type: Boolean, attribute: 'file-source' },
isFileSink: {type: Boolean, attribute: 'file-sink' },
};
}
......@@ -327,7 +327,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
}
saveFilesToClipboard(ev)
saveFilesToClipboardEvent(ev)
{
//save it
let data = {};
......@@ -348,6 +348,30 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
}
saveFilesToClipboard()
{
//save it
console.log("clipboard", this.clipboardFiles);
console.log("filesToSave", this.filesToSave);
let data = {};
let files = [];
if (this.clipboardFiles && this.clipboardFiles.files.length !== 0) {
files = files.concat(this.clipboardFiles.files);
files = files.concat(this.filesToSave);
} else {
files = files.concat(this.filesToSave);
}
console.log("files", files);
if (this.filesToSave && this.filesToSave.length !== 0) {
data = {"files": files};
this.sendSetPropertyEvent('clipboard-files', data);
const event = new CustomEvent("dbp-clipboard-file-picker-file-uploaded",
{ bubbles: true, composed: true });
this.dispatchEvent(event);
}
}
finishedSaveFilesToClipboard(ev) {
send({
"summary": i18n.t('clipboard.saved-files-title', {count: ev.detail.count}),
......@@ -386,6 +410,20 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
clearClipboard() {
/* this.tabulatorTable.deleteRow(this.tabulatorTable.getSelectedRows());
let data = [];
this.tabulatorTable.getRows().forEach(row =>
console.log("row.file", row.file) &&
data.push(row.file)
);
console.log("data", data);
//TODO Check if file is set then push data to clipboard and send notification
//TODO unterscheide zwischen alle files löschen und nur selected files löschen
//TODO find matomo error !!!!
//TODO filesink filesink error
*/
if(this.tabulatorTable && this.tabulatorTable.getSelectedData().length > 0) {
let data = {"files": this.clipboardFiles.files};
this.tabulatorTable.getSelectedData().forEach(toRemove =>
......@@ -421,7 +459,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
openFilesink() {
const fileSink = this._("#file-source");
if (fileSink) {
this._("#file-source").setAttribute("dialog-open", "");
this._("#file-source").setAttribute(^^"dialog-open", "");
}
}
......@@ -464,7 +502,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
text="${i18n.t('clipboard.upload-area-text')}"
button-label="${i18n.t('clipboard.upload-button-label')}"
show-clipboard
@dbp-file-source-file-selected="${this.saveFilesToClipboard}"
@dbp-file-source-file-selected="${this.saveFilesToClipboardEvent}"
@dbp-nextcloud-file-picker-number-files="${this.finishedSaveFilesToClipboard}"
@dbp-file-source-file-upload-finished="${this.finishedSaveFilesToClipboard}"
></dbp-file-source>
......@@ -485,26 +523,72 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
getClipboardSink() {
const tabulatorCss = commonUtils.getAssetURL(pkgName, 'tabulator-tables/css/tabulator.min.css');
let additionalButtons = this.showAdditionalButtons ? this.getAdditionalButtons() : "";
return html`
//todo header + table
<!-- Clipboard Footer -->
<div class="wrapper">
<div class="content">
<h3>${i18n.t('clipboard.sink-title')}</h3>
<p>${i18n.t('clipboard.sink-body')}<br><br></p>
<div class="warning-container">
<dbp-icon name="warning" class="warning-icon"></dbp-icon>
<p>${i18n.t('clipboard.warning')}</p>
</div>
<div class="container">
${additionalButtons}
<link rel="stylesheet" href="${tabulatorCss}">
<div class="table-wrapper">
<label class="button-container select-all-icon">
<input type="checkbox" id="select_all" name="select_all" value="select_all" @click="${() => {this.selectAllFiles();}}">
<span class="checkmark"></span>
</label>
<table id="clipboard-content-table" class="force-no-select"></table>
</div>
</div>
</div>
<div class="clipboard-footer">
<button class="button select-button is-primary" ?disabled="${this.clipboardSelectBtnDisabled}"
@click="${() => {this.sendClipboardFiles(this.tabulatorTable.getSelectedData());}}">${i18n.t('nextcloud-file-picker.select-files')}
<button class="button select-button is-primary" title="${i18n.t('clipboard.sink-btn', {count: this.filesToSave.length})}"
@click="${() => {this.saveFilesToClipboard();}}"> <dbp-icon class="nav-icon" name="clipboard"></dbp-icon> ${i18n.t('clipboard.sink-btn', {count: this.filesToSave.length})}
</button>
</div>
</div>
`;
}
getClipboardSource() {
const tabulatorCss = commonUtils.getAssetURL(pkgName, 'tabulator-tables/css/tabulator.min.css');
let additionalButtons = this.showAdditionalButtons ? this.getAdditionalButtons() : "";
return html`
//todo header + table
<!-- Clipboard Footer -->
<div class="wrapper">
<div class="content">
<h3>${i18n.t('clipboard.source-title')}</h3>
<p>${i18n.t('clipboard.source-body')}</p>
<div class="warning-container">
<dbp-icon name="warning" class="warning-icon"></dbp-icon>
<p>${i18n.t('clipboard.warning')}</p>
</div>
<div class="container">
${additionalButtons}
<link rel="stylesheet" href="${tabulatorCss}">
<div class="table-wrapper">
<label class="button-container select-all-icon">
<input type="checkbox" id="select_all" name="select_all" value="select_all" @click="${() => {this.selectAllFiles();}}">
<span class="checkmark"></span>
</label>
<table id="clipboard-content-table" class="force-no-select"></table>
</div>
</div>
</div>
<div class="clipboard-footer">
<button class="button select-button is-primary" ?disabled="${this.clipboardSelectBtnDisabled}"
@click="${() => {this.sendClipboardFiles(this.tabulatorTable.getSelectedData());}}">${i18n.t('nextcloud-file-picker.select-files')}
@click="${() => {this.sendClipboardFiles(this.tabulatorTable.getSelectedData());}}"> ${i18n.t('clipboard.source-btn')}
</button>
</div>
</div>
`;
}
......@@ -604,7 +688,28 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
.clipboard-footer {
align-self: end;
background-color: white;
width: 100%;
padding-top: 10px;
display: flex;
align-items: end;
flex-direction: column;
}
.wrapper{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.content{
width: 100%;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@media only screen
......@@ -659,10 +764,6 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
margin-top: 5px;
}
.clipboard-footer {
padding-top: 10px;
align-self: center;
}
}
`;
......
This diff is collapsed.
......@@ -135,9 +135,9 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
if (this.files.length !== 0 && !this.isDialogOpen) {
this.openDialog();
if (this.enabledTargets.includes("clipboard")) {
const clipboardSink = this._("#clipboard-file-sink");
const clipboardSink = this._("#clipboard-file-picker");
if (clipboardSink) {
this._("#clipboard-file-sink").filesToSave = this.files;
this._("#clipboard-file-picker").filesToSave = [...this.files];
}
}
}
......@@ -237,12 +237,12 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
if (this.enabledTargets.includes('clipboard')) {
return html`
<dbp-clipboard
id="clipboard-file-sink"
id="clipboard-file-picker"
subscribe="clipboard-files:clipboard-files"
show-additional-buttons
file-sink
lang="${this.lang}"
auth-url="${this.nextcloudAuthUrl}"
allowed-mime-types="${this.allowedMimeTypes}"
nextcloud-auth-url="${this.nextcloudAuthUrl}"
nextcloud-web-dav-url="${this.nextcloudWebDavUrl}"
nextcloud-name="${this.nextcloudName}"
......
......@@ -17,10 +17,6 @@
"nav-local": "Lokaler Computer",
"no-usable-files-in-zip": "ZIP Datei enthält keine verwendbaren Dateien",
"no-usable-files-hint": "Laden Sie eine ZIP Datei mit Dateien von folgendem Typ hoch: ",
"clipboard-title": "Von der Zwischenablage auswählen",
"clipboard-body": "Hier können Sie zuvor temporär abgelegte Dateien auswählen.",
"clipboard-select-btn": "Auswählen",
"clipboard-no-files": "Aktuell befinden sich keine Dateien in der Zwischenablage.",
"clipboard": "Zwischenablage"
},
"file-sink": {
......@@ -33,16 +29,6 @@
"upload-success-title": "Erfolgreich hochgeladen",
"upload-success-body": "Sie haben {{count}} Datei erfolgreich in {{name}} hochgeladen.",
"upload-success-body_plural": "Sie haben {{count}} Dateien erfolgreich in {{name}} hochgeladen.",
"save-to-clipboard-title": "Erfolgreich abgelegt",
"save-to-clipboard-body": "Sie haben {{count}} Datei in der Zwischenablage temporär abgelegt. Vergessen Sie nicht diese dauerhaft zu speichern.",
"save-to-clipboard-body_plural": "Sie haben {{count}} Dateien in der Zwischenablage temporär abgelegt. Vergessen Sie nicht diese dauerhaft zu speichern.",
"save-to-clipboard-btn": "{{count}} Datei ablegen",
"save-to-clipboard-btn_plural": "{{count}} Dateien ablegen",
"save-to-clipboard-text": "Hier können Sie Dateien temporär ablegen.",
"save-to-clipboard-warning": "Vorsicht! Wenn Sie den Browser schließen, die Seite neu laden oder neue Dateien hinzufügen, wird die bestehende Zwischenablage automatisch verworfen!",
"clipboard-files": "Aktuell ist eine Datei in der Zwischenablage vorhanden",
"clipboard-files_plural": "Aktuell sind {{count}} Dateien in der Zwischenablage vorhanden",
"clipboard-files-overwrite": "Folgende Dateien werden verworfen, wenn Sie neue Dateien ins Zwischenablage legen:",
"clipboard": "Zwischenablage"
},
"nextcloud-file-picker": {
......@@ -99,14 +85,6 @@
"abort-message": "Vorgang wurde abgebrochen."
},
"clipboard": {
"file-warning": "Achtung!",
"file-warning-body": "Es befindet sich noch eine Datei in der Zwischenablage. Die Zwischenablage wird beim Verlassen der Seite verworfen.",
"file-warning-body_plural": "Es befinden sich noch {{count}} Dateien in der Zwischenablage. Die Zwischenablage wird beim Verlassen der Seite verworfen.",
"save-files-from-clipboard": "Eine Datei aus der Zwischenablage speichern",
"save-files-from-clipboard_plurafile-sinkl": "{{count}} Dateien aus der Zwischenablage speichern",
"save-from-clipboard": "Aktuellen Inhalt aus der Zwischenablage speichern:",
"save-from-clipboard-btn": "Zwischenablage sichern",
"save-to-clipboard-title": "Dateien in der Zwischenablage ablegen",
"add-files": "Dateien der Zwischenablage hinzufügen",
"add-files-btn": "Dateien hinzufügen",
"remove-all": "Alle Dateien aus der Zwischenablage entfernen.",
......@@ -117,18 +95,6 @@
"remove-count-btn_plural": "{{count}} Dateien entfernen",
"save-all": "Alle Dateien aus der Zwischenablage speichern",
"save-all-btn": "Alle sichern",
"upload-area-text": "Sie können in diesem Bereich Dokumente mit einer Maximalgröße von bis zu 32MB pro Dokument per Drag & Drop oder per Direktauswahl hochladen.",
"upload-button-label": "Dateien auswählen",
"clear-clipboard-title": "Zwischenablage geleert",
"clear-clipboard-body": "Die Zwischenablage wurde erfolgreich geleert.",
"clear-count-clipboard-title": "Datei entfernt",
"clear-count-clipboard-title_plural": "Dateien entfernt",
"clear-count-clipboard-body": "Eine Datei wurde erfolgreich aus der Zwischenablage entfernt.",
"clear-count-clipboard-body_plural": "{{count}} Dateien wurde erfolgreich aus der Zwischenablage entfernt.",
"saved-files-title": "Datei erfolgreich abgelegt",
"saved-files-title_plural": "Dateien erfolgreich abgelegt",
"saved-files-body": "Eine Datei wurde erfolgreich temporär in der Zwischenablage abgelegt und kann jetzt innerhalb dieser Applikation verwendet werden.",
"saved-files-body_plural": "{{count}} Dateien wurde erfolgreich temporär in der Zwischenablage abgelegt und können jetzt innerhalb dieser Applikation verwendet werden.",
"save-count-btn": "Datei speichern",
"save-count-btn_plural": "{{count}} Dateien speichern",
"save-count": "Eine Datei aus der Zwischenablage speichern",
......@@ -137,10 +103,65 @@
"file-size": "Größe",
"file-type": "Art",
"file-mod": "Geändert",
"no-data": "Aktuell befinden sich keine Dateien in der Zwischenablage.",
"saved-files-title": "Datei erfolgreich abgelegt",
"saved-files-title_plural": "Dateien erfolgreich abgelegt",
"saved-files-body": "Eine Datei wurde erfolgreich temporär in der Zwischenablage abgelegt und kann jetzt innerhalb dieser Applikation verwendet werden.",
"saved-files-body_plural": "{{count}} Dateien wurde erfolgreich temporär in der Zwischenablage abgelegt und können jetzt innerhalb dieser Applikation verwendet werden.",
"clear-clipboard-title": "Zwischenablage geleert",
"clear-clipboard-body": "Die Zwischenablage wurde erfolgreich geleert.",
"clear-count-clipboard-title": "Datei entfernt",
"clear-count-clipboard-title_plural": "Dateien entfernt",
"clear-count-clipboard-body": "Eine Datei wurde erfolgreich aus der Zwischenablage entfernt.",
"clear-count-clipboard-body_plural": "{{count}} Dateien wurde erfolgreich aus der Zwischenablage entfernt.",
"file-warning": "Achtung!",
"file-warning-body": "Es befindet sich noch eine Datei in der Zwischenablage. Die Zwischenablage wird beim Verlassen der Seite verworfen.",
"file-warning-body_plural": "Es befinden sich noch {{count}} Dateien in der Zwischenablage. Die Zwischenablage wird beim Verlassen der Seite verworfen.",
"upload-area-text": "Sie können in diesem Bereich Dokumente per Drag & Drop oder per Direktauswahl hochladen.",
"upload-button-label": "Dateien auswählen",
"warning": "Vorsicht! Wenn Sie den Browser schließen, die Seite neu laden oder neue Dateien hinzufügen, wird die bestehende Zwischenablage automatisch verworfen!",
"source-title": "Von der Zwischenablage auswählen",
"source-body": "Hier können Sie zuvor temporär abgelegte Dateien auswählen.",
"source-btn": "Dateien auswählen",
"sink-title": "Dateien in der Zwischenablage ablegen",
"sink-body": "Hier können Sie Dateien temporär in der Zwischenablage ablegen.",
"sink-btn": "{{count}} Datei ablegen",
"sink-btn_plural": "{{count}} Dateien ablegen"
},
"clipboard2": {
"save-files-from-clipboard": "Eine Datei aus der Zwischenablage speichern",
"save-files-from-clipboard_plurafile-sinkl": "{{count}} Dateien aus der Zwischenablage speichern",
"save-from-clipboard": "Aktuellen Inhalt aus der Zwischenablage speichern:",
"save-from-clipboard-btn": "Zwischenablage sichern",
"upload-area-text": "Sie können in diesem Bereich Dokumente mit einer Maximalgröße von bis zu 32MB pro Dokument per Drag & Drop oder per Direktauswahl hochladen.",
"upload-button-label": "Dateien auswählen",
"select-all": "Alle auswählen",
"select-all-title": "Alle verfügbaren Dateien in diesem Ordner auswählen",
"select-nothing": "Nichts auswählen",
"select-nothing-title": "Alle gewählten Dateien nicht mehr selektieren",
"no-data": "Keine Dateien vorhanden"
"success-save-to-clipboard-title": "Erfolgreich abgelegt",
"success-save-to-clipboard-body": "Sie haben {{count}} Datei in der Zwischenablage temporär abgelegt. Vergessen Sie nicht diese dauerhaft zu speichern.",
"success-save-to-clipboard-body_plural": "Sie haben {{count}} Dateien in der Zwischenablage temporär abgelegt. Vergessen Sie nicht diese dauerhaft zu speichern.",
"clipboard-files": "Aktuell ist eine Datei in der Zwischenablage vorhanden",
"clipboard-files_plural": "Aktuell sind {{count}} Dateien in der Zwischenablage vorhanden",
"clipboard-files-overwrite": "Folgende Dateien werden verworfen, wenn Sie neue Dateien ins Zwischenablage legen:",
"clipboard": "Zwischenablage",
"clipboard-no-files": "Aktuell befinden sich keine Dateien in der Zwischenablage."
}
}
......@@ -98,7 +98,7 @@
"abort": "Cancel process",
"abort-message": "The process was canceled."
},
"clipboard": {
"clipboard2": {
"file-warning": "Attention!",
"file-warning-body": "There is still a file on the clipboard. The clipboard is discarded when you exit the page.",
"file-warning-body_plural": "There are still {{count}} files on the clipboard. The clipboard is discarded when you exit the page.",
......
......@@ -83,7 +83,7 @@ export function getFileHandlingCss() {
Picker Styles
\\**************************/
#nextcloud-file-picker {
#nextcloud-file-picker, #clipboard-file-picker {
width: 100%;
height: 100%;
margin: var(--FUMargin, 0px);
......@@ -278,7 +278,7 @@ export function getFileHandlingCss() {
height: 20px;
}
#nextcloud-file-picker{
#nextcloud-file-picker, #clipboard-file-picker{
padding: 0px;
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment