@teipublisher/pb-components 2.26.0-next-3.11 → 2.26.0-next-3.13

package/src/pb-browse-docs.js

@@ -1,10 +1,10 @@
 import { html, css } from 'lit-element';
 import { PbLoad } from './pb-load.js';
 import { waitOnce } from './pb-mixin.js';
-import { translate } from "./pb-i18n.js";
-import { themableMixin } from "./theming.js";
+import { translate } from './pb-i18n.js';
+import { themableMixin } from './theming.js';
 import { cmpVersion } from './utils.js';
-import { registry } from "./urls.js";
+import { registry } from './urls.js';
 
 import '@polymer/paper-input/paper-input.js';
 import '@polymer/paper-button';
@@ -21,520 +21,585 @@ import '@cwmr/paper-autocomplete/paper-autocomplete-suggestions.js';
  * @slot toolbar - toolbar area
  * @slot - unnamed default slot
  * @slot footer - footer area
- * 
+ *
  * @fires pb-collection - Sent to inform e.g. pb-upload about current collection
  * @fires pb-search-resubmit - When received, set facet values as received from the event
  * @fires pb-login - When received, refresh the view if the user changed
- * 
+ *
  * @cssprop --pb-search-suggestions-background - Background for the autocomplete suggestions for the filter field
  * @cssprop --pb-search-suggestions-color - Text color for the autocomplete suggestion for the filter field
  * @cssprop --pb-search-label-color - Determines the color of small label above the sort by/filter by/filter fields
  * @cssprop --pb-search-input-color - Determines the color of the text in the sort by/filter by/filter fields
  * @cssprop --pb-search-focus-color - Color of the field labels and underline when in focus
  * @cssprop --pb-browse-toolbar-justify-content - How to justify the browse toolbar content, following flexbox justify-content property e.g. center, space-evenly, start...
- * 
+ *
  * @csspart delete-button - the delete button
  * @csspart sort-dropdown - dropdown for sorting
  * @csspart filter-dropdown - dropdown for filtering
  * @csspart filter-input - input for filtering
  */
 export class PbBrowseDocs extends themableMixin(PbLoad) {
+  static get properties() {
+    return {
+      ...super.properties,
+      sortBy: {
+        type: String,
+        attribute: 'sort-by',
+      },
+      sortOptions: {
+        type: Array,
+        attribute: 'sort-options',
+      },
+      sortLabel: {
+        type: String,
+      },
+      filter: {
+        type: String,
+      },
+      filterBy: {
+        type: String,
+        attribute: 'filter-by',
+      },
+      filterOptions: {
+        type: Array,
+        attribute: 'filter-options',
+      },
+      filterByLabel: {
+        type: String,
+      },
+      filterPlaceholderLabel: {
+        type: String,
+      },
+      collection: {
+        type: String,
+      },
+      facets: {
+        type: Object,
+      },
+      /** Id of the pb-login element to connect to */
+      login: {
+        type: String,
+      },
+      /**
+       * If set, requires the logged in user to be member of
+       * the given group.
+       */
+      group: {
+        type: String,
+      },
+      subforms: {
+        type: String,
+      },
+      /**
+       * If set, rewrite URLs to load pages as static HTML files,
+       * so no TEI Publisher instance is required
+       */
+      static: {
+        type: Boolean,
+      },
+      _file: {
+        type: String,
+      },
+      _selected: {
+        type: Array,
+      },
+      _allowModification: {
+        type: Boolean,
+      },
+      _suggestions: {
+        type: Array,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.sortOptions = [];
+    this.sortLabel = 'browse.sort';
+    this.sortBy = 'default';
+    this.filter = '';
+    this.filterOptions = [
+      {
+        label: 'Title',
+        value: 'title',
+      },
+    ];
+    this.filterByLabel = 'browse.filter';
+    this.filterPlaceholderLabel = 'browse.filterPlaceholder';
+
+    this.filterBy = 'title';
+    this._allowModification = false;
+    this._suggestions = [];
+
+    this.static = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    waitOnce('pb-page-ready', () => {
+      if (registry.state.sort) {
+        this.sortBy = registry.state.sort;
+      }
+
+      if (registry.state.filter) {
+        this.filter = registry.state.filter;
+        this.filterBy = registry.state.filterBy || this.filterBy;
+      }
+
+      this.facets = {};
+      // registry get state by regex
+      // this.facets = registry.getParametersMatching(this, /^facet-.*$/)
+      Object.keys(registry.state).forEach(key => {
+        if (/^facet-.*$/.test(key)) {
+          const param = registry.state[key];
+          if (this.facets[key]) {
+            this.facets[key].push(param);
+          } else if (Array.isArray(param)) {
+            this.facets[key] = param;
+          } else {
+            this.facets[key] = [param];
+          }
+        }
+      });
 
-    static get properties() {
-        return {
-            ...super.properties,
-            sortBy: {
-                type: String,
-                attribute: 'sort-by'
-            },
-            sortOptions: {
-                type: Array,
-                attribute: 'sort-options'
-            },
-            sortLabel: {
-                type: String
-            },
-            filter: {
-                type: String
-            },
-            filterBy: {
-                type: String,
-                attribute: 'filter-by'
-            },
-            filterOptions: {
-                type: Array,
-                attribute: 'filter-options'
-            },
-            filterByLabel: {
-                type: String
-            },
-            filterPlaceholderLabel: {
-                type: String
-            },
-            collection: {
-                type: String
-            },
-            facets: {
-                type: Object
-            },
-            /** Id of the pb-login element to connect to */
-            login: {
-                type: String
-            },
-            /**
-             * If set, requires the logged in user to be member of
-             * the given group.
-             */
-            group: {
-                type: String
-            },
-            subforms: {
-                type: String
-            },
-            /**
-             * If set, rewrite URLs to load pages as static HTML files,
-             * so no TEI Publisher instance is required
-             */
-            static: {
-                type: Boolean
-            },
-            _file: {
-                type: String
-            },
-            _selected: {
-                type: Array
-            },
-            _allowModification: {
-                type: Boolean,
-            },
-            _suggestions: {
-                type: Array
-            }
-        };
-    }
-
-    constructor() {
-        super();
-        this.sortOptions = [];
-        this.sortLabel = 'browse.sort';
-        this.sortBy = 'default';
-        this.filter = '';
-        this.filterOptions = [
-            {
-                label: 'Title',
-                value: 'title'
-            }
-        ];
-        this.filterByLabel = 'browse.filter';
-        this.filterPlaceholderLabel = 'browse.filterPlaceholder';
-
-        this.filterBy = 'title';
-        this._allowModification = false;
-        this._suggestions = [];
-
-        this.static = false;
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
+      this.collection = registry.state.collection;
 
-        waitOnce('pb-page-ready', () => {
-            if (registry.state.sort) {
-                this.sortBy = registry.state.sort;
-            }
-
-            if (registry.state.filter) {
-                this.filter = registry.state.filter;
-                this.filterBy = registry.state.filterBy || this.filterBy;
-            }
-
-            this.facets = {};
-            // registry get state by regex
-            // this.facets = registry.getParametersMatching(this, /^facet-.*$/)
-            Object.keys(registry.state).forEach((key) => {
-                if (/^facet-.*$/.test(key)) {
-                    const param = registry.state[key];
-                    if (this.facets[key]) {
-                        this.facets[key].push(param);
-                    } else if (Array.isArray(param)) {
-                        this.facets[key] = param;
-                    } else {
-                        this.facets[key] = [param];
-                    }
-                }
-            });
-
-            this.collection = registry.state.collection;
-
-            if (this.collection) {
-                registry.replace(this, {
-                    collection: this.collection
-                });
-            }
-            registry.subscribe(this, (state) => {
-                this.collection = state.collection;
-                this.load();
-            });
-        });
-        
-        this.subscribeTo('pb-search-resubmit', this._facets.bind(this));
-        this.subscribeTo('pb-login', (ev) => {
-            if (ev.detail.userChanged) {
-                this._facets(ev);
-            }
-        }, []);
-        document.addEventListener('pb-i18n-update', () => {
-            // clear paper-listbox selection after language updates
-            const lb = this.shadowRoot.getElementById('sort-list');
-            let old = lb.selected;
-            lb.selected = undefined;
-            lb.selected = old;
-
-            const fl = this.shadowRoot.getElementById('filter-list');
-            old = fl.selected;
-            fl.selected = undefined;
-            fl.selected = old;
+      if (this.collection) {
+        registry.replace(this, {
+          collection: this.collection,
         });
-    }
-
-    firstUpdated() {
-        waitOnce('pb-page-ready', (options) => {
-            const loader = this.shadowRoot.getElementById('autocompleteLoader');
-            if (cmpVersion(options.apiVersion, '1.0.0') >= 0) {
-                loader.url = `${options.endpoint}/api/search/autocomplete`;
-                if (!this.url) {
-                    this.url = 'api/collection';
-                }
-            } else {
-                loader.url = `${options.endpoint}/modules/autocomplete.xql`;
-                if (!this.url) {
-                    this.url = 'collection/';
-                }
-            }
-        });
-        this.shadowRoot.getElementById('autocomplete').addEventListener('autocomplete-change', this._autocomplete.bind(this));
-
-        if (this.login) {
-            const login = document.getElementById(this.login);
-            if (!login) {
-                console.error('<pb-browse-docs> connected pb-login element not found!');
-            } else {
-                this.subscribeTo('pb-login', (ev) => {
-                    this._allowModification = this._loggedIn(ev.detail.user, ev.detail.group);
-                }, []);
-                this._allowModification = login.loggedIn && this._loggedIn(login.user, login.groups);
-            }
+      }
+      registry.subscribe(this, state => {
+        this.collection = state.collection;
+        this.load();
+      });
+    });
+
+    this.subscribeTo('pb-search-resubmit', this._facets.bind(this));
+    this.subscribeTo(
+      'pb-login',
+      ev => {
+        if (ev.detail.userChanged) {
+          this._facets(ev);
         }
-
-        this.shadowRoot.getElementById('sort-list').addEventListener('selected-item-changed', this._sort.bind(this));
-        this.shadowRoot.getElementById('delete').addEventListener('click', this._handleDelete.bind(this));
-        super.firstUpdated();
-    }
-
-    render() {
-        return html`
-            <custom-style>
-                <style>
-                    :host {
-                        --suggestions-item: {
-                            color: var(--pb-search-suggestions-color, black);
-                        };
-                        --suggestions-wrapper: {
-                            background: var(--pb-search-suggestions-background, white);
-                        }
-                    }
-                </style>
-            </custom-style>
-            <slot name="header"></slot>
-            <div class="toolbar">
-                <paper-dropdown-menu id="sort" label="${translate(this.sortLabel)}" part="sort-dropdown">
-                    <paper-listbox id="sort-list" selected="${this.sortBy}" slot="dropdown-content" class="dropdown-content" attr-for-selected="value">
-                    ${this.sortOptions.map(option =>
-            html`<paper-item value="${option.value}">${translate(option.label)}</paper-item>`
-        )}
-                    </paper-listbox>
-                </paper-dropdown-menu>
-                <div>
-                    <paper-dropdown-menu id="filterSelect" label="${translate(this.filterByLabel)}" part="filter-dropdown">
-                        <paper-listbox id="filter-list" selected="${this.filterBy}" slot="dropdown-content" class="dropdown-content" attr-for-selected="value" @selected-item-changed="${this._filterChanged}">
-                        ${this.filterOptions.map(option =>
-            html`<paper-item value="${option.value}">${translate(option.label)}</paper-item>`
-        )}
-                        </paper-listbox>
-                    </paper-dropdown-menu>
-                    <paper-input id="filterString" type="search" name="filter" label="${translate(this.filterPlaceholderLabel)}" value="${this.filter}"
-                        @keyup="${this._handleEnter}" part="filter-input">
-                        <iron-icon icon="search" @click="${this._filter}" slot="prefix"></iron-icon>
-                    </paper-input>
-                    <paper-autocomplete-suggestions id="autocomplete" for="filterString" source="${this._suggestions}" remote-source></paper-autocomplete-suggestions>
-                </div>
-            </div>
-            <div class="toolbar">
-                <slot name="toolbar"></slot>
-                <paper-button id="delete" part="delete-button" title="${translate('browse.delete')}" class="${this._canModify(this._allowModification)}">
-                    <iron-icon icon="delete"></iron-icon>
-                    <span class="label">${translate('browse.delete')}</span>
-                </paper-button>
-            </div>
-            <slot></slot>
-            <slot name="footer"></slot>
-            
-            <iron-ajax
-                id="loadContent"
-                verbose
-                handle-as="text"
-                method="get"
-                with-credentials
-                @response="${this._handleContent}"
-                @error="${this._handleError}"></iron-ajax>
-            <iron-ajax
-                id="autocompleteLoader"
-                verbose
-                handle-as="json"
-                method="get"
-                with-credentials
-                @response="${this._updateSuggestions}"></iron-ajax>
-
-            <paper-dialog id="deleteDialog">
-                <h2>${translate('browse.delete')}</h2>
-                <paper-dialog-scrollable>
-                    <p>${translate('browse.confirmDeletion', { count: (this._selected ? this._selected.length : 0) })}</p>
-                </paper-dialog-scrollable>
-                <div class="buttons">
-                    <paper-button dialog-confirm="dialog-confirm" autofocus @click="${this._confirmDelete}">${translate('dialogs.yes')}</paper-button>
-                    <paper-button dialog-confirm="dialog-cancel">${translate('dialogs.no')}</paper-button>
-                </div>
-            </paper-dialog>
-            <paper-dialog id="errorDialog">
-                <h2>${translate('dialogs.error')}</h2>
-                <paper-dialog-scrollable></paper-dialog-scrollable>
-                <div class="buttons">
-                    <paper-button dialog-confirm="dialog-confirm" autofocus="autofocus">
-                    ${translate('dialogs.close')}
-                    </paper-button>
-                </div>
-            </paper-dialog>
-        `;
+      },
+      [],
+    );
+    document.addEventListener('pb-i18n-update', () => {
+      // clear paper-listbox selection after language updates
+      const lb = this.shadowRoot.getElementById('sort-list');
+      let old = lb.selected;
+      lb.selected = undefined;
+      lb.selected = old;
+
+      const fl = this.shadowRoot.getElementById('filter-list');
+      old = fl.selected;
+      fl.selected = undefined;
+      fl.selected = old;
+    });
+  }
+
+  firstUpdated() {
+    waitOnce('pb-page-ready', options => {
+      const loader = this.shadowRoot.getElementById('autocompleteLoader');
+      if (cmpVersion(options.apiVersion, '1.0.0') >= 0) {
+        loader.url = `${options.endpoint}/api/search/autocomplete`;
+        if (!this.url) {
+          this.url = 'api/collection';
+        }
+      } else {
+        loader.url = `${options.endpoint}/modules/autocomplete.xql`;
+        if (!this.url) {
+          this.url = 'collection/';
+        }
+      }
+    });
+    this.shadowRoot
+      .getElementById('autocomplete')
+      .addEventListener('autocomplete-change', this._autocomplete.bind(this));
+
+    if (this.login) {
+      const login = document.getElementById(this.login);
+      if (!login) {
+        console.error('<pb-browse-docs> connected pb-login element not found!');
+      } else {
+        this.subscribeTo(
+          'pb-login',
+          ev => {
+            this._allowModification = this._loggedIn(ev.detail.user, ev.detail.group);
+          },
+          [],
+        );
+        this._allowModification = login.loggedIn && this._loggedIn(login.user, login.groups);
+      }
     }
 
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-                --paper-input-container-color: var(--pb-search-label-color, var(--paper-grey-500, #303030));
-                --paper-input-container-input-color: var(--pb-search-input-color, var(--pb-color-primary, #000000));
-                --paper-input-container-focus-color: var(--pb-search-focus-color, var(--paper-grey-500, #303030));
-            }
-
-            .toolbar {
-                display: flex;
-                justify-content: var(--pb-browse-toolbar-justify-content);
-            }
-
-            [name="toolbar"] {
-                flex: 1 0;
-            }
-
-            #sort {
-                display: block;
-            }
-
-            #filterString {
-                position: relative;
-                display: inline-block;
-                vertical-align: bottom;
+    this.shadowRoot
+      .getElementById('sort-list')
+      .addEventListener('selected-item-changed', this._sort.bind(this));
+    this.shadowRoot
+      .getElementById('delete')
+      .addEventListener('click', this._handleDelete.bind(this));
+    super.firstUpdated();
+  }
+
+  render() {
+    return html`
+      <custom-style>
+        <style>
+          :host {
+            --suggestions-item: {
+              color: var(--pb-search-suggestions-color, black);
             }
-
-            .hidden {
-                display: none;
+            --suggestions-wrapper: {
+              background: var(--pb-search-suggestions-background, white);
             }
-        `;
+          }
+        </style>
+      </custom-style>
+      <slot name="header"></slot>
+      <div class="toolbar">
+        <paper-dropdown-menu id="sort" label="${translate(this.sortLabel)}" part="sort-dropdown">
+          <paper-listbox
+            id="sort-list"
+            selected="${this.sortBy}"
+            slot="dropdown-content"
+            class="dropdown-content"
+            attr-for-selected="value"
+          >
+            ${this.sortOptions.map(
+              option =>
+                html`<paper-item value="${option.value}">${translate(option.label)}</paper-item>`,
+            )}
+          </paper-listbox>
+        </paper-dropdown-menu>
+        <div>
+          <paper-dropdown-menu
+            id="filterSelect"
+            label="${translate(this.filterByLabel)}"
+            part="filter-dropdown"
+          >
+            <paper-listbox
+              id="filter-list"
+              selected="${this.filterBy}"
+              slot="dropdown-content"
+              class="dropdown-content"
+              attr-for-selected="value"
+              @selected-item-changed="${this._filterChanged}"
+            >
+              ${this.filterOptions.map(
+                option =>
+                  html`<paper-item value="${option.value}">${translate(option.label)}</paper-item>`,
+              )}
+            </paper-listbox>
+          </paper-dropdown-menu>
+          <paper-input
+            id="filterString"
+            type="search"
+            name="filter"
+            label="${translate(this.filterPlaceholderLabel)}"
+            value="${this.filter}"
+            @keyup="${this._handleEnter}"
+            part="filter-input"
+          >
+            <iron-icon icon="search" @click="${this._filter}" slot="prefix"></iron-icon>
+          </paper-input>
+          <paper-autocomplete-suggestions
+            id="autocomplete"
+            for="filterString"
+            source="${this._suggestions}"
+            remote-source
+          ></paper-autocomplete-suggestions>
+        </div>
+      </div>
+      <div class="toolbar">
+        <slot name="toolbar"></slot>
+        <paper-button
+          id="delete"
+          part="delete-button"
+          title="${translate('browse.delete')}"
+          class="${this._canModify(this._allowModification)}"
+        >
+          <iron-icon icon="delete"></iron-icon>
+          <span class="label">${translate('browse.delete')}</span>
+        </paper-button>
+      </div>
+      <slot></slot>
+      <slot name="footer"></slot>
+
+      <iron-ajax
+        id="loadContent"
+        verbose
+        handle-as="text"
+        method="get"
+        with-credentials
+        @response="${this._handleContent}"
+        @error="${this._handleError}"
+      ></iron-ajax>
+      <iron-ajax
+        id="autocompleteLoader"
+        verbose
+        handle-as="json"
+        method="get"
+        with-credentials
+        @response="${this._updateSuggestions}"
+      ></iron-ajax>
+
+      <paper-dialog id="deleteDialog">
+        <h2>${translate('browse.delete')}</h2>
+        <paper-dialog-scrollable>
+          <p>
+            ${translate('browse.confirmDeletion', {
+              count: this._selected ? this._selected.length : 0,
+            })}
+          </p>
+        </paper-dialog-scrollable>
+        <div class="buttons">
+          <paper-button dialog-confirm="dialog-confirm" autofocus @click="${this._confirmDelete}"
+            >${translate('dialogs.yes')}</paper-button
+          >
+          <paper-button dialog-confirm="dialog-cancel">${translate('dialogs.no')}</paper-button>
+        </div>
+      </paper-dialog>
+      <paper-dialog id="errorDialog">
+        <h2>${translate('dialogs.error')}</h2>
+        <paper-dialog-scrollable></paper-dialog-scrollable>
+        <div class="buttons">
+          <paper-button dialog-confirm="dialog-confirm" autofocus="autofocus">
+            ${translate('dialogs.close')}
+          </paper-button>
+        </div>
+      </paper-dialog>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        --paper-input-container-color: var(--pb-search-label-color, var(--paper-grey-500, #303030));
+        --paper-input-container-input-color: var(
+          --pb-search-input-color,
+          var(--pb-color-primary, #000000)
+        );
+        --paper-input-container-focus-color: var(
+          --pb-search-focus-color,
+          var(--paper-grey-500, #303030)
+        );
+      }
+
+      .toolbar {
+        display: flex;
+        justify-content: var(--pb-browse-toolbar-justify-content);
+      }
+
+      [name='toolbar'] {
+        flex: 1 0;
+      }
+
+      #sort {
+        display: block;
+      }
+
+      #filterString {
+        position: relative;
+        display: inline-block;
+        vertical-align: bottom;
+      }
+
+      .hidden {
+        display: none;
+      }
+    `;
+  }
+
+  getURL(params) {
+    if (this.static) {
+      // use a static URL
+      return `collections/${this.collection ? `${this.collection}/` : ''}${
+        params.start || '1'
+      }.html`;
     }
-
-    getURL(params) {
-        if (this.static) {
-            // use a static URL
-            return `collections/${this.collection ? this.collection + '/' : ''}${params.start || '1'}.html`;
-        }
-        const url = super.getURL(params);
-        return this.collection ? `${url}/${this.collection}` : url;
+    const url = super.getURL(params);
+    return this.collection ? `${url}/${this.collection}` : url;
+  }
+
+  prepareParameters(params) {
+    params = this._paramsFromSubforms(params);
+    params.sort = this.sortBy;
+    if (this.filter) {
+      params.filter = this.filter;
+      params.browse = this.filterBy;
     }
-
-    prepareParameters(params) {
-        params = this._paramsFromSubforms(params);
-        params.sort = this.sortBy;
-        if (this.filter) {
-            params.filter = this.filter;
-            params.browse = this.filterBy;
-        }
-        if (this.facets) {
-            params = Object.assign(params, this.facets);
-        }
-        return params;
+    if (this.facets) {
+      params = Object.assign(params, this.facets);
     }
-
-    _paramsFromSubforms(params) {
-        if (this.subforms) {
-            document.querySelectorAll(this.subforms).forEach((form) => {
-                if (form.serializeForm) {
-                    Object.assign(params, form.serializeForm());
-                }
-            });
+    return params;
+  }
+
+  _paramsFromSubforms(params) {
+    if (this.subforms) {
+      document.querySelectorAll(this.subforms).forEach(form => {
+        if (form.serializeForm) {
+          Object.assign(params, form.serializeForm());
         }
-        return params;
+      });
     }
-
-    /**
-     * returns selected documents.
-     *
-     * @returns {Array}
-     */
-    getSelected() {
-        const selected = [];
-        if (this.container) {
-            document.querySelectorAll(this.container).forEach((container) =>
-                container.querySelectorAll('.document-select paper-checkbox[checked]').forEach((checkbox) => {
-                    selected.push(checkbox.value);
-                })
-            );
-        } else {
-            this.querySelectorAll('.document-select paper-checkbox[checked]').forEach((checkbox) => {
-                selected.push(checkbox.value);
-            });
-        }
-        return selected;
+    return params;
+  }
+
+  /**
+   * returns selected documents.
+   *
+   * @returns {Array}
+   */
+  getSelected() {
+    const selected = [];
+    if (this.container) {
+      document.querySelectorAll(this.container).forEach(container =>
+        container.querySelectorAll('.document-select paper-checkbox[checked]').forEach(checkbox => {
+          selected.push(checkbox.value);
+        }),
+      );
+    } else {
+      this.querySelectorAll('.document-select paper-checkbox[checked]').forEach(checkbox => {
+        selected.push(checkbox.value);
+      });
     }
-
-    _filter() {
-        const filter = this.shadowRoot.getElementById('filterString').value;
-        const filterBy = this.shadowRoot.getElementById('filter-list').selected;
-        if (typeof filter !== 'undefined') {
-            console.log('<pb-browse-docs> Filter by %s', filter);
-            this.filter = filter;
-            registry.commit(this, { filter, filterBy })
-            this.load();
-        }
+    return selected;
+  }
+
+  _filter() {
+    const filter = this.shadowRoot.getElementById('filterString').value;
+    const filterBy = this.shadowRoot.getElementById('filter-list').selected;
+    if (typeof filter !== 'undefined') {
+      console.log('<pb-browse-docs> Filter by %s', filter);
+      this.filter = filter;
+      registry.commit(this, { filter, filterBy });
+      this.load();
     }
+  }
 
-    _filterChanged() {
-        const filterBy = this.shadowRoot.getElementById('filter-list').selected;
-        if (filterBy && filterBy !== this.filterBy) {
-            console.log('<pb-browse-docs> Filtering on %s', filterBy);
-            this.filterBy = filterBy;
-        }
+  _filterChanged() {
+    const filterBy = this.shadowRoot.getElementById('filter-list').selected;
+    if (filterBy && filterBy !== this.filterBy) {
+      console.log('<pb-browse-docs> Filtering on %s', filterBy);
+      this.filterBy = filterBy;
     }
+  }
 
-    _sort() {
-        const sortBy = this.shadowRoot.getElementById('sort-list').selected;
-        if (sortBy && sortBy !== this.sortBy) {
-            console.log('<pb-browse-docs> Sorting by %s', sortBy);
-            this.sortBy = sortBy;
-            registry.commit(this, { sort: sortBy })
+  _sort() {
+    const sortBy = this.shadowRoot.getElementById('sort-list').selected;
+    if (sortBy && sortBy !== this.sortBy) {
+      console.log('<pb-browse-docs> Sorting by %s', sortBy);
+      this.sortBy = sortBy;
+      registry.commit(this, { sort: sortBy });
 
-            this.load();
-        }
+      this.load();
     }
-
-    _facets(ev) {
-        if (ev.detail && ev.detail.params) {
-            registry.clearParametersMatching(this, /^(all-|facet-).*/);
-            this.facets = ev.detail.params;
-            this.start = 1;
-            registry.commit(this, ev.detail.params)
-        }
-        this.load();
+  }
+
+  _facets(ev) {
+    if (ev.detail && ev.detail.params) {
+      registry.clearParametersMatching(this, /^(all-|facet-).*/);
+      this.facets = ev.detail.params;
+      this.start = 1;
+      registry.commit(this, ev.detail.params);
     }
-
-    _onLoad(content) {
-        window.scrollTo(0, 0);
-        const div = content.querySelector('[data-root]');
-        const collection = div && div.getAttribute('data-root');
-        const writable = div && div.classList.contains('writable');
-        this.emitTo('pb-collection', {
-            writable,
-            collection
-        });
-        document.querySelectorAll('[can-write]').forEach((elem) => {
-            elem.disabled = !writable;
-        });
-        content.querySelectorAll('[data-collection]').forEach(link => {
-            link.addEventListener('click', (ev) => {
-                ev.preventDefault();
-                this.collection = link.getAttribute('data-collection');
-                this.start = 1;
-                registry.commit(this, { collection: this.collection });
-                console.log('<pb-browse-docs> loading collection %s', this.collection);
-                this.load();
-            });
-        });
-    }
-
-    _handleDelete(target, ev) {
-        const deleteDialog = this.shadowRoot.getElementById('deleteDialog');
-        const selected = this.getSelected();
-        if (selected.length > 0) {
-            this._selected = selected;
-            deleteDialog.open();
-        }
-    }
-
-    _confirmDelete() {
-        if (!(this._file || this._selected)) {
-            return;
-        }
-
-        let files;
-        if (this._selected) {
-            files = this._selected;
-        } else {
-            files = [this._file];
-        }
-        console.log('<pb-browse-docs> Deleting %o', this._file);
-        const params = {
-            action: 'delete',
-            'docs[]': files
-        };
-        this._file = null;
-        this._selected = null;
-        this.load(params);
+    this.load();
+  }
+
+  _onLoad(content) {
+    window.scrollTo(0, 0);
+    const div = content.querySelector('[data-root]');
+    const collection = div && div.getAttribute('data-root');
+    const writable = div && div.classList.contains('writable');
+    this.emitTo('pb-collection', {
+      writable,
+      collection,
+    });
+    document.querySelectorAll('[can-write]').forEach(elem => {
+      elem.disabled = !writable;
+    });
+    content.querySelectorAll('[data-collection]').forEach(link => {
+      link.addEventListener('click', ev => {
+        ev.preventDefault();
+        this.collection = link.getAttribute('data-collection');
+        this.start = 1;
+        registry.commit(this, { collection: this.collection });
+        console.log('<pb-browse-docs> loading collection %s', this.collection);
+        this.load();
+      });
+    });
+  }
+
+  _handleDelete(target, ev) {
+    const deleteDialog = this.shadowRoot.getElementById('deleteDialog');
+    const selected = this.getSelected();
+    if (selected.length > 0) {
+      this._selected = selected;
+      deleteDialog.open();
     }
+  }
 
-    _loggedIn(user, groups) {
-        if (user == null) {
-            return false;
-        }
-        if (this.group) {
-            if (!groups) {
-                return false;
-            }
-            return groups.indexOf(this.group) > -1;
-        }
-        return true;
+  _confirmDelete() {
+    if (!(this._file || this._selected)) {
+      return;
     }
 
-    _canModify(allowModification) {
-        return allowModification ? '' : 'hidden';
+    let files;
+    if (this._selected) {
+      files = this._selected;
+    } else {
+      files = [this._file];
     }
-
-    _autocomplete(ev) {
-        const autocompleteLoader = this.shadowRoot.getElementById('autocompleteLoader');
-        autocompleteLoader.params = {
-            query: ev.detail.option.text,
-            field: this.filterBy
-        };
-        autocompleteLoader.generateRequest();
+    console.log('<pb-browse-docs> Deleting %o', this._file);
+    const params = {
+      action: 'delete',
+      'docs[]': files,
+    };
+    this._file = null;
+    this._selected = null;
+    this.load(params);
+  }
+
+  _loggedIn(user, groups) {
+    if (user == null) {
+      return false;
     }
-
-    _updateSuggestions() {
-        const autocomplete = this.shadowRoot.getElementById('autocomplete');
-        const autocompleteLoader = this.shadowRoot.getElementById('autocompleteLoader');
-        autocomplete.suggestions(autocompleteLoader.lastResponse);
+    if (this.group) {
+      if (!groups) {
+        return false;
+      }
+      return groups.indexOf(this.group) > -1;
     }
-
-    _handleEnter(e) {
-        if (e.keyCode === 13) {
-            this._filter();
-        }
+    return true;
+  }
+
+  _canModify(allowModification) {
+    return allowModification ? '' : 'hidden';
+  }
+
+  _autocomplete(ev) {
+    const autocompleteLoader = this.shadowRoot.getElementById('autocompleteLoader');
+    autocompleteLoader.params = {
+      query: ev.detail.option.text,
+      field: this.filterBy,
+    };
+    autocompleteLoader.generateRequest();
+  }
+
+  _updateSuggestions() {
+    const autocomplete = this.shadowRoot.getElementById('autocomplete');
+    const autocompleteLoader = this.shadowRoot.getElementById('autocompleteLoader');
+    autocomplete.suggestions(autocompleteLoader.lastResponse);
+  }
+
+  _handleEnter(e) {
+    if (e.keyCode === 13) {
+      this._filter();
     }
+  }
 }
-customElements.define('pb-browse-docs', PbBrowseDocs);
+customElements.define('pb-browse-docs', PbBrowseDocs);