namirasoft-account-react 1.5.21 → 1.5.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.env.template +15 -15
- package/SKILL.md +514 -514
- package/config-overrides.js +72 -72
- package/dist/App.d.ts +1 -1
- package/dist/Router.d.ts +1 -1
- package/dist/UseParams.d.ts +1 -1
- package/dist/components/NSAAccessListDialog.d.ts +2 -2
- package/dist/components/NSAAccessListDialog.module.css +71 -71
- package/dist/components/NSABoxSecret.d.ts +1 -1
- package/dist/components/NSABoxSecret.module.css +23 -23
- package/dist/components/NSAMasterMenu.d.ts +1 -1
- package/dist/components/NSAMasterMenu.module.css +250 -250
- package/dist/components/NSAMasterMenuItem.d.ts +1 -1
- package/dist/components/NSAMessageListDialog.d.ts +1 -1
- package/dist/components/NSAMessageListDialog.module.css +99 -99
- package/dist/components/NSANavigationGuard.d.ts +1 -1
- package/dist/components/NSAProductListDialog.d.ts +1 -1
- package/dist/components/NSAProductListDialog.module.css +44 -44
- package/dist/components/NSATaskBar.d.ts +1 -1
- package/dist/components/NSATaskBar.module.css +57 -57
- package/dist/components/NSAUserDialog.d.ts +1 -1
- package/dist/components/NSAUserDialog.module.css +67 -67
- package/dist/components/NSAWorkspaceListDialog.d.ts +1 -1
- package/dist/components/NSAWorkspaceListDialog.module.css +41 -41
- package/dist/components/NSFBoxCategoryScope.d.ts +1 -1
- package/dist/components/NSFBoxField.d.ts +1 -1
- package/dist/components/NSFBoxSlot.d.ts +1 -1
- package/dist/components/NSFBoxWrapper.d.ts +1 -1
- package/dist/components/NSLabelSecret.d.ts +1 -1
- package/dist/components/quickfilter/NSAFilterBoxEnum.module.css +44 -44
- package/dist/components/quickfilter/NSAQuickFilterBar.d.ts +1 -1
- package/dist/components/quickfilter/NSAQuickFilterBar.module.css +19 -19
- package/dist/components/quickfilter/NSAQuickFilterDialog.d.ts +1 -1
- package/dist/components/quickfilter/NSAQuickFilterDialog.module.css +74 -74
- package/dist/layouts/NSALayout.d.ts +1 -1
- package/dist/layouts/NSASectionEdit.d.ts +1 -1
- package/dist/layouts/NSASectionEditTabPage.d.ts +1 -1
- package/dist/layouts/NSASectionEditTabPage.module.css +4 -4
- package/dist/layouts/NSASectionList.d.ts +3 -1
- package/dist/layouts/NSASectionList.js +14 -6
- package/dist/layouts/NSASectionList.js.map +1 -1
- package/dist/layouts/NSASectionList.module.css +31 -31
- package/dist/layouts/NSASectionView.d.ts +1 -1
- package/dist/layouts/NSASectionViewTabMore.d.ts +1 -1
- package/dist/layouts/NSASectionViewTabPage.d.ts +1 -1
- package/dist/layouts/NSASectionViewTabPage.js +1 -0
- package/dist/layouts/NSASectionViewTabPage.js.map +1 -1
- package/dist/layouts/NSASectionViewTabPage.module.css +47 -47
- package/dist/pages/NSAConsentPage.module.css +26 -26
- package/dist/pages/NSAEmailVerificationPage.d.ts +1 -1
- package/dist/pages/NSAHomePage.d.ts +1 -1
- package/dist/pages/NSAHomePage.module.css +41 -41
- package/dist/pages/NSALoginPage.d.ts +1 -1
- package/dist/pages/NSALoginPage.module.css +26 -26
- package/dist/pages/NSAPhoneVerificationPage.d.ts +1 -1
- package/dist/pages/NSAVerificationPage.d.ts +1 -1
- package/dist/pages/NSAVerificationPage.module.css +31 -31
- package/package.json +95 -95
- package/public/index.html +21 -21
- package/src/App.tsx +19 -19
- package/src/CTFRow.ts +7 -7
- package/src/FieldCacheService.tsx +84 -84
- package/src/IEntityInfo.ts +33 -33
- package/src/NSACacheService.ts +120 -120
- package/src/NSAFilterOperators.ts +92 -92
- package/src/NSARouterMaker.tsx +140 -140
- package/src/NSARouterMakerProps.ts +23 -23
- package/src/NSARouterMakerResult.ts +24 -24
- package/src/NSFRouterMaker.tsx +35 -35
- package/src/NSFRouterProps.ts +7 -7
- package/src/NSFRoutes.ts +30 -30
- package/src/Router.tsx +48 -48
- package/src/UseParams.tsx +17 -17
- package/src/components/NSAAccessListDialog.module.css +71 -71
- package/src/components/NSAAccessListDialog.tsx +178 -178
- package/src/components/NSABoxSecret.module.css +23 -23
- package/src/components/NSABoxSecret.tsx +264 -264
- package/src/components/NSAMasterMenu.module.css +250 -250
- package/src/components/NSAMasterMenu.tsx +169 -169
- package/src/components/NSAMasterMenuItem.tsx +250 -250
- package/src/components/NSAMessageListDialog.module.css +99 -99
- package/src/components/NSAMessageListDialog.tsx +142 -142
- package/src/components/NSANavigationGuard.tsx +79 -79
- package/src/components/NSAProductListDialog.module.css +44 -44
- package/src/components/NSAProductListDialog.tsx +88 -88
- package/src/components/NSATable.tsx +494 -494
- package/src/components/NSATaskBar.module.css +57 -57
- package/src/components/NSATaskBar.tsx +193 -193
- package/src/components/NSAUserDialog.module.css +67 -67
- package/src/components/NSAUserDialog.tsx +122 -122
- package/src/components/NSAWorkspaceListDialog.module.css +41 -41
- package/src/components/NSAWorkspaceListDialog.tsx +147 -147
- package/src/components/NSFBoxCategoryScope.tsx +52 -52
- package/src/components/NSFBoxField.tsx +37 -37
- package/src/components/NSFBoxSlot.tsx +71 -71
- package/src/components/NSFBoxWrapper.tsx +69 -69
- package/src/components/NSLabelSecret.tsx +37 -37
- package/src/components/quickfilter/NSAFilterBoxBase.tsx +89 -89
- package/src/components/quickfilter/NSAFilterBoxBoolean.tsx +66 -66
- package/src/components/quickfilter/NSAFilterBoxDate.tsx +110 -110
- package/src/components/quickfilter/NSAFilterBoxDateTime.tsx +110 -110
- package/src/components/quickfilter/NSAFilterBoxEnum.module.css +44 -44
- package/src/components/quickfilter/NSAFilterBoxEnum.tsx +79 -79
- package/src/components/quickfilter/NSAFilterBoxNumber.tsx +145 -145
- package/src/components/quickfilter/NSAFilterBoxString.tsx +83 -83
- package/src/components/quickfilter/NSAFilterBoxTime.tsx +106 -106
- package/src/components/quickfilter/NSAQuickFilterBar.module.css +19 -19
- package/src/components/quickfilter/NSAQuickFilterBar.tsx +142 -142
- package/src/components/quickfilter/NSAQuickFilterDialog.module.css +74 -74
- package/src/components/quickfilter/NSAQuickFilterDialog.tsx +260 -260
- package/src/css.d.ts +13 -13
- package/src/formatters/SecretFormatter.tsx +24 -24
- package/src/index.tsx +26 -26
- package/src/layouts/Actions.ts +146 -146
- package/src/layouts/CFTUtil.ts +18 -18
- package/src/layouts/NSALayout.tsx +744 -744
- package/src/layouts/NSALayout_Field.ts +125 -125
- package/src/layouts/NSASectionEdit.tsx +281 -281
- package/src/layouts/NSASectionEditTabPage.module.css +4 -4
- package/src/layouts/NSASectionEditTabPage.tsx +256 -256
- package/src/layouts/NSASectionList.module.css +31 -31
- package/src/layouts/NSASectionList.tsx +166 -147
- package/src/layouts/NSASectionView.tsx +98 -98
- package/src/layouts/NSASectionViewTabMore.tsx +78 -78
- package/src/layouts/NSASectionViewTabPage.module.css +47 -47
- package/src/layouts/NSASectionViewTabPage.tsx +400 -399
- package/src/main.ts +52 -52
- package/src/pages/NSAConsentPage.module.css +26 -26
- package/src/pages/NSAConsentPage.tsx +120 -120
- package/src/pages/NSAEmailVerificationPage.tsx +30 -30
- package/src/pages/NSAHomePage.module.css +41 -41
- package/src/pages/NSAHomePage.tsx +124 -124
- package/src/pages/NSALoginPage.module.css +26 -26
- package/src/pages/NSALoginPage.tsx +87 -87
- package/src/pages/NSAPhoneVerificationPage.tsx +94 -94
- package/src/pages/NSAVerificationPage.module.css +31 -31
- package/src/pages/NSAVerificationPage.tsx +185 -185
- package/src/pages/NSFCategoryEditPage.tsx +87 -87
- package/src/pages/NSFCategoryListPage.tsx +23 -23
- package/src/pages/NSFCategoryViewPage.tsx +23 -23
- package/src/pages/NSFEntities.ts +58 -58
- package/src/pages/PaymentRequired.tsx +80 -80
- package/tsconfig.json +43 -43
|
@@ -1,58 +1,58 @@
|
|
|
1
|
-
.nsa_task_bar {
|
|
2
|
-
position: fixed;
|
|
3
|
-
left: 1rem;
|
|
4
|
-
bottom: 1rem;
|
|
5
|
-
z-index: 1100;
|
|
6
|
-
display: flex;
|
|
7
|
-
flex-direction: column-reverse;
|
|
8
|
-
gap: 0.75rem;
|
|
9
|
-
max-width: calc(100vw - 2rem);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.nsa_task_card {
|
|
13
|
-
width: 320px;
|
|
14
|
-
max-width: calc(100vw - 2rem);
|
|
15
|
-
background-color: #ffffff;
|
|
16
|
-
border: 1px solid #e2e5f1;
|
|
17
|
-
border-radius: 0.75rem;
|
|
18
|
-
box-shadow: 0 8px 24px rgba(20, 27, 92, 0.16);
|
|
19
|
-
padding: 0.875rem 1rem;
|
|
20
|
-
display: flex;
|
|
21
|
-
flex-direction: column;
|
|
22
|
-
gap: 0.625rem;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.nsa_task_header {
|
|
26
|
-
display: flex;
|
|
27
|
-
align-items: center;
|
|
28
|
-
justify-content: space-between;
|
|
29
|
-
gap: 0.5rem;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.nsa_task_title {
|
|
33
|
-
font-size: 0.95rem;
|
|
34
|
-
font-weight: 600;
|
|
35
|
-
color: #141b5c;
|
|
36
|
-
overflow: hidden;
|
|
37
|
-
text-overflow: ellipsis;
|
|
38
|
-
white-space: nowrap;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.nsa_task_close {
|
|
42
|
-
cursor: pointer;
|
|
43
|
-
color: #8a90b3;
|
|
44
|
-
font-size: 0.875rem;
|
|
45
|
-
line-height: 1;
|
|
46
|
-
padding: 0.125rem 0.25rem;
|
|
47
|
-
border-radius: 0.25rem;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.nsa_task_close:hover {
|
|
51
|
-
color: #141b5c;
|
|
52
|
-
background-color: #eef0f8;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.nsa_task_actions {
|
|
56
|
-
display: flex;
|
|
57
|
-
justify-content: flex-end;
|
|
1
|
+
.nsa_task_bar {
|
|
2
|
+
position: fixed;
|
|
3
|
+
left: 1rem;
|
|
4
|
+
bottom: 1rem;
|
|
5
|
+
z-index: 1100;
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column-reverse;
|
|
8
|
+
gap: 0.75rem;
|
|
9
|
+
max-width: calc(100vw - 2rem);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.nsa_task_card {
|
|
13
|
+
width: 320px;
|
|
14
|
+
max-width: calc(100vw - 2rem);
|
|
15
|
+
background-color: #ffffff;
|
|
16
|
+
border: 1px solid #e2e5f1;
|
|
17
|
+
border-radius: 0.75rem;
|
|
18
|
+
box-shadow: 0 8px 24px rgba(20, 27, 92, 0.16);
|
|
19
|
+
padding: 0.875rem 1rem;
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
gap: 0.625rem;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.nsa_task_header {
|
|
26
|
+
display: flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
justify-content: space-between;
|
|
29
|
+
gap: 0.5rem;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.nsa_task_title {
|
|
33
|
+
font-size: 0.95rem;
|
|
34
|
+
font-weight: 600;
|
|
35
|
+
color: #141b5c;
|
|
36
|
+
overflow: hidden;
|
|
37
|
+
text-overflow: ellipsis;
|
|
38
|
+
white-space: nowrap;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.nsa_task_close {
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
color: #8a90b3;
|
|
44
|
+
font-size: 0.875rem;
|
|
45
|
+
line-height: 1;
|
|
46
|
+
padding: 0.125rem 0.25rem;
|
|
47
|
+
border-radius: 0.25rem;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.nsa_task_close:hover {
|
|
51
|
+
color: #141b5c;
|
|
52
|
+
background-color: #eef0f8;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.nsa_task_actions {
|
|
56
|
+
display: flex;
|
|
57
|
+
justify-content: flex-end;
|
|
58
58
|
}
|
|
@@ -1,194 +1,194 @@
|
|
|
1
|
-
import { NSButtonRed } from "namirasoft-site-react";
|
|
2
|
-
import NSProgressBar from "namirasoft-site-react/dist/components/NSProgressBar";
|
|
3
|
-
import { Component } from "react";
|
|
4
|
-
import Styles from "./NSATaskBar.module.css";
|
|
5
|
-
|
|
6
|
-
export type NSATaskStatus = "running" | "completed" | "cancelled";
|
|
7
|
-
|
|
8
|
-
export interface NSATask
|
|
9
|
-
{
|
|
10
|
-
id: string;
|
|
11
|
-
title: string;
|
|
12
|
-
total: number;
|
|
13
|
-
completed: number;
|
|
14
|
-
succeeded: number;
|
|
15
|
-
failed: number;
|
|
16
|
-
status: NSATaskStatus;
|
|
17
|
-
cancel: () => void;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export interface NSATaskResult<T>
|
|
21
|
-
{
|
|
22
|
-
succeeded: T[];
|
|
23
|
-
failed: T[];
|
|
24
|
-
cancelled: boolean;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
export interface NSATaskBarProps<ItemType>
|
|
28
|
-
{
|
|
29
|
-
title: string;
|
|
30
|
-
items: ItemType[];
|
|
31
|
-
handler: (item: ItemType, index: number) => Promise<void>;
|
|
32
|
-
onItemError?: (item: ItemType, error: any, index: number) => void;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
interface NSATaskBarState
|
|
36
|
-
{
|
|
37
|
-
tasks: NSATask[];
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
export class NSATaskBar<ItemType> extends Component<NSATaskBarProps<ItemType>, NSATaskBarState>
|
|
41
|
-
{
|
|
42
|
-
private counter: number = 0;
|
|
43
|
-
private removeDelayMs: number = 4000;
|
|
44
|
-
|
|
45
|
-
constructor(props: NSATaskBarProps<ItemType>)
|
|
46
|
-
{
|
|
47
|
-
super(props);
|
|
48
|
-
this.state = { tasks: [] };
|
|
49
|
-
this.run = this.run.bind(this);
|
|
50
|
-
this.dismiss = this.dismiss.bind(this);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
private update(id: string, patch: Partial<NSATask>): void
|
|
54
|
-
{
|
|
55
|
-
this.setState(prev => ({
|
|
56
|
-
tasks: prev.tasks.map(task => task.id === id ? { ...task, ...patch } : task)
|
|
57
|
-
}));
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
public dismiss(id: string): void
|
|
61
|
-
{
|
|
62
|
-
this.setState(prev => ({ tasks: prev.tasks.filter(task => task.id !== id) }));
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
public async run(): Promise<NSATaskResult<ItemType>>
|
|
66
|
-
{
|
|
67
|
-
this.counter += 1;
|
|
68
|
-
const id = `nsa-task-${this.counter}`;
|
|
69
|
-
|
|
70
|
-
const items = this.props.items;
|
|
71
|
-
const handler = this.props.handler;
|
|
72
|
-
const onItemError = this.props.onItemError;
|
|
73
|
-
|
|
74
|
-
let cancelled = false;
|
|
75
|
-
const task: NSATask = {
|
|
76
|
-
id,
|
|
77
|
-
title: this.props.title,
|
|
78
|
-
total: items.length,
|
|
79
|
-
completed: 0,
|
|
80
|
-
succeeded: 0,
|
|
81
|
-
failed: 0,
|
|
82
|
-
status: "running",
|
|
83
|
-
cancel: () => { cancelled = true; }
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
this.setState(prev => ({ tasks: [...prev.tasks, task] }));
|
|
87
|
-
|
|
88
|
-
const succeeded: ItemType[] = [];
|
|
89
|
-
const failed: ItemType[] = [];
|
|
90
|
-
|
|
91
|
-
for (let index = 0; index < items.length; index++)
|
|
92
|
-
{
|
|
93
|
-
if (cancelled)
|
|
94
|
-
break;
|
|
95
|
-
|
|
96
|
-
const item = items[index];
|
|
97
|
-
try
|
|
98
|
-
{
|
|
99
|
-
await handler(item, index);
|
|
100
|
-
succeeded.push(item);
|
|
101
|
-
}
|
|
102
|
-
catch (error: any)
|
|
103
|
-
{
|
|
104
|
-
failed.push(item);
|
|
105
|
-
onItemError?.(item, error, index);
|
|
106
|
-
}
|
|
107
|
-
this.update(id, {
|
|
108
|
-
completed: succeeded.length + failed.length,
|
|
109
|
-
succeeded: succeeded.length,
|
|
110
|
-
failed: failed.length,
|
|
111
|
-
});
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
this.update(id, { status: cancelled ? "cancelled" : "completed" });
|
|
115
|
-
|
|
116
|
-
window.setTimeout(() => this.dismiss(id), this.removeDelayMs);
|
|
117
|
-
|
|
118
|
-
return { succeeded, failed, cancelled };
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
private renderStatus(task: NSATask): string
|
|
122
|
-
{
|
|
123
|
-
if (task.status === "running")
|
|
124
|
-
{
|
|
125
|
-
const remaining = task.total - task.completed;
|
|
126
|
-
let running: string[] = [`${task.succeeded} done`];
|
|
127
|
-
if (task.failed > 0)
|
|
128
|
-
running.push(`${task.failed} failed`);
|
|
129
|
-
running.push(`${remaining} left`);
|
|
130
|
-
return running.join(", ");
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
const skipped = task.total - task.completed;
|
|
134
|
-
let parts: string[] = [`${task.succeeded} done`];
|
|
135
|
-
if (task.failed > 0)
|
|
136
|
-
parts.push(`${task.failed} failed`);
|
|
137
|
-
if (skipped > 0)
|
|
138
|
-
parts.push(`${skipped} skipped`);
|
|
139
|
-
|
|
140
|
-
const prefix = task.status === "cancelled" ? "Cancelled" : "Done";
|
|
141
|
-
return `${prefix} — ${parts.join(", ")}`;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
override render()
|
|
145
|
-
{
|
|
146
|
-
const tasks = this.state.tasks;
|
|
147
|
-
if (tasks.length === 0)
|
|
148
|
-
return null;
|
|
149
|
-
|
|
150
|
-
return (
|
|
151
|
-
<div className={Styles.nsa_task_bar}>
|
|
152
|
-
{
|
|
153
|
-
tasks.map(task =>
|
|
154
|
-
{
|
|
155
|
-
const progress = task.total > 0 ? (task.completed / task.total) * 100 : 0;
|
|
156
|
-
return (
|
|
157
|
-
<div key={task.id} className={Styles.nsa_task_card}>
|
|
158
|
-
<div className={Styles.nsa_task_header}>
|
|
159
|
-
<span className={Styles.nsa_task_title}>{task.title}</span>
|
|
160
|
-
{
|
|
161
|
-
task.status !== "running" &&
|
|
162
|
-
<span
|
|
163
|
-
className={Styles.nsa_task_close}
|
|
164
|
-
onClick={() => this.dismiss(task.id)}
|
|
165
|
-
>
|
|
166
|
-
✕
|
|
167
|
-
</span>
|
|
168
|
-
}
|
|
169
|
-
</div>
|
|
170
|
-
<NSProgressBar progress={progress} title={this.renderStatus(task)} />
|
|
171
|
-
{
|
|
172
|
-
task.status === "running" &&
|
|
173
|
-
<div className={Styles.nsa_task_actions}>
|
|
174
|
-
<NSButtonRed
|
|
175
|
-
title="Cancel"
|
|
176
|
-
onClick={{
|
|
177
|
-
showLoading: false,
|
|
178
|
-
action: (onFinished) =>
|
|
179
|
-
{
|
|
180
|
-
task.cancel();
|
|
181
|
-
onFinished();
|
|
182
|
-
}
|
|
183
|
-
}}
|
|
184
|
-
/>
|
|
185
|
-
</div>
|
|
186
|
-
}
|
|
187
|
-
</div>
|
|
188
|
-
);
|
|
189
|
-
})
|
|
190
|
-
}
|
|
191
|
-
</div>
|
|
192
|
-
);
|
|
193
|
-
}
|
|
1
|
+
import { NSButtonRed } from "namirasoft-site-react";
|
|
2
|
+
import NSProgressBar from "namirasoft-site-react/dist/components/NSProgressBar";
|
|
3
|
+
import { Component } from "react";
|
|
4
|
+
import Styles from "./NSATaskBar.module.css";
|
|
5
|
+
|
|
6
|
+
export type NSATaskStatus = "running" | "completed" | "cancelled";
|
|
7
|
+
|
|
8
|
+
export interface NSATask
|
|
9
|
+
{
|
|
10
|
+
id: string;
|
|
11
|
+
title: string;
|
|
12
|
+
total: number;
|
|
13
|
+
completed: number;
|
|
14
|
+
succeeded: number;
|
|
15
|
+
failed: number;
|
|
16
|
+
status: NSATaskStatus;
|
|
17
|
+
cancel: () => void;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export interface NSATaskResult<T>
|
|
21
|
+
{
|
|
22
|
+
succeeded: T[];
|
|
23
|
+
failed: T[];
|
|
24
|
+
cancelled: boolean;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export interface NSATaskBarProps<ItemType>
|
|
28
|
+
{
|
|
29
|
+
title: string;
|
|
30
|
+
items: ItemType[];
|
|
31
|
+
handler: (item: ItemType, index: number) => Promise<void>;
|
|
32
|
+
onItemError?: (item: ItemType, error: any, index: number) => void;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
interface NSATaskBarState
|
|
36
|
+
{
|
|
37
|
+
tasks: NSATask[];
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export class NSATaskBar<ItemType> extends Component<NSATaskBarProps<ItemType>, NSATaskBarState>
|
|
41
|
+
{
|
|
42
|
+
private counter: number = 0;
|
|
43
|
+
private removeDelayMs: number = 4000;
|
|
44
|
+
|
|
45
|
+
constructor(props: NSATaskBarProps<ItemType>)
|
|
46
|
+
{
|
|
47
|
+
super(props);
|
|
48
|
+
this.state = { tasks: [] };
|
|
49
|
+
this.run = this.run.bind(this);
|
|
50
|
+
this.dismiss = this.dismiss.bind(this);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
private update(id: string, patch: Partial<NSATask>): void
|
|
54
|
+
{
|
|
55
|
+
this.setState(prev => ({
|
|
56
|
+
tasks: prev.tasks.map(task => task.id === id ? { ...task, ...patch } : task)
|
|
57
|
+
}));
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
public dismiss(id: string): void
|
|
61
|
+
{
|
|
62
|
+
this.setState(prev => ({ tasks: prev.tasks.filter(task => task.id !== id) }));
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
public async run(): Promise<NSATaskResult<ItemType>>
|
|
66
|
+
{
|
|
67
|
+
this.counter += 1;
|
|
68
|
+
const id = `nsa-task-${this.counter}`;
|
|
69
|
+
|
|
70
|
+
const items = this.props.items;
|
|
71
|
+
const handler = this.props.handler;
|
|
72
|
+
const onItemError = this.props.onItemError;
|
|
73
|
+
|
|
74
|
+
let cancelled = false;
|
|
75
|
+
const task: NSATask = {
|
|
76
|
+
id,
|
|
77
|
+
title: this.props.title,
|
|
78
|
+
total: items.length,
|
|
79
|
+
completed: 0,
|
|
80
|
+
succeeded: 0,
|
|
81
|
+
failed: 0,
|
|
82
|
+
status: "running",
|
|
83
|
+
cancel: () => { cancelled = true; }
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
this.setState(prev => ({ tasks: [...prev.tasks, task] }));
|
|
87
|
+
|
|
88
|
+
const succeeded: ItemType[] = [];
|
|
89
|
+
const failed: ItemType[] = [];
|
|
90
|
+
|
|
91
|
+
for (let index = 0; index < items.length; index++)
|
|
92
|
+
{
|
|
93
|
+
if (cancelled)
|
|
94
|
+
break;
|
|
95
|
+
|
|
96
|
+
const item = items[index];
|
|
97
|
+
try
|
|
98
|
+
{
|
|
99
|
+
await handler(item, index);
|
|
100
|
+
succeeded.push(item);
|
|
101
|
+
}
|
|
102
|
+
catch (error: any)
|
|
103
|
+
{
|
|
104
|
+
failed.push(item);
|
|
105
|
+
onItemError?.(item, error, index);
|
|
106
|
+
}
|
|
107
|
+
this.update(id, {
|
|
108
|
+
completed: succeeded.length + failed.length,
|
|
109
|
+
succeeded: succeeded.length,
|
|
110
|
+
failed: failed.length,
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
this.update(id, { status: cancelled ? "cancelled" : "completed" });
|
|
115
|
+
|
|
116
|
+
window.setTimeout(() => this.dismiss(id), this.removeDelayMs);
|
|
117
|
+
|
|
118
|
+
return { succeeded, failed, cancelled };
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
private renderStatus(task: NSATask): string
|
|
122
|
+
{
|
|
123
|
+
if (task.status === "running")
|
|
124
|
+
{
|
|
125
|
+
const remaining = task.total - task.completed;
|
|
126
|
+
let running: string[] = [`${task.succeeded} done`];
|
|
127
|
+
if (task.failed > 0)
|
|
128
|
+
running.push(`${task.failed} failed`);
|
|
129
|
+
running.push(`${remaining} left`);
|
|
130
|
+
return running.join(", ");
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
const skipped = task.total - task.completed;
|
|
134
|
+
let parts: string[] = [`${task.succeeded} done`];
|
|
135
|
+
if (task.failed > 0)
|
|
136
|
+
parts.push(`${task.failed} failed`);
|
|
137
|
+
if (skipped > 0)
|
|
138
|
+
parts.push(`${skipped} skipped`);
|
|
139
|
+
|
|
140
|
+
const prefix = task.status === "cancelled" ? "Cancelled" : "Done";
|
|
141
|
+
return `${prefix} — ${parts.join(", ")}`;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
override render()
|
|
145
|
+
{
|
|
146
|
+
const tasks = this.state.tasks;
|
|
147
|
+
if (tasks.length === 0)
|
|
148
|
+
return null;
|
|
149
|
+
|
|
150
|
+
return (
|
|
151
|
+
<div className={Styles.nsa_task_bar}>
|
|
152
|
+
{
|
|
153
|
+
tasks.map(task =>
|
|
154
|
+
{
|
|
155
|
+
const progress = task.total > 0 ? (task.completed / task.total) * 100 : 0;
|
|
156
|
+
return (
|
|
157
|
+
<div key={task.id} className={Styles.nsa_task_card}>
|
|
158
|
+
<div className={Styles.nsa_task_header}>
|
|
159
|
+
<span className={Styles.nsa_task_title}>{task.title}</span>
|
|
160
|
+
{
|
|
161
|
+
task.status !== "running" &&
|
|
162
|
+
<span
|
|
163
|
+
className={Styles.nsa_task_close}
|
|
164
|
+
onClick={() => this.dismiss(task.id)}
|
|
165
|
+
>
|
|
166
|
+
✕
|
|
167
|
+
</span>
|
|
168
|
+
}
|
|
169
|
+
</div>
|
|
170
|
+
<NSProgressBar progress={progress} title={this.renderStatus(task)} />
|
|
171
|
+
{
|
|
172
|
+
task.status === "running" &&
|
|
173
|
+
<div className={Styles.nsa_task_actions}>
|
|
174
|
+
<NSButtonRed
|
|
175
|
+
title="Cancel"
|
|
176
|
+
onClick={{
|
|
177
|
+
showLoading: false,
|
|
178
|
+
action: (onFinished) =>
|
|
179
|
+
{
|
|
180
|
+
task.cancel();
|
|
181
|
+
onFinished();
|
|
182
|
+
}
|
|
183
|
+
}}
|
|
184
|
+
/>
|
|
185
|
+
</div>
|
|
186
|
+
}
|
|
187
|
+
</div>
|
|
188
|
+
);
|
|
189
|
+
})
|
|
190
|
+
}
|
|
191
|
+
</div>
|
|
192
|
+
);
|
|
193
|
+
}
|
|
194
194
|
}
|
|
@@ -1,68 +1,68 @@
|
|
|
1
|
-
.ns_figure {
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: column;
|
|
4
|
-
align-items: center;
|
|
5
|
-
gap: 1rem;
|
|
6
|
-
margin-bottom: 0;
|
|
7
|
-
color: #141b5c;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.ns_figure>img {
|
|
11
|
-
border-radius: 50%;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.ns_figure figcaption {
|
|
15
|
-
display: flex;
|
|
16
|
-
flex-direction: column;
|
|
17
|
-
align-items: center;
|
|
18
|
-
gap: 0.5rem;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.ns_figure_placeholder {
|
|
22
|
-
width: 6rem;
|
|
23
|
-
height: 6rem;
|
|
24
|
-
display: flex;
|
|
25
|
-
align-items: center;
|
|
26
|
-
justify-content: center;
|
|
27
|
-
border-radius: 50%;
|
|
28
|
-
background-color: #141b5c;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.ns_figure_placeholder span {
|
|
32
|
-
font-size: 1.75rem;
|
|
33
|
-
font-weight: 500;
|
|
34
|
-
word-spacing: -0.375rem;
|
|
35
|
-
color: #fff;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.ns_figure_title {
|
|
39
|
-
font-size: 1.5rem;
|
|
40
|
-
font-weight: 600;
|
|
41
|
-
line-height: 1.75rem;
|
|
42
|
-
text-align: center;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.ns_actions_wrapper {
|
|
46
|
-
display: flex;
|
|
47
|
-
flex-direction: column;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.ns_actions_wrapper .ns_link>a,
|
|
51
|
-
.ns_actions_wrapper .ns_button {
|
|
52
|
-
box-shadow: none;
|
|
53
|
-
color: #141b5c !important;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.ns_actions_wrapper .ns_link>a:hover,
|
|
57
|
-
.ns_actions_wrapper .ns_button:hover {
|
|
58
|
-
background-color: #b2bbd9;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.ns_user_id {
|
|
62
|
-
margin: 0;
|
|
63
|
-
font-size: 16px;
|
|
64
|
-
font-weight: 600;
|
|
65
|
-
text-align: right;
|
|
66
|
-
color: rgba(3, 119, 255);
|
|
67
|
-
cursor: pointer;
|
|
1
|
+
.ns_figure {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
align-items: center;
|
|
5
|
+
gap: 1rem;
|
|
6
|
+
margin-bottom: 0;
|
|
7
|
+
color: #141b5c;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.ns_figure>img {
|
|
11
|
+
border-radius: 50%;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.ns_figure figcaption {
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
align-items: center;
|
|
18
|
+
gap: 0.5rem;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.ns_figure_placeholder {
|
|
22
|
+
width: 6rem;
|
|
23
|
+
height: 6rem;
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
border-radius: 50%;
|
|
28
|
+
background-color: #141b5c;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.ns_figure_placeholder span {
|
|
32
|
+
font-size: 1.75rem;
|
|
33
|
+
font-weight: 500;
|
|
34
|
+
word-spacing: -0.375rem;
|
|
35
|
+
color: #fff;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.ns_figure_title {
|
|
39
|
+
font-size: 1.5rem;
|
|
40
|
+
font-weight: 600;
|
|
41
|
+
line-height: 1.75rem;
|
|
42
|
+
text-align: center;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.ns_actions_wrapper {
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: column;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.ns_actions_wrapper .ns_link>a,
|
|
51
|
+
.ns_actions_wrapper .ns_button {
|
|
52
|
+
box-shadow: none;
|
|
53
|
+
color: #141b5c !important;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.ns_actions_wrapper .ns_link>a:hover,
|
|
57
|
+
.ns_actions_wrapper .ns_button:hover {
|
|
58
|
+
background-color: #b2bbd9;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.ns_user_id {
|
|
62
|
+
margin: 0;
|
|
63
|
+
font-size: 16px;
|
|
64
|
+
font-weight: 600;
|
|
65
|
+
text-align: right;
|
|
66
|
+
color: rgba(3, 119, 255);
|
|
67
|
+
cursor: pointer;
|
|
68
68
|
}
|