Skip to content

A
AppUms_Student
Commit 950479cc by tungnq
Options

TODO: Đã chỉnh sữa giao diện modal đăng kí thông tin ngoại trú

parent d330a628
Showing with 81 additions and 101 deletions
src/components/Input/TextFieldCus.js
...@@ -98,7 +98,7 @@ const styles = StyleSheet.create({ ...@@ -98,7 +98,7 @@ const styles = StyleSheet.create({
fontWeight: '400', fontWeight: '400',
color: R.colors.black, // FIXME: Đổi từ grey_200 sang black để text rõ hơn color: R.colors.black, // FIXME: Đổi từ grey_200 sang black để text rõ hơn
padding: 0, padding: 0,
minHeight: 40, height: 30,
}, },
}); });
......
src/screens/outpatient_information/modal.js
import React, { useState } from "react"; import React, {useState} from 'react';
import { import {
Modal, Modal,
View, View,
...@@ -7,18 +7,18 @@ import { ...@@ -7,18 +7,18 @@ import {
TouchableOpacity, TouchableOpacity,
ScrollView, ScrollView,
Alert, Alert,
} from "react-native"; } from 'react-native';
import R from "../../assets/R"; import R from '../../assets/R';
import Checkbox from "../../components/CheckBox"; import Checkbox from '../../components/CheckBox';
import Button from "../../components/Button"; import Button from '../../components/Button';
import DropdownSelect from "../../components/Dropdown/DropdownSel"; import DropdownSelect from '../../components/Dropdown/DropdownSel';
import CustomTextInput from "../../components/Input/TextFieldCus"; import CustomTextInput from '../../components/Input/TextFieldCus';
const RegistrationModal = ({ visible, onClose, onNavigateToOther }) => { const RegistrationModal = ({visible, onClose, onNavigateToOther}) => {
const [selectedAccommodationType, setSelectedAccommodationType] = const [selectedAccommodationType, setSelectedAccommodationType] =
useState("other"); useState('other');
const handleAccommodationTypeChange = (type) => { const handleAccommodationTypeChange = type => {
setSelectedAccommodationType(type); setSelectedAccommodationType(type);
}; };
...@@ -27,149 +27,134 @@ const RegistrationModal = ({ visible, onClose, onNavigateToOther }) => { ...@@ -27,149 +27,134 @@ const RegistrationModal = ({ visible, onClose, onNavigateToOther }) => {
visible={visible} visible={visible}
animationType="slide" animationType="slide"
transparent={true} transparent={true}
onRequestClose={onClose} onRequestClose={onClose}>
>
<View style={styles.container_modal_overlay}> <View style={styles.container_modal_overlay}>
<View style={styles.container_card}> <View style={styles.container_card}>
<View style={styles.header}> <View style={styles.header}>
<Text style={styles.text_header}>Đăng kí thông tin ngoại trú</Text> <Text style={styles.text_header}>Đăng kí thông tin ngoại trú</Text>
</View> </View>
<View style={{ flexDirection: "row", marginTop: 15 }}> <View style={{flexDirection: 'row', marginTop: 15}}>
<View style={{ flex: 0.3 }}> <View style={{flex: 0.3}}>
<Checkbox <Checkbox
label={"Khác"} label={'Khác'}
labelStyle={styles.text_checkbox} labelStyle={styles.text_checkbox}
size={12} size={12}
borderRadius={50} borderRadius={50}
borderWidth={1} borderWidth={1}
borderColor={R.colors.black} borderColor={R.colors.black}
isCheck={selectedAccommodationType === "other"} isCheck={selectedAccommodationType === 'other'}
onPress={() => handleAccommodationTypeChange("other")} onPress={() => handleAccommodationTypeChange('other')}
/> />
</View> </View>
<View style={{ flex: 1 }}> <View style={{flex: 1}}>
<Checkbox <Checkbox
label={"Kí túc xá DHQG-HCM"} label={'Kí túc xá DHQG-HCM'}
labelStyle={styles.text_checkbox} labelStyle={styles.text_checkbox}
size={12} size={12}
borderRadius={50} borderRadius={50}
borderWidth={1} borderWidth={1}
onPress={() => handleAccommodationTypeChange("dormitory")} onPress={() => handleAccommodationTypeChange('dormitory')}
isCheck={selectedAccommodationType === "dormitory"} isCheck={selectedAccommodationType === 'dormitory'}
borderColor={R.colors.black} borderColor={R.colors.black}
/> />
</View> </View>
</View> </View>
{selectedAccommodationType === "other" && ( {selectedAccommodationType === 'other' && (
<> <>
<View style={styles.container_row}> <View style={styles.container_row}>
<View style={{ flex: 1 }}> <View style={{flex: 1}}>
<CustomTextInput <CustomTextInput
placeholder={"Họ và tên"} placeholder={'Họ và tên'}
title={"Tên chủ hộ"} title={'Tên chủ hộ'}
required={true} required={true}
/> />
</View> </View>
<View style={{ width: '3%' }} ></View> <View style={{width: '3%'}}></View>
<View style={{ flex: 1 }}> <View style={{flex: 1}}>
<CustomTextInput <CustomTextInput title={'Số nhà'} required={true} />
title={"Số nhà"}
required={true}
/>
</View> </View>
</View> </View>
<View style={styles.container_row}> <View style={styles.container_row}>
<View style={{ flex: 1 }}> <View style={{flex: 1}}>
<CustomTextInput <CustomTextInput
placeholder={"Xã"} placeholder={'Xã'}
title={"Xã"} title={'Xã'}
required={true} required={true}
/> />
</View> </View>
<View style={{ width: '3%' }} ></View> <View style={{width: '3%'}}></View>
<View style={{ flex: 1 }}> <View style={{flex: 1}}>
<CustomTextInput <CustomTextInput
placeholder={"Tỉnh thành phố"} placeholder={'Tỉnh thành phố'}
title={"Tỉnh thành phố"} title={'Tỉnh thành phố'}
required={true} required={true}
/> />
</View> </View>
</View> </View>
<View style={styles.container_row}> <View style={styles.container_row}>
<View style={{ flex: 1 }}> <View style={{flex: 1}}>
<CustomTextInput <CustomTextInput
title={"Quan hệ với chủ hộ"} title={'Quan hệ với chủ hộ'}
required={true} required={true}
/> />
</View> </View>
<View style={{ width: '3%' }} ></View> <View style={{width: '3%'}}></View>
<View style={{ flex: 1 }}> <View style={{flex: 1}}>
<CustomTextInput <CustomTextInput
title={"TG bắt đầu cư trú"} title={'TG bắt đầu cư trú'}
required={true} required={true}
/> />
</View> </View>
</View> </View>
<View style={{ maxWidth: '90%', marginBottom: 10 }}> <View style={{maxWidth: '90%', marginBottom: 10}}>
<CustomTextInput <CustomTextInput title={'Địa chỉ chi tiết'} required={true} />
title={"Địa chỉ chi tiết"}
required={true}
/>
</View> </View>
</> </>
)} )}
{selectedAccommodationType === "dormitory" && ( {selectedAccommodationType === 'dormitory' && (
<View> <View>
<View style={styles.container_row}> <View style={styles.container_row}>
<View style={{ flex: 1 }}> <View style={{flex: 1}}>
<DropdownSelect <DropdownSelect
title={"Vị trí *"} title={'Vị trí *'}
placeholder="" placeholder=""
placeholderFontFamily={R.fonts.InterRegular} placeholderFontFamily={R.fonts.InterRegular}
placeholderFontSize={R.fontsize.fontsSize12} placeholderFontSize={R.fontsize.fontsSize12}
placeholderFontWeight={"400"} placeholderFontWeight={'400'}
placeholderColor={R.colors.grey_800} placeholderColor={R.colors.grey_800}
borderRadius={10} borderRadius={10}
height={40} height={30}
iconColor={R.colors.black} iconColor={R.colors.black}
iconSize={10} iconSize={10}
marginHorizontal={0} marginHorizontal={0}
marginVertical={0} marginVertical={0}
titleFontWeight={"400"} titleFontWeight={'400'}
fontSize={R.fontsize.fontsSize12} fontSize={R.fontsize.fontsSize12}
titleFontSize={R.fontsize.fontsSize12} titleFontSize={R.fontsize.fontsSize12}
titleFontFamily={R.fonts.InterRegular} titleFontFamily={R.fonts.InterRegular}
/> />
</View> </View>
<View style={{ width: '3%' }} ></View> <View style={{width: '3%'}}></View>
<View style={{ flex: 1 }}> <View style={{flex: 1}}>
<DropdownSelect <DropdownSelect
title={"Tòa nhà *"} title={'Tòa nhà *'}
placeholder="" placeholder=""
placeholderFontFamily={R.fonts.InterRegular} placeholderFontFamily={R.fonts.InterRegular}
placeholderFontSize={R.fontsize.fontsSize12} placeholderFontSize={R.fontsize.fontsSize12}
placeholderFontWeight={"400"} placeholderFontWeight={'400'}
placeholderColor={R.colors.grey_800} placeholderColor={R.colors.grey_800}
borderRadius={10} borderRadius={10}
height={40} height={30}
iconColor={R.colors.black} iconColor={R.colors.black}
iconSize={10} iconSize={10}
marginHorizontal={0} marginHorizontal={0}
marginVertical={0} marginVertical={0}
titleFontWeight={"400"} titleFontWeight={'400'}
fontSize={R.fontsize.fontsSize12} fontSize={R.fontsize.fontsSize12}
titleFontSize={R.fontsize.fontsSize12} titleFontSize={R.fontsize.fontsSize12}
titleFontFamily={R.fonts.InterRegular} titleFontFamily={R.fonts.InterRegular}
...@@ -178,31 +163,27 @@ const RegistrationModal = ({ visible, onClose, onNavigateToOther }) => { ...@@ -178,31 +163,27 @@ const RegistrationModal = ({ visible, onClose, onNavigateToOther }) => {
</View> </View>
<View style={styles.container_row}> <View style={styles.container_row}>
<View style={{ flex: 1 }}> <View style={{flex: 1}}>
<CustomTextInput <CustomTextInput title={'Số phòng'} required={true} />
title={"Số phòng"}
required={true}
/>
</View> </View>
<View style={{ width: '3%' }}></View> <View style={{width: '3%'}}></View>
<View style={{ flex: 1 }}> <View style={{flex: 1}}>
<CustomTextInput <CustomTextInput
title={"TG bắt đầu cư trú"} title={'TG bắt đầu cư trú'}
required={true} required={true}
/> />
</View> </View>
</View> </View>
<CustomTextInput <CustomTextInput title={'Địa chỉ chi tiết'} required={true} />
title={"Địa chỉ chi tiết"}
required={true}
/>
</View> </View>
)} )}
<View style={{ flexDirection: "row", alignSelf: "flex-end" , marginVertical:5}}> <View
style={{
flexDirection: 'row',
alignSelf: 'flex-end',
marginVertical: 5,
}}>
<View> <View>
<Button <Button
backgroundColor={R.colors.white} backgroundColor={R.colors.white}
...@@ -212,7 +193,7 @@ const RegistrationModal = ({ visible, onClose, onNavigateToOther }) => { ...@@ -212,7 +193,7 @@ const RegistrationModal = ({ visible, onClose, onNavigateToOther }) => {
textColor={R.colors.blue500} textColor={R.colors.blue500}
fontWeight={'400'} fontWeight={'400'}
fontFamily={R.fonts.InterRegular} fontFamily={R.fonts.InterRegular}
title={"Huỷ"} title={'Huỷ'}
marginHorizontal={0} marginHorizontal={0}
marginVertical={0} marginVertical={0}
width={51} width={51}
...@@ -221,7 +202,7 @@ const RegistrationModal = ({ visible, onClose, onNavigateToOther }) => { ...@@ -221,7 +202,7 @@ const RegistrationModal = ({ visible, onClose, onNavigateToOther }) => {
onPress={onClose} onPress={onClose}
/> />
</View> </View>
<View style={{ width: '3%' }}></View> <View style={{width: '3%'}}></View>
<View> <View>
<Button <Button
backgroundColor={R.colors.blue500} backgroundColor={R.colors.blue500}
...@@ -231,17 +212,17 @@ const RegistrationModal = ({ visible, onClose, onNavigateToOther }) => { ...@@ -231,17 +212,17 @@ const RegistrationModal = ({ visible, onClose, onNavigateToOther }) => {
textColor={R.colors.white} textColor={R.colors.white}
fontWeight={'400'} fontWeight={'400'}
fontFamily={R.fonts.InterRegular} fontFamily={R.fonts.InterRegular}
title={"Đăng kí mới"} title={'Đăng kí mới'}
marginHorizontal={0} marginHorizontal={0}
marginVertical={0} marginVertical={0}
width={100} width={100}
height={31} height={31}
fontSize={R.fontsize.fontsSize12} fontSize={R.fontsize.fontsSize12}
onPress={() => { onPress={() => {
if (selectedAccommodationType === "other") { if (selectedAccommodationType === 'other') {
console.log("Đăng ký ngoại trú"); console.log('Đăng ký ngoại trú');
} else { } else {
console.log("Chuyển đến đăng ký kí túc xá"); console.log('Chuyển đến đăng ký kí túc xá');
} }
}} }}
/> />
...@@ -259,12 +240,12 @@ const styles = StyleSheet.create({ ...@@ -259,12 +240,12 @@ const styles = StyleSheet.create({
container_modal_overlay: { container_modal_overlay: {
flex: 1, flex: 1,
backgroundColor: R.colors.black_500, backgroundColor: R.colors.black_500,
justifyContent: "center", justifyContent: 'center',
alignItems: "center", alignItems: 'center',
}, },
container_card: { container_card: {
minWidth: "90%", minWidth: '90%',
maxHeight: "80%", maxHeight: '80%',
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
borderRadius: 10, borderRadius: 10,
elevation: 10, elevation: 10,
...@@ -272,12 +253,12 @@ const styles = StyleSheet.create({ ...@@ -272,12 +253,12 @@ const styles = StyleSheet.create({
paddingVertical: 10, paddingVertical: 10,
}, },
header: { header: {
alignItems: "center", alignItems: 'center',
}, },
text_header: { text_header: {
color: R.colors.blue500, color: R.colors.blue500,
fontFamily: R.fonts.InterMedium, fontFamily: R.fonts.InterMedium,
fontWeight: "500", fontWeight: '500',
fontSize: R.fontsize.fontsSize18, fontSize: R.fontsize.fontsSize18,
}, },
text_checkbox: { text_checkbox: {
...@@ -286,14 +267,13 @@ const styles = StyleSheet.create({ ...@@ -286,14 +267,13 @@ const styles = StyleSheet.create({
color: R.colors.black, color: R.colors.black,
}, },
container_row: { container_row: {
flexDirection: "row", flexDirection: 'row',
}, },
text_dormitory_info: { text_dormitory_info: {
fontSize: R.fontsize.fontsSize12, fontSize: R.fontsize.fontsSize12,
fontFamily: R.fonts.InterRegular, fontFamily: R.fonts.InterRegular,
color: R.colors.black, color: R.colors.black,
textAlign: "center", textAlign: 'center',
lineHeight: 20, lineHeight: 20,
}, },
}); });
src/screens/outpatient_information/view.js
...@@ -62,7 +62,7 @@ const OutpatientInfomationView = (props) => { ...@@ -62,7 +62,7 @@ const OutpatientInfomationView = (props) => {
fontFamily={R.fonts.InterRegular} fontFamily={R.fonts.InterRegular}
backgroundColor={R.colors.blue500} backgroundColor={R.colors.blue500}
borderRadius={10} borderRadius={10}
height={38} height={35}
onPress={onOpenRegistrationModal} onPress={onOpenRegistrationModal}
/> />
</View> </View>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment