Skip to content

A
AppUms_Lecturer
Commit 45dfc3f6 by tungnq
Options

TODO: Thêm màn hình tạo thông báo với hỗ trợ danh sách thả xuống và đính kèm tệp

parent 27da74cf
Showing with 177 additions and 46 deletions
src/assets/images.js
......@@ -59,6 +59,7 @@ const images = {
icDrop: require('./icon/icon_png/arrow_drop.png'),
icSearchHeader:require('./icon/icon_png/icon_search_header.png'),
icSearch: require('./icon/icon_png/icon_search.png'),
icDocument: require('./icon/icon_png/ic_document.png'),
//Image Logo
igLogo: require('./images/logo.png'),
......
src/components/DropdownAlert/Dropdown.js
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, FlatList, Image } from 'react-native';
import React, {useState} from 'react';
import {
View,
Text,
TouchableOpacity,
StyleSheet,
FlatList,
Image,
ScrollView,
} from 'react-native';
import R from '../../assets/R';
const Dropdown = ({ items, placeholder = "Chọn...", onSelect }) => {
const Dropdown = ({items, placeholder = 'Chọn...', onSelect}) => {
const [isOpen, setIsOpen] = useState(false);
const [selected, setSelected] = useState(null);
const handleSelect = (item) => {
const handleSelect = item => {
setSelected(item);
setIsOpen(false);
if (onSelect) onSelect(item);
......@@ -16,19 +24,22 @@ const Dropdown = ({ items, placeholder = "Chọn...", onSelect }) => {
{/* Nút hiển thị */}
<TouchableOpacity
style={styles.dropdownHeader}
onPress={() => setIsOpen(!isOpen)}
>
onPress={() => setIsOpen(!isOpen)}>
<Text style={styles.dropdownHeaderText}>
{selected ? selected.label : placeholder}
</Text>
<Image source={R.images.icDrop} style={styles.imageIcon} />
</TouchableOpacity>
{/* Danh sách xổ xuống */}
{isOpen && (
<View style={[styles.dropdownList, { position: 'absolute', top: 35, left: 0, right: 0, zIndex: 999 }]}>
<FlatList
<View
style={[
styles.dropdownList,
{position: 'absolute', top: 35, left: 0, right: 0, zIndex: 999},
]}>
{/* <FlatList
nestedScrollEnabled={true}
data={items}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
......@@ -39,7 +50,17 @@ const Dropdown = ({ items, placeholder = "Chọn...", onSelect }) => {
<Text style={styles.dropdownItemText}>{item.label}</Text>
</TouchableOpacity>
)}
/>
/> */}
<ScrollView style={{maxHeight: 200}}>
{items.map(item => (
<TouchableOpacity
key={item.id.toString()}
style={styles.dropdownItem}
onPress={() => handleSelect(item)}>
<Text style={styles.dropdownItemText}>{item.label}</Text>
</TouchableOpacity>
))}
</ScrollView>
</View>
)}
</View>
......@@ -52,7 +73,7 @@ const styles = StyleSheet.create({
container: {
width: '100%',
},
dropdownHeader: {
dropdownHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
......@@ -60,14 +81,12 @@ dropdownHeader: {
borderColor: '#ccc',
borderRadius: 5,
backgroundColor: '#fff',
height:35,
paddingHorizontal:15
height: 35,
paddingHorizontal: 15,
},
dropdownHeaderText: {
fontSize: 12,
color: '#333',
},
dropdownList: {
borderWidth: 1,
......@@ -83,10 +102,10 @@ dropdownHeader: {
fontSize: 12,
color: '#333',
},
imageIcon:{
width:20,
height:20,
resizeMode:'contain',
tintColor:'#333',
}
imageIcon: {
width: 20,
height: 20,
resizeMode: 'contain',
tintColor: '#333',
},
});
src/screens/notification/add/index.js
......@@ -16,13 +16,46 @@ const NotificationAdd = (props) => {
{ 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' }
]);
const [selectedValue2, setSelectedValue2] = useState('1');
const options2 = [
{label: 'Gửi hẹn thời gian', value: '1'},
{label: 'Gửi lập tức', value: '2'},
];
const onValueChange2 = value => {
setSelectedValue2(value);
};
return (
<NotificationAddView
options={options}
selectedValue={selectedValue}
onValueChange={onValueChange}
items={items}
dataList={dataList}
options2={options2}
selectedValue2={selectedValue2}
onValueChange2={onValueChange2}
/>
);
};
......
src/screens/notification/add/style.js
......@@ -41,10 +41,11 @@ const styles = StyleSheet.create({
alignItems: 'center',
// position: 'relative',
paddingLeft: 10,
paddingRight:10,
height: 25,
borderRadius: 10,
marginBottom:10,
marginHorizontal:5,
marginRight:5,
// top: 10,
// left: 10,
backgroundColor: R.colors.blue2,
......@@ -74,6 +75,29 @@ const styles = StyleSheet.create({
flexDirection:'row',
marginBottom:15,
},
flatListSelect:{
flexDirection:'row',
flexWrap:'wrap',
},
sizedBox:{
height:15,
},
card:{
alignItems:'center',
justifyContent:'center',
padding:10,
borderRadius:10,
backgroundColor:R.colors.white,
borderWidth:1,
borderColor:R.colors.blue,
height:90
},
txtCard:{
fontSize:12,
fontWeight:'300',
fontFamily:R.fonts.fontRegular,
color:R.colors.blueTextChip,
},
//ContainerBtn
containerBtn:{
flexDirection:'row',
......
src/screens/notification/add/view.js
import React from 'react';
import {Text, View, FlatList, ScrollView} from 'react-native';
import {
Text,
View,
FlatList,
ScrollView,
TouchableOpacity,
Image,
} from 'react-native';
import styles from './style';
import Header from '../../../components/Header/Header';
import TextField from '../../../components/Input/TextField';
......@@ -22,18 +29,21 @@ const NotificationDetailView = props => {
direction,
dataList,
items,
options2,
selectedValue2,
onValueChange2,
} = props;
const renderItem = ({item, onPress}) => {
return (
<View style={styles.chip}>
{/* <TouchableOpacity style={styles.containerIcon} onPress={onPress}>
<Image
resizeMode="cover"
source={R.images.icCancel}
style={styles.imageIcon}
/>
</TouchableOpacity> */}
<TouchableOpacity style={styles.containerIcon} onPress={onPress}>
<Image
resizeMode="cover"
source={R.images.icCancel}
style={styles.imageIcon}
/>
</TouchableOpacity>
<Text style={styles.text}> {`${item.id}, ${item.name}`}</Text>
</View>
);
......@@ -42,9 +52,7 @@ const NotificationDetailView = props => {
return (
<View style={styles.safeArea}>
<Header isBack title={'Tạo mới thông báo'} />
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{paddingBottom: 20}}>
<ScrollView contentContainerStyle={{paddingBottom: 20}}>
<View style={styles.container}>
<TextField
containerMarginTop={15}
......@@ -87,7 +95,6 @@ const NotificationDetailView = props => {
fontSizePlaceHolder={R.sizes.sm}
required
containerMarginBottom={15}
editable={false}
/>
<RadioGroup
......@@ -105,7 +112,10 @@ const NotificationDetailView = props => {
containerMarginBottom={15}
editable={true}
/>
<Text style={[styles.text]}>Chọn những sinh viên nhận thông báo <Text style={{color: R.colors.red}}>*</Text></Text>
<Text style={[styles.text, {marginBottom: 5}]}>
Chọn những sinh viên nhận thông báo{' '}
<Text style={{color: R.colors.red}}>*</Text>
</Text>
<View style={styles.containerDropdown}>
<Dropdown
items={items}
......@@ -113,10 +123,35 @@ const NotificationDetailView = props => {
onSelect={item => console.log('Bạn đã chọn:', item)}
/>
</View>
<Text style={[styles.text]}> Danh sách đã chọn :</Text>
<View>
<Text style={[styles.text, {marginBottom: 5}]}>
Danh sách đã chọn :
</Text>
<View style={styles.flatListSelect}>
{dataList.map((items, index) => (
<View
style={styles.flatListSelect}
key={items.id?.toString() || index}>
{renderItem({item: items, onPress: () => {}})}
</View>
))}
</View>
<View style={styles.sizedBox}></View>
<RadioGroup
options={options2}
selectedValue={selectedValue2}
onValueChange={onValueChange2}
disabled={false}
size={20}
backgroundBoxColor={R.colors.blue}
borderBoxColor={R.colors.black}
direction={'row'}
marginBtnAndLabel={10}
// justifyContent={'space-between'}
containerMarginRight={39}
containerMarginBottom={15}
editable={true}
/>
<View style={styles.containerBtn}>
<View style={styles.containerInput}>
......@@ -124,13 +159,11 @@ const NotificationDetailView = props => {
title="Ngày gửi"
value={title}
onChangeText={onTitleChange}
backgroundColor={R.colors.blue1}
color={R.colors.white}
fontSize={R.sizes.sm}
onFocus={() => {}}
fontSizeTitle={R.sizes.sm}
containerMarginBottom={15}
editable={false}
/>
</View>
<View style={{flex: 1}}></View>
......@@ -139,20 +172,18 @@ const NotificationDetailView = props => {
title="Thời gian gửi"
value={title}
onChangeText={onTitleChange}
backgroundColor={R.colors.blue1}
color={R.colors.white}
fontSize={R.sizes.sm}
onFocus={() => {}}
fontSizeTitle={R.sizes.sm}
containerMarginBottom={15}
editable={false}
/>
</View>
</View>
<Text style={[styles.txtSubtitle]}>Tài liệu đính kèm</Text>
<View>
<View style={{marginBottom: 15}}>
<Button
title="Thêm tài liệu"
title="Mẫu văn bản.PDF"
onPress={() => {}}
backgroundColor={R.colors.blue1}
fontSize={R.sizes.sm}
......@@ -163,7 +194,7 @@ const NotificationDetailView = props => {
textColor={R.colors.blue}
fontWeight={'600'}
fontFamily={R.fonts.fontMedium}
icon={R.images.icDownload}
icon={R.images.icCancel}
iconStyle={{
width: 15,
height: 15,
......@@ -173,6 +204,29 @@ const NotificationDetailView = props => {
}}
/>
</View>
<View style={styles.card}>
<Image
source={R.images.icDocument}
resizeMode="contain"
style={{width: 30, height: 30}}
/>
<Text style={styles.txtCard}>Mẫu văn bản.PDF</Text>
</View>
<View style={{marginVertical:15}}>
<Button
title="Tạo thông báo"
onPress={() => {}}
backgroundColor={R.colors.blue}
fontSize={R.sizes.sm}
editable={false}
height={30}
borderRadius={10}
textColor={R.colors.white}
fontWeight={'600'}
fontFamily={R.fonts.fontMedium}
/>
</View>
</View>
</ScrollView>
</View>
......
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