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

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}>
+        <TouchableOpacity style={styles.containerIcon} onPress={onPress}>
           <Image
             resizeMode="cover"
             source={R.images.icCancel}
             style={styles.imageIcon}
           />
-      </TouchableOpacity> */}
+        </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>