@olea-bps/base 1.0.0

package/views/FeedList/index.js

@@ -0,0 +1,165 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import {
+    ActivityIndicator,
+    FlatList,
+    SafeAreaView,
+    StyleSheet,
+    Text,
+    TouchableOpacity,
+    View
+} from 'react-native';
+import {connect} from 'react-redux'
+import {withTheme} from "react-native-paper";
+import {withTranslation} from "react-i18next";
+
+import merge from 'lodash/merge';
+
+import {onUpdateRefreshing} from '../../libraries/core';
+
+
+import componentStyles from "./styles";
+import AppbarComponent from '../../components/AppBar';
+import IconsOpenasist from '../../libraries/icons-openasist';
+
+/**
+ * Feed List View
+ *
+ * Shows a list of news feeds
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+class FeedListView extends React.Component {
+    static navigationOptions = {
+        header: null
+    };
+
+    // Styles of this component
+    styles;
+
+    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);
+
+        // ------------------------------------------------------------------------
+    }
+
+    /**
+     * Render a feed
+     *
+     * @returns {Array}
+     *
+     * @private
+     */
+    _renderFeed = ({item}) => {
+        const {themeStyles, colors} = this.props.theme;
+
+        return (
+            <TouchableOpacity style={themeStyles.card} onPress={() => {this.props.navigation.navigate('FeedNews', {feedId: item.feedid, feedTitle: item.title})}}>
+                <View style={[themeStyles.cardContent, this.styles.cardContent]}>
+                    <Text style={[themeStyles.cardTitle, this.styles.cardTitle]}>{item.title}</Text>
+                    <Text style={[themeStyles.cardSubTitle, this.styles.cardSubTitle]}>{item.desc}</Text>
+                </View>
+                <View style={themeStyles.cardRightIcon}>
+                    <IconsOpenasist icon={"forward"} size={25} color={colors.messages.icon} />
+                </View>
+            </TouchableOpacity>
+        );
+    };
+
+
+    /**
+     * Key Extractor for unique item key
+     *
+     * @param item
+     * @param index
+     * @returns {*}
+     * @private
+     */
+    _keyExtractor = (item, index) => {
+        return 'feed_' + ((item.feedid) ? item.feedid : ((item.title) ? item.title : index));
+    };
+
+
+    render() {
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+        const PluginComponent = this.props.pluginComponent;
+        if (PluginComponent) {
+            return <PluginComponent/>;
+        }
+        // ------------------------------------------------------------------------
+
+        const {feeds, theme: {colors, paddings, themeStyles}, t} = this.props;
+
+        return (
+            <SafeAreaView style={[this.styles.container, themeStyles.appSafeAreaContainer]}>
+                <AppbarComponent {...this.props} title={t('news:feeds')}/>
+                <View style={themeStyles.container}>
+                    {!feeds ?
+                        <ActivityIndicator style={this.styles.activity} size="large" color={colors.loadingIndicator} /> :
+                        <FlatList
+                        data={feeds.sort((a,b) => {
+                            if(a.feedid < b.feedid){
+                                return -1;
+                            } else if (a.feedid > b.feedid) {
+                                return 1;
+                            }
+                            return 0;
+                        })}
+                        extraData={this.state}
+                        keyExtractor={this._keyExtractor}
+                        renderItem={this._renderFeed}
+                        initialNumToRender={6}
+                        getItemLayout={(data, index) => (
+                            {length: 50, offset: 50 * index, index}
+                        )}
+                        contentContainerStyle={{paddingBottom: paddings.default}}
+                        style={this.styles.innerContainer}
+                    />}
+                </View>
+            </SafeAreaView>
+        );
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.feedList.component,
+        pluginStyles: state.pluginReducer.feedList.styles,
+        feeds: state.apiReducer.feeds
+    };
+};
+
+
+export default connect(mapStateToProps, {onUpdateRefreshing})(withTranslation()(withTheme(FeedListView)))

package/views/FeedList/styles.js

@@ -0,0 +1,15 @@
+export default function(theme) {
+    return {
+        container: {
+            flex: 1
+        },
+        innerContainer: {
+            flex: 1
+        },
+        cardContent: {
+            paddingLeft: theme.paddings.large,
+            paddingTop: theme.paddings.small,
+            paddingBottom: theme.paddings.small
+        }
+    }
+};

package/views/FeedNews/index.js

@@ -0,0 +1,243 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import {
+    ActivityIndicator,
+    Text,
+    SafeAreaView,
+    StyleSheet,
+    View,
+    FlatList,
+    TouchableOpacity, Image, Linking
+} from 'react-native';
+import {connect} from 'react-redux'
+import {withTheme} from "react-native-paper";
+import {withTranslation} from "react-i18next";
+
+import merge from 'lodash/merge';
+import moment from "moment";
+
+import {feedApi, onUpdateRefreshing} from '../../libraries/core';
+import AppbarComponent from '../../components/AppBar';
+import IconsOpenasist from '../../libraries/icons-openasist';
+
+import componentStyles from "./styles";
+import { handleHtmlEntities } from '../../libraries/core/helper/format.helper';
+
+
+/**
+ * Feed News View
+ *
+ * Shows a list of news of the provided feed
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - feedId: Id of the feed to load the news from
+ *  - feedTitle: Name/Title of the feed for view header
+ */
+class FeedNewsView extends React.Component {
+    static navigationOptions = {
+        header: null
+    };
+
+    // Styles of this component
+    styles;
+
+    feedNews = null;
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            inProgress: true,
+            hasNoNewsAvailable: false,
+            hasError: false
+        };
+
+        // ------------------------------------------------------------------------
+        // 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);
+
+        // ------------------------------------------------------------------------
+    }
+
+    /**
+     * User pressed a card to read this news
+     *
+     * @param news
+     *
+     * @private
+     */
+    _onCardPress(news) {
+        this.props.navigation.navigate('NewsDetail', {news: news});
+    }
+
+
+    /**
+     * Render a single news item with title, description and image
+     *
+     * @param item
+     * @returns {*}
+     * @private
+     */
+    _renderNewsItem = ({item}) => {
+        const { theme: { themeStyles, colors}, t } = this.props;
+
+        var description = item.shortDesc
+            .replace(/<(?:.|\n)*?>/gm, '')
+            .replace('Weiterlesen ›', '');
+
+        let date = moment(item.pubdate);
+
+        let pubDate = item.pubdate;
+        if(date) {
+            pubDate = date.format('DD.MM.YYYY - HH:mm');
+        }
+
+        return (
+            <TouchableOpacity style={themeStyles.cardWithImage} onPress={() => this._onCardPress(item)}>
+                <View style={themeStyles.cartHeaderSplit}>
+                    {item.imageUrl && <Image source={{uri: item.imageUrl }} style={themeStyles.cartHeaderSplitImage} resizeMode="contain"/>}
+                    <View style={item.imageUrl ? themeStyles.cartHeaderSplitDetails : themeStyles.cartHeaderDetails}>
+                        <Text style={[themeStyles.cardTitle, this.styles.newsTitle]}>{item.title}</Text>
+                        <View style={[themeStyles.flexRow, {alignItems: 'center', alignContent: 'center'}]}>
+                            <IconsOpenasist icon={'time'} size={20} color={colors.accent}/>
+                            <Text style={[themeStyles.cardSubTitle, this.styles.newsDate]}>{pubDate}</Text>
+                        </View>
+                    </View>
+                </View>
+                <View style={themeStyles.flexRow}>
+                    <View style={[themeStyles.cardContent, this.styles.newsContent]}>
+                        <Text style={themeStyles.cardText}>{handleHtmlEntities(description)}</Text>
+                    </View>
+                    <View style={[themeStyles.cardRightIcon, this.styles.newsIcon]}>
+                        <IconsOpenasist icon={"forward"} size={25} color={colors.messages.icon} />
+                    </View>
+                </View>
+                {item.link ? (
+                    <TouchableOpacity style={themeStyles.cardLinkExternal} onPress={() => {Linking.openURL(item.link)}}>
+                        <Text style={themeStyles.cardLinkTextExternal}>{t('common:openInBrowser')}</Text>
+                        <IconsOpenasist icon={"open-external"} size={18} color={colors.subtitle} />
+                    </TouchableOpacity>
+                ) : null}
+            </TouchableOpacity>
+        );
+    };
+
+    /**
+     * Key Extractor for unique item key
+     *
+     * @param item
+     * @param index
+     * @returns {*}
+     * @private
+     */
+    _keyExtractor = (item, index) => {
+        return ((item.guid) ? item.guid : ((item.title) ? item.title : index));
+    };
+
+    render() {
+
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+        const PluginComponent = this.props.pluginComponent;
+        if (PluginComponent) {
+            return <PluginComponent />;
+        }
+        // ------------------------------------------------------------------------
+
+
+        const {route, t}  = this.props;
+        const {colors, paddings, themeStyles} = this.props.theme;
+        const {inProgress, hasNoNewsAvailable, hasError} = this.state;
+
+        const feedId = route.params && route.params.feedId || null;
+        const feedTitle = route.params && route.params.feedTitle || 'News';
+
+        if(!this.feedNews && feedId) {
+            feedApi.getFeedById(feedId, (feed) => {
+                if(typeof feed === 'number') {
+                    this.feedNews = [];
+                    this.setState({
+                        inProgress: false,
+                        hasNoNewsAvailable: feed === 0,
+                        hasError: feed === -1
+                    });
+                } else {
+                    this.feedNews = feed;
+                    this.setState({
+                        inProgress: false,
+                        hasNoNewsAvailable: false,
+                        hasError: false
+                    });
+                }
+            });
+        }
+
+        return (
+            <SafeAreaView style={[this.styles.container, themeStyles.appSafeAreaContainer]}>
+                <AppbarComponent {...this.props} title={feedTitle}/>
+                <View style={themeStyles.container}>
+                    { !inProgress && hasNoNewsAvailable &&
+                        <View style={themeStyles.noticeTextContainer}>
+                            <Text style={themeStyles.noticeText}>{t('news:noResult')}</Text>
+                        </View>
+                    }
+                    { !inProgress && hasError &&
+                        <View style={themeStyles.noticeTextContainer}>
+                            <Text style={themeStyles.noticeText}>{t('news:couldNotLoadNews')}</Text>
+                        </View>
+                    }
+                    { inProgress && <ActivityIndicator style={this.styles.activity} size="large" color={colors.loadingIndicator} /> }
+                    { !inProgress && <FlatList
+                        data={this.feedNews}
+                        extraData={this.state}
+                        keyExtractor={this._keyExtractor}
+                        renderItem={this._renderNewsItem}
+                        initialNumToRender={6}
+                        getItemLayout={(data, index) => (
+                            {length: 50, offset: 50 * index, index}
+                        )}
+                        contentContainerStyle={{paddingBottom: paddings.default}}
+                        style={this.styles.innerContainer}
+                    /> }
+
+                </View>
+            </SafeAreaView>
+        );
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.feedNews.component,
+        pluginStyles: state.pluginReducer.feedNews.styles,
+    };
+};
+
+
+export default connect(mapStateToProps, {onUpdateRefreshing})(withTranslation()(withTheme(FeedNewsView)))

package/views/FeedNews/styles.js

@@ -0,0 +1,32 @@
+export default function(theme) {
+    return {
+        container: {
+            flex: 1
+        },
+        innerContainer: {
+            flex: 1,
+        },
+        activity: {
+            margin: 40
+        },
+        newsTitle: {
+            ...theme.fonts.medium,
+            fontSize: theme.fontSizes.xl,
+            lineHeight: theme.lineHeights.xxl,
+            marginBottom: theme.paddings.default
+        },
+        newsDate: {
+            ...theme.fonts.bold,
+            marginTop: 3,
+            paddingLeft: theme.paddings.small
+        },
+        newsContent: {
+            paddingTop: theme.paddings.default,
+            paddingLeft: theme.paddings.default,
+            paddingRight: theme.paddings.default
+        },
+        newsIcon: {
+            paddingRight: theme.paddings.xsmall
+        }
+    }
+};

package/views/Flexmenu/index.js

@@ -0,0 +1,185 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useMemo } from 'react';
+import {
+    StyleSheet,
+    SafeAreaView,
+    View,
+    Text,
+    FlatList,
+    Linking
+} from 'react-native';
+
+import { connect } from 'react-redux';
+import { useTheme } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+import { useNavigation } from '@react-navigation/native';
+
+import AppbarComponent from '../../components/AppBar';
+import IconsOpenasist from '../../libraries/icons-openasist';
+import FlexMenuEntry from '../../components/FlexMenuEntry';
+
+import componentStyles from './styles';
+
+/**
+ * Diese View zeigt eine Ebene von Menüeintragen des Flex-Menüs an.
+ *
+ * Es sollte mindestens ein Menütyp(props.menuType) über die Eigenschaften oder ein Hauptmenüeintrag(props.route.mainMenuEntry) übergeben werden.
+ * Wird ein Menütyp übergeben, wird der Hauptmenüeintrag des Menütypes gesucht und die Kindermenüeintrage angezeigt.
+ * Wird ein Hauptmenüeintrag bzw. Elternmenüeintrag übergeben, werden dessen Kindereinträge angezeigt.
+ * Der Hauptmenüeintrag wird über das Navigationsframework übergeben, weshalb dieser in der 'route'-Eigenschaft zu finden ist.
+ * Somit werden meherer Menüebenen unterstützt.
+ *
+ * Die View heißt aus historischen Gründen CoronaView und sollte zeitnah sinvoll umbennant werden
+ *
+ * @param {object} props
+ * @param {string} [props.menuType] Menütyp, dessen erste Menüebene angezeigt werden soll
+ * @param {object} props.route Eigenschaften, welche durch das Navigationsframework übergeben werden: {@link https://reactnavigation.org/docs/params}
+ * @param {string} [props.route.mainMenuEntry] ID des Hauptmenüeintrag, dessen Kinder anzuzeigen sind
+ */
+function FlexMenuView(props) {
+    const componentName = FlexMenuView.name;
+    const {
+        route,
+    } = props;
+
+    const menuType = props?.menuType ?? route?.params?.menuType;
+    const menuEntries = props.menuEntries ?? [];
+    const view = props?.view ?? route.params.view;
+
+    const theme = useTheme();
+    const { themeStyles, paddings, colors, appSettings } = theme;
+    const { t, i18n } = useTranslation();
+    const navigation = useNavigation();
+
+    const languages = appSettings?.languages;
+    // Eingestellte Sprache aus der Übersetzung holen
+    const selectedLanguage = i18n.language;
+    // Hinterlegte Sprachen durchgehen und nach dem erweiterten Sprachcode holen
+    const menuEntriesLanguage = languages
+        // Finde die derzeitige eingestellte Sprache
+        .find(language => language?.code === selectedLanguage)
+        // Erweiterten Sprachcode von der gefundenen Sprache auslesen
+        ?.extCode;
+
+    let mainMenuEntry;
+    let childMenuEntries;
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    );
+
+    // Bestimmen des Hauptmenüeintrages dieser View
+    // Zuerst wird der Hauptmenüeintrag es den Navigationsparametern entnommen
+    mainMenuEntry = route?.params?.mainMenuEntry ?? null;
+    // Ist der Hauptmenüeintrag nicht in den Navigationsparametern enthalten gewesen, aber dennoch ist ein Menütyp vergeben, wird der Hauptmenüeintrag aus allen Menueinträgen bestimmt
+    if (mainMenuEntry === null && menuType !== null) {
+        // Der Hauptmenüeintrag ist ein Eintrag ohne einen Elterneintrag, mit dem übergenen Menütyp und der eingestellten Sprache
+        mainMenuEntry = menuEntries
+            // Es werden alle Menüeintrage behalten, die dem Menütyp entsprechen
+            .filter(menuEntry => menuEntry.type === menuType)
+            // Es werden alle Menüeintrage behalten, die der eingestellten Sprache entsprechen
+            .filter(menuEntry => (menuEntry.language ?? null) === menuEntriesLanguage)
+            // Aus den nicht ausgefilterten Menüeinträgen wird eine Eintrag genommen, der kein Elterneintrag besitzt
+            .find(menuEntry => (menuEntry.parentMenuEntry ?? null) === null);
+    }
+
+    // Ids der Untermenüpunkte aus den Ressource-links herausholen
+    const childMenuEntryIds = mainMenuEntry
+        ?.subMenuEntries
+        ?.map(
+            subMenuLinkId =>
+                // Der Link des Untermenüpunktes wird in seine Segmente aufgesplitted und das letzte Segment mit Inhalt als ID verwendet
+                subMenuLinkId
+                    // Aufsplitten der URL in seine Segmente
+                    .split('/')
+                    // Entfernen aller 'leeren' Segmenente
+                    .filter(urlSegment => urlSegment !== '')
+                    // Nehmen des letzten Elements
+                    .pop()
+        )
+        ?? [];
+
+    childMenuEntries = childMenuEntryIds
+        .map(childMenuEntryId => menuEntries.find(menuEntry => menuEntry.id === childMenuEntryId))
+        .filter(menuEntry => (menuEntry ?? null) !== null);
+
+    return (
+        <SafeAreaView style={[styles.container, themeStyles.appSafeAreaContainer]}>
+            <AppbarComponent {...props} title={mainMenuEntry?.title} />
+            <View style={themeStyles.container}>
+                <FlatList
+                    data={
+                        Array.isArray(childMenuEntries)
+                            ? childMenuEntries
+                            : []
+                    }
+                    renderItem={
+                        ({ item: menuEntry }) => {
+                            let menuEntryOnPress;
+                            switch (menuEntry.openIn) {
+                                case 'webview':
+                                    menuEntryOnPress = () => { navigation.push('FlexMenuWebView', { url: menuEntry.url, item: menuEntry }) };
+                                    break;
+                                case 'webbrowser':
+                                case 'browser':
+                                    menuEntryOnPress = () => {
+                                        Linking.canOpenURL(menuEntry.url)
+                                            .then(supported => {
+                                                if (supported) {
+                                                    Linking.openURL(menuEntry.url);
+                                                } else {
+                                                    console.debug(componentName, ':', 'Can not open', menuEntry?.url);
+                                                }
+                                            });
+                                    }
+                                    break;
+                                case null:
+                                    menuEntryOnPress = () => { navigation.push(view, { mainMenuEntry: menuEntry, view: view }) };
+                                    break;
+                            }
+
+                            return (
+                                <FlexMenuEntry
+                                    title={menuEntry?.title}
+                                    description={menuEntry?.description}
+                                    iconImage={menuEntry?.image}
+                                    onPress={menuEntryOnPress}
+                                />
+                            );
+                        }
+                    }
+                    keyExtractor={item => item.id}
+                    contentContainerStyle={{ paddingBottom: paddings.default }}
+                    ListEmptyComponent={
+                        <View style={[styles.containerInner, styles.containerErrorMsg]}>
+                            <IconsOpenasist icon={'info'} size={48} color={colors.primary} />
+                            <Text style={styles.title}>{t('corona:menuEntriesNotAvailable')}</Text>
+                        </View>
+                    }
+                />
+            </View>
+        </SafeAreaView>
+    );
+}
+
+const mapStateToProps = state => {
+    return {
+        menuEntries: state.apiReducer.menuEntries,
+    };
+};
+
+export default connect(mapStateToProps)(FlexMenuView)