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