@blinkk/editor
Version:
Structured content editor with live previews.
224 lines • 9.25 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.WorkspacesPart = void 0;
const selective_edit_1 = require("@blinkk/selective-edit");
const modal_1 = require("../../ui/modal");
const index_1 = require("./index");
const events_1 = require("../../events");
const features_1 = require("../../features");
const lodash_merge_1 = __importDefault(require("lodash.merge"));
const selective_edit_2 = require("@blinkk/selective-edit");
const template_1 = require("../../template");
const MODAL_KEY_NEW = 'menu_workspace_new';
class WorkspacesPart extends index_1.MenuSectionPart {
constructor(config) {
super(config);
document.addEventListener(events_1.EVENT_WORKSPACE_LOAD, (evt) => {
const customEvent = evt;
this.config.state.loadWorkspace(customEvent.detail);
});
}
classesForPart() {
const classes = super.classesForPart();
classes.le__part__menu__workspaces = true;
return classes;
}
classesForWorkspace(workspace) {
return {
le__clickable: true,
le__list__item: true,
'le__list__item--selected': this.config.state.workspace?.name === workspace.name,
};
}
getOrCreateModalNew(editor) {
if (!editor.parts.modals.modals[MODAL_KEY_NEW]) {
// Setup the editor.
const options = [];
for (const workspace of this.config.state.workspaces || []) {
options.push({
label: workspace.name,
value: workspace.branch.name,
});
}
const selectiveConfig = lodash_merge_1.default({
fields: [
{
type: 'radio',
key: 'base',
label: 'Parent workspace',
help: 'Workspace to start the new workspace from.',
options: options,
validation: [
{
type: 'require',
message: 'Parent workspace is required.',
},
],
},
{
type: 'text',
key: 'workspace',
label: 'New workspace name',
help: 'Used for the workspace url and the git branch.',
validation: [
{
type: 'require',
message: 'Workspace name is required.',
},
{
type: 'pattern',
pattern: '^[a-z0-9-]*$',
message: 'Workspace name can only contain lowercase alpha-numeric characters and - (dash).',
},
{
type: 'match',
excluded: {
values: ['main', 'master', 'staging'],
message: 'Workspace name cannot be "main", "master", or "staging".',
},
},
],
},
],
}, editor.config.selectiveConfig);
const modal = new modal_1.FormDialogModal({
title: 'New workspace',
selectiveConfig: selectiveConfig,
});
modal.templateModal = this.templateNewWorkspace.bind(this);
modal.actions.push({
label: 'Create workspace',
level: modal_1.DialogActionLevel.Primary,
isDisabledFunc: () => {
return modal.isProcessing || !modal.selective.isValid;
},
isSubmit: true,
onClick: () => {
const value = modal.selective.value;
modal.startProcessing();
// Find the full workspace information for the base workspace.
let baseWorkspace = undefined;
for (const workspace of this.config.state.workspaces || []) {
if (workspace.branch.name === value.base) {
baseWorkspace = workspace;
}
}
if (!baseWorkspace) {
modal.error = {
message: `Unable to find the base workspace information for '${value.base}'`,
};
modal.stopProcessing();
return;
}
this.config.state.createWorkspace(baseWorkspace, value.workspace, (workspace) => {
// Log the success to the notifications.
editor.parts.notifications.showNotification({
message: `New '${workspace.name}' workspace successfully created.`,
actions: [
{
label: 'Visit workspace',
customEvent: events_1.EVENT_WORKSPACE_LOAD,
details: workspace,
},
],
title: 'New workspace created',
});
// Reset the data for the next time the form is shown.
modal.data = new selective_edit_1.DeepObject();
modal.stopProcessing(true);
}, (error) => {
// Log the error to the notifications.
editor.parts.notifications.addError(error, true);
modal.error = error;
modal.stopProcessing();
});
},
});
modal.addCancelAction();
editor.parts.modals.modals[MODAL_KEY_NEW] = modal;
}
return editor.parts.modals.modals[MODAL_KEY_NEW];
}
loadWorkspace() {
this.config.state.getWorkspace();
}
loadWorkspaces() {
this.config.state.getWorkspaces();
}
templateContent(editor) {
// Lazy load the workspace information.
if (!this.config.state.workspace) {
this.loadWorkspace();
}
// Lazy load the workspaces information.
if (!this.config.state.workspaces) {
this.loadWorkspaces();
}
if (!this.config.state.workspaces) {
return template_1.templateLoading(editor, {
pad: true,
});
}
return selective_edit_1.html `<div class="le__part__menu__section__content">
<div class="le__list le__list--constrained le__list--indent">
${this.templateCreateWorkspace(editor)}
${selective_edit_2.repeat(this.config.state.workspaces || [], workspace => workspace.name, workspace => selective_edit_1.html `<div
class=${selective_edit_1.classMap(this.classesForWorkspace(workspace))}
=${() => {
this.config.state.loadWorkspace(workspace);
}}
>
<div class="le__list__item__icon">
<span class="material-icons">dashboard</span>
</div>
<div class="le__list__item__label">${workspace.name}</div>
</div>`)}
</div>
</div>`;
}
templateCreateWorkspace(editor) {
if (this.config.state.features.isOff(features_1.FeatureFlags.WorkspaceCreate)) {
return selective_edit_1.html ``;
}
const handleNewClick = () => {
const modal = this.getOrCreateModalNew(editor);
modal.show();
};
return selective_edit_1.html `<div
class="le__list__item le__list__item--primary le__clickable"
=${handleNewClick}
>
<div class="le__list__item__icon">
<span class="material-icons">add_circle</span>
</div>
<div class="le__list__item__label">
${editor.config.labels?.workspaceNew || 'Add workspace'}
</div>
</div>`;
}
templateNewWorkspace(editor) {
const modal = this.getOrCreateModalNew(editor);
const isValid = modal.selective.isValid;
try {
return modal.selective.template(modal.selective, modal.data);
}
finally {
if (isValid !== modal.selective.isValid) {
this.render();
}
}
}
templateTitle(editor) {
return selective_edit_1.html `<div class="le__part__menu__section__title">
${editor.config.labels?.menuWorkspaces || this.title}
</div>`;
}
get title() {
return 'Workspaces';
}
}
exports.WorkspacesPart = WorkspacesPart;
//# sourceMappingURL=workspaces.js.map