|
Line 0
Link Here
|
|
|
1 |
<template> |
| 2 |
<BaseResource |
| 3 |
:routeAction="routeAction" |
| 4 |
:instancedResource="this" |
| 5 |
></BaseResource> |
| 6 |
</template> |
| 7 |
<script> |
| 8 |
import { inject, onBeforeMount } from "vue"; |
| 9 |
import BaseResource from "../BaseResource.vue"; |
| 10 |
import { useBaseResource } from "../../composables/base-resource.js"; |
| 11 |
import { storeToRefs } from "pinia"; |
| 12 |
import { APIClient } from "../../fetch/api-client.js"; |
| 13 |
import { $__ } from "@koha-vue/i18n"; |
| 14 |
|
| 15 |
export default { |
| 16 |
props: { |
| 17 |
routeAction: String, |
| 18 |
embedded: { type: Boolean, default: false }, |
| 19 |
embedEvent: Function, |
| 20 |
}, |
| 21 |
setup(props) { |
| 22 |
const DisplayStore = inject("DisplayStore"); |
| 23 |
const { displayReturnOverMapping, config } = storeToRefs(DisplayStore); |
| 24 |
const { setError } = inject("mainStore"); |
| 25 |
|
| 26 |
const filters = []; |
| 27 |
|
| 28 |
const additionalToolbarButtons = resource => { |
| 29 |
return { |
| 30 |
list: [ |
| 31 |
{ |
| 32 |
to: { name: "DisplaysBatchAddItems" }, |
| 33 |
icon: "plus", |
| 34 |
title: $__("Batch add items from file"), |
| 35 |
}, |
| 36 |
{ |
| 37 |
to: { name: "DisplaysBatchRemoveItems" }, |
| 38 |
icon: "minus", |
| 39 |
title: $__("Batch remove items from file"), |
| 40 |
}, |
| 41 |
], |
| 42 |
}; |
| 43 |
}; |
| 44 |
|
| 45 |
const baseResource = useBaseResource({ |
| 46 |
resourceName: "displays", |
| 47 |
nameAttr: "display_name", |
| 48 |
idAttr: "display_id", |
| 49 |
components: { |
| 50 |
show: "DisplaysShow", |
| 51 |
list: "DisplaysList", |
| 52 |
add: "DisplaysFormAdd", |
| 53 |
edit: "DisplaysFormAddEdit", |
| 54 |
}, |
| 55 |
apiClient: APIClient.display.displays, |
| 56 |
i18n: { |
| 57 |
deleteConfirmationMessage: $__( |
| 58 |
"Are you sure you want to remove this display?" |
| 59 |
), |
| 60 |
deleteSuccessMessage: $__("Display %s deleted"), |
| 61 |
displayName: $__("Display"), |
| 62 |
editLabel: $__("Edit display #%s"), |
| 63 |
emptyListMessage: $__("There are no displays defined"), |
| 64 |
newLabel: $__("New display"), |
| 65 |
}, |
| 66 |
table: { |
| 67 |
addFilters: true, |
| 68 |
resourceTableUrl: |
| 69 |
APIClient.display.httpClientDisplays._baseURL + "", |
| 70 |
filters, |
| 71 |
}, |
| 72 |
embedded: props.embedded, |
| 73 |
config, |
| 74 |
props, |
| 75 |
resourceAttrs: [ |
| 76 |
{ |
| 77 |
name: "display_id", |
| 78 |
label: $__("ID"), |
| 79 |
type: "text", |
| 80 |
hideIn: ["Form", "Show"], |
| 81 |
}, |
| 82 |
{ |
| 83 |
name: "display_name", |
| 84 |
label: $__("Name"), |
| 85 |
type: "text", |
| 86 |
required: true, |
| 87 |
}, |
| 88 |
{ |
| 89 |
name: "display_branch", |
| 90 |
label: $__("Home library"), |
| 91 |
type: "relationshipSelect", |
| 92 |
relationshipAPIClient: |
| 93 |
APIClient.library.libraries, |
| 94 |
relationshipOptionLabelAttr: "name", |
| 95 |
relationshipRequiredKey: "library_id", |
| 96 |
tableColumnDefinition: { |
| 97 |
title: $__("Home library"), |
| 98 |
data: "display_branch", |
| 99 |
searchable: true, |
| 100 |
orderable: true, |
| 101 |
render: function (data, type, row, meta) { |
| 102 |
if (row.library === null) |
| 103 |
return (escape_str( |
| 104 |
`` |
| 105 |
)); |
| 106 |
else |
| 107 |
return (escape_str( |
| 108 |
`${row["library"]["name"]}` |
| 109 |
)); |
| 110 |
}, |
| 111 |
}, |
| 112 |
showElement: { |
| 113 |
type: "text", |
| 114 |
value: "library.name" |
| 115 |
}, |
| 116 |
}, |
| 117 |
{ |
| 118 |
name: "display_holding_branch", |
| 119 |
label: $__("Holding library"), |
| 120 |
type: "relationshipSelect", |
| 121 |
relationshipAPIClient: |
| 122 |
APIClient.library.libraries, |
| 123 |
relationshipOptionLabelAttr: "name", |
| 124 |
relationshipRequiredKey: "library_id", |
| 125 |
tableColumnDefinition: { |
| 126 |
title: $__("Holding library"), |
| 127 |
data: "display_holding_branch", |
| 128 |
searchable: true, |
| 129 |
orderable: true, |
| 130 |
render: function (data, type, row, meta) { |
| 131 |
if (row.library === null) |
| 132 |
return (escape_str( |
| 133 |
`` |
| 134 |
)); |
| 135 |
else |
| 136 |
return (escape_str( |
| 137 |
`${row["library"]["name"]}` |
| 138 |
)); |
| 139 |
}, |
| 140 |
}, |
| 141 |
showElement: { |
| 142 |
type: "text", |
| 143 |
value: "library.name" |
| 144 |
}, |
| 145 |
}, |
| 146 |
{ |
| 147 |
name: "display_location", |
| 148 |
label: $__("Shelving location"), |
| 149 |
type: "select", |
| 150 |
avCat: "av_loc", |
| 151 |
}, |
| 152 |
{ |
| 153 |
name: "display_code", |
| 154 |
label: $__("Collection code"), |
| 155 |
type: "select", |
| 156 |
avCat: "av_ccode", |
| 157 |
}, |
| 158 |
{ |
| 159 |
name: "display_itype", |
| 160 |
label: $__("Item type"), |
| 161 |
type: "relationshipSelect", |
| 162 |
relationshipAPIClient: |
| 163 |
APIClient.item_type.item_types, |
| 164 |
relationshipOptionLabelAttr: "description", |
| 165 |
relationshipRequiredKey: "item_type_id", |
| 166 |
tableColumnDefinition: { |
| 167 |
title: $__("Item type"), |
| 168 |
data: "display_itype", |
| 169 |
searchable: true, |
| 170 |
orderable: true, |
| 171 |
render: function (data, type, row, meta) { |
| 172 |
if (row.item_type === null) |
| 173 |
return (escape_str( |
| 174 |
`` |
| 175 |
)); |
| 176 |
else |
| 177 |
return (escape_str( |
| 178 |
`${row["item_type"]["description"]}` |
| 179 |
)); |
| 180 |
}, |
| 181 |
}, |
| 182 |
showElement: { |
| 183 |
type: "text", |
| 184 |
value: "item_type.description" |
| 185 |
}, |
| 186 |
}, |
| 187 |
{ |
| 188 |
name: "display_return_over", |
| 189 |
label: $__("Return behaviour"), |
| 190 |
type: "select", |
| 191 |
selectLabel: "value", |
| 192 |
requiredKey: "variable", |
| 193 |
options: displayReturnOverMapping.value, |
| 194 |
defaultValue: null, |
| 195 |
required: true, |
| 196 |
tableColumnDefinition: { |
| 197 |
title: $__("Return behaviour"), |
| 198 |
data: "display_return_over", |
| 199 |
searchable: false, |
| 200 |
orderable: true, |
| 201 |
render: function (data, type, row, meta) { |
| 202 |
let this_value = ''; |
| 203 |
|
| 204 |
DisplayStore.displayReturnOverMapping.forEach(mapping => { |
| 205 |
if(mapping.variable == data) this_value = mapping.value; |
| 206 |
}); |
| 207 |
|
| 208 |
return (escape_str( |
| 209 |
`${this_value}` |
| 210 |
)); |
| 211 |
}, |
| 212 |
}, |
| 213 |
}, |
| 214 |
{ |
| 215 |
name: "start_date", |
| 216 |
label: $__("Start of display"), |
| 217 |
type: "date", |
| 218 |
}, |
| 219 |
{ |
| 220 |
name: "end_date", |
| 221 |
label: $__("End of display"), |
| 222 |
type: "date", |
| 223 |
}, |
| 224 |
{ |
| 225 |
name: "display_days", |
| 226 |
label: $__("Duration of display"), |
| 227 |
type: "number", |
| 228 |
hideIn: ["List"], |
| 229 |
}, |
| 230 |
{ |
| 231 |
name: "staff_note", |
| 232 |
label: $__("Staff note"), |
| 233 |
type: "textarea", |
| 234 |
hideIn: ["List"], |
| 235 |
}, |
| 236 |
{ |
| 237 |
name: "public_note", |
| 238 |
label: $__("Public note"), |
| 239 |
type: "textarea", |
| 240 |
hideIn: ["List"], |
| 241 |
}, |
| 242 |
{ |
| 243 |
name: "enabled", |
| 244 |
label: $__("Enabled"), |
| 245 |
type: "boolean", |
| 246 |
required: true, |
| 247 |
}, |
| 248 |
{ |
| 249 |
name: "display_items", |
| 250 |
type: "relationshipWidget", |
| 251 |
showElement: { |
| 252 |
type: "table", |
| 253 |
columnData: "display_items", |
| 254 |
hidden: display => !!display.display_items?.length, |
| 255 |
columns: [ |
| 256 |
{ |
| 257 |
name: $__("Record number"), |
| 258 |
value: "biblionumber", |
| 259 |
}, |
| 260 |
{ |
| 261 |
name: $__("Internal item number"), |
| 262 |
value: "itemnumber", |
| 263 |
}, |
| 264 |
{ |
| 265 |
name: $__("Item barcode"), |
| 266 |
value: "barcode", |
| 267 |
}, |
| 268 |
{ |
| 269 |
name: $__("Date added"), |
| 270 |
value: "date_added", |
| 271 |
format: $date, |
| 272 |
}, |
| 273 |
{ |
| 274 |
name: $__("Date to remove"), |
| 275 |
value: "date_remove", |
| 276 |
format: $date, |
| 277 |
}, |
| 278 |
], |
| 279 |
}, |
| 280 |
group: $__("Display items"), |
| 281 |
componentProps: { |
| 282 |
resourceRelationships: { |
| 283 |
resourceProperty: "display_items", |
| 284 |
}, |
| 285 |
relationshipStrings: { |
| 286 |
nameLowerCase: $__("display item"), |
| 287 |
nameUpperCase: $__("Display item"), |
| 288 |
namePlural: $__("display items"), |
| 289 |
}, |
| 290 |
newRelationshipDefaultAttrs: { |
| 291 |
type: "object", |
| 292 |
value: { |
| 293 |
biblionumber: null, |
| 294 |
itemnumber: null, |
| 295 |
barcode: null, |
| 296 |
date_added: null, |
| 297 |
date_remove: null, |
| 298 |
}, |
| 299 |
}, |
| 300 |
}, |
| 301 |
relationshipFields: [ |
| 302 |
{ |
| 303 |
name: "barcode", |
| 304 |
type: "number", |
| 305 |
label: $__("Item barcode"), |
| 306 |
required: true, |
| 307 |
indexRequired: true, |
| 308 |
}, |
| 309 |
{ |
| 310 |
name: "date_added", |
| 311 |
type: "date", |
| 312 |
label: $__("Date added"), |
| 313 |
required: false, |
| 314 |
indexRequired: true, |
| 315 |
}, |
| 316 |
{ |
| 317 |
name: "date_remove", |
| 318 |
type: "date", |
| 319 |
label: $__("Date to remove"), |
| 320 |
required: false, |
| 321 |
indexRequired: true, |
| 322 |
}, |
| 323 |
], |
| 324 |
hideIn: ["List"], |
| 325 |
}, |
| 326 |
], |
| 327 |
additionalToolbarButtons, |
| 328 |
moduleStore: "DisplayStore", |
| 329 |
props: props, |
| 330 |
}); |
| 331 |
|
| 332 |
const tableOptions = { |
| 333 |
url: "/api/v1/displays", |
| 334 |
options: { |
| 335 |
embed: "library,item_type,+strings", |
| 336 |
}, |
| 337 |
add_filters: true, |
| 338 |
actions: { |
| 339 |
0: ["show"], |
| 340 |
1: ["show"], |
| 341 |
"-1": ["edit", "delete"] |
| 342 |
}, |
| 343 |
}; |
| 344 |
|
| 345 |
const getItemFromId = (async id => { |
| 346 |
const itemsApiClient = APIClient.item.items; |
| 347 |
let item = undefined; |
| 348 |
|
| 349 |
await itemsApiClient.get(id) |
| 350 |
.then(data => { |
| 351 |
item = data; |
| 352 |
}) |
| 353 |
.catch(error => { |
| 354 |
console.error(error); |
| 355 |
}); |
| 356 |
|
| 357 |
return item; |
| 358 |
}); |
| 359 |
|
| 360 |
const getItemFromExternalId = (async external_id => { |
| 361 |
const itemsApiClient = APIClient.item.items; |
| 362 |
let item = undefined; |
| 363 |
|
| 364 |
await itemsApiClient.getByExternalId(external_id) |
| 365 |
.then(data => { |
| 366 |
if (data.length == 1) |
| 367 |
item = data[0]; |
| 368 |
}) |
| 369 |
.catch(error => { |
| 370 |
console.error(error); |
| 371 |
}); |
| 372 |
|
| 373 |
return item; |
| 374 |
}); |
| 375 |
|
| 376 |
const checkForm = (async display => { |
| 377 |
let errors = []; |
| 378 |
|
| 379 |
let display_items = display.display_items; |
| 380 |
// Do not use di.display_item.name here! Its name is not the one linked with di.display_item_id |
| 381 |
// At this point di.display_item is meaningless, form/template only modified di.display_item_id |
| 382 |
const display_item_ids = display_items.map(di => di.display_item_id); |
| 383 |
const duplicate_display_item_ids = display_item_ids.filter( |
| 384 |
(id, i) => display_item_ids.indexOf(id) !== i |
| 385 |
); |
| 386 |
|
| 387 |
if (duplicate_display_item_ids.length) { |
| 388 |
errors.push($__("A display item is used several times")); |
| 389 |
} |
| 390 |
|
| 391 |
for await (const display_item of display_items) { |
| 392 |
const item = await getItemFromExternalId(display_item.barcode); |
| 393 |
|
| 394 |
if (item == undefined || item.item_id === undefined || item.external_id !== display_item.barcode) |
| 395 |
errors.push($__("The barcode entered does not match an item")); |
| 396 |
} |
| 397 |
|
| 398 |
baseResource.setWarning(errors.join("<br>")); |
| 399 |
return !errors.length; |
| 400 |
}); |
| 401 |
const onFormSave = (async (e, displayToSave) => { |
| 402 |
e.preventDefault(); |
| 403 |
|
| 404 |
const display = JSON.parse(JSON.stringify(displayToSave)); |
| 405 |
const displayId = display.display_id; |
| 406 |
const epoch = new Date(); |
| 407 |
|
| 408 |
if (!await checkForm(display)) { |
| 409 |
return false; |
| 410 |
} |
| 411 |
|
| 412 |
delete display.display_id; |
| 413 |
delete display.item_type; |
| 414 |
delete display.library; |
| 415 |
delete display._strings; |
| 416 |
|
| 417 |
display.display_items = display.display_items.map( |
| 418 |
({ display_item_id, ...keepAttrs }) => |
| 419 |
keepAttrs |
| 420 |
); |
| 421 |
|
| 422 |
let display_items = display.display_items; |
| 423 |
delete display.display_items; |
| 424 |
display.display_items = []; |
| 425 |
|
| 426 |
for await (const display_item of display_items) { |
| 427 |
const item = await getItemFromExternalId(display_item.barcode); |
| 428 |
|
| 429 |
delete display_item.barcode; |
| 430 |
|
| 431 |
display_item.biblionumber = item.biblio_id; |
| 432 |
display_item.itemnumber = item.item_id; |
| 433 |
|
| 434 |
await display.display_items.push(display_item); |
| 435 |
} |
| 436 |
|
| 437 |
if (display.start_date == null) display.start_date = epoch.toISOString().substr(0, 10); |
| 438 |
if (display.end_date == null && display.display_days != undefined) { |
| 439 |
let calculated_date = epoch; |
| 440 |
calculated_date.setDate(epoch.getDate() + Number(display.display_days)); |
| 441 |
|
| 442 |
display.end_date = calculated_date.toISOString().substr(0, 10); |
| 443 |
} |
| 444 |
if (display.display_days == "") display.display_days = null; |
| 445 |
if (display.public_note == "") display.public_note = null; |
| 446 |
if (display.staff_note == "") display.staff_note = null; |
| 447 |
|
| 448 |
if (displayId) { |
| 449 |
baseResource.apiClient |
| 450 |
.update(display, displayId) |
| 451 |
.then( |
| 452 |
success => { |
| 453 |
baseResource.setMessage($__("Display updated")); |
| 454 |
baseResource.router.push({ name: "DisplaysList" }); |
| 455 |
}, |
| 456 |
error => {} |
| 457 |
); |
| 458 |
} else { |
| 459 |
baseResource.apiClient.create(display).then( |
| 460 |
success => { |
| 461 |
baseResource.setMessage($__("Display created")); |
| 462 |
baseResource.router.push({ name: "DisplaysList" }); |
| 463 |
}, |
| 464 |
error => {} |
| 465 |
); |
| 466 |
} |
| 467 |
}); |
| 468 |
const afterResourceFetch = ((componentData, resource, caller) => { |
| 469 |
if(caller === "show" || caller === "form") { |
| 470 |
resource.display_items.forEach((display_item, idx) => { |
| 471 |
getItemFromId(display_item.itemnumber) |
| 472 |
.then(item => { |
| 473 |
componentData.resource.value.display_items[idx] = { |
| 474 |
barcode: item.external_id, |
| 475 |
...display_item, |
| 476 |
}; |
| 477 |
}) |
| 478 |
.catch(error => { |
| 479 |
console.log(error); |
| 480 |
}); |
| 481 |
}); |
| 482 |
} |
| 483 |
}); |
| 484 |
|
| 485 |
onBeforeMount(() => {}); |
| 486 |
|
| 487 |
return { |
| 488 |
...baseResource, |
| 489 |
tableOptions, |
| 490 |
checkForm, |
| 491 |
onFormSave, |
| 492 |
afterResourceFetch, |
| 493 |
}; |
| 494 |
}, |
| 495 |
emits: ["select-resource"], |
| 496 |
name: "DisplaysResource", |
| 497 |
components: { |
| 498 |
BaseResource, |
| 499 |
}, |
| 500 |
}; |
| 501 |
</script> |