Bug 32807: Fix cypress tests
[srvgit] / koha-tmpl / intranet-tmpl / prog / js / vue / components / ERM / LicensesList.vue
index 85ca7f3..4ddf9fe 100644 (file)
 <template>
-    <div v-if="!this.initialized">Loading...</div>
-    <div v-else>
+    <div v-if="!initialized">{{ $__("Loading") }}</div>
+    <div v-else id="licenses_list">
         <Toolbar />
-        <table v-if="licenses.length" id="license_list"></table>
-        <div v-else-if="this.initialized" class="dialog message">
-            There are no licenses defined.
+        <div v-if="license_count > 0" class="page-section">
+            <table :id="table_id"></table>
+        </div>
+        <div v-else class="dialog message">
+            {{ $__("There are no licenses defined") }}
         </div>
     </div>
 </template>
 
 <script>
 import Toolbar from "./LicensesToolbar.vue"
-import ButtonEdit from "./ButtonEdit.vue"
-import ButtonDelete from "./ButtonDelete.vue"
-import { createVNode, render } from 'vue'
-import { useAVStore } from "../../stores/authorised_values"
+import { inject, createVNode, render } from "vue"
 import { storeToRefs } from "pinia"
-import { fetchLicenses } from "../../fetch"
+import { APIClient } from "../../fetch/api-client.js"
+import { useDataTable } from "../../composables/datatables"
 
 export default {
     setup() {
-        const AVStore = useAVStore()
-        const {
-            av_license_types,
-            av_license_statuses,
-        } = storeToRefs(AVStore)
-
-        return {
-            av_license_types,
-            av_license_statuses,
-        }
-    },
-    updated() {
-        let show_license = this.show_license
-        let edit_license = this.edit_license
-        let delete_license = this.delete_license
-        window['av_license_types'] = this.av_license_types.map(e => {
-            e['_id'] = e['authorised_value']
-            e['_str'] = e['lib']
-            return e
-        })
-        let av_license_types_map = this.av_license_types.reduce((map, e) => {
-            map[e.authorised_value] = e
-            return map
-        }, {})
-        window['av_license_statuses'] = this.av_license_statuses.map(e => {
-            e['_id'] = e['authorised_value']
-            e['_str'] = e['lib']
-            return e
-        })
-        let av_license_statuses_map = this.av_license_statuses.reduce((map, e) => {
-            map[e.authorised_value] = e
-            return map
-        }, {})
+        const vendorStore = inject("vendorStore")
+        const { vendors } = storeToRefs(vendorStore)
 
-        $('#license_list').kohaTable({
-            "ajax": {
-                "url": licenses_table_url,
-            },
-            "order": [[1, "asc"]],
-            "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,
-                    // Rendering done in drawCallback
-                },
-                {
-                    "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(av_license_types_map[row.type].lib)
-                    }
-                },
-                {
-                    "title": __("Status"),
-                    "data": "status",
-                    "searchable": true,
-                    "orderable": true,
-                    "render": function (data, type, row, meta) {
-                        return escape_str(av_license_statuses_map[row.status].lib)
-                    }
-                },
-                {
-                    "title": __("Started on"),
-                    "data": "started_on",
-                    "searchable": true,
-                    "orderable": true,
-                    "render": function (data, type, row, meta) {
-                        return escape_str(row.started_on)
-                    }
-                },
-                {
-                    "title": __("Ended on"),
-                    "data": "ended_on",
-                    "searchable": true,
-                    "orderable": true,
-                    "render": function (data, type, row, meta) {
-                        return escape_str(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) {
+        const AVStore = inject("AVStore")
+        const { get_lib_from_av, map_av_dt_filter } = AVStore
 
-                var api = new $.fn.dataTable.Api(settings)
+        const { setConfirmationDialog, setMessage } = inject("mainStore")
 
-                $.each($(this).find("td .actions"), function (index, e) {
-                    let license_id = api.row(index).data().license_id
-                    let editButton = createVNode(ButtonEdit, {
-                        onClick: () => {
-                            edit_license(license_id)
-                        }
-                    })
-                    let deleteButton = createVNode(ButtonDelete, {
-                        onClick: () => {
-                            delete_license(license_id)
-                        }
-                    })
-                    let n = createVNode('span', {}, [editButton, " ", deleteButton])
-                    render(n, e)
-                })
+        const table_id = "license_list"
+        useDataTable(table_id)
 
-                $.each($(this).find("tbody tr td:first-child"), function (index, e) {
-                    let row = api.row(index).data()
-                    if (!row) return // Happen if the table is empty
-                    let n = createVNode("a", {
-                        role: "button",
-                        onClick: () => {
-                            show_license(row.license_id)
-                        }
-                    },
-                        escape_str(`${row.name} (#${row.license_id})`)
-                    )
-                    render(n, e)
-                })
-            },
-            preDrawCallback: function (settings) {
-                var table_id = settings.nTable.id
-                $("#" + table_id).find("thead th").eq(2).attr('data-filter', 'av_license_types')
-                $("#" + table_id).find("thead th").eq(3).attr('data-filter', 'av_license_statuses')
-            }
-
-        }, table_settings, 1)
-    },
-    beforeUnmount() {
-        $('#license_list')
-            .DataTable()
-            .destroy(true)
+        return {
+            vendors,
+            get_lib_from_av,
+            map_av_dt_filter,
+            table_id,
+            setConfirmationDialog,
+            setMessage,
+        }
     },
     data: function () {
         return {
-            licenses: [],
+            license_count: 0,
             initialized: false,
         }
     },
     beforeRouteEnter(to, from, next) {
         next(vm => {
-            vm.getLicenses()
+            vm.getLicenseCount().then(() => vm.build_datatable())
         })
     },
     methods: {
-        async getLicenses() {
-            const licenses = await fetchLicenses()
-            this.licenses = licenses
-            this.initialized = true
+        async getLicenseCount() {
+            const client = APIClient.erm
+            await client.licenses.count().then(
+                count => {
+                    this.license_count = count
+                    this.initialized = true
+                },
+                error => {}
+            )
         },
         show_license: function (license_id) {
             this.$router.push("/cgi-bin/koha/erm/licenses/" + license_id)
@@ -198,8 +68,259 @@ export default {
         edit_license: function (license_id) {
             this.$router.push("/cgi-bin/koha/erm/licenses/edit/" + license_id)
         },
-        delete_license: function (license_id) {
-            this.$router.push("/cgi-bin/koha/erm/licenses/delete/" + license_id)
+        delete_license: function (license_id, license_name) {
+            this.setConfirmationDialog(
+                {
+                    title: this.$__(
+                        "Are you sure you want to remove this license?"
+                    ),
+                    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(
+                        success => {
+                            this.setMessage(
+                                this.$__("License %s deleted").format(
+                                    license_name
+                                ),
+                                true
+                            )
+                            $("#" + this.table_id)
+                                .DataTable()
+                                .ajax.url("/api/v1/erm/licenses")
+                                .draw()
+                        },
+                        error => {}
+                    )
+                }
+            )
+        },
+        build_datatable: function () {
+            let show_license = this.show_license
+            let edit_license = this.edit_license
+            let delete_license = this.delete_license
+            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(
+                {
+                    ajax: {
+                        url: "/api/v1/erm/licenses",
+                    },
+                    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"),
+                                    ]
+                                )
+
+                                let n = createVNode("span", {}, [
+                                    editButton,
+                                    " ",
+                                    deleteButton,
+                                ])
+                                render(n, e)
+                            }
+                        )
+
+                        $.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)
+                            }
+                        )
+                    },
+                    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")
+                    },
+                },
+                license_table_settings,
+                1
+            )
         },
     },
     props: {