RepositoryBrowser.tsx 6.83 KB
Newer Older
Matija Obreza's avatar
Matija Obreza committed
1
2
import * as React from 'react';
import { connect } from 'react-redux';
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
3
import { translate } from 'react-i18next';
Matija Obreza's avatar
Matija Obreza committed
4
5
6
7
import { bindActionCreators } from 'redux';
import { withStyles } from '@material-ui/core/styles';
import { normalize } from 'path';

Maxym Borodenko's avatar
Maxym Borodenko committed
8
import { getFolder, uploadFile, deleteFolder, createGallery, removeFile } from 'repository/actions/admin';
Matija Obreza's avatar
Matija Obreza committed
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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';
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
24
import FolderCrumbs from './c/FolderCrumbs';
Matija Obreza's avatar
Matija Obreza committed
25

Matija Obreza's avatar
Matija Obreza committed
26
import Grid from '@material-ui/core/Grid';
Maxym Borodenko's avatar
Maxym Borodenko committed
27
28
29
import FileUploader from 'ui/common/file-uploader';
import CreateFolderDialog from './CreateFolderDialog';
import UpdateFolderDialog from './UpdateFolderDialog';
Matija Obreza's avatar
Matija Obreza committed
30
31
32
33
34
35
36

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

  root: string;
  path: string;
Matija Obreza's avatar
Matija Obreza committed
37
  folderPath: string;
Matija Obreza's avatar
Matija Obreza committed
38
39
40
41
  folder: FolderDetails;
  getFolder: (path: string) => any;
  uploadFile: (path: string, file: File) => any;
  deleteFolder: (path: string) => any;
Maxym Borodenko's avatar
Maxym Borodenko committed
42
  removeFile: (uuid: string) => any;
Matija Obreza's avatar
Matija Obreza committed
43
  createGallery: (path: string, title: string, description?: string) => any;
Matija Obreza's avatar
Matija Obreza committed
44
45
46
47
48
49
50
51
52
53
  navigateTo: (path: string, qs?: any) => any;
}

const styles = (theme) => ({

});

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

  protected static needs = [
54
    ({ ownProps }) => getFolder(normalize((ownProps.route.root || '/') + (ownProps.match.params.path || '/')).replace(/^(.+)\/$/, '$1')),
Matija Obreza's avatar
Matija Obreza committed
55
56
57
  ];

  public componentWillMount() {
58
    const { folder, folderPath, getFolder } = this.props;
59
    // console.log(`RepositoryBrowser.cwm...`, folderPath);
Matija Obreza's avatar
Matija Obreza committed
60
61

    if (!folder || (folder.folder && folder.folder.path !== folderPath)) {
62
      // console.log(`Loading folder root=${root} path=${path}`);
Matija Obreza's avatar
Matija Obreza committed
63
64
65
66
67
      getFolder(folderPath);
    }
  }

  public componentWillReceiveProps(nextProps) {
68
69
    const { path, folder, folderPath } = nextProps;
    const { getFolder } = this.props;
Matija Obreza's avatar
Matija Obreza committed
70

71
    // console.log(`Props root=${root} path=${path} folderPath=${folderPath} at=${folder && folder.folder && folder.folder.path}`, oldFolder);
Matija Obreza's avatar
Matija Obreza committed
72
73

    if (!folder || (!folder.folder && path && path !== '/') || (folder.folder && folder.folder.path !== folderPath)) {
74
      // console.log(`Loading folder root=${root} path=${path} ${folderPath}`);
Matija Obreza's avatar
Matija Obreza committed
75
76
77
78
      getFolder(folderPath);
    }
  }

Maxym Borodenko's avatar
Maxym Borodenko committed
79
  protected handleUploading = (files: File[]) => {
Matija Obreza's avatar
Matija Obreza committed
80
    const { uploadFile, folderPath } = this.props;
Maxym Borodenko's avatar
Maxym Borodenko committed
81
82
83
    for (const item of files) {
      uploadFile(folderPath, item);
    }
Matija Obreza's avatar
Matija Obreza committed
84
85
86
  }

  protected deleteFolder = (e) => {
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
87
    const { deleteFolder, navigateTo, folderPath, t } = this.props;
Matija Obreza's avatar
Matija Obreza committed
88
89
90
91
92

    deleteFolder(folderPath).then((result) => {
      if (result) {
        navigateTo('..');
      } else {
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
93
        confirmAlert(<p>{ t('repository.admin.p.repositoryBrowser.deleteFolderAlert', {folderPath}) }</p>);
Matija Obreza's avatar
Matija Obreza committed
94
95
96
97
      }
    });
  }

Maxym Borodenko's avatar
Maxym Borodenko committed
98
99
100
101
102
103
104
105
  protected deleteFile = (uuid: string) => {
    this.props.removeFile(uuid);
  }

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

Matija Obreza's avatar
Matija Obreza committed
106
  protected createGallery = (e) => {
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
107
    const { createGallery, navigateTo, folder, folderPath, t } = this.props;
Matija Obreza's avatar
Matija Obreza committed
108
109
110

    createGallery(folderPath, folder.folder.name).then((result) => {
      if (result) {
111
        navigateTo(`/admin/repository/g${folderPath}/`);
Matija Obreza's avatar
Matija Obreza committed
112
      } else {
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
113
        confirmAlert(<p>{ t('repository.admin.p.repositoryBrowser.createGalleryAlert', {folderPath}) }</p>);
Matija Obreza's avatar
Matija Obreza committed
114
115
116
117
118
119
      }
    });
  }

  protected goToGallery = (e) => {
    const { navigateTo, folderPath } = this.props;
120
    navigateTo(`/admin/repository/g${folderPath}/`);
Matija Obreza's avatar
Matija Obreza committed
121
122
  }

Matija Obreza's avatar
Matija Obreza committed
123
124
  public render() {

Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
125
    const { folder, root, path, t } = this.props;
Matija Obreza's avatar
Matija Obreza committed
126
127
128
129
130
131
132

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

    const stillLoading: boolean = !folder;

133
    // console.log(folder);
Matija Obreza's avatar
Matija Obreza committed
134
135
136
137

    return (
      stillLoading ? <Loading /> : (
        <div>
Matija Obreza's avatar
Matija Obreza committed
138
          <ContentHeaderWithButton title={ <FolderCrumbs root={ root } path={ path } /> } buttons={
Matija Obreza's avatar
Matija Obreza committed
139
140
            <span>
              { ! folder.folder ? null :
141
142
143
                  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> }
Maxym Borodenko's avatar
Maxym Borodenko committed
144
145
              { (! folder.folder || (folder.folder && folder.folder._permissions.create)) && <CreateFolderDialog root={ root } path={ path } /> }
              { folder.folder && folder.folder._permissions.write && <UpdateFolderDialog/> }
Matija Obreza's avatar
Matija Obreza committed
146
147
148
149
150
151
152
153
              { 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>
Matija Obreza's avatar
Matija Obreza committed
154
155
            <Grid item>
              <Grid container spacing={ 16 }>
Maxym Borodenko's avatar
Maxym Borodenko committed
156
                { folder.files.map((file) => <Grid key={ file.uuid } item xs={ 12 }><FileCard file={ file } deleteFile={ this.deleteFile } editFile={ this. handleEditButton }/></Grid>) }
Matija Obreza's avatar
Matija Obreza committed
157
158
              </Grid>
            </Grid>
Matija Obreza's avatar
Matija Obreza committed
159
            <div>
Maxym Borodenko's avatar
Maxym Borodenko committed
160
              <FileUploader handleUploading={ this.handleUploading }/>
Matija Obreza's avatar
Matija Obreza committed
161
162
163
164
165
166
167
168
169
170
171
            </div>
          </PageContents>
        </div>
      )
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  root: ownProps.route.root || '/',
  path: ownProps.match.params.path || '/',
Matija Obreza's avatar
Matija Obreza committed
172
  folderPath: normalize((ownProps.route.root || '/') + (ownProps.match.params.path || '/')).replace(/^(.+)\/$/, '$1'),
Matija Obreza's avatar
Matija Obreza committed
173
174
175
176
177
178
179
180
  folder: state.repository.admin.folder,
  loading: state.repository.admin.loading,
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  getFolder,
  uploadFile,
  deleteFolder,
Maxym Borodenko's avatar
Maxym Borodenko committed
181
  removeFile,
Matija Obreza's avatar
Matija Obreza committed
182
  createGallery,
Matija Obreza's avatar
Matija Obreza committed
183
184
185
  navigateTo,
}, dispatch);

Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
186
export default translate()(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(RepositoryBrowser)));