code refactoring and improve views

[arvados-workbench2.git] / src / views-components / search-bar / search-bar-advanced-view.tsx

diff --git a/src/views-components/search-bar/search-bar-advanced-view.tsx b/src/views-components/search-bar/search-bar-advanced-view.tsx
index a8d65a496b7da8259c0fa0ad1a95ff03aaee4e88..10e535c5ffcd18fe7ec6b2e45f82669e6fa03ba0 100644 (file)
--- a/src/views-components/search-bar/search-bar-advanced-view.tsx
+++ b/src/views-components/search-bar/search-bar-advanced-view.tsx
@@ -11,20 +11,20 @@ import { SEARCH_BAR_ADVANCE_FORM_NAME, saveQuery } from '~/store/search-bar/sear
 import { ArvadosTheme } from '~/common/custom-theme';
 import { CloseIcon } from '~/components/icon/icon';
 import { SearchBarAdvanceFormData } from '~/models/search-bar';
-import { 
-    SearchBarTypeField, SearchBarClusterField, SearchBarProjectField, SearchBarTrashField, 
+import {
+    SearchBarTypeField, SearchBarClusterField, SearchBarProjectField, SearchBarTrashField,
     SearchBarDateFromField, SearchBarDateToField, SearchBarPropertiesField,
     SearchBarSaveSearchField, SearchBarQuerySearchField
 } from '~/views-components/form-fields/search-bar-form-fields';
 
-type CssRules = 'container' | 'closeIcon' | 'label' | 'buttonWrapper' 
+type CssRules = 'container' | 'closeIcon' | 'label' | 'buttonWrapper'
     | 'button' | 'circularProgress' | 'searchView' | 'selectGrid';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     container: {
         padding: theme.spacing.unit * 2,
         borderBottom: `1px solid ${theme.palette.grey["200"]}`
-    }, 
+    },
     closeIcon: {
         position: 'absolute',
         top: '12px',
@@ -60,34 +60,40 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     }
 });
 
-interface SearchBarAdvancedViewDataProps {
+interface SearchBarAdvancedViewFormDataProps {
     submitting: boolean;
     invalid: boolean;
     pristine: boolean;
 }
 
-interface SearchBarAdvancedViewActionProps {
-    setView: (currentView: string) => void;
+export interface SearchBarAdvancedViewDataProps {
+    tags: any;
+}
+
+export interface SearchBarAdvancedViewActionProps {
+    onSetView: (currentView: string) => void;
     saveQuery: (data: SearchBarAdvanceFormData) => void;
 }
 
-type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps 
+type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps;
+
+type SearchBarAdvancedViewFormProps = SearchBarAdvancedViewProps & SearchBarAdvancedViewFormDataProps
     & InjectedFormProps & WithStyles<CssRules>;
 
 const validate = (values: any) => {
     const errors: any = {};
 
-    if (values.dateFrom && values.dateTo ) {
+    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<SearchBarAdvanceFormData, SearchBarAdvancedViewActionProps>({
+    reduxForm<SearchBarAdvanceFormData, SearchBarAdvancedViewProps>({
         form: SEARCH_BAR_ADVANCE_FORM_NAME,
         validate,
         onSubmit: (data: SearchBarAdvanceFormData, dispatch: Dispatch) => {
@@ -96,7 +102,7 @@ export const SearchBarAdvancedView = compose(
         }
     }),
     withStyles(styles))(
-        ({ classes, setView, handleSubmit, submitting, invalid, pristine }: SearchBarAdvancedViewProps) =>
+        ({ classes, onSetView, handleSubmit, submitting, invalid, pristine, tags }: SearchBarAdvancedViewFormProps) =>
             <Paper className={classes.searchView}>
                 <form onSubmit={handleSubmit}>
                     <Grid container direction="column" justify="flex-start" alignItems="flex-start">
@@ -125,7 +131,7 @@ export const SearchBarAdvancedView = compose(
                                     <SearchBarTrashField />
                                 </Grid>
                             </Grid>
-                            <IconButton onClick={() => setView(SearchView.BASIC)} className={classes.closeIcon}>
+                            <IconButton onClick={() => onSetView(SearchView.BASIC)} className={classes.closeIcon}>
                                 <CloseIcon />
                             </IconButton>
                         </Grid>
@@ -152,7 +158,8 @@ export const SearchBarAdvancedView = compose(
                             <Grid container item xs={12} justify='flex-end'>
                                 <div className={classes.buttonWrapper}>
                                     <Button type="submit" className={classes.button}
-                                        disabled={invalid || submitting || pristine}
+                                    // ToDo: create easier condition
+                                        disabled={invalid || submitting || pristine || !!(tags && tags.values && ((tags.values.key) || (tags.values.value)) && !Object.keys(tags.values).find(el => el !== 'value' && el !== 'key'))}
                                         color="primary"
                                         size='small'
                                         variant="contained">
@@ -164,5 +171,5 @@ export const SearchBarAdvancedView = compose(
                         </Grid>
                     </Grid>
                 </form>
-        </Paper>
+            </Paper>
     );