@olea-bps/views 1.0.0

package/FlexmenuWebview/styles.js

@@ -0,0 +1,16 @@
+export default function(theme) {
+    return {
+        container: {
+            flex: 1,
+            backgroundColor: theme.colors.background,
+        },
+        contentContainer: {
+            paddingTop: 0
+        },
+        titleStyle: {
+          ...theme.fonts.medium,
+          fontSize: theme.fontSizes.xxl,
+          alignSelf: "center"
+        }
+    }
+};

package/Howhy/index.js

@@ -0,0 +1,151 @@
+/**
+ * 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 { SafeAreaView, StyleSheet, ActivityIndicator, View, Platform } from 'react-native';
+import {Appbar, withTheme} from "react-native-paper";
+import { WebView } from 'react-native-webview';
+import {withTranslation} from "react-i18next";
+import merge from 'lodash/merge';
+
+import componentStyles from "./styles";
+import { AppBar as AppbarComponent } from '@olea-bps/components';
+import IconsOpenasist from "@olea-bps/icons-openasist";
+
+/**
+ * Howy View
+ *
+ * Shows the howy site in a webview
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+class HowyView extends React.Component {
+    static navigationOptions = {
+        header: null
+    };
+
+
+    state = {
+        refreshing: false,
+    };
+
+    // Styles of this component
+    styles;
+
+    webView =  {
+        canGoBack: false,
+        ref: null,
+    };
+
+    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() {
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+        const PluginComponent = this.props.pluginComponent;
+        if (PluginComponent) {
+            return <PluginComponent />;
+        }
+        // ------------------------------------------------------------------------
+
+        const {theme:{colors, themeStyles, customScript}, t } = this.props;
+        /**
+         * Webview Note:
+         * - Android only - Use allowsFullscreenVideo={true} to allow fullscreen video via icon in video player
+         * - iOS only - Use allowsInlineMediaPlayback={true} to allow inline video and prevent fullscreen autoplay at start
+         */
+        return (
+            <SafeAreaView style={[this.styles.container, themeStyles.appSafeAreaContainer]}>
+                <View style={{zIndex: 100, position: 'relative'}}>
+                    <AppbarComponent {...this.props}
+                        title={t('howhy:title')}
+                        leftAction={
+                            <Appbar.Action
+                                icon={props => <IconsOpenasist {...props} icon={'back'} color={colors.primaryText} /> }
+                                onPress={() => {
+                                    if (this.webView.canGoBack) {
+                                        this.webView.ref.goBack();
+                                    } else {
+                                        this.props.navigation.goBack(null);
+                                    }
+                                }}
+                                accessible={true}
+                                accessibilityLabel={(this.webView.canGoBack) ? t('accessibility:appbar.navigateBack') : t('accessibility:appbar.back')}
+                            />
+                         }
+                         rightAction={
+                             <Appbar.Action
+                                 icon="refresh"
+                                 onPress={() => this.webView.ref.reload()}
+                                 accessible={true}
+                                 accessibilityLabel={t('accessibility:appbar.reload')}
+                            />
+                         }/>
+                </View>
+                <WebView
+                    ref={ref => this.webView.ref = ref}
+                    source={{uri: t('howhy:url')}}
+                    startInLoadingState={true}
+                    allowsFullscreenVideo={true}
+                    allowsInlineMediaPlayback={true}
+                    setSupportMultipleWindows={false}
+                    injectedJavaScript={customScript}
+                    renderLoading={() => <ActivityIndicator style={this.styles.activity} size="large" color={colors.loadingIndicator} />}
+                    onNavigationStateChange={(navState) => {
+                        if(Platform.OS !== 'android') {
+                            this.webView.canGoBack = navState.canGoBack; /* iOS only */
+                        }
+                    }}
+                    onLoadProgress={({nativeEvent}) => {
+                        if(Platform.OS === 'android') {
+                            this.webView.canGoBack = nativeEvent.canGoBack; /* Android only */
+                        }
+                    }}
+                    onContentProcessDidTerminate={(syntheticEvent) => {
+                        // this should prevent white screen issues on ios
+                        const { nativeEvent } = syntheticEvent;
+                        console.warn('Content process terminated, reloading', nativeEvent);
+                        this.refs.webview.reload();
+                    }}
+                />
+            </SafeAreaView>
+        );
+    }
+}
+
+
+export default (withTranslation()(withTheme(HowyView)))

package/Howhy/styles.js

@@ -0,0 +1,11 @@
+export default function(theme) {
+    return {
+        container: {
+            flex: 1,
+            backgroundColor: theme.colors.background,
+        },
+        activity: {
+            padding: 20
+        }
+    }
+};

package/Jobs/index.js

@@ -0,0 +1,217 @@
+/**
+ * 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 { useState, useEffect, useMemo, useCallback } from 'react';
+import {
+    FlatList,
+    Text,
+    SafeAreaView,
+    TouchableOpacity,
+    Linking,
+    StyleSheet,
+    View,
+    ActivityIndicator,
+} from 'react-native';
+
+import { Appbar, Button, useTheme } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+import { useNavigation, useRoute } from '@react-navigation/native';
+
+import { DateTime } from 'luxon';
+
+import { AppBar as AppbarComponent } from '@olea-bps/components';
+import IconsOpenasist from '@olea-bps/icons-openasist';
+import { useLanguage, useStagingServer } from '@olea-bps/core';
+
+import componentStyles from './styles';
+
+/**
+ * Job Portal View
+ *
+ * Shows the Job Portal
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+export default function JobPortalView(props) {
+    const navigation = useNavigation();
+    const route = useRoute();
+    const selectedCategorieIds = route?.params?.selectedIds ?? [];
+    const checked = route?.params?.checked ?? [];
+    const theme = useTheme();
+    const { colors, themeStyles } = theme;
+    const { t } = useTranslation();
+    const language = useLanguage();
+    const isStagingServerActive = useStagingServer();
+    const apiUrl = isStagingServerActive
+        ? theme.appSettings?.modules?.job?.api?.staging?.url
+        : theme.appSettings?.modules?.job?.api?.production?.url;
+
+    const [jobs, setJobs] = useState([]);
+    const [categories, setCategories] = useState(null);
+    const [jobsRequestInProgress, setJobsRequestInProgress] = useState(false);
+    const [categoriesRequestInProgress, setCategoriesRequestInProgress] = useState(false);
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme, componentStyles]
+    )
+
+    const refreshJobs = useCallback(
+        () => {
+            const getJobsUrl = new URL('jobs/', apiUrl);
+
+            setJobsRequestInProgress(true);
+
+            fetch(getJobsUrl)
+                .then(response => response.json())
+                .then(setJobs)
+                .finally(() => setJobsRequestInProgress(false));
+        },
+        [apiUrl, setJobs, setJobsRequestInProgress]
+    )
+
+    const refreshCategories = useCallback(
+        () => {
+            const getJobsUrl = new URL('jobs/categories/', apiUrl);
+
+            setCategoriesRequestInProgress(true);
+
+            fetch(getJobsUrl)
+                .then(response => response.json())
+                .then(setCategories)
+                .finally(() => setCategoriesRequestInProgress(false));
+        },
+        [apiUrl, setCategories, setCategoriesRequestInProgress]
+    )
+
+
+    useEffect(
+        refreshJobs,
+        [refreshJobs]
+    )
+
+    useEffect(
+        refreshCategories,
+        [refreshCategories]
+    )
+
+    const filteredJobs = useMemo(
+        () => {
+            if (Array.isArray(jobs) && jobs.length > 0) {
+                if (Array.isArray(selectedCategorieIds) && selectedCategorieIds.length > 0)
+                    return jobs.filter(job => selectedCategorieIds.includes(job.catID));
+                else {
+                    return jobs;
+                }
+            } else {
+                return null;
+            }
+        },
+        [jobs, selectedCategorieIds]
+    )
+
+    return (
+        <SafeAreaView style={[styles.container, themeStyles.appSafeAreaContainer]}>
+            <View>
+                <AppbarComponent {...props}
+                    title={t('menu:titles.job')}
+                    leftAction={
+                        <Appbar.Action
+                            icon={props => <IconsOpenasist {...props} icon={'back'} color={colors.primaryText} />}
+                            onPress={
+                                () => navigation.goBack(null)
+                            }
+                        />
+                    }
+                    rightAction={
+                        <Appbar.Action icon="filter" onPress={
+                            () =>
+                                navigation.navigate(
+                                    'JobFilter',
+                                    {
+                                        checked: checked,
+                                        selectedIds: selectedCategorieIds,
+                                        catData: categories,
+                                    }
+                                )
+                        } />
+                    } />
+            </View>
+            <View style={themeStyles.container}>
+                {
+                    filteredJobs?.length
+                        ? <FlatList
+                            data={filteredJobs}
+                            initialNumToRender={6}
+                            keyExtractor={
+                                (item, index) => item?.url ?? 'job_' + index
+                            }
+                            refreshing={jobsRequestInProgress || categoriesRequestInProgress}
+                            onRefresh={
+                                () => {
+                                    refreshCategories();
+                                    refreshJobs();
+                                }
+                            }
+                            renderItem={
+                                ({ item }) =>
+                                    <TouchableOpacity
+                                        style={themeStyles.card}
+                                        onPress={() => { Linking.openURL(item.url) }}
+                                        accessible={true}
+                                        accessibilityLabel={t(item.company ? 'accessibility:jobs.descriptionWithCompany' : 'accessibility:jobs.descriptionWithoutCompany', item)
+                                        }
+                                    >
+                                        <View style={[themeStyles.cardContent]}>
+                                            <Text style={[styles.title, themeStyles.cardTitle]}>
+                                                {item.title}
+                                            </Text>
+                                            <Text style={[themeStyles.cardSubTitle, styles.companyCity]}>
+                                                {item.company ? item.company + " - " : null}{item.place}
+                                            </Text>
+                                            <Text style={[themeStyles.cardSubTitle, styles.date]}>
+                                                {item.category} - {DateTime.fromISO(item.dateFrom).setLocale(language).toLocaleString()}
+                                            </Text>
+                                        </View>
+                                    </TouchableOpacity>
+                            }
+                        />
+                        : jobsRequestInProgress || categoriesRequestInProgress
+                            ? <View style={styles.innerContainer}>
+                                <ActivityIndicator style={styles.activity} size="large" color={colors.loadingIndicator} />
+                            </View>
+                            : <View style={[styles.containerInner, styles.containerErrorMsg]}>
+                                <Text style={styles.titleNoJobs}>{t('jobs:noJobsTitle')}</Text>
+                                <Button
+                                    onPress={
+                                        () => {
+                                            refreshJobs();
+                                            refreshCategories();
+                                        }
+                                    }
+                                    color={colors.buttonText}
+                                    mode={'outlined'}
+                                >
+                                    {t('common:reload')}
+                                </Button>
+                            </View>
+                }
+            </View>
+        </SafeAreaView>
+    );
+}

package/Jobs/styles.js

@@ -0,0 +1,41 @@
+export default function(theme) {
+    return {
+      container: {
+          flex: 1,
+          backgroundColor: theme.colors.background,
+      },
+      title:{
+        fontSize: theme.fontSizes.xxl,
+        color: theme.colors.jobsTitleColor
+      },
+      titleNoJobs:{
+        fontSize: theme.fontSizes.xxl,
+        color: theme.colors.jobsTitleColor,
+        textAlign: 'center',
+        marginBottom: theme.paddings.default
+      },
+      companyCity:{
+        fontSize: theme.fontSizes.s,
+        paddingTop: theme.paddings.xsmall,
+        color: theme.colors.secondaryText
+      },
+      date:{
+        fontSize: theme.fontSizes.s,
+        paddingTop: theme.paddings.xsmall
+      },
+      activity: {
+          padding: 20
+      },
+      innerContainer: {
+          padding: 40,
+          marginTop: 200
+      },
+      containerErrorMsg: {
+        flex: 1,
+        justifyContent: 'center',
+        alignContent: 'center',
+        alignItems: 'center',
+        margin: theme.paddings.default,
+      },
+    }
+};