From 552d2138175097d7f2241d3ff6d6dc89e252f38c Mon Sep 17 00:00:00 2001 From: zadam Date: Sat, 30 Jan 2021 15:47:24 +0100 Subject: [PATCH] file properties converted to collapsible section container --- .../layouts/desktop_extra_window_layout.js | 2 + .../app/layouts/desktop_main_window_layout.js | 2 + src/public/app/widgets/file_properties.js | 133 ++++++++++++++++++ src/public/app/widgets/type_widgets/file.js | 88 +----------- 4 files changed, 139 insertions(+), 86 deletions(-) create mode 100644 src/public/app/widgets/file_properties.js diff --git a/src/public/app/layouts/desktop_extra_window_layout.js b/src/public/app/layouts/desktop_extra_window_layout.js index 8c5bdd9cd..767d040bc 100644 --- a/src/public/app/layouts/desktop_extra_window_layout.js +++ b/src/public/app/layouts/desktop_extra_window_layout.js @@ -17,6 +17,7 @@ import Container from "../widgets/container.js"; import SqlTableSchemasWidget from "../widgets/sql_table_schemas.js"; import NoteListWidget from "../widgets/note_list.js"; import SqlResultWidget from "../widgets/sql_result.js"; +import FilePropertiesWidget from "../widgets/file_properties.js"; export default class DesktopExtraWindowLayout { constructor(customWidgets) { @@ -48,6 +49,7 @@ export default class DesktopExtraWindowLayout { .child( new TabCachingWidget(() => new CollapsibleSectionContainer() .child(new SearchDefinitionWidget()) + .child(new FilePropertiesWidget()) .child(new PromotedAttributesWidget()) .child(new OwnedAttributeListWidget()) .child(new InheritedAttributesWidget()) diff --git a/src/public/app/layouts/desktop_main_window_layout.js b/src/public/app/layouts/desktop_main_window_layout.js index 4428e9d5e..19c64c369 100644 --- a/src/public/app/layouts/desktop_main_window_layout.js +++ b/src/public/app/layouts/desktop_main_window_layout.js @@ -28,6 +28,7 @@ import SearchDefinitionWidget from "../widgets/search_definition.js"; import Container from "../widgets/container.js"; import SqlResultWidget from "../widgets/sql_result.js"; import SqlTableSchemasWidget from "../widgets/sql_table_schemas.js"; +import FilePropertiesWidget from "../widgets/file_properties.js"; const RIGHT_PANE_CSS = ` + + + + + + + + + + + + + + + + + + +
Note ID:Original file name:
File type:File size:
+
+ +   + +   + + + +
+
+\`; +`; + +export default class FilePropertiesWidget extends TabAwareWidget { + static getType() { return "file"; } + + renderTitle(note) { + return { + show: note.type === 'file', + activate: true, + $title: 'File' + }; + } + + doRender() { + this.$widget = $(TPL); + this.contentSized(); + this.$fileNoteId = this.$widget.find(".file-note-id"); + this.$fileName = this.$widget.find(".file-filename"); + this.$fileType = this.$widget.find(".file-filetype"); + this.$fileSize = this.$widget.find(".file-filesize"); + this.$downloadButton = this.$widget.find(".file-download"); + this.$openButton = this.$widget.find(".file-open"); + this.$uploadNewRevisionButton = this.$widget.find(".file-upload-new-revision"); + this.$uploadNewRevisionInput = this.$widget.find(".file-upload-new-revision-input"); + + this.$downloadButton.on('click', () => openService.downloadFileNote(this.noteId)); + this.$openButton.on('click', () => openService.openFileNote(this.noteId)); + + this.$uploadNewRevisionButton.on("click", () => { + this.$uploadNewRevisionInput.trigger("click"); + }); + + this.$uploadNewRevisionInput.on('change', async () => { + const fileToUpload = this.$uploadNewRevisionInput[0].files[0]; // copy to allow reset below + this.$uploadNewRevisionInput.val(''); + + const formData = new FormData(); + formData.append('upload', fileToUpload); + + const result = await $.ajax({ + url: baseApiUrl + 'notes/' + this.noteId + '/file', + headers: await server.getHeaders(), + data: formData, + type: 'PUT', + timeout: 60 * 60 * 1000, + contentType: false, // NEEDED, DON'T REMOVE THIS + processData: false, // NEEDED, DON'T REMOVE THIS + }); + + if (result.uploaded) { + toastService.showMessage("New file revision has been uploaded."); + + this.refresh(); + } + else { + toastService.showError("Upload of a new file revision failed."); + } + }); + } + + async refreshWithNote(note) { + const attributes = note.getAttributes(); + const attributeMap = utils.toObject(attributes, l => [l.name, l.value]); + + this.$widget.show(); + + this.$fileNoteId.text(note.noteId); + this.$fileName.text(attributeMap.originalFileName || "?"); + this.$fileType.text(note.mime); + + const noteComplement = await this.tabContext.getNoteComplement(); + + this.$fileSize.text(noteComplement.contentLength + " bytes"); + + // open doesn't work for protected notes since it works through browser which isn't in protected session + this.$openButton.toggle(!note.isProtected); + } +} diff --git a/src/public/app/widgets/type_widgets/file.js b/src/public/app/widgets/type_widgets/file.js index 7d47d41e1..1b81c14cd 100644 --- a/src/public/app/widgets/type_widgets/file.js +++ b/src/public/app/widgets/type_widgets/file.js @@ -1,7 +1,5 @@ import utils from "../../services/utils.js"; import openService from "../../services/open.js"; -import server from "../../services/server.js"; -import toastService from "../../services/toast.js"; import TypeWidget from "./type_widget.js"; const TPL = ` @@ -13,53 +11,21 @@ const TPL = ` .note-detail-file { padding: 10px; - display: flex; - flex-direction: column; height: 100%; } - - .file-table th, .file-table td { - padding: 5px; - overflow-wrap: anywhere; - } - + .file-preview-content { background-color: var(--accented-background-color); padding: 15px; - max-height: 300px; + height: 100%; overflow: auto; margin: 10px; } - - - - - - - - - - - - - - -
Note ID:Original file name:
File type:File size:

     
     
-
-    

-        
-         
-        
-         
-        
-    
-        
-    

 `;
 
 export default class FileTypeWidget extends TypeWidget {
@@ -68,50 +34,8 @@ export default class FileTypeWidget extends TypeWidget {
     doRender() {
         this.$widget = $(TPL);
         this.contentSized();
-        this.$fileNoteId = this.$widget.find(".file-note-id");
-        this.$fileName = this.$widget.find(".file-filename");
-        this.$fileType = this.$widget.find(".file-filetype");
-        this.$fileSize = this.$widget.find(".file-filesize");
         this.$previewContent = this.$widget.find(".file-preview-content");
         this.$pdfPreview = this.$widget.find(".pdf-preview");
-        this.$downloadButton = this.$widget.find(".file-download");
-        this.$openButton = this.$widget.find(".file-open");
-        this.$uploadNewRevisionButton = this.$widget.find(".file-upload-new-revision");
-        this.$uploadNewRevisionInput = this.$widget.find(".file-upload-new-revision-input");
-
-        this.$downloadButton.on('click', () => openService.downloadFileNote(this.noteId));
-        this.$openButton.on('click', () => openService.openFileNote(this.noteId));
-
-        this.$uploadNewRevisionButton.on("click", () => {
-            this.$uploadNewRevisionInput.trigger("click");
-        });
-
-        this.$uploadNewRevisionInput.on('change', async () => {
-            const fileToUpload = this.$uploadNewRevisionInput[0].files[0]; // copy to allow reset below
-            this.$uploadNewRevisionInput.val('');
-
-            const formData = new FormData();
-            formData.append('upload', fileToUpload);
-
-            const result = await $.ajax({
-                url: baseApiUrl + 'notes/' + this.noteId + '/file',
-                headers: await server.getHeaders(),
-                data: formData,
-                type: 'PUT',
-                timeout: 60 * 60 * 1000,
-                contentType: false, // NEEDED, DON'T REMOVE THIS
-                processData: false, // NEEDED, DON'T REMOVE THIS
-            });
-
-            if (result.uploaded) {
-                toastService.showMessage("New file revision has been uploaded.");
-
-                this.refresh();
-            }
-            else {
-                toastService.showError("Upload of a new file revision failed.");
-            }
-        });
     }
 
     async doRefresh(note) {
@@ -120,13 +44,8 @@ export default class FileTypeWidget extends TypeWidget {
 
         this.$widget.show();
 
-        this.$fileNoteId.text(note.noteId);
-        this.$fileName.text(attributeMap.originalFileName || "?");
-        this.$fileType.text(note.mime);
-
         const noteComplement = await this.tabContext.getNoteComplement();
 
-        this.$fileSize.text(noteComplement.contentLength + " bytes");
         this.$previewContent.empty().hide();
         this.$pdfPreview.attr('src', '').empty().hide();
 
@@ -138,8 +57,5 @@ export default class FileTypeWidget extends TypeWidget {
             this.$pdfPreview.show();
             this.$pdfPreview.attr("src", openService.getUrlForDownload("api/notes/" + this.noteId + "/open"));
         }
-
-        // open doesn't work for protected notes since it works through browser which isn't in protected session
-        this.$openButton.toggle(!note.isProtected);
     }
 }