Skip to content

A
AppUms_Lecturer
Commit f2e2f968 by tungnq
Options

TODO: Format code

parent 89495241
Showing with 201 additions and 147 deletions
src/screens/home/header.js
import { Image, StyleSheet, TextInput, View, Platform, SafeAreaView, StatusBar } from "react-native";
import React from "react";
import R from "../../assets/R";
import styles from "./style";
const HeaderHome = (props) => {
const {
value,
onChangeText,
} = props;
import {
Image,
StyleSheet,
TextInput,
View,
Platform,
SafeAreaView,
StatusBar,
} from 'react-native';
import React from 'react';
import R from '../../assets/R';
import styles from './style';
const HeaderHome = props => {
const {value, onChangeText} = props;
return (
<SafeAreaView style={styles.containerBoxHeader}>
<StatusBar
barStyle="light-content"
translucent={false}
backgroundColor='black'
backgroundColor="black"
/>
<View style={styles.boxLogo}>
<Image
......@@ -23,19 +27,19 @@ const HeaderHome = (props) => {
resizeMode="contain"
/>
</View>
<View style={{flex:1}}></View>
<View style={{flex: 1}}></View>
<View style={styles.searchBox}>
<View style={styles.boxIconSearch}>
<Image
source={R.images.icSearchHeader}
maxWidth={Platform.OS === 'ios' ? 16: 20}
maxWidth={Platform.OS === 'ios' ? 16 : 20}
maxHeight={Platform.OS === 'ios' ? 16 : 20}
/>
</View>
<TextInput
value={value}
onChangeText={onChangeText}
placeholder={"Tìm kiếm"}
placeholder={'Tìm kiếm'}
placeholderTextColor={R.colors.white}
style={styles.input}
/>
......@@ -45,5 +49,3 @@ const HeaderHome = (props) => {
};
export default HeaderHome;
src/screens/home/index.js
import React, { Component, useMemo, useState } from "react";
import { View, Text, Linking } from "react-native";
import * as SCREENNAME from '../../routers/ScreenNames'
import Homeview from "./view";
import R from "../../assets/R";
import { useNavigation } from '@react-navigation/native';
const Home = (props) => {
import React, {Component, useMemo, useState} from 'react';
import {View, Text, Linking} from 'react-native';
import * as SCREENNAME from '../../routers/ScreenNames';
import Homeview from './view';
import R from '../../assets/R';
import {useNavigation} from '@react-navigation/native';
const Home = props => {
const navigation = useNavigation();
const [selectedMenuItem, setSelectedMenuItem] = useState("");
const [searchText, setSearchText] = useState("");
const [selectedMenuItem, setSelectedMenuItem] = useState('');
const [searchText, setSearchText] = useState('');
const [userProfile, setUserProfile] = useState({
name: "NGUYỄN MINH ĐỨC",
phone: "0895457",
name: 'NGUYỄN MINH ĐỨC',
phone: '0895457',
avatar: null,
});
const menuTeachingActivities = [
{ id: 1, title: "Lịch dạy, coi thi", icon: R.images.icLichDay, screenName: SCREENNAME.DRAWERNAVIGATION,action: 'NAVIGATE',},
{ id: 2, title: "Báo nghỉ", icon: R.images.icBaoNghi, screenName: SCREENNAME.LISTRESTREPORT,action: 'NAVIGATE'},
{ id: 3, title: "Báo bù", icon: R.images.icBaoBu , screenName: SCREENNAME.LISTMAKEUPCLASSES,action: 'NAVIGATE',},
{ id: 4, title: "Xác nhận dạy thay", icon: R.images.icXacNhanDayThay,screenName: SCREENNAME.SUBTEACHER,action: 'NAVIGATE', },
{ id: 5, title: "Điểm danh", icon: R.images.icDiemDanh , screenName: SCREENNAME.LISTROLLCALL,action: 'NAVIGATE',},
{ id: 6, title: "Cố vấn học tập", icon: R.images.icCoVanHT,screenName: SCREENNAME.LISTACADEMICADVISOR,action: 'NAVIGATE', }
{
id: 1,
title: 'Lịch dạy, coi thi',
icon: R.images.icLichDay,
screenName: SCREENNAME.DRAWERNAVIGATION,
action: 'NAVIGATE',
},
{
id: 2,
title: 'Báo nghỉ',
icon: R.images.icBaoNghi,
screenName: SCREENNAME.LISTRESTREPORT,
action: 'NAVIGATE',
},
{
id: 3,
title: 'Báo bù',
icon: R.images.icBaoBu,
screenName: SCREENNAME.LISTMAKEUPCLASSES,
action: 'NAVIGATE',
},
{
id: 4,
title: 'Xác nhận dạy thay',
icon: R.images.icXacNhanDayThay,
screenName: SCREENNAME.SUBTEACHER,
action: 'NAVIGATE',
},
{
id: 5,
title: 'Điểm danh',
icon: R.images.icDiemDanh,
screenName: SCREENNAME.LISTROLLCALL,
action: 'NAVIGATE',
},
{
id: 6,
title: 'Cố vấn học tập',
icon: R.images.icCoVanHT,
screenName: SCREENNAME.LISTACADEMICADVISOR,
action: 'NAVIGATE',
},
];
const menuStatistics = [
{
id: 7,
title: "Thống kê giảng dạy",
title: 'Thống kê giảng dạy',
icon: R.images.icThongKe,
screenName: SCREENNAME.STATISTICS,
action: 'NAVIGATE',
},
{ id: 8, title: "Khảo sát sự kiện", icon: R.images.icKhaoSatSuKien ,screenName: SCREENNAME.HOMESCREEN,action: 'NAVIGATE',},
{ id: 9, title: "Kết quả đánh giá", icon: R.images.icKetQuaDanhGia,screenName: SCREENNAME.LISTFEEDBACK,action: 'NAVIGATE', },
{
id: 8,
title: 'Khảo sát sự kiện',
icon: R.images.icKhaoSatSuKien,
screenName: SCREENNAME.HOMESCREEN,
action: 'NAVIGATE',
},
{
id: 9,
title: 'Kết quả đánh giá',
icon: R.images.icKetQuaDanhGia,
screenName: SCREENNAME.LISTFEEDBACK,
action: 'NAVIGATE',
},
];
const menuNotification = [
{ id: 10, title: "Văn bản đến", icon: R.images.icVanBanDen,screenName: SCREENNAME.INCOMINGDOCUMENT,action: 'NAVIGATE', },
{ id: 11, title: "Văn bản đi", icon: R.images.icVanBanDi,screenName: SCREENNAME.LISTSENDDOCUMENT,action: 'NAVIGATE', },
{ id: 12, title: "Công việc", icon: R.images.icCongViec ,screenName: SCREENNAME.LISTWORK, action: 'NAVIGATE' },
{ id: 13, title: "Mail", icon: R.images.icDChiThu,screenName: SCREENNAME.EMAIL, aciton: 'NAVIGATE'},
{
id: 10,
title: 'Văn bản đến',
icon: R.images.icVanBanDen,
screenName: SCREENNAME.INCOMINGDOCUMENT,
action: 'NAVIGATE',
},
{
id: 11,
title: 'Văn bản đi',
icon: R.images.icVanBanDi,
screenName: SCREENNAME.LISTSENDDOCUMENT,
action: 'NAVIGATE',
},
{
id: 12,
title: 'Công việc',
icon: R.images.icCongViec,
screenName: SCREENNAME.LISTWORK,
action: 'NAVIGATE',
},
{
id: 13,
title: 'Mail',
icon: R.images.icDChiThu,
screenName: SCREENNAME.EMAIL,
aciton: 'NAVIGATE',
},
];
//Hàm tìm kiếm trong local theo tiêu đề chỉ hoạt động khi thực hiện tìm kiếm (searchText) thay đổi
const [
filterActivity,
filterStatics,
filterNotification,
] = useMemo(()=>{
if (!searchText.trim()) return [menuTeachingActivities, menuStatistics, menuNotification];
const [filterActivity, filterStatics, filterNotification] = useMemo(() => {
if (!searchText.trim())
return [menuTeachingActivities, menuStatistics, menuNotification];
const toLowerCaseSearchText = searchText.toLowerCase();
const filterByTitle = (list) => list.filter(item => item.title.toLowerCase().includes(toLowerCaseSearchText));
const filterByTitle = list =>
list.filter(item =>
item.title.toLowerCase().includes(toLowerCaseSearchText),
);
return [filterByTitle(menuTeachingActivities), filterByTitle(menuStatistics), filterByTitle(menuNotification)];
},[searchText])
return [
filterByTitle(menuTeachingActivities),
filterByTitle(menuStatistics),
filterByTitle(menuNotification),
];
}, [searchText]);
const actionHandlers = {
NAVIGATE: (item) => {
NAVIGATE: item => {
navigation.navigate(item.screenName, {
...item.params,
itemData: item,
......@@ -63,23 +139,22 @@ const Home = (props) => {
});
},
OPEN_URL: (item) => {
Linking.openURL(item.url).catch((err) => {
console.error("Failed to open URL:", err);
OPEN_URL: item => {
Linking.openURL(item.url).catch(err => {
console.error('Failed to open URL:', err);
});
},
SHOW_MODAL: (item) => {
console.log("Show modal for:", item.title);
SHOW_MODAL: item => {
console.log('Show modal for:', item.title);
},
CALL_API: (item) => {
console.log("Calling API for:", item.title);
CALL_API: item => {
console.log('Calling API for:', item.title);
},
};
const handleMenuItemPress = (item) => {
const handleMenuItemPress = item => {
const handler = actionHandlers[item.action];
if (handler) {
handler(item);
......@@ -88,7 +163,7 @@ const Home = (props) => {
}
};
const handleSearchChange = (text) => {
const handleSearchChange = text => {
setSearchText(text);
};
......
src/screens/home/item.js
import React from "react";
import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";
import styles from "./style";
const ItemGrid = ({ item ,onPress }) => {
import React from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import styles from './style';
const ItemGrid = ({item, onPress}) => {
return (
<TouchableOpacity
onPress={onPress}
style={styles.menu_item}
>
<TouchableOpacity onPress={onPress} style={styles.menu_item}>
<View style={styles.icon_container}>
<Image
source={item.icon}
style={styles.icon}
/>
<Image source={item.icon} style={styles.icon} />
</View>
<Text style={styles.menu_text}>{item.title}</Text>
</TouchableOpacity>
......@@ -19,4 +13,3 @@ const ItemGrid = ({ item ,onPress }) => {
};
export default ItemGrid;
src/screens/home/style.js
import { StyleSheet } from "react-native";
import R from "../../assets/R";
import {StyleSheet} from 'react-native';
import R from '../../assets/R';
const styles = StyleSheet.create({
//Header
containerBoxHeader: {
flexDirection: "row",
flexDirection: 'row',
marginHorizontal: 15,
maxHeight: 40,
marginTop:15
marginTop: 15,
},
boxLogo:{
boxLogo: {
flex: 2,
maxWidth: 75,
maxHeight:36,
maxHeight: 36,
},
boxIconSearch:{
padding:2,
boxIconSearch: {
padding: 2,
},
searchBox: {
flex: 3,
flexDirection: "row",
flexDirection: 'row',
backgroundColor: R.colors.blackBackgroundInputTextHeader,
alignItems: "center",
alignItems: 'center',
borderColor: R.colors.grayBorderInputTextHeader,
borderRadius: 100,
borderWidth: 1,
......@@ -51,22 +51,22 @@ const styles = StyleSheet.create({
profileCard: {
position: 'absolute',
bottom: -30,
flexDirection: "row",
alignItems: "center",
flexDirection: 'row',
alignItems: 'center',
backgroundColor: R.colors.white,
paddingVertical: 10,
paddingHorizontal: 15,
marginHorizontal: 15,
borderRadius: 15,
shadowColor: R.colors.black,
shadowOffset: { width: 0, height: 1 },
shadowOffset: {width: 0, height: 1},
shadowOpacity: 0.5,
shadowRadius: 1,
elevation: 1,
},
profile_left: {
flexDirection: "row",
alignItems: "center",
flexDirection: 'row',
alignItems: 'center',
flex: 3,
},
......@@ -99,7 +99,7 @@ const styles = StyleSheet.create({
},
text_card_info: {
fontSize: R.sizes.md,
fontWeight: "400",
fontWeight: '400',
color: R.colors.black,
fontFamily: R.fonts.InterRegular,
},
......@@ -108,7 +108,7 @@ const styles = StyleSheet.create({
paddingHorizontal: 10,
backgroundColor: R.colors.grayButton,
borderRadius: 15,
flexDirection: "row",
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
......@@ -117,10 +117,9 @@ const styles = StyleSheet.create({
},
btn_text: {
fontSize: R.sizes.sm,
fontWeight: "400",
fontWeight: '400',
color: R.colors.black,
fontFamily: R.fonts.fontRegular,
},
menu_container: {
......@@ -128,7 +127,7 @@ const styles = StyleSheet.create({
},
menu_title: {
fontSize: R.fontsize.fontsSizeSubTitle,
fontWeight: "600",
fontWeight: '600',
color: R.colors.black,
fontFamily: R.fonts.InterMedium,
},
......@@ -138,39 +137,38 @@ const styles = StyleSheet.create({
},
cardItemEmpty: {
flex: 1,
justifyContent: "center",
alignItems: "center",
justifyContent: 'center',
alignItems: 'center',
},
//Item
menu_item: {
alignItems: "center",
alignItems: 'center',
paddingVertical: 10,
paddingHorizontal: 5,
marginHorizontal: 5,
marginVertical: 5,
flex: 1,
maxWidth: "30%",
minHeight:"30%"
maxWidth: '30%',
minHeight: '30%',
},
icon_container: {
width: 35,
height: 35,
backgroundColor:R.colors.white,
backgroundColor: R.colors.white,
},
icon:{
icon: {
width: 35,
height: 35,
resizeMode: "contain",
resizeMode: 'contain',
},
menu_text: {
fontSize: R.sizes.sm,
fontWeight: "600",
fontWeight: '600',
color: R.colors.black,
fontFamily: R.fonts.fontMedium,
textAlign: "center",
textAlign: 'center',
},
});
});
export default styles;
\ No newline at end of file
export default styles;
src/screens/home/view.js
import React from "react";
import React from 'react';
import {
View,
Text,
......@@ -12,15 +12,15 @@ import {
Image,
StatusBar,
Platform,
} from "react-native";
import HeaderCus from "../home/header";
import R from "../../assets/R";
import ItemGrid from "./item";
import styles from "./style";
import { useNavigation } from "@react-navigation/native";
import * as SCREENNAME from "../../routers/ScreenNames";
} from 'react-native';
import HeaderCus from '../home/header';
import R from '../../assets/R';
import ItemGrid from './item';
import styles from './style';
import {useNavigation} from '@react-navigation/native';
import * as SCREENNAME from '../../routers/ScreenNames';
const HomeView = (props) => {
const HomeView = props => {
const {
menuActivity,
menuStatistics,
......@@ -33,7 +33,7 @@ const HomeView = (props) => {
} = props;
const navigate = useNavigation();
const renderMenuItem = ({ item }) => {
const renderMenuItem = ({item}) => {
return <ItemGrid item={item} onPress={() => onMenuItemPress(item)} />;
};
......@@ -44,14 +44,14 @@ const HomeView = (props) => {
<View style={styles.avatar}>
{userProfile?.avatar ? (
<Image
source={{ uri: userProfile.avatar }}
source={{uri: userProfile.avatar}}
style={styles.avatar_image}
resizeMode="cover"
/>
) : (
<View style={styles.avatar_placeholder}>
<Text style={styles.avatar_text}>
{userProfile?.name?.charAt(0) || "U"}
{userProfile?.name?.charAt(0) || 'U'}
</Text>
</View>
)}
......@@ -61,16 +61,14 @@ const HomeView = (props) => {
<Text
style={styles.text_card_info}
numberOfLines={1}
ellipsizeMode="tail"
>
{userProfile?.name ?? "Không có dữ liệu"}
ellipsizeMode="tail">
{userProfile?.name ?? 'Không có dữ liệu'}
</Text>
<Text
style={styles.text_card_info}
numberOfLines={1}
ellipsizeMode="tail"
>
{userProfile?.phone ?? "Không có dữ liệu"}
ellipsizeMode="tail">
{userProfile?.phone ?? 'Không có dữ liệu'}
</Text>
</View>
</View>
......@@ -78,14 +76,10 @@ const HomeView = (props) => {
<TouchableOpacity
style={styles.profile_btn}
onPress={() => navigate.navigate(SCREENNAME.PROFILE)}
activeOpacity={0.7}
>
activeOpacity={0.7}>
<Text style={styles.btn_text}>Hồ sơ cá nhân</Text>
<View style={styles.iconNext}>
<Image
source={R.images.icNext}
style={{ width: 5, height: 10 }}
/>
<Image source={R.images.icNext} style={{width: 5, height: 10}} />
</View>
</TouchableOpacity>
</View>
......@@ -100,7 +94,7 @@ const HomeView = (props) => {
data={menuActivity}
renderItem={renderMenuItem}
numColumns={3}
keyExtractor={(item) => item.id.toString()}
keyExtractor={item => item.id.toString()}
scrollEnabled={false}
columnWrapperStyle={styles.row}
ListEmptyComponent={renderItemEmpty}
......@@ -119,7 +113,7 @@ const HomeView = (props) => {
data={menuStatistics}
renderItem={renderMenuItem}
numColumns={3}
keyExtractor={(item) => item.id.toString()}
keyExtractor={item => item.id.toString()}
scrollEnabled={false}
columnWrapperStyle={styles.row}
ListEmptyComponent={renderItemEmpty}
......@@ -138,7 +132,7 @@ const HomeView = (props) => {
data={menuNotification}
renderItem={renderMenuItem}
numColumns={3}
keyExtractor={(item) => item.id.toString()}
keyExtractor={item => item.id.toString()}
scrollEnabled={false}
columnWrapperStyle={styles.row}
ListEmptyComponent={renderItemEmpty}
......@@ -152,11 +146,8 @@ const HomeView = (props) => {
const renderItemEmpty = () => {
return (
<View style={styles.cardItemEmpty}>
<Image
source={R.images.icNoData}
style={{ width: 50, height: 50 }}
/>
<Text style={[styles.menu_text, { color: R.colors.red }]}>
<Image source={R.images.icNoData} style={{width: 50, height: 50}} />
<Text style={[styles.menu_text, {color: R.colors.red}]}>
Không có dữ liệu
</Text>
</View>
......@@ -169,12 +160,8 @@ const HomeView = (props) => {
<View style={styles.container_body}>
<ImageBackground
source={R.images.igBackground}
style={styles.background_header}
>
<HeaderCus
value={searchText}
onChangeText={onSearchChange}
/>
style={styles.background_header}>
<HeaderCus value={searchText} onChangeText={onSearchChange} />
{cardItemInfo()}
</ImageBackground>
......@@ -182,8 +169,7 @@ const HomeView = (props) => {
showsVerticalScrollIndicator={false}
style={styles.scroll}
bounces={false}
overScrollMode="never"
>
overScrollMode="never">
{renderMenuActivity()}
{renderMenuStatistics()}
{renderMenuNotification()}
......
src/screens/notification/style.js
......@@ -88,6 +88,7 @@ const styles = StyleSheet.create({
text:{
fontSize:R.sizes.sm,
fontWeight:'400',
color:R.colors.black,
fontFamily:R.fonts.fontRegular,
},
textEmpty:{
......
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