@dile/crud 0.4.3 → 0.6.0

package/components/ajax-form/src/DileAjaxForm.js

@@ -245,7 +245,7 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
         let msg = this._customSuccessMessage();
         this.feedback.positiveFeedbackWithDelay(msg, 5000);
         if(this.operation == 'insert') {
-            this.form.clearData();
+            this.clearForm();
         }
         this.dispatchEvent(new CustomEvent('save-success', { 
             bubbles: true,
@@ -316,5 +316,9 @@ export class DileAjaxForm extends DileI18nMixin(LitElement) {
             }
         }));
     }
+
+    clearForm() {
+        this.form.clearData();
+    }
 }
 

package/components/insert/modal-crud-insert.js

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

package/components/insert/src/DileCrudInsert.js

@@ -39,12 +39,23 @@ export class DileCrudInsert extends DileI18nMixin(LitElement) {
     }
 
     render() {
+        return html`
+            ${this.titleTemplate}
+            ${this.ajaxFormTemplate}
+        `;
+    }
+
+    get titleTemplate() {
         return html`
             ${this.title
                 ? html`<h1>${this.title}</h1>`
                 : ''
-            }
-            
+            }    
+        `;
+    }
+
+    get ajaxFormTemplate() {
+        return html`
             <dile-ajax-form
                 operation="insert"
                 endpoint="${this.endpoint}"

package/components/insert/src/DileModalCrudInsert.js

@@ -0,0 +1,6 @@
+import { DileCrudInsert } from './DileCrudInsert.js';
+import { DileModalCrudOperationsMixin } from '../../../lib/DileModalCrudOperationsMixin.js';
+
+export class DileModalCrudInsert extends DileModalCrudOperationsMixin(DileCrudInsert) {
+  
+}

package/components/list/src/DileCrudList.js

@@ -65,6 +65,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         filters: { type: Array },
         belongsTo: { type: String },
         relationId: { type: String },
+        disableLoadOnStart: { type: Boolean },
       };
     }
 
@@ -80,14 +81,16 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         this.delayTimer = null;
         this.isSelectAllActive = false;
         this.loading = true;
+        this.disableLoadOnStart = false;
     }
 
     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());
-        
+        if(!this.disableLoadOnStart) {
+            this.updateComplete.then( () => this.refresh()); 
+        }
     }
 
     render() {

package/components/update/modal-crud-update.js

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

package/components/update/src/DileCrudUpdate.js

@@ -43,30 +43,42 @@ export class DileCrudUpdate extends DileI18nMixin(LitElement) {
 
   render() {
     return html`
-            ${this.title
-        ? html`<h1>${this.title}</h1>`
-        : ''
-      }
-          <dile-ajax-form
-              id="elform"
-              operation="update"
-              endpoint="${this.endpoint}"
-              actionLabel="${this.actionLabelComputed(this.actionLabel, this.translations)}"
-              @save-success="${this.doSuccessSave}"
-              ?buttonSmall="${this.buttonSmall}"
-              relatedId="${this.relatedId}"
-              ?loadOnInit="${this.loadOnInit}"
-              .responseAdapter="${this.responseAdapter}"
-              formIdentifier="${this.formIdentifier}"
-              language="${this.language}"
-              ?sendDataAsFormData=${this.sendDataAsFormData}
-              ?showCancelButton=${this.showCancelButton}
-              ?setDataOnInit=${this.setDataOnInit}
-              .data=${this.data}
-          >
-              ${this.formTemplate()}
-          </dile-ajax-form>
-        `;
+      ${this.titleTemplate}
+      ${this.ajaxFormTemplate}
+    `;
+  }
+
+  get titleTemplate() {
+    return html`
+        ${this.title
+            ? html`<h1>${this.title}</h1>`
+            : ''
+        }    
+    `;
+  }
+
+  get ajaxFormTemplate() {
+    return html`
+        <dile-ajax-form
+            id="elform"
+            operation="update"
+            endpoint="${this.endpoint}"
+            actionLabel="${this.actionLabelComputed(this.actionLabel, this.translations)}"
+            @save-success="${this.doSuccessSave}"
+            ?buttonSmall="${this.buttonSmall}"
+            relatedId="${this.relatedId}"
+            ?loadOnInit="${this.loadOnInit}"
+            .responseAdapter="${this.responseAdapter}"
+            formIdentifier="${this.formIdentifier}"
+            language="${this.language}"
+            ?sendDataAsFormData=${this.sendDataAsFormData}
+            ?showCancelButton=${this.showCancelButton}
+            ?setDataOnInit=${this.setDataOnInit}
+            .data=${this.data}
+        >
+            ${this.formTemplate()}
+        </dile-ajax-form>
+    `;
   }
 
   doSuccessSave(e) {

package/components/update/src/DileModalCrudUpdate.js

@@ -0,0 +1,7 @@
+import { DileCrudUpdate } from './DileCrudUpdate.js';
+import { DileModalCrudOperationsMixin } from '../../../lib/DileModalCrudOperationsMixin.js';
+
+export class DileModalCrudUpdate extends DileModalCrudOperationsMixin(DileCrudUpdate) {
+  
+}
+  

package/lib/DileModalCrudOperationsMixin.js

@@ -0,0 +1,71 @@
+import { css, html } from 'lit';
+import { formStyles } from '../styles/form-styles.js';
+import '@dile/ui/components/modal/modal.js';
+import '@dile/ui/components/button/button.js';
+import '@dile/ui/components/button/button-icon.js';
+
+export const DileModalCrudOperationsMixin = (superclass) => class extends superclass {
+
+  static styles = [
+    formStyles,
+    css`
+        section {
+          padding: var(--dile-modal-crud-extra-padding, 3px);
+        }
+    `
+  ];
+
+  static get properties() {
+    return {
+      openModalLabel: { type: String },
+      openModalIcon: { type: Object },
+      closeOnSuccess: { type: Boolean },
+    };
+  }
+
+  get modalElement() {
+    return this.shadowRoot.getElementById('modalElement')
+  }
+
+  constructor() {
+    super();
+    this.openModalLabel = "Open"
+  }
+
+  render() {
+    return html`
+      <dile-modal
+        id="modalElement"
+        blocking
+        showCloseIcon
+        @save-success=${this.doSuccessActions}
+      >
+        ${this.titleTemplate}
+        <section>
+          ${this.ajaxFormTemplate}
+        </section>
+      </dile-modal>
+      ${this.openModalTrigger}
+    `;
+  }
+
+  get openModalTrigger() {
+    return html`
+      ${this.openModalIcon
+        ? html`<dile-button-icon @click=${this.openModal} .icon=${this.openModalIcon}>${this.openModalLabel}</dile-button-icon>`
+        : html`<dile-button @click=${this.openModal}>${this.openModalLabel}</dile-button>`
+      }
+    `
+  }
+
+  openModal() {
+    this.modalElement.open();
+  }
+
+  doSuccessActions() {
+    if(this.closeOnSuccess) {
+      this.modalElement.close();
+    }
+  }
+
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "0.4.3",
+  "version": "0.6.0",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
   "scripts": {
@@ -31,5 +31,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1ba8c7a0a7f28812a2a5b461a197f8e3ea050f4c"
+  "gitHead": "1421edd8c9a2e0ec6657ff291d58d0b249f0c99d"
 }