vue-laravel-crud 1.8.3 → 1.8.5

package/dist/vue-laravel-crud.esm.js

@@ -12311,7 +12311,7 @@ var ItemCard = __component__$1.exports;
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = "tr td[data-v-6e210e48]:last-child,\ntr td[data-v-6e210e48]:first-child {\n  width: 1%;\n  white-space: nowrap; }\n\n.crud-pagination[data-v-6e210e48] {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: center;\n  margin-top: 1rem; }\n\n.crud-header[data-v-6e210e48] {\n  display: flex;\n  justify-content: space-between;\n  max-height: 3rem; }\n  .crud-header[data-v-6e210e48] .crud-title[data-v-6e210e48] {\n    margin: 0; }\n  .crud-header[data-v-6e210e48] .crud-search[data-v-6e210e48] {\n    max-width: 15rem; }\n    .crud-header[data-v-6e210e48] .crud-search[data-v-6e210e48] .btn[data-v-6e210e48] {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n      border-top-right-radius: 0.375rem;\n      border-bottom-right-radius: 0.375rem; }\n      .crud-header[data-v-6e210e48] .crud-search[data-v-6e210e48] .btn[data-v-6e210e48].open[data-v-6e210e48] {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0; }\n  .crud-header[data-v-6e210e48] .table-options[data-v-6e210e48] {\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n\n.custom-control[data-v-6e210e48] {\n  position: relative; }\n\n@media (min-width: 992px) {\n  .table[data-v-6e210e48] {\n    table-layout: auto; }\n    .table[data-v-6e210e48] tbody[data-v-6e210e48] td[data-v-6e210e48] {\n      overflow: scroll;\n      -ms-overflow-style: none;\n      /* IE and Edge */\n      scrollbar-width: none;\n      /* Firefox */ }\n    .table[data-v-6e210e48] tbody[data-v-6e210e48] td[data-v-6e210e48]::-webkit-scrollbar {\n      display: none; } }\n\n.kanban-board[data-v-6e210e48] {\n  display: flex;\n  gap: 1rem;\n  overflow-x: auto;\n  padding: 1rem; }\n\n.kanban-column[data-v-6e210e48] {\n  background: #f4f5f7;\n  border-radius: 8px;\n  width: 300px;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }\n\n.kanban-column-header[data-v-6e210e48] {\n  font-weight: bold;\n  padding: 0.5rem;\n  background: #dfe1e6;\n  border-radius: 8px 8px 0 0;\n  text-align: center; }\n\n.kanban-column-body[data-v-6e210e48] {\n  padding: 0.5rem;\n  min-height: 100px;\n  background: #ffffff;\n  border-radius: 0 0 8px 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem; }\n\n.kanban-card[data-v-6e210e48] {\n  background: #ffffff;\n  border-radius: 4px;\n  padding: 1rem;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n  cursor: grab; }\n";
+var css = "tr td[data-v-77ea2533]:last-child,\ntr td[data-v-77ea2533]:first-child {\n  width: 1%;\n  white-space: nowrap; }\n\n.crud-pagination[data-v-77ea2533] {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: center;\n  margin-top: 1rem; }\n\n.crud-header[data-v-77ea2533] {\n  display: flex;\n  justify-content: space-between;\n  max-height: 3rem; }\n  .crud-header[data-v-77ea2533] .crud-title[data-v-77ea2533] {\n    margin: 0; }\n  .crud-header[data-v-77ea2533] .crud-search[data-v-77ea2533] {\n    max-width: 15rem; }\n    .crud-header[data-v-77ea2533] .crud-search[data-v-77ea2533] .btn[data-v-77ea2533] {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n      border-top-right-radius: 0.375rem;\n      border-bottom-right-radius: 0.375rem; }\n      .crud-header[data-v-77ea2533] .crud-search[data-v-77ea2533] .btn[data-v-77ea2533].open[data-v-77ea2533] {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0; }\n  .crud-header[data-v-77ea2533] .table-options[data-v-77ea2533] {\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n\n.custom-control[data-v-77ea2533] {\n  position: relative; }\n\n@media (min-width: 992px) {\n  .table[data-v-77ea2533] {\n    table-layout: auto; }\n    .table[data-v-77ea2533] tbody[data-v-77ea2533] td[data-v-77ea2533] {\n      overflow: scroll;\n      -ms-overflow-style: none;\n      /* IE and Edge */\n      scrollbar-width: none;\n      /* Firefox */ }\n    .table[data-v-77ea2533] tbody[data-v-77ea2533] td[data-v-77ea2533]::-webkit-scrollbar {\n      display: none; } }\n\n.kanban-board[data-v-77ea2533] {\n  display: flex;\n  gap: 1rem;\n  overflow-x: auto;\n  padding: 1rem; }\n\n.kanban-column[data-v-77ea2533] {\n  background: #f4f5f7;\n  border-radius: 8px;\n  width: 300px;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }\n\n.kanban-column-header[data-v-77ea2533] {\n  font-weight: bold;\n  padding: 0.5rem;\n  background: #dfe1e6;\n  border-radius: 8px 8px 0 0;\n  text-align: center; }\n\n.kanban-column-body[data-v-77ea2533] {\n  padding: 0.5rem;\n  min-height: 100px;\n  background: #ffffff;\n  border-radius: 0 0 8px 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem; }\n\n.kanban-card[data-v-77ea2533] {\n  background: #ffffff;\n  border-radius: 4px;\n  padding: 1rem;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n  cursor: grab; }\n";
 n(css, {});
 
 const _sfc_main = {
@@ -12629,6 +12629,10 @@ const _sfc_main = {
       type: String,
       default: ""
     },
+    groupedSplit: {
+      type: Boolean,
+      default: false
+    },
     draggableGroup: {
       type: String,
       default: "people"
@@ -12751,6 +12755,12 @@ const _sfc_main = {
         }
       };
     },
+    isSplitGroups() {
+      if (this.groupedSplit) {
+        return true;
+      }
+      return this.displayMode == this.displayModes.MODE_KANBAN;
+    },
     itemsList() {
       const items = this.ajax ? this.items : this.items.slice(this.paginationIndexStart, this.paginationIndexEnd);
       if (this.masonrySort && !this.isMobile) {
@@ -13081,6 +13091,7 @@ const _sfc_main = {
       } else {
         this.model.deleteAll();
         result = await this.model.api().get(this.apiUrl + "/" + this.modelName, {
+          dataKey: 'data',
           params: {
             page: page,
             limit: this.pagination.perPage,
@@ -13127,7 +13138,7 @@ const _sfc_main = {
         let items = response.data.data;
         if (this.grouped) {
           //this.items = items;
-          this.groupItems(items, concat);
+          this.groupItems(items, concat, this.isSplitGroups);
         } else {
           if (concat) {
             this.items = this.items.concat(items);
@@ -13146,36 +13157,44 @@ const _sfc_main = {
         this.fetchError = true;
       });
     },
-    groupItems(items, concat = false) {
-      let itemswithgroup = [];
-      let lastcomparevalue = null;
-      let compareattr = this.groupedAttribute;
-      let groupLabelPre = this.groupedLabelPre;
-      let groupLabelAfter = this.groupedLabelAfter;
-      items.forEach((item, key) => {
-        if (Array.isArray(item)) {
-          itemswithgroup.push({
-            label: groupLabelPre + key + groupLabelAfter,
-            group: true
-          });
-          item.forEach(sitem => {
-            itemswithgroup.push(sitem);
+    groupItems(items, concat = false, splitGroups = false) {
+      const groupedAttribute = this.groupedAttribute;
+      const groupLabelPre = this.groupedLabelPre || '';
+      const groupLabelAfter = this.groupedLabelAfter || '';
+      const itemsWithGroup = [];
+
+      // Usamos un objeto para agrupar los elementos por groupedAttribute
+      const groupedMap = items.reduce((acc, item) => {
+        const groupKey = item[groupedAttribute] || 'undefined';
+        if (!acc[groupKey]) {
+          acc[groupKey] = [];
+        }
+        acc[groupKey].push(item);
+        return acc;
+      }, {});
+      if (splitGroups) {
+        // Dividimos los grupos en arrays separados
+        this.items = Object.entries(groupedMap).map(([groupKey, groupItems]) => ({
+          groupKey,
+          groupLabel: groupLabelPre + groupKey + groupLabelAfter,
+          items: groupItems
+        }));
+      } else {
+        // Creamos la estructura agrupada en un solo array
+        for (const [groupKey, groupItems] of Object.entries(groupedMap)) {
+          itemsWithGroup.push({
+            crudgrouplabel: groupLabelPre + groupKey + groupLabelAfter,
+            crudgroup: true
           });
+          itemsWithGroup.push(...groupItems);
+        }
+
+        // Decidimos si concatenar o reemplazar los items existentes
+        if (concat) {
+          this.items = this.items.concat(itemsWithGroup);
         } else {
-          if (lastcomparevalue != item[compareattr]) {
-            lastcomparevalue = item[compareattr];
-            itemswithgroup.push({
-              crudgrouplabel: groupLabelPre + lastcomparevalue + groupLabelAfter,
-              crudgroup: true
-            });
-          }
-          itemswithgroup.push(item);
+          this.items = itemsWithGroup;
         }
-      });
-      if (concat) {
-        this.items = this.items.concat(itemswithgroup);
-      } else {
-        this.items = itemswithgroup;
       }
     },
     removeItem(id, index) {
@@ -14460,29 +14479,26 @@ var _sfc_render = function render() {
         700: '15px'
       }
     }
-  }, _vm._l(_vm.itemsList, function (item, index) {
+  }, _vm._l(_vm.itemsList, function (item, itemIndex) {
     return _c('div', {
-      key: index,
+      key: itemIndex,
       staticClass: "item"
     }, [_vm._t("card", function () {
-      return _vm._l(_vm.itemsList, function (item, index) {
-        return _c('ItemCard', {
-          key: index,
-          attrs: {
-            "item": item,
-            "columns": _vm.columns,
-            "index": index,
-            "cardClass": _vm.cardClass,
-            "cardHideFooter": _vm.cardHideFooter,
-            "itemValue": _vm.itemValue,
-            "getStateValue": _vm.getStateValue,
-            "getArrayValue": _vm.getArrayValue,
-            "showItem": _vm.showItem,
-            "updateItem": _vm.updateItem,
-            "removeItem": _vm.removeItem
-          }
-        });
-      });
+      return [_c('ItemCard', {
+        attrs: {
+          "item": item,
+          "columns": _vm.columns,
+          "index": itemIndex,
+          "cardClass": _vm.cardClass,
+          "cardHideFooter": _vm.cardHideFooter,
+          "itemValue": _vm.itemValue,
+          "getStateValue": _vm.getStateValue,
+          "getArrayValue": _vm.getArrayValue,
+          "showItem": _vm.showItem,
+          "updateItem": _vm.updateItem,
+          "removeItem": _vm.removeItem
+        }
+      })];
     }, {
       "item": item
     })], 2);
@@ -14494,7 +14510,7 @@ var _sfc_render = function render() {
       staticClass: "kanban-column"
     }, [_c('div', {
       staticClass: "kanban-column-header"
-    }, [_vm._v(" " + _vm._s(colIndex) + " ")]), _vm._v(" " + _vm._s(JSON.stringify(column)) + " "), _c('draggable', {
+    }, [_vm._v(" " + _vm._s(column.groupLabel) + " ")]), _vm._v(" " + _vm._s(JSON.stringify(column)) + " "), _c('draggable', {
       staticClass: "kanban-column-body",
       attrs: {
         "group": "kanban"
@@ -14509,29 +14525,27 @@ var _sfc_render = function render() {
         },
         expression: "column.items"
       }
-    }, _vm._l(_vm.itemsList, function (item, index) {
+    }, _vm._l(column.items, function (item, itemIndex) {
       return _c('div', {
-        key: index,
+        key: itemIndex,
         staticClass: "item"
       }, [_vm._t("card", function () {
-        return _vm._l(_vm.itemsList, function (item, index) {
-          return _c('ItemCard', {
-            key: index,
-            attrs: {
-              "item": item,
-              "columns": _vm.columns,
-              "index": index,
-              "cardClass": _vm.cardClass,
-              "cardHideFooter": _vm.cardHideFooter,
-              "itemValue": _vm.itemValue,
-              "getStateValue": _vm.getStateValue,
-              "getArrayValue": _vm.getArrayValue,
-              "showItem": _vm.showItem,
-              "updateItem": _vm.updateItem,
-              "removeItem": _vm.removeItem
-            }
-          });
-        });
+        return [_c('ItemCard', {
+          key: itemIndex,
+          attrs: {
+            "item": item,
+            "columns": _vm.columns,
+            "index": _vm.index,
+            "cardClass": _vm.cardClass,
+            "cardHideFooter": _vm.cardHideFooter,
+            "itemValue": _vm.itemValue,
+            "getStateValue": _vm.getStateValue,
+            "getArrayValue": _vm.getArrayValue,
+            "showItem": _vm.showItem,
+            "updateItem": _vm.updateItem,
+            "removeItem": _vm.removeItem
+          }
+        })];
       }, {
         "item": item
       })], 2);
@@ -14817,7 +14831,7 @@ var _sfc_render = function render() {
   }) : _vm._e()], 2) : _vm._e()], 1);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /*#__PURE__*/normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "6e210e48", null, null);
+var __component__ = /*#__PURE__*/normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "77ea2533", null, null);
 var component = __component__.exports;
 
 // Import vue component