heinrich/klatab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code aufgeräumt

Browse Source
This commit is contained in:
Heinrich Thaler
2024-09-19 16:29:47 +02:00
parent b7a7dbec61
commit cf151f428a
1 changed files with 31 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
common/FilterModal.tsx
View File

@@ -1,19 +1,19 @@
import React, { useState, useEffect } from 'react';
import React, { useState } from 'react';
import { Modal, View, StyleSheet, Text } from 'react-native';
import { useColors } from '../common/colors';
import { ThemeButton, ThemeText } from '../common/ThemeTypes';
import RNPickerSelect from 'react-native-picker-select';
import { FontAwesome } from '@expo/vector-icons';
import { useColors } from '../common/colors';
import { ThemeButton, ThemeText } from '../common/ThemeTypes';
import { getDefaultFilter } from '../utils/getDefaultFilter';
const categories = { class: 'Klasse', room: 'Raum', teacher: 'Lehrer' };
type FilterModalTypes = {
filter?: any,
setFilter?: (date: any) => void,
userInformation: any,
baseData: any,
}
filter?: any;
setFilter?: (date: any) => void;
userInformation: any;
baseData: any;
};
const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterModalTypes) => {
const colors = useColors();
@@ -21,13 +21,6 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
const [showFilterModal, setShowFilterModal] = useState(false);
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
paddingRight: 10,
gap: 10,
},
modalContainer: {
flex: 1,
justifyContent: 'center',
@@ -39,21 +32,14 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
backgroundColor: colors.backSecondary,
borderRadius: 20,
width: '80%',
padding: 20,
borderWidth: 5,
borderColor: colors.backSecondary,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
borderWidth: 5,
borderColor: colors.backSecondary,
padding: 20,
},
modalTitle: {
fontWeight: 'bold',
fontSize: 20,
},
modalSubtitle: {
fontSize: 16,
@@ -94,7 +80,7 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
onValueChange={(itemValue) => {
setTempFilter(prevState => ({ ...prevState, type: itemValue, value: null }));
}}
items={Object.keys(baseData).map((item) => ({
items={Object.keys(baseData).map(item => ({
label: categories[item],
value: item,
}))}
@@ -113,7 +99,7 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
onValueChange={(itemValue) => {
setTempFilter(prevState => ({ ...prevState, value: itemValue }));
}}
items={baseData[tempFilter.type].map((item) => ({
items={baseData[tempFilter.type].map(item => ({
label: item.name,
value: item.id,
}))}
@@ -121,6 +107,7 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
/>
</View>
)}
<View>
<ThemeText style={styles.modalSubtitle}>Gruppe</ThemeText>
<RNPickerSelect
@@ -139,11 +126,21 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
]}
placeholder={{}}
/>
</View>
<View style={styles.modalButtons}>
<ThemeButton onPress={() => { setTempFilter(getDefaultFilter(userInformation)); }}><Text>Zurücksetzen</Text></ThemeButton>
<ThemeButton onPress={() => { setFilter(tempFilter); setShowFilterModal(false) }} disabled={!Boolean(tempFilter.value) || (tempFilter.type == 'class' && !Boolean(tempFilter.value))}><Text>Anwenden</Text></ThemeButton>
<ThemeButton onPress={() => setTempFilter(getDefaultFilter(userInformation))}>
<Text>Zurücksetzen</Text>
</ThemeButton>
<ThemeButton
onPress={() => {
setFilter(tempFilter);
setShowFilterModal(false);
}}
disabled={!Boolean(tempFilter.value) || (tempFilter.type === 'class' && !Boolean(tempFilter.value))}
>
<Text>Anwenden</Text>
</ThemeButton>
</View>
</View>
</View>
@@ -152,7 +149,9 @@ const FilterModal = ({ filter, setFilter, userInformation, baseData }: FilterMod
return (
<>
<ThemeButton onPress={() => { setTempFilter(filter); setShowFilterModal(true) }} ><FontAwesome name="filter" size={24} /></ThemeButton>
<ThemeButton onPress={() => { setTempFilter(filter); setShowFilterModal(true); }}>
<FontAwesome name="filter" size={24} />
</ThemeButton>
{renderFilterModal()}
</>
);