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

Added framework for CSI questions & viewing. Schema changes to allow anon viewing of survey BOD-98

Browse Source
This commit is contained in:
Patrick Fic
2020-05-22 13:36:25 -07:00
parent d8c159cde0
commit f7cc4cffa4
64 changed files with 1345 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
client/src/App/App.container.jsx
View File

@@ -29,7 +29,8 @@ const wsLink = new WebSocketLink({
reconnect: true,
connectionParams: async () => {
//const token = localStorage.getItem("token");
const token = await auth.currentUser.getIdToken(true);
const token =
auth.currentUser && (await auth.currentUser.getIdToken(true));
if (token) {
return {
headers: {
@@ -42,7 +43,8 @@ const wsLink = new WebSocketLink({
});
const subscriptionMiddleware = {
applyMiddleware: async (options, next) => {
options.authToken = await auth.currentUser.getIdToken(true);
options.authToken =
auth.currentUser && (await auth.currentUser.getIdToken(true));
next();
},
};
@@ -70,18 +72,21 @@ const link = split(
);
const authLink = setContext((_, { headers }) => {
return auth.currentUser.getIdToken().then((token) => {
if (token) {
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : "",
},
};
} else {
return { headers };
}
});
return (
auth.currentUser &&
auth.currentUser.getIdToken().then((token) => {
if (token) {
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : "",
},
};
} else {
return { headers };
}
})
);
});
const retryLink = new RetryLink({

10
client/src/App/App.js
View File

@@ -18,12 +18,13 @@ const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page"));
const Unauthorized = lazy(() =>
import("../pages/unauthorized/unauthorized.component")
);
const CsiPage = lazy(() => import("../pages/csi/csi.container.page"));
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser
currentUser: selectCurrentUser,
});
const mapDispatchToProps = dispatch => ({
checkUserSession: () => dispatch(checkUserSession())
const mapDispatchToProps = (dispatch) => ({
checkUserSession: () => dispatch(checkUserSession()),
});
export default connect(
@@ -48,9 +49,8 @@ export default connect(
<Suspense fallback={<LoadingSpinner message='App.Js Suspense' />}>
<Route exact path='/' component={LandingPage} />
<Route exact path='/unauthorized' component={Unauthorized} />
<Route exact path='/signin' component={SignInPage} />
<Route exact path='/csi/:surveyId' component={CsiPage} />
<PrivateRoute
isAuthorized={currentUser.authorized}
path='/manage'

0
client/src/components/job-intake/components/job-intake-form-checkbox/job-itnake-form-checkbox.component.jsx → client/src/components/config-form-components/checkbox/checkbox.component.jsx
View File

29
client/src/components/config-form-components/config-form-components.component.jsx Normal file
View File

@@ -0,0 +1,29 @@
import React from "react";
import CheckboxFormItem from "./checkbox/checkbox.component";
import Slider from "./slider/slider.component";
import Text from "./text/text.component";
import Textarea from "./textarea/textarea.component";
import Rate from "./rate/rate.component";
export default function ConfirmFormComponents({ componentList }) {
return (
<div>
{componentList.map((f, idx) => {
switch (f.type) {
case "checkbox":
return <CheckboxFormItem key={idx} formItem={f} />;
case "slider":
return <Slider key={idx} formItem={f} />;
case "text":
return <Text key={idx} formItem={f} />;
case "textarea":
return <Textarea key={idx} formItem={f} />;
case "rate":
return <Rate key={idx} formItem={f} />;
default:
return <div key={idx}>Error</div>;
}
})}
</div>
);
}

21
client/src/components/config-form-components/rate/rate.component.jsx Normal file
View File

@@ -0,0 +1,21 @@
import React from "react";
import { Form, Rate } from "antd";
import { useTranslation } from "react-i18next";
export default function JobIntakeFormCheckboxComponent({ formItem }) {
const { name, label, required } = formItem;
const { t } = useTranslation();
return (
<Form.Item
name={name}
label={label}
rules={[
{
required: required,
message: t("general.validation.required"),
},
]}>
<Rate allowHalf />
</Form.Item>
);
}

21
client/src/components/config-form-components/slider/slider.component.jsx Normal file
View File

@@ -0,0 +1,21 @@
import { Form, Slider } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
export default function JobIntakeFormCheckboxComponent({ formItem }) {
const { name, label, required, min, max } = formItem;
const { t } = useTranslation();
return (
<Form.Item
name={name}
label={label}
rules={[
{
required: required,
message: t("general.validation.required"),
},
]}>
<Slider min={min || 0} max={max || 10} />
</Form.Item>
);
}

21
client/src/components/config-form-components/text/text.component.jsx Normal file
View File

@@ -0,0 +1,21 @@
import React from "react";
import { Form, Input } from "antd";
import { useTranslation } from "react-i18next";
export default function JobIntakeFormCheckboxComponent({ formItem }) {
const { name, label, required } = formItem;
const { t } = useTranslation();
return (
<Form.Item
name={name}
label={label}
rules={[
{
required: required,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
);
}

21
client/src/components/config-form-components/textarea/textarea.component.jsx Normal file
View File

@@ -0,0 +1,21 @@
import React from "react";
import { Form, Input } from "antd";
import { useTranslation } from "react-i18next";
export default function JobIntakeFormCheckboxComponent({ formItem }) {
const { name, label, required, rows } = formItem;
const { t } = useTranslation();
return (
<Form.Item
name={name}
label={label}
rules={[
{
required: required,
message: t("general.validation.required"),
},
]}>
<Input.TextArea rows={rows || 4} />
</Form.Item>
);
}

35
client/src/components/job-intake/components/job-intake-form/job-intake-form.component.jsx
View File

@@ -1,18 +1,16 @@
import React from "react";
import { Form, Button, Switch, DatePicker, notification } from "antd";
import CheckboxFormItem from "../job-intake-form-checkbox/job-itnake-form-checkbox.component";
import { useTranslation } from "react-i18next";
import { useMutation } from "@apollo/react-hooks";
import { UPDATE_JOB } from "../../../../graphql/jobs.queries";
import { MARK_LATEST_APPOINTMENT_AS_ARRIVED } from "../../../../graphql/appointments.queries";
import { useParams } from "react-router-dom";
import { selectBodyshop } from "../../../../redux/user/user.selectors";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { useHistory } from "react-router-dom";
import { Button, Form, notification, Switch } from "antd";
import queryString from "query-string";
import { useLocation } from "react-router-dom";
import DateTimePicker from '../../../form-date-time-picker/form-date-time-picker.component'
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { useHistory, useLocation, useParams } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { MARK_LATEST_APPOINTMENT_AS_ARRIVED } from "../../../../graphql/appointments.queries";
import { UPDATE_JOB } from "../../../../graphql/jobs.queries";
import { selectBodyshop } from "../../../../redux/user/user.selectors";
import DateTimePicker from "../../../form-date-time-picker/form-date-time-picker.component";
import ConfigFormComponents from "../../../config-form-components/config-form-components.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -80,14 +78,9 @@ export function JobIntakeForm({ formItems, bodyshop }) {
onFinish={handleFinish}
initialValues={{ addToProduction: true }}>
{t("intake.labels.checklist")}
{formItems.map((f, idx) => {
switch (f.type) {
case "checkbox":
return <CheckboxFormItem key={idx} formItem={f} />;
default:
return <div key={idx}>Error</div>;
}
})}
<ConfigFormComponents componentList={formItems} />
<Form.Item
name='addToProduction'
valuePropName='checked'

4
client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
View File

@@ -1,9 +1,9 @@
import { Checkbox, Col, DatePicker, Row, Tabs, TimePicker } from "antd";
import { Checkbox, Col, Row, Tabs } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
export default function ScheduleJobModalComponent({
existingAppointments,

16
client/src/graphql/csi.queries.js Normal file
View File

@@ -0,0 +1,16 @@
import gql from "graphql-tag";
export const QUERY_SURVEY = gql`
query QUERY_SURVEY($surveyId: uuid!) {
csi_by_pk(id: $surveyId) {
relateddata
valid
validuntil
id
csiquestion {
id
config
}
}
}
`;

128
client/src/pages/csi/csi.container.page.jsx Normal file
View File

@@ -0,0 +1,128 @@
import { useQuery } from "@apollo/react-hooks";
import { Form, Layout, Typography, Button } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";
import AlertComponent from "../../components/alert/alert.component";
import ConfigFormComponents from "../../components/config-form-components/config-form-components.component";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import { QUERY_SURVEY } from "../../graphql/csi.queries";
export default function CsiContainerPage() {
const { surveyId } = useParams();
const [form] = Form.useForm();
const { loading, error, data } = useQuery(QUERY_SURVEY, {
variables: { surveyId },
});
const { t } = useTranslation();
if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type='error' />;
const handleFinish = (values) => {
console.log("values", values);
};
//const { relateddata } = data.csi_by_pk;
const { bodyshop, job, csiquestion } = relateddata;
return (
<Layout
style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
}}>
<div style={{ display: "flex", alignItems: "center" }}>
{bodyshop.logo_img_path ? (
<img src={bodyshop.logo_img_path} alt='Logo' />
) : null}
<div>
<strong>{bodyshop.shopname || ""}</strong>
<div>{`${bodyshop.address1 || ""}`}</div>
<div>{`${bodyshop.address2 || ""}`}</div>
<div>{`${bodyshop.city || ""} ${bodyshop.state || ""} ${
bodyshop.zip_post || ""
}`}</div>
</div>
</div>
<Typography.Title>{t("csi.labels.title")}</Typography.Title>
<strong>{`Hi ${job.ownr_fn || ""}!`}</strong>
<Typography.Paragraph>
At {bodyshop.shopname || ""}, we value our customer's feedback. We
would love to hear what you have to say. Please fill out the form
below.
</Typography.Paragraph>
</div>
<Layout.Content
style={{ backgroundColor: "#fff", margin: "2em 4em", padding: "2em" }}>
<Form form={form} onFinish={handleFinish}>
<ConfigFormComponents componentList={csiquestion} />
<Button type='primary' htmlType='submit'>
{t("general.actions.submit")}
</Button>
</Form>
</Layout.Content>
<Layout.Footer>
Copyright ImEX.Online. Survey ID: {surveyId}
</Layout.Footer>
</Layout>
);
}
const relateddata = {
bodyshop: {
logo_img_path: "https://via.placeholder.com/150",
shopname: "Kavia Test Autobody",
address1: "123 Fake St",
address2: "Unit #100",
city: "Vancouver",
state: "BC",
zip_post: "V6B 1M9",
country: "Canada",
email: "snaptsoft@gmail.com",
},
job: {
id: "1234",
ro_number: "RO102384",
ownr_fn: "Patrick",
v_make_desc: "Toyota",
v_model_desc: "Camry",
v_model_yr: "2019",
},
csiquestion: [
{
name: "item1",
type: "checkbox",
label: "Checklist Item 1",
required: true,
},
{
name: "item2",
type: "slider",
label: "Checklist Item 2",
min: 0,
max: 5,
required: true,
},
{
name: "item3",
type: "textarea",
label: "Checklist Item 3",
required: true,
},
{
name: "item4",
type: "text",
label: "Checklist Item 4",
required: true,
},
{
name: "item5",
type: "rate",
label: "Checklist Item 4",
required: true,
},
],
};

4
client/src/pages/landing/landing.page.jsx
View File

@@ -11,8 +11,8 @@ export default function LandingPage() {
<HeaderContainer landingHeader />
</Header>
<Content className="content-container" style={{ padding: "0em 4em 4em" }}>
<Typography.Title>Welcome to bodyshop.app.</Typography.Title>
<Content className='content-container' style={{ padding: "0em 4em 4em" }}>
<Typography.Title>ImEX.Online</Typography.Title>
</Content>
</Layout>
);

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

@@ -249,6 +249,11 @@
"saved": "Courtesy Car saved successfully."
}
},
"csi": {
"labels": {
"title": "Customer Satisfaction Survey"
}
},
"documents": {
"actions": {
"delete": "Delete Selected Documents",
@@ -333,7 +338,7 @@
"no": "No",
"out": "Out",
"search": "Search...",
"selectdate": "Select date",
"selectdate": "Select date...",
"unknown": "Unknown",
"yes": "Yes"
},

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

@@ -249,6 +249,11 @@
"saved": ""
}
},
"csi": {
"labels": {
"title": ""
}
},
"documents": {
"actions": {
"delete": "",

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

@@ -249,6 +249,11 @@
"saved": ""
}
},
"csi": {
"labels": {
"title": ""
}
},
"documents": {
"actions": {
"delete": "",