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 356 additions and 62 deletions
src/screens/incoming_document/detail/index.js
...@@ -67,9 +67,38 @@ const DetailIncomingDocument = (props) => { ...@@ -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 ( return (
<DetailIncomingDocumentView <DetailIncomingDocumentView
items={items}
icomingDocument={icomingDocument} icomingDocument={icomingDocument}
dataList={dataList}
/> />
); );
......
src/screens/incoming_document/detail/style.js
...@@ -75,7 +75,7 @@ const styles = StyleSheet.create({ ...@@ -75,7 +75,7 @@ const styles = StyleSheet.create({
padding:10, padding:10,
width:300 width:300
}, },
//MODAL //MODAL Thêm Bút Phê
modalOverlay: { modalOverlay: {
flex: 1, flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)', backgroundColor: 'rgba(0, 0, 0, 0.5)',
...@@ -163,7 +163,44 @@ const styles = StyleSheet.create({ ...@@ -163,7 +163,44 @@ const styles = StyleSheet.create({
fontFamily:R.fonts.fontRegular, fontFamily:R.fonts.fontRegular,
fontWeight: '400', 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 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'; ...@@ -17,10 +17,19 @@ import Header from '../../../components/Header/Header';
import TextMulti from '../../../components/Input/TextMulti'; import TextMulti from '../../../components/Input/TextMulti';
import FAB from '../../../components/FAB/fab'; import FAB from '../../../components/FAB/fab';
import SubButton from '../../../components/FAB/sub_button'; import SubButton from '../../../components/FAB/sub_button';
import TextField from '../../../components/Input/TextField';
import Dropdown from '../../../components/DropdownAlert/Dropdown';
const DetailIncomingDocumentView = props => { const DetailIncomingDocumentView = props => {
const {icomingDocument} = props; const {icomingDocument, items, dataList} = props;
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const [showTaskModal, setShowTaskModal] = useState(false);
const [annotationContent, setAnnotationContent] = useState(''); 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); console.log(props);
const getColor = status => { const getColor = status => {
switch (status) { switch (status) {
...@@ -40,50 +49,6 @@ const DetailIncomingDocumentView = props => { ...@@ -40,50 +49,6 @@ const DetailIncomingDocumentView = props => {
Alert.alert('Lỗi', 'Vui lòng nhập nội dung bút phê!'); 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}) => { const renderItem = ({item}) => {
console.log(item); console.log(item);
return ( return (
...@@ -100,10 +65,8 @@ const DetailIncomingDocumentView = props => { ...@@ -100,10 +65,8 @@ const DetailIncomingDocumentView = props => {
</View> </View>
); );
}; };
const body = () => {
return ( return (
<View style={styles.container}>
<Header title={'Văn bản 2038475'} isBack />
<View style={{flex: 1}}>
<ScrollView showsVerticalScrollIndicator={false}> <ScrollView showsVerticalScrollIndicator={false}>
<View style={styles.body}> <View style={styles.body}>
<Text style={styles.textSubTitle}>{icomingDocument.title}</Text> <Text style={styles.textSubTitle}>{icomingDocument.title}</Text>
...@@ -140,9 +103,7 @@ const DetailIncomingDocumentView = props => { ...@@ -140,9 +103,7 @@ const DetailIncomingDocumentView = props => {
}}> }}>
<Text style={styles.text}> <Text style={styles.text}>
Số ký hiệu: Số ký hiệu:
<Text style={styles.text_2}> <Text style={styles.text_2}>{icomingDocument.symbol_number}</Text>
{icomingDocument.symbol_number}
</Text>
</Text> </Text>
<Text style={styles.text}> <Text style={styles.text}>
Số vào sổ: Số vào sổ:
...@@ -163,9 +124,7 @@ const DetailIncomingDocumentView = props => { ...@@ -163,9 +124,7 @@ const DetailIncomingDocumentView = props => {
</Text> </Text>
<Text style={styles.text}> <Text style={styles.text}>
Ngày văn bản: Ngày văn bản:
<Text style={styles.text_2}> <Text style={styles.text_2}>{icomingDocument.term_display}</Text>
{icomingDocument.term_display}
</Text>
</Text> </Text>
</View> </View>
<Text style={[styles.text, {marginBottom: 5}]}> <Text style={[styles.text, {marginBottom: 5}]}>
...@@ -214,7 +173,12 @@ const DetailIncomingDocumentView = props => { ...@@ -214,7 +173,12 @@ const DetailIncomingDocumentView = props => {
{icomingDocument.received_departments.map((item, index) => { {icomingDocument.received_departments.map((item, index) => {
return ( return (
<View style={styles.card}> <View style={styles.card}>
<Text style={{color: R.colors.white, fontSize:R.fontsize.fontSizeContent}} key={index}> <Text
style={{
color: R.colors.white,
fontSize: R.fontsize.fontSizeContent,
}}
key={index}>
{item.name} {item.name}
</Text> </Text>
</View> </View>
...@@ -232,7 +196,12 @@ const DetailIncomingDocumentView = props => { ...@@ -232,7 +196,12 @@ const DetailIncomingDocumentView = props => {
{icomingDocument.received_group.map((item, index) => { {icomingDocument.received_group.map((item, index) => {
return ( return (
<View style={[styles.card, {backgroundColor: R.colors.blue}]}> <View style={[styles.card, {backgroundColor: R.colors.blue}]}>
<Text style={{color: R.colors.white, fontSize:R.fontsize.fontSizeContent}} key={index}> <Text
style={{
color: R.colors.white,
fontSize: R.fontsize.fontSizeContent,
}}
key={index}>
{item.name} {item.name}
</Text> </Text>
</View> </View>
...@@ -251,7 +220,12 @@ const DetailIncomingDocumentView = props => { ...@@ -251,7 +220,12 @@ const DetailIncomingDocumentView = props => {
{icomingDocument.receiver.map((item, index) => { {icomingDocument.receiver.map((item, index) => {
return ( return (
<View style={[styles.card, {backgroundColor: R.colors.blue}]}> <View style={[styles.card, {backgroundColor: R.colors.blue}]}>
<Text style={{color: R.colors.white, fontSize:R.fontsize.fontSizeContent}} key={index}> <Text
style={{
color: R.colors.white,
fontSize: R.fontsize.fontSizeContent,
}}
key={index}>
{item.name} {item.name}
</Text> </Text>
</View> </View>
...@@ -286,7 +260,260 @@ const DetailIncomingDocumentView = props => { ...@@ -286,7 +260,260 @@ const DetailIncomingDocumentView = props => {
/> />
</View> </View>
</ScrollView> </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={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 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}
/>
<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>
<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}
/>
<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>
<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>
</View>
</Modal>
);
};
return (
<View style={styles.container}>
<Header title={'Văn bản 2038475'} isBack />
<View style={{flex: 1}}>
{body()}
<View style={{marginHorizontal: 15}}> <View style={{marginHorizontal: 15}}>
<FAB> <FAB>
<SubButton <SubButton
...@@ -296,7 +523,7 @@ const DetailIncomingDocumentView = props => { ...@@ -296,7 +523,7 @@ const DetailIncomingDocumentView = props => {
backgroundColor={R.colors.orange} backgroundColor={R.colors.orange}
/> />
<SubButton <SubButton
onPress={() => Alert.alert('Pressed 2!')} onPress={() => setShowTaskModal(true)}
label="Tạo công việc" label="Tạo công việc"
images={R.images.icMenuEdit} images={R.images.icMenuEdit}
backgroundColor={R.colors.blue} backgroundColor={R.colors.blue}
...@@ -304,11 +531,10 @@ const DetailIncomingDocumentView = props => { ...@@ -304,11 +531,10 @@ const DetailIncomingDocumentView = props => {
</FAB> </FAB>
</View> </View>
</View> </View>
{openModal()} {openModal()}
{openTaskModal()}
</View> </View>
); );
}; };
export default DetailIncomingDocumentView; export default DetailIncomingDocumentView;
src/screens/notification/add/view.js
...@@ -118,6 +118,7 @@ const NotificationDetailView = props => { ...@@ -118,6 +118,7 @@ const NotificationDetailView = props => {
</Text> </Text>
<View style={styles.containerDropdown}> <View style={styles.containerDropdown}>
<Dropdown <Dropdown
height={35}
items={items} items={items}
placeholder="Chọn tùy chọn" placeholder="Chọn tùy chọn"
onSelect={item => console.log('Bạn đã chọn:', item)} 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