Add DirectoriesScreen
This commit is contained in:
parent
2711d674a7
commit
4396f1df17
10 changed files with 238 additions and 24 deletions
|
|
@ -14,4 +14,6 @@
|
|||
- @react-navigation/native-stack
|
||||
- react-native-vector-icons
|
||||
- react-native-progress
|
||||
- react-native-svg
|
||||
- react-native-svg
|
||||
- react-native-b-crypt-bridge
|
||||
- react-native-animated-tree-view with https://github.com/shariqahmed525/react-native-animated-tree-view/pull/3/
|
||||
11
ComApp/package-lock.json
generated
11
ComApp/package-lock.json
generated
|
|
@ -19,6 +19,7 @@
|
|||
"npm": "^8.19.2",
|
||||
"react": "18.1.0",
|
||||
"react-native": "0.70.1",
|
||||
"react-native-animated-tree-view": "^0.1.4",
|
||||
"react-native-b-crypt-bridge": "file:react-native-b-crypt-bridge-2.0.0.tgz",
|
||||
"react-native-progress": "^5.0.0",
|
||||
"react-native-safe-area-context": "^4.4.1",
|
||||
|
|
@ -16613,6 +16614,11 @@
|
|||
"react": "18.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-animated-tree-view": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/react-native-animated-tree-view/-/react-native-animated-tree-view-0.1.4.tgz",
|
||||
"integrity": "sha512-/Lxo4o8MRvK0h9WNgsut0XBu7VTXlDHa737mrDuG+7bXJlNtvHKVuTxW580vN0GQNLM4orbiG6TSiOsvdY6MhQ=="
|
||||
},
|
||||
"node_modules/react-native-b-crypt-bridge": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "file:react-native-b-crypt-bridge-2.0.0.tgz",
|
||||
|
|
@ -31951,6 +31957,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"react-native-animated-tree-view": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/react-native-animated-tree-view/-/react-native-animated-tree-view-0.1.4.tgz",
|
||||
"integrity": "sha512-/Lxo4o8MRvK0h9WNgsut0XBu7VTXlDHa737mrDuG+7bXJlNtvHKVuTxW580vN0GQNLM4orbiG6TSiOsvdY6MhQ=="
|
||||
},
|
||||
"react-native-b-crypt-bridge": {
|
||||
"version": "file:react-native-b-crypt-bridge-2.0.0.tgz",
|
||||
"integrity": "sha512-nqjJtA0qUh6awVEmI41c3I3IxWHOm38UQGkXNg4iZmb4gg0MMFMBZFNAVHa5Xzl+YVDQ6rIfmrF0w/BnDaewsA==",
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
"npm": "^8.19.2",
|
||||
"react": "18.1.0",
|
||||
"react-native": "0.70.1",
|
||||
"react-native-animated-tree-view": "^0.1.4",
|
||||
"react-native-b-crypt-bridge": "file:react-native-b-crypt-bridge-2.0.0.tgz",
|
||||
"react-native-progress": "^5.0.0",
|
||||
"react-native-safe-area-context": "^4.4.1",
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import InstallScreen from './App/Views/InstallScreen';
|
|||
import HomeScreen from './App/Views/HomeScreen';
|
||||
import LoginScreen from './App/Views/LoginScreen';
|
||||
import SyncScreen from './App/Views/SyncScreen';
|
||||
import DirectoriesScreen from './App/Views/DirectoriesScreen';
|
||||
// Lang Flags
|
||||
import flagFR from './Resources/assets/img/flags/fr.png';
|
||||
import flagEN from './Resources/assets/img/flags/en.png';
|
||||
|
|
@ -174,6 +175,11 @@ class App extends React.Component {
|
|||
component={SyncScreen}
|
||||
options={{ headerTitle: () => CustomNavigation.LogoTitle(i18n.t('global.synchronization')) }}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="DirectoriesScreen"
|
||||
component={DirectoriesScreen}
|
||||
options={{ headerTitle: () => CustomNavigation.LogoTitle(i18n.t('app.folders')) }}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
</Provider>
|
||||
|
|
|
|||
|
|
@ -26,12 +26,80 @@ class DirectoryModel {
|
|||
return tmp;
|
||||
}
|
||||
|
||||
getAll(role, authorizedFolders, format, lang) {
|
||||
if (authorizedFolders !== null && authorizedFolders !== undefined) {
|
||||
authorizedFolders = JSON.parse(authorizedFolders);
|
||||
}
|
||||
let tmp = this.realm.objects(this.schema);
|
||||
if (role === 'USER') {
|
||||
if (authorizedFolders.length > 0) {
|
||||
tmp = tmp.filtered(
|
||||
'needAuthorization = 0 OR ' +
|
||||
authorizedFolders
|
||||
.map(folder => ' id = "' + folder.id + '"')
|
||||
.join(' OR '),
|
||||
);
|
||||
} else {
|
||||
tmp = tmp.filtered(
|
||||
'needAuthorization = 0'
|
||||
);
|
||||
}
|
||||
}
|
||||
if (format) {
|
||||
return this._recursiveDir(tmp, lang);
|
||||
}
|
||||
return tmp;
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.realm.write(() => {
|
||||
this.realm.delete(this.realm.objects(this.schema));
|
||||
});
|
||||
}
|
||||
|
||||
_recursiveDir(list, lang, parent = null) {
|
||||
let root = list.filter(e => e.parent === parent);
|
||||
let tmp = [];
|
||||
for (let i = 0; i < root.length; i++) {
|
||||
let childs = this._recursiveDir(list, lang, root[i].id);
|
||||
let name = JSON.parse(root[i].name);
|
||||
tmp[i] = {};
|
||||
tmp[i].id = root[i].id;
|
||||
tmp[i].name = this.getI18nName(lang, name);
|
||||
tmp[i].items = [];
|
||||
for (let j = 0; j < childs.length; j++) {
|
||||
childs[j].value = childs[j].id;
|
||||
tmp[i].items.push(childs[j]);
|
||||
}
|
||||
if (!tmp[i].items.length) {
|
||||
delete tmp[i].items;
|
||||
}
|
||||
}
|
||||
return tmp;
|
||||
}
|
||||
|
||||
getI18nName(lang, name) {
|
||||
let tmp = undefined;
|
||||
switch (lang) {
|
||||
case "fr":
|
||||
tmp = name.fr;
|
||||
break;
|
||||
case "en":
|
||||
tmp = name.en;
|
||||
break;
|
||||
case "de":
|
||||
tmp = name.de;
|
||||
break;
|
||||
case "es":
|
||||
tmp = name.es;
|
||||
break;
|
||||
}
|
||||
if (tmp === undefined) {
|
||||
tmp = name.fr;
|
||||
}
|
||||
return tmp;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default DirectoryModel;
|
||||
|
|
|
|||
|
|
@ -20,12 +20,13 @@ const initialState = {
|
|||
const reducer = (state = initialState, action) => {
|
||||
switch (action.type) {
|
||||
case 'INIT':
|
||||
let docs = Document.getAll(Directory.getAll(
|
||||
let directories = Directory.getAll(
|
||||
state.currentUser.role,
|
||||
state.currentUser.authorizedFolders,
|
||||
false,
|
||||
state.locale
|
||||
));
|
||||
);
|
||||
let docs = Document.getAll(directories);
|
||||
return {
|
||||
...state,
|
||||
users: User.getAll(),
|
||||
|
|
|
|||
86
ComApp/src/App/Views/DirectoriesScreen.js
Normal file
86
ComApp/src/App/Views/DirectoriesScreen.js
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
View,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Text,
|
||||
Image
|
||||
} from 'react-native';
|
||||
// Redux
|
||||
import { connect } from 'react-redux';
|
||||
// Treeview
|
||||
import TreeView from 'react-native-animated-tree-view';
|
||||
// Icon
|
||||
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
|
||||
// Assets
|
||||
import arrowDown from '../../Resources/assets/img/arrow_down.png';
|
||||
// Styles
|
||||
import styles from '../../Resources/Styles/DirectoriesStyle';
|
||||
|
||||
function mapStateToProps(state) {
|
||||
return {
|
||||
documents: state.app.documents,
|
||||
};
|
||||
}
|
||||
|
||||
class DirectoriesScreen extends React.Component {
|
||||
state = {
|
||||
documents: [],
|
||||
};
|
||||
|
||||
render() {
|
||||
const { folder } = this.props.route.params;
|
||||
let documentList = this.state.documents.map(document => {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={document.id.toString()}
|
||||
style={styles.file}
|
||||
onPress={() => this.openDocument(document)}>
|
||||
{document.type === 'pdf' ? (
|
||||
<FontAwesome5 name="file-pdf" color={'white'} size={60} />
|
||||
) : (
|
||||
<FontAwesome5 name="file-video" color={'white'} size={60} />
|
||||
)}
|
||||
<Text style={styles.fileTxt}>{document.title}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View
|
||||
style={{ width: 290, borderRightWidth: 1, borderColor: 'lightgrey' }}>
|
||||
<TreeView
|
||||
data={folder}
|
||||
leftImage={{}}
|
||||
rightImage={{ uri: Image.resolveAssetSource(arrowDown).uri }}
|
||||
containerStyle={styles.treeviewContainer}
|
||||
onClick={folder => {
|
||||
this.setState({
|
||||
documents: this.props.documents.filter(
|
||||
tmp => tmp.directory === folder.id,
|
||||
)
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<ScrollView style={styles.scrollview}>
|
||||
<View style={styles.filesContainer}>{documentList}</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
openDocument(document) {
|
||||
this.props.dispatch({ type: 'SET_CURRENT_OPENED_DOC', data: document });
|
||||
if (document.type === 'pdf') {
|
||||
this.props.navigation.navigate('PDFScreen', { uuid: document.uuid });
|
||||
} else if (document.type === 'mp4') {
|
||||
this.props.navigation.navigate('VideoScreen', { uuid: document.uuid });
|
||||
} else {
|
||||
console.log('Inconnu');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(DirectoriesScreen);
|
||||
|
|
@ -2,28 +2,34 @@ import React from 'react';
|
|||
import { View, ImageBackground, TouchableOpacity, Text, Image } from 'react-native';
|
||||
// Common Styles
|
||||
import commonStyles from '../../Resources/CommonStyles';
|
||||
// Redux
|
||||
import { connect } from 'react-redux';
|
||||
// Style
|
||||
import styles from '../../Resources/Styles/HomeStyle';
|
||||
// Translations
|
||||
import i18n from "../../I18n";
|
||||
// FileSytem
|
||||
import * as FileSystem from 'expo-file-system';
|
||||
// Database
|
||||
import { Setting } from "../../Database";
|
||||
import _ from 'lodash';
|
||||
|
||||
function mapStateToProps(state) {
|
||||
return {
|
||||
directories: state.app.directories,
|
||||
locale: state.app.locale,
|
||||
};
|
||||
}
|
||||
|
||||
class HomeScreen extends React.Component {
|
||||
|
||||
componentDidMount() {
|
||||
this.props.dispatch({ type: 'INIT' });
|
||||
}
|
||||
|
||||
render() {
|
||||
let buttons = Setting.get("HomeFolders");
|
||||
//buttons = JSON.parse(buttons.value);
|
||||
//console.log(typeof Object.values(buttons))
|
||||
const arr = [1, 2, 3]
|
||||
i18n.locale = this.props.locale;
|
||||
return (
|
||||
<ImageBackground source={{ uri: FileSystem.documentDirectory + 'BackgroundImage.png' }} style={commonStyles.background}>
|
||||
<View style={styles.container}>
|
||||
{/* {this.getHomeButton()} */}
|
||||
<TouchableOpacity onPress={() => { }} style={styles.button}>
|
||||
<TouchableOpacity onPress={() => this.openFolder(2)} style={styles.button}>
|
||||
<Image source={{ uri: FileSystem.documentDirectory + 'HomeButtonImage.png' }} style={styles.btnImg} />
|
||||
<Text style={styles.btnTxt}>{i18n.t('global.videos')}</Text>
|
||||
</TouchableOpacity>
|
||||
|
|
@ -40,19 +46,10 @@ class HomeScreen extends React.Component {
|
|||
);
|
||||
}
|
||||
|
||||
getHomeButtons() {
|
||||
let buttons = Setting.get("HomeFolders");
|
||||
if (buttons) {
|
||||
buttons = JSON.parse(buttons.value);
|
||||
_.forEach(buttons, function (value, key) {
|
||||
console.log(JSON.parse(value.name).fr)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
openFolder(id) {
|
||||
console.log(id)
|
||||
const folder = this.props.directories.filter(tmp => tmp.id === id);
|
||||
this.props.navigation.navigate('DirectoriesScreen', { folder: folder });
|
||||
}
|
||||
}
|
||||
|
||||
export default HomeScreen;
|
||||
export default connect(mapStateToProps)(HomeScreen);
|
||||
37
ComApp/src/Resources/Styles/DirectoriesStyle.js
Normal file
37
ComApp/src/Resources/Styles/DirectoriesStyle.js
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import { StyleSheet } from 'react-native';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
},
|
||||
treeviewContainer: {
|
||||
width: 290,
|
||||
},
|
||||
scrollview: {
|
||||
flex: 2,
|
||||
},
|
||||
filesContainer: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
file: {
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: 200,
|
||||
width: 180,
|
||||
backgroundColor: '#ce3029',
|
||||
margin: 10,
|
||||
},
|
||||
fileTxt: {
|
||||
textAlign: 'center',
|
||||
color: 'white',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 18,
|
||||
padding: 5
|
||||
}
|
||||
});
|
||||
|
||||
export default styles;
|
||||
|
|
@ -8839,6 +8839,11 @@
|
|||
"resolved" "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
|
||||
"version" "17.0.2"
|
||||
|
||||
"react-native-animated-tree-view@^0.1.4":
|
||||
"integrity" "sha512-/Lxo4o8MRvK0h9WNgsut0XBu7VTXlDHa737mrDuG+7bXJlNtvHKVuTxW580vN0GQNLM4orbiG6TSiOsvdY6MhQ=="
|
||||
"resolved" "https://registry.npmjs.org/react-native-animated-tree-view/-/react-native-animated-tree-view-0.1.4.tgz"
|
||||
"version" "0.1.4"
|
||||
|
||||
"react-native-b-crypt-bridge@file:react-native-b-crypt-bridge-2.0.0.tgz":
|
||||
"integrity" "sha512-nqjJtA0qUh6awVEmI41c3I3IxWHOm38UQGkXNg4iZmb4gg0MMFMBZFNAVHa5Xzl+YVDQ6rIfmrF0w/BnDaewsA=="
|
||||
"resolved" "file:react-native-b-crypt-bridge-2.0.0.tgz"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue