Skip to content

Instantly share code, notes, and snippets.

@Sarapulov

Sarapulov/observer_example.html

Created September 7, 2017 08:04
Show Gist options
  • Save Sarapulov/9ebc45e981c69081780dfd8e6ef646da to your computer and use it in GitHub Desktop.
Save Sarapulov/9ebc45e981c69081780dfd8e6ef646da to your computer and use it in GitHub Desktop.
Download ZIP
observer_example.html
Raw
observer_example.html
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://assets.zendesk.com/apps/sdk-assets/css/1/zendesk_garden.css" type="text/css">
<style>
#main > div {
display: block;
}
</style>
</head>
<body id="app_body">
<div id="approver_ui">
<h2>Approver UI</h2>
<br />
<button class="qa_approve c-btn c-btn--large">APPROVE</button>
<button class="qa_deny c-btn c-btn--large u-bg-mandy">DENY</button>
<br />
<br />
</div>
<div id="main">
<hr />
<br />
<br />
<h2>Logger</h2>
</div>
<script src="https://cdn.jsdelivr.net/g/[email protected],[email protected]"></script>
<script type="text/javascript" src="https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js"></script>
<script>
(function (client, PARAMS, _, $) {
'use strict';
client.on('app.registered', init); // init when app is registered in UI
function init(e) { // shape global object and init requester check logic
console.log("e",e);
PARAMS.ticket_id = e.context.ticketId;
PARAMS.qa_threshold = 'qa_threshold'; // user field tagger
PARAMS.qa_approval_status_field_id = 25276463; // ticket field [QA] APPROVAL STATUS - tagger
PARAMS.qa_number_of_approve_requests = 25276483; // ticket field [QA] NUMBER OF APPROVE REQUESTS - numeric
PARAMS.qa_approved_tag = 'qa_approved';
PARAMS.tag_for_approval = 'qa_approve_required';
addObserver();
getCurrentAgent();
handleClicks();
}
function getCurrentAgent(){
client.get('currentUser.customField:'+PARAMS.qa_threshold).then(agent_field => {
return agent_field['currentUser.customField:'+PARAMS.qa_threshold];
}).then(qa_threshold => {
PARAMS.threshold = !_.isUndefined(qa_threshold) ? +qa_threshold : 0;
console.log("PARAMS.threshold",PARAMS.threshold);
$('#main').append('<div>Current Agent threshold: '+PARAMS.threshold+'</div>');
return PARAMS.threshold;
}).then(() => {
return client.get('currentUser').then(user => { return user['currentUser'].id; });
}).then(agent_id => {
PARAMS.agent_id = agent_id;
console.log("agent_id",PARAMS.agent_id);
$('#main').append('<div>Current Agent user ID: '+agent_id+'</div>');
return agent_id;
}).then(agent_id => {
$('#main').append('<div>Searching tickets: <b>type:ticket -tags:'+PARAMS.qa_approved_tag+' status(less than)solved assignee:'+PARAMS.agent_id+'</b></div>');
return client.request({url: '/api/v2/search.json?query=' + encodeURIComponent('type:ticket -tags:'+PARAMS.qa_approved_tag+' status<solved assignee:'+PARAMS.agent_id)}); // -tags:qa_approved status<solved assignee:249881566
}).then(search_results => {
$('#main').append('<div>Tickets assigned, not solved excluding approved: '+search_results.count+'</div>');
PARAMS.search_results = search_results.count;
console.log("Search results", search_results);
}).then(() => {
$('#main').append('<div>Searching tickets: <b>type:ticket status(less than)solved assignee:'+PARAMS.agent_id+'</b></div>');
return client.request({url: '/api/v2/search.json?query=' + encodeURIComponent('type:ticket status<solved assignee:'+PARAMS.agent_id)}); // -tags:qa_approved status<solved assignee:249881566
}).then(search_results_all => {
console.log("Search results", search_results_all);
PARAMS.search_results_all = search_results_all.count;
$('#main').append('<div>All tickets assigned, not solved: '+search_results_all.count+'</div>');
$('#main').append('<div>All tickets approved: '+(PARAMS.search_results_all-PARAMS.search_results)+'</div>');
PARAMS.current_threshold_status = (((PARAMS.search_results_all-PARAMS.search_results) / PARAMS.search_results_all) * 100).toFixed(2);
$('#main').append('<div>% of tickets approved: '+PARAMS.current_threshold_status+'%</div>');
$('#main').append('<div>Will next comment be sent for appoval: '+ (PARAMS.current_threshold_status <= PARAMS.threshold) +'</div>');
return (PARAMS.current_threshold_status <= PARAMS.threshold);
}).then( isApprovalNeeded => {
if (isApprovalNeeded) {
client.set('comment.type', 'internalNote');
client.invoke('notify', 'This comment will be sent for approval');
$('#main').append('<div>Adding ticket tag: '+PARAMS.tag_for_approval+'</div>');
client.invoke('ticket.tags.add', PARAMS.tag_for_approval);
client.get('ticket.customField:custom_field_'+PARAMS.qa_number_of_approve_requests).then(field => {
let field_value = field['ticket.customField:custom_field_'+PARAMS.qa_number_of_approve_requests];
$('#main').append('<div>Current N of approval requests: '+field_value+'</div>');
console.log("N of approval requests: " + field_value);
client.set('ticket.customField:custom_field_'+PARAMS.qa_number_of_approve_requests, field_value ? +field_value + 1 : 1).then(f => {
$('#main').append('<div>New N of approval requests: '+f['ticket.customField:custom_field_'+PARAMS.qa_number_of_approve_requests]+'</div>');
})
});
}
});
}
function handleClicks(){
$('.qa_approve').on('click', function(){
handleApprove();
});
$('.qa_deny').on('click', function(){
handleDeny();
});
}
function handleApprove(){
client.invoke('notify', 'APPROVING RIGHT NOW!');
client.set('ticket.customField:custom_field_'+PARAMS.qa_approval_status_field_id, PARAMS.qa_approved_tag).then(f => {
$('#approver_ui').append('<div>Set field status to approve</div>');
});
client.set('comment.text', '').then(() => {
return client.set('comment.type', 'publicReply');
}).then(() => {
return client.get('ticket.comments');
}).then(comms => {
console.log(comms['ticket.comments']);
return comms['ticket.comments'];
}).then(comments => {
console.log("latest_comment",comments);
let latest_comment_value = comments[0].value,
latest_comment_author_id = comments[0].author.id;
return client.request({
url: '/api/v2/tickets/' + PARAMS.ticket_id + '.json',
type: 'PUT',
contentType: 'application/json',
data: JSON.stringify({
"ticket": {
"comment": {
"html_body": latest_comment_value,
"author_id": latest_comment_author_id,
"public": true
}
}
})
})
}).then(() => {
client.invoke('notify', 'UPDATING TICKET');
});
}
function handleDeny(){
client.invoke('notify', 'SOMETHING WILL HAPPEN WHEN DENY!');
}
/////////// DOM mutation
// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
function addObserver(height){
// select the target node
// var target = document.getElementById('main');
// TODO remove jquery dependency
// TODO confif config to make it ligher
var target = $('body')[0];
// create an observer instance
var observer = new MutationObserver(function(mutations) {
let h = height || $(document).height() + 'px',
size = { width: '100%', height: h };
client.invoke('resize', size);
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
// pass in the target node, as well as the observer options
observer.observe(target, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
// later, you can stop observing
// observer.disconnect();
}
})(ZAFClient.init(),{},_,jQuery);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment