@dile/crud 0.0.9

package/components/ui/src/DileCrudFiltersList.js

@@ -0,0 +1,70 @@
+import { LitElement, html, css } from 'lit';
+import '../crud-filters-list-item';
+
+export class DileCrudFiltersList extends LitElement {
+    static styles = [
+        css`
+            :host {
+                display: block;
+            }
+            div {
+                padding: 0.5rem;
+                display: flex;
+                flex-wrap: wrap;
+            }
+            dile-crud-filters-list-item {
+                margin-right: 0.5rem;
+            }
+        `
+    ];
+
+    static get properties() {
+      return {
+        filters: { type: Array },
+        keyword: { type: String },
+        hiddenFilters: { type: Array },
+      };
+    }
+
+    constructor() {
+        super();
+        this.filters = [];
+        this.hiddenFilters = [];
+    }
+
+    render() {
+        return html`
+            <div>
+                ${this.keyword 
+                    ? html`<dile-crud-filters-list-item name="keyword" label="${this.keyword}" active></dile-crud-filters-list-item>`
+                    : ''
+                }
+                ${this.filters.map(filter => this.filterItemTemplate(filter))}
+            </div>
+        `;
+    }
+
+    filterItemTemplate(filter) {
+        if(! filter.hidden) {
+            switch(filter.type) {
+                case 'select':
+                    return html`
+                        <dile-crud-filters-list-item name="${filter.name}" label="${this.findLabelInOption(filter)}" ?active="${filter.active}"></dile-crud-filters-list-item>
+                    `;
+                default:
+                    return html`
+                       <dile-crud-filters-list-item name="${filter.name}" label="${filter.label}" ?active="${filter.active}"></dile-crud-filters-list-item>
+                    `
+            }
+        }
+    }
+
+    findLabelInOption(filter) {
+        let option = filter.options.find((option) => option.name == filter.value);
+        if(option) {
+            return option.label;
+        } else {
+            return ''
+        }
+    }
+}

package/components/ui/src/DileCrudFiltersListItem.js

@@ -0,0 +1,28 @@
+import { LitElement, html, css } from 'lit';
+import '@dile/ui/components/chip/chip.js';
+
+export class DileCrudFiltersListItem extends LitElement {
+    static styles = [
+        css`
+            :host {
+                display: inline-block;
+            }
+        `
+    ];
+
+    static get properties() {
+      return {
+        name: { type: String },
+        active: { type: Boolean },
+        label: { type: String },
+      };
+    }
+    render() {
+        return html`
+           ${this.active
+            ? html`<dile-chip name="${ this.name }">${ this.label }</dile-chip>`
+            : ''
+        }
+        `;
+    }
+}

package/components/ui/src/DileCrudListOptions.js

@@ -0,0 +1,64 @@
+import { LitElement, html, css } from 'lit';
+import '@dile/ui/components/icon/icon';
+import '@dile/ui/components/button/button-icon';
+import '@dile/ui/components/menu-overlay/menu-overlay';
+
+export class DileCrudListOptions extends LitElement {
+    static styles = [
+        css`
+            :host {
+                display: block;
+                --dile-icon-color: #fff;
+            }
+            .content {
+                padding: 0.5rem;
+                background: var(--dile-primary-light-color);
+                color: #303030;
+            }
+            dile-button-icon {
+                display: none;
+                --dile-primary-color: var(--dile-crud-action-color, #888);
+                --dile-on-primary-color: #fff;
+                --dile-primary-dark-color: transparent;
+            }
+            dile-icon {
+                cursor: pointer;
+                --dile-icon-rounded-background-color: #888;
+            }
+            @media (min-width: 605px) {
+                dile-button-icon {
+                    display: block;
+                }   
+                dile-icon {
+                    display: none;
+                }
+            }
+        `
+    ];
+
+    static get properties() {
+      return {
+        label: { type: String },
+        icon: { type: Object },
+      };
+    }
+
+    render() {
+        return html`
+            <dile-menu-overlay horizontalAlign="under_right" verticalAlign="bottom">
+                <div slot="trigger">
+                    <dile-icon rounded .icon="${this.icon}"></dile-icon>
+                    <dile-button-icon .icon="${this.icon}" gray>${this.label}</dile-button-icon>
+                </div>
+                <div class="content" slot="content">
+                    <slot></slot>
+                </div>
+            </dile-menu-overlay>
+        `;
+    }
+
+
+    close() {
+        this.shadowRoot.querySelector('dile-menu-overlay').close();  
+    } 
+}

package/components/ui/src/DileCrudPageSize.js

@@ -0,0 +1,27 @@
+import { LitElement, html, css } from 'lit';
+import '../crud-list-options';
+import '../crud-page-size-select';
+import { descriptionIcon } from '@dile/icons';
+
+export class DileCrudPageSize extends LitElement {
+
+    static get properties() {
+        return {
+          pageSizes: { type: Array },
+            pageSize: { type: Number },
+        };
+    }
+
+    constructor() {
+        super();
+        this.pageSizes = [25, 50, 100, 500];
+    }
+
+    render() {
+        return html`
+            <dile-crud-list-options .icon="${descriptionIcon}" label="Page">
+                <dile-crud-page-size-select pageSize="${this.pageSize}" .pageSizes=${this.pageSizes}></dile-crud-page-size-select>
+            </dile-crud-list-options>
+        `;
+    }
+}

package/components/ui/src/DileCrudPageSizeSelect.js

@@ -0,0 +1,44 @@
+import { LitElement, html, css } from 'lit';
+import '@dile/ui/components/select/select';
+
+export class DileCrudPageSizeSelect extends LitElement {
+    static styles = [
+        css`
+            :host {
+                display: block;
+            }
+            dile-select {
+                margin-top: 0.5rem
+            }
+        `
+    ];
+
+    static get properties() {
+      return {
+        pageSizes: { type: Array },
+        pageSize: { type: Number },
+      };
+    }
+
+    render() {
+        return html`
+            <dile-select quietOnStart .value="${this.pageSize}" name="page" label="Tamaño de página" @element-changed=${this.pageChanged}>
+                <select slot="select">
+                    ${this.pageSizes.map( size => html`<option value="${size}">${size}</option>`)}
+                </select>
+            </dile-select>
+        `;
+    }
+
+    pageChanged(e) {
+        this.dispatchEvent(new CustomEvent('page-size-changed', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                pageSize: e.detail.value
+            }
+        }));
+    }
+}
+
+

package/components/ui/src/DileCrudPaginationNavButton.js

@@ -0,0 +1,44 @@
+import { LitElement, html, css } from 'lit';
+import { doubleArrowLeftIcon, doubleArrowRightIcon } from '@dile/icons';
+import '@dile/ui/components/icon/icon';
+
+export class DileCrudPaginationNavButton extends LitElement {
+    static styles = [
+        css`
+            :host {
+                display: block;
+                cursor: pointer;
+            }
+            dile-icon {
+                --dile-icon-color: var(--dile-on-secondary-color, #fff);
+                --dile-icon-rounded-background-color: var(--dile-secondary-color, #2962FF);
+            }
+            dile-icon:hover {
+                --dile-icon-color: var(--dile-on-secondary-dark-color, #1942DF);
+                --dile-icon-rounded-background-color: var(--dile-secondary-dark-color, #fff);
+            }
+            dile-icon.disabled {
+                --dile-icon-color: #f5f5f5;
+                --dile-icon-rounded-background-color: #ddd;
+                cursor: default;
+            }
+        `
+    ];
+
+    static get properties() {
+      return {
+        direction: { type: String },
+        disabled: { type: Boolean },
+      };
+    }
+
+    render() {
+        return html`
+            <dile-icon 
+                rounded 
+                class="${this.disabled ? 'disabled' : ''}" 
+                .icon="${this.direction == 'right' ? doubleArrowRightIcon : doubleArrowLeftIcon}"
+            ></dile-icon>
+        `;
+    }
+}

package/components/ui/src/DileCrudSortForm.js

@@ -0,0 +1,105 @@
+import { LitElement, html, css } from 'lit';
+import '@dile/ui/components/order-switch/order-switch';
+import '@dile/ui/components/radio-group/radio-group';
+import '@dile/ui/components/radio-group/radio';
+import { sortIcon } from '@dile/icons';
+import '../crud-list-options';
+
+export class DileCrudSortForm extends LitElement {
+  static styles = [
+    css`
+        :host {
+            display: block;
+        }
+        div {
+            display: flex;
+            align-items: center;
+            margin-bottom: 0.1rem;
+        }
+        .selected {
+            font-weight: bold;
+        }
+        dile-radio-group {
+            margin-top: 10px;
+        }
+        dile-radio {
+            margin-right: 0.2rem;
+            --dile-icon-color: var(--dile-primary-color);
+        }
+        dile-order-switch {
+            margin-bottom: 0;
+            --dile-icon-color: var(--dile-secondary-color);
+
+        }
+    `
+  ];
+
+  static get properties() {
+    return {
+      sortOptions: { type: Array },
+      sortField: { type: String },
+      sortDirection: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.sortOptions = [];
+  }
+
+  render() {
+    return html`
+        <dile-crud-list-options class="action-controller" .icon="${sortIcon}" label="Order">
+            <dile-radio-group 
+                name="selector" 
+                @dile-radio-group-changed=${this.radioGroupChanged}
+                value="${this.sortField}"
+            >
+                ${this.sortOptions.map(option => html`
+                    <div class="${this.sortField === option.name ? 'selected' : ''}">
+                        <dile-radio
+                            groupName="selector"
+                            radioId="${option.name}"
+                            ?checked=${this.sortField === option.name}
+                            value="${option.name}"
+                        ></dile-radio>
+                        <dile-order-switch 
+                            label="${option.label}" 
+                            name="${option.name}" 
+                            value="${option.direction}" 
+                            @element-changed=${this.elementChanged}
+                        ></dile-order-switch>
+                    </div>
+                `)}
+            </dile-radio-group>
+        </dile-crud-list-options> 
+    `;
+  }
+
+  elementChanged(e) {
+    this.sortField = e.detail.name;
+    this.sortDirection = e.detail.value;
+    this.dispatchChanged();
+  }
+
+  radioGroupChanged(e) {
+    this.sortField = e.detail.value;
+    this.sortDirection = this.getDirection(this.sortField);
+    this.dispatchChanged();
+  }
+
+  getDirection(field) {
+    if(field) {
+      return this.shadowRoot.querySelector(`dile-order-switch[name="${field}"]`).value;
+    }
+  }
+
+  dispatchChanged() {
+    this.dispatchEvent(new CustomEvent('sort-changed', {
+      detail: {
+        sortField: this.sortField,
+        sortDirection: this.sortDirection,
+      }
+    }));
+  }
+}

package/components/update/crud-update.js

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

package/components/update/index.js

@@ -0,0 +1 @@
+export { DileCrudUpdate } from './src/DileCrudUpdate.js';

package/components/update/src/DileCrudUpdate.js

@@ -0,0 +1,81 @@
+import { LitElement, html, css } from 'lit';
+import '../../ajax-form/ajax-form.js'
+import { formStyles } from '../../../styles/form-styles.js';
+import { ResponseApiAdapter } from '../../../lib/ResponseApiAdapter.js';
+
+export class DileCrudUpdate extends LitElement {
+    static styles = [
+        formStyles,
+        css`
+            
+        `
+    ];
+    
+    static get properties() {
+        return {
+            title: { type: String },
+            relatedId: { type: String },
+            endpoint: { type: String },
+            actionLabel: { type: String },
+            loadOnInit: { type: Boolean },
+            formTemplate: { type: Object },
+            buttonSmall: { type: Boolean },
+            responseAdapter: { type: Object },
+            formIdentifier: { type: String },
+        };
+    }
+
+    constructor() {
+        super();
+        this.responseAdapter = new ResponseApiAdapter();
+        this.actionLabel = 'Update';
+        this.loadOnInit = false;
+        this.formIdentifier = 'updateform';
+    }
+
+    get formElement() {
+        return this.shadowRoot.getElementById('elform');
+    }
+
+    render() {
+        return html`
+            ${this.title
+                ? html`<h1>${this.title}</h1>`
+                : ''
+            }
+            <dile-ajax-form
+                id="elform"
+                operation="update"
+                endpoint="${this.endpoint}"
+                actionLabel="${this.actionLabel}"
+                @save-success="${this.doSuccessSave}"
+                ?buttonSmall="${this.buttonSmall}"
+                relatedId="${this.relatedId}"
+                ?loadOnInit="${this.loadOnInit}"
+                .responseAdapter="${this.responseAdapter}"
+                formIdentifier="${this.formIdentifier}"
+            >
+                ${this.formTemplate()}
+            </dile-ajax-form>
+        `;
+    }
+
+    doSuccessSave(e) {
+        this.dispatchEvent(new CustomEvent('crud-update-success', {
+            bubbles: true,
+            composed: true,
+            detail: e.detail
+        }));
+    }
+
+    edit(id) {
+        this.relatedId = id;
+        this.updateComplete.then(() => {
+            this.formElement.loadData();
+        });
+    }
+
+    clearFeedback() {
+        this.formElement.clearFeedback();
+    }
+}

package/lib/AxiosInstanceBuilder.js

@@ -0,0 +1,21 @@
+import Axios from 'axios'
+
+export class AxiosInstanceBuilder {
+  constructor(configuration) {
+    if(!configuration || typeof configuration != 'object') {
+      configuration = {}
+    }
+    const axiosConfig = {
+      headers: {
+        'X-Requested-With': 'XMLHttpRequest',
+        'Accept': 'application/json',
+      },
+      withCredentials: configuration.withCredentials || false,
+      withXSRFToken: configuration.withXSRFToken || false,
+    }
+    if(configuration.baseURL) {
+      axiosConfig.baseURL = configuration.baseURL;
+    }
+    window.axiosInstance = Axios.create(axiosConfig);
+  }
+}

package/lib/CrudConfigBuilder.js

@@ -0,0 +1,13 @@
+import { deepMerge } from './deepMerge.js';
+import { defaultConfig } from './defaultConfig.js';
+
+export class CrudConfigBuilder {
+  constructor(endpoint, customConfig) {
+    this.config = deepMerge(defaultConfig, customConfig);
+    this.config.endpoint = endpoint;
+  }
+ 
+  getConfig() {
+    return this.config;
+  }
+}

package/lib/DileAxios.js

@@ -0,0 +1,14 @@
+import { AxiosInstanceBuilder } from './AxiosInstanceBuilder.js';
+
+export const DileAxios = (superclass) => class extends superclass {
+  get axiosInstance() {
+    if (window.axiosInstance) {
+      return window.axiosInstance;
+    }
+    if (window.axios) {
+      return window.axios;
+    }
+    new AxiosInstanceBuilder()
+    return window.axiosInstance;
+  }
+}

package/lib/DileCrudMixin.js

@@ -0,0 +1,72 @@
+import { html } from "lit";
+
+export const DileCrudMixin = (superclass) => class extends superclass {
+
+    get updateElement() {
+        return this.shadowRoot.getElementById('updateElement');
+    }
+    get modalUpdate() {
+        return this.shadowRoot.getElementById('modalUpdate');
+    }
+
+    // get listElement() {
+    //     return this.shadowRoot.querySelector('dile-crud-list');
+    // }
+    // get insertElement() {
+    //     return this.shadowRoot.getElementById('elinsert');
+    // }
+    // get deleteElement() {
+    //     return this.shadowRoot.getElementById('eldelete');
+    // }
+    // get actionsElement() {
+    //     return this.shadowRoot.getElementById('elactions');
+    // }
+    // get filtersElement() {
+    //     return this.shadowRoot.getElementById('elfilters');
+    // }
+    
+    // itemDeleteRequest(e) {
+    //     this.deleteElement.delete(e.detail.itemId);
+    // }
+
+    get actionsTemplate() {
+        return html`
+            <dile-crud-actions
+                @crud-action-success=${this.actionSuccess}
+                class="action-controller"
+                id="elactions"
+                .actionIds=${this.actionIds}
+                endpoint=${this.config.endpoint}
+                .actions=${this.config.actions.list}
+                .formActionsTemplate=${this.config.templates.formActions}
+            ></dile-crud-actions>
+        `
+    }
+
+    get updateTemplate() {
+        return html`
+            <dile-modal 
+                id="modalUpdate"
+                showCloseIcon
+                blocking
+            >
+                <dile-crud-update
+                    id="updateElement"
+                    title=${this.config.labels.updateWindowTitle}
+                    endpoint="${this.config.endpoint}"
+                    .responseAdapter=${this.config.responseAdapter}
+                    .formTemplate=${this.config.templates.updateForm}
+                    actionLabel=${this.config.labels.updateAction}
+                    formIdentifier="${this.config.formIds.updateForm}"
+                    @crud-update-success="${this.modalUpdateSuccess}"
+                ></dile-crud-update>
+            </dile-modal>
+        `
+    }
+
+    modalUpdateSuccess() {
+        setTimeout(() => this.updateElement.clearFeedback(), 1000);
+        this.modalUpdate.close();
+        this.refresh();
+    }
+}

package/lib/DileLoading.js

@@ -0,0 +1,31 @@
+import { html, css } from 'lit';
+import '@dile/ui/components/spinner/spinner.js';
+
+export const loadingStyles = css`
+    .loading {
+      padding: var(--dile-crud-list-loading-padding, 3rem 1rem);
+      text-align: center;
+    }
+`
+
+export const DileLoading = (superclass) => class extends superclass {
+
+  static get properties() {
+    return {
+      loading: { type: Boolean }
+    };
+  }
+
+  constructor() {
+    super();
+    this.loading = true;
+  }
+
+  get loadingTemplate() {
+    return html`
+      <div class="loading">
+          <dile-spinner active></dile-spinner>
+      </div>
+    `;
+  }
+}

package/lib/RequestApiAdapter.js

@@ -0,0 +1,15 @@
+/**
+ * Default Request Adapter configuration class
+ * 
+ * You may extend this class and overwrite its methods to create customized request data objets
+ * that adapt your API intrerface
+ */
+
+export class RequestApiAdapter {
+  adaptListRequestData(data) {
+    return data;
+  }
+  adaptIdsRequestData(data) {
+    return data;
+  }
+}

package/lib/ResponseApiAdapter.js

@@ -0,0 +1,37 @@
+/**
+ * Default Response Adapter configuration class
+ * 
+ * You may extend this class and overwrite its methods to create customized response adapters
+ */
+
+export class ResponseApiAdapter {
+  
+  setResponse(response) {
+    this.response = response;
+  }
+
+  getData() {
+    return this.response.data;
+  }
+
+  getMessage() {
+    return this.response.message;
+  }
+  
+  getValidationErrors() {
+    return this.response.errors || [];
+  }
+
+  getElementList() {
+    return this.response.data;
+  }
+
+  getPaginationData() {
+    return this.response.data;
+  }
+
+  getIds() {
+    return this.response.data;
+  }
+  
+}

package/lib/capitalizeString.js

@@ -0,0 +1,3 @@
+export function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}