src/views-components/projects-tree-picker/projects-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 { TreeItem, TreeItemStatus } from '~/components/tree/tree';
   9 import { ProjectResource } from "~/models/project";
  10 import { treePickerActions } from "~/store/tree-picker/tree-picker-actions";
  11 import { ListItemTextIcon } from "~/components/list-item-text-icon/list-item-text-icon";
  12 import { ProjectIcon, InputIcon, IconType, CollectionIcon } from '~/components/icon/icon';
  13 import { loadProject, loadCollection } from '~/store/tree-picker/tree-picker-actions';
  14 import { GroupContentsResource } from '~/services/groups-service/groups-service';
  15 import { CollectionDirectory, CollectionFile, CollectionFileType } from '~/models/collection-file';
  16 import { ResourceKind } from '~/models/resource';
  17 import { TreePickerProps, TreePicker } from "~/views-components/tree-picker/tree-picker";
  18
  19 export interface ProjectsTreePickerRootItem {
  20     id: string;
  21     name: string;
  22 }
  23
  24 type ProjectsTreePickerItem = ProjectsTreePickerRootItem | GroupContentsResource | CollectionDirectory | CollectionFile;
  25 type PickedTreePickerProps = Pick<TreePickerProps<ProjectsTreePickerItem>, 'onContextMenu' | 'toggleItemActive' | 'toggleItemOpen' | 'toggleItemSelection'>;
  26
  27 export interface ProjectsTreePickerDataProps {
  28     pickerId: string;
  29     includeCollections?: boolean;
  30     includeFiles?: boolean;
  31     rootItemIcon: IconType;
  32     loadRootItem: (item: TreeItem<ProjectsTreePickerRootItem>, pickerId: string, includeCollections?: boolean, inlcudeFiles?: boolean) => void;
  33 }
  34
  35 export interface ProjectsTreePickerActionProps {
  36 }
  37
  38 export type ProjectsTreePickerProps = ProjectsTreePickerDataProps & ProjectsTreePickerActionProps;
  39
  40 const mapStateToProps = (_: any, { pickerId, rootItemIcon }: ProjectsTreePickerProps) => ({
  41     render: renderTreeItem(rootItemIcon),
  42     pickerId,
  43 });
  44
  45 const mapDispatchToProps = (dispatch: Dispatch, { loadRootItem, includeCollections, includeFiles }: ProjectsTreePickerProps): PickedTreePickerProps => ({
  46     onContextMenu: () => { return; },
  47     toggleItemActive: (_, { id }, pickerId) => {
  48         dispatch(treePickerActions.ACTIVATE_TREE_PICKER_NODE({ id, pickerId }));
  49     },
  50     toggleItemOpen: (_, item, pickerId) => {
  51         const { id, data, status } = item;
  52         if (status === TreeItemStatus.INITIAL) {
  53             if ('kind' in data) {
  54                 dispatch<any>(
  55                     data.kind === ResourceKind.COLLECTION
  56                         ? loadCollection(id, pickerId)
  57                         : loadProject({ id, pickerId, includeCollections, includeFiles })
  58                 );
  59             } else if (!('type' in data) && loadRootItem) {
  60                 loadRootItem(item as TreeItem<ProjectsTreePickerRootItem>, pickerId, includeCollections, includeFiles);
  61             }
  62         } else if (status === TreeItemStatus.LOADED) {
  63             dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_COLLAPSE({ id, pickerId }));
  64         }
  65     },
  66     toggleItemSelection: (_, { id }, pickerId) => {
  67         dispatch<any>(treePickerActions.TOGGLE_TREE_PICKER_NODE_SELECTION({ id, pickerId }));
  68     },
  69 });
  70
  71 export const ProjectsTreePicker = connect(mapStateToProps, mapDispatchToProps)(TreePicker);
  72
  73 const getProjectPickerIcon = ({ data }: TreeItem<ProjectsTreePickerItem>, rootIcon: IconType): IconType => {
  74     if ('kind' in data) {
  75         switch (data.kind) {
  76             case ResourceKind.COLLECTION:
  77                 return CollectionIcon;
  78             default:
  79                 return ProjectIcon;
  80         }
  81     } else if ('type' in data) {
  82         switch (data.type) {
  83             case CollectionFileType.FILE:
  84                 return InputIcon;
  85             default:
  86                 return ProjectIcon;
  87         }
  88     } else {
  89         return rootIcon;
  90     }
  91 };
  92
  93 const renderTreeItem = (rootItemIcon: IconType) => (item: TreeItem<ProjectResource>) =>
  94     <ListItemTextIcon
  95         icon={getProjectPickerIcon(item, rootItemIcon)}
  96         name={item.data.name}
  97         isActive={item.active}
  98         hasMargin={true} />;