q42-cms-components/shared/listing-filter-link.js

Front-end package that provides a UI on top of the QMS back-end

import { doc } from '../docs/doc.js';

export const createFilterLink = doc(function (options) {
  return {
    name: 'listing-filter-link',
    props: {
      item: {
        type: Object
      },
      propertyName: {
        type: String
      }
    },
    render(h) {
      return h('a', {
        attrs: {href: 'javascript:void(0)'},
        style: {margin: "-0.5em", padding: "0.5em"}, // make click target bigger
        on: {click: this.clickHandler}
      }, [h('span', {
        attrs: {class: 'icon-search'},
        style: {paddingRight: "5px"}
      }), options.text || this.propertyName])
    },
    methods: {
      clickHandler(evt) {
        evt.stopPropagation();
        const field = options.field || this.fieldName(this.item.$item.$type);
        this.$router.push({
          path: options.href,
          query: {
            ...this.$route.query,
            [field]: this.item.$item.id,
          }
        })
      },
      fieldName($type) {
        const className = $type.match(/\.([^.,]+)(,|$)/)[1];
        return className.charAt(0).toLowerCase() + className.substr(1) + 'Id';
      }
    }
  }
}, `Genereert een <code>customField</code> component voor een <code>listing</code> die linkt naar een andere pagina
  met daarop ook een <code>listing</code> die dan wordt gefilterd op items met een referentie naar het gekozen item.
  <code>options</code> heeft als velden: <ul>
    <li><code>text</code> de linktekst
    <li><code>href</code> het pad waarnaar gelinkt wordt
    <li><code>field</code> naam van het property waarop gefilterd moet worden
  </ul>`);