src/views-components/search-bar/search-bar-advanced-properties-view.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { Dispatch } from 'redux';
   7 import { connect } from 'react-redux';
   8 import { InjectedFormProps, formValueSelector } from 'redux-form';
   9 import { Grid, withStyles, StyleRulesCallback, WithStyles, Button } from '@material-ui/core';
  10 import { RootState } from '~/store/store';
  11 import {
  12     SEARCH_BAR_ADVANCE_FORM_NAME,
  13     changeAdvanceFormProperty,
  14     updateAdvanceFormProperties
  15 } from '~/store/search-bar/search-bar-actions';
  16 import { PropertyValues } from '~/models/search-bar';
  17 import { ArvadosTheme } from '~/common/custom-theme';
  18 import { SearchBarKeyField, SearchBarValueField } from '~/views-components/form-fields/search-bar-form-fields';
  19 import { Chips } from '~/components/chips/chips';
  20
  21 type CssRules = 'root' | 'label' | 'button';
  22
  23 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  24     root: {
  25
  26     },
  27     label: {
  28         color: theme.palette.grey["500"],
  29         fontSize: '0.8125rem',
  30         alignSelf: 'center'
  31     },
  32     button: {
  33         boxShadow: 'none'
  34     }
  35 });
  36
  37 interface SearchBarAdvancedPropertiesViewDataProps {
  38     submitting: boolean;
  39     invalid: boolean;
  40     pristine: boolean;
  41     propertyValues: PropertyValues;
  42     fields: PropertyValues[];
  43 }
  44
  45 interface SearchBarAdvancedPropertiesViewActionProps {
  46     setProps: () => void;
  47     addProp: (propertyValues: PropertyValues) => void;
  48     getAllFields: (propertyValues: PropertyValues[]) => PropertyValues[] | [];
  49 }
  50
  51 type SearchBarAdvancedPropertiesViewProps = SearchBarAdvancedPropertiesViewDataProps
  52     & SearchBarAdvancedPropertiesViewActionProps
  53     & InjectedFormProps & WithStyles<CssRules>;
  54
  55 const selector = formValueSelector(SEARCH_BAR_ADVANCE_FORM_NAME);
  56 const mapStateToProps = (state: RootState) => {
  57     return {
  58         propertyValues: selector(state, 'propertyKey', 'propertyValue')
  59     };
  60 };
  61
  62 const mapDispatchToProps = (dispatch: Dispatch) => ({
  63     setProps: (propertyValues: PropertyValues[]) => {
  64         dispatch<any>(changeAdvanceFormProperty('properties', propertyValues));
  65     },
  66     addProp: (propertyValues: PropertyValues) => {
  67         dispatch<any>(updateAdvanceFormProperties(propertyValues));
  68         dispatch<any>(changeAdvanceFormProperty('propertyKey'));
  69         dispatch<any>(changeAdvanceFormProperty('propertyValue'));
  70     },
  71     getAllFields: (fields: any) => {
  72         return fields.getAll() || [];
  73     }
  74 });
  75
  76 export const SearchBarAdvancedPropertiesView =
  77     connect(mapStateToProps, mapDispatchToProps)
  78
  79     (withStyles(styles)(
  80         ({ classes, fields, propertyValues, setProps, addProp, getAllFields }: SearchBarAdvancedPropertiesViewProps) =>
  81             <Grid container item xs={12} spacing={16}>
  82                 <Grid item xs={2} className={classes.label}>Properties</Grid>
  83                 <Grid item xs={4}>
  84                     <SearchBarKeyField />
  85                 </Grid>
  86                 <Grid item xs={4}>
  87                     <SearchBarValueField />
  88                 </Grid>
  89                 <Grid container item xs={2} justify='flex-end' alignItems="center">
  90                     <Button className={classes.button} onClick={() => addProp(propertyValues)}
  91                         color="primary"
  92                         size='small'
  93                         variant="contained">
  94                         Add
  95                     </Button>
  96                 </Grid>
  97                 <Grid item xs={2} />
  98                 <Grid container item xs={10} spacing={8}>
  99                     <Chips values={getAllFields(fields)}
 100                         deletable
 101                         onChange={setProps}
 102                         getLabel={(field: PropertyValues) => `${field.propertyKey}: ${field.propertyValue}`} />
 103                 </Grid>
 104             </Grid>
 105     )
 106 );