Kuba Orlik
bec96ac604
Summary: Ref T2764 Reviewers: #testers, kuba-orlik Reviewed By: #testers, kuba-orlik Subscribers: kuba-orlik, jenkins-user Maniphest Tasks: T2764 Differential Revision: https://hub.sealcode.org/D1406
106 lines
2.5 KiB
TypeScript
106 lines
2.5 KiB
TypeScript
import type { BaseContext } from "koa";
|
|
import { TempstreamJSX } from "tempstream";
|
|
import { ComponentPreviewActions } from "./component-preview-actions.js";
|
|
import type { JDDPageState } from "./jdd-page.js";
|
|
import JDDPage from "./jdd-page.js";
|
|
|
|
import move_row_down_icon from "./table-move-row-down.svg";
|
|
import move_row_up_icon from "./table-move-row-up.svg";
|
|
|
|
export default abstract class JDDCreator extends JDDPage {
|
|
actions = ComponentPreviewActions;
|
|
|
|
/**
|
|
* This method returns list of components allowed in JDD Editor instance.
|
|
* If list is empty it will allow all of the components in registry,
|
|
* if you overide this function you can decide on what components should
|
|
* available.
|
|
*/
|
|
getAllowedComponents(): string[] {
|
|
return [];
|
|
}
|
|
|
|
getRegistryCompoments() {
|
|
const all_components = super.getRegistryCompoments();
|
|
const allowed_components = this.getAllowedComponents();
|
|
|
|
if (allowed_components.length > 0) {
|
|
return Object.fromEntries(
|
|
Object.entries(all_components).filter(([name]) =>
|
|
allowed_components.includes(name)
|
|
)
|
|
);
|
|
}
|
|
|
|
return all_components;
|
|
}
|
|
|
|
renderParameterButtons(state: JDDPageState) {
|
|
{
|
|
/*The below button has to be here in order for it to be the default behavior */
|
|
}
|
|
return (
|
|
<div>
|
|
<input type="submit" value="Preview" />
|
|
<select name="component">
|
|
{Object.keys(this.getRegistryCompoments()).map((cmp) => (
|
|
<option value={cmp}>{cmp}</option>
|
|
))}
|
|
</select>
|
|
{this.makeActionButton(state, {
|
|
action: "add_component",
|
|
label: "Add component",
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
renderComponentBlock(
|
|
ctx: BaseContext,
|
|
state: JDDPageState,
|
|
component: {
|
|
component_name: string;
|
|
args: Record<string, unknown>;
|
|
},
|
|
component_index: number
|
|
) {
|
|
return (
|
|
<fieldset>
|
|
<legend>Component - {component.component_name}</legend>
|
|
{this.makeActionButton(
|
|
state,
|
|
{ action: "remove_component", label: "❌" },
|
|
component_index
|
|
)}
|
|
{this.makeActionButton(
|
|
state,
|
|
{
|
|
action: "move_component_up",
|
|
label: "Move this row up",
|
|
content: /* HTML */ `<img
|
|
width="20"
|
|
height="20"
|
|
src="${move_row_up_icon.url}"
|
|
/>`,
|
|
},
|
|
component_index
|
|
)}
|
|
{this.makeActionButton(
|
|
state,
|
|
{
|
|
action: "move_component_down",
|
|
label: "Move this row down",
|
|
content: /* HTML */ `<img
|
|
width="20"
|
|
height="20"
|
|
src="${move_row_down_icon.url}"
|
|
/>`,
|
|
},
|
|
component_index
|
|
)}
|
|
{super.renderComponentBlock(ctx, state, component, component_index)}
|
|
</fieldset>
|
|
);
|
|
}
|
|
}
|