2 <div v-if="!initialized">{{ $__("Loading") }}</div>
3 <div v-else id="trains_list">
5 <fieldset v-if="count_trains > 0" class="filters">
6 <label>{{ $__("Filter by") }}:</label>
10 v-model="filters.status"
12 /><label for="all_status_filter">{{ $__("All") }}</label>
15 id="closed_status_filter"
16 v-model="filters.status"
18 /><label for="closed_status_filter">{{ $__("Closed") }}</label>
21 id="sent_status_filter"
22 v-model="filters.status"
24 /><label for="sent_status_filter">{{ $__("Sent") }}</label>
27 id="received_status_filter"
28 v-model="filters.status"
30 /><label for="received_status_filter">{{ $__("Received") }}</label>
35 :value="$__('Filter')"
38 <div v-if="count_trains > 0" class="page-section">
45 @addItems="doAddItems"
49 <div v-else class="dialog message">
50 {{ $__("There are no trains defined") }}
56 import flatPickr from "vue-flatpickr-component"
57 import Toolbar from "./TrainsToolbar.vue"
58 import { inject, ref, reactive } from "vue"
59 import { APIClient } from "../../fetch/api-client"
60 import { build_url } from "../../composables/datatables"
61 import KohaTable from "../KohaTable.vue"
65 const AVStore = inject("AVStore")
66 const { get_lib_from_av, map_av_dt_filter } = AVStore
67 const { setConfirmationDialog, setMessage, setWarning } =
70 const filters = reactive({ status: "" })
74 setConfirmationDialog,
82 this.filters.status = this.$route.query.status || ""
84 fp_config: flatpickr_defaults,
88 columns: this.getTableColumns(),
98 text: this.$__("Add items"),
107 beforeRouteEnter(to, from, next) {
114 async getCountTrains() {
115 const client = APIClient.preservation
116 client.trains.count().then(
118 this.count_trains = count
119 this.initialized = true
124 doShow: function (train, dt, event) {
125 event.preventDefault()
127 "/cgi-bin/koha/preservation/trains/" + train.train_id
130 doEdit: function (train, dt, event) {
132 "/cgi-bin/koha/preservation/trains/edit/" + train.train_id
135 doDelete: function (train, dt, event) {
136 this.setConfirmationDialog(
139 "Are you sure you want to remove this train?"
142 accept_label: this.$__("Yes, delete"),
143 cancel_label: this.$__("No, do not delete"),
146 const client = APIClient.preservation
147 client.trains.delete(train.train_id).then(
150 this.$__("Train %s deleted").format(train.name),
160 doAddItems: function (train, dt, event) {
161 if (train.closed_on != null) {
162 this.setWarning(this.$__("Cannot add items to a closed train"))
165 "/cgi-bin/koha/preservation/trains/" +
172 let url = "/api/v1/preservation/trains"
174 if (this.filters.status == "closed") {
176 "me.closed_on": { "!=": null },
178 "me.received_on": null,
180 } else if (this.filters.status == "sent") {
182 "me.closed_on": { "!=": null },
183 "me.sent_on": { "!=": null },
184 "me.received_on": null,
186 } else if (this.filters.status == "received") {
188 "me.closed_on": { "!=": null },
189 "me.sent_on": { "!=": null },
190 "me.received_on": { "!=": null },
194 url += "?" + new URLSearchParams({ q: JSON.stringify(q) })
199 filter_table: async function () {
200 let new_route = build_url(
201 "/cgi-bin/koha/preservation/trains",
204 this.$router.push(new_route)
205 if (this.$refs.table) {
206 this.$refs.table.redraw(this.table_url())
209 getTableColumns: function () {
210 let escape_str = this.escape_str
214 data: "me.train_id:me.name",
217 render: function (data, type, row, meta) {
218 return `<a href="/cgi-bin/koha/preservation/trains/${row.train_id}" class="show">${row.name} (#${row.train_id})</a>`
222 title: __("Created on"),
226 render: function (data, type, row, meta) {
227 return $date(row.created_on)
231 title: __("Closed on"),
235 render: function (data, type, row, meta) {
236 return $date(row.closed_on)
240 title: __("Sent on"),
244 render: function (data, type, row, meta) {
245 return $date(row.sent_on)
249 title: __("Received on"),
253 render: function (data, type, row, meta) {
254 return $date(row.received_on)
260 components: { flatPickr, Toolbar, KohaTable },
262 emits: ["select-train", "close"],
270 .filters > input[type="radio"] {
271 min-width: 0 !important;
273 .filters > input[type="button"] {