Skip to content

A
anawork-mobile-v2
Commit 165dde72 authored by quynhquang400@gmail.com's avatar quynhquang400@gmail.com
Browse files
Options

fix leave screen

parent 18e7bc83
Hide whitespace changes
Inline Side-by-side
Showing with 8479 additions and 17832 deletions
package-lock.json
View file @ 165dde72
This source diff could not be displayed because it is too large. You can view the blob instead.
src/api/confirmDateAPI.js 0 → 100644
View file @ 165dde72
import axiosClient from '../network/axios';
const confirmDateAPI = {
requestGetConfirmDay: (page, pageSize) =>
axiosClient.get(`myAbsentRequests?Page=${page}&PageSize=${pageSize}`),
requestGetConfirmApprovedDate: ({filter, sort, page, pageSize}) =>
axiosClient.get(
`myAbsentApprovalRequests?Filters=${filter}&Sorts=${sort}&Page=${page}&PageSize=${pageSize}`,
),
};
export default confirmDateAPI;
src/app/selectors.js
View file @ 165dde72
/* eslint-disable prettier/prettier */
export const authSelector = state => state.auth; export const authSelector = state => state.auth;
export const homeSelector = state => state.home; export const homeSelector = state => state.home;
export const onLeaveSelector = state => state.onLeave; export const onLeaveSelector = state => state.onLeave;
export const loaderSelector = state => state.loader.isLoading; export const loaderSelector = state => state.loader.isLoading;
export const confirmDateSelector = state => state.confirmDate;
src/app/store.js
View file @ 165dde72
/* eslint-disable prettier/prettier */
import {configureStore} from '@reduxjs/toolkit'; import {configureStore} from '@reduxjs/toolkit';
import authReducer from '../screens/authentication/authSlice'; import authReducer from '../screens/authentication/authSlice';
import loaderReducer from './loaderSlice'; import loaderReducer from './loaderSlice';
import homeReducer from '../screens/home/homeSlice'; import homeReducer from '../screens/home/homeSlice';
import onLeaveReducer from '../screens/onleave/onLeaveSlice'; import onLeaveReducer from '../screens/onleave/onLeaveSlice';
import confirmDateReducer from '../screens/confirm_date/confirmDateSlice';
const rootReducer = { const rootReducer = {
loader: loaderReducer, loader: loaderReducer,
auth: authReducer, auth: authReducer,
home: homeReducer, home: homeReducer,
onLeave: onLeaveReducer, onLeave: onLeaveReducer,
confirmDate: confirmDateReducer,
}; };
const store = configureStore({ const store = configureStore({
......
src/components/AppText/index.js
View file @ 165dde72
/* eslint-disable prettier/prettier */
import React from 'react'; import React from 'react';
import {Text} from 'react-native-paper'; import {Text} from 'react-native-paper';
import {fonts} from '../../assets/fonts/fonts'; import {fonts} from '../../assets/fonts/fonts';
import colors from '../../values/colors'; import colors from '../../values/colors';
const FONT_FAMILY = fonts.beProMedium; const FONT_FAMILY = fonts.beProLight;
const AppText = ({variant, children, style, onPress, color}) => { const AppText = ({variant, children, style, onPress, color, isSubText}) => {
const defaultStyle = { const defaultStyle = {
fontFamily: FONT_FAMILY, fontFamily: FONT_FAMILY,
fontSize: isSubText ? 12 : 14,
color: color ?? colors.textColor, color: color ?? colors.textColor,
}; };
return ( return (
......
src/components/Select/index.js 0 → 100644
View file @ 165dde72
import React, {useState} from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import {Dropdown} from 'react-native-element-dropdown';
import {IMAGES} from '../../values/images';
import AppText from '../AppText';
import colors from '../../values/colors';
const data = [
{label: 'Item 1', value: '1'},
{label: 'Item 2', value: '2'},
{label: 'Item 3', value: '3'},
{label: 'Item 4', value: '4'},
{label: 'Item 5', value: '5'},
{label: 'Item 6', value: '6'},
{label: 'Item 7', value: '7'},
{label: 'Item 8', value: '8'},
];
const SelectDropdownComponent = ({selectData = [], value, setValue}) => {
// const [value, setValue] = useState(null);
const [isFocus, setIsFocus] = useState(false);
return (
<View style={styles.container}>
<Dropdown
style={[styles.dropdown, isFocus && {borderColor: 'blue'}]}
itemTextStyle={{color: colors.textColor}}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
data={selectData ?? data}
maxHeight={300}
labelField="label"
valueField="value"
placeholder={
!isFocus
? selectData.length > 0
? selectData[0].label
: 'Select'
: '...'
}
value={value}
onFocus={() => setIsFocus(true)}
onBlur={() => setIsFocus(false)}
onChange={item => {
setValue(item.value);
setIsFocus(false);
}}
/>
</View>
);
};
export default SelectDropdownComponent;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
dropdown: {
width: 100,
height: 40,
borderColor: 'gray',
borderWidth: 0.5,
borderRadius: 8,
paddingHorizontal: 8,
color: colors.textColor,
},
icon: {
marginRight: 5,
},
placeholderStyle: {
fontSize: 16,
color: colors.textColor,
},
selectedTextStyle: {
fontSize: 16,
color: colors.textColor,
},
iconStyle: {
width: 20,
height: 20,
},
inputSearchStyle: {
height: 40,
fontSize: 16,
color: colors.textColor,
},
});
src/components/header/HeaderComponent.js
View file @ 165dde72
...@@ -42,7 +42,7 @@ const HeaderComponent = React.memo(() => { ...@@ -42,7 +42,7 @@ const HeaderComponent = React.memo(() => {
<TouchableOpacity <TouchableOpacity
onPress={navigateHome} onPress={navigateHome}
style={{flex: 1, alignItems: 'center'}}> style={{flex: 1, alignItems: 'center'}}>
<Image source={{uri: logo}} style={styles.iconLogo} /> {logo && <Image source={{uri: logo}} style={styles.iconLogo} />}
</TouchableOpacity> </TouchableOpacity>
</ImageBackground> </ImageBackground>
</SafeAreaView> </SafeAreaView>
......
src/navigation/AppNavigation.js
View file @ 165dde72
...@@ -14,6 +14,7 @@ import ConfirmedShiftDetail from '../screens/shift/shift-tabs/ConfirmedShiftScre ...@@ -14,6 +14,7 @@ import ConfirmedShiftDetail from '../screens/shift/shift-tabs/ConfirmedShiftScre
import {APP_NAVIGATE_SCREEN} from '../utils/constant'; import {APP_NAVIGATE_SCREEN} from '../utils/constant';
import BottomTabs from './BottomTabNavigation'; import BottomTabs from './BottomTabNavigation';
import RootNavigation from './RootNavigation'; import RootNavigation from './RootNavigation';
import HomeScreen from '../screens/home';
const { const {
INTRO, INTRO,
...@@ -26,6 +27,7 @@ const { ...@@ -26,6 +27,7 @@ const {
FORGOT_PASS, FORGOT_PASS,
CONFIRM_SHIFT_DETAIL, CONFIRM_SHIFT_DETAIL,
SALARY, SALARY,
HOME,
} = APP_NAVIGATE_SCREEN; } = APP_NAVIGATE_SCREEN;
const AppScreen = { const AppScreen = {
[SPLASH]: SplashContainer, [SPLASH]: SplashContainer,
...@@ -39,6 +41,7 @@ const AppScreen = { ...@@ -39,6 +41,7 @@ const AppScreen = {
[CONFIRM_SHIFT_DETAIL]: ConfirmedShiftDetail, [CONFIRM_SHIFT_DETAIL]: ConfirmedShiftDetail,
[SALARY]: SalaryScreen, [SALARY]: SalaryScreen,
[INTRO]: IntroScreen, [INTRO]: IntroScreen,
[HOME]: HomeScreen,
}; };
const Stack = createNativeStackNavigator(); const Stack = createNativeStackNavigator();
......
src/navigation/BottomTabNavigation.js
View file @ 165dde72
...@@ -7,9 +7,11 @@ import HeaderComponent from '../components/header/HeaderComponent'; ...@@ -7,9 +7,11 @@ import HeaderComponent from '../components/header/HeaderComponent';
import NotificationScreen from '../screens/notification/NotificationContainer'; import NotificationScreen from '../screens/notification/NotificationContainer';
import ProfileScreen from '../screens/profile/ProfileContainer'; import ProfileScreen from '../screens/profile/ProfileContainer';
import {APP_NAVIGATE_SCREEN} from '../utils/constant'; import {APP_NAVIGATE_SCREEN} from '../utils/constant';
import {IconDrawer} from '../values/images'; import {IconDrawer, IMAGES} from '../values/images';
import DayWageNavigation from './DayWageTopTabNavigation'; import DayWageNavigation from './DayWageTopTabNavigation';
import TopTabNavigation from './TopTabNavigation'; import TopTabNavigation from './TopTabNavigation';
import config from '../config';
import HomeScreen from '../screens/home';
const {HOME, SHIFT, PROFILE, DAY_WAGE, Notification} = APP_NAVIGATE_SCREEN; const {HOME, SHIFT, PROFILE, DAY_WAGE, Notification} = APP_NAVIGATE_SCREEN;
...@@ -23,7 +25,7 @@ const AppScreen = { ...@@ -23,7 +25,7 @@ const AppScreen = {
const AppIcon = { const AppIcon = {
[HOME]: IconDrawer.IcOverview, [HOME]: IconDrawer.IcOverview,
[Notification]: IconDrawer.IcNotificationColor, [Notification]: IconDrawer.IcNotificationColor,
[DAY_WAGE]: IconDrawer.IcDataSheet, //[DAY_WAGE]: IconDrawer.IcDataSheet,
//[SHIFT]: IconDrawer.IcDataSheet, //[SHIFT]: IconDrawer.IcDataSheet,
[PROFILE]: IconDrawer.IcLeave, [PROFILE]: IconDrawer.IcLeave,
}; };
...@@ -31,7 +33,8 @@ const AppIcon = { ...@@ -31,7 +33,8 @@ const AppIcon = {
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
export default function BottomNavigation() { export default function BottomNavigation() {
const userDetails = useSelector(authSelector); const authSelect = useSelector(authSelector);
const {userInfo} = authSelect;
return ( return (
<Tab.Navigator screenOptions={{scrollEnabled: true}}> <Tab.Navigator screenOptions={{scrollEnabled: true}}>
{Object.keys(AppScreen).map((item, index) => ( {Object.keys(AppScreen).map((item, index) => (
...@@ -40,15 +43,18 @@ export default function BottomNavigation() { ...@@ -40,15 +43,18 @@ export default function BottomNavigation() {
name={item} name={item}
component={AppScreen[item]} component={AppScreen[item]}
options={{ options={{
header: props => <HeaderComponent {...props} />, header: props => <HeaderComponent />,
tabBarActiveTintColor: '#3947e9', // tab text color tabBarActiveTintColor: '#3947e9', // tab text color
tabBarLabelPosition: 'below-icon', tabBarLabelPosition: 'below-icon',
tabBarShowLabel: true, tabBarShowLabel: true,
tabBarIcon: ({focused, size}) => tabBarIcon: ({focused, size}) =>
index === 3 ? ( index === 2 ? (
<Image <Image
source={{uri: 'https://meu.anawork.com' + userDetails.avatar}} source={
userInfo?.avatar
? {uri: config.imageEndPoint + userInfo?.avatar}
: IMAGES.IcAvatarDefault
}
style={{ style={{
width: 30, width: 30,
height: 30, height: 30,
......
src/navigation/TopTabNavigation.js
View file @ 165dde72
/* eslint-disable prettier/prettier */
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs'; import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import * as React from 'react'; import * as React from 'react';
import HomeScreen from '../screens/home'; import HomeScreen from '../screens/home';
import OnLeave from '../screens/onleave'; import OnLeave from '../screens/onleave';
import ConfirmDateScreen from '../screens/confirm_date';
import {APP_NAVIGATE_SCREEN} from '../utils/constant'; import {APP_NAVIGATE_SCREEN} from '../utils/constant';
import {fonts} from '../assets/fonts/fonts';
const {ON_LEAVE, OVERTIME, MAIN, CONFIRM_DATE} = APP_NAVIGATE_SCREEN; const {ON_LEAVE, OVERTIME, MAIN, CONFIRM_DATE} = APP_NAVIGATE_SCREEN;
...@@ -12,13 +13,13 @@ const AppScreen = { ...@@ -12,13 +13,13 @@ const AppScreen = {
[MAIN]: HomeScreen, [MAIN]: HomeScreen,
[ON_LEAVE]: OnLeave, [ON_LEAVE]: OnLeave,
// [OVERTIME]: Overtime, // [OVERTIME]: Overtime,
// [CONFIRM_DATE]: ConfirmDate, [CONFIRM_DATE]: ConfirmDateScreen,
}; };
const Tab = createMaterialTopTabNavigator(); const Tab = createMaterialTopTabNavigator();
export default function TopTabNavigation() { export default function TopTabNavigation() {
return ( return (
<Tab.Navigator screenOptions={{scrollEnabled: true}}> <Tab.Navigator screenOptions={{swipeEnabled: false}}>
{Object.keys(AppScreen).map((item, index) => ( {Object.keys(AppScreen).map((item, index) => (
<Tab.Screen <Tab.Screen
key={index} key={index}
...@@ -26,14 +27,12 @@ export default function TopTabNavigation() { ...@@ -26,14 +27,12 @@ export default function TopTabNavigation() {
component={AppScreen[item]} component={AppScreen[item]}
options={{ options={{
tabBarActiveTintColor: '#3947e9', // tab text color tabBarActiveTintColor: '#3947e9', // tab text color
scrollEnabled: true, scrollEnabled: false,
upperCaseLabel: false, upperCaseLabel: false,
tabBarLabelStyle: { tabBarLabelStyle: {
fontSize: 9, fontSize: 9,
fontFamily: fonts.beProMedium,
}, },
// tabBarIcon: ({ focused, size }) => (
// <Image source={AppIcon[item]} style={{ width: 24, height: 24 }} />
// )
}} }}
/> />
))} ))}
......
src/network/api/onLeaveApi.js
View file @ 165dde72
/* eslint-disable prettier/prettier */ import axiosClient from '../axios';
import ApiClient from '../axios';
export default { export default {
requestGetLeavesDay: ({filter, sort, page, pageSize}) => requestGetLeavesDay: ({filter, sort, page, pageSize}) =>
ApiClient.get( axiosClient.get(
`myLeaveDays?Filters=${filter}&Sorts=${sort}&Page=${page}&PageSize=${pageSize}`, `myLeaveDays?Filters=${filter}&Sorts=${sort}&Page=${page}&PageSize=${pageSize}`,
), ),
requestGetRestDay: () => ApiClient.get('leaveCategories'), requestGetRestDay: () => axiosClient.get('myLeaveRestDays'),
requestGetLeaveDayApproved: ({filter, sort, page, pageSize}) =>
axiosClient.get(
`myLeaveDayApprovalRequests?Filters=${filter}&Sorts=${sort}&Page=${page}&PageSize=${pageSize}`,
),
}; };
src/network/axios.js
View file @ 165dde72
/* eslint-disable prettier/prettier */
import axios from 'axios'; import axios from 'axios';
import Utils from '../utils'; import Utils from '../utils';
import config from '../config'; import config from '../config';
......
src/screens/confirm_date/ConfirmDateContainer.js
View file @ 165dde72
import Moment from 'moment'; import Moment from 'moment';
import React, {useEffect, useState} from 'react'; import React, {useEffect, useState} from 'react';
import {useDispatch, useSelector} from 'react-redux'; import {useDispatch} from 'react-redux';
import RootNavigation from '../../navigation/RootNavigation'; import RootNavigation from '../../navigation/RootNavigation';
import { import {getAbsentChart} from '../../store/actions/UserAction';
getAbsentChart,
getApproveConfirmDay,
getUserConfirmDay,
} from '../../store/actions/UserAction';
import {APP_NAVIGATE_SCREEN} from '../../utils/constant'; import {APP_NAVIGATE_SCREEN} from '../../utils/constant';
import ConfirmModalAddNew from './confirm-modals/ConfirmModalAddNew'; import ConfirmModalAddNew from './confirm-modals/ConfirmModalAddNew';
import ConfirmModalDetails from './confirm-modals/ConfirmModalDetails'; import ConfirmModalDetails from './confirm-modals/ConfirmModalDetails';
import ConfirmDateScreen from './ConfirmDateScreen'; import {getConfirmApprovedDate, getUserConfirmDay} from './confirmDateSlice';
import ConfirmDateMainView from './template/ConfirmMainView';
const ConfirmDateContainer = props => { const ConfirmDateContainer = props => {
const {confirmDateList, confirmApprovedDateList, userInfo} = props;
const dispatch = useDispatch(); const dispatch = useDispatch();
const {userDetails} = props;
const confirmDay = useSelector(state => state.ConfirmDay.confirmDay);
const approveConfirmList = useSelector(
state => state.ApproveDay.approveConfirm,
);
const [requestApproveArr, setRequestApproveArr] = useState([]); const [requestApproveArr, setRequestApproveArr] = useState([]);
const [confirmList, setConfirmList] = useState([]); const [confirmList, setConfirmList] = useState([]);
const [totalArr, setTotalArr] = useState({ const [totalArr, setTotalArr] = useState({
...@@ -61,7 +55,7 @@ const ConfirmDateContainer = props => { ...@@ -61,7 +55,7 @@ const ConfirmDateContainer = props => {
<ConfirmModalDetails <ConfirmModalDetails
onClose={onCloseModal} onClose={onCloseModal}
alertMessage={alertMessage} alertMessage={alertMessage}
userDetails={userDetails} userDetails={userInfo}
detailItem={detailItem} detailItem={detailItem}
setApproveReqPayload={setApproveReqPayload} setApproveReqPayload={setApproveReqPayload}
/>, />,
...@@ -71,7 +65,7 @@ const ConfirmDateContainer = props => { ...@@ -71,7 +65,7 @@ const ConfirmDateContainer = props => {
const onOpenAddModal = () => { const onOpenAddModal = () => {
setModalContent( setModalContent(
<ConfirmModalAddNew <ConfirmModalAddNew
userDetails={userDetails} userDetails={userInfo}
onClose={onCloseModal} onClose={onCloseModal}
alertMessage={alertMessage} alertMessage={alertMessage}
/>, />,
...@@ -111,12 +105,12 @@ const ConfirmDateContainer = props => { ...@@ -111,12 +105,12 @@ const ConfirmDateContainer = props => {
const loadDataRequestApprove = async () => { const loadDataRequestApprove = async () => {
const res = await dispatch( const res = await dispatch(
getApproveConfirmDay( getConfirmApprovedDate({
approveReqPayload.filter, filter: approveReqPayload.filter,
approveReqPayload.sorts, sort: approveReqPayload.sorts,
approveReqPayload.page, page: approveReqPayload.page,
approveReqPayload.pageSize, pageSize: approveReqPayload.pageSize,
), }),
); );
if (res.success) { if (res.success) {
//console.log(res); //console.log(res);
...@@ -278,10 +272,10 @@ const ConfirmDateContainer = props => { ...@@ -278,10 +272,10 @@ const ConfirmDateContainer = props => {
}; };
const formatDataConfirmListFromApi = () => { const formatDataConfirmListFromApi = () => {
if (userConfirmPayload.isRefresh) { if (userConfirmPayload.isRefresh) {
setConfirmList(confirmDay); setConfirmList(confirmDateList);
return; return;
} }
let merge = [...confirmList, ...confirmDay]; let merge = [...confirmList, ...confirmDateList];
//console.log(merge); //console.log(merge);
let format = merge.filter( let format = merge.filter(
( (
...@@ -295,10 +289,10 @@ const ConfirmDateContainer = props => { ...@@ -295,10 +289,10 @@ const ConfirmDateContainer = props => {
}; };
const formatDataApproveConfirmListFromApi = () => { const formatDataApproveConfirmListFromApi = () => {
if (approveReqPayload.isRefresh) { if (approveReqPayload.isRefresh) {
setRequestApproveArr(approveConfirmList); setRequestApproveArr(confirmApprovedDateList);
return; return;
} }
let merge = [...requestApproveArr, ...approveConfirmList]; let merge = [...requestApproveArr, ...confirmApprovedDateList];
let format = merge.filter( let format = merge.filter(
( (
...@@ -359,12 +353,10 @@ const ConfirmDateContainer = props => { ...@@ -359,12 +353,10 @@ const ConfirmDateContainer = props => {
return `${Hours}:${minutes} giờ`; return `${Hours}:${minutes} giờ`;
}; };
// useEffect // useEffect
{
/*load init data*/
}
useEffect(() => { useEffect(() => {
confirmDay && formatDataConfirmListFromApi(); confirmDateList && formatDataConfirmListFromApi();
}, [confirmDay]); }, [confirmDateList]);
useEffect(() => { useEffect(() => {
dataChart.month && fetchDataChart(dataChart.month); dataChart.month && fetchDataChart(dataChart.month);
...@@ -375,9 +367,9 @@ const ConfirmDateContainer = props => { ...@@ -375,9 +367,9 @@ const ConfirmDateContainer = props => {
// }, [dataChart.data]); // }, [dataChart.data]);
useEffect(() => { useEffect(() => {
approveConfirmList && confirmApprovedDateList &&
formatDataApproveConfirmListFromApi(approveConfirmList); formatDataApproveConfirmListFromApi(confirmApprovedDateList);
}, [approveConfirmList]); }, [confirmApprovedDateList]);
useEffect(() => { useEffect(() => {
approveReqPayload && loadDataRequestApprove(); approveReqPayload && loadDataRequestApprove();
...@@ -390,8 +382,7 @@ const ConfirmDateContainer = props => { ...@@ -390,8 +382,7 @@ const ConfirmDateContainer = props => {
}, [requestApproveArr, confirmList, totalArr]); }, [requestApproveArr, confirmList, totalArr]);
const confirmProps = { const confirmProps = {
approveConfirmList, userInfo,
userDetails,
showAlert, showAlert,
requestApproveArr, requestApproveArr,
confirmList, confirmList,
...@@ -414,7 +405,7 @@ const ConfirmDateContainer = props => { ...@@ -414,7 +405,7 @@ const ConfirmDateContainer = props => {
onChangeMonthFilter, onChangeMonthFilter,
minutesToHours, minutesToHours,
}; };
return <ConfirmDateScreen {...confirmProps} />; return <ConfirmDateMainView {...confirmProps} />;
}; };
export default ConfirmDateContainer; export default ConfirmDateContainer;
src/screens/confirm_date/confirmDateSlice.js 0 → 100644
View file @ 165dde72
import {createAsyncThunk, createSlice} from '@reduxjs/toolkit';
import serviceRequest from '../../app/serviceRequest';
import Utils from '../../utils';
import authAPI from '../../api/authAPI';
import confirmDateAPI from '../../api/confirmDateAPI';
const initialState = {};
export const getUserConfirmDay = createAsyncThunk(
'confirmDate/getUserConfirmDay',
async (data, thunkAPI) => {
return serviceRequest({
dispatch: thunkAPI.dispatch,
serviceMethod: confirmDateAPI.requestGetConfirmDay,
payload: data,
options: {
skipLoader: false,
},
});
},
);
export const getConfirmApprovedDate = createAsyncThunk(
'confirmDate/getConfirmApprovedDate',
async (data, thunkAPI) => {
return serviceRequest({
dispatch: thunkAPI.dispatch,
serviceMethod: confirmDateAPI.requestGetConfirmApprovedDate,
payload: data,
options: {
skipLoader: false,
},
});
},
);
const authSlice = createSlice({
name: 'confirmDate',
initialState: initialState,
reducers: {},
extraReducers: builder => {
builder.addCase(getUserConfirmDay.fulfilled, (state, action) => {
const {success} = Utils.getValues(action, 'payload', false);
if (success) {
state.confirmDateList = Utils.getValues(
action,
'payload.data.collection',
[],
);
}
});
builder.addCase(getConfirmApprovedDate.fulfilled, (state, action) => {
const {success} = Utils.getValues(action, 'payload', false);
if (success) {
state.confirmApprovedDateList = Utils.getValues(
action,
'payload.data.collection',
[],
);
}
});
},
});
const {reducer} = authSlice;
export default reducer;
src/screens/confirm_date/index.js
View file @ 165dde72
/* eslint-disable prettier/prettier */
import React from 'react'; import React from 'react';
import {useSelector} from 'react-redux'; import {useSelector} from 'react-redux';
import {authSelector} from '../../app/selectors'; import {authSelector, confirmDateSelector} from '../../app/selectors';
import ConfirmDateContainer from './ConfirmDateContainer'; import ConfirmDateContainer from './ConfirmDateContainer';
export default function ConfirmDateScreen() { export default function ConfirmDateScreen() {
const userDetails = useSelector(authSelector); const authSelect = useSelector(authSelector);
const confirmDateSelect = useSelector(confirmDateSelector);
const {isLogin, userLoginInfo} = userDetails; const {userInfo} = authSelect;
const {confirmDateList, confirmApprovedDateList} = confirmDateSelect;
const homeScreenProps = { const confirmScreenProps = {
isLogin, userInfo,
userLoginInfo, confirmDateList,
confirmApprovedDateList,
}; };
return <ConfirmDateContainer {...homeScreenProps} />; return <ConfirmDateContainer {...confirmScreenProps} />;
} }
src/screens/confirm_date/ConfirmDateScreen.js → src/screens/confirm_date/template/ConfirmMainView.js
View file @ 165dde72
/* eslint-disable prettier/prettier */
import Moment from 'moment'; import Moment from 'moment';
import React from 'react'; import React from 'react';
import { import {
...@@ -9,15 +8,16 @@ import { ...@@ -9,15 +8,16 @@ import {
View, View,
} from 'react-native'; } from 'react-native';
import Alert from 'react-native-awesome-alerts'; import Alert from 'react-native-awesome-alerts';
import ButtonComponent from '../../components/ButtonComponent'; import ButtonComponent from '../../../components/ButtonComponent';
import {GifType, IMAGES} from '../../values/images'; import {GifType, IMAGES} from '../../../values/images';
import styles from './style'; import styles from '../style';
import FastImage from 'react-native-fast-image'; import FastImage from 'react-native-fast-image';
import SelectDropdown from 'react-native-select-dropdown'; import SelectDropdown from 'react-native-select-dropdown';
import AppText from '../../components/AppText'; import AppText from '../../../components/AppText';
import StatisticsConfirmWorkdays from './components/StatisticsConfirmWorkdays';
const ConfirmDateScreen = ({ const ConfirmDateMainView = ({
dataChart, dataChart,
isDisableLoadMore, isDisableLoadMore,
userDetails, userDetails,
...@@ -33,7 +33,7 @@ const ConfirmDateScreen = ({ ...@@ -33,7 +33,7 @@ const ConfirmDateScreen = ({
onRefreshConfirmList, onRefreshConfirmList,
modalContent, modalContent,
onOpenDetailModal, onOpenDetailModal,
onOpenAddModal, onOpenRequestLeavesModal,
approveReqPayload, approveReqPayload,
onChangeSelectFilter, onChangeSelectFilter,
onChangeMonthFilter, onChangeMonthFilter,
...@@ -63,305 +63,7 @@ const ConfirmDateScreen = ({ ...@@ -63,305 +63,7 @@ const ConfirmDateScreen = ({
return ( return (
<SafeAreaView> <SafeAreaView>
<ScrollView nestedScrollEnabled={true}> <ScrollView nestedScrollEnabled={true}>
<View style={{padding: 15, backgroundColor: 'white'}}> <StatisticsConfirmWorkdays />
<AppText style={[styles.title, {marginBottom: 20}]}>
Thống kê xác nhận ngày công của tôi{' '}
</AppText>
<SelectDropdown
data={[
'Tháng 01',
'Tháng 02',
'Tháng 03',
'Tháng 04',
'Tháng 05',
'Tháng 06',
'Tháng 07',
'Tháng 08',
'Tháng 09',
'Tháng 10',
'Tháng 11',
'Tháng 12',
]}
dropdownIconPosition={'right'}
defaultButtonText={'Tháng ' + (new Date().getMonth() + 1)}
buttonStyle={styles.dropdown1BtnStyle}
onSelect={selectedItem => onChangeMonthFilter(selectedItem)}
dropdownStyle={styles.dropdown1DropdownStyle}
rowStyle={styles.dropdown1RowStyle}
rowTextStyle={styles.dropdown1RowTxtStyle}
buttonTextStyle={styles.dropdown1BtnTxtStyle}
renderDropdownIcon={isOpened => {
return (
<Image
source={isOpened ? IMAGES.IcUpArrow : IMAGES.IcArrowDown}
style={{width: 20, height: 20}}
/>
);
}}
/>
{/* <View style={{flexDirection: 'row', marginTop: 20}}>
<View style={{flex: 3}}>
<View style={{}}>
<View
style={{
flexDirection: 'row',
width: windowWidth / 2,
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: -30,
paddingLeft: 10,
paddingRight: 15,
zIndex: 100,
borderBottomWidth: 1,
borderBottomColor: '#5d78ff',
paddingBottom: 5,
}}>
<AppText style={{fontSize: 10}}>T2</AppText>
<AppText style={{fontSize: 10}}>T3</AppText>
<AppText style={{fontSize: 10}}>T4</AppText>
<AppText style={{fontSize: 10}}>T5</AppText>
<AppText style={{fontSize: 10}}>T6</AppText>
<AppText style={{fontSize: 10}}>T7</AppText>
<AppText style={{fontSize: 10}}>CN</AppText>
</View>
{dataChart && dataChart?.data?.length > 0 && (
<ContributionGraph
style={{
borderWidth: 1,
borderColor: '#5d78ff',
borderRadius: 10,
width: windowWidth / 2,
justifyContent: 'center',
alignItems: 'center',
paddingBottom: 10,
}}
values={dataChart.data}
accessor={'absent_hours'}
endDate={Moment(
`${new Date().getFullYear()}-${dataChart.month}-01`,
)
.add(1, 'month')
.format('YYYY-MM-DD')}
numDays={40}
horizontal={true}
gutterSize={5}
width={windowWidth / 2}
height={windowHeight / 4}
chartConfig={chartConfig}
showOutOfRangeDays={true}
showMonthLabels={false}
onDayPress={date =>
onChangeDayPressInChart(
Moment(date.date).format('DD-MM-YYYY'),
)
}
/>
)}
</View>
</View>
<View style={{justifyContent: 'center', flex: 1}}>
{typeChartColor &&
typeChartColor.map((item, i) => (
<View key={i} style={{flexDirection: 'row'}}>
<View
style={{
width: 20,
height: 20,
marginRight: 10,
marginBottom: 2,
backgroundColor: item.color,
}}
/>
<AppText style={{fontSize: 11}}>{item.name}</AppText>
</View>
))}
<View style={{marginTop: 10}}>
{dayPress && <AppText>{dayPress}</AppText>}
</View>
</View>
</View> */}
<View style={{flexDirection: 'row', marginTop: 20}}>
<View style={styles.viewCalendar}>
<View style={styles.viewDayOfWeek}>
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>T2</AppText>
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>T3</AppText>
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>T4</AppText>
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>T5</AppText>
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>T6</AppText>
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>T7</AppText>
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>CN</AppText>
</View>
{dataChart?.data.length > 0 &&
dataChart?.data?.map((item, index) => {
let flag = false;
return (
<View key={index}>
{(index == 0 && (
<View
style={{
flexDirection: 'row',
}}>
{dayOfWeek.map((el, i) => {
if (flag) return true;
if (Moment(item.date).format('dddd') === el) {
flag = true;
return (
<View
key={i}
style={{
width: 30,
height: 30,
backgroundColor:
(parseInt(item.absent_hours) > 6 &&
'#7d93ff') ||
(parseInt(item.absent_hours) >= 4 &&
parseInt(item.absent_hours) <= 6 &&
'#7d93ff') ||
(parseInt(item.absent_hours) >= 2 &&
parseInt(item.absent_hours) <= 4 &&
'#7d93ff') ||
(parseInt(item.absent_hours) > 0 &&
parseInt(item.absent_hours) <= 2 &&
'#dfe4ff') ||
'#f2f2f2',
justifyContent: 'center',
alignItems: 'center',
margin: 2,
}}>
{
<AppText>{`${new Date(
item.date,
).getDate()}`}</AppText>
}
</View>
);
} else {
return (
<View
key={i}
style={{
width: 30,
height: 30,
backgroundColor: '#f2f2f2',
justifyContent: 'center',
alignItems: 'center',
margin: 2,
}}></View>
);
}
})}
</View>
)) || (
<View
style={{
width: 30,
height: 30,
backgroundColor:
(parseInt(item.absent_hours) > 6 && '#7d93ff') ||
(parseInt(item.absent_hours) >= 4 &&
parseInt(item.absent_hours) <= 6 &&
'#7d93ff') ||
(parseInt(item.absent_hours) >= 2 &&
parseInt(item.absent_hours) <= 4 &&
'#7d93ff') ||
(parseInt(item.absent_hours) > 0 &&
parseInt(item.absent_hours) <= 2 &&
'#dfe4ff') ||
'#f2f2f2',
justifyContent: 'center',
alignItems: 'center',
margin: 2,
}}>
{
<AppText>{`${new Date(
item.date,
).getDate()}`}</AppText>
}
</View>
)}
</View>
);
})}
{/* {dataChart.month && (
<Calendar
current={Moment(
`${new Date().getFullYear()}-${dataChart.month}-01`,
).format('YYYY-MM-DD')}
context={{date: ''}}
markedDates={dataChart.data}
markingType="dot"
// onDayPress={day => {
// handleOpenDesBirthday(day);
// }}
enableSwipeMonths={false}
hideArrows={true}
hideExtraDays={true}
theme={{
// 'stylesheet.calendar.header': {
// header: {
// height: 0,
// opacity: 0,
// },
// },
'stylesheet.calendar.main': {
dayContainer: {
padding: -10,
},
},
//day section
textDayFontSize: 13,
textDayFontFamily:
Platform.OS === 'ios' ? 'System' : 'OpenSans',
todayTextColor: colors.green,
dayTextColor: colors.black,
textDisabledColor: 'rgba(0, 0, 0, 0.25)',
textDayFontWeight: '600',
//month section
textMonthFontSize: 18,
textMonthFontFamily:
Platform.OS === 'ios' ? 'System' : 'Montserrat',
monthTextColor: colors.black,
textMonthFontWeight: 'bold',
//header section
textDayHeaderFontSize: 16,
textDayHeaderFontFamily:
Platform.OS === 'ios' ? 'System' : 'OpenSans',
textSectionTitleColor: 'rgba(0, 0, 0, 0.25)',
textDayHeaderFontWeight: '300',
//selected day section
//selectedDayBackgroundColor: colors.primary_blue,
selectedDayTextColor: colors.black,
//arrow section
arrowColor: '#fa0000',
//dot section
selectedDotColor: colors.primary_blue,
}}
/>
)} */}
</View>
<View style={{marginLeft: 30}}>
{typeChartColor &&
typeChartColor.map((item, i) => (
<View key={i} style={{flexDirection: 'row'}}>
<View
style={{
width: 20,
height: 20,
marginRight: 10,
marginBottom: 2,
backgroundColor: item.color,
}}
/>
<AppText style={{fontSize: 11}}>{item.name}</AppText>
</View>
))}
<View style={{marginTop: 10}}>
{dayPress && <AppText>{dayPress}</AppText>}
</View>
</View>
</View>
</View>
<View style={styles.view}> <View style={styles.view}>
<AppText style={{fontWeight: '500', marginBottom: 10}}> <AppText style={{fontWeight: '500', marginBottom: 10}}>
Xác nhận ngày công của bạn:{' '} Xác nhận ngày công của bạn:{' '}
...@@ -369,7 +71,7 @@ const ConfirmDateScreen = ({ ...@@ -369,7 +71,7 @@ const ConfirmDateScreen = ({
<View style={{alignItems: 'center', justifyContent: 'center'}}> <View style={{alignItems: 'center', justifyContent: 'center'}}>
<ButtonComponent <ButtonComponent
style={styles.btnConfirm} style={styles.btnConfirm}
onPress={onOpenAddModal} onPress={onOpenRequestLeavesModal}
leftIcon={IMAGES.IcBtnAdd} leftIcon={IMAGES.IcBtnAdd}
styleIcon={styles.iconPlus} styleIcon={styles.iconPlus}
text={'XÁC NHẬN NGÀY CÔNG'} text={'XÁC NHẬN NGÀY CÔNG'}
...@@ -615,4 +317,4 @@ const ConfirmDateScreen = ({ ...@@ -615,4 +317,4 @@ const ConfirmDateScreen = ({
); );
}; };
export default ConfirmDateScreen; export default ConfirmDateMainView;
src/screens/confirm_date/template/components/StatisticsConfirmWorkdays.js 0 → 100644
View file @ 165dde72
import Moment from 'moment';
import React from 'react';
import {Image, View} from 'react-native';
import {IMAGES} from '../../../../values/images';
import styles from '../../style';
import SelectDropdown from 'react-native-select-dropdown';
import AppText from '../../../../components/AppText';
const StatisticsConfirmWorkdays = ({
dataChart,
onChangeMonthFilter,
dayPress,
}) => {
const typeChartColor = [
{color: '#7d93ff', name: 'Trên 6h'},
{color: '#9eaeff', name: '4-6h'},
{color: '#bec9ff', name: '2-4h'},
{color: '#dfe4ff', name: '0-2h'},
{color: '#f2f2f2', name: '0h'},
];
//console.log(dataChart?.data);
const dayOfWeek = [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday',
];
return (
<View style={{padding: 15, backgroundColor: 'white'}}>
<AppText style={[styles.title, {marginBottom: 20}]}>
Thống kê xác nhận ngày công của tôi
</AppText>
<SelectDropdown
data={[
'Tháng 01',
'Tháng 02',
'Tháng 03',
'Tháng 04',
'Tháng 05',
'Tháng 06',
'Tháng 07',
'Tháng 08',
'Tháng 09',
'Tháng 10',
'Tháng 11',
'Tháng 12',
]}
dropdownIconPosition={'right'}
defaultButtonText={'Tháng ' + (new Date().getMonth() + 1)}
buttonStyle={styles.dropdown1BtnStyle}
onSelect={selectedItem => onChangeMonthFilter(selectedItem)}
dropdownStyle={styles.dropdown1DropdownStyle}
rowStyle={styles.dropdown1RowStyle}
rowTextStyle={styles.dropdown1RowTxtStyle}
buttonTextStyle={styles.dropdown1BtnTxtStyle}
renderDropdownIcon={isOpened => {
return (
<Image
source={isOpened ? IMAGES.IcUpArrow : IMAGES.IcArrowDown}
style={{width: 20, height: 20}}
/>
);
}}
/>
<View style={{flexDirection: 'row', marginTop: 20}}>
<View style={styles.viewCalendar}>
<View style={styles.viewDayOfWeek}>
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>T2</AppText>
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>T3</AppText>
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>T4</AppText>
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>T5</AppText>
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>T6</AppText>
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>T7</AppText>
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>CN</AppText>
</View>
{dataChart?.data.length > 0 &&
dataChart?.data?.map((item, index) => {
let flag = false;
return (
<View key={index}>
{(index == 0 && (
<View
style={{
flexDirection: 'row',
}}>
{dayOfWeek.map((el, i) => {
if (flag) return true;
if (Moment(item.date).format('dddd') === el) {
flag = true;
return (
<View
key={i}
style={{
width: 30,
height: 30,
backgroundColor:
(parseInt(item.absent_hours) > 6 &&
'#7d93ff') ||
(parseInt(item.absent_hours) >= 4 &&
parseInt(item.absent_hours) <= 6 &&
'#7d93ff') ||
(parseInt(item.absent_hours) >= 2 &&
parseInt(item.absent_hours) <= 4 &&
'#7d93ff') ||
(parseInt(item.absent_hours) > 0 &&
parseInt(item.absent_hours) <= 2 &&
'#dfe4ff') ||
'#f2f2f2',
justifyContent: 'center',
alignItems: 'center',
margin: 2,
}}>
{
<AppText>{`${new Date(
item.date,
).getDate()}`}</AppText>
}
</View>
);
} else {
return (
<View
key={i}
style={{
width: 30,
height: 30,
backgroundColor: '#f2f2f2',
justifyContent: 'center',
alignItems: 'center',
margin: 2,
}}></View>
);
}
})}
</View>
)) || (
<View
style={{
width: 30,
height: 30,
backgroundColor:
(parseInt(item.absent_hours) > 6 && '#7d93ff') ||
(parseInt(item.absent_hours) >= 4 &&
parseInt(item.absent_hours) <= 6 &&
'#7d93ff') ||
(parseInt(item.absent_hours) >= 2 &&
parseInt(item.absent_hours) <= 4 &&
'#7d93ff') ||
(parseInt(item.absent_hours) > 0 &&
parseInt(item.absent_hours) <= 2 &&
'#dfe4ff') ||
'#f2f2f2',
justifyContent: 'center',
alignItems: 'center',
margin: 2,
}}>
{<AppText>{`${new Date(item.date).getDate()}`}</AppText>}
</View>
)}
</View>
);
})}
</View>
<View style={{marginLeft: 30}}>
{typeChartColor &&
typeChartColor.map((item, i) => (
<View key={i} style={{flexDirection: 'row'}}>
<View
style={{
width: 20,
height: 20,
marginRight: 10,
marginBottom: 2,
backgroundColor: item.color,
}}
/>
<AppText style={{fontSize: 11}}>{item.name}</AppText>
</View>
))}
<View style={{marginTop: 10}}>
{dayPress && <AppText>{dayPress}</AppText>}
</View>
</View>
</View>
</View>
);
};
export default StatisticsConfirmWorkdays;
src/screens/home/style.js
View file @ 165dde72
...@@ -41,6 +41,7 @@ const styles = StyleSheet.create({ ...@@ -41,6 +41,7 @@ const styles = StyleSheet.create({
BgBirthday: { BgBirthday: {
width: windowWidth - 20, width: windowWidth - 20,
height: 80, height: 80,
resizeMode: 'cover',
}, },
view: { view: {
width: windowWidth - 10, width: windowWidth - 10,
......
src/screens/home/template/HomeMainView.js
View file @ 165dde72
import React from 'react'; import React from 'react';
import {SafeAreaView, ScrollView, View} from 'react-native'; import {SafeAreaView, ScrollView, View} from 'react-native';
import ButtonComponent from '../../../components/ButtonComponent';
import {IMAGES} from '../../../values/images';
import styles from '../style'; import styles from '../style';
import WishListComponent from '../components/WishListComponent'; import WishListComponent from '../components/WishListComponent';
import BirthdayModal from '../modals/BirthdayModals';
import CalendarBirthday from './subViews/CalendarBirthday'; import CalendarBirthday from './subViews/CalendarBirthday';
import Quotation from './subViews/QuotationList'; import Quotation from './subViews/QuotationList';
import BirthdayModal from '../modals/BirthdayModals';
const HomeMainView = ({ const HomeMainView = ({
userInfo, userInfo,
openView, openView,
...@@ -33,7 +31,7 @@ const HomeMainView = ({ ...@@ -33,7 +31,7 @@ const HomeMainView = ({
nestedScrollEnabled={true} nestedScrollEnabled={true}
showsVerticalScrollIndicator={false}> showsVerticalScrollIndicator={false}>
<View> <View>
<View {/* <View
style={{ style={{
position: 'absolute', position: 'absolute',
top: 10, top: 10,
...@@ -59,7 +57,7 @@ const HomeMainView = ({ ...@@ -59,7 +57,7 @@ const HomeMainView = ({
onPress={chooseSettingView} onPress={chooseSettingView}
/> />
)} )}
</View> </View> */}
<Quotation quotation={randomQuotation} /> <Quotation quotation={randomQuotation} />
</View> </View>
{/*Calendar*/} {/*Calendar*/}
......
src/screens/onleave/OnLeaveContainer.js
View file @ 165dde72
/* eslint-disable prettier/prettier */ /* eslint-disable react-hooks/exhaustive-deps */
import Moment from 'moment'; import Moment from 'moment';
import React, {useEffect, useState} from 'react'; import React, {useEffect, useState} from 'react';
import {useDispatch} from 'react-redux'; import {useDispatch} from 'react-redux';
...@@ -9,33 +10,45 @@ import { ...@@ -9,33 +10,45 @@ import {
} from '../../store/actions/UserAction'; } from '../../store/actions/UserAction';
import {APP_NAVIGATE_SCREEN} from '../../utils/constant'; import {APP_NAVIGATE_SCREEN} from '../../utils/constant';
import OnLeaveModalAddNew from './modals/OnLeaveModalAddNew'; import OnLeaveModalAddNew from './template/subViews/RequestLeavesDays';
import OnLeaveModalDetail from './modals/OnLeaveModalDetails'; import OnLeaveModalDetail from './modals/OnLeaveModalDetails';
import {getUserLeavesDay} from './onLeaveSlice'; import {
getUserLeavesDay,
getApproveRequestLeavesDays,
getUserRestDay,
} from './onLeaveSlice';
import OnLeaveMainView from './template/OnLeaveMainView'; import OnLeaveMainView from './template/OnLeaveMainView';
import onLeavePropsProvider from './onLeavePropsProvider';
const initPayloadApprove = {
type: 'Tất cả',
filter: '',
sort: '',
page: 1,
pageSize: 5,
isRefresh: false,
};
const OnLeaveContainer = props => { const OnLeaveContainer = props => {
const {usersLeavesDayList, userRestDayList, userDetails} = props; const {
usersLeavesDayList,
userRestDayList,
userInfo,
approveRequestLeavesDaysList,
} = props;
const dispatch = useDispatch(); const dispatch = useDispatch();
// const userLeaveDaysPending = useSelector( // const userLeaveDaysPending = useSelector(
// state => state.UserLeavesPending.userLeavesPending, // state => state.UserLeavesPending.userLeavesPending,
// ); // );
const [dataChart, setDataChart] = useState(); const [dataChart, setDataChart] = useState();
const initPayloadApprove = {
type: 'Tất cả',
filter: '',
sort: '',
page: 1,
pageSize: 5,
isRefresh: false,
};
// get api with payload // get api with payload
const [payloadApproveLeaves, setPayloadApproveLeaves] = const [payloadApproveRequestLeavesDays, setPayloadApproveRequestLeavesDays] =
useState(initPayloadApprove); useState(initPayloadApprove);
const [payloadLeaves, setPayloadLeaves] = useState(initPayloadApprove); const [payloadLeaves, setPayloadLeaves] = useState(initPayloadApprove);
const [leaveList, setLeaveList] = useState([]); const [leaveRequestList, setLeaveRequestList] = useState([]);
const [leaveApproveReqList, setLeaveApproveReqList] = useState([]); const [leaveApproveReqList, setLeaveApproveReqList] = useState([]);
const [showAlert, setShowAlert] = useState({ const [showAlert, setShowAlert] = useState({
...@@ -54,6 +67,7 @@ const OnLeaveContainer = props => { ...@@ -54,6 +67,7 @@ const OnLeaveContainer = props => {
}); });
const [modalContent, setModalContent] = useState(null); const [modalContent, setModalContent] = useState(null);
const [leavesDaysModal, setLeavesDaysModal] = useState(null);
// open the modal // open the modal
const onOpenDetailModal = detailItem => { const onOpenDetailModal = detailItem => {
...@@ -61,27 +75,21 @@ const OnLeaveContainer = props => { ...@@ -61,27 +75,21 @@ const OnLeaveContainer = props => {
<OnLeaveModalDetail <OnLeaveModalDetail
onClose={onCloseModal} onClose={onCloseModal}
alertMessage={alertMessage} alertMessage={alertMessage}
userDetails={userDetails} userInfo={userInfo}
detailItem={detailItem} detailItem={detailItem}
setPayloadApproveLeaves={setPayloadApproveLeaves} setPayloadApproveLeaves={setPayloadApproveRequestLeavesDays}
/>, />,
); );
}; };
const onOpenAddModal = () => { const onOpenRequestLeavesModal = () => {
setModalContent( setLeavesDaysModal(true);
<OnLeaveModalAddNew
userDetails={userDetails}
onClose={onCloseModal}
alertMessage={alertMessage}
/>,
);
}; };
const onCloseModal = () => { const onCloseModal = () => {
setModalContent(null); setLeavesDaysModal(null);
}; };
const loadDataChart = () => { const formatDataChart = () => {
// console.log('userRestDays', userRestDays); // console.log('userRestDays', userRestDays);
if (userRestDayList.length > 0) { if (userRestDayList.length > 0) {
let arrDataChart = []; let arrDataChart = [];
...@@ -127,9 +135,9 @@ const OnLeaveContainer = props => { ...@@ -127,9 +135,9 @@ const OnLeaveContainer = props => {
})); }));
}; };
const onLoadMoreLeavesApproveReqTicket = () => { const onLoadMoreLeavesApproveReqTicket = () => {
setPayloadApproveLeaves(prev => ({ setPayloadApproveRequestLeavesDays(prev => ({
...prev, ...prev,
page: payloadApproveLeaves.page + 1, page: payloadApproveRequestLeavesDays.page + 1,
isRefresh: false, isRefresh: false,
})); }));
}; };
...@@ -157,8 +165,8 @@ const OnLeaveContainer = props => { ...@@ -157,8 +165,8 @@ const OnLeaveContainer = props => {
approveReqBtn: false, approveReqBtn: false,
})); }));
} else if ( } else if (
leaveList.length > 0 && leaveRequestList.length > 0 &&
leaveList.length == totalArr.totalLeaveList leaveRequestList.length == totalArr.totalLeaveList
) { ) {
//.log('checkVisibleLoadMore'); //.log('checkVisibleLoadMore');
setDisableLoadMore(prev => ({ setDisableLoadMore(prev => ({
...@@ -166,8 +174,8 @@ const OnLeaveContainer = props => { ...@@ -166,8 +174,8 @@ const OnLeaveContainer = props => {
leaveBtn: true, leaveBtn: true,
})); }));
} else if ( } else if (
leaveList.length > 0 && leaveRequestList.length > 0 &&
leaveList.length < totalArr.totalLeaveList leaveRequestList.length < totalArr.totalLeaveList
) { ) {
//.log('checkVisibleLoadMore'); //.log('checkVisibleLoadMore');
setDisableLoadMore(prev => ({ setDisableLoadMore(prev => ({
...@@ -199,29 +207,6 @@ const OnLeaveContainer = props => { ...@@ -199,29 +207,6 @@ const OnLeaveContainer = props => {
setTotalArr(prev => ({...prev, totalLeaveList: total})); setTotalArr(prev => ({...prev, totalLeaveList: total}));
} }
}; };
const loadLeavesApproveReqTicketsFromApi = async () => {
const response = await dispatch(
getUserLeaveDayApproveReq(
payloadApproveLeaves.filter,
payloadApproveLeaves.sort,
payloadApproveLeaves.page,
payloadApproveLeaves.pageSize,
),
);
if (response.success) {
const {collection, total} = response.data;
if (!collection || collection.length === 0) {
return;
}
//console.log('loadLeavesApproveReqTicketsFromApi', collection);
if (payloadApproveLeaves.isRefresh) {
setTotalArr(prev => ({...prev, totalApproveReqLeaves: total}));
return;
}
setTotalArr(prev => ({...prev, totalApproveReqLeaves: total}));
}
};
// refresh onClick event // refresh onClick event
const onRefreshLeaveList = () => { const onRefreshLeaveList = () => {
setPayloadLeaves({ setPayloadLeaves({
...@@ -237,7 +222,7 @@ const OnLeaveContainer = props => { ...@@ -237,7 +222,7 @@ const OnLeaveContainer = props => {
})); }));
}; };
const onRefreshLeaveApproveReqList = () => { const onRefreshLeaveApproveReqList = () => {
setPayloadApproveLeaves({ setPayloadApproveRequestLeavesDays({
filter: '', filter: '',
sort: '', sort: '',
page: 1, page: 1,
...@@ -251,8 +236,8 @@ const OnLeaveContainer = props => { ...@@ -251,8 +236,8 @@ const OnLeaveContainer = props => {
}; };
const onChangeSelectFilter = selectedItem => { const onChangeSelectFilter = selectedItem => {
if (selectedItem == 'Tất cả') { if (selectedItem === 'Tất cả') {
setPayloadApproveLeaves({ setPayloadApproveRequestLeavesDays({
type: 'Tất cả', type: 'Tất cả',
filter: '', filter: '',
sort: '', sort: '',
...@@ -260,8 +245,8 @@ const OnLeaveContainer = props => { ...@@ -260,8 +245,8 @@ const OnLeaveContainer = props => {
pageSize: 5, pageSize: 5,
isRefresh: true, isRefresh: true,
}); });
} else if (selectedItem == 'Chưa duyệt') { } else if (selectedItem === 'Chưa duyệt') {
setPayloadApproveLeaves({ setPayloadApproveRequestLeavesDays({
type: 'Chưa duyệt', type: 'Chưa duyệt',
filter: 'extend_approved_status_name==PENDING', filter: 'extend_approved_status_name==PENDING',
sort: 'created_at', sort: 'created_at',
...@@ -269,8 +254,8 @@ const OnLeaveContainer = props => { ...@@ -269,8 +254,8 @@ const OnLeaveContainer = props => {
pageSize: 5, pageSize: 5,
isRefresh: true, isRefresh: true,
}); });
} else if (selectedItem == 'Đã từ chối') { } else if (selectedItem === 'Đã từ chối') {
setPayloadApproveLeaves({ setPayloadApproveRequestLeavesDays({
type: 'Đã từ chối', type: 'Đã từ chối',
filter: 'extend_approved_status_name==REJECTED', filter: 'extend_approved_status_name==REJECTED',
sort: 'created_at', sort: 'created_at',
...@@ -279,7 +264,7 @@ const OnLeaveContainer = props => { ...@@ -279,7 +264,7 @@ const OnLeaveContainer = props => {
isRefresh: true, isRefresh: true,
}); });
} else { } else {
setPayloadApproveLeaves({ setPayloadApproveRequestLeavesDays({
type: 'Đã duyệt', type: 'Đã duyệt',
filter: 'extend_approved_status_name==APPROVED', filter: 'extend_approved_status_name==APPROVED',
sort: 'created_at', sort: 'created_at',
...@@ -291,10 +276,10 @@ const OnLeaveContainer = props => { ...@@ -291,10 +276,10 @@ const OnLeaveContainer = props => {
}; };
const formatLeaveLstFromApi = () => { const formatLeaveLstFromApi = () => {
if (payloadLeaves.isRefresh) { if (payloadLeaves.isRefresh) {
setLeaveList(usersLeavesDayList); setLeaveRequestList(usersLeavesDayList);
return; return;
} }
let merge = [...usersLeavesDayList, ...leaveList]; let merge = [...usersLeavesDayList, ...leaveRequestList];
let format = merge.filter( let format = merge.filter(
( (
...@@ -303,26 +288,8 @@ const OnLeaveContainer = props => { ...@@ -303,26 +288,8 @@ const OnLeaveContainer = props => {
)(new Set()), )(new Set()),
); );
format.sort((a, b) => Moment(a.created_at) < Moment(b.created_at)); format.sort((a, b) => Moment(a.created_at) < Moment(b.created_at));
setLeaveList(format); setLeaveRequestList([...format]);
}; };
// const formatLeaveApproveLstFromApi = () => {
// //console.log('formatLeaveApproveLstFromApi');
// if (payloadApproveLeaves.isRefresh) {
// setLeaveApproveReqList(userLeaveDaysPending);
// return;
// }
// let merge = [...leaveApproveReqList, ...userLeaveDaysPending];
// let format = merge.filter(
// (
// set => f =>
// !set.has(f.id) && set.add(f.id)
// )(new Set()),
// );
// format.sort((a, b) => Moment(a.created_at) < Moment(b.created_at));
// setLeaveApproveReqList(format);
// };
const minutesToHours = (start, finish) => { const minutesToHours = (start, finish) => {
//console.log(start, finish); //console.log(start, finish);
...@@ -339,6 +306,7 @@ const OnLeaveContainer = props => { ...@@ -339,6 +306,7 @@ const OnLeaveContainer = props => {
} }
}; };
// fetch data
const fetchLeavesTicket = () => { const fetchLeavesTicket = () => {
dispatch( dispatch(
getUserLeavesDay({ getUserLeavesDay({
...@@ -349,38 +317,55 @@ const OnLeaveContainer = props => { ...@@ -349,38 +317,55 @@ const OnLeaveContainer = props => {
}), }),
); );
}; };
const fetchRestDay = () => { const fetchApproveRequestLeavesDays = () => {
dispatch( dispatch(
getUserLeaveDayApproveReq( getApproveRequestLeavesDays({
payloadApproveLeaves.filter, filter: payloadApproveRequestLeavesDays.filter,
payloadApproveLeaves.sort, sort: payloadApproveRequestLeavesDays.sort,
payloadApproveLeaves.page, page: payloadApproveRequestLeavesDays.page,
payloadApproveLeaves.pageSize, pageSize: payloadApproveRequestLeavesDays.pageSize,
), }),
); );
}; };
const fetchLeavesRestDays = () => {
dispatch(getUserRestDay());
};
//============================== ADD NEW LEAVES =============================//
const openCreateNewLeaveDay = async () => {
const objectClone = JSON.parse(JSON.stringify(userDirectManagersList));
let obj = [];
objectClone.forEach(element => {
element.checked = false;
obj.push(element);
});
setUserManagerList(obj);
getRangeTimeLeave();
};
// useEffect // useEffect
useEffect(() => { useEffect(() => {
usersLeavesDayList && formatLeaveLstFromApi(); usersLeavesDayList && formatLeaveLstFromApi();
}, [usersLeavesDayList]); }, [usersLeavesDayList]);
// useEffect(() => {
// userLeaveDaysPending && formatLeaveApproveLstFromApi();
// }, [userLeaveDaysPending]);
useEffect(() => { useEffect(() => {
usersLeavesDayList && userRestDayList && loadDataChart(); fetchLeavesRestDays();
}, [usersLeavesDayList, userRestDayList]); }, []);
useEffect(() => {
userRestDayList && formatDataChart();
}, [userRestDayList]);
useEffect(() => { useEffect(() => {
payloadLeaves && fetchLeavesTicket(); payloadLeaves && fetchLeavesTicket();
}, [payloadLeaves]); }, [payloadLeaves]);
useEffect(() => { useEffect(() => {
payloadApproveLeaves && fetchRestDay(); payloadApproveRequestLeavesDays && fetchApproveRequestLeavesDays();
}, [payloadApproveLeaves]); }, [payloadApproveRequestLeavesDays]);
useEffect(() => { useEffect(() => {
checkVisibleLoadMore(); checkVisibleLoadMore();
}, [leaveList, leaveApproveReqList, totalArr]); }, [leaveRequestList, leaveApproveReqList, totalArr]);
useEffect(() => { useEffect(() => {
if (props?.route?.params) { if (props?.route?.params) {
...@@ -394,15 +379,17 @@ const OnLeaveContainer = props => { ...@@ -394,15 +379,17 @@ const OnLeaveContainer = props => {
// props // props
const leaveProps = { const leaveProps = {
usersLeavesDayList, usersLeavesDayList,
userDetails, userInfo,
dataChart, dataChart,
showAlert, showAlert,
totalArr, totalArr,
isDisableLoadMore, isDisableLoadMore,
leaveList, leaveRequestList,
leaveApproveReqList, leaveApproveReqList,
modalContent, modalContent,
payloadApproveLeaves, payloadApproveRequestLeavesDays,
approveRequestLeavesDaysList,
leavesDaysModal,
onLoadMoreLeavesApproveReqTicket, onLoadMoreLeavesApproveReqTicket,
onRefreshLeaveList, onRefreshLeaveList,
onRefreshLeaveApproveReqList, onRefreshLeaveApproveReqList,
...@@ -412,12 +399,12 @@ const OnLeaveContainer = props => { ...@@ -412,12 +399,12 @@ const OnLeaveContainer = props => {
onHideAlert, onHideAlert,
onLoadMoreLeavesTicket, onLoadMoreLeavesTicket,
onOpenDetailModal, onOpenDetailModal,
onOpenAddModal, onOpenRequestLeavesModal,
onCloseModal, onCloseModal,
onChangeSelectFilter, onChangeSelectFilter,
minutesToHours, minutesToHours,
}; };
return <OnLeaveMainView {...leaveProps} />; return <OnLeaveMainView {...onLeavePropsProvider(leaveProps)} />;
}; };
export default OnLeaveContainer; export default OnLeaveContainer;
src/screens/onleave/index.js
View file @ 165dde72
/* eslint-disable prettier/prettier */
import React from 'react'; import React from 'react';
import {useSelector} from 'react-redux'; import {useSelector} from 'react-redux';
...@@ -6,13 +5,19 @@ import {authSelector, onLeaveSelector} from '../../app/selectors'; ...@@ -6,13 +5,19 @@ import {authSelector, onLeaveSelector} from '../../app/selectors';
import OnLeaveContainer from './onLeaveContainer'; import OnLeaveContainer from './onLeaveContainer';
export default function OnLeaveScreen() { export default function OnLeaveScreen() {
const userDetails = useSelector(authSelector); const authSelect = useSelector(authSelector);
const onLeaveSelect = useSelector(onLeaveSelector); const onLeaveSelect = useSelector(onLeaveSelector);
const {usersLeavesDayList = [], userRestDayList = []} = onLeaveSelect; const {
usersLeavesDayList = [],
userRestDayList = [],
approveRequestLeavesDaysList = [],
} = onLeaveSelect;
const {userInfo} = authSelect;
const onLeaveScreenProps = { const onLeaveScreenProps = {
userDetails, userInfo,
usersLeavesDayList, usersLeavesDayList,
userRestDayList, userRestDayList,
approveRequestLeavesDaysList,
}; };
return <OnLeaveContainer {...onLeaveScreenProps} />; return <OnLeaveContainer {...onLeaveScreenProps} />;
} }
src/screens/onleave/onLeavePropsProvider.js
View file @ 165dde72
/* eslint-disable prettier/prettier */ export default function onLeavePropsProvider(props) {
export default function homePropsProvider(props) {
const { const {
userDetails, usersLeavesDayList,
navigateToConfirmDate, userInfo,
navigateToOverTime,
dataChart, dataChart,
alertMessage,
showAlert, showAlert,
onHideAlert, totalArr,
isDisableLoadMore, isDisableLoadMore,
onLoadMoreLeavesTicket, leaveRequestList,
leaveList,
leaveApproveReqList, leaveApproveReqList,
onRefreshLeaveList, modalContent,
payloadApproveRequestLeavesDays,
approveRequestLeavesDaysList,
onLoadMoreLeavesApproveReqTicket, onLoadMoreLeavesApproveReqTicket,
onRefreshLeaveList,
onRefreshLeaveApproveReqList, onRefreshLeaveApproveReqList,
modalContent, navigateToConfirmDate,
navigateToOverTime,
alertMessage,
onHideAlert,
onLoadMoreLeavesTicket,
onOpenDetailModal, onOpenDetailModal,
onOpenAddModal, onOpenRequestLeavesModal,
payloadApproveLeaves, onCloseModal,
onChangeSelectFilter, onChangeSelectFilter,
minutesToHours, minutesToHours,
leavesDaysModal,
} = props; } = props;
return { return {
userDetails, leavesDaysModal,
navigateToConfirmDate, usersLeavesDayList,
navigateToOverTime, userInfo,
dataChart, dataChart,
alertMessage,
showAlert, showAlert,
onHideAlert, totalArr,
isDisableLoadMore, isDisableLoadMore,
onLoadMoreLeavesTicket, leaveRequestList,
leaveList,
leaveApproveReqList, leaveApproveReqList,
onRefreshLeaveList, modalContent,
payloadApproveRequestLeavesDays,
approveRequestLeavesDaysList,
onLoadMoreLeavesApproveReqTicket, onLoadMoreLeavesApproveReqTicket,
onRefreshLeaveList,
onRefreshLeaveApproveReqList, onRefreshLeaveApproveReqList,
modalContent, navigateToConfirmDate,
navigateToOverTime,
alertMessage,
onHideAlert,
onLoadMoreLeavesTicket,
onOpenDetailModal, onOpenDetailModal,
onOpenAddModal, onOpenRequestLeavesModal,
payloadApproveLeaves, onCloseModal,
onChangeSelectFilter, onChangeSelectFilter,
minutesToHours, minutesToHours,
approveRequestLeavesDaysProps: {
payloadApproveRequestLeavesDays,
onChangeSelectFilter,
approveRequestLeavesDaysList,
userInfo,
onOpenDetailModal,
},
}; };
} }
src/screens/onleave/onLeaveSlice.js
View file @ 165dde72
/* eslint-disable prettier/prettier */
import {createAsyncThunk, createSlice} from '@reduxjs/toolkit'; import {createAsyncThunk, createSlice} from '@reduxjs/toolkit';
import serviceRequest from '../../app/serviceRequest'; import serviceRequest from '../../app/serviceRequest';
...@@ -38,6 +37,19 @@ export const getUserRestDay = createAsyncThunk( ...@@ -38,6 +37,19 @@ export const getUserRestDay = createAsyncThunk(
}); });
}, },
); );
export const getApproveRequestLeavesDays = createAsyncThunk(
'onLeave/getApproveRequestLeavesDays',
async (data, thunkAPI) => {
return serviceRequest({
dispatch: thunkAPI.dispatch,
serviceMethod: onLeaveApi.requestGetLeaveDayApproved,
payload: data,
options: {
skipLoader: false,
},
});
},
);
const onLeaveSlice = createSlice({ const onLeaveSlice = createSlice({
name: 'onLeave', name: 'onLeave',
...@@ -46,7 +58,6 @@ const onLeaveSlice = createSlice({ ...@@ -46,7 +58,6 @@ const onLeaveSlice = createSlice({
extraReducers: builder => { extraReducers: builder => {
builder.addCase(getUserLeavesDay.fulfilled, (state, action) => { builder.addCase(getUserLeavesDay.fulfilled, (state, action) => {
const {success} = Utils.getValues(action, 'payload', false); const {success} = Utils.getValues(action, 'payload', false);
console.log('getUserLeavesDay', action);
if (success) { if (success) {
state.usersLeavesDayList = Utils.getValues( state.usersLeavesDayList = Utils.getValues(
action, action,
...@@ -57,7 +68,6 @@ const onLeaveSlice = createSlice({ ...@@ -57,7 +68,6 @@ const onLeaveSlice = createSlice({
}); });
builder.addCase(getUserRestDay.fulfilled, (state, action) => { builder.addCase(getUserRestDay.fulfilled, (state, action) => {
const {success} = Utils.getValues(action, 'payload', false); const {success} = Utils.getValues(action, 'payload', false);
console.log('getUserRestDay', action);
if (success) { if (success) {
state.userRestDayList = Utils.getValues( state.userRestDayList = Utils.getValues(
action, action,
...@@ -66,6 +76,16 @@ const onLeaveSlice = createSlice({ ...@@ -66,6 +76,16 @@ const onLeaveSlice = createSlice({
); );
} }
}); });
builder.addCase(getApproveRequestLeavesDays.fulfilled, (state, action) => {
const {success} = Utils.getValues(action, 'payload', false);
if (success) {
state.approveRequestLeavesDaysList = Utils.getValues(
action,
'payload.data.collection',
[],
);
}
});
}, },
}); });
......
src/screens/onleave/style.js
View file @ 165dde72
...@@ -105,9 +105,9 @@ const styles = StyleSheet.create({ ...@@ -105,9 +105,9 @@ const styles = StyleSheet.create({
color: '#5d78ff', color: '#5d78ff',
}, },
item: { item: {
padding: 20, padding: 10,
marginVertical: 2, marginVertical: 5,
marginHorizontal: 16, marginHorizontal: 5,
borderWidth: 1, borderWidth: 1,
borderBottomColor: '#f2f2f2', borderBottomColor: '#f2f2f2',
borderTopColor: '#f2f2f2', borderTopColor: '#f2f2f2',
...@@ -115,6 +115,7 @@ const styles = StyleSheet.create({ ...@@ -115,6 +115,7 @@ const styles = StyleSheet.create({
borderRadius: 8, borderRadius: 8,
borderLeftWidth: 3, borderLeftWidth: 3,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center',
}, },
title: { title: {
fontWeight: '500', fontWeight: '500',
...@@ -193,6 +194,7 @@ const styles = StyleSheet.create({ ...@@ -193,6 +194,7 @@ const styles = StyleSheet.create({
width: 130, width: 130,
fontSize: 12, fontSize: 12,
borderColor: '#444', borderColor: '#444',
color: 'red',
}, },
dropdown1BtnTxtStyle: {color: '#000', fontSize: 14, textAlign: 'center'}, dropdown1BtnTxtStyle: {color: '#000', fontSize: 14, textAlign: 'center'},
rowView: { rowView: {
...@@ -343,10 +345,6 @@ const styles = StyleSheet.create({ ...@@ -343,10 +345,6 @@ const styles = StyleSheet.create({
backgroundColor: '#5d78ff', backgroundColor: '#5d78ff',
borderRadius: 4, borderRadius: 4,
}, },
btnCancel: {
paddingHorizontal: 8,
paddingVertical: 12,
},
btnReject: { btnReject: {
flexDirection: 'row', flexDirection: 'row',
paddingHorizontal: 8, paddingHorizontal: 8,
...@@ -374,27 +372,32 @@ const styles = StyleSheet.create({ ...@@ -374,27 +372,32 @@ const styles = StyleSheet.create({
borderBottomWidth: 0.2, borderBottomWidth: 0.2,
height: 24, height: 24,
}, },
dropdown1DropdownStyle: {backgroundColor: '#EFEFEF'}, approveRequestTitle: {
dropdown1RowStyle: { fontWeight: 'bold',
backgroundColor: '#EFEFEF', marginVertical: 10,
height: 38, fontSize: 16,
borderRadius: 4,
}, },
dropdown1RowTxtStyle: {color: '#444', textAlign: 'left', fontSize: 14}, userAvatarRequest: {
dropdownSelectTimeText: {color: '#444', textAlign: 'left', fontSize: 14}, width: 30,
dropdown1BtnStyle: { height: 30,
backgroundColor: '#FFF', alignSelf: 'center',
borderWidth: 0.5, marginRight: 10,
borderRadius: 8,
height: 35,
width: 130,
fontSize: 12,
borderColor: '#444',
}, },
dropdown1BtnTxtStyle: {color: '#000', fontSize: 14, textAlign: 'center'}, approveRequestFilter: {
rowView: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center',
marginVertical: 5,
},
leaveRequestEmptyView: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
marginTop: 10, marginTop: 10,
padding: 20,
},
myLeavesTitleView: {
flexDirection: 'row',
marginBottom: 10,
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
}, },
......
src/screens/onleave/template/OnLeaveMainView.js
View file @ 165dde72
/* eslint-disable prettier/prettier */
import Moment from 'moment'; import Moment from 'moment';
import React from 'react'; import React from 'react';
import { import {
...@@ -8,330 +7,337 @@ import { ...@@ -8,330 +7,337 @@ import {
TouchableOpacity, TouchableOpacity,
View, View,
} from 'react-native'; } from 'react-native';
import Alert from 'react-native-awesome-alerts';
import FastImage from 'react-native-fast-image'; import FastImage from 'react-native-fast-image';
import PieChart from 'react-native-pie-chart'; import PieChart from 'react-native-pie-chart';
import SelectDropdown from 'react-native-select-dropdown'; import AppText from '../../../components/AppText';
import ButtonComponent from '../../../components/ButtonComponent'; import ButtonComponent from '../../../components/ButtonComponent';
import SelectDropdownComponent from '../../../components/Select';
import config from '../../../config';
import {GifType, IMAGES} from '../../../values/images'; import {GifType, IMAGES} from '../../../values/images';
import styles from '../style'; import styles from '../style';
import AppText from '../../../components/AppText'; import RequestLeavesDays from './subViews/RequestLeavesDays';
const OnLeaveMainView = ({
userDetails, const sliceColorRight = ['#6dc9ee', '#d9f4ff'];
navigateToConfirmDate, const selectDataDropDown = [
navigateToOverTime, {label: 'Tất cả', value: 'Tất cả'},
dataChart, {label: 'Chưa duyệt', value: 'Chưa duyệt'},
alertMessage, {label: 'Đã duyệt', value: 'Đã duyệt'},
showAlert, {label: 'Đã từ chối', value: 'Đã từ chối'},
onHideAlert, ];
isDisableLoadMore,
onLoadMoreLeavesTicket, const DataChartLeavesRestDays = React.memo(
leaveList, ({dataChart}) => {
leaveApproveReqList, return (
onRefreshLeaveList, <View style={styles.pieChartContainer}>
onLoadMoreLeavesApproveReqTicket, <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
onRefreshLeaveApproveReqList, <View style={{flexDirection: 'row'}}>
modalContent, {dataChart &&
onOpenDetailModal, dataChart?.length &&
onOpenAddModal, dataChart.map((item, index) => {
payloadApproveLeaves, return (
onChangeSelectFilter, <View key={index} style={styles.pieChartView}>
minutesToHours, <View style={styles.pieItem}>
}) => { <View style={{marginBottom: 10}}>
const sliceColorRight = ['#6dc9ee', '#d9f4ff']; <AppText style={{textAlign: 'center', fontSize: 12}}>
//console.log('dataChart', dataChart); {item.name}
return ( </AppText>
<SafeAreaView> </View>
<ScrollView nestedScrollEnabled={true}> <View
<View style={styles.pieChartContainer}> style={{
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}> alignItems: 'center',
<View style={{flexDirection: 'row'}}> justifyContent: 'center',
{dataChart && }}>
dataChart?.length && <PieChart
dataChart.map((item, index) => { doughnut={true}
return ( widthAndHeight={100}
<View key={index} style={styles.pieChartView}> series={[
<View style={styles.pieItem}> item.from ? item.from : 0,
<View style={{marginBottom: 10}}> item.to ? item.to : 1,
<AppText style={{textAlign: 'center', fontSize: 12}}> ]}
{item.name} sliceColor={sliceColorRight}
</AppText> coverRadius={0.9}
/>
<View style={styles.pieFill}>
<AppText
style={
styles.pieFillTextAmount
}>{`${item.from} / ${item.to}`}</AppText>
<AppText style={styles.pieFillText}> Ngày </AppText>
</View> </View>
<View </View>
style={{ <View>
alignItems: 'center', <View style={[styles.viewTextPie, {marginTop: 20}]}>
justifyContent: 'center', <View
}}> style={[
<PieChart styles.bgLeftViewTextPie,
doughnut={true} {backgroundColor: '#6dc9ee', marginRight: 5},
widthAndHeight={100} ]}></View>
series={[ <AppText>Phép đã nghỉ</AppText>
item.from ? item.from : 0,
item.to ? item.to : 1,
]}
sliceColor={sliceColorRight}
coverRadius={0.9}
/>
<View style={styles.pieFill}>
<AppText
style={
styles.pieFillTextAmount
}>{`${item.from} / ${item.to}`}</AppText>
<AppText style={styles.pieFillText}> Ngày </AppText>
</View>
</View> </View>
<View> <View style={[styles.viewTextPie]}>
<View style={[styles.viewTextPie, {marginTop: 20}]}> <View
<View style={[
style={[ styles.bgLeftViewTextPie,
styles.bgLeftViewTextPie, {backgroundColor: '#d9f4ff', marginRight: 10},
{backgroundColor: '#6dc9ee', marginRight: 5}, ]}></View>
]}></View> <AppText>Phép còn lại</AppText>
<AppText>Phép đã nghỉ</AppText>
</View>
<View style={[styles.viewTextPie]}>
<View
style={[
styles.bgLeftViewTextPie,
{backgroundColor: '#d9f4ff', marginRight: 10},
]}></View>
<AppText>Phép còn lại</AppText>
</View>
</View> </View>
</View> </View>
</View> </View>
); </View>
})} );
</View> })}
</ScrollView>
</View>
<View style={styles.view}>
<AppText style={{fontWeight: '500', marginBottom: 10}}>
Nghỉ phép của bạn:{' '}
</AppText>
<View style={{alignItems: 'center', justifyContent: 'center'}}>
<TouchableOpacity
style={styles.btnConfirm}
onPress={onOpenAddModal}>
<Image source={IMAGES.IcBtnAdd} style={styles.iconPlus} />
<AppText style={styles.whiteTxt}>YÊU CẦU NGHỈ PHÉP</AppText>
</TouchableOpacity>
</View> </View>
<AppText style={{fontWeight: '500', marginBottom: 10, marginTop: 10}}> </ScrollView>
Liên kết nhanh:{' '} </View>
);
},
function areEqual(prevProps, nextProps) {
return prevProps.dataChart === nextProps.dataChart;
},
);
const AddNewLeavesSection = React.memo(props => {
const {onOpenRequestLeavesModal, navigateToConfirmDate, navigateToOverTime} =
props;
return (
<View style={styles.view}>
<AppText style={{fontWeight: '500', marginBottom: 10}}>
Nghỉ phép của bạn:{' '}
</AppText>
<View style={{alignItems: 'center', justifyContent: 'center'}}>
<TouchableOpacity
style={styles.btnConfirm}
onPress={onOpenRequestLeavesModal}>
<Image source={IMAGES.IcBtnAdd} style={styles.iconPlus} />
<AppText style={styles.whiteTxt}>YÊU CẦU NGHỈ PHÉP</AppText>
</TouchableOpacity>
</View>
<AppText style={{fontWeight: '500', marginBottom: 10, marginTop: 10}}>
Liên kết nhanh:{' '}
</AppText>
<TouchableOpacity
style={{flexDirection: 'row'}}
onPress={navigateToConfirmDate}>
<Image source={IMAGES.IcTask} style={styles.iconPlus} />
<AppText style={styles.primary_blue}>Xác nhận ngày công</AppText>
</TouchableOpacity>
<TouchableOpacity
onPress={navigateToOverTime}
style={{flexDirection: 'row', marginTop: 5}}>
<Image source={IMAGES.IcBackTime} style={styles.iconPlus} />
<AppText style={styles.primary_blue}>Tăng ca của tôi</AppText>
</TouchableOpacity>
</View>
);
});
const ApproveRequestLeavesDays = React.memo(
props => {
const {
onChangeSelectFilter,
approveRequestLeavesDaysList = [],
userInfo,
onOpenDetailModal,
} = props;
return (
<View style={styles.view}>
<View style={styles.approveRequestFilter}>
<AppText style={styles.approveRequestTitle}>
Duyệt yêu cầu nghỉ phép
</AppText> </AppText>
<TouchableOpacity <View
style={{flexDirection: 'row'}} style={{
onPress={navigateToConfirmDate}> alignItems: 'flex-end',
<Image source={IMAGES.IcTask} style={styles.iconPlus} /> flex: 1,
<AppText style={styles.primary_blue}>Xác nhận ngày công</AppText> }}>
</TouchableOpacity> <SelectDropdownComponent
<TouchableOpacity selectData={selectDataDropDown}
onPress={navigateToOverTime} setValue={onChangeSelectFilter}
style={{flexDirection: 'row', marginTop: 5}}> />
<Image source={IMAGES.IcBackTime} style={styles.iconPlus} /> </View>
<AppText style={styles.primary_blue}>Tăng ca của tôi</AppText>
</TouchableOpacity>
</View> </View>
{/* Approve leave request */} {approveRequestLeavesDaysList.length > 0 &&
{leaveApproveReqList && ( approveRequestLeavesDaysList[0].approver_id === userInfo.id &&
<View style={styles.view}> approveRequestLeavesDaysList.map((item, index) => (
<View style={{flexDirection: 'row', marginBottom: 10}}> <TouchableOpacity
<AppText key={index}
style={{ style={[
fontWeight: 'bold', styles.item,
marginBottom: 10, {
fontSize: 16, borderLeftColor: item.extend_approved_status_color,
flex: 2, },
textAlign: 'left', ]}
flex: 2, onPress={() => onOpenDetailModal(item)}>
}}> <View style={{flexDirection: 'row', flex: 2}}>
Duyệt yêu cầu nghỉ phép{' '} <Image
</AppText> source={
<View style={{alignItems: 'flex-end', flex: 1, paddingRight: 20}}> item.extend_creator_avatar
<SelectDropdown ? {
data={['Tất cả', 'Chưa duyệt', 'Đã duyệt', 'Đã từ chối']} uri:
dropdownIconPosition={'right'} config.imageEndPoint + item.extend_creator_avatar,
defaultButtonText={payloadApproveLeaves?.type}
buttonStyle={styles.dropdown1BtnStyle}
onSelect={selectedItem => onChangeSelectFilter(selectedItem)}
dropdownStyle={styles.dropdown1DropdownStyle}
rowStyle={styles.dropdown1RowStyle}
rowTextStyle={styles.dropdown1RowTxtStyle}
buttonTextStyle={styles.dropdown1BtnTxtStyle}
renderDropdownIcon={isOpened => {
return (
<Image
source={
isOpened ? IMAGES.IcUpArrow : IMAGES.IcArrowDown
} }
style={{width: 20, height: 20}} : IMAGES.IcAvatarDefault
/> }
); style={styles.userAvatarRequest}
}}
/> />
</View> <View>
</View> <View>
{leaveApproveReqList?.length > 0 &&
leaveApproveReqList[0].approver_id == userDetails.id &&
leaveApproveReqList.map((item, index) => (
<TouchableOpacity
key={index}
style={[
styles.item,
{
borderLeftColor: item.extend_approved_status_color,
},
]}
onPress={() => onOpenDetailModal(item)}>
<View style={{flexDirection: 'row', flex: 2}}>
<Image
source={{
uri:
'https://meu.anawork.com' +
item.extend_creator_avatar,
}}
style={{
width: 30,
height: 30,
alignSelf: 'center',
marginRight: 10,
}}
/>
<View>
<View>
<AppText style={styles.title}>
{item.extend_creator_full_name}
</AppText>
<AppText>
{Moment(item.start).format('DD/MM/YYYY')}
</AppText>
</View>
</View>
</View>
<View style={{flex: 1}}>
<View style={{flex: 1, alignItems: 'flex-end'}}>
<AppText numberOfLines={1} style={{flex: 1}}>
{item.extend_category_name}
</AppText>
<AppText>{`${item.extend_taken_days} ngày`}</AppText>
</View>
</View>
</TouchableOpacity>
))}
{leaveList?.length > 0 && !isDisableLoadMore.approveReqBtn && (
<ButtonComponent
style={{
justifyContent: 'center',
alignItems: 'center',
padding: 10,
}}
text={'Xem thêm'}
textStyle={{color: '#5d78ff'}}
onPress={onLoadMoreLeavesApproveReqTicket}
/>
)}
</View>
)}
{/* My leave request */}
<View style={[styles.view, {marginBottom: 30}]}>
<View style={{flexDirection: 'row', marginBottom: 10}}>
<AppText
style={{
fontWeight: 'bold',
flex: 1,
fontSize: 17,
alignSelf: 'center',
}}>
Nghỉ phép của tôi:{' '}
</AppText>
<View style={{alignItems: 'flex-end', flex: 1, paddingRight: 20}}>
<ButtonComponent
text={'Tải lại'}
textStyle={{color: '#5d78ff'}}
style={{
justifyContent: 'center',
alignItems: 'center',
padding: 10,
flexDirection: 'row',
}}
onPress={onRefreshLeaveList}
leftIcon={IMAGES.IcRefresh}
styleIcon={{width: 20, height: 20}}
/>
</View>
</View>
{leaveList.length === 0 && (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
marginTop: 10,
padding: 20,
}}>
<AppText style={{textAlign: 'center'}}>
Bạn chưa có ngày nghỉ nào! Vui lòng chọn “yêu cầu nghỉ phép” ở
bên trên nhé!
</AppText>
<FastImage
source={GifType.gifLeave}
style={{width: '90%', height: 250}}
/>
</View>
)}
{leaveList &&
leaveList.map((item, index) => (
<TouchableOpacity
onPress={() => onOpenDetailModal(item)}
key={index}>
<View
style={[
styles.item,
{borderLeftColor: item.extend_approved_status_color},
]}>
<View style={{flex: 2}}>
<AppText style={styles.title}> <AppText style={styles.title}>
{item.extend_category_name} {item?.extend_creator_full_name?.length > 18
? item.extend_creator_full_name.slice(0, 18) + '...'
: item.extend_creator_full_name}
</AppText>
<AppText isSubText>
{Moment(item.start).format('DD/MM/YYYY')}
</AppText> </AppText>
<AppText>{Moment(item.start).format('DD/MM/YYYY')}</AppText>
</View>
<View style={{flex: 1, alignItems: 'flex-end'}}>
<AppText numberOfLines={1}>{item.reason}</AppText>
<AppText>{`${item.extend_taken_days} ngày`}</AppText>
</View> </View>
</View> </View>
</TouchableOpacity> </View>
))} <View style={{flex: 1}}>
{leaveList && leaveList.length > 0 && !isDisableLoadMore.leaveBtn && ( <View style={{flex: 1, alignItems: 'flex-end'}}>
<AppText isSubText>{item?.extend_category_name}</AppText>
<AppText>{`${item?.extend_taken_days} ngày`}</AppText>
</View>
</View>
</TouchableOpacity>
))}
{/* {leaveList?.length > 0 && !isDisableLoadMore.approveReqBtn && (
<ButtonComponent
style={{
justifyContent: 'center',
alignItems: 'center',
padding: 10,
}}
text={'Xem thêm'}
textStyle={{color: '#5d78ff'}}
onPress={onLoadMoreLeavesApproveReqTicket}
/>
)} */}
</View>
);
},
function areEqual(prevProps, nextProps) {
return (
prevProps.approveRequestLeavesDaysList === nextProps.approveRequestLeaves
);
},
);
const LeavesRequest = React.memo(
props => {
const {leaveRequestList, onRefreshLeaveList, onOpenDetailModal} = props;
return (
<View style={[styles.view, {marginBottom: 30}]}>
<View style={styles.myLeavesTitleView}>
<AppText
style={{
fontSize: 17,
}}>
Nghỉ phép của tôi:
</AppText>
<View style={{alignItems: 'flex-end', paddingRight: 20}}>
<ButtonComponent <ButtonComponent
text={'Tải lại'}
textStyle={{color: '#5d78ff'}}
style={{ style={{
justifyContent: 'center', flexDirection: 'row',
alignItems: 'center',
padding: 10,
}} }}
text={'Xem thêm'} onPress={onRefreshLeaveList}
textStyle={{color: '#5d78ff'}} leftIcon={IMAGES.IcRefresh}
onPress={onLoadMoreLeavesTicket} styleIcon={{width: 20, height: 20}}
/> />
)} </View>
</View> </View>
{modalContent} {leaveRequestList.length === 0 && (
{/* Modal detail leave request */} <View style={styles.leaveRequestEmptyView}>
<Alert <AppText style={{textAlign: 'center'}}>
show={showAlert.isError} Bạn chưa có ngày nghỉ nào! Vui lòng chọn “Yêu cầu nghỉ phép” ở bên
showProgress={false} trên nhé!
title={showAlert.title} </AppText>
message={showAlert.message} <FastImage
closeOnTouchOutside={true} source={GifType.gifLeave}
closeOnHardwareBackPress={false} style={{width: '90%', height: 250}}
showConfirmButton={true} />
confirmText="Đóng" </View>
confirmButtonColor="#DD6B55" )}
onConfirmPressed={onHideAlert} {leaveRequestList &&
leaveRequestList.map((item, index) => (
<TouchableOpacity
onPress={() => onOpenDetailModal(item)}
key={index}>
<View
style={[
styles.item,
{borderLeftColor: item.extend_approved_status_color},
]}>
<View style={{flex: 2}}>
<AppText style={styles.title}>
{item.extend_category_name}
</AppText>
<AppText isSubText>
{Moment(item.start).format('DD/MM/YYYY')}
</AppText>
</View>
<View style={{flex: 1, alignItems: 'flex-end'}}>
<AppText>{item.reason}</AppText>
<AppText
isSubText>{`${item.extend_taken_days} ngày`}</AppText>
</View>
</View>
</TouchableOpacity>
))}
{/* {leaveList && leaveList.length > 0 && !isDisableLoadMore.leaveBtn && (
<ButtonComponent
style={{
justifyContent: 'center',
alignItems: 'center',
padding: 10,
}}
text={'Xem thêm'}
textStyle={{color: '#5d78ff'}}
onPress={onLoadMoreLeavesTicket}
/>
)} */}
</View>
);
},
function areEqual(prevProps, nextProps) {
return prevProps.leaveRequestList === nextProps.leaveRequestList;
},
);
const OnLeaveMainView = ({
userInfo,
navigateToConfirmDate,
navigateToOverTime,
dataChart,
onRefreshLeaveList,
onOpenDetailModal,
onOpenRequestLeavesModal,
approveRequestLeavesDaysProps,
leaveRequestList,
onCloseModal,
leavesDaysModal,
}) => {
return (
<SafeAreaView>
<ScrollView nestedScrollEnabled={true}>
<DataChartLeavesRestDays dataChart={dataChart} />
<AddNewLeavesSection
onOpenRequestLeavesModal={onOpenRequestLeavesModal}
navigateToConfirmDate={navigateToConfirmDate}
navigateToOverTime={navigateToOverTime}
/>
{/* Approve leave request */}
<ApproveRequestLeavesDays {...approveRequestLeavesDaysProps} />
<LeavesRequest
leaveRequestList={leaveRequestList}
onRefreshLeaveList={onRefreshLeaveList}
onOpenDetailModal={onOpenDetailModal}
/> />
</ScrollView> </ScrollView>
{leavesDaysModal && (
<RequestLeavesDays userInfo={userInfo} onClose={onCloseModal} />
)}
</SafeAreaView> </SafeAreaView>
); );
}; };
......
src/screens/onleave/modals/OnLeaveModalAddNew.js → src/screens/onleave/template/subViews/RequestLeavesDays.js
View file @ 165dde72
...@@ -18,346 +18,349 @@ import DateTimePickerModal from 'react-native-modal-datetime-picker'; ...@@ -18,346 +18,349 @@ import DateTimePickerModal from 'react-native-modal-datetime-picker';
import SelectDropdown from 'react-native-select-dropdown'; import SelectDropdown from 'react-native-select-dropdown';
import Toast from 'react-native-toast-message'; import Toast from 'react-native-toast-message';
import {useDispatch, useSelector} from 'react-redux'; import {useDispatch, useSelector} from 'react-redux';
import AppText from '../../../components/AppText'; import AppText from '../../../../components/AppText';
import ButtonComponent from '../../../components/ButtonComponent'; import ButtonComponent from '../../../../components/ButtonComponent';
import { import {
getRangeTimeFinish, getRangeTimeFinish,
getRangeTimeStart, getRangeTimeStart,
postUserLeave, postUserLeave,
} from '../../../store/actions/UserAction'; } from '../../../../store/actions/UserAction';
import colors from '../../../values/colors'; import colors from '../../../../values/colors';
import {IMAGES} from '../../../values/images'; import {IMAGES} from '../../../../values/images';
const OnLeaveModalAddNew = ({userDetails, onClose}) => { import config from '../../../../config';
const dispatch = useDispatch();
const userDirectManagersList = useSelector( const RequestLeavesDays = ({userInfo, onClose}) => {
state => state.MyDirectManagers.myDirectManagers, // const dispatch = useDispatch();
); // const userDirectManagersList = useSelector(
const idLeavesCategory = useSelector( // state => state.MyDirectManagers.myDirectManagers,
state => state.UserLeavesPending.leaveCategories, // );
); // const idLeavesCategory = useSelector(
// state => state.UserLeavesPending.leaveCategories,
// );
// init state // // init state
const initStateLeave = { // const initStateLeave = {
id: '', // id: '',
since: new Date(), // since: new Date(),
timeStart: '8:30', // timeStart: '8:30',
dateStart: '', // dateStart: '',
toDate: new Date(), // toDate: new Date(),
timeFinish: '17:30', // timeFinish: '17:30',
dateFinish: '', // dateFinish: '',
reason: '', // reason: '',
taken_hours: 0, // taken_hours: 0,
approved_date: new Date(), // approved_date: new Date(),
approver_id: '', // approver_id: '',
}; // };
// state // // state
const [leave, setLeave] = useState(initStateLeave); // const [leave, setLeave] = useState(initStateLeave);
const [userManagerList, setUserManagerList] = useState([]); // const [userManagerList, setUserManagerList] = useState([]);
const [rangeTimeStart, setRangeTimeStart] = useState([]); // const [rangeTimeStart, setRangeTimeStart] = useState([]);
const [rangeTimeFinish, setRangeTimeFinish] = useState([]); // const [rangeTimeFinish, setRangeTimeFinish] = useState([]);
const [durationLeave, setDurationLeave] = useState({ // const [durationLeave, setDurationLeave] = useState({
time: 0, // time: 0,
stringTime: '', // stringTime: '',
}); // });
const [openTimePicker, setOpenTimePicker] = useState({ // const [openTimePicker, setOpenTimePicker] = useState({
start: false, // start: false,
finish: false, // finish: false,
}); // });
const [nameLeaves, setNameLeaves] = useState([]); // const [nameLeaves, setNameLeaves] = useState([]);
const [postImage, setPostImage] = useState([]); // const [postImage, setPostImage] = useState([]);
const [isNextApprover, setIsNextApprover] = useState(false); // const [isNextApprover, setIsNextApprover] = useState(false);
const [nextApproverId, setNextApproverId] = useState(''); // const [nextApproverId, setNextApproverId] = useState('');
const [showAlert, setShowAlert] = useState({ // const [showAlert, setShowAlert] = useState({
isShow: false, // isShow: false,
title: '', // title: '',
message: '', // message: '',
}); // });
// main function // // main function
const alertMessage = message => { // const alertMessage = message => {
setShowAlert({ // setShowAlert({
isError: true, // isError: true,
title: 'Thông báo', // title: 'Thông báo',
message: `${message} 👍`, // message: `${message} 👍`,
}); // });
}; // };
const onHideAlert = () => { // const onHideAlert = () => {
setShowAlert({ // setShowAlert({
isError: false, // isError: false,
title: '', // title: '',
message: '', // message: '',
}); // });
}; // };
const openCreateNewLeaveDay = async () => { // const openCreateNewLeaveDay = async () => {
const objectClone = JSON.parse(JSON.stringify(userDirectManagersList)); // const objectClone = JSON.parse(JSON.stringify(userDirectManagersList));
let obj = []; // let obj = [];
objectClone.forEach(element => { // objectClone.forEach(element => {
element.checked = false; // element.checked = false;
obj.push(element); // obj.push(element);
}); // });
setUserManagerList(obj); // setUserManagerList(obj);
getRangeTimeLeave(); // getRangeTimeLeave();
}; // };
const getRangeTimeLeave = async () => { // const getRangeTimeLeave = async () => {
const responseRangeStart = await dispatch( // const responseRangeStart = await dispatch(
getRangeTimeStart( // getRangeTimeStart(
Moment(leave.since).format('YYYY-MM-DD'), // Moment(leave.since).format('YYYY-MM-DD'),
userDetails.id, // userDetails.id,
), // ),
); // );
let tempArrRangeTimeStart = JSON.parse(JSON.stringify(responseRangeStart)); // let tempArrRangeTimeStart = JSON.parse(JSON.stringify(responseRangeStart));
let arrStart = []; // let arrStart = [];
tempArrRangeTimeStart.forEach(item => { // tempArrRangeTimeStart.forEach(item => {
const timeConverse = parseInt(item.slice(0, 2)) + 7; // const timeConverse = parseInt(item.slice(0, 2)) + 7;
const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse; // const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
const time = hours + item.substring(2); // const time = hours + item.substring(2);
arrStart.push(time); // arrStart.push(time);
}); // });
if (arrStart.length > 0) { // if (arrStart.length > 0) {
setRangeTimeStart(arrStart); // setRangeTimeStart(arrStart);
} // }
//finish time // //finish time
const responseRangeFinish = await dispatch( // const responseRangeFinish = await dispatch(
getRangeTimeFinish( // getRangeTimeFinish(
Moment(leave.toDate).format('YYYY-MM-DD'), // Moment(leave.toDate).format('YYYY-MM-DD'),
userDetails.id, // userDetails.id,
), // ),
); // );
let tempArrRangeTime = JSON.parse(JSON.stringify(responseRangeFinish)); // let tempArrRangeTime = JSON.parse(JSON.stringify(responseRangeFinish));
let arrFinish = []; // let arrFinish = [];
tempArrRangeTime.forEach(item => { // tempArrRangeTime.forEach(item => {
const timeConverse = parseInt(item.slice(0, 2)) + 7; // const timeConverse = parseInt(item.slice(0, 2)) + 7;
const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse; // const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
const time = hours + item.substring(2); // const time = hours + item.substring(2);
arrFinish.push(time); // arrFinish.push(time);
}); // });
if (arrFinish.length > 0) setRangeTimeFinish(arrFinish); // if (arrFinish.length > 0) setRangeTimeFinish(arrFinish);
}; // };
const onSelectDateStart = async time => { // const onSelectDateStart = async time => {
const responseRangeStart = await dispatch( // const responseRangeStart = await dispatch(
getRangeTimeStart(Moment(time).format('YYYY-MM-DD'), userDetails.id), // getRangeTimeStart(Moment(time).format('YYYY-MM-DD'), userDetails.id),
); // );
let tempArrRangeTime = JSON.parse(JSON.stringify(responseRangeStart)); // let tempArrRangeTime = JSON.parse(JSON.stringify(responseRangeStart));
let arrStart = []; // let arrStart = [];
tempArrRangeTime.forEach(item => { // tempArrRangeTime.forEach(item => {
const timeConverse = parseInt(item.slice(0, 2)) + 7; // const timeConverse = parseInt(item.slice(0, 2)) + 7;
const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse; // const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
const time = hours + item.substring(2); // const time = hours + item.substring(2);
arrStart.push(time); // arrStart.push(time);
}); // });
if (arrStart.length > 0) { // if (arrStart.length > 0) {
setRangeTimeStart(arrStart); // setRangeTimeStart(arrStart);
} // }
setOpenTimePicker(state => ({ // setOpenTimePicker(state => ({
...state, // ...state,
start: false, // start: false,
})); // }));
setLeave(state => ({ // setLeave(state => ({
...state, // ...state,
since: time, // since: time,
})); // }));
}; // };
const onSelectDateFinish = async time => { // const onSelectDateFinish = async time => {
const responseRangeFinish = await dispatch( // const responseRangeFinish = await dispatch(
getRangeTimeFinish(Moment(time).format('YYYY-MM-DD'), userDetails.id), // getRangeTimeFinish(Moment(time).format('YYYY-MM-DD'), userDetails.id),
); // );
let tempArrRangeTime = JSON.parse(JSON.stringify(responseRangeFinish)); // let tempArrRangeTime = JSON.parse(JSON.stringify(responseRangeFinish));
let arrFinish = []; // let arrFinish = [];
tempArrRangeTime.forEach(item => { // tempArrRangeTime.forEach(item => {
const timeConverse = parseInt(item.slice(0, 2)) + 7; // const timeConverse = parseInt(item.slice(0, 2)) + 7;
const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse; // const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
const time = hours + item.substring(2); // const time = hours + item.substring(2);
arrFinish.push(time); // arrFinish.push(time);
}); // });
if (arrFinish.length > 0) setRangeTimeFinish(arrFinish); // if (arrFinish.length > 0) setRangeTimeFinish(arrFinish);
setOpenTimePicker(state => ({ // setOpenTimePicker(state => ({
...state, // ...state,
finish: false, // finish: false,
})); // }));
setLeave(state => ({ // setLeave(state => ({
...state, // ...state,
toDate: time, // toDate: time,
})); // }));
}; // };
const onSubmitLeave = async () => { // const onSubmitLeave = async () => {
if (!leave.id) { // if (!leave.id) {
alertMessage('Vui lòng chọn loại ngày nghỉ!'); // alertMessage('Vui lòng chọn loại ngày nghỉ!');
return; // return;
} // }
if (!leave.since) { // if (!leave.since) {
alertMessage('Vui lòng chọn ngày bắt đầu!'); // alertMessage('Vui lòng chọn ngày bắt đầu!');
return; // return;
} // }
if (!leave.timeStart) { // if (!leave.timeStart) {
alertMessage('Vui lòng chọn giờ bắt đầu!'); // alertMessage('Vui lòng chọn giờ bắt đầu!');
return; // return;
} // }
if (!leave.toDate) { // if (!leave.toDate) {
alertMessage('Vui lòng chọn ngày kết thúc!'); // alertMessage('Vui lòng chọn ngày kết thúc!');
return; // return;
} // }
if (!leave.timeFinish) { // if (!leave.timeFinish) {
alertMessage('Vui lòng chọn giờ kết thúc!'); // alertMessage('Vui lòng chọn giờ kết thúc!');
return; // return;
} // }
if (!leave.reason) { // if (!leave.reason) {
alertMessage('Vui lòng nhập lý do !'); // alertMessage('Vui lòng nhập lý do !');
return; // return;
} // }
if (!leave.approver_id) { // if (!leave.approver_id) {
alertMessage('Vui lòng chọn người duyệt!'); // alertMessage('Vui lòng chọn người duyệt!');
return; // return;
} // }
const isValid = isDateStartAndFinishChange(); // const isValid = isDateStartAndFinishChange();
if (isValid) { // if (isValid) {
//console.log('isValid', isValid); // //console.log('isValid', isValid);
const res = await dispatch( // const res = await dispatch(
postUserLeave(userDetails.id, leave, postImage, durationLeave.time), // postUserLeave(userDetails.id, leave, postImage, durationLeave.time),
); // );
//console.log('res', res); // //console.log('res', res);
if (res) { // if (res) {
Toast.show({ // Toast.show({
type: 'success', // type: 'success',
text1: `Hệ thống`, // text1: `Hệ thống`,
text2: `Yêu cầu nghỉ phép thành công`, // text2: `Yêu cầu nghỉ phép thành công`,
style: {zIndex: 1001}, // style: {zIndex: 1001},
visibilityTime: 2000, // visibilityTime: 2000,
}); // });
refreshAfterSubmit(); // refreshAfterSubmit();
} else { // } else {
alertMessage('Bạn đã hết ngày nghỉ phép'); // alertMessage('Bạn đã hết ngày nghỉ phép');
} // }
return; // return;
} // }
alertMessage('Vui lòng nhập ngày bắt đầu nhỏ hơn ngày kết thúc'); // alertMessage('Vui lòng nhập ngày bắt đầu nhỏ hơn ngày kết thúc');
}; // };
const refreshAfterSubmit = () => { // const refreshAfterSubmit = () => {
onClose(null); // onClose(null);
setLeave(initStateLeave); // setLeave(initStateLeave);
}; // };
const copyNameCategory = () => { // const copyNameCategory = () => {
idLeavesCategory.map((item, index) => { // idLeavesCategory.map((item, index) => {
setNameLeaves(prevState => [...prevState, item.name]); // setNameLeaves(prevState => [...prevState, item.name]);
return; // return;
}); // });
}; // };
const onSelectTimeStart = (selectedItem, indexItem) => { // const onSelectTimeStart = (selectedItem, indexItem) => {
console.log('selectedItem', selectedItem); // console.log('selectedItem', selectedItem);
setLeave(state => ({ // setLeave(state => ({
...state, // ...state,
timeStart: selectedItem, // timeStart: selectedItem,
})); // }));
}; // };
const onSelectTimeFinish = (selectedItem, indexItem) => { // const onSelectTimeFinish = (selectedItem, indexItem) => {
setLeave(state => ({ // setLeave(state => ({
...state, // ...state,
timeFinish: selectedItem, // timeFinish: selectedItem,
})); // }));
}; // };
const onSelectManager = async (value, index, item) => { // const onSelectManager = async (value, index, item) => {
let userManagerListClone = [...userManagerList]; // let userManagerListClone = [...userManagerList];
let elementFound = userManagerListClone.find( // let elementFound = userManagerListClone.find(
element => element.id == item.id, // element => element.id == item.id,
); // );
let indexElementFound = userManagerListClone.findIndex( // let indexElementFound = userManagerListClone.findIndex(
element => element.id == item.id, // element => element.id == item.id,
); // );
userManagerListClone.splice(indexElementFound, 1, { // userManagerListClone.splice(indexElementFound, 1, {
...elementFound, // ...elementFound,
checked: value, // checked: value,
}); // });
setUserManagerList(userManagerListClone); // setUserManagerList(userManagerListClone);
setLeave(state => ({ // setLeave(state => ({
...state, // ...state,
approver_id: item.id, // approver_id: item.id,
})); // }));
if (isNextApprover) { // if (isNextApprover) {
setNextApproverId(item.id); // setNextApproverId(item.id);
} else { // } else {
setNextApproverId(''); // setNextApproverId('');
setLeave(state => ({ // setLeave(state => ({
...state, // ...state,
approver_id: item.id, // approver_id: item.id,
})); // }));
} // }
}; // };
const isDateStartAndFinishChange = () => { // const isDateStartAndFinishChange = () => {
if (leave.since <= leave.toDate) { // if (leave.since <= leave.toDate) {
let duration = calDurationLeave(leave.since, leave.toDate); // let duration = calDurationLeave(leave.since, leave.toDate);
let hour = 0; // let hour = 0;
if (leave.timeStart && leave.timeFinish) { // if (leave.timeStart && leave.timeFinish) {
const hourDiff = Moment(leave.timeFinish, 'HH:mm').diff( // const hourDiff = Moment(leave.timeFinish, 'HH:mm').diff(
Moment(leave.timeStart, 'HH:mm'), // Moment(leave.timeStart, 'HH:mm'),
'hour', // 'hour',
); // );
//console.log('hourDiff', hourDiff); // //console.log('hourDiff', hourDiff);
if (hourDiff < 9 && hourDiff > 0) { // if (hourDiff < 9 && hourDiff > 0) {
hour = 0.5; // hour = 0.5;
} else if (hourDiff >= 9) { // } else if (hourDiff >= 9) {
hour = 1; // hour = 1;
} else { // } else {
hour = 0; // hour = 0;
} // }
} // }
//console.log('hour', hour); // //console.log('hour', hour);
//console.log('duration', duration); // //console.log('duration', duration);
let total = parseFloat(duration && duration >= 0 ? duration : 0) + hour; // let total = parseFloat(duration && duration >= 0 ? duration : 0) + hour;
//console.log('total', total); // //console.log('total', total);
setDurationLeave({ // setDurationLeave({
time: total, // time: total,
stringTime: total + ' Ngày', // stringTime: total + ' Ngày',
}); // });
return true; // return true;
} // }
return false; // return false;
}; // };
const calDurationLeave = (fstDay, lstDay) => { // const calDurationLeave = (fstDay, lstDay) => {
var finish_day = new Moment(lstDay); // var finish_day = new Moment(lstDay);
var since_day = new Moment(fstDay); // var since_day = new Moment(fstDay);
var duration = Moment.duration(finish_day.diff(since_day)).asHours(); // var duration = Moment.duration(finish_day.diff(since_day)).asHours();
if (duration >= 24) { // if (duration >= 24) {
return duration / 24; // return duration / 24;
} // }
//console.log(duration); // //console.log(duration);
return duration; // return duration;
}; // };
const openGallery = () => { // const openGallery = () => {
launchImageLibrary( // launchImageLibrary(
{ // {
mediaType: 'photo', // mediaType: 'photo',
includeBase64: true, // includeBase64: true,
}, // },
response => { // response => {
if (!response.didCancel) { // if (!response.didCancel) {
//console.log('AAA'); // //console.log('AAA');
const {assets} = response; // const {assets} = response;
setPostImage(prev => [...prev, ...assets]); // setPostImage(prev => [...prev, ...assets]);
//console.log(response.assets[0].uri) // //console.log(response.assets[0].uri)
} // }
}, // },
); // );
}; // };
const onDeleteImage = index => { // const onDeleteImage = index => {
const clone = [...postImage]; // const clone = [...postImage];
clone.splice(index, 1); // clone.splice(index, 1);
setPostImage(clone); // setPostImage(clone);
}; // };
// //useEffect
// useEffect(() => {
// openCreateNewLeaveDay();
// }, []);
// useEffect(() => {
// idLeavesCategory && copyNameCategory();
// }, [idLeavesCategory]);
// useEffect(() => {
// leave && isDateStartAndFinishChange();
// }, [leave]);
//useEffect
useEffect(() => {
openCreateNewLeaveDay();
}, []);
useEffect(() => {
idLeavesCategory && copyNameCategory();
}, [idLeavesCategory]);
useEffect(() => {
leave && isDateStartAndFinishChange();
}, [leave]);
return ( return (
<Modal <Modal
animationType="slide" animationType="slide"
...@@ -367,30 +370,23 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => { ...@@ -367,30 +370,23 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
<SafeAreaView> <SafeAreaView>
<ScrollView> <ScrollView>
<View style={styles.modalView}> <View style={styles.modalView}>
<View <View style={{marginVertical: 10}}>
style={{
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<AppText style={styles.modalTitle}>Nghỉ phép mới</AppText> <AppText style={styles.modalTitle}>Nghỉ phép mới</AppText>
<TouchableOpacity onPress={() => onClose(null)}>
<Image source={IMAGES.IcClose} />
</TouchableOpacity>
</View> </View>
<View style={{flexDirection: 'row', marginTop: 10}}> <View style={{flexDirection: 'row', marginTop: 10}}>
<Image <Image
source={{ source={{
uri: 'https://meu.anawork.com' + userDetails.avatar, uri: config.imageEndPoint + userInfo.avatar,
}} }}
style={styles.ImgAvatar} style={styles.ImgAvatar}
/> />
<View style={{marginLeft: 15}}> <View style={{marginLeft: 15}}>
<AppText style={styles.modalTitle}>{`${ <AppText style={styles.modalTitle}>{`${userInfo?.first_name} ${
userDetails.first_name userInfo?.middle_name ? userInfo?.middle_name : ''
} ${userDetails.middle_name ? userDetails.middle_name : ''} ${ } ${userInfo?.last_name} - ${
userDetails.last_name userInfo?.employee_code
}`}</AppText> }`}</AppText>
<AppText>{userDetails.position}</AppText> <AppText>{userInfo?.position}</AppText>
</View> </View>
</View> </View>
<View style={{marginTop: 20}}> <View style={{marginTop: 20}}>
...@@ -400,22 +396,23 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => { ...@@ -400,22 +396,23 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
<AppText <AppText
style={{ style={{
flex: 1, flex: 1,
color: leave.id.length === 0 ? 'red' : 'grey', // color: leave?.id?.length === 0 ? 'red' : 'grey',
}}> }}>
Loại nghỉ phép Loại nghỉ phép
</AppText> </AppText>
</View> </View>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<SelectDropdown <SelectDropdown
data={nameLeaves} // data={nameLeaves}
data={['Chọn loại nghỉ phép']}
dropdownIconPosition={'right'} dropdownIconPosition={'right'}
defaultButtonText={'Chọn loại nghỉ phép'} defaultButtonText={'Chọn loại nghỉ phép'}
buttonStyle={styles.dropdown1BtnStyle} buttonStyle={styles.dropdown1BtnStyle}
onSelect={(selectedItem, index) => { onSelect={(selectedItem, index) => {
setLeave(state => ({ // setLeave(state => ({
...state, // ...state,
id: idLeavesCategory[index].id, // id: idLeavesCategory[index].id,
})); // }));
}} }}
placeholder placeholder
dropdownStyle={styles.dropdown1DropdownStyle} dropdownStyle={styles.dropdown1DropdownStyle}
...@@ -440,12 +437,12 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => { ...@@ -440,12 +437,12 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
<View style={{flex: 1}}> <View style={{flex: 1}}>
<TouchableOpacity <TouchableOpacity
onPress={() => // onPress={() =>
setOpenTimePicker(state => ({ // setOpenTimePicker(state => ({
...state, // ...state,
start: true, // start: true,
})) // }))
} // }
style={[ style={[
styles.dropdown1BtnStyle, styles.dropdown1BtnStyle,
{ {
...@@ -456,15 +453,15 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => { ...@@ -456,15 +453,15 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
paddingLeft: 16, paddingLeft: 16,
}, },
]}> ]}>
<AppText> {/* <AppText>
{Moment(leave.since).format('DD/MM/YYYY')} {Moment(leave.since).format('DD/MM/YYYY')}
</AppText> </AppText> */}
<Image <Image
source={IMAGES.IcCalendarGray} source={IMAGES.IcCalendarGray}
style={{width: 20, height: 20, marginLeft: 8}} style={{width: 20, height: 20, marginLeft: 8}}
/> />
</TouchableOpacity> </TouchableOpacity>
<DateTimePickerModal {/* <DateTimePickerModal
isVisible={openTimePicker.start} isVisible={openTimePicker.start}
mode="date" mode="date"
date={leave.since} date={leave.since}
...@@ -477,13 +474,13 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => { ...@@ -477,13 +474,13 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
start: false, start: false,
})); }));
}} }}
/> /> */}
</View> </View>
</View> </View>
<View style={styles.rowView}> <View style={styles.rowView}>
<AppText style={{flex: 1}}>Giờ</AppText> <AppText style={{flex: 1}}>Giờ</AppText>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<SelectDropdown {/* <SelectDropdown
data={rangeTimeStart} data={rangeTimeStart}
dropdownIconPosition={'right'} dropdownIconPosition={'right'}
defaultButtonText={leave.timeStart || 'Giờ'} defaultButtonText={leave.timeStart || 'Giờ'}
...@@ -503,38 +500,39 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => { ...@@ -503,38 +500,39 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
onSelect={(selectedItem, index) => onSelect={(selectedItem, index) =>
onSelectTimeStart(selectedItem, index) onSelectTimeStart(selectedItem, index)
} }
/> /> */}
</View> </View>
</View> </View>
<View style={styles.rowView}> <View style={styles.rowView}>
<AppText style={{flex: 1}}>Đến ngày</AppText> <AppText style={{flex: 1}}>Đến ngày</AppText>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<TouchableOpacity <TouchableOpacity
onPress={() => // onPress={() =>
setOpenTimePicker(state => ({ // setOpenTimePicker(state => ({
...state, // ...state,
finish: true, // finish: true,
})) // }))
} // }
style={[ // style={[
styles.dropdown1BtnStyle, // styles.dropdown1BtnStyle,
{ // {
alignItems: 'flex-end', // alignItems: 'flex-end',
flexDirection: 'row', // flexDirection: 'row',
justifyContent: 'space-between', // justifyContent: 'space-between',
paddingRight: 8, // paddingRight: 8,
paddingLeft: 16, // paddingLeft: 16,
}, // },
]}> // ]}
<AppText> >
{/* <AppText>
{Moment(leave.toDate).format('DD/MM/YYYY')} {Moment(leave.toDate).format('DD/MM/YYYY')}
</AppText> </AppText> */}
<Image <Image
source={IMAGES.IcCalendarGray} source={IMAGES.IcCalendarGray}
style={{width: 20, height: 20, marginLeft: 8}} style={{width: 20, height: 20, marginLeft: 8}}
/> />
</TouchableOpacity> </TouchableOpacity>
<DateTimePickerModal {/* <DateTimePickerModal
isVisible={openTimePicker.finish} isVisible={openTimePicker.finish}
mode="date" mode="date"
date={leave.toDate} date={leave.toDate}
...@@ -548,13 +546,13 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => { ...@@ -548,13 +546,13 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
finish: false, finish: false,
})); }));
}} }}
/> /> */}
</View> </View>
</View> </View>
<View style={styles.rowView}> <View style={styles.rowView}>
<AppText style={{flex: 1}}>Giờ</AppText> <AppText style={{flex: 1}}>Giờ</AppText>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<SelectDropdown {/* <SelectDropdown
data={rangeTimeFinish} data={rangeTimeFinish}
dropdownIconPosition={'right'} dropdownIconPosition={'right'}
defaultButtonText={leave.timeFinish || 'Giờ'} defaultButtonText={leave.timeFinish || 'Giờ'}
...@@ -574,7 +572,7 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => { ...@@ -574,7 +572,7 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
onSelect={(selectedItem, index) => onSelect={(selectedItem, index) =>
onSelectTimeFinish(selectedItem, index) onSelectTimeFinish(selectedItem, index)
} }
/> /> */}
</View> </View>
</View> </View>
<View style={styles.rowView}> <View style={styles.rowView}>
...@@ -583,16 +581,16 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => { ...@@ -583,16 +581,16 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
flex: 1, flex: 1,
}}>{`Thời gian nghỉ (*)`}</AppText> }}>{`Thời gian nghỉ (*)`}</AppText>
<View style={styles.takeTimeStyle}> <View style={styles.takeTimeStyle}>
<AppText style={{paddingLeft: 18}}> {/* <AppText style={{paddingLeft: 18}}>
{durationLeave.stringTime} {durationLeave.stringTime}
</AppText> </AppText> */}
</View> </View>
</View> </View>
<View style={styles.rowView}> <View style={styles.rowView}>
<AppText <AppText
style={{ style={{
flex: 1, flex: 1,
color: leave.reason.length === 0 ? 'red' : 'grey', // color: leave.reason.length === 0 ? 'red' : 'grey',
}}>{`Lý do(*)`}</AppText> }}>{`Lý do(*)`}</AppText>
<View <View
style={{ style={{
...@@ -600,7 +598,7 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => { ...@@ -600,7 +598,7 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
borderBottomWidth: 0.2, borderBottomWidth: 0.2,
borderColor: '#444', borderColor: '#444',
}}> }}>
<TextInput {/* <TextInput
style={styles.inputText} style={styles.inputText}
value={leave.reason} value={leave.reason}
placeholder="Nhập lý do tại đây" placeholder="Nhập lý do tại đây"
...@@ -610,7 +608,7 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => { ...@@ -610,7 +608,7 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
reason: text, reason: text,
})); }));
}} }}
/> /> */}
</View> </View>
</View> </View>
<View style={{...styles.rowView, flexWrap: 'wrap'}}> <View style={{...styles.rowView, flexWrap: 'wrap'}}>
...@@ -618,39 +616,39 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => { ...@@ -618,39 +616,39 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
text={'Nghỉ việc riêng'} text={'Nghỉ việc riêng'}
textStyle={{fontSize: 12}} textStyle={{fontSize: 12}}
style={{borderRadius: 10, padding: 5, borderWidth: 0.5}} style={{borderRadius: 10, padding: 5, borderWidth: 0.5}}
onPress={() => // onPress={() =>
setLeave(state => ({ // setLeave(state => ({
...state, // ...state,
reason: 'Nghỉ việc riêng', // reason: 'Nghỉ việc riêng',
})) // }))
} // }
/> />
<ButtonComponent <ButtonComponent
text={'Nghỉ khám bệnh'} text={'Nghỉ khám bệnh'}
textStyle={{fontSize: 12}} textStyle={{fontSize: 12}}
style={{borderRadius: 10, padding: 5, borderWidth: 0.5}} style={{borderRadius: 10, padding: 5, borderWidth: 0.5}}
onPress={() => // onPress={() =>
setLeave(state => ({ // setLeave(state => ({
...state, // ...state,
reason: 'Nghỉ khám bệnh', // reason: 'Nghỉ khám bệnh',
})) // }))
} // }
/> />
<ButtonComponent <ButtonComponent
text={'Nghỉ việc không lương'} text={'Nghỉ việc không lương'}
textStyle={{fontSize: 12}} textStyle={{fontSize: 12}}
style={{borderRadius: 10, padding: 5, borderWidth: 0.5}} style={{borderRadius: 10, padding: 5, borderWidth: 0.5}}
onPress={() => // onPress={() =>
setLeave(state => ({ // setLeave(state => ({
...state, // ...state,
reason: 'Nghỉ việc không lương', // reason: 'Nghỉ việc không lương',
})) // }))
} // }
/> />
</View> </View>
<View style={styles.rowView}> <View style={styles.rowView}>
<AppText style={{flex: 1}}>Tệp đính kèm</AppText> <AppText style={{flex: 1}}>Tệp đính kèm</AppText>
<View {/* <View
style={{ style={{
flex: 2, flex: 2,
flexDirection: 'row', flexDirection: 'row',
...@@ -683,7 +681,7 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => { ...@@ -683,7 +681,7 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
iconSource={IMAGES.IcAddMoreImg} iconSource={IMAGES.IcAddMoreImg}
/> />
)} )}
</View> </View> */}
</View> </View>
<View style={{marginTop: 20}}> <View style={{marginTop: 20}}>
<AppText <AppText
...@@ -695,7 +693,7 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => { ...@@ -695,7 +693,7 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
]}> ]}>
Người duyệt Người duyệt
</AppText> </AppText>
{userManagerList.map((item, index) => ( {/* {userManagerList.map((item, index) => (
<View <View
key={index} key={index}
style={{ style={{
...@@ -737,7 +735,7 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => { ...@@ -737,7 +735,7 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
/> />
</View> </View>
</View> </View>
))} ))} */}
</View> </View>
</View> </View>
<View <View
...@@ -751,26 +749,14 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => { ...@@ -751,26 +749,14 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
style={styles.btnCancel}> style={styles.btnCancel}>
<AppText style={styles.blueTxt}>Hủy</AppText> <AppText style={styles.blueTxt}>Hủy</AppText>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity {/* <TouchableOpacity
style={styles.btnSubmit} style={styles.btnSubmit}
onPress={onSubmitLeave}> onPress={onSubmitLeave}>
<AppText style={styles.whiteTxt}>Gửi yêu cầu</AppText> <AppText style={styles.whiteTxt}>Gửi yêu cầu</AppText>
</TouchableOpacity> </TouchableOpacity> */}
</View> </View>
</View> </View>
</ScrollView> </ScrollView>
<Alert
show={showAlert.isError}
showProgress={false}
title={showAlert.title}
message={showAlert.message}
closeOnTouchOutside={true}
closeOnHardwareBackPress={false}
showConfirmButton={true}
confirmText="Đóng"
confirmButtonColor="#DD6B55"
onConfirmPressed={onHideAlert}
/>
</SafeAreaView> </SafeAreaView>
</Modal> </Modal>
); );
...@@ -794,8 +780,8 @@ const styles = StyleSheet.create({ ...@@ -794,8 +780,8 @@ const styles = StyleSheet.create({
modalView: { modalView: {
backgroundColor: 'white', backgroundColor: 'white',
borderRadius: 20, borderRadius: 20,
padding: 16, paddingHorizontal: 10,
shadowColor: '#000', shadowColor: colors.black1,
shadowOffset: { shadowOffset: {
width: 0, width: 0,
height: 2, height: 2,
...@@ -803,7 +789,7 @@ const styles = StyleSheet.create({ ...@@ -803,7 +789,7 @@ const styles = StyleSheet.create({
shadowOpacity: 0.25, shadowOpacity: 0.25,
shadowRadius: 4, shadowRadius: 4,
elevation: 5, elevation: 5,
marginTop: 20, marginTop: 80,
height: windowHeight, height: windowHeight,
}, },
...@@ -901,11 +887,6 @@ const styles = StyleSheet.create({ ...@@ -901,11 +887,6 @@ const styles = StyleSheet.create({
borderRadius: 4, borderRadius: 4,
}, },
btnCancel: {
paddingHorizontal: 8,
paddingVertical: 12,
},
takeTimeStyle: { takeTimeStyle: {
flex: 1, flex: 1,
flexDirection: 'row', flexDirection: 'row',
...@@ -924,4 +905,4 @@ const styles = StyleSheet.create({ ...@@ -924,4 +905,4 @@ const styles = StyleSheet.create({
}, },
}); });
export default OnLeaveModalAddNew; export default RequestLeavesDays;
src/values/colors.js
View file @ 165dde72
const colors = { const colors = {
black: '#464646', black: '#464646',
black1: '#000000', black1: '#000000',
light_black: '#524e4e', light_black: '#524e4e',
primary_blue: '#2430E7', primary_blue: '#2430E7',
purple_blue: '#5d78ff', purple_blue: '#5d78ff',
secondary_blue: '#007FE8', secondary_blue: '#007FE8',
tertiary_blue: '#005DCE', tertiary_blue: '#005DCE',
primary_green: '#56FFB0', primary_green: '#56FFB0',
bottom_green: '#25E7DB', bottom_green: '#25E7DB',
secondary_green: '#00DAB8', secondary_green: '#00DAB8',
tertiary_green: '#00CFAE', tertiary_green: '#00CFAE',
input_green: '#02B19A', input_green: '#02B19A',
appTheme: ['#fffaf7', '#fffaf7', '#fffaf7'], appTheme: ['#fffaf7', '#fffaf7', '#fffaf7'],
subTheme: ['rgb(31, 162, 255)', 'rgb(18, 216, 250)'], subTheme: ['rgb(31, 162, 255)', 'rgb(18, 216, 250)'],
textInput: '#e5e5e5', textInput: '#e5e5e5',
placeholder: 'rgb(227, 236, 239)', placeholder: 'rgb(227, 236, 239)',
adminHeaderBackground: '#005B3C', adminHeaderBackground: '#005B3C',
red: '#FF6868', red: '#FF6868',
orange: '#FF8300', orange: '#FF8300',
green: '#00d816', green: '#00d816',
green0a: '#0abb87', green0a: '#0abb87',
greenE0: '#e0f7f0', greenE0: '#e0f7f0',
lightGray: '#E5E5E5', lightGray: '#E5E5E5',
grey: '#CACACA', grey: '#CACACA',
royal_blue: '#057DCD', royal_blue: '#057DCD',
grayC4: '#C4C4C4', grayC4: '#C4C4C4',
white: '#fff', white: '#fff',
blue1: '#edf8fe', blue1: '#edf8fe',
blue5c: "#5c65dc", blue5c: '#5c65dc',
gray59: '#595959', gray59: '#595959',
grayE9: "#e9eaf9" grayE9: '#e9eaf9',
textColor: '#202121',
} };
export default colors export default colors;
\ No newline at end of file
yarn.lock
View file @ 165dde72
This source diff could not be displayed because it is too large. You can view the blob instead.
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