Skip to content

A
AppUms_Lecturer
Commit 7e7c5ced by tungnq
Options

TODO: Đã hoàn thiện xong màn công việc

parent c36ba5e8
Showing with 515 additions and 221 deletions
src/screens/incoming_document/detail/index.js
......@@ -67,9 +67,38 @@ const DetailIncomingDocument = (props) => {
}
}
) ;
const items = [
{ id: 1, label: 'Option 1' },
{ id: 2, label: 'Option 2' },
{ id: 3, label: 'Option 3' },
];
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 (
<DetailIncomingDocumentView
items={items}
icomingDocument={icomingDocument}
dataList={dataList}
/>
);
......
src/screens/incoming_document/detail/style.js
......@@ -75,7 +75,7 @@ const styles = StyleSheet.create({
padding:10,
width:300
},
//MODAL
//MODAL Thêm Bút Phê
modalOverlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
......@@ -163,7 +163,44 @@ const styles = StyleSheet.create({
fontFamily:R.fonts.fontRegular,
fontWeight: '400',
},
//MODAL Thêm công việc
containerDropdown:{
marginBottom:10,
marginTop: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,
}
})
export default styles
\ No newline at end of file
src/screens/incoming_document/detail/view.js
......@@ -17,10 +17,19 @@ import Header from '../../../components/Header/Header';
import TextMulti from '../../../components/Input/TextMulti';
import FAB from '../../../components/FAB/fab';
import SubButton from '../../../components/FAB/sub_button';
import TextField from '../../../components/Input/TextField';
import Dropdown from '../../../components/DropdownAlert/Dropdown';
const DetailIncomingDocumentView = props => {
const {icomingDocument} = props;
const {icomingDocument, items, dataList} = props;
const [showModal, setShowModal] = useState(false);
const [showTaskModal, setShowTaskModal] = useState(false);
const [annotationContent, setAnnotationContent] = useState('');
const [taskTitle, setTaskTitle] = useState('');
const [taskDescription, setTaskDescription] = useState('');
const [taskCategory, setTaskCategory] = useState('Công việc theo văn bản');
const [taskDeadline, setTaskDeadline] = useState('');
const [taskFollower, setTaskFollower] = useState('859256, Nguyễn Minh Đức');
const [taskExecutor, setTaskExecutor] = useState('859256, Nguyễn Minh Đức');
console.log(props);
const getColor = status => {
switch (status) {
......@@ -40,50 +49,6 @@ const DetailIncomingDocumentView = props => {
Alert.alert('Lỗi', 'Vui lòng nhập nội dung bút phê!');
}
};
const openModal = () => {
return (
<Modal
animationType="slide"
transparent={true}
visible={showModal}
onRequestClose={() => setShowModal(false)}>
<View style={styles.modalOverlay}>
<View style={styles.modalContainer}>
<View style={styles.modalHeader}>
<Text style={styles.modalTitle}>Thêm bút phê</Text>
</View>
<View style={styles.modalBody}>
<Text style={styles.inputLabel}>Bút phê</Text>
<TextInput
style={styles.textInput}
placeholder="Nhập nội dung bút phê..."
placeholderTextColor={R.colors.gray}
multiline={true}
numberOfLines={3}
textAlignVertical="top"
value={annotationContent}
onChangeText={setAnnotationContent}
/>
</View>
<View style={styles.modalFooter}>
<TouchableOpacity
style={[styles.button, styles.cancelButton]}
onPress={() => setShowModal(false)}>
<Text style={styles.cancelButtonText}>Hủy</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, styles.submitButton]}
onPress={handleAddAnnotation}>
<Text style={styles.submitButtonText}>Thêm mới</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
)
}
const renderItem = ({item}) => {
console.log(item);
return (
......@@ -100,193 +65,455 @@ const DetailIncomingDocumentView = props => {
</View>
);
};
return (
<View style={styles.container}>
<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.text_1}>
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>
</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>
</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:
<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>
const body = () => {
return (
<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.text_1}>
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>
</View>
<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_2}>{icomingDocument.field}</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>
</Text>
<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 style={styles.text}>
Số vào sổ:
<Text style={styles.text_2}>
{icomingDocument.number_entry_book}
</Text>
<Text style={styles.text}>
Đối tác gửi:
<Text style={styles.text_2}>
{icomingDocument.sender_partner}
</Text>
</Text>
</View>
<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>
</View>
<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_2}>{icomingDocument.field}</Text>
</Text>
<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>
</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}]}>
<Text style={styles.text_2}>{icomingDocument.content}</Text>
</View>
<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,
}}>
<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, fontSize:R.fontsize.fontSizeContent}} key={index}>
{item.name}
</Text>
</View>
);
})}
</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}]}>
<Text style={styles.text_2}>{icomingDocument.content}</Text>
</View>
<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,
}}>
<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,
fontSize: R.fontsize.fontSizeContent,
}}
key={index}>
{item.name}
</Text>
</View>
);
})}
</View>
<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,
fontSize: R.fontsize.fontSizeContent,
}}
key={index}>
{item.name}
</Text>
</View>
);
})}
</View>
<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,
fontSize: R.fontsize.fontSizeContent,
}}
key={index}>
{item.name}
</Text>
</View>
);
})}
</View>
<Text style={[styles.text, {color: R.colors.blue}]}>
Tài liệu đính kèm
</Text>
<TouchableOpacity style={styles.containerBtn}>
<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}
/>
</TouchableOpacity>
<Text style={[styles.text, {color: R.colors.blue}]}>
Bút phê văn bản
</Text>
<FlatList
data={icomingDocument.approvals}
renderItem={renderItem}
keyExtractor={(item, index) => index.toString()}
/>
</View>
</ScrollView>
);
};
const handleCreateTask = () => {
if (taskTitle.trim() && taskDescription.trim()) {
Alert.alert('Thành công', 'Đã tạo công việc thành công!');
setTaskTitle('');
setTaskDescription('');
setTaskDeadline('');
setShowTaskModal(false);
} else {
Alert.alert('Lỗi', 'Vui lòng nhập đầy đủ thông tin!');
}
};
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 openModal = () => {
return (
<Modal
animationType="slide"
transparent={true}
visible={showModal}
onRequestClose={() => setShowModal(false)}>
<View style={styles.modalOverlay}>
<View style={styles.modalContainer}>
<View style={styles.modalHeader}>
<Text style={styles.modalTitle}>Thêm bút phê</Text>
</View>
<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, fontSize:R.fontsize.fontSizeContent}} key={index}>
{item.name}
</Text>
</View>
);
})}
<View style={styles.modalBody}>
<Text style={styles.inputLabel}>Bút phê</Text>
<TextInput
style={styles.textInput}
placeholder="Nhập nội dung bút phê..."
placeholderTextColor={R.colors.gray}
multiline={true}
numberOfLines={3}
textAlignVertical="top"
value={annotationContent}
onChangeText={setAnnotationContent}
/>
</View>
<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, fontSize:R.fontsize.fontSizeContent}} key={index}>
{item.name}
</Text>
</View>
);
})}
<View style={styles.modalFooter}>
<TouchableOpacity
style={[styles.button, styles.cancelButton]}
onPress={() => setShowModal(false)}>
<Text style={styles.cancelButtonText}>Hủy</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, styles.submitButton]}
onPress={handleAddAnnotation}>
<Text style={styles.submitButtonText}>Thêm mới</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
);
};
const openTaskModal = () => {
return (
<Modal
animationType="slide"
transparent={true}
visible={showTaskModal}
onRequestClose={() => setShowTaskModal(false)}>
<View style={styles.modalOverlay}>
<View style={[styles.modalContainer, {maxHeight: '90%'}]}>
<View style={styles.modalHeader}>
<Text style={styles.modalTitle}>Thêm công việc</Text>
</View>
<ScrollView
style={styles.modalBody}
showsVerticalScrollIndicator={false}>
<TextField
title="Tiêu đề"
fontSizeTitle={R.fontsize.fontSizeLabel}
required
placeholder="HS"
placeholderTextColor={R.colors.gray}
value={taskTitle}
onChangeText={setTaskTitle}
containerMarginBottom={10}
/>
<Text style={[styles.text, {color: R.colors.blue}]}>
Tài liệu đính kèm
</Text>
<TouchableOpacity style={styles.containerBtn}>
<Text style={styles.textBtn}>
Quyết định thông báo đào tạo - QD347583
<TextMulti
title="Mô tả"
titleFontSize={R.fontsize.fontSizeLabel}
placeholder="Nhập mô tả..."
placeholderTextColor={R.colors.gray}
multiline={true}
numberOfLines={3}
required
value={taskDescription}
onChangeText={setTaskDescription}
/>
<View style={styles.containerDropdown}>
<Text
style={[
styles.text,
{
marginBottom: 3,
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
fontWeight: '400',
color: R.colors.black,
},
]}>
Thẻ
</Text>
<Dropdown
height={35}
items={items}
placeholder="Chọn tùy chọn"
onSelect={item => console.log('Bạn đã chọn:', item)}
/>
</View>
<Text style={[styles.text_2, {marginBottom: 3}]}>
Danh sách thẻ đã chọn :
</Text>
<Image
source={R.images.icDownload}
style={{width: 20, height: 20}}
resizeMode="contain"
tintColor={R.colors.blue}
<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}
/>
<TextField
title="Ngày đến hạn"
required
fontSizeTitle={R.fontsize.fontSizeLabel}
value={taskDeadline}
onChangeText={setTaskDeadline}
/>
</TouchableOpacity>
<Text style={[styles.text, {color: R.colors.blue}]}>
Bút phê văn bản
</Text>
<View style={styles.containerDropdown}>
<Text
style={[
styles.text,
{
marginBottom: 3,
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
fontWeight: '400',
color: R.colors.black,
},
]}>
Người theo dõi {''}
<Text style={{color: R.colors.red}}>*</Text>
</Text>
<Dropdown
height={35}
items={items}
placeholder="Chọn tùy chọn"
onSelect={item => console.log('Bạn đã chọn:', item)}
/>
</View>
<Text style={[styles.text_2, {marginBottom: 3}]}>
Danh sách người theo dõi đã 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={[
styles.text,
{
marginBottom: 3,
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
fontWeight: '400',
color: R.colors.black,
},
]}>
Người thực hiện công việc{' '}
<Text style={{color: R.colors.red}}>*</Text>
</Text>
<Dropdown
height={35}
items={items}
placeholder="Chọn tùy chọn"
onSelect={item => console.log('Bạn đã chọn:', item)}
/>
</View>
<Text style={[styles.text_2, {marginBottom: 3}]}>
Danh sách người thực hiện công việc đã 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}
/>
</ScrollView>
<FlatList
data={icomingDocument.approvals}
renderItem={renderItem}
keyExtractor={(item, index) => index.toString()}
/>
<View style={styles.modalFooter}>
<TouchableOpacity
style={[styles.button, styles.cancelButton]}
onPress={() => setShowTaskModal(false)}>
<Text style={styles.cancelButtonText}>Hủy</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, styles.submitButton]}
onPress={handleCreateTask}>
<Text style={styles.submitButtonText}>Thêm mới</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
</View>
</Modal>
);
};
return (
<View style={styles.container}>
<Header title={'Văn bản 2038475'} isBack />
<View style={{flex: 1}}>
{body()}
<View style={{marginHorizontal: 15}}>
<FAB>
<SubButton
......@@ -296,7 +523,7 @@ const DetailIncomingDocumentView = props => {
backgroundColor={R.colors.orange}
/>
<SubButton
onPress={() => Alert.alert('Pressed 2!')}
onPress={() => setShowTaskModal(true)}
label="Tạo công việc"
images={R.images.icMenuEdit}
backgroundColor={R.colors.blue}
......@@ -304,11 +531,10 @@ const DetailIncomingDocumentView = props => {
</FAB>
</View>
</View>
{openModal()}
{openModal()}
{openTaskModal()}
</View>
);
};
export default DetailIncomingDocumentView;
src/screens/notification/add/view.js
......@@ -118,6 +118,7 @@ const NotificationDetailView = props => {
</Text>
<View style={styles.containerDropdown}>
<Dropdown
height={35}
items={items}
placeholder="Chọn tùy chọn"
onSelect={item => console.log('Bạn đã chọn:', item)}
......
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