1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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';
12 SEARCH_BAR_ADVANCED_FORM_NAME,
13 changeAdvancedFormProperty,
14 resetAdvancedFormProperty
15 } from '~/store/search-bar/search-bar-actions';
16 import { PropertyValue } 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 import { formatPropertyValue } from "~/common/formatters";
21 import { Vocabulary } from '~/models/vocabulary';
22 import { connectVocabulary } from '../resource-properties-form/property-field-common';
24 type CssRules = 'label' | 'button';
26 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
28 color: theme.palette.grey["500"],
29 fontSize: '0.8125rem',
37 interface SearchBarAdvancedPropertiesViewDataProps {
41 propertyValues: PropertyValue;
42 fields: PropertyValue[];
43 vocabulary: Vocabulary;
46 interface SearchBarAdvancedPropertiesViewActionProps {
48 setProp: (propertyValues: PropertyValue, properties: PropertyValue[]) => void;
49 getAllFields: (propertyValues: PropertyValue[]) => PropertyValue[] | [];
52 type SearchBarAdvancedPropertiesViewProps = SearchBarAdvancedPropertiesViewDataProps
53 & SearchBarAdvancedPropertiesViewActionProps
54 & InjectedFormProps & WithStyles<CssRules>;
56 const selector = formValueSelector(SEARCH_BAR_ADVANCED_FORM_NAME);
57 const mapStateToProps = (state: RootState) => {
59 propertyValues: selector(state, 'key', 'value', 'keyID', 'valueID')
63 const mapDispatchToProps = (dispatch: Dispatch) => ({
64 setProps: (propertyValues: PropertyValue[]) => {
65 dispatch<any>(changeAdvancedFormProperty('properties', propertyValues));
67 setProp: (propertyValue: PropertyValue, properties: PropertyValue[]) => {
68 dispatch<any>(changeAdvancedFormProperty(
70 [...properties.filter(e => e.keyID! !== propertyValue.keyID!), propertyValue]
72 dispatch<any>(resetAdvancedFormProperty('key'));
73 dispatch<any>(resetAdvancedFormProperty('value'));
74 dispatch<any>(resetAdvancedFormProperty('keyID'));
75 dispatch<any>(resetAdvancedFormProperty('valueID'));
77 getAllFields: (fields: any) => {
78 return fields.getAll() || [];
82 export const SearchBarAdvancedPropertiesView = compose(
84 connect(mapStateToProps, mapDispatchToProps))(
86 ({ classes, fields, propertyValues, setProps, setProp, getAllFields, vocabulary }: SearchBarAdvancedPropertiesViewProps) =>
87 <Grid container item xs={12} spacing={16}>
88 <Grid item xs={2} className={classes.label}>Properties</Grid>
93 <SearchBarValueField />
95 <Grid container item xs={2} justify='flex-end' alignItems="center">
96 <Button className={classes.button} onClick={() => setProp(propertyValues, getAllFields(fields))}
100 disabled={!Boolean(propertyValues.key && propertyValues.value)}>
105 <Grid container item xs={10} spacing={8}>
106 <Chips values={getAllFields(fields)}
109 getLabel={(field: PropertyValue) => formatPropertyValue(field, vocabulary)} />