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

Notes lifecycle events added to job details.

Browse Source
This commit is contained in:
Patrick Fic
2020-01-21 15:11:04 -08:00
parent 26745f2e62
commit 4bac820887
14 changed files with 546 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
bodyshop_translations.babel
View File

@@ -1387,9 +1387,119 @@
<folder_node>
<name>notes</name>
<children>
<folder_node>
<name>actions</name>
<children>
<concept_node>
<name>actions</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>deletenote</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>edit</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>new</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
<folder_node>
<name>fields</name>
<children>
<concept_node>
<name>createdby</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>critical</name>
<definition_loaded>false</definition_loaded>
@@ -1453,6 +1563,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>updatedat</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
<folder_node>
@@ -1481,6 +1612,74 @@
</concept_node>
</children>
</folder_node>
<folder_node>
<name>successes</name>
<children>
<concept_node>
<name>created</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>deleted</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>updated</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
</children>
</folder_node>
<folder_node>

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

@@ -20,7 +20,7 @@ import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import "./job-detail-cards.styles.scss";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import NoteAddModal from "../note-add-modal/note-add-modal.component";
import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
export default function JobDetailCards({ selectedJob }) {
const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
@@ -39,7 +39,7 @@ export default function JobDetailCards({ selectedJob }) {
return (
<div className='job-cards-container'>
<NoteAddModal
<NoteUpsertModal
jobId={data.jobs_by_pk.id}
visible={noteModalVisible}
changeVisibility={setNoteModalVisible}

3
client/src/components/job-lines/job-lines.component.jsx
View File

@@ -40,13 +40,12 @@ export default function JobLinesComponent({ loading, joblines }) {
// setState({ ...state, filterinfo: { text: [value] } });
// };
console.log('joblines', joblines)
return (
<Table
loading={loading}
pagination={{ position: "bottom" }}
columns={columns.map(item => ({ ...item }))}
rowKey="id"
rowKey='id'
dataSource={joblines}
onChange={handleTableChange}
/>

8
client/src/components/job-tombstone/job-tombstone.component.jsx
View File

@@ -96,7 +96,13 @@ function JobTombstone({ job, ...otherProps }) {
(jobContext.owner?.last_name ?? "")
: t("jobs.errors.noowner")
}
tags={<Tag color='blue'>{jobContext?.job_status?.name}</Tag>}
tags={
<span key='job-status'>
{jobContext.job_status ? (
<Tag color='blue'>{jobContext.job_status.name}</Tag>
) : null}
</span>
}
extra={[
<Button
key='convert'

31
client/src/components/jobs-notes/jobs-notes.container.jsx Normal file
View File

@@ -0,0 +1,31 @@
import React from "react";
import JobNotesComponent from "./jobs.notes.component";
import { useQuery, useMutation } from "react-apollo";
import AlertComponent from "../../components/alert/alert.component";
//import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
import {
QUERY_NOTES_BY_JOB_PK,
DELETE_NOTE
} from "../../graphql/notes.queries";
export default function JobNotesContainer({ jobId }) {
const { loading, error, data, refetch } = useQuery(QUERY_NOTES_BY_JOB_PK, {
variables: { id: jobId },
fetchPolicy: "network-only"
});
const [deleteNote] = useMutation(DELETE_NOTE);
//if (loading) return <SpinComponent />;
if (error) return <AlertComponent message={error.message} type='error' />;
return (
<JobNotesComponent
jobId={jobId}
loading={loading}
data={data ? data.jobs_by_pk.notes : null}
refetch={refetch}
deleteNote={deleteNote}
/>
);
}

92
client/src/components/jobs-notes/jobs.notes.component.jsx Normal file
View File

@@ -0,0 +1,92 @@
import React, { useState } from "react";
import { Table, Button, Icon, notification } from "antd";
import { useTranslation } from "react-i18next";
import Moment from "react-moment";
import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
export default function JobNotesComponent({
loading,
data,
refetch,
deleteNote,
jobId
}) {
const { t } = useTranslation();
const [noteModalVisible, setNoteModalVisible] = useState(false);
const [existingNote, setExistingNote] = useState(null);
const columns = [
{
title: t("notes.fields.text"),
dataIndex: "text",
key: "text",
ellipsis: true
},
{
title: t("notes.fields.updatedat"),
dataIndex: "updated_at",
key: "updated_at",
defaultSortOrder: "descend",
sorter: (a, b) => new Date(a.updated_at) - new Date(b.updated_at),
render: (text, record) => (
<span>
<Moment format='MM/DD/YYYY @ HH:mm'>{record.updated_at}</Moment>
</span>
)
},
{
title: t("notes.fields.createdby"),
dataIndex: "created_by",
key: "created_by"
},
{
title: t("notes.actions.actions"),
dataIndex: "actions",
key: "actions",
render: (text, record) => (
<span>
<Button
onClick={() => {
deleteNote({
variables: {
noteId: record.id
}
}).then(r => {
refetch();
notification["success"]({
message: t("notes.successes.deleted")
});
});
}}>
<Icon type='delete' />
</Button>
<Button
onClick={() => {
setExistingNote(record);
setNoteModalVisible(true);
}}>
<Icon type='edit' />
</Button>
</span>
)
}
];
return (
<div>
<NoteUpsertModal
jobId={jobId}
visible={noteModalVisible}
changeVisibility={setNoteModalVisible}
refetch={refetch}
existingNote={existingNote}
/>
<Table
loading={loading}
pagination={{ position: "bottom" }}
columns={columns.map(item => ({ ...item }))}
rowKey='id'
dataSource={data}
/>
</div>
);
}

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

@@ -1,81 +0,0 @@
import { Input, Modal, Switch } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { useMutation } from "react-apollo";
import { INSERT_NEW_NOTE } from "../../graphql/notes.queries";
export default function NoteAddModal({
jobId,
visible,
changeVisibility,
refetch
}) {
const [newNote, setnewNote] = useState({
private: false,
critical: false,
text: ""
});
const { t } = useTranslation();
const [insertNote] = useMutation(INSERT_NEW_NOTE);
return (
<Modal
title='Basic Modal'
visible={visible}
okText='Save'
onOk={() => {
insertNote({
variables: {
noteInput: [
{ ...newNote, jobid: jobId, created_by: "patrick@bodyshop.app" }
]
}
}).then(r => {
setnewNote({
private: false,
critical: false,
text: ""
});
});
console.log('refetch', refetch)
refetch();
changeVisibility(!visible);
}}
onCancel={() => {
changeVisibility(!visible);
setnewNote({
private: false,
critical: false,
text: ""
});
}}>
<div>
{t("notes.fields.critical")}
<Switch
title={t("notes.fields.critical")}
onChange={checked => {
setnewNote({ ...newNote, critical: checked });
}}
/>
</div>
<div>
{t("notes.fields.private")}
<Switch
title={t("notes.fields.private")}
onChange={checked => {
setnewNote({ ...newNote, private: checked });
}}
/>
</div>
<Input.TextArea
rows={8}
defaultValue={newNote.text}
placeholder={t("notes.labels.newnoteplaceholder")}
onChange={e => {
setnewNote({ ...newNote, text: e.target.value });
}}
/>
</Modal>
);
}

57
client/src/components/note-upsert-modal/note-upsert-modal.component.jsx Normal file
View File

@@ -0,0 +1,57 @@
import { Input, Modal, Switch } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
export default function NoteUpsertModalComponent({
visible,
changeVisibility,
noteState,
setNoteState,
updateExistingNote,
insertNewNote
}) {
const { t } = useTranslation();
return (
<Modal
title={noteState?.id ? t("notes.actions.edit") : t("notes.actions.new")}
visible={visible}
okText={t("general.labels.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>
<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>
);
}

75
client/src/components/note-upsert-modal/note-upsert-modal.container.jsx Normal file
View File

@@ -0,0 +1,75 @@
import { notification } from "antd";
import React, { useEffect, useState } from "react";
import { useMutation } from "react-apollo";
import { useTranslation } from "react-i18next";
import { INSERT_NEW_NOTE, UPDATE_NOTE } from "../../graphql/notes.queries";
import NoteUpsertModalComponent from "./note-upsert-modal.component";
export default function NoteUpsertModalContainer({
jobId,
visible,
changeVisibility,
refetch,
existingNote
}) {
const { t } = useTranslation();
const [insertNote] = useMutation(INSERT_NEW_NOTE);
const [updateNote] = useMutation(UPDATE_NOTE);
const [noteState, setNoteState] = useState({
private: false,
critical: false,
text: ""
});
useEffect(() => {
//Required to prevent infinite looping.
if (existingNote) {
setNoteState(existingNote);
}
}, [existingNote]);
const insertNewNote = () => {
insertNote({
variables: {
noteInput: [
{ ...noteState, jobid: jobId, created_by: "patrick@bodyshop.app" } //TODO: Fix the created by.
]
}
}).then(r => {
notification["success"]({
message: t("notes.successes.create")
});
});
refetch();
changeVisibility(!visible);
};
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")
});
});
refetch();
changeVisibility(!visible);
};
return (
<NoteUpsertModalComponent
visible={visible}
changeVisibility={changeVisibility}
updateExistingNote={updateExistingNote}
insertNewNote={insertNewNote}
noteState={noteState}
setNoteState={setNoteState}
/>
);
}

38
client/src/graphql/notes.queries.js
View File

@@ -9,3 +9,41 @@ export const INSERT_NEW_NOTE = gql`
}
}
`;
export const QUERY_NOTES_BY_JOB_PK = gql`
query QUERY_NOTES_BY_JOB_PK($id: uuid!) {
jobs_by_pk(id: $id) {
id
notes {
created_at
created_by
critical
id
jobid
private
text
updated_at
}
}
}
`;
export const UPDATE_NOTE = gql`
mutation UPDATE_NOTE($noteId: uuid!, $note: notes_set_input!) {
update_notes(where: { id: { _eq: $noteId } }, _set: $note) {
returning {
id
}
}
}
`;
export const DELETE_NOTE = gql`
mutation DELETE_NOTE($noteId: uuid!) {
delete_notes(where: { id: { _eq: $noteId } }) {
returning {
id
}
}
}
`;

3
client/src/pages/jobs-detail/jobs-detail.page.jsx
View File

@@ -5,6 +5,7 @@ import JobLinesContainer from "../../components/job-lines/job-lines.container.co
import JobTombstone from "../../components/job-tombstone/job-tombstone.component";
import JobsDocumentsContainer from "../../components/jobs-documents/jobs-documents.container";
import { FaRegStickyNote } from "react-icons/fa";
import JobNotesContainer from "../../components/jobs-notes/jobs-notes.container";
function JobsDetailPage({ jobId, hash, data, match }) {
const { t } = useTranslation();
@@ -64,7 +65,7 @@ function JobsDetailPage({ jobId, hash, data, match }) {
</span>
}
key='#notes'>
lol notes here
<JobNotesContainer jobId={jobId} />
</Tabs.TabPane>
</Tabs>
</Row>

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

@@ -96,13 +96,26 @@
}
},
"notes": {
"actions": {
"actions": "Actions",
"deletenote": "Delete Note",
"edit": "Edit Note",
"new": "New Note"
},
"fields": {
"createdby": "Created By",
"critical": "Critical",
"private": "Private",
"text": "Contents"
"text": "Contents",
"updatedat": "Updated At"
},
"labels": {
"newnoteplaceholder": "Add a note..."
},
"successes": {
"created": "Note created successfully.",
"deleted": "Note deleted successfully.",
"updated": "Note updated successfully."
}
},
"profile": {

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

@@ -96,13 +96,26 @@
}
},
"notes": {
"actions": {
"actions": "Comportamiento",
"deletenote": "Borrar nota",
"edit": "Editar nota",
"new": "Nueva nota"
},
"fields": {
"createdby": "Creado por",
"critical": "Crítico",
"private": "Privado",
"text": "Contenido"
"text": "Contenido",
"updatedat": "Actualizado en"
},
"labels": {
"newnoteplaceholder": "Agrega una nota..."
},
"successes": {
"created": "Nota creada con éxito.",
"deleted": "Nota eliminada con éxito.",
"updated": "Nota actualizada con éxito."
}
},
"profile": {

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

@@ -96,13 +96,26 @@
}
},
"notes": {
"actions": {
"actions": "actes",
"deletenote": "Supprimer la note",
"edit": "Note éditée",
"new": "Nouvelle note"
},
"fields": {
"createdby": "Créé par",
"critical": "Critique",
"private": "privé",
"text": "Contenu"
"text": "Contenu",
"updatedat": "Mis à jour à"
},
"labels": {
"newnoteplaceholder": "Ajouter une note..."
},
"successes": {
"created": "Remarque créée avec succès.",
"deleted": "Remarque supprimée avec succès.",
"updated": "Remarque mise à jour avec succès."
}
},
"profile": {