Skip to content

Commit b324c6e

Browse files
author
Jicheng Lu
committed
refine agent pages
1 parent 7171264 commit b324c6e

27 files changed

Lines changed: 1041 additions & 1012 deletions

‎src/lib/scss/custom/components/_codeScript.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.code-script-container {
2-
min-height: 300px;
2+
min-height: 200px;
33
max-height: 500px;
44
overflow: auto;
55
scrollbar-width: thin;

‎src/routes/page/agent/+page.svelte‎

Lines changed: 37 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33
import { _ } from 'svelte-i18n';
44
import { goto } from '$app/navigation';
55
import Swal from 'sweetalert2';
6-
import { page } from '$app/stores';
7-
import { Button, Col, Input, Row } from '@sveltestrap/sveltestrap';
6+
import { page } from '$app/state';
87
import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
98
import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
109
import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
@@ -21,61 +20,62 @@
2120
goToUrl
2221
} from '$lib/helpers/utils/common';
2322
import CardAgent from './card-agent.svelte';
24-
25-
23+
24+
2625
const firstPage = 1;
2726
const pageSize = 12;
2827
2928
/** @type {boolean} */
30-
let isLoading = false;
31-
let isPageMounted = false;
29+
let isLoading = $state(false);
30+
let isPageMounted = $state(false);
3231
3332
/** @type {AbortController | null | undefined} */
3433
let abortController;
3534
3635
/** @type {import('$commonTypes').PagedItems<import('$agentTypes').AgentModel>} */
37-
let agents = { items: [], count: 0 };
36+
let agents = $state({ items: [], count: 0 });
3837
3938
/** @type {import('$agentTypes').AgentFilter} */
4039
const initFilter = {
4140
pager: { page: firstPage, size: pageSize, count: 0 }
4241
};
4342
4443
/** @type {import('$agentTypes').AgentFilter} */
45-
let filter = { ...initFilter };
44+
let filter = $state({ ...initFilter });
4645
46+
// svelte-ignore state_referenced_locally
4747
/** @type {import('$commonTypes').Pagination} */
48-
let pager = filter.pager;
48+
let pager = $state(filter.pager);
4949
50-
/** @type {import('$userTypes').UserModel} */
51-
let user;
50+
/** @type {import('$userTypes').UserModel | undefined} */
51+
let user = $state();
5252
5353
/** @type {any} */
5454
let unsubscriber;
5555
5656
/** @type {import('$commonTypes').LabelValuePair[]} */
57-
const agentTypeOptions = Object.entries(AgentType).map(([k, v]) => (
57+
const agentTypeOptions = Object.entries(AgentType).map(([_, v]) => (
5858
{ label: v, value: v }
5959
)).sort((a, b) => a.label.localeCompare(b.label));
6060
6161
/** @type {import('$commonTypes').LabelValuePair[]} */
62-
let agentLabelOptions = [];
62+
let agentLabelOptions = $state([]);
6363
6464
/** @type {{ name: string, types: string[], labels: string[] }} */
65-
let searchItem = {
65+
let searchItem = $state({
6666
name: '',
6767
types: [],
6868
labels: []
69-
};
69+
});
7070
7171
onMount(async () => {
7272
isPageMounted = true;
7373
const { pageNum, pageSizeNum } = getPagingQueryParams({
74-
page: $page.url.searchParams.get("page"),
75-
pageSize: $page.url.searchParams.get("pageSize")
74+
page: page.url.searchParams.get("page"),
75+
pageSize: page.url.searchParams.get("pageSize")
7676
}, { defaultPageSize: pageSize });
7777
78-
const similarName = $page.url.searchParams.get("similarName")?.trim();
78+
const similarName = page.url.searchParams.get("similarName")?.trim();
7979
8080
filter = {
8181
...filter,
@@ -201,7 +201,7 @@
201201
queryParams.push({ key: 'similarName', value: encodeURIComponent(filter.similarName) });
202202
}
203203
204-
setUrlQueryParams($page.url, queryParams, (url) => {
204+
setUrlQueryParams(page.url, queryParams, (url) => {
205205
if (!isPageMounted) return;
206206
goToUrl(`${url.pathname}${url.search}`)
207207
});
@@ -287,8 +287,8 @@
287287
}
288288
</script>
289289
290-
<HeadTitle title="{$_('List')}" />
291-
<Breadcrumb title="{$_('Agent')}" pagetitle="{$_('List')}" />
290+
<HeadTitle title={$_('List')} />
291+
<Breadcrumb title={$_('Agent')} pagetitle={$_('List')} />
292292
293293
<LoadingToComplete
294294
isLoading={isLoading}
@@ -297,20 +297,21 @@
297297
<div class="agents-header-container mb-4">
298298
<div>
299299
{#if !!user && (ADMIN_ROLES.includes(user.role || '') || !!user.permissions?.includes(UserPermission.CreateAgent))}
300-
<Button color="primary" on:click={() => createNewAgent()}>
300+
<button type="button" class="btn btn-primary" onclick={() => createNewAgent()}>
301301
<i class="mdi mdi-content-copy"></i> {$_('New Agent')}
302-
</Button>
302+
</button>
303303
{/if}
304304
</div>
305305
<div class="agent-filter">
306-
<Input
306+
<input
307307
type="text"
308+
class="form-control"
308309
placeholder="Search by name"
309310
style="width: fit-content;"
310311
maxlength={500}
311312
value={searchItem.name}
312-
on:input={e => changeSearchName(e)}
313-
on:keydown={e => searchKeyDown(e)}
313+
oninput={e => changeSearchName(e)}
314+
onkeydown={e => searchKeyDown(e)}
314315
/>
315316
<Select
316317
tag={'agent-label-select'}
@@ -332,30 +333,32 @@
332333
options={agentTypeOptions}
333334
onselect={e => selectAgentTypeOption(e)}
334335
/>
335-
<Button
336+
<button
337+
type="button"
336338
class="btn btn-info"
337339
data-bs-toggle="tooltip"
338340
data-bs-placement="bottom"
339341
title="Search"
340-
on:click={(e) => search()}
342+
onclick={() => search()}
341343
>
342344
<i class="mdi mdi-magnify"></i>
343-
</Button>
344-
<Button
345+
</button>
346+
<button
347+
type="button"
345348
class="btn btn-warning"
346349
data-bs-toggle="tooltip"
347350
data-bs-placement="bottom"
348351
title="Reset"
349-
on:click={(e) => reset()}
352+
onclick={() => reset()}
350353
>
351354
<i class="mdi mdi-restore"></i>
352-
</Button>
355+
</button>
353356
</div>
354357
</div>
355358
356359
357-
<Row>
360+
<div class="row">
358361
<CardAgent agents={agents.items} />
359-
</Row>
362+
</div>
360363
361364
<PlainPagination pagination={pager} pageTo={pn => pageTo(pn)} />

‎src/routes/page/agent/[agentId]/+page.svelte‎

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
<script>
22
import { onDestroy, onMount } from 'svelte';
3-
import { page } from '$app/stores';
3+
import { page } from '$app/state';
44
import { goto } from '$app/navigation';
5-
import { _ } from 'svelte-i18n';
5+
import { _ } from 'svelte-i18n';
66
import Swal from 'sweetalert2';
7-
import { Col, Row, Button } from '@sveltestrap/sveltestrap';
87
import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
98
import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
109
import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
@@ -20,31 +19,33 @@
2019
import AgentTemplate from './agent-components/agent-template.svelte';
2120
2221
/** @type {import('$agentTypes').AgentModel} */
23-
let agent;
22+
let agent = $state(/** @type {any} */ (undefined));
2423
/** @type {any} */
25-
let agentFunctionCmp = null;
24+
let agentFunctionCmp = $state(null);
2625
/** @type {any} */
27-
let agentInstructionCmp = null;
26+
let agentInstructionCmp = $state(null);
2827
/** @type {any} */
29-
let agentTemplateCmp = null;
28+
let agentTemplateCmp = $state(null);
3029
/** @type {any} */
31-
let agentTabsCmp = null;
30+
let agentTabsCmp = $state(null);
31+
/** @type {import('$userTypes').UserModel} */
32+
let user = $state(/** @type {any} */ (undefined));
3233
/** @type {any} */
3334
let unsubscriber;
34-
/** @type {import('$userTypes').UserModel} */
35-
let user;
3635
3736
/** @type {boolean} */
38-
let isLoading = false;
39-
let isComplete = false;
37+
let isLoading = $state(false);
38+
let isComplete = $state(false);
4039
4140
const duration = 3000;
4241
43-
$: agentId = $page.params.agentId;
42+
let agentId = $derived(page.params.agentId);
4443
45-
$: if (agentId) {
46-
loadAgent(agentId);
47-
}
44+
$effect(() => {
45+
if (agentId) {
46+
loadAgent(agentId);
47+
}
48+
});
4849
4950
async function loadAgent(/** @type {string} */ id) {
5051
isLoading = true;
@@ -108,14 +109,14 @@
108109
}
109110
};
110111
isLoading = true;
111-
saveAgent(agent).then(res => {
112+
saveAgent(agent).then(() => {
112113
isLoading = false;
113114
isComplete = true;
114115
refresh();
115116
setTimeout(() => {
116117
isComplete = false;
117118
}, duration);
118-
}).catch(err => {
119+
}).catch(() => {
119120
isLoading = false;
120121
isComplete = false;
121122
});
@@ -180,7 +181,7 @@
180181
}
181182
182183
function handleAgentDelete() {
183-
deleteAgent(agent?.id).then(res => {
184+
deleteAgent(agent?.id).then(() => {
184185
goto(`page/agent`);
185186
});
186187
}
@@ -190,8 +191,8 @@
190191
}
191192
</script>
192193
193-
<HeadTitle title="{$_('Agent Overview')}" />
194-
<Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Agent Overview')}" />
194+
<HeadTitle title={$_('Agent Overview')} />
195+
<Breadcrumb title={$_('Agent')} pagetitle={$_('Agent Overview')} />
195196
196197
<LoadingToComplete
197198
isLoading={isLoading}
@@ -200,13 +201,13 @@
200201
201202
{#if agent}
202203
<div>
203-
<Row class="agent-detail-sections">
204-
<Col class="section-min-width agent-col" style="flex: 40%;">
204+
<div class="row agent-detail-sections">
205+
<div class="col section-min-width agent-col" style="flex: 40%;">
205206
<div class="agent-detail-section">
206207
<AgentOverview
207-
agent={agent}
208-
profiles={agent.profiles || []}
209-
labels={agent.labels || []}
208+
bind:agent={agent}
209+
bind:profiles={agent.profiles}
210+
bind:labels={agent.labels}
210211
/>
211212
</div>
212213
<div class="agent-detail-section">
@@ -216,36 +217,36 @@
216217
user={user}
217218
/>
218219
</div>
219-
</Col>
220-
<Col class="section-min-width agent-col" style="flex: 60%;">
220+
</div>
221+
<div class="col section-min-width agent-col" style="flex: 60%;">
221222
<div class="agent-detail-section">
222223
<AgentInstruction
223224
bind:this={agentInstructionCmp}
224-
agent={agent}
225+
bind:agent={agent}
225226
/>
226227
</div>
227228
<div class="agent-detail-section">
228229
<AgentTemplate
229230
bind:this={agentTemplateCmp}
230-
agent={agent}
231+
bind:agent={agent}
231232
/>
232233
</div>
233234
<div class="agent-detail-section">
234235
<AgentFunction
235236
bind:this={agentFunctionCmp}
236-
agent={agent}
237+
bind:agent={agent}
237238
/>
238239
</div>
239-
</Col>
240-
</Row>
240+
</div>
241+
</div>
241242
242243
{#if !!AgentExtensions.editable(agent)}
243-
<Row>
244+
<div class="row">
244245
<div class="hstack gap-2 my-4">
245-
<Button class="btn btn-soft-primary" on:click={() => updateCurrentAgent()}>{$_('Save Agent')}</Button>
246-
<Button class="btn btn-danger" on:click={() => deleteCurrentAgent()}>{$_('Delete Agent')}</Button>
246+
<button type="button" class="btn btn-soft-primary" onclick={() => updateCurrentAgent()}>{$_('Save Agent')}</button>
247+
<button type="button" class="btn btn-danger" onclick={() => deleteCurrentAgent()}>{$_('Delete Agent')}</button>
247248
</div>
248-
</Row>
249+
</div>
249250
{/if}
250251
</div>
251252
{/if}

‎src/routes/page/agent/[agentId]/agent-components/agent-function.svelte‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,30 @@
11
<script>
2-
import { JSONEditor, Mode } from 'svelte-jsoneditor';
32
import { onMount } from 'svelte';
3+
import { JSONEditor, Mode } from 'svelte-jsoneditor';
44
5-
/** @type {import('$agentTypes').AgentModel} */
6-
export let agent;
7-
8-
/** @type {() => void} */
9-
export let handleAgentChange = () => {};
5+
/**
6+
* @type {{
7+
* agent: import('$agentTypes').AgentModel,
8+
* handleAgentChange?: () => void
9+
* }}
10+
*/
11+
let {
12+
agent = $bindable(),
13+
handleAgentChange = () => {}
14+
} = $props();
1015
11-
export const fetchContent = () => {
16+
export function fetchContent() {
1217
return content;
1318
}
1419
15-
export const refresh = () => init();
20+
export function refresh() {
21+
init();
22+
}
1623
1724
/** @type {import('svelte-jsoneditor').Content} */
18-
let content = {
25+
let content = $state({
1926
json: {}
20-
};
27+
});
2128
2229
onMount(() => {
2330
init();

0 commit comments

Comments
 (0)