@blinkk/editor/dist/src/editor/parts/overview.js

Structured content editor with live previews.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.OverviewPart = void 0;
const api_1 = require("../api");
const _1 = require(".");
const selective_edit_1 = require("@blinkk/selective-edit");
const modal_1 = require("../ui/modal");
const events_1 = require("../events");
const javascript_time_ago_1 = __importDefault(require("javascript-time-ago"));
const lodash_merge_1 = __importDefault(require("lodash.merge"));
const MODAL_KEY_PUBLISH = 'overview_publish';
class OverviewPart extends _1.BasePart {
    constructor(config) {
        super();
        this.config = config;
        this.timeAgo = new javascript_time_ago_1.default('en-US');
    }
    classesForPart() {
        return {
            le__part__overview: true,
        };
    }
    getOrCreateModalPublish(editor, fields) {
        if (!editor.parts.modals.modals[MODAL_KEY_PUBLISH]) {
            const selectiveConfig = lodash_merge_1.default({
                fields: fields,
            }, editor.config.selectiveConfig);
            const modal = new modal_1.FormDialogModal({
                title: editor.config.labels?.publishModalTitle || 'Publish',
                selectiveConfig: selectiveConfig,
            });
            modal.templateModal = this.templatePublishWorkspace.bind(this);
            modal.actions.push({
                label: editor.config.labels?.publishModalSubmit || 'Publish',
                level: modal_1.DialogActionLevel.Primary,
                isDisabledFunc: () => {
                    return modal.isProcessing || !modal.selective.isValid;
                },
                isSubmit: true,
                onClick: () => {
                    this.isPendingPublish = true;
                    modal.startProcessing();
                    const value = modal.selective.value;
                    const workspace = this.config.state.workspace;
                    if (!workspace) {
                        return;
                    }
                    this.config.state.publish(workspace, value, (result) => {
                        this.showPublishResult(editor, result);
                        // Reset the data for the next time the form is shown.
                        modal.data = new selective_edit_1.DeepObject();
                        this.isPendingPublish = false;
                        modal.stopProcessing(true);
                    }, (error) => {
                        // Log the error to the notifications.
                        editor.parts.notifications.addError(error, true);
                        modal.error = error;
                        this.isPendingPublish = false;
                        modal.stopProcessing();
                    });
                },
            });
            modal.addCancelAction();
            editor.parts.modals.modals[MODAL_KEY_PUBLISH] = modal;
        }
        return editor.parts.modals.modals[MODAL_KEY_PUBLISH];
    }
    handlePublishClick(evt, editor) {
        const project = this.config.state.project;
        const workspace = this.config.state.workspace;
        // Lazy load the project.
        if (!project) {
            this.loadProject();
        }
        // Lazy load the workspace.
        if (!workspace) {
            this.loadWorkspace();
        }
        if (!workspace || !project) {
            return;
        }
        // Check if the workspace is already in progress.
        if (workspace.publish?.status === api_1.PublishStatus.Pending) {
            // Open the url when there is a pending publish.
            if (workspace.publish.urls?.length) {
                const urlData = workspace.publish.urls[0];
                window.open(urlData.url, '_blank');
            }
            return;
        }
        if (!(project.publish?.fields || []).length) {
            // No fields defined for publishing.
            // Call the api for publishing without collecting data.
            this.isPendingPublish = true;
            this.render();
            this.config.state.publish(workspace, {}, (result) => {
                this.isPendingPublish = false;
                this.showPublishResult(editor, result);
            });
            return;
        }
        // Need to collect additional data, show the modal for the form.
        const modal = this.getOrCreateModalPublish(editor, project.publish?.fields || []);
        modal.show();
    }
    loadProject() {
        this.config.state.getProject();
    }
    loadWorkspace() {
        this.config.state.getWorkspace();
    }
    showPublishResult(editor, result) {
        console.log('publish result', result);
        const actions = [];
        const currentWorkspace = this.config.state.workspace;
        let message = '';
        if ([api_1.PublishStatus.Complete].includes(result.status)) {
            message = `Published '${currentWorkspace?.name}' workspace successfully.`;
            if (result.workspace?.name &&
                currentWorkspace?.name !== result.workspace?.name) {
                message = `${message} The current workspace is no longer available,
          please switch to the '${result.workspace?.name}' workspace to continue
          editing.`;
                actions.push({
                    label: `Switch to ${result.workspace?.name} workspace`,
                    customEvent: events_1.EVENT_WORKSPACE_LOAD,
                    details: result.workspace,
                });
            }
            editor.parts.notifications.showNotification({
                actions: actions,
                message: message,
                title: 'Workspace published',
            });
        }
        this.render();
    }
    template(editor) {
        return selective_edit_1.html `<div class=${selective_edit_1.classMap(this.classesForPart())}>
      ${this.templateMenu(editor)} ${this.templateProject(editor)}
      ${this.templateWorkspace(editor)} ${this.templatePublish(editor)}
      ${editor.parts.notifications.template(editor)}
    </div>`;
    }
    templateMenu(editor) {
        if (editor.parts.menu.isDocked) {
            return selective_edit_1.html ``;
        }
        const handleMenuClick = () => {
            editor.parts.menu.toggle();
        };
        return selective_edit_1.html `<div
      class="le__part__overview__menu le__clickable"
      @click=${handleMenuClick}
    >
      <span class="material-icons">menu</span>
    </div>`;
    }
    templateProject(editor) {
        const project = this.config.state.project;
        // Lazy load the project.
        if (!project) {
            this.loadProject();
        }
        let projectName = project?.title || selective_edit_1.html `&nbsp;`;
        // Menu shows the project name when it is docked.
        if (editor.parts.menu.isDocked) {
            projectName = selective_edit_1.html `&nbsp;`;
        }
        return selective_edit_1.html `<div class="le__part__overview__title">${projectName}</div>`;
    }
    templatePublish(editor) {
        const project = this.config.state.project;
        const workspace = this.config.state.workspace;
        // Lazy load the project.
        if (!project) {
            this.loadProject();
        }
        // Lazy load the workspace.
        if (!workspace) {
            this.loadWorkspace();
        }
        if (!workspace || !project) {
            return selective_edit_1.html ``;
        }
        // Check if the project does not allow publishing.
        const hasProjectPublish = project?.publish !== undefined;
        if (!hasProjectPublish) {
            return selective_edit_1.html ``;
        }
        // Get the current status from the workspace.
        const status = workspace?.publish?.status || api_1.PublishStatus.NotStarted;
        // Check if the workspace does not allow publishing.
        if (status === api_1.PublishStatus.NotAllowed) {
            return selective_edit_1.html ``;
        }
        let label = editor.config.labels?.publishNotStarted || 'Publish';
        if (this.isPendingPublish || status === api_1.PublishStatus.Pending) {
            label = editor.config.labels?.publishPending || 'Pending';
        }
        else if (status === api_1.PublishStatus.NoChanges) {
            label = editor.config.labels?.publishNoChanges || 'No changes';
        }
        else if (status === api_1.PublishStatus.Complete) {
            label = editor.config.labels?.publishComplete || 'Published';
        }
        else if (status === api_1.PublishStatus.Failure) {
            label = editor.config.labels?.publishFailure || 'Publish error';
        }
        return selective_edit_1.html `<div class="le__part__overview__publish">
      <button
        class=${selective_edit_1.classMap({
            le__button: true,
            'le__button--on-secondary': true,
            'le__button--secondary': [
                api_1.PublishStatus.Complete,
                api_1.PublishStatus.NoChanges,
                api_1.PublishStatus.NotStarted,
                api_1.PublishStatus.Pending,
            ].includes(status),
            'le__button--extreme': [api_1.PublishStatus.Failure].includes(status),
        })}
        @click=${(evt) => {
            this.handlePublishClick(evt, editor);
        }}
        ?disabled=${[
            api_1.PublishStatus.NoChanges,
            api_1.PublishStatus.NotAllowed,
        ].includes(status)}
      >
        ${label}
      </button>
    </div>`;
    }
    templatePublishWorkspace(editor) {
        const modal = this.getOrCreateModalPublish(editor, []);
        const isValid = modal.selective.isValid;
        try {
            return modal.selective.template(modal.selective, modal.data);
        }
        finally {
            if (isValid !== modal.selective.isValid) {
                this.render();
            }
        }
    }
    templateWorkspace(editor) {
        const workspace = this.config.state.workspace;
        // Lazy load the workspace.
        if (!workspace) {
            this.loadWorkspace();
        }
        const workspaceCommitHash = (workspace?.branch.commit.hash || '...').slice(0, 5);
        const workspaceName = workspace?.name || '...';
        return selective_edit_1.html `<div class="le__part__overview__workspace">
      <strong
        >${workspace?.branch.url
            ? selective_edit_1.html `<a href="${workspace?.branch.url}" target="_blank"
              >${workspaceName}</a
            >`
            : workspaceName}</strong
      >
      @
      <strong>
        ${workspace?.branch.commit.url
            ? selective_edit_1.html `<a href="${workspace?.branch.commit.url}" target="_blank"
              >${workspaceCommitHash}</a
            >`
            : workspaceCommitHash}
      </strong>
      by
      <strong>${workspace?.branch.commit.author?.name || '...'}</strong>
      (${workspace?.branch?.commit.timestamp
            ? this.timeAgo.format(new Date(workspace?.branch?.commit.timestamp || new Date()))
            : '...'})
    </div>`;
    }
}
exports.OverviewPart = OverviewPart;
//# sourceMappingURL=overview.js.map