import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { getDuplicateIssues } from '../../../api';
import '@shoelace-style/shoelace/dist/components/alert/alert.js';
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
import '@shoelace-style/shoelace/dist/components/menu/menu.js';
import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
@customElement('duplicates-view')
export class DuplicatesView extends LitElement {
static styles = css`
:host {
display: block;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--sl-spacing-large);
}
.container {
max-width: var(--console-container-max-width);
padding: var(--sl-spacing-x-large);
}
`;
@state()
private issues: any[] = [];
async connectedCallback() {
super.connectedCallback();
this.issues = await getDuplicateIssues();
}
render() {
return html`
<div class="container">
<div class="header">
<h1 class="title">Issues Dashboard</h1>
</div>
<div class="container">
${this.issues.length > 0
? html`
<sl-menu>
${this.issues.map(
(issue) => html`<sl-menu-item>${issue.title}</sl-menu-item>`
)}
</sl-menu>
`
: html`
<sl-alert variant="primary" open>
<sl-icon slot="icon" name="info-circle"></sl-icon>
No duplicate issues found.
</sl-alert>
`}
</div>
</div>
`;
}
}
