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
  16 export const SearchBarTypeField = () =>
  17     <Field
  18         name='type'
  19         component={NativeSelectField}
  20         items={[
  21             { key: '', value: 'Any' },
  22             { key: ResourceKind.COLLECTION, value: 'Collection' },
  23             { key: ResourceKind.PROJECT, value: 'Project' },
  24             { key: ResourceKind.PROCESS, value: 'Process' }
  25         ]} />;
  26
  27 export const SearchBarClusterField = () =>
  28     <Field
  29         name='cluster'
  30         component={NativeSelectField}
  31         items={[
  32             { key: '', value: 'Any' },
  33             { key: ClusterObjectType.INDIANAPOLIS, value: 'Indianapolis' },
  34             { key: ClusterObjectType.KAISERAUGST, value: 'Kaiseraugst' },
  35             { key: ClusterObjectType.PENZBERG, value: 'Penzberg' }
  36         ]} />;
  37
  38 export const SearchBarProjectField = () =>
  39     <Field
  40         name='projectUuid'
  41         component={ProjectsPicker} />;
  42
  43 const ProjectsPicker = (props: WrappedFieldProps) =>
  44     <div style={{ height: '100px', display: 'flex', flexDirection: 'column', overflow: 'overlay' }}>
  45         <HomeTreePicker pickerId={SEARCH_BAR_ADVANCE_FORM_PICKER_ID} />
  46     </div>;
  47
  48 export const SearchBarTrashField = () =>
  49     <Field
  50         name='inTrash'
  51         component={CheckboxField}
  52         label="In trash" />;
  53
  54 export const SearchBarDateFromField = () =>
  55     <Field
  56         name='dateFrom'
  57         component={DateTextField} />;
  58
  59 export const SearchBarDateToField = () =>
  60     <Field
  61         name='dateTo'
  62         component={DateTextField} />;
  63
  64 export const SearchBarPropertiesField = () =>
  65     <FieldArray
  66         name="properties"
  67         component={SearchBarAdvancedPropertiesView} />;
  68
  69 export const SearchBarKeyField = () =>
  70     <Field
  71         name='key'
  72         component={TextField}
  73         label="Key" />;
  74
  75 export const SearchBarValueField = () =>
  76     <Field
  77         name='value'
  78         component={TextField}
  79         label="Value" />;
  80
  81 export const SearchBarSaveSearchField = () =>
  82     <Field
  83         name='saveQuery'
  84         component={CheckboxField}
  85         label="Save search query" />;
  86
  87 export const SearchBarQuerySearchField = () =>
  88     <Field
  89         name='searchQuery'
  90         component={TextField}
  91         label="Search query name" />;