@dile/crud 0.0.9

package/components/ajax-select-crud/src/DileAjaxSelectCrud.js

@@ -0,0 +1,75 @@
+import { DileAxios } from '../../../lib/DileAxios.js';
+import { DileSelectAjax } from '@dile/ui/components/select';
+
+export class DileAjaxSelectCrud extends DileAxios(DileSelectAjax) {
+
+  static get properties() {
+    return {
+      maxResults: { type: Number },
+      pageParamName: { type: String },
+      getSelectResultList: { type: Object },
+    };
+  }
+
+  constructor() {
+    super();
+  }
+
+  searchValueInitial() {
+    let request = this.axiosInstance.get(`${this.endpoint}/${this.value}`);
+    request.then((response) => {
+      if (response.status == 200) {
+        let res = response.data;
+        if (res.error) {
+          this.registerError(res.data);
+        } else {
+          this.registerText(res.data);
+        }
+      } else {
+        this.registerError('Bad response code');
+      }
+    })
+      .catch(err => {
+        this.registerError(err);
+      });
+  }
+
+  loadData() {
+    this.loading = true;
+    let params = {}
+    if (this.pageParamName && this.maxResults) {
+      params[this.pageParamName] = this.maxResults;
+    }
+    params[this.queryStringVariable] = this.keyword;
+    let request = this.axiosInstance.get(this.endpoint, { params });
+    request.then((response) => {
+      if (response.status == 200) {
+        let res = response.data;
+        if (res.error) {
+          this.registerError(res.data);
+        } else {
+          this.registerData(res);
+        }
+      } else {
+        this.registerError('Bad response code');
+      }
+    })
+      .catch(err => {
+        this.registerError(err);
+      });
+  }
+
+  registerText(json) {
+    this.selectedText = json[this.displayProperty];
+    this.loading = false;
+  }
+
+  registerData(json) {
+    if(this.getSelectResultList) {
+      this.data = this.getSelectResultList(json);
+    } else {
+      this.data = this.getResultData(json);
+    }
+    this.updateComplete.then(() => this.loading = false)
+  }
+}

package/components/crud/crud-single.js

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

package/components/crud/crud.js

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

package/components/crud/delete-action.js

@@ -0,0 +1,2 @@
+import { DileCrudDeleteAction } from "../action/src/DileCrudDeleteAction.js";
+customElements.define('dile-crud-delete-action', DileCrudDeleteAction);

package/components/crud/src/DileCrud.js

@@ -0,0 +1,352 @@
+import { LitElement, html, css } from 'lit';
+import '@dile/ui/components/input/input-search.js';
+import '@dile/ui/components/nav/nav.js';
+import '@dile/ui/components/select/select.js';
+import '@dile/ui/components/modal/modal.js';
+import '@dile/ui/components/modal/modal-help.js';
+import '../../item-delete/crud-item-delete.js';
+import '../../list/crud-list.js';
+import '../../ui/crud-sort-form.js';
+import '../../ui/crud-page-size.js';
+import '../../ui/crud-filters.js';
+import '../../insert/crud-insert.js';
+import '../../update/crud-update.js';
+import '../../action/crud-actions.js';
+import '../../action/crud-delete-action.js';
+import { formStyles } from '../../../styles/form-styles.js';
+import { DileCrudMixin } from '../../../lib/DileCrudMixin.js';
+import { crudStyles } from '../../../styles/crud-styles.js';
+import { addIcon } from '@dile/icons';
+
+export class DileCrud extends DileCrudMixin(LitElement) {
+    static styles = [
+        formStyles,
+        crudStyles,
+        css`
+            :host {
+                display: block;
+                --dile-nav-padding-y: 0.4rem;
+                --dile-nav-padding-x: 0.8rem;
+            }
+            header {
+                display: grid;
+                grid-template-columns: 1fr auto;
+                column-gap: 1rem;
+                row-gap: 0.5rem;
+                align-items: center;
+                margin-bottom: 0.5rem;
+            }
+            dile-input-search {
+                grid-column-start: 1;
+                grid-column-end: 3;
+            }
+            .actions {
+                display: flex;
+                
+            }
+            .action-controller {
+                margin-right: 0.5rem;
+            }
+            .action-controller:last-child {
+                margin-right: 0;
+            }
+            .simplecard {
+                --dile-card-box-shadow: none;
+                --dile-card-border: none;
+                margin: 0.7rem;
+            }
+            .insertButtonContainer {
+                display: flex;
+                justify-content: flex-end;
+                margin-bottom: 0.5rem;
+            }
+            @media(min-width: 400px) {
+                .simplecard {
+                    --dile-card-border: none;
+                    margin: 1rem;
+                }   
+            }
+            @media(min-width: 500px) {
+                .simplecard {
+                    margin: 1.2rem 0.5rem;
+                }
+            }
+            @media(min-width: 500px) {
+                .simplecard {
+                    margin: 1rem 0rem;
+                }
+            }
+        `
+    ];
+
+    static get properties() {
+      return {
+        title: { type: String },
+        config: { type: Object },
+        actionIds: { type: Array },
+        keyword: { type: String },
+        belongsTo: { type: String },
+        relationId: { type: String },
+      };
+    }
+
+    constructor() {
+        super();
+        this.actionIds = [];
+    }
+
+    // GETTERS ELEMENTOS
+    get modalInsert() {
+        return this.shadowRoot.getElementById('modalInsert');
+    }
+    
+    get listElement() {
+        return this.shadowRoot.querySelector('dile-crud-list');
+    }
+    get deleteElement() {
+        return this.shadowRoot.getElementById('eldelete');
+    }
+
+    // TEMPLATES
+
+    render() {
+        return html`
+            <header>
+                ${this.title 
+                    ? html`<h1 class="main-crud-title">${this.title}</h1>`
+                    : ''
+                }
+                ${this.config.customization.disableInsert ? '' : this.insertButtomTemplate}
+                <dile-input-search @dile-input-search=${this.keywordChanged}></dile-input-search>
+            </header>
+
+            <main>
+                ${this.navActionsTemplate}
+                <div
+                    @item-checkbox-changed=${this.itemCheckboxChanged}
+                    @dile-chip-icon-click=${this.removeFilter}
+                    @crud-list-all-ids-selected=${this.crudSelectAll}
+                >
+                    ${this.listTemplate}
+                </div>
+            </main>
+            
+            ${this.config.customization.disableUpdate ? '' : this.updateTemplate}
+
+            <dile-crud-item-delete 
+                id="eldelete"
+                endpoint="${this.config.endpoint}"
+                @delete-success=${this.deleteSuccess}
+            ></dile-crud-item-delete>
+
+            ${this.insertTemplate}
+            ${this.updateTemplate}
+        `;
+    }
+
+    get insertButtomTemplate() {
+        return html`
+            <div class="insertButtonContainer">
+                <dile-button-icon @click="${this.openInsert}" .icon="${addIcon}">${this.config.labels.insertAction}</dile-button-icon>
+            </div>
+        `
+    }
+
+    get insertTemplate() {
+        return html`
+            <dile-modal 
+                id="modalInsert"
+                showCloseIcon
+                blocking
+            >
+                <dile-crud-insert
+                    title=${this.config.labels.insertWindowTitle}
+                    endpoint="${this.config.endpoint}"
+                    .responseAdapter=${this.config.responseAdapter}
+                    .formTemplate=${this.config.templates.insertForm}
+                    actionLabel=${this.config.labels.insertAction}
+                    formIdentifier="${this.config.formIds.insertForm}"
+                    @crud-insert-success="${this.modalInsertSuccess}"
+                    belongsTo=${this.belongsTo}
+                    relationId=${this.relationId}
+                ></dile-crud-insert>
+            </dile-modal>
+        `
+    }
+
+    get listTemplate() {
+        return html`
+            <dile-crud-list
+                .config=${this.config}
+                @crud-item-edit=${this.updateRequest}
+                @crud-item-delete=${this.itemDeleteRequest}
+                @insert-requested=${this.openInsert}
+                .actionIds=${this.actionIds}
+                belongsTo=${this.belongsTo}
+                relationId=${this.relationId}
+            ></dile-crud-list>
+        `
+    }
+    get helpTemplate() {
+        return html`
+            <dile-modal-help 
+                title="${this.config.labels.helpTitle}"
+                label="${this.config.labels.helpButtonLabel}"
+            >${this.config.templates.help()}</dile-modal-help>`
+    }
+
+    get navActionsTemplate() {
+        return html`
+            <dile-nav>
+                ${this.config.customization.disableHelp
+                    ? ''
+                    : html`<div slot="menu">${this.helpTemplate}</div>`
+                }
+                <div class="actions" slot="actions">
+                    ${this.actionsTemplate}
+                    ${this.config.customization.disableFilter
+                        ? ''
+                        : html`
+                            <dile-crud-filters
+                                class="action-controller" 
+                                id="elfilters"
+                                @filters-changed=${this.filtersChanged}
+                                .filters=${this.config.availableFilters || []}
+                            ></dile-crud-filters>
+                        `
+                    }
+                    ${this.config.customization.disablePagination
+                        ? ''
+                        : html`
+                            <dile-crud-page-size 
+                                class="action-controller" 
+                                @page-size-changed=${this.pageSizeChanged}
+                                .pageSizes=${this.config.pageSize.available || [10, 25, 50]}
+                                pageSize="${this.config.pageSize.initial}"
+                            ></dile-crud-page-size>
+                        `
+                    } 
+                    ${this.config.customization.disableSort
+                        ? ''
+                        : html`
+                            <dile-crud-sort-form 
+                                class="action-controller"
+                                .sortOptions=${this.config.sort.options || []} 
+                                sortField="${this.config.sort.initialSortField}"
+                                sortDirection="${this.config.sort.initialSortDirection || 'desc'}"
+                                @sort-changed=${this.sortFormChanged}
+                            ></dile-crud-sort-form>  
+                        `
+                    }
+                </div>   
+            </dile-nav>
+        `
+    }
+
+    // BEHAVIOURS
+
+    openInsert() {
+        this.dispatchEvent(new CustomEvent('crud-item-insert', { bubbles: true, composed: true }));
+        this.modalInsert.open();
+    }
+
+    insertSaveSuccess() {
+        this.refresh();
+    }
+
+    updateRequest(e) {
+        this.editItem(e.detail.itemId);
+        this.modalUpdate.open();
+    }
+
+    editItem(id) {
+        this.updateElement.edit(id);
+    }
+
+    keywordChanged(e) {
+        this.setKeyword(e.detail.keyword);
+    }
+
+    setKeyword(keyword) {
+        this.listElement.setKeyword(keyword);
+    }
+
+    sortFormChanged(e) {
+        this.listElement.setSort(e.detail);
+    }
+
+    pageSizeChanged(e) {
+        this.listElement.setPageSize(e.detail.pageSize);
+    }
+
+    itemCheckboxChanged(e) {
+        if(e.detail.checked) {
+            this.attachActionId(e.detail.itemId);
+        } else {
+            this.detachActionId(e.detail.itemId);
+        }
+    }
+
+    attachActionId(id) {
+        if(! this.actionIds.includes(id)) {
+            this.actionIds = [
+                ...this.actionIds,
+                id
+            ];
+        }
+    }
+
+    detachActionId(id) {
+        if(this.actionIds.includes(id)) {
+            this.actionIds.splice(this.actionIds.indexOf(id), 1);
+            this.count = this.actionIds.length;
+        }
+        this.actionIds = [...this.actionIds]
+        //this.actionsElement.setActionIds(this.actionIds);
+    }
+
+    actionSuccess(e) {
+        if (e.detail.action === 'DeleteAction') {
+            this.removeActionItems(e.detail.data.delete_elems);
+        }
+        this.refresh();
+    }
+
+    removeActionItems(idsArray) {
+        idsArray.forEach(item => this.detachActionId(item));
+    }
+
+    filtersChanged(e) {
+        this.listElement.setFilters(e.detail.filters);
+    }
+
+    removeFilter(e) {
+        if(e.detail.name == 'keyword') {
+            this.shadowRoot.querySelector('dile-input-search').clear();
+        } else {
+            this.filtersElement.removeFilter(e.detail.name);
+        }
+    }
+
+    crudSelectAll(e) {
+        this.actionIds = e.detail.ids;
+    }
+
+    itemDeleteRequest(e) {
+        this.deleteElement.delete(e.detail.itemId)
+    }
+
+    // SUCCESS HANDLERS
+    modalInsertSuccess() {
+        this.modalInsert.close();
+        this.refresh();
+    }
+
+    deleteSuccess() {
+        this.refresh();
+    }
+
+    refresh() {
+        this.listElement.refresh();
+    }
+}

package/components/detail/crud-detail.js

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

package/components/detail/src/DileCrudDetail.js

@@ -0,0 +1,166 @@
+import { LitElement, html, css } from 'lit';
+import { formStyles } from '../../../styles/form-styles';
+import { DileLoading, loadingStyles } from '../../../lib/DileLoading.js';
+import '../../ajax/ajax.js';
+import { ResponseApiAdapter } from '../../../lib/ResponseApiAdapter.js';
+
+export class DileCrudDetail extends DileLoading(LitElement) {
+  static styles = [
+    formStyles,
+    loadingStyles,
+    css`
+        :host {
+            display: block;
+            margin-bottom: 0;
+        }
+        .detail-data {
+            background-color: #f5f5f5;
+            padding: 1rem;
+            border-top-left-radius: 0.6rem;
+            border-top-right-radius: 0.6rem;
+
+        }
+        .detail-data p {
+            margin: 0.05rem 0;
+        }
+        main {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-start;
+            --dile-icon-color: #bbb;
+            --dile-icon-size: 32px;
+        }
+        section {
+            padding: 1rem 0 0;
+            flex-grow: 1;
+        }
+        .morecontent {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            column-gap: 0.6rem;
+            row-gap: 0.25rem;
+            padding: 0.25rem 0 0;
+            font-size: 0.85rem;
+        }
+        h1 {
+            font-size: 1.5rem;
+            margin-bottom: 0.5rem;
+            margin-top: 0;
+        }
+        aside {
+            padding: 1rem 0;
+            min-width: 32px;
+        }
+        
+        @media(min-width : 520px) {
+            main {
+                --dile-icon-size: 48px;
+            }
+        }
+        @media(min-width : 800px) {
+            main {
+                --dile-icon-size: 64px;
+            }
+            h1 {
+                font-size: 1.8rem;
+            }
+        }
+    `
+  ];
+
+  static get properties() {
+    return {
+      endpoint: { type: String },
+      element: { type: Object },
+      itemDetailTemplate: { type: Object },
+      responseAdapter: { type: Object },
+    };
+  }
+
+  constructor() {
+    super();
+    this.responseAdapter = new ResponseApiAdapter();
+  }
+
+  firstUpdated() {
+    this.ajaxget = this.shadowRoot.getElementById('ajaxget');
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('endpoint')) {
+      this.refresh();
+    }
+  }
+
+  render() {
+    return html`
+      ${this.ajaxTemplate}
+      ${this.loading
+        ? this.loadingTemplate
+        : this.itemTemplate
+      }
+    `;
+  }
+
+  get ajaxTemplate() {
+    return html`
+      <dile-ajax
+        id="ajaxget"
+        method="get"
+        url="${this.endpoint}"
+        @ajax-success="${this.doSuccessGet}"
+        @ajax-error="${this.doErrorGet}"
+      ></dile-ajax>
+    `
+  }
+
+  get itemTemplate() {
+    return html`
+      <div class="detail-data">
+          ${this.itemDetailTemplate(this.element)}
+      </div>
+    `;
+  }
+
+  itemEdit() {
+    this.dispatchEvent(new CustomEvent('item-edit', {
+      bubbles: true,
+      composed: true,
+      detail: { itemId: this.element.id },
+    }));
+  }
+
+  itemDelete() {
+    this.dispatchEvent(new CustomEvent('item-delete', {
+      bubbles: true,
+      composed: true,
+      detail: { itemId: this.element.id },
+    }));
+  }
+
+  doSuccessGet(e) {
+    this.loading = false;
+    this.responseAdapter.setResponse(e.detail);
+    this.element = this.responseAdapter.getData();
+    this.dispatchEvent(new CustomEvent('crud-item-detail-loaded', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this.element,
+        previousDetail: e.detail,
+      }
+    }));
+  }
+
+  doErrorGet(e) {
+    this.dispatchEvent(new CustomEvent('crud-item-detail-load-error', {
+      bubbles: true,
+      composed: true,
+      detail: e.detail,
+    }));
+  }
+
+  refresh() {
+    this.ajaxget.generateRequest();
+  }
+}

package/components/insert/crud-insert.js

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

package/components/insert/index.js

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

package/components/insert/src/DileCrudInsert.js

@@ -0,0 +1,78 @@
+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 DileCrudInsert extends LitElement {
+    static styles = [
+        formStyles,
+        css`
+            
+        `
+    ];
+    
+    static get properties() {
+        return {
+            title: { type: String },
+            endpoint: { type: String },
+            actionLabel: { type: String },
+            belongsTo: { type: String },
+            relationId: { type: String },
+            formTemplate: { type: Object },
+            buttonSmall: { type: Boolean },
+            responseAdapter: { type: Object},
+            formIdentifier: { type: String },
+        };
+    }
+
+    constructor() {
+        super();
+        this.responseAdapter = new ResponseApiAdapter();
+        this.actionLabel = 'Insert';
+        this.formIdentifier = 'insertform';
+    }
+
+    get formElement() {
+        return this.shadowRoot.getElementById(this.formId);
+    }
+
+    render() {
+        return html`
+            ${this.title
+                ? html`<h1>${this.title}</h1>`
+                : ''
+            }
+            
+            <dile-ajax-form
+                operation="insert"
+                endpoint="${this.endpoint}"
+                actionLabel="${this.actionLabel}"
+                @save-success="${this.doSuccessSave}"
+                ?buttonSmall="${this.buttonSmall}"
+                .responseAdapter="${this.responseAdapter}"
+                formIdentifier="${this.formIdentifier}"
+            >
+                ${this.formTemplate(this.belongsTo, this.relationId)}
+            </dile-ajax-form> 
+        `;
+    }
+
+    doSuccessSave(e) {
+        this.dispatchEvent(new CustomEvent('crud-insert-success', { 
+            bubbles: true,
+            composed: true,
+            detail: e.detail
+        }));
+    }
+
+    setData(data) {        
+        this.updateComplete.then(() => {
+            this.formElement.setData(data);    
+        });
+        
+    }
+
+    clearFeedback() {
+        this.formElement.clearFeedback();
+    }
+}

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

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

package/components/item-delete/index.js

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