Skip to content

A
AppUms_Lecturer
Commit 22ff14e1 by tungnq
Options

TODO: Đã hoàn thiện giao diện danh sách văn bản đi

parent b325c672
Showing with 372 additions and 10 deletions
src/screens/list_send_document/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 ListSendDocumentView from './view'; import ListSendDocumentView from './view';
const ListSendDocument = (props) => { const ListSendDocument = (props) => {
const [activeTab, setActiveTab] = useState("all")
const [dataListTabView, setDataListTabView] = useState([
{
key:"all",
title_status:"Tất cả",
},
{
key:"restrict",
title_status:"Đã hạn chế",
},
{
key:"public",
title_status:"Công khai"
}
])
const handleTabKey = (tabKey) =>{
setActiveTab(tabKey)
}
const [dataList,setDataList] = useState([
{
id:'1',
title:'Văn bản thông báo lịch nộp thời khoá biểu của học kì 2 năm 2025',
symbol_number:'123456789',
term:'29/07/2025',
number_entry_book:'12493-fh544',
status:'Chờ xét duyệt',
regime:'Hạn chế',
},
{
id:'2',
title:'Văn bản thông báo lịch nộp thời khoá biểu của học kì 2 năm 2025',
symbol_number:'123456789',
term:'29/07/2025',
number_entry_book:'12493-fh544',
status:'Cần chỉnh sửa',
regime:'Hạn chế',
},
{
id:'3',
title:'Văn bản thông báo lịch nộp thời khoá biểu của học kì 2 năm 2025',
symbol_number:'123456789',
term:'29/07/2025',
number_entry_book:'12493-fh544',
status:'Đã phê duyệt',
regime:'Hạn chế',
},
{
id:'4',
title:'Văn bản thông báo lịch nộp thời khoá biểu của học kì 2 năm 2025',
symbol_number:'123456789',
term:'29/07/2025',
number_entry_book:'12493-fh544',
status:'Dự thảo',
regime:'Công khai',
},
])
const [searchQuery, setSearchQuery] = useState("")
const filterData = dataList.filter((item) =>{
const matchTab = activeTab == 'all' || item.status == activeTab;
const matchSearch = item.title.toLowerCase().includes(searchQuery.toLowerCase());
return matchTab && matchSearch;
})
return ( return (
<ListSendDocumentView /> <ListSendDocumentView
activeTab={activeTab}
dataListTabView={dataListTabView}
dataList={filterData}
searchQuery={searchQuery}
setSearchQuery={setSearchQuery}
handleTabKey={handleTabKey}
/>
); );
}; };
......
src/screens/list_send_document/style.js
import { StyleSheet, Text, View } from 'react-native' import { StyleSheet, Text, View } from 'react-native'
import R from '../../assets/R'
const styles = StyleSheet.create({}) const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:R.colors.white
},
body:{
flex:1,
backgroundColor:R.colors.white
},
cardTabView:{
},
itemTabView:{
width:110,
height:35,
borderRadius:10,
marginTop:10,
backgroundColor:R.colors.gray,
alignItems:'center',
justifyContent:'center',
marginLeft:15,
},
textTabView:{
fontSize:R.fontsize.fontSizeContent,
fontWeight:'400',
color:R.colors.black,
fontFamily:R.fonts.fontRegular,
},
activeTab:{
backgroundColor:R.colors.blue,
},
activeTabText:{
color:R.colors.white,
fontWeight:'500',
},
contentContainerStyle:{
},
card:{
borderWidth:1,
borderColor:R.colors.grayBorderInputTextHeader,
borderRadius:10,
padding:5,
marginTop:15,
marginBottom:15,
marginHorizontal:15,
alignItems:'center',
justifyContent:'center',
backgroundColor:R.colors.white,
shadowColor:R.colors.black,
shadowOffset:{width:0.5,height:2},
shadowOpacity:Platform.OS === 'ios' ? 0.25 : 1,
shadowRadius:5,
elevation:Platform.OS === 'ios' ? 1 : 2,
},
btnCard:{
borderRadius:10,
borderWidth:1,
padding:5,
width:'100%',
alignItems:'center',
justifyContent:'center',
borderColor:R.colors.grayBorderInputTextHeader,
},
text:{
fontSize:R.sizes.sm,
color:R.colors.black,
fontFamily:R.fonts.fontRegular,
fontWeight:'400',
},
box_3:{
flexDirection:'row',
marginHorizontal:15,
alignItems:'center',
},
searchBox:{
flex:1,
borderWidth:1,
borderColor:R.colors.grayBorderInputTextHeader,
borderRadius:20,
alignItems:'center',
justifyContent:'flex-start',
paddingLeft:15,
flexDirection:'row',
height:42
},
boxFilter:{
flex:1,
},
cardIncomingDocument:{
borderRadius:10,
padding:10,
marginHorizontal:15,
marginVertical:7.5,
backgroundColor:R.colors.white,
shadowColor:R.colors.black,
shadowOffset:{width:0.5,height:2},
shadowOpacity:Platform.OS === 'ios' ? 0.25 : 1,
elevation:Platform.OS === 'ios' ? 1 : 2,
},
textSubTitle:{
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,
}
})
export default styles export default styles
\ No newline at end of file
src/screens/list_send_document/view.js
import React from 'react'; import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet} from 'react-native'; import {Text, View, TouchableOpacity, FlatList, Image, TextInput} from 'react-native';
import styles from './style'; import styles from './style';
import Header from '../../components/Header/Header';
import R from '../../assets/R';
import * as ScreenName from '../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native';
import Button from '../../components/Button';
import Dropdown from '../../components/DropdownAlert/Dropdown';
import FAB from '../../components/FAB/fab';
import SubButton from '../../components/FAB/sub_button';
const ListSendView = (props) => { const ListSendView = (props) => {
const { } = props; const {activeTab, dataListTabView, dataList, searchQuery, setSearchQuery, handleTabKey} = props;
const navigation = useNavigation();
const getColorStatus = status => {
switch (status) {
case 'Chờ xét duyệt':
return R.colors.blue;
case 'Cần chỉnh sửa':
return R.colors.orange;
case 'Đã phê duyệt':
return R.colors.green;
case 'Dự thảo':
return R.colors.orange;
}
};
const getColorRegime = regime => {
switch (regime) {
case 'Hạn chế':
return R.colors.brown;
case 'Công khai':
return R.colors.blue;
}
};
const hasRelatedWork = n => Number(n) > 0;
const getHiddenButton = n => (hasRelatedWork(n) ? true : false);
const itemTabView = ({item, index}) => {
const isActive = item.key === activeTab;
return (
<TouchableOpacity
style={[styles.itemTabView, isActive ? styles.activeTab : null]}
onPress={() => handleTabKey && handleTabKey(item.key)}>
<Text
style={[styles.textTabView, isActive ? styles.activeTabText : null]}>
{item.title_status}
</Text>
</TouchableOpacity>
);
};
const renderItemIncomingDocument = ({item}) => {
const showRelatedWork = getHiddenButton(item?.total_head_of_work);
return ( return (
<View style={styles.cardIncomingDocument}>
<Text style={styles.textSubTitle}>{item.title}</Text>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={styles.textSubTitle}>Ngày tạo:{" "}
<Text style={styles.text}>{item.term}</Text>
</Text>
<Text style={styles.textSubTitle}>
Trạng thái:{" "}
<Text style={[{color: getColorStatus(item.status)}]}>{item.status}</Text>
</Text>
</View>
<Text style={styles.textSubTitle}>
Chế độ:{" "}
<Text style={[{color: getColorRegime(item.regime)}]}>{item.regime}</Text>
</Text>
<View <View
style={{ style={{
flex: 1, flexDirection: 'row',
justifyContent: 'center', alignSelf: 'flex-end',
alignItems: 'center', marginVertical: 5,
}}> }}>
<TouchableOpacity> {showRelatedWork && (
<Text>ListSend</Text> <Button
title="Công việc"
onPress={() => {}}
backgroundColor={R.colors.orange}
textColor={R.colors.white}
height={25}
borderRadius={15}
fontSize={11}
fontWeight={'600'}
fontFamily={R.fonts.fontMedium}
paddingHorizontal={15}
/>
)}
<View style={{flex: 0.1}}></View>
<Button
title="Chi tiết"
onPress={() => navigation.navigate(ScreenName.DETAILINCOMINGDOCUMENT)}
backgroundColor={R.colors.blue}
textColor={R.colors.white}
height={25}
width={90}
borderRadius={15}
fontSize={11}
fontWeight={'600'}
fontFamily={R.fonts.fontMedium}
paddingHorizontal={15}
/>
</View>
</View>
);
};
const renderListIncomingDocument = () => {
return (
<FlatList
data={dataList}
renderItem={renderItemIncomingDocument}
keyExtractor={item => item.id.toString()}
showsVerticalScrollIndicator={false}
/>
);
};
return (
<View
style={styles.container}>
<Header title={'Danh sách văn bản đi'} isBack />
<View style ={{flex:1}}>
<View style={styles.body}>
<View style={styles.cardTabView}>
<FlatList
data={dataListTabView}
renderItem={itemTabView}
keyExtractor={item => item.key}
horizontal
contentContainerStyle={styles.contentContainerStyle}
showsHorizontalScrollIndicator={false}
/>
</View>
<View style={{marginBottom: 15}}>
<View style={styles.card}>
<TouchableOpacity style={styles.btnCard}>
<Text style={styles.text}>Học kỳ 2, Năm 2025</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={styles.box_3}>
<View style={styles.searchBox}>
<Image
source={R.images.icSearch}
style={{width: 20, height: 20}}
/>
<View style={{flex:1}}>
<TextInput
placeholder="Tìm kiếm"
style={styles.text}
value={searchQuery}
onChangeText={setSearchQuery}
/>
</View>
</View>
<View style={{flex: 0.1}}></View>
<View style={styles.boxFilter}>
<Dropdown title={'Tìm kiếm'} height={40}/>
</View>
</View>
</View>
{renderListIncomingDocument()}
</View>
<View style={{marginHorizontal: 15}}>
<FAB>
<SubButton
onPress={() => setShowModal(true)}
label="Soạn văn bản đi"
images={R.images.icEdit}
backgroundColor={R.colors.orange}
/>
</FAB>
</View>
</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