RepositoryBrowser.tsx 6.76 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
import { bindActionCreators } from 'redux';
import { normalize } from 'path';

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

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

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

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

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

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

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

  public componentWillMount() {
52
    const { folder, folderPath, getFolder } = this.props;
53
    // console.log(`RepositoryBrowser.cwm...`, folderPath);
Matija Obreza's avatar
Matija Obreza committed
54
55

    if (!folder || (folder.folder && folder.folder.path !== folderPath)) {
56
      // console.log(`Loading folder root=${root} path=${path}`);
Matija Obreza's avatar
Matija Obreza committed
57
58
59
60
61
      getFolder(folderPath);
    }
  }

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

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

    if (!folder || (!folder.folder && path && path !== '/') || (folder.folder && folder.folder.path !== folderPath)) {
68
      // console.log(`Loading folder root=${root} path=${path} ${folderPath}`);
Matija Obreza's avatar
Matija Obreza committed
69
70
71
72
      getFolder(folderPath);
    }
  }

Maxym Borodenko's avatar
Maxym Borodenko committed
73
  protected handleUploading = (files: File[]) => {
Matija Obreza's avatar
Matija Obreza committed
74
    const { uploadFile, folderPath } = this.props;
Maxym Borodenko's avatar
Maxym Borodenko committed
75
76
77
    for (const item of files) {
      uploadFile(folderPath, item);
    }
Matija Obreza's avatar
Matija Obreza committed
78
79
80
  }

  protected deleteFolder = (e) => {
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
81
    const { deleteFolder, navigateTo, folderPath, t } = this.props;
Matija Obreza's avatar
Matija Obreza committed
82
83
84
85
86

    deleteFolder(folderPath).then((result) => {
      if (result) {
        navigateTo('..');
      } else {
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
87
        confirmAlert(<p>{ t('repository.admin.p.repositoryBrowser.deleteFolderAlert', {folderPath}) }</p>);
Matija Obreza's avatar
Matija Obreza committed
88
89
90
91
      }
    });
  }

Maxym Borodenko's avatar
Maxym Borodenko committed
92
93
94
95
96
97
98
99
  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
100
  protected createGallery = (e) => {
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
101
    const { createGallery, navigateTo, folder, folderPath, t } = this.props;
Matija Obreza's avatar
Matija Obreza committed
102
103
104

    createGallery(folderPath, folder.folder.name).then((result) => {
      if (result) {
105
        navigateTo(`/admin/repository/g${folderPath}/`);
Matija Obreza's avatar
Matija Obreza committed
106
      } else {
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
107
        confirmAlert(<p>{ t('repository.admin.p.repositoryBrowser.createGalleryAlert', {folderPath}) }</p>);
Matija Obreza's avatar
Matija Obreza committed
108
109
110
111
112
113
      }
    });
  }

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

Matija Obreza's avatar
Matija Obreza committed
117
118
  public render() {

Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
119
    const { folder, root, path, t } = this.props;
Matija Obreza's avatar
Matija Obreza committed
120
121
122
123
124
125
126

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

    const stillLoading: boolean = !folder;

127
    // console.log(folder);
Matija Obreza's avatar
Matija Obreza committed
128
129
130
131

    return (
      stillLoading ? <Loading /> : (
        <div>
Matija Obreza's avatar
Matija Obreza committed
132
          <ContentHeaderWithButton title={ <FolderCrumbs root={ root } path={ path } /> } buttons={
Matija Obreza's avatar
Matija Obreza committed
133
134
            <span>
              { ! folder.folder ? null :
135
136
137
                  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
138
139
              { (! 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
140
141
142
              { folder.folder && folder.folder._permissions.manage && <Permissions clazz={ RepositoryFolder.clazz } id={ folder.folder.id } /> }
            </span>
           } />
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
143
          <PageContents className={ `container-spacing-horizontal pt-1rem` }>
Matija Obreza's avatar
Matija Obreza committed
144
145
146
147
            <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
148
149
            <Grid item>
              <Grid container spacing={ 16 }>
Maxym Borodenko's avatar
Maxym Borodenko committed
150
                { 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
151
152
              </Grid>
            </Grid>
Matija Obreza's avatar
Matija Obreza committed
153
            <div>
Maxym Borodenko's avatar
Maxym Borodenko committed
154
              <FileUploader handleUploading={ this.handleUploading }/>
Matija Obreza's avatar
Matija Obreza committed
155
156
157
158
159
160
161
162
163
164
165
            </div>
          </PageContents>
        </div>
      )
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  root: ownProps.route.root || '/',
  path: ownProps.match.params.path || '/',
Matija Obreza's avatar
Matija Obreza committed
166
  folderPath: normalize((ownProps.route.root || '/') + (ownProps.match.params.path || '/')).replace(/^(.+)\/$/, '$1'),
Matija Obreza's avatar
Matija Obreza committed
167
168
169
170
171
172
173
174
  folder: state.repository.admin.folder,
  loading: state.repository.admin.loading,
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  getFolder,
  uploadFile,
  deleteFolder,
Maxym Borodenko's avatar
Maxym Borodenko committed
175
  removeFile,
Matija Obreza's avatar
Matija Obreza committed
176
  createGallery,
Matija Obreza's avatar
Matija Obreza committed
177
178
179
  navigateTo,
}, dispatch);

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
180
export default translate()(connect(mapStateToProps, mapDispatchToProps)(RepositoryBrowser));