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 homeSelector = state => state.home;
export const onLeaveSelector = state => state.onLeave;
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 authReducer from '../screens/authentication/authSlice';
import loaderReducer from './loaderSlice';
import homeReducer from '../screens/home/homeSlice';
import onLeaveReducer from '../screens/onleave/onLeaveSlice';
import confirmDateReducer from '../screens/confirm_date/confirmDateSlice';
const rootReducer = {
loader: loaderReducer,
auth: authReducer,
home: homeReducer,
onLeave: onLeaveReducer,
confirmDate: confirmDateReducer,
};
const store = configureStore({
......
src/components/AppText/index.js
View file @ 165dde72
/* eslint-disable prettier/prettier */
import React from 'react';
import {Text} from 'react-native-paper';
import {fonts} from '../../assets/fonts/fonts';
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 = {
fontFamily: FONT_FAMILY,
fontSize: isSubText ? 12 : 14,
color: color ?? colors.textColor,
};
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(() => {
<TouchableOpacity
onPress={navigateHome}
style={{flex: 1, alignItems: 'center'}}>
<Image source={{uri: logo}} style={styles.iconLogo} />
{logo && <Image source={{uri: logo}} style={styles.iconLogo} />}
</TouchableOpacity>
</ImageBackground>
</SafeAreaView>
......
src/navigation/AppNavigation.js
View file @ 165dde72
......@@ -14,6 +14,7 @@ import ConfirmedShiftDetail from '../screens/shift/shift-tabs/ConfirmedShiftScre
import {APP_NAVIGATE_SCREEN} from '../utils/constant';
import BottomTabs from './BottomTabNavigation';
import RootNavigation from './RootNavigation';
import HomeScreen from '../screens/home';
const {
INTRO,
......@@ -26,6 +27,7 @@ const {
FORGOT_PASS,
CONFIRM_SHIFT_DETAIL,
SALARY,
HOME,
} = APP_NAVIGATE_SCREEN;
const AppScreen = {
[SPLASH]: SplashContainer,
......@@ -39,6 +41,7 @@ const AppScreen = {
[CONFIRM_SHIFT_DETAIL]: ConfirmedShiftDetail,
[SALARY]: SalaryScreen,
[INTRO]: IntroScreen,
[HOME]: HomeScreen,
};
const Stack = createNativeStackNavigator();
......
src/navigation/BottomTabNavigation.js
View file @ 165dde72
......@@ -7,9 +7,11 @@ import HeaderComponent from '../components/header/HeaderComponent';
import NotificationScreen from '../screens/notification/NotificationContainer';
import ProfileScreen from '../screens/profile/ProfileContainer';
import {APP_NAVIGATE_SCREEN} from '../utils/constant';
import {IconDrawer} from '../values/images';
import {IconDrawer, IMAGES} from '../values/images';
import DayWageNavigation from './DayWageTopTabNavigation';
import TopTabNavigation from './TopTabNavigation';
import config from '../config';
import HomeScreen from '../screens/home';
const {HOME, SHIFT, PROFILE, DAY_WAGE, Notification} = APP_NAVIGATE_SCREEN;
......@@ -23,7 +25,7 @@ const AppScreen = {
const AppIcon = {
[HOME]: IconDrawer.IcOverview,
[Notification]: IconDrawer.IcNotificationColor,
[DAY_WAGE]: IconDrawer.IcDataSheet,
//[DAY_WAGE]: IconDrawer.IcDataSheet,
//[SHIFT]: IconDrawer.IcDataSheet,
[PROFILE]: IconDrawer.IcLeave,
};
......@@ -31,7 +33,8 @@ const AppIcon = {
const Tab = createBottomTabNavigator();
export default function BottomNavigation() {
const userDetails = useSelector(authSelector);
const authSelect = useSelector(authSelector);
const {userInfo} = authSelect;
return (
<Tab.Navigator screenOptions={{scrollEnabled: true}}>
{Object.keys(AppScreen).map((item, index) => (
......@@ -40,15 +43,18 @@ export default function BottomNavigation() {
name={item}
component={AppScreen[item]}
options={{
header: props => <HeaderComponent {...props} />,
header: props => <HeaderComponent />,
tabBarActiveTintColor: '#3947e9', // tab text color
tabBarLabelPosition: 'below-icon',
tabBarShowLabel: true,
tabBarIcon: ({focused, size}) =>
index === 3 ? (
index === 2 ? (
<Image
source={{uri: 'https://meu.anawork.com' + userDetails.avatar}}
source={
userInfo?.avatar
? {uri: config.imageEndPoint + userInfo?.avatar}
: IMAGES.IcAvatarDefault
}
style={{
width: 30,
height: 30,
......
src/navigation/TopTabNavigation.js
View file @ 165dde72
/* eslint-disable prettier/prettier */
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import * as React from 'react';
import HomeScreen from '../screens/home';
import OnLeave from '../screens/onleave';
import ConfirmDateScreen from '../screens/confirm_date';
import {APP_NAVIGATE_SCREEN} from '../utils/constant';
import {fonts} from '../assets/fonts/fonts';
const {ON_LEAVE, OVERTIME, MAIN, CONFIRM_DATE} = APP_NAVIGATE_SCREEN;
......@@ -12,13 +13,13 @@ const AppScreen = {
[MAIN]: HomeScreen,
[ON_LEAVE]: OnLeave,
// [OVERTIME]: Overtime,
// [CONFIRM_DATE]: ConfirmDate,
[CONFIRM_DATE]: ConfirmDateScreen,
};
const Tab = createMaterialTopTabNavigator();
export default function TopTabNavigation() {
return (
<Tab.Navigator screenOptions={{scrollEnabled: true}}>
<Tab.Navigator screenOptions={{swipeEnabled: false}}>
{Object.keys(AppScreen).map((item, index) => (
<Tab.Screen
key={index}
......@@ -26,14 +27,12 @@ export default function TopTabNavigation() {
component={AppScreen[item]}
options={{
tabBarActiveTintColor: '#3947e9', // tab text color
scrollEnabled: true,
scrollEnabled: false,
upperCaseLabel: false,
tabBarLabelStyle: {
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 ApiClient from '../axios';
import axiosClient from '../axios';
export default {
requestGetLeavesDay: ({filter, sort, page, pageSize}) =>
ApiClient.get(
axiosClient.get(
`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 Utils from '../utils';
import config from '../config';
......
src/screens/confirm_date/ConfirmDateContainer.js
View file @ 165dde72
import Moment from 'moment';
import React, {useEffect, useState} from 'react';
import {useDispatch, useSelector} from 'react-redux';
import {useDispatch} from 'react-redux';
import RootNavigation from '../../navigation/RootNavigation';
import {
getAbsentChart,
getApproveConfirmDay,
getUserConfirmDay,
} from '../../store/actions/UserAction';
import {getAbsentChart} from '../../store/actions/UserAction';
import {APP_NAVIGATE_SCREEN} from '../../utils/constant';
import ConfirmModalAddNew from './confirm-modals/ConfirmModalAddNew';
import ConfirmModalDetails from './confirm-modals/ConfirmModalDetails';
import ConfirmDateScreen from './ConfirmDateScreen';
import {getConfirmApprovedDate, getUserConfirmDay} from './confirmDateSlice';
import ConfirmDateMainView from './template/ConfirmMainView';
const ConfirmDateContainer = props => {
const {confirmDateList, confirmApprovedDateList, userInfo} = props;
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 [confirmList, setConfirmList] = useState([]);
const [totalArr, setTotalArr] = useState({
......@@ -61,7 +55,7 @@ const ConfirmDateContainer = props => {
<ConfirmModalDetails
onClose={onCloseModal}
alertMessage={alertMessage}
userDetails={userDetails}
userDetails={userInfo}
detailItem={detailItem}
setApproveReqPayload={setApproveReqPayload}
/>,
......@@ -71,7 +65,7 @@ const ConfirmDateContainer = props => {
const onOpenAddModal = () => {
setModalContent(
<ConfirmModalAddNew
userDetails={userDetails}
userDetails={userInfo}
onClose={onCloseModal}
alertMessage={alertMessage}
/>,
......@@ -111,12 +105,12 @@ const ConfirmDateContainer = props => {
const loadDataRequestApprove = async () => {
const res = await dispatch(
getApproveConfirmDay(
approveReqPayload.filter,
approveReqPayload.sorts,
approveReqPayload.page,
approveReqPayload.pageSize,
),
getConfirmApprovedDate({
filter: approveReqPayload.filter,
sort: approveReqPayload.sorts,
page: approveReqPayload.page,
pageSize: approveReqPayload.pageSize,
}),
);
if (res.success) {
//console.log(res);
......@@ -278,10 +272,10 @@ const ConfirmDateContainer = props => {
};
const formatDataConfirmListFromApi = () => {
if (userConfirmPayload.isRefresh) {
setConfirmList(confirmDay);
setConfirmList(confirmDateList);
return;
}
let merge = [...confirmList, ...confirmDay];
let merge = [...confirmList, ...confirmDateList];
//console.log(merge);
let format = merge.filter(
(
......@@ -295,10 +289,10 @@ const ConfirmDateContainer = props => {
};
const formatDataApproveConfirmListFromApi = () => {
if (approveReqPayload.isRefresh) {
setRequestApproveArr(approveConfirmList);
setRequestApproveArr(confirmApprovedDateList);
return;
}
let merge = [...requestApproveArr, ...approveConfirmList];
let merge = [...requestApproveArr, ...confirmApprovedDateList];
let format = merge.filter(
(
......@@ -359,12 +353,10 @@ const ConfirmDateContainer = props => {
return `${Hours}:${minutes} giờ`;
};
// useEffect
{
/*load init data*/
}
useEffect(() => {
confirmDay && formatDataConfirmListFromApi();
}, [confirmDay]);
confirmDateList && formatDataConfirmListFromApi();
}, [confirmDateList]);
useEffect(() => {
dataChart.month && fetchDataChart(dataChart.month);
......@@ -375,9 +367,9 @@ const ConfirmDateContainer = props => {
// }, [dataChart.data]);
useEffect(() => {
approveConfirmList &&
formatDataApproveConfirmListFromApi(approveConfirmList);
}, [approveConfirmList]);
confirmApprovedDateList &&
formatDataApproveConfirmListFromApi(confirmApprovedDateList);
}, [confirmApprovedDateList]);
useEffect(() => {
approveReqPayload && loadDataRequestApprove();
......@@ -390,8 +382,7 @@ const ConfirmDateContainer = props => {
}, [requestApproveArr, confirmList, totalArr]);
const confirmProps = {
approveConfirmList,
userDetails,
userInfo,
showAlert,
requestApproveArr,
confirmList,
......@@ -414,7 +405,7 @@ const ConfirmDateContainer = props => {
onChangeMonthFilter,
minutesToHours,
};
return <ConfirmDateScreen {...confirmProps} />;
return <ConfirmDateMainView {...confirmProps} />;
};
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 {useSelector} from 'react-redux';
import {authSelector} from '../../app/selectors';
import {authSelector, confirmDateSelector} from '../../app/selectors';
import ConfirmDateContainer from './ConfirmDateContainer';
export default function ConfirmDateScreen() {
const userDetails = useSelector(authSelector);
const {isLogin, userLoginInfo} = userDetails;
const homeScreenProps = {
isLogin,
userLoginInfo,
const authSelect = useSelector(authSelector);
const confirmDateSelect = useSelector(confirmDateSelector);
const {userInfo} = authSelect;
const {confirmDateList, confirmApprovedDateList} = confirmDateSelect;
const confirmScreenProps = {
userInfo,
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 React from 'react';
import {
......@@ -9,15 +8,16 @@ import {
View,
} from 'react-native';
import Alert from 'react-native-awesome-alerts';
import ButtonComponent from '../../components/ButtonComponent';
import {GifType, IMAGES} from '../../values/images';
import styles from './style';
import ButtonComponent from '../../../components/ButtonComponent';
import {GifType, IMAGES} from '../../../values/images';
import styles from '../style';
import FastImage from 'react-native-fast-image';
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,
isDisableLoadMore,
userDetails,
......@@ -33,7 +33,7 @@ const ConfirmDateScreen = ({
onRefreshConfirmList,
modalContent,
onOpenDetailModal,
onOpenAddModal,
onOpenRequestLeavesModal,
approveReqPayload,
onChangeSelectFilter,
onChangeMonthFilter,
......@@ -63,305 +63,7 @@ const ConfirmDateScreen = ({
return (
<SafeAreaView>
<ScrollView nestedScrollEnabled={true}>
<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={{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>
<StatisticsConfirmWorkdays />
<View style={styles.view}>
<AppText style={{fontWeight: '500', marginBottom: 10}}>
Xác nhận ngày công của bạn:{' '}
......@@ -369,7 +71,7 @@ const ConfirmDateScreen = ({
<View style={{alignItems: 'center', justifyContent: 'center'}}>
<ButtonComponent
style={styles.btnConfirm}
onPress={onOpenAddModal}
onPress={onOpenRequestLeavesModal}
leftIcon={IMAGES.IcBtnAdd}
styleIcon={styles.iconPlus}
text={'XÁC NHẬN NGÀY CÔNG'}
......@@ -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({
BgBirthday: {
width: windowWidth - 20,
height: 80,
resizeMode: 'cover',
},
view: {
width: windowWidth - 10,
......
src/screens/home/template/HomeMainView.js
View file @ 165dde72
import React from 'react';
import {SafeAreaView, ScrollView, View} from 'react-native';
import ButtonComponent from '../../../components/ButtonComponent';
import {IMAGES} from '../../../values/images';
import styles from '../style';
import WishListComponent from '../components/WishListComponent';
import BirthdayModal from '../modals/BirthdayModals';
import CalendarBirthday from './subViews/CalendarBirthday';
import Quotation from './subViews/QuotationList';
import BirthdayModal from '../modals/BirthdayModals';
const HomeMainView = ({
userInfo,
openView,
......@@ -33,7 +31,7 @@ const HomeMainView = ({
nestedScrollEnabled={true}
showsVerticalScrollIndicator={false}>
<View>
<View
{/* <View
style={{
position: 'absolute',
top: 10,
......@@ -59,7 +57,7 @@ const HomeMainView = ({
onPress={chooseSettingView}
/>
)}
</View>
</View> */}
<Quotation quotation={randomQuotation} />
</View>
{/*Calendar*/}
......
src/screens/onleave/OnLeaveContainer.js
View file @ 165dde72
/* eslint-disable prettier/prettier */
/* eslint-disable react-hooks/exhaustive-deps */
import Moment from 'moment';
import React, {useEffect, useState} from 'react';
import {useDispatch} from 'react-redux';
......@@ -9,33 +10,45 @@ import {
} from '../../store/actions/UserAction';
import {APP_NAVIGATE_SCREEN} from '../../utils/constant';
import OnLeaveModalAddNew from './modals/OnLeaveModalAddNew';
import OnLeaveModalAddNew from './template/subViews/RequestLeavesDays';
import OnLeaveModalDetail from './modals/OnLeaveModalDetails';
import {getUserLeavesDay} from './onLeaveSlice';
import {
getUserLeavesDay,
getApproveRequestLeavesDays,
getUserRestDay,
} from './onLeaveSlice';
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 {usersLeavesDayList, userRestDayList, userDetails} = props;
const {
usersLeavesDayList,
userRestDayList,
userInfo,
approveRequestLeavesDaysList,
} = props;
const dispatch = useDispatch();
// const userLeaveDaysPending = useSelector(
// state => state.UserLeavesPending.userLeavesPending,
// );
const [dataChart, setDataChart] = useState();
const initPayloadApprove = {
type: 'Tất cả',
filter: '',
sort: '',
page: 1,
pageSize: 5,
isRefresh: false,
};
// get api with payload
const [payloadApproveLeaves, setPayloadApproveLeaves] =
const [payloadApproveRequestLeavesDays, setPayloadApproveRequestLeavesDays] =
useState(initPayloadApprove);
const [payloadLeaves, setPayloadLeaves] = useState(initPayloadApprove);
const [leaveList, setLeaveList] = useState([]);
const [leaveRequestList, setLeaveRequestList] = useState([]);
const [leaveApproveReqList, setLeaveApproveReqList] = useState([]);
const [showAlert, setShowAlert] = useState({
......@@ -54,6 +67,7 @@ const OnLeaveContainer = props => {
});
const [modalContent, setModalContent] = useState(null);
const [leavesDaysModal, setLeavesDaysModal] = useState(null);
// open the modal
const onOpenDetailModal = detailItem => {
......@@ -61,27 +75,21 @@ const OnLeaveContainer = props => {
<OnLeaveModalDetail
onClose={onCloseModal}
alertMessage={alertMessage}
userDetails={userDetails}
userInfo={userInfo}
detailItem={detailItem}
setPayloadApproveLeaves={setPayloadApproveLeaves}
setPayloadApproveLeaves={setPayloadApproveRequestLeavesDays}
/>,
);
};
const onOpenAddModal = () => {
setModalContent(
<OnLeaveModalAddNew
userDetails={userDetails}
onClose={onCloseModal}
alertMessage={alertMessage}
/>,
);
const onOpenRequestLeavesModal = () => {
setLeavesDaysModal(true);
};
const onCloseModal = () => {
setModalContent(null);
setLeavesDaysModal(null);
};
const loadDataChart = () => {
const formatDataChart = () => {
// console.log('userRestDays', userRestDays);
if (userRestDayList.length > 0) {
let arrDataChart = [];
......@@ -127,9 +135,9 @@ const OnLeaveContainer = props => {
}));
};
const onLoadMoreLeavesApproveReqTicket = () => {
setPayloadApproveLeaves(prev => ({
setPayloadApproveRequestLeavesDays(prev => ({
...prev,
page: payloadApproveLeaves.page + 1,
page: payloadApproveRequestLeavesDays.page + 1,
isRefresh: false,
}));
};
......@@ -157,8 +165,8 @@ const OnLeaveContainer = props => {
approveReqBtn: false,
}));
} else if (
leaveList.length > 0 &&
leaveList.length == totalArr.totalLeaveList
leaveRequestList.length > 0 &&
leaveRequestList.length == totalArr.totalLeaveList
) {
//.log('checkVisibleLoadMore');
setDisableLoadMore(prev => ({
......@@ -166,8 +174,8 @@ const OnLeaveContainer = props => {
leaveBtn: true,
}));
} else if (
leaveList.length > 0 &&
leaveList.length < totalArr.totalLeaveList
leaveRequestList.length > 0 &&
leaveRequestList.length < totalArr.totalLeaveList
) {
//.log('checkVisibleLoadMore');
setDisableLoadMore(prev => ({
......@@ -199,29 +207,6 @@ const OnLeaveContainer = props => {
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
const onRefreshLeaveList = () => {
setPayloadLeaves({
......@@ -237,7 +222,7 @@ const OnLeaveContainer = props => {
}));
};
const onRefreshLeaveApproveReqList = () => {
setPayloadApproveLeaves({
setPayloadApproveRequestLeavesDays({
filter: '',
sort: '',
page: 1,
......@@ -251,8 +236,8 @@ const OnLeaveContainer = props => {
};
const onChangeSelectFilter = selectedItem => {
if (selectedItem == 'Tất cả') {
setPayloadApproveLeaves({
if (selectedItem === 'Tất cả') {
setPayloadApproveRequestLeavesDays({
type: 'Tất cả',
filter: '',
sort: '',
......@@ -260,8 +245,8 @@ const OnLeaveContainer = props => {
pageSize: 5,
isRefresh: true,
});
} else if (selectedItem == 'Chưa duyệt') {
setPayloadApproveLeaves({
} else if (selectedItem === 'Chưa duyệt') {
setPayloadApproveRequestLeavesDays({
type: 'Chưa duyệt',
filter: 'extend_approved_status_name==PENDING',
sort: 'created_at',
......@@ -269,8 +254,8 @@ const OnLeaveContainer = props => {
pageSize: 5,
isRefresh: true,
});
} else if (selectedItem == 'Đã từ chối') {
setPayloadApproveLeaves({
} else if (selectedItem === 'Đã từ chối') {
setPayloadApproveRequestLeavesDays({
type: 'Đã từ chối',
filter: 'extend_approved_status_name==REJECTED',
sort: 'created_at',
......@@ -279,7 +264,7 @@ const OnLeaveContainer = props => {
isRefresh: true,
});
} else {
setPayloadApproveLeaves({
setPayloadApproveRequestLeavesDays({
type: 'Đã duyệt',
filter: 'extend_approved_status_name==APPROVED',
sort: 'created_at',
......@@ -291,10 +276,10 @@ const OnLeaveContainer = props => {
};
const formatLeaveLstFromApi = () => {
if (payloadLeaves.isRefresh) {
setLeaveList(usersLeavesDayList);
setLeaveRequestList(usersLeavesDayList);
return;
}
let merge = [...usersLeavesDayList, ...leaveList];
let merge = [...usersLeavesDayList, ...leaveRequestList];
let format = merge.filter(
(
......@@ -303,26 +288,8 @@ const OnLeaveContainer = props => {
)(new Set()),
);
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) => {
//console.log(start, finish);
......@@ -339,6 +306,7 @@ const OnLeaveContainer = props => {
}
};
// fetch data
const fetchLeavesTicket = () => {
dispatch(
getUserLeavesDay({
......@@ -349,38 +317,55 @@ const OnLeaveContainer = props => {
}),
);
};
const fetchRestDay = () => {
const fetchApproveRequestLeavesDays = () => {
dispatch(
getUserLeaveDayApproveReq(
payloadApproveLeaves.filter,
payloadApproveLeaves.sort,
payloadApproveLeaves.page,
payloadApproveLeaves.pageSize,
),
getApproveRequestLeavesDays({
filter: payloadApproveRequestLeavesDays.filter,
sort: payloadApproveRequestLeavesDays.sort,
page: payloadApproveRequestLeavesDays.page,
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(() => {
usersLeavesDayList && formatLeaveLstFromApi();
}, [usersLeavesDayList]);
// useEffect(() => {
// userLeaveDaysPending && formatLeaveApproveLstFromApi();
// }, [userLeaveDaysPending]);
useEffect(() => {
usersLeavesDayList && userRestDayList && loadDataChart();
}, [usersLeavesDayList, userRestDayList]);
fetchLeavesRestDays();
}, []);
useEffect(() => {
userRestDayList && formatDataChart();
}, [userRestDayList]);
useEffect(() => {
payloadLeaves && fetchLeavesTicket();
}, [payloadLeaves]);
useEffect(() => {
payloadApproveLeaves && fetchRestDay();
}, [payloadApproveLeaves]);
payloadApproveRequestLeavesDays && fetchApproveRequestLeavesDays();
}, [payloadApproveRequestLeavesDays]);
useEffect(() => {
checkVisibleLoadMore();
}, [leaveList, leaveApproveReqList, totalArr]);
}, [leaveRequestList, leaveApproveReqList, totalArr]);
useEffect(() => {
if (props?.route?.params) {
......@@ -394,15 +379,17 @@ const OnLeaveContainer = props => {
// props
const leaveProps = {
usersLeavesDayList,
userDetails,
userInfo,
dataChart,
showAlert,
totalArr,
isDisableLoadMore,
leaveList,
leaveRequestList,
leaveApproveReqList,
modalContent,
payloadApproveLeaves,
payloadApproveRequestLeavesDays,
approveRequestLeavesDaysList,
leavesDaysModal,
onLoadMoreLeavesApproveReqTicket,
onRefreshLeaveList,
onRefreshLeaveApproveReqList,
......@@ -412,12 +399,12 @@ const OnLeaveContainer = props => {
onHideAlert,
onLoadMoreLeavesTicket,
onOpenDetailModal,
onOpenAddModal,
onOpenRequestLeavesModal,
onCloseModal,
onChangeSelectFilter,
minutesToHours,
};
return <OnLeaveMainView {...leaveProps} />;
return <OnLeaveMainView {...onLeavePropsProvider(leaveProps)} />;
};
export default OnLeaveContainer;
src/screens/onleave/index.js
View file @ 165dde72
/* eslint-disable prettier/prettier */
import React from 'react';
import {useSelector} from 'react-redux';
......@@ -6,13 +5,19 @@ import {authSelector, onLeaveSelector} from '../../app/selectors';
import OnLeaveContainer from './onLeaveContainer';
export default function OnLeaveScreen() {
const userDetails = useSelector(authSelector);
const authSelect = useSelector(authSelector);
const onLeaveSelect = useSelector(onLeaveSelector);
const {usersLeavesDayList = [], userRestDayList = []} = onLeaveSelect;
const {
usersLeavesDayList = [],
userRestDayList = [],
approveRequestLeavesDaysList = [],
} = onLeaveSelect;
const {userInfo} = authSelect;
const onLeaveScreenProps = {
userDetails,
userInfo,
usersLeavesDayList,
userRestDayList,
approveRequestLeavesDaysList,
};
return <OnLeaveContainer {...onLeaveScreenProps} />;
}
src/screens/onleave/onLeavePropsProvider.js
View file @ 165dde72
/* eslint-disable prettier/prettier */
export default function homePropsProvider(props) {
export default function onLeavePropsProvider(props) {
const {
userDetails,
navigateToConfirmDate,
navigateToOverTime,
usersLeavesDayList,
userInfo,
dataChart,
alertMessage,
showAlert,
onHideAlert,
totalArr,
isDisableLoadMore,
onLoadMoreLeavesTicket,
leaveList,
leaveRequestList,
leaveApproveReqList,
onRefreshLeaveList,
modalContent,
payloadApproveRequestLeavesDays,
approveRequestLeavesDaysList,
onLoadMoreLeavesApproveReqTicket,
onRefreshLeaveList,
onRefreshLeaveApproveReqList,
modalContent,
navigateToConfirmDate,
navigateToOverTime,
alertMessage,
onHideAlert,
onLoadMoreLeavesTicket,
onOpenDetailModal,
onOpenAddModal,
payloadApproveLeaves,
onOpenRequestLeavesModal,
onCloseModal,
onChangeSelectFilter,
minutesToHours,
leavesDaysModal,
} = props;
return {
userDetails,
navigateToConfirmDate,
navigateToOverTime,
leavesDaysModal,
usersLeavesDayList,
userInfo,
dataChart,
alertMessage,
showAlert,
onHideAlert,
totalArr,
isDisableLoadMore,
onLoadMoreLeavesTicket,
leaveList,
leaveRequestList,
leaveApproveReqList,
onRefreshLeaveList,
modalContent,
payloadApproveRequestLeavesDays,
approveRequestLeavesDaysList,
onLoadMoreLeavesApproveReqTicket,
onRefreshLeaveList,
onRefreshLeaveApproveReqList,
modalContent,
navigateToConfirmDate,
navigateToOverTime,
alertMessage,
onHideAlert,
onLoadMoreLeavesTicket,
onOpenDetailModal,
onOpenAddModal,
payloadApproveLeaves,
onOpenRequestLeavesModal,
onCloseModal,
onChangeSelectFilter,
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 serviceRequest from '../../app/serviceRequest';
......@@ -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({
name: 'onLeave',
......@@ -46,7 +58,6 @@ const onLeaveSlice = createSlice({
extraReducers: builder => {
builder.addCase(getUserLeavesDay.fulfilled, (state, action) => {
const {success} = Utils.getValues(action, 'payload', false);
console.log('getUserLeavesDay', action);
if (success) {
state.usersLeavesDayList = Utils.getValues(
action,
......@@ -57,7 +68,6 @@ const onLeaveSlice = createSlice({
});
builder.addCase(getUserRestDay.fulfilled, (state, action) => {
const {success} = Utils.getValues(action, 'payload', false);
console.log('getUserRestDay', action);
if (success) {
state.userRestDayList = Utils.getValues(
action,
......@@ -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({
color: '#5d78ff',
},
item: {
padding: 20,
marginVertical: 2,
marginHorizontal: 16,
padding: 10,
marginVertical: 5,
marginHorizontal: 5,
borderWidth: 1,
borderBottomColor: '#f2f2f2',
borderTopColor: '#f2f2f2',
......@@ -115,6 +115,7 @@ const styles = StyleSheet.create({
borderRadius: 8,
borderLeftWidth: 3,
flexDirection: 'row',
alignItems: 'center',
},
title: {
fontWeight: '500',
......@@ -193,6 +194,7 @@ const styles = StyleSheet.create({
width: 130,
fontSize: 12,
borderColor: '#444',
color: 'red',
},
dropdown1BtnTxtStyle: {color: '#000', fontSize: 14, textAlign: 'center'},
rowView: {
......@@ -343,10 +345,6 @@ const styles = StyleSheet.create({
backgroundColor: '#5d78ff',
borderRadius: 4,
},
btnCancel: {
paddingHorizontal: 8,
paddingVertical: 12,
},
btnReject: {
flexDirection: 'row',
paddingHorizontal: 8,
......@@ -374,27 +372,32 @@ const styles = StyleSheet.create({
borderBottomWidth: 0.2,
height: 24,
},
dropdown1DropdownStyle: {backgroundColor: '#EFEFEF'},
dropdown1RowStyle: {
backgroundColor: '#EFEFEF',
height: 38,
borderRadius: 4,
approveRequestTitle: {
fontWeight: 'bold',
marginVertical: 10,
fontSize: 16,
},
dropdown1RowTxtStyle: {color: '#444', textAlign: 'left', fontSize: 14},
dropdownSelectTimeText: {color: '#444', textAlign: 'left', fontSize: 14},
dropdown1BtnStyle: {
backgroundColor: '#FFF',
borderWidth: 0.5,
borderRadius: 8,
height: 35,
width: 130,
fontSize: 12,
borderColor: '#444',
userAvatarRequest: {
width: 30,
height: 30,
alignSelf: 'center',
marginRight: 10,
},
dropdown1BtnTxtStyle: {color: '#000', fontSize: 14, textAlign: 'center'},
rowView: {
approveRequestFilter: {
flexDirection: 'row',
alignItems: 'center',
marginVertical: 5,
},
leaveRequestEmptyView: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
marginTop: 10,
padding: 20,
},
myLeavesTitleView: {
flexDirection: 'row',
marginBottom: 10,
justifyContent: 'space-between',
alignItems: 'center',
},
......
src/screens/onleave/template/OnLeaveMainView.js
View file @ 165dde72
/* eslint-disable prettier/prettier */
import Moment from 'moment';
import React from 'react';
import {
......@@ -8,330 +7,337 @@ import {
TouchableOpacity,
View,
} from 'react-native';
import Alert from 'react-native-awesome-alerts';
import FastImage from 'react-native-fast-image';
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 SelectDropdownComponent from '../../../components/Select';
import config from '../../../config';
import {GifType, IMAGES} from '../../../values/images';
import styles from '../style';
import AppText from '../../../components/AppText';
const OnLeaveMainView = ({
userDetails,
navigateToConfirmDate,
navigateToOverTime,
dataChart,
alertMessage,
showAlert,
onHideAlert,
isDisableLoadMore,
onLoadMoreLeavesTicket,
leaveList,
leaveApproveReqList,
onRefreshLeaveList,
onLoadMoreLeavesApproveReqTicket,
onRefreshLeaveApproveReqList,
modalContent,
onOpenDetailModal,
onOpenAddModal,
payloadApproveLeaves,
onChangeSelectFilter,
minutesToHours,
}) => {
const sliceColorRight = ['#6dc9ee', '#d9f4ff'];
//console.log('dataChart', dataChart);
return (
<SafeAreaView>
<ScrollView nestedScrollEnabled={true}>
<View style={styles.pieChartContainer}>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
<View style={{flexDirection: 'row'}}>
{dataChart &&
dataChart?.length &&
dataChart.map((item, index) => {
return (
<View key={index} style={styles.pieChartView}>
<View style={styles.pieItem}>
<View style={{marginBottom: 10}}>
<AppText style={{textAlign: 'center', fontSize: 12}}>
{item.name}
</AppText>
import RequestLeavesDays from './subViews/RequestLeavesDays';
const sliceColorRight = ['#6dc9ee', '#d9f4ff'];
const selectDataDropDown = [
{label: 'Tất cả', value: 'Tất cả'},
{label: 'Chưa duyệt', value: 'Chưa duyệt'},
{label: 'Đã duyệt', value: 'Đã duyệt'},
{label: 'Đã từ chối', value: 'Đã từ chối'},
];
const DataChartLeavesRestDays = React.memo(
({dataChart}) => {
return (
<View style={styles.pieChartContainer}>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
<View style={{flexDirection: 'row'}}>
{dataChart &&
dataChart?.length &&
dataChart.map((item, index) => {
return (
<View key={index} style={styles.pieChartView}>
<View style={styles.pieItem}>
<View style={{marginBottom: 10}}>
<AppText style={{textAlign: 'center', fontSize: 12}}>
{item.name}
</AppText>
</View>
<View
style={{
alignItems: 'center',
justifyContent: 'center',
}}>
<PieChart
doughnut={true}
widthAndHeight={100}
series={[
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
style={{
alignItems: 'center',
justifyContent: 'center',
}}>
<PieChart
doughnut={true}
widthAndHeight={100}
series={[
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 style={[styles.viewTextPie, {marginTop: 20}]}>
<View
style={[
styles.bgLeftViewTextPie,
{backgroundColor: '#6dc9ee', marginRight: 5},
]}></View>
<AppText>Phép đã nghỉ</AppText>
</View>
<View>
<View style={[styles.viewTextPie, {marginTop: 20}]}>
<View
style={[
styles.bgLeftViewTextPie,
{backgroundColor: '#6dc9ee', marginRight: 5},
]}></View>
<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 style={[styles.viewTextPie]}>
<View
style={[
styles.bgLeftViewTextPie,
{backgroundColor: '#d9f4ff', marginRight: 10},
]}></View>
<AppText>Phép còn lại</AppText>
</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}}>
Liên kết nhanh:{' '}
</ScrollView>
</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>
<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
style={{
alignItems: 'flex-end',
flex: 1,
}}>
<SelectDropdownComponent
selectData={selectDataDropDown}
setValue={onChangeSelectFilter}
/>
</View>
</View>
{/* Approve leave request */}
{leaveApproveReqList && (
<View style={styles.view}>
<View style={{flexDirection: 'row', marginBottom: 10}}>
<AppText
style={{
fontWeight: 'bold',
marginBottom: 10,
fontSize: 16,
flex: 2,
textAlign: 'left',
flex: 2,
}}>
Duyệt yêu cầu nghỉ phép{' '}
</AppText>
<View style={{alignItems: 'flex-end', flex: 1, paddingRight: 20}}>
<SelectDropdown
data={['Tất cả', 'Chưa duyệt', 'Đã duyệt', 'Đã từ chối']}
dropdownIconPosition={'right'}
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
{approveRequestLeavesDaysList.length > 0 &&
approveRequestLeavesDaysList[0].approver_id === userInfo.id &&
approveRequestLeavesDaysList.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={
item.extend_creator_avatar
? {
uri:
config.imageEndPoint + item.extend_creator_avatar,
}
style={{width: 20, height: 20}}
/>
);
}}
: IMAGES.IcAvatarDefault
}
style={styles.userAvatarRequest}
/>
</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}}>
<View>
<View>
<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>{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>
</TouchableOpacity>
))}
{leaveList && leaveList.length > 0 && !isDisableLoadMore.leaveBtn && (
</View>
<View style={{flex: 1}}>
<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
text={'Tải lại'}
textStyle={{color: '#5d78ff'}}
style={{
justifyContent: 'center',
alignItems: 'center',
padding: 10,
flexDirection: 'row',
}}
text={'Xem thêm'}
textStyle={{color: '#5d78ff'}}
onPress={onLoadMoreLeavesTicket}
onPress={onRefreshLeaveList}
leftIcon={IMAGES.IcRefresh}
styleIcon={{width: 20, height: 20}}
/>
)}
</View>
</View>
{modalContent}
{/* Modal detail leave request */}
<Alert
show={showAlert.isError}
showProgress={false}
title={showAlert.title}
message={showAlert.message}
closeOnTouchOutside={true}
closeOnHardwareBackPress={false}
showConfirmButton={true}
confirmText="Đóng"
confirmButtonColor="#DD6B55"
onConfirmPressed={onHideAlert}
{leaveRequestList.length === 0 && (
<View style={styles.leaveRequestEmptyView}>
<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>
)}
{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>
{leavesDaysModal && (
<RequestLeavesDays userInfo={userInfo} onClose={onCloseModal} />
)}
</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';
import SelectDropdown from 'react-native-select-dropdown';
import Toast from 'react-native-toast-message';
import {useDispatch, useSelector} from 'react-redux';
import AppText from '../../../components/AppText';
import ButtonComponent from '../../../components/ButtonComponent';
import AppText from '../../../../components/AppText';
import ButtonComponent from '../../../../components/ButtonComponent';
import {
getRangeTimeFinish,
getRangeTimeStart,
postUserLeave,
} from '../../../store/actions/UserAction';
import colors from '../../../values/colors';
import {IMAGES} from '../../../values/images';
const OnLeaveModalAddNew = ({userDetails, onClose}) => {
const dispatch = useDispatch();
const userDirectManagersList = useSelector(
state => state.MyDirectManagers.myDirectManagers,
);
const idLeavesCategory = useSelector(
state => state.UserLeavesPending.leaveCategories,
);
} from '../../../../store/actions/UserAction';
import colors from '../../../../values/colors';
import {IMAGES} from '../../../../values/images';
import config from '../../../../config';
const RequestLeavesDays = ({userInfo, onClose}) => {
// const dispatch = useDispatch();
// const userDirectManagersList = useSelector(
// state => state.MyDirectManagers.myDirectManagers,
// );
// const idLeavesCategory = useSelector(
// state => state.UserLeavesPending.leaveCategories,
// );
// init state
const initStateLeave = {
id: '',
since: new Date(),
timeStart: '8:30',
dateStart: '',
toDate: new Date(),
timeFinish: '17:30',
dateFinish: '',
reason: '',
taken_hours: 0,
approved_date: new Date(),
approver_id: '',
};
// state
const [leave, setLeave] = useState(initStateLeave);
const [userManagerList, setUserManagerList] = useState([]);
const [rangeTimeStart, setRangeTimeStart] = useState([]);
const [rangeTimeFinish, setRangeTimeFinish] = useState([]);
const [durationLeave, setDurationLeave] = useState({
time: 0,
stringTime: '',
});
const [openTimePicker, setOpenTimePicker] = useState({
start: false,
finish: false,
});
const [nameLeaves, setNameLeaves] = useState([]);
const [postImage, setPostImage] = useState([]);
const [isNextApprover, setIsNextApprover] = useState(false);
const [nextApproverId, setNextApproverId] = useState('');
const [showAlert, setShowAlert] = useState({
isShow: false,
title: '',
message: '',
});
// main function
const alertMessage = message => {
setShowAlert({
isError: true,
title: 'Thông báo',
message: `${message} 👍`,
});
};
const onHideAlert = () => {
setShowAlert({
isError: false,
title: '',
message: '',
});
};
const openCreateNewLeaveDay = async () => {
const objectClone = JSON.parse(JSON.stringify(userDirectManagersList));
let obj = [];
objectClone.forEach(element => {
element.checked = false;
obj.push(element);
});
setUserManagerList(obj);
getRangeTimeLeave();
};
const getRangeTimeLeave = async () => {
const responseRangeStart = await dispatch(
getRangeTimeStart(
Moment(leave.since).format('YYYY-MM-DD'),
userDetails.id,
),
);
let tempArrRangeTimeStart = JSON.parse(JSON.stringify(responseRangeStart));
let arrStart = [];
tempArrRangeTimeStart.forEach(item => {
const timeConverse = parseInt(item.slice(0, 2)) + 7;
const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
const time = hours + item.substring(2);
arrStart.push(time);
});
if (arrStart.length > 0) {
setRangeTimeStart(arrStart);
}
// // init state
// const initStateLeave = {
// id: '',
// since: new Date(),
// timeStart: '8:30',
// dateStart: '',
// toDate: new Date(),
// timeFinish: '17:30',
// dateFinish: '',
// reason: '',
// taken_hours: 0,
// approved_date: new Date(),
// approver_id: '',
// };
// // state
// const [leave, setLeave] = useState(initStateLeave);
// const [userManagerList, setUserManagerList] = useState([]);
// const [rangeTimeStart, setRangeTimeStart] = useState([]);
// const [rangeTimeFinish, setRangeTimeFinish] = useState([]);
// const [durationLeave, setDurationLeave] = useState({
// time: 0,
// stringTime: '',
// });
// const [openTimePicker, setOpenTimePicker] = useState({
// start: false,
// finish: false,
// });
// const [nameLeaves, setNameLeaves] = useState([]);
// const [postImage, setPostImage] = useState([]);
// const [isNextApprover, setIsNextApprover] = useState(false);
// const [nextApproverId, setNextApproverId] = useState('');
// const [showAlert, setShowAlert] = useState({
// isShow: false,
// title: '',
// message: '',
// });
// // main function
// const alertMessage = message => {
// setShowAlert({
// isError: true,
// title: 'Thông báo',
// message: `${message} 👍`,
// });
// };
// const onHideAlert = () => {
// setShowAlert({
// isError: false,
// title: '',
// message: '',
// });
// };
// const openCreateNewLeaveDay = async () => {
// const objectClone = JSON.parse(JSON.stringify(userDirectManagersList));
// let obj = [];
// objectClone.forEach(element => {
// element.checked = false;
// obj.push(element);
// });
// setUserManagerList(obj);
// getRangeTimeLeave();
// };
// const getRangeTimeLeave = async () => {
// const responseRangeStart = await dispatch(
// getRangeTimeStart(
// Moment(leave.since).format('YYYY-MM-DD'),
// userDetails.id,
// ),
// );
// let tempArrRangeTimeStart = JSON.parse(JSON.stringify(responseRangeStart));
// let arrStart = [];
// tempArrRangeTimeStart.forEach(item => {
// const timeConverse = parseInt(item.slice(0, 2)) + 7;
// const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
// const time = hours + item.substring(2);
// arrStart.push(time);
// });
// if (arrStart.length > 0) {
// setRangeTimeStart(arrStart);
// }
//finish time
const responseRangeFinish = await dispatch(
getRangeTimeFinish(
Moment(leave.toDate).format('YYYY-MM-DD'),
userDetails.id,
),
);
let tempArrRangeTime = JSON.parse(JSON.stringify(responseRangeFinish));
let arrFinish = [];
tempArrRangeTime.forEach(item => {
const timeConverse = parseInt(item.slice(0, 2)) + 7;
const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
const time = hours + item.substring(2);
arrFinish.push(time);
});
if (arrFinish.length > 0) setRangeTimeFinish(arrFinish);
};
const onSelectDateStart = async time => {
const responseRangeStart = await dispatch(
getRangeTimeStart(Moment(time).format('YYYY-MM-DD'), userDetails.id),
);
let tempArrRangeTime = JSON.parse(JSON.stringify(responseRangeStart));
let arrStart = [];
tempArrRangeTime.forEach(item => {
const timeConverse = parseInt(item.slice(0, 2)) + 7;
const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
const time = hours + item.substring(2);
arrStart.push(time);
});
// //finish time
// const responseRangeFinish = await dispatch(
// getRangeTimeFinish(
// Moment(leave.toDate).format('YYYY-MM-DD'),
// userDetails.id,
// ),
// );
// let tempArrRangeTime = JSON.parse(JSON.stringify(responseRangeFinish));
// let arrFinish = [];
// tempArrRangeTime.forEach(item => {
// const timeConverse = parseInt(item.slice(0, 2)) + 7;
// const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
// const time = hours + item.substring(2);
// arrFinish.push(time);
// });
// if (arrFinish.length > 0) setRangeTimeFinish(arrFinish);
// };
// const onSelectDateStart = async time => {
// const responseRangeStart = await dispatch(
// getRangeTimeStart(Moment(time).format('YYYY-MM-DD'), userDetails.id),
// );
// let tempArrRangeTime = JSON.parse(JSON.stringify(responseRangeStart));
// let arrStart = [];
// tempArrRangeTime.forEach(item => {
// const timeConverse = parseInt(item.slice(0, 2)) + 7;
// const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
// const time = hours + item.substring(2);
// arrStart.push(time);
// });
if (arrStart.length > 0) {
setRangeTimeStart(arrStart);
}
setOpenTimePicker(state => ({
...state,
start: false,
}));
setLeave(state => ({
...state,
since: time,
}));
};
const onSelectDateFinish = async time => {
const responseRangeFinish = await dispatch(
getRangeTimeFinish(Moment(time).format('YYYY-MM-DD'), userDetails.id),
);
let tempArrRangeTime = JSON.parse(JSON.stringify(responseRangeFinish));
let arrFinish = [];
tempArrRangeTime.forEach(item => {
const timeConverse = parseInt(item.slice(0, 2)) + 7;
const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
const time = hours + item.substring(2);
arrFinish.push(time);
});
if (arrFinish.length > 0) setRangeTimeFinish(arrFinish);
// if (arrStart.length > 0) {
// setRangeTimeStart(arrStart);
// }
// setOpenTimePicker(state => ({
// ...state,
// start: false,
// }));
// setLeave(state => ({
// ...state,
// since: time,
// }));
// };
// const onSelectDateFinish = async time => {
// const responseRangeFinish = await dispatch(
// getRangeTimeFinish(Moment(time).format('YYYY-MM-DD'), userDetails.id),
// );
// let tempArrRangeTime = JSON.parse(JSON.stringify(responseRangeFinish));
// let arrFinish = [];
// tempArrRangeTime.forEach(item => {
// const timeConverse = parseInt(item.slice(0, 2)) + 7;
// const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
// const time = hours + item.substring(2);
// arrFinish.push(time);
// });
// if (arrFinish.length > 0) setRangeTimeFinish(arrFinish);
setOpenTimePicker(state => ({
...state,
finish: false,
}));
setLeave(state => ({
...state,
toDate: time,
}));
};
const onSubmitLeave = async () => {
if (!leave.id) {
alertMessage('Vui lòng chọn loại ngày nghỉ!');
return;
}
if (!leave.since) {
alertMessage('Vui lòng chọn ngày bắt đầu!');
return;
}
if (!leave.timeStart) {
alertMessage('Vui lòng chọn giờ bắt đầu!');
return;
}
if (!leave.toDate) {
alertMessage('Vui lòng chọn ngày kết thúc!');
return;
}
if (!leave.timeFinish) {
alertMessage('Vui lòng chọn giờ kết thúc!');
return;
}
if (!leave.reason) {
alertMessage('Vui lòng nhập lý do !');
return;
}
if (!leave.approver_id) {
alertMessage('Vui lòng chọn người duyệt!');
return;
}
const isValid = isDateStartAndFinishChange();
if (isValid) {
//console.log('isValid', isValid);
const res = await dispatch(
postUserLeave(userDetails.id, leave, postImage, durationLeave.time),
);
//console.log('res', res);
if (res) {
Toast.show({
type: 'success',
text1: `Hệ thống`,
text2: `Yêu cầu nghỉ phép thành công`,
style: {zIndex: 1001},
visibilityTime: 2000,
});
refreshAfterSubmit();
} else {
alertMessage('Bạn đã hết ngày nghỉ phép');
}
return;
}
alertMessage('Vui lòng nhập ngày bắt đầu nhỏ hơn ngày kết thúc');
};
const refreshAfterSubmit = () => {
onClose(null);
setLeave(initStateLeave);
};
const copyNameCategory = () => {
idLeavesCategory.map((item, index) => {
setNameLeaves(prevState => [...prevState, item.name]);
return;
});
};
// setOpenTimePicker(state => ({
// ...state,
// finish: false,
// }));
// setLeave(state => ({
// ...state,
// toDate: time,
// }));
// };
// const onSubmitLeave = async () => {
// if (!leave.id) {
// alertMessage('Vui lòng chọn loại ngày nghỉ!');
// return;
// }
// if (!leave.since) {
// alertMessage('Vui lòng chọn ngày bắt đầu!');
// return;
// }
// if (!leave.timeStart) {
// alertMessage('Vui lòng chọn giờ bắt đầu!');
// return;
// }
// if (!leave.toDate) {
// alertMessage('Vui lòng chọn ngày kết thúc!');
// return;
// }
// if (!leave.timeFinish) {
// alertMessage('Vui lòng chọn giờ kết thúc!');
// return;
// }
// if (!leave.reason) {
// alertMessage('Vui lòng nhập lý do !');
// return;
// }
// if (!leave.approver_id) {
// alertMessage('Vui lòng chọn người duyệt!');
// return;
// }
// const isValid = isDateStartAndFinishChange();
// if (isValid) {
// //console.log('isValid', isValid);
// const res = await dispatch(
// postUserLeave(userDetails.id, leave, postImage, durationLeave.time),
// );
// //console.log('res', res);
// if (res) {
// Toast.show({
// type: 'success',
// text1: `Hệ thống`,
// text2: `Yêu cầu nghỉ phép thành công`,
// style: {zIndex: 1001},
// visibilityTime: 2000,
// });
// refreshAfterSubmit();
// } else {
// alertMessage('Bạn đã hết ngày nghỉ phép');
// }
// return;
// }
// alertMessage('Vui lòng nhập ngày bắt đầu nhỏ hơn ngày kết thúc');
// };
// const refreshAfterSubmit = () => {
// onClose(null);
// setLeave(initStateLeave);
// };
// const copyNameCategory = () => {
// idLeavesCategory.map((item, index) => {
// setNameLeaves(prevState => [...prevState, item.name]);
// return;
// });
// };
const onSelectTimeStart = (selectedItem, indexItem) => {
console.log('selectedItem', selectedItem);
setLeave(state => ({
...state,
timeStart: selectedItem,
}));
};
const onSelectTimeFinish = (selectedItem, indexItem) => {
setLeave(state => ({
...state,
timeFinish: selectedItem,
}));
};
const onSelectManager = async (value, index, item) => {
let userManagerListClone = [...userManagerList];
let elementFound = userManagerListClone.find(
element => element.id == item.id,
);
let indexElementFound = userManagerListClone.findIndex(
element => element.id == item.id,
);
userManagerListClone.splice(indexElementFound, 1, {
...elementFound,
checked: value,
});
setUserManagerList(userManagerListClone);
setLeave(state => ({
...state,
approver_id: item.id,
}));
// const onSelectTimeStart = (selectedItem, indexItem) => {
// console.log('selectedItem', selectedItem);
// setLeave(state => ({
// ...state,
// timeStart: selectedItem,
// }));
// };
// const onSelectTimeFinish = (selectedItem, indexItem) => {
// setLeave(state => ({
// ...state,
// timeFinish: selectedItem,
// }));
// };
// const onSelectManager = async (value, index, item) => {
// let userManagerListClone = [...userManagerList];
// let elementFound = userManagerListClone.find(
// element => element.id == item.id,
// );
// let indexElementFound = userManagerListClone.findIndex(
// element => element.id == item.id,
// );
// userManagerListClone.splice(indexElementFound, 1, {
// ...elementFound,
// checked: value,
// });
// setUserManagerList(userManagerListClone);
// setLeave(state => ({
// ...state,
// approver_id: item.id,
// }));
if (isNextApprover) {
setNextApproverId(item.id);
} else {
setNextApproverId('');
setLeave(state => ({
...state,
approver_id: item.id,
}));
}
};
const isDateStartAndFinishChange = () => {
if (leave.since <= leave.toDate) {
let duration = calDurationLeave(leave.since, leave.toDate);
let hour = 0;
if (leave.timeStart && leave.timeFinish) {
const hourDiff = Moment(leave.timeFinish, 'HH:mm').diff(
Moment(leave.timeStart, 'HH:mm'),
'hour',
);
//console.log('hourDiff', hourDiff);
if (hourDiff < 9 && hourDiff > 0) {
hour = 0.5;
} else if (hourDiff >= 9) {
hour = 1;
} else {
hour = 0;
}
}
//console.log('hour', hour);
//console.log('duration', duration);
let total = parseFloat(duration && duration >= 0 ? duration : 0) + hour;
//console.log('total', total);
setDurationLeave({
time: total,
stringTime: total + ' Ngày',
});
return true;
}
return false;
};
const calDurationLeave = (fstDay, lstDay) => {
var finish_day = new Moment(lstDay);
var since_day = new Moment(fstDay);
var duration = Moment.duration(finish_day.diff(since_day)).asHours();
if (duration >= 24) {
return duration / 24;
}
// if (isNextApprover) {
// setNextApproverId(item.id);
// } else {
// setNextApproverId('');
// setLeave(state => ({
// ...state,
// approver_id: item.id,
// }));
// }
// };
// const isDateStartAndFinishChange = () => {
// if (leave.since <= leave.toDate) {
// let duration = calDurationLeave(leave.since, leave.toDate);
// let hour = 0;
// if (leave.timeStart && leave.timeFinish) {
// const hourDiff = Moment(leave.timeFinish, 'HH:mm').diff(
// Moment(leave.timeStart, 'HH:mm'),
// 'hour',
// );
// //console.log('hourDiff', hourDiff);
// if (hourDiff < 9 && hourDiff > 0) {
// hour = 0.5;
// } else if (hourDiff >= 9) {
// hour = 1;
// } else {
// hour = 0;
// }
// }
// //console.log('hour', hour);
// //console.log('duration', duration);
// let total = parseFloat(duration && duration >= 0 ? duration : 0) + hour;
// //console.log('total', total);
// setDurationLeave({
// time: total,
// stringTime: total + ' Ngày',
// });
// return true;
// }
// return false;
// };
// const calDurationLeave = (fstDay, lstDay) => {
// var finish_day = new Moment(lstDay);
// var since_day = new Moment(fstDay);
// var duration = Moment.duration(finish_day.diff(since_day)).asHours();
// if (duration >= 24) {
// return duration / 24;
// }
//console.log(duration);
return duration;
};
const openGallery = () => {
launchImageLibrary(
{
mediaType: 'photo',
includeBase64: true,
},
response => {
if (!response.didCancel) {
//console.log('AAA');
const {assets} = response;
setPostImage(prev => [...prev, ...assets]);
//console.log(response.assets[0].uri)
}
},
);
};
const onDeleteImage = index => {
const clone = [...postImage];
clone.splice(index, 1);
setPostImage(clone);
};
// //console.log(duration);
// return duration;
// };
// const openGallery = () => {
// launchImageLibrary(
// {
// mediaType: 'photo',
// includeBase64: true,
// },
// response => {
// if (!response.didCancel) {
// //console.log('AAA');
// const {assets} = response;
// setPostImage(prev => [...prev, ...assets]);
// //console.log(response.assets[0].uri)
// }
// },
// );
// };
// const onDeleteImage = index => {
// const clone = [...postImage];
// clone.splice(index, 1);
// 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 (
<Modal
animationType="slide"
......@@ -367,30 +370,23 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
<SafeAreaView>
<ScrollView>
<View style={styles.modalView}>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<View style={{marginVertical: 10}}>
<AppText style={styles.modalTitle}>Nghỉ phép mới</AppText>
<TouchableOpacity onPress={() => onClose(null)}>
<Image source={IMAGES.IcClose} />
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<Image
source={{
uri: 'https://meu.anawork.com' + userDetails.avatar,
uri: config.imageEndPoint + userInfo.avatar,
}}
style={styles.ImgAvatar}
/>
<View style={{marginLeft: 15}}>
<AppText style={styles.modalTitle}>{`${
userDetails.first_name
} ${userDetails.middle_name ? userDetails.middle_name : ''} ${
userDetails.last_name
<AppText style={styles.modalTitle}>{`${userInfo?.first_name} ${
userInfo?.middle_name ? userInfo?.middle_name : ''
} ${userInfo?.last_name} - ${
userInfo?.employee_code
}`}</AppText>
<AppText>{userDetails.position}</AppText>
<AppText>{userInfo?.position}</AppText>
</View>
</View>
<View style={{marginTop: 20}}>
......@@ -400,22 +396,23 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
<AppText
style={{
flex: 1,
color: leave.id.length === 0 ? 'red' : 'grey',
// color: leave?.id?.length === 0 ? 'red' : 'grey',
}}>
Loại nghỉ phép
</AppText>
</View>
<View style={{flex: 1}}>
<SelectDropdown
data={nameLeaves}
// data={nameLeaves}
data={['Chọn loại nghỉ phép']}
dropdownIconPosition={'right'}
defaultButtonText={'Chọn loại nghỉ phép'}
buttonStyle={styles.dropdown1BtnStyle}
onSelect={(selectedItem, index) => {
setLeave(state => ({
...state,
id: idLeavesCategory[index].id,
}));
// setLeave(state => ({
// ...state,
// id: idLeavesCategory[index].id,
// }));
}}
placeholder
dropdownStyle={styles.dropdown1DropdownStyle}
......@@ -440,12 +437,12 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
<View style={{flex: 1}}>
<TouchableOpacity
onPress={() =>
setOpenTimePicker(state => ({
...state,
start: true,
}))
}
// onPress={() =>
// setOpenTimePicker(state => ({
// ...state,
// start: true,
// }))
// }
style={[
styles.dropdown1BtnStyle,
{
......@@ -456,15 +453,15 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
paddingLeft: 16,
},
]}>
<AppText>
{/* <AppText>
{Moment(leave.since).format('DD/MM/YYYY')}
</AppText>
</AppText> */}
<Image
source={IMAGES.IcCalendarGray}
style={{width: 20, height: 20, marginLeft: 8}}
/>
</TouchableOpacity>
<DateTimePickerModal
{/* <DateTimePickerModal
isVisible={openTimePicker.start}
mode="date"
date={leave.since}
......@@ -477,13 +474,13 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
start: false,
}));
}}
/>
/> */}
</View>
</View>
<View style={styles.rowView}>
<AppText style={{flex: 1}}>Giờ</AppText>
<View style={{flex: 1}}>
<SelectDropdown
{/* <SelectDropdown
data={rangeTimeStart}
dropdownIconPosition={'right'}
defaultButtonText={leave.timeStart || 'Giờ'}
......@@ -503,38 +500,39 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
onSelect={(selectedItem, index) =>
onSelectTimeStart(selectedItem, index)
}
/>
/> */}
</View>
</View>
<View style={styles.rowView}>
<AppText style={{flex: 1}}>Đến ngày</AppText>
<View style={{flex: 1}}>
<TouchableOpacity
onPress={() =>
setOpenTimePicker(state => ({
...state,
finish: true,
}))
}
style={[
styles.dropdown1BtnStyle,
{
alignItems: 'flex-end',
flexDirection: 'row',
justifyContent: 'space-between',
paddingRight: 8,
paddingLeft: 16,
},
]}>
<AppText>
// onPress={() =>
// setOpenTimePicker(state => ({
// ...state,
// finish: true,
// }))
// }
// style={[
// styles.dropdown1BtnStyle,
// {
// alignItems: 'flex-end',
// flexDirection: 'row',
// justifyContent: 'space-between',
// paddingRight: 8,
// paddingLeft: 16,
// },
// ]}
>
{/* <AppText>
{Moment(leave.toDate).format('DD/MM/YYYY')}
</AppText>
</AppText> */}
<Image
source={IMAGES.IcCalendarGray}
style={{width: 20, height: 20, marginLeft: 8}}
/>
</TouchableOpacity>
<DateTimePickerModal
{/* <DateTimePickerModal
isVisible={openTimePicker.finish}
mode="date"
date={leave.toDate}
......@@ -548,13 +546,13 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
finish: false,
}));
}}
/>
/> */}
</View>
</View>
<View style={styles.rowView}>
<AppText style={{flex: 1}}>Giờ</AppText>
<View style={{flex: 1}}>
<SelectDropdown
{/* <SelectDropdown
data={rangeTimeFinish}
dropdownIconPosition={'right'}
defaultButtonText={leave.timeFinish || 'Giờ'}
......@@ -574,7 +572,7 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
onSelect={(selectedItem, index) =>
onSelectTimeFinish(selectedItem, index)
}
/>
/> */}
</View>
</View>
<View style={styles.rowView}>
......@@ -583,16 +581,16 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
flex: 1,
}}>{`Thời gian nghỉ (*)`}</AppText>
<View style={styles.takeTimeStyle}>
<AppText style={{paddingLeft: 18}}>
{/* <AppText style={{paddingLeft: 18}}>
{durationLeave.stringTime}
</AppText>
</AppText> */}
</View>
</View>
<View style={styles.rowView}>
<AppText
style={{
flex: 1,
color: leave.reason.length === 0 ? 'red' : 'grey',
// color: leave.reason.length === 0 ? 'red' : 'grey',
}}>{`Lý do(*)`}</AppText>
<View
style={{
......@@ -600,7 +598,7 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
borderBottomWidth: 0.2,
borderColor: '#444',
}}>
<TextInput
{/* <TextInput
style={styles.inputText}
value={leave.reason}
placeholder="Nhập lý do tại đây"
......@@ -610,7 +608,7 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
reason: text,
}));
}}
/>
/> */}
</View>
</View>
<View style={{...styles.rowView, flexWrap: 'wrap'}}>
......@@ -618,39 +616,39 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
text={'Nghỉ việc riêng'}
textStyle={{fontSize: 12}}
style={{borderRadius: 10, padding: 5, borderWidth: 0.5}}
onPress={() =>
setLeave(state => ({
...state,
reason: 'Nghỉ việc riêng',
}))
}
// onPress={() =>
// setLeave(state => ({
// ...state,
// reason: 'Nghỉ việc riêng',
// }))
// }
/>
<ButtonComponent
text={'Nghỉ khám bệnh'}
textStyle={{fontSize: 12}}
style={{borderRadius: 10, padding: 5, borderWidth: 0.5}}
onPress={() =>
setLeave(state => ({
...state,
reason: 'Nghỉ khám bệnh',
}))
}
// onPress={() =>
// setLeave(state => ({
// ...state,
// reason: 'Nghỉ khám bệnh',
// }))
// }
/>
<ButtonComponent
text={'Nghỉ việc không lương'}
textStyle={{fontSize: 12}}
style={{borderRadius: 10, padding: 5, borderWidth: 0.5}}
onPress={() =>
setLeave(state => ({
...state,
reason: 'Nghỉ việc không lương',
}))
}
// onPress={() =>
// setLeave(state => ({
// ...state,
// reason: 'Nghỉ việc không lương',
// }))
// }
/>
</View>
<View style={styles.rowView}>
<AppText style={{flex: 1}}>Tệp đính kèm</AppText>
<View
{/* <View
style={{
flex: 2,
flexDirection: 'row',
......@@ -683,7 +681,7 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
iconSource={IMAGES.IcAddMoreImg}
/>
)}
</View>
</View> */}
</View>
<View style={{marginTop: 20}}>
<AppText
......@@ -695,7 +693,7 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
]}>
Người duyệt
</AppText>
{userManagerList.map((item, index) => (
{/* {userManagerList.map((item, index) => (
<View
key={index}
style={{
......@@ -737,7 +735,7 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
/>
</View>
</View>
))}
))} */}
</View>
</View>
<View
......@@ -751,26 +749,14 @@ const OnLeaveModalAddNew = ({userDetails, onClose}) => {
style={styles.btnCancel}>
<AppText style={styles.blueTxt}>Hủy</AppText>
</TouchableOpacity>
<TouchableOpacity
{/* <TouchableOpacity
style={styles.btnSubmit}
onPress={onSubmitLeave}>
<AppText style={styles.whiteTxt}>Gửi yêu cầu</AppText>
</TouchableOpacity>
</TouchableOpacity> */}
</View>
</View>
</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>
</Modal>
);
......@@ -794,8 +780,8 @@ const styles = StyleSheet.create({
modalView: {
backgroundColor: 'white',
borderRadius: 20,
padding: 16,
shadowColor: '#000',
paddingHorizontal: 10,
shadowColor: colors.black1,
shadowOffset: {
width: 0,
height: 2,
......@@ -803,7 +789,7 @@ const styles = StyleSheet.create({
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
marginTop: 20,
marginTop: 80,
height: windowHeight,
},
......@@ -901,11 +887,6 @@ const styles = StyleSheet.create({
borderRadius: 4,
},
btnCancel: {
paddingHorizontal: 8,
paddingVertical: 12,
},
takeTimeStyle: {
flex: 1,
flexDirection: 'row',
......@@ -924,4 +905,4 @@ const styles = StyleSheet.create({
},
});
export default OnLeaveModalAddNew;
export default RequestLeavesDays;
src/values/colors.js
View file @ 165dde72
const colors = {
black: '#464646',
black1: '#000000',
light_black: '#524e4e',
primary_blue: '#2430E7',
purple_blue: '#5d78ff',
secondary_blue: '#007FE8',
tertiary_blue: '#005DCE',
primary_green: '#56FFB0',
bottom_green: '#25E7DB',
secondary_green: '#00DAB8',
tertiary_green: '#00CFAE',
input_green: '#02B19A',
appTheme: ['#fffaf7', '#fffaf7', '#fffaf7'],
subTheme: ['rgb(31, 162, 255)', 'rgb(18, 216, 250)'],
textInput: '#e5e5e5',
placeholder: 'rgb(227, 236, 239)',
adminHeaderBackground: '#005B3C',
red: '#FF6868',
orange: '#FF8300',
green: '#00d816',
green0a: '#0abb87',
greenE0: '#e0f7f0',
lightGray: '#E5E5E5',
grey: '#CACACA',
royal_blue: '#057DCD',
grayC4: '#C4C4C4',
white: '#fff',
blue1: '#edf8fe',
blue5c: "#5c65dc",
gray59: '#595959',
grayE9: "#e9eaf9"
}
export default colors
\ No newline at end of file
black: '#464646',
black1: '#000000',
light_black: '#524e4e',
primary_blue: '#2430E7',
purple_blue: '#5d78ff',
secondary_blue: '#007FE8',
tertiary_blue: '#005DCE',
primary_green: '#56FFB0',
bottom_green: '#25E7DB',
secondary_green: '#00DAB8',
tertiary_green: '#00CFAE',
input_green: '#02B19A',
appTheme: ['#fffaf7', '#fffaf7', '#fffaf7'],
subTheme: ['rgb(31, 162, 255)', 'rgb(18, 216, 250)'],
textInput: '#e5e5e5',
placeholder: 'rgb(227, 236, 239)',
adminHeaderBackground: '#005B3C',
red: '#FF6868',
orange: '#FF8300',
green: '#00d816',
green0a: '#0abb87',
greenE0: '#e0f7f0',
lightGray: '#E5E5E5',
grey: '#CACACA',
royal_blue: '#057DCD',
grayC4: '#C4C4C4',
white: '#fff',
blue1: '#edf8fe',
blue5c: '#5c65dc',
gray59: '#595959',
grayE9: '#e9eaf9',
textColor: '#202121',
};
export default colors;
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