Home Reference Source

src/views/journal/AssessmentView.js

import React from 'react';
import {Image, ScrollView, StyleSheet, Text, View} from 'react-native';
import {Avatar, DataTable} from 'react-native-paper';

import Header from './components/Header';
import JournalButton from '../../components/buttons/JournalButton';
import SafeAreaWrapper from '../../components/wrappers/SafeAreaWrapper';
import TableCell from './components/TableCell';
import TableTitle from './components/TableTitle';

import {getUser, getAssessment} from '../../database/UsersDAO';
import {getQuestion} from '../../database/ActivityTypesDAO';

import {globalStyles} from '../../styles/styles';
import {iOSTypography} from '../../styles/Typography';
import {JournalContext} from '../../utils/Contexts';
import {journalStyles} from './Styles';
import {JournalColors} from '../../utils/ColorConstants';

/**
 * View displaying an assessment on an activity session in the journal.
 * It shows details about the assessment.
 * @param {Object} props - Properties
 * @param {function} props.setGoToAssessment - If true, displays AssessmentView
 * @param {function} props.setGoToJournal - If true, displays the journal overview.
 * @param {number} props.assessmentId - Id of the assessment to be displayed
 * @returns {Object} An assessment on an activity session (journal)
 */
export default function JournalAssessmentScreen(props) {
    // Retrieve props
    const setGoToAssessment = props.setGoToAssessment; // navigation
    const setGoToJournal = props.setGoToJournal; // navigation
    const assessmentId = props.assessmentId;

    // Get context
    const {isLoggedOut, setIsLoggedOut} = React.useContext(JournalContext);
    const {therapistId} = React.useContext(JournalContext);
    const {isValidConnection, setIsValidConnection} =
        React.useContext(JournalContext);

    // Get user data
    const user = getUser();
    const assessment = getAssessment(assessmentId);

    // Get details on the grading and put them in table cells.
    const gradings = [];
    assessment.grading.forEach(grading => {
        gradings.push(
            <DataTable.Row
                key={grading.questionId}
                style={journalStyles.tableRow}>
                <TableCell style={styles.cellId} text={grading.questionId} />
                <View style={styles.cellQuestion}>
                    <Text>
                        {
                            getQuestion(
                                assessment.activityType,
                                grading.questionId,
                            ).question
                        }
                    </Text>
                </View>
                <TableCell style={styles.cellGrading} text={grading.grading} />
            </DataTable.Row>,
        );
    });

    return (
        <SafeAreaWrapper safeAreaStyle={journalStyles.container}>
            <Header setGoToJournal={setGoToJournal} />

            <View style={journalStyles.userInfoBar}>
                <View style={journalStyles.avatarContainer}>
                    <Avatar.Image
                        style={journalStyles.avatar}
                        size={75}
                        source={user.image}
                    />
                    <Text style={iOSTypography.title2}>
                        Tilbakemelding fra {user.name} om{' '}
                        {assessment.activityName} utført{' '}
                        {assessment.activityCreateDate}
                    </Text>
                </View>
                <JournalButton
                    label={'Tilbake'}
                    onPress={() => setGoToAssessment(false)}
                />
            </View>

            <View style={[journalStyles.body, {flexDirection: 'row'}]}>
                <View style={styles.gradingsContainer}>
                    <Text style={[iOSTypography.title3, styles.titlePadding]}>
                        Smilefjesvurdering
                    </Text>
                    <Text style={{paddingTop: 5, paddingBottom: 5}}>
                        Skala: (0) Ikke besvart; (1) Dårlig; (2) OK; (3) Bra
                    </Text>
                    <DataTable style={journalStyles.table}>
                        <DataTable.Header style={journalStyles.tableHeader}>
                            <TableTitle style={styles.cellId} text={'#'} />
                            <TableTitle
                                style={styles.cellQuestion}
                                text={'Spørsmål'}
                            />
                            <TableTitle
                                style={styles.cellGrading}
                                text={'Evaluering'}
                            />
                        </DataTable.Header>
                        <ScrollView>{gradings}</ScrollView>
                    </DataTable>
                </View>

                <View style={styles.textDrawingContainer}>
                    <View style={styles.freeTextContainer}>
                        <Text
                            style={[iOSTypography.title3, styles.titlePadding]}>
                            Fri tekst
                        </Text>
                        <ScrollView>
                            {assessment.comment !== null && (
                                <Text style={iOSTypography.body}>
                                    {assessment.comment.content}
                                </Text>
                            )}
                        </ScrollView>
                    </View>

                    <View style={styles.drawingContainer}>
                        <Text
                            style={[iOSTypography.title3, styles.titlePadding]}>
                            Illustrasjon
                        </Text>
                        <ScrollView>
                            {assessment.drawing !== null &&
                                typeof assessment.drawing === 'number' && (
                                    <View style={styles.imageContainer}>
                                        <Image
                                            source={assessment.drawing}
                                            style={globalStyles.resetImage}
                                        />
                                    </View>
                                )}
                            {assessment.drawing === null && (
                                <Text style={iOSTypography.body}>Ingen</Text>
                            )}
                        </ScrollView>
                    </View>
                </View>
            </View>
        </SafeAreaWrapper>
    );
}

/**
 * Local styles
 */
const styles = StyleSheet.create({
    gradingsContainer: {
        flex: 1,
        padding: 15,
        backgroundColor: JournalColors.BACKGROUND_ELEMENT,
    },
    textDrawingContainer: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'flex-start',
        paddingLeft: 10,
    },
    freeTextContainer: {
        minHeight: '30%',
        padding: 15,
        borderBottomWidth: 15,
        borderBottomColor: JournalColors.BACKGROUND_VIEW,
        backgroundColor: JournalColors.BACKGROUND_ELEMENT,
    },
    drawingContainer: {
        minHeight: '30%',
        padding: 15,
        backgroundColor: JournalColors.BACKGROUND_ELEMENT,
    },

    cellId: {
        flex: 1,
        marginRight: 1,
    },
    cellQuestion: {
        flex: 8,
        marginLeft: 1,
        marginRight: 1,
        justifyContent: 'center',
    },
    cellGrading: {
        flex: 2,
        marginLeft: 1,
    },
    titlePadding: {
        paddingBottom: 10,
    },
    imageContainer: {
        flex: 1,
        width: '100%',
        minHeight: 320,
    },
});