@olea-bps/base 1.1.10 → 1.1.12

package/components/ComponentJobsFilter/index.js

@@ -12,19 +12,17 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import {FlatList, SafeAreaView, StyleSheet, View} from 'react-native';
-import {connect} from 'react-redux'
-import {withTranslation} from "react-i18next";
-import {Appbar, withTheme} from "react-native-paper";
+import React from 'react'
+import { FlatList, SafeAreaView, StyleSheet, View } from 'react-native'
+import { connect } from 'react-redux'
+import { withTranslation } from 'react-i18next'
+import { Appbar, withTheme } from 'react-native-paper'
 import { CheckBox } from 'react-native-elements'
 
-import merge from 'lodash/merge';
-import componentStyles from "./styles";
-import AppbarComponent from '../AppBar';
-import IconsOpenasist from '../../libraries/icons-openasist';
-
-
+import merge from 'lodash/merge'
+import componentStyles from './styles'
+import AppbarComponent from '../AppBar'
+import IconsOpenasist from '../../libraries/icons-openasist'
 
 /**
  * JobPortalFilter View
@@ -38,151 +36,155 @@ import IconsOpenasist from '../../libraries/icons-openasist';
  *  - none
  */
 class JobFilterComponent extends React.Component {
-    static navigationOptions = {
-        header: null
-    };
-
-    state = {
-        data: null,
-        selectedIds: [],
-        checked: []
-    };
-
-    // Styles of this component
-    styles;
-
-    checked;
-
-    selectedIds;
-
-    catData;
-
-    constructor(props) {
-      super(props);
-      // ------------------------------------------------------------------------
-      // PLUGIN FUNCTIONALITY
-      // ------------------------------------------------------------------------
-      const {pluginStyles, theme} = this.props;
-      this.styles = componentStyles(theme);
-      if (pluginStyles) {
-          this.styles = merge(this.styles, pluginStyles);
-      }
-      this.styles = StyleSheet.create(this.styles);
-      // ------------------------------------------------------------------------
+  static navigationOptions = {
+    header: null
+  }
 
-    }
+  state = {
+    data: null,
+    selectedIds: [],
+    checked: []
+  }
 
-    componentDidMount(){
-      this.setState({
-        checked: this.props.route.params.checked,
-        selectedIds: this.props.route.params.selectedIds,
-        data: this.props.route.params.catData
-      });
-    }
+  // Styles of this component
+  styles
 
-    goBack() {
-        const { navigation, route } = this.props;
-        navigation.navigate('Job', {
-          selectedIds: this.state.selectedIds,
-          checked: this.state.checked
-        });
-    }
+  checked
 
+  selectedIds
 
+  catData
 
-    handleChange = (index) => {
-      let checked = [...this.state.checked];
-        let selectedIds = [...this.state.selectedIds];
-        var data = this.state.data;
-        selectedIds = this.addOrRemSelectedIds(data, index, selectedIds);
-        checked[index] = !checked[index];
-        this.setState({ checked, selectedIds });
+  constructor (props) {
+    super(props)
+    // ------------------------------------------------------------------------
+    // PLUGIN FUNCTIONALITY
+    // ------------------------------------------------------------------------
+    const { pluginStyles, theme } = this.props
+    this.styles = componentStyles(theme)
+    if (pluginStyles) {
+      this.styles = merge(this.styles, pluginStyles)
     }
+    this.styles = StyleSheet.create(this.styles)
+    // ------------------------------------------------------------------------
+  }
 
-    addOrRemSelectedIds = (data, index, selectedIds) => {
-      for(var i = 0; i < data[index].id.length; i++){
-        let value = data[index].id[i];
-        if(selectedIds.indexOf(value) === -1){
-          selectedIds.push(value);
-        }else{
-          selectedIds.splice(selectedIds.indexOf(value), 1);
-        }
-      }
-      return selectedIds;
-    }
+  componentDidMount () {
+    this.setState((_prevState, props) => ({
+      checked: props.route.params.checked,
+      selectedIds: props.route.params.selectedIds,
+      data: props.route.params.catData
+    }))
+  }
 
-    _keyExtractor = (item, index) => {
-      return item?.name ?? index.toString();
-    };
-
-    _renderListView = () => {
-      const { colors } = this.props.theme;
-      let { data, checked } = this.state;
-
-      return(
-        <FlatList
-            data={this.state.data}
-            extraData={this.state}
-            renderItem={({item, index}) =>
-              <CheckBox
-                checked={checked[index]}
-                title={item.name}
-                textStyle={this.styles.title}
-                onPress={() => this.handleChange(index)}
-                checkedColor={colors.primary}
-              />
-            }
-            keyExtractor={this._keyExtractor}
-        />
+  goBack () {
+    const { navigation } = this.props
+
+    navigation.popTo('Job', {
+      selectedIds: this.state.selectedIds,
+      checked: this.state.checked
+    })
+  }
+
+  handleChange = (index) => {
+    this.setState(prevState => {
+      const checked = [...prevState.checked]
+      const selectedIds = this.addOrRemSelectedIds(
+        prevState.data,
+        index,
+        [...prevState.selectedIds]
       )
+
+      checked[index] = !checked[index]
+
+      return { checked, selectedIds }
+    })
+  }
+
+  addOrRemSelectedIds = (data, index, selectedIds) => {
+    for (let i = 0; i < data[index].id.length; i++) {
+      const value = data[index].id[i]
+      if (selectedIds.indexOf(value) === -1) {
+        selectedIds.push(value)
+      } else {
+        selectedIds.splice(selectedIds.indexOf(value), 1)
+      }
     }
+    return selectedIds
+  }
+
+  _keyExtractor = (item, index) => {
+    return item?.name ?? index.toString()
+  }
+
+  _renderListView = () => {
+    const { colors } = this.props.theme
+    const { data, checked } = this.state
+
+    return (
+      <FlatList
+        data={data}
+        extraData={this.state}
+        renderItem={({ item, index }) =>
+          <CheckBox
+            checked={checked[index]}
+            title={item.name}
+            textStyle={this.styles.title}
+            onPress={() => this.handleChange(index)}
+            checkedColor={colors.checkboxChecked}
+            uncheckedColor={colors.checkboxUnchecked}
+          />}
+        keyExtractor={this._keyExtractor}
+      />
+    )
+  }
 
-    /**
+  /**
      * Tab for services
      * @returns {*}
      * @constructor
      */
 
-  render() {
-
-      // ------------------------------------------------------------------------
-      // PLUGIN FUNCTIONALITY
-      // ------------------------------------------------------------------------
-      const PluginComponent = this.props.pluginComponent;
-      if (PluginComponent) {
-          return <PluginComponent />;
-      }
-      // ------------------------------------------------------------------------
-      const {colors, themeStyles} = this.props.theme;
-
-      return (
-          <SafeAreaView style={[this.styles.container, themeStyles.appSafeAreaContainer]}>
-              <View>
-                  <AppbarComponent {...this.props}
-                      title="Filter"
-                      leftAction={
-                          <Appbar.Action
-                              icon={props => <IconsOpenasist {...props} icon={'back'} color={colors.primaryText} /> }
-                              onPress={() => {
-                                  this.goBack();
-                              }} />
+  render () {
+    // ------------------------------------------------------------------------
+    // PLUGIN FUNCTIONALITY
+    // ------------------------------------------------------------------------
+    const PluginComponent = this.props.pluginComponent
+    if (PluginComponent) {
+      return <PluginComponent />
+    }
+    // ------------------------------------------------------------------------
+    const { colors, themeStyles } = this.props.theme
+
+    return (
+      <SafeAreaView style={[this.styles.container, themeStyles.appSafeAreaContainer]}>
+        <View>
+          <AppbarComponent
+            {...this.props}
+            title='Filter'
+            leftAction={
+              <Appbar.Action
+                icon={props => <IconsOpenasist {...props} icon='back' color={colors.primaryText} />}
+                onPress={() => {
+                  this.goBack()
+                }}
+              />
                        }
-                  />
-              </View>
-              <View style={themeStyles.container}>
-                  {this._renderListView()}
-              </View>
-          </SafeAreaView>
-    );
+          />
+        </View>
+        <View style={themeStyles.container}>
+          {this._renderListView()}
+        </View>
+      </SafeAreaView>
+    )
   }
 }
 
-
 const mapStateToProps = state => {
-    return {
-        pluginComponent: state.pluginReducer.jobFilter.component,
-        pluginStyles: state.pluginReducer.jobFilter.styles,
-    };
-};
+  return {
+    pluginComponent: state.pluginReducer.jobFilter.component,
+    pluginStyles: state.pluginReducer.jobFilter.styles
+  }
+}
 
 export default connect(mapStateToProps, null)(withTranslation()(withTheme(JobFilterComponent)))

package/components/CourseDetailDialog/index.js

@@ -12,20 +12,20 @@
  * limitations under the License.
  */
 
-import { useMemo } from 'react';
+import { useMemo } from 'react'
 import {
-    StyleSheet,
-    Linking,
-    TouchableOpacity
-} from 'react-native';
+  StyleSheet,
+  Linking,
+  TouchableOpacity
+} from 'react-native'
 
-import { useTheme, Text, Dialog, Portal } from 'react-native-paper';
-import { useTranslation } from 'react-i18next';
+import { useTheme, Text, Dialog, Portal } from 'react-native-paper'
+import { useTranslation } from 'react-i18next'
 
-import IconsOpenasist from '../../libraries/icons-openasist';
-import { useIncreaseFontSize } from '../../libraries/core';
+import IconsOpenasist from '../../libraries/icons-openasist'
+import { useIncreaseFontSize } from '../../libraries/core'
 
-import componentStyles from './styles';
+import componentStyles from './styles'
 
 /**
  * Ein Dialog, der sich über die derzeitige Ansicht legt, welcher die Detailinformationen zu einer Vorlesung anzeigt.
@@ -53,70 +53,72 @@ import componentStyles from './styles';
  *     />
  * );
  */
-export default function CourseDetailDialog({ course, visible, onClose, onDismiss }) {
-    const theme = useTheme();
-    const { t } = useTranslation();
+export default function CourseDetailDialog ({ course, visible, onClose, onDismiss }) {
+  const theme = useTheme()
+  const { t } = useTranslation()
 
-    const styles = useMemo(
-        () => StyleSheet.create(componentStyles(theme)),
-        [theme]
-    );
+  const styles = useMemo(
+    () => StyleSheet.create(componentStyles(theme)),
+    [theme]
+  )
 
-    const { room, url, info, title, times, type, lecturer, ...extraCourseData } = course ?? {};
-    const courseDetails = [
-        { ...room, key: 'room', displayName: t('timetable:detail.room'), icon: 'map-search' },
-        { key: 'startTimes', data: times?.[0]?.start, displayName: t('timetable:detail.start') },
-        { key: 'endTimes', data: times?.[0]?.end, displayName: t('timetable:detail.end') },
-        { ...type, key: 'type', displayName: t('timetable:detail.type') },
-        { ...lecturer?.[0], key: 'lecturer', displayName: t('timetable:detail.lecturer') },
-        { ...url, key: 'url', displayName: t('timetable:detail.url'), icon: 'forward' },
-        { ...info, key: 'info', displayName: t('timetable:detail.info') },
+  const { room, url, info, title, times, type, lecturer, addon, ...extraCourseData } = course ?? {}
+  const courseDetails = [
+    { ...room, key: 'room', displayName: t('timetable:detail.room'), icon: 'map-search' },
+    { key: 'startTimes', data: times?.[0]?.start, displayName: t('timetable:detail.start') },
+    { key: 'endTimes', data: times?.[0]?.end, displayName: t('timetable:detail.end') },
+    { ...type, key: 'type', displayName: t('timetable:detail.type') },
+    { ...lecturer?.[0], key: 'lecturer', displayName: t('timetable:detail.lecturer') },
+    { ...url, key: 'url', displayName: t('timetable:detail.url'), icon: 'forward' },
+    { ...info, key: 'info', displayName: t('timetable:detail.info') },
+    { ...addon, key: 'addon', displayName: t('timetable:detail.addon') },
 
-        // Restliche Daten werden in Format gebracht und angefügt
-        ...Object.entries(extraCourseData)
-            .map(
-                ([courseDataKey, courseDataValue]) =>
-                (
-                    {
-                        key: courseDataKey,
-                        displayName: courseDataValue?.displayname,
-                        ...courseDataValue,
-                    }
-                )
-            )
-    ]
-        .filter(courseDetail => courseDetail?.data ? true : false);
+    // Restliche Daten werden in Format gebracht und angefügt
+    ...Object.entries(extraCourseData)
+      .map(
+        ([courseDataKey, courseDataValue]) =>
+          (
+            {
+              key: courseDataKey,
+              displayName: courseDataValue?.displayname,
+              ...courseDataValue
+            }
+          )
+      )
+  ]
+    .filter(courseDetail => !!courseDetail?.data)
 
-    return (
-        <Portal>
-            <Dialog visible={visible} onDismiss={onDismiss}>
-                <Dialog.Title>{title?.data ?? 'Keine weiteren Informationen'}</Dialog.Title>
-                <Dialog.Content>
-                    {
-                        courseDetails
-                            ? courseDetails.map(
-                                courseDetail =>
-                                    <CourseDetailDialogText
-                                        key={courseDetail?.displayName}
-                                        title={courseDetail?.displayName}
-                                        content={courseDetail?.data}
-                                        url={courseDetail?.url}
-                                        icon={courseDetail?.icon}
-                                    />
-                            )
-                            : <Text>
-                                Keine Informationen verfügbar
-                            </Text>
-                    }
-                </Dialog.Content>
-                <Dialog.Actions>
-                    <TouchableOpacity onPress={onClose}>
-                        <Text style={styles.dismissButton}>{t('timetable:close')}</Text>
-                    </TouchableOpacity>
-                </Dialog.Actions>
-            </Dialog>
-        </Portal>
-    );
+  return (
+    <Portal>
+      <Dialog visible={visible} onDismiss={onDismiss}>
+        <Dialog.Title>{title?.data ?? 'Keine weiteren Informationen'}</Dialog.Title>
+        <Dialog.Content>
+          {courseDetails
+            ? (
+                courseDetails.map(courseDetail => (
+                  <CourseDetailDialogText
+                    key={courseDetail?.displayName}
+                    title={courseDetail?.displayName}
+                    content={courseDetail?.data}
+                    url={courseDetail?.url}
+                    icon={courseDetail?.icon}
+                  />
+                ))
+              )
+            : (
+              <Text>
+                Keine Informationen verfügbar
+              </Text>
+              )}
+        </Dialog.Content>
+        <Dialog.Actions>
+          <TouchableOpacity onPress={onClose}>
+            <Text style={styles.dismissButton}>{t('timetable:close')}</Text>
+          </TouchableOpacity>
+        </Dialog.Actions>
+      </Dialog>
+    </Portal>
+  )
 }
 
 /**
@@ -128,42 +130,40 @@ export default function CourseDetailDialog({ course, visible, onClose, onDismiss
  * @param {string} props.url
  * @param {string} props.icon
  */
-function CourseDetailDialogText({ title, content, url, icon }) {
-    const increaseFontSize = useIncreaseFontSize();
+function CourseDetailDialogText ({ title, content, url, icon }) {
+  const increaseFontSize = useIncreaseFontSize()
 
-    const theme = useTheme();
-    const { colors } = theme;
+  const theme = useTheme()
+  const { colors } = theme
 
-    const styles = useMemo(
-        () => StyleSheet.create(componentStyles(theme)),
-        [theme]
-    );
+  const styles = useMemo(
+    () => StyleSheet.create(componentStyles(theme)),
+    [theme]
+  )
 
-    return (
-        <TouchableOpacity
-            style={[styles.detailContainer, styles.textDetail]}
-            onPress={
+  return (
+    <TouchableOpacity
+      style={[styles.detailContainer, styles.textDetail]}
+      onPress={
                 url
-                    ? () => Linking.openURL(url)
-                    : null
+                  ? () => Linking.openURL(url)
+                  : null
             }
-            disabled={
-                url
-                    ? false
-                    : true
+      disabled={
+                !url
             }
-        >
-            <Text style={[styles.detailLabel, increaseFontSize ? styles.textDetailBigFont : styles.textDetail]} >
-                {title}
-            </Text>
-            <Text style={[styles.detailValue, increaseFontSize ? styles.textDetailBigFont : styles.textDetail]} ellipsizeMode='tail' >
-                {content}
-            </Text>
-            {
+    >
+      <Text style={[styles.detailLabel, increaseFontSize ? styles.textDetailBigFont : styles.textDetail]}>
+        {title}
+      </Text>
+      <Text style={[styles.detailValue, increaseFontSize ? styles.textDetailBigFont : styles.textDetail]} ellipsizeMode='tail'>
+        {content}
+      </Text>
+      {
                 icon && url
-                    ? <IconsOpenasist icon={icon} size={25} color={colors.icon} />
-                    : null
+                  ? <IconsOpenasist icon={icon} size={25} color={colors.icon} />
+                  : null
             }
-        </TouchableOpacity>
-    )
+    </TouchableOpacity>
+  )
 }