Skip to content

Commit 02a665e

Browse files
SuaYooSuaYoo
committed
refactor component
1 parent 899d649 commit 02a665e

File tree

4 files changed

+160
-152
lines changed

4 files changed

+160
-152
lines changed

‎frontend/src/features/archived-items/archived-item-list.ts‎ renamed to ‎frontend/src/features/archived-items/archived-item-list/archived-item-list-item.ts‎

Lines changed: 4 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,17 @@
11
import { localized, msg, str } from "@lit/localize";
22
import type { SlCheckbox, SlHideEvent } from "@shoelace-style/shoelace";
3-
import { css, html, nothing, type TemplateResult } from "lit";
4-
import {
5-
customElement,
6-
property,
7-
query,
8-
queryAssignedElements,
9-
state,
10-
} from "lit/decorators.js";
3+
import { css, html, nothing } from "lit";
4+
import { customElement, property, query } from "lit/decorators.js";
115
import { ifDefined } from "lit/directives/if-defined.js";
126

13-
import { CrawlStatus } from "./crawl-status";
7+
import type { CheckboxChangeEventDetail } from "./types";
148

159
import { BtrixElement } from "@/classes/BtrixElement";
16-
import { TailwindElement } from "@/classes/TailwindElement";
10+
import { CrawlStatus } from "@/features/archived-items/crawl-status";
1711
import { ReviewStatus, type ArchivedItem } from "@/types/crawler";
1812
import { renderName } from "@/utils/crawler";
1913
import localize from "@/utils/localize";
2014

21-
export type CheckboxChangeEventDetail = {
22-
checked: boolean;
23-
};
24-
2515
/**
2616
* @slot actionCell - Action cell
2717
* @fires btrix-checkbox-change
@@ -340,141 +330,3 @@ export class ArchivedItemListItem extends BtrixElement {
340330
this.rowLink?.click();
341331
}
342332
}
343-
344-
/**
345-
* @example Usage:
346-
* ```ts
347-
* <btrix-archived-item-list>
348-
* <btrix-archived-item-list-item .item=${item}
349-
* ></btrix-archived-item-list-item>
350-
* </btrix-archived-item-list>
351-
* ```
352-
*
353-
* @slot checkboxCell
354-
* @slot actionCell
355-
*/
356-
@customElement("btrix-archived-item-list")
357-
@localized()
358-
export class ArchivedItemList extends TailwindElement {
359-
static styles = css`
360-
btrix-table {
361-
--btrix-table-cell-gap: var(--sl-spacing-x-small);
362-
--btrix-table-cell-padding-x: var(--sl-spacing-small);
363-
}
364-
365-
btrix-table-body ::slotted(*:nth-of-type(n + 2)) {
366-
--btrix-border-top: 1px solid var(--sl-panel-border-color);
367-
}
368-
369-
btrix-table-body ::slotted(*:first-of-type) {
370-
--btrix-border-radius-top: var(--sl-border-radius-medium);
371-
}
372-
373-
btrix-table-body ::slotted(*:last-of-type) {
374-
--btrix-border-radius-bottom: var(--sl-border-radius-medium);
375-
}
376-
`;
377-
378-
@property({ type: String })
379-
listType: ArchivedItem["type"] | null = null;
380-
381-
@queryAssignedElements({ selector: "btrix-archived-item-list-item" })
382-
public items!: ArchivedItemListItem[];
383-
384-
@state()
385-
private hasCheckboxCell = false;
386-
387-
@state()
388-
private hasActionCell = false;
389-
390-
render() {
391-
const headerCols: { cssCol: string; cell: TemplateResult<1> | symbol }[] = [
392-
{
393-
cssCol: "min-content",
394-
cell: html`<btrix-table-header-cell>
395-
${msg("Status")}
396-
</btrix-table-header-cell>`,
397-
},
398-
{
399-
cssCol: "[clickable-start] 50ch",
400-
cell: html`<btrix-table-header-cell>
401-
${msg("Name")}
402-
</btrix-table-header-cell>`,
403-
},
404-
{
405-
cssCol: "1fr",
406-
cell: html`<btrix-table-header-cell>
407-
${msg("Date Created")}
408-
</btrix-table-header-cell>`,
409-
},
410-
{
411-
cssCol: "1fr",
412-
cell: html`<btrix-table-header-cell>
413-
${msg("Size")}
414-
</btrix-table-header-cell>`,
415-
},
416-
{
417-
cssCol: "1fr",
418-
cell: html`<btrix-table-header-cell>
419-
${msg("Pages")}
420-
</btrix-table-header-cell>`,
421-
},
422-
{
423-
cssCol: "1fr",
424-
cell: html`<btrix-table-header-cell>
425-
${msg("QA Analysis Runs")}
426-
</btrix-table-header-cell>`,
427-
},
428-
{
429-
cssCol: "1fr",
430-
cell: html`<btrix-table-header-cell>
431-
${msg("QA Rating")}
432-
</btrix-table-header-cell>`,
433-
},
434-
];
435-
if (this.hasCheckboxCell) {
436-
headerCols.unshift({
437-
cssCol: "min-content",
438-
cell: nothing, // renders into slot
439-
});
440-
}
441-
if (this.hasActionCell) {
442-
headerCols.push({
443-
cssCol: "[clickable-end] min-content",
444-
cell: nothing, // renders into slot
445-
});
446-
}
447-
448-
return html`
449-
<style>
450-
btrix-table {
451-
--btrix-table-grid-template-columns: ${headerCols
452-
.map(({ cssCol }) => cssCol)
453-
.join(" ")};
454-
}
455-
</style>
456-
<btrix-overflow-scroll class="-mx-5 part-[content]:px-5">
457-
<btrix-table>
458-
<btrix-table-head class="mb-2">
459-
<slot
460-
name="checkboxCell"
461-
@slotchange=${(e: Event) =>
462-
(this.hasCheckboxCell =
463-
(e.target as HTMLSlotElement).assignedElements().length > 0)}
464-
></slot>
465-
${headerCols.map(({ cell }) => cell)}
466-
<slot
467-
name="actionCell"
468-
@slotchange=${(e: Event) =>
469-
(this.hasActionCell =
470-
(e.target as HTMLSlotElement).assignedElements().length > 0)}
471-
></slot>
472-
</btrix-table-head>
473-
<btrix-table-body class="rounded border">
474-
<slot></slot>
475-
</btrix-table-body>
476-
</btrix-table>
477-
</btrix-overflow-scroll>
478-
`;
479-
}
480-
}

‎frontend/src/features/archived-items/archived-item-list/archived-item-list.ts‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import { localized, msg } from "@lit/localize";
2+
import { css, html, nothing, type TemplateResult } from "lit";
3+
import {
4+
customElement,
5+
property,
6+
queryAssignedElements,
7+
state,
8+
} from "lit/decorators.js";
9+
10+
import type { ArchivedItemListItem } from "./archived-item-list-item";
11+
12+
import { TailwindElement } from "@/classes/TailwindElement";
13+
import { type ArchivedItem } from "@/types/crawler";
14+
15+
/**
16+
* @example Usage:
17+
* ```ts
18+
* <btrix-archived-item-list>
19+
* <btrix-archived-item-list-item .item=${item}
20+
* ></btrix-archived-item-list-item>
21+
* </btrix-archived-item-list>
22+
* ```
23+
*
24+
* @slot checkboxCell
25+
* @slot actionCell
26+
*/
27+
@customElement("btrix-archived-item-list")
28+
@localized()
29+
export class ArchivedItemList extends TailwindElement {
30+
static styles = css`
31+
btrix-table {
32+
--btrix-table-cell-gap: var(--sl-spacing-x-small);
33+
--btrix-table-cell-padding-x: var(--sl-spacing-small);
34+
}
35+
36+
btrix-table-body ::slotted(*:nth-of-type(n + 2)) {
37+
--btrix-border-top: 1px solid var(--sl-panel-border-color);
38+
}
39+
40+
btrix-table-body ::slotted(*:first-of-type) {
41+
--btrix-border-radius-top: var(--sl-border-radius-medium);
42+
}
43+
44+
btrix-table-body ::slotted(*:last-of-type) {
45+
--btrix-border-radius-bottom: var(--sl-border-radius-medium);
46+
}
47+
`;
48+
49+
@property({ type: String })
50+
listType: ArchivedItem["type"] | null = null;
51+
52+
@queryAssignedElements({ selector: "btrix-archived-item-list-item" })
53+
public items!: ArchivedItemListItem[];
54+
55+
@state()
56+
private hasCheckboxCell = false;
57+
58+
@state()
59+
private hasActionCell = false;
60+
61+
render() {
62+
const headerCols: { cssCol: string; cell: TemplateResult<1> | symbol }[] = [
63+
{
64+
cssCol: "min-content",
65+
cell: html`<btrix-table-header-cell>
66+
${msg("Status")}
67+
</btrix-table-header-cell>`,
68+
},
69+
{
70+
cssCol: "[clickable-start] 50ch",
71+
cell: html`<btrix-table-header-cell>
72+
${msg("Name")}
73+
</btrix-table-header-cell>`,
74+
},
75+
{
76+
cssCol: "1fr",
77+
cell: html`<btrix-table-header-cell>
78+
${msg("Date Created")}
79+
</btrix-table-header-cell>`,
80+
},
81+
{
82+
cssCol: "1fr",
83+
cell: html`<btrix-table-header-cell>
84+
${msg("Size")}
85+
</btrix-table-header-cell>`,
86+
},
87+
{
88+
cssCol: "1fr",
89+
cell: html`<btrix-table-header-cell>
90+
${msg("Pages")}
91+
</btrix-table-header-cell>`,
92+
},
93+
{
94+
cssCol: "1fr",
95+
cell: html`<btrix-table-header-cell>
96+
${msg("QA Analysis Runs")}
97+
</btrix-table-header-cell>`,
98+
},
99+
{
100+
cssCol: "1fr",
101+
cell: html`<btrix-table-header-cell>
102+
${msg("QA Rating")}
103+
</btrix-table-header-cell>`,
104+
},
105+
];
106+
if (this.hasCheckboxCell) {
107+
headerCols.unshift({
108+
cssCol: "min-content",
109+
cell: nothing, // renders into slot
110+
});
111+
}
112+
if (this.hasActionCell) {
113+
headerCols.push({
114+
cssCol: "[clickable-end] min-content",
115+
cell: nothing, // renders into slot
116+
});
117+
}
118+
119+
return html`
120+
<style>
121+
btrix-table {
122+
--btrix-table-grid-template-columns: ${headerCols
123+
.map(({ cssCol }) => cssCol)
124+
.join(" ")};
125+
}
126+
</style>
127+
<btrix-overflow-scroll class="-mx-5 part-[content]:px-5">
128+
<btrix-table>
129+
<btrix-table-head class="mb-2">
130+
<slot
131+
name="checkboxCell"
132+
@slotchange=${(e: Event) =>
133+
(this.hasCheckboxCell =
134+
(e.target as HTMLSlotElement).assignedElements().length > 0)}
135+
></slot>
136+
${headerCols.map(({ cell }) => cell)}
137+
<slot
138+
name="actionCell"
139+
@slotchange=${(e: Event) =>
140+
(this.hasActionCell =
141+
(e.target as HTMLSlotElement).assignedElements().length > 0)}
142+
></slot>
143+
</btrix-table-head>
144+
<btrix-table-body class="rounded border">
145+
<slot></slot>
146+
</btrix-table-body>
147+
</btrix-table>
148+
</btrix-overflow-scroll>
149+
`;
150+
}
151+
}

‎frontend/src/features/archived-items/archived-item-list/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import "./archived-item-list";
2+
import "./archived-item-list-item";

‎frontend/src/features/archived-items/archived-item-list/types.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export type CheckboxChangeEventDetail = {
2+
checked: boolean;
3+
};

0 commit comments

Comments
 (0)