// Copyright (C) The Arvados Authors. All rights reserved. // // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; import { reduxForm, InjectedFormProps, reset } from 'redux-form'; import { compose, Dispatch } from 'redux'; import { Paper, StyleRulesCallback, withStyles, WithStyles, Button, Grid, IconButton, CircularProgress } from '@material-ui/core'; import { SEARCH_BAR_ADVANCE_FORM_NAME, SEARCH_BAR_ADVANCE_FORM_PICKER_ID, searchAdvanceData, setSearchValueFromAdvancedData } from '~/store/search-bar/search-bar-actions'; import { ArvadosTheme } from '~/common/custom-theme'; import { CloseIcon } from '~/components/icon/icon'; import { SearchBarAdvanceFormData } from '~/models/search-bar'; import { SearchBarTypeField, SearchBarClusterField, SearchBarProjectField, SearchBarTrashField, SearchBarDateFromField, SearchBarDateToField, SearchBarPropertiesField, SearchBarSaveSearchField, SearchBarQuerySearchField } from '~/views-components/form-fields/search-bar-form-fields'; import { treePickerActions } from "~/store/tree-picker/tree-picker-actions"; type CssRules = 'container' | 'closeIcon' | 'label' | 'buttonWrapper' | 'button' | 'circularProgress' | 'searchView' | 'selectGrid'; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ container: { padding: theme.spacing.unit * 2, borderBottom: `1px solid ${theme.palette.grey["200"]}`, position: 'relative', }, closeIcon: { position: 'absolute', top: '12px', right: '12px' }, label: { color: theme.palette.grey["500"], fontSize: '0.8125rem', alignSelf: 'center' }, buttonWrapper: { marginRight: '14px', marginTop: '14px', position: 'relative', }, button: { boxShadow: 'none' }, circularProgress: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, margin: 'auto' }, searchView: { color: theme.palette.common.black, borderRadius: `0 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px` }, selectGrid: { marginBottom: theme.spacing.unit * 2 } }); // ToDo: maybe we should remove invalid and prostine interface SearchBarAdvancedViewFormDataProps { submitting: boolean; invalid: boolean; pristine: boolean; } // ToDo: maybe we should remove tags export interface SearchBarAdvancedViewDataProps { tags: any; saveQuery: boolean; } export interface SearchBarAdvancedViewActionProps { closeAdvanceView: () => void; } type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps; type SearchBarAdvancedViewFormProps = SearchBarAdvancedViewProps & SearchBarAdvancedViewFormDataProps & InjectedFormProps & WithStyles; const validate = (values: any) => { const errors: any = {}; if (values.dateFrom && values.dateTo) { if (new Date(values.dateFrom).getTime() > new Date(values.dateTo).getTime()) { errors.dateFrom = 'Invalid date'; } } return errors; }; export const SearchBarAdvancedView = compose( reduxForm({ form: SEARCH_BAR_ADVANCE_FORM_NAME, validate, onSubmit: (data: SearchBarAdvanceFormData, dispatch: Dispatch) => { dispatch(searchAdvanceData(data)); dispatch(reset(SEARCH_BAR_ADVANCE_FORM_NAME)); dispatch(treePickerActions.DEACTIVATE_TREE_PICKER_NODE({ pickerId: SEARCH_BAR_ADVANCE_FORM_PICKER_ID })); }, onChange: (data: SearchBarAdvanceFormData, dispatch: Dispatch, props: any, prevData: SearchBarAdvanceFormData) => { dispatch(setSearchValueFromAdvancedData(data, prevData)); }, }), withStyles(styles))( ({ classes, closeAdvanceView, handleSubmit, submitting, invalid, pristine, tags, saveQuery }: SearchBarAdvancedViewFormProps) =>
Type Cluster Project Date modified {saveQuery && }
{submitting && }
);