Skip to content

Commit

Permalink
feat(component): Add ticket comment inline editing
Browse files Browse the repository at this point in the history 
ref: #26 #27 nofusscomputing/centurion_erp#248
  • Loading branch information
@jon-nfc
jon-nfc committed Nov 15, 2024
1 parent 54fdcff commit cc58aa9
Show file tree
Hide file tree
Showing 3 changed files with 132 additions and 9 deletions.
31 changes: 30 additions & 1 deletion src/components/page/ticket/TicketComment.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,10 @@ const TicketComment = ({
discussion = false,
comment_data = {},
metadata = null,
ticket_id = null
ticket_id = null,
post_url,
edit_callback = null,
callback_value = null
}) => {

let comment_header = ' wrote'
Expand All @@ -20,6 +23,8 @@ const TicketComment = ({

let comment_type = ''

let [ editing, setIsEditing ] = useState(false)

try {

comment_type = String(metadata.fields.comment_type.choices[Number(comment_data.comment_type)-1].display_name).toLowerCase()
Expand Down Expand Up @@ -127,9 +132,15 @@ const TicketComment = ({
<IconLoader
name={'reply'}
/>
<span style={{
cursor: 'pointer'
}} onClick={(e) => {
setIsEditing( true )
}}>
<IconLoader
name={'edit'}
/>
</span>
</div>
)

Expand All @@ -145,6 +156,23 @@ const TicketComment = ({
return (
metadata &&
<div className={discussion_class}>
{ editing &&
<TicketCommentForm
comment_data={comment_data}
metadata={metadata}
post_url = {post_url}
ticket_id={ticket_id}
is_edit = {true}
cancelbuttonOnSubmit={(e) => {
setIsEditing(false)
}}
commentCallback={() => {
setIsEditing(false)
edit_callback( callback_value ? false : true )
}}
/>
}
{ ! editing &&
<div className={comment_class}>

<h4 className={comment_class}>
Expand Down Expand Up @@ -272,6 +300,7 @@ const TicketComment = ({
</fieldset>
</div>
</div>
}
{ threads &&
<div className="replies">
<h3 className="replies">
Expand Down
107 changes: 99 additions & 8 deletions src/components/page/ticket/TicketCommentForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,83 @@ const TicketCommentForm = ({
post_url = null,
parent_id = null,
ticket_id = null,
commentCallback = null
commentCallback = null,
is_edit = false,
cancelbuttonOnSubmit = null,
}) => {

console.log(post_url)
if( String(post_url).includes('?') ) {
console.log('url has qs')
post_url = String(post_url).split('?')[0]
}

let HTTP_METHOD = 'POST'

if( is_edit ) {

post_url += '/' + comment_data['id']
HTTP_METHOD = 'PATCH'
}

let comment_class = 'comment-type-default comment-form'

const [task_comment, setTaskComment] = useState(false)

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

if( comment_data && is_edit ) {

edit_form_data = {
'body': comment_data['body'],
'source': comment_data['source'],
}

}


const comment_types = metadata.fields['comment_type'].choices
let comment_type = ''

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

for( let meta_comment_type of comment_types) {

if( Number(comment_data['comment_type']) === Number(meta_comment_type.value) ) {
comment_type = String(meta_comment_type.display_name).toLowerCase()
}

}


comment_type = String(comment_type).toLowerCase()

let is_task_comment = false

let is_solution_comment = false

let is_notification_comment = false


console.log(`menu entry is ${comment_type}`)

if( comment_type === 'task' ) {

is_task_comment = true

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

is_solution_comment = true

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

is_notification_comment = true

}



const [task_comment, setTaskComment] = useState( is_task_comment )

const [form_data, setFormData] = useState(edit_form_data)

const handleChange = (e) => {

Expand All @@ -38,7 +106,7 @@ const TicketCommentForm = ({

}

if( ! form_data.comment_type ) {
if( ! form_data.comment_type && ! is_edit ) {

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

Expand Down Expand Up @@ -81,11 +149,17 @@ const TicketCommentForm = ({
const response = await apiFetch(
post_url,
setFormError,
'POST',
HTTP_METHOD,
form_data
)

if( response.status === 201 ) {
if(
response.status === 201
|| (
response.status === 200
&& is_edit
)
) {

commentCallback();
setFormData({});
Expand All @@ -103,6 +177,7 @@ const TicketCommentForm = ({
id = 'source'
field_data={metadata.fields['source']}
onChange={handleChange}
value = {form_data['source']}
/>
</span>
</fieldset>
Expand All @@ -111,7 +186,7 @@ const TicketCommentForm = ({
<Select
id = 'status'
field_data={metadata.fields['status']}
value={1}
value={comment_data['status']}
onChange={handleChange}
/>
</span>
Expand Down Expand Up @@ -225,6 +300,20 @@ const TicketCommentForm = ({

</div>

<div>
{ is_edit &&
<Button
buttonClickCallback={cancelbuttonOnSubmit}
button_text = 'Cancel'
/>
}
{ is_edit &&
<Button
button_text="Comment"
/>

}
{ ! is_edit &&
<Button
button_text="Comment"
menu_entries={metadata.fields['comment_type'].choices}
Expand Down Expand Up @@ -270,6 +359,8 @@ const TicketCommentForm = ({
console.log(`menu entry click was set to ${task_comment}`)
} }
/>
}
</div>

</Form>
</div>
Expand Down
3 changes: 3 additions & 0 deletions src/components/page/ticket/TicketComments.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,11 @@ const TicketComments = ({
<li>
<TicketComment
comment_data={comment}
post_url = {comments_url}
metadata={comment_metadata}
ticket_id={ticket_id}
edit_callback = {setRelaod}
callback_value = {reload}
/>
</li>
)
Expand Down

0 comments on commit cc58aa9

Please sign in to comment.