@dile/crud 0.0.68 → 0.0.70

package/components/ajax/src/DileAjax.js

@@ -79,8 +79,10 @@ export class DileAjax extends DileAxios(DileI18nMixin(LitElement)) {
       const status = res.status;
       switch (status) {
         case 422: 
+          this.dispatchError(res.data.message || this.translations.http_422, res.data, this.getValidationErrors(res.data));
+          break;
         case 400: 
-          this.dispatchError(res.data.message, res.data, this.getValidationErrors(res.data));
+          this.dispatchError(res.data.message || this.translations.http_400, res.data, this.getValidationErrors(res.data));
           break;
         case 404:
           if(res.data.message) {
@@ -127,6 +129,8 @@ export class DileAjax extends DileAxios(DileI18nMixin(LitElement)) {
 
   dispatchResponse(response) {
     this.dispatchEvent(new CustomEvent('ajax-response', {
+      bubbles: true,
+      composed: true,
       detail: {
         response
       }

package/components/relation-checker/index.js

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

package/components/relation-checker/relation-checker-item.js

@@ -0,0 +1,3 @@
+import { DileRelationCheckerItem } from './src/DileRelationCheckerItem.js';
+
+customElements.define('dile-relation-checker-item', DileRelationCheckerItem);

package/components/relation-checker/relation-checker.js

@@ -0,0 +1,3 @@
+import { DileRelationChecker } from './src/DileRelationChecker.js';
+
+customElements.define('dile-relation-checker', DileRelationChecker);

package/components/relation-checker/src/DileRelationChecker.js

@@ -0,0 +1,185 @@
+import { LitElement, html, css } from 'lit';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import '@dile/ui/components/input/input-search.js';
+import '../relation-checker-item.js';
+import '../../ajax/ajax.js';
+
+export class DileRelationChecker extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+      dile-input-search {
+        margin-bottom: 1rem;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      /**
+       * Endpoint to receive the list of items that can be checked, with their status
+       * Receives all items, indicating which ones are checked
+       * { label, id, checked } 
+      */
+      endpointGet: { type: String },
+      
+      /**
+       * Route to toggle the checked/unchecked status of an item
+       * It will send an objetc { id, checked }
+      */
+      endpointCheck: { type: String},
+
+      /**
+       * Array of items received for potential relationships
+       */
+      items: { type: Array },
+
+      /**
+       * Title label for the box
+       */
+      label: { type: String },
+
+      /**
+       * Keyword for the filter
+       */
+      keyword: { type: String },
+
+      /**
+       * Function to get the items for the relations
+       */
+      getRelationItems: { type: Object },
+
+      /**
+       * Tooltip compute function 
+       */
+      computeTooltip: { type: Object },
+    };
+  }
+
+  constructor() {
+    super();
+    this.items = [];
+    this.getRelationItems = (response) => response.data;
+    this.computeTooltip = (item) => null;
+  }
+
+  render() {
+    return html`
+      ${this.ajaxTemplate}
+      <h2>${this.label}</h2>
+      <dile-input-search
+        @dile-input-search=${this.searchHandler}
+        @dile-input-search-cleared=${this.clearKeywordHandler}
+      ></dile-input-search>
+      ${this.computedItems(this.items, this.keyword).map( item => html`
+        <dile-relation-checker-item 
+          .item=${item} 
+          @relation-item-changed="${this.relationItemChanged}"
+          tooltip=${ifDefined(this.computeTooltip(item))}
+        ></dile-relation-checker-item>
+      `)}
+    `;
+  }
+
+  firstUpdated() {
+    this.ajaxsave = this.shadowRoot.getElementById('ajaxsave');
+    this.ajaxget = this.shadowRoot.getElementById('ajaxget');
+    this.refresh();
+  }
+
+  get ajaxTemplate() {
+    return html`
+      <dile-ajax
+          id="ajaxget"
+          method="get"
+          url="${this.endpointGet}"
+          @ajax-success="${this.doSuccessGet}"
+          @ajax-error="${this.doErrorGet}"
+      ></dile-ajax>
+      <dile-ajax
+          id="ajaxsave"
+          method="post"
+          url="${this.endpointCheck}"
+          @ajax-success="${this.doSuccessSave}"
+          @ajax-error="${this.doErrorSave}"
+      ></dile-ajax>
+    `
+  }
+
+  relationItemChanged(e) {
+    this.save(e.detail.item.id, e.detail.checked);
+  }
+
+  save(name, checked) {
+    this.ajaxsave.data = {
+      id: name,
+      checked: checked,
+    };
+    this.ajaxsave.generateRequest();
+  }
+
+  doSuccessGet(e) {
+    this.items = this.getRelationItems(e.detail);
+    this.dispatchEvent(new CustomEvent('relation-data-recived', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        items: this.items
+      }
+    }));
+  }
+
+  doErrorGet() {
+    this.customDispatch('relation-error-get');
+  }
+
+  doSuccessSave() {
+    this.customDispatch('relation-success-save');
+    this.refresh();
+  }
+
+  refresh() {
+    this.updateComplete.then(() => this.ajaxget.generateRequest());
+  }
+
+  doErrorSave() {
+    this.customDispatch('relation-error-save');
+  }
+
+  customDispatch(eventName) {
+    this.dispatchEvent(new CustomEvent(eventName, {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  doCheckItem(ele) {
+    this.items = this.items.map(item => {
+      if(item.id == ele.id) {
+        return {
+          ...item,
+          checked: true
+        } 
+      }
+      return item;
+    })
+    this.save(ele.id, true);
+  }
+
+  searchHandler(e) {
+    this.keyword = e.detail.keyword;
+  }
+
+  clearKeywordHandler() {
+    this.keyword = undefined;
+  }
+
+  computedItems(items, keyword) {
+    if(!keyword) {
+      return items;
+    }
+    return items.filter( item => item.label.toLowerCase().indexOf(keyword.toLowerCase()) != -1);
+  }
+}

package/components/relation-checker/src/DileRelationCheckerItem.js

@@ -0,0 +1,69 @@
+import { LitElement, html, css } from 'lit';
+import '@dile/ui/components/checkbox/checkbox.js';
+import '@dile/ui/components/tooltip/chip-tooltip';
+
+export class DileRelationCheckerItem extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        --dile-checkbox-size: 24px;
+      }
+      div.item {
+        display: flex;
+        align-items: center;
+        margin: 0 0 0.6rem;
+        padding-bottom: 0.1rem;
+        border-bottom: 1px solid #ddd;
+      }
+      div.grow {
+        flex-grow: 1;
+      }
+      dile-chip-tooltip {
+        margin-right: 0.5rem;
+      }
+      .onlyicon {
+        --dile-chip-tooltip-padding: 0.15rem;
+        --dile-chip-tooltip-icon-size: 18px;
+      }
+    `
+  ];
+  
+  static get properties() {
+    return {
+      item: { type: Object },
+      tooltip: { type: String }, 
+    };
+  }
+
+  render() {
+    return html`
+      <div class="item">
+        <div class="grow">
+          <dile-checkbox 
+            name="${this.item.id}"
+            @dile-checkbox-changed=${this.checkboxChanged}
+            ?checked=${this.item.checked}
+          >${this.item.label}</dile-checkbox>
+        </div>
+        ${this.tooltip
+          ? html`<dile-chip-tooltip class="onlyicon" message="${this.tooltip}" position="left"></dile-chip-tooltip>`
+          : ''
+        }
+      </div>    
+    `;
+  }
+
+  checkboxChanged(e) {
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('relation-item-changed', { 
+      bubbles: true,
+      composed: true,
+      detail: { 
+        item: this.item,
+        checked: e.detail.checked
+      }
+    }));
+  }
+
+}

package/lib/i18n/en.js

@@ -1,6 +1,8 @@
 export const translations = {
   http_unhandled_success: "Unhandled success server response",
   http_404: "Not found error",
+  http_400: "Bad Request",
+  http_422: "Unprocessable Entity",
   http_401: "Unauthorized",
   http_405: "Method Not Allowed",
   http_413: "Content Too Large",

package/lib/i18n/es.js

@@ -1,6 +1,8 @@
 export const translations = {
   http_unhandled_success: "Respuesta de éxito no procesada",
   http_404: "Recurso inexistente",
+  http_400: "Solicitud incorrecta",
+  http_422: "Validación de la solicitud incorrecta",
   http_401: "No autorizado",
   http_405: "Método HTTP no permitido",
   http_413: "Contenido enviado al servidor demasiado largo",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "0.0.68",
+  "version": "0.0.70",
   "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.polydile.com/",
   "dependencies": {
-    "@dile/ui": "^2.1.37",
+    "@dile/ui": "^2.1.38",
     "axios": "^1.7.2",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "98d572545dae6e89cda4f2240bc0e5caface20e0"
+  "gitHead": "89e5a0ffc7b9c39d53acd2e4552b05d54de23604"
 }