@advanced-rest-client/requests-list

A module containing UI and logic to render requests ARC lists in various contexts.

Usage no npm install needed!

<script type="module">
  import advancedRestClientRequestsList from 'https://cdn.skypack.dev/@advanced-rest-client/requests-list';
</script>

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

Published on NPM

tests

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