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,
},
});