@bento-core/query-bar 1.0.0-c3dc.6 → 1.0.0-c3dc.7

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 (5) hide show
  1. package/dist/generators/QueryBarGenerator.js +53 -19
  2. package/dist/generators/styles.js +6 -0
  3. package/package.json +1 -1
  4. package/src/generators/QueryBarGenerator.js +98 -51
  5. package/src/generators/styles.js +6 -0
package/dist/generators/QueryBarGenerator.js CHANGED
@@ -96,26 +96,60 @@ const QueryBarGenerator = function QueryBarGenerator() {
96
96
  className: classes.divider
97
97
  }), /*#__PURE__*/_react.default.createElement("span", {
98
98
  className: classes.queryContainer
99
- }, autocomplete.length || upload.length ? /*#__PURE__*/_react.default.createElement("span", null, upload.length && !autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", {
100
- className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFindBackground),
101
- onClick: clearUpload
102
- }, "INPUT PARTICIPANT SET") : null, autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
103
- className: (0, _clsx.default)(classes.filterName, classes.localFindBackground),
104
- onClick: clearAutocomplete
105
- }, "Participant ID"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
99
+ }, (autocomplete.length || upload.length) > 0 && /*#__PURE__*/_react.default.createElement("span", null, (() => {
100
+ const participantItems = autocomplete.filter(i => i.type === 'participantIds');
101
+ const participantCount = upload.length + participantItems.length;
102
+ if (upload.length > 0 && participantItems.length === 0) {
103
+ // Only upload, no participant autocomplete
104
+ return /*#__PURE__*/_react.default.createElement("span", {
105
+ className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFindBackground),
106
+ onClick: clearUpload
107
+ }, "INPUT PARTICIPANT SET");
108
+ }
109
+ if (participantCount > 0) {
110
+ const operator = participantCount === 1 ? 'IS' : 'IN';
111
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
112
+ className: (0, _clsx.default)(classes.filterName, classes.localFindBackground),
113
+ onClick: clearAutocomplete
114
+ }, "Participant ID"), /*#__PURE__*/_react.default.createElement("span", {
115
+ className: classes.operators
116
+ }, operator), operator === 'IN' && /*#__PURE__*/_react.default.createElement("span", {
117
+ className: classes.bracketsOpen
118
+ }, "("), upload.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
119
+ className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFind),
120
+ onClick: clearUpload
121
+ }, "INPUT PARTICIPANT SET")), participantItems.slice(0, maxItems).map((d, idx, arr) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
122
+ key: "pid-".concat(idx)
123
+ }, /*#__PURE__*/_react.default.createElement("span", {
124
+ className: (0, _clsx.default)(classes.filterCheckboxes, classes.facetSectionCases),
125
+ onClick: () => deleteAutocompleteItem(d.title)
126
+ }, d.title), idx < arr.length - 1 && ' ')), participantItems.length > maxItems && '...', operator === 'IN' && /*#__PURE__*/_react.default.createElement("span", {
127
+ className: classes.bracketsClose
128
+ }, ")"));
129
+ }
130
+ return null;
131
+ })(), (upload.length > 0 || autocomplete.some(i => i.type === 'participantIds')) && autocomplete.some(i => i.type === 'associatedIds') && /*#__PURE__*/_react.default.createElement("span", {
106
132
  className: classes.operators
107
- }, autocomplete.length === 1 && !upload.length ? 'IS ' : 'IN ')) : null, /*#__PURE__*/_react.default.createElement("span", null, (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
108
- className: classes.bracketsOpen
109
- }, "(") : null, upload.length && autocomplete.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ' ', /*#__PURE__*/_react.default.createElement("span", {
110
- className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFind),
111
- onClick: clearUpload
112
- }, "INPUT PARTICIPANT SET"), ' ') : null, autocomplete.slice(0, maxItems).map((d, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
113
- className: (0, _clsx.default)(classes.filterCheckboxes, classes.facetSectionCases),
114
- key: idx,
115
- onClick: () => deleteAutocompleteItem(d.title)
116
- }, d.title), idx === maxItems - 1 ? null : ' ')), autocomplete.length > maxItems && '...', (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
117
- className: classes.bracketsClose
118
- }, ")") : null)) : null, (autocomplete.length || upload.length) && mappedInputs.length ? /*#__PURE__*/_react.default.createElement("span", {
133
+ }, "OR"), (() => {
134
+ const associatedItems = autocomplete.filter(i => i.type === 'associatedIds');
135
+ if (associatedItems.length === 0) return null;
136
+ const operator = associatedItems.length === 1 ? 'IS' : 'IN';
137
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
138
+ className: (0, _clsx.default)(classes.filterName, classes.localFindAssociatedIdsBackground),
139
+ onClick: clearAutocomplete
140
+ }, "Synonym"), /*#__PURE__*/_react.default.createElement("span", {
141
+ className: classes.operators
142
+ }, operator), operator === 'IN' && /*#__PURE__*/_react.default.createElement("span", {
143
+ className: classes.bracketsOpen
144
+ }, "("), associatedItems.slice(0, maxItems).map((d, idx, arr) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
145
+ key: "aid-".concat(idx)
146
+ }, /*#__PURE__*/_react.default.createElement("span", {
147
+ className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFindAssociatedIdsText),
148
+ onClick: () => deleteAutocompleteItem(d.title)
149
+ }, d.synonym), idx < arr.length - 1 && ' ')), associatedItems.length > maxItems && '...', operator === 'IN' && /*#__PURE__*/_react.default.createElement("span", {
150
+ className: classes.bracketsClose
151
+ }, ")"));
152
+ })()), (autocomplete.length || upload.length) && mappedInputs.length ? /*#__PURE__*/_react.default.createElement("span", {
119
153
  className: classes.operators
120
154
  }, " AND ") : null, mappedInputs.map((filter, index) => /*#__PURE__*/_react.default.createElement(_FilterMap.Filter, {
121
155
  index: index,
package/dist/generators/styles.js CHANGED
@@ -152,6 +152,12 @@ var _default = () => ({
152
152
  facetSectionLibraryBackground: {
153
153
  backgroundColor: '#DDEAE540',
154
154
  border: '1px solid #646464'
155
+ },
156
+ localFindAssociatedIdsBackground: {
157
+ backgroundColor: '#F6A700'
158
+ },
159
+ localFindAssociatedIdsText: {
160
+ color: '#B36B00'
155
161
  }
156
162
  });
157
163
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bento-core/query-bar",
3
- "version": "1.0.0-c3dc.6",
3
+ "version": "1.0.0-c3dc.7",
4
4
  "description": "This package provides the Query Bar component that displays the current Facet Search and Local Find filters on the Dashboard/Explore page. It also provides the direct ability to reset all or some of the filters with the click of a button. It is designed to be implemented directly with the:",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/generators/QueryBarGenerator.js CHANGED
@@ -107,70 +107,117 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
107
107
  <span className={classes.queryContainer}>
108
108
  {/* Local Find Selections */}
109
109
  {/* TODO: Refactor this into a separate component */}
110
- {(autocomplete.length || upload.length) ? (
111
- <span>
112
- {/* Standalone case set button */}
113
- {(upload.length && !autocomplete.length)
114
- ? (
110
+ {/* Section: Localfind Results */}
111
+ {(autocomplete.length || upload.length) > 0 && (
112
+ <span>
113
+ {/* Participant ID Section */}
114
+ {(() => {
115
+ const participantItems = autocomplete.filter((i) => i.type === 'participantIds');
116
+ const participantCount = upload.length + participantItems.length;
117
+
118
+ if (upload.length > 0 && participantItems.length === 0) {
119
+ // Only upload, no participant autocomplete
120
+ return (
115
121
  <span
116
122
  className={clsx(classes.filterCheckboxes, classes.localFindBackground)}
117
123
  onClick={clearUpload}
118
124
  >
119
125
  INPUT PARTICIPANT SET
120
126
  </span>
121
- ) : null}
122
- {autocomplete.length
123
- ? (
124
- <span>
125
- {' '}
127
+ );
128
+ }
129
+
130
+ if (participantCount > 0) {
131
+ const operator = participantCount === 1 ? 'IS' : 'IN';
132
+
133
+ return (
134
+ <>
126
135
  <span
127
136
  className={clsx(classes.filterName, classes.localFindBackground)}
128
137
  onClick={clearAutocomplete}
129
138
  >
130
139
  Participant ID
131
140
  </span>
132
- {' '}
133
- {' '}
134
- <span className={classes.operators}>
135
- {(autocomplete.length === 1 && !upload.length) ? 'IS ' : 'IN '}
136
- </span>
137
- </span>
138
- ) : null}
139
- <span>
140
- {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
141
- ? <span className={classes.bracketsOpen}>(</span>
142
- : null}
143
- {upload.length && autocomplete.length ? (
144
- <>
145
- {' '}
146
- <span
147
- className={clsx(classes.filterCheckboxes, classes.localFind)}
148
- onClick={clearUpload}
149
- >
150
- INPUT PARTICIPANT SET
151
- </span>
152
- {' '}
153
- </>
154
- ) : null}
155
- {autocomplete.slice(0, maxItems).map((d, idx) => (
156
- <>
157
- <span
158
- className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
159
- key={idx}
160
- onClick={() => deleteAutocompleteItem(d.title)}
161
- >
162
- {d.title}
163
- </span>
164
- {idx === (maxItems - 1) ? null : ' '}
141
+ <span className={classes.operators}>{operator}</span>
142
+
143
+ {operator === 'IN' && <span className={classes.bracketsOpen}>(</span>}
144
+
145
+ {upload.length > 0 && (
146
+ <>
147
+ <span
148
+ className={clsx(classes.filterCheckboxes, classes.localFind)}
149
+ onClick={clearUpload}
150
+ >
151
+ INPUT PARTICIPANT SET
152
+ </span>
153
+ </>
154
+ )}
155
+
156
+ {participantItems.slice(0, maxItems).map((d, idx, arr) => (
157
+ <React.Fragment key={`pid-${idx}`}>
158
+ <span
159
+ className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
160
+ onClick={() => deleteAutocompleteItem(d.title)}
161
+ >
162
+ {d.title}
163
+ </span>
164
+ {idx < arr.length - 1 && ' '}
165
+ </React.Fragment>
166
+ ))}
167
+ {participantItems.length > maxItems && '...'}
168
+ {operator === 'IN' && <span className={classes.bracketsClose}>)</span>}
165
169
  </>
166
- ))}
167
- {autocomplete.length > maxItems && '...'}
168
- {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
169
- ? <span className={classes.bracketsClose}>)</span>
170
- : null}
171
- </span>
172
- </span>
173
- ) : null}
170
+ );
171
+ }
172
+
173
+ return null;
174
+ })()}
175
+
176
+ {/* 'or' logic */}
177
+ {(upload.length > 0 || autocomplete.some((i) => i.type === 'participantIds'))
178
+ && autocomplete.some((i) => i.type === 'associatedIds')
179
+ && (<span className={classes.operators}>OR</span>)}
180
+
181
+ {/* Associated ID Section */}
182
+ {(() => {
183
+ const associatedItems = autocomplete.filter((i) => i.type === 'associatedIds');
184
+ if (associatedItems.length === 0) return null;
185
+
186
+ const operator = associatedItems.length === 1 ? 'IS' : 'IN';
187
+
188
+ return (
189
+ <>
190
+ <span
191
+ className={clsx(classes.filterName, classes.localFindAssociatedIdsBackground)}
192
+ onClick={clearAutocomplete}
193
+ >
194
+ Synonym
195
+ </span>
196
+ <span className={classes.operators}>{operator}</span>
197
+ {operator === 'IN' && <span className={classes.bracketsOpen}>(</span>}
198
+
199
+ {associatedItems.slice(0, maxItems).map((d, idx, arr) => (
200
+ <React.Fragment key={`aid-${idx}`}>
201
+ <span
202
+ className={
203
+ clsx(classes.filterCheckboxes, classes.localFindAssociatedIdsText)
204
+ }
205
+ onClick={() => deleteAutocompleteItem(d.title)}
206
+ >
207
+ {d.synonym}
208
+ </span>
209
+ {idx < arr.length - 1 && ' '}
210
+ </React.Fragment>
211
+ ))}
212
+ {associatedItems.length > maxItems && '...'}
213
+ {operator === 'IN' && <span className={classes.bracketsClose}>)</span>}
214
+ </>
215
+ );
216
+ })()}
217
+ </span>
218
+ )}
219
+
220
+ {/* --------------------- */}
174
221
 
175
222
  {/* Facet Sidebar Selections */}
176
223
  {((autocomplete.length || upload.length) && mappedInputs.length)
package/src/generators/styles.js CHANGED
@@ -147,4 +147,10 @@ export default () => ({
147
147
  backgroundColor: '#DDEAE540',
148
148
  border: '1px solid #646464',
149
149
  },
150
+ localFindAssociatedIdsBackground: {
151
+ backgroundColor: '#F6A700',
152
+ },
153
+ localFindAssociatedIdsText: {
154
+ color: '#B36B00',
155
+ },
150
156
  });