src/views-components/projects-tree-picker/tree-picker-field.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from "react";
   6 import { Typography } from "@material-ui/core";
   7 import { TreeItem } from "components/tree/tree";
   8 import { WrappedFieldProps } from 'redux-form';
   9 import { ProjectsTreePicker } from 'views-components/projects-tree-picker/projects-tree-picker';
  10 import { ProjectsTreePickerItem } from 'store/tree-picker/tree-picker-middleware';
  11 import { PickerIdProp } from 'store/tree-picker/picker-id';
  12 import { CollectionFileType, getCollectionResourceCollectionUuid } from "models/collection-file";
  13 import { ResourceKind } from "models/resource";
  14
  15 export const ProjectTreePickerField = (props: WrappedFieldProps & PickerIdProp) =>
  16     <div style={{ display: 'flex', minHeight: 0, flexDirection: 'column' }}>
  17         <div style={{ flexBasis: '275px', flexShrink: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
  18             <ProjectsTreePicker
  19                 pickerId={props.pickerId}
  20                 toggleItemActive={handleChange(props)}
  21                 options={{ showOnlyOwned: false, showOnlyWritable: true }} />
  22             {props.meta.dirty && props.meta.error &&
  23                 <Typography variant='caption' color='error'>
  24                     {props.meta.error}
  25                 </Typography>}
  26         </div>
  27     </div>;
  28
  29 const handleChange = (props: WrappedFieldProps) =>
  30     (_: any, { id }: TreeItem<ProjectsTreePickerItem>) =>
  31         props.input.onChange(id);
  32
  33 export const CollectionTreePickerField = (props: WrappedFieldProps & PickerIdProp) =>
  34     <div style={{ display: 'flex', minHeight: 0, flexDirection: 'column' }}>
  35         <div style={{ flexBasis: '275px', flexShrink: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
  36             <ProjectsTreePicker
  37                 pickerId={props.pickerId}
  38                 toggleItemActive={handleChange(props)}
  39                 options={{ showOnlyOwned: false, showOnlyWritable: true }}
  40                 includeCollections />
  41             {props.meta.dirty && props.meta.error &&
  42                 <Typography variant='caption' color='error'>
  43                     {props.meta.error}
  44                 </Typography>}
  45         </div>
  46     </div>;
  47
  48 const handleDirectoryChange = (props: WrappedFieldProps) =>
  49     (_: any, data: TreeItem<ProjectsTreePickerItem>) => {
  50         if ('kind' in data.data && data.data.kind === ResourceKind.COLLECTION) {
  51             props.input.onChange({
  52                 uuid: data.data.uuid,
  53                 path: '/'
  54             });
  55         } else if ('type' in data.data && data.data.type === CollectionFileType.DIRECTORY) {
  56             props.input.onChange({
  57                 uuid: getCollectionResourceCollectionUuid(data.data.id),
  58                 path: [data.data.path, data.data.name].join('/')
  59             });
  60         } else {
  61             props.input.onChange('');
  62         }
  63     }
  64
  65 export const DirectoryTreePickerField = (props: WrappedFieldProps & PickerIdProp) =>
  66     <div style={{ display: 'flex', minHeight: 0, flexDirection: 'column' }}>
  67         <div style={{ flexBasis: '275px', flexShrink: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
  68             <ProjectsTreePicker
  69                 pickerId={props.pickerId}
  70                 toggleItemActive={handleDirectoryChange(props)}
  71                 options={{ showOnlyOwned: false, showOnlyWritable: true }}
  72                 includeCollections
  73                 includeDirectories />
  74             {props.meta.dirty && props.meta.error &&
  75                 <Typography variant='caption' color='error'>
  76                     {props.meta.error}
  77                 </Typography>}
  78         </div>
  79     </div>;