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

CLEANUP Refactored note upsert to use redux modals.

Browse Source
This commit is contained in:
Patrick Fic
2020-04-02 12:05:32 -07:00
parent 922463d400
commit 828ca721db
8 changed files with 156 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx
View File

@@ -30,8 +30,6 @@ export function InvoiceEnterModalContainer({
const [form] = Form.useForm();
const [updateContract] = useMutation(RETURN_CONTRACT);
const handleFinish = values => {
console.log("Finish", values);
updateContract({
variables: {
contractId: context.contractId,

28
client/src/components/job-detail-cards/job-detail-cards.component.jsx
View File

@@ -16,7 +16,6 @@ import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
import ScheduleJobModalContainer from "../schedule-job-modal/schedule-job-modal.container";
//import JobDetailCardsHeaderComponent from "./job-detail-cards.header.component";
import JobDetailCardsCustomerComponent from "./job-detail-cards.customer.component";
import JobDetailCardsDamageComponent from "./job-detail-cards.damage.component";
import JobDetailCardsDatesComponent from "./job-detail-cards.dates.component";
@@ -29,16 +28,21 @@ import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
const mapDispatchToProps = dispatch => ({
setInvoiceEnterContext: context =>
dispatch(setModalContext({ context: context, modal: "invoiceEnter" }))
dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
setNoteUpsertContext: context =>
dispatch(setModalContext({ context: context, modal: "noteUpsert" }))
});
function JobDetailCards({ selectedJob, setInvoiceEnterContext }) {
export function JobDetailCards({
selectedJob,
setInvoiceEnterContext,
setNoteUpsertContext
}) {
const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
fetchPolicy: "network-only",
variables: { id: selectedJob },
skip: !selectedJob
});
const [noteModalVisible, setNoteModalVisible] = useState(false);
const scheduleModalState = useState(false);
const { t } = useTranslation();
@@ -50,12 +54,7 @@ function JobDetailCards({ selectedJob, setInvoiceEnterContext }) {
return (
<div className="job-cards-container">
<NoteUpsertModal
jobId={data.jobs_by_pk.id}
visible={noteModalVisible}
changeVisibility={setNoteModalVisible}
refetch={refetch}
/>
<NoteUpsertModal />
<ScheduleJobModalContainer
scheduleModalState={scheduleModalState}
jobId={data.jobs_by_pk.id}
@@ -110,7 +109,12 @@ function JobDetailCards({ selectedJob, setInvoiceEnterContext }) {
key="notes"
actiontype="addNote"
onClick={() => {
setNoteModalVisible(!noteModalVisible);
setNoteUpsertContext({
actions: { refetch: refetch },
context: {
jobId: data.jobs_by_pk.id
}
});
}}
>
<EditFilled />
@@ -120,7 +124,7 @@ function JobDetailCards({ selectedJob, setInvoiceEnterContext }) {
key="postinvoices"
onClick={() => {
setInvoiceEnterContext({
actions: { refetch: null },
actions: { refetch: refetch },
context: {
job: data.jobs_by_pk
}

52
client/src/components/jobs-notes/jobs.notes.component.jsx
View File

@@ -1,25 +1,32 @@
import React, { useState } from "react";
import { Table, Button, notification } from "antd";
import {
WarningFilled,
EyeInvisibleFilled,
DeleteFilled,
EditFilled
EditFilled,
EyeInvisibleFilled,
WarningFilled
} from "@ant-design/icons";
import { Button, notification, Table } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import Moment from "react-moment";
import { connect } from "react-redux";
import { setModalContext } from "../../redux/modals/modals.actions";
import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
export default function JobNotesComponent({
const mapDispatchToProps = dispatch => ({
setNoteUpsertContext: context =>
dispatch(setModalContext({ context: context, modal: "noteUpsert" }))
});
export function JobNotesComponent({
loading,
data,
refetch,
deleteNote,
jobId
jobId,
setNoteUpsertContext
}) {
const { t } = useTranslation();
const [noteModalVisible, setNoteModalVisible] = useState(false);
const [existingNote, setExistingNote] = useState(null);
const columns = [
{
title: "",
@@ -28,7 +35,6 @@ export default function JobNotesComponent({
width: 80,
render: (text, record) => (
<span>
{" "}
{record.critical ? (
<WarningFilled style={{ margin: 4, color: "red" }} />
) : null}
@@ -87,8 +93,13 @@ export default function JobNotesComponent({
</Button>
<Button
onClick={() => {
setExistingNote(record);
setNoteModalVisible(true);
setNoteUpsertContext({
actions: { refetch: refetch },
context: {
jobId: jobId,
existingNote: record
}
});
}}
>
<EditFilled />
@@ -100,17 +111,15 @@ export default function JobNotesComponent({
return (
<div>
<NoteUpsertModal
jobId={jobId}
visible={noteModalVisible}
changeVisibility={setNoteModalVisible}
refetch={refetch}
existingNote={existingNote}
/>
<NoteUpsertModal />
<Button
onClick={() => {
setExistingNote(null);
setNoteModalVisible(true);
setNoteUpsertContext({
actions: { refetch: refetch },
context: {
jobId: jobId
}
});
}}
>
{t("notes.actions.new")}
@@ -125,3 +134,4 @@ export default function JobNotesComponent({
</div>
);
}
export default connect(null, mapDispatchToProps)(JobNotesComponent);

81
client/src/components/note-upsert-modal/note-upsert-modal.component.jsx
View File

@@ -1,58 +1,41 @@
import { Input, Modal, Switch } from "antd";
import { Form, Input, Switch } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
export default function NoteUpsertModalComponent({
visible,
changeVisibility,
noteState,
setNoteState,
updateExistingNote,
insertNewNote
}) {
export default function NoteUpsertModalComponent() {
const { t } = useTranslation();
return (
<Modal
title={noteState.id ? t("notes.actions.edit") : t("notes.actions.new")}
visible={visible}
okText={t("general.actions.save")}
onOk={() => {
noteState.id ? updateExistingNote() : insertNewNote();
}}
onCancel={() => {
changeVisibility(false);
}}
>
<div>
{t("notes.fields.critical")}
<Switch
title={t("notes.fields.critical")}
checked={noteState.critical}
onChange={checked => {
setNoteState({ ...noteState, critical: checked });
}}
<div>
<Form.Item
label={t("notes.fields.critical")}
name="critical"
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
label={t("notes.fields.private")}
name="private"
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
label={t("notes.fields.text")}
name="text"
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input.TextArea
rows={8}
placeholder={t("notes.labels.newnoteplaceholder")}
/>
</div>
<div>
{t("notes.fields.private")}
<Switch
title={t("notes.fields.private")}
checked={noteState.private}
onChange={checked => {
setNoteState({ ...noteState, private: checked });
}}
/>
</div>
<Input.TextArea
rows={8}
value={noteState.text}
placeholder={t("notes.labels.newnoteplaceholder")}
onChange={e => {
setNoteState({ ...noteState, text: e.target.value });
}}
/>
</Modal>
</Form.Item>
</div>
);
}

127
client/src/components/note-upsert-modal/note-upsert-modal.container.jsx
View File

@@ -1,84 +1,97 @@
import { notification } from "antd";
import React, { useEffect, useState } from "react";
import { useMutation } from "@apollo/react-hooks";
import { Form, Modal, notification } from "antd";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { INSERT_NEW_NOTE, UPDATE_NOTE } from "../../graphql/notes.queries";
import NoteUpsertModalComponent from "./note-upsert-modal.component";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { INSERT_NEW_NOTE, UPDATE_NOTE } from "../../graphql/notes.queries";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectNoteUpsert } from "../../redux/modals/modals.selectors";
import { selectCurrentUser } from "../../redux/user/user.selectors";
import NoteUpsertModalComponent from "./note-upsert-modal.component";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser
currentUser: selectCurrentUser,
noteUpsertModal: selectNoteUpsert
});
const mapDispatchToProps = dispatch => ({
toggleModalVisible: () => dispatch(toggleModalVisible("noteUpsert"))
});
export default connect (mapStateToProps,null)( function NoteUpsertModalContainer({
jobId,
visible,
changeVisibility,
refetch,
existingNote,currentUser
export function NoteUpsertModalContainer({
currentUser,
noteUpsertModal,
toggleModalVisible
}) {
const { t } = useTranslation();
const [insertNote] = useMutation(INSERT_NEW_NOTE);
const [updateNote] = useMutation(UPDATE_NOTE);
const [noteState, setNoteState] = useState({
private: false,
critical: false,
text: ""
});
const { visible, context, actions } = noteUpsertModal;
const { jobId, existingNote } = context;
const { refetch } = actions;
const [form] = Form.useForm();
useEffect(() => {
//Required to prevent infinite looping.
if (existingNote) {
setNoteState(existingNote);
form.resetFields();
}
}, [existingNote]);
}, [existingNote, form]);
const insertNewNote = () => {
insertNote({
variables: {
noteInput: [
{ ...noteState, jobid: jobId, created_by: currentUser.email }
]
}
}).then(r => {
refetch();
changeVisibility(!visible);
notification["success"]({
message: t("notes.successes.create")
const handleFinish = values => {
if (existingNote) {
updateNote({
variables: {
noteId: existingNote.id,
note: values
}
}).then(r => {
notification["success"]({
message: t("notes.successes.updated")
});
});
});
};
const updateExistingNote = () => {
//Required, otherwise unable to spread in new note prop.
delete noteState.__typename;
updateNote({
variables: {
noteId: noteState.id,
note: noteState
}
}).then(r => {
notification["success"]({
message: t("notes.successes.updated")
if (refetch) refetch();
toggleModalVisible();
} else {
insertNote({
variables: {
noteInput: [
{ ...values, jobid: jobId, created_by: currentUser.email }
]
}
}).then(r => {
if (refetch) refetch();
toggleModalVisible();
notification["success"]({
message: t("notes.successes.create")
});
});
});
refetch();
changeVisibility(!visible);
}
};
return (
<NoteUpsertModalComponent
<Modal
title={existingNote ? t("notes.actions.edit") : t("notes.actions.new")}
visible={visible}
changeVisibility={changeVisibility}
updateExistingNote={updateExistingNote}
insertNewNote={insertNewNote}
noteState={noteState}
setNoteState={setNoteState}
/>
okText={t("general.actions.save")}
onOk={() => {
form.submit();
}}
onCancel={() => {
toggleModalVisible();
}}
destroyOnClose
>
<Form form={form} onFinish={handleFinish} initialValues={existingNote}>
<NoteUpsertModalComponent />
</Form>
</Modal>
);
}
);
export default connect(
mapStateToProps,
mapDispatchToProps
)(NoteUpsertModalContainer);

3
client/src/redux/modals/modals.reducer.js
View File

@@ -11,7 +11,8 @@ const baseModal = {
const INITIAL_STATE = {
jobLineEdit: { ...baseModal },
invoiceEnter: { ...baseModal },
courtesyCarReturn: { ...baseModal }
courtesyCarReturn: { ...baseModal },
noteUpsert: { ...baseModal }
};
const modalsReducer = (state = INITIAL_STATE, action) => {

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

@@ -17,3 +17,7 @@ export const selectCourtesyCarReturn = createSelector(
modals => modals.courtesyCarReturn
);
export const selectNoteUpsert = createSelector(
[selectModals],
modals => modals.noteUpsert
);

2
client/src/redux/modals/modals.types.js
View File

@@ -1,5 +1,5 @@
const ModalActionTypes = {
TOGGLE_MODAL_VISIBLE: "TOGGLE_MODAL_VISIBLE",
SET_MODAL_CONTEXT: "SET_JOBLINEEDIT_CONTEXT"
SET_MODAL_CONTEXT: "SET_MODAL_CONTEXT"
};
export default ModalActionTypes;