admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added login functionality for tech BOD-95

Browse Source
This commit is contained in:
Patrick Fic
2020-06-29 15:24:04 -07:00
parent 2edfadce3a
commit 0e9cc9620b
27 changed files with 552 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
client/src/components/shop-employees/shop-employees-form.component.jsx
View File

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
export default function ShopEmployeesFormComponent({
form,
selectedEmployee,
handleFinish
handleFinish,
}) {
const { t } = useTranslation();
useEffect(() => {
@@ -27,79 +27,82 @@ export default function ShopEmployeesFormComponent({
: null,
termination_date: selectedEmployee.termination_date
? moment(selectedEmployee.termination_date)
: null
}}
>
<Button type="primary" htmlType="submit">
: null,
}}>
<Button type='primary' htmlType='submit'>
{t("general.actions.save")}
</Button>
<Form.Item
name="first_name"
name='first_name'
label={t("employees.fields.first_name")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item
label={t("employees.fields.last_name")}
name="last_name"
name='last_name'
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item
name="employee_number"
name='employee_number'
label={t("employees.fields.employee_number")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item
label={t("employees.fields.pin")}
name='pin'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item
label={t("employees.fields.active")}
valuePropName="checked"
name="active"
>
valuePropName='checked'
name='active'>
<Switch />
</Form.Item>
<Form.Item
label={t("employees.fields.flat_rate")}
name="flat_rate"
valuePropName="checked"
>
name='flat_rate'
valuePropName='checked'>
<Switch />
</Form.Item>
<Form.Item
name="hire_date"
name='hire_date'
label={t("employees.fields.hire_date")}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
message: t("general.validation.required"),
},
]}>
<DatePicker />
</Form.Item>
<Form.Item
label={t("employees.fields.termination_date")}
name="termination_date"
>
name='termination_date'>
<DatePicker />
</Form.Item>
{
@@ -107,26 +110,24 @@ export default function ShopEmployeesFormComponent({
}
<Form.Item
label={t("employees.fields.cost_center")}
name="cost_center"
name='cost_center'
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item
label={t("employees.fields.base_rate")}
name="base_rate"
name='base_rate'
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
message: t("general.validation.required"),
},
]}>
<InputNumber />
</Form.Item>
</Form>

4
client/src/components/tech-header/tech-header.component.jsx
View File

@@ -19,7 +19,9 @@ export function TechHeader({ technician }) {
<Header style={{ textAlign: "center" }}>
<Typography.Title style={{ color: "#fff" }}>
{!!technician
? t("tech.labels.loggedin", { name: technician.name })
? t("tech.labels.loggedin", {
name: `${technician.first_name} ${technician.last_name}`,
})
: t("tech.labels.notloggedin")}
</Typography.Title>
</Header>

44
client/src/components/tech-login/tech-login.component.jsx
View File

@@ -3,56 +3,72 @@ import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { loginStart } from "../../redux/tech/tech.actions";
import { techLoginStart } from "../../redux/tech/tech.actions";
import {
selectLoginError,
selectLoginLoading,
selectTechnician,
} from "../../redux/tech/tech.selectors";
import AlertComponent from "../alert/alert.component";
import "./tech-login.styles.scss";
import { Redirect } from "react-router-dom";
const mapStateToProps = createStructuredSelector({
technician: selectTechnician,
loginError: selectLoginError,
loginLoading: selectLoginLoading,
});
const mapDispatchToProps = (dispatch) => ({
loginStart: (user) => dispatch(loginStart(user)),
techLoginStart: (user) => dispatch(techLoginStart(user)),
});
export function TechLogin({ technician, loginError, loginStart }) {
export function TechLogin({
technician,
loginError,
loginLoading,
techLoginStart,
}) {
const { t } = useTranslation();
const handleFinish = (values) => {
loginStart(values);
techLoginStart(values);
};
return (
<div className='tech-login-container'>
<Form onFinish={handleFinish}>
{technician ? <Redirect to={`/tech/joblookup`} /> : null}
<Form
layout='vertical'
onFinish={handleFinish}
autoComplete='new-password'>
<Form.Item
label={t("tech.fields.username")}
name='date'
label={t("tech.fields.employeeid")}
name='employeeid'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input size='large' />
<Input size='large' autoComplete='off' />
</Form.Item>
<Form.Item
label={t("tech.fields.password")}
name='date'
label={t("tech.fields.pin")}
name='pin'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input.Password size='large' />
<Button htmlType='submit' className='login-btn'>
{t("general.actions.login")}
</Button>
<Input.Password size='large' autoComplete='off' />
</Form.Item>
<Button htmlType='submit' loading={loginLoading} className='login-btn'>
{t("general.actions.login")}
</Button>
</Form>
{loginError ? <AlertComponent type='error' message={loginError} /> : null}
</div>
);
}

8
client/src/components/tech-sider/tech-sider.component.jsx
View File

@@ -8,16 +8,17 @@ import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import { techLogout } from "../../redux/tech/tech.actions";
const { Sider } = Layout;
const mapStateToProps = createStructuredSelector({
technician: selectTechnician,
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
techLogout: () => dispatch(techLogout()),
});
export function TechSider({ technician }) {
export function TechSider({ technician, techLogout }) {
const [collapsed, setCollapsed] = useState(true);
const { t } = useTranslation();
const onCollapse = (collapsed) => {
@@ -57,8 +58,9 @@ export function TechSider({ technician }) {
<Menu.Item
key='7'
disabled={!!!technician}
onClick={() => techLogout()}
icon={<Icon component={FiLogOut} />}>
<Link to={`/tech/logout`}>{t("menus.tech.logout")}</Link>
{t("menus.tech.logout")}
</Menu.Item>
</Menu>
</Sider>

11
client/src/graphql/employees.queries.jsx
View File

@@ -13,6 +13,7 @@ export const QUERY_EMPLOYEES = gql`
flat_rate
cost_center
base_rate
pin
}
}
`;
@@ -31,7 +32,17 @@ export const UPDATE_EMPLOYEE = gql`
mutation UPDATE_EMPLOYEE($id: uuid!, $employee: employees_set_input) {
update_employees(where: { id: { _eq: $id } }, _set: $employee) {
returning {
last_name
id
first_name
employee_number
active
termination_date
hire_date
flat_rate
cost_center
base_rate
pin
}
}
}

27
client/src/pages/tech/tech.page.component.jsx
View File

@@ -1,19 +1,16 @@
import { BackTop, Layout } from "antd";
import React, { lazy, Suspense, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { Route, Switch } from "react-router-dom";
import { connect } from "react-redux";
import { Redirect, Route, Switch } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
import FcmNotification from "../../components/fcm-notification/fcm-notification.component";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import TechHeader from "../../components/tech-header/tech-header.component";
import TechSider from "../../components/tech-sider/tech-sider.component";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import "./tech.page.styles.scss";
const ManageRootPage = lazy(() =>
import("../manage-root/manage-root.page.container")
);
const JobsPage = lazy(() => import("../jobs/jobs.page"));
const TimeTicketModalContainer = lazy(() =>
import("../../components/time-ticket-modal/time-ticket-modal.container")
);
@@ -26,7 +23,14 @@ const TechLogin = lazy(() =>
const { Content } = Layout;
export default function TechPage({ match }) {
const mapStateToProps = createStructuredSelector({
technician: selectTechnician,
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export function TechPage({ technician, match }) {
const { t } = useTranslation();
useEffect(() => {
@@ -37,6 +41,7 @@ export default function TechPage({ match }) {
<Layout className='tech-layout-container'>
<TechSider />
<Layout>
{technician ? null : <Redirect to={`${match.path}/login`} />}
<TechHeader />
<Content className='tech-content-container'>
<FcmNotification />
@@ -48,11 +53,6 @@ export default function TechPage({ match }) {
<TimeTicketModalContainer />
<PrintCenterModalContainer />
<Switch>
<Route
exact
path={`${match.path}`}
component={ManageRootPage}
/>
<Route
exact
path={`${match.path}/login`}
@@ -68,3 +68,4 @@ export default function TechPage({ match }) {
</Layout>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(TechPage);

18
client/src/redux/tech/tech.actions.js
View File

@@ -1,16 +1,20 @@
import TechActionTypes from "./tech.types";
export const loginStart = ({ technician, password }) => ({
type: TechActionTypes.LOGIN_START,
payload: { technician, password },
export const techLoginStart = ({ employeeid, pin }) => ({
type: TechActionTypes.TECH_LOGIN_START,
payload: { employeeid, pin },
});
export const loginSuccess = (tech) => ({
type: TechActionTypes.LOGIN_SUCCESS,
export const techLoginSuccess = (tech) => ({
type: TechActionTypes.TECH_LOGIN_SUCCESS,
payload: tech,
});
export const loginFailure = (error) => ({
type: TechActionTypes.LOGIN_SUCCESS,
export const techLoginFailure = (error) => ({
type: TechActionTypes.TECH_LOGIN_FAILURE,
payload: error,
});
export const techLogout = () => ({
type: TechActionTypes.TECH_LOGOUT,
});

17
client/src/redux/tech/tech.reducer.js
View File

@@ -1,20 +1,33 @@
import TechActionTypes from "./tech.types";
const INITIAL_STATE = {
technician: null,
loginLoading: false,
loginError: null,
};
const applicationReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case TechActionTypes.LOGIN_SUCCESS:
case TechActionTypes.TECH_LOGOUT:
return {
...state,
technician: null,
};
case TechActionTypes.TECH_LOGIN_START:
return {
...state,
loginLoading: true,
};
case TechActionTypes.TECH_LOGIN_SUCCESS:
return {
...state,
technician: action.payload,
loginLoading: false,
};
case TechActionTypes.LOGIN_FAILURE:
case TechActionTypes.TECH_LOGIN_FAILURE:
return {
...state,
loginError: action.payload,
loginLoading: false,
};
default:

35
client/src/redux/tech/tech.sagas.js
View File

@@ -1,16 +1,39 @@
import { all, takeLatest, call, put } from "redux-saga/effects";
import { all, takeLatest, call, put, select } from "redux-saga/effects";
import TechActionTypes from "./tech.types";
import { client } from "../../App/App.container";
import { loginSuccess, loginFailure } from "./tech.actions";
import { techLoginStart,techLoginSuccess, techLoginFailure } from "./tech.actions";
import axios from "axios";
import { selectBodyshop } from "../user/user.selectors";
export function* onSignInStart() {
yield takeLatest(TechActionTypes.LOGIN_START, signInStart);
yield takeLatest(TechActionTypes.TECH_LOGIN_START, signInStart);
}
export function* signInStart({ payload: { technician, password } }) {
export function* signInStart({ payload: { employeeid, pin } }) {
try {
yield put(loginSuccess({ username: "TECHNICIAN" }));
const bodyshop = yield select(selectBodyshop);
const response = yield call(axios.post, "/tech/login", {
shopid: bodyshop.id,
employeeid: employeeid,
pin: pin,
});
console.log("response", response);
const { valid, technician, error } = response.data;
console.log(
"function*signInStart -> valid, technician, erro",
valid,
technician,
error
);
if (valid) {
console.log("Valid in else");
yield put(techLoginSuccess(technician));
} else {
yield put(techLoginFailure(error));
}
} catch (error) {
yield put(loginFailure(error));
yield put(techLoginFailure(error));
}
}

4
client/src/redux/tech/tech.selectors.js
View File

@@ -10,3 +10,7 @@ export const selectLoginError = createSelector(
[selectTechReducer],
(application) => application.loginError
);
export const selectLoginLoading = createSelector(
[selectTechReducer],
(application) => application.loginLoading
);

7
client/src/redux/tech/tech.types.js
View File

@@ -1,6 +1,7 @@
const TechActionTypes = {
LOGIN_START: "LOGIN_START",
LOGIN_SUCCESS: "LOGIN_SUCCESS",
LOGIN_FAILURE: "LOGIN_FAILURE",
TECH_LOGIN_START: "TECH_LOGIN_START",
TECH_LOGIN_SUCCESS: "TECH_LOGIN_SUCCESS",
TECH_LOGIN_FAILURE: "TECH_LOGIN_FAILURE",
TECH_LOGOUT: "TECH_LOGOUT",
};
export default TechActionTypes;

4
client/src/translations/en_us/common.json
View File

@@ -1047,6 +1047,10 @@
}
},
"tech": {
"fields": {
"employeeid": "Employee ID",
"pin": "PIN"
},
"labels": {
"loggedin": "Logged in as {{name}}",
"notloggedin": "Not logged in."

4
client/src/translations/es/common.json
View File

@@ -1047,6 +1047,10 @@
}
},
"tech": {
"fields": {
"employeeid": "",
"pin": ""
},
"labels": {
"loggedin": "",
"notloggedin": ""

4
client/src/translations/fr/common.json
View File

@@ -1047,6 +1047,10 @@
}
},
"tech": {
"fields": {
"employeeid": "",
"pin": ""
},
"labels": {
"loggedin": "",
"notloggedin": ""