-
Notifications
You must be signed in to change notification settings - Fork 10
/
Homepage.svelte
146 lines (126 loc) · 4.34 KB
/
Homepage.svelte
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<script lang="ts">
import { onMount } from 'svelte';
import { router } from 'tinro';
import type { BootcBuildInfo } from '/@shared/src/models/bootc';
import NavPage from './lib/upstream/NavPage.svelte';
import Button from './lib/upstream/Button.svelte';
import { faCube, faTrash } from '@fortawesome/free-solid-svg-icons';
import Table from './lib/upstream/Table.svelte';
import { Column, Row } from './lib/upstream/table';
import BootcColumnActions from './lib/BootcColumnActions.svelte';
import { bootcClient } from './api/client';
import SimpleColumn from './lib/upstream/SimpleColumn.svelte';
import BootcStatus from './lib/BootcStatus.svelte';
import { searchPattern, filtered } from './stores/historyInfo';
import DiskImageIcon from './lib/DiskImageIcon.svelte';
import FilteredEmptyScreen from './lib/upstream/FilteredEmptyScreen.svelte';
import BootcEmptyScreen from './lib/BootcEmptyScreen.svelte';
import BootcFolderColumn from './lib/BootcFolderColumn.svelte';
import BootcImageColumn from './lib/BootcImageColumn.svelte';
// Search functionality
export let searchTerm = '';
$: searchPattern.set(searchTerm);
let history: BootcBuildInfoWithSelected[] = [];
interface BootcBuildInfoWithSelected extends BootcBuildInfo {
selected: boolean;
}
onMount(() => {
return filtered.subscribe(value => {
history = value.map(build => ({ ...build, selected: false }));
});
});
// Bulk delete the selected builds
let bulkDeleteInProgress = false;
async function deleteSelectedBuilds() {
const selected = history.filter(history => history.selected);
if (selected.length === 0) {
return;
}
// mark builds for deletion
bulkDeleteInProgress = true;
// Delete all the selected builds
await bootcClient.deleteBuilds(selected);
bulkDeleteInProgress = false;
}
async function gotoBuild(): Promise<void> {
bootcClient.telemetryLogUsage('nav-build');
router.goto('/build');
}
let selectedItemsNumber: number;
let table: Table;
// COLUMNS
let statusColumn = new Column<BootcBuildInfo>('Status', {
align: 'center',
width: '70px',
renderer: BootcStatus,
});
let imageColumn = new Column<BootcBuildInfo>('Image', {
width: '2fr',
renderer: BootcImageColumn,
comparator: (a, b) => a.image.localeCompare(b.image),
});
let typeColumn = new Column<BootcBuildInfo, string>('Type', {
renderMapping: object => object.type.join(),
renderer: SimpleColumn,
comparator: (a, b) => a.type.join().localeCompare(b.type.join()),
});
let archColumn = new Column<BootcBuildInfo, string>('Arch', {
renderMapping: object => object.arch ?? '',
renderer: SimpleColumn,
comparator: (a, b) => {
if (a.arch && b.arch) {
return a.arch.localeCompare(b.arch);
} else if (a.arch) {
return 1;
}
return -1;
},
});
let folderColumn = new Column<BootcBuildInfo>('Folder', {
renderer: BootcFolderColumn,
comparator: (a, b) => a.folder.localeCompare(b.folder),
});
const columns: Column<BootcBuildInfo, BootcBuildInfo | string>[] = [
statusColumn,
imageColumn,
typeColumn,
archColumn,
folderColumn,
new Column<BootcBuildInfo>('Actions', { align: 'right', renderer: BootcColumnActions, overflow: true }),
];
const row = new Row<BootcBuildInfo>({
selectable: _build => true,
});
</script>
<NavPage bind:searchTerm="{searchTerm}" title="Bootable Containers" searchEnabled="{true}">
<svelte:fragment slot="additional-actions">
<Button on:click="{() => gotoBuild()}" icon="{faCube}" title="Build">Build</Button>
</svelte:fragment>
<svelte:fragment slot="bottom-additional-actions">
{#if selectedItemsNumber > 0}
<Button
on:click="{() => deleteSelectedBuilds()}"
title="Delete {selectedItemsNumber} selected items"
inProgress="{bulkDeleteInProgress}"
icon="{faTrash}" />
<span>On {selectedItemsNumber} selected items.</span>
{/if}
</svelte:fragment>
<div class="flex min-w-full h-full" slot="content">
<Table
kind="bootc images"
bind:this="{table}"
bind:selectedItemsNumber="{selectedItemsNumber}"
data="{history}"
columns="{columns}"
row="{row}"
defaultSortColumn="Name"
on:update="{() => (history = history)}">
</Table>
{#if $filtered.length === 0 && searchTerm}
<FilteredEmptyScreen icon="{DiskImageIcon}" kind="images" bind:searchTerm="{searchTerm}" />
{:else if history.length === 0}
<BootcEmptyScreen />
{/if}
</div>
</NavPage>