@dbp-topics/library/dist/dbp-library-shelving.js

[GitLab Repository](https://gitlab.tugraz.at/dbp/library/library) | [npmjs package](https://www.npmjs.com/package/@dbp-topics/library) | [Unpkg CDN](https://unpkg.com/browse/@dbp-topics/library/)

let _ = t => t,
    _t,
    _t2;

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

/*!
 * License: LGPL-2.1-or-later
 * Dependencies:
 *
 * @dbp-toolkit/common: LGPL-2.1-or-later
 * jquery: MIT
 * select2: MIT
 * @dbp-toolkit/organization-select: LGPL-2.1-or-later
 * @babel/runtime: MIT
 * i18next: MIT
 * @lit/reactive-element: BSD-3-Clause
 * lit-html: BSD-3-Clause
 * lit-element: BSD-3-Clause
 * @open-wc/dedupe-mixin: MIT
 * @open-wc/scoped-elements: MIT
 * datatables.net: MIT
 * datatables.net-responsive: MIT
 * datatables.net-responsive-dt: MIT
 * datatables.net-dt: MIT
 * jszip: (MIT OR GPL-3.0-or-later)
 * datatables.net-buttons-dt: MIT
 * datatables.net-buttons: MIT
 * @dbp-toolkit/data-table-view: LGPL-2.1-or-later
 * @dbp-toolkit/person-select: LGPL-2.1-or-later
 * xtend: MIT
 * fuzzy: (MIT)
 * suggestions: ISC
 */
import { L as t, c as e, O as i, $ as n } from "./shared/organization-select.4ef0db9e.es.js";
import { S as s, B as o, M as r, s as a, r as l, g as d, a as h, b as c, d as u, $ as p, o as f, e as g } from "./shared/jsonld.76d0c1bd.es.js";
import { L as b } from "./shared/library-book-offer-select.9d4ec0fe.es.js";
import "./shared/utils.82cefc35.es.js";

var m = function m() {
  for (var t = {}, e = 0; e < arguments.length; e++) {
    var i = arguments[e];

    for (var n in i) y.call(i, n) && (t[n] = i[n]);
  }

  return t;
},
    y = Object.prototype.hasOwnProperty;

var v,
    k = {
  exports: {}
};
v = k, function () {
  var t = {};
  v.exports = t, t.simpleFilter = function (e, i) {
    return i.filter(function (i) {
      return t.test(e, i);
    });
  }, t.test = function (e, i) {
    return null !== t.match(e, i);
  }, t.match = function (t, e, i) {
    i = i || {};
    var n,
        s = 0,
        o = [],
        r = e.length,
        a = 0,
        l = 0,
        d = i.pre || "",
        h = i.post || "",
        c = i.caseSensitive && e || e.toLowerCase();
    t = i.caseSensitive && t || t.toLowerCase();

    for (var u = 0; u < r; u++) n = e[u], c[u] === t[s] ? (n = d + n + h, s += 1, l += 1 + l) : l = 0, a += l, o[o.length] = n;

    return s === t.length ? (a = c === t ? 1 / 0 : a, {
      rendered: o.join(""),
      score: a
    }) : null;
  }, t.filter = function (e, i, n) {
    return i && 0 !== i.length ? "string" != typeof e ? i : (n = n || {}, i.reduce(function (i, s, o, r) {
      var a = s;
      n.extract && (a = n.extract(s));
      var l = t.match(e, a, n);
      return null != l && (i[i.length] = {
        string: l.rendered,
        score: l.score,
        index: o,
        original: s
      }), i;
    }, []).sort(function (t, e) {
      var i = e.score - t.score;
      return i || t.index - e.index;
    })) : [];
  };
}();

var I = function I(t) {
  return this.component = t, this.items = [], this.active = 0, this.wrapper = document.createElement("div"), this.wrapper.className = "suggestions-wrapper", this.element = document.createElement("ul"), this.element.className = "suggestions", this.wrapper.appendChild(this.element), this.selectingListItem = !1, t.el.parentNode.insertBefore(this.wrapper, t.el.nextSibling), this;
};

I.prototype.show = function () {
  this.element.style.display = "block";
}, I.prototype.hide = function () {
  this.element.style.display = "none";
}, I.prototype.add = function (t) {
  this.items.push(t);
}, I.prototype.clear = function () {
  this.items = [], this.active = 0;
}, I.prototype.isEmpty = function () {
  return !this.items.length;
}, I.prototype.isVisible = function () {
  return "block" === this.element.style.display;
}, I.prototype.draw = function () {
  if (this.element.innerHTML = "", 0 !== this.items.length) {
    for (var t = 0; t < this.items.length; t++) this.drawItem(this.items[t], this.active === t);

    this.show();
  } else this.hide();
}, I.prototype.drawItem = function (t, e) {
  var i = document.createElement("li"),
      n = document.createElement("a");
  e && (i.className += " active"), n.innerHTML = t.string, i.appendChild(n), this.element.appendChild(i), i.addEventListener("mousedown", function () {
    this.selectingListItem = !0;
  }.bind(this)), i.addEventListener("mouseup", function () {
    this.handleMouseUp.call(this, t);
  }.bind(this));
}, I.prototype.handleMouseUp = function (t) {
  this.selectingListItem = !1, this.component.value(t.original), this.clear(), this.draw();
}, I.prototype.move = function (t) {
  this.active = t, this.draw();
}, I.prototype.previous = function () {
  this.move(0 === this.active ? this.items.length - 1 : this.active - 1);
}, I.prototype.next = function () {
  this.move(this.active === this.items.length - 1 ? 0 : this.active + 1);
}, I.prototype.drawError = function (t) {
  var e = document.createElement("li");
  e.innerHTML = t, this.element.appendChild(e), this.show();
};

var w = m,
    L = k.exports,
    O = I,
    E = function E(t, e, i) {
  return i = i || {}, this.options = w({
    minLength: 2,
    limit: 5,
    filter: !0,
    hideOnBlur: !0
  }, i), this.el = t, this.data = e || [], this.list = new O(this), this.query = "", this.selected = null, this.list.draw(), this.el.addEventListener("keyup", function (t) {
    this.handleKeyUp(t.keyCode);
  }.bind(this), !1), this.el.addEventListener("keydown", function (t) {
    this.handleKeyDown(t);
  }.bind(this)), this.el.addEventListener("focus", function () {
    this.handleFocus();
  }.bind(this)), this.el.addEventListener("blur", function () {
    this.handleBlur();
  }.bind(this)), this.el.addEventListener("paste", function (t) {
    this.handlePaste(t);
  }.bind(this)), this.render = this.options.render ? this.options.render.bind(this) : this.render.bind(this), this.getItemValue = this.options.getItemValue ? this.options.getItemValue.bind(this) : this.getItemValue.bind(this), this;
};

E.prototype.handleKeyUp = function (t) {
  40 !== t && 38 !== t && 27 !== t && 13 !== t && 9 !== t && this.handleInputChange(this.el.value);
}, E.prototype.handleKeyDown = function (t) {
  switch (t.keyCode) {
    case 13:
    case 9:
      this.list.isEmpty() || (this.list.isVisible() && t.preventDefault(), this.value(this.list.items[this.list.active].original), this.list.hide());
      break;

    case 27:
      this.list.isEmpty() || this.list.hide();
      break;

    case 38:
      this.list.previous();
      break;

    case 40:
      this.list.next();
  }
}, E.prototype.handleBlur = function () {
  !this.list.selectingListItem && this.options.hideOnBlur && this.list.hide();
}, E.prototype.handlePaste = function (t) {
  if (t.clipboardData) this.handleInputChange(t.clipboardData.getData("Text"));else {
    var e = this;
    setTimeout(function () {
      e.handleInputChange(t.target.value);
    }, 100);
  }
}, E.prototype.handleInputChange = function (t) {
  this.query = this.normalize(t), this.list.clear(), this.query.length < this.options.minLength ? this.list.draw() : this.getCandidates(function (t) {
    for (var e = 0; e < t.length && (this.list.add(t[e]), e !== this.options.limit - 1); e++);

    this.list.draw();
  }.bind(this));
}, E.prototype.handleFocus = function () {
  this.list.isEmpty() || this.list.show(), this.list.selectingListItem = !1;
}, E.prototype.update = function (t) {
  this.data = t, this.handleKeyUp();
}, E.prototype.clear = function () {
  this.data = [], this.list.clear();
}, E.prototype.normalize = function (t) {
  return t = t.toLowerCase();
}, E.prototype.match = function (t, e) {
  return t.indexOf(e) > -1;
}, E.prototype.value = function (t) {
  if (this.selected = t, this.el.value = this.getItemValue(t), document.createEvent) {
    var e = document.createEvent("HTMLEvents");
    e.initEvent("change", !0, !1), this.el.dispatchEvent(e);
  } else this.el.fireEvent("onchange");
}, E.prototype.getCandidates = function (t) {
  var e = {
    pre: "<strong>",
    post: "</strong>",
    extract: function (t) {
      return this.getItemValue(t);
    }.bind(this)
  };
  t(this.options.filter ? L.filter(this.query, this.data, e).map(function (t) {
    return {
      original: t.original,
      string: this.render(t.original, t.string)
    };
  }.bind(this)) : this.data.map(function (t) {
    return {
      original: t,
      string: this.render(t)
    };
  }.bind(this)));
}, E.prototype.getItemValue = function (t) {
  return t;
}, E.prototype.render = function (t, e) {
  if (e) return e;

  for (var i = t.original ? this.getItemValue(t.original) : this.getItemValue(t), n = this.normalize(i), s = n.lastIndexOf(this.query); s > -1;) {
    var o = s + this.query.length;
    i = i.slice(0, s) + "<strong>" + i.slice(s, o) + "</strong>" + i.slice(o), s = n.slice(0, s).lastIndexOf(this.query);
  }

  return i;
}, E.prototype.renderError = function (t) {
  this.list.drawError(t);
};
var $ = E,
    C = $;
"undefined" != typeof window && (window.Suggestions = $);

class x extends s(t) {
  constructor() {
    super(), this.auth = {}, this._i18n = e(), this.lang = this._i18n.language, this.entryPointUrl = "", this.bookOfferId = "", this.bookOffer = null, this.organizationId = "";
  }

  static get scopedElements() {
    return {
      "dbp-organization-select": i,
      "dbp-library-book-offer-select": b,
      "dbp-button": o,
      "dbp-mini-spinner": r
    };
  }

  static get properties() {
    return _extends({}, super.properties, {
      lang: {
        type: String
      },
      entryPointUrl: {
        type: String,
        attribute: "entry-point-url"
      },
      bookOfferId: {
        type: String,
        attribute: "book-offer-id",
        reflect: !0
      },
      bookOffer: {
        type: Object,
        attribute: !1
      },
      organizationId: {
        type: String,
        attribute: "organization-id",
        reflect: !0
      },
      auth: {
        type: Object
      }
    });
  }

  getLibrary() {
    return this.organizationId.includes("-") ? this.organizationId.split("-")[1] : "";
  }

  $(t) {
    return n(this._(t));
  }

  connectedCallback() {
    super.connectedCallback();
    const t = this,
          e = this._i18n;
    this.updateComplete.then(() => {
      const i = t.$(this.getScopedTagName("dbp-library-book-offer-select")),
            s = t.$("#location-identifier"),
            o = t._("#location-identifier"),
            r = t.$("#location-identifier-block");

      i.change(function () {
        console.log("change"), console.log(i.val()), console.log(i.attr("value")), console.log(i.prop("value")), t.bookOffer = n(this).data("object"), t.bookOfferId = t.bookOffer["@id"], s.val(t.bookOffer.locationIdentifier).trigger("input"), r.show();
        const e = t.entryPointUrl + t.bookOfferId + "/location_identifiers";
        t.setAttribute("book-offer-id", t.bookOfferId), t.dispatchEvent(new CustomEvent("change", {
          detail: {
            type: "book-offer-id",
            value: t.bookOfferId
          }
        })), fetch(e, {
          headers: {
            "Content-Type": "application/ld+json",
            Authorization: "Bearer " + t.auth.token
          }
        }).then(t => t.json()).then(t => {
          new C(o, t["hydra:member"]);
        });
      }).on("unselect", function (e) {
        console.log("unselect"), t.bookOffer = null, t.bookOfferId = "", n(t).attr("book-offer-id", null), r.hide();
      }), s.on("input", function () {
        t.$("#send").prop("disabled", "" === n(this).val());
      }), t.$("#send").click(o => {
        o.preventDefault(), console.log("send");
        const r = t.entryPointUrl + i.val() + "?library=" + t.getLibrary();
        console.log(r), console.log(s);
        const l = {
          locationIdentifier: s.val()
        };
        console.log(l), console.log(JSON.stringify(l)), n.ajax({
          url: r,
          type: "PUT",
          contentType: "application/json",
          beforeSend: function (e) {
            e.setRequestHeader("Authorization", "Bearer " + t.auth.token);
          },
          data: JSON.stringify(l),
          success: function (n) {
            a({
              summary: e.t("success-summary"),
              body: e.t("success-body", {
                name: t.bookOffer.name || ""
              }),
              type: "success",
              timeout: 5
            }), i[0].clear();
          },
          error: (e, i, n) => {
            t.handleXhrError(e, i, n);
          },
          complete: function (e, i, n) {
            t._("#send").stop();
          }
        });
      });
    });
  }

  update(t) {
    t.forEach((t, e) => {
      "lang" === e && this._i18n.changeLanguage(this.lang);
    }), super.update(t);
  }

  onLanguageChanged(t) {
    this.lang = t.detail.lang;
  }

  static get styles() {
    return l(_t || (_t = _`
            ${0}
            ${0}
            ${0}

            .hidden {
                display: none;
            }

            #location-identifier-block {
                display: none;
            }

            #location-identifier-block input {
                width: 100%;
                border-radius: var(--dbp-border-radius);
            }
        `), d(), h(), c());
  }

  onOrgUnitCodeChanged(t) {
    this.organizationId = t.detail.value;
  }

  render() {
    const t = u("shared/suggestions.668c8aad3ba887d2.css"),
          e = this._i18n;
    return p(_t2 || (_t2 = _`
            <link rel="stylesheet" href="${0}" />

            <form
                class="${0}">
                <div class="field">
                    <label class="label">${0}</label>
                    <div class="control">
                        <dbp-organization-select
                            subscribe="lang:lang,entry-point-url:entry-point-url,auth:auth"
                            context="library-manager"
                            value="${0}"
                            @change="${0}"></dbp-organization-select>
                    </div>
                </div>
                <div class="field">
                    <label class="label">${0}</label>
                    <div class="control">
                        <dbp-library-book-offer-select
                            subscribe="lang:lang,entry-point-url:entry-point-url,auth:auth"
                            value="${0}"
                            organization-id="${0}"
                            show-reload-button
                            reload-button-title="${0}"></dbp-library-book-offer-select>
                    </div>
                </div>

                <div id="location-identifier-block">
                    <div class="field">
                        <label class="label">${0}</label>
                        <div class="control">
                            <input
                                class="input"
                                id="location-identifier"
                                type="text"
                                placeholder="${0}" />
                        </div>
                    </div>
                    <div class="field">
                        <div class="control">
                            <dbp-button
                                id="send"
                                disabled="disabled"
                                value="${0}"
                                type=""></dbp-button>
                        </div>
                    </div>
                </div>
            </form>
            <div
                class="notification is-warning ${0}">
                ${0}
            </div>
            <div
                class="notification is-danger ${0}">
                ${0}
            </div>
            <div class="${0}">
                <dbp-mini-spinner></dbp-mini-spinner>
            </div>
        `), t, f({
      hidden: !this.isLoggedIn() || !this.hasLibraryPermissions() || this.isLoading()
    }), e.t("organization-select.label"), this.organizationId, this.onOrgUnitCodeChanged, e.t("library-book-offer-select.headline"), this.bookOfferId, this.organizationId, this.bookOffer ? e.t("shelving.button-refresh-title", {
      name: this.bookOffer.name
    }) : "", e.t("location-identifier.headline"), e.t("location-identifier.placeholder"), e.t("location-identifier.submit"), f({
      hidden: this.isLoggedIn() || this.isLoading()
    }), e.t("error-login-message"), f({
      hidden: this.hasLibraryPermissions() || !this.isLoggedIn() || this.isLoading()
    }), e.t("error-permission-message"), f({
      hidden: !this.isLoading()
    }));
  }

}

g("dbp-library-shelving", x);
//# sourceMappingURL=dbp-library-shelving.js.map