@olea-bps/components 1.0.0

package/AppBar/index.js

@@ -0,0 +1,83 @@
+/**
+ * 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, { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+
+import { Appbar, useTheme } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+import { useNavigation } from '@react-navigation/native';
+
+import { connect } from 'react-redux';
+
+import IconsOpenasist from '@olea-bps/icons-openasist';
+
+import componentStyles from './styles';
+
+function AppbarComponent({ settings, title, leftAction, rightAction, subtitle, style }) {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const { colors } = theme;
+    const navigation = useNavigation();
+    const isBigFont = settings?.settingsAccessibility?.increaseFontSize ?? false;
+
+    // Styles of this component
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    )
+
+    return (
+        <Appbar.Header style={[{ elevation: 0 }, isBigFont ? { height: 70 } : null, style]} statusBarHeight={0}>
+            {
+                leftAction
+                    ? leftAction
+                    : <Appbar.Action
+                        icon={(props) => <IconsOpenasist {...props} icon={'back'} color={colors.appbarIconColor} />}
+                        onPress={() => navigation.goBack(null)}
+                        accessible={true}
+                        accessibilityHint={t('accessibility:appbar.back')}
+                    />
+            }
+            <Appbar.Content
+                style={isBigFont ? styles.contentStyleBigFont : {}}
+                title={title}
+                titleStyle={[styles.titleStyle, isBigFont ? styles.titleBigFont : null]}
+                subtitle={subtitle}
+                subtitleStyle={[styles.subtitle, isBigFont ? styles.subtitleBigFont : null]} />
+            {
+                rightAction
+                    ? rightAction
+                    : null
+            }
+        </Appbar.Header>
+    );
+}
+
+//DEPRECATED: Proptypes werden in React 19 nicht mehr unterstützt, stattdessen wird TypeScript empfohlen.
+AppbarComponent.propTypes = {
+    title: PropTypes.string,
+    rightAction: PropTypes.any,
+    leftAction: PropTypes.any,
+    style: PropTypes.object
+};
+
+const mapStateToProps = state => {
+    return {
+        settings: state.settingReducer
+    };
+};
+
+export default connect(mapStateToProps, null)(AppbarComponent)

package/AppBar/styles.js

@@ -0,0 +1,27 @@
+export default function(theme) {
+    return {
+        contentStyleBigFont: {
+            paddingHorizontal: 0
+        },
+        titleStyle: {
+            fontSize: theme.fontSizes.xxl,
+            lineHeight: theme.lineHeights.l,
+            ...theme.fonts.medium
+        },
+        titleBigFont: {
+            fontSize: theme.fontSizes.xl,
+            lineHeight: theme.lineHeights.l,
+            ...theme.fonts.medium
+        },
+        subtitle: {
+            fontSize: theme.fontSizes.l,
+            lineHeight: theme.lineHeights.s,
+            color: theme.colors.appbarSubtitle
+        },
+        subtitleBigFont: {
+            fontSize: theme.fontSizes.s,
+            lineHeight: theme.lineHeights.xxs,
+            color: theme.colors.appbarSubtitle
+        }
+    };
+}

package/BookDetail/index.js

@@ -0,0 +1,268 @@
+/**
+ * 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 PropTypes from 'prop-types';
+
+import {
+    Image, ScrollView, StyleSheet, Text,
+    View, SafeAreaView, ActivityIndicator, Share
+} from 'react-native';
+import {Appbar, Badge, Headline, List, Surface, withTheme} from "react-native-paper";
+
+import { connect } from 'react-redux'
+import {withTranslation} from "react-i18next";
+import merge from 'lodash/merge';
+import unescape from 'lodash/unescape';
+import uniqBy from 'lodash/uniqBy';
+import {libraryApi} from '@olea-bps/core';
+
+
+import componentStyles from "./styles"
+import { AppBar as AppbarComponent } from '@olea-bps/components';
+import {handleHtmlEntities} from "@olea-bps/core/helper/format.helper";
+
+
+class BookDetailComponent extends React.Component {
+    static propTypes = {
+        book: PropTypes.object.isRequired
+    };
+
+    // Styles of this component
+    styles;
+
+    book = null;
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            inProgress: true
+        };
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+
+        const { pluginStyles,theme } = this.props;
+        this.styles = componentStyles(theme);
+
+        if(pluginStyles) {
+            this.styles = merge(componentStyles, pluginStyles);
+        }
+
+        this.styles = StyleSheet.create(this.styles);
+
+        // ------------------------------------------------------------------------
+    };
+
+    /**
+     * Share function for book
+     *
+     * @returns {Promise<void>}
+     * @private
+     */
+    async _onShare() {
+        const { t } = this.props;
+        try {
+            let holdings = "";
+            this.book.details.holdings.forEach((holding) => {
+                holdings +=
+                    t('books:library') + ": " + holding.branch + "\n" +
+                    t('books:status') + ": " + holding.status + "\n" +
+                    t('books:shelf') + ": " + holding.shelf + "\n" +
+                    t('books:location') + ": " + holding.type + "\n\n\n";
+            });
+            let title = this.book.title.replace(/&#(\d+);/g, (match, dec) => String.fromCharCode(dec));
+            const result = await Share.share({
+                message: '"' + title + '" ' + t('books:from') + ' '  + this.book.author +  '\n\n' +
+                        ((holdings.length > 0) ? t('books:availability') + '\n' + holdings : '')
+            });
+
+            if (result.action === Share.sharedAction) {
+                if (result.activityType) {
+                    // shared with activity type of result.activityType
+                } else {
+                    // shared
+                }
+            } else if (result.action === Share.dismissedAction) {
+                // dismissed
+            }
+        } catch (error) {
+                alert(error.message);
+        }
+    };
+
+
+    /**
+     * Render holdings and availability
+     *
+     * @returns {*}
+     * @private
+     */
+    _renderHoldings = () => {
+        if(!this.book.details || !this.book.details.holdings) {
+            return null;
+        }
+        const { t } = this.props;
+        const holdings = [];
+        let index = 0;
+        this.book.details.holdings.forEach((holding) => {
+            if(holding.branch && holding.status && holding.shelf && holding.type) {
+               holdings.push(
+                    <Surface key={holding.branch + '_' + index} style={this.styles.holdingContainer}>
+                        <List.Accordion title={<Text style={this.styles.holdingTitle}>{holding.branch}</Text>}
+                                        style={this.styles.holdingBranch}>
+                            <List.Item title={t('books:status')} description={holding.status} titleStyle={this.styles.holdingTitle}
+                                       descriptionStyle={this.styles.holdingDescription}/>
+                            <List.Item title={t('books:shelf')} description={holding.shelf} titleStyle={this.styles.holdingTitle}
+                                       descriptionStyle={this.styles.holdingDescription}/>
+                            <List.Item title={t('books:location')} description={holding.type} titleStyle={this.styles.holdingTitle}
+                                       descriptionStyle={this.styles.holdingDescription}/>
+                        </List.Accordion>
+                    </Surface>
+                );
+                index++;
+            }
+        });
+
+        if(holdings.length > 0) {
+            return (
+                <ScrollView style={[this.styles.bookDetails, {marginBottom: 100}]}>
+                    {holdings}
+                </ScrollView>
+            )
+        } else {
+            return null;
+        }
+    };
+
+    /**
+     * Render book details content
+     *
+     * @returns {*}
+     * @private
+     */
+    _renderContent = () => {
+        const { colors } = this.props.theme;
+        const { t } = this.props;
+
+        if(this.state.inProgress) {
+            return (<ActivityIndicator style={this.styles.activity} size="large" color={colors.loadingIndicator} />);
+
+        } else {
+            let buzzwords = this.book.details ? uniqBy(this.book.details.buzzwords) : [];
+            let badges = [];
+            buzzwords.forEach((word) => {
+                badges.push(<Badge key={word} style={this.styles.badge}>{word}</Badge>)
+            });
+
+            let publisher = '';
+            if(this.book.details && this.book.details.publisher) {
+                publisher = handleHtmlEntities(this.book.details.publisher)
+            }
+
+
+            let format = this.book.format;
+            let edition = this.book.details && this.book.details.edition;
+            let language = this.book.details && this.book.details.language;
+
+            let availableCount = (this.book.details && this.book.details.holdings) ? this.book.details.holdings.length : 0;
+            let holdings = this._renderHoldings();
+
+            // Handle html entities
+            let title = handleHtmlEntities(this.book.title);
+
+            return (
+                <ScrollView style={this.styles.containerInner}>
+                    <Text style={this.styles.availableCount}>{availableCount > 0 ? availableCount + t('books:availableCount') : t('books:notAvailable')}</Text>
+                    <Surface style={this.styles.bookHeader}>
+                        { this.book.details && this.book.details.imageUrl &&
+                        <Image source={{uri: this.book.details.imageUrl }}
+                               resizeMode="cover"
+                               style={this.styles.bookImage}/> }
+                        <View style={this.book.details && this.book.details.imageUrl ? this.styles.bookTitle : this.styles.bookTitleFull}>
+                            <Headline style={this.styles.bookTitleHeadline}>{unescape(title)}</Headline>
+                            <Text style={this.styles.bookTitleSubline}>{this.book.pubdate}</Text>
+                        </View>
+                    </Surface>
+                    <View style={this.styles.badges}>
+                        {format !== null    && format !== ''    && <Text style={this.styles.badgeLabel}>{t('books:format')}</Text>}
+                        {format !== null    && format !== ''    && <Badge style={this.styles.badge}>{format}</Badge>}
+                        {edition !== null   && edition !== ''   && <Text style={this.styles.badgeLabel}>{t('books:edition')}</Text>}
+                        {edition !== null   && edition !== ''   && <Badge style={this.styles.badge}>{edition}</Badge>}
+                        {language !== null  && language !== ''  && <Text style={this.styles.badgeLabel}>{t('books:language')}</Text>}
+                        {language !== null  && language !== ''  && <Badge style={this.styles.badge}>{language}</Badge>}
+                        {publisher !== null && publisher !== '' && <Text style={this.styles.badgeLabel}>{t('books:publisher')}</Text>}
+                        {publisher !== null && publisher !== '' && <Badge style={[this.styles.badge, this.styles.badgeFullWidth]}>{publisher}</Badge>}
+                    </View>
+                    <Text style={this.styles.badgeLabel}>{t('books:availability')}</Text>
+                    {holdings === null && <Text style={[this.styles.notAvailable]}>{t('books:noLibraryFound')}</Text>}
+                    {holdings !== null && holdings}
+                </ScrollView>
+            );
+        }
+    };
+
+    render() {
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+        const PluginComponent = this.props.pluginComponent;
+        if (PluginComponent) {
+            return <PluginComponent />;
+        }
+        // ------------------------------------------------------------------------
+
+
+        const {themeStyles} = this.props.theme;
+        const { book, t } = this.props;
+
+        if(!book){
+            return (
+                <SafeAreaView style={[this.styles.container, themeStyles.safeAreaContainer]}>
+                    <AppbarComponent {...this.props}
+                        title={t('search:title')}/>
+                        <Text>{t('books:couldNotLoad')}</Text>
+                </SafeAreaView>);
+        } else if(!this.book) {
+            try {
+                libraryApi.getSearchDetailsByBookId(book.bookId, (bookDetails) => {
+                    this.book = merge(book, {details: bookDetails});
+
+                    this.setState({
+                        inProgress: false
+                    });
+                });
+            } catch {}
+        }
+
+        return (
+            <SafeAreaView style={[this.styles.container, themeStyles.safeAreaContainer]}>
+                <AppbarComponent {...this.props}
+                                 title={t('search:title')}
+                                 rightAction={<Appbar.Action icon="share-variant" onPress={this._onShare.bind(this)}/>}/>
+                {this._renderContent()}
+            </SafeAreaView>
+        );
+    }
+}
+
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.bookDetail.component,
+        pluginStyles: state.pluginReducer.bookDetail.styles
+    };
+};
+
+export default connect(mapStateToProps, null)(withTranslation()(withTheme(BookDetailComponent)))

package/BookDetail/styles.js

@@ -0,0 +1,124 @@
+import {Dimensions} from "react-native";
+
+export default function(theme) {
+    const width = Dimensions.get('window').width;
+    return {
+        container: {
+            flex: 1,
+        },
+        containerInner: {
+            flex: 1,
+            paddingHorizontal: 20,
+            paddingVertical: 20
+        },
+        activity: {
+            marginTop: 20
+        },
+        badges: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            paddingHorizontal: 0
+        },
+        badge: {
+            backgroundColor: theme.colors.categoryBadgeBackgroundColor,
+            color: theme.colors.categoryBadgeColor,
+            ...theme.fonts.regular,
+            fontSize: theme.fontSizes.m,
+            lineHeight: theme.lineHeights.xs,
+            paddingHorizontal: theme.paddings.default,
+            paddingVertical: theme.paddings.xsmall,
+            marginRight: theme.paddings.default,
+            marginBottom: theme.paddings.default,
+            borderRadius: 0,
+            minWidth: 80,
+            height: 'auto'
+        },
+        badgeFullWidth: {
+            flex: 1,
+            textAlign: 'left',
+            marginRight: 0
+        },
+        badgeLabel: {
+            flex: 0,
+            ...theme.fonts.regular,
+            fontSize: theme.fontSizes.m,
+            lineHeight: theme.lineHeights.xs,
+            width: width,
+            marginBottom: theme.paddings.xsmall
+        },
+        bookHeader: {
+            flex: 0,
+            flexDirection: 'row',
+            elevation: 1,
+            marginBottom: theme.paddings.default
+        },
+        bookImage: {
+            flex: 0.4,
+            minHeight: 200
+        },
+        bookTitle: {
+            flex: 0.6,
+            padding: theme.paddings.small
+        },
+        bookTitleFull: {
+            flex: 1,
+            padding: theme.paddings.small
+        },
+        bookTitleHeadline: {
+            ...theme.fonts.medium,
+            fontSize: theme.fontSizes.xl,
+            lineHeight: theme.lineHeights.l,
+            marginBottom: theme.paddings.small
+        },
+        bookTitleSubline: {
+            ...theme.fonts.medium,
+            fontSize: theme.fontSizes.m,
+            lineHeight: theme.lineHeights.s,
+            color: theme.colors.subtitle
+        },
+        bookDetails: {
+            flex: 1,
+            flexDirection: 'column'
+        },
+        holdingBranch: {
+            paddingHorizontal: theme.paddings.xsmall,
+            paddingVertical: theme.paddings.xsmall,
+            flexWrap: 'wrap',
+            padding: 0,
+            backgroundColor: theme.colors.bookHoldingBackgroundColor,
+
+        },
+        holdingTitle: {
+            ...theme.fonts.medium,
+            fontSize: theme.fontSizes.m,
+            lineHeight: theme.lineHeights.xs,
+            color: theme.colors.bookHoldingColor
+        },
+        holdingDescription: {
+            ...theme.fonts.regular,
+            fontSize: theme.fontSizes.m,
+            lineHeight: theme.lineHeights.xs,
+            color: theme.colors.subtitle
+        },
+        holdingContainer: {
+            elevation: 0,
+            marginBottom: 10
+        },
+        notAvailable: {
+            backgroundColor: theme.colors.categoryBadgeBackgroundColor,
+            color: theme.colors.categoryBadgeColor,
+            paddingHorizontal: theme.paddings.default,
+            paddingVertical: theme.paddings.xsmall,
+            ...theme.fonts.regular,
+            fontSize: theme.fontSizes.m,
+            lineHeight: theme.lineHeights.xs,
+        },
+        availableCount: {
+            textAlign: 'right',
+            textTransform: 'none',
+            ...theme.fonts.regular,
+            color: theme.colors.grayLight1,
+            fontSize: theme.fontSizes.m
+        }
+    };
+}

package/Component/342/200/216JobsFilter/index.js

@@ -0,0 +1,188 @@
+/**
+ * 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 {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 { AppBar as AppbarComponent } from '@olea-bps/components';
+import IconsOpenasist from "@olea-bps/icons-openasist";
+
+
+
+/**
+ * JobPortalFilter View
+ *
+ * Shows the Job Portal Category Filter
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - 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);
+      // ------------------------------------------------------------------------
+
+    }
+
+    componentDidMount(){
+      this.setState({
+        checked: this.props.route.params.checked,
+        selectedIds: this.props.route.params.selectedIds,
+        data: this.props.route.params.catData
+      });
+    }
+
+    goBack() {
+        const { navigation, route } = this.props;
+        navigation.navigate('Job', {
+          selectedIds: this.state.selectedIds,
+          checked: this.state.checked
+        });
+    }
+
+
+
+    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 });
+    }
+
+    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;
+    }
+
+    _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}
+        />
+      )
+    }
+
+    /**
+     * 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();
+                              }} />
+                       }
+                  />
+              </View>
+              <View style={themeStyles.container}>
+                  {this._renderListView()}
+              </View>
+          </SafeAreaView>
+    );
+  }
+}
+
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.jobFilter.component,
+        pluginStyles: state.pluginReducer.jobFilter.styles,
+    };
+};
+
+export default connect(mapStateToProps, null)(withTranslation()(withTheme(JobFilterComponent)))