@civicactions/cmsds-open-data-components 1.10.1 → 1.11.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/scss/templates/dataset.scss +5 -3
  2. package/dist/scss/templates/index.scss +1 -0
  3. package/dist/scss/templates/query-builder.scss +15 -0
  4. package/lib/assets/icons/close.js +1 -1
  5. package/lib/assets/icons/close.jsx +1 -1
  6. package/lib/assets/icons/copy.js +35 -0
  7. package/lib/assets/icons/copy.jsx +23 -0
  8. package/lib/assets/icons/download.js +35 -0
  9. package/lib/assets/icons/download.jsx +23 -0
  10. package/lib/assets/icons/settings.js +36 -0
  11. package/lib/assets/icons/settings.jsx +24 -0
  12. package/lib/components/DataTableDensity/index.js +20 -26
  13. package/lib/components/DataTableRowChanger/index.js +15 -16
  14. package/lib/components/ResourceHeader/index.js +97 -17
  15. package/lib/templates/FilteredResource/FilteredResourceBody.js +8 -62
  16. package/lib/templates/FilteredResource/QueryBuilder.js +235 -0
  17. package/lib/templates/FilteredResource/QueryRow.js +166 -0
  18. package/lib/templates/FilteredResource/QueryTitle.js +65 -0
  19. package/lib/templates/FilteredResource/functions.js +97 -0
  20. package/package.json +4 -2
package/dist/scss/templates/dataset.scss CHANGED
@@ -17,15 +17,17 @@
17
17
  }
18
18
 
19
19
  .dc-c-resize-handle {
20
- height: 61px;
21
- background-color: $color-primary-darkest;
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-darker;
31
+ background-color: $color-primary;
30
32
  }
31
33
  }
package/dist/scss/templates/index.scss CHANGED
@@ -4,3 +4,4 @@
4
4
  @import './filtered-resource.scss';
5
5
  @import './dataset.scss';
6
6
  @import './swagger.scss';
7
+ @import './query-builder.scss';
package/dist/scss/templates/query-builder.scss ADDED
@@ -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
+ }
package/lib/assets/icons/close.js CHANGED
@@ -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
- "fill-rule": "nonzero"
30
+ fillRule: "nonzero"
31
31
  })));
32
32
  };
33
33
 
package/lib/assets/icons/close.jsx CHANGED
@@ -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
- fill-rule="nonzero"
19
+ fillRule="nonzero"
20
20
  ></path>
21
21
  </g>
22
22
  </svg>
package/lib/assets/icons/copy.js ADDED
@@ -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;
package/lib/assets/icons/copy.jsx ADDED
@@ -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;
package/lib/assets/icons/download.js ADDED
@@ -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;
package/lib/assets/icons/download.jsx ADDED
@@ -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;
package/lib/assets/icons/settings.js ADDED
@@ -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;
package/lib/assets/icons/settings.jsx ADDED
@@ -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;
package/lib/components/DataTableDensity/index.js CHANGED
@@ -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", null, /*#__PURE__*/_react["default"].createElement("span", null, "Display density:"), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
20
- onClick: function onClick() {
21
- return setTablePadding('ds-u-padding-y--0');
22
- },
23
- size: "small",
24
- variation: "transparent",
25
- className: tablePadding === 'ds-u-padding-y--0' ? 'ds-u-font-weight--bold' : ''
26
- }, /*#__PURE__*/_react["default"].createElement("span", {
27
- className: "ds-u-visibility--screen-reader"
28
- }, "Table padding"), " Tight"), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
29
- onClick: function onClick() {
30
- return setTablePadding('ds-u-padding-y--1');
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
- variation: "transparent",
34
- className: tablePadding === 'ds-u-padding-y--1' ? 'ds-u-font-weight--bold' : ''
35
- }, /*#__PURE__*/_react["default"].createElement("span", {
36
- className: "ds-u-visibility--screen-reader"
37
- }, "Table padding"), " Normal"), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
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 setLimit(e.target.value);
40
38
  },
41
- size: "small",
42
- variation: "transparent",
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 = {
package/lib/components/DataTableRowChanger/index.js CHANGED
@@ -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
- className: "ds-u-text-align--right"
22
- }, /*#__PURE__*/_react["default"].createElement("span", {
23
- className: "ds-u-margin-right--2"
24
- }, "Rows per page:"), rowOptions.map(function (r) {
25
- return /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
26
- key: "buttonFor".concat(r),
27
- onClick: function onClick() {
28
- return setLimit(r);
29
- },
30
- size: "small",
31
- variation: "transparent",
32
- className: "".concat(limit === r ? 'ds-u-font-weight--bold ds-u-border-bottom--2' : '', " ds-u-text-decoration--none ds-u-padding--0 ds-u-margin-right--1")
33
- }, r, " ", /*#__PURE__*/_react["default"].createElement("span", {
34
- className: "ds-u-visibility--screen-reader"
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
 
package/lib/components/ResourceHeader/index.js CHANGED
@@ -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 _react = _interopRequireDefault(require("react"));
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,6 +29,16 @@ 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,
@@ -26,40 +46,100 @@ var ResourceHeader = function ResourceHeader(_ref) {
26
46
  includeFiltered = _ref.includeFiltered,
27
47
  includeDensity = _ref.includeDensity,
28
48
  resource = _ref.resource,
29
- tablePadding = _ref.tablePadding;
49
+ tablePadding = _ref.tablePadding,
50
+ downloadUrl = _ref.downloadUrl;
51
+ var md = (0, _reactResponsive.useMediaQuery)({
52
+ minWidth: 0,
53
+ maxWidth: 768
54
+ });
30
55
  var limit = resource.limit,
31
56
  offset = resource.offset,
32
57
  count = resource.count,
33
58
  setLimit = resource.setLimit,
34
59
  setOffset = resource.setOffset;
35
60
  var intCount = count ? parseInt(count) : 0;
36
- return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
61
+
62
+ var _useState = (0, _react.useState)(null),
63
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
64
+ referenceElement = _useState2[0],
65
+ setReferenceElement = _useState2[1];
66
+
67
+ var _useState3 = (0, _react.useState)(null),
68
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
69
+ popperElement = _useState4[0],
70
+ setPopperElement = _useState4[1];
71
+
72
+ var _useState5 = (0, _react.useState)(null),
73
+ _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
74
+ arrowElement = _useState6[0],
75
+ setArrowElement = _useState6[1];
76
+
77
+ var _usePopper = (0, _reactPopper.usePopper)(referenceElement, popperElement, {
78
+ modifiers: [{
79
+ name: 'arrow',
80
+ options: {
81
+ element: arrowElement
82
+ }
83
+ }]
84
+ }),
85
+ styles = _usePopper.styles,
86
+ attributes = _usePopper.attributes;
87
+
88
+ return /*#__PURE__*/_react["default"].createElement("div", {
89
+ className: "dc-c-resource-header"
90
+ }, /*#__PURE__*/_react["default"].createElement("div", {
37
91
  className: "ds-l-row"
38
92
  }, /*#__PURE__*/_react["default"].createElement("div", {
39
93
  className: "ds-l-col--12"
40
94
  }, includeFiltered && /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
41
95
  className: "ds-c-button ds-c-button--primary",
42
96
  to: "/dataset/".concat(id, "/data")
43
- }, "View and filter data")), includeDensity && /*#__PURE__*/_react["default"].createElement("div", {
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", {
97
+ }, "View and filter data"))), /*#__PURE__*/_react["default"].createElement("div", {
49
98
  className: "ds-l-row ds-u-align-items--center"
50
99
  }, /*#__PURE__*/_react["default"].createElement("div", {
51
- className: "ds-l-col--6"
100
+ className: "ds-l-col--12 ds-u-display--flex ds-u-justify-content--between ds-u-align-items--center"
101
+ }, /*#__PURE__*/_react["default"].createElement("div", {
102
+ className: "ds-u-font-weight--bold"
52
103
  }, /*#__PURE__*/_react["default"].createElement(_dataCatalogComponents.DataTablePageResults, {
53
104
  totalRows: intCount,
54
105
  limit: limit,
55
106
  offset: offset
56
- })), /*#__PURE__*/_react["default"].createElement("div", {
57
- className: "ds-l-col--6"
58
- }, /*#__PURE__*/_react["default"].createElement(_DataTableRowChanger["default"], {
59
- limit: limit,
60
- setLimit: setLimit,
61
- setOffset: setOffset
62
- }))));
107
+ })), /*#__PURE__*/_react["default"].createElement("div", null, !includeFiltered && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
108
+ size: "small",
109
+ className: "ds-u-text-align--left ds-u-font-weight--normal ds-u-font-size--base ds-u-margin-right--1",
110
+ href: downloadUrl,
111
+ "aria-label": "Download filtered data as CSV"
112
+ }, /*#__PURE__*/_react["default"].createElement(_download["default"], null), !md && /*#__PURE__*/_react["default"].createElement("span", {
113
+ className: "ds-u-font-weight--semibold ds-u-margin-left--1"
114
+ }, "Download filtered data (CSV)")), /*#__PURE__*/_react["default"].createElement(_designSystem.Tooltip, {
115
+ onOpen: function onOpen() {
116
+ navigator.clipboard.writeText(window.location.href);
117
+ },
118
+ className: "ds-c-button ds-c-button--small ds-u-text-align--left ds-u-margin-right--1",
119
+ placement: "bottom",
120
+ dialog: true,
121
+ ariaLabel: "Copy link to filtered data",
122
+ title: "Link copied to clipboard"
123
+ }, /*#__PURE__*/_react["default"].createElement(_copy["default"], null), !md && /*#__PURE__*/_react["default"].createElement("span", {
124
+ className: "ds-u-font-weight--semibold ds-u-margin-left--1"
125
+ }, "Copy link to filtered data"))), /*#__PURE__*/_react["default"].createElement(_designSystem.Tooltip, {
126
+ className: "ds-c-button ds-c-button--small ds-u-text-align--left",
127
+ placement: "bottom",
128
+ dialog: true,
129
+ ariaLabel: "Display settings",
130
+ title: /*#__PURE__*/_react["default"].createElement("div", {
131
+ className: "dc-c-display-settings"
132
+ }, /*#__PURE__*/_react["default"].createElement(_DataTableRowChanger["default"], {
133
+ limit: limit,
134
+ setLimit: setLimit,
135
+ setOffset: setOffset
136
+ }), includeDensity && /*#__PURE__*/_react["default"].createElement(_DataTableDensity["default"], {
137
+ setTablePadding: setTablePadding,
138
+ tablePadding: tablePadding
139
+ }))
140
+ }, /*#__PURE__*/_react["default"].createElement(_settings["default"], null), !md && /*#__PURE__*/_react["default"].createElement("span", {
141
+ className: "ds-u-font-weight--semibold ds-u-margin-left--1"
142
+ }, "Display settings"))))));
63
143
  };
64
144
 
65
145
  var _default = ResourceHeader;
package/lib/templates/FilteredResource/FilteredResourceBody.js CHANGED
@@ -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
@@ -111,66 +114,15 @@ var FilteredResourceBody = function FilteredResourceBody(_ref) {
111
114
  dangerouslySetInnerHTML: {
112
115
  __html: distribution.data.description
113
116
  }
114
- }), /*#__PURE__*/_react["default"].createElement("div", {
115
- className: "ds-l-row ds-u-align-items--stretch"
116
- }, /*#__PURE__*/_react["default"].createElement("div", {
117
- className: "ds-l-md-col--4 ds-l-sm-col--12 ds-u-margin-bottom--3"
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
+ }), resource.columns && Object.keys(resource.schema).length ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_ResourceHeader["default"], {
170
121
  includeDensity: true,
171
122
  setTablePadding: setTablePadding,
172
123
  distribution: distribution,
173
124
  resource: resource,
125
+ downloadUrl: downloadUrl,
174
126
  tablePadding: tablePadding
175
127
  }), /*#__PURE__*/_react["default"].createElement(_ResourcePreview["default"], {
176
128
  id: distribution.identifier,
@@ -187,12 +139,6 @@ var FilteredResourceBody = function FilteredResourceBody(_ref) {
187
139
  columnWidths: columnWidths
188
140
  }), /*#__PURE__*/_react["default"].createElement(_ResourceFooter["default"], {
189
141
  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
142
  })) : /*#__PURE__*/_react["default"].createElement(_designSystem.Spinner, {
197
143
  role: "status",
198
144
  "aria-valuetext": "Resource loading"
package/lib/templates/FilteredResource/QueryBuilder.js ADDED
@@ -0,0 +1,235 @@
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
+ var conditions = resource.conditions,
79
+ schema = resource.schema,
80
+ setConditions = resource.setConditions;
81
+ var fields = Object.keys(schema[id].fields);
82
+ var hasConditions = conditions.length > 0;
83
+
84
+ var _useState = (0, _react.useState)(0),
85
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
86
+ queryCount = _useState2[0],
87
+ setQueryCount = _useState2[1];
88
+
89
+ var _useState3 = (0, _react.useState)([]),
90
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
91
+ queryConditions = _useState4[0],
92
+ setQueryConditions = _useState4[1];
93
+
94
+ var _useState5 = (0, _react.useState)([]),
95
+ _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
96
+ titleConditions = _useState6[0],
97
+ setTitleConditions = _useState6[1]; // Add use effect to load conditions on first load if needed
98
+
99
+
100
+ var _useState7 = (0, _react.useState)(false),
101
+ _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
102
+ conditionsChanged = _useState8[0],
103
+ setConditionsChanged = _useState8[1];
104
+
105
+ var addCondition = function addCondition(condition) {
106
+ if (Array.isArray(condition)) {
107
+ var keyedConditions = condition.map(function (oc) {
108
+ return _objectSpread(_objectSpread({}, oc), {}, {
109
+ key: Date.now() + oc.value + oc.property
110
+ });
111
+ });
112
+ setQueryConditions(keyedConditions);
113
+ } else {
114
+ setQueryConditions([].concat((0, _toConsumableArray2["default"])(queryConditions), [{
115
+ property: fields[0],
116
+ value: '',
117
+ operator: (0, _functions.buildOperatorOptions)(schema[id].fields[fields[0]].mysql_type)[0].value,
118
+ key: Date.now()
119
+ }]));
120
+ }
121
+ };
122
+
123
+ _react["default"].useEffect(function () {
124
+ addCondition(conditions);
125
+ setTitleConditions(conditions);
126
+ }, []);
127
+
128
+ var propertyOptions = fields.map(function (f) {
129
+ if (schema[id].fields[f].description) {
130
+ return {
131
+ label: schema[id].fields[f].description,
132
+ value: f
133
+ };
134
+ }
135
+
136
+ return {
137
+ label: f,
138
+ value: f
139
+ };
140
+ });
141
+
142
+ var submitConditions = function submitConditions(e) {
143
+ e.preventDefault();
144
+ var submitConditions = queryConditions.filter(function (oc) {
145
+ if (oc.property) {
146
+ return oc;
147
+ }
148
+
149
+ return false;
150
+ }).map(function (oc) {
151
+ var cond = Object.assign({}, oc);
152
+ return updateQueryForDatastore(cond);
153
+ });
154
+ setConditions(submitConditions);
155
+ setTitleConditions(queryConditions.map(function (oc) {
156
+ return Object.assign({}, oc);
157
+ }));
158
+ setConditionsChanged(false);
159
+ console.log(includeSearchParams);
160
+
161
+ if (includeSearchParams) {
162
+ var url = new URL(window.location);
163
+
164
+ var urlString = _qs["default"].stringify({
165
+ conditions: submitConditions
166
+ }, {
167
+ encodeValuesOnly: true,
168
+ addQueryPrefix: true
169
+ });
170
+
171
+ console.log(urlString);
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
+ }),
201
+ defaultOpen: false
202
+ }, /*#__PURE__*/_react["default"].createElement("form", {
203
+ onSubmit: function onSubmit(e) {
204
+ return submitConditions(e);
205
+ }
206
+ }, /*#__PURE__*/_react["default"].createElement("div", null, queryConditions.map(function (qf, index) {
207
+ return /*#__PURE__*/_react["default"].createElement(_QueryRow["default"], {
208
+ key: qf.key,
209
+ id: id,
210
+ schema: schema,
211
+ condition: qf,
212
+ index: index,
213
+ propertyOptions: propertyOptions,
214
+ update: updateCondition,
215
+ remove: removeCondition
216
+ });
217
+ })), /*#__PURE__*/_react["default"].createElement("div", {
218
+ className: "dc-query-bulder--form-buttons ds-u-padding-y--2"
219
+ }, /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
220
+ variation: "transparent",
221
+ onClick: function onClick() {
222
+ return addCondition(null);
223
+ }
224
+ }, "+ Add filter"), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
225
+ disabled: !conditionsChanged,
226
+ className: "ds-u-float--right",
227
+ type: "submit"
228
+ }, "Apply filters"))))));
229
+ };
230
+
231
+ QueryBuilder.defaultProps = {
232
+ includeSearchParams: true
233
+ };
234
+ var _default = QueryBuilder;
235
+ exports["default"] = _default;
package/lib/templates/FilteredResource/QueryRow.js ADDED
@@ -0,0 +1,166 @@
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
+ popperPlacement: "top-end",
139
+ popperModifiers: [{
140
+ name: 'preventOverflow',
141
+ options: {
142
+ rootBoundary: 'viewport',
143
+ // tether: true,
144
+ altAxis: true
145
+ }
146
+ }]
147
+ })) : /*#__PURE__*/_react["default"].createElement(_designSystem.TextField, {
148
+ label: "Value",
149
+ name: "".concat(condition.key, "_value"),
150
+ value: value,
151
+ onChange: function onChange(e) {
152
+ return setValue(e.target.value);
153
+ }
154
+ }), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
155
+ variation: md ? 'transparent' : null,
156
+ size: "small",
157
+ className: "ds-u-margin-top--3",
158
+ "aria-label": "Delete filter",
159
+ onClick: function onClick() {
160
+ return remove(index);
161
+ }
162
+ }, !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), ' ')));
163
+ };
164
+
165
+ var _default = QueryRow;
166
+ exports["default"] = _default;
package/lib/templates/FilteredResource/QueryTitle.js ADDED
@@ -0,0 +1,65 @@
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
+ var fields = schema.fields;
20
+
21
+ if (!conditions.length) {
22
+ return 'Add a filter';
23
+ }
24
+
25
+ function buildTitle() {
26
+ var newTitle = conditions.map(function (c) {
27
+ var field = fields[c.property];
28
+ var description = field && field.description ? field.description : c.property;
29
+
30
+ var operator = _functions.operatorMapping.find(function (op) {
31
+ return op.value === c.operator;
32
+ });
33
+
34
+ return "".concat(description, " ").concat(operator.label, " ").concat((0, _functions.cleanText)(c.value));
35
+ });
36
+ return newTitle.join(' AND ');
37
+ }
38
+
39
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, conditions.map(function (c) {
40
+ var field = fields[c.property];
41
+ var description = field && field.description ? field.description : c.property;
42
+
43
+ var operator = _functions.operatorMapping.find(function (op) {
44
+ return op.value === c.operator;
45
+ });
46
+
47
+ return /*#__PURE__*/_react["default"].createElement("span", {
48
+ className: "ds-u-fill--background ds-u-padding--1 ds-u-margin-y--1 ds-u-display--inline-block ds-u-font-weight--semibold"
49
+ }, /*#__PURE__*/_react["default"].createElement("span", {
50
+ className: "ds-u-font-weight--bold"
51
+ }, description), ' ', /*#__PURE__*/_react["default"].createElement("span", {
52
+ className: "ds-u-font-weight--normal"
53
+ }, operator.label.toUpperCase()), ' ', /*#__PURE__*/_react["default"].createElement("span", {
54
+ className: "ds-u-color--success"
55
+ }, (0, _functions.cleanText)(c.value)));
56
+ }).reduce(function (prev, curr) {
57
+ return [prev, /*#__PURE__*/_react["default"].createElement(_designSystem.Badge, {
58
+ className: "ds-u-margin-x--1",
59
+ variation: "info"
60
+ }, "AND"), curr];
61
+ }));
62
+ };
63
+
64
+ var _default = QueryTitle;
65
+ exports["default"] = _default;
package/lib/templates/FilteredResource/functions.js CHANGED
@@ -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
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@civicactions/cmsds-open-data-components",
3
- "version": "1.10.1",
3
+ "version": "1.11.0-alpha.1",
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.4",
23
23
  "@civicactions/data-catalog-services": "1.4.0",
24
24
  "@cmsgov/design-system": "~2.6.1",
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-router-dom": "^6.2.2",
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"