Skip to content

Commit f196172

Browse files
Francesca-BitFrancesca-Bit
committed
change advancedserch style
1 parent c36e1a5 commit f196172

File tree

7 files changed

+343
-46
lines changed

7 files changed

+343
-46
lines changed

‎packages/tdb-dashboard/src/App.css‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1341,3 +1341,149 @@ button.graphiql-tab-add>svg
13411341
--bs-accordion-bg: #303030 !important;
13421342
}
13431343

1344+
1345+
1346+
.rule--header >button,
1347+
.group--actions >button{
1348+
white-space: nowrap;
1349+
margin-right: 5px;
1350+
--bs-btn-color: #fff;
1351+
--bs-btn-bg: #375a7f;
1352+
--bs-btn-border-color: #375a7f;
1353+
--bs-btn-hover-color: #fff;
1354+
--bs-btn-hover-bg: #2f4d6c;
1355+
--bs-btn-hover-border-color: #2c4866;
1356+
--bs-btn-focus-shadow-rgb: 85, 115, 146;
1357+
--bs-btn-active-color: #fff;
1358+
--bs-btn-active-bg: #2c4866;
1359+
--bs-btn-active-border-color: #29445f;
1360+
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
1361+
--bs-btn-disabled-color: #fff;
1362+
--bs-btn-disabled-bg: #375a7f;
1363+
--bs-btn-disabled-border-color: #375a7f;
1364+
--bs-btn-padding-x: 0.75rem;
1365+
--bs-btn-padding-y: 0.375rem;
1366+
--bs-btn-font-family: ;
1367+
--bs-btn-font-size: 1rem;
1368+
--bs-btn-font-weight: 400;
1369+
--bs-btn-line-height: 1.5;
1370+
--bs-btn-border-width: 1px;
1371+
--bs-btn-border-radius: 0.375rem;
1372+
--bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
1373+
--bs-btn-disabled-opacity: 0.65;
1374+
--bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
1375+
display: inline-block;
1376+
padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
1377+
font-family: var(--bs-btn-font-family);
1378+
font-size: var(--bs-btn-font-size);
1379+
font-weight: var(--bs-btn-font-weight);
1380+
line-height: var(--bs-btn-line-height);
1381+
color: var(--bs-btn-color);
1382+
text-align: center;
1383+
text-decoration: none;
1384+
vertical-align: middle;
1385+
cursor: pointer;
1386+
-webkit-user-select: none;
1387+
-moz-user-select: none;
1388+
user-select: none;
1389+
border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
1390+
border-radius: var(--bs-btn-border-radius);
1391+
background-color: var(--bs-btn-bg);
1392+
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
1393+
}
1394+
1395+
.group--actions >button:before{
1396+
content: "+";
1397+
padding-right: 4px;
1398+
}
1399+
1400+
.rule--header >button:last-of-type{
1401+
background-color: #e74c3c;
1402+
}
1403+
1404+
.group--actions >button:nth-of-type(3n):before{
1405+
content: "";
1406+
padding-right: 0px;
1407+
}
1408+
1409+
.group--actions >button:nth-of-type(3n){
1410+
background-color: #e74c3c;
1411+
}
1412+
1413+
.group--conjunctions >input + label {
1414+
cursor: pointer;
1415+
--bs-btn-color: #fff;
1416+
--bs-btn-bg: #444;
1417+
--bs-btn-border-color: #444;
1418+
--bs-btn-hover-color: #fff;
1419+
--bs-btn-hover-bg: #3a3a3a;
1420+
--bs-btn-hover-border-color: #363636;
1421+
--bs-btn-focus-shadow-rgb: 96, 96, 96;
1422+
--bs-btn-active-color: #fff;
1423+
--bs-btn-active-bg: #363636;
1424+
--bs-btn-active-border-color: #333333;
1425+
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
1426+
--bs-btn-disabled-color: #fff;
1427+
--bs-btn-disabled-bg: #444;
1428+
--bs-btn-disabled-border-color: #444;
1429+
padding: 0.25rem 0.5rem;
1430+
font-size: .875rem;
1431+
line-height: 1.5;
1432+
display: inline-block;
1433+
font-family: var(--bs-btn-font-family);
1434+
font-size: var(--bs-btn-font-size);
1435+
font-weight: var(--bs-btn-font-weight);
1436+
line-height: var(--bs-btn-line-height);
1437+
color: var(--bs-btn-color);
1438+
text-align: center;
1439+
text-decoration: none;
1440+
vertical-align: middle;
1441+
cursor: pointer;
1442+
-webkit-user-select: none;
1443+
-moz-user-select: none;
1444+
user-select: none;
1445+
background-color: var(--bs-btn-bg);
1446+
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
1447+
1448+
}
1449+
1450+
.group--conjunctions> input[type='checkbox']:checked + label {
1451+
background: #e74c3c;
1452+
}
1453+
1454+
.group--conjunctions> input[type='radio']:checked + label {
1455+
background: #375a7f;
1456+
}
1457+
1458+
.group--conjunctions> input:checked{
1459+
display: none;
1460+
}
1461+
1462+
.group--conjunctions> input{
1463+
display: none;
1464+
}
1465+
.group--field> select,
1466+
.widget--widget >select,
1467+
.rule--operator > select,
1468+
.rule--field > select {
1469+
font-size: .875rem;
1470+
line-height: 1.5;
1471+
font-family: var(--bs-btn-font-family);
1472+
font-weight: var(--bs-btn-font-weight);
1473+
line-height: var(--bs-btn-line-height);
1474+
text-align: center;
1475+
min-width: 200px;
1476+
line-height: 1.5!important;
1477+
min-height: 40px!important;
1478+
color: #000;
1479+
background-color: #acb5bd;
1480+
border-radius: 5px;
1481+
}
1482+
.qb-drag-handler .group--drag-handler{
1483+
display:none
1484+
}
1485+
1486+
.widget--widget >input{
1487+
padding: 10px;
1488+
color: white !important;
1489+
}

‎packages/tdb-dashboard/src/pages/GraphIqlEditor.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export function GraphIqlEditor({}) {
2626
<Layout mainClassName={layoutClass} showLeftSideBar={false}>
2727
<GraphiQL
2828
editorTheme="shadowfox"
29+
defaultQuery={'{}'}
2930
fetcher={fetcher}
3031

3132
/>

‎packages/tdb-documents-ui-template/docs/NewDocumentComponent.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ Install the dependancy from npm
1313
| props |description |
1414
|--|--|
1515
|type|the document type
16+
|documentJson| the document object, it start empty ({}) for new
1617
|createDocument|A function which acts as a callback when the `submit` button is clicked
1718
|frames|The database Class Frame, or object of all class frames
1819
|closeButtonClick|A function which acts as a callback when the panel exit `x` button is clicked

‎packages/tdb-documents-ui-template/src/NewDocumentComponent.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {ToggleJsonAndFormControl} from "./components/ToggleJsonAndFormControl"
99
import {ViewDocumentFrames} from "./components/ViewDocumentFrames"
1010
import { LanguageSelectComponent } from "./components/SelectLanguageComponent"
1111

12-
//onSelect={<SearchComponent/>}
1312
export const NewDocumentComponent = ({type,createDocument,documentJson,frames,closeButtonClick,SearchComponent}) => {
1413
const [view, setView] = useState(CONST.FORM_VIEW)
1514
const [showFrames, setShowFrames] = useState(false)

‎packages/tdb-documents-ui-template/src/components/DocumentsGraphqlTable.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,10 +109,11 @@ export const DocumentsGraphqlTable = ({gqlQuery,apolloClient,tableConfig, type,
109109
tableConfigObj.rowClick = onRowClickCall
110110
}
111111

112-
const errorMessage = error && typeof error === "object" ? JSON.stringify(error, null, 4) : error
112+
const errorMessage = error && typeof error === "object" ? JSON.stringify(error, null, 2) : error
113113

114114
return <div>
115-
{error && <Alert onClose={() => setError(false)} dismissible className="text-break" variant="danger"> GraphQL query error <pre>{errorMessage}</pre> </Alert>}
115+
{error && <Alert onClose={() => setError(false)} dismissible className="text-break" variant="danger">
116+
GraphQL query error <div className="text-wrap">{errorMessage}</div> </Alert>}
116117
{advSearchFields &&
117118
<Accordion className="mb-4">
118119
<Accordion.Item eventKey="0">

‎packages/tdb-react-table/src/AdvancedSearch.js‎

Lines changed: 46 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
import React, {useState} from 'react';
2-
import { Query, Builder, Utils as QbUtils } from '@react-awesome-query-builder/ui';
3-
import {BootstrapConfig} from '@react-awesome-query-builder/bootstrap'
4-
import "bootstrap/dist/css/bootstrap.css";
5-
import '@react-awesome-query-builder/bootstrap/css/styles.css';
2+
import { BasicConfig,Query, Builder, Utils as QbUtils } from '@react-awesome-query-builder/ui';
3+
//import {BootstrapConfig} from '@react-awesome-query-builder/bootstrap'
4+
import '@react-awesome-query-builder/ui/css/styles.css';
5+
//import "bootstrap/dist/css/bootstrap.css";
6+
//import '@react-awesome-query-builder/bootstrap/css/styles.css';
67
//import '@react-awesome-query-builder/ui/css/styles.css';
78
//import {Query, Builder, BasicConfig, Utils as QbUtils} from 'react-awesome-query-builder';
89
import {Button} from 'react-bootstrap'
10+
import './style.css';
11+
912

1013
// Choose your skin (ant/material/vanilla):
11-
const InitialConfig = BootstrapConfig // AntdConfig; // or MaterialConfig or MuiConfig or BootstrapConfig or BasicConfig
14+
const InitialConfig = BasicConfig //BootstrapConfig // AntdConfig; // or MaterialConfig or MuiConfig or BootstrapConfig or BasicConfig
1215

1316
const regex = {
1417
label: "Regex",
@@ -175,42 +178,45 @@ export const AdvancedSearch = (props) =>{
175178
}
176179
}else{
177180
let field = element.properties.field
178-
const operator = mapField[element.properties.operator] || element.properties.operator
179-
let value = element.properties.value[0]
181+
// field can be null
182+
if(field){
183+
const operator = mapField[element.properties.operator] || element.properties.operator
184+
let value = element.properties.value[0]
180185

181-
if(element.properties.operator === "like"){
182-
value = `(?i)${value}`
183-
}
184-
185-
let valueObj = {}
186+
if(element.properties.operator === "like"){
187+
value = `(?i)${value}`
188+
}
189+
190+
let valueObj = {}
191+
192+
if(groupName){
193+
field = field.replace(`${groupName}.`,'')
194+
//addToObj[fieldOnly]={[operator]:value}
195+
const groupObj = props.fields[groupName]
196+
// if type is an ARRAY/LIST
197+
valueObj = checkValueFormat(groupObj.subfields[field],value,operator)
198+
}else{
199+
// if type is a ARRAY/LIST
200+
valueObj = checkValueFormat(props.fields[field],value,operator)
201+
}
186202

187-
if(groupName){
188-
field = field.replace(`${groupName}.`,'')
189-
//addToObj[fieldOnly]={[operator]:value}
190-
const groupObj = props.fields[groupName]
191-
// if type is an ARRAY/LIST
192-
valueObj = checkValueFormat(groupObj.subfields[field],value,operator)
193-
}else{
194-
// if type is a ARRAY/LIST
195-
valueObj = checkValueFormat(props.fields[field],value,operator)
196-
}
203+
//"element/part/name
204+
if(field && field.indexOf("/")>-1){
205+
const fieldArr = field.split("/");
206+
let fieldObj = {}
207+
let i = (fieldArr.length-2)
208+
209+
fieldObj[fieldArr[fieldArr.length-1]]=valueObj
197210

198-
//"element/part/name
199-
if(field && field.indexOf("/")>-1){
200-
const fieldArr = field.split("/");
201-
let fieldObj = {}
202-
let i = (fieldArr.length-2)
203-
204-
fieldObj[fieldArr[fieldArr.length-1]]=valueObj
211+
while(i>=0){
212+
fieldObj={[fieldArr[i]]:fieldObj}
213+
i = i-1
214+
}
215+
childrenArrtmp.push(fieldObj)
205216

206-
while(i>=0){
207-
fieldObj={[fieldArr[i]]:fieldObj}
208-
i = i-1
217+
}else {
218+
childrenArrtmp.push({[field]:valueObj})
209219
}
210-
childrenArrtmp.push(fieldObj)
211-
212-
}else {
213-
childrenArrtmp.push({[field]:valueObj})
214220
}
215221
}
216222
});
@@ -230,13 +236,9 @@ export const AdvancedSearch = (props) =>{
230236
}
231237

232238
const onClick= ()=>{
233-
234239
const jsonTree = QbUtils.getTree(tree);
235240
const filter = jsonStringToGraphQlFilter(jsonTree)
236-
237241
if(props.setFilter) props.setFilter(filter)
238-
239-
240242
}
241243

242244
const onChange = (immutableTree, config) => {
@@ -245,14 +247,17 @@ export const AdvancedSearch = (props) =>{
245247
}
246248

247249
return <div>
248-
<Query
250+
<form>
251+
<Query
249252
{...config}
250253
value={tree}
251254
onChange={onChange}
252255
renderBuilder={renderBuilder}
253256
/>
254257
<Button onClick={()=>{onClick()}}>Filter Data</Button>
258+
</form>
255259
</div>
260+
256261

257262

258263
}

0 commit comments

Comments
 (0)