RepositoryBrowser.tsx

import * as React from 'react';
import { connect } from 'react-redux';
import { translate } from 'react-i18next';
import { bindActionCreators } from 'redux';
import { withStyles } from '@material-ui/core/styles';
import { normalize } from 'path';

import { getFolder, uploadFile, deleteFolder, createGallery, removeFile } from 'repository/actions/admin';

import FolderDetails from 'model/repository/FolderDetails';
// import RepositoryFile from 'model/repository/RepositoryFile';

import Loading from 'ui/common/Loading';
import { PageContents } from 'ui/layout/PageLayout';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import Permissions from 'ui/common/permission/Permissions';

import FileCard from './c/FileCard';
import FolderCard from './c/FolderCard';
import RepositoryFolder from 'model/repository/RepositoryFolder';
import Button from '@material-ui/core/Button';
import { navigateTo } from 'actions/navigation';
import confirmAlert from 'utilities/confirmAlert';
import FolderCrumbs from './c/FolderCrumbs';

import Grid from '@material-ui/core/Grid';
import FileUploader from 'ui/common/file-uploader';
import CreateFolderDialog from './CreateFolderDialog';
import UpdateFolderDialog from './UpdateFolderDialog';

interface IRepositoryBrowserProps extends React.ClassAttributes<any> {
  classes: any;
  t?: any;

  root: string;
  path: string;
  folderPath: string;
  folder: FolderDetails;
  getFolder: (path: string) => any;
  uploadFile: (path: string, file: File) => any;
  deleteFolder: (path: string) => any;
  removeFile: (uuid: string) => any;
  createGallery: (path: string, title: string, description?: string) => any;
  navigateTo: (path: string, qs?: any) => any;
}

const styles = (theme) => ({

});

class RepositoryBrowser extends React.Component<IRepositoryBrowserProps, any> {

  protected static needs = [
    ({ ownProps }) => getFolder(normalize((ownProps.route.root || '/') + (ownProps.match.params.path || '/')).replace(/^(.+)\/$/, '$1')),
  ];

  public componentWillMount() {
    const { folder, folderPath, getFolder } = this.props;
    // console.log(`RepositoryBrowser.cwm...`, folderPath);

    if (!folder || (folder.folder && folder.folder.path !== folderPath)) {
      // console.log(`Loading folder root=${root} path=${path}`);
      getFolder(folderPath);
    }
  }

  public componentWillReceiveProps(nextProps) {
    const { path, folder, folderPath } = nextProps;
    const { getFolder } = this.props;

    // console.log(`Props root=${root} path=${path} folderPath=${folderPath} at=${folder && folder.folder && folder.folder.path}`, oldFolder);

    if (!folder || (!folder.folder && path && path !== '/') || (folder.folder && folder.folder.path !== folderPath)) {
      // console.log(`Loading folder root=${root} path=${path} ${folderPath}`);
      getFolder(folderPath);
    }
  }

  protected handleUploading = (files: File[]) => {
    const { uploadFile, folderPath } = this.props;
    for (const item of files) {
      uploadFile(folderPath, item);
    }
  }

  protected deleteFolder = (e) => {
    const { deleteFolder, navigateTo, folderPath, t } = this.props;

    deleteFolder(folderPath).then((result) => {
      if (result) {
        navigateTo('..');
      } else {
        confirmAlert(<p>{ t('repository.admin.p.repositoryBrowser.deleteFolderAlert', {folderPath}) }</p>);
      }
    });
  }

  protected deleteFile = (uuid: string) => {
    this.props.removeFile(uuid);
  }

  protected handleEditButton = (uuid: string) => {
    this.props.navigateTo(`/admin/repository/edit/${uuid}`);
  }

  protected createGallery = (e) => {
    const { createGallery, navigateTo, folder, folderPath, t } = this.props;

    createGallery(folderPath, folder.folder.name).then((result) => {
      if (result) {
        navigateTo(`/admin/repository/g${folderPath}/`);
      } else {
        confirmAlert(<p>{ t('repository.admin.p.repositoryBrowser.createGalleryAlert', {folderPath}) }</p>);
      }
    });
  }

  protected goToGallery = (e) => {
    const { navigateTo, folderPath } = this.props;
    navigateTo(`/admin/repository/g${folderPath}/`);
  }

  public render() {

    const { folder, root, path, t } = this.props;

    const parentFolder = new RepositoryFolder();
    parentFolder.path = '..';
    parentFolder.name = '..';

    const stillLoading: boolean = !folder;

    // console.log(folder);

    return (
      stillLoading ? <Loading /> : (
        <div>
          <ContentHeaderWithButton title={ <FolderCrumbs root={ root } path={ path } /> } buttons={
            <span>
              { ! folder.folder ? null :
                  folder.gallery ? <Button key="viewg" variant="contained" onClick={ this.goToGallery }>{ t('repository.admin.p.repositoryBrowser.viewGallery') }</Button> :
                    <Button onClick={ this.createGallery } key="createg" variant="contained">{ t('repository.admin.p.repositoryBrowser.createGallery') }</Button> }
              { folder.folder && folder.folder._permissions.delete && <Button onClick={ this.deleteFolder } key="deletef" variant="contained">{ t('repository.admin.p.repositoryBrowser.deleteFolder') }</Button> }
              { (! folder.folder || (folder.folder && folder.folder._permissions.create)) && <CreateFolderDialog root={ root } path={ path } /> }
              { folder.folder && folder.folder._permissions.write && <UpdateFolderDialog/> }
              { folder.folder && folder.folder._permissions.manage && <Permissions clazz={ RepositoryFolder.clazz } id={ folder.folder.id } /> }
            </span>
           } />
          <PageContents>
            <div>
              { folder.folder && root !== `${folder.folder.path}/` && <FolderCard compact key="parent" folder={ parentFolder } /> }
              { folder.subFolders.map((subFolder) => <FolderCard compact key={ subFolder.uuid } folder={ subFolder } />) }
            </div>
            <Grid item>
              <Grid container spacing={ 16 }>
                { folder.files.map((file) => <Grid key={ file.uuid } item xs={ 12 }><FileCard file={ file } deleteFile={ this.deleteFile } editFile={ this. handleEditButton }/></Grid>) }
              </Grid>
            </Grid>
            <div>
              <FileUploader handleUploading={ this.handleUploading }/>
            </div>
          </PageContents>
        </div>
      )
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  root: ownProps.route.root || '/',
  path: ownProps.match.params.path || '/',
  folderPath: normalize((ownProps.route.root || '/') + (ownProps.match.params.path || '/')).replace(/^(.+)\/$/, '$1'),
  folder: state.repository.admin.folder,
  loading: state.repository.admin.loading,
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  getFolder,
  uploadFile,
  deleteFolder,
  removeFile,
  createGallery,
  navigateTo,
}, dispatch);

export default translate()(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(RepositoryBrowser)));