Add DirectoriesScreen

This commit is contained in:
Vincent BRIDIER 2022-10-06 17:20:07 +02:00
parent 2711d674a7
commit 4396f1df17
No known key found for this signature in database
GPG key ID: 8571BFA20420D512
10 changed files with 238 additions and 24 deletions

View file

@ -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/

View file

@ -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==",

View file

@ -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",

View file

@ -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>

View file

@ -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;

View file

@ -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(),

View 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);

View file

@ -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);

View 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;

View file

@ -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"