src/views-components/form-fields/search-bar-form-fields.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 { Field, WrappedFieldProps, FieldArray } from 'redux-form';
   7 import { TextField, DateTextField } from "~/components/text-field/text-field";
   8 import { CheckboxField } from '~/components/checkbox-field/checkbox-field';
   9 import { NativeSelectField } from '~/components/select-field/select-field';
  10 import { ResourceKind } from '~/models/resource';
  11 import { ClusterObjectType } from '~/models/search-bar';
  12 import { HomeTreePicker } from '~/views-components/projects-tree-picker/home-tree-picker';
  13 import { SEARCH_BAR_ADVANCE_FORM_PICKER_ID } from '~/store/search-bar/search-bar-actions';
  14 import { SearchBarAdvancedPropertiesView } from '~/views-components/search-bar/search-bar-advanced-properties-view';
  15 import { TreeItem } from "~/components/tree/tree";
  16 import { ProjectsTreePickerItem } from "~/views-components/projects-tree-picker/generic-projects-tree-picker";
  17
  18 export const SearchBarTypeField = () =>
  19     <Field
  20         name='type'
  21         component={NativeSelectField}
  22         items={[
  23             { key: '', value: 'Any' },
  24             { key: ResourceKind.COLLECTION, value: 'Collection' },
  25             { key: ResourceKind.PROJECT, value: 'Project' },
  26             { key: ResourceKind.PROCESS, value: 'Process' }
  27         ]} />;
  28
  29 export const SearchBarClusterField = () =>
  30     <Field
  31         name='cluster'
  32         component={NativeSelectField}
  33         items={[
  34             { key: '', value: 'Any' },
  35             { key: ClusterObjectType.INDIANAPOLIS, value: 'Indianapolis' },
  36             { key: ClusterObjectType.KAISERAUGST, value: 'Kaiseraugst' },
  37             { key: ClusterObjectType.PENZBERG, value: 'Penzberg' }
  38         ]} />;
  39
  40 export const SearchBarProjectField = () =>
  41     <Field
  42         name='projectUuid'
  43         component={ProjectsPicker} />;
  44
  45 const ProjectsPicker = (props: WrappedFieldProps) =>
  46     <div style={{ height: '100px', display: 'flex', flexDirection: 'column', overflow: 'overlay' }}>
  47         <HomeTreePicker
  48             pickerId={SEARCH_BAR_ADVANCE_FORM_PICKER_ID}
  49             toggleItemActive={
  50                 (_: any, { id }: TreeItem<ProjectsTreePickerItem>) => {
  51                     props.input.onChange(id);
  52                 }
  53             }/>
  54     </div>;
  55
  56 export const SearchBarTrashField = () =>
  57     <Field
  58         name='inTrash'
  59         component={CheckboxField}
  60         label="In trash" />;
  61
  62 export const SearchBarDateFromField = () =>
  63     <Field
  64         name='dateFrom'
  65         component={DateTextField} />;
  66
  67 export const SearchBarDateToField = () =>
  68     <Field
  69         name='dateTo'
  70         component={DateTextField} />;
  71
  72 export const SearchBarPropertiesField = () =>
  73     <FieldArray
  74         name="properties"
  75         component={SearchBarAdvancedPropertiesView} />;
  76
  77 export const SearchBarKeyField = () =>
  78     <Field
  79         name='key'
  80         component={TextField}
  81         label="Key" />;
  82
  83 export const SearchBarValueField = () =>
  84     <Field
  85         name='value'
  86         component={TextField}
  87         label="Value" />;
  88
  89 export const SearchBarSaveSearchField = () =>
  90     <Field
  91         name='saveQuery'
  92         component={CheckboxField}
  93         label="Save query" />;
  94
  95 export const SearchBarQuerySearchField = () =>
  96     <Field
  97         name='queryName'
  98         component={TextField}
  99         label="Query name" />;