Show clipboardfiles in filesink

packages/file-handling/src/file-sink.js

@@ -11,6 +11,7 @@ import FileSaver from 'file-saver';
 import MicroModal from "./micromodal.es";
 import * as fileHandlingStyles from './styles';
 import { send } from '@dbp-toolkit/common/notification';
+import {humanFileSize} from '@dbp-toolkit/common/i18next';
 
 
 /**
@@ -36,6 +37,7 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
         this.firstOpen = true;
 
         this.initialFileHandlingState = {target: '', path: ''};
+        this.clipBoardFiles = {files: ''};
     }
 
     static get scopedElements() {
@@ -69,6 +71,7 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
             nextcloudPath: {type: String, attribute: false},
 
             initialFileHandlingState: {type: Object, attribute: 'initial-file-handling-state'},
+            clipBoardFiles: {type: Object, attribute: 'clipboard-files'},
 
         };
     }
@@ -221,7 +224,25 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
         if (this.files.length !== 0) {
             data = {"files": this.files};
             this.sendSetPropertyEvent('clipboard-files', data);
+            this.closeDialog();
+            send({
+                "summary": i18n.t('file-sink.save-to-clipboard-title'),
+                "body": i18n.t('file-sink.save-to-clipboard-body', {count: this.files.length}),
+                "type": "success",
+                "timeout": 5,
+            });
+            console.log("--------------", this.clipBoardFiles);
         }
+
+    }
+
+    getClipboardFiles() {
+        let files = [];
+        for(let i = 0; i < this.clipBoardFiles.files.length; i ++)
+        {
+            files[i] =  html`<div class="clipboard-list"><strong>${this.clipBoardFiles.files[i].name}</strong> ${humanFileSize(this.clipBoardFiles.files[i].size)}</div>`;
+        }
+        return files;
     }
 
     closeDialog(e) {
@@ -250,6 +271,50 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
             .block {
                 margin-bottom: 10px;
             }
+            
+            .warning-icon{
+                font-size: 2rem;
+                padding: 0 1rem;
+            }
+            
+            .clipboard-btn{
+                margin-top: 1.5rem;
+                margin-bottom: 1.5rem;
+            }
+            
+            .warning-container{
+                display: flex;
+                max-width: 400px;
+            }
+
+            .clipboard-data h4{
+                margin-top: 2rem;
+            }
+            
+            .clipboard-data p{
+                margin-bottom: 1rem;
+            }
+            
+            .clipboard-list{
+                padding: 1rem 0;
+                border-top: 1px solid #eee;
+            }
+            
+
+            @media only screen
+            and (orientation: portrait)
+            and (max-device-width: 765px) {
+                .clipboard-container p, .clipboard-container h3{
+                    text-align: center;
+                }
+                .warning-container{
+                    flex-direction: column;
+                    align-items: center;
+                }
+                .warning-icon{
+                    margin-bottom: 1rem;
+                }
+            }
         `;
     }
 
@@ -322,13 +387,22 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
                             </div>
                             <div class="source-main ${classMap({"hidden": this.activeTarget !== "clipboard"})}">
                                 <div class="block clipboard-container">
-                                    <h2>In Zwischenablage speicher</h2>
-                                    <p>Hier können Sie Dateien temporär ablegen..<br><br></p>
-                                    <button class="button is-primary"
+                                    <h3>${i18n.t('file-sink.save-to-clipboard-title')}</h3>
+                                    <p>${i18n.t('file-sink.save-to-clipboard-text')}</p>
+                                    <button class="button is-primary clipboard-btn"
                                             ?disabled="${this.disabled}"
                                             @click="${() => { this.saveFilesToClipboard(); }}">
-                                        ${this.buttonLabel || "Ablegen"}
+                                        ${this.buttonLabel || i18n.t('file-sink.save-to-clipboard-btn', {count:this.files.length})}
                                     </button>
+                                    <div class="warning-container">
+                                        <dbp-icon name="warning" class="warning-icon"></dbp-icon>
+                                        <p>${i18n.t('file-sink.save-to-clipboard-warning')}</p>
+                                    </div>
+                                    <div class="clipboard-data ${classMap({"hidden": this.clipBoardFiles.files.length === 0})}">
+                                        <h4>Aktuell vorhandene Dateien im Clipboard</h4>
+                                        <p>Folgende Dateien werden überschrieben:</p>
+                                        ${this.getClipboardFiles()}
+                                    </div>
                                 </div>
                             </div>
                         </main>

packages/file-handling/src/file-source.js

@@ -403,6 +403,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
     }
 
     getClipboardFiles() {
+        console.log("+++++++++++++++", this.clipBoardFiles);
         let htmlpath = [];
         htmlpath[0] =  html`ein file und danach select button<br>`;
         //console.log("############################", this.clipBoardFiles );

packages/file-handling/src/i18n/de/translation.json

@@ -26,7 +26,15 @@
     "nav-local": "Lokaler Computer",
     "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."
+    "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 im Clipboard temporär abgelegt. Vergessen Sie nicht diese dauerhaft zu speichern.",
+    "save-to-clipboard-body_plural": "Sie haben {{count}} Dateien im Clipboard 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-title": "Dateien im Clipboard 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 das Clipboard automatisch geleert!"
   },
   "nextcloud-file-picker": {
     "open": "Nextcloud",

packages/file-handling/src/i18n/en/translation.json

@@ -26,7 +26,15 @@
     "nav-local": "My device",
     "upload-success-title": "Successful uploaded",
     "upload-success-body": "You have successfully uploaded {{count}} file to {{name}}.",
-    "upload-success-body_plural": "You have successfully uploaded {{count}} files to {{name}}."
+    "upload-success-body_plural": "You have successfully uploaded {{count}} files to {{name}}.",
+    "save-to-clipboard-title": "Cached successfully",
+    "save-to-clipboard-body": "You have temporarily stored {{count}} file in the clipboard. Don't forget to save it permanently.",
+    "save-to-clipboard-body_plural": "You have temporarily saved {{count}} files in the clipboard. Don't forget to save them permanently.",
+    "save-to-clipboard-btn": "{{count}} cache file",
+    "save-to-clipboard-btn_plural": "{{count}} cache files",
+    "save-to-clipboard-title": "Cache files in the clipboard ",
+    "save-to-clipboard-text": "Here you can cache files temporarily.",
+    "save-to-clipboard-warning": "Attention! When you close the browser, reload the page or add new files, the clipboard will automatically be emptied!"
   },
   "nextcloud-file-picker": {
     "open": "Nextcloud",

packages/file-handling/src/styles.js

@@ -76,7 +76,7 @@ export function getFileHandlingCss() {
             align-items: center;
             flex-direction: column;
             width: 100%;
-            justify-content: center;
+            overflow-x: auto;
         }
 
         /**************************\\