namirasoft-account-react 1.5.38 → 1.5.39

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.
Files changed (145) hide show
  1. package/.env.template +15 -15
  2. package/SKILL.md +514 -514
  3. package/config-overrides.js +72 -72
  4. package/dist/App.d.ts +1 -1
  5. package/dist/FieldCacheService.js +4 -0
  6. package/dist/FieldCacheService.js.map +1 -1
  7. package/dist/NSARouterMaker.js +1 -1
  8. package/dist/NSARouterMaker.js.map +1 -1
  9. package/dist/Router.d.ts +1 -1
  10. package/dist/UseParams.d.ts +1 -1
  11. package/dist/components/NSAAccessListDialog.d.ts +2 -2
  12. package/dist/components/NSAAccessListDialog.module.css +71 -71
  13. package/dist/components/NSABoxSecret.d.ts +1 -1
  14. package/dist/components/NSABoxSecret.module.css +23 -23
  15. package/dist/components/NSAMasterMenu.d.ts +1 -1
  16. package/dist/components/NSAMasterMenu.js +4 -0
  17. package/dist/components/NSAMasterMenu.js.map +1 -1
  18. package/dist/components/NSAMasterMenu.module.css +250 -250
  19. package/dist/components/NSAMasterMenuItem.d.ts +1 -1
  20. package/dist/components/NSAMessageListDialog.d.ts +1 -1
  21. package/dist/components/NSAMessageListDialog.module.css +99 -99
  22. package/dist/components/NSANavigationGuard.d.ts +1 -1
  23. package/dist/components/NSAProductListDialog.d.ts +1 -1
  24. package/dist/components/NSAProductListDialog.module.css +44 -44
  25. package/dist/components/NSATaskBar.d.ts +1 -1
  26. package/dist/components/NSATaskBar.module.css +57 -57
  27. package/dist/components/NSAUserDialog.d.ts +1 -1
  28. package/dist/components/NSAUserDialog.module.css +67 -67
  29. package/dist/components/NSAWorkspaceListDialog.d.ts +1 -1
  30. package/dist/components/NSAWorkspaceListDialog.module.css +41 -41
  31. package/dist/components/NSFBoxCategoryScope.d.ts +1 -1
  32. package/dist/components/NSFBoxField.d.ts +1 -1
  33. package/dist/components/NSFBoxSlot.d.ts +1 -1
  34. package/dist/components/NSFBoxWrapper.d.ts +1 -1
  35. package/dist/components/NSLabelSecret.d.ts +1 -1
  36. package/dist/components/quickfilter/NSAFilterBoxEnum.module.css +51 -51
  37. package/dist/components/quickfilter/NSAQuickFilterBar.d.ts +1 -1
  38. package/dist/components/quickfilter/NSAQuickFilterBar.module.css +20 -20
  39. package/dist/components/quickfilter/NSAQuickFilterDialog.d.ts +1 -1
  40. package/dist/components/quickfilter/NSAQuickFilterDialog.module.css +74 -74
  41. package/dist/layouts/NSALayout.d.ts +1 -1
  42. package/dist/layouts/NSASectionEdit.d.ts +1 -1
  43. package/dist/layouts/NSASectionEditTabPage.d.ts +1 -1
  44. package/dist/layouts/NSASectionEditTabPage.module.css +4 -4
  45. package/dist/layouts/NSASectionList.d.ts +1 -1
  46. package/dist/layouts/NSASectionList.module.css +24 -24
  47. package/dist/layouts/NSASectionView.d.ts +1 -1
  48. package/dist/layouts/NSASectionViewTabMore.d.ts +1 -1
  49. package/dist/layouts/NSASectionViewTabPage.d.ts +1 -1
  50. package/dist/layouts/NSASectionViewTabPage.module.css +47 -47
  51. package/dist/pages/NSAConsentPage.module.css +26 -26
  52. package/dist/pages/NSAEmailVerificationPage.d.ts +1 -1
  53. package/dist/pages/NSAHomePage.d.ts +1 -1
  54. package/dist/pages/NSAHomePage.module.css +41 -41
  55. package/dist/pages/NSALoginPage.d.ts +1 -1
  56. package/dist/pages/NSALoginPage.module.css +26 -26
  57. package/dist/pages/NSAPhoneVerificationPage.d.ts +1 -1
  58. package/dist/pages/NSAVerificationPage.d.ts +1 -1
  59. package/dist/pages/NSAVerificationPage.module.css +31 -31
  60. package/package.json +94 -94
  61. package/public/index.html +21 -21
  62. package/src/App.tsx +72 -72
  63. package/src/CTFRow.ts +7 -7
  64. package/src/FieldCacheService.tsx +113 -108
  65. package/src/IEntityInfo.ts +33 -33
  66. package/src/NSACacheService.ts +126 -126
  67. package/src/NSAFilterOperators.ts +94 -94
  68. package/src/NSARouterMaker.tsx +141 -141
  69. package/src/NSARouterMakerProps.ts +23 -23
  70. package/src/NSARouterMakerResult.ts +24 -24
  71. package/src/NSFRouterMaker.tsx +35 -35
  72. package/src/NSFRouterProps.ts +7 -7
  73. package/src/NSFRoutes.ts +30 -30
  74. package/src/Router.tsx +48 -48
  75. package/src/UseParams.tsx +17 -17
  76. package/src/components/NSAAccessListDialog.module.css +71 -71
  77. package/src/components/NSAAccessListDialog.tsx +178 -178
  78. package/src/components/NSABoxSecret.module.css +23 -23
  79. package/src/components/NSABoxSecret.tsx +264 -264
  80. package/src/components/NSAMasterMenu.module.css +250 -250
  81. package/src/components/NSAMasterMenu.tsx +174 -169
  82. package/src/components/NSAMasterMenuItem.tsx +250 -250
  83. package/src/components/NSAMessageListDialog.module.css +99 -99
  84. package/src/components/NSAMessageListDialog.tsx +144 -144
  85. package/src/components/NSANavigationGuard.tsx +79 -79
  86. package/src/components/NSAProductListDialog.module.css +44 -44
  87. package/src/components/NSAProductListDialog.tsx +88 -88
  88. package/src/components/NSATable.tsx +494 -494
  89. package/src/components/NSATaskBar.module.css +57 -57
  90. package/src/components/NSATaskBar.tsx +193 -193
  91. package/src/components/NSAUserDialog.module.css +67 -67
  92. package/src/components/NSAUserDialog.tsx +122 -122
  93. package/src/components/NSAWorkspaceListDialog.module.css +41 -41
  94. package/src/components/NSAWorkspaceListDialog.tsx +147 -147
  95. package/src/components/NSFBoxCategoryScope.tsx +52 -52
  96. package/src/components/NSFBoxField.tsx +37 -37
  97. package/src/components/NSFBoxSlot.tsx +73 -73
  98. package/src/components/NSFBoxWrapper.tsx +69 -69
  99. package/src/components/NSLabelSecret.tsx +37 -37
  100. package/src/components/quickfilter/NSAFilterBoxBase.tsx +110 -110
  101. package/src/components/quickfilter/NSAFilterBoxBoolean.tsx +72 -72
  102. package/src/components/quickfilter/NSAFilterBoxDate.tsx +110 -110
  103. package/src/components/quickfilter/NSAFilterBoxDateTime.tsx +110 -110
  104. package/src/components/quickfilter/NSAFilterBoxEnum.module.css +51 -51
  105. package/src/components/quickfilter/NSAFilterBoxEnum.tsx +103 -103
  106. package/src/components/quickfilter/NSAFilterBoxNumber.tsx +145 -145
  107. package/src/components/quickfilter/NSAFilterBoxString.tsx +83 -83
  108. package/src/components/quickfilter/NSAFilterBoxTime.tsx +106 -106
  109. package/src/components/quickfilter/NSAQuickFilterBar.module.css +20 -20
  110. package/src/components/quickfilter/NSAQuickFilterBar.tsx +142 -142
  111. package/src/components/quickfilter/NSAQuickFilterDialog.module.css +74 -74
  112. package/src/components/quickfilter/NSAQuickFilterDialog.tsx +297 -297
  113. package/src/css.d.ts +13 -13
  114. package/src/formatters/SecretFormatter.tsx +24 -24
  115. package/src/index.tsx +27 -27
  116. package/src/layouts/Actions.ts +146 -146
  117. package/src/layouts/CFTUtil.ts +18 -18
  118. package/src/layouts/NSALayout.tsx +750 -750
  119. package/src/layouts/NSALayout_Field.ts +125 -125
  120. package/src/layouts/NSASectionEdit.tsx +279 -279
  121. package/src/layouts/NSASectionEditTabPage.module.css +4 -4
  122. package/src/layouts/NSASectionEditTabPage.tsx +256 -256
  123. package/src/layouts/NSASectionList.module.css +24 -24
  124. package/src/layouts/NSASectionList.tsx +165 -165
  125. package/src/layouts/NSASectionView.tsx +98 -98
  126. package/src/layouts/NSASectionViewTabMore.tsx +78 -78
  127. package/src/layouts/NSASectionViewTabPage.module.css +47 -47
  128. package/src/layouts/NSASectionViewTabPage.tsx +400 -400
  129. package/src/main.ts +52 -52
  130. package/src/pages/NSAConsentPage.module.css +26 -26
  131. package/src/pages/NSAConsentPage.tsx +120 -120
  132. package/src/pages/NSAEmailVerificationPage.tsx +30 -30
  133. package/src/pages/NSAHomePage.module.css +41 -41
  134. package/src/pages/NSAHomePage.tsx +113 -113
  135. package/src/pages/NSALoginPage.module.css +26 -26
  136. package/src/pages/NSALoginPage.tsx +87 -87
  137. package/src/pages/NSAPhoneVerificationPage.tsx +106 -106
  138. package/src/pages/NSAVerificationPage.module.css +31 -31
  139. package/src/pages/NSAVerificationPage.tsx +185 -185
  140. package/src/pages/NSFCategoryEditPage.tsx +87 -87
  141. package/src/pages/NSFCategoryListPage.tsx +23 -23
  142. package/src/pages/NSFCategoryViewPage.tsx +23 -23
  143. package/src/pages/NSFEntities.ts +58 -58
  144. package/src/pages/PaymentRequired.tsx +80 -80
  145. package/tsconfig.json +43 -43
@@ -1,111 +1,111 @@
1
- import { FilterItem, FilterItemOperator, SortItem, TimeOperation } from "namirasoft-core";
2
- import { NSBoxDateTime, NSBoxDateTimeRange, NSBoxEntity } from "namirasoft-site-react";
3
- import { NSAFilterBoxBase, NSAFilterBoxBaseProps } from "./NSAFilterBoxBase";
4
- import { NSAFilterBoxBoolean } from "./NSAFilterBoxBoolean";
5
-
6
- export interface NSAFilterBoxDateTimeProps extends NSAFilterBoxBaseProps
7
- {
8
- getValues: (search: string) => Promise<{ value: string; title: string }[]>;
9
- }
10
-
11
- type ValueItem = { value: string; title: string };
12
-
13
- const ENTITY_OPERATORS = ["equals"];
14
-
15
- export class NSAFilterBoxDateTime extends NSAFilterBoxBase<NSAFilterBoxDateTimeProps>
16
- {
17
- private betweenActive = this.getInitialBetween() !== undefined;
18
-
19
- private list = async (
20
- filters: FilterItem[] | null,
21
- _page: number | null,
22
- _size: number | null,
23
- _sorts: SortItem[]
24
- ): Promise<{ count: number; rows: ValueItem[] }> =>
25
- {
26
- const searchFilter = filters?.find(f => f.values.length > 0);
27
- const search = searchFilter?.values[0] ?? "";
28
- const rows = await this.props.getValues(search);
29
- return { count: rows.length, rows };
30
- };
31
-
32
- override render(): JSX.Element | null
33
- {
34
- const { config, onChanged } = this.props;
35
- const op = config.operatorName
36
- ? FilterItemOperator.getByName(config.operatorName)
37
- : null;
38
-
39
- if (op && op.count === 0)
40
- return <NSAFilterBoxBoolean config={config} initial={this.props.initial} onChanged={onChanged} />;
41
-
42
- const between = this.getInitialBetween();
43
-
44
- if (config.operatorName === "between")
45
- return (
46
- <NSBoxDateTimeRange
47
- title={this.getLabel()}
48
- placeholder={this.getLabel()}
49
- required={false}
50
- hideHeader={true}
51
- preset={true}
52
- defaultValue={between ? { from: this.parseDBDate(between.from), to: this.parseDBDate(between.to) } : undefined}
53
- onChanged={e =>
54
- {
55
- const val = e.getValue();
56
- if (val)
57
- {
58
- this.betweenActive = true;
59
- onChanged(this.buildBetweenFilterItems(
60
- TimeOperation.toDBFormat(val.from),
61
- TimeOperation.toDBFormat(val.to)
62
- ));
63
- }
64
- else if (this.betweenActive)
65
- {
66
- this.betweenActive = false;
67
- onChanged(null);
68
- }
69
- }}
70
- />
71
- );
72
-
73
- if (config.operatorName && ENTITY_OPERATORS.includes(config.operatorName))
74
- return (
75
- <NSBoxEntity<ValueItem>
76
- title={this.getLabel()}
77
- placeholder={this.getLabel()}
78
- required={false}
79
- hideHeader={true}
80
- multiple={false}
81
- defaultValue={this.getInitialValue()}
82
- list={this.list}
83
- table_name={config.column.table.name}
84
- getValue={item => item.value}
85
- getTitle={item => item.title}
86
- getSort={() => null}
87
- onChanged={e =>
88
- {
89
- const val = e.getValueOne();
90
- onChanged(val ? this.buildFilterItem(val) : null);
91
- }}
92
- />
93
- );
94
-
95
- const single = this.getInitialValue();
96
- return (
97
- <NSBoxDateTime
98
- title={this.getLabel()}
99
- placeholder={this.getLabel()}
100
- required={false}
101
- hideHeader={true}
102
- defaultValue={single !== undefined ? this.parseDBDate(single) : undefined}
103
- onChanged={e =>
104
- {
105
- const val = e.getValue();
106
- onChanged(val ? this.buildFilterItem(TimeOperation.toDBFormat(val)) : null);
107
- }}
108
- />
109
- );
110
- }
1
+ import { FilterItem, FilterItemOperator, SortItem, TimeOperation } from "namirasoft-core";
2
+ import { NSBoxDateTime, NSBoxDateTimeRange, NSBoxEntity } from "namirasoft-site-react";
3
+ import { NSAFilterBoxBase, NSAFilterBoxBaseProps } from "./NSAFilterBoxBase";
4
+ import { NSAFilterBoxBoolean } from "./NSAFilterBoxBoolean";
5
+
6
+ export interface NSAFilterBoxDateTimeProps extends NSAFilterBoxBaseProps
7
+ {
8
+ getValues: (search: string) => Promise<{ value: string; title: string }[]>;
9
+ }
10
+
11
+ type ValueItem = { value: string; title: string };
12
+
13
+ const ENTITY_OPERATORS = ["equals"];
14
+
15
+ export class NSAFilterBoxDateTime extends NSAFilterBoxBase<NSAFilterBoxDateTimeProps>
16
+ {
17
+ private betweenActive = this.getInitialBetween() !== undefined;
18
+
19
+ private list = async (
20
+ filters: FilterItem[] | null,
21
+ _page: number | null,
22
+ _size: number | null,
23
+ _sorts: SortItem[]
24
+ ): Promise<{ count: number; rows: ValueItem[] }> =>
25
+ {
26
+ const searchFilter = filters?.find(f => f.values.length > 0);
27
+ const search = searchFilter?.values[0] ?? "";
28
+ const rows = await this.props.getValues(search);
29
+ return { count: rows.length, rows };
30
+ };
31
+
32
+ override render(): JSX.Element | null
33
+ {
34
+ const { config, onChanged } = this.props;
35
+ const op = config.operatorName
36
+ ? FilterItemOperator.getByName(config.operatorName)
37
+ : null;
38
+
39
+ if (op && op.count === 0)
40
+ return <NSAFilterBoxBoolean config={config} initial={this.props.initial} onChanged={onChanged} />;
41
+
42
+ const between = this.getInitialBetween();
43
+
44
+ if (config.operatorName === "between")
45
+ return (
46
+ <NSBoxDateTimeRange
47
+ title={this.getLabel()}
48
+ placeholder={this.getLabel()}
49
+ required={false}
50
+ hideHeader={true}
51
+ preset={true}
52
+ defaultValue={between ? { from: this.parseDBDate(between.from), to: this.parseDBDate(between.to) } : undefined}
53
+ onChanged={e =>
54
+ {
55
+ const val = e.getValue();
56
+ if (val)
57
+ {
58
+ this.betweenActive = true;
59
+ onChanged(this.buildBetweenFilterItems(
60
+ TimeOperation.toDBFormat(val.from),
61
+ TimeOperation.toDBFormat(val.to)
62
+ ));
63
+ }
64
+ else if (this.betweenActive)
65
+ {
66
+ this.betweenActive = false;
67
+ onChanged(null);
68
+ }
69
+ }}
70
+ />
71
+ );
72
+
73
+ if (config.operatorName && ENTITY_OPERATORS.includes(config.operatorName))
74
+ return (
75
+ <NSBoxEntity<ValueItem>
76
+ title={this.getLabel()}
77
+ placeholder={this.getLabel()}
78
+ required={false}
79
+ hideHeader={true}
80
+ multiple={false}
81
+ defaultValue={this.getInitialValue()}
82
+ list={this.list}
83
+ table_name={config.column.table.name}
84
+ getValue={item => item.value}
85
+ getTitle={item => item.title}
86
+ getSort={() => null}
87
+ onChanged={e =>
88
+ {
89
+ const val = e.getValueOne();
90
+ onChanged(val ? this.buildFilterItem(val) : null);
91
+ }}
92
+ />
93
+ );
94
+
95
+ const single = this.getInitialValue();
96
+ return (
97
+ <NSBoxDateTime
98
+ title={this.getLabel()}
99
+ placeholder={this.getLabel()}
100
+ required={false}
101
+ hideHeader={true}
102
+ defaultValue={single !== undefined ? this.parseDBDate(single) : undefined}
103
+ onChanged={e =>
104
+ {
105
+ const val = e.getValue();
106
+ onChanged(val ? this.buildFilterItem(TimeOperation.toDBFormat(val)) : null);
107
+ }}
108
+ />
109
+ );
110
+ }
111
111
  }
@@ -1,52 +1,52 @@
1
- .title {
2
- font-size: 13px;
3
- font-weight: 400;
4
- color: #6b6b6b;
5
- display: flex;
6
- align-items: center;
7
- white-space: nowrap;
8
- flex-shrink: 0;
9
- margin-right: 2px;
10
- }
11
-
12
- .container {
13
- display: flex;
14
- flex-wrap: nowrap;
15
- align-items: center;
16
- gap: 6px;
17
- height: 48px;
18
- width: 100%;
19
- box-sizing: border-box;
20
- padding: 0 10px;
21
- border: 1px solid #a0a0a0;
22
- border-radius: 8px;
23
- background-color: #fff;
24
- overflow-x: auto;
25
- overflow-y: hidden;
26
- }
27
-
28
- .option {
29
- padding: 4px 12px;
30
- border-radius: 16px;
31
- border: 1px solid #a0a0a0;
32
- background-color: #fff;
33
- color: #333;
34
- cursor: pointer;
35
- font-size: 13px;
36
- font-family: inherit;
37
- flex-shrink: 0;
38
- white-space: nowrap;
39
- }
40
-
41
- .option_active {
42
- border-color: #1976d2;
43
- background-color: #1976d2;
44
- color: #fff;
45
- }
46
-
47
- .option_exclude {
48
- border-color: #d32f2f;
49
- text-decoration: line-through;
50
- text-decoration-color: #d32f2f;
51
- text-decoration-thickness: 1px;
1
+ .title {
2
+ font-size: 13px;
3
+ font-weight: 400;
4
+ color: #6b6b6b;
5
+ display: flex;
6
+ align-items: center;
7
+ white-space: nowrap;
8
+ flex-shrink: 0;
9
+ margin-right: 2px;
10
+ }
11
+
12
+ .container {
13
+ display: flex;
14
+ flex-wrap: nowrap;
15
+ align-items: center;
16
+ gap: 6px;
17
+ height: 48px;
18
+ width: 100%;
19
+ box-sizing: border-box;
20
+ padding: 0 10px;
21
+ border: 1px solid #a0a0a0;
22
+ border-radius: 8px;
23
+ background-color: #fff;
24
+ overflow-x: auto;
25
+ overflow-y: hidden;
26
+ }
27
+
28
+ .option {
29
+ padding: 4px 12px;
30
+ border-radius: 16px;
31
+ border: 1px solid #a0a0a0;
32
+ background-color: #fff;
33
+ color: #333;
34
+ cursor: pointer;
35
+ font-size: 13px;
36
+ font-family: inherit;
37
+ flex-shrink: 0;
38
+ white-space: nowrap;
39
+ }
40
+
41
+ .option_active {
42
+ border-color: #1976d2;
43
+ background-color: #1976d2;
44
+ color: #fff;
45
+ }
46
+
47
+ .option_exclude {
48
+ border-color: #d32f2f;
49
+ text-decoration: line-through;
50
+ text-decoration-color: #d32f2f;
51
+ text-decoration-thickness: 1px;
52
52
  }
@@ -1,104 +1,104 @@
1
- import { FilterItemOperator } from "namirasoft-core";
2
- import { NSLoading } from "namirasoft-site-react";
3
- import { NSAFilterBoxBase, NSAFilterBoxBaseProps } from "./NSAFilterBoxBase";
4
- import { NSAFilterBoxBoolean } from "./NSAFilterBoxBoolean";
5
- import Styles from "./NSAFilterBoxEnum.module.css";
6
-
7
- export interface NSAFilterBoxEnumProps extends NSAFilterBoxBaseProps
8
- {
9
- getValues: (search: string) => Promise<{ value: string; title: string }[]>;
10
- }
11
-
12
- type ValueItem = { value: string; title: string };
13
-
14
- type SelectionMode = "include" | "exclude";
15
-
16
- type State = {
17
- loading: boolean;
18
- values: ValueItem[];
19
- selection: { [value: string]: SelectionMode };
20
- };
21
-
22
- export class NSAFilterBoxEnum extends NSAFilterBoxBase<NSAFilterBoxEnumProps, State>
23
- {
24
- constructor(props: NSAFilterBoxEnumProps)
25
- {
26
- super(props);
27
- this.state = { loading: false, values: [], selection: this.buildInitialSelection() };
28
- }
29
-
30
- private buildInitialSelection(): { [value: string]: SelectionMode }
31
- {
32
- const ans: { [value: string]: SelectionMode } = {};
33
- for (const item of this.getInitialItems())
34
- for (const v of item.values)
35
- ans[v] = item.not ? "exclude" : "include";
36
- return ans;
37
- }
38
-
39
- private cycleSelection(value: string)
40
- {
41
- const next = { ...this.state.selection };
42
- const mode = next[value];
43
- if (!mode)
44
- next[value] = "include";
45
- else if (mode === "include")
46
- next[value] = "exclude";
47
- else
48
- delete next[value];
49
- this.setState({ selection: next });
50
-
51
- const items = Object.entries(next).map(([v, m]) =>
52
- m === "include" ? this.buildFilterItem(v) : this.buildInverseFilterItem(v));
53
- this.props.onChanged(items.length > 0 ? items : null);
54
- }
55
-
56
- override async componentDidMount()
57
- {
58
- this.setState({ loading: true });
59
- const values = await this.props.getValues("");
60
- this.setState({ loading: false, values });
61
- }
62
-
63
- override render(): JSX.Element | null
64
- {
65
- const { config, onChanged } = this.props;
66
- const op = config.operatorName
67
- ? FilterItemOperator.getByName(config.operatorName)
68
- : null;
69
-
70
- if (op && op.count === 0)
71
- return <NSAFilterBoxBoolean config={config} initial={this.props.initial} onChanged={onChanged} />;
72
-
73
- if (config.operatorName === "equals")
74
- {
75
- return (
76
- <div className={Styles.container}>
77
- <span className={Styles.title}>{this.getLabel()}</span>
78
- {
79
- this.state.loading
80
- ? <NSLoading classList={["p-2"]} small={true} hideTitle={true} hideDescription={true} />
81
- : this.state.values.map(item =>
82
- {
83
- const mode = this.state.selection[item.value];
84
- const modeClass = mode === "include" ? Styles.option_active
85
- : mode === "exclude" ? Styles.option_exclude
86
- : "";
87
- return (
88
- <button
89
- key={item.value}
90
- className={`${Styles.option} ${modeClass}`}
91
- onClick={() => this.cycleSelection(item.value)}
92
- >
93
- {item.title}
94
- </button>
95
- );
96
- })
97
- }
98
- </div>
99
- );
100
- }
101
-
102
- return null;
103
- }
1
+ import { FilterItemOperator } from "namirasoft-core";
2
+ import { NSLoading } from "namirasoft-site-react";
3
+ import { NSAFilterBoxBase, NSAFilterBoxBaseProps } from "./NSAFilterBoxBase";
4
+ import { NSAFilterBoxBoolean } from "./NSAFilterBoxBoolean";
5
+ import Styles from "./NSAFilterBoxEnum.module.css";
6
+
7
+ export interface NSAFilterBoxEnumProps extends NSAFilterBoxBaseProps
8
+ {
9
+ getValues: (search: string) => Promise<{ value: string; title: string }[]>;
10
+ }
11
+
12
+ type ValueItem = { value: string; title: string };
13
+
14
+ type SelectionMode = "include" | "exclude";
15
+
16
+ type State = {
17
+ loading: boolean;
18
+ values: ValueItem[];
19
+ selection: { [value: string]: SelectionMode };
20
+ };
21
+
22
+ export class NSAFilterBoxEnum extends NSAFilterBoxBase<NSAFilterBoxEnumProps, State>
23
+ {
24
+ constructor(props: NSAFilterBoxEnumProps)
25
+ {
26
+ super(props);
27
+ this.state = { loading: false, values: [], selection: this.buildInitialSelection() };
28
+ }
29
+
30
+ private buildInitialSelection(): { [value: string]: SelectionMode }
31
+ {
32
+ const ans: { [value: string]: SelectionMode } = {};
33
+ for (const item of this.getInitialItems())
34
+ for (const v of item.values)
35
+ ans[v] = item.not ? "exclude" : "include";
36
+ return ans;
37
+ }
38
+
39
+ private cycleSelection(value: string)
40
+ {
41
+ const next = { ...this.state.selection };
42
+ const mode = next[value];
43
+ if (!mode)
44
+ next[value] = "include";
45
+ else if (mode === "include")
46
+ next[value] = "exclude";
47
+ else
48
+ delete next[value];
49
+ this.setState({ selection: next });
50
+
51
+ const items = Object.entries(next).map(([v, m]) =>
52
+ m === "include" ? this.buildFilterItem(v) : this.buildInverseFilterItem(v));
53
+ this.props.onChanged(items.length > 0 ? items : null);
54
+ }
55
+
56
+ override async componentDidMount()
57
+ {
58
+ this.setState({ loading: true });
59
+ const values = await this.props.getValues("");
60
+ this.setState({ loading: false, values });
61
+ }
62
+
63
+ override render(): JSX.Element | null
64
+ {
65
+ const { config, onChanged } = this.props;
66
+ const op = config.operatorName
67
+ ? FilterItemOperator.getByName(config.operatorName)
68
+ : null;
69
+
70
+ if (op && op.count === 0)
71
+ return <NSAFilterBoxBoolean config={config} initial={this.props.initial} onChanged={onChanged} />;
72
+
73
+ if (config.operatorName === "equals")
74
+ {
75
+ return (
76
+ <div className={Styles.container}>
77
+ <span className={Styles.title}>{this.getLabel()}</span>
78
+ {
79
+ this.state.loading
80
+ ? <NSLoading classList={["p-2"]} small={true} hideTitle={true} hideDescription={true} />
81
+ : this.state.values.map(item =>
82
+ {
83
+ const mode = this.state.selection[item.value];
84
+ const modeClass = mode === "include" ? Styles.option_active
85
+ : mode === "exclude" ? Styles.option_exclude
86
+ : "";
87
+ return (
88
+ <button
89
+ key={item.value}
90
+ className={`${Styles.option} ${modeClass}`}
91
+ onClick={() => this.cycleSelection(item.value)}
92
+ >
93
+ {item.title}
94
+ </button>
95
+ );
96
+ })
97
+ }
98
+ </div>
99
+ );
100
+ }
101
+
102
+ return null;
103
+ }
104
104
  }