@civicactions/cmsds-open-data-components 3.1.9 → 3.1.10-alpha.2
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/dist/main.js +176 -25
- package/dist/main.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -12,7 +12,7 @@ import {useQuery as $hgUW1$useQuery, QueryClient as $hgUW1$QueryClient, QueryCli
|
|
|
12
12
|
import {useMediaQuery as $hgUW1$useMediaQuery} from "react-responsive";
|
|
13
13
|
import $hgUW1$dompurify from "dompurify";
|
|
14
14
|
import $hgUW1$lodashtruncate from "lodash.truncate";
|
|
15
|
-
import {createColumnHelper as $hgUW1$createColumnHelper, useReactTable as $hgUW1$useReactTable, getCoreRowModel as $hgUW1$getCoreRowModel, getSortedRowModel as $hgUW1$getSortedRowModel, flexRender as $hgUW1$flexRender, getPaginationRowModel as $hgUW1$getPaginationRowModel} from "@tanstack/react-table";
|
|
15
|
+
import {createColumnHelper as $hgUW1$createColumnHelper, useReactTable as $hgUW1$useReactTable, getCoreRowModel as $hgUW1$getCoreRowModel, getSortedRowModel as $hgUW1$getSortedRowModel, flexRender as $hgUW1$flexRender, getFilteredRowModel as $hgUW1$getFilteredRowModel, getPaginationRowModel as $hgUW1$getPaginationRowModel} from "@tanstack/react-table";
|
|
16
16
|
import $hgUW1$reactdatepicker from "react-datepicker";
|
|
17
17
|
import "react-datepicker/dist/react-datepicker.css";
|
|
18
18
|
import {usePopper as $hgUW1$usePopper} from "react-popper";
|
|
@@ -2348,6 +2348,26 @@ const $6369abf590ca298f$var$QueryRow = ({ id: id, condition: condition, index: i
|
|
|
2348
2348
|
var $6369abf590ca298f$export$2e2bcd8739ae039 = $6369abf590ca298f$var$QueryRow;
|
|
2349
2349
|
|
|
2350
2350
|
|
|
2351
|
+
|
|
2352
|
+
|
|
2353
|
+
|
|
2354
|
+
|
|
2355
|
+
const $2eec38d4d0dbf714$var$ClearFiltersButton = ({ disabled: disabled = false, clearFiltersFn: clearFiltersFn })=>{
|
|
2356
|
+
const small = (0, $hgUW1$useMediaQuery)({
|
|
2357
|
+
minWidth: 0,
|
|
2358
|
+
maxWidth: 544
|
|
2359
|
+
});
|
|
2360
|
+
return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
|
|
2361
|
+
disabled: disabled,
|
|
2362
|
+
className: "ds-u-float--right ds-l-md-col--6 ds-l-col--5",
|
|
2363
|
+
variation: small ? "ghost" : undefined,
|
|
2364
|
+
onClick: ()=>clearFiltersFn(),
|
|
2365
|
+
children: small ? "Clear all" : "Clear all filters"
|
|
2366
|
+
});
|
|
2367
|
+
};
|
|
2368
|
+
var $2eec38d4d0dbf714$export$2e2bcd8739ae039 = $2eec38d4d0dbf714$var$ClearFiltersButton;
|
|
2369
|
+
|
|
2370
|
+
|
|
2351
2371
|
function $ee4ad47aa483e5b5$var$updateQueryForDatastore(condition) {
|
|
2352
2372
|
let cond = condition;
|
|
2353
2373
|
delete cond.key;
|
|
@@ -2503,16 +2523,13 @@ const $ee4ad47aa483e5b5$var$QueryBuilder = (props)=>{
|
|
|
2503
2523
|
variation: "solid",
|
|
2504
2524
|
children: "Apply filters"
|
|
2505
2525
|
}),
|
|
2506
|
-
/*#__PURE__*/ (0, $hgUW1$jsx)((0, $
|
|
2526
|
+
/*#__PURE__*/ (0, $hgUW1$jsx)((0, $2eec38d4d0dbf714$export$2e2bcd8739ae039), {
|
|
2507
2527
|
disabled: queryConditions.length === 0,
|
|
2508
|
-
|
|
2509
|
-
variation: small ? "ghost" : undefined,
|
|
2510
|
-
onClick: ()=>{
|
|
2528
|
+
clearFiltersFn: ()=>{
|
|
2511
2529
|
setQueryConditions([]);
|
|
2512
2530
|
setTitleConditions([]);
|
|
2513
2531
|
setConditionsCleared(true);
|
|
2514
|
-
}
|
|
2515
|
-
children: small ? "Clear all" : "Clear all filters"
|
|
2532
|
+
}
|
|
2516
2533
|
})
|
|
2517
2534
|
]
|
|
2518
2535
|
})
|
|
@@ -2967,21 +2984,37 @@ var $cf6eaefd6b928de3$export$2e2bcd8739ae039 = $cf6eaefd6b928de3$var$DatasetAPI;
|
|
|
2967
2984
|
|
|
2968
2985
|
|
|
2969
2986
|
|
|
2970
|
-
|
|
2987
|
+
|
|
2988
|
+
const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns, tableData: tableData, count: count, pageSize: pageSize, columnFilters: columnFilters })=>{
|
|
2971
2989
|
const [pagination, setPagination] = (0, $hgUW1$useState)({
|
|
2972
2990
|
pageIndex: 1,
|
|
2973
2991
|
pageSize: pageSize
|
|
2974
2992
|
});
|
|
2993
|
+
const [sorting, setSorting] = (0, $hgUW1$useState)([]);
|
|
2975
2994
|
const [ariaLiveFeedback, setAriaLiveFeedback] = (0, $hgUW1$useState)("");
|
|
2995
|
+
const mobile = (0, $hgUW1$useMediaQuery)({
|
|
2996
|
+
minWidth: 0,
|
|
2997
|
+
maxWidth: 544
|
|
2998
|
+
});
|
|
2999
|
+
const sortElement = (isSorted)=>{
|
|
3000
|
+
if (isSorted === "asc") return "dc-c-sort--asc";
|
|
3001
|
+
if (isSorted === "desc") return "dc-c-sort--desc";
|
|
3002
|
+
return "dc-c-sort--default";
|
|
3003
|
+
};
|
|
2976
3004
|
const table = (0, $hgUW1$useReactTable)({
|
|
2977
3005
|
data: tableData,
|
|
2978
3006
|
columns: tableColumns,
|
|
2979
3007
|
columnResizeMode: "onChange",
|
|
2980
3008
|
getCoreRowModel: (0, $hgUW1$getCoreRowModel)(),
|
|
3009
|
+
getFilteredRowModel: (0, $hgUW1$getFilteredRowModel)(),
|
|
2981
3010
|
getPaginationRowModel: (0, $hgUW1$getPaginationRowModel)(),
|
|
2982
3011
|
onPaginationChange: setPagination,
|
|
3012
|
+
getSortedRowModel: (0, $hgUW1$getSortedRowModel)(),
|
|
3013
|
+
onSortingChange: setSorting,
|
|
2983
3014
|
state: {
|
|
2984
|
-
pagination: pagination
|
|
3015
|
+
pagination: pagination,
|
|
3016
|
+
sorting: sorting,
|
|
3017
|
+
columnFilters: columnFilters
|
|
2985
3018
|
}
|
|
2986
3019
|
});
|
|
2987
3020
|
return /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
|
|
@@ -2994,6 +3027,7 @@ const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns,
|
|
|
2994
3027
|
style: {
|
|
2995
3028
|
width: "100%"
|
|
2996
3029
|
},
|
|
3030
|
+
stackable: true,
|
|
2997
3031
|
children: [
|
|
2998
3032
|
/*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableHead), {
|
|
2999
3033
|
className: "dc-thead--truncated dc-thead--resizeable",
|
|
@@ -3002,25 +3036,37 @@ const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns,
|
|
|
3002
3036
|
return header.id === "titleResizable" ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $64a351d3fd8413c3$export$2e2bcd8739ae039), {
|
|
3003
3037
|
table: table,
|
|
3004
3038
|
header: header,
|
|
3005
|
-
setAriaLiveFeedback: setAriaLiveFeedback
|
|
3006
|
-
|
|
3039
|
+
setAriaLiveFeedback: setAriaLiveFeedback,
|
|
3040
|
+
sortElement: sortElement
|
|
3041
|
+
}, header.id + "_resize") : /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$TableCell), {
|
|
3007
3042
|
key: header.id,
|
|
3008
|
-
className:
|
|
3009
|
-
|
|
3043
|
+
className: `ds-u-border-y--2 ds-u-border--dark ds-u-border-x--0`,
|
|
3044
|
+
id: "dataDictionary_" + header.id,
|
|
3045
|
+
children: [
|
|
3046
|
+
(0, $hgUW1$flexRender)(header.column.columnDef.header, header.getContext()),
|
|
3047
|
+
header.id === "type" && /*#__PURE__*/ (0, $hgUW1$jsx)("button", {
|
|
3048
|
+
onClick: header.column.getToggleSortingHandler(),
|
|
3049
|
+
className: header.column.getCanSort() ? `cursor-pointer select-none ds-u-focus-visible ${sortElement(header.column.getIsSorted())}` : "",
|
|
3050
|
+
"aria-label": `${header.column.columnDef.header} sort order`
|
|
3051
|
+
})
|
|
3052
|
+
]
|
|
3010
3053
|
});
|
|
3011
3054
|
})
|
|
3012
3055
|
}, "header" + headerGroup.id))
|
|
3013
3056
|
}),
|
|
3014
3057
|
/*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableBody), {
|
|
3015
|
-
children: table.
|
|
3058
|
+
children: table.getFilteredRowModel().rows.map((row, index)=>{
|
|
3016
3059
|
return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableRow), {
|
|
3017
3060
|
children: row.getVisibleCells().map((cell)=>{
|
|
3018
3061
|
return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TableCell), {
|
|
3019
3062
|
key: cell.id,
|
|
3020
3063
|
style: {
|
|
3021
|
-
maxWidth: cell.column.getSize()
|
|
3064
|
+
maxWidth: mobile ? "100%" : cell.column.getSize(),
|
|
3065
|
+
whiteSpace: cell.column.id === "description" ? "pre-wrap" : "normal"
|
|
3022
3066
|
},
|
|
3023
3067
|
className: `${cell.column.id === "titleResizable" ? "ds-u-word-break" : ""}`,
|
|
3068
|
+
headers: "dataDictionary_" + cell.column.id,
|
|
3069
|
+
stackedTitle: cell.column.id === "titleResizable" ? "Title" : cell.column.columnDef.header,
|
|
3024
3070
|
children: (0, $hgUW1$flexRender)(cell.column.columnDef.cell, cell.getContext())
|
|
3025
3071
|
});
|
|
3026
3072
|
})
|
|
@@ -3037,8 +3083,8 @@ const $6765a74df807d015$var$DataDictionaryTable = ({ tableColumns: tableColumns,
|
|
|
3037
3083
|
})
|
|
3038
3084
|
]
|
|
3039
3085
|
}),
|
|
3040
|
-
|
|
3041
|
-
totalPages:
|
|
3086
|
+
table.getRowCount() > pageSize ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Pagination), {
|
|
3087
|
+
totalPages: table.getPageCount(),
|
|
3042
3088
|
currentPage: pagination.pageIndex + 1,
|
|
3043
3089
|
onPageChange: (evt, page)=>{
|
|
3044
3090
|
evt.preventDefault();
|
|
@@ -3089,7 +3135,11 @@ var $a24829b27758fe6c$export$2e2bcd8739ae039 = $a24829b27758fe6c$var$SitewideDat
|
|
|
3089
3135
|
|
|
3090
3136
|
|
|
3091
3137
|
|
|
3138
|
+
|
|
3092
3139
|
const $a6e312940f7003ef$var$DatasetDictionaryTable = ({ datasetDictionary: datasetDictionary, pageSize: pageSize })=>{
|
|
3140
|
+
const [titleFilter, setTitleFilter] = (0, $hgUW1$useState)("");
|
|
3141
|
+
const [typeFilter, setTypeFilter] = (0, $hgUW1$useState)("all");
|
|
3142
|
+
const [columnFilters, setColumnFilters] = (0, $hgUW1$useState)([]);
|
|
3093
3143
|
const tableData = datasetDictionary.map((item)=>{
|
|
3094
3144
|
return {
|
|
3095
3145
|
titleResizable: item.title,
|
|
@@ -3105,7 +3155,7 @@ const $a6e312940f7003ef$var$DatasetDictionaryTable = ({ datasetDictionary: datas
|
|
|
3105
3155
|
children: [
|
|
3106
3156
|
"Title",
|
|
3107
3157
|
/*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Tooltip), {
|
|
3108
|
-
title: "Title represents the column headers of the data file
|
|
3158
|
+
title: "Title represents the column headers of the data file",
|
|
3109
3159
|
// @ts-ignore
|
|
3110
3160
|
style: {
|
|
3111
3161
|
border: "none",
|
|
@@ -3128,11 +3178,114 @@ const $a6e312940f7003ef$var$DatasetDictionaryTable = ({ datasetDictionary: datas
|
|
|
3128
3178
|
enableResizing: false
|
|
3129
3179
|
})
|
|
3130
3180
|
];
|
|
3131
|
-
|
|
3132
|
-
|
|
3133
|
-
|
|
3134
|
-
|
|
3135
|
-
|
|
3181
|
+
const typeOptions = [
|
|
3182
|
+
{
|
|
3183
|
+
value: "all",
|
|
3184
|
+
label: "All Types"
|
|
3185
|
+
},
|
|
3186
|
+
{
|
|
3187
|
+
value: "string",
|
|
3188
|
+
label: "String"
|
|
3189
|
+
},
|
|
3190
|
+
{
|
|
3191
|
+
value: "date",
|
|
3192
|
+
label: "Date"
|
|
3193
|
+
},
|
|
3194
|
+
{
|
|
3195
|
+
value: "datetime",
|
|
3196
|
+
label: "Datetime"
|
|
3197
|
+
},
|
|
3198
|
+
{
|
|
3199
|
+
value: "year",
|
|
3200
|
+
label: "Year"
|
|
3201
|
+
},
|
|
3202
|
+
{
|
|
3203
|
+
value: "integer",
|
|
3204
|
+
label: "Integer"
|
|
3205
|
+
},
|
|
3206
|
+
{
|
|
3207
|
+
value: "number",
|
|
3208
|
+
label: "Number"
|
|
3209
|
+
},
|
|
3210
|
+
{
|
|
3211
|
+
value: "boolean",
|
|
3212
|
+
label: "Boolean"
|
|
3213
|
+
}
|
|
3214
|
+
];
|
|
3215
|
+
const setFilters = ()=>{
|
|
3216
|
+
setColumnFilters([
|
|
3217
|
+
{
|
|
3218
|
+
id: "titleResizable",
|
|
3219
|
+
value: titleFilter
|
|
3220
|
+
},
|
|
3221
|
+
{
|
|
3222
|
+
id: "type",
|
|
3223
|
+
value: typeFilter === "all" ? "" : typeFilter
|
|
3224
|
+
}
|
|
3225
|
+
]);
|
|
3226
|
+
};
|
|
3227
|
+
return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
|
|
3228
|
+
children: [
|
|
3229
|
+
/*#__PURE__*/ (0, $hgUW1$jsx)("div", {
|
|
3230
|
+
className: "dc-query-builder ds-u-margin-bottom--3",
|
|
3231
|
+
children: /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
|
|
3232
|
+
className: "ds-c-accordion ds-c-accordion--bordered",
|
|
3233
|
+
children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$AccordionItem), {
|
|
3234
|
+
heading: "Data Dictionary Filters",
|
|
3235
|
+
defaultOpen: true,
|
|
3236
|
+
children: /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
|
|
3237
|
+
className: "ds-u-display--flex ds-u-flex-wrap--wrap",
|
|
3238
|
+
children: [
|
|
3239
|
+
/*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TextField), {
|
|
3240
|
+
className: "ds-l-col--12 ds-l-sm-col--6",
|
|
3241
|
+
labelClassName: "ds-u-margin-top--1 ds-u-sm-margin-top--0",
|
|
3242
|
+
label: "Title",
|
|
3243
|
+
value: titleFilter,
|
|
3244
|
+
name: "dc-data-dictionary-title",
|
|
3245
|
+
onChange: (e)=>setTitleFilter(e.target.value)
|
|
3246
|
+
}),
|
|
3247
|
+
/*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Dropdown), {
|
|
3248
|
+
className: "ds-l-col--12 ds-l-sm-col--6",
|
|
3249
|
+
labelClassName: "ds-u-margin-top--1 ds-u-sm-margin-top--0",
|
|
3250
|
+
options: typeOptions,
|
|
3251
|
+
label: "Type",
|
|
3252
|
+
value: typeFilter,
|
|
3253
|
+
name: "dc-data-dictionary-type",
|
|
3254
|
+
onChange: (e)=>setTypeFilter(e.target.value)
|
|
3255
|
+
}),
|
|
3256
|
+
/*#__PURE__*/ (0, $hgUW1$jsx)("div", {
|
|
3257
|
+
className: "ds-u-float--right ds-u-padding-y--2 ds-l-col--12 ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--end",
|
|
3258
|
+
children: /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
|
|
3259
|
+
className: "ds-u-display--flex ds-u-justify-content--end ds-l-col--12 ds-l-md-col--6 ds-u-padding-x--0",
|
|
3260
|
+
children: [
|
|
3261
|
+
/*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
|
|
3262
|
+
onClick: setFilters,
|
|
3263
|
+
className: "ds-l-col--5 ds-u-margin-right--0 ds-u-sm-margin-right--1",
|
|
3264
|
+
children: "Apply filters"
|
|
3265
|
+
}),
|
|
3266
|
+
/*#__PURE__*/ (0, $hgUW1$jsx)((0, $2eec38d4d0dbf714$export$2e2bcd8739ae039), {
|
|
3267
|
+
clearFiltersFn: ()=>{
|
|
3268
|
+
setTitleFilter("");
|
|
3269
|
+
setTypeFilter("all");
|
|
3270
|
+
setColumnFilters([]);
|
|
3271
|
+
}
|
|
3272
|
+
})
|
|
3273
|
+
]
|
|
3274
|
+
})
|
|
3275
|
+
})
|
|
3276
|
+
]
|
|
3277
|
+
})
|
|
3278
|
+
})
|
|
3279
|
+
})
|
|
3280
|
+
}),
|
|
3281
|
+
/*#__PURE__*/ (0, $hgUW1$jsx)((0, $6765a74df807d015$export$2e2bcd8739ae039), {
|
|
3282
|
+
tableColumns: tableColumns,
|
|
3283
|
+
tableData: tableData,
|
|
3284
|
+
count: datasetDictionary.length,
|
|
3285
|
+
pageSize: pageSize,
|
|
3286
|
+
columnFilters: columnFilters
|
|
3287
|
+
})
|
|
3288
|
+
]
|
|
3136
3289
|
});
|
|
3137
3290
|
};
|
|
3138
3291
|
var $a6e312940f7003ef$export$2e2bcd8739ae039 = $a6e312940f7003ef$var$DatasetDictionaryTable;
|
|
@@ -5401,8 +5554,6 @@ function $3b6ca952e79f0695$var$updateQueryForDatastore(condition) {
|
|
|
5401
5554
|
const $3b6ca952e79f0695$var$QueryBuilder = ({ resource: resource, id: id, includeSearchParams: includeSearchParams, customColumns: customColumns })=>{
|
|
5402
5555
|
const { conditions: conditions, schema: schema, setConditions: setConditions } = resource;
|
|
5403
5556
|
const fields = Object.keys(schema[id].fields);
|
|
5404
|
-
const hasConditions = conditions.length > 0;
|
|
5405
|
-
const [queryCount, setQueryCount] = (0, $hgUW1$useState)(0);
|
|
5406
5557
|
const [queryConditions, setQueryConditions] = (0, $hgUW1$useState)([]);
|
|
5407
5558
|
const [titleConditions, setTitleConditions] = (0, $hgUW1$useState)([]); // Add use effect to load conditions on first load if needed
|
|
5408
5559
|
const [conditionsChanged, setConditionsChanged] = (0, $hgUW1$useState)(false);
|