config-ip-filter: Add separate key label filter parameters. (template keys have a human friendly label).

Author: benloh

build/app/view/netcreate/components/filter/FiltersPanel.jsx

@@ -1,11 +1,12 @@
-import FilterGroup from './FilterGroup';
 import FILTER from './FilterEnums';
+import FilterGroup from './FilterGroup';
 import React from 'react';
 import StringFilter from './StringFilter';
 const ReactStrap = require('reactstrap');
 
 const { Button, Input, Label } = ReactStrap;
 
+
 const UNISYS = require('unisys/client');
 var UDATA  = null;
 
@@ -27,15 +28,24 @@ const filtersDefs = [
     filters: [
       {
         id: '1',
-        name: 'Label',
-        type: 'contains',
+        key: 'label',
+        keylabel: 'Label',
+        operator: 'contains',
         value: 'tacitus'
       },
       {
         id: '2',
-        name: 'Type',
-        type: 'not-contains',
+        key: 'type',
+        keylabel: 'Type',
+        operator: 'contains',
         value: 'person'
+      },
+      {
+        id: '3',
+        key: 'notes',
+        keylabel: 'Significance',
+        operator: 'contains',
+        value: 'xxx'
       }
     ]
   },
@@ -44,20 +54,23 @@ const filtersDefs = [
     filters: [
       {
         id: '1',
-        name: 'Source',
-        type: 'contains',
+        key: 'source',
+        keylabel: 'Source',
+        operator: 'contains',
         value: 'tacitus'
       },
       {
         id: '2',
-        name: 'Type',
-        type: 'not-contains',
+        key: 'type',
+        keylabel: 'Type',
+        operator: 'not-contains',
         value: 'is related to'
       },
       {
         id: '3',
-        name: 'Target',
-        type: 'contains',
+        key: 'target',
+        keylabel: 'Target',
+        operator: 'contains',
         value: 'Rome'
       }
     ]

build/app/view/netcreate/components/filter/StringFilter.jsx

@@ -3,7 +3,22 @@ import React from 'react';
 const ReactStrap = require('reactstrap');
 const { Form, FormGroup, Input, Label } = ReactStrap;
 
-export default function StringFilter({ filter: { id, name, type, value }, onChangeHandler }) {
+export default function StringFilter({
+  filter: {
+    id,
+    key,
+    keylabel, // human friendly display name for the key.  This can be customized in the template.
+    operator,
+    value
+  },
+  onChangeHandler
+}) {
+
+  const OPERATORS = [
+    { value: FILTER.STRING_OPERATORS.EMPTY, label: "--"},
+    { value: FILTER.STRING_OPERATORS.CONTAINS, label: "contains"},
+    { value: FILTER.STRING_OPERATORS.NOT_CONTAINS, label: "does not contain"},
+  ]
 
   console.log('StringFilter: id is', id);
 
@@ -13,22 +28,18 @@ export default function StringFilter({ filter: { id, name, type, value }, onChan
     // Construct search string
     // let result = name;
     // result +=':' + filterType + ':' + filterValue;
-    let result = { name, type: filterType, value: filterValue };
+    let result = { key, operator: filterType, value: filterValue };
     onChangeHandler(result);
   }
 
-  const OPERATORS = [
-    { value: FILTER.STRING_OPERATORS.EMPTY, label: "--"},
-    { value: FILTER.STRING_OPERATORS.CONTAINS, label: "contains"},
-    { value: FILTER.STRING_OPERATORS.NOT_CONTAINS, label: "does not contain"},
-  ]
-
   return (
     <Form inline className="filter-item" id={id}>
       <FormGroup>
-        <Label size="sm" style={{width:`5em`,justifyContent:'flex-end'}}>{name}&nbsp;</Label>
-        <Input id={`filterType-${id}`} type="select" value={type} onChange={HandleChangeLocal} bsSize="sm">
-          {OPERATORS.map(op => <option value={op.value} key={`${id}${op.value}`} size="sm">{op.label}</option>)}
+        <Label size="sm" style={{width:`5em`,justifyContent:'flex-end'}}>{keylabel}&nbsp;</Label>
+        <Input id={`filterType-${id}`} type="select" value={operator} onChange={HandleChangeLocal} bsSize="sm">
+          {OPERATORS.map(op =>
+            <option value={op.value} key={`${id}${op.value}`} size="sm">{op.label}</option>
+          )}
         </Input>
         <Input id={`filterValue-${id}`} type="text" value={value} onChange={HandleChangeLocal} bsSize="sm"/>
       </FormGroup>