[#74] Implemented multi step form, changed views, refactored UI, adde…

…d error handling, loading states
heyhellomila · Nov 15, 2019 · 32f8963 · 32f8963
1 parent 574c949
commit 32f8963
Show file tree

Hide file tree

Showing 11 changed files with 383 additions and 232 deletions.
diff --git a/frontend/assets/Status.png b/frontend/assets/Status.png
diff --git a/frontend/assets/Submit.png b/frontend/assets/Submit.png
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -23,6 +23,7 @@
     "react-native-elements": "^1.2.7",
     "react-native-fontawesome": "^7.0.0",
     "react-native-gesture-handler": "1.3.0",
+    "react-native-keyboard-aware-scroll-view": "^0.9.1",
     "react-native-multistep-forms": "0.0.1",
     "react-native-picker-select": "^6.3.3",
     "react-native-reanimated": "^1.4.0",

diff --git a/frontend/src/components/workOrderForm/ChooseSector.js b/frontend/src/components/workOrderForm/ChooseSector.js
@@ -1,6 +1,7 @@
 import { createWorkOrderComponent } from '../../stylesheets/CreateWorkOrderPageStyleSheet';
 import { View, Text, Image, TouchableOpacity } from 'react-native';
 import React from 'react';
+import Header from './Header';
 roof = require('../../../assets/Roof.png');
 kitchen = require('../../../assets/Kitchen.png');
 utilities = require('../../../assets/Utilities.png');
@@ -17,109 +18,117 @@ info = require('../../../assets/Information.png');
 
 const ChooseSector = (props) => {
     return (
-        <View style={{flex: 1, marginTop: '-5%'}}>
-            <View style={createWorkOrderComponent.rowContainer}>
-                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'ROOF' 
-                    ? createWorkOrderComponent.selectedSectorContainer
-                    : createWorkOrderComponent.sectorContainer]} 
-                onPress={()=> props.handleSector('ROOF')}>
-                    <Image style={createWorkOrderComponent.sectorIcon} source={roof}></Image>
-                    <Text style={{alignSelf: 'center'}}>Roof</Text>
-                </TouchableOpacity>
-                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'KITCHEN' 
-                    ? createWorkOrderComponent.selectedSectorContainer
-                    : createWorkOrderComponent.sectorContainer]} 
-                onPress={()=> props.handleSector('KITCHEN')}>
-                    <Image style={createWorkOrderComponent.sectorIcon} source={kitchen}></Image>
-                    <Text style={{alignSelf: 'center'}}>Kitchen</Text>
-                </TouchableOpacity>
-                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'UTILITIES' 
-                    ? createWorkOrderComponent.selectedSectorContainer
-                    : createWorkOrderComponent.sectorContainer]} 
-                onPress={()=> props.handleSector('UTILITIES')}>
-                    <Image style={createWorkOrderComponent.sectorIcon} source={utilities}></Image>
-                    <Text style={{alignSelf: 'center'}}>Utilities</Text>
-                </TouchableOpacity>
+        <View style={{flex: 6, paddingHorizontal: '5%', backgroundColor: '#f0f0f0'}}>
+            <View style={{flex: 1}}>
+                <Header {...props} headerText={"Pick a sector"}/>
             </View>
-            <View style={createWorkOrderComponent.rowContainer}>
-                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'LIVING_ROOM' 
-                    ? createWorkOrderComponent.selectedSectorContainer
-                    : createWorkOrderComponent.sectorContainer]}
-                onPress={()=> props.handleSector('LIVING_ROOM')}>
-                    <Image style={createWorkOrderComponent.sectorIcon} source={livingRoom}></Image>
-                    <Text style={{alignSelf: 'center'}}>Living room</Text>
-                </TouchableOpacity>
-                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'BATHROOM' 
-                    ? createWorkOrderComponent.selectedSectorContainer
-                    : createWorkOrderComponent.sectorContainer]} 
-                onPress={()=> props.handleSector('BATHROOM')}>
-                    <Image style={createWorkOrderComponent.sectorIcon} source={bathroom}></Image>
-                    <Text style={{alignSelf: 'center'}}>Bathroom</Text>
-                </TouchableOpacity>
-                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'APPLIANCES' 
-                    ? createWorkOrderComponent.selectedSectorContainer
-                    : createWorkOrderComponent.sectorContainer]} 
-                onPress={()=> props.handleSector('APPLIANCES')}>
-                    <Image style={createWorkOrderComponent.sectorIcon} source={appliances}></Image>
-                    <Text style={{alignSelf: 'center'}}>Appliances</Text>
-                </TouchableOpacity>
-            </View>
-            <View style={createWorkOrderComponent.rowContainer}>
-                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'BEDROOM' 
-                    ? createWorkOrderComponent.selectedSectorContainer
-                    : createWorkOrderComponent.sectorContainer]} 
-                onPress={()=> props.handleSector('BEDROOM')}>
-                    <Image style={createWorkOrderComponent.sectorIcon} source={bedroom}></Image>
-                    <Text style={{alignSelf: 'center'}}>Bedroom</Text>
-                </TouchableOpacity>
-                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'BALCONY' 
-                    ? createWorkOrderComponent.selectedSectorContainer
-                    : createWorkOrderComponent.sectorContainer]} 
-                onPress={()=> props.handleSector('BALCONY')}>
-                    <Image style={createWorkOrderComponent.sectorIcon} source={balcony}></Image>
-                    <Text style={{alignSelf: 'center'}}>Balcony</Text>
-                </TouchableOpacity>
-                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'GARAGE' 
-                    ? createWorkOrderComponent.selectedSectorContainer
-                    : createWorkOrderComponent.sectorContainer]} 
-                onPress={()=> props.handleSector('GARAGE')}>
-                    <Image style={createWorkOrderComponent.sectorIcon} source={garage}></Image>
-                    <Text style={{alignSelf: 'center'}}>Garage</Text>
-                </TouchableOpacity>
-            </View>
-            <View style={createWorkOrderComponent.rowContainer}>
-                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'ENVELOPE' 
-                    ? createWorkOrderComponent.selectedSectorContainer
-                    : createWorkOrderComponent.sectorContainer]} 
-                onPress={()=> props.handleSector('ENVELOPE')}>
-                    <Image style={createWorkOrderComponent.sectorIcon} source={envelope}></Image>
-                    <Text style={{alignSelf: 'center'}}>Envelope</Text>
-                </TouchableOpacity>
-                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'ELECTRICAL' 
-                    ? createWorkOrderComponent.selectedSectorContainer
-                    : createWorkOrderComponent.sectorContainer]} 
-                onPress={()=> props.handleSector('ELECTRICAL')}>
-                    <Image style={createWorkOrderComponent.sectorIcon} source={electrical}></Image>
-                    <Text style={{alignSelf: 'center'}}>Electrical</Text>
-                </TouchableOpacity>
-                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'HVAC' 
-                    ? createWorkOrderComponent.selectedSectorContainer
-                    : createWorkOrderComponent.sectorContainer]} 
-                onPress={()=> props.handleSector('HVAC')}>
-                    <Image style={createWorkOrderComponent.sectorIcon} source={hvac}></Image>
-                    <Text style={{alignSelf: 'center'}}>HVAC</Text>
-                </TouchableOpacity>
-            </View>
-            <View style={createWorkOrderComponent.rowContainer}>
-                <View style={createWorkOrderComponent.colContainer}>
-                    <TouchableOpacity style={{alignSelf:'flex-start'}}>
-                        <Image style={{width: 30, height: 30}} source={info}></Image>
+            <View style={{flex: 4}}>
+                <View style={createWorkOrderComponent.rowContainer}>
+                    <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'ROOF' 
+                        ? createWorkOrderComponent.selectedSectorContainer
+                        : createWorkOrderComponent.sectorContainer]} 
+                    onPress={()=> props.handleSector('ROOF')}>
+                        <Image style={createWorkOrderComponent.sectorIcon} source={roof}></Image>
+                        <Text style={{alignSelf: 'center'}}>Roof</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'KITCHEN' 
+                        ? createWorkOrderComponent.selectedSectorContainer
+                        : createWorkOrderComponent.sectorContainer]} 
+                    onPress={()=> props.handleSector('KITCHEN')}>
+                        <Image style={createWorkOrderComponent.sectorIcon} source={kitchen}></Image>
+                        <Text style={{alignSelf: 'center'}}>Kitchen</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'UTILITIES' 
+                        ? createWorkOrderComponent.selectedSectorContainer
+                        : createWorkOrderComponent.sectorContainer]} 
+                    onPress={()=> props.handleSector('UTILITIES')}>
+                        <Image style={createWorkOrderComponent.sectorIcon} source={utilities}></Image>
+                        <Text style={{alignSelf: 'center'}}>Utilities</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={createWorkOrderComponent.rowContainer}>
+                    <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'LIVING_ROOM' 
+                        ? createWorkOrderComponent.selectedSectorContainer
+                        : createWorkOrderComponent.sectorContainer]}
+                    onPress={()=> props.handleSector('LIVING_ROOM')}>
+                        <Image style={createWorkOrderComponent.sectorIcon} source={livingRoom}></Image>
+                        <Text style={{alignSelf: 'center'}}>Living room</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'BATHROOM' 
+                        ? createWorkOrderComponent.selectedSectorContainer
+                        : createWorkOrderComponent.sectorContainer]} 
+                    onPress={()=> props.handleSector('BATHROOM')}>
+                        <Image style={createWorkOrderComponent.sectorIcon} source={bathroom}></Image>
+                        <Text style={{alignSelf: 'center'}}>Bathroom</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'APPLIANCES' 
+                        ? createWorkOrderComponent.selectedSectorContainer
+                        : createWorkOrderComponent.sectorContainer]} 
+                    onPress={()=> props.handleSector('APPLIANCES')}>
+                        <Image style={createWorkOrderComponent.sectorIcon} source={appliances}></Image>
+                        <Text style={{alignSelf: 'center'}}>Appliances</Text>
                     </TouchableOpacity>
                 </View>
-                <View style={createWorkOrderComponent.colContainer}>
-                    <TouchableOpacity style={{alignSelf:'flex-end'}} onPress={() => props.nextStep()}>
-                        <Text>Next</Text>
+                <View style={createWorkOrderComponent.rowContainer}>
+                    <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'BEDROOM' 
+                        ? createWorkOrderComponent.selectedSectorContainer
+                        : createWorkOrderComponent.sectorContainer]} 
+                    onPress={()=> props.handleSector('BEDROOM')}>
+                        <Image style={createWorkOrderComponent.sectorIcon} source={bedroom}></Image>
+                        <Text style={{alignSelf: 'center'}}>Bedroom</Text>
                     </TouchableOpacity>
+                    <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'BALCONY' 
+                        ? createWorkOrderComponent.selectedSectorContainer
+                        : createWorkOrderComponent.sectorContainer]} 
+                    onPress={()=> props.handleSector('BALCONY')}>
+                        <Image style={createWorkOrderComponent.sectorIcon} source={balcony}></Image>
+                        <Text style={{alignSelf: 'center'}}>Balcony</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'GARAGE' 
+                        ? createWorkOrderComponent.selectedSectorContainer
+                        : createWorkOrderComponent.sectorContainer]} 
+                    onPress={()=> props.handleSector('GARAGE')}>
+                        <Image style={createWorkOrderComponent.sectorIcon} source={garage}></Image>
+                        <Text style={{alignSelf: 'center'}}>Garage</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={createWorkOrderComponent.rowContainer}>
+                    <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'ENVELOPE' 
+                        ? createWorkOrderComponent.selectedSectorContainer
+                        : createWorkOrderComponent.sectorContainer]} 
+                    onPress={()=> props.handleSector('ENVELOPE')}>
+                        <Image style={createWorkOrderComponent.sectorIcon} source={envelope}></Image>
+                        <Text style={{alignSelf: 'center'}}>Envelope</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'ELECTRICAL' 
+                        ? createWorkOrderComponent.selectedSectorContainer
+                        : createWorkOrderComponent.sectorContainer]} 
+                    onPress={()=> props.handleSector('ELECTRICAL')}>
+                        <Image style={createWorkOrderComponent.sectorIcon} source={electrical}></Image>
+                        <Text style={{alignSelf: 'center'}}>Electrical</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'HVAC' 
+                        ? createWorkOrderComponent.selectedSectorContainer
+                        : createWorkOrderComponent.sectorContainer]} 
+                    onPress={()=> props.handleSector('HVAC')}>
+                        <Image style={createWorkOrderComponent.sectorIcon} source={hvac}></Image>
+                        <Text style={{alignSelf: 'center'}}>HVAC</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+            <View style={{flex: 1}}>
+                <View style={createWorkOrderComponent.rowContainer}>
+                    <View style={createWorkOrderComponent.colContainer}>
+                        <TouchableOpacity style={createWorkOrderComponent.leftButton}>
+                            <Image style={{width: 50, height: 50}} source={info}></Image>
+                        </TouchableOpacity>
+                    </View>
+                    <View style={createWorkOrderComponent.colContainer}>
+                        <TouchableOpacity style={createWorkOrderComponent.rightButton} 
+                            onPress={() => props.nextStep()}>
+                            <Text style={createWorkOrderComponent.buttonText}>Next</Text>
+                        </TouchableOpacity>
+                    </View>
                 </View>
             </View>
         </View>