export interface CollectionPanelFilesProps {
items: Array<TreeItem<FileTreeData>>;
isWritable: boolean;
+ isLoading: boolean;
onUploadDataClick: () => void;
onItemMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>, isWritable: boolean) => void;
onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>, isWritable: boolean) => void;
currentItemUuid?: string;
}
-type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button';
+type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button' | 'centeredLabel';
const styles: StyleRulesCallback<CssRules> = theme => ({
root: {
button: {
marginRight: -theme.spacing.unit,
marginTop: '0px'
- }
+ },
+ centeredLabel: {
+ fontSize: '0.875rem',
+ textAlign: 'center'
+ },
});
export const CollectionPanelFiles =
withStyles(styles)(
- ({ onItemMenuOpen, onOptionsMenuOpen, onUploadDataClick, classes, isWritable, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
+ ({ onItemMenuOpen, onOptionsMenuOpen, onUploadDataClick, classes,
+ isWritable, isLoading, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
<Card data-cy='collection-files-panel' className={classes.root}>
<CardHeader
title="Files"
File size
</Typography>
</Grid>
- <FileTree onMenuOpen={(ev, item) => onItemMenuOpen(ev, item, isWritable)} {...treeProps} />
+ { isLoading
+ ? <div className={classes.centeredLabel}>(loading files...)</div>
+ : <FileTree onMenuOpen={(ev, item) => onItemMenuOpen(ev, item, isWritable)} {...treeProps} /> }
</Card>);
import { startSubmit, stopSubmit, initialize, FormErrors } from 'redux-form';
import { getDialog } from "~/store/dialog/dialog-reducer";
import { getFileFullPath, sortFilesTree } from "~/services/collection-service/collection-service-files-response";
+import { progressIndicatorActions } from "~/store/progress-indicator/progress-indicator-actions";
export const collectionPanelFilesAction = unionize({
SET_COLLECTION_FILES: ofType<CollectionFilesTree>(),
export type CollectionPanelFilesAction = UnionOf<typeof collectionPanelFilesAction>;
+export const COLLECTION_PANEL_LOAD_FILES = 'collectionPanelLoadFiles';
+
export const loadCollectionFiles = (uuid: string) =>
async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+ dispatch(progressIndicatorActions.START_WORKING(COLLECTION_PANEL_LOAD_FILES));
const files = await services.collectionService.files(uuid);
// Given the array of directories and files, create the appropriate tree nodes,
const sorted = sortFilesTree(tree);
const mapped = mapTreeValues(services.collectionService.extendFileURL)(sorted);
dispatch(collectionPanelFilesAction.SET_COLLECTION_FILES(mapped));
+ dispatch(progressIndicatorActions.STOP_WORKING(COLLECTION_PANEL_LOAD_FILES));
};
export const removeCollectionFiles = (filePaths: string[]) =>
import { GroupResource } from '~/models/group';
import { UserResource } from '~/models/user';
import { getUserUuid } from '~/common/getuser';
+import { getProgressIndicator } from '~/store/progress-indicator/progress-indicator-reducer';
+import { COLLECTION_PANEL_LOAD_FILES } from '~/store/collection-panel/collection-panel-files/collection-panel-files-actions';
type CssRules = 'card' | 'iconHeader' | 'tag' | 'label' | 'value' | 'link' | 'centeredLabel' | 'readOnlyIcon';
interface CollectionPanelDataProps {
item: CollectionResource;
isWritable: boolean;
+ isLoadingFiles: boolean;
}
type CollectionPanelProps = CollectionPanelDataProps & DispatchProp
isWritable = itemOwner.writableBy.indexOf(currentUserUUID || '') >= 0;
}
}
- return { item, isWritable };
+ const loadingFilesIndicator = getProgressIndicator(COLLECTION_PANEL_LOAD_FILES)(state.progressIndicator);
+ const isLoadingFiles = loadingFilesIndicator && loadingFilesIndicator!.working || false;
+ return { item, isWritable, isLoadingFiles };
})(
class extends React.Component<CollectionPanelProps> {
render() {
- const { classes, item, dispatch, isWritable } = this.props;
+ const { classes, item, dispatch, isWritable, isLoadingFiles } = this.props;
return item
? <>
<Card data-cy='collection-info-panel' className={classes.card}>
</CardContent>
</Card>
<div className={classes.card}>
- <CollectionPanelFiles isWritable={isWritable} />
+ <CollectionPanelFiles isWritable={isWritable} isLoading={isLoadingFiles} />
</div>
</>
: null;