1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { reduxForm, InjectedFormProps, reset } from 'redux-form';
7 import { compose, Dispatch } from 'redux';
8 import { Paper, StyleRulesCallback, withStyles, WithStyles, Button, Grid, IconButton, CircularProgress } from '@material-ui/core';
10 SEARCH_BAR_ADVANCE_FORM_NAME,
12 setSearchValueFromAdvancedData
13 } from '~/store/search-bar/search-bar-actions';
14 import { ArvadosTheme } from '~/common/custom-theme';
15 import { CloseIcon } from '~/components/icon/icon';
16 import { SearchBarAdvanceFormData } from '~/models/search-bar';
18 SearchBarTypeField, SearchBarClusterField, SearchBarProjectField, SearchBarTrashField,
19 SearchBarDateFromField, SearchBarDateToField, SearchBarPropertiesField,
20 SearchBarSaveSearchField, SearchBarQuerySearchField
21 } from '~/views-components/form-fields/search-bar-form-fields';
23 type CssRules = 'container' | 'closeIcon' | 'label' | 'buttonWrapper'
24 | 'button' | 'circularProgress' | 'searchView' | 'selectGrid';
26 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
28 padding: theme.spacing.unit * 2,
29 borderBottom: `1px solid ${theme.palette.grey["200"]}`
37 color: theme.palette.grey["500"],
38 fontSize: '0.8125rem',
58 color: theme.palette.common.black,
59 borderRadius: `0 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px`
62 marginBottom: theme.spacing.unit * 2
66 // ToDo: maybe we should remove invalid and prostine
67 interface SearchBarAdvancedViewFormDataProps {
73 // ToDo: maybe we should remove tags
74 export interface SearchBarAdvancedViewDataProps {
78 export interface SearchBarAdvancedViewActionProps {
79 closeAdvanceView: () => void;
82 type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps;
84 type SearchBarAdvancedViewFormProps = SearchBarAdvancedViewProps & SearchBarAdvancedViewFormDataProps
85 & InjectedFormProps & WithStyles<CssRules>;
87 const validate = (values: any) => {
88 const errors: any = {};
90 if (values.dateFrom && values.dateTo) {
91 if (new Date(values.dateFrom).getTime() > new Date(values.dateTo).getTime()) {
92 errors.dateFrom = 'Invalid date';
99 export const SearchBarAdvancedView = compose(
100 reduxForm<SearchBarAdvanceFormData, SearchBarAdvancedViewProps>({
101 form: SEARCH_BAR_ADVANCE_FORM_NAME,
103 onSubmit: (data: SearchBarAdvanceFormData, dispatch: Dispatch) => {
104 dispatch<any>(searchAdvanceData(data));
105 dispatch(reset(SEARCH_BAR_ADVANCE_FORM_NAME));
107 onChange: (data: SearchBarAdvanceFormData, dispatch: Dispatch, props: any, prevData: SearchBarAdvanceFormData) => {
108 dispatch<any>(setSearchValueFromAdvancedData(data, prevData));
112 ({ classes, closeAdvanceView, handleSubmit, submitting, invalid, pristine, tags }: SearchBarAdvancedViewFormProps) =>
113 <Paper className={classes.searchView}>
114 <form onSubmit={handleSubmit}>
115 <Grid container direction="column" justify="flex-start" alignItems="flex-start">
116 <Grid item xs={12} container className={classes.container}>
117 <Grid item container xs={12} className={classes.selectGrid}>
118 <Grid item xs={2} className={classes.label}>Type</Grid>
120 <SearchBarTypeField />
123 <Grid item container xs={12} className={classes.selectGrid}>
124 <Grid item xs={2} className={classes.label}>Cluster</Grid>
126 <SearchBarClusterField />
129 <Grid item container xs={12}>
130 <Grid item xs={2} className={classes.label}>Project</Grid>
132 <SearchBarProjectField />
135 <Grid item container xs={12}>
136 <Grid item xs={2} className={classes.label} />
138 <SearchBarTrashField />
141 <IconButton onClick={closeAdvanceView} className={classes.closeIcon}>
145 <Grid container item xs={12} className={classes.container} spacing={16}>
146 <Grid item xs={2} className={classes.label}>Date modified</Grid>
148 <SearchBarDateFromField />
151 <SearchBarDateToField />
154 <Grid container item xs={12} className={classes.container}>
155 <SearchBarPropertiesField />
156 <Grid container item xs={12} justify="flex-start" alignItems="center" spacing={16}>
157 <Grid item xs={2} className={classes.label} />
159 <SearchBarSaveSearchField />
162 <SearchBarQuerySearchField />
165 <Grid container item xs={12} justify='flex-end'>
166 <div className={classes.buttonWrapper}>
167 <Button type="submit" className={classes.button}
168 // ToDo: create easier condition
169 // Question: do we need this condition?
170 // disabled={invalid || submitting || pristine || !!(tags && tags.values && ((tags.values.key) || (tags.values.value)) && !Object.keys(tags.values).find(el => el !== 'value' && el !== 'key'))}
176 {submitting && <CircularProgress size={20} className={classes.circularProgress} />}