- $ref: "../swagger.yaml#/parameters/q_header"

<template>

    <FormKit

        v-if="!loading"

        ref="form"

        @submit="doSubmit"

        type="form"

        :actions="false"

        :value="data"

    >

        <FormKitSchema :schema="formSchema" :data="schemaData"></FormKitSchema>

    </FormKit>

    <div v-else>Loading...</div>

</template>

<script>

import { FormKitSchema } from "@formkit/vue"

import { $__ } from "../i18n"

export default {

    name: "Form",

    data() {

        return {

            schemaData: {

                doCancel: () => {

                    this.$emit("cancel")

                },

            },

            formSchema: [

                {

                    $el: "fieldset",

                    attrs: {

                        class: "rows",

                    },

                    children: this.schema,

                },

                {

                    $el: "fieldset",

                    attrs: {

                        class: "action",

                    },

                    children: [

                        {

                            $el: "input",

                            attrs: {

                                type: "submit",

                                class: "btn btn-primary",

                            },

                            ignore: false,

                            children: this.submitMessage,

                        },

                        {

                            $el: "a",

                            attrs: {

                                class: "cancel",

                                onClick: "$doCancel",

                            },

                            children: this.cancelMessage,

                        },

                    ],

                },

            ],

        }

    },

    methods: {

        async doSubmit(event) {

            this.$emit("submit", event)

        },

    },

    components: {

        FormKitSchema,

    },

    emits: ["submit", "cancel"],

    props: {

        schema: Object,

        loading: {

            type: Boolean,

            default: false,

        },

        data: {

            type: Object,

            default: {},

        },

        submitMessage: {

            type: String,

            default: $__("Submit"),

        },

        cancelMessage: {

            type: String,

            default: $__("Cancel"),

        },

    },

}

</script>

<style>

.formkit-value {

    align-items: center;

    background-color: #f5f5f5;

    border-radius: 0.25em;

    box-sizing: border-box;

    color: black;

    display: flex;

    justify-content: space-between;

    padding: 0.55em 0.5em;

    text-decoration: none;

    width: 100%;

}

a.formkit-value:hover {

    text-decoration: none;

}

.formkit-value::after {

    content: "\00D7";

    margin-left: 0.5em;

    font-size: 1.1em;

}

.formkit-dropdown {

    position: absolute;

    top: 100%;

    left: 0;

    min-width: 15em;

    background-color: white;

    box-shadow: 0 0 0.5em rgb(0 0 0 / 10%);

    margin: 0;

    padding: 0;

    list-style-type: none;

    overflow: hidden;

    border-radius: 0.25em;

}

.formkit-dropdown-item[data-selected="true"] {

    background-color: #cfe8fc;

}

.formkit-dropdown-item {

    padding: 0.5em;

    border-bottom: 1px solid #e4e4e4;

}

a.cancel {

    cursor: pointer;

}

</style>

<template>

    <h1>{{ title }}</h1>

    <Form

        :schema="schema"

        :data="data"

        @submit="processSubmit"

        @cancel="doCancel"

        :loading="loading"

    ></Form>

</template>

<script>

import Form from "../Form.vue"

import { inject } from "vue"

import { ImportSourcesClient } from "../../fetch/import-sources"

export default {

    name: "ISEdit",

    setup() {

        const { getFormSchema } = inject("modelStore")

        const api = new ImportSourcesClient()

        const { setMessage } = inject("mainStore")

        const schema = getFormSchema()

        return {

            schema,

            setMessage,

            api,

        }

    },

    data() {

        return {

            data: null,

            loading: true,

        }

    },

    methods: {

        async processSubmit(data) {

            let response

            let responseMessage

            if (data.import_source_id) {

                const { import_source_id: id, ...row } = data

                response = await this.api.update({ id, row })

                responseMessage = this.$__("Import source updated!")

            } else {

                response = await this.api.add({ row: data })

                responseMessage = this.$__("Import source created!")

            }

            if (response) {

                this.setMessage(responseMessage)

                return this.$router.push({ path: "../import-sources.pl" })

            }

        },

        doCancel() {

            this.$router.push({ path: "../import-sources.pl" })

        },

    },

    async created() {

        const { id } = this.$route.params

        if (id !== undefined) {

            const response = await this.api.getOne({

                id,

            })

            this.data = response

        }

        this.loading = false

    },

    computed: {

        title() {

            if (!this.data) return this.$__("Add import source")

            return this.$__("Edit %s").format(this.data.name)

        },

    },

    beforeMount() {

        this.$root.setTitle(this.title)

    },

    components: {

        Form,

    },

}

</script>

<template>

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

        <div class="btn-group">

            <button class="btn btn-default" @click="newImportSource">

                <i class="fa fa-plus"></i> New import source

            </button>

        </div>

    </div>

    <h1>{{ title }}</h1>

    <KohaTable

        v-bind="tableOptions"

        @edit="doEdit"

        @delete="doRemove"

    ></KohaTable>

</template>

<script>

import { useRouter } from "vue-router"

import { inject } from "vue"

import { ImportSourcesClient } from "../../fetch/import-sources"

import KohaTable from "../KohaTable.vue"

export default {

    name: "ISList",

    data() {

        return {

            title: this.$__("Import Sources"),

            tableOptions: {

                columns: this.columns,

                options: {

                    embed: "patron",

                },

                actions: {

                    "-1": ["edit", "delete"],

                },

                url: "/api/v1/import_sources",

            },

        }

    },

    setup() {

        const { getTableColumns } = inject("modelStore")

        const { setWarning, setMessage, setError, setConfirmationDialog } =

            inject("mainStore")

        const api = new ImportSourcesClient()

        const columns = getTableColumns()

        return {

            columns,

            setWarning,

            setMessage,

            setError,

            setConfirmationDialog,

            api,

        }

    },

    beforeMount() {

        this.$root.setTitle(this.title)

    },

    methods: {

        newImportSource() {

            this.$router.push({ path: "import-sources.pl/add" })

        },

        doEdit(data) {

            this.$router.push({

                path: `import-sources.pl/${data.import_source_id}`,

                props: {

                    data,

                },

            })

        },

        async doRemove(data, dt) {

            this.setConfirmationDialog(

                {

                    title: this.$__(

                        "Are you sure you want to remove this import source?"

                    ),

                    message: data.name,

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

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

                },

                async () => {

                    const response = await this.api.remove({

                        id: data.import_source_id,

                    })

                    if (response) {

                        this.setMessage(

                            this.$__("Import source %s removed").format(

                                data.name

                            ),

                            true

                        )

                        dt.draw()

                    }

                }

            )

        },

    },

    components: {

        KohaTable,

    },

}

</script>

// import { inject } from "vue"

import HttpClient from "./http-client";

export class ImportSourcesClient extends HttpClient {

    constructor() {

        super({

            baseURL: '/api/v1/import_sources',

        });

    }

    async add({row, headers={}}) {

        const requestHeaders = {...headers, 'Content-Type': 'application/json'}

        return this.post({

            endpoint: '',

            headers: requestHeaders,

            body: JSON.stringify(row)

        })

    }

    async remove({id, headers={}}) {

        return this.delete({

            endpoint: '/'+id,

            headers,

        })

    }

    async update({id, headers={}, row}) {

        const requestHeaders = {...headers, 'Content-Type': 'application/json'}

        return this.put({

            endpoint: '/'+id,

            headers: requestHeaders,

            body: JSON.stringify(row)

        })

    }

    async getOne({id, headers={}}) {

        return this.get({

            endpoint: '/'+id,

            headers,

        })

    }

}

            list: (query) =>

                this.get({

                    endpoint: "patrons" + (query ? '?'+query:''),

                })

import { createWebHistory, createRouter } from "vue-router";

export default (menuStore) => {

  const { routes } = menuStore

  const router = createRouter({

      history: createWebHistory(),

      linkExactActiveClass: "current",

      routes,

  })

  return router

}

import { createInput } from '@formkit/vue'

/**

 * This is an input "feature" — a function that accepts a node and exposes

 * some additional functionality to an input. When using schemas, this can

 * take the place of a traditional "script" block in a Vue component. In this

 * example, we expose:

 *

 *   - An input handler `search`.

 *   - An input handler `selections`.

 *   - Commit middleware to place filtered options into the `matches` prop.

 *

 * Once written, input features are added via the input declaration.

 */

const searchFeature = (node) => {

  const _transform_options = (options) => {

    if(!Array.isArray(options)) {

      return Object.keys(options).map((key) => ({label: options[key], value: key}))

    }

    return options.map((option) => {

      if(typeof option === 'string') return {label: option, value: option}

      return option

    })

  }

  // We wait for our node to be fully  "created" before we start to add our

  // handlers to ensure the core Vue plugin has added its context object:

  node.on('created', async () => {

    // Ensure our matches prop starts as an array.

    node.props.matches = []

    node.props.selection = ''

    if(node.value !== undefined && node.props.attrs && typeof node.props.attrs.optionLoader === 'function') {

      node.props.selection = await node.props.attrs.optionLoader(node.value)

    }

    const clearValue = async (e) => {

      if (e && typeof e.preventDefault === 'function') e.preventDefault()

      node.input('')

      node.props.matches = []

      node.props.selection = ''

      node.props.searchValue = ''

      setTimeout(() => {

        if (document.querySelector('input#' + node.props.id)) {

          document.querySelector('input#' + node.props.id).focus()

        }

      }, 50)

    }

    // When we actually have an value to set:

    const setValue = async (e) => {

      if (e && typeof e.preventDefault === 'function') e.preventDefault()

      node.input(node.props.selection.value)

      node.props.display = node.props.selection.label

      node.props.searchValue = ''

      await new Promise((r) => setTimeout(r, 50)) // "next tick"

    }

    // Perform a soft selection, this is shown as a highlight in the dropdown

    const select = (delta) => {

      const available = node.props.matches

      let idx = available.indexOf(node.props.selection) + delta

      if (idx >= available.length) {

        idx = 0

      } else if (idx < 0) {

        idx = available.length - 1

      }

      node.props.selection = available[idx]

    }

    // Add some new "handlers" for our autocomplete. The handlers object is

    // just a conventionally good place to put event handlers. Auto complete

    // inputs always have to deal with lots of keyboard events, so that logic

    // is registered here.

    Object.assign(node.context.handlers, {

      setValue,

      clearValue,

      selection: (e) => {

        // This handler is called when entering data into the search input.

        switch (e.key) {

          case 'Enter':

            return setValue()

          case 'ArrowDown':

            e.preventDefault()

            return select(1)

          case 'ArrowUp':

            e.preventDefault()

            return select(-1)

          case 'Escape':

            return node.props.matches = []

        }

      },

      blur: (e) => {

        if(!node.props.hovering) node.props.matches = []

      },

      search(e) {

        node.props.searchValue = e.target.value

      },

      hover: (e) => {

        node.props.hovering = true

        node.props.selection = node.props.matches.find(match => String(match.value) === e.target.attributes.value.value)

        console.log(node.props.selection)

      },

      unhover: (e) => {

        if (node.props.matches.find(match => String(match.value) === e.target.attributes.value.value) === node.props.selection) {

          node.props.selection = ''

          node.props.hovering = false

        }

      },

    })

  })

  // Perform filtering when the search value changes

  node.on('prop:searchValue', async ({ payload: value }) => {

    let results

    if(typeof node.props.options === 'function') {

      results = _transform_options(await node.props.options(value))

    } else {

      results = _transform_options(node.props.options).filter((option) =>

        option.label.toLowerCase().split(/\W/).find((part).startsWith(value.toLowerCase()))

      )

    }

    //if (!results.length) results.push('No matches')

    node.props.matches = results

  })

}

/**

 * This is our input schema responsible for rendering the inner “input”

 * section. In our example, we render an text input which will be used

 * to filter search results, and an unordered list that shows all remaining

 * matches.

 */

const schema = {

  if: '$value',

  then: [

    {

      $el: 'a',

      attrs: {

        id: '$id',

        href: '#',

        class: '$classes.value',

        onClick: '$handlers.clearValue',

      },

      children: '$selection.label'

    }

  ],

  else: [

    {

      $el: 'input',

      bind: '$attrs',

      attrs: {

        id: '$id',

        class: '$classes.input',

        onKeydown: '$handlers.selection',

        onInput: '$handlers.search',

        onBlur: '$handlers.blur',

        value: '$searchValue',

      },

    },

    {

      $el: 'ul',

      if: '$matches.length',

      attrs: {

        class: '$classes.dropdown',

      },

      children: [

        {

          $el: 'li',

          for: ['match', '$matches'],

          attrs: {

            'data-selected': {

              if: '$selection === $match',

              then: 'true',

              else: 'false',

            },

            value: '$match.value',

            class: '$classes.dropdownItem',

            onClick: '$handlers.setValue',

            onMouseenter: '$handlers.hover',

            onMouseleave: '$handlers.unhover',

          },

          children: '$match.label',

        },

      ],

    },

  ],

}

/**

 * Finally we create our actual input declaration by using `createInput` this

 * places our schema into a "standard" FormKit schema feature set with slots,

 * labels, help, messages etc. The return value of this function is a proper

 * input declaration.

 */

export default createInput(schema, {

  props: ['options', 'matches', 'selection', 'searchValue', 'value'],

  features: [searchFeature],

})

import autocomplete from './autocomplete'

export default {

  autocomplete

}

import PatronAPIClient from "../fetch/patron-api-client";

import { $__ } from "../i18n";

const api = new PatronAPIClient()

export default [

  {

    name: 'import_source_id',

    table: {

      data: 'import_source_id',

      visible: false

    },

    form: {

      type: 'hidden'

    }

  },

  {

    name: 'name',

    title: $__('Source name'),

    table: {

      data: 'name',

      searchable: true

    },

    form: {

      type: 'text',

      label: {

        $ref: 'title'

      },

      validation: 'required'

    }

  },

  {

    name: 'patron_id',

    title: $__('Patron'),

    table: {

      searchable: true,

      data: "patron.firstname:patron.surname:patron.middle_name",

      render: (data, type, row) => {

        const {firstname, surname, middle_name} = row.patron

        return [firstname, middle_name, surname].filter(part => (part||'').trim()).join(' ');

      }

    },

    form: {

      type: 'autocomplete',

      label: 'Choose a patron',

      validation: 'required',

      optionLoader: async (id) => {

        const {firstname, surname, middle_name, patron_id} = ( await api.patrons.get(id) || {} );

        return {value: patron_id, label: [firstname, middle_name, surname].filter(part => (part||'').trim()).join(' ')}

      },

      options: async (value) => {

        let query = '';

        if(value !== undefined) {

          query = new URLSearchParams({

            q: JSON.stringify([

              {

                firstname: {

                  like: '%'+value+'%'

                }

              },

              {

                middle_name: {

                  like: '%'+value+'%'

                }

              },

              {

                surname: {

                  like: '%'+value+'%'

                }

              }

            ])

          })

        }

        const response = await api.patrons.list(query)

        if(!response) return []

        return response.map(row => {

          const {firstname, surname, middle_name, patron_id} = row

          return {value: patron_id, label: [firstname, middle_name, surname].filter(part => (part||'').trim()).join(' ')}

        })

      }

    }

  }

]

import { plugin as formkit, defaultConfig } from '@formkit/vue'

import '@formkit/themes/genesis'