@dile/crud 0.0.9

package/components/item-delete/src/DileCrudItemDelete.js

@@ -0,0 +1,106 @@
+import { LitElement, html, css } from 'lit';
+import '@dile/ui/components/confirm/confirm';
+import { ResponseApiAdapter } from '../../../lib/ResponseApiAdapter.js';
+
+export class DileCrudItemDelete extends LitElement {
+  static styles = [
+    css`
+      :host {
+          display: block;
+          --dile-modal-border-radius: 2px;
+          --dile-modal-width: 300px;
+          --dile-modal-height: auto;
+          --dile-modal-content-padding: 1.5rem;
+          --dile-modal-background-color: rgba(90, 20, 20, 0.7);
+          --dile-modal-content-shadow-color: rgba(90, 20, 20, 0.5);
+          --dile-confirm-buttons-text-align: center;
+          --dile-confirm-accept-button-color: var(--delete-icon-color, #e33);
+          --dile-confirm-accept-text-button-color: #fff;
+          --dile-confirm-cancel-button-color: var(--neutral-icon-color, #337aad);
+          --dile-confirm-cancel-text-button-color: #fff;
+      }
+      p {
+          text-align: center;
+          color: #303030;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      endpoint: { type: String },
+      relatedId: { type: String },
+      responseAdapter: { type: Object },
+      confirmMessage: { type: String },
+      cancelLabel: { type: String },
+      acceptLabel: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.responseAdapter = new ResponseApiAdapter();
+    this.confirmMessage = 'Are you sure you want to delete this item?';
+    this.cancelLabel = 'Cancel';
+    this.acceptLabel = 'Delete'
+  }
+
+  firstUpdated() {
+    this.elconfirm = this.shadowRoot.getElementById('elconfirm');
+    this.ajaxdelete = this.shadowRoot.getElementById('ajaxdelete');
+  }
+
+  render() {
+    return html`
+      <dile-ajax
+          id="ajaxdelete"
+          method="delete"
+          url="${this.endpoint}/${this.relatedId}"
+          @ajax-success="${this.doSuccessDelete}"
+          @ajax-error="${this.doErrorDelete}"
+      ></dile-ajax>
+      <dile-confirm 
+          cancelLabel="${this.cancelLabel}"
+          acceptLabel="${this.acceptLabel}"
+          id="elconfirm"
+          @dile-confirm-accepted=${this.deleteAccepted}
+      >
+          <p>${this.confirmMessage}</p>
+      </dile-confirm>
+  `;
+  }
+
+  delete(itemId) {
+    this.relatedId = itemId;
+    this.elconfirm.open();
+  }
+
+  deleteAccepted() {
+    this.ajaxdelete.generateRequest();
+  }
+
+  doSuccessDelete(e) {
+    this.dispatchEvent(new CustomEvent('delete-success', { bubbles: true, composed: true }));
+  }
+  
+  doErrorDelete(e) {
+    let msg = this.computeResponseMessage(e.detail);
+    this.dispatchEvent(new CustomEvent('delete-error', { 
+      bubbles: true, 
+      composed: true,
+      detail: {
+        msg,
+        previousDetail: e.detail,
+      }
+    }));
+  }
+
+  computeResponseMessage(detail) {
+    this.responseAdapter.setResponse(detail);
+    let msg = this.responseAdapter.getMessage();
+    if(! msg) {
+      msg = 'Error';
+    }  
+    return msg;
+  }
+}

package/components/list/crud-list-item.js

@@ -0,0 +1,2 @@
+import { DileCrudListItem } from './src/DileCrudListItem';
+customElements.define('dile-crud-list-item', DileCrudListItem);

package/components/list/crud-list-pagination-links.js

@@ -0,0 +1,2 @@
+import { DileCrudListPaginationLinks } from "./src/DileCrudListPaginationLinks";
+customElements.define('dile-crud-list-pagination-links', DileCrudListPaginationLinks);

package/components/list/crud-list-service.js

@@ -0,0 +1,2 @@
+import { DileCrudListService } from "./src/DileCrudListService";
+customElements.define('dile-crud-list-service', DileCrudListService);

package/components/list/crud-list.js

@@ -0,0 +1,2 @@
+import { DileCrudList } from "./src/DileCrudList";
+customElements.define('dile-crud-list', DileCrudList);

package/components/list/crud-select-all.js

@@ -0,0 +1,2 @@
+import { DileCrudSelectAll } from "./src/DileCrudSelectAll";
+customElements.define('dile-crud-select-all', DileCrudSelectAll);

package/components/list/index.js

@@ -0,0 +1,5 @@
+export { DileCrudList } from "./src/DileCrudList.js";
+export { DileCrudListItem } from ".src/DileCrudListItem.js";
+export { DileCrudListPaginationLinks } from ".src/DileCrudListPaginationLinks.js";
+export { DileCrudListService } from "./src/DileCrudListService.js";
+export { DileCrudSelectAll } from "./src/DileCrudSelectAll.js";

package/components/list/src/DileCrudList.js

@@ -0,0 +1,332 @@
+import { LitElement, html, css } from 'lit';
+import { deepMerge } from '../../../lib/deepMerge.js';
+import { DileLoading, loadingStyles } from '../../../lib/DileLoading.js';
+import '@dile/ui/components/button/button.js';
+import '../../ajax/ajax.js'
+import '../../ui/crud-filters-list.js';
+import '../../list/crud-list-pagination-links.js';
+import '../crud-list-item.js';
+import '../crud-select-all';
+import '../crud-list-service.js';
+
+export class DileCrudList extends DileLoading(LitElement) {
+    static styles = [
+        loadingStyles,
+        css`
+            :host {
+                display: block;
+                padding: 0 0 1rem 0;
+                background-color: #fff;
+            }
+            
+            .prev-summary {
+                display: flex;
+                flex-direction: column;
+                background-color: #999;
+                color: white;
+                font-size: 0.8em;
+                margin-bottom: 0.5rem;
+                border-bottom: 1px solid #ccc;
+                padding: 0.4rem 1rem;
+                line-height: 1.2rem;
+            }
+            dile-crud-select-all {
+                margin: 0.3rem 0.2rem 0.4rem 0;
+            }
+
+            .empty {
+                padding: var(--dile-crud-list-empty-padding, 3rem 1rem);
+                text-align: center;
+            }
+            
+            @media(min-width: 500px) {
+                .prev-summary {
+                    flex-direction: row;
+                    align-items: center;
+                }
+                dile-crud-select-all {
+                    margin: 0.2rem 0.6rem 0.2rem 0;
+                }
+            }
+        `
+    ];
+
+    static get properties() {
+      return {
+        config: { type: Object },
+        elements: { type: Array },
+        paginationData: { type: Object },
+        numItems: { type: Number },
+        pageSize: { type: Number },
+        keyword: { type: String },
+        isSelectAllActive: { type: Boolean },
+        sort: { type: Object },
+        actionIds: { type: Array },
+        filters: { type: Array },
+        belongsTo: { type: String },
+        relationId: { type: String },
+      };
+    }
+
+    constructor() {
+        super();
+        this.paginationData = {}
+        this.elements = [];
+        this.pageSize = 10;
+        this.keyword = '';
+        this.actionIds = [];
+        this.filters = [];
+        this.delayTime = 200;
+        this.delayTimer = null;
+        this.isSelectAllActive = false;
+        this.loading = true;
+    }
+
+    firstUpdated() {
+        this.pageSize = this.config.pageSize?.initial ?? this.pageSize;
+        this.elservice = this.shadowRoot.getElementById('elservice');
+        this.ajaxgetallids = this.shadowRoot.getElementById('ajaxgetallids');
+        this.updateComplete.then( () => this.refresh());
+        
+    }
+
+    render() {
+        return html`
+            ${this.ajaxTemplate}
+
+            ${this.countSummaryTemplate}
+
+            ${this.filterListTemplate}
+
+            ${this.loading 
+                ? this.loadingTemplate 
+                : this.elements.length == 0
+                    ? this.emptyTemplate
+                    : html`
+                        ${this.elementsTemplate}
+                        ${this.config.customization?.hidePageReport ? '' : this.paginationTemplate}
+                    `
+            }
+        `;
+    }
+
+    get filterListTemplate() {
+        return html`
+            <dile-crud-filters-list
+                keyword="${this.keyword}"
+                .filters="${this.filters}"
+            ></dile-crud-filters-list>
+        `
+    }
+
+    get countSummaryTemplate() {
+        return this.config.customization?.hideCountSummary ? '' : html`
+            <div class="prev-summary">
+                ${this.config.customization.hideCheckboxSelection
+                  ? ''
+                  : html`
+                    <dile-crud-select-all 
+                        @crud-select-all=${this.crudSelectAll}
+                        pageSize=${this.pageSize}
+                        numItems=${this.numItems}
+                        ?disablePagination=${this.config.customization?.disablePagination}
+                    ></dile-crud-select-all>
+                  `
+                }
+                <span>
+                    ${this.numItems != undefined 
+                        ? html`
+                            ${this.numItems} items in total. ${this.config.customization?.disablePagination ? '' : html`Showing ${this.pageSize} items per page.` }
+                          `
+                        : 'Loading...' 
+                    }
+                </span>
+            </div>
+        `
+    }
+
+    get ajaxTemplate() {
+        return html`
+            <dile-crud-list-service
+                id="elservice"
+                .config=${this.config}
+                .filters=${this.filters}
+                pageSize=${this.pageSize}
+                .keyword=${this.keyword}
+                .sort=${this.sort}
+                belongsTo=${this.belongsTo}
+                relationId=${this.relationId}
+                @crud-list-get-success=${this.getSuccess}
+            ></dile-crud-list-service>
+            <dile-ajax
+                id="ajaxgetallids"
+                method="get"
+                url="${this.allIdsUrl}"
+                @ajax-success="${this.doSuccessGetIds}"
+                @ajax-error="${this.doErrorGet}"
+            ></dile-ajax>
+        `;
+    }
+    get emptyTemplate() {
+        return html`
+            <div class="empty">
+                <p>There are no items yet</p>
+                ${this.config.customization.disableInsert || this.config.customization?.hideEmptyInsertButton
+                    ? ''
+            : html`<p><dile-button @click=${this.dispatchInsertRequest}>${this.config.labels.insertAction}</dile-button></p>`
+                }
+                
+            </div>
+        `;
+    }
+    get elementsTemplate() {
+        return html`
+            ${this.elements.map(element => html`
+                <dile-crud-list-item 
+                    itemId="${this.computeItemId(element)}"
+                    .actionIds="${this.actionIds}"
+                    ?disableEdit="${this.config?.customization?.disableEdit}"
+                    ?disableDelete="${this.config?.customization?.disableDelete}"
+                    ?hideCheckboxSelection="${this.config?.customization?.hideCheckboxSelection}"
+                    @item-checkbox-changed=${this.onItemsCheckboxChanged}
+                >
+                    ${this.config.templates.item(element)}
+                </dile-crud-list-item>
+            `)}
+        `;
+    }
+
+    getSuccess(e) {
+        this.loading = false;
+        this.elements = e.detail.elements;
+        this.numItems = e.detail.numItems;
+        this.paginationData = e.detail.paginationData;
+    }
+
+    computeItemId(element) {
+        return element.id;
+    }
+
+    get allIdsUrl() {
+        return `${this.config.endpoint}/allids`;
+    }
+
+    get paginationTemplate() {
+        if(! this.config.customization?.disablePagination) {
+          return html`
+            <dile-crud-list-pagination-links
+                  .paginationData=${this.paginationData}
+                  numItems="${this.numItems}"
+                  pageSize="${this.pageSize}"
+                  @crud-pagination-prev=${this.goPrev}
+                  @crud-pagination-next=${this.goNext}
+            ></dile-crud-list-pagination-links>
+          `
+        }
+    } 
+
+    dispatchInsertRequest() {
+        this.dispatchEvent(new CustomEvent('insert-requested', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+
+    goNext() {
+        this.elservice.goNext()
+    }
+
+    goPrev() {
+        this.elservice.goPrev()
+    }
+
+    refresh() {
+        this.loading = true;
+        this.numItems = undefined;
+        if (this.isSelectAllActive) {
+            this.shadowRoot.querySelector('dile-crud-select-all').reset();
+        }
+        this.elservice.refresh();
+    }    
+
+    setKeyword(keyword) {
+        this.loading = true;
+        this.keyword = keyword;
+        this.elservice.setKeyword(keyword);
+    }
+
+    setSort(sortObject) {
+        this.loading = true;
+        this.sort = sortObject;
+        this.elservice.setSort(sortObject);
+    }  
+
+    setPageSize(size) {
+        this.loading = true;
+        this.pageSize = size;
+        this.elservice.setPageSize(size);
+    }
+
+    setFilters(filters) {
+        this.loading = true;
+        this.filters = filters;
+        this.elservice.setFilters(filters);
+    }
+
+    crudSelectAll(e) {
+        this.isSelectAllActive = e.detail.pageChecked || e.detail.allChecked;
+        if (e.detail.pageChecked) {
+            this.dispactSelectAll(this.getPageIds());
+        } else if (e.detail.allChecked) {
+            this.getAllIds();
+        } else if (!e.detail.pageChecked && !e.detail.allChecked) {
+            this.dispactSelectAll([]);
+        }
+    }
+
+    dispactSelectAll(ids) {
+        this.actionIds = ids;
+        this.dispatchEvent(new CustomEvent('crud-list-all-ids-selected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                ids
+            }
+        }));
+    }
+
+    getPageIds() {
+        return this.elements.map(element => element.id);
+    }
+
+    getAllIds() {
+      if(this.config.customization?.disablePagination) {
+        let ids = this.elements.map(item => item.id);
+        this.dispactSelectAll(ids);
+      } else{
+        let data = {
+            keyword: this.keyword,
+            filters: this.filters,
+        }
+        if (this.belongsTo && this.relationId) {
+            data.belongsTo = this.belongsTo;
+            data.relationId = this.relationId;
+        }
+        data = this.config.requestAdapter.adaptIdsRequestData(data);
+        this.ajaxgetallids.data = data;
+        this.ajaxgetallids.generateRequest();
+      }
+    }
+
+    doSuccessGetIds(e) {
+        this.config.responseAdapter.setResponse(e.detail);
+        this.dispactSelectAll(this.config.responseAdapter.getIds());
+    }
+
+    onItemsCheckboxChanged(e) {
+        if (!e.detail.checked && this.isSelectAllActive) {
+            this.shadowRoot.querySelector('dile-crud-select-all').resetWithoutDispatch();
+        }
+        
+    }
+}

package/components/list/src/DileCrudListItem.js

@@ -0,0 +1,129 @@
+import { LitElement, html, css } from 'lit';
+import '@dile/ui/components/checkbox/checkbox';
+import '@dile/ui/components/icon/icon';
+import { deleteIcon, editIcon } from '@dile/icons';
+
+export class DileCrudListItem extends LitElement {
+  static styles = [
+    css`
+        :host {
+            display: block;
+            max-width: 100%;
+            width: 100%;
+        }
+        section {
+            max-width: 100%;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            padding: 0.5rem 0.5rem;
+            border-bottom: 1px solid #ddd;
+        }
+        dile-checkbox {
+            margin-right: 0.5rem;
+        }
+        main {
+            flex-grow: 1;
+            overflow: hidden;
+        }
+        .actions {
+            margin-left: 0.5rem;
+            display: flex;
+            align-items: center;
+            text-align: right;
+            --dile-icon-size: 24px;
+            --dile-icon-color: var(--edit-icon-color, #33ad67);
+        }
+        dile-icon {
+            cursor: pointer;
+            margin: 0 0.2rem;
+        }
+        dile-icon.delete {
+            --dile-icon-color: var(--delete-icon-color, #e33);
+        }
+        @media(min-width: 550px) {
+            section {
+                padding: 0.5rem 1rem;
+            }
+        }
+    `
+  ];
+
+  static get properties() {
+    return {
+      itemId: { type: Number },
+      actionIds: { type: Array },
+      disableEdit: { type: Boolean },
+      disableDelete: { type: Boolean },
+      /** Hide checkboxes on the item list */
+      hideCheckboxSelection: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.actionIds = [];
+    this.disableEdit = false;
+    this.disableDelete = false;
+    this.hideCheckboxSelection = false;
+
+  }
+
+  render() {
+    return html`
+        <section>
+            ${this.hideCheckboxSelection ? '' : html`
+                <dile-checkbox ?checked="${this.includes(this.actionIds, this.itemId)}" @dile-checkbox-changed=${this.checkboxChanged}></dile-checkbox>
+            `}
+            <main>
+                <slot></slot>
+            </main>
+            <div class="actions">
+                ${this.disableEdit
+        ? ''
+        : html`<dile-icon .icon="${editIcon}" @click=${this.editClick}></dile-icon>`
+      }
+                ${this.disableDelete
+        ? ''
+        : html`<dile-icon class="delete" .icon="${deleteIcon}" @click=${this.deleteClick}></dile-icon>`
+      }
+            </div>
+        </section>
+    `;
+  }
+
+  includes(actionIds, itemId) {
+    return actionIds.includes(itemId);
+  }
+
+  checkboxChanged(e) {
+    this.dispatchEvent(new CustomEvent('item-checkbox-changed', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        checked: e.detail.checked,
+        itemId: this.itemId
+      }
+    }));
+  }
+
+  editClick() {
+    this.dispatchEvent(new CustomEvent('crud-item-edit', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        itemId: this.itemId
+      }
+    }));
+  }
+
+  deleteClick() {
+    this.dispatchEvent(new CustomEvent('crud-item-delete', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        itemId: this.itemId
+      }
+    }));
+  }
+}

package/components/list/src/DileCrudListPaginationLinks.js

@@ -0,0 +1,89 @@
+import { LitElement, html, css } from 'lit';
+import '../../ui/crud-pagination-nav-button';
+
+export class DileCrudListPaginationLinks extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+      .pagination {
+        margin-top: 1rem;
+        display: grid;
+        align-items: center;
+        grid-template-columns: auto 1fr auto;
+      }
+      .pagination-summary, .pagination-summary-one-page {
+          text-align: center;
+          font-size: 0.8em;
+      }
+      .pagination-summary-one-page {
+          text-align: center;
+          padding-top: 0.5rem;
+          width: 100%;
+          margin-bottom: -0.4rem;
+      }
+      .pagination-prev {
+        margin-left: 0.5rem;
+      }
+      .pagination-next {
+          margin-right: 0.5rem;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      paginationData: { type: Object },
+      pageSize: { type: Number },
+      numItems: { type: Number },
+    };
+  }
+
+  render() {
+    if (this.numPages(this.numItems, this.pageSize) > 1) {
+      return html`
+          <div class="pagination">
+              <span class="pagination-prev">
+                  <dile-crud-pagination-nav-button 
+                    @click=${this.goPrev} 
+                    ?disabled="${!this.paginationData.prevPage}" 
+                    direction="left"
+                  ></dile-crud-pagination-nav-button>
+              </span>
+              <span class="pagination-summary">
+                  Página ${this.paginationData.currentPage} de ${this.numPages(this.numItems, this.pageSize)}
+              </span>
+              <span class="pagination-next">
+                  <dile-crud-pagination-nav-button 
+                    @click=${this.goNext}
+                    ?disabled="${!this.paginationData.nextPage}"
+                    direction="right"
+                  ></dile-crud-pagination-nav-button>
+              </span>
+          </div>
+      `
+    } else {
+      return html`
+          <div class="pagination-summary-one-page">
+                  Page 1 of 1
+          </div>
+      `;
+    }
+  }
+
+  numPages(count, size) {
+      const result = Math.ceil(count / size);
+      if(isNaN(result)) {
+          return "";
+      }
+      return result;
+  }
+
+  goPrev() {
+    this.dispatchEvent(new CustomEvent('crud-pagination-prev'));
+  }
+  goNext() {
+    this.dispatchEvent(new CustomEvent('crud-pagination-next'));
+  }
+}