Skip to content

A
AppUms_Lecturer
Commit fa147e2a by tungnq
Options

TODO: Tối ưu hóa màu sắc cho các trạng thái trong các component: cập nhật mã màu… 

TODO: Tối ưu hóa màu sắc cho các trạng thái trong các component: cập nhật mã màu cho 'Đã phê duyệt', 'Hạn chế' và 'Chờ xác nhận'
parent 445b4c46
Showing with 257 additions and 225 deletions
src/screens/list_send_document/detail/index.js
...@@ -8,7 +8,7 @@ const DetailSendDocument = props => { ...@@ -8,7 +8,7 @@ const DetailSendDocument = props => {
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', 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',
status: 'Hạn chế', status: 'Hạn chế',
symbol_number: '2038475', symbol_number: '2038475',
regime: 'Đã phê duyệt ', regime: 'Đã phê duyệt',
number_entry_book: '12493-fh544', number_entry_book: '12493-fh544',
term: '29/07/2025', term: '29/07/2025',
term_display: '09/07/2025', term_display: '09/07/2025',
......
src/screens/list_send_document/detail/view.js
...@@ -33,25 +33,28 @@ const DetailSendDocumentView = props => { ...@@ -33,25 +33,28 @@ const DetailSendDocumentView = props => {
const getColor = status => { const getColor = status => {
switch (status) { switch (status) {
case 'Hạn chế': case 'Hạn chế':
return R.colors.brown; return R.colors.orange;
case 'Công khai': case 'Công khai':
return R.colors.blue; return R.colors.blue;
} }
}; };
const getColorRegime = regime => { const getColorRegime = regime => {
console.log("Checking regime:", regime);
switch (regime) { switch (regime) {
case 'Đã phê duyệt': case 'Đã phê duyệt':
return R.colors.green; return R.colors.green1;
case 'Chờ xét duyệt': case 'Chờ xét duyệt':
return R.colors.blue; return R.colors.blue;
case 'Cần chỉnh sửa': case 'Cần chỉnh sửa':
return R.colors.orange; return R.colors.orange;
case 'Dự thảo': case 'Dự thảo':
return R.colors.orange; return R.colors.orange;
default:
console.log("No match, returning R.colors.black (default)"); // Log khi không khớp
return R.colors.black; // Màu mặc định nếu không khớp
} }
}; };
const renderItem = ({item}) => { const renderItem = ({item}) => {
console.log(item);
return ( return (
<View style={{marginVertical: 7.5}}> <View style={{marginVertical: 7.5}}>
<View style={{flexDirection: 'row', marginBottom: 5}}> <View style={{flexDirection: 'row', marginBottom: 5}}>
...@@ -67,6 +70,8 @@ const DetailSendDocumentView = props => { ...@@ -67,6 +70,8 @@ const DetailSendDocumentView = props => {
); );
}; };
const body = () => { const body = () => {
console.log('regime',icomingDocument.regime);
return ( return (
<ScrollView showsVerticalScrollIndicator={false}> <ScrollView showsVerticalScrollIndicator={false}>
<View style={styles.body}> <View style={styles.body}>
...@@ -94,7 +99,7 @@ const DetailSendDocumentView = props => { ...@@ -94,7 +99,7 @@ const DetailSendDocumentView = props => {
<Text style={styles.text}> <Text style={styles.text}>
Trạng thái:{' '} Trạng thái:{' '}
<Text style={[styles.text_2, {color: R.colors.green}]}> <Text style={[styles.text_2, {color: getColorRegime(icomingDocument.regime)}]}>
{icomingDocument.regime} {icomingDocument.regime}
</Text> </Text>
</Text> </Text>
......
src/screens/list_send_document/index.js
import React, {useState} 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';
import R from '../../assets/R';
const ListSendDocument = props => { const ListSendDocument = props => {
const [activeTab, setActiveTab] = useState('all'); const [activeTab, setActiveTab] = useState('all');
...@@ -93,6 +94,27 @@ const ListSendDocument = props => { ...@@ -93,6 +94,27 @@ const ListSendDocument = props => {
return matchTab && matchSearch; return matchTab && matchSearch;
}); });
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.green1;
case 'Dự thảo':
return R.colors.orange;
}
};
const getColorRegime = regime => {
switch (regime) {
case 'Hạn chế':
return R.colors.orange;
case 'Công khai':
return R.colors.blue;
}
};
return ( return (
<ListSendDocumentView <ListSendDocumentView
activeTab={activeTab} activeTab={activeTab}
...@@ -101,6 +123,9 @@ const ListSendDocument = props => { ...@@ -101,6 +123,9 @@ const ListSendDocument = props => {
searchQuery={searchQuery} searchQuery={searchQuery}
setSearchQuery={setSearchQuery} setSearchQuery={setSearchQuery}
handleTabKey={handleTabKey} handleTabKey={handleTabKey}
getColorStatus={getColorStatus}
getColorRegime={getColorRegime}
/> />
); );
}; };
......
src/screens/list_send_document/view.js
...@@ -25,29 +25,11 @@ const ListSendView = props => { ...@@ -25,29 +25,11 @@ const ListSendView = props => {
searchQuery, searchQuery,
setSearchQuery, setSearchQuery,
handleTabKey, handleTabKey,
getColorStatus,
getColorRegime
} = props; } = props;
const navigation = useNavigation(); const navigation = useNavigation();
LogBox.ignoreLogs(['VirtualizedLists should never be nested']); LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
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 hasRelatedWork = n => Number(n) > 0;
const getHiddenButton = n => (hasRelatedWork(n) ? true : false); const getHiddenButton = n => (hasRelatedWork(n) ? true : false);
......
src/screens/list_work/index.js
...@@ -466,7 +466,7 @@ const ListWork = props => { ...@@ -466,7 +466,7 @@ const ListWork = props => {
}, },
{ {
title: 'Phê duyệt', title: 'Phê duyệt',
backgroundColor: R.colors.green, backgroundColor: R.colors.orange,
action: 'approve', action: 'approve',
}, },
{title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'}, {title: 'Chi tiết', backgroundColor: R.colors.blue, action: 'detail'},
......
src/screens/list_work/monitoring/view.js
...@@ -7,7 +7,6 @@ import { ...@@ -7,7 +7,6 @@ import {
FlatList, FlatList,
ScrollView, ScrollView,
LogBox, LogBox,
ActivityIndicator,
} from 'react-native'; } from 'react-native';
import styles from './style'; import styles from './style';
import FAB from '../../../components/FAB/fab'; import FAB from '../../../components/FAB/fab';
......
src/screens/notification/detail/style.js
...@@ -15,7 +15,7 @@ const styles = StyleSheet.create({ ...@@ -15,7 +15,7 @@ const styles = StyleSheet.create({
borderWidth: 1, borderWidth: 1,
borderRadius: 10, borderRadius: 10,
marginVertical: 10, marginVertical: 10,
backgroundColor: R.colors.brown, backgroundColor: R.colors.orange,
}, },
txtInput: { txtInput: {
color: R.colors.white, color: R.colors.white,
......
src/screens/notification/index.js
import React, {useState, useMemo} from 'react'; import React, {useState, useMemo} from 'react';
import {Text, View, StyleSheet} from 'react-native'; import {Text, View, StyleSheet} from 'react-native';
import NotificationView from './view'; import NotificationView from './view';
import R from '../../assets/R';
const Notification = props => { const Notification = props => {
//Xử lý tabView //Xử lý tabView
...@@ -179,6 +180,17 @@ const Notification = props => { ...@@ -179,6 +180,17 @@ const Notification = props => {
setSearchText(text); setSearchText(text);
}; };
const getStatusColor = status => {
switch (status) {
case 'Đã gửi':
return R.colors.green1 ;
case 'Chưa gửi':
return R.colors.orange;
default:
return R.colors.gray ;
}
};
const fitlerSearch = useMemo(() => { const fitlerSearch = useMemo(() => {
const list = dataNotifi[activeTab] || []; const list = dataNotifi[activeTab] || [];
if (!searchText.trim()) return list; if (!searchText.trim()) return list;
...@@ -198,6 +210,7 @@ const Notification = props => { ...@@ -198,6 +210,7 @@ const Notification = props => {
return ( return (
<NotificationView <NotificationView
getStatusColor={getStatusColor}
dataTitleListTabView={dataListTabView} dataTitleListTabView={dataListTabView}
activeTab={activeTab} activeTab={activeTab}
onTabChange={handleTabChange} onTabChange={handleTabChange}
......
src/screens/notification/view.js
...@@ -22,6 +22,7 @@ const NotificationView = props => { ...@@ -22,6 +22,7 @@ const NotificationView = props => {
getEmptyMessage, getEmptyMessage,
searchText, searchText,
onSearchChange, onSearchChange,
getStatusColor
} = props; } = props;
const navigate = useNavigation(); const navigate = useNavigation();
const getRenderItemFunction = () => { const getRenderItemFunction = () => {
...@@ -32,16 +33,7 @@ const NotificationView = props => { ...@@ -32,16 +33,7 @@ const NotificationView = props => {
return renderNotificationItemView; return renderNotificationItemView;
} }
}; };
const getStatusColor = status => {
switch (status) {
case 'Đã gửi':
return R.colors.green || '#4CAF50';
case 'Chưa gửi':
return R.colors.brown || '#8D6E63';
default:
return R.colors.gray || '#9E9E9E';
}
};
const renderTabViewItem = ({item}) => { const renderTabViewItem = ({item}) => {
const isActivity = activeTab === item.key; const isActivity = activeTab === item.key;
return ( return (
......
src/screens/roll_call/detail/style.js
...@@ -108,6 +108,12 @@ const styles = StyleSheet.create({ ...@@ -108,6 +108,12 @@ const styles = StyleSheet.create({
fontWeight: '400', fontWeight: '400',
color: R.colors.black, color: R.colors.black,
}, },
txtView:{
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontMedium,
fontWeight: '600',
color: R.colors.black,
}
}); });
export default styles; export default styles;
src/screens/roll_call/detail/view.js
...@@ -2,10 +2,7 @@ import React, {useState} from 'react'; ...@@ -2,10 +2,7 @@ import React, {useState} from 'react';
import { import {
Text, Text,
View, View,
TouchableOpacity,
StyleSheet,
ScrollView, ScrollView,
FlatList,
} from 'react-native'; } from 'react-native';
import Header from '../../../components/Header/Header'; import Header from '../../../components/Header/Header';
import styles from './style'; import styles from './style';
...@@ -15,209 +12,222 @@ import R from '../../../assets/R'; ...@@ -15,209 +12,222 @@ import R from '../../../assets/R';
const DetailRollCallView = props => { const DetailRollCallView = props => {
const {sessionDates, studentsData} = props; const {sessionDates, studentsData} = props;
return ( const renderGroupButton = () => {
<View style={styles.container}> return (
<Header title={'Thống kê: ATTT2024.P1'} isBack /> <View style={styles.btnGroup}>
<View style={styles.body}> <Button
<ScrollView vertical showsVerticalScrollIndicator={false}> title="Tạo QR điểm danh"
<View style={styles.btnGroup}> onPress={() => {}}
<Button containerStyle={{
title="Tạo QR điểm danh" paddingHorizontal: 5,
onPress={() => {}} paddingVertical: 5,
containerStyle={{ borderRadius: 20,
paddingHorizontal: 5, }}
paddingVertical: 5, backgroundColor={R.colors.orange}
borderRadius: 20, textColor={R.colors.white}
}} fontSize={12}
backgroundColor={R.colors.orange} height={30}
textColor={R.colors.white} width={150}
fontSize={12} />
height={30} <Button />
width={150} <Button
/> title="Điểm danh"
<Button /> onPress={() => {}}
<Button containerStyle={{
title="Điểm danh" paddingHorizontal: 5,
onPress={() => {}} paddingVertical: 5,
containerStyle={{ borderRadius: 20,
paddingHorizontal: 5, marginLeft: 5,
paddingVertical: 5, }}
borderRadius: 20, backgroundColor={R.colors.blue}
marginLeft: 5, textColor={R.colors.white}
}} fontSize={12}
backgroundColor={R.colors.blue} height={30}
textColor={R.colors.white} width={150}
fontSize={12} />
height={30} <Button />
width={150} </View>
/> );
<Button /> };
</View>
<View> const renderView = () => {
<Text style={styles.txt}> return (
SL sinh viên nghỉ quá số lượng cho phép: <Text>3</Text> <View>
</Text> <View>
<Text style={styles.txt}> <Text style={[styles.txt, styles.txtView ]}>
SL sinh viên đang bị cảnh báo: <Text>1</Text> SL sinh viên nghỉ quá số lượng cho phép: <Text style={[styles.txt]}>3</Text>
</Text> </Text>
<Text style={styles.txt}> <Text style={[styles.txt, styles.txtView]}>
SL sinh viên đủ điều kiện: <Text>3</Text> SL sinh viên đang bị cảnh báo: <Text style={[styles.txt]}>1</Text>
</Text> </Text>
</View> <Text style={[styles.txt, styles.txtView]}>
SL sinh viên đủ điều kiện: <Text style={[styles.txt]}>3</Text>
</Text>
</View>
<View> <View>
<Text <Text
style={[ style={[
styles.txt, styles.txt,
{ {
fontSize: R.fontsize.fontSizeSubTitle, fontSize: R.fontsize.fontSizeSubTitle,
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
fontWeight: '600', fontWeight: '600',
color: R.colors.blue, color: R.colors.blue,
}, },
]}> ]}>
Kí hiệu Kí hiệu
</Text> </Text>
<View <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
style={{flexDirection: 'row', justifyContent: 'space-between'}}> <View>
<View> <Text style={[styles.txt, {color: R.colors.blue}]}>
<Text style={[styles.txt, {color: R.colors.blue}]}> (1){' '}
(1){' '} <Text
<Text style={[
style={[ styles.txt,
styles.txt, {
{ color: R.colors.black,
color: R.colors.black, fontFamily: R.fonts.fontMedium,
fontFamily: R.fonts.fontMedium, fontWeight: '600',
fontWeight: '600', },
}, ]}>
]}> Có mặt
Có mặt
</Text>
</Text> </Text>
</View> </Text>
<View> </View>
<Text style={[styles.txt, {color: R.colors.red}]}> <View>
(0){' '} <Text style={[styles.txt, {color: R.colors.red}]}>
<Text (0){' '}
style={[ <Text
styles.txt, style={[
{ styles.txt,
color: R.colors.black, {
fontFamily: R.fonts.fontMedium, color: R.colors.black,
fontWeight: '600', fontFamily: R.fonts.fontMedium,
}, fontWeight: '600',
]}> },
Vắng mặt ]}>
</Text> Vắng mặt
</Text> </Text>
</View> </Text>
<View> </View>
<Text style={[styles.txt, {color: R.colors.blue}]}> <View>
(*){' '} <Text style={[styles.txt, {color: R.colors.blue}]}>
<Text (*){' '}
style={[ <Text
styles.txt, style={[
{ styles.txt,
color: R.colors.black, {
fontFamily: R.fonts.fontMedium, color: R.colors.black,
fontWeight: '600', fontFamily: R.fonts.fontMedium,
}, fontWeight: '600',
]}> },
Chưa đến ngày ]}>
</Text> Chưa đến ngày
</Text> </Text>
</View> </Text>
</View> </View>
</View> </View>
</View>
</View>
);
};
<View> const renderList = () => {
<Text style={styles.sectionTitle}>Danh sách</Text> return (
<View>
<Text style={styles.sectionTitle}>Danh sách</Text>
<View style={styles.attendanceTableContainer}> <View style={styles.attendanceTableContainer}>
<ScrollView horizontal showsHorizontalScrollIndicator={false}> <ScrollView horizontal showsHorizontalScrollIndicator={false}>
<View style={styles.attendanceTable}> <View style={styles.attendanceTable}>
{/* Header Row */} <View style={styles.attendanceHeaderRow}>
<View style={styles.attendanceHeaderRow}> <View
<View style={[
styles.attendanceHeaderCell,
styles.studentInfoColumn,
]}>
<Text style={styles.attendanceHeaderText}>
Mã SV,{'\n'}Họ và tên
</Text>
</View>
{sessionDates.map((date, index) => (
<View
key={index}
style={[styles.attendanceHeaderCell, styles.dateColumn]}>
<Text style={styles.attendanceHeaderText}>{date}</Text>
</View>
))}
</View>
{studentsData.map((student, studentIndex) => (
<View key={student.id} style={styles.attendanceDataRow}>
<View
style={[
styles.attendanceDataCell,
styles.studentInfoColumn,
]}>
<Text style={styles.studentCodeText}>
{student.studentCode}
</Text>
<Text style={styles.studentNameText}>{student.name}</Text>
<Text
style={[ style={[
styles.attendanceHeaderCell, styles.percentageText,
styles.studentInfoColumn, {
color: student.percentage.includes('50%')
? R.colors.red
: R.colors.green1,
},
]}> ]}>
<Text style={styles.attendanceHeaderText}> {student.percentage}
Mã SV,{'\n'}Họ và tên </Text>
</Text>
</View>
{sessionDates.map((date, index) => (
<View
key={index}
style={[
styles.attendanceHeaderCell,
styles.dateColumn,
]}>
<Text style={styles.attendanceHeaderText}>{date}</Text>
</View>
))}
</View> </View>
{student.attendance.map((status, dateIndex) => (
{/* Student Rows */} <View
{studentsData.map((student, studentIndex) => ( key={dateIndex}
<View key={student.id} style={styles.attendanceDataRow}> style={[styles.attendanceDataCell, styles.dateColumn]}>
<View <Text
style={[ style={[
styles.attendanceDataCell, styles.attendanceStatusText,
styles.studentInfoColumn, {
]}> color:
<Text style={styles.studentCodeText}> status === 1
{student.studentCode} ? R.colors.blue
</Text> : status === 0
<Text style={styles.studentNameText}>
{student.name}
</Text>
<Text
style={[
styles.percentageText,
{
color: student.percentage.includes('50%')
? R.colors.red ? R.colors.red
: R.colors.green, : R.colors.gray,
}, },
]}> ]}>
{student.percentage} {status}
</Text> </Text>
</View>
{student.attendance.map((status, dateIndex) => (
<View
key={dateIndex}
style={[
styles.attendanceDataCell,
styles.dateColumn,
]}>
<Text
style={[
styles.attendanceStatusText,
{
color:
status === 1
? R.colors.blue
: status === 0
? R.colors.red
: R.colors.gray2,
},
]}>
{status}
</Text>
</View>
))}
</View> </View>
))} ))}
</View> </View>
</ScrollView> ))}
</View> </View>
</View> </ScrollView>
</View>
</View>
);
};
const renderBody = () => {
return (
<View style={styles.body}>
<ScrollView vertical showsVerticalScrollIndicator={false}>
{renderGroupButton()}
{renderView()}
{renderList()}
</ScrollView> </ScrollView>
</View> </View>
);
};
return (
<View style={styles.container}>
<Header title={'Thống kê: ATTT2024.P1'} isBack />
{renderBody()}
</View> </View>
); );
}; };
......
src/screens/sub_teacher/view.js
...@@ -174,7 +174,7 @@ const SubTeacherView = props => { ...@@ -174,7 +174,7 @@ const SubTeacherView = props => {
case 'Chờ xác nhận': case 'Chờ xác nhận':
return R.colors.blue; return R.colors.blue;
case 'Đã xác nhận': case 'Đã xác nhận':
return R.colors.green; return R.colors.green1;
case 'Từ chối': case 'Từ chối':
return R.colors.orange; return 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