@dile/crud 0.0.9

package/components/list/src/DileCrudListService.js

@@ -0,0 +1,163 @@
+import { LitElement, html, css } from 'lit';
+
+export class DileCrudListService extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      config: { type: Object },
+      filters: { type: Array },
+      pageSize: { type: Number },
+      keyword: { type: String },
+      paginationData: { type: Object },
+      sort: { type: Object },
+      belongsTo: { type: String },
+      relationId: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.pageSize = 50;
+    this.keyword = '';
+    this.filters = [];
+    this.paginationData = {}
+    this.delayTime = 200;
+    this.delayTimer = null;
+  }
+
+  firstUpdated() {
+    this.ajaxget = this.shadowRoot.getElementById('ajaxget');
+  }
+
+  render() {
+    return html`
+      <dile-ajax
+        id="ajaxget"
+        method="get"
+        url="${this.cleanUrl}"
+        @ajax-success="${this.doSuccessGet}"
+        @ajax-error="${this.doErrorGet}"
+      ></dile-ajax>
+    `;
+  }
+
+  get cleanUrl() {
+    return `${this.config.endpoint}`;
+  }
+
+  refresh() {
+    if (this.delayTimer) {
+      clearTimeout(this.delayTimer);
+    }
+    if(!this.ajaxget) {
+      this.delayTimer = setTimeout(() => this.refresh(), this.delayTime);
+    } else {
+      if (this.delayTimer) {
+        clearTimeout(this.delayTimer);
+      }
+      this.delayTimer = setTimeout(() => this.doRefresh(), this.delayTime);
+    }
+  }
+
+  doRefresh() {
+    this.delayTimer = null;
+    let data = {
+      per_page: this.pageSize,
+      keyword: this.keyword,
+      filters: this.filters,
+    }
+    if (this.sort && this.sort.sortField) {
+      data.sortField = this.sort.sortField;
+    }
+    if (this.sort && this.sort.sortDirection) {
+      data.sortDirection = this.sort.sortDirection;
+    }
+    if (this.belongsTo && this.relationId) {
+      data.belongsTo = this.belongsTo;
+      data.relationId = this.relationId;
+    }
+    data = this.config.requestAdapter.adaptListRequestData(data);
+    this.ajaxget.data = data;
+    this.ajaxget.generateRequest();
+  }
+
+  doSuccessGet(e) {
+    this.config.responseAdapter.setResponse(e.detail);
+    let elements = this.config.responseAdapter.getElementList();
+    let numItems;
+    if (this.config.customization.disablePagination) {
+      numItems = elements.length;
+    } else {
+      let data = this.config.responseAdapter.getPaginationData();
+      this.paginationData = {
+        nextPage: data.result.next_page_url,
+        prevPage: data.result.prev_page_url,
+        currentPage: data.result.current_page,
+      }
+      numItems = data.countItems;
+    }
+    this.dispatchEvent(new CustomEvent('crud-list-get-success', {
+      detail: {
+        elements,
+        numItems,
+        paginationData: this.paginationData,
+      }
+    }));
+  }
+
+  doErrorGet(e) {
+    this.dispatchEvent(new CustomEvent('crud-list-data-error', {
+      bubbles: true,
+      composed: true,
+      detail: e.detail 
+    }));
+  }
+
+  goNext() {
+    if (this.paginationData.nextPage) {
+      this.ajaxget.url = this.paginationData.nextPage;
+      this.ajaxget.generateRequest();
+    }
+  }
+
+  goPrev() {
+    if (this.paginationData.prevPage) {
+      this.ajaxget.url = this.paginationData.prevPage;
+      this.ajaxget.generateRequest();
+    }
+  }
+
+  setKeyword(keyword) {
+    this.keyword = keyword;
+    this.cleanAndRefresh();
+  }
+
+  setSort(sortObject) {
+    this.sort = sortObject;
+    this.cleanAndRefresh();
+  }
+
+  setPageSize(size) {
+    this.pageSize = size;
+    this.cleanAndRefresh();
+  }
+
+  setFilters(filters) {
+    this.filters = filters;
+    this.cleanAndRefresh();
+  }
+
+  cleanAndRefresh() {
+    if(this.ajaxget) {
+      this.ajaxget.url = this.cleanUrl;
+      this.refresh();
+    }
+  }
+}

package/components/list/src/DileCrudSelectAll.js

@@ -0,0 +1,158 @@
+import { LitElement, html, css } from 'lit';
+import '@dile/ui/components/button/button-icon.js';
+import { checkboxBlankIcon, arrowDropDownIcon, checkboxCheckedIcon } from '@dile/icons';
+import '@dile/ui/components/icon/icon.js';
+import '@dile/ui/components/menu-overlay/menu-overlay.js';
+
+export class DileCrudSelectAll  extends LitElement {
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        --dile-icon-color: #303030;
+      }
+      .drop {
+        --dile-icon-size: 1.5rem;
+      }
+      dile-button-icon {
+        display: flex;
+        align-items: center;
+      }
+      dile-button-icon div {
+        margin-right: 0.5rem;
+        display: inline-block;
+      }
+      .desk {
+        display: none;
+      }
+      .content {
+        padding: 0.5rem;
+        font-size: 1rem;
+      } 
+      .option {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+      }
+      .option dile-icon {
+        --dile-icon-size: 1.5rem;
+        --dile-icon-color: var(--primary-dark-color, #303030);
+        margin-right: 0.5rem;
+      }
+
+      @media(min-width: 700px) {
+        .desk {
+          display: inline;
+        }
+      }
+
+      @media(min-width: 500px) {
+        dile-menu-overlay {
+          --dile-menu-overlay-width: 420px;
+        }
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      mainChecked: { type: Boolean },
+      pageChecked: { type: Boolean },
+      allChecked: { type: Boolean },
+      pageSize: { type: Number },
+      numItems: { type: Number },
+      disablePagination: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.checked = false;
+    this.disablePagination = false;
+  }
+
+  render() {
+    return html`
+      <dile-menu-overlay>
+        <dile-button-icon small .icon="${this.selectIcon(this.mainChecked)}" slot="trigger">
+          <div>Select <span class="desk">all</span></div>
+          <dile-icon .icon=${arrowDropDownIcon} class="drop"></dile-icon>
+        </dile-button-icon>
+        <div slot="content" class="content">
+          ${this.disablePagination
+            ? ''
+            : html`
+              <p class="option" @click=${this.checkPageItems}>
+                <dile-icon .icon=${this.selectIcon(this.pageChecked)} class="drop"></dile-icon>
+                <span>
+                  Todos de esta página 
+                  (${this.pageSize > this.numItems ? this.numItems : this.pageSize})
+                </span>
+              </p>
+            `
+          }
+          <p class="option" @click=${this.checkAllItems}>
+            <dile-icon .icon=${this.selectIcon(this.allChecked)} class="drop"></dile-icon>
+            <span>
+              Seleccionar todos 
+              (${this.numItems})
+            </span>
+          </p>
+        </div>
+      </dile-menu-overlay>
+    `;
+  }
+
+  selectIcon(checked) {
+    return checked ? checkboxCheckedIcon : checkboxBlankIcon;
+  }
+
+  checkPageItems(e) {
+    if(! this.pageChecked) {
+      this.mainChecked = true;
+      this.pageChecked = true;
+      this.allChecked = false;
+    } else {
+      this.mainChecked = false;
+      this.pageChecked = false;
+      this.allChecked = false;
+    }
+    this.dispatchCheked();
+  } 
+
+  checkAllItems(e) {
+    if(! this.allChecked) {
+      this.mainChecked = true;
+      this.pageChecked = false;
+      this.allChecked = true;
+    } else {
+      this.mainChecked = false;
+      this.pageChecked = false;
+      this.allChecked = false;
+    }
+    this.dispatchCheked();
+  }
+
+  dispatchCheked() {
+    this.dispatchEvent(new CustomEvent('crud-select-all', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        pageChecked: this.pageChecked,
+        allChecked: this.allChecked,
+      }
+    }));
+  }
+
+  reset() {
+    this.resetWithoutDispatch();
+    this.dispatchCheked();
+  }
+
+  resetWithoutDispatch() {
+    this.mainChecked = false;
+    this.pageChecked = false;
+    this.allChecked = false;
+  }
+}

package/components/single/crud-single.js

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

package/components/single/index.js

@@ -0,0 +1 @@
+export { DileCrudSingle } from "./src/DileCrudSingle.js";

package/components/single/src/DileCrudSingle.js

@@ -0,0 +1,142 @@
+import { LitElement, html, css } from 'lit';
+import { formStyles } from '../../../styles/form-styles.js';
+import '@dile/ui/components/button/button.js';
+import '@dile/ui/components/select/select.js';
+import '@dile/ui/components/modal/modal.js';
+import '@dile/ui/components/pages/pages.js';
+import { editIcon } from '@dile/icons';
+import { DileCrudMixin } from '../../../lib/DileCrudMixin.js';
+import '../../crud/crud.js';
+import '../../detail/crud-detail.js';
+import '../../update/crud-update.js';
+import '../../action/crud-actions.js';
+import '../../action/crud-single-actions';
+import '../../action/crud-delete-action.js';
+
+export class DileCrudSingle extends DileCrudMixin(LitElement) {
+  static styles = [
+    formStyles,
+    css`
+      :host {
+          display: block;
+      }
+      main.elcontainer {
+          margin-bottom: 1.5rem;
+      }
+      .actions {
+          background-color: var(--dile-primary-dark-color);
+          padding: 0.5rem;
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          margin-bottom: 0.5rem;
+      }
+      .action-controller {
+          margin-left: 0.5rem;
+      }
+      .statscontainer {
+          margin: 0 1rem;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      config: { type: Object },
+      relatedId: { type: String },
+      element: { type: Object },
+      actionIds: { type: Array },
+    };
+  }
+
+  constructor() {
+    super();
+    this.actionIds = [];
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    this.actionIds = [this.relatedId];
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('relatedId')) {
+      this.actionIds = [this.relatedId];
+    }
+  }
+
+  render() {
+    return html`
+      ${this.relatedId
+        ? this.contentTemplate
+        : ''
+      }
+    `
+  }
+
+  get contentTemplate() {
+    return html`
+      <main class="elcontainer">
+        ${this.detailTemplate}
+        <div class="actions" @action-success=${this.actionSuccess}>
+            <dile-button gray .icon="${editIcon}" @click=${this.edit}>Editar</dile-button>
+            ${this.actionsTemplate}
+        </div>
+      </main>
+
+      ${this.updateTemplate}
+      ${this.singleActionsTemplate}
+      
+      ${this.config.templates.relations(this.element)}
+    `;
+  }
+
+  get detailTemplate() {
+    return html`
+      <dile-crud-detail
+        id="eldetail"
+        endpoint="${this.config.endpoint}/${this.relatedId}"
+        .itemDetailTemplate=${this.config.templates.detail}
+        .responseAdapter=${this.config.responseAdapter}
+        @crud-item-detail-loaded=${this.elementLoaded}
+      ></dile-crud-detail>
+    `
+  }
+
+  get singleActionsTemplate() {
+    return html`
+      <dile-crud-single-actions
+        .actions=${this.config.actions.single}
+        .formActionsTemplate=${this.config.templates.formSingleActions}
+        .actionIds=${this.actionIds}
+        endpoint=${this.config.endpoint}
+        @crud-action-success=${this.actionSuccess}
+      ></dile-crud-single-actions>
+    `
+  }
+
+  get detailElement() {
+    return this.shadowRoot.getElementById('eldetail');
+  }
+
+  refresh() {
+    this.detailElement.refresh();
+  }
+
+  elementLoaded(e) {
+    this.element = e.detail.element;
+  }
+
+  actionSuccess(e) {
+    if(e.detail.action != "DeleteAction") {
+      this.refresh();
+    }
+  }
+
+  edit() {
+    this.updateElement.edit(this.relatedId);
+    this.modalUpdate.open();
+  }
+
+  
+}

package/components/ui/crud-filters-form.js

@@ -0,0 +1,3 @@
+
+import { DileCrudFiltersForm } from "./src/DileCrudFiltersForm";
+customElements.define('dile-crud-filters-form', DileCrudFiltersForm);

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

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

package/components/ui/crud-filters-list.js

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

package/components/ui/crud-filters.js

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

package/components/ui/crud-list-options.js

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

package/components/ui/crud-page-size-select.js

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

package/components/ui/crud-page-size.js

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

package/components/ui/crud-pagination-nav-button.js

@@ -0,0 +1,2 @@
+import { DileCrudPaginationNavButton } from './src/DileCrudPaginationNavButton.js';
+customElements.define('dile-crud-pagination-nav-button', DileCrudPaginationNavButton);

package/components/ui/crud-sort-form.js

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

package/components/ui/index.js

@@ -0,0 +1,4 @@
+export { DileCrudFiltersForm } from "./src/DileCrudFiltersForm";
+export { DileCrudFiltersList } from "./src/DileCrudFiltersList";
+export { DileCrudFiltersListItem } from "./src/DileCrudFiltersListItem";
+export { DileCrudPaginationNavButton } from './src/DileCrudPaginationNavButton.js';

package/components/ui/src/DileCrudFilters.js

@@ -0,0 +1,62 @@
+import { LitElement, html, css } from 'lit';
+import { filterIcon } from '@dile/icons';
+import '../crud-filters-form.js';
+import '../crud-list-options.js'
+
+export class DileCrudFilters extends LitElement {
+    static get properties() {
+      return {
+        filters: { type: Array }
+      };
+    }
+
+    constructor() {
+        super();
+        this.filters = [];
+    }
+
+    render() {
+        return html`
+            <dile-crud-list-options .icon="${filterIcon}" label="Filtros" >
+                <dile-crud-filters-form 
+                    id="elform"
+                    .filters=${this.filters} 
+                    @dile-form-changed=${this.filtersChanged}
+                ></dile-crud-filters-form>
+            </dile-crud-list-options>
+        `;
+    }
+
+    removeFilter(filterName) {
+        this.shadowRoot.getElementById('elform').resetField(filterName);
+    }
+
+    filtersChanged(e) {
+        let data = e.detail.data;
+        this.filters = this.filters.map(filter => {
+            if (filter.name in data) {
+                switch(filter.type) {
+                    case 'select':
+                        if(data[filter.name] === '') {
+                            filter.active = false;
+                        } else {
+                            filter.active = true;
+                            filter.value = data[filter.name];
+                        }
+                        break;
+                    default:
+                        filter.active = data[filter.name];
+                        filter.value = data[filter.name];
+                }
+            }
+            return filter;
+        });
+        this.dispatchEvent(new CustomEvent('filters-changed', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                filters: this.filters,
+            }
+        }));
+    }
+}

package/components/ui/src/DileCrudFiltersForm.js

@@ -0,0 +1,58 @@
+import { LitElement, html, css } from 'lit';
+import { DileFormChangeDetect, DileForm } from '@dile/ui/mixins/form';
+import '@dile/ui/components/checkbox/checkbox.js';
+import '@dile/ui/components/select/select.js';
+
+export class DileCrudFiltersForm extends DileFormChangeDetect(DileForm(LitElement)) {
+  static styles = css`
+        :host {
+            display: block;
+        }
+        p {
+            margin: 0.4rem 0;
+            
+        }
+    `;
+
+  static get properties() {
+    return {
+      filters: { type: Array }
+    };
+  }
+
+  constructor() {
+    super();
+    this.filters = [];
+  }
+
+  render() {
+    return html`
+            ${this.filters.map(filter => this.getFilterField(filter))}
+        `;
+  }
+
+  getFilterField(filter) {
+    if (filter.hidden) {
+      return '';
+    }
+    switch (filter.type) {
+      case 'select':
+        return html`
+            <dile-select label="${filter.label}" name="${filter.name}" value="">
+                <select slot="select">
+                    <option value="">-</option>
+                    ${filter.options.map(option => html`
+                        <option value="${option.name}">${option.label}</option>
+                    `)}
+                </select>
+            </dile-select>
+        `;
+      default:
+        return html`
+            <p>
+                <dile-checkbox ?checked=${filter.active} name="${filter.name}">${filter.label}</dile-checkbox>
+            </p>
+        `;
+    }
+  }
+}