@dile/crud 0.7.2 → 0.7.4

package/components/crud/src/DileCrud.js

@@ -5,6 +5,7 @@ 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 '../../item-restore/crud-item-restore.js';
 import '../../list/crud-list.js';
 import '../../ui/crud-sort-form.js';
 import '../../ui/crud-page-size.js';
@@ -106,6 +107,9 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
     get deleteElement() {
         return this.shadowRoot.getElementById('eldelete');
     }
+    get restoreElement() {
+        return this.shadowRoot.getElementById('elrestore');
+    }
     get filtersElement() {
         return this.shadowRoot.getElementById('elfilters');
     }
@@ -143,6 +147,13 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
                 language="${this.language}"
             ></dile-crud-item-delete>
 
+            <dile-crud-item-restore 
+                id="elrestore"
+                endpoint="${this.config.endpoint}"
+                @restore-success=${this.restoreSuccess}
+                language="${this.language}"
+            ></dile-crud-item-restore>
+
             ${this.insertTemplate}
             ${this.updateTemplate}
         `;
@@ -186,6 +197,7 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
                 .config=${this.config}
                 @crud-item-edit=${this.updateRequest}
                 @crud-item-delete=${this.itemDeleteRequest}
+                @crud-item-restore=${this.itemRestoreRequest}
                 @insert-requested=${this.openInsert}
                 .actionIds=${this.actionIds}
                 belongsTo=${this.belongsTo}
@@ -371,6 +383,10 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
         this.deleteElement.delete(e.detail.itemId)
     }
 
+    itemRestoreRequest(e) {
+        this.restoreElement.restore(e.detail.itemId)
+    }
+
     // SUCCESS HANDLERS
     modalInsertSuccess() {
         this.modalInsert.close();
@@ -381,6 +397,10 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
         this.refresh();
     }
 
+    restoreSuccess() {
+        this.refresh();
+    }
+
     refresh() {
         this.listElement.refresh();
     }

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

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

package/components/item-delete/index.js

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

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

@@ -4,6 +4,8 @@ import { ResponseApiAdapter } from '../../../lib/ResponseApiAdapter.js';
 import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 import '../../ajax/ajax.js';
 
+const OPERATION_ITEM_MISSING_ERROR = 'Please provide the element id to delete';
+
 export class DileCrudItemDelete extends DileI18nMixin(LitElement) {
   static styles = [
     css`
@@ -36,12 +38,17 @@ export class DileCrudItemDelete extends DileI18nMixin(LitElement) {
       confirmMessage: { type: String },
       cancelLabel: { type: String },
       acceptLabel: { type: String },
+      method: { type: String },
     };
   }
 
   constructor() {
     super();
+    this.successEventName = 'delete-success';
+    this.errorEventName = 'delete-error';
     this.responseAdapter = new ResponseApiAdapter();
+    this.method = 'delete';
+    this.ITEM_TO_DELETE_
   }
 
   firstUpdated() {
@@ -53,8 +60,8 @@ export class DileCrudItemDelete extends DileI18nMixin(LitElement) {
     return html`
       <dile-ajax
           id="ajaxdelete"
-          method="delete"
-          url="${this.endpoint}/${this.relatedId}"
+          method="${this.method}"
+          url="${this.computeUrl(this.endpoint, this.relatedId)}"
           @ajax-success="${this.doSuccessDelete}"
           @ajax-error="${this.doErrorDelete}"
       ></dile-ajax>
@@ -69,12 +76,16 @@ export class DileCrudItemDelete extends DileI18nMixin(LitElement) {
   `;
   }
 
+  computeUrl(endpoint, relatedId) {
+    return `${endpoint}/${relatedId}`
+  }
+
   delete(itemId) {
     if(itemId != "" && itemId != undefined) {
       this.relatedId = itemId;
       this.elconfirm.open();
     } else {
-      throw new Error('Please provide the element id to delete');
+      throw new Error(OPERATION_ITEM_MISSING_ERROR);
     }
   }
 
@@ -84,7 +95,7 @@ export class DileCrudItemDelete extends DileI18nMixin(LitElement) {
 
   doSuccessDelete(e) {
     let msg = this.computeResponseMessage(e.detail);
-    this.dispatchEvent(new CustomEvent('delete-success', { 
+    this.dispatchEvent(new CustomEvent(this.successEventName, { 
       bubbles: true, 
       composed: true,
       detail: {
@@ -96,7 +107,7 @@ export class DileCrudItemDelete extends DileI18nMixin(LitElement) {
   
   doErrorDelete(e) {
     let msg = this.computeResponseMessage(e.detail);
-    this.dispatchEvent(new CustomEvent('delete-error', { 
+    this.dispatchEvent(new CustomEvent(this.errorEventName, { 
       bubbles: true, 
       composed: true,
       detail: {

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

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

package/components/item-restore/index.js

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

package/components/item-restore/src/DileCrudItemRestore.js

@@ -0,0 +1,49 @@
+import { css } from "lit";
+import { DileCrudItemDelete } from "../../item-delete/src/DileCrudItemDelete.js";
+
+const OPERATION_ITEM_MISSING_ERROR = 'Please provide the element id to restore';
+
+export class DileCrudItemRestore extends DileCrudItemDelete {
+  static styles = [
+    super.styles,
+    css`
+      :host {
+          --dile-confirm-accept-button-color: var(--neutral-icon-color, #337aad);
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      urlSufix: { type: String }
+    };
+  }
+
+  constructor() {
+    super();
+    this.successEventName = 'restore-success';
+    this.errorEventName = 'restore-error';
+    this.method = 'post';
+    this.urlSufix = 'restore';
+  }
+
+  computeUrl(endpoint, relatedId) {
+    return `${endpoint}/${relatedId}/${this.urlSufix}`
+  }
+
+  restore(itemId) {
+    this.delete(itemId);
+  }
+
+  cancelLabelComputed(label, translations) {
+    return label ? label : translations?.cancel_label ? translations.cancel_label : 'Cancel';
+  }
+
+  acceptLabelComputed(label, translations) {
+    return label ? label : translations?.accept_label ? translations.accept_label : 'Accept';
+  }
+
+  confirmMessageComputed(message, translations) {
+    return message ? message : translations?.restore_confirm_message ? translations.restore_confirm_message : 'Are you sure?';
+  }
+}

package/components/list/src/DileCrudList.js

@@ -201,10 +201,12 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
                 <dile-crud-list-item 
                     itemId="${this.computeItemId(element)}"
                     .actionIds="${this.actionIds}"
-                    ?disableEdit="${this.config?.customization?.disableEdit}"
-                    ?disableDelete="${this.config?.customization?.disableDelete}"
+                    ?disableEdit=${this.config?.customization?.disableEdit}
+                    ?disableDelete=${this.config?.customization?.disableDelete}
+                    ?disableRestore=${this.config?.customization?.disableRestore}
                     ?hideCheckboxSelection="${this.config?.customization?.hideCheckboxSelection}"
                     @item-checkbox-changed=${this.onItemsCheckboxChanged}
+                    ?isDeleted=${element.deleted_at}
                 >
                     ${this.config.templates.item(element)}
                 </dile-crud-list-item>

package/components/list/src/DileCrudListItem.js

@@ -1,7 +1,7 @@
 import { LitElement, html, css } from 'lit';
 import '@dile/ui/components/checkbox/checkbox';
 import '@dile/ui/components/icon/icon';
-import { deleteIcon, editIcon } from '@dile/icons';
+import { deleteIcon, editIcon, restoreFromTrashIcon } from '@dile/icons';
 
 export class DileCrudListItem extends LitElement {
   static styles = [
@@ -57,6 +57,7 @@ export class DileCrudListItem extends LitElement {
       disableDelete: { type: Boolean },
       /** Hide checkboxes on the item list */
       hideCheckboxSelection: { type: Boolean },
+      isDeleted: { type: Boolean },
     };
   }
 
@@ -65,6 +66,7 @@ export class DileCrudListItem extends LitElement {
     this.actionIds = [];
     this.disableEdit = false;
     this.disableDelete = false;
+    this.disableRestore = false;
     this.hideCheckboxSelection = false;
 
   }
@@ -79,22 +81,39 @@ export class DileCrudListItem extends LitElement {
                 <slot></slot>
             </main>
             <div class="actions">
-                ${this.disableEdit
+                ${this.isDeleted
+                  ? this.restoreActionsTemplate
+                  : this.regularActionsTemplate
+                }
+            </div>
+        </section>
+    `;
+  }
+
+  get regularActionsTemplate() {
+    return html`
+      ${this.disableEdit
         ? ''
         : html`<dile-icon .icon="${editIcon}" @click=${this.editClick}></dile-icon>`
       }
-                ${this.disableDelete
+      ${this.disableDelete
         ? ''
         : html`<dile-icon class="delete" .icon="${deleteIcon}" @click=${this.deleteClick}></dile-icon>`
       }
-            </div>
-        </section>
-    `;
+    `
+  }
+
+  get restoreActionsTemplate() {
+    return html`
+      ${this.disableRestore
+        ? ''
+        : html`<dile-icon .icon="${restoreFromTrashIcon}" @click=${this.restoreClick}></dile-icon>`
+      }
+    `
   }
 
   includes(actionIds, itemId) {
     const stringIds = actionIds.map(String);
-    // console.log(stringIds, String(itemId));
     return stringIds.includes(String(itemId));
   }
 
@@ -128,4 +147,14 @@ export class DileCrudListItem extends LitElement {
       }
     }));
   }
+
+  restoreClick() {
+    this.dispatchEvent(new CustomEvent('crud-item-restore', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        itemId: this.itemId
+      }
+    }));
+  }
 }

package/lib/defaultConfig.js

@@ -24,6 +24,7 @@ export const defaultConfig = {
     disableInsert: false,
     disableEdit: false,
     disableDelete: false,
+    disableRestore: false,
     disablePagination: true,
     disableSort: true,
     disableFilter: true,

package/lib/i18n/en.js

@@ -32,6 +32,7 @@ export const translations = {
   run_action_label: "Run action",
   loading: "Loading...",
   delete_confirm_message: "Are you sure you want to delete this item?",
+  restore_confirm_message: "Are you sure you want to restore this item?",
   delete_confirm_message_plural: "Are you sure you want to delete those items?",
   items_total: "items in total",
   showing_page_size: (pageSize) => `Showing ${pageSize} items per page.`,

package/lib/i18n/es.js

@@ -32,6 +32,7 @@ export const translations = {
   run_action_label: "Realizar acción",
   loading: "Cargando...",
   delete_confirm_message: "¿Estás seguro que quieres borrar este ítem?",
+  restore_confirm_message: "¿Estás seguro que quieres restaurar este ítem?",
   delete_confirm_message_plural: "¿Seguro que quieres borrar estos elementos?",
   items_total: "Elementos en total",
   showing_page_size: (pageSize) => `Mostrando ${pageSize} elementos por página.`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
   "scripts": {
@@ -24,12 +24,12 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
-    "@dile/ui": "^2.8.0",
+    "@dile/ui": "^2.8.1",
     "axios": "^1.8.4",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "23cccd2c6346a026fe4dae9374520e604c620085"
+  "gitHead": "eae8a7897e7baf3b5b3a9f4ab8a9f94e85e94ec5"
 }