wip attachment widget

src/public/app/widgets/attachment_detail.js

@@ -1,5 +1,3 @@
-import TypeWidget from "./type_widget.js";
-import server from "../../services/server.js";
 import utils from "../../services/utils.js";
 import AttachmentActionsWidget from "../buttons/attachments_actions.js";
 import BasicWidget from "./basic_widget.js";
@@ -36,7 +34,16 @@ const TPL = `
         }
     </style>
 
-    <div class="attachment-detail-wrapper"></div>
+    <div class="attachment-detail-wrapper">
+        <div class="attachment-title-line">
+            <h4 class="attachment-title"></h4>                
+            <div class="attachment-details"></div>
+            <div style="flex: 1 1;">
+            <div class="attachment-actions-container"></div>
+        </div>
+        
+        <div class="attachment-content"></div>
+    </div>
 </div>`;
 
 export default class AttachmentDetailWidget extends BasicWidget {
@@ -44,56 +51,27 @@ export default class AttachmentDetailWidget extends BasicWidget {
         super();
 
         this.attachment = attachment;
+        this.attachmentActionsWidget = new AttachmentActionsWidget(attachment);
+        this.child(this.attachmentActionsWidget);
     }
 
     doRender() {
         this.$widget = $(TPL);
         this.$wrapper = this.$widget.find('.attachment-detail-wrapper');
+        this.$wrapper.find('.attachment-title').text(this.attachment.title);
+        this.$wrapper.find('.attachment-details')
+            .text(`Role: ${this.attachment.role}, Size: ${utils.formatSize(this.attachment.contentLength)}`);
+        this.$wrapper.find('.attachment-actions-container').append(this.attachmentActionsWidget.render());
+        this.$wrapper.find('.attachment-content').append(this.renderContent());
 
         super.doRender();
     }
 
-    async doRefresh(note) {
+    renderContent() {
-        this.$list.empty();
+        if (this.attachment.content) {
-        this.children = [];
+            return $("<pre>").text(this.attachment.content);
-
+        } else if (this.attachment.role === 'image') {
-        const attachments = await server.get(`notes/${this.noteId}/attachments?includeContent=true`);
+            return `<img src="api/notes/${this.attachment.parentId}/images/${this.attachment.attachmentId}/${encodeURIComponent(this.attachment.title)}?${this.attachment.utcDateModified}">`;
-
-        if (attachments.length === 0) {
-            this.$list.html("<strong>This note has no attachments.</strong>");
-
-            return;
-        }
-
-        for (const attachment of attachments) {
-            const attachmentActionsWidget = new AttachmentActionsWidget(attachment);
-            this.child(attachmentActionsWidget);
-
-            this.$list.append(
-                $('<div class="attachment-detail-wrapper">')
-                    .append(
-                        $('<div class="attachment-title-line">')
-                            .append($('<h4>').append($('<span class="attachment-title">').text(attachment.title)))
-                            .append(
-                                $('<div class="attachment-details">')
-                                    .text(`Role: ${attachment.role}, Size: ${utils.formatSize(attachment.contentLength)}`)
-                            )
-                            .append($('<div style="flex: 1 1;">')) // spacer
-                            .append(attachmentActionsWidget.render())
-                    )
-                    .append(
-                        $('<div class="attachment-content">')
-                            .append(this.renderContent(attachment))
-                    )
-            );
-        }
-    }
-
-    renderContent(attachment) {
-        if (attachment.content) {
-            return $("<pre>").text(attachment.content);
-        } else if (attachment.role === 'image') {
-            return `<img src="api/notes/${attachment.parentId}/images/${attachment.attachmentId}/${encodeURIComponent(attachment.title)}?${attachment.utcDateModified}">`;
         } else {
             return '';
         }

src/public/app/widgets/buttons/attachments_actions.js

@@ -1,5 +1,6 @@
 import BasicWidget from "../basic_widget.js";
 import server from "../../services/server.js";
+import dialogService from "../../services/dialog.js";
 
 const TPL = `
 <div class="dropdown attachment-actions">
@@ -39,9 +40,12 @@ export default class AttachmentActionsWidget extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
+        this.$widget.on('click', '.dropdown-item', () => this.$widget.find("[data-toggle='dropdown']").dropdown('toggle'));
     }
 
     async deleteAttachmentCommand() {
+        if (await dialogService.confirm(`Are you sure you want to delete attachment '${this.attachment.title}'?`)) {
             await server.remove(`notes/${this.attachment.parentId}/attachments/${this.attachment.attachmentId}`);
         }
     }
+}

src/public/app/widgets/dialogs/note_revisions.js

@@ -234,8 +234,6 @@ export default class NoteRevisionsDialog extends BasicWidget {
 
         const fullNoteRevision = await server.get(`notes/${revisionItem.noteId}/revisions/${revisionItem.noteRevisionId}`);
 
-        console.log(fullNoteRevision);
-
         if (revisionItem.type === 'text') {
             this.$content.html(fullNoteRevision.content);
 

src/public/app/widgets/type_widgets/attachments.js

@@ -2,6 +2,7 @@ import TypeWidget from "./type_widget.js";
 import server from "../../services/server.js";
 import utils from "../../services/utils.js";
 import AttachmentActionsWidget from "../buttons/attachments_actions.js";
+import AttachmentDetailWidget from "../attachment_detail.js";
 
 const TPL = `
 <div class="attachments note-detail-printable">
@@ -9,34 +10,6 @@ const TPL = `
         .attachments {
             padding: 15px;
         }
-        
-        .attachment-wrapper {
-            margin-bottom: 20px;
-        }
-        
-        .attachment-title-line {
-            display: flex;
-            align-items: baseline;
-        }
-        
-        .attachment-details {
-            margin-left: 10px;
-        }
-        
-        .attachment-content pre {
-            max-height: 400px;
-            background: var(--accented-background-color);
-            padding: 10px;
-            margin-top: 10px;
-            margin-bottom: 10px;
-        }
-        
-        .attachment-content img {
-            margin: 10px;
-            max-height: 300px; 
-            max-width: 90%; 
-            object-fit: contain;
-        }
     </style>
 
     <div class="attachment-list"></div>
@@ -65,36 +38,10 @@ export default class AttachmentsTypeWidget extends TypeWidget {
         }
 
         for (const attachment of attachments) {
-            const attachmentActionsWidget = new AttachmentActionsWidget(attachment);
+            const attachmentDetailWidget = new AttachmentDetailWidget(attachment);
-            this.child(attachmentActionsWidget);
+            this.child(attachmentDetailWidget);
 
-            this.$list.append(
+            this.$list.append(attachmentDetailWidget.render());
-                $('<div class="attachment-wrapper">')
-                    .append(
-                        $('<div class="attachment-title-line">')
-                            .append($('<h4>').append($('<span class="attachment-title">').text(attachment.title)))
-                            .append(
-                                $('<div class="attachment-details">')
-                                    .text(`Role: ${attachment.role}, Size: ${utils.formatSize(attachment.contentLength)}`)
-                            )
-                            .append($('<div style="flex: 1 1;">')) // spacer
-                            .append(attachmentActionsWidget.render())
-                    )
-                    .append(
-                        $('<div class="attachment-content">')
-                            .append(this.renderContent(attachment))
-                    )
-            );
-        }
-    }
-
-    renderContent(attachment) {
-        if (attachment.content) {
-            return $("<pre>").text(attachment.content);
-        } else if (attachment.role === 'image') {
-            return `<img src="api/notes/${attachment.parentId}/images/${attachment.attachmentId}/${encodeURIComponent(attachment.title)}?${attachment.utcDateModified}">`;
-        } else {
-            return '';
         }
     }
 }