Notes/apps/client/src/widgets/ribbon_widgets/file_properties.ts

import server from "../../services/server.js";
import NoteContextAwareWidget from "../note_context_aware_widget.js";
import toastService from "../../services/toast.js";
import openService from "../../services/open.js";
import utils from "../../services/utils.js";
import protectedSessionHolder from "../../services/protected_session_holder.js";
import { t } from "../../services/i18n.js";
import type FNote from "../../entities/fnote.js";

const TPL = /*html*/`
<div class="file-properties-widget">
    <style>
        .file-table {
            width: 100%;
            margin-top: 10px;
        }

        .file-table th, .file-table td {
            padding: 5px;
            overflow-wrap: anywhere;
        }

        .file-buttons {
            padding: 10px;
            display: flex;
            justify-content: space-evenly;
        }
    </style>

    <table class="file-table">
        <tr>
            <th class="text-nowrap">${t("file_properties.note_id")}:</th>
            <td class="file-note-id"></td>
            <th class="text-nowrap">${t("file_properties.original_file_name")}:</th>
            <td class="file-filename"></td>
        </tr>
        <tr>
            <th class="text-nowrap">${t("file_properties.file_type")}:</th>
            <td class="file-filetype"></td>
            <th class="text-nowrap">${t("file_properties.file_size")}:</th>
            <td class="file-filesize"></td>
        </tr>

        <tr>
            <td colspan="4">
                <div class="file-buttons">
                    <button class="file-download btn btn-sm btn-primary" type="button">
                        <span class="bx bx-download"></span>
                        ${t("file_properties.download")}
                    </button>

                    <button class="file-open btn btn-sm btn-primary" type="button">
                        <span class="bx bx-link-external"></span>
                        ${t("file_properties.open")}
                    </button>

                    <button class="file-upload-new-revision btn btn-sm btn-primary">
                        <span class="bx bx-folder-open"></span>
                        ${t("file_properties.upload_new_revision")}
                    </button>

                    <input type="file" class="file-upload-new-revision-input" style="display: none">
                </div>
            </td>
        </tr>
    </table>
</div>`;

export default class FilePropertiesWidget extends NoteContextAwareWidget {

    private $fileNoteId!: JQuery<HTMLElement>;
    private $fileName!: JQuery<HTMLElement>;
    private $fileType!: JQuery<HTMLElement>;
    private $fileSize!: JQuery<HTMLElement>;
    private $downloadButton!: JQuery<HTMLElement>;
    private $openButton!: JQuery<HTMLElement>;
    private $uploadNewRevisionButton!: JQuery<HTMLElement>;
    private $uploadNewRevisionInput!: JQuery<HTMLFormElement>;

    get name() {
        return "fileProperties";
    }

    get toggleCommand() {
        return "toggleRibbonTabFileProperties";
    }

    isEnabled() {
        return this.note && this.note.type === "file";
    }

    getTitle() {
        return {
            show: this.isEnabled(),
            activate: true,
            title: t("file_properties.title"),
            icon: "bx bx-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", () => this.noteId && openService.downloadFileNote(this.noteId));
        this.$openButton.on("click", () => this.noteId && this.note && openService.openNoteExternally(this.noteId, this.note.mime));

        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 result = await server.upload(`notes/${this.noteId}/file`, fileToUpload);

            if (result.uploaded) {
                toastService.showMessage(t("file_properties.upload_success"));

                this.refresh();
            } else {
                toastService.showError(t("file_properties.upload_failed"));
            }
        });
    }

    async refreshWithNote(note: FNote) {
        this.$widget.show();

        if (!this.note) {
            return;
        }

        this.$fileNoteId.text(note.noteId);
        this.$fileName.text(note.getLabelValue("originalFileName") || "?");
        this.$fileType.text(note.mime);

        const blob = await this.note.getBlob();

        this.$fileSize.text(utils.formatSize(blob?.contentLength ?? 0));

        // open doesn't work for protected notes since it works through a browser which isn't in protected session
        this.$openButton.toggle(!note.isProtected);
        this.$downloadButton.toggle(!note.isProtected || protectedSessionHolder.isProtectedSessionAvailable());
        this.$uploadNewRevisionButton.toggle(!note.isProtected || protectedSessionHolder.isProtectedSessionAvailable());
    }
}