README

Requests list

The ARC requests list module contains an UI and logic to render requests list in various contexts (saved list. history list, project list).

This module replaces:

history-list-mixin
requests-list-mixin
saved-list-mixin
projects-list-consumer-mixin
history-panel
saved-requests-panel

Usage

Installation

npm install --save @advanced-rest-client/requests-list

History panel

import '@advanced-rest-client/requests-list/history-panel.js';


html`
<history-panel 
  draggableEnabled
  @details="${this.historyItemDetailsHandler}"
></history-panel>`;

Saved panel

import '@advanced-rest-client/requests-list/saved-panel.js';


html`
<saved-panel 
  draggableEnabled
  @details="${this.savedItemDetailsHandler}"
></saved-panel>`;

SavedListMixin

A mixin to create an element that renders list of saved items.

import { LitElement, html } from 'lit-element';
import { SavedListMixin, listTemplate, ListStyles } from '@advanced-rest-client/requests-list';

class ArcSavedMenuElement extends SavedListMixin(LitElement) {
  static get styles() {
    return ListStyles;
  }

  render() {
    const { requests } = this;
    if (!requests || !requests.length) {
      return html`<p>No requests on the list</p>`;
    }
    return this[listTemplate]();
  }
}

window.customElements.define('saved-menu', ArcSavedMenuElement);

HistoryListMixin

A mixin to create an element that renders list of history items.

import { LitElement, html } from 'lit-element';
import { HistoryListMixin, listTemplate, ListStyles } from '@advanced-rest-client/requests-list';

class ArcHistoryMenuElement extends HistoryListMixin(LitElement) {
  static get styles() {
    return ListStyles;
  }

  render() {
    const { requests } = this;
    if (!requests || !requests.length) {
      return html`<p>No requests on the list</p>`;
    }
    return this[listTemplate]();
  }
}

window.customElements.define('history-menu', ArcHistoryMenuElement);

Development

git clone https://github.com/@advanced-rest-client/requests-list
cd requests-list
npm install

Running the demo locally

npm start

Running the tests

npm test

Usage no npm install needed!