src/views-components/project-tree-picker/project-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 { TreePicker } from "../tree-picker/tree-picker";
  10 import { TreeProps, TreeItem, TreeItemStatus } from "../../components/tree/tree";
  11 import { ProjectResource } from "../../models/project";
  12 import { treePickerActions } from "../../store/tree-picker/tree-picker-actions";
  13 import { ListItemTextIcon } from "../../components/list-item-text-icon/list-item-text-icon";
  14 import { ProjectIcon } 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 "../../common/api/filter-builder";
  19
  20 type ProjectTreePickerProps = Pick<TreeProps<ProjectResource>, 'toggleItemActive' | 'toggleItemOpen'>;
  21
  22 const mapDispatchToProps = (dispatch: Dispatch): ProjectTreePickerProps => ({
  23     toggleItemActive: id => {
  24         dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_SELECT({ id }));
  25     },
  26     toggleItemOpen: (id, status) => {
  27         status === TreeItemStatus.INITIAL
  28             ? dispatch<any>(loadProjectTreePickerProjects(id))
  29             : dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_COLLAPSE({ id }));
  30     }
  31 });
  32
  33 export const ProjectTreePicker = connect(undefined, mapDispatchToProps)((props: ProjectTreePickerProps) =>
  34     <div>
  35         <Typography variant='caption'>
  36             Select a project
  37         </Typography>
  38         <TreePicker {...props} render={renderTreeItem} />
  39     </div>);
  40
  41 // TODO: move action creator to store directory
  42 export const loadProjectTreePickerProjects = (id: string) =>
  43     async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
  44         dispatch(treePickerActions.LOAD_TREE_PICKER_NODE({ id }));
  45
  46         const ownerUuid = id.length === 0 ? services.authService.getUuid() || '' : id;
  47
  48         const filters = FilterBuilder
  49             .create<ProjectResource>()
  50             .addEqual('ownerUuid', ownerUuid);
  51
  52         const { items } = await services.projectService.list({ filters });
  53
  54         dispatch<any>(receiveProjectTreePickerData(id, items));
  55     };
  56
  57 const renderTreeItem = (item: TreeItem<ProjectResource>) =>
  58     <ListItemTextIcon
  59         icon={ProjectIcon}
  60         name={item.data.name}
  61         isActive={item.active}
  62         hasMargin={true} />;
  63
  64 // TODO: move action creator to store directory
  65 const receiveProjectTreePickerData = (id: string, projects: ProjectResource[]) =>
  66     (dispatch: Dispatch) => {
  67         dispatch(treePickerActions.LOAD_TREE_PICKER_NODE_SUCCESS({
  68             id,
  69             nodes: projects.map(project => createTreePickerNode({ id: project.uuid, value: project }))
  70         }));
  71         dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_COLLAPSE({ id }));
  72     };