Skip to content

Commit

Permalink
feat(component): Add comment reply/create form
Browse files Browse the repository at this point in the history 
ref: #1 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#307 nofusscomputing/centurion_erp#319
  • Loading branch information
@jon-nfc
jon-nfc committed Oct 8, 2024
1 parent e3eed8d commit eec6f87
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 25 deletions.
148 changes: 127 additions & 21 deletions src/components/page/ticket/Comment.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ import TextArea from "../../form/Textarea"
import { Form } from "react-router-dom"
import Select from "../../form/Select"
import TextField from "../../form/Textfield"
import Button from "../../form/Button"
import { useState } from "react"
import { apiFetch } from "../../../hooks/apiFetch"



Expand All @@ -11,7 +14,9 @@ const TicketCommentForm = ({
comment_data = {},
metadata = null,
post_url = null,
task_comment = false
parent_id = null,
ticket_id = null,
commentCallback = null
}) => {

console.log(post_url)
Expand All @@ -25,13 +30,77 @@ const TicketCommentForm = ({

}


const [task_comment, setTaskComment] = useState(false)

const [form_data, setFormData] = useState({})

const handleChange = (e) => {

console.log(`pos url is ${post_url}`)

let field_value = e.target.value

if( e.target.type === 'checkbox' ) {

field_value = e.target.checked

}

if( ! form_data.comment_type ) {

for( let comment_type of metadata.actions[action_keyword]['comment_type'].choices) {

if( 'comment' === String(comment_type.display_name).toLowerCase() ) {
setFormData((prevState) => ({ ...prevState, ['comment_type']: comment_type.value }))
}

}
}

if( ! form_data.ticket && ticket_id ) {

setFormData((prevState) => ({ ...prevState, ['ticket']: ticket_id }))

}

if( ! form_data.parent && parent_id ) {

setFormData((prevState) => ({ ...prevState, ['parent']: parent_id }))

}

setFormData((prevState) => ({ ...prevState, [e.target.id]: field_value }))

console.log(JSON.stringify(form_data))
}

const [form_error, setFormError] = useState(null)

return (
metadata && <div className="">
<div className={comment_class}>

<Form
onSubmit={async e => {

e.preventDefault();


const response = await apiFetch(
String(post_url).split('api/v2')[1],
setFormError,
'POST',
form_data
)

if( response.status === 201 ) {

commentCallback();
setFormData({});
e.target.reset();
}

}
}
>
Expand All @@ -47,7 +116,7 @@ const TicketCommentForm = ({
// error_text = {form_error && form_error[field_key]}
required = {metadata.actions[action_keyword]['source'].required}
// value={1}
// onChange={handleChange}
onChange={handleChange}
/>
</span>
</fieldset>
Expand All @@ -61,7 +130,7 @@ const TicketCommentForm = ({
// error_text = {form_error && form_error[field_key]}
required = {metadata.actions[action_keyword]['status'].required}
value={1}
// onChange={handleChange}
onChange={handleChange}
/>
</span>
</fieldset>}
Expand All @@ -75,7 +144,7 @@ const TicketCommentForm = ({
// error_text = {form_error && form_error[field_key]}
// required = {metadata.actions[action_keyword]['responsible_user'].required}
// value={1}
// onChange={handleChange}
onChange={handleChange}
/>
</span>
</fieldset>}
Expand All @@ -89,7 +158,7 @@ const TicketCommentForm = ({
// error_text = {form_error && form_error[field_key]}
// required = {metadata.actions[action_keyword]['responsible_user'].required}
// value={1}
// onChange={handleChange}
onChange={handleChange}
/>
</span>
</fieldset>}
Expand All @@ -103,7 +172,7 @@ const TicketCommentForm = ({
// error_text = {form_error && form_error[field_key]}
// required = {metadata.actions[action_keyword]['responsible_user'].required}
// value={1}
// onChange={handleChange}
onChange={handleChange}
/>
<FieldData
metadata={metadata}
Expand All @@ -117,7 +186,10 @@ const TicketCommentForm = ({
<hr />
<TextArea
required = {true}
id='body'
class_name='fieldset-tester'
onChange={handleChange}
value={form_data.body}
/>

<hr />
Expand All @@ -134,7 +206,7 @@ const TicketCommentForm = ({
// error_text = {form_error && form_error[field_key]}
// required = {metadata.actions[meta_action][field_key].required}
// value={value}
// onChange={handleChange}
onChange={handleChange}
/>
</span>
</fieldset>}
Expand All @@ -149,7 +221,7 @@ const TicketCommentForm = ({
// error_text = {form_error && form_error[field_key]}
// required = {metadata.actions[meta_action][field_key].required}
// value={value}
// onChange={handleChange}
onChange={handleChange}
/>
</span>
</fieldset>}
Expand All @@ -164,7 +236,7 @@ const TicketCommentForm = ({
// error_text = {form_error && form_error[field_key]}
// required = {metadata.actions[meta_action][field_key].required}
// value={value}
// onChange={handleChange}
onChange={handleChange}
/>
</span>
</fieldset>}
Expand All @@ -179,24 +251,58 @@ const TicketCommentForm = ({
// error_text = {form_error && form_error[field_key]}
// required = {metadata.actions[meta_action][field_key].required}
// value={value}
// onChange={handleChange}
onChange={handleChange}
/>
</span>
</fieldset>}

</div>

<div style={{
// backgroundColor: '#ff0000',
display: 'block',
padding: '0px',
margin: 'auto',
marginRight: '5px',
marginBottom: '5px',
width: 'fit-content'
}}>
<button className="form common-field" type="submit">Comment</button>
</div>
<Button
button_text="Comment"
menu_entries={metadata.actions[action_keyword]['comment_type'].choices}
MenuClickCallback={(menu_value) => {

const comment_types = metadata.actions[action_keyword]['comment_type'].choices
let menu_entry = ''

console.log(`menu entry click value ${menu_value}`)

for( let comment_type of comment_types) {

if( Number(menu_value) === Number(comment_type.value) ) {
menu_entry = String(comment_type.display_name).toLowerCase()
}

}

menu_entry = String(menu_entry).toLowerCase()

console.log(`menu entry click was ${menu_entry}`)

if( menu_entry === 'comment' ) {

setTaskComment(false)

}else if( menu_entry === 'task' ) {

setTaskComment(true)

}else if( menu_entry === 'solution' ) {

setTaskComment(false)

}else if( menu_entry === 'notification' ) {

setTaskComment(false)

}

setFormData((prevState) => ({ ...prevState, ['comment_type']: menu_value }))

console.log(`menu entry click was set to ${task_comment}`)
} }
/>

</Form>
</div>
Expand Down
15 changes: 12 additions & 3 deletions src/components/page/ticket/Comments.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import TicketCommentForm from "./Comment"
const TicketComments = ({
discussion = false,
comment_data = {},
metadata = null
metadata = null,
ticket_id = null
}) => {

let comment_header = ' wrote'
Expand Down Expand Up @@ -80,6 +81,7 @@ const TicketComments = ({


const [ threads, setThreads ] = useState(null)
const [ reload, setRelaod ] = useState(false)

useEffect(() => {

Expand All @@ -90,8 +92,10 @@ const TicketComments = ({
setThreads(data)
}
)

setRelaod(false)
}
},[])
},[ reload ])


if( comment_type === 'action' ) {
Expand Down Expand Up @@ -286,7 +290,7 @@ const TicketComments = ({
/>
</h3>
<ul className="replies">
{threads.results.map((comment) => (
{threads.results.map((comment, index) => (
<li className="replies">
<TicketComments
comment_data={comment}
Expand All @@ -299,6 +303,11 @@ const TicketComments = ({
<TicketCommentForm
metadata={metadata}
post_url = {comment_data['_urls']['threads']}
ticket_id={ticket_id}
parent_id = {threads.results[0].parent}
commentCallback={() => {
setRelaod(true)
}}
/>
</li>
</ul>
Expand Down
8 changes: 7 additions & 1 deletion src/layout/Ticket.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import TicketCommentForm from "../components/page/ticket/Comment";
const Ticket = () => {

const [comments, setComments] = useState(null)
const [ reload, setRelaod ] = useState(false)

const [comment_metadata, setCommentMetaData] = useState(null);

Expand Down Expand Up @@ -49,7 +50,7 @@ const Ticket = () => {
},
)

}, [params])
}, [params, reload])


useEffect(() => {
Expand Down Expand Up @@ -107,6 +108,7 @@ const Ticket = () => {
<TicketComments
comment_data={comment}
metadata={comment_metadata}
ticket_id={page_data['id']}
/>
</li>
)
Expand All @@ -115,6 +117,10 @@ const Ticket = () => {
<TicketCommentForm
metadata={comment_metadata}
post_url = {page_data['_urls']['comments']}
ticket_id={page_data['id']}
commentCallback={() => {
setRelaod(true)
}}
/>
</li>
</ul>
Expand Down

0 comments on commit eec6f87

Please sign in to comment.