Bugzilla – Attachment 147862 Details for
Bug 33066
We need a KohaTable Vue component
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 33066: Use KohaTable for LicensesList
Bug-33066-Use-KohaTable-for-LicensesList.patch (text/plain), 19.07 KB, created by
Jonathan Druart
on 2023-03-07 16:37:11 UTC
(
hide
)
Description:
Bug 33066: Use KohaTable for LicensesList
Filename:
MIME Type:
Creator:
Jonathan Druart
Created:
2023-03-07 16:37:11 UTC
Size:
19.07 KB
patch
obsolete
>From 97ff0516c32d45ed83125338c1d6fddd35017097 Mon Sep 17 00:00:00 2001 >From: Jonathan Druart <jonathan.druart@bugs.koha-community.org> >Date: Tue, 7 Mar 2023 17:04:01 +0100 >Subject: [PATCH] Bug 33066: Use KohaTable for LicensesList > >--- > .../js/vue/components/ERM/AgreementsList.vue | 2 +- > .../js/vue/components/ERM/LicensesList.vue | 349 ++++++------------ > 2 files changed, 116 insertions(+), 235 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue >index e90379fbfa2..d00f97ab176 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue >@@ -42,7 +42,7 @@ > <script> > import flatPickr from "vue-flatpickr-component" > import Toolbar from "./AgreementsToolbar.vue" >-import { inject, createVNode, render, ref } from "vue" >+import { inject, ref } from "vue" > import { APIClient } from "../../fetch/api-client.js" > import { storeToRefs } from "pinia" > import { build_url } from "../../composables/datatables" >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue >index b42355685c7..ab2603010cf 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue >@@ -3,7 +3,13 @@ > <div v-else-if="licenses" id="licenses_list"> > <Toolbar /> > <div v-if="licenses.length" class="page-section"> >- <table :id="table_id"></table> >+ <KohaTable >+ ref="table" >+ v-bind="tableOptions" >+ @show="doShow" >+ @edit="doEdit" >+ @delete="doDelete" >+ ></KohaTable> > </div> > <div v-else-if="initialized" class="dialog message"> > {{ $__("There are no licenses defined") }} >@@ -13,10 +19,10 @@ > > <script> > import Toolbar from "./LicensesToolbar.vue" >-import { inject, createVNode, render } from "vue" >+import { inject, ref } from "vue" > import { storeToRefs } from "pinia" > import { APIClient } from "../../fetch/api-client.js" >-import { useDataTable } from "../../composables/datatables" >+import KohaTable from "../KohaTable.vue" > > export default { > setup() { >@@ -28,27 +34,48 @@ export default { > > const { setConfirmationDialog, setMessage } = inject("mainStore") > >- const table_id = "license_list" >- useDataTable(table_id) >+ const table = ref() > > return { > vendors, > get_lib_from_av, > map_av_dt_filter, >- table_id, >+ table, > setConfirmationDialog, > setMessage, >+ license_table_settings, > } > }, > data: function () { > return { > licenses: [], > initialized: false, >+ tableOptions: { >+ columns: this.getTableColumns(), >+ url: "/api/v1/erm/licenses", >+ options: { embed: "vendor" }, >+ table_settings: this.license_table_settings, >+ add_filters: true, >+ filters_options: { >+ 1: () => >+ this.vendors.map(e => { >+ e["_id"] = e["id"] >+ e["_str"] = e["name"] >+ return e >+ }), >+ 3: () => this.map_av_dt_filter("av_license_types"), >+ 4: () => this.map_av_dt_filter("av_license_statuses"), >+ }, >+ actions: { >+ 0: ["show"], >+ "-1": ["edit", "delete"], >+ }, >+ }, > } > }, > beforeRouteEnter(to, from, next) { > next(vm => { >- vm.getLicenses().then(() => vm.build_datatable()) >+ vm.getLicenses().then(() => (vm.initialized = true)) > }) > }, > methods: { >@@ -57,277 +84,131 @@ export default { > await client.licenses.getAll().then( > licenses => { > this.licenses = licenses >- this.initialized = true > }, > error => {} > ) > }, >- show_license: function (license_id) { >- this.$router.push("/cgi-bin/koha/erm/licenses/" + license_id) >+ doShow: function (license, dt, event) { >+ event.preventDefault() >+ this.$router.push( >+ "/cgi-bin/koha/erm/licenses/" + license.license_id >+ ) > }, >- edit_license: function (license_id) { >- this.$router.push("/cgi-bin/koha/erm/licenses/edit/" + license_id) >+ doEdit: function (license, dt, event) { >+ this.$router.push( >+ "/cgi-bin/koha/erm/licenses/edit/" + license.license_id >+ ) > }, >- delete_license: function (license_id, license_name) { >+ doDelete: function (license, dt, event) { > this.setConfirmationDialog( > { > title: this.$__( > "Are you sure you want to remove this license?" > ), >- message: license_name, >+ message: license.name, > accept_label: this.$__("Yes, delete"), > cancel_label: this.$__("No, do not delete"), > }, > () => { > const client = APIClient.erm >- client.licenses.delete(license_id).then( >+ client.licenses.delete(license.license_id).then( > success => { > this.setMessage( > this.$__("License %s deleted").format( >- license_name >+ license.name > ), > true > ) >- $("#" + this.table_id) >- .DataTable() >- .ajax.url("/api/v1/erm/licenses") >- .draw() >+ dt.draw() > }, > error => {} > ) > } > ) > }, >- build_datatable: function () { >- let show_license = this.show_license >- let edit_license = this.edit_license >- let delete_license = this.delete_license >+ getTableColumns: function () { > let get_lib_from_av = this.get_lib_from_av >- let map_av_dt_filter = this.map_av_dt_filter >- let default_search = this.$route.query.q >- let table_id = this.table_id >- >- window["vendors"] = this.vendors.map(e => { >- e["_id"] = e["id"] >- e["_str"] = e["name"] >- return e >- }) >- let vendors_map = this.vendors.reduce((map, e) => { >- map[e.id] = e >- return map >- }, {}) >- let avs = ["av_license_types", "av_license_statuses"] >- avs.forEach(function (av_cat) { >- window[av_cat] = map_av_dt_filter(av_cat) >- }) > >- $("#" + table_id).kohaTable( >+ return [ > { >- ajax: { >- url: "/api/v1/erm/licenses", >+ title: __("Name"), >+ data: "me.license_id:me.name", >+ searchable: true, >+ orderable: true, >+ render: function (data, type, row, meta) { >+ return ( >+ '<a href="/cgi-bin/koha/erm/licenses/' + >+ row.license_id + >+ '" class="show">' + >+ row.name + >+ "</a>" >+ ) > }, >- order: [[0, "asc"]], >- search: { search: default_search }, >- columnDefs: [ >- { >- targets: [0, 1], >- render: function (data, type, row, meta) { >- if (type == "display") { >- return escape_str(data) >- } >- return data >- }, >- }, >- ], >- columns: [ >- { >- title: __("Name"), >- data: "me.license_id:me.name", >- searchable: true, >- orderable: true, >- render: function (data, type, row, meta) { >- // Rendering done in drawCallback >- return "" >- }, >- }, >- { >- title: __("Vendor"), >- data: "vendor_id", >- searchable: true, >- orderable: true, >- render: function (data, type, row, meta) { >- return row.vendor_id != undefined >- ? escape_str( >- vendors_map[row.vendor_id].name >- ) >- : "" >- }, >- }, >- >- { >- title: __("Description"), >- data: "description", >- searchable: true, >- orderable: true, >- }, >- { >- title: __("Type"), >- data: "type", >- searchable: true, >- orderable: true, >- render: function (data, type, row, meta) { >- return escape_str( >- get_lib_from_av( >- "av_license_types", >- row.type >- ) >- ) >- }, >- }, >- { >- title: __("Status"), >- data: "status", >- searchable: true, >- orderable: true, >- render: function (data, type, row, meta) { >- return escape_str( >- get_lib_from_av( >- "av_license_statuses", >- row.status >- ) >- ) >- }, >- }, >- { >- title: __("Started on"), >- data: "started_on", >- searchable: true, >- orderable: true, >- render: function (data, type, row, meta) { >- return $date(row.started_on) >- }, >- }, >- { >- title: __("Ended on"), >- data: "ended_on", >- searchable: true, >- orderable: true, >- render: function (data, type, row, meta) { >- return $date(row.ended_on) >- }, >- }, >- { >- title: __("Actions"), >- data: function (row, type, val, meta) { >- return '<div class="actions"></div>' >- }, >- className: "actions noExport", >- searchable: false, >- orderable: false, >- }, >- ], >- drawCallback: function (settings) { >- var api = new $.fn.dataTable.Api(settings) >- >- $.each( >- $(this).find("td .actions"), >- function (index, e) { >- let tr = $(this).parent().parent() >- let license_id = api.row(tr).data().license_id >- let license_name = api.row(tr).data().name >- let editButton = createVNode( >- "a", >- { >- class: "btn btn-default btn-xs", >- role: "button", >- onClick: () => { >- edit_license(license_id) >- }, >- }, >- [ >- createVNode("i", { >- class: "fa fa-pencil", >- "aria-hidden": "true", >- }), >- __("Edit"), >- ] >- ) >- >- let deleteButton = createVNode( >- "a", >- { >- class: "btn btn-default btn-xs", >- role: "button", >- onClick: () => { >- delete_license( >- license_id, >- license_name >- ) >- }, >- }, >- [ >- createVNode("i", { >- class: "fa fa-trash", >- "aria-hidden": "true", >- }), >- __("Delete"), >- ] >- ) >+ }, >+ { >+ title: __("Vendor"), >+ data: "vendor_id", >+ searchable: true, >+ orderable: true, >+ render: function (data, type, row, meta) { >+ return row.vendor_id != undefined ? row.vendor.name : "" >+ }, >+ }, > >- let n = createVNode("span", {}, [ >- editButton, >- " ", >- deleteButton, >- ]) >- render(n, e) >- } >+ { >+ title: __("Description"), >+ data: "description", >+ searchable: true, >+ orderable: true, >+ }, >+ { >+ title: __("Type"), >+ data: "type", >+ searchable: true, >+ orderable: true, >+ render: function (data, type, row, meta) { >+ return escape_str( >+ get_lib_from_av("av_license_types", row.type) > ) >- >- $.each( >- $(this).find("tbody tr td:first-child"), >- function (index, e) { >- let tr = $(this).parent() >- let row = api.row(tr).data() >- if (!row) return // Happen if the table is empty >- let n = createVNode( >- "a", >- { >- role: "button", >- onClick: () => { >- show_license(row.license_id) >- }, >- }, >- `${row.name} (#${row.license_id})` >- ) >- render(n, e) >- } >+ }, >+ }, >+ { >+ title: __("Status"), >+ data: "status", >+ searchable: true, >+ orderable: true, >+ render: function (data, type, row, meta) { >+ return escape_str( >+ get_lib_from_av("av_license_statuses", row.status) > ) > }, >- preDrawCallback: function (settings) { >- $("#" + table_id) >- .find("thead th") >- .eq(1) >- .attr("data-filter", "vendors") >- $("#" + table_id) >- .find("thead th") >- .eq(3) >- .attr("data-filter", "av_license_types") >- $("#" + table_id) >- .find("thead th") >- .eq(4) >- .attr("data-filter", "av_license_statuses") >+ }, >+ { >+ title: __("Started on"), >+ data: "started_on", >+ searchable: true, >+ orderable: true, >+ render: function (data, type, row, meta) { >+ return $date(row.started_on) >+ }, >+ }, >+ { >+ title: __("Ended on"), >+ data: "ended_on", >+ searchable: true, >+ orderable: true, >+ render: function (data, type, row, meta) { >+ return $date(row.ended_on) > }, > }, >- license_table_settings, >- 1 >- ) >+ ] > }, > }, > props: { > av_license_types: Array, > av_license_statuses: Array, > }, >- components: { Toolbar }, >+ components: { Toolbar, KohaTable }, > name: "LicensesList", > } > </script> >-- >2.25.1
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 33066
:
147352
|
147353
|
147354
|
147692
|
147693
|
147694
|
147713
|
147846
|
147847
|
147848
|
147849
|
147850
|
147851
|
147852
|
147853
|
147855
|
147856
|
147857
|
147858
|
147862
|
147865
|
147902
|
147903
|
147904
|
147905
|
147906
|
147907
|
147908
|
147909
|
147910
|
147911
|
147912
|
147913
|
147914
|
147915
|
147916
|
147917
|
147918
|
147921
|
147922
|
147923
|
147925
|
147926
|
147928
|
147957
|
147960
|
147971
|
147972
|
148718
|
149158
|
149159
|
149160
|
149161
|
149162
|
149163
|
149164
|
149165
|
149166
|
149167
|
149168
|
149169
|
149170
|
149171
|
149172
|
149173
|
149174
|
149175
|
149176
|
149177
|
149178
|
149179
|
149180
|
149181
|
149182
|
149183