inviton-powerduck 0.0.77 → 0.0.79
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/common/enum-translation/language-translator.ts +1 -1
- package/common/utils/language-utils.ts +1 -1
- package/components/datatable/datatable-static.tsx +103 -103
- package/components/datatable/datatable.tsx +20 -5
- package/components/datatable/export-excel-modal.tsx +16 -14
- package/components/input/css/pin.css +32 -0
- package/components/input/localized-info-input.tsx +24 -27
- package/components/input/localized-string-input.tsx +8 -7
- package/components/input/localized-string-textarea.tsx +10 -10
- package/components/input/localized-url-input.tsx +8 -7
- package/components/input/pin-input.tsx +146 -0
- package/components/ui/notification.ts +1 -1
- package/package.json +1 -1
|
@@ -3,6 +3,6 @@ import { Language } from "./../enums/language";
|
|
|
3
3
|
|
|
4
4
|
export default class LanguageTranslator {
|
|
5
5
|
static getString(lang: Language | Language) {
|
|
6
|
-
return PowerduckState.getResourceValue('language' + lang as any);
|
|
6
|
+
return PowerduckState.getResourceValue('language' + lang?.toUpperCase() as any);
|
|
7
7
|
}
|
|
8
8
|
}
|
|
@@ -63,7 +63,7 @@ export namespace LanguageUtils {
|
|
|
63
63
|
return newOption;
|
|
64
64
|
};
|
|
65
65
|
|
|
66
|
-
for (const langCode of [Language.sk, Language.en, Language.cs, Language, Language.pl, Language.it, Language.hu]) {
|
|
66
|
+
for (const langCode of [Language.sk, Language.en, Language.cs, Language, Language.pl, Language.it, Language.hu, Language.de]) {
|
|
67
67
|
if (supportedLanguages.includes(langCode as any)) {
|
|
68
68
|
retVal.push(getLanguage(langCode as any));
|
|
69
69
|
}
|
|
@@ -4,125 +4,125 @@ import DataTable, { TableColumn, RowIndexMode, DataTableFilterMode, DataTableOnS
|
|
|
4
4
|
import { IWebApiClient, WebClientApiMethod } from "../../common/IWebClient";
|
|
5
5
|
|
|
6
6
|
interface DataTableStaticArgs {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
7
|
+
id: string;
|
|
8
|
+
cssClass?: string
|
|
9
|
+
columns: TableColumn[];
|
|
10
|
+
rows: any[];
|
|
11
|
+
fullSizeTable?: boolean;
|
|
12
|
+
fullSizeHasButtonBelow?: boolean;
|
|
13
|
+
topVisible?: boolean;
|
|
14
|
+
allowMassOperations?: boolean;
|
|
15
|
+
allowExport?: boolean;
|
|
16
|
+
hidePagination?: boolean;
|
|
17
|
+
checkboxesVisible?: boolean;
|
|
18
|
+
preserveOrderBy?: boolean;
|
|
19
|
+
preserveFilter?: boolean
|
|
20
|
+
checkboxButtonsVisible?: boolean;
|
|
21
|
+
sortableRows?: boolean;
|
|
22
|
+
rowCheckstateChanged?: (row: any, checked: boolean, selectedRows: any[]) => void;
|
|
23
|
+
sortComplete?: (args: DataTableOnSortedArgs) => void;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
@Component
|
|
27
27
|
export class DataTableStaticComponent extends TsxComponent<DataTableStaticArgs> implements DataTableStaticArgs, IWebApiClient {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
28
|
+
@Prop() id: string;
|
|
29
|
+
@Prop() cssClass: string
|
|
30
|
+
@Prop() columns: TableColumn[];
|
|
31
|
+
@Prop() rows: any[];
|
|
32
|
+
@Prop() fullSizeTable: boolean;
|
|
33
|
+
@Prop() fullSizeHasButtonBelow: boolean;
|
|
34
|
+
@Prop() topVisible: boolean;
|
|
35
|
+
@Prop() allowMassOperations: boolean;
|
|
36
|
+
@Prop() allowExport: boolean;
|
|
37
|
+
@Prop() checkboxesVisible!: boolean;
|
|
38
|
+
@Prop() hidePagination!: boolean;
|
|
39
|
+
@Prop() preserveOrderBy!: boolean;
|
|
40
|
+
@Prop() preserveFilter!: boolean
|
|
41
|
+
@Prop() checkboxesTitle!: string;
|
|
42
|
+
@Prop() checkboxButtonsVisible!: boolean;
|
|
43
|
+
@Prop() sortableRows!: boolean;
|
|
44
|
+
@Prop() rowCheckstateChanged?: (row: any, checked: boolean, selectedRows: any[]) => void;
|
|
45
|
+
@Prop() sortComplete?: (args: DataTableOnSortedArgs) => void;
|
|
46
46
|
|
|
47
|
-
|
|
48
|
-
|
|
47
|
+
webClient: boolean = true;
|
|
48
|
+
apiArgs: any = {};
|
|
49
49
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
mounted () {
|
|
51
|
+
this.reloadData();
|
|
52
|
+
}
|
|
53
53
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
54
|
+
updated () {
|
|
55
|
+
this.reloadData();
|
|
56
|
+
}
|
|
57
57
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
exportExcel (): void {
|
|
59
|
+
this.getTable().exportExcel();
|
|
60
|
+
}
|
|
61
61
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
normalizeStringForSearch (str: string): string {
|
|
63
|
+
return this.getTable().normalizeStringForSearch(str);
|
|
64
|
+
}
|
|
65
65
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
66
|
+
private post (data: any): Promise<any> {
|
|
67
|
+
let self = this;
|
|
68
|
+
return new Promise(function (resolve, reject) {
|
|
69
|
+
let rowArr = [...(self.rows || [])];
|
|
70
70
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
71
|
+
resolve({
|
|
72
|
+
TotalCount: rowArr.length,
|
|
73
|
+
TotalFilteredCount: rowArr.length,
|
|
74
|
+
Rows: rowArr,
|
|
75
|
+
InitRows: self.rows
|
|
76
|
+
});
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
79
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
80
|
+
private getTable (): typeof DataTable.prototype {
|
|
81
|
+
return this.$refs.innerTable as typeof DataTable.prototype;
|
|
82
|
+
}
|
|
83
83
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
84
|
+
reloadData (): void {
|
|
85
|
+
this.getTable().reloadData();
|
|
86
|
+
}
|
|
87
87
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
88
|
+
getSelectedRows (): any[] {
|
|
89
|
+
return this.getTable().getSelectedRows();
|
|
90
|
+
}
|
|
91
91
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
92
|
+
getCssClass (): string {
|
|
93
|
+
return `dt-static${this.cssClass ? ' ' + this.cssClass : ''}`;
|
|
94
|
+
}
|
|
95
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
|
-
|
|
96
|
+
render (h) {
|
|
97
|
+
return (
|
|
98
|
+
<DataTable
|
|
99
|
+
id={this.id}
|
|
100
|
+
ref={"innerTable"}
|
|
101
|
+
apiClient={this}
|
|
102
|
+
apiArgs={this.apiArgs}
|
|
103
|
+
rowIndexMode={RowIndexMode.Index}
|
|
104
|
+
apiMethod={WebClientApiMethod.Post}
|
|
105
|
+
filterMode={DataTableFilterMode.Clientside}
|
|
106
|
+
checkboxButtonsVisible={this.checkboxButtonsVisible}
|
|
107
|
+
preserveFilter={this.preserveFilter}
|
|
108
|
+
checkboxesVisible={this.checkboxesVisible}
|
|
109
|
+
rowCheckstateChanged={this.rowCheckstateChanged}
|
|
110
|
+
columns={this.columns}
|
|
111
|
+
cssClass={this.getCssClass()}
|
|
112
|
+
topVisible={this.topVisible == true}
|
|
113
|
+
bottomVisible={false}
|
|
114
|
+
hidePagination={this.hidePagination}
|
|
115
|
+
allowMassOperations={this.allowMassOperations}
|
|
116
|
+
allowExport={this.allowExport}
|
|
117
|
+
fullSizeTable={this.fullSizeTable}
|
|
118
|
+
sortableRows={this.sortableRows}
|
|
119
|
+
sortComplete={this.sortComplete}
|
|
120
|
+
preserveOrderBy={this.preserveOrderBy}
|
|
121
|
+
fullSizeHasButtonBelow={this.fullSizeTable}
|
|
122
|
+
/>
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
125
|
}
|
|
126
126
|
|
|
127
127
|
const DataTableStatic = toNative(DataTableStaticComponent)
|
|
128
|
-
export default DataTableStatic
|
|
128
|
+
export default DataTableStatic
|
|
@@ -301,6 +301,7 @@ export interface TableColumn {
|
|
|
301
301
|
mobileShouldRenderRow?: (row) => boolean;
|
|
302
302
|
exportInclude?: boolean;
|
|
303
303
|
exportValue?: (row) => any;
|
|
304
|
+
customValue?: (row) => string;
|
|
304
305
|
customRender?: (h, row) => void;
|
|
305
306
|
clientsideFilter?: (row: any, filterDefinition: DataTablePostBackFilterItem) => boolean;
|
|
306
307
|
}
|
|
@@ -1132,6 +1133,8 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
|
|
|
1132
1133
|
let val: any;
|
|
1133
1134
|
if (column?.customFilterValue != null) {
|
|
1134
1135
|
val = column.customFilterValue(p);
|
|
1136
|
+
} else if (column?.customValue != null) {
|
|
1137
|
+
val = column.customValue(p);
|
|
1135
1138
|
} else {
|
|
1136
1139
|
val = p[filterData.PropertyName];
|
|
1137
1140
|
}
|
|
@@ -1151,6 +1154,8 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
|
|
|
1151
1154
|
let propVal: any;
|
|
1152
1155
|
if (column?.customFilterValue != null) {
|
|
1153
1156
|
propVal = column.customFilterValue(p);
|
|
1157
|
+
} else if (column?.customValue != null) {
|
|
1158
|
+
propVal = column.customValue(p);
|
|
1154
1159
|
} else {
|
|
1155
1160
|
propVal = p[filterData.PropertyName];
|
|
1156
1161
|
}
|
|
@@ -1175,6 +1180,8 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
|
|
|
1175
1180
|
let propVal: any;
|
|
1176
1181
|
if (column?.customFilterValue != null) {
|
|
1177
1182
|
propVal = column.customFilterValue(p);
|
|
1183
|
+
} else if (column?.customValue != null) {
|
|
1184
|
+
propVal = column.customValue(p);
|
|
1178
1185
|
} else {
|
|
1179
1186
|
propVal = p[filterData.PropertyName];
|
|
1180
1187
|
}
|
|
@@ -1195,6 +1202,8 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
|
|
|
1195
1202
|
let propVal: any;
|
|
1196
1203
|
if (column?.customFilterValue != null) {
|
|
1197
1204
|
propVal = column.customFilterValue(p);
|
|
1205
|
+
} else if (column?.customValue != null) {
|
|
1206
|
+
propVal = column.customValue(p);
|
|
1198
1207
|
} else {
|
|
1199
1208
|
propVal = p[filterData.PropertyName];
|
|
1200
1209
|
}
|
|
@@ -1219,6 +1228,8 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
|
|
|
1219
1228
|
|
|
1220
1229
|
if (column?.customFilterValue != null) {
|
|
1221
1230
|
propVal = column.customFilterValue(row);
|
|
1231
|
+
} else if (column?.customValue != null) {
|
|
1232
|
+
propVal = column.customValue(row);
|
|
1222
1233
|
} else {
|
|
1223
1234
|
propVal = row[propName];
|
|
1224
1235
|
}
|
|
@@ -1756,6 +1767,10 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
|
|
|
1756
1767
|
|
|
1757
1768
|
shouldRenderMobileRowColumn(row, dtColumn: TableColumn): boolean {
|
|
1758
1769
|
if (dtColumn.customRender == null) {
|
|
1770
|
+
if (dtColumn.customValue != null) {
|
|
1771
|
+
return dtColumn.customValue(row) != null;
|
|
1772
|
+
}
|
|
1773
|
+
|
|
1759
1774
|
return row[dtColumn.id] != null;
|
|
1760
1775
|
}
|
|
1761
1776
|
|
|
@@ -2025,7 +2040,7 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
|
|
|
2025
2040
|
</td>
|
|
2026
2041
|
|
|
2027
2042
|
{columns.map((dtColumn, j) => (
|
|
2028
|
-
<td class={this.getTableItemCssClass(dtColumn, j)}>{dtColumn.customRender == null ? row[dtColumn.id] : dtColumn.customRender(h, row)}</td>
|
|
2043
|
+
<td class={this.getTableItemCssClass(dtColumn, j)}>{dtColumn.customRender == null ? (dtColumn.customValue == null ? row[dtColumn.id] : dtColumn.customValue(row)) : dtColumn.customRender(h, row)}</td>
|
|
2029
2044
|
))}
|
|
2030
2045
|
</tr>
|
|
2031
2046
|
))}
|
|
@@ -2051,7 +2066,7 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
|
|
|
2051
2066
|
</td>
|
|
2052
2067
|
|
|
2053
2068
|
{columns.map((dtColumn, j) => (
|
|
2054
|
-
<td class={this.getTableItemCssClass(dtColumn, j)}>{dtColumn.customRender == null ? row[dtColumn.id] : dtColumn.customRender(h, row)}</td>
|
|
2069
|
+
<td class={this.getTableItemCssClass(dtColumn, j)}>{dtColumn.customRender == null ? (dtColumn.customValue == null ? row[dtColumn.id] : dtColumn.customValue(row)) : dtColumn.customRender(h, row)}</td>
|
|
2055
2070
|
))}
|
|
2056
2071
|
</tr>
|
|
2057
2072
|
))}
|
|
@@ -2151,7 +2166,7 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
|
|
|
2151
2166
|
{columns.map((dtColumn, j) => (
|
|
2152
2167
|
<div class="dt-vert-item" style={this.getTableColumnOrderStyle(dtColumn, row)}>
|
|
2153
2168
|
<div class="dt-vert-caption">{dtColumn.caption}</div>
|
|
2154
|
-
<div class="dt-vert-value">{dtColumn.customRender == null ? row[dtColumn.id] : dtColumn.customRender(h, row)}</div>
|
|
2169
|
+
<div class="dt-vert-value">{dtColumn.customRender == null ? (dtColumn.customValue == null ? row[dtColumn.id] : dtColumn.customValue(row)) : dtColumn.customRender(h, row)}</div>
|
|
2155
2170
|
</div>
|
|
2156
2171
|
))}
|
|
2157
2172
|
</div>
|
|
@@ -2211,7 +2226,7 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
|
|
|
2211
2226
|
<div class="dt-mobile-item-inner">
|
|
2212
2227
|
{dtColumn.mobileCaption != false && <div class="dt-mobile-caption">{dtColumn.caption}</div>}
|
|
2213
2228
|
|
|
2214
|
-
<div class="dt-mobile-value">{dtColumn.customRender == null ? row[dtColumn.id] : dtColumn.customRender(h, row)}</div>
|
|
2229
|
+
<div class="dt-mobile-value">{dtColumn.customRender == null ? (dtColumn.customValue == null ? row[dtColumn.id] : dtColumn.customValue(row)) : dtColumn.customRender(h, row)}</div>
|
|
2215
2230
|
</div>
|
|
2216
2231
|
)}
|
|
2217
2232
|
{dtColumn.mobileRender && dtColumn.mobileRender(h, row)}
|
|
@@ -2279,7 +2294,7 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
|
|
|
2279
2294
|
|
|
2280
2295
|
protected renderColumnValue(h, dtColumn: TableColumn, row) {
|
|
2281
2296
|
if (dtColumn.customRender == null) {
|
|
2282
|
-
return row[dtColumn.id];
|
|
2297
|
+
return (dtColumn.customValue == null ? row[dtColumn.id] : dtColumn.customValue(row));
|
|
2283
2298
|
} else {
|
|
2284
2299
|
return dtColumn.customRender(h, row);
|
|
2285
2300
|
}
|
|
@@ -17,8 +17,8 @@ interface TableExportModalArgs {
|
|
|
17
17
|
apiClient: IWebApiClient
|
|
18
18
|
apiMethod: WebClientApiMethod
|
|
19
19
|
apiArgs?: any
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
exportConfig: DataTableExportConfig
|
|
21
|
+
paginationOffset?: number;
|
|
22
22
|
paginationLength: number;
|
|
23
23
|
totalFilteredCount: number;
|
|
24
24
|
}
|
|
@@ -73,20 +73,20 @@ class TableExportModalComponent extends TsxComponent<TableExportModalBindingArgs
|
|
|
73
73
|
ajaxArgs.PaginationPosition = steps + 1;
|
|
74
74
|
ajaxArgs.PaginationLength = paginationLength || STEP_COUNT;
|
|
75
75
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
76
|
+
if (exportConfig != null) {
|
|
77
|
+
if (exportConfig.limitName != null) {
|
|
78
|
+
ajaxArgs[exportConfig.limitName] = paginationLength || STEP_COUNT;
|
|
79
|
+
}
|
|
80
80
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
81
|
+
if (exportConfig.pageName != null) {
|
|
82
|
+
ajaxArgs[exportConfig.pageName] = steps + 1;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
85
|
|
|
86
86
|
var mySelf = this;
|
|
87
87
|
apiClient[apiMethod](ajaxArgs).then((data: any) => {
|
|
88
|
-
|
|
89
|
-
|
|
88
|
+
const attrName = exportConfig != null && exportConfig.attrName != null ? exportConfig.attrName : 'Rows';
|
|
89
|
+
const rows = data[attrName];
|
|
90
90
|
|
|
91
91
|
rows.forEach(function (row) {
|
|
92
92
|
mySelf.rows.push(row);
|
|
@@ -150,6 +150,8 @@ class TableExportModalComponent extends TsxComponent<TableExportModalBindingArgs
|
|
|
150
150
|
if (col.exportInclude != false) {
|
|
151
151
|
if (col.exportValue != null) {
|
|
152
152
|
rowExportData.push(col.exportValue(row));
|
|
153
|
+
} else if (col.customValue != null) {
|
|
154
|
+
rowExportData.push(col.customValue(row));
|
|
153
155
|
} else {
|
|
154
156
|
rowExportData.push(row[col.id]);
|
|
155
157
|
}
|
|
@@ -196,5 +198,5 @@ class TableExportModalComponent extends TsxComponent<TableExportModalBindingArgs
|
|
|
196
198
|
}
|
|
197
199
|
}
|
|
198
200
|
|
|
199
|
-
const TableExportModal = toNative(TableExportModalComponent)
|
|
200
|
-
export default TableExportModal
|
|
201
|
+
const TableExportModal = toNative(TableExportModalComponent)
|
|
202
|
+
export default TableExportModal
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
.pin {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: row;
|
|
4
|
+
justify-content: space-between;
|
|
5
|
+
align-items: stretch;
|
|
6
|
+
flex-wrap: wrap;
|
|
7
|
+
width: 100%;
|
|
8
|
+
border: none;
|
|
9
|
+
/* gap: auto; */
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.pin .pin-input,
|
|
13
|
+
.pin .formwrap-nomargin,
|
|
14
|
+
.pin .pin-input .form-control {
|
|
15
|
+
width: 46px;
|
|
16
|
+
height: 50px;
|
|
17
|
+
border-radius: 10px;
|
|
18
|
+
text-align: center;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.pin .pin-input,
|
|
22
|
+
.pin .pin-input .form-control {
|
|
23
|
+
background-color: #F2F4FF;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.pin .pin-input .form-control {
|
|
27
|
+
border: none;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.pin .pin-input .form-control:focus {
|
|
31
|
+
box-shadow: none;
|
|
32
|
+
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { Prop, toNative
|
|
1
|
+
import { Prop, toNative } from "vue-facing-decorator";
|
|
2
2
|
import LocalizedText from "../../common/localized-text";
|
|
3
3
|
import TsxComponent, { Component } from "../../app/vuetsx";
|
|
4
|
-
import { ILocalizedString } from "../../common/utils/localized-string";
|
|
5
4
|
import { Language } from "../../common/enums/language";
|
|
6
5
|
import { isNullOrEmpty } from "../../common/utils/is-null-or-empty";
|
|
7
6
|
import LocalizedStringTextarea from "./localized-string-textarea";
|
|
@@ -39,33 +38,31 @@ class LocalizedInfoInputComponent extends TsxComponent<LocalizedInfoInputArgs> i
|
|
|
39
38
|
return this.value[lang];
|
|
40
39
|
}
|
|
41
40
|
|
|
42
|
-
getValue(value: LocalizedText):
|
|
41
|
+
getValue(value: LocalizedText): LocalizedText {
|
|
43
42
|
if (value == null) {
|
|
44
43
|
return {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
Hungarian: null,
|
|
44
|
+
cs: null,
|
|
45
|
+
en: null,
|
|
46
|
+
de: null,
|
|
47
|
+
it: null,
|
|
48
|
+
pl: null,
|
|
49
|
+
sk: null,
|
|
50
|
+
hu: null,
|
|
53
51
|
};
|
|
54
52
|
}
|
|
55
53
|
|
|
56
54
|
return {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
Hungarian: this.getValueForTmrLanguage(Language.hu),
|
|
55
|
+
cs: this.getValueForTmrLanguage(Language.cs),
|
|
56
|
+
en: this.getValueForTmrLanguage(Language.en),
|
|
57
|
+
de: this.getValueForTmrLanguage(Language.de),
|
|
58
|
+
it: this.getValueForTmrLanguage(Language.it),
|
|
59
|
+
pl: this.getValueForTmrLanguage(Language.pl),
|
|
60
|
+
sk: this.getValueForTmrLanguage(Language.sk),
|
|
61
|
+
hu: this.getValueForTmrLanguage(Language.hu),
|
|
65
62
|
};
|
|
66
63
|
}
|
|
67
64
|
|
|
68
|
-
valueChanged(e:
|
|
65
|
+
valueChanged(e: LocalizedText): void {
|
|
69
66
|
if (e == null) {
|
|
70
67
|
this.changed(null);
|
|
71
68
|
return;
|
|
@@ -78,13 +75,13 @@ class LocalizedInfoInputComponent extends TsxComponent<LocalizedInfoInputArgs> i
|
|
|
78
75
|
}
|
|
79
76
|
};
|
|
80
77
|
|
|
81
|
-
addLocalizedValue(Language.sk, e.
|
|
82
|
-
addLocalizedValue(Language.cs, e.
|
|
83
|
-
addLocalizedValue(Language.en, e.
|
|
84
|
-
addLocalizedValue(Language.de, e.
|
|
85
|
-
addLocalizedValue(Language.pl, e.
|
|
86
|
-
addLocalizedValue(Language.it, e.
|
|
87
|
-
addLocalizedValue(Language.hu, e.
|
|
78
|
+
addLocalizedValue(Language.sk, e.sk);
|
|
79
|
+
addLocalizedValue(Language.cs, e.cs);
|
|
80
|
+
addLocalizedValue(Language.en, e.en);
|
|
81
|
+
addLocalizedValue(Language.de, e.de);
|
|
82
|
+
addLocalizedValue(Language.pl, e.pl);
|
|
83
|
+
addLocalizedValue(Language.it, e.it);
|
|
84
|
+
addLocalizedValue(Language.hu, e.hu);
|
|
88
85
|
this.changed(retObj);
|
|
89
86
|
}
|
|
90
87
|
|
|
@@ -9,16 +9,17 @@ import { ButtonLayout } from "../button/button-layout";
|
|
|
9
9
|
import { DropdownButtonItemArgs } from "../dropdown-button/dropdown-button-item";
|
|
10
10
|
import { PortalUtils } from "../../common/utils/utils";
|
|
11
11
|
import { LanguageUtils } from "../../common/utils/language-utils";
|
|
12
|
-
import LocalizedStringHelper
|
|
12
|
+
import LocalizedStringHelper from "../../common/utils/localized-string";
|
|
13
13
|
import { Language } from "../../common/enums/language";
|
|
14
14
|
import { isNullOrEmpty } from "../../common/utils/is-null-or-empty";
|
|
15
15
|
import globalIcon from './img/global.png';
|
|
16
16
|
import PowerduckState from "../../app/powerduck-state";
|
|
17
|
+
import LocalizedText from "../../common/localized-text";
|
|
17
18
|
import "./css/localized-string-input.css";
|
|
18
19
|
|
|
19
20
|
interface LocalizedStringInputArgs extends FormItemWrapperArgs {
|
|
20
|
-
value:
|
|
21
|
-
changed: (e:
|
|
21
|
+
value: LocalizedText;
|
|
22
|
+
changed: (e: LocalizedText) => void;
|
|
22
23
|
supportedLanguages?: Language[];
|
|
23
24
|
placeholder?: string;
|
|
24
25
|
}
|
|
@@ -28,8 +29,8 @@ class LocalizedStringInputComponent extends TsxComponent<LocalizedStringInputArg
|
|
|
28
29
|
@Prop() label!: string;
|
|
29
30
|
@Prop() labelButtons!: DropdownButtonItemArgs[];
|
|
30
31
|
@Prop() subtitle!: string;
|
|
31
|
-
@Prop() value!:
|
|
32
|
-
@Prop() changed: (e:
|
|
32
|
+
@Prop() value!: LocalizedText;
|
|
33
|
+
@Prop() changed: (e: LocalizedText) => void;
|
|
33
34
|
@Prop() supportedLanguages?: Language[];
|
|
34
35
|
@Prop() marginType?: MarginType;
|
|
35
36
|
@Prop() maxWidth?: number;
|
|
@@ -44,11 +45,11 @@ class LocalizedStringInputComponent extends TsxComponent<LocalizedStringInputArg
|
|
|
44
45
|
@Prop() prependIcon: string;
|
|
45
46
|
@Prop() appendClicked: () => void;
|
|
46
47
|
@Prop() prependClicked: () => void;
|
|
47
|
-
currentValue:
|
|
48
|
+
currentValue: LocalizedText = null;
|
|
48
49
|
modalWillShow: boolean = false;
|
|
49
50
|
uuid: string = "lsw-" + PortalUtils.randomString(10);
|
|
50
51
|
|
|
51
|
-
raiseChangeEvent(newValue:
|
|
52
|
+
raiseChangeEvent(newValue: LocalizedText): void {
|
|
52
53
|
this.populateValidationDeclaration();
|
|
53
54
|
|
|
54
55
|
if (this.changed != null) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Prop, toNative
|
|
1
|
+
import { Prop, toNative } from "vue-facing-decorator";
|
|
2
2
|
import TsxComponent, { Component } from "../../app/vuetsx";
|
|
3
3
|
import FormItemWrapper, { FormItemWrapperArgs, HintType, MarginType } from "../form/form-item-wrapper";
|
|
4
4
|
import Tabs, { TabsRenderMode } from "../tabs/tabs";
|
|
@@ -6,13 +6,13 @@ import { TabPage } from "../tabs/tab-page";
|
|
|
6
6
|
import { DropdownButtonItemArgs } from "../dropdown-button/dropdown-button-item";
|
|
7
7
|
import TextArea from "./textarea";
|
|
8
8
|
import { LanguageUtils } from "../../common/utils/language-utils";
|
|
9
|
-
import { ILocalizedString } from "../../common/utils/localized-string";
|
|
10
9
|
import { Language } from "../../common/enums/language";
|
|
11
10
|
import PowerduckState from "../../app/powerduck-state";
|
|
11
|
+
import LocalizedText from "../../common/localized-text";
|
|
12
12
|
|
|
13
13
|
interface LocalizedStringInputArgs extends FormItemWrapperArgs {
|
|
14
|
-
value:
|
|
15
|
-
|
|
14
|
+
value: LocalizedText;
|
|
15
|
+
changed: (e: LocalizedText) => void;
|
|
16
16
|
supportedLanguages?: Language[];
|
|
17
17
|
placeholder?: string;
|
|
18
18
|
}
|
|
@@ -22,8 +22,8 @@ class LocalizedStringTextareaComponent extends TsxComponent<LocalizedStringInput
|
|
|
22
22
|
@Prop() label!: string;
|
|
23
23
|
@Prop() labelButtons!: DropdownButtonItemArgs[];
|
|
24
24
|
@Prop() subtitle!: string;
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
@Prop() value!: LocalizedText;
|
|
26
|
+
@Prop() changed: (e: LocalizedText) => void;
|
|
27
27
|
@Prop() supportedLanguages?: Language[];
|
|
28
28
|
@Prop() marginType?: MarginType;
|
|
29
29
|
@Prop() maxWidth?: number;
|
|
@@ -37,9 +37,9 @@ class LocalizedStringTextareaComponent extends TsxComponent<LocalizedStringInput
|
|
|
37
37
|
@Prop() prependIcon: string;
|
|
38
38
|
@Prop() appendClicked: () => void;
|
|
39
39
|
@Prop() prependClicked: () => void;
|
|
40
|
-
|
|
40
|
+
currentValue: LocalizedText = null;
|
|
41
41
|
|
|
42
|
-
|
|
42
|
+
raiseChangeEvent (newValue: LocalizedText): void {
|
|
43
43
|
this.populateValidationDeclaration();
|
|
44
44
|
|
|
45
45
|
if (this.changed != null) {
|
|
@@ -52,12 +52,12 @@ class LocalizedStringTextareaComponent extends TsxComponent<LocalizedStringInput
|
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
changeValue(lang: Language, newValue: string): void {
|
|
55
|
-
|
|
55
|
+
let value = this.value || ({} as LocalizedText);
|
|
56
56
|
value[lang] = newValue;
|
|
57
57
|
this.raiseChangeEvent(value);
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
getActualValue (lang: Language, value: LocalizedText): string {
|
|
61
61
|
if (value == null) {
|
|
62
62
|
return null;
|
|
63
63
|
}
|
|
@@ -13,15 +13,16 @@ import FlexFormItem from "../form/form-item-flex";
|
|
|
13
13
|
import { FileManagerDialog, FileManagerModalFileType } from "../modal/ts/file-manager-dialog";
|
|
14
14
|
import { PortalUtils } from "../../common/utils/utils";
|
|
15
15
|
import { LanguageUtils } from "../../common/utils/language-utils";
|
|
16
|
-
import LocalizedStringHelper
|
|
16
|
+
import LocalizedStringHelper from "../../common/utils/localized-string";
|
|
17
17
|
import { Language } from "../../common/enums/language";
|
|
18
18
|
import { isNullOrEmpty } from "../../common/utils/is-null-or-empty";
|
|
19
19
|
import globalIcon from './img/global.png';
|
|
20
20
|
import PowerduckState from "../../app/powerduck-state";
|
|
21
|
+
import LocalizedText from "../../common/localized-text";
|
|
21
22
|
|
|
22
23
|
interface LocalizedUrlInputArgs extends FormItemWrapperArgs {
|
|
23
|
-
value:
|
|
24
|
-
|
|
24
|
+
value: LocalizedText;
|
|
25
|
+
changed: (e: LocalizedText) => void;
|
|
25
26
|
supportedLanguages?: Language[];
|
|
26
27
|
placeholder?: string;
|
|
27
28
|
}
|
|
@@ -31,8 +32,8 @@ class LocalizedUrlInputComponent extends TsxComponent<LocalizedUrlInputArgs> imp
|
|
|
31
32
|
@Prop() label!: string;
|
|
32
33
|
@Prop() labelButtons!: DropdownButtonItemArgs[];
|
|
33
34
|
@Prop() subtitle!: string;
|
|
34
|
-
|
|
35
|
-
|
|
35
|
+
@Prop() value!: LocalizedText;
|
|
36
|
+
@Prop() changed: (e: LocalizedText) => void;
|
|
36
37
|
@Prop() supportedLanguages?: Language[];
|
|
37
38
|
@Prop() marginType?: MarginType;
|
|
38
39
|
@Prop() maxWidth?: number;
|
|
@@ -46,12 +47,12 @@ class LocalizedUrlInputComponent extends TsxComponent<LocalizedUrlInputArgs> imp
|
|
|
46
47
|
@Prop() prependIcon: string;
|
|
47
48
|
@Prop() appendClicked: () => void;
|
|
48
49
|
@Prop() prependClicked: () => void;
|
|
49
|
-
|
|
50
|
+
currentValue: LocalizedText = null;
|
|
50
51
|
modalWillShow: boolean = false;
|
|
51
52
|
isModal: boolean = false;
|
|
52
53
|
uuid: string = "lsw-" + PortalUtils.randomString(10);
|
|
53
54
|
|
|
54
|
-
|
|
55
|
+
raiseChangeEvent (newValue: LocalizedText): void {
|
|
55
56
|
this.populateValidationDeclaration();
|
|
56
57
|
|
|
57
58
|
if (this.changed != null) {
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import TsxComponent, { Component } from "../../app/vuetsx";
|
|
2
|
+
import { Prop, toNative } from "vue-facing-decorator";
|
|
3
|
+
import { isNullOrEmpty } from "../../common/utils/is-null-or-empty";
|
|
4
|
+
import TextBox, { TextBoxTextType } from "./textbox";
|
|
5
|
+
import "./css/pin.css";
|
|
6
|
+
|
|
7
|
+
export enum PinInputType {
|
|
8
|
+
Alpha = "alpha",
|
|
9
|
+
Numeric = "numeric",
|
|
10
|
+
AlphaNumeric = "alphanumeric",
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
interface PinInputArgs {
|
|
14
|
+
length: number;
|
|
15
|
+
cssClass?: string;
|
|
16
|
+
inputType?: PinInputType;
|
|
17
|
+
value: string[];
|
|
18
|
+
changed: (value: string[]) => void;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@Component
|
|
22
|
+
class PinInputComponent extends TsxComponent<PinInputArgs> implements PinInputArgs {
|
|
23
|
+
@Prop() length: number;
|
|
24
|
+
@Prop() cssClass!: string;
|
|
25
|
+
@Prop() inputType: PinInputType;
|
|
26
|
+
@Prop() value: string[];
|
|
27
|
+
@Prop() changed: (value: string[]) => void;
|
|
28
|
+
currentValue: string[] = null
|
|
29
|
+
|
|
30
|
+
mounted (): void {
|
|
31
|
+
this.currentValue = Array(this.length).fill("");
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
getCssClass (): string {
|
|
35
|
+
return `pin ${this.cssClass || ""}`;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
getInputType (): PinInputType {
|
|
39
|
+
return this.inputType ?? PinInputType.Numeric;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
get isFullyFilled (): boolean {
|
|
43
|
+
return this.currentValue?.every((p) => !isNullOrEmpty(p));
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
isValidInput (value: string): boolean {
|
|
47
|
+
const type = this.getInputType();
|
|
48
|
+
switch (type) {
|
|
49
|
+
case PinInputType.Alpha:
|
|
50
|
+
return /^[a-zA-Z]$/.test(value);
|
|
51
|
+
case PinInputType.Numeric:
|
|
52
|
+
return /^[0-9]$/.test(value);
|
|
53
|
+
case PinInputType.AlphaNumeric:
|
|
54
|
+
return /^[a-zA-Z0-9]$/.test(value);
|
|
55
|
+
default:
|
|
56
|
+
return false;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
focusNext (index: number): void {
|
|
61
|
+
if (index < this.length - 1) {
|
|
62
|
+
const nextInput = this.getElement(index + 1);
|
|
63
|
+
$(nextInput.$el).find("input")?.focus();
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
focusPrev (index: number): void {
|
|
68
|
+
if (index > 0) {
|
|
69
|
+
const prevInput = this.getElement(index - 1);
|
|
70
|
+
$(prevInput.$el).find("input")?.focus();
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
updatePin (value: string, index: number): void {
|
|
75
|
+
if (!this.isValidInput(value)) {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
this.currentValue[index] = value.slice(-1);
|
|
80
|
+
|
|
81
|
+
if (this.isFullyFilled) {
|
|
82
|
+
this.blurAllInputs();
|
|
83
|
+
} else {
|
|
84
|
+
this.focusNext(index);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
this.changed(this.currentValue);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
blurAllInputs (): void {
|
|
91
|
+
for (let index = 0; index < this.currentValue?.length; index++) {
|
|
92
|
+
const input = this.getElement(index);
|
|
93
|
+
$(input.$el).find("input")?.blur();
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
getElement (index: number) {
|
|
98
|
+
if (index < 0 || index >= this.length) {
|
|
99
|
+
return null;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
return this.$refs[`pin-${index}`] as typeof TextBox.prototype;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
render (h) {
|
|
106
|
+
if (!this.currentValue) {
|
|
107
|
+
return null;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
return (
|
|
111
|
+
<div class={this.getCssClass()}>
|
|
112
|
+
{Array.from({ length: this.length }, (_, index) => (
|
|
113
|
+
<TextBox
|
|
114
|
+
label=""
|
|
115
|
+
key={index}
|
|
116
|
+
wrap={false}
|
|
117
|
+
ref={`pin-${index}`}
|
|
118
|
+
nameAttr={`pin-${index}`}
|
|
119
|
+
maxLength={1}
|
|
120
|
+
cssClass="pin-input"
|
|
121
|
+
updateMode="input"
|
|
122
|
+
autoCompleteEnabled={false}
|
|
123
|
+
textType={TextBoxTextType.Password}
|
|
124
|
+
value={this.currentValue[index]}
|
|
125
|
+
keyDown={(e) => {
|
|
126
|
+
if (e.key == "Backspace") {
|
|
127
|
+
this.currentValue[index] = "";
|
|
128
|
+
this.focusPrev(index);
|
|
129
|
+
this.changed(this.currentValue);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
if (!this.isValidInput(e.key)) {
|
|
133
|
+
e.preventDefault();
|
|
134
|
+
e.stopPropagation();
|
|
135
|
+
}
|
|
136
|
+
}}
|
|
137
|
+
changed={(e) => { this.updatePin(e, index); }}
|
|
138
|
+
/>
|
|
139
|
+
))}
|
|
140
|
+
</div>
|
|
141
|
+
);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
const PinInput = toNative(PinInputComponent);
|
|
146
|
+
export default PinInput;
|
|
@@ -168,7 +168,7 @@ var NotificationUtils = (function () {
|
|
|
168
168
|
{
|
|
169
169
|
type: args.type || "primary",
|
|
170
170
|
timer: args.timeout > -1 ? args.timeout : NotificationProviderConfig.defaultTimeout,
|
|
171
|
-
delay: args.delay > -1 ? args.delay : NotificationProviderConfig.
|
|
171
|
+
delay: args.delay > -1 ? args.delay : NotificationProviderConfig.defaultDelay,
|
|
172
172
|
placement: getPlacement(args),
|
|
173
173
|
z_index: 99999,
|
|
174
174
|
newest_on_top: (args.newestTop || false),
|