Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 129x 100x 100x 100x 100x 100x 100x 100x 100x 100x 100x 100x 100x 100x 129x 100x 100x 100x 129x 129x 129x 129x 129x | import { html, TemplateResult } from 'lit-html';
import { css } from 'lit';
import { property } from 'lit/decorators.js';
import { RapidElement } from '../RapidElement';
import { CustomEventType } from '../interfaces';
import { FlowIssue } from '../store/AppState';
import { formatIssueMessage } from './utils';
export class IssuesWindow extends RapidElement {
static get styles() {
return css`
:host {
display: contents;
}
.issue-list-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: 4px;
cursor: pointer;
}
.issue-list-item:hover {
background: #fff1f0;
}
`;
}
@property({ type: Array })
issues: FlowIssue[] = [];
@property({ type: Boolean })
hidden = true;
private handleItemClick(issue: FlowIssue): void {
this.fireCustomEvent(CustomEventType.IssueSelected, { issue });
}
public render(): TemplateResult | string {
if (!this.issues?.length) return '';
return html`
<temba-floating-window
id="issues-window"
name="issues"
header="Flow Issues"
icon="alert_warning"
.width=${360}
.maxHeight=${600}
.top=${120}
color="tomato"
.hidden=${this.hidden}
@temba-dialog-hidden=${() =>
this.fireCustomEvent(CustomEventType.IssuesClosed)}
>
<div style="display:flex; flex-direction:column; gap:2px;">
${this.issues.map(
(issue) => html`
<div
class="issue-list-item"
@click=${() => this.handleItemClick(issue)}
>
<temba-icon name="alert_warning" size="1.2"></temba-icon>
<span>${formatIssueMessage(issue)}</span>
</div>
`
)}
</div>
</temba-floating-window>
`;
}
}
|