@gravitee/ui-components 3.25.3-typescript-ad6021f → 3.25.3-typescript-bfd8f67

package/src/organisms/gv-resources.js

@@ -1,535 +1 @@
-/*
- * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *         http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { css, html, LitElement } from 'lit';
-
-import './gv-schema-form';
-import './gv-resizable-views';
-import './gv-documentation';
-import '../molecules/gv-table';
-import '../atoms/gv-button';
-import '../molecules/gv-option';
-import '../atoms/gv-switch';
-import '../atoms/gv-icon';
-import { dispatchCustomEvent } from '../lib/events';
-import { uuid } from '../lib/utils';
-import { KeyboardElement, KEYS } from '../mixins/keyboard-element';
-import { empty } from '../styles/empty';
-
-export class GvResources extends KeyboardElement(LitElement) {
-  static get properties() {
-    return {
-      resources: { type: Array },
-      _resources: { type: Array, attribute: false },
-      types: { type: Array },
-      documentation: { type: Object },
-      _currentResource: { type: Object, attribute: false },
-      _currentResourceLoading: { type: Boolean, attribute: false },
-      _filter: { type: String },
-      readonly: { type: Boolean, reflect: true },
-    };
-  }
-
-  constructor() {
-    super();
-    this.resources = [];
-    this.types = [];
-    this._currentResource = null;
-    this._emptymessage = 'No resource';
-  }
-
-  onKeyboard() {
-    if (this.isPressed(KEYS.Esc)) {
-      this._onCancelResourceForm();
-    }
-    if (this.isPressed(KEYS.Shift, KEYS.Ctrl, KEYS.Space)) {
-      const search = this.shadowRoot.querySelector('#search-resource');
-      if (search) {
-        search.focus();
-      }
-    }
-  }
-
-  firstUpdated() {
-    const views = this.shadowRoot.querySelector('gv-resizable-views');
-    if (views != null) {
-      views.updateComplete.then(() => {
-        this._maximizeTopView();
-      });
-    }
-  }
-
-  set resources(resources) {
-    this._resources = this._generateId(resources);
-  }
-
-  get resources() {
-    return this._resources;
-  }
-
-  _generateId(list) {
-    if (list) {
-      return list.map((e) => {
-        if (e._id == null) {
-          e._id = uuid();
-        }
-        return e;
-      });
-    }
-    return list;
-  }
-
-  _getResizableViews() {
-    return this.shadowRoot.querySelector('gv-resizable-views');
-  }
-
-  _maximizeTopView() {
-    this._getResizableViews().resize(60, 40);
-  }
-
-  _maximizeBottomView() {
-    this._getResizableViews().maximizeBottom();
-  }
-
-  _splitMainViews() {
-    this._getResizableViews().split();
-  }
-
-  _onCancelResourceForm() {
-    this._currentResource = null;
-    this.documentation = null;
-    this._maximizeTopView();
-  }
-
-  _removeResource(item) {
-    this.resources = this.resources.filter((resource) => resource._id !== item._id);
-    this._onCancelResourceForm();
-    dispatchCustomEvent(this, 'change', { resources: this.resources });
-  }
-
-  _buildResourceSchema(resourceType) {
-    const defaultSchema = {
-      properties: {
-        name: {
-          type: 'string',
-          title: 'Resource name',
-        },
-      },
-      required: ['name'],
-    };
-
-    const schema = typeof resourceType.schema === 'string' ? JSON.parse(resourceType.schema) : resourceType.schema;
-
-    return {
-      properties: { ...defaultSchema.properties, ...schema.properties },
-      required: [...defaultSchema.required, ...schema.required],
-    };
-  }
-
-  _onCreateResource({ detail }) {
-    this._currentResourceLoading = true;
-    const defaultResourceType = this.types.find((type) => type.id === detail.id);
-    const schema = this._buildResourceSchema(defaultResourceType);
-    this._currentResource = {
-      type: defaultResourceType.id,
-      title: 'Create resource',
-      icon: 'code:plus',
-      schema,
-      values: {},
-      submitLabel: 'Add',
-      dirty: true,
-    };
-    this._maximizeBottomView();
-    this._onFetchDocumentation();
-    setTimeout(() => (this._currentResourceLoading = false), 600);
-  }
-
-  _onSubmitResourceForm({ detail }) {
-    delete this._currentResource._values;
-    const { type } = this._currentResource;
-    const { _id, name, ...configuration } = detail.values;
-
-    const resource = {
-      _id,
-      type,
-      name,
-      configuration,
-    };
-
-    if (detail.values._id != null) {
-      const index = this.resources.findIndex((r) => r._id === resource._id);
-      this.resources[index] = { ...this.resources[index], ...resource };
-    } else {
-      if (this.resources == null) {
-        this.resources = [];
-      }
-      resource._id = uuid();
-      resource.enabled = true;
-      this.resources.push(resource);
-    }
-    this._onCancelResourceForm();
-    dispatchCustomEvent(this, 'change', { resources: this.resources });
-  }
-
-  _onChangeResourceForm({ detail }) {
-    this._currentResource._values = detail.values;
-  }
-
-  _onResetResourceForm() {
-    delete this._currentResource._values;
-  }
-
-  _findResourceById(id) {
-    return this.types.find((resource) => resource.id === id);
-  }
-
-  // For readonly mode
-  _onSelectResource({ detail: { items } }) {
-    if (items.length > 0) {
-      this._onEditResource(items[0]);
-    } else {
-      this._onCancelResourceForm();
-    }
-  }
-
-  _onEditResource(resource) {
-    const values = { ...resource, ...resource.configuration };
-    delete values.configuration;
-    const resourceType = this._findResourceById(resource.type);
-    this._currentResource = {
-      _id: resource._id,
-      title: 'Resource configuration',
-      type: resource.type,
-      icon: 'design:edit',
-      schema: this._buildResourceSchema(resourceType),
-      values,
-      submitLabel: 'Update',
-    };
-    this._splitMainViews();
-    this._onFetchDocumentation();
-  }
-
-  _onCloseDocumentation() {
-    this.documentation = null;
-  }
-
-  _getCurrentResourceType() {
-    return this._currentResource ? this._findResourceById(this._currentResource.type) : null;
-  }
-
-  _onFetchDocumentation() {
-    dispatchCustomEvent(this, 'fetch-documentation', { target: this, resourceType: this._getCurrentResourceType() });
-  }
-
-  get dirty() {
-    const form = this.shadowRoot.querySelector('gv-schema-form');
-    return form && form.dirty;
-  }
-
-  confirm() {
-    const form = this.shadowRoot.querySelector('gv-schema-form');
-    if (form) {
-      return form.confirm().then(() => this._onCancelResourceForm());
-    }
-    return Promise.resolve();
-  }
-
-  _onChangeResourceState(item, event) {
-    const index = this.resources.find((r) => r._id === item._id);
-    this.resources[index] = { ...this.resources[index], enabled: item.enabled };
-    dispatchCustomEvent(this, 'change', { resources: this.resources });
-  }
-
-  _renderForm() {
-    const values = { ...this._currentResource.values, ...this._currentResource._values };
-    return html`<gv-schema-form
-      scrollable
-      .schema="${this._currentResource.schema}"
-      .values="${values}"
-      submitLabel="${this._currentResource.submitLabel}"
-      has-header
-      .icon="${this._currentResource.icon}"
-      validate-on-render
-      .dirty="${this._currentResource.dirty || this._currentResource._values != null}"
-      ?readonly="${this.readonly}"
-      @gv-schema-form:change="${this._onChangeResourceForm}"
-      @gv-schema-form:reset="${this._onResetResourceForm}"
-      @gv-schema-form:submit="${this._onSubmitResourceForm}"
-    >
-      <div slot="title" class="form-title">${this._currentResource.title}</div>
-      <gv-button
-        slot="header-left"
-        icon="general:close"
-        outlined
-        small
-        @gv-button:click="${this._onCancelResourceForm}"
-        title="Close (esc)"
-      ></gv-button>
-      <gv-button
-        slot="header-left"
-        icon="home:book"
-        ?disabled="${this.documentation != null}"
-        outlined
-        small
-        @gv-button:click="${this._onFetchDocumentation}"
-        title="Open documentation"
-      ></gv-button>
-    </gv-schema-form>`;
-  }
-
-  _renderDoc() {
-    return html`<gv-documentation
-      .text="${this.documentation.content}"
-      .image="${this.documentation.image}"
-      @gv-documentation:close="${this._onCloseDocumentation}"
-    ></gv-documentation>`;
-  }
-
-  _renderBottom() {
-    if (this.documentation && this._currentResource) {
-      return html` <gv-resizable-views direction="horizontal" no-overflow>
-        <div slot="top">${this._renderForm()}</div>
-        <div slot="bottom">${this._renderDoc()}</div>
-      </gv-resizable-views>`;
-    } else if (this._currentResource) {
-      return this._renderForm();
-    } else if (this.documentation) {
-      return this._renderDoc();
-    } else if (this.readonly !== true) {
-      const resourceOpts = this.types.map((resource) => {
-        return { id: resource.id, title: resource.name, description: resource.description, image: resource.icon };
-      });
-
-      return html`<div class="resources-bottom-container">
-                        <gv-option class="resource__option" .options="${resourceOpts}" @gv-option:select="${this._onCreateResource}">
-                  </div>`;
-    } else if (this.readonly && this.resources.length > 0) {
-      return html`<div class="resources-bottom-container empty">You can see the resource configuration by clicking on it</div>`;
-    }
-  }
-
-  _onSearchResource({ detail }) {
-    this._filter = detail;
-  }
-
-  _onClearResource() {
-    this._filter = null;
-  }
-
-  render() {
-    const options = {
-      selectable: true,
-      data: [
-        { field: 'name', label: 'Name' },
-        {
-          field: 'type',
-          width: '50px',
-          type: 'gv-image',
-          attributes: {
-            src: (item) => {
-              const resourceType = this._findResourceById(item.type);
-              return resourceType ? resourceType.icon : null;
-            },
-            style: 'width:40px;height:40px;',
-          },
-        },
-        { field: 'type', label: 'Type' },
-        {
-          field: 'enabled',
-          type: 'gv-switch',
-          title: (item) => (item.enabled ? 'Click to disable' : 'Click to enable'),
-          width: '50px',
-          attributes: {
-            readonly: this.readonly,
-            'ongv-switch:input': (item, event) => this._onChangeResourceState(item, event),
-          },
-        },
-      ],
-    };
-
-    if (this.readonly !== true) {
-      options.data.push({
-        type: 'gv-button',
-        width: '50px',
-        attributes: {
-          onClick: (item) => this._removeResource(item),
-          title: 'remove',
-          danger: true,
-          outlined: true,
-          icon: 'home:trash',
-        },
-      });
-    }
-
-    const filteredResources =
-      this._filter != null
-        ? this.resources.filter((resource) => {
-            return (resource.name.toLowerCase() + resource.type.toLowerCase()).includes(this._filter);
-          })
-        : this.resources;
-
-    return html`<div class="resources">
-      <gv-resizable-views no-overflow>
-        <div slot="top" class="box">
-          <div class="container">
-            <div class="header">
-              <div class="title">Manage global resources <span>(${this.resources.length})</span></div>
-              <gv-input
-                id="search-resource"
-                class="search-input"
-                placeholder="Filter resources (Shift + Ctrl + Space)"
-                type="search"
-                small
-                @gv-input:input="${this._onSearchResource}"
-                @gv-input:clear="${this._onClearResource}"
-              ></gv-input>
-            </div>
-            <div class="content">
-              <div class="table-container">
-                <gv-table
-                  .options="${options}"
-                  .items="${filteredResources}"
-                  emptymessage="${this._emptymessage}"
-                  @gv-table:select="${this._onSelectResource}"
-                  order="name"
-                  rowheight="50px"
-                ></gv-table>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div slot="bottom">${this._renderBottom()}</div>
-      </gv-resizable-views>
-    </div>`;
-  }
-
-  static get styles() {
-    return [
-      empty,
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          height: 100%;
-          width: 100%;
-          display: block;
-        }
-
-        .resources {
-          display: flex;
-          height: 100%;
-          width: 100%;
-        }
-
-        gv-resizable-views {
-          height: 100%;
-          width: 100%;
-        }
-
-        gv-table {
-          --gv-table-rows--ov: none;
-        }
-
-        .header {
-          border-bottom: 1px solid #d9d9d9;
-          display: flex;
-          min-height: 45px;
-          align-items: center;
-          margin-bottom: 0.5rem;
-          padding: 0 0.5rem;
-        }
-
-        .header .title {
-          color: #28444f;
-          font-size: 18px;
-          display: flex;
-          align-items: flex-end;
-          flex: 1;
-        }
-
-        .header .title span {
-          font-size: 12px;
-          margin-left: 8px;
-          opacity: 0.7;
-        }
-
-        .box {
-          position: absolute;
-          display: flex;
-          flex-direction: column;
-          width: 100%;
-          top: 0;
-          bottom: 0;
-          left: 0;
-        }
-
-        .container {
-          flex-grow: 1;
-
-          display: flex;
-          flex-direction: column;
-
-          /* for Firefox */
-          min-height: 0;
-          height: 100%;
-        }
-
-        .content {
-          background: white;
-          flex-grow: 1;
-
-          overflow: auto;
-
-          /* for Firefox */
-          min-height: 0;
-          padding: 0.5rem;
-
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-        }
-
-        .form-title {
-          text-transform: uppercase;
-          letter-spacing: 0.2rem;
-        }
-
-        .resources-bottom-container {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          height: 100%;
-        }
-
-        .table-container {
-          max-width: 1200px;
-          display: flex;
-          flex-direction: column;
-          width: 100%;
-        }
-
-        .search-input {
-          width: 300px;
-        }
-
-        .resource__option {
-          --gv-option-button--maw: 175px;
-        }
-      `,
-    ];
-  }
-}
-
-window.customElements.define('gv-resources', GvResources);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvResources=void 0;const e=require("lit");require("./gv-schema-form"),require("./gv-resizable-views"),require("./gv-documentation"),require("../molecules/gv-table"),require("../atoms/gv-button"),require("../molecules/gv-option"),require("../atoms/gv-switch"),require("../atoms/gv-icon");const t=require("../lib/events"),s=require("../lib/utils"),i=require("../mixins/keyboard-element"),r=require("../styles/empty");class o extends((0,i.KeyboardElement)(e.LitElement)){static get properties(){return{resources:{type:Array},_resources:{type:Array,attribute:!1},types:{type:Array},documentation:{type:Object},_currentResource:{type:Object,attribute:!1},_currentResourceLoading:{type:Boolean,attribute:!1},_filter:{type:String},readonly:{type:Boolean,reflect:!0}}}constructor(){super(),this.resources=[],this.types=[],this._currentResource=null,this._emptymessage="No resource"}onKeyboard(){if(this.isPressed(i.KEYS.Esc)&&this._onCancelResourceForm(),this.isPressed(i.KEYS.Shift,i.KEYS.Ctrl,i.KEYS.Space)){const e=this.shadowRoot.querySelector("#search-resource");e&&e.focus()}}firstUpdated(){const e=this.shadowRoot.querySelector("gv-resizable-views");null!=e&&e.updateComplete.then((()=>{this._maximizeTopView()}))}set resources(e){this._resources=this._generateId(e)}get resources(){return this._resources}_generateId(e){return e?e.map((e=>(null==e._id&&(e._id=(0,s.uuid)()),e))):e}_getResizableViews(){return this.shadowRoot.querySelector("gv-resizable-views")}_maximizeTopView(){this._getResizableViews().resize(60,40)}_maximizeBottomView(){this._getResizableViews().maximizeBottom()}_splitMainViews(){this._getResizableViews().split()}_onCancelResourceForm(){this._currentResource=null,this.documentation=null,this._maximizeTopView()}_removeResource(e){this.resources=this.resources.filter((t=>t._id!==e._id)),this._onCancelResourceForm(),(0,t.dispatchCustomEvent)(this,"change",{resources:this.resources})}_buildResourceSchema(e){const t={properties:{name:{type:"string",title:"Resource name"}},required:["name"]},s="string"==typeof e.schema?JSON.parse(e.schema):e.schema;return{properties:{...t.properties,...s.properties},required:[...t.required,...s.required]}}_onCreateResource({detail:e}){this._currentResourceLoading=!0;const t=this.types.find((t=>t.id===e.id)),s=this._buildResourceSchema(t);this._currentResource={type:t.id,title:"Create resource",icon:"code:plus",schema:s,values:{},submitLabel:"Add",dirty:!0},this._maximizeBottomView(),this._onFetchDocumentation(),setTimeout((()=>this._currentResourceLoading=!1),600)}_onSubmitResourceForm({detail:e}){delete this._currentResource._values;const{type:i}=this._currentResource,{_id:r,name:o,...n}=e.values,c={_id:r,type:i,name:o,configuration:n};if(null!=e.values._id){const e=this.resources.findIndex((e=>e._id===c._id));this.resources[e]={...this.resources[e],...c}}else null==this.resources&&(this.resources=[]),c._id=(0,s.uuid)(),c.enabled=!0,this.resources.push(c);this._onCancelResourceForm(),(0,t.dispatchCustomEvent)(this,"change",{resources:this.resources})}_onChangeResourceForm({detail:e}){this._currentResource._values=e.values}_onResetResourceForm(){delete this._currentResource._values}_findResourceById(e){return this.types.find((t=>t.id===e))}_onSelectResource({detail:{items:e}}){e.length>0?this._onEditResource(e[0]):this._onCancelResourceForm()}_onEditResource(e){const t={...e,...e.configuration};delete t.configuration;const s=this._findResourceById(e.type);this._currentResource={_id:e._id,title:"Resource configuration",type:e.type,icon:"design:edit",schema:this._buildResourceSchema(s),values:t,submitLabel:"Update"},this._splitMainViews(),this._onFetchDocumentation()}_onCloseDocumentation(){this.documentation=null}_getCurrentResourceType(){return this._currentResource?this._findResourceById(this._currentResource.type):null}_onFetchDocumentation(){(0,t.dispatchCustomEvent)(this,"fetch-documentation",{target:this,resourceType:this._getCurrentResourceType()})}get dirty(){const e=this.shadowRoot.querySelector("gv-schema-form");return e&&e.dirty}confirm(){const e=this.shadowRoot.querySelector("gv-schema-form");return e?e.confirm().then((()=>this._onCancelResourceForm())):Promise.resolve()}_onChangeResourceState(e,s){const i=this.resources.find((t=>t._id===e._id));this.resources[i]={...this.resources[i],enabled:e.enabled},(0,t.dispatchCustomEvent)(this,"change",{resources:this.resources})}_renderForm(){const t={...this._currentResource.values,...this._currentResource._values};return e.html`<gv-schema-form scrollable .schema="${this._currentResource.schema}" .values="${t}" submitLabel="${this._currentResource.submitLabel}" has-header .icon="${this._currentResource.icon}" validate-on-render .dirty="${this._currentResource.dirty||null!=this._currentResource._values}" ?readonly="${this.readonly}" @gv-schema-form:change="${this._onChangeResourceForm}" @gv-schema-form:reset="${this._onResetResourceForm}" @gv-schema-form:submit="${this._onSubmitResourceForm}"><div slot="title" class="form-title">${this._currentResource.title}</div><gv-button slot="header-left" icon="general:close" outlined small @gv-button:click="${this._onCancelResourceForm}" title="Close (esc)"></gv-button><gv-button slot="header-left" icon="home:book" ?disabled="${null!=this.documentation}" outlined small @gv-button:click="${this._onFetchDocumentation}" title="Open documentation"></gv-button></gv-schema-form>`}_renderDoc(){return e.html`<gv-documentation .text="${this.documentation.content}" .image="${this.documentation.image}" @gv-documentation:close="${this._onCloseDocumentation}"></gv-documentation>`}_renderBottom(){if(this.documentation&&this._currentResource)return e.html`<gv-resizable-views direction="horizontal" no-overflow><div slot="top">${this._renderForm()}</div><div slot="bottom">${this._renderDoc()}</div></gv-resizable-views>`;if(this._currentResource)return this._renderForm();if(this.documentation)return this._renderDoc();if(!0!==this.readonly){const t=this.types.map((e=>({id:e.id,title:e.name,description:e.description,image:e.icon})));return e.html`<div class="resources-bottom-container"><gv-option class="resource__option" .options="${t}" @gv-option:select="${this._onCreateResource}"></gv-option></div>`}return this.readonly&&this.resources.length>0?e.html`<div class="resources-bottom-container empty">You can see the resource configuration by clicking on it</div>`:void 0}_onSearchResource({detail:e}){this._filter=e}_onClearResource(){this._filter=null}render(){const t={selectable:!0,data:[{field:"name",label:"Name"},{field:"type",width:"50px",type:"gv-image",attributes:{src:e=>{const t=this._findResourceById(e.type);return t?t.icon:null},style:"width:40px;height:40px;"}},{field:"type",label:"Type"},{field:"enabled",type:"gv-switch",title:e=>e.enabled?"Click to disable":"Click to enable",width:"50px",attributes:{readonly:this.readonly,"ongv-switch:input":(e,t)=>this._onChangeResourceState(e,t)}}]};!0!==this.readonly&&t.data.push({type:"gv-button",width:"50px",attributes:{onClick:e=>this._removeResource(e),title:"remove",danger:!0,outlined:!0,icon:"home:trash"}});const s=null!=this._filter?this.resources.filter((e=>(e.name.toLowerCase()+e.type.toLowerCase()).includes(this._filter))):this.resources;return e.html`<div class="resources"><gv-resizable-views no-overflow><div slot="top" class="box"><div class="container"><div class="header"><div class="title">Manage global resources <span>(${this.resources.length})</span></div><gv-input id="search-resource" class="search-input" placeholder="Filter resources (Shift + Ctrl + Space)" type="search" small @gv-input:input="${this._onSearchResource}" @gv-input:clear="${this._onClearResource}"></gv-input></div><div class="content"><div class="table-container"><gv-table .options="${t}" .items="${s}" emptymessage="${this._emptymessage}" @gv-table:select="${this._onSelectResource}" order="name" rowheight="50px"></gv-table></div></div></div></div><div slot="bottom">${this._renderBottom()}</div></gv-resizable-views></div>`}static get styles(){return[r.empty,e.css`:host{box-sizing:border-box;height:100%;width:100%;display:block}.resources{display:flex;height:100%;width:100%}gv-resizable-views{height:100%;width:100%}gv-table{--gv-table-rows--ov:none}.header{border-bottom:1px solid #d9d9d9;display:flex;min-height:45px;align-items:center;margin-bottom:.5rem;padding:0 .5rem}.header .title{color:#28444f;font-size:18px;display:flex;align-items:flex-end;flex:1}.header .title span{font-size:12px;margin-left:8px;opacity:.7}.box{position:absolute;display:flex;flex-direction:column;width:100%;top:0;bottom:0;left:0}.container{flex-grow:1;display:flex;flex-direction:column;min-height:0;height:100%}.content{background:#fff;flex-grow:1;overflow:auto;min-height:0;padding:.5rem;display:flex;flex-direction:column;align-items:center}.form-title{text-transform:uppercase;letter-spacing:.2rem}.resources-bottom-container{display:flex;justify-content:center;align-items:center;height:100%}.table-container{max-width:1200px;display:flex;flex-direction:column;width:100%}.search-input{width:300px}.resource__option{--gv-option-button--maw:175px}`]}}exports.GvResources=o,window.customElements.define("gv-resources",o);