Skip to content

A
AppUms_Lecturer
Commit f4da18ee by tungnq
Options

TODO: Đã hoàn thiện xong phần giao diện

parent 4bbcb277
Showing with 345 additions and 24 deletions
src/components/Button.js
...@@ -78,4 +78,4 @@ const Button = props => { ...@@ -78,4 +78,4 @@ const Button = props => {
</TouchableOpacity> </TouchableOpacity>
); );
}; };
export default Button; export default Button ;
src/components/Input/TextField.js
...@@ -16,8 +16,8 @@ const TextField = props => { ...@@ -16,8 +16,8 @@ const TextField = props => {
placeholder, placeholder,
backgroundColor, backgroundColor,
onFocus, onFocus,
fontSize, fontSize = R.fontsize.fontSizeContent,
fontSizeTitle, fontSizeTitle = R.fontsize.fontSizeContent,
color, color,
required, required,
containerMarginVertical, containerMarginVertical,
...@@ -26,6 +26,7 @@ const TextField = props => { ...@@ -26,6 +26,7 @@ const TextField = props => {
containerMarginBottom, containerMarginBottom,
containerBackgroundColor, containerBackgroundColor,
width, width,
fontFamily = R.fonts.fontSemiBold,
} = props; } = props;
const renderMess = () => { const renderMess = () => {
if (value && value.trim().length > 0) return `${title} không hợp lệ`; if (value && value.trim().length > 0) return `${title} không hợp lệ`;
...@@ -39,7 +40,7 @@ const TextField = props => { ...@@ -39,7 +40,7 @@ const TextField = props => {
fontSize: fontSizeTitle, fontSize: fontSizeTitle,
color: R.colors.black, color: R.colors.black,
marginBottom: 5, marginBottom: 5,
fontFamily:R.fonts.fontRegular, fontFamily:fontFamily,
fontWeight:'400', fontWeight:'400',
}}> }}>
...@@ -50,7 +51,7 @@ const TextField = props => { ...@@ -50,7 +51,7 @@ const TextField = props => {
placeholder={placeholder} placeholder={placeholder}
maxLength={maxLength ? maxLength : 256} maxLength={maxLength ? maxLength : 256}
placeholderTextColor={R.colors.placeHolder} placeholderTextColor={R.colors.gray}
editable={editable != null ? editable : true} editable={editable != null ? editable : true}
secureTextEntry={isPassword} secureTextEntry={isPassword}
autoCapitalize="none" autoCapitalize="none"
......
src/components/Input/TextMulti.js
...@@ -6,7 +6,7 @@ import R from '../../assets/R'; ...@@ -6,7 +6,7 @@ import R from '../../assets/R';
const TextField = props => { const TextField = props => {
const { const {
title, title,
titleFontSize, titleFontSize = R.fontsize.fontSizeContent,
required, required,
onChangeText, onChangeText,
maxLength, maxLength,
...@@ -23,6 +23,7 @@ const TextField = props => { ...@@ -23,6 +23,7 @@ const TextField = props => {
onFocus, onFocus,
fontFamily, fontFamily,
height, height,
numberOfLines = 5,
} = props; } = props;
return ( return (
...@@ -51,9 +52,9 @@ const TextField = props => { ...@@ -51,9 +52,9 @@ const TextField = props => {
value={value} value={value}
onChangeText={val => onChangeText(val)} onChangeText={val => onChangeText(val)}
multiline={true} multiline={true}
numberOfLines={5} numberOfLines={numberOfLines}
onFocus={onFocus} onFocus={onFocus}
placeholderTextColor="gray" placeholderTextColor={R.colors.gray}
autoCapitalize="none" autoCapitalize="none"
style={{ style={{
textAlignVertical: 'top', textAlignVertical: 'top',
......
src/screens/list_send_document/add/index.js
import React from 'react'; import React, {useState} from 'react';
import {Text, View, StyleSheet} from 'react-native'; import {Text, View, StyleSheet} from 'react-native';
import AddSendDocumentView from './view'; import AddSendDocumentView from './view';
const AddSendDocument = (props) => { const AddSendDocument = (props) => {
const [dataList, setDataList] = useState([
{ id: 1, name: 'Nguyễn Minh Đức' },
{ id: 2, name: 'Trần Văn Hùng' },
{ id: 3, name: 'Lê Thị Mai' },
{ id: 4, name: 'Phạm Quốc Khánh' },
{ id: 5, name: 'Hoàng Anh Tuấn' },
{ id: 6, name: 'Vũ Thị Hằng' },
{ id: 7, name: 'Ngô Văn Nam' },
{ id: 8, name: 'Đinh Thị Lan' },
{ id: 9, name: 'Bùi Văn Phúc' },
{ id: 10, name: 'Lý Thị Hoa' },
{ id: 11, name: 'Phan Minh Hoàng' },
{ id: 12, name: 'Tạ Thị Hương' },
{ id: 13, name: 'Đoàn Văn Dũng' },
{ id: 14, name: 'Nguyễn Thị Vân' },
{ id: 15, name: 'Trương Văn Long' },
{ id: 16, name: 'Mai Thị Ngọc' },
{ id: 17, name: 'Huỳnh Quốc Việt' },
{ id: 18, name: 'Lâm Thị Thu' },
{ id: 19, name: 'Nguyễn Hữu Tài' },
{ id: 20, name: 'Phạm Thị Kim' }
]);
return ( return (
<AddSendDocumentView /> <AddSendDocumentView
dataList={dataList}
/>
); );
}; };
......
src/screens/list_send_document/add/style.js
...@@ -9,7 +9,81 @@ const styles = StyleSheet.create({ ...@@ -9,7 +9,81 @@ const styles = StyleSheet.create({
body: { body: {
flex: 1, flex: 1,
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
marginHorizontal:15,
}, },
row_1:{
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 10,
marginTop: 10,
},
sub_text :{
fontSize: R.fontsize.fontSizeContent,
fontWeight: '500',
fontFamily:R.fonts.fontSemiBold,
color:R.colors.black,
},
text:{
fontSize: R.fontsize.fontSizeContent,
fontWeight: '400',
fontFamily:R.fonts.fontRegular,
color:R.colors.black,
},
containerDropdown:{
marginBottom:10,
position: 'relative',
zIndex: 1000
},
chip: {
flexDirection: 'row',
alignItems: 'center',
// position: 'relative',
paddingLeft: 10,
paddingRight:10,
height: 25,
borderRadius: 10,
marginBottom:10,
marginRight:5,
backgroundColor: R.colors.blue2,
alignSelf:'flex-start'
},
imageIcon: {
width: 15,
height: 15,
},
containerIcon: {
marginRight: 2,
},
flatListSelect:{
flexDirection:'row',
flexWrap:'wrap',
},
textChip:{
fontSize: R.fontsize.fontSizeContent,
fontWeight: '400',
fontFamily:R.fonts.fontRegular,
color:R.colors.blueTextChip,
},
containerBtn:{
flexDirection:'row',
alignItems:'center',
justifyContent:'space-around',
marginVertical:10,
borderRadius:10,
backgroundColor:R.colors.blue1,
padding:10,
width:350
},
button:{
borderRadius:10,
alignItems:'center',
justifyContent:'center',
marginVertical:10,
borderWidth:1,
borderColor:R.colors.blue1,
height:80
}
}) })
export default styles export default styles
src/screens/list_send_document/add/view.js
import React from 'react'; import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet} from 'react-native'; import {
Text,
View,
TouchableOpacity,
StyleSheet,
FlatList,
Image,
ScrollView,
} from 'react-native';
import Header from '../../../components/Header/Header'; import Header from '../../../components/Header/Header';
import R from '../../../assets/R'; import R from '../../../assets/R';
import { useNavigation } from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
import * as ScreenName from '../../../routers/ScreenNames'; import * as ScreenName from '../../../routers/ScreenNames';
import Button from '../../../components/Button'; import Button from '../../../components/Button';
import Dropdown from '../../../components/DropdownAlert/Dropdown'; import Dropdown from '../../../components/DropdownAlert/Dropdown';
import styles from './style'; import styles from './style';
const AddSendDocumentView = (props) => { import TextField from '../../../components/Input/TextField';
const { } = props; import TextMulti from '../../../components/Input/TextMulti';
const AddSendDocumentView = props => {
const {dataList} = props;
const navigation = useNavigation(); const navigation = useNavigation();
const renderItem_1 = ({item, onPress}) => {
return (
<View style={styles.chip}>
<TouchableOpacity style={styles.containerIcon} onPress={onPress}>
<Image
resizeMode="cover"
source={R.images.icCancel}
style={styles.imageIcon}
tintColor={R.colors.blue}
/>
</TouchableOpacity>
<Text style={styles.textChip}> {`${item.id}, ${item.name}`}</Text>
</View>
);
};
const body = () => { const body = () => {
return ( return (
<View style={styles.body}> <View style={styles.body}>
<View style={{flexDirection:'row', justifyContent:'space-between'}}> <View style={styles.row_1}>
<Text>Ngày tạo</Text> <Text style={styles.sub_text}>Ngày tạo:{' '}
<Text>Trạng thái</Text> <Text style={styles.sub_text}>29/07/2025</Text>
</Text>
<Text style={styles.sub_text}>Trạng thái:{' '}
<Text style={[styles.sub_text, {color: R.colors.orange}]}>
Dự thảo
</Text>
</Text>
</View> </View>
<TextField
title="Tiêu đề"
required
fontSize={R.fontsize.fontSizeContent}
fontSizeTitle={R.fontsize.fontSizeContent}
fontFamily={R.fonts.fontSemiBold}
placeholder="Nhập tiêu đề"
containerMarginBottom={10}
/>
<TextMulti
title="Nội dung văn bản"
required
fontSize={R.fontsize.fontSizeContent}
titleFontSize={R.fontsize.fontSizeContent}
fontFamily={R.fonts.fontSemiBold}
placeholder="Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan"
containerMarginBottom={10}
numberOfLines={3}
/>
<TextMulti
title="Ghi chú"
fontSize={R.fontsize.fontSizeContent}
titleFontSize={R.fontsize.fontSizeContent}
fontFamily={R.fonts.fontSemiBold}
placeholder="Ban lãnh đạo yêu cầu hoàn thành thời khóa biểu trong tháng cho các đơn vị chuyên môn sắp xếp các công việc và lịch liên quan"
containerMarginBottom={10}
numberOfLines={3}
/>
<TextField
fontSize={R.fontsize.fontSizeContent}
titleFontSize={R.fontsize.fontSizeContent}
fontFamily={R.fonts.fontSemiBold}
title="Loại văn bản"
required
containerMarginBottom={10}
/>
<TextField
title="Loại vực văn bản"
required
containerMarginBottom={10}
/>
<View style={styles.containerDropdown}>
<Text style={[{marginBottom: 3}, styles.sub_text]}>
Chế độ <Text style={{color: R.colors.red}}>*</Text>
</Text>
<Dropdown
title="Chế độ"
required
containerMarginBottom={10}
height={35}
/>
</View>
<View style={styles.containerDropdown}>
<Text style={[{marginBottom: 3}, styles.sub_text]}>
Phòng ban nhận <Text style={{color: R.colors.red}}>*</Text>
</Text>
<Dropdown
title="Chế độ"
required
containerMarginBottom={10}
height={35}
/>
</View>
<Text style={[{marginBottom: 3}, styles.sub_text]}>
Danh sách phòng ban nhận đã chọn :
</Text>
<FlatList
data={dataList}
renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
keyExtractor={(item, index) =>
item.id?.toString() || index.toString()
}
numColumns={2}
style={{maxHeight: 150, marginBottom: 10}}
showsVerticalScrollIndicator={true}
columnWrapperStyle={styles.flatListSelect}
nestedScrollEnabled={true}
scrollEnabled={true}
/>
<View style={styles.containerDropdown}>
<Text style={[{marginBottom: 3}, styles.sub_text]}>
Nhóm người nhận <Text style={{color: R.colors.red}}>*</Text>
</Text>
<Dropdown
title="Chế độ"
required
containerMarginBottom={10}
height={35}
/>
</View>
<Text style={[{marginBottom: 3}, styles.sub_text]}>
Danh sách nhóm người nhận đã chọn :
</Text>
<FlatList
data={dataList}
renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
keyExtractor={(item, index) =>
item.id?.toString() || index.toString()
}
numColumns={2}
style={{maxHeight: 150, marginBottom: 10}}
showsVerticalScrollIndicator={true}
columnWrapperStyle={styles.flatListSelect}
nestedScrollEnabled={true}
scrollEnabled={true}
/>
<View style={styles.containerDropdown}>
<Text style={[{marginBottom: 3}, styles.sub_text]}>
Người nhận <Text style={{color: R.colors.red}}>*</Text>
</Text>
<Dropdown
title="Chế độ"
required
containerMarginBottom={10}
height={35}
/>
</View>
<Text style={[{marginBottom: 3}, styles.sub_text]}>
Danh sách người nhận đã chọn :
</Text>
<FlatList
data={dataList}
renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
keyExtractor={(item, index) =>
item.id?.toString() || index.toString()
}
numColumns={2}
style={{maxHeight: 150, marginBottom: 10}}
showsVerticalScrollIndicator={true}
columnWrapperStyle={styles.flatListSelect}
nestedScrollEnabled={true}
scrollEnabled={true}
/>
{footer()}
</View>
);
};
const footer = () => {
return (
<View style={styles.footer}>
<Text style={[styles.sub_text, {color: R.colors.blue}]}>
Tài liệu đính kèm
</Text>
<TouchableOpacity style={styles.containerBtn}>
<Text style={styles.text}>
Quyết định thông báo đào tạo - QD347583
</Text>
<Image
source={R.images.icCancel}
style={{width: 20, height: 20}}
resizeMode="contain"
tintColor={R.colors.blue}
/>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Image
source={R.images.icDocument}
style={{width: 35, height: 35}}
resizeMode="contain"
tintColor={R.colors.blue}
/>
<Text style={[styles.sub_text, {color: R.colors.blue}]}>
Thêm tài liệu
</Text>
</TouchableOpacity>
<Button
title="Tạo văn bản"
onPress={() => {}}
backgroundColor={R.colors.blue}
textColor={R.colors.white}
borderRadius={15}
paddingVertical={3}
containerMarginBottom={10}
/>
</View> </View>
); );
}; };
return ( return (
<View <View style={styles.container}>
style={styles.container}>
<Header title={'Soạn văn bản đi'} isBack /> <Header title={'Soạn văn bản đi'} isBack />
{body()} <ScrollView showsVerticalScrollIndicator={false}>{body()}</ScrollView>
</View> </View>
); );
}; };
......
src/screens/list_send_document/status/style.js
import { StyleSheet, Text, View } from 'react-native' import { StyleSheet, Text, View } from 'react-native'
const styles = StyleSheet.create({}) const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: R.colors.white,
},
body: {
flex: 1,
backgroundColor: R.colors.white,
},
})
export default styles export default styles
src/screens/list_send_document/view.js
...@@ -74,7 +74,6 @@ const ListSendView = (props) => { ...@@ -74,7 +74,6 @@ const ListSendView = (props) => {
<Text style={[{color: getColorRegime(item.regime)}]}>{item.regime}</Text> <Text style={[{color: getColorRegime(item.regime)}]}>{item.regime}</Text>
</Text> </Text>
<View <View
style={{ style={{
flexDirection: 'row', flexDirection: 'row',
...@@ -104,6 +103,7 @@ const ListSendView = (props) => { ...@@ -104,6 +103,7 @@ const ListSendView = (props) => {
onPress={() => {}} onPress={() => {}}
backgroundColor={R.colors.orange} backgroundColor={R.colors.orange}
textColor={R.colors.white} textColor={R.colors.white}
width={150}
height={25} height={25}
borderRadius={15} borderRadius={15}
fontSize={11} fontSize={11}
...@@ -215,7 +215,7 @@ const ListSendView = (props) => { ...@@ -215,7 +215,7 @@ const ListSendView = (props) => {
<View style={{marginHorizontal: 15}}> <View style={{marginHorizontal: 15}}>
<FAB> <FAB>
<SubButton <SubButton
onPress={() => setShowModal(true)} onPress={() => navigation.navigate(ScreenName.ADDSENDOCUMENT)}
label="Soạn văn bản đi" label="Soạn văn bản đi"
images={R.images.icEdit} images={R.images.icEdit}
backgroundColor={R.colors.orange} backgroundColor={R.colors.orange}
......
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