diff --git a/client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx b/client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx index 15c97b824..587205ad6 100644 --- a/client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx +++ b/client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx @@ -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, diff --git a/client/src/components/job-detail-cards/job-detail-cards.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.component.jsx index 70e535597..0b126c300 100644 --- a/client/src/components/job-detail-cards/job-detail-cards.component.jsx +++ b/client/src/components/job-detail-cards/job-detail-cards.component.jsx @@ -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 (
- + { - setNoteModalVisible(!noteModalVisible); + setNoteUpsertContext({ + actions: { refetch: refetch }, + context: { + jobId: data.jobs_by_pk.id + } + }); }} > @@ -120,7 +124,7 @@ function JobDetailCards({ selectedJob, setInvoiceEnterContext }) { key="postinvoices" onClick={() => { setInvoiceEnterContext({ - actions: { refetch: null }, + actions: { refetch: refetch }, context: { job: data.jobs_by_pk } diff --git a/client/src/components/jobs-notes/jobs.notes.component.jsx b/client/src/components/jobs-notes/jobs.notes.component.jsx index 13f5cc0db..493a6fbe0 100644 --- a/client/src/components/jobs-notes/jobs.notes.component.jsx +++ b/client/src/components/jobs-notes/jobs.notes.component.jsx @@ -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) => ( - {" "} {record.critical ? ( ) : null} @@ -87,8 +93,13 @@ export default function JobNotesComponent({
); } +export default connect(null, mapDispatchToProps)(JobNotesComponent); diff --git a/client/src/components/note-upsert-modal/note-upsert-modal.component.jsx b/client/src/components/note-upsert-modal/note-upsert-modal.component.jsx index 62bf4ed11..1e7c6c8ce 100644 --- a/client/src/components/note-upsert-modal/note-upsert-modal.component.jsx +++ b/client/src/components/note-upsert-modal/note-upsert-modal.component.jsx @@ -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 ( - { - noteState.id ? updateExistingNote() : insertNewNote(); - }} - onCancel={() => { - changeVisibility(false); - }} - > -
- {t("notes.fields.critical")} - { - setNoteState({ ...noteState, critical: checked }); - }} +
+ + + + + + + + -
-
- {t("notes.fields.private")} - { - setNoteState({ ...noteState, private: checked }); - }} - /> -
- - { - setNoteState({ ...noteState, text: e.target.value }); - }} - /> - + +
); } diff --git a/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx b/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx index 21cff1230..4de2601c3 100644 --- a/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx +++ b/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx @@ -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 ( - + okText={t("general.actions.save")} + onOk={() => { + form.submit(); + }} + onCancel={() => { + toggleModalVisible(); + }} + destroyOnClose + > +
+ + +
); } -); + +export default connect( + mapStateToProps, + mapDispatchToProps +)(NoteUpsertModalContainer); diff --git a/client/src/redux/modals/modals.reducer.js b/client/src/redux/modals/modals.reducer.js index bb3913f49..99a08090e 100644 --- a/client/src/redux/modals/modals.reducer.js +++ b/client/src/redux/modals/modals.reducer.js @@ -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) => { diff --git a/client/src/redux/modals/modals.selectors.js b/client/src/redux/modals/modals.selectors.js index 7c9c3daf4..2fdf870b2 100644 --- a/client/src/redux/modals/modals.selectors.js +++ b/client/src/redux/modals/modals.selectors.js @@ -17,3 +17,7 @@ export const selectCourtesyCarReturn = createSelector( modals => modals.courtesyCarReturn ); +export const selectNoteUpsert = createSelector( + [selectModals], + modals => modals.noteUpsert +); diff --git a/client/src/redux/modals/modals.types.js b/client/src/redux/modals/modals.types.js index 01ea4c793..ebe65e822 100644 --- a/client/src/redux/modals/modals.types.js +++ b/client/src/redux/modals/modals.types.js @@ -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;