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     resetAdvanceFormProperty,
  15     updateAdvanceFormProperties
  16 } from '~/store/search-bar/search-bar-actions';
  17 import { PropertyValue } from '~/models/search-bar';
  18 import { ArvadosTheme } from '~/common/custom-theme';
  19 import { SearchBarKeyField, SearchBarValueField } from '~/views-components/form-fields/search-bar-form-fields';
  20 import { Chips } from '~/components/chips/chips';
  21 import { formatPropertyValue } from "~/common/formatters";
  22
  23 type CssRules = 'label' | 'button';
  24
  25 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  26     label: {
  27         color: theme.palette.grey["500"],
  28         fontSize: '0.8125rem',
  29         alignSelf: 'center'
  30     },
  31     button: {
  32         boxShadow: 'none'
  33     }
  34 });
  35
  36 interface SearchBarAdvancedPropertiesViewDataProps {
  37     submitting: boolean;
  38     invalid: boolean;
  39     pristine: boolean;
  40     propertyValues: PropertyValue;
  41     fields: PropertyValue[];
  42 }
  43
  44 interface SearchBarAdvancedPropertiesViewActionProps {
  45     setProps: () => void;
  46     addProp: (propertyValues: PropertyValue) => void;
  47     getAllFields: (propertyValues: PropertyValue[]) => PropertyValue[] | [];
  48 }
  49
  50 type SearchBarAdvancedPropertiesViewProps = SearchBarAdvancedPropertiesViewDataProps
  51     & SearchBarAdvancedPropertiesViewActionProps
  52     & InjectedFormProps & WithStyles<CssRules>;
  53
  54 const selector = formValueSelector(SEARCH_BAR_ADVANCE_FORM_NAME);
  55 const mapStateToProps = (state: RootState) => {
  56     return {
  57         propertyValues: selector(state, 'key', 'value', 'keyID', 'valueID')
  58     };
  59 };
  60
  61 const mapDispatchToProps = (dispatch: Dispatch) => ({
  62     setProps: (propertyValues: PropertyValue[]) => {
  63         dispatch<any>(changeAdvanceFormProperty('properties', propertyValues));
  64     },
  65     addProp: (propertyValues: PropertyValue) => {
  66         dispatch<any>(updateAdvanceFormProperties(propertyValues));
  67         dispatch<any>(resetAdvanceFormProperty('key'));
  68         dispatch<any>(resetAdvanceFormProperty('value'));
  69         dispatch<any>(resetAdvanceFormProperty('keyID'));
  70         dispatch<any>(resetAdvanceFormProperty('valueID'));
  71     },
  72     getAllFields: (fields: any) => {
  73         return fields.getAll() || [];
  74     }
  75 });
  76
  77 export const SearchBarAdvancedPropertiesView = connect(mapStateToProps, mapDispatchToProps)(
  78     withStyles(styles)(
  79         ({ classes, fields, propertyValues, setProps, addProp, getAllFields }: SearchBarAdvancedPropertiesViewProps) =>
  80             <Grid container item xs={12} spacing={16}>
  81                 <Grid item xs={2} className={classes.label}>Properties</Grid>
  82                 <Grid item xs={4}>
  83                     <SearchBarKeyField />
  84                 </Grid>
  85                 <Grid item xs={4}>
  86                     <SearchBarValueField />
  87                 </Grid>
  88                 <Grid container item xs={2} justify='flex-end' alignItems="center">
  89                     <Button className={classes.button} onClick={() => addProp(propertyValues)}
  90                         color="primary"
  91                         size='small'
  92                         variant="contained"
  93                         disabled={!Boolean(propertyValues.key && propertyValues.value)}>
  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: PropertyValue) => formatPropertyValue(field)} />
 103                 </Grid>
 104             </Grid>
 105     )
 106 );