Skip to content

A
AppUms_Lecturer
Commit 67627291 by tungnq
Options

IMPORTANT: Cho FAB chia ra làm 2 màn hình để FAB bám vào màn hình giao diện

parent 9052caa2
Showing with 160 additions and 59 deletions
src/components/FAB/constants.js
......@@ -58,7 +58,7 @@ export const SUBBTN_WIDTH = FAB_WIDTH;
export const SUBBTN_HEIGHT = SUBBTN_WIDTH;
// Bán kính bo tròn (nút con hình tròn)
export const SUBBTN_BORDER_RADIUS = SUBBTN_WIDTH / 2;
export const SUBBTN_BORDER_RADIUS = 10;
// Màu nền mặc định của nút con
export const SUBBTN_BACKGROUND_COLOR = '#2F6BFF';
......
src/components/FAB/sub_button.js
......@@ -88,6 +88,14 @@ const styles = StyleSheet.create({
marginTop: 10, // Khoảng cách giữa các SubButton4
flexDirection: 'row',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
label: {
marginRight:3,
......
src/screens/incoming_document/detail/style.js
......@@ -62,7 +62,7 @@ const styles = StyleSheet.create({
borderRadius:100,
padding:10,
alignSelf:'flex-start',
backgroundColor:R.colors.brown,
backgroundColor:R.colors.orange,
marginHorizontal:5
},
containerBtn:{
......
src/screens/incoming_document/detail/view.js
import React, {useEffect} from 'react';
import {Text, View, TouchableOpacity, StyleSheet, Image, ScrollView, FlatList, Alert} from 'react-native';
import {
Text,
View,
TouchableOpacity,
StyleSheet,
Image,
ScrollView,
FlatList,
Alert,
} from 'react-native';
import R from '../../../assets/R';
import styles from './style';
import Header from '../../../components/Header/Header';
......@@ -9,123 +18,190 @@ import SubButton from '../../../components/FAB/sub_button';
const DetailIncomingDocumentView = props => {
const {icomingDocument} = props;
console.log(props);
const getColor = (status) => {
const getColor = status => {
switch (status) {
case 'Hạn chế':
return R.colors.brown;
case 'Công khai':
return R.colors.blue;
}
}
};
const renderItem = ({item}) => {
console.log(item);
return (
<View style={{marginVertical: 7.5}}>
<View style={{flexDirection: 'row', marginBottom:5}}>
<View style={{flexDirection: 'row', marginBottom: 5}}>
<Text style={styles.text}>{item.author} - </Text>
<Text style={styles.text}>{item.code}{" "}</Text>
<Text style={styles.text}>{item.time}{" "}</Text>
<Text style={styles.text}>{item.code} </Text>
<Text style={styles.text}>{item.time} </Text>
<Text style={styles.text}>{item.date}</Text>
</View>
<View style={styles.containerContent}>
<Text style={styles.text_2}>{item.content}</Text>
</View>
</View>
)
}
);
};
return (
<View style={styles.container}>
<Header title={'Văn bản 2038475'} isBack/>
<Header title={'Văn bản 2038475'} isBack />
<View style={{flex: 1}}>
<ScrollView showsVerticalScrollIndicator={false}>
<View style={styles.body}>
<Text style = {styles.textSubTitle}>{icomingDocument.title}</Text>
<View style={{marginTop:5}}></View>
<View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',marginBottom:5}}>
<Text style={styles.textSubTitle}>{icomingDocument.title}</Text>
<View style={{marginTop: 5}}></View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 5,
}}>
<Text style={styles.text_1}>
Văn bản hiện có {icomingDocument.total_head_of_work} công việc liên {'\n'}quan
Văn bản hiện có {icomingDocument.total_head_of_work} công việc
liên {'\n'}quan
</Text>
<Text style={styles.text}>
Chế độ:
<Text style={{
fontWeight:'600',
fontFamily:R.fonts.fontMedium,
fontSize:R.fontsize.fontSizeContent,
color: getColor(icomingDocument.status)}}>{icomingDocument.status}</Text>
<Text
style={{
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
fontSize: R.fontsize.fontSizeContent,
color: getColor(icomingDocument.status),
}}>
{icomingDocument.status}
</Text>
</Text>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-between',marginBottom:5}}>
<Text style={styles.text}>Số ký hiệu:
<Text style={styles.text_2}>{icomingDocument.symbol_number}</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 5,
}}>
<Text style={styles.text}>
Số ký hiệu:
<Text style={styles.text_2}>
{icomingDocument.symbol_number}
</Text>
</Text>
<Text style={styles.text}>
Số vào sổ:
<Text style={styles.text_2}>
{icomingDocument.number_entry_book}
</Text>
<Text style={styles.text}>Số vào sổ:
<Text style={styles.text_2}>{icomingDocument.number_entry_book}</Text>
</Text>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-between',marginBottom:5}}>
<Text style={styles.text}>Ngày đến:
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 5,
}}>
<Text style={styles.text}>
Ngày đến:
<Text style={styles.text_2}>{icomingDocument.term}</Text>
</Text>
<Text style={styles.text}>Ngày văn bản:
<Text style={styles.text_2}>{icomingDocument.term_display}</Text>
<Text style={styles.text}>
Ngày văn bản:
<Text style={styles.text_2}>
{icomingDocument.term_display}
</Text>
</Text>
</View>
<Text style={[styles.text , {marginBottom:5}]}>Loại văn bản:
<Text style={[styles.text, {marginBottom: 5}]}>
Loại văn bản:
<Text style={styles.text_2}>{icomingDocument.document_type}</Text>
</Text>
<Text style={[styles.text , {marginBottom:5}]}>Lĩnh vực văn bản:
<Text style={[styles.text, {marginBottom: 5}]}>
Lĩnh vực văn bản:
<Text style={styles.text_2}>{icomingDocument.field}</Text>
</Text>
<View style={{flexDirection: 'row', justifyContent: 'space-between',marginBottom:5}}>
<Text style={styles.text}>Người ký:
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 5,
}}>
<Text style={styles.text}>
Người ký:
<Text style={styles.text_2}>{icomingDocument.signer_name}</Text>
</Text>
<Text style={styles.text}>Đối tác gửi:
<Text style={styles.text_2}>{icomingDocument.sender_partner}</Text>
<Text style={styles.text}>
Đối tác gửi:
<Text style={styles.text_2}>
{icomingDocument.sender_partner}
</Text>
</Text>
</View>
<TextMulti title="Ghi chú" />
<View style={{marginTop:5}}></View>
<Text style={[styles.text, {marginBottom:3}]}>Nội dung</Text>
<View style={[styles.containerContent , {marginBottom:5}]}>
<View style={{marginTop: 5}}></View>
<Text style={[styles.text, {marginBottom: 3}]}>Nội dung</Text>
<View style={[styles.containerContent, {marginBottom: 5}]}>
<Text style={styles.text_2}>{icomingDocument.content}</Text>
</View>
<Text style={[styles.text,{marginBottom:5}]}>
<Text style={[styles.text, {marginBottom: 5}]}>
Ý kiến của BGH:
<Text style={styles.text_2}>{icomingDocument.opinion_bgh}</Text>
</Text>
<View style={{flexDirection:'row',flexWrap:'wrap',alignItems:'center', marginBottom:5}}>
<View
style={{
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
marginBottom: 5,
}}>
<Text style={styles.text}>Phòng ban nhận :</Text>
{icomingDocument.received_departments.map((item, index) => {
return (
<View style={styles.card}>
<Text style={{color:R.colors.white}} key={index}>{item.name}</Text>
<Text style={{color: R.colors.white}} key={index}>
{item.name}
</Text>
</View>
)
);
})}
</View>
<View style={{flexDirection:'row',flexWrap:'wrap',alignItems:'center', marginBottom:5}}>
<View
style={{
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
marginBottom: 5,
}}>
<Text style={styles.text}>Nhóm nhận :</Text>
{icomingDocument.received_group.map((item, index) => {
return (
<View style={[styles.card , {backgroundColor:R.colors.blue}]}>
<Text style={{color:R.colors.white}} key={index}>{item.name}</Text>
<View style={[styles.card, {backgroundColor: R.colors.blue}]}>
<Text style={{color: R.colors.white}} key={index}>
{item.name}
</Text>
</View>
)
);
})}
</View>
<View style={{flexDirection:'row',flexWrap:'wrap',alignItems:'center', marginBottom:5}}>
<View
style={{
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
marginBottom: 5,
}}>
<Text style={styles.text}>Người nhận :</Text>
{icomingDocument.receiver.map((item, index) => {
return (
<View style={[styles.card , {backgroundColor:R.colors.blue}]}>
<Text style={{color:R.colors.white}} key={index}>{item.name}</Text>
<View style={[styles.card, {backgroundColor: R.colors.blue}]}>
<Text style={{color: R.colors.white}} key={index}>
{item.name}
</Text>
</View>
)
);
})}
</View>
<Text style={[styles.text, {color:R.colors.blue}]}>
<Text style={[styles.text, {color: R.colors.blue}]}>
Tài liệu đính kèm
</Text>
......@@ -133,10 +209,15 @@ const DetailIncomingDocumentView = props => {
<Text style={styles.textBtn}>
Quyết định thông báo đào tạo - QD347583
</Text>
<Image source={R.images.icDownload} style={{width: 20, height: 20}} resizeMode="contain" tintColor={R.colors.blue}/>
<Image
source={R.images.icDownload}
style={{width: 20, height: 20}}
resizeMode="contain"
tintColor={R.colors.blue}
/>
</TouchableOpacity>
<Text style={[styles.text, {color:R.colors.blue}]}>
<Text style={[styles.text, {color: R.colors.blue}]}>
Bút phê văn bản
</Text>
......@@ -145,14 +226,26 @@ const DetailIncomingDocumentView = props => {
renderItem={renderItem}
keyExtractor={(item, index) => index.toString()}
/>
</View>
</ScrollView>
<View style={{marginHorizontal: 15}}>
<FAB>
<SubButton onPress={() => Alert.alert('Pressed 1!')} label="Thêm bút phê" images={R.images.icEdit} backgroundColor={R.colors.orange}/>
<SubButton onPress={() => Alert.alert('Pressed 2!')} label="Tạo công việc" images={R.images.icMenuEdit} backgroundColor={R.colors.blue}/>
<SubButton
onPress={() => Alert.alert('Pressed 1!')}
label="Thêm bút phê"
images={R.images.icEdit}
backgroundColor={R.colors.orange}
/>
<SubButton
onPress={() => Alert.alert('Pressed 2!')}
label="Tạo công việc"
images={R.images.icMenuEdit}
backgroundColor={R.colors.blue}
/>
</FAB>
</View>
</ScrollView>
</View>
</View>
);
};
......
src/screens/incoming_document/view.js
......@@ -86,7 +86,7 @@ const IncomingDocumentView = props => {
<Button
title="Công việc"
onPress={() => {}}
backgroundColor={R.colors.brown}
backgroundColor={R.colors.orange}
textColor={R.colors.white}
height={25}
borderRadius={15}
......
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