blob: 9a57509a7007e71ba38f474ff6501ea14b0ec075 [file] [log] [blame]
import './actions/ReplyWithCR.js';
import '@material/mwc-circular-progress/mwc-circular-progress.js';
import {html, LitElement, nothing} from 'lit';
import {map} from 'lit/directives/map.js';
import {createRef, ref} from 'lit/directives/ref.js';
import * as pb from '../../proto/main_pb.js';
import {kActionHeadings, kActionStyles, kSupportedActions} from '../shared/actions.js';
const actionCases = Object.entries(pb.workflows.Action.ActionCase);
export default class WFActionEditor extends LitElement {
static properties = {
action: {type: Object},
readOnly: {type: Boolean},
disableRemoveButton: {type: Boolean},
step: {type: Number},
status: {type: String},
};
static styles = kActionStyles;
selectRef = createRef();
constructor() {
super();
this.action = new pb.workflows.Action();
this.readOnly = false;
}
renderActionTitle() {
if (this.readOnly) return html`<h3 class="title">${this._stepTitle()}</h3>`;
let selectedActionCase = this._actionCase;
return html`
<select ${ref(this.selectRef)}
class="select"
@change=${this._actionCaseChanged}>
${map(actionCases, ([actionName, num]) => {
if (!kSupportedActions.has(num)) return nothing;
return html`
<option value=${num} ?selected=${selectedActionCase == num}>
${kActionHeadings[num] ?? actionName}
</option>
`;
})}
</select>
`;
}
renderSpecificActionEditor() {
switch (this._actionCase) {
case pb.workflows.Action.ActionCase.REPLY_WITH_CR_ACTION:
return html`
<wf-action-reply-with-cr
?readOnly=${this.readOnly}
.action=${this.action.getReplyWithCrAction()}>
</wf-action-reply-with-cr>
`;
case pb.workflows.Action.ActionCase.MARK_AS_READ_ACTION:
case pb.workflows.Action.ActionCase.MARK_AS_UNREAD_ACTION:
return nothing;
default:
return html`<p>This action has not yet been implemented.</p>`;
}
}
render() {
let actionClass = '';
if (this.readOnly && this.status) actionClass = 'action--' + this.status;
return html`
<div class="action ${actionClass}">
<div class="header">
<div class="step">
${this.step}
${
this.status == 'running' ?
html`<mwc-circular-progress indeterminate density="-1"></mwc-circular-progress>` :
''}
</div>
${this.renderActionTitle()}
${
!this.readOnly ? html`
<button
?disabled=${this.disableRemoveButton}
@click=${this._remove}>
Remove
</button>
` :
nothing}
</div>
${this.renderSpecificActionEditor()}
</div>
`;
}
checkValidity() {
if (this.readOnly || !kSupportedActions.has(this._actionCase)) return true;
const s = this._specificActionEditor();
if (!s) return true;
return this._specificActionEditor().checkValidity();
}
_actionCaseChanged() {
this._actionCaseString = this.selectRef.value.value;
}
_dispatchUpdateEvent() {
// Transmit to other components that the action has changed
const e = new Event('action-updated', {bubbles: true, composed: true});
this.renderRoot.dispatchEvent(e);
}
_remove() {
// Transmit to other components that the action has to be removed
const e = new Event('action-removed', {bubbles: true, composed: true});
this.renderRoot.dispatchEvent(e);
}
_stepTitle() {
return kActionHeadings[this._actionCase] ?? this._actionCase;
}
get _actionCase() {
return this.action.getActionCase();
}
set _actionCase(newCase) {
let value;
switch (newCase) {
case pb.workflows.Action.ActionCase.REPLY_ACTION:
value = new pb.workflows.Action.ReplyAction;
this.action.setReplyAction(value);
break;
case pb.workflows.Action.ActionCase.MOVE_ACTION:
value = new pb.workflows.Action.MoveAction;
this.action.setMoveAction(value);
break;
case pb.workflows.Action.ActionCase.MARK_DUPLICATE_ACTION:
value = new pb.workflows.Action.MarkDuplicateAction;
this.action.setMarkDuplicateAction(value);
break;
case pb.workflows.Action.ActionCase.UNMARK_DUPLICATE_ACTION:
value = new pb.workflows.Action.UnmarkDuplicateAction;
this.action.setUnmarkDuplicateAction(value);
break;
case pb.workflows.Action.ActionCase.ATTRIBUTE_ACTION:
value = new pb.workflows.Action.AttributeAction;
this.action.setAttributeAction(value);
break;
case pb.workflows.Action.ActionCase.REPLY_WITH_CR_ACTION:
value = new pb.workflows.Action.ReplyWithCRAction;
this.action.setReplyWithCrAction(value);
break;
case pb.workflows.Action.ActionCase.STAR_ACTION:
value = new pb.workflows.Action.StarAction;
this.action.setStarAction(value);
break;
case pb.workflows.Action.ActionCase.SUBSCRIBE_ACTION:
value = new pb.workflows.Action.SubscribeAction;
this.action.setSubscribeAction(value);
break;
case pb.workflows.Action.ActionCase.VOTE_ACTION:
value = new pb.workflows.Action.VoteAction;
this.action.setVoteAction(value);
break;
case pb.workflows.Action.ActionCase.REPORT_ACTION:
value = new pb.workflows.Action.ReportAction;
this.action.setReportAction(value);
break;
case pb.workflows.Action.ActionCase.MARK_AS_READ_ACTION:
value = new pb.workflows.Action.MarkAsReadAction;
this.action.setMarkAsReadAction(value);
break;
case pb.workflows.Action.ActionCase.MARK_AS_UNREAD_ACTION:
value = new pb.workflows.Action.MarkAsUnreadAction;
this.action.setMarkAsUnreadAction(value);
break;
default:
this.action.clearReplyAction();
this.action.clearMoveAction();
this.action.clearMarkDuplicateAction();
this.action.clearUnmarkDuplicateAction();
this.action.clearAttributeAction();
this.action.clearReplyWithCrAction();
this.action.clearStarAction();
this.action.clearSubscribeAction();
this.action.clearVoteAction();
this.action.clearReportAction();
this.action.clearMarkAsReadAction();
this.action.clearMarkAsUnreadAction();
}
this.requestUpdate();
this._dispatchUpdateEvent();
}
// The same as _actionCase, but represented as a String instead of a Number
get _actionCaseString() {
return this._actionCase.toString();
}
set _actionCaseString(newCase) {
this._actionCase = parseInt(newCase);
}
_specificActionEditor() {
switch (this._actionCase) {
case pb.workflows.Action.ActionCase.REPLY_WITH_CR_ACTION:
return this.renderRoot.querySelector('wf-action-reply-with-cr');
default:
return null;
}
}
}
window.customElements.define('wf-action-editor', WFActionEditor);