src/views-components/file-tree-picker/file-tree-picker.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 { Dispatch } from "redux";
   7 import { connect } from "react-redux";
   8 import { Typography } from "@material-ui/core";
   9 import { MainFileTreePicker, MainFileTreePickerProps } from "./main-file-tree-picker";
  10 import { TreeItem, TreeItemStatus } from "~/components/tree/tree";
  11 import { ProjectResource } from "~/models/project";
  12 import { fileTreePickerActions } from "~/store/file-tree-picker/file-tree-picker-actions";
  13 import { ListItemTextIcon } from "~/components/list-item-text-icon/list-item-text-icon";
  14 import { ProjectIcon, FavoriteIcon, ProjectsIcon, ShareMeIcon, CollectionIcon } from '~/components/icon/icon';
  15 import { createTreePickerNode } from "~/store/tree-picker/tree-picker";
  16 import { RootState } from "~/store/store";
  17 import { ServiceRepository } from "~/services/services";
  18 import { FilterBuilder } from "~/services/api/filter-builder";
  19 import { WrappedFieldProps } from 'redux-form';
  20 import { ResourceKind, extractUuidKind } from '~/models/resource';
  21 import { GroupContentsResource } from '~/services/groups-service/groups-service';
  22 import { loadCollectionFiles } from '~/store/collection-panel/collection-panel-files/collection-panel-files-actions';
  23
  24 type FileTreePickerProps = Pick<MainFileTreePickerProps, 'onContextMenu' | 'toggleItemActive' | 'toggleItemOpen'>;
  25
  26 const mapDispatchToProps = (dispatch: Dispatch, props: { onChange: (projectUuid: string) => void }): FileTreePickerProps => ({
  27     onContextMenu: () => { return; },
  28     toggleItemActive: (nodeId, status, pickerId) => {
  29         getNotSelectedTreePickerKind(pickerId)
  30             .forEach(pickerId => dispatch(fileTreePickerActions.TOGGLE_TREE_PICKER_NODE_SELECT({ nodeId: '', pickerId })));
  31         dispatch(fileTreePickerActions.TOGGLE_TREE_PICKER_NODE_SELECT({ nodeId, pickerId }));
  32
  33         props.onChange(nodeId);
  34     },
  35     toggleItemOpen: (nodeId, status, pickerId) => {
  36         dispatch<any>(toggleItemOpen(nodeId, status, pickerId));
  37     }
  38 });
  39
  40 const toggleItemOpen = (nodeId: string, status: TreeItemStatus, pickerId: string) =>
  41     (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
  42         if (status === TreeItemStatus.INITIAL) {
  43             if (pickerId === TreePickerId.PROJECTS) {
  44                 dispatch<any>(loadProjectTreePicker(nodeId));
  45             } else if (pickerId === TreePickerId.FAVORITES) {
  46                 dispatch<any>(loadFavoriteTreePicker(nodeId === services.authService.getUuid() ? '' : nodeId));
  47             } else {
  48                 // TODO: load sharedWithMe
  49             }
  50         } else {
  51             dispatch(fileTreePickerActions.TOGGLE_TREE_PICKER_NODE_COLLAPSE({ nodeId, pickerId }));
  52         }
  53     };
  54
  55 const getNotSelectedTreePickerKind = (pickerId: string) => {
  56     return [TreePickerId.PROJECTS, TreePickerId.FAVORITES, TreePickerId.SHARED_WITH_ME].filter(nodeId => nodeId !== pickerId);
  57 };
  58
  59 enum TreePickerId {
  60     PROJECTS = 'Projects',
  61     SHARED_WITH_ME = 'Shared with me',
  62     FAVORITES = 'Favorites'
  63 }
  64
  65 export const FileTreePicker = connect(undefined, mapDispatchToProps)((props: FileTreePickerProps) =>
  66     <div style={{ display: 'flex', flexDirection: 'column' }}>
  67         <div style={{ flexGrow: 1, overflow: 'auto' }}>
  68             <MainFileTreePicker {...props} render={renderTreeItem} pickerId={TreePickerId.PROJECTS} />
  69             <MainFileTreePicker {...props} render={renderTreeItem} pickerId={TreePickerId.SHARED_WITH_ME} />
  70             <MainFileTreePicker {...props} render={renderTreeItem} pickerId={TreePickerId.FAVORITES} />
  71         </div>
  72     </div>);
  73
  74 export const loadProjectTreePicker = (nodeId: string) =>
  75     async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
  76         dispatch(fileTreePickerActions.LOAD_TREE_PICKER_NODE({ nodeId, pickerId: TreePickerId.PROJECTS }));
  77
  78         const ownerUuid = nodeId.length === 0 ? services.authService.getUuid() || '' : nodeId;
  79
  80         const filters = new FilterBuilder()
  81             .addIsA("uuid", [ResourceKind.PROJECT, ResourceKind.COLLECTION])
  82             .addEqual('ownerUuid', ownerUuid)
  83             .getFilters();
  84
  85             // TODO: loadfiles from collections
  86         const { items } = (extractUuidKind(nodeId) === ResourceKind.COLLECTION)
  87             ? dispatch<any>(loadCollectionFiles(nodeId))
  88             : await services.groupsService.contents(ownerUuid, { filters });
  89
  90         await dispatch<any>(receiveTreePickerData(nodeId, items, TreePickerId.PROJECTS));
  91     };
  92
  93 export const loadFavoriteTreePicker = (nodeId: string) =>
  94     async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
  95         const parentId = services.authService.getUuid() || '';
  96
  97         if (nodeId === '') {
  98             dispatch(fileTreePickerActions.LOAD_TREE_PICKER_NODE({ nodeId: parentId, pickerId: TreePickerId.FAVORITES }));
  99             const { items } = await services.favoriteService.list(parentId);
 100
 101             dispatch<any>(receiveTreePickerData(parentId, items as ProjectResource[], TreePickerId.FAVORITES));
 102         } else {
 103             dispatch(fileTreePickerActions.LOAD_TREE_PICKER_NODE({ nodeId, pickerId: TreePickerId.FAVORITES }));
 104             const filters = new FilterBuilder()
 105                 .addEqual('ownerUuid', nodeId)
 106                 .getFilters();
 107
 108                 const { items } = (extractUuidKind(nodeId) === ResourceKind.COLLECTION)
 109                 ? dispatch<any>(loadCollectionFiles(nodeId))
 110                 : await services.groupsService.contents(parentId, { filters });
 111
 112
 113             dispatch<any>(receiveTreePickerData(nodeId, items, TreePickerId.FAVORITES));
 114         }
 115     };
 116
 117 const getProjectPickerIcon = (item: TreeItem<ProjectResource>) => {
 118     switch (item.data.name) {
 119         case TreePickerId.FAVORITES:
 120             return FavoriteIcon;
 121         case TreePickerId.PROJECTS:
 122             return ProjectsIcon;
 123         case TreePickerId.SHARED_WITH_ME:
 124             return ShareMeIcon;
 125         default:
 126             return getResourceIcon(item);
 127     }
 128 };
 129
 130 const getResourceIcon = (item: TreeItem<GroupContentsResource>) => {
 131     switch (item.data.kind) {
 132         case ResourceKind.COLLECTION:
 133             return CollectionIcon;
 134         case ResourceKind.PROJECT:
 135             return ProjectIcon;
 136         default:
 137             return ProjectIcon;
 138     }
 139 };
 140
 141 const renderTreeItem = (item: TreeItem<ProjectResource>) =>
 142     <ListItemTextIcon
 143         icon={getProjectPickerIcon(item)}
 144         name={item.data.name}
 145         isActive={item.active}
 146         hasMargin={true} />;
 147
 148
 149 export const receiveTreePickerData = (nodeId: string, items: GroupContentsResource[] = [], pickerId: string) =>
 150     (dispatch: Dispatch) => {
 151         dispatch(fileTreePickerActions.LOAD_TREE_PICKER_NODE_SUCCESS({
 152             nodeId,
 153             nodes: items.map(item => createTreePickerNode({ nodeId: item.uuid, value: item })),
 154             pickerId,
 155         }));
 156
 157         dispatch(fileTreePickerActions.TOGGLE_TREE_PICKER_NODE_COLLAPSE({ nodeId, pickerId }));
 158     };
 159
 160 export const FileTreePickerField = (props: WrappedFieldProps) =>
 161     <div style={{ height: '200px', display: 'flex', flexDirection: 'column' }}>
 162         <FileTreePicker onChange={handleChange(props)} />
 163         {props.meta.dirty && props.meta.error &&
 164             <Typography variant='caption' color='error'>
 165                 {props.meta.error}
 166             </Typography>}
 167     </div>;
 168
 169 const handleChange = (props: WrappedFieldProps) => (value: string) =>
 170     props.input.value === value
 171         ? props.input.onChange('')
 172         : props.input.onChange(value);
 173