} else if (action == "remove") {

                                content.push(

                                    '<a class="remove btn btn-default btn-xs" role="button"><i class="fa fa-remove"></i> ' +

                                        this.$__("Remove") +

                                        "</a>"

                                )

<template></template>

<script>

export default {

    data() {

        return {}

    },

    methods: {},

    components: {},

}

</script>

<template>

    <div v-if="initialized && PreservationModule == 1">

        <Breadcrumb />

        <div class="main container-fluid">

            <div class="row">

                <div class="col-sm-10 col-sm-push-2">

                    <main>

                        <Dialog />

                        <router-view />

                    </main>

                </div>

                <div class="col-sm-2 col-sm-pull-10">

                    <aside>

                        <div id="navmenu">

                            <div id="navmenulist">

                                <h5>{{ $__("Preservation") }}</h5>

                                <ul>

                                    <li>

                                        <router-link

                                            to="/cgi-bin/koha/preservation/home.pl"

                                        >

                                            <i class="fa fa-home"></i>

                                            {{ $__("Home") }}</router-link

                                        >

                                    </li>

                                    <li>

                                        <router-link

                                            to="/cgi-bin/koha/preservation/trains"

                                        >

                                            <i class="fa fa-train"></i>

                                            {{ $__("Trains") }}</router-link

                                        >

                                    </li>

                                    <li>

                                        <router-link

                                            to="/cgi-bin/koha/preservation/waiting-list"

                                        >

                                            <i class="fa fa-recycle"></i>

                                            {{ $__("Waiting list") }}

                                        </router-link>

                                    </li>

                                    <li>

                                        <router-link

                                            to="/cgi-bin/koha/preservation/settings"

                                        >

                                            <i class="fa fa-cog"></i>

                                            {{ $__("Settings") }}

                                        </router-link>

                                    </li>

                                </ul>

                            </div>

                        </div>

                    </aside>

                </div>

            </div>

        </div>

    </div>

    <div class="main container-fluid" v-else>

        <Dialog />

    </div>

</template>

<script>

import { inject } from "vue"

import Breadcrumb from "../Breadcrumb.vue"

import Dialog from "../Dialog.vue"

import { APIClient } from "../../fetch/api-client.js"

import "vue-select/dist/vue-select.css"

export default {

    setup() {

        const AVStore = inject("AVStore")

        const mainStore = inject("mainStore")

        const { loading, loaded, setError } = mainStore

        const PreservationStore = inject("PreservationStore")

        return {

            AVStore,

            loading,

            loaded,

            setError,

            PreservationStore,

        }

    },

    data() {

        return {

            initialized: false,

            PreservationModule: null,

        }

    },

    beforeCreate() {

        this.loading()

        const fetch_config = () => {

            const sysprefs_client = APIClient.sysprefs

            const av_client = APIClient.authorised_values

            let promises = [

                sysprefs_client.sysprefs

                    .get("PreservationNotForLoanWaitingListIn")

                    .then(

                        value => {

                            this.PreservationStore.settings.not_for_loan_waiting_list_in =

                                value.value

                        },

                        error => {}

                    ),

                sysprefs_client.sysprefs

                    .get("PreservationNotForLoanDefaultTrainIn")

                    .then(

                        value => {

                            this.PreservationStore.settings.not_for_loan_default_train_in =

                                value.value

                        },

                        error => {}

                    ),

                av_client.values.get("NOT_LOAN").then(

                    values => {

                        this.AVStore.av_notforloan = values

                    },

                    error => {}

                ),

            ]

            return Promise.all(promises)

        }

        const sysprefs_client = APIClient.sysprefs

        sysprefs_client.sysprefs

            .get("PreservationModule")

            .then(value => {

                this.PreservationModule = value.value

                if (this.PreservationModule != 1) {

                    return this.setError(

                        this.$__(

                            'The preservation module is disabled, turn on <a href="/cgi-bin/koha/admin/preferences.pl?tab=&op=search&searchfield=PreservationModule">PreservationModule</a> to use it'

                        ),

                        false

                    )

                }

                return fetch_config()

            })

            .then(() => {

                this.loaded()

                this.initialized = true

            })

    },

    components: {

        Breadcrumb,

        Dialog,

    },

}

</script>

<style>

#navmenulist a.router-link-active {

    font-weight: 700;

}

#menu ul ul,

#navmenulist ul ul {

    padding-left: 2em;

    font-size: 100%;

}

form .v-select {

    display: inline-block;

    background-color: white;

    width: 30%;

}

.v-select,

input:not([type="submit"]):not([type="search"]):not([type="button"]):not([type="checkbox"]),

textarea {

    border-color: rgba(60, 60, 60, 0.26);

    border-width: 1px;

    border-radius: 4px;

    min-width: 30%;

}

.flatpickr-input {

    width: 30%;

}

#navmenulist ul li a.disabled {

    color: #666;

    pointer-events: none;

    font-weight: 700;

}

#navmenulist ul li a.disabled.router-link-active {

    color: #000;

}

</style>

<template>

    <div v-if="!initialized">{{ $__("Loading") }}</div>

    <div v-else id="settings">

        <h2>

            {{ $__("Edit preservation settings") }}

        </h2>

        <div>

            <form @submit="onSubmit($event)">

                <fieldset class="rows">

                    <legend>{{ $__("General settings") }}</legend>

                    <ol>

                        <li>

                            <label

                                class="required"

                                for="not_for_loan_waiting_list_in"

                                >{{

                                    $__(

                                        "Status for item added to waiting list"

                                    )

                                }}:</label

                            >

                            <v-select

                                id="not_for_loan_waiting_list_in"

                                v-model="settings.not_for_loan_waiting_list_in"

                                label="description"

                                :reduce="av => av.value"

                                :options="av_notforloan"

                            >

                                <template #search="{ attributes, events }">

                                    <input

                                        :required="

                                            !settings.not_for_loan_waiting_list_in

                                        "

                                        class="vs__search"

                                        v-bind="attributes"

                                        v-on="events"

                                    />

                                </template>

                            </v-select>

                        </li>

                        <li>

                            <label for="not_for_loan_default_train_in"

                                >{{

                                    $__(

                                        "Default status for item added to train"

                                    )

                                }}:</label

                            >

                            <v-select

                                id="not_for_loan_default_train_in"

                                v-model="settings.not_for_loan_default_train_in"

                                label="description"

                                :reduce="av => av.value"

                                :options="av_notforloan"

                            />

                        </li>

                    </ol>

                </fieldset>

                <fieldset class="action">

                    <input type="submit" value="Submit" />

                    <router-link

                        to="/cgi-bin/koha/preservation/home.pl"

                        role="button"

                        class="cancel"

                        >{{ $__("Cancel") }}</router-link

                    >

                </fieldset>

            </form>

            <SettingsProcessings />

        </div>

    </div>

</template>

<script>

import { inject } from "vue"

import { APIClient } from "../../fetch/api-client.js"

import { storeToRefs } from "pinia"

import SettingsProcessings from "./SettingsProcessings.vue"

export default {

    setup() {

        const AVStore = inject("AVStore")

        const { av_notforloan } = storeToRefs(AVStore)

        const { setMessage, setWarning } = inject("mainStore")

        const PreservationStore = inject("PreservationStore")

        const { settings } = storeToRefs(PreservationStore)

        return { av_notforloan, setMessage, setWarning, settings }

    },

    data() {

        return {

            initialized: true,

        }

    },

    methods: {

        checkForm(train) {

            let errors = []

            errors.forEach(function (e) {

                setWarning(e)

            })

            return !errors.length

        },

        onSubmit(e) {

            e.preventDefault()

            const client = APIClient.sysprefs

            client.sysprefs

                .update(

                    "PreservationNotForLoanWaitingListIn",

                    this.settings.not_for_loan_waiting_list_in

                )

                .then(

                    client.sysprefs.update(

                        "PreservationNotForLoanDefaultTrainIn",

                        this.settings.not_for_loan_default_train_in || 0

                    )

                )

                .then(

                    success => {

                        this.setMessage(this.$__("Settings updated"), true)

                    },

                    error => {}

                )

        },

    },

    components: { SettingsProcessings },

    name: "Settings",

}

</script>

<template>

    <fieldset>

        <legend>{{ $__("Processings") }}</legend>

        <ol>

            <li

                :id="`processing_${counter}`"

                class="rows"

                v-for="(processing, counter) in processings"

                v-bind:key="counter"

            >

                <router-link

                    :to="`/cgi-bin/koha/preservation/settings/processings/${processing.processing_id}`"

                >

                    {{ processing.name }}

                </router-link>

                <span class="action_links">

                    <a @click="deleteProcessing(processing)"

                        ><i class="fa fa-trash"></i>

                        {{ $__("Remove this processing") }}</a

                    >

                    <router-link

                        :to="`/cgi-bin/koha/preservation/settings/processings/edit/${processing.processing_id}`"

                        ><i class="fa fa-pencil"></i>

                        {{ $__("Edit this processing") }}</router-link

                    >

                </span>

            </li>

        </ol>

        <router-link

            to="/cgi-bin/koha/preservation/settings/processings/add"

            role="button"

            class="btn btn-default"

            ><font-awesome-icon icon="plus" />

            {{ $__("Add new processing") }}</router-link

        >

    </fieldset>

</template>

<script>

import { inject } from "vue"

import { APIClient } from "../../fetch/api-client.js"

export default {

    setup() {

        const { setConfirmationDialog, setMessage } = inject("mainStore")

        return { setConfirmationDialog, setMessage }

    },

    data() {

        return {

            processings: [],

        }

    },

    beforeCreate() {

        // FIXME Do we want that or a props passed from parent?

        const client = APIClient.preservation

        client.processings.getAll().then(

            processings => {

                this.processings = processings

            },

            error => {}

        )

    },

    methods: {

        deleteProcessing(processing) {

            this.setConfirmationDialog(

                {

                    title: this.$__(

                        "Are you sure you want to remove this processing?"

                    ),

                    message: processing.name,

                    accept_label: this.$__("Yes, delete"),

                    cancel_label: this.$__("No, do not delete"),

                },

                () => {

                    const client = APIClient.preservation

                    client.processings.delete(processing.processing_id).then(

                        success => {

                            this.setMessage(

                                this.$__("Processing %s deleted").format(

                                    processing.name

                                ),

                                true

                            )

                            client.processings.getAll().then(

                                processings => {

                                    this.processings = processings

                                },

                                error => {}

                            )

                        },

                        error => {}

                    )

                }

            )

        },

    },

    props: {},

    name: "SettingsProcessings",

}

</script>

<style scoped>

.action_links a {

    padding-left: 0.2em;

    font-size: 11px;

    cursor: pointer;

}

</style>

<template>

    <div v-if="!initialized">{{ $__("Loading") }}</div>

    <div v-else id="processings_add">

        <h2 v-if="processing.processing_id">

            {{ $__("Edit processing #%s").format(processing.processing_id) }}

        </h2>

        <h2 v-else>{{ $__("New processing") }}</h2>

        <div>

            <form @submit="onSubmit($event)">

                <fieldset class="rows">

                    <ol>

                        <li>

                            <label class="required" for="processing_name"

                                >{{ $__("Processing name") }}:</label

                            >

                            <input

                                id="processing_name"

                                v-model="processing.name"

                                :placeholder="$__('Processing name')"

                                required

                            />

                            <span class="required">{{ $__("Required") }}</span>

                        </li>

                    </ol>

                </fieldset>

                <fieldset class="rows">

                    <legend>{{ $__("Attributes") }}</legend>

                    <fieldset

                        :id="`attribute_${counter}`"

                        class="rows"

                        v-for="(attribute, counter) in processing.attributes"

                        v-bind:key="counter"

                    >

                        <legend>

                            {{ $__("Attribute %s").format(counter + 1) }}

                            <a

                                href="#"

                                @click.prevent="deleteAttribute(counter)"

                                ><i class="fa fa-trash"></i>

                                {{ $__("Remove this attribute") }}</a

                            >

                        </legend>

                        <ol>

                            <li>

                                <label

                                    :for="`attribute_name_${counter}`"

                                    class="required"

                                    >{{ $__("Name") }}:

                                </label>

                                <input

                                    :id="`attribute_name_${counter}`"

                                    type="text"

                                    :name="`attribute_name_${counter}`"

                                    v-model="attribute.name"

                                    required

                                />

                                <span class="required">{{

                                    $__("Required")

                                }}</span>

                            </li>

                            <li>

                                <label

                                    :for="`attribute_type_${counter}`"

                                    class="required"

                                    >{{ $__("Type") }}:

                                </label>

                                <v-select

                                    :id="`attribute_type_${counter}`"

                                    v-model="attribute.type"

                                    :options="attribute_types"

                                    :reduce="o => o.code"

                                    @option:selected="

                                        attribute.option_source = null

                                    "

                                >

                                    <template #search="{ attributes, events }">

                                        <input

                                            :required="!attribute.type"

                                            class="vs__search"

                                            v-bind="attributes"

                                            v-on="events"

                                        />

                                    </template>

                                </v-select>

                                <span class="required">{{

                                    $__("Required")

                                }}</span>

                            </li>

                            <li v-if="attribute.type == 'authorised_value'">

                                <label

                                    :for="`attribute_option_${counter}`"

                                    class="required"

                                    >{{ $__("Options") }}:

                                </label>

                                <v-select

                                    :id="`attribute_option_${counter}`"

                                    v-model="attribute.option_source"

                                    :options="authorised_value_categories"

                                >

                                    <template #search="{ attributes, events }">

                                        <input

                                            :required="!attribute.option_source"

                                            class="vs__search"

                                            v-bind="attributes"

                                            v-on="events"

                                        />

                                    </template>

                                </v-select>

                                <span class="required">{{

                                    $__("Required")

                                }}</span>

                            </li>

                            <li v-if="attribute.type == 'db_column'">

                                <label

                                    :for="`attribute_option_${counter}`"

                                    class="required"

                                    >{{ $__("Options") }}:

                                </label>

                                <v-select

                                    :id="`attribute_option_${counter}`"

                                    v-model="attribute.option_source"

                                    :options="db_column_options"

                                    :reduce="o => o.code"

                                >

                                    <template #search="{ attributes, events }">

                                        <input

                                            :required="!attribute.option_source"

                                            class="vs__search"

                                            v-bind="attributes"

                                            v-on="events"

                                        />

                                    </template>

                                </v-select>

                                <span class="required">{{

                                    $__("Required")

                                }}</span>

                            </li>

                        </ol>

                    </fieldset>

                    <a class="btn btn-default" @click="addAttribute"

                        ><font-awesome-icon icon="plus" />

                        {{ $__("Add new attribute") }}</a

                    >

                </fieldset>

                <fieldset class="action">

                    <input type="submit" value="Submit" />

                    <router-link

                        to="/cgi-bin/koha/preservation/settings"

                        role="button"

                        class="cancel"

                        >{{ $__("Cancel") }}</router-link

                    >

                </fieldset>

            </form>

        </div>

    </div>

</template>

<script>

import { inject } from "vue"

import { APIClient } from "../../fetch/api-client.js"

import { storeToRefs } from "pinia"

export default {

    setup() {

        const AVStore = inject("AVStore")

        const {} = storeToRefs(AVStore)

        const { setMessage, setWarning } = inject("mainStore")

        const db_column_options = Object.keys(db_columns).map(function (c) {

            return { label: "%s (%s)".format(db_columns[c], c), code: c }

        })

        return {

            setMessage,

            setWarning,

            authorised_value_categories,

            db_column_options,

        }

    },

    data() {

        return {

            processing: {

                processing_id: null,

                name: "",

                attributes: [],

            },

            attribute_types: [

                {

                    label: this.$__("Authorized value"),

                    code: "authorised_value",

                },

                {

                    label: this.$__("Free text"),

                    code: "free_text",

                },

                {

                    label: this.$__("Database column"),

                    code: "db_column",

                },

            ],

            initialized: false,

        }

    },

    beforeRouteEnter(to, from, next) {

        next(vm => {

            if (to.params.processing_id) {

                vm.processing = vm.getProcessing(to.params.processing_id)

            } else {

                vm.initialized = true

            }

        })

    },

    methods: {

        async getProcessing(processing_id) {

            const client = APIClient.preservation

            await client.processings.get(processing_id).then(

                processing => {

                    this.processing = processing

                    this.initialized = true

                },

                error => {}

            )

        },

        checkForm(processing) {

            let errors = []

            let attributes = processing.attributes

            errors.forEach(function (e) {

                setWarning(e)

            })

            return !errors.length

        },

        onSubmit(e) {

            e.preventDefault()

            let processing = JSON.parse(JSON.stringify(this.processing)) // copy

            let processing_id = processing.processing_id

            delete processing.processing_id

            if (!this.checkForm(processing)) {

                return false

            }

            processing.attributes = processing.attributes.map(

                ({ processing_id, processing_attribute_id, ...keepAttrs }) =>

                    keepAttrs

            )

            const client = APIClient.preservation

            if (processing_id) {

                client.processings.update(processing, processing_id).then(

                    success => {

                        this.setMessage(this.$__("Processing updated"))

                        this.$router.push("/cgi-bin/koha/preservation/settings")

                    },

                    error => {}

                )

            } else {

                client.processings.create(processing).then(

                    success => {

                        this.setMessage(this.$__("Processing created"))

                        this.$router.push("/cgi-bin/koha/preservation/settings")

                    },

                    error => {}

                )

            }

        },

        addAttribute() {

            this.processing.attributes.push({

                name: "",

                type: null,

                option_source: null,

            })

        },

        deleteAttribute(counter) {

            this.processing.attributes.splice(counter, 1)

        },

    },

    components: {},

    name: "SettingsProcessingsFormAdd",

}

</script>

<template>

    <div v-if="!initialized">{{ $__("Loading") }}</div>

    <div v-else id="processing_show">

        <h2>

            {{ $__("Processing #%s").format(processing.processing_id) }}

            <span class="action_links">

                <router-link

                    :to="`/cgi-bin/koha/preservation/settings/processings/edit/${processing.processing_id}`"

                    :title="$__('Edit')"

                    ><i class="fa fa-pencil"></i

                ></router-link>

                <a @click="doDelete()"><i class="fa fa-trash"></i></a>

            </span>

        </h2>

        <div>

            <fieldset class="rows">

                <ol>

                    <li>

                        <label>{{ $__("Processing name") }}:</label>

                        <span>

                            {{ processing.name }}

                        </span>

                    </li>

                </ol>

            </fieldset>

            <fieldset class="rows">

                <legend>{{ $__("Attributes") }}</legend>

                <ol v-if="processing.attributes.length">

                    <li

                        v-for="(attribute, counter) in processing.attributes"

                        v-bind:key="counter"

                    >

                        <label>{{ attribute.name }}</label>

                        <span v-if="attribute.type == 'authorised_value'">{{

                            $__("Authorized value")

                        }}</span>

                        <span v-else-if="attribute.type == 'free_text'">{{

                            $__("Free text")

                        }}</span>

                        <span v-else-if="attribute.type == 'db_column'">{{

                            $__("Database column")

                        }}</span>

                        <span v-else

                            >{{ $__("Unknown") }} - {{ attribute.type }}</span

                        >

                    </li>

                </ol>

                <span v-else>

                    {{

                        $__(

                            "There are no attributes defined for this processing."

                        )

                    }}

                </span>

            </fieldset>

            <fieldset class="action">

                <router-link

                    to="/cgi-bin/koha/preservation/settings"

                    role="button"

                    class="cancel"

                    >{{ $__("Close") }}</router-link

                >

            </fieldset>

        </div>

    </div>

</template>

<script>

import { inject } from "vue"

import { APIClient } from "../../fetch/api-client.js"

export default {

    setup() {

        const { setConfirmationDialog, setMessage } = inject("mainStore")

        return {

            setConfirmationDialog,

            setMessage,

        }

    },

    data() {

        return {

            processing: {

                processing_id: null,

                name: "",

                attributes: [],

            },

            initialized: false,

        }

    },

    beforeRouteEnter(to, from, next) {

        next(vm => {

            vm.getProcessing(to.params.processing_id)

        })

    },

    beforeRouteUpdate(to, from) {

        this.processing = this.getProcessing(to.params.processing_id)

    },

    methods: {

        async getProcessing(processing_id) {

            const client = APIClient.preservation

            await client.processings.get(processing_id).then(

                processing => {

                    this.processing = processing

                    this.initialized = true

                },

                error => {}

            )

        },

        doDelete: function () {

            this.setConfirmationDialog(

                {

                    title: this.$__(

                        "Are you sure you want to remove this processing?"

                    ),

                    message: this.processing.name,

                    accept_label: this.$__("Yes, delete"),

                    cancel_label: this.$__("No, do not delete"),

                },

                () => {

                    const client = APIClient.preservation

                    client.processings

                        .delete(this.processing.processing_id)

                        .then(

                            success => {

                                this.setMessage(

                                    this.$__("Processing %s deleted").format(

                                        this.processing.name

                                    ),

                                    true

                                )

                                this.$router.push(

                                    "/cgi-bin/koha/preservation/settings"

                                )

                            },

                            error => {}

                        )

                }

            )

        },

    },

    name: "ProcessingsShow",

}

</script>

<style scoped>

.action_links a {

    padding-left: 0.2em;

    font-size: 11px;

    cursor: pointer;

}

</style>

<template>

    <div v-if="!initialized">{{ $__("Loading") }}</div>

    <div v-else id="trains_add">

        <h2 v-if="train.train_id">

            {{ $__("Edit train #%s").format(train.train_id) }}

        </h2>

        <h2 v-else>{{ $__("New train") }}</h2>

        <div>

            <form @submit="onSubmit($event)">

                <fieldset class="rows">

                    <ol>

                        <li>

                            <label class="required" for="train_name"

                                >{{ $__("name") }}:</label

                            >

                            <input

                                id="train_name"

                                v-model="train.name"

                                :placeholder="$__('Name')"

                                required

                            />

                            <span class="required">{{ $__("Required") }}</span>

                        </li>

                        <li>

                            <label class="required" for="train_description"

                                >{{ $__("Description") }}:

                            </label>

                            <textarea

                                id="train_description"

                                v-model="train.description"

                                :placeholder="$__('Description')"

                                required

                                rows="10"

                                cols="50"

                            />

                            <span class="required">{{ $__("Required") }}</span>

                        </li>

                        <li>

                            <label for="not_for_loan_waiting_list_in"

                                >{{

                                    $__("Status for item added to this train")

                                }}:</label

                            >

                            <v-select

                                id="not_for_loan"

                                v-model="train.not_for_loan"

                                label="description"

                                :reduce="av => av.value"

                                :options="av_notforloan"

                            />

                        </li>

                        <li>

                            <label

                                class="required"

                                for="train_default_processing"

                                >{{ $__("Default processing") }}:

                            </label>

                            <v-select

                                id="train_default_processing"

                                label="name"

                                v-model="train.default_processing_id"

                                :reduce="p => p.processing_id"

                                :options="processings"

                                :required="!train.default_processing_id"

                            >

                                <template #search="{ attributes, events }">

                                    <input

                                        :required="!train.default_processing_id"

                                        class="vs__search"

                                        v-bind="attributes"

                                        v-on="events"

                                    />

                                </template>

                            </v-select>

                        </li>

                    </ol>

                </fieldset>

                <fieldset class="action">

                    <input type="submit" value="Submit" />

                    <router-link

                        to="/cgi-bin/koha/preservation/trains"

                        role="button"

                        class="cancel"

                        >{{ $__("Cancel") }}</router-link

                    >

                </fieldset>

            </form>

        </div>

    </div>

</template>

<script>

import { inject } from "vue"

import { storeToRefs } from "pinia"

import { APIClient } from "../../fetch/api-client.js"

export default {

    setup() {

        const AVStore = inject("AVStore")

        const { av_notforloan } = storeToRefs(AVStore)

        const { setMessage, setWarning } = inject("mainStore")

        const PreservationStore = inject("PreservationStore")

        const { settings } = storeToRefs(PreservationStore)

        return { av_notforloan, setMessage, setWarning, settings }

    },

    data() {

        return {

            train: {

                train_id: null,

                name: "",

                description: "",

                not_for_loan: this.settings.not_for_loan_default_train_in,

                default_processing_id: null,

                created_on: null,

                closed_on: null,

                sent_on: null,

                received_on: null,

            },

            processings: [],

            initialized: false,

        }

    },

    beforeRouteEnter(to, from, next) {

        next(vm => {

            if (to.params.train_id) {

                vm.train = vm.getTrain(to.params.train_id)

            } else {

                vm.initialized = true

            }

        })

    },

    beforeCreate() {

        const client = APIClient.preservation

        client.processings.getAll().then(

            processings => {

                this.processings = processings

            },

            error => {}

        )

    },

    methods: {

        async getTrain(train_id) {

            const client = APIClient.preservation

            client.trains.get(train_id).then(train => {

                this.train = train

                this.initialized = true

            })

        },

        checkForm(train) {

            let errors = []

            errors.forEach(function (e) {

                setWarning(e)

            })

            return !errors.length

        },

        onSubmit(e) {

            e.preventDefault()

            let train = JSON.parse(JSON.stringify(this.train)) // copy

            let train_id = train.train_id

            if (!this.checkForm(train)) {

                return false

            }

            delete train.train_id

            delete train.default_processing

            delete train.items

            const client = APIClient.preservation

            if (train_id) {

                client.trains.update(train, train_id).then(

                    success => {

                        this.setMessage(this.$__("Train updated"))

                        this.$router.push("/cgi-bin/koha/preservation/trains")

                    },

                    error => {}

                )

            } else {

                client.trains.create(train).then(

                    success => {

                        this.setMessage(this.$__("Train created"))

                        this.$router.push("/cgi-bin/koha/preservation/trains")

                    },

                    error => {}

                )

            }

        },

    },

    components: {},

    name: "TrainsFormAdd",

}

</script>

<template>

    <div v-if="!initialized">{{ $__("Loading") }}</div>

    <div v-else id="trains_add_item">

        <h2 v-if="train_item && train_item.train_item_id">

            {{ $__("Edit item #%s").format(train_item.item_id) }}

        </h2>

        <h2 v-else>{{ $__("Add new item to %s").format(train.name) }}</h2>

        <div v-if="train_item">

            <form @submit="onSubmit($event)">

                <fieldset class="rows">

                    <ol>

                        <li>

                            <label for="itemnumber"

                                >{{ $__("Itemnumber") }}:</label

                            >

                            <span>{{ train_item.item_id }}</span>

                        </li>

                        <li>

                            <label for="processing"

                                >{{ $__("Processing") }}:

                            </label>

                            <v-select

                                id="processing"

                                label="name"

                                v-model="train_item.processing_id"

                                @option:selected="refreshAttributes(1)"

                                :reduce="p => p.processing_id"

                                :options="processings"

                                :clearable="false"

                            />

                        </li>

                        <li

                            class="attribute"

                            v-for="(attribute, counter) in attributes"

                            v-bind:key="counter"

                        >

                            <label :for="`attribute_${counter}`"

                                >{{ attribute.name }}:

                            </label>

                            <span v-if="attribute.type == 'authorised_value'">

                                <v-select

                                    :id="`attribute_${counter}`"

                                    v-model="attribute.value"

                                    label="description"

                                    :reduce="av => av.value"

                                    :options="

                                        av_options[attribute.option_source]

                                    "

                                />

                            </span>

                            <span v-else-if="attribute.type == 'free_text'">

                                <input

                                    :id="`attribute_${counter}`"

                                    v-model="attribute.value"

                                />

                            </span>

                            <span v-else-if="attribute.type == 'db_column'">

                                <input

                                    :id="`attribute_${counter}`"

                                    v-model="attribute.value"

                                />

                            </span>

                        </li>

                    </ol>

                </fieldset>

                <fieldset class="action">

                    <input type="submit" value="Submit" />

                    <router-link

                        to="/cgi-bin/koha/preservation/trains"

                        role="button"

                        class="cancel"

                        >{{ $__("Cancel") }}</router-link

                    >

                </fieldset>

            </form>

        </div>

        <div v-else>

            <form @submit="getItemFromWaitingList($event)">

                <fieldset class="rows">

                    <ol>

                        <li>

                            <label class="required" for="barcode"

                                >{{ $__("barcode") }}:</label

                            >

                            <input

                                id="barcode"

                                v-model="barcode"

                                :placeholder="$__('barcode')"

                                required

                            />

                            <span class="required">{{ $__("Required") }}</span>

                        </li>

                    </ol>

                </fieldset>

                <fieldset class="action">

                    <input type="submit" value="Submit" />

                    <router-link

                        :to="`/cgi-bin/koha/preservation/trains/${train.train_id}`"

                        role="button"

                        class="cancel"

                        >{{ $__("Cancel") }}</router-link

                    >

                </fieldset>

            </form>

        </div>

    </div>

</template>

<script>

import { inject } from "vue"

import { APIClient } from "../../fetch/api-client"

export default {

    setup() {

        const { setMessage, setWarning, loading, loaded } = inject("mainStore")

        return {

            setMessage,

            setWarning,

            loading,

            loaded,

            api_mappings,

        }

    },

    data() {

        return {

            train: {

                train_id: null,

                name: "",

                description: "",

            },

            item: { item_id: null },

            train_item: null,

            barcode: "",

            processings: [],

            processing: null,

            initialized: false,

            av_options: {},

            default_values: {},

            attributes: [],

        }

    },

    beforeCreate() {

        const client = APIClient.preservation

        client.processings

            .getAll()

            .then(processings => (this.processings = processings))

    },

    beforeRouteEnter(to, from, next) {

        next(vm => {

            if (to.params.train_item_id) {

                vm.train = vm

                    .getTrain(to.params.train_id)

                    .then(() =>

                        vm

                            .getTrainItem(

                                to.params.train_id,

                                to.params.train_item_id

                            )

                            .then(() =>

                                vm

                                    .refreshAttributes()

                                    .then(() => (vm.initialized = true))

                            )

                    )

            } else {

                vm.train = vm

                    .getTrain(to.params.train_id)

                    .then(() => (vm.initialized = true))

            }

        })

    },

    methods: {

        async getTrain(train_id) {

            const client = APIClient.preservation

            await client.trains.get(train_id).then(

                train => {

                    this.train = train

                },

                error => {}

            )

        },

        async getTrainItem(train_id, train_item_id) {

            const client = APIClient.preservation

            await client.train_items.get(train_id, train_item_id).then(

                train_item => {

                    this.train_item = train_item

                    this.item = train_item.catalogue_item

                },

                error => {}

            )

        },

        async getItemFromWaitingList(e) {

            e.preventDefault()

            const client = APIClient.preservation

            client.waiting_list_items.get_from_barcode(this.barcode).then(

                item => {

                    if (!item) {

                        this.setWarning(

                            this.$__(

                                "Cannot find item with this barcode. It must be in the waiting list."

                            )

                        )

                        return

                    }

                    this.item = item

                    this.train_item = {

                        item_id: item.item_id,

                        processing_id: this.train.default_processing_id,

                    }

                    this.refreshAttributes(1)

                },

                error => {}

            )

        },

        columnApiMapping(db_column) {

            let table_col = db_column.split(".")

            let table = table_col[0]

            let col = table_col[1]

            let api_attribute = this.api_mappings[table][col] || col

            return table == "biblio" || table == "biblioitems"

                ? this.item.biblio[api_attribute]

                : this.item[api_attribute]

        },

        updateDefaultValues() {

            this.processing.attributes

                .filter(attribute => attribute.type == "db_column")

                .forEach(attribute => {

                    this.default_values[attribute.processing_attribute_id] =

                        this.columnApiMapping(attribute.option_source)

                })

        },

        async refreshAttributes(apply_default_value) {

            this.loading()

            const client = APIClient.preservation

            await client.processings.get(this.train_item.processing_id).then(

                processing => (this.processing = processing),

                error => {}

            )

            this.updateDefaultValues()

            this.attributes = this.processing.attributes.map(attribute => {

                let value = ""

                if (!apply_default_value) {

                    let existing_attribute = this.train_item.attributes.find(

                        a =>

                            a.processing_attribute_id ==

                            attribute.processing_attribute_id

                    )

                    if (existing_attribute) {

                        value = existing_attribute.value

                    }

                } else if (attribute.type == "db_column") {

                    value =

                        this.default_values[attribute.processing_attribute_id]

                }

                return {

                    processing_attribute_id: attribute.processing_attribute_id,

                    name: attribute.name,

                    type: attribute.type,

                    option_source: attribute.option_source,

                    value,

                }

            })

            const client_av = APIClient.authorised_values

            let av_cat_array = this.processing.attributes

                .filter(attribute => attribute.type == "authorised_value")

                .map(attribute => attribute.option_source)

            client_av.values

                .getCategoriesWithValues([

                    ...new Set(av_cat_array.map(av_cat => '"' + av_cat + '"')),

                ]) // unique

                .then(av_categories => {

                    av_cat_array.forEach(av_cat => {

                        let av_match = av_categories.find(

                            element => element.category_name == av_cat

                        )

                        this.av_options[av_cat] = av_match.authorised_values

                    })

                })

                .then(() => this.loaded())

        },

        onSubmit(e) {

            e.preventDefault()

            let train_item_id = this.train_item.train_item_id

            let train_item = {

                item_id: this.train_item.item_id,

                processing_id: this.train_item.processing_id,

                attributes: this.attributes.map(a => ({

                    processing_attribute_id: a.processing_attribute_id,

                    value: a.value,

                })),

            }

            const client = APIClient.preservation

            if (train_item_id) {

                client.train_items

                    .update(train_item, this.train.train_id, train_item_id)

                    .then(

                        success => {

                            this.setMessage(this.$__("Item updated"))

                            this.$router.push(

                                "/cgi-bin/koha/preservation/trains/" +

                                    this.train.train_id

                            )

                        },

                        error => {}

                    )

            } else {

                client.train_items.create(train_item, this.train.train_id).then(

                    success => {

                        this.setMessage(this.$__("Item added to train"))

                        this.$router.push(

                            "/cgi-bin/koha/preservation/trains/" +

                                this.train.train_id

                        )

                    },

                    error => {}

                )

            }

        },

    },

    components: {},

    name: "TrainsFormAdd",

}

</script>

<template>

    <div v-if="!initialized">{{ $__("Loading") }}</div>

    <div v-else id="trains_list">

        <Toolbar />

        <fieldset v-if="count_trains > 0" class="filters">

            <label>{{ $__("Filter by") }}:</label>

            <input

                type="radio"

                id="all_status_filter"

                v-model="filters.status"

                value=""

            /><label for="all_status_filter">{{ $__("All") }}</label>

            <input

                type="radio"

                id="closed_status_filter"

                v-model="filters.status"

                value="closed"

            /><label for="closed_status_filter">{{ $__("Closed") }}</label>

            <input

                type="radio"

                id="sent_status_filter"

                v-model="filters.status"

                value="sent"

            /><label for="sent_status_filter">{{ $__("Sent") }}</label>

            <input

                type="radio"

                id="received_status_filter"

                v-model="filters.status"

                value="received"

            /><label for="received_status_filter">{{ $__("Received") }}</label>

            <input

                @click="filter_table"

                id="filter_table"

                type="button"

                :value="$__('Filter')"

            />

        </fieldset>

        <div v-if="count_trains > 0" class="page-section">

            <KohaTable

                ref="table"

                v-bind="tableOptions"

                @show="doShow"

                @edit="doEdit"

                @delete="doDelete"

                @addItems="doAddItems"

            ></KohaTable>

        </div>

        <div v-else class="dialog message">

            {{ $__("There are no trains defined") }}

        </div>

    </div>

</template>

<script>

import flatPickr from "vue-flatpickr-component"

import Toolbar from "./TrainsToolbar.vue"

import { inject, ref, reactive } from "vue"

import { APIClient } from "../../fetch/api-client"

import { build_url } from "../../composables/datatables"

import KohaTable from "../KohaTable.vue"

export default {

    setup() {

        const AVStore = inject("AVStore")

        const { get_lib_from_av, map_av_dt_filter } = AVStore

        const { setConfirmationDialog, setMessage } = inject("mainStore")

        const table = ref()

        const filters = reactive({ status: "" })

        return {

            get_lib_from_av,

            map_av_dt_filter,

            setConfirmationDialog,

            setMessage,

            table,

            filters,

        }

    },

    data: function () {

        this.filters.status = this.$route.query.status || ""

        return {

            fp_config: flatpickr_defaults,

            count_trains: 0,

            initialized: false,

            tableOptions: {

                columns: this.getTableColumns(),

                url: this.table_url,

                add_filters: true,

                actions: {

                    0: ["show"],

                    "-1": [

                        "edit",

                        "delete",

                        {

                            addItems: {

                                text: this.$__("Add items"),

                                icon: "fa fa-plus",

                            },

                        },

                    ],

                },

            },

        }

    },

    beforeRouteEnter(to, from, next) {

        next(vm => {

            vm.getCountTrains()

        })

    },

    computed: {},

    methods: {

        async getCountTrains() {

            const client = APIClient.preservation

            client.trains.count().then(

                count => {

                    this.count_trains = count

                    this.initialized = true

                },

                error => {}

            )

        },

        doShow: function (train, dt, event) {

            event.preventDefault()

            this.$router.push(

                "/cgi-bin/koha/preservation/trains/" + train.train_id

            )

        },

        doEdit: function (train, dt, event) {

            this.$router.push(

                "/cgi-bin/koha/preservation/trains/edit/" + train.train_id

            )

        },

        doDelete: function (train, dt, event) {

            this.setConfirmationDialog(

                {

                    title: this.$__(

                        "Are you sure you want to remove this train?"

                    ),

                    message: train.name,

                    accept_label: this.$__("Yes, delete"),

                    cancel_label: this.$__("No, do not delete"),

                },

                () => {

                    const client = APIClient.preservation

                    client.trains.delete(train.train_id).then(

                        success => {

                            this.setMessage(

                                this.$__("Train %s deleted").format(train.name),

                                true

                            )

                            dt.draw()

                        },

                        error => {}

                    )

                }

            )

        },

        doAddItems: function (train, dt, event) {

            this.$router.push(

                "/cgi-bin/koha/preservation/trains/" +

                    train.train_id +

                    "/items/add"

            )

        },

        table_url() {

            let url = "/api/v1/preservation/trains"

            let q

            if (this.filters.status == "closed") {

                q = {

                    "me.closed_on": { "!=": null },

                    "me.sent_on": null,

                    "me.received_on": null,

                }

            } else if (this.filters.status == "sent") {

                q = {

                    "me.closed_on": { "!=": null },

                    "me.sent_on": { "!=": null },

                    "me.received_on": null,

                }

            } else if (this.filters.status == "received") {

                q = {

                    "me.closed_on": { "!=": null },

                    "me.sent_on": { "!=": null },

                    "me.received_on": { "!=": null },

                }

            }

            if (q) {

                url += "?" + new URLSearchParams({ q: JSON.stringify(q) })

            }

            return url

        },

        filter_table: async function () {

            let new_route = build_url(

                "/cgi-bin/koha/preservation/trains",

                this.filters

            )

            this.$router.push(new_route)

            if (this.$refs.table) {

                this.$refs.table.redraw(this.table_url())

            }

        },

        getTableColumns: function () {

            let escape_str = this.escape_str

            return [

                {

                    title: __("Name"),

                    data: "me.train_id:me.name",

                    searchable: true,

                    orderable: true,

                    render: function (data, type, row, meta) {

                        return `<a href="/cgi-bin/koha/preservation/trains/${row.train_id}" class="show">${row.name} (#${row.train_id})</a>`

                    },

                },

                {

                    title: __("Created on"),

                    data: "created_on",

                    searchable: true,

                    orderable: true,

                    render: function (data, type, row, meta) {

                        return $date(row.created_on)

                    },

                },

                {

                    title: __("Closed on"),

                    data: "closed_on",

                    searchable: true,

                    orderable: true,

                    render: function (data, type, row, meta) {

                        return $date(row.closed_on)

                    },

                },

                {

                    title: __("Sent on"),

                    data: "sent_on",

                    searchable: true,

                    orderable: true,

                    render: function (data, type, row, meta) {

                        return $date(row.sent_on)

                    },

                },

                {

                    title: __("Received on"),

                    data: "received_on",

                    searchable: true,

                    orderable: true,

                    render: function (data, type, row, meta) {

                        return $date(row.received_on)

                    },

                },

            ]

        },

    },

    components: { flatPickr, Toolbar, KohaTable },

    name: "trainsList",

    emits: ["select-train", "close"],

}

</script>

<style scoped>

#train_list {

    display: table;

}

.filters > input[type="radio"] {

    min-width: 0 !important;

}

.filters > input[type="button"] {

    margin-left: 1rem;

}

</style>

<template>

    <transition name="modal">

        <div v-if="show_modal" class="modal">

            <h2>{{ $__("Copy item to the following train") }}</h2>

            <form @submit="copyItem($event)">

                <div class="page-section">

                    <fieldset class="rows">

                        <ol>

                            <li>

                                <label class="required" for="train_list"

                                    >{{ $__("Select a train") }}:</label

                                >

                                <v-select

                                    v-model="train_id_selected_for_copy"

                                    label="name"

                                    :options="train_list"

                                    :reduce="t => t.train_id"

                                >

                                    <template #search="{ attributes, events }">

                                        <input

                                            :required="

                                                !train_id_selected_for_copy

                                            "

                                            class="vs__search"

                                            v-bind="attributes"

                                            v-on="events"

                                        />

                                    </template>

                                </v-select>

                                <span class="required">{{

                                    $__("Required")

                                }}</span>

                            </li>

                        </ol>

                    </fieldset>

                    <fieldset class="action">

                        <input type="submit" value="Copy" />

                        <input

                            type="button"

                            @click="show_modal = false"

                            :value="$__('Close')"

                        />

                    </fieldset>

                </div>

            </form>

        </div>

    </transition>

    <div v-if="!initialized">{{ $__("Loading") }}</div>

    <div v-else id="trains_show">

        <div id="toolbar" class="btn-toolbar">

            <router-link

                :to="`/cgi-bin/koha/preservation/trains/${train.train_id}/items/add`"

                class="btn btn-default"

                ><font-awesome-icon icon="plus" />

                {{ $__("Add items") }}</router-link

            >

            <router-link

                :to="`/cgi-bin/koha/preservation/trains/edit/${train.train_id}`"

                class="btn btn-default"

                ><font-awesome-icon icon="pencil" />

                {{ $__("Edit") }}</router-link

            >

            <a @click="deleteTrain(train)" class="btn btn-default"

                ><font-awesome-icon icon="trash" /> {{ $__("Delete") }}</a

            >

            <a

                v-if="!train.closed_on"

                class="btn btn-default"

                @click="closeTrain"

                ><font-awesome-icon icon="remove" /> {{ $__("Close") }}</a

            >

            <a

                v-else-if="!train.sent_on"

                class="btn btn-default"

                @click="sendTrain"

                ><font-awesome-icon icon="paper-plane" /> {{ $__("Send") }}</a

            >

            <a

                v-else-if="!train.received_on"

                class="btn btn-default"

                @click="receiveTrain"

                ><font-awesome-icon icon="inbox" /> {{ $__("Receive") }}</a

            >

        </div>

        <h2>

            {{ $__("Train #%s").format(train.train_id) }}

        </h2>

        <div>

            <fieldset class="rows">

                <ol>

                    <li>

                        <label>{{ $__("Name") }}:</label>

                        <span>

                            {{ train.name }}

                        </span>

                    </li>

                    <li>

                        <label>{{ $__("Description") }}:</label>

                        <span>

                            {{ train.description }}

                        </span>

                    </li>

                    <li v-if="train.closed_on">

                        <label>{{ $__("Closed on") }}:</label>

                        <span>

                            {{ format_date(train.closed_on) }}

                        </span>

                    </li>

                    <li v-if="train.sent_on">

                        <label>{{ $__("Sent on") }}:</label>

                        <span>

                            {{ format_date(train.sent_on) }}

                        </span>

                    </li>

                    <li v-if="train.received_on">

                        <label>{{ $__("Received on") }}:</label>

                        <span>

                            {{ format_date(train.received_on) }}

                        </span>

                    </li>

                    <li>

                        <label

                            >{{

                                $__("Status for item added to this train")

                            }}:</label

                        >

                        <span>{{

                            get_lib_from_av("av_notforloan", train.not_for_loan)

                        }}</span>

                    </li>

                    <li>

                        <label>{{ $__("Default processing") }}:</label>

                        <span>

                            {{ train.default_processing.name }}

                        </span>

                    </li>

                </ol>

            </fieldset>

            <fieldset v-if="train.items.length" class="rows">

                <legend>{{ $__("Items") }}</legend>

                <table v-if="item_table.display" :id="table_id"></table>

                <ol v-else>

                    <li

                        :id="`item_${counter}`"

                        class="rows"

                        v-for="(item, counter) in train.items"

                        v-bind:key="counter"

                    >

                        <!-- FIXME Counter here may change, we should pass an order by clause when retrieving the items -->

                        <label

                            >{{ counter + 1 }}

                            <span class="action_links">

                                <router-link

                                    :to="`/cgi-bin/koha/preservation/trains/${train.train_id}/items/edit/${item.train_item_id}`"

                                    :title="$__('Edit')"

                                    ><i class="fa fa-pencil"></i></router-link

                            ></span>

                        </label>

                        <div class="attributes_values">

                            <span

                                :id="`attribute_${counter_attribute}`"

                                class="attribute_value"

                                v-for="(

                                    attribute, counter_attribute

                                ) in item.attributes"

                                v-bind:key="counter_attribute"

                            >

                                <!-- FIXME We need to display the description of the AV here -->

                                {{ attribute.processing_attribute.name }}={{

                                    attribute.value

                                }}

                            </span>

                        </div>

                    </li>

                </ol>

            </fieldset>

            <fieldset class="action">

                <router-link

                    to="/cgi-bin/koha/preservation/trains"

                    role="button"

                    class="cancel"

                    >{{ $__("Close") }}</router-link

                >

            </fieldset>

        </div>

    </div>

</template>

<script>

import { inject, createVNode, render } from "vue"

import { APIClient } from "../../fetch/api-client"

import { useDataTable } from "../../composables/datatables"

export default {

    setup() {

        const format_date = $date

        const AVStore = inject("AVStore")

        const { get_lib_from_av } = AVStore

        const { setConfirmationDialog, setMessage } = inject("mainStore")

        const table_id = "item_list"

        useDataTable(table_id)

        return {

            format_date,

            get_lib_from_av,

            table_id,

            setConfirmationDialog,

            setMessage,

        }

    },

    data() {

        return {

            train: {

                train_id: null,

                name: "",

                description: "",

            },

            initialized: false,

            show_modal: false,

            item_table: {

                display: false,

                data: [],

                columns: [],

            },

            train_list: [],

            train_id_selected_for_copy: null,

            train_item_id_to_copy: null,

        }

    },

    beforeRouteEnter(to, from, next) {

        next(vm => {

            vm.getTrain(to.params.train_id).then(() => vm.build_datatable())

            vm.getTrainList()

        })

    },

    methods: {

        async getTrain(train_id) {