|
Lines 1-8
Link Here
|
| 1 |
<template> |
1 |
<template> |
| 2 |
<div v-if="!initialized">{{ $__("Loading") }}</div> |
2 |
<div id="agreements_list"> |
| 3 |
<div v-else-if="agreements" id="agreements_list"> |
|
|
| 4 |
<Toolbar v-if="before_route_entered" /> |
3 |
<Toolbar v-if="before_route_entered" /> |
| 5 |
<fieldset v-if="agreements.length" class="filters"> |
4 |
<fieldset class="filters"> |
| 6 |
<label for="expired_filter">{{ $__("Filter by expired") }}:</label> |
5 |
<label for="expired_filter">{{ $__("Filter by expired") }}:</label> |
| 7 |
<input |
6 |
<input |
| 8 |
type="checkbox" |
7 |
type="checkbox" |
|
Lines 24-30
Link Here
|
| 24 |
:value="$__('Filter')" |
23 |
:value="$__('Filter')" |
| 25 |
/> |
24 |
/> |
| 26 |
</fieldset> |
25 |
</fieldset> |
| 27 |
<div v-if="agreements.length" class="page-section"> |
26 |
<div class="page-section"> |
| 28 |
<KohaTable |
27 |
<KohaTable |
| 29 |
ref="table" |
28 |
ref="table" |
| 30 |
v-bind="tableOptions" |
29 |
v-bind="tableOptions" |
|
Lines 33-41
Link Here
|
| 33 |
@delete="doDelete" |
32 |
@delete="doDelete" |
| 34 |
></KohaTable> |
33 |
></KohaTable> |
| 35 |
</div> |
34 |
</div> |
| 36 |
<div v-else-if="initialized" class="dialog message"> |
|
|
| 37 |
{{ $__("There are no agreements defined") }} |
| 38 |
</div> |
| 39 |
</div> |
35 |
</div> |
| 40 |
</template> |
36 |
</template> |
| 41 |
|
37 |
|
|
Lines 92-120
export default {
Link Here
|
| 92 |
0: ["show"], |
88 |
0: ["show"], |
| 93 |
"-1": ["edit", "delete"], |
89 |
"-1": ["edit", "delete"], |
| 94 |
}, |
90 |
}, |
|
|
91 |
options: { |
| 92 |
embed: ["vendor"], |
| 93 |
}, |
| 95 |
}, |
94 |
}, |
| 96 |
} |
95 |
} |
| 97 |
}, |
96 |
}, |
| 98 |
beforeRouteEnter(to, from, next) { |
97 |
beforeRouteEnter(to, from, next) { |
| 99 |
next(vm => { |
98 |
next(vm => { |
| 100 |
vm.before_route_entered = true // FIXME This is ugly, but we need to distinguish when it's used as main component or child component (from EHoldingsEBSCOPAckagesShow for instance) |
99 |
vm.before_route_entered = true // FIXME This is ugly, but we need to distinguish when it's used as main component or child component (from EHoldingsEBSCOPAckagesShow for instance) |
| 101 |
if (!vm.building_table) { |
|
|
| 102 |
vm.building_table = true |
| 103 |
vm.getAgreements() |
| 104 |
vm.initialized = true |
| 105 |
} |
| 106 |
}) |
100 |
}) |
| 107 |
}, |
101 |
}, |
| 108 |
methods: { |
102 |
methods: { |
| 109 |
async getAgreements() { |
103 |
async getAgreements() { |
| 110 |
const client = APIClient.erm |
104 |
const client = APIClient.erm |
| 111 |
await client.agreements.getAll().then( |
105 |
this.agreements = await client.agreements.getAll() |
| 112 |
agreements => { |
106 |
this.initialized = true |
| 113 |
this.agreements = agreements |
|
|
| 114 |
this.initialized = true |
| 115 |
}, |
| 116 |
error => {} |
| 117 |
) |
| 118 |
}, |
107 |
}, |
| 119 |
doShow: function (agreement, dt, event) { |
108 |
doShow: function (agreement, dt, event) { |
| 120 |
event.preventDefault() |
109 |
event.preventDefault() |
|
Lines 181-488
export default {
Link Here
|
| 181 |
} |
170 |
} |
| 182 |
this.$refs.table.redraw(this.table_url()) |
171 |
this.$refs.table.redraw(this.table_url()) |
| 183 |
}, |
172 |
}, |
| 184 |
build_datatable: function () { |
|
|
| 185 |
let show_agreement = this.show_agreement |
| 186 |
let edit_agreement = this.edit_agreement |
| 187 |
let delete_agreement = this.delete_agreement |
| 188 |
let select_agreement = this.select_agreement |
| 189 |
let get_lib_from_av = this.get_lib_from_av |
| 190 |
let map_av_dt_filter = this.map_av_dt_filter |
| 191 |
let datatable_url = this.datatable_url |
| 192 |
let default_search = this.$route.query.q |
| 193 |
let actions = this.before_route_entered ? "edit_delete" : "select" |
| 194 |
let table_id = this.table_id |
| 195 |
|
| 196 |
window["vendors"] = this.vendors.map(e => { |
| 197 |
e["_id"] = e["id"] |
| 198 |
e["_str"] = e["name"] |
| 199 |
return e |
| 200 |
}) |
| 201 |
let vendors_map = this.vendors.reduce((map, e) => { |
| 202 |
map[e.id] = e |
| 203 |
return map |
| 204 |
}, {}) |
| 205 |
let avs = [ |
| 206 |
"av_agreement_statuses", |
| 207 |
"av_agreement_closure_reasons", |
| 208 |
"av_agreement_renewal_priorities", |
| 209 |
] |
| 210 |
avs.forEach(function (av_cat) { |
| 211 |
window[av_cat] = map_av_dt_filter(av_cat) |
| 212 |
}) |
| 213 |
|
| 214 |
window["av_agreement_is_perpetual"] = [ |
| 215 |
{ _id: 0, _str: _("No") }, |
| 216 |
{ _id: 1, _str: _("Yes") }, |
| 217 |
] |
| 218 |
|
| 219 |
const table = $("#" + table_id).kohaTable( |
| 220 |
{ |
| 221 |
ajax: { |
| 222 |
url: datatable_url, |
| 223 |
}, |
| 224 |
order: [[0, "asc"]], |
| 225 |
autoWidth: false, |
| 226 |
search: { search: default_search }, |
| 227 |
columnDefs: [ |
| 228 |
{ |
| 229 |
targets: [0, 2], |
| 230 |
render: function (data, type, row, meta) { |
| 231 |
if (type == "display") { |
| 232 |
return escape_str(data) |
| 233 |
} |
| 234 |
return data |
| 235 |
}, |
| 236 |
}, |
| 237 |
], |
| 238 |
columns: [ |
| 239 |
{ |
| 240 |
title: __("Name"), |
| 241 |
data: "me.agreement_id:me.name", |
| 242 |
searchable: true, |
| 243 |
orderable: true, |
| 244 |
render: function (data, type, row, meta) { |
| 245 |
// Rendering done in drawCallback |
| 246 |
return "" |
| 247 |
}, |
| 248 |
}, |
| 249 |
{ |
| 250 |
title: __("Vendor"), |
| 251 |
data: "vendor_id", |
| 252 |
searchable: true, |
| 253 |
orderable: true, |
| 254 |
render: function (data, type, row, meta) { |
| 255 |
return row.vendor_id != undefined |
| 256 |
? escape_str( |
| 257 |
vendors_map[row.vendor_id].name |
| 258 |
) |
| 259 |
: "" |
| 260 |
}, |
| 261 |
}, |
| 262 |
{ |
| 263 |
title: __("Description"), |
| 264 |
data: "description", |
| 265 |
searchable: true, |
| 266 |
orderable: true, |
| 267 |
}, |
| 268 |
{ |
| 269 |
title: __("Status"), |
| 270 |
data: "status", |
| 271 |
searchable: true, |
| 272 |
orderable: true, |
| 273 |
render: function (data, type, row, meta) { |
| 274 |
return escape_str( |
| 275 |
get_lib_from_av( |
| 276 |
"av_agreement_statuses", |
| 277 |
row.status |
| 278 |
) |
| 279 |
) |
| 280 |
}, |
| 281 |
}, |
| 282 |
{ |
| 283 |
title: __("Closure reason"), |
| 284 |
data: "closure_reason", |
| 285 |
searchable: true, |
| 286 |
orderable: true, |
| 287 |
render: function (data, type, row, meta) { |
| 288 |
return escape_str( |
| 289 |
get_lib_from_av( |
| 290 |
"av_agreement_closure_reasons", |
| 291 |
row.closure_reason |
| 292 |
) |
| 293 |
) |
| 294 |
}, |
| 295 |
}, |
| 296 |
{ |
| 297 |
title: __("Is perpetual"), |
| 298 |
data: "is_perpetual", |
| 299 |
searchable: true, |
| 300 |
orderable: true, |
| 301 |
render: function (data, type, row, meta) { |
| 302 |
return escape_str( |
| 303 |
row.is_perpetual ? _("Yes") : _("No") |
| 304 |
) |
| 305 |
}, |
| 306 |
}, |
| 307 |
{ |
| 308 |
title: __("Renewal priority"), |
| 309 |
data: "renewal_priority", |
| 310 |
searchable: true, |
| 311 |
orderable: true, |
| 312 |
render: function (data, type, row, meta) { |
| 313 |
return escape_str( |
| 314 |
get_lib_from_av( |
| 315 |
"av_agreement_renewal_priorities", |
| 316 |
row.renewal_priority |
| 317 |
) |
| 318 |
) |
| 319 |
}, |
| 320 |
}, |
| 321 |
{ |
| 322 |
title: __("Actions"), |
| 323 |
data: function (row, type, val, meta) { |
| 324 |
return '<div class="actions"></div>' |
| 325 |
}, |
| 326 |
className: "actions noExport", |
| 327 |
searchable: false, |
| 328 |
orderable: false, |
| 329 |
}, |
| 330 |
], |
| 331 |
drawCallback: function (settings) { |
| 332 |
var api = new $.fn.dataTable.Api(settings) |
| 333 |
|
| 334 |
if (actions == "edit_delete") { |
| 335 |
$.each( |
| 336 |
$(this).find("td .actions"), |
| 337 |
function (index, e) { |
| 338 |
let tr = $(this).parent().parent() |
| 339 |
let agreement_id = api |
| 340 |
.row(tr) |
| 341 |
.data().agreement_id |
| 342 |
let agreement_name = api.row(tr).data().name |
| 343 |
let editButton = createVNode( |
| 344 |
"a", |
| 345 |
{ |
| 346 |
class: "btn btn-default btn-xs", |
| 347 |
role: "button", |
| 348 |
onClick: () => { |
| 349 |
edit_agreement(agreement_id) |
| 350 |
}, |
| 351 |
}, |
| 352 |
[ |
| 353 |
createVNode("i", { |
| 354 |
class: "fa fa-pencil", |
| 355 |
"aria-hidden": "true", |
| 356 |
}), |
| 357 |
__("Edit"), |
| 358 |
] |
| 359 |
) |
| 360 |
|
| 361 |
let deleteButton = createVNode( |
| 362 |
"a", |
| 363 |
{ |
| 364 |
class: "btn btn-default btn-xs", |
| 365 |
role: "button", |
| 366 |
onClick: () => { |
| 367 |
delete_agreement( |
| 368 |
agreement_id, |
| 369 |
agreement_name |
| 370 |
) |
| 371 |
}, |
| 372 |
}, |
| 373 |
[ |
| 374 |
createVNode("i", { |
| 375 |
class: "fa fa-trash", |
| 376 |
"aria-hidden": "true", |
| 377 |
}), |
| 378 |
__("Delete"), |
| 379 |
] |
| 380 |
) |
| 381 |
|
| 382 |
let n = createVNode("span", {}, [ |
| 383 |
editButton, |
| 384 |
" ", |
| 385 |
deleteButton, |
| 386 |
]) |
| 387 |
render(n, e) |
| 388 |
} |
| 389 |
) |
| 390 |
} else { |
| 391 |
$.each( |
| 392 |
$(this).find("td .actions"), |
| 393 |
function (index, e) { |
| 394 |
let tr = $(this).parent().parent() |
| 395 |
let agreement_id = api |
| 396 |
.row(tr) |
| 397 |
.data().agreement_id |
| 398 |
let selectButton = createVNode( |
| 399 |
"a", |
| 400 |
{ |
| 401 |
class: "btn btn-default btn-xs", |
| 402 |
role: "button", |
| 403 |
onClick: () => { |
| 404 |
select_agreement(agreement_id) |
| 405 |
}, |
| 406 |
}, |
| 407 |
[ |
| 408 |
createVNode("i", { |
| 409 |
class: "fa fa-check", |
| 410 |
"aria-hidden": "true", |
| 411 |
}), |
| 412 |
__("Select"), |
| 413 |
] |
| 414 |
) |
| 415 |
|
| 416 |
let n = createVNode("span", {}, [ |
| 417 |
selectButton, |
| 418 |
]) |
| 419 |
render(n, e) |
| 420 |
} |
| 421 |
) |
| 422 |
} |
| 423 |
|
| 424 |
$.each( |
| 425 |
$(this).find("tbody tr td:first-child"), |
| 426 |
function (index, e) { |
| 427 |
let tr = $(this).parent() |
| 428 |
let row = api.row(tr).data() |
| 429 |
if (!row) return // Happen if the table is empty |
| 430 |
let n = createVNode( |
| 431 |
"a", |
| 432 |
{ |
| 433 |
role: "button", |
| 434 |
onClick: () => { |
| 435 |
show_agreement(row.agreement_id) |
| 436 |
}, |
| 437 |
}, |
| 438 |
`${row.name} (#${row.agreement_id})` |
| 439 |
) |
| 440 |
render(n, e) |
| 441 |
} |
| 442 |
) |
| 443 |
}, |
| 444 |
preDrawCallback: function (settings) { |
| 445 |
$("#" + table_id) |
| 446 |
.find("thead th") |
| 447 |
.eq(1) |
| 448 |
.attr("data-filter", "vendors") |
| 449 |
$("#" + table_id) |
| 450 |
.find("thead th") |
| 451 |
.eq(3) |
| 452 |
.attr("data-filter", "av_agreement_statuses") |
| 453 |
$("#" + table_id) |
| 454 |
.find("thead th") |
| 455 |
.eq(4) |
| 456 |
.attr("data-filter", "av_agreement_closure_reasons") |
| 457 |
$("#" + table_id) |
| 458 |
.find("thead th") |
| 459 |
.eq(5) |
| 460 |
.attr("data-filter", "av_agreement_is_perpetual") |
| 461 |
$("#" + table_id) |
| 462 |
.find("thead th") |
| 463 |
.eq(6) |
| 464 |
.attr( |
| 465 |
"data-filter", |
| 466 |
"av_agreement_renewal_priorities" |
| 467 |
) |
| 468 |
}, |
| 469 |
}, |
| 470 |
agreement_table_settings, |
| 471 |
1 |
| 472 |
) |
| 473 |
}, |
| 474 |
getTableColumns: function () { |
173 |
getTableColumns: function () { |
| 475 |
let get_lib_from_av = this.get_lib_from_av |
174 |
let get_lib_from_av = this.get_lib_from_av |
| 476 |
let escape_str = this.escape_str |
175 |
let escape_str = this.escape_str |
| 477 |
window["vendors"] = this.vendors.map(e => { |
|
|
| 478 |
e["_id"] = e["id"] |
| 479 |
e["_str"] = e["name"] |
| 480 |
return e |
| 481 |
}) |
| 482 |
let vendors_map = this.vendors.reduce((map, e) => { |
| 483 |
map[e.id] = e |
| 484 |
return map |
| 485 |
}, {}) |
| 486 |
let avs = [ |
176 |
let avs = [ |
| 487 |
"av_agreement_statuses", |
177 |
"av_agreement_statuses", |
| 488 |
"av_agreement_closure_reasons", |
178 |
"av_agreement_closure_reasons", |
|
Lines 514-526
export default {
Link Here
|
| 514 |
}, |
204 |
}, |
| 515 |
{ |
205 |
{ |
| 516 |
title: __("Vendor"), |
206 |
title: __("Vendor"), |
| 517 |
data: "vendor_id", |
207 |
data: "vendor.name", |
| 518 |
searchable: true, |
208 |
searchable: true, |
| 519 |
orderable: true, |
209 |
orderable: true, |
| 520 |
render: function (data, type, row, meta) { |
210 |
render: function (data, type, row, meta) { |
| 521 |
return row.vendor_id != undefined |
211 |
return row.vendor.name |
| 522 |
? escape_str(vendors_map[row.vendor_id].name) |
|
|
| 523 |
: "" |
| 524 |
}, |
212 |
}, |
| 525 |
}, |
213 |
}, |
| 526 |
{ |
214 |
{ |
|
Lines 577-600
export default {
Link Here
|
| 577 |
) |
265 |
) |
| 578 |
}, |
266 |
}, |
| 579 |
}, |
267 |
}, |
| 580 |
{ |
|
|
| 581 |
title: __("Actions"), |
| 582 |
data: function (row, type, val, meta) { |
| 583 |
return '<div class="actions"></div>' |
| 584 |
}, |
| 585 |
className: "actions noExport", |
| 586 |
searchable: false, |
| 587 |
orderable: false, |
| 588 |
}, |
| 589 |
] |
268 |
] |
| 590 |
}, |
269 |
}, |
| 591 |
}, |
270 |
}, |
| 592 |
mounted() { |
|
|
| 593 |
if (!this.building_table) { |
| 594 |
this.building_table = true |
| 595 |
this.getAgreements() |
| 596 |
} |
| 597 |
}, |
| 598 |
components: { flatPickr, Toolbar, KohaTable }, |
271 |
components: { flatPickr, Toolbar, KohaTable }, |
| 599 |
name: "AgreementsList", |
272 |
name: "AgreementsList", |
| 600 |
emits: ["select-agreement", "close"], |
273 |
emits: ["select-agreement", "close"], |