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, props: {onChange: (projectUuid: string) => void}): ProjectTreePickerProps => ({
  23     toggleItemActive: id => {
  24         dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_SELECT({ id }));
  25         props.onChange(id);
  26     },
  27     toggleItemOpen: (id, status) => {
  28         status === TreeItemStatus.INITIAL
  29             ? dispatch<any>(loadProjectTreePickerProjects(id))
  30             : dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_COLLAPSE({ id }));
  31     }
  32 });
  33
  34 export const ProjectTreePicker = connect(undefined, mapDispatchToProps)((props: ProjectTreePickerProps) =>
  35     <div style={{display: 'flex', flexDirection: 'column'}}>
  36         <Typography variant='caption' style={{flexShrink: 0}}>
  37             Select a project
  38         </Typography>
  39         <div style={{flexGrow: 1, overflow: 'auto'}}>
  40             <TreePicker {...props} render={renderTreeItem} />
  41         </div>
  42     </div>);
  43
  44 // TODO: move action creator to store directory
  45 export const loadProjectTreePickerProjects = (id: string) =>
  46     async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
  47         dispatch(treePickerActions.LOAD_TREE_PICKER_NODE({ id }));
  48
  49         const ownerUuid = id.length === 0 ? services.authService.getUuid() || '' : id;
  50
  51         const filters = FilterBuilder
  52             .create()
  53             .addEqual('ownerUuid', ownerUuid);
  54
  55         const { items } = await services.projectService.list({ filters });
  56
  57         dispatch<any>(receiveProjectTreePickerData(id, items));
  58     };
  59
  60 const renderTreeItem = (item: TreeItem<ProjectResource>) =>
  61     <ListItemTextIcon
  62         icon={ProjectIcon}
  63         name={item.data.name}
  64         isActive={item.active}
  65         hasMargin={true} />;
  66
  67 // TODO: move action creator to store directory
  68 const receiveProjectTreePickerData = (id: string, projects: ProjectResource[]) =>
  69     (dispatch: Dispatch) => {
  70         dispatch(treePickerActions.LOAD_TREE_PICKER_NODE_SUCCESS({
  71             id,
  72             nodes: projects.map(project => createTreePickerNode({ id: project.uuid, value: project }))
  73         }));
  74         dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_COLLAPSE({ id }));
  75     };