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