@civicactions/cmsds-open-data-components 1.11.0 → 1.12.0-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/scss/templates/dataset.scss +5 -3
- package/dist/scss/templates/index.scss +1 -0
- package/dist/scss/templates/query-builder.scss +15 -0
- package/lib/assets/icons/close.js +1 -1
- package/lib/assets/icons/close.jsx +1 -1
- package/lib/assets/icons/copy.js +35 -0
- package/lib/assets/icons/copy.jsx +23 -0
- package/lib/assets/icons/download.js +35 -0
- package/lib/assets/icons/download.jsx +23 -0
- package/lib/assets/icons/settings.js +36 -0
- package/lib/assets/icons/settings.jsx +24 -0
- package/lib/components/DataTableDensity/index.js +20 -26
- package/lib/components/DataTableRowChanger/index.js +15 -16
- package/lib/components/ResourceHeader/index.js +98 -17
- package/lib/templates/FilteredResource/FilteredResourceBody.js +12 -64
- package/lib/templates/FilteredResource/QueryBuilder.js +236 -0
- package/lib/templates/FilteredResource/QueryRow.js +169 -0
- package/lib/templates/FilteredResource/QueryTitle.js +87 -0
- package/lib/templates/FilteredResource/functions.js +97 -0
- package/lib/templates/header/index.js +3 -1
- package/package.json +6 -4
|
@@ -17,15 +17,17 @@
|
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
.dc-c-resize-handle {
|
|
20
|
-
height:
|
|
21
|
-
background-color: $color-
|
|
20
|
+
height: auto;
|
|
21
|
+
background-color: $color-gray-light;
|
|
22
22
|
width: 10px;
|
|
23
23
|
min-width: 10px;
|
|
24
24
|
display: block;
|
|
25
25
|
margin-left: -10px;
|
|
26
|
+
border-bottom: 2px solid #323a45;
|
|
27
|
+
border-top: 2px solid #323a45;
|
|
26
28
|
z-index: 1;
|
|
27
29
|
&.isResizing,
|
|
28
30
|
&:hover {
|
|
29
|
-
background-color: $color-primary
|
|
31
|
+
background-color: $color-primary;
|
|
30
32
|
}
|
|
31
33
|
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
.dc-query-builder .ds-c-accordion__content {
|
|
2
|
+
padding-bottom: 0 !important;
|
|
3
|
+
max-height: 24rem;
|
|
4
|
+
}
|
|
5
|
+
.dc-query-builder form {
|
|
6
|
+
position: relative;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.dc-query-bulder--form-buttons {
|
|
10
|
+
position: sticky;
|
|
11
|
+
position: -webkit-sticky;
|
|
12
|
+
width: 100%;
|
|
13
|
+
bottom: 0;
|
|
14
|
+
background-color: white;
|
|
15
|
+
}
|
|
@@ -27,7 +27,7 @@ var CloseIcon = function CloseIcon() {
|
|
|
27
27
|
d: "M14.6467778,11.2126037 C14.8818403,11.4476661 15,11.7342663 15,12.0711472 C15,12.4080282 14.8818403,12.6946283 14.6467778,12.9296908 L12.9296908,14.6467778 C12.6933713,14.8830973 12.4067711,15.001257 12.0698902,15.001257 C11.7342663,15.001257 11.4476661,14.8830973 11.2126037,14.6467778 L7.49937149,10.9348026 L3.7873963,14.6467778 C3.55233386,14.8830973 3.26573368,15.001257 2.92885276,15.001257 C2.59197184,15.001257 2.30662868,14.8830973 2.07030923,14.6467778 L0.353222157,12.9296908 C0.116902707,12.6946283 0,12.4080282 0,12.0711472 C0,11.7342663 0.116902707,11.4476661 0.353222157,11.2126037 L4.06519735,7.50062851 L0.353222157,3.78865331 C0.116902707,3.55233386 0,3.2669907 0,2.92885276 C0,2.59322886 0.116902707,2.30662868 0.353222157,2.07156624 L2.07030923,0.353222157 C2.30662868,0.118159725 2.59197184,0 2.92885276,0 C3.26573368,0 3.55233386,0.118159725 3.7873963,0.353222157 L7.49937149,4.06519735 L11.2126037,0.353222157 C11.4476661,0.118159725 11.7342663,0 12.0698902,0 C12.4067711,0 12.6933713,0.118159725 12.9296908,0.353222157 L14.6467778,2.07156624 C14.8818403,2.30662868 15,2.59322886 15,2.92885276 C15,3.2669907 14.8818403,3.55233386 14.6467778,3.78865331 L10.9348026,7.50062851 L14.6467778,11.2126037 Z",
|
|
28
28
|
id: "Path",
|
|
29
29
|
fill: "#000000",
|
|
30
|
-
|
|
30
|
+
fillRule: "nonzero"
|
|
31
31
|
})));
|
|
32
32
|
};
|
|
33
33
|
|
|
@@ -16,7 +16,7 @@ const CloseIcon = () => (
|
|
|
16
16
|
d="M14.6467778,11.2126037 C14.8818403,11.4476661 15,11.7342663 15,12.0711472 C15,12.4080282 14.8818403,12.6946283 14.6467778,12.9296908 L12.9296908,14.6467778 C12.6933713,14.8830973 12.4067711,15.001257 12.0698902,15.001257 C11.7342663,15.001257 11.4476661,14.8830973 11.2126037,14.6467778 L7.49937149,10.9348026 L3.7873963,14.6467778 C3.55233386,14.8830973 3.26573368,15.001257 2.92885276,15.001257 C2.59197184,15.001257 2.30662868,14.8830973 2.07030923,14.6467778 L0.353222157,12.9296908 C0.116902707,12.6946283 0,12.4080282 0,12.0711472 C0,11.7342663 0.116902707,11.4476661 0.353222157,11.2126037 L4.06519735,7.50062851 L0.353222157,3.78865331 C0.116902707,3.55233386 0,3.2669907 0,2.92885276 C0,2.59322886 0.116902707,2.30662868 0.353222157,2.07156624 L2.07030923,0.353222157 C2.30662868,0.118159725 2.59197184,0 2.92885276,0 C3.26573368,0 3.55233386,0.118159725 3.7873963,0.353222157 L7.49937149,4.06519735 L11.2126037,0.353222157 C11.4476661,0.118159725 11.7342663,0 12.0698902,0 C12.4067711,0 12.6933713,0.118159725 12.9296908,0.353222157 L14.6467778,2.07156624 C14.8818403,2.30662868 15,2.59322886 15,2.92885276 C15,3.2669907 14.8818403,3.55233386 14.6467778,3.78865331 L10.9348026,7.50062851 L14.6467778,11.2126037 Z"
|
|
17
17
|
id="Path"
|
|
18
18
|
fill="#000000"
|
|
19
|
-
|
|
19
|
+
fillRule="nonzero"
|
|
20
20
|
></path>
|
|
21
21
|
</g>
|
|
22
22
|
</svg>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var CopyIcon = function CopyIcon() {
|
|
13
|
+
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
14
|
+
width: "15px",
|
|
15
|
+
height: "15px",
|
|
16
|
+
viewBox: "0 0 512 512",
|
|
17
|
+
version: "1.1",
|
|
18
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
19
|
+
xmlnsXlink: "http://www.w3.org/1999/xlink"
|
|
20
|
+
}, /*#__PURE__*/_react["default"].createElement("g", {
|
|
21
|
+
id: "Artboard",
|
|
22
|
+
stroke: "none",
|
|
23
|
+
strokeWidth: "1",
|
|
24
|
+
fill: "none",
|
|
25
|
+
fillRule: "evenodd"
|
|
26
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
27
|
+
id: "Path",
|
|
28
|
+
fill: "#112E51",
|
|
29
|
+
fillRule: "nonzero",
|
|
30
|
+
d: "M384 96L384 0h-112c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48H464c26.51 0 48-21.49 48-48V128h-95.1C398.4 128 384 113.6 384 96zM416 0v96h96L416 0zM192 352V128h-144c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h192c26.51 0 48-21.49 48-48L288 416h-32C220.7 416 192 387.3 192 352z"
|
|
31
|
+
})));
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
var _default = CopyIcon;
|
|
35
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const CopyIcon = () => (
|
|
4
|
+
<svg
|
|
5
|
+
width="15px"
|
|
6
|
+
height="15px"
|
|
7
|
+
viewBox="0 0 512 512"
|
|
8
|
+
version="1.1"
|
|
9
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
10
|
+
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
11
|
+
>
|
|
12
|
+
<g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
|
|
13
|
+
<path
|
|
14
|
+
id="Path"
|
|
15
|
+
fill="#112E51"
|
|
16
|
+
fillRule="nonzero"
|
|
17
|
+
d="M384 96L384 0h-112c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48H464c26.51 0 48-21.49 48-48V128h-95.1C398.4 128 384 113.6 384 96zM416 0v96h96L416 0zM192 352V128h-144c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h192c26.51 0 48-21.49 48-48L288 416h-32C220.7 416 192 387.3 192 352z"
|
|
18
|
+
/>
|
|
19
|
+
</g>
|
|
20
|
+
</svg>
|
|
21
|
+
);
|
|
22
|
+
|
|
23
|
+
export default CopyIcon;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var DownloadIcon = function DownloadIcon() {
|
|
13
|
+
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
14
|
+
width: "15px",
|
|
15
|
+
height: "15px",
|
|
16
|
+
viewBox: "0 0 384 512",
|
|
17
|
+
version: "1.1",
|
|
18
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
19
|
+
xmlnsXlink: "http://www.w3.org/1999/xlink"
|
|
20
|
+
}, /*#__PURE__*/_react["default"].createElement("g", {
|
|
21
|
+
id: "Artboard",
|
|
22
|
+
stroke: "none",
|
|
23
|
+
strokeWidth: "1",
|
|
24
|
+
fill: "none",
|
|
25
|
+
fillRule: "evenodd"
|
|
26
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
27
|
+
id: "Path",
|
|
28
|
+
fill: "#112E51",
|
|
29
|
+
fillRule: "nonzero",
|
|
30
|
+
d: "M384 128h-128V0L384 128zM256 160H384v304c0 26.51-21.49 48-48 48h-288C21.49 512 0 490.5 0 464v-416C0 21.49 21.49 0 48 0H224l.0039 128C224 145.7 238.3 160 256 160zM255 295L216 334.1V232c0-13.25-10.75-24-24-24S168 218.8 168 232v102.1L128.1 295C124.3 290.3 118.2 288 112 288S99.72 290.3 95.03 295c-9.375 9.375-9.375 24.56 0 33.94l80 80c9.375 9.375 24.56 9.375 33.94 0l80-80c9.375-9.375 9.375-24.56 0-33.94S264.4 285.7 255 295z"
|
|
31
|
+
})));
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
var _default = DownloadIcon;
|
|
35
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const DownloadIcon = () => (
|
|
4
|
+
<svg
|
|
5
|
+
width="15px"
|
|
6
|
+
height="15px"
|
|
7
|
+
viewBox="0 0 384 512"
|
|
8
|
+
version="1.1"
|
|
9
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
10
|
+
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
11
|
+
>
|
|
12
|
+
<g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
|
|
13
|
+
<path
|
|
14
|
+
id="Path"
|
|
15
|
+
fill="#112E51"
|
|
16
|
+
fillRule="nonzero"
|
|
17
|
+
d="M384 128h-128V0L384 128zM256 160H384v304c0 26.51-21.49 48-48 48h-288C21.49 512 0 490.5 0 464v-416C0 21.49 21.49 0 48 0H224l.0039 128C224 145.7 238.3 160 256 160zM255 295L216 334.1V232c0-13.25-10.75-24-24-24S168 218.8 168 232v102.1L128.1 295C124.3 290.3 118.2 288 112 288S99.72 290.3 95.03 295c-9.375 9.375-9.375 24.56 0 33.94l80 80c9.375 9.375 24.56 9.375 33.94 0l80-80c9.375-9.375 9.375-24.56 0-33.94S264.4 285.7 255 295z"
|
|
18
|
+
/>
|
|
19
|
+
</g>
|
|
20
|
+
</svg>
|
|
21
|
+
);
|
|
22
|
+
|
|
23
|
+
export default DownloadIcon;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var SettingsIcon = function SettingsIcon() {
|
|
13
|
+
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
14
|
+
width: "15px",
|
|
15
|
+
height: "15px" // viewBox="0 0 15 15"
|
|
16
|
+
,
|
|
17
|
+
viewBox: "0 0 512 512",
|
|
18
|
+
version: "1.1",
|
|
19
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
20
|
+
xmlnsXlink: "http://www.w3.org/1999/xlink"
|
|
21
|
+
}, /*#__PURE__*/_react["default"].createElement("g", {
|
|
22
|
+
id: "Artboard",
|
|
23
|
+
stroke: "none",
|
|
24
|
+
strokeWidth: "1",
|
|
25
|
+
fill: "none",
|
|
26
|
+
fillRule: "evenodd"
|
|
27
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
28
|
+
id: "Path",
|
|
29
|
+
fill: "#112E51",
|
|
30
|
+
fillRule: "nonzero",
|
|
31
|
+
d: "M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z"
|
|
32
|
+
})));
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
var _default = SettingsIcon;
|
|
36
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const SettingsIcon = () => (
|
|
4
|
+
<svg
|
|
5
|
+
width="15px"
|
|
6
|
+
height="15px"
|
|
7
|
+
// viewBox="0 0 15 15"
|
|
8
|
+
viewBox="0 0 512 512"
|
|
9
|
+
version="1.1"
|
|
10
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
11
|
+
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
12
|
+
>
|
|
13
|
+
<g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
|
|
14
|
+
<path
|
|
15
|
+
id="Path"
|
|
16
|
+
fill="#112E51"
|
|
17
|
+
fillRule="nonzero"
|
|
18
|
+
d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z"
|
|
19
|
+
/>
|
|
20
|
+
</g>
|
|
21
|
+
</svg>
|
|
22
|
+
);
|
|
23
|
+
|
|
24
|
+
export default SettingsIcon;
|
|
@@ -16,34 +16,28 @@ var _designSystem = require("@cmsgov/design-system");
|
|
|
16
16
|
var DataTableDensity = function DataTableDensity(_ref) {
|
|
17
17
|
var setTablePadding = _ref.setTablePadding,
|
|
18
18
|
tablePadding = _ref.tablePadding;
|
|
19
|
-
return /*#__PURE__*/_react["default"].createElement("div",
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
},
|
|
19
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
20
|
+
className: "ds-u-display--flex"
|
|
21
|
+
}, /*#__PURE__*/_react["default"].createElement(_designSystem.Dropdown, {
|
|
22
|
+
options: [{
|
|
23
|
+
label: 'Tight',
|
|
24
|
+
value: 'ds-u-padding-y--0'
|
|
25
|
+
}, {
|
|
26
|
+
label: 'Normal',
|
|
27
|
+
value: 'ds-u-padding-y--1'
|
|
28
|
+
}, {
|
|
29
|
+
label: 'Expanded',
|
|
30
|
+
value: 'ds-u-padding-y--2'
|
|
31
|
+
}],
|
|
32
32
|
size: "small",
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
onClick: function onClick() {
|
|
39
|
-
return setTablePadding('ds-u-padding-y--2');
|
|
33
|
+
label: "Display density:",
|
|
34
|
+
labelClassName: "ds-u-margin-top--0",
|
|
35
|
+
name: "datatable_display_density",
|
|
36
|
+
onChange: function onChange(e) {
|
|
37
|
+
return setTablePadding(e.target.value);
|
|
40
38
|
},
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
className: tablePadding === 'ds-u-padding-y--2' ? 'ds-u-font-weight--bold' : ''
|
|
44
|
-
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
45
|
-
className: "ds-u-visibility--screen-reader"
|
|
46
|
-
}, "Table padding"), " Expanded"));
|
|
39
|
+
defaultValue: 'ds-u-padding-y--1'
|
|
40
|
+
}));
|
|
47
41
|
};
|
|
48
42
|
|
|
49
43
|
DataTableDensity.propTypes = {
|
|
@@ -17,22 +17,21 @@ var DataTableRowChanger = function DataTableRowChanger(_ref) {
|
|
|
17
17
|
var setLimit = _ref.setLimit,
|
|
18
18
|
rowOptions = _ref.rowOptions,
|
|
19
19
|
limit = _ref.limit;
|
|
20
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
},
|
|
34
|
-
|
|
35
|
-
}, "rows per page"));
|
|
20
|
+
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_designSystem.Dropdown, {
|
|
21
|
+
options: rowOptions.map(function (row) {
|
|
22
|
+
return {
|
|
23
|
+
label: row,
|
|
24
|
+
value: row
|
|
25
|
+
};
|
|
26
|
+
}),
|
|
27
|
+
size: "small",
|
|
28
|
+
label: "Rows per page:",
|
|
29
|
+
labelClassName: "ds-u-margin-top--0",
|
|
30
|
+
name: "datatable_rows_per_page",
|
|
31
|
+
onChange: function onChange(e) {
|
|
32
|
+
return setLimit(e.target.value);
|
|
33
|
+
},
|
|
34
|
+
defaultValue: limit
|
|
36
35
|
}));
|
|
37
36
|
};
|
|
38
37
|
|
|
@@ -2,15 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
6
8
|
value: true
|
|
7
9
|
});
|
|
8
10
|
exports["default"] = void 0;
|
|
9
11
|
|
|
10
|
-
var
|
|
12
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
15
|
|
|
12
16
|
var _reactRouterDom = require("react-router-dom");
|
|
13
17
|
|
|
18
|
+
var _reactResponsive = require("react-responsive");
|
|
19
|
+
|
|
20
|
+
var _reactPopper = require("react-popper");
|
|
21
|
+
|
|
22
|
+
var _designSystem = require("@cmsgov/design-system");
|
|
23
|
+
|
|
14
24
|
var _dataCatalogComponents = require("@civicactions/data-catalog-components");
|
|
15
25
|
|
|
16
26
|
var _DataTableDensity = _interopRequireDefault(require("../../components/DataTableDensity"));
|
|
@@ -19,47 +29,118 @@ var _ManageColumns = _interopRequireDefault(require("../../components/ManageColu
|
|
|
19
29
|
|
|
20
30
|
var _DataTableRowChanger = _interopRequireDefault(require("../../components/DataTableRowChanger"));
|
|
21
31
|
|
|
32
|
+
var _download = _interopRequireDefault(require("../../assets/icons/download"));
|
|
33
|
+
|
|
34
|
+
var _copy = _interopRequireDefault(require("../../assets/icons/copy"));
|
|
35
|
+
|
|
36
|
+
var _settings = _interopRequireDefault(require("../../assets/icons/settings"));
|
|
37
|
+
|
|
38
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
39
|
+
|
|
40
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
41
|
+
|
|
22
42
|
var ResourceHeader = function ResourceHeader(_ref) {
|
|
23
43
|
var setTablePadding = _ref.setTablePadding,
|
|
24
44
|
id = _ref.id,
|
|
25
45
|
distribution = _ref.distribution,
|
|
26
46
|
includeFiltered = _ref.includeFiltered,
|
|
27
47
|
includeDensity = _ref.includeDensity,
|
|
48
|
+
includeDownload = _ref.includeDownload,
|
|
28
49
|
resource = _ref.resource,
|
|
29
|
-
tablePadding = _ref.tablePadding
|
|
50
|
+
tablePadding = _ref.tablePadding,
|
|
51
|
+
downloadUrl = _ref.downloadUrl;
|
|
52
|
+
var md = (0, _reactResponsive.useMediaQuery)({
|
|
53
|
+
minWidth: 0,
|
|
54
|
+
maxWidth: 768
|
|
55
|
+
});
|
|
30
56
|
var limit = resource.limit,
|
|
31
57
|
offset = resource.offset,
|
|
32
58
|
count = resource.count,
|
|
33
59
|
setLimit = resource.setLimit,
|
|
34
60
|
setOffset = resource.setOffset;
|
|
35
61
|
var intCount = count ? parseInt(count) : 0;
|
|
36
|
-
|
|
62
|
+
|
|
63
|
+
var _useState = (0, _react.useState)(null),
|
|
64
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
65
|
+
referenceElement = _useState2[0],
|
|
66
|
+
setReferenceElement = _useState2[1];
|
|
67
|
+
|
|
68
|
+
var _useState3 = (0, _react.useState)(null),
|
|
69
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
70
|
+
popperElement = _useState4[0],
|
|
71
|
+
setPopperElement = _useState4[1];
|
|
72
|
+
|
|
73
|
+
var _useState5 = (0, _react.useState)(null),
|
|
74
|
+
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
|
75
|
+
arrowElement = _useState6[0],
|
|
76
|
+
setArrowElement = _useState6[1];
|
|
77
|
+
|
|
78
|
+
var _usePopper = (0, _reactPopper.usePopper)(referenceElement, popperElement, {
|
|
79
|
+
modifiers: [{
|
|
80
|
+
name: 'arrow',
|
|
81
|
+
options: {
|
|
82
|
+
element: arrowElement
|
|
83
|
+
}
|
|
84
|
+
}]
|
|
85
|
+
}),
|
|
86
|
+
styles = _usePopper.styles,
|
|
87
|
+
attributes = _usePopper.attributes;
|
|
88
|
+
|
|
89
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
90
|
+
className: "dc-c-resource-header"
|
|
91
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
37
92
|
className: "ds-l-row"
|
|
38
93
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
39
94
|
className: "ds-l-col--12"
|
|
40
95
|
}, includeFiltered && /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
|
|
41
96
|
className: "ds-c-button ds-c-button--primary",
|
|
42
97
|
to: "/dataset/".concat(id, "/data")
|
|
43
|
-
}, "View and filter data")),
|
|
44
|
-
className: "ds-u-text-align--right ds-u-margin-left--auto ds-l-col--6"
|
|
45
|
-
}, /*#__PURE__*/_react["default"].createElement(_DataTableDensity["default"], {
|
|
46
|
-
setTablePadding: setTablePadding,
|
|
47
|
-
tablePadding: tablePadding
|
|
48
|
-
}))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
98
|
+
}, "View and filter data"))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
49
99
|
className: "ds-l-row ds-u-align-items--center"
|
|
50
100
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
51
|
-
className: "ds-l-col--
|
|
101
|
+
className: "ds-l-col--12 ds-u-display--flex ds-u-justify-content--between ds-u-align-items--center"
|
|
102
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
103
|
+
className: "ds-u-font-weight--bold"
|
|
52
104
|
}, /*#__PURE__*/_react["default"].createElement(_dataCatalogComponents.DataTablePageResults, {
|
|
53
105
|
totalRows: intCount,
|
|
54
106
|
limit: limit,
|
|
55
107
|
offset: offset
|
|
56
|
-
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
108
|
+
})), /*#__PURE__*/_react["default"].createElement("div", null, includeDownload && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
|
|
109
|
+
size: "small",
|
|
110
|
+
className: "ds-u-text-align--left ds-u-font-weight--normal ds-u-font-size--base ds-u-margin-right--1",
|
|
111
|
+
href: downloadUrl,
|
|
112
|
+
"aria-label": "Download filtered data as CSV"
|
|
113
|
+
}, /*#__PURE__*/_react["default"].createElement(_download["default"], null), !md && /*#__PURE__*/_react["default"].createElement("span", {
|
|
114
|
+
className: "ds-u-font-weight--semibold ds-u-margin-left--1"
|
|
115
|
+
}, "Download filtered data (CSV)")), /*#__PURE__*/_react["default"].createElement(_designSystem.Tooltip, {
|
|
116
|
+
onOpen: function onOpen() {
|
|
117
|
+
navigator.clipboard.writeText(window.location.href);
|
|
118
|
+
},
|
|
119
|
+
className: "ds-c-button ds-c-button--small ds-u-text-align--left ds-u-margin-right--1",
|
|
120
|
+
placement: "bottom",
|
|
121
|
+
dialog: true,
|
|
122
|
+
ariaLabel: "Copy link to filtered data",
|
|
123
|
+
title: "Link copied to clipboard"
|
|
124
|
+
}, /*#__PURE__*/_react["default"].createElement(_copy["default"], null), !md && /*#__PURE__*/_react["default"].createElement("span", {
|
|
125
|
+
className: "ds-u-font-weight--semibold ds-u-margin-left--1"
|
|
126
|
+
}, "Copy link to filtered data"))), /*#__PURE__*/_react["default"].createElement(_designSystem.Tooltip, {
|
|
127
|
+
className: "ds-c-button ds-c-button--small ds-u-text-align--left",
|
|
128
|
+
placement: "bottom",
|
|
129
|
+
dialog: true,
|
|
130
|
+
ariaLabel: "Display settings",
|
|
131
|
+
title: /*#__PURE__*/_react["default"].createElement("div", {
|
|
132
|
+
className: "dc-c-display-settings"
|
|
133
|
+
}, /*#__PURE__*/_react["default"].createElement(_DataTableRowChanger["default"], {
|
|
134
|
+
limit: limit,
|
|
135
|
+
setLimit: setLimit,
|
|
136
|
+
setOffset: setOffset
|
|
137
|
+
}), includeDensity && /*#__PURE__*/_react["default"].createElement(_DataTableDensity["default"], {
|
|
138
|
+
setTablePadding: setTablePadding,
|
|
139
|
+
tablePadding: tablePadding
|
|
140
|
+
}))
|
|
141
|
+
}, /*#__PURE__*/_react["default"].createElement(_settings["default"], null), !md && /*#__PURE__*/_react["default"].createElement("span", {
|
|
142
|
+
className: "ds-u-font-weight--semibold ds-u-margin-left--1"
|
|
143
|
+
}, "Display settings"))))));
|
|
63
144
|
};
|
|
64
145
|
|
|
65
146
|
var _default = ResourceHeader;
|
|
@@ -35,6 +35,8 @@ var _ResourceFooter = _interopRequireDefault(require("../../components/ResourceF
|
|
|
35
35
|
|
|
36
36
|
var _functions = require("./functions");
|
|
37
37
|
|
|
38
|
+
var _QueryBuilder = _interopRequireDefault(require("./QueryBuilder"));
|
|
39
|
+
|
|
38
40
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
39
41
|
|
|
40
42
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -83,6 +85,7 @@ var FilteredResourceBody = function FilteredResourceBody(_ref) {
|
|
|
83
85
|
})) : {
|
|
84
86
|
conditions: []
|
|
85
87
|
};
|
|
88
|
+
var conditions = options.conditions.length ? options.conditions : [];
|
|
86
89
|
var resource = (0, _dataCatalogServices.useDatastore)('', process.env.REACT_APP_ROOT_URL, _objectSpread(_objectSpread({}, options), {}, {
|
|
87
90
|
limit: 25,
|
|
88
91
|
manual: true
|
|
@@ -98,7 +101,7 @@ var FilteredResourceBody = function FilteredResourceBody(_ref) {
|
|
|
98
101
|
}, {
|
|
99
102
|
encode: true
|
|
100
103
|
}), "&format=csv");
|
|
101
|
-
var pageTitle = distribution.data.title ? distribution.data.title : dataset.title;
|
|
104
|
+
var pageTitle = distribution.data.title && distribution.data.title.toLowerCase() !== 'csv' ? distribution.data.title : dataset.title;
|
|
102
105
|
return /*#__PURE__*/_react["default"].createElement("section", {
|
|
103
106
|
className: "ds-l-container ds-u-padding-bottom--3 ds-u-margin-bottom--2"
|
|
104
107
|
}, Object.keys(distribution).length && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
|
|
@@ -111,67 +114,18 @@ var FilteredResourceBody = function FilteredResourceBody(_ref) {
|
|
|
111
114
|
dangerouslySetInnerHTML: {
|
|
112
115
|
__html: distribution.data.description
|
|
113
116
|
}
|
|
114
|
-
}), /*#__PURE__*/_react["default"].createElement("
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
119
|
-
className: "dc-c-resource-action ds-u-border--1 ds-u-radius ds-u-display--flex ds-u-flex-direction--column ds-u-text-align--center"
|
|
120
|
-
}, /*#__PURE__*/_react["default"].createElement("h2", {
|
|
121
|
-
className: "ds-u-color--primary ds-u-font-size--h3 ds-u-margin-bottom--2 ds-u-padding-bottom--0 ds-u-padding-left--3 ds-u-padding-left--3 ds-u-text-align--left"
|
|
122
|
-
}, "Create a filter"), /*#__PURE__*/_react["default"].createElement("div", {
|
|
123
|
-
className: "dc-filtered-resource-toggle"
|
|
124
|
-
}, /*#__PURE__*/_react["default"].createElement(_designSystem.HelpDrawerToggle, {
|
|
125
|
-
helpDrawerOpen: filtersOpen,
|
|
126
|
-
showDrawer: function showDrawer() {
|
|
127
|
-
return setFiltersOpen(!filtersOpen);
|
|
128
|
-
},
|
|
129
|
-
className: "ds-u-text-decoration--none ds-u-font-weight--bold ds-c-button ds-c-button--primary ds-u-padding-y--1 ds-u-padding-x--3"
|
|
130
|
-
}, "Filter data")))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
131
|
-
className: "ds-l-md-col--4 ds-l-sm-col--12 ds-u-margin-bottom--3"
|
|
132
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
133
|
-
className: "ds-u-border--1 ds-u-radius"
|
|
134
|
-
}, /*#__PURE__*/_react["default"].createElement("h2", {
|
|
135
|
-
className: "ds-u-color--primary ds-u-font-size--h3 ds-u-margin-bottom--0 ds-u-padding-bottom--0 ds-u-padding-left--3"
|
|
136
|
-
}, "Access"), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
|
|
137
|
-
variation: "transparent",
|
|
138
|
-
className: "ds-u-text-align--left ds-u-font-weight--normal",
|
|
139
|
-
href: downloadUrl
|
|
140
|
-
}, "Download filtered view (CSV)"), /*#__PURE__*/_react["default"].createElement(_designSystem.Tooltip, {
|
|
141
|
-
onOpen: function onOpen() {
|
|
142
|
-
navigator.clipboard.writeText(window.location.href);
|
|
143
|
-
},
|
|
144
|
-
className: "ds-c-button ds-c-button--transparent ds-u-text-align--left",
|
|
145
|
-
placement: "bottom",
|
|
146
|
-
dialog: true,
|
|
147
|
-
title: "Link copied to clipboard"
|
|
148
|
-
}, "Copy link to filtered view"))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
149
|
-
className: "ds-l-md-col--4 ds-l-sm-col--12 ds-u-margin-bottom--3"
|
|
150
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
151
|
-
className: " ds-u-border--1 ds-u-radius"
|
|
152
|
-
}, /*#__PURE__*/_react["default"].createElement("h2", {
|
|
153
|
-
className: "ds-u-color--primary ds-u-font-size--h3 ds-u-margin-bottom--0 ds-u-padding-bottom--0 ds-u-padding-left--3 ds-u-padding-left--3"
|
|
154
|
-
}, "Try API"), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
|
|
155
|
-
variation: "transparent",
|
|
156
|
-
className: "ds-u-text-align--left ds-u-font-weight--normal",
|
|
157
|
-
onClick: function onClick() {
|
|
158
|
-
return window.scrollTo({
|
|
159
|
-
behavior: 'smooth',
|
|
160
|
-
top: apiDocs.current.offsetTop
|
|
161
|
-
});
|
|
162
|
-
}
|
|
163
|
-
}, "Scroll to filtered view API"), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
|
|
164
|
-
variation: "transparent",
|
|
165
|
-
className: "ds-u-text-align--left ds-u-font-weight--normal",
|
|
166
|
-
onClick: function onClick() {
|
|
167
|
-
return navigate(apiDocPage);
|
|
168
|
-
}
|
|
169
|
-
}, "View API documentation")))), resource.columns && Object.keys(resource.schema).length ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_ResourceHeader["default"], {
|
|
117
|
+
}), resource.columns && Object.keys(resource.schema).length && /*#__PURE__*/_react["default"].createElement(_QueryBuilder["default"], {
|
|
118
|
+
resource: resource,
|
|
119
|
+
id: distribution.identifier,
|
|
120
|
+
customColumns: customColumns
|
|
121
|
+
}), resource.columns && Object.keys(resource.schema).length ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_ResourceHeader["default"], {
|
|
170
122
|
includeDensity: true,
|
|
171
123
|
setTablePadding: setTablePadding,
|
|
172
124
|
distribution: distribution,
|
|
173
125
|
resource: resource,
|
|
174
|
-
|
|
126
|
+
downloadUrl: downloadUrl,
|
|
127
|
+
tablePadding: tablePadding,
|
|
128
|
+
includeDownload: true
|
|
175
129
|
}), /*#__PURE__*/_react["default"].createElement(_ResourcePreview["default"], {
|
|
176
130
|
id: distribution.identifier,
|
|
177
131
|
tablePadding: tablePadding,
|
|
@@ -187,12 +141,6 @@ var FilteredResourceBody = function FilteredResourceBody(_ref) {
|
|
|
187
141
|
columnWidths: columnWidths
|
|
188
142
|
}), /*#__PURE__*/_react["default"].createElement(_ResourceFooter["default"], {
|
|
189
143
|
resource: resource
|
|
190
|
-
}), filtersOpen && /*#__PURE__*/_react["default"].createElement(_ResourceFilter["default"], {
|
|
191
|
-
id: distribution.identifier,
|
|
192
|
-
resource: resource,
|
|
193
|
-
filterOpen: filtersOpen,
|
|
194
|
-
setFilterOpen: setFiltersOpen,
|
|
195
|
-
helpDrawerButton: buttonRef
|
|
196
144
|
})) : /*#__PURE__*/_react["default"].createElement(_designSystem.Spinner, {
|
|
197
145
|
role: "status",
|
|
198
146
|
"aria-valuetext": "Resource loading"
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports["default"] = void 0;
|
|
11
|
+
|
|
12
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
+
|
|
14
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
+
|
|
16
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
17
|
+
|
|
18
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
+
|
|
20
|
+
var _qs = _interopRequireDefault(require("qs"));
|
|
21
|
+
|
|
22
|
+
var _designSystem = require("@cmsgov/design-system");
|
|
23
|
+
|
|
24
|
+
var _QueryRow = _interopRequireDefault(require("./QueryRow"));
|
|
25
|
+
|
|
26
|
+
var _QueryTitle = _interopRequireDefault(require("./QueryTitle"));
|
|
27
|
+
|
|
28
|
+
var _functions = require("./functions");
|
|
29
|
+
|
|
30
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
31
|
+
|
|
32
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
33
|
+
|
|
34
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
35
|
+
|
|
36
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
37
|
+
|
|
38
|
+
function updateQueryForDatastore(condition) {
|
|
39
|
+
var cond = condition;
|
|
40
|
+
delete cond.key;
|
|
41
|
+
|
|
42
|
+
if (cond.operator === '=' || cond.operator === '<>') {
|
|
43
|
+
if (Array.isArray(cond.value)) {
|
|
44
|
+
cond.value = cond.value.join();
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
cond.value = cond.value.replace(/(^\%+|\%+$)/gm, '');
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
if (cond.operator.toLowerCase() === 'like') {
|
|
51
|
+
if (Array.isArray(cond.value)) {
|
|
52
|
+
cond.value = cond.value.join();
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
var cleanedValue = cond.value.replace(/(^\%+|\%+$)/gm, '');
|
|
56
|
+
cond.value = "%".concat(cleanedValue, "%");
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
if (cond.operator.toLowerCase() === 'in') {
|
|
60
|
+
if (!Array.isArray(cond.value)) {
|
|
61
|
+
cond.value = cond.value.split(',');
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
if (Array.isArray(cond.value)) {
|
|
66
|
+
cond.value = cond.value.map(function (v) {
|
|
67
|
+
return v.trim().replace(/(^\%+|\%+$)/gm, '');
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
return cond;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
var QueryBuilder = function QueryBuilder(_ref) {
|
|
75
|
+
var resource = _ref.resource,
|
|
76
|
+
id = _ref.id,
|
|
77
|
+
includeSearchParams = _ref.includeSearchParams,
|
|
78
|
+
customColumns = _ref.customColumns;
|
|
79
|
+
var conditions = resource.conditions,
|
|
80
|
+
schema = resource.schema,
|
|
81
|
+
setConditions = resource.setConditions;
|
|
82
|
+
var fields = Object.keys(schema[id].fields);
|
|
83
|
+
var hasConditions = conditions.length > 0;
|
|
84
|
+
|
|
85
|
+
var _useState = (0, _react.useState)(0),
|
|
86
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
87
|
+
queryCount = _useState2[0],
|
|
88
|
+
setQueryCount = _useState2[1];
|
|
89
|
+
|
|
90
|
+
var _useState3 = (0, _react.useState)([]),
|
|
91
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
92
|
+
queryConditions = _useState4[0],
|
|
93
|
+
setQueryConditions = _useState4[1];
|
|
94
|
+
|
|
95
|
+
var _useState5 = (0, _react.useState)([]),
|
|
96
|
+
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
|
97
|
+
titleConditions = _useState6[0],
|
|
98
|
+
setTitleConditions = _useState6[1]; // Add use effect to load conditions on first load if needed
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
var _useState7 = (0, _react.useState)(false),
|
|
102
|
+
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
|
|
103
|
+
conditionsChanged = _useState8[0],
|
|
104
|
+
setConditionsChanged = _useState8[1];
|
|
105
|
+
|
|
106
|
+
var addCondition = function addCondition(condition) {
|
|
107
|
+
if (Array.isArray(condition)) {
|
|
108
|
+
var keyedConditions = condition.map(function (oc) {
|
|
109
|
+
return _objectSpread(_objectSpread({}, oc), {}, {
|
|
110
|
+
key: Date.now() + oc.value + oc.property
|
|
111
|
+
});
|
|
112
|
+
});
|
|
113
|
+
setQueryConditions(keyedConditions);
|
|
114
|
+
} else {
|
|
115
|
+
setQueryConditions([].concat((0, _toConsumableArray2["default"])(queryConditions), [{
|
|
116
|
+
property: fields[0],
|
|
117
|
+
value: '',
|
|
118
|
+
operator: (0, _functions.buildOperatorOptions)(schema[id].fields[fields[0]].mysql_type)[0].value,
|
|
119
|
+
key: Date.now()
|
|
120
|
+
}]));
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
_react["default"].useEffect(function () {
|
|
125
|
+
addCondition(conditions);
|
|
126
|
+
setTitleConditions(conditions);
|
|
127
|
+
}, []);
|
|
128
|
+
|
|
129
|
+
var propertyOptions = fields.map(function (f) {
|
|
130
|
+
if (schema[id].fields[f].description) {
|
|
131
|
+
return {
|
|
132
|
+
label: schema[id].fields[f].description,
|
|
133
|
+
value: f
|
|
134
|
+
};
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
return {
|
|
138
|
+
label: f,
|
|
139
|
+
value: f
|
|
140
|
+
};
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
var submitConditions = function submitConditions(e) {
|
|
144
|
+
e.preventDefault();
|
|
145
|
+
var submitConditions = queryConditions.filter(function (oc) {
|
|
146
|
+
if (oc.property) {
|
|
147
|
+
return oc;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
return false;
|
|
151
|
+
}).map(function (oc) {
|
|
152
|
+
var cond = Object.assign({}, oc);
|
|
153
|
+
return updateQueryForDatastore(cond);
|
|
154
|
+
});
|
|
155
|
+
setConditions(submitConditions);
|
|
156
|
+
setTitleConditions(queryConditions.map(function (oc) {
|
|
157
|
+
return Object.assign({}, oc);
|
|
158
|
+
}));
|
|
159
|
+
setConditionsChanged(false);
|
|
160
|
+
console.log(includeSearchParams);
|
|
161
|
+
|
|
162
|
+
if (includeSearchParams) {
|
|
163
|
+
var url = new URL(window.location);
|
|
164
|
+
|
|
165
|
+
var urlString = _qs["default"].stringify({
|
|
166
|
+
conditions: submitConditions
|
|
167
|
+
}, {
|
|
168
|
+
encodeValuesOnly: true,
|
|
169
|
+
addQueryPrefix: true
|
|
170
|
+
});
|
|
171
|
+
|
|
172
|
+
window.history.pushState({}, '', "".concat(url.origin).concat(url.pathname).concat(urlString));
|
|
173
|
+
}
|
|
174
|
+
};
|
|
175
|
+
|
|
176
|
+
var updateCondition = function updateCondition(index, key, value) {
|
|
177
|
+
var newConditions = (0, _toConsumableArray2["default"])(queryConditions);
|
|
178
|
+
newConditions[index][key] = value;
|
|
179
|
+
setQueryConditions(newConditions);
|
|
180
|
+
setConditionsChanged(true);
|
|
181
|
+
};
|
|
182
|
+
|
|
183
|
+
var removeCondition = function removeCondition(index) {
|
|
184
|
+
var newConditions = queryConditions.map(function (oc) {
|
|
185
|
+
return Object.assign({}, oc);
|
|
186
|
+
});
|
|
187
|
+
newConditions.splice(index, 1);
|
|
188
|
+
setQueryConditions(newConditions);
|
|
189
|
+
setConditionsChanged(true);
|
|
190
|
+
};
|
|
191
|
+
|
|
192
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
193
|
+
className: "dc-query-builder ds-u-margin-bottom--3"
|
|
194
|
+
}, /*#__PURE__*/_react["default"].createElement(_designSystem.Accordion, {
|
|
195
|
+
bordered: true
|
|
196
|
+
}, /*#__PURE__*/_react["default"].createElement(_designSystem.AccordionItem, {
|
|
197
|
+
heading: /*#__PURE__*/_react["default"].createElement(_QueryTitle["default"], {
|
|
198
|
+
schema: schema[id],
|
|
199
|
+
conditions: titleConditions,
|
|
200
|
+
customColumns: customColumns
|
|
201
|
+
}),
|
|
202
|
+
defaultOpen: false
|
|
203
|
+
}, /*#__PURE__*/_react["default"].createElement("form", {
|
|
204
|
+
onSubmit: function onSubmit(e) {
|
|
205
|
+
return submitConditions(e);
|
|
206
|
+
}
|
|
207
|
+
}, /*#__PURE__*/_react["default"].createElement("div", null, queryConditions.map(function (qf, index) {
|
|
208
|
+
return /*#__PURE__*/_react["default"].createElement(_QueryRow["default"], {
|
|
209
|
+
key: qf.key,
|
|
210
|
+
id: id,
|
|
211
|
+
schema: schema,
|
|
212
|
+
condition: qf,
|
|
213
|
+
index: index,
|
|
214
|
+
propertyOptions: propertyOptions,
|
|
215
|
+
update: updateCondition,
|
|
216
|
+
remove: removeCondition
|
|
217
|
+
});
|
|
218
|
+
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
219
|
+
className: "dc-query-bulder--form-buttons ds-u-padding-y--2"
|
|
220
|
+
}, /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
|
|
221
|
+
variation: "transparent",
|
|
222
|
+
onClick: function onClick() {
|
|
223
|
+
return addCondition(null);
|
|
224
|
+
}
|
|
225
|
+
}, "+ Add filter"), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
|
|
226
|
+
disabled: !conditionsChanged,
|
|
227
|
+
className: "ds-u-float--right",
|
|
228
|
+
type: "submit"
|
|
229
|
+
}, "Apply filters"))))));
|
|
230
|
+
};
|
|
231
|
+
|
|
232
|
+
QueryBuilder.defaultProps = {
|
|
233
|
+
includeSearchParams: true
|
|
234
|
+
};
|
|
235
|
+
var _default = QueryBuilder;
|
|
236
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports["default"] = void 0;
|
|
11
|
+
|
|
12
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
+
|
|
16
|
+
var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
|
|
17
|
+
|
|
18
|
+
var _reactResponsive = require("react-responsive");
|
|
19
|
+
|
|
20
|
+
var _designSystem = require("@cmsgov/design-system");
|
|
21
|
+
|
|
22
|
+
var _functions = require("./functions");
|
|
23
|
+
|
|
24
|
+
require("react-datepicker/dist/react-datepicker.css");
|
|
25
|
+
|
|
26
|
+
var _close = _interopRequireDefault(require("../../assets/icons/close"));
|
|
27
|
+
|
|
28
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
29
|
+
|
|
30
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
31
|
+
|
|
32
|
+
function getStartDate(condition, schema, id) {
|
|
33
|
+
if (schema[id].fields[condition.property].mysql_type === 'date') {
|
|
34
|
+
var newDate = new Date(condition.value);
|
|
35
|
+
|
|
36
|
+
if (newDate instanceof Date && !isNaN(newDate)) {
|
|
37
|
+
return newDate;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
return new Date();
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
var QueryRow = function QueryRow(_ref) {
|
|
45
|
+
var id = _ref.id,
|
|
46
|
+
condition = _ref.condition,
|
|
47
|
+
index = _ref.index,
|
|
48
|
+
update = _ref.update,
|
|
49
|
+
remove = _ref.remove,
|
|
50
|
+
propertyOptions = _ref.propertyOptions,
|
|
51
|
+
schema = _ref.schema;
|
|
52
|
+
var md = (0, _reactResponsive.useMediaQuery)({
|
|
53
|
+
minWidth: 0,
|
|
54
|
+
maxWidth: 768
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
var _useState = (0, _react.useState)(condition.operator),
|
|
58
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
59
|
+
operator = _useState2[0],
|
|
60
|
+
setOperator = _useState2[1];
|
|
61
|
+
|
|
62
|
+
var _useState3 = (0, _react.useState)(condition.property),
|
|
63
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
64
|
+
property = _useState4[0],
|
|
65
|
+
setProperty = _useState4[1];
|
|
66
|
+
|
|
67
|
+
var _useState5 = (0, _react.useState)(condition.value),
|
|
68
|
+
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
|
69
|
+
value = _useState6[0],
|
|
70
|
+
setValue = _useState6[1];
|
|
71
|
+
|
|
72
|
+
var _React$useState = _react["default"].useState(getStartDate(condition, schema, id)),
|
|
73
|
+
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
|
74
|
+
startDate = _React$useState2[0],
|
|
75
|
+
setStartDate = _React$useState2[1];
|
|
76
|
+
|
|
77
|
+
(0, _react.useEffect)(function () {
|
|
78
|
+
if (property !== condition.property) {
|
|
79
|
+
if (property) {
|
|
80
|
+
update(index, 'property', property);
|
|
81
|
+
} else {
|
|
82
|
+
update(index, 'property', '');
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}, [property]);
|
|
86
|
+
(0, _react.useEffect)(function () {
|
|
87
|
+
if (operator !== condition.operator) {
|
|
88
|
+
if (operator) {
|
|
89
|
+
update(index, 'operator', operator);
|
|
90
|
+
} else {
|
|
91
|
+
update(index, 'operator', '');
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}, [operator]);
|
|
95
|
+
(0, _react.useEffect)(function () {
|
|
96
|
+
if (value !== condition.value) {
|
|
97
|
+
if (value) {
|
|
98
|
+
update(index, 'value', value);
|
|
99
|
+
} else {
|
|
100
|
+
update(index, 'value', '');
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}, [value]);
|
|
104
|
+
return /*#__PURE__*/_react["default"].createElement("fieldset", {
|
|
105
|
+
className: "ds-u-display--flex ds-u-justify-content--between ds-u-align-items--center"
|
|
106
|
+
}, /*#__PURE__*/_react["default"].createElement(_designSystem.Dropdown, {
|
|
107
|
+
options: propertyOptions,
|
|
108
|
+
value: property,
|
|
109
|
+
label: "Property",
|
|
110
|
+
name: "".concat(condition.key, "_property"),
|
|
111
|
+
onChange: function onChange(e) {
|
|
112
|
+
return setProperty(e.target.value);
|
|
113
|
+
}
|
|
114
|
+
}), /*#__PURE__*/_react["default"].createElement(_designSystem.Dropdown, {
|
|
115
|
+
options: (0, _functions.buildOperatorOptions)(schema[id].fields[property].mysql_type),
|
|
116
|
+
value: operator,
|
|
117
|
+
size: "small",
|
|
118
|
+
label: "Operator",
|
|
119
|
+
name: "".concat(condition.key, "_operator"),
|
|
120
|
+
onChange: function onChange(e) {
|
|
121
|
+
return setOperator(e.target.value);
|
|
122
|
+
}
|
|
123
|
+
}), schema[id].fields[property].mysql_type === 'date' ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
|
|
124
|
+
className: "ds-c-label",
|
|
125
|
+
htmlFor: "".concat(condition.key, "_date_value"),
|
|
126
|
+
id: "".concat(condition.key, "_date_value-label")
|
|
127
|
+
}, /*#__PURE__*/_react["default"].createElement("span", null, "Value")), /*#__PURE__*/_react["default"].createElement(_reactDatepicker["default"], {
|
|
128
|
+
name: "".concat(condition.key, "_date_value"),
|
|
129
|
+
selected: (0, _functions.convertUTCToLocalDate)(startDate),
|
|
130
|
+
onChange: function onChange(date) {
|
|
131
|
+
setStartDate(date);
|
|
132
|
+
setValue(date.toJSON().slice(0, 10));
|
|
133
|
+
},
|
|
134
|
+
showMonthDropdown: true,
|
|
135
|
+
showYearDropdown: true,
|
|
136
|
+
dropdownMode: "select",
|
|
137
|
+
className: "ds-c-field",
|
|
138
|
+
withPortal: true // popperPlacement="top-end"
|
|
139
|
+
// popperModifiers={[
|
|
140
|
+
// {
|
|
141
|
+
// name: 'preventOverflow',
|
|
142
|
+
// options: {
|
|
143
|
+
// rootBoundary: 'viewport',
|
|
144
|
+
// // tether: true,
|
|
145
|
+
// altAxis: true,
|
|
146
|
+
// },
|
|
147
|
+
// },
|
|
148
|
+
// ]}
|
|
149
|
+
|
|
150
|
+
})) : /*#__PURE__*/_react["default"].createElement(_designSystem.TextField, {
|
|
151
|
+
label: "Value",
|
|
152
|
+
name: "".concat(condition.key, "_value"),
|
|
153
|
+
value: (0, _functions.cleanText)(value, operator),
|
|
154
|
+
onChange: function onChange(e) {
|
|
155
|
+
return setValue(e.target.value);
|
|
156
|
+
}
|
|
157
|
+
}), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
|
|
158
|
+
variation: md ? 'transparent' : null,
|
|
159
|
+
size: "small",
|
|
160
|
+
className: "ds-u-margin-top--3",
|
|
161
|
+
"aria-label": "Delete filter",
|
|
162
|
+
onClick: function onClick() {
|
|
163
|
+
return remove(index);
|
|
164
|
+
}
|
|
165
|
+
}, !md ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Delete filter") : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_close["default"], null), ' ')));
|
|
166
|
+
};
|
|
167
|
+
|
|
168
|
+
var _default = QueryRow;
|
|
169
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var _designSystem = require("@cmsgov/design-system");
|
|
13
|
+
|
|
14
|
+
var _functions = require("./functions");
|
|
15
|
+
|
|
16
|
+
var QueryTitle = function QueryTitle(_ref) {
|
|
17
|
+
var conditions = _ref.conditions,
|
|
18
|
+
schema = _ref.schema,
|
|
19
|
+
customColumns = _ref.customColumns;
|
|
20
|
+
var fields = schema.fields;
|
|
21
|
+
|
|
22
|
+
if (!conditions.length) {
|
|
23
|
+
return 'Add a filter';
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function formatValue(text, property) {
|
|
27
|
+
if (customColumns.length > 0) {
|
|
28
|
+
var newValue = text;
|
|
29
|
+
var customColumn = customColumns.find(function (c) {
|
|
30
|
+
return c.accessor === property;
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
if (customColumn && customColumn.Cell) {
|
|
34
|
+
return customColumn.Cell({
|
|
35
|
+
value: text
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
return text;
|
|
40
|
+
} else {
|
|
41
|
+
return text;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
function buildTitle() {
|
|
46
|
+
var newTitle = conditions.map(function (c) {
|
|
47
|
+
var field = fields[c.property];
|
|
48
|
+
var description = field && field.description ? field.description : c.property;
|
|
49
|
+
|
|
50
|
+
var operator = _functions.operatorMapping.find(function (op) {
|
|
51
|
+
return op.value === c.operator;
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
return "".concat(description, " ").concat(operator.label, " ").concat((0, _functions.cleanText)(c.value));
|
|
55
|
+
});
|
|
56
|
+
return newTitle.join(' AND ');
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, conditions.map(function (c) {
|
|
60
|
+
var field = fields[c.property];
|
|
61
|
+
var description = field && field.description ? field.description : c.property;
|
|
62
|
+
|
|
63
|
+
var operator = _functions.operatorMapping.find(function (op) {
|
|
64
|
+
return op.value === c.operator;
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
var cleanedText = (0, _functions.cleanText)(c.value);
|
|
68
|
+
var formattedText = formatValue(cleanedText, c.property);
|
|
69
|
+
return /*#__PURE__*/_react["default"].createElement("span", {
|
|
70
|
+
className: "ds-u-fill--background ds-u-padding--1 ds-u-margin-y--1 ds-u-display--inline-block ds-u-font-weight--semibold"
|
|
71
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
72
|
+
className: "ds-u-font-weight--bold"
|
|
73
|
+
}, description), ' ', /*#__PURE__*/_react["default"].createElement("span", {
|
|
74
|
+
className: "ds-u-font-weight--normal"
|
|
75
|
+
}, operator.label.toUpperCase()), ' ', /*#__PURE__*/_react["default"].createElement("span", {
|
|
76
|
+
className: "ds-u-color--success"
|
|
77
|
+
}, formattedText));
|
|
78
|
+
}).reduce(function (prev, curr) {
|
|
79
|
+
return [prev, /*#__PURE__*/_react["default"].createElement(_designSystem.Badge, {
|
|
80
|
+
className: "ds-u-margin-x--1",
|
|
81
|
+
variation: "info"
|
|
82
|
+
}, "AND"), curr];
|
|
83
|
+
}));
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
var _default = QueryTitle;
|
|
87
|
+
exports["default"] = _default;
|
|
@@ -6,6 +6,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.buildCustomColHeaders = buildCustomColHeaders;
|
|
9
|
+
exports.buildOperatorOptions = buildOperatorOptions;
|
|
10
|
+
exports.cleanText = cleanText;
|
|
11
|
+
exports.convertUTCToLocalDate = convertUTCToLocalDate;
|
|
12
|
+
exports.operatorMapping = void 0;
|
|
9
13
|
|
|
10
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
15
|
|
|
@@ -31,4 +35,97 @@ function buildCustomColHeaders(customHeaders, columns, schema) {
|
|
|
31
35
|
accessor: column
|
|
32
36
|
};
|
|
33
37
|
});
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
function convertUTCToLocalDate(date) {
|
|
41
|
+
if (!date) {
|
|
42
|
+
return date;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
date = new Date(date);
|
|
46
|
+
date = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
|
|
47
|
+
return date;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
function cleanText(value, operator) {
|
|
51
|
+
var newValue = value;
|
|
52
|
+
|
|
53
|
+
if (Array.isArray(newValue)) {
|
|
54
|
+
newValue = newValue.join(',');
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
return newValue.replace(/(^\%+|\%+$)/gm, '');
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
var operatorMapping = [{
|
|
61
|
+
label: 'Is',
|
|
62
|
+
value: '='
|
|
63
|
+
}, {
|
|
64
|
+
label: 'Contains',
|
|
65
|
+
value: 'like'
|
|
66
|
+
}, {
|
|
67
|
+
label: 'Is Not',
|
|
68
|
+
value: '<>'
|
|
69
|
+
}, {
|
|
70
|
+
label: 'Or',
|
|
71
|
+
value: 'in'
|
|
72
|
+
}, {
|
|
73
|
+
label: 'Is',
|
|
74
|
+
value: '='
|
|
75
|
+
}, {
|
|
76
|
+
label: 'Is Not',
|
|
77
|
+
value: '<>'
|
|
78
|
+
}, {
|
|
79
|
+
label: 'Greater Than',
|
|
80
|
+
value: '>'
|
|
81
|
+
}, {
|
|
82
|
+
label: 'Less Than',
|
|
83
|
+
value: '<'
|
|
84
|
+
}];
|
|
85
|
+
exports.operatorMapping = operatorMapping;
|
|
86
|
+
|
|
87
|
+
function buildOperatorOptions(type) {
|
|
88
|
+
switch (type) {
|
|
89
|
+
case 'text': // Will change from text to string in future update
|
|
90
|
+
|
|
91
|
+
case 'string':
|
|
92
|
+
return [{
|
|
93
|
+
label: 'Is',
|
|
94
|
+
value: '='
|
|
95
|
+
}, {
|
|
96
|
+
label: 'Contains',
|
|
97
|
+
value: 'like'
|
|
98
|
+
}, {
|
|
99
|
+
label: 'Is Not',
|
|
100
|
+
value: '<>'
|
|
101
|
+
}, {
|
|
102
|
+
label: 'Or',
|
|
103
|
+
value: 'in'
|
|
104
|
+
}];
|
|
105
|
+
|
|
106
|
+
case 'date':
|
|
107
|
+
return [{
|
|
108
|
+
label: 'Is',
|
|
109
|
+
value: '='
|
|
110
|
+
}, {
|
|
111
|
+
label: 'Is Not',
|
|
112
|
+
value: '<>'
|
|
113
|
+
}, {
|
|
114
|
+
label: 'Greater Than',
|
|
115
|
+
value: '>'
|
|
116
|
+
}, {
|
|
117
|
+
label: 'Less Than',
|
|
118
|
+
value: '<'
|
|
119
|
+
}];
|
|
120
|
+
|
|
121
|
+
default:
|
|
122
|
+
// These 2 should be safe for all data types
|
|
123
|
+
return [{
|
|
124
|
+
label: 'Is',
|
|
125
|
+
value: '='
|
|
126
|
+
}, {
|
|
127
|
+
label: 'Is Not',
|
|
128
|
+
value: '<>'
|
|
129
|
+
}];
|
|
130
|
+
}
|
|
34
131
|
}
|
|
@@ -21,6 +21,7 @@ var _CMSGovLogoO = _interopRequireDefault(require("../../assets/images/CMSGovLog
|
|
|
21
21
|
|
|
22
22
|
var Header = function Header(_ref) {
|
|
23
23
|
var siteName = _ref.siteName,
|
|
24
|
+
headerClasses = _ref.headerClasses,
|
|
24
25
|
linkClasses = _ref.linkClasses,
|
|
25
26
|
links = _ref.links,
|
|
26
27
|
org = _ref.org,
|
|
@@ -34,8 +35,9 @@ var Header = function Header(_ref) {
|
|
|
34
35
|
logo = org.logo,
|
|
35
36
|
urlTitle = org.urlTitle,
|
|
36
37
|
logoAltText = org.logoAltText;
|
|
38
|
+
var headerClassString = headerClasses !== null && headerClasses !== void 0 ? headerClasses : 'dc-c-header ds-base';
|
|
37
39
|
return /*#__PURE__*/_react["default"].createElement("header", {
|
|
38
|
-
className:
|
|
40
|
+
className: headerClassString,
|
|
39
41
|
"aria-label": "Site header"
|
|
40
42
|
}, includeTopNav && /*#__PURE__*/_react["default"].createElement("div", {
|
|
41
43
|
className: "dc-c-cmsheader ds-u-display--flex ds-u-padding-x--5 ds-u-align-items--center"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@civicactions/cmsds-open-data-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.12.0-alpha.2",
|
|
4
4
|
"description": "Components for the open data catalog frontend using CMS Design System",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -22,10 +22,12 @@
|
|
|
22
22
|
"@civicactions/data-catalog-components": "2.0.0-beta.5",
|
|
23
23
|
"@civicactions/data-catalog-services": "~1.5.0",
|
|
24
24
|
"@cmsgov/design-system": "~3.3.0",
|
|
25
|
+
"@popperjs/core": "^2.11.4",
|
|
25
26
|
"prop-types": "^15.7.2",
|
|
26
27
|
"qs": "^6.10.1",
|
|
27
28
|
"react-datepicker": "^4.2.1",
|
|
28
|
-
"react-
|
|
29
|
+
"react-popper": "^2.2.5",
|
|
30
|
+
"react-responsive": "^8.2.0",
|
|
29
31
|
"react-table": "^7.6.2",
|
|
30
32
|
"react-text-truncate": "^0.18.0",
|
|
31
33
|
"swagger-ui-react": "^4.1.3"
|
|
@@ -81,8 +83,8 @@
|
|
|
81
83
|
"extends": "react-app"
|
|
82
84
|
},
|
|
83
85
|
"peerDependencies": {
|
|
84
|
-
"react": "
|
|
85
|
-
"react-dom": "
|
|
86
|
+
"react": ">=16.8.0",
|
|
87
|
+
"react-dom": ">=16.8.0"
|
|
86
88
|
},
|
|
87
89
|
"files": [
|
|
88
90
|
"lib",
|