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 | 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 67x 67x 67x 67x 67x 67x 67x 67x 67x 67x 67x 67x 67x 96x 67x 67x 67x 96x 96x 96x 96x 96x | 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>
`;
}
}
|