Skip to content

Commit 5e86e96

Browse files
author
Jicheng Lu
committed
add agent actions
1 parent c839807 commit 5e86e96

File tree

6 files changed

+120
-55
lines changed

6 files changed

+120
-55
lines changed

‎src/lib/helpers/types/userTypes.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
* @property {string} [avatar] - The user avatar.
1818
* @property {string} [color]
1919
* @property {string} [token]
20+
* @property {boolean} [open_detail]
2021
*/
2122

2223
/**

‎src/lib/scss/custom/pages/_users.scss‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
}
4848

4949
.user-agent-container {
50-
margin-top: 20px;
50+
margin: 20px 0px;
5151
padding: 0px 2rem;
5252

5353
.action-row-wrapper {
@@ -71,7 +71,10 @@
7171
}
7272

7373
.action-title {
74-
.action-title-text {
74+
.action-title-wrapper {
75+
display: flex;
76+
gap: 3px;
77+
justify-content: center;
7578
text-transform: capitalize;
7679
text-align: center;
7780
border-bottom: 2px solid var(--bs-primary);
@@ -88,7 +91,8 @@
8891
display: flex;
8992
justify-content: flex-end;
9093
font-size: 16px;
91-
margin-top: 10px;
94+
margin-top: 3px;
95+
margin-right: 5px;
9296
}
9397
}
9498
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@
119119
title: 'Are you sure?',
120120
text: "Are you sure you want to delete this agent?",
121121
icon: 'warning',
122+
customClass: { confirmButton: 'danger-background' },
122123
showCancelButton: true,
123124
cancelButtonText: 'No',
124125
confirmButtonText: 'Yes'

‎src/routes/page/conversation/[conversationId]/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
title: 'Are you sure?',
2727
text: "You won't be able to revert this!",
2828
icon: 'warning',
29+
customClass: { confirmButton: 'danger-background' },
2930
showCancelButton: true,
30-
customClass: 'custom-modal',
3131
confirmButtonText: 'Yes, delete it!'
3232
}).then(async (result) => {
3333
if (result.value) {

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@
8989
9090
function refreshUsers() {
9191
users = {
92-
items: users?.items?.map(t => ({ ...t })) || [],
92+
items: users?.items?.map(t => ({ ...t, open_detail: false })) || [],
9393
count: users?.count || 0
9494
};
9595
}
@@ -159,7 +159,7 @@
159159
function postUpdateUser(data) {
160160
const newItems = users?.items?.map(x => {
161161
if (x.id === data.id) {
162-
return { ...data };
162+
return { ...data, open_detail: true };
163163
}
164164
return x;
165165
}) || [];
@@ -240,7 +240,12 @@
240240
</thead>
241241
<tbody>
242242
{#each users.items as item, idx (idx)}
243-
<UserItem item={item} agents={agents} on:save={e => saveUser(e)} />
243+
<UserItem
244+
item={item}
245+
agents={agents}
246+
open={item.open_detail}
247+
on:save={e => saveUser(e)}
248+
/>
244249
{/each}
245250
</tbody>
246251
</Table>

‎src/routes/page/users/user-item.svelte‎

Lines changed: 102 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,6 @@
1010
1111
const svelteDispatch = createEventDispatcher();
1212
13-
const allActions = [
14-
UserAction.Edit,
15-
UserAction.Chat
16-
];
17-
18-
const colStyle = `flex: 0 0 ${allActions.length > 2 ? Math.floor(1 / (allActions.length + 1) * 100) - 1 : 32}%;`;
1913
2014
/** @type {import('$userTypes').UserModel} */
2115
export let item;
@@ -36,6 +30,29 @@
3630
/** @type {import('$userTypes').UserAgentInnerAction[]} */
3731
let innerActions = [];
3832
33+
let allActions = [
34+
{
35+
name: UserAction.Edit,
36+
value: UserAction.Edit,
37+
checked: false
38+
},
39+
{
40+
name: UserAction.Chat,
41+
value: UserAction.Chat,
42+
checked:false
43+
}
44+
];
45+
46+
const colStyle = `flex: 0 0 ${allActions.length > 2 ? Math.floor(1 / (allActions.length + 1) * 100) - 1 : 32}%;`;
47+
48+
$: {
49+
allActions = allActions.map(x => {
50+
const list = innerActions.flatMap(a => a.actions.filter(y => y.value === x.value));
51+
x.checked = list.every(a => !!a.checked);
52+
return { ...x };
53+
});
54+
}
55+
3956
onMount(() => {
4057
initInnerItem();
4158
initAgentActions();
@@ -57,18 +74,18 @@
5774
actions: allActions.map(a => {
5875
return {
5976
key: uuidv4(),
60-
value: a,
77+
value: a.value,
6178
checked: false
6279
};
6380
})
6481
}
6582
}
6683
6784
const actions = allActions.map(a => {
68-
const checked = !!found.actions.find(y => y === a) || false;
85+
const checked = !!found.actions.find(y => y === a.value) || false;
6986
return {
7087
key: uuidv4(),
71-
value: a,
88+
value: a.value,
7289
checked: checked
7390
};
7491
});
@@ -93,7 +110,7 @@
93110
94111
/**
95112
* @param {any} e
96-
* @param {any} agentActionItem
113+
* @param {import('$userTypes').UserAgentInnerAction} agentActionItem
97114
* @param {any} actionItem
98115
*/
99116
function checkAction(e, agentActionItem, actionItem) {
@@ -104,6 +121,36 @@
104121
if (action) {
105122
action.checked = checked;
106123
}
124+
125+
innerActions = [ ...innerActions ];
126+
}
127+
128+
/**
129+
* @param {any} e
130+
* @param {any} title
131+
*/
132+
function checkAll(e, title) {
133+
const checked = e.target.checked;
134+
allActions = allActions.map(x => {
135+
if (x.value === title.value) {
136+
x.checked = checked;
137+
}
138+
return { ...x };
139+
});
140+
141+
innerActions = innerActions.map(x => {
142+
const actions = x.actions.map(a => {
143+
if (a.value === title.value) {
144+
a.checked = checked;
145+
}
146+
return { ...a };
147+
});
148+
149+
return {
150+
...x,
151+
actions: actions
152+
};
153+
});
107154
}
108155
109156
/** @param {string} id */
@@ -123,7 +170,6 @@
123170
svelteDispatch("save", {
124171
updatedData: data
125172
});
126-
open = false;
127173
}
128174
});
129175
}
@@ -185,6 +231,19 @@
185231
<tr in:fly={{ y: -5, duration: 800 }} out:fly={{ y: -5, duration: 300 }}>
186232
<td colspan="12">
187233
<div class="user-detail">
234+
<div class="edit-btn">
235+
<!-- svelte-ignore a11y-click-events-have-key-events -->
236+
<!-- svelte-ignore a11y-no-static-element-interactions -->
237+
<div
238+
class="text-primary clickable"
239+
data-bs-toggle="tooltip"
240+
data-bs-placement="top"
241+
title="Save"
242+
on:click={() => save(item.id)}
243+
>
244+
<i class="mdi mdi-content-save-all" />
245+
</div>
246+
</div>
188247
<ul class="basic-info">
189248
<li>
190249
<div class="wrappable">
@@ -234,51 +293,46 @@
234293
{/if}
235294
</ul>
236295
{#if innerActions.length > 0}
237-
<div class="user-agent-container">
238-
<div class="action-row action-title">
239-
<div class="action-col action-title-text fw-bold" style={colStyle}>
240-
{'Agent'}
241-
</div>
242-
{#each allActions as title}
243-
<div class="action-col action-title-text fw-bold" style={colStyle}>
244-
{title}
296+
<div class="user-agent-container">
297+
<div class="action-row action-title">
298+
<div class="action-col action-title-wrapper fw-bold" style={colStyle}>
299+
{'Agent'}
245300
</div>
246-
{/each}
247-
</div>
248-
<div class="action-row-wrapper">
249-
{#each innerActions as agentActionItem}
250-
<div class="action-row">
251-
<div class="action-col fw-bold" style={colStyle}>
252-
{agentActionItem.agent_name}
253-
</div>
254-
{#each agentActionItem.actions as actionItem}
255-
<div class="action-col action-center" style={colStyle}>
301+
{#each allActions as title}
302+
<div class="action-col action-title-wrapper fw-bold" style={colStyle}>
303+
<div>{title.name}</div>
304+
<div>
256305
<Input
257306
type="checkbox"
258307
class="action-center"
259-
checked={actionItem.checked}
260-
on:change={e => checkAction(e, agentActionItem, actionItem)}
308+
checked={title.checked}
309+
on:change={e => checkAll(e, title)}
261310
/>
262311
</div>
263-
{/each}
264-
</div>
265-
{/each}
312+
</div>
313+
{/each}
314+
</div>
315+
<div class="action-row-wrapper">
316+
{#each innerActions as agentActionItem}
317+
<div class="action-row">
318+
<div class="action-col fw-bold" style={colStyle}>
319+
{agentActionItem.agent_name}
320+
</div>
321+
{#each agentActionItem.actions as actionItem}
322+
<div class="action-col action-center" style={colStyle}>
323+
<Input
324+
type="checkbox"
325+
class="action-center"
326+
checked={actionItem.checked}
327+
on:change={e => checkAction(e, agentActionItem, actionItem)}
328+
/>
329+
</div>
330+
{/each}
331+
</div>
332+
{/each}
333+
</div>
266334
</div>
267-
</div>
268335
{/if}
269-
<div class="edit-btn">
270-
<!-- svelte-ignore a11y-click-events-have-key-events -->
271-
<!-- svelte-ignore a11y-no-static-element-interactions -->
272-
<div
273-
class="text-primary clickable"
274-
data-bs-toggle="tooltip"
275-
data-bs-placement="top"
276-
title="Save"
277-
on:click={() => save(item.id)}
278-
>
279-
<i class="mdi mdi-content-save-all" />
280-
</div>
281-
</div>
282336
</div>
283337
</td>
284338
</tr>

0 commit comments

Comments
 (0)