· 6 years ago · Nov 15, 2019, 01:54 PM
1$(function () {
2 $.noConflict();
3 $(document).ready(loadPage);
4
5 function addHeaders(item) {
6 var dialog = $('#dialogBox').dialog({
7 autoOpen: false,
8 width: "50%",
9 modal: true,
10 closeOnEscape: true,
11 buttons: {
12 Save: function () {
13 var items = $("#dialogGrid").jsGrid("option", "data");
14 var data = new Object();
15 for (var i = 0; i < items.length; ++i) {
16 data[items[i].Header] = items[i].Value;
17 }
18 var payload = {};
19 payload.api = item.api;
20 payload.pdata_headers = JSON.stringify(item.headers);
21 payload.key = item.consumerid ? item.consumerid : '';
22 payload.headers = JSON.stringify(data);
23 payload.body_headers = $("#body_headers").val();
24 if (!validate(payload.body_headers)) {
25 alert("Invalid body headers");
26 return false;
27 }
28 $.ajax({
29 type: 'POST',
30 url: '/clarivate/customheaders/' + item["pluginid"],
31 contentType: "application/x-www-form-urlencoded",
32 data: payload,
33 cache: false,
34 }).done(function (r) {
35 $('#dialogBox').dialog("close");
36 });
37 },
38 Cancel: function () {
39 $(this).dialog("close");
40 }
41 },
42 });
43 loadHeaders(item);
44 dialog.dialog("option", "title", "Add Headers (Api: " + item.api + " Application: " + item.application + ")").dialog("open");
45 $("#dialogForm").html("Add headers to body (Globally) <input type='text' id='body_headers' name='body_headers' size='80'>");
46 $('#dialogGrid').jsGrid('refresh');
47 }
48
49 function validate(s) {
50 return (s == "" || s.split(",").indexOf("") === -1) ? true : false;
51 }
52
53 function enableSave(enable) {
54 var buttons = $("#dialogBox").dialog("option", "buttons");
55 if (!enable) {
56 $(":button:contains('Save')").addClass("ui-state-disabled");
57 } else {
58 $(":button:contains('Save')").removeClass("ui-state-disabled");
59 }
60 }
61
62 function loadHeaders(item) {
63 $("#dialogGrid").jsGrid("destroy");
64 $("#dialogGrid").jsGrid({
65 height: 300,
66 width: "100%",
67 filtering: false,
68 paging: true,
69 editing: true,
70 autoload: true,
71 sorting: true,
72 inserting: true,
73 pageSize: 5,
74 deleteConfirm: "Do you really want to delete this Header?",
75 onItemInserting: function (args) {
76 enableSave(true);
77 },
78 controller: {
79 loadData: function () {
80 var d = $.Deferred();
81 $.getJSON('/clarivate/customheaders/' + item.api, function (data) {
82 console.log('data', data);
83 item.pluginid = data.pluginid;
84 if (!data.pluginid) {
85 $("#dialogGrid").jsGrid("destroy");
86 $("#dialogGrid").append("Custom-Key-Headers plugin not defined for this API");
87 enableSave(false);
88 }
89 item.headers = data.headers;
90 item.body_headers = data.body_headers;
91 var hdata = [];
92 $.each(data.headers, function (index, val) {
93 var m = this;
94 console.log('data.headers', item.consumerid, data.headers[index], m.headers)
95 if (item.consumerid && data.headers[index].key == item.consumerid) {
96 $.each(m.headers, function (key, val) {
97 var obj = new Object();
98 obj["Header"] = key;
99 obj["Value"] = val;
100 hdata.push(obj);
101 });
102 }
103 });
104 $('#body_headers').val(item.body_headers);
105 d.resolve(hdata);
106 });
107 return d.promise();
108 }
109 },
110
111 fields: [
112 {
113 name: "Header", type: "text", width: "45%",
114 validate: {
115 validator: "pattern",
116 param: "^[a-z0-9A-Z_\-]+$"
117 }
118 },
119 {
120 name: "Value", type: "text", width: "45%",
121 validate: {
122 validator: "pattern",
123 param: "^[a-z0-9A-Z\s]+$",
124 message: function (value, item) {
125 return "Entered value \"" + value + "\" is not valid; It must not contain special characters. List: !#$ %& () * +, -./: ;<=>?@[\]^ _`{|}~";
126 },
127 }
128 },
129 { type: "control", width: "10%" }
130 ]
131 });
132
133 }
134
135 function loadPage() {
136 $("#jsGrid").jsGrid("destroy");
137 $('#jsGrid').jsGrid({
138 width: "100%",
139 height: "500px",
140 pageSize: 10,
141 pageSizes: [10, 20, 50, 100],
142 filtering: true,
143 sorting: true,
144 paging: true,
145 autoload: true,
146 pageLoading: true,
147 pageIndex: 1,
148 editing: false,
149 rowClick: function (args) {
150 if ((args.event.target.cellIndex == 5) && (admin && admin == "true")) {
151 this.editItem(args.event.target.closest("tr"));
152 }
153 },
154 _createPager: function () {
155 var $result = $("<div>").append(this._createPagerByFormat()).append(" ");
156 var $selectBox = $("<select>").attr("class", "pageSize")
157 .on('change', function (event) { $("#jsGrid").jsGrid("option", "pageSize", event.currentTarget.value); });
158 var currentSelectBoxValue = this.pageSize;
159 $.each(this.pageSizes, function (index, value) {
160 var optionElement = $("<option>").attr("value", value).text(value);
161 if (value === Number(currentSelectBoxValue)) {
162 optionElement.attr("selected", true);
163 }
164 optionElement.appendTo($selectBox);
165 });
166 $result.append("<span>Page size: </span>").append($selectBox);
167 $result.addClass(this.pagerClass);
168 return $result;
169 },
170 onItemEditing: function (args) {
171 if (!args.item.apikey) args.cancel = true;
172 },
173 controller: {
174 updateItem: function (item) {
175 var result = $.Deferred();
176 var payload = {};
177 payload.plan = item.plan;
178 payload.apikey = item.apikey;
179 payload.application = item.application;
180 payload.api = item.api;
181 $.ajax({
182 type: 'POST',
183 url: '/clarivate/' + item.application + '/subscribe/' + item.api,
184 dataType: 'json',
185 data: payload,
186 contentType: "application/x-www-form-urlencoded",
187 cache: false,
188 }).done(function (r) {
189 alert('Key updated....');
190 $("#jsGrid").jsGrid("loadData");
191 });
192 return result.promise();
193 },
194
195 loadData: function (filter) {
196 var d = $.Deferred();
197 $.getJSON('/clarivate/subscriptions', { filter }, function (data) {
198 if (data.subscriptions != null) {
199 d.resolve({ data: data.subscriptions.items, itemsCount: data.subscriptions.count });
200 } else {
201 d.resolve({ data: 0, itemsCount: 0 });
202 }
203 $(".jsgrid-cell").css("overflow", "hidden");
204 })
205 .fail((err) => {
206 if (err.status === 403) {
207 window.location.reload();
208 }
209 });
210 return d.promise();
211 }
212 },
213 fields: [
214 {
215 name: "api", type: "text", title: "API", width: 50, editing: false,
216 itemTemplate: function (value, item) {
217 return $("<a>").attr("href", item._links.apis.href + '/' + item.api).text(value);
218 }
219 },
220 {
221 name: "application_name", type: "text", title: "Application", width: 110, editing: false,
222 itemTemplate: function (value, item) {
223 return $("<a>").attr("href", item._links.application.href.toLowerCase()).text(value);
224 }
225 },
226 {
227 name: "owner", type: "text", title: "Owner(s)", width: 110, editing: false,
228 itemTemplate: function (value, item) {
229 let resp = [];
230 item.owner_data.forEach(function (owner) {
231 resp.push("<a href=\'/users/" + owner.users_id + "\'>" + owner.email + "</a>");
232 });
233 return resp.join(', ');
234 }
235 },
236 { name: "consumerid", type: "text", title: "Consumer ID", width: 110, editing: false, sorting: false },
237 {
238 name: "auth", title: "Auth", width: 30, editing: false, sorting: false,
239 itemTemplate: function (value, item) {
240 var $authtype = $("<img>").attr("title", "Click to view application")
241 .attr("src", (item.auth == 'oauth2') ? "/images/oauth2-icon-32.png" : "/images/key-icon-32.png");
242 $authtype.on("click", function () {
243 window.location.href = item._links.application.href.toLowerCase();
244 });
245 return $("<td>").append($authtype);
246 }
247 },
248 {
249 name: "apikey", type: "text", title: "Key", width: 160, sorting: false, filtering: false,
250 validate: {
251 validator: function (value, item) {
252 if (!value) return false;
253 if (value.length < 8 || value.length > 50) return false;
254 if (!value.match('^[a-zA-Z0-9_\-]*$')) return false;
255 return true;
256 },
257 message: function (value, item) {
258 if (!value) return "Key value is required";
259 if (value.length < 8 || value.length > 50) return "Key cannot be less than 8 or more than 50 characters long";
260 if (!value.match('^[a-zA-Z0-9_\-]*$')) return "Pattern not allowed";
261 return "";
262 }
263 }
264 },
265 { name: "plan", type: "text", title: "Plan", width: 50, editing: false },
266 {
267 type: "control",
268 _createFilterSwitchButton: function () {
269 return this._createOnOffSwitchButton("filtering", this.searchModeButtonClass, false);
270 },
271 itemTemplate: function (value, item) {
272 var $editButton = $("<input>").attr("type", "button").addClass("jsgrid-button jsgrid-edit-button")
273 .on("click", function () {
274 addHeaders(item)
275 });
276 return $("<td>").append($editButton);
277 }
278 }
279 ]
280 });
281 $("#jsGrid").jsGrid("option", "filtering", false);
282 $(".jsgrid-cell").css("word-wrap", "break-word")
283 .css("overflow", "hidden");
284 }
285});