@oniti/quasar-ui-vlank-collection-crud 3.7.42 → 3.7.44

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 /*!
- * @oniti/quasar-ui-vlank-collection-crud v3.5.2
- * (c) 2022 Oniti
+ * @oniti/quasar-ui-vlank-collection-crud v3.7.42
+ * (c) 2024 Oniti
  * Released under the MIT License.
  */
 
@@ -77,7 +77,8 @@
     }, props.props.modalDeleteOptions.dialog, {
       "transition-show": __props.isMobile ? 'slide-up' : 'fade',
       "transition-hide": __props.isMobile ? 'slide-down' : 'fade',
-      position: __props.isMobile ? 'bottom' : 'standard',
+      "transition-duration": "150",
+      position: "standard",
       "full-width": __props.isMobile
     }), {
       default: vue.withCtx(function () { return [
@@ -153,7 +154,7 @@
         }, 16 /* FULL_PROPS */)
       ]; }),
       _: 3 /* FORWARDED */
-    }, 16 /* FULL_PROPS */, ["modelValue", "transition-show", "transition-hide", "position", "full-width"]))
+    }, 16 /* FULL_PROPS */, ["modelValue", "transition-show", "transition-hide", "full-width"]))
   }
   }
 
@@ -165,7 +166,6 @@
   var _hoisted_2$3 = /*#__PURE__*/vue.createTextVNode("Modification");
 
 
-
   var script$4 = {
     __name: 'VlankEditModal',
     props: {
@@ -174,12 +174,15 @@
     modalEditOptions: Object,
     collection: String,
     extraRequestParams: Object,
+    useSendFiles: Boolean,
     storeKey: String,
     isMobile: Boolean,
+    closeModalAfterValidation: Boolean,
+    propsLibelleTitle: String,
   },
     emits: ['close'],
-    setup: function setup(__props, ref) {
-  var $emit = ref.emit;
+    setup: function setup(__props, ref$1) {
+  var $emit = ref$1.emit;
 
 
   var props = __props;
@@ -210,31 +213,75 @@
 
   function onConfirmeEditAdd() {
     var action = props.localDetail.uuid ? "update" : "create";
+    var message_notification = props.localDetail.uuid
+      ? "Modification effectuée"
+      : "Création effectuée";
     var extraParams =
       action === "update"
         ? Object.assign({}, props.extraRequestParams.update)
         : Object.assign({}, props.extraRequestParams.store);
-    $collectionCrud
-      .collectionAction({
-        collectionName: props.collection,
-        action: action,
-        params: Object.assign({}, props.localDetail, extraParams),
-        list_field: props.storeKey
-      })
-      .then(function (obj) {
-        close(obj, action);
-      });
+
+    if (props.useSendFiles) {
+      $collectionCrud
+        .collectionAction({
+          collectionName: props.collection,
+          action: "send-file",
+          params: Object.assign({}, props.localDetail, extraParams),
+          list_field: props.storeKey,
+          axios_options: {
+            oniti_success_notification_message: message_notification,
+          },
+        })
+        .then(function (obj) {
+          if (props.closeModalAfterValidation) {
+            close(obj, action);
+          }
+        });
+    } else {
+      $collectionCrud
+        .collectionAction({
+          collectionName: props.collection,
+          action: action,
+          params: Object.assign({}, props.localDetail, extraParams),
+          list_field: props.storeKey
+        })
+        .then(function (obj) {
+          if (props.closeModalAfterValidation) {
+            close(obj, action);
+          }
+        });
+      }
   }
 
   function close(obj, action) {
     $emit("close", { obj: obj, action: action });
   }
 
+  var modalContent = vue.ref(null);
+  var modalContentDetail = vue.ref(null);
+
+  var observer = new ResizeObserver(function (entries) {
+    entries.forEach(function (entry) {
+      scrollAreaStyle.value.height = props.isMobile ? '100vh' : entry.contentRect.height < 800 ? entry.contentRect.height + 'px' : '80vh';
+    });
+  });
+
+  var scrollAreaStyle = vue.ref({
+    height: props.isMobile ? '100vh' : modalContent.value ? modalContent.value.clientHeight < 800 ? modalContent.value.clientHeight + 'px' : '80vh' : '80vh'
+  });
+
+  vue.watch(modalContent, function (value) {
+    scrollAreaStyle.value.height = props.isMobile ? '100vh' : value ? value.clientHeight < 800 ? value.clientHeight + 'px' : '80vh' : '80vh';
+    if(modalContent.value){
+      observer.observe(modalContent.value);
+    }
+  }, { immediate: true, deep: true });
+
   return function (_ctx, _cache) {
     var _directive_close_popup = vue.resolveDirective("close-popup");
 
     return (vue.openBlock(), vue.createBlock(vue.unref(quasar.QDialog), vue.mergeProps({
-      class: {'mobile-modal': __props.isMobile},
+      class: { 'mobile-modal': __props.isMobile },
       modelValue: vue.unref(editModalLocal),
       "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) { return (vue.isRef(editModalLocal) ? (editModalLocal).value = $event : null); })
     }, props.modalEditOptions.dialog, {
@@ -247,7 +294,7 @@
         vue.createVNode(vue.unref(quasar.QCard), vue.mergeProps({ style: {"width":"700px","max-width":"80vw"} }, props.modalEditOptions.card), {
           default: vue.withCtx(function () { return [
             vue.createVNode(vue.unref(quasar.QToolbar), vue.mergeProps({
-              class: "bg-primary",
+              class: __props.isMobile ?'mobile-toolbar bg-primary' : 'bg-primary',
               style: {"color":"#fff"}
             }, props.modalEditOptions.toolbar), {
               default: vue.withCtx(function () { return [
@@ -282,14 +329,17 @@
                         _: 1 /* STABLE */
                       }))
                     : (
-                props.propsLibelleTitle && props.localDetail[props.propsLibelleTitle]
-              )
-                      ? (vue.openBlock(), vue.createBlock(vue.unref(quasar.QToolbarTitle), { key: 3 }, {
+              props.propsLibelleTitle && props.localDetail[props.propsLibelleTitle]
+            )
+                      ? (vue.openBlock(), vue.createBlock(vue.unref(quasar.QToolbarTitle), {
+                          key: 3,
+                          class: vue.normalizeClass({ 'toolbar-title': __props.isMobile })
+                        }, {
                           default: vue.withCtx(function () { return [
-                            vue.createTextVNode(" Modification : " + vue.toDisplayString(props.localDetail[props.propsLibelleTitle]), 1 /* TEXT */)
+                            vue.createTextVNode(vue.toDisplayString(!__props.isMobile ? 'Modification' : null) + " " + vue.toDisplayString(props.localDetail[props.propsLibelleTitle]), 1 /* TEXT */)
                           ]; }),
                           _: 1 /* STABLE */
-                        }))
+                        }, 8 /* PROPS */, ["class"]))
                       : (vue.openBlock(), vue.createBlock(vue.unref(quasar.QToolbarTitle), { key: 4 }, {
                           default: vue.withCtx(function () { return [
                             _hoisted_2$3
@@ -325,14 +375,30 @@
                       ])
               ]; }),
               _: 3 /* FORWARDED */
-            }, 16 /* FULL_PROPS */),
-            vue.renderSlot(_ctx.$slots, "create-edit-modal-content", {
-              data: props.localDetail
-            }),
+            }, 16 /* FULL_PROPS */, ["class"]),
+            vue.createVNode(vue.unref(quasar.QScrollArea), {
+              style: vue.normalizeStyle(scrollAreaStyle.value)
+            }, {
+              default: vue.withCtx(function () { return [
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass({'mobile-content': __props.isMobile }),
+                  ref_key: "modalContent",
+                  ref: modalContent
+                }, [
+                  vue.renderSlot(_ctx.$slots, "create-edit-modal-content", {
+                    data: props.localDetail,
+                    ref_key: "modalContentDetail",
+                    ref: modalContentDetail
+                  })
+                ], 2 /* CLASS */)
+              ]; }),
+              _: 3 /* FORWARDED */
+            }, 8 /* PROPS */, ["style"]),
             (!__props.isMobile)
               ? (vue.openBlock(), vue.createBlock(vue.unref(quasar.QCardActions), {
                   key: 0,
-                  align: "right"
+                  align: "right",
+                  class: "scroll"
                 }, {
                   default: vue.withCtx(function () { return [
                     vue.renderSlot(_ctx.$slots, "create-edit-modal-custom-actions", {
@@ -400,7 +466,7 @@
     }
   }
 
-  var css_248z$3 = ".mobile-modal .q-dialog__inner {\n  padding: 0px !important;\n}";
+  var css_248z$3 = ".mobile-modal .q-dialog__inner {\n  padding: 0px !important;\n}\n.mobile-modal .toolbar-title {\n  font-size: 0.9rem;\n  max-width: 19rem;\n}\n\n.mobile-toolbar {\n  position: fixed;\n  top: 0;\n  z-index: 999;\n}\n\n.mobile-content {\n  padding-top: 4rem;\n}";
   styleInject(css_248z$3);
 
   script$4.__file = "src/components/VlankEditModal.vue";
@@ -410,9 +476,11 @@
     props: {
     data: Object,
     colOptions: Object,
-    props: Object
+    props: Object,
+    rowIndex: Number,
+    cellIndex: Number,
   },
-    emits: ['update'],
+    emits: ['update', 'onEditCellHandler', 'onClickTabHandler'],
     setup: function setup(__props, ref$1) {
   var $emit = ref$1.emit;
 
@@ -428,9 +496,7 @@
 
   var getRawValue = vue.computed({
     get: function () {
-      if (props.colOptions.format)
-        { return props.colOptions.format(localDetail.value[props.colOptions.name]); }
-      else { return localDetail.value[props.colOptions.name]; }
+      return localDetail.value[props.colOptions.name];
     },
     set: function (newValue) {
       localDetail.value[props.colOptions.name] = newValue;
@@ -463,13 +529,22 @@
         list_field: props.props.storeKey
       })
       .then(function (obj) {
-        $emit("update", { obj: obj, action: "update" });
+        $emit("update", { obj: obj, action: "update", callback: function () {
+          $emit("onClickTabHandler", props.rowIndex, props.cellIndex);
+        }});
       });
   }
 
-  return function (_ctx, _cache) {
-    var _component_q_input = vue.resolveComponent("q-input");
+  function onEditCellHandler(field, value) {
+    $emit("onEditCellHandler", field, value);
+  }
 
+  function onClickTabHandler(event) {
+    var newValue = event.target.value;
+    $emit("onClickTabHandler", props.rowIndex, props.cellIndex, newValue != localValue.value);
+  }
+
+  return function (_ctx, _cache) {
     return (vue.openBlock(), vue.createElementBlock("td", null, [
       (localDetail.value[props.colOptions.name] && props.colOptions.type === 'boolean')
         ? vue.renderSlot(_ctx.$slots, getScopedSlotName('boolean-check', props.colOptions.name), { key: 0 }, function () { return [
@@ -487,18 +562,21 @@
         modelValue: localValue.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) { return ((localValue).value = $event); }),
         "auto-save": "",
-        onSave: onSave
+        onSave: onSave,
+        onKeydown: vue.withKeys(vue.withModifiers(onClickTabHandler, ["prevent","stop"]), ["tab"])
       }, {
         default: vue.withCtx(function (scope) { return [
-          vue.createVNode(_component_q_input, {
+          vue.createVNode(vue.unref(quasar.QInput), vue.mergeProps(props.colOptions.inputOptions, {
+            autofocus: "",
+            "emit-value": "",
             modelValue: scope.value,
-            "onUpdate:modelValue": function ($event) { return ((scope.value) = $event); },
+            "onUpdate:modelValue": [function ($event) { return ((scope.value) = $event); }, function ($event) { return (onEditCellHandler(props.colOptions.field, scope.value)); }],
             label: props.colOptions.label,
             onKeyup: vue.withKeys(scope.set, ["enter"])
-          }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue", "label", "onKeyup"])
+          }), null, 16 /* FULL_PROPS */, ["modelValue", "onUpdate:modelValue", "label", "onKeyup"])
         ]; }),
         _: 1 /* STABLE */
-      }, 8 /* PROPS */, ["modelValue"])
+      }, 8 /* PROPS */, ["modelValue", "onKeydown"])
     ]))
   }
   }
@@ -515,6 +593,7 @@
       collection: null,
       showBtnDelete: false,
       showBtnEdit: false,
+      showSlideLeft: false,
       showInputSearch: true,
       showBtnCreate: false,
       lazy: false,
@@ -541,6 +620,7 @@
       table: {
         title: "Titre Non défini",
       },
+      useSendFiles: false,
       extraRequestParams: {
         index: {},
         show: {},
@@ -567,10 +647,12 @@
         props.modalEditOptions);
       props.modalEditOptions.showBtn = Object.assign({}, defaultOptions.modalEditOptions.showBtn,
         props.modalEditOptions.showBtn);
+      var extraRequestParamsTemp = {};
       Object.keys(defaultOptions.extraRequestParams).forEach(function (key) {
-        props.extraRequestParams[key] = Object.assign({}, defaultOptions.extraRequestParams[key],
+        extraRequestParamsTemp[key] = Object.assign({}, defaultOptions.extraRequestParams[key],
           props.extraRequestParams[key]);
       });
+      props.extraRequestParams = extraRequestParamsTemp;
       return props;
     });
 
@@ -676,7 +758,9 @@
         align: "left",
         sortable: true,
         type: "string",
+        classes:  props.value.getRowCellClass,
       };
+
       // Option de la table par défaut
       var defautOptionsTable = {
         loading: $collectionCrud.getFromCollection(
@@ -688,7 +772,8 @@
         "row-key": function (row) { return config.columns
             .filter(function (c) { return c.name !== undefined || c.field !== undefined; })
             .map(function (c) { return row[c.name ? c.name : c.field]; })
-            .join(); },
+            .join() +
+          row[$collectionCrud.getRouteParameterName(props.value.collection)]; },
         "rows-per-page-options": [20, 50, 100],
       };
 
@@ -784,7 +869,7 @@
     /**
      * Renvoie le nom de la route pour les liens de type A pour les édition en page
      */
-     var collectionCreateNamedRoute = vue.computed(function () {
+    var collectionCreateNamedRoute = vue.computed(function () {
       return props.value.collection + "-store";
     });
 
@@ -797,6 +882,10 @@
       return typeof options.to === "function";
     }
 
+    function getAdditionalClassActionBtns(row) {
+      return props.value.getRowCellClass ? ' '+props.value.getRowCellClass(row) : "";
+    }
+
     return {
       customFields: customFields,
       table: table,
@@ -805,6 +894,7 @@
       collectionEditNamedRoute: collectionEditNamedRoute,
       collectionCreateNamedRoute: collectionCreateNamedRoute,
       isTdClickable: isTdClickable,
+      getAdditionalClassActionBtns: getAdditionalClassActionBtns,
     };
   }
 
@@ -1075,6 +1165,7 @@
       var rowsPerPage = ref.rowsPerPage;
       var sortBy = ref.sortBy;
       var descending = ref.descending;
+
       var filter = options.filter;
       asyncProps.value = options;
 
@@ -1167,6 +1258,7 @@
             stringlifyAndCheck(newValue.index, extraRequestParamsIndexStringlify)
           ) {
             getList(true);
+            extraRequestParamsIndexStringlify.value = JSON.stringify(newValue.index);
           }
         }
       });
@@ -1193,13 +1285,30 @@
     }
   }
 
+  function useSelection(props)
+  {
+      var selectedData = vue.ref([]);
+      var selectionMode = vue.ref(props.value.table.selection ? props.value.table.selection : 'none');
+
+      vue.watch(selectedData,function(){
+          props.value.table.selected = selectedData.value;
+      });
+
+      return {
+          selectedData: selectedData,
+          selectionMode: selectionMode,
+      }
+  }
+
   var _hoisted_1$2 = { class: "col" };
-  var _hoisted_2$2 = ["props", "onClick"];
-  var _hoisted_3$2 = ["props", "onClick"];
-  var _hoisted_4$2 = { class: "top-right-content" };
-  var _hoisted_5$2 = { id: "search-slot" };
-  var _hoisted_6 = { id: "top-right-under-add" };
-  var _hoisted_7 = ["props"];
+  var _hoisted_2$2 = { key: 1 };
+  var _hoisted_3$2 = { key: 2 };
+  var _hoisted_4$2 = ["props", "onClick"];
+  var _hoisted_5$1 = ["props", "onClick"];
+  var _hoisted_6 = { class: "top-right-content" };
+  var _hoisted_7 = { id: "search-slot" };
+  var _hoisted_8 = { id: "top-right-under-add" };
+  var _hoisted_9 = ["props"];
 
 
   var script$2 = {
@@ -1210,7 +1319,12 @@
     propsLibelleTitle: String,
     showBtnDelete: Boolean,
     showBtnEdit: Boolean,
+    showSlideLeft: Boolean,
     showBtnCreate: Boolean,
+    showBtnCreateTooltip:{
+      type: Boolean,
+      default: false
+    },
     storeKey: {
       type: String,
       default: 'list'
@@ -1245,6 +1359,7 @@
       type: Object,
       default: vue.ref({})
     },
+    useSendFiles: Boolean,
     modalDeleteOptions: Object,
     modalEditOptions: Object,
     persistTableOptions: Object,
@@ -1254,11 +1369,22 @@
       type: Function,
       default: function (row, type) { return true; }
     },
+    closeModalAfterValidation: {
+      type: Boolean,
+      default: true
+    },
+    getRowCellClass: {
+      type: Function,
+      default: null
+    },
   },
     emits: [
     "detailChange",
     "modalOpenCreateUpdate",
-    "actionsCallback" ],
+    "actionsCallback",
+    "actionsSlideLeft",
+    "onEditCellHandler"
+  ],
     setup: function setup(__props, ref$1) {
   var $emit = ref$1.emit;
 
@@ -1272,8 +1398,20 @@
   var ccrudTable = vue.ref(null);
 
   var $q = quasar.useQuasar();
+
+  var mobileColumn = vue.computed(function () {
+    if ($attrs.table.columns.filter(function (column) { return column.displayMobile; }).length > 1) {
+      throw new Error("Merci de ne saisir qu'une seule colonne en displayMobile.");
+    }
+    return $attrs.table.columns.filter(function (column) { return column.displayMobile; })[0]
+  });
+
   var isMobile = vue.computed(function () {
-    return $q.screen.lt.md
+    if ($q.config.collectionCrudOptions && $q.config.collectionCrudOptions.maximalMobileScreenSize) {
+      return !!$q.screen.lt[$q.config.collectionCrudOptions.maximalMobileScreenSize]
+    } else {
+      return $q.screen.lt.md
+    }
   });
 
   var $collectionCrud = vue.inject('vlank-ccrud');
@@ -1307,18 +1445,19 @@
   var collectionEditNamedRoute = ref$4.collectionEditNamedRoute;
   var collectionCreateNamedRoute = ref$4.collectionCreateNamedRoute;
   var isTdClickable = ref$4.isTdClickable;
+  var getAdditionalClassActionBtns = ref$4.getAdditionalClassActionBtns;
 
   var ref$5 = usePagination(props);
   var pagination = ref$5.pagination;
 
   useSaveAndExportTable(props, pagination, filter);
 
-  function getlocalDetailValue(){
-    if($attrs.defaultValues instanceof Object){
+  function getlocalDetailValue() {
+    if ($attrs.defaultValues instanceof Object) {
       return $attrs.defaultValues
-    }else if($collectionCrud.getFromCollection(props.value.collection, 'detail')){
+    } else if ($collectionCrud.getFromCollection(props.value.collection, 'detail')) {
       return $collectionCrud.getFromCollection(props.value.collection, 'detail')
-    }else {
+    } else {
       return {}
     }
   }
@@ -1338,6 +1477,10 @@
   var onCloseEditModal = ref$7.onCloseEditModal;
   var onCloseDeleteModal = ref$7.onCloseDeleteModal;
 
+  var ref$8 = useSelection(props);
+  var selectedData = ref$8.selectedData;
+  var selectionMode = ref$8.selectionMode;
+
 
   useWatchs($attrs, getList, pagination, ccrudTable);
 
@@ -1346,8 +1489,101 @@
     return baseSlotName + "-" + field;
   }
 
+  // Partie sliderItem pour Mobile
+  var timer;
+  var mobileSlideItem = vue.ref(null);
+  function finalize(reset) {
+    clearTimeout(timer);
+    timer = setTimeout(function () {
+      reset();
+    }, 50);
+  }
+  vue.onBeforeUnmount(function () {
+    clearTimeout(timer);
+  });
+  function onClickRow(row) {
+    onClickEdit(row);
+  }
+  function onSlideLeft(details, row) {
+    $emit("actionsSlideLeft", details, row);
+    finalize(details.reset);
+    resetSlideItemsVisibility('q-slide-item__left');
+  }
+  function onSlideRight(ref, row) {
+    var reset = ref.reset;
+
+    onClickDelete(row);
+    finalize(reset);
+    resetSlideItemsVisibility('q-slide-item__right');
+  }
+  function onSlide(ref) {
+    ref.side;
+    ref.ratio;
+    var isReset = ref.isReset;
+
+    clearTimeout(timer);
+    if (isReset) {
+      resetSlideItemsVisibility('q-slide-item__left');
+      resetSlideItemsVisibility('q-slide-item__right');
+    }
+  }
+  function resetSlideItemsVisibility(slideItemClass) {
+    for (var index = 0; index < document.getElementsByClassName(slideItemClass).length; index++) {
+      document.getElementsByClassName(slideItemClass)[index].style.visibility = 'hidden';
+    }
+  }
+
+  function onEditCellHandler(field, value) {
+    $emit("onEditCellHandler", field, value);
+  }
+
+  // Gestion de la tabulation dans le tableau
+  var popupCells = vue.ref([]);
+
+  var delayNextTabOption = vue.ref(null);
+  vue.watch(rows, function (newValue, oldValue) {
+    if (delayNextTabOption.value) {
+      setTimeout(function () {
+        if (delayNextTabOption.value) {
+          onClickTabHandler(delayNextTabOption.value.rowIndex, delayNextTabOption.value.cellIndex, false, false);
+        }
+      }, 400);
+    }
+  }, { deep: true });
+
+  function onClickTabHandler(rowIndex, cellIndex, updated, openPrevious) {
+    if ( updated === void 0 ) updated = false;
+    if ( openPrevious === void 0 ) openPrevious = true;
+
+    if (openPrevious) {
+      popupCells.value[rowIndex + '_' + cellIndex].$el.click();
+    }
+    if (updated) {
+      delayNextTabOption.value = {
+        rowIndex: rowIndex,
+        cellIndex: cellIndex
+      };
+    } else {
+      delayNextTabOption.value = null;
+      popupCells.value[getNextCellIndex(rowIndex, cellIndex)].$el.click();
+    }
+  }
+  function getRowIndex(row) {
+    return rows.value.indexOf(row);
+  }function getNextCellIndex(rowIndex, cellIndex) {
+    if (getEditablesTd.value.length > parseInt(cellIndex) + 1) {
+      return rowIndex + '_' + (parseInt(cellIndex) + 1)
+    } else {
+      return (parseInt(rowIndex) + 1) + '_' + 0
+    }
+  }
+  function onClearSearchHandler() {
+    filter.value = "";
+  }
 
   return function (_ctx, _cache) {
+    var _component_q_tooltip = vue.resolveComponent("q-tooltip");
+
     return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
       vue.createVNode(vue.unref(quasar.QTable), vue.mergeProps({
         flat: "",
@@ -1355,10 +1591,13 @@
       }, vue.unref(table), {
         filter: filter.value,
         onRequest: vue.unref(asyncRequest),
+        ref_key: "ccrudTable",
+        ref: ccrudTable,
         pagination: vue.unref(pagination),
         "onUpdate:pagination": _cache[1] || (_cache[1] = function ($event) { return (vue.isRef(pagination) ? (pagination).value = $event : null); }),
-        ref_key: "ccrudTable",
-        ref: ccrudTable
+        selection: vue.unref(selectionMode),
+        selected: vue.unref(selectedData),
+        "onUpdate:selected": _cache[2] || (_cache[2] = function ($event) { return (vue.isRef(selectedData) ? (selectedData).value = $event : null); })
       }), vue.createSlots({
         "top-left": vue.withCtx(function () { return [
           vue.createElementVNode("div", null, [
@@ -1366,8 +1605,8 @@
           ])
         ]; }),
         "top-right": vue.withCtx(function () { return [
-          vue.createElementVNode("div", _hoisted_4$2, [
-            vue.createElementVNode("div", _hoisted_5$2, [
+          vue.createElementVNode("div", _hoisted_6, [
+            vue.createElementVNode("div", _hoisted_7, [
               (vue.unref(showInputSearch))
                 ? (vue.openBlock(), vue.createBlock(vue.unref(quasar.QInput), {
                     key: 0,
@@ -1376,16 +1615,27 @@
                     modelValue: filter.value,
                     "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) { return ((filter).value = $event); }),
                     placeholder: "Recherche",
-                    filled: "",
-                    "bg-color": "grey-2",
-                    square: "",
+                    outlined: "",
+                    rounded: vue.unref(isMobile),
                     style: {"width":"180px"}
                   }, {
                     append: vue.withCtx(function () { return [
-                      vue.createVNode(vue.unref(quasar.QIcon), { name: "search" })
+                      (filter.value)
+                        ? (vue.openBlock(), vue.createBlock(vue.unref(quasar.QBtn), {
+                            key: 0,
+                            dense: "",
+                            flat: "",
+                            round: "",
+                            icon: "mdi-close",
+                            onClick: onClearSearchHandler
+                          }))
+                        : (vue.openBlock(), vue.createBlock(vue.unref(quasar.QIcon), {
+                            key: 1,
+                            name: "search"
+                          }))
                     ]; }),
                     _: 1 /* STABLE */
-                  }, 8 /* PROPS */, ["modelValue"]))
+                  }, 8 /* PROPS */, ["modelValue", "rounded"]))
                 : vue.createCommentVNode("v-if", true),
               (vue.unref(showBtnCreatePage))
                 ? (vue.openBlock(), vue.createBlock(vue.unref(quasar.QBtn), {
@@ -1397,7 +1647,19 @@
                     color: "primary",
                     style: {"margin-left":"1em"},
                     square: ""
-                  }, null, 8 /* PROPS */, ["to", "label"]))
+                  }, {
+                    default: vue.withCtx(function () { return [
+                      (__props.showBtnCreateTooltip)
+                        ? (vue.openBlock(), vue.createBlock(_component_q_tooltip, { key: 0 }, {
+                            default: vue.withCtx(function () { return [
+                              vue.renderSlot(_ctx.$slots, "create-btn-tooltip")
+                            ]; }),
+                            _: 3 /* FORWARDED */
+                          }))
+                        : vue.createCommentVNode("v-if", true)
+                    ]; }),
+                    _: 3 /* FORWARDED */
+                  }, 8 /* PROPS */, ["to", "label"]))
                 : (vue.unref(showBtnCreate))
                   ? (vue.openBlock(), vue.createBlock(vue.unref(quasar.QBtn), {
                       key: 2,
@@ -1407,11 +1669,23 @@
                       style: {"margin-left":"1em"},
                       onClick: vue.unref(onClickAdd),
                       square: ""
-                    }, null, 8 /* PROPS */, ["label", "onClick"]))
+                    }, {
+                      default: vue.withCtx(function () { return [
+                        (__props.showBtnCreateTooltip)
+                          ? (vue.openBlock(), vue.createBlock(_component_q_tooltip, { key: 0 }, {
+                              default: vue.withCtx(function () { return [
+                                vue.renderSlot(_ctx.$slots, "create-btn-tooltip")
+                              ]; }),
+                              _: 3 /* FORWARDED */
+                            }))
+                          : vue.createCommentVNode("v-if", true)
+                      ]; }),
+                      _: 3 /* FORWARDED */
+                    }, 8 /* PROPS */, ["label", "onClick"]))
                   : vue.createCommentVNode("v-if", true),
               vue.renderSlot(_ctx.$slots, "top-right-after-add")
             ]),
-            vue.createElementVNode("div", _hoisted_6, [
+            vue.createElementVNode("div", _hoisted_8, [
               vue.renderSlot(_ctx.$slots, "top-right-under-add")
             ])
           ])
@@ -1422,7 +1696,7 @@
           return [
           vue.createElementVNode("td", {
             props: props,
-            class: "action-buttons"
+            class: vue.normalizeClass('action-buttons' + vue.unref(getAdditionalClassActionBtns)(props.row))
           }, [
             vue.renderSlot(_ctx.$slots, "row-action-before-controllers", {
                   key: 0,
@@ -1442,24 +1716,18 @@
                 ? (vue.openBlock(), vue.createBlock(vue.unref(quasar.QBtn), {
                     key: 2,
                     type: "a",
-                    to: {
-                name: vue.unref(collectionEditNamedRoute),
-                params: ( obj = {}, obj[vue.unref(route_parameter_name)] = props.row[vue.unref(route_parameter_name)], obj ),
-              },
+                    to: { name: vue.unref(collectionEditNamedRoute), params: ( obj = {}, obj[vue.unref(route_parameter_name)] = props.row[vue.unref(route_parameter_name)], obj ) },
                     color: "primary",
                     icon: "edit",
                     flat: "",
                     round: vue.unref(isMobile)
                   }, null, 8 /* PROPS */, ["to", "round"]))
                 : vue.createCommentVNode("v-if", true),
-            (!__props.editablePage && __props.displayActionCallback(props.row, 'show'))
+            (!__props.editablePage && vue.unref(showBtnEditPage) && __props.displayActionCallback(props.row, 'show'))
               ? (vue.openBlock(), vue.createBlock(vue.unref(quasar.QBtn), {
                   key: 3,
                   type: "a",
-                  to: {
-                name: vue.unref(collectionEditNamedRoute),
-                params: ( obj$1 = {}, obj$1[vue.unref(route_parameter_name)] = props.row[vue.unref(route_parameter_name)], obj$1 ),
-              },
+                  to: { name: vue.unref(collectionEditNamedRoute), params: ( obj$1 = {}, obj$1[vue.unref(route_parameter_name)] = props.row[vue.unref(route_parameter_name)], obj$1 ) },
                   color: "primary",
                   icon: "mdi-magnify-plus-outline",
                   flat: ""
@@ -1478,11 +1746,98 @@
             vue.renderSlot(_ctx.$slots, "row-action-after-controllers", {
               data: props.row
             })
-          ], 8 /* PROPS */, _hoisted_7)
+          ], 10 /* CLASS, PROPS */, _hoisted_9)
         ];
     }),
         _: 2 /* DYNAMIC */
       }, [
+        (vue.unref(isMobile))
+          ? {
+              name: "header",
+              fn: vue.withCtx(function (props) { return []; })
+            }
+          : undefined,
+        (vue.unref(isMobile))
+          ? {
+              name: "body",
+              fn: vue.withCtx(function (props) { return [
+                vue.createVNode(vue.unref(quasar.QSlideItem), {
+                  ref_key: "mobileSlideItem",
+                  ref: mobileSlideItem,
+                  onLeft: function (element) { return onSlideLeft(element, props.row); },
+                  onRight: function (element) { return onSlideRight(element, props.row); },
+                  onSlide: onSlide,
+                  reset: "",
+                  "right-color": "negative",
+                  "left-color": "accent"
+                }, vue.createSlots({
+                  default: vue.withCtx(function () { return [
+                    vue.createVNode(vue.unref(quasar.QItem), {
+                      style: {"align-items":"center"},
+                      class: vue.normalizeClass('mobile-item' + vue.unref(getAdditionalClassActionBtns)(props.row))
+                    }, {
+                      default: vue.withCtx(function () { return [
+                        vue.createCommentVNode(" On affiche la première colonne seulement et on garde celle des actions "),
+                        vue.createVNode(vue.unref(quasar.QItemSection), {
+                          class: "mobile-item-content",
+                          onClick: function ($event) { return (vue.unref(showBtnEdit) ? onClickRow(props.row) : ''); }
+                        }, {
+                          default: vue.withCtx(function () { return [
+                            (vue.unref($slots)['body-cell-mobile'])
+                              ? vue.renderSlot(_ctx.$slots, "body-cell-mobile", {
+                                  key: 0,
+                                  data: props.row,
+                                  class: "body-cell-mobile"
+                                })
+                              : (vue.unref(mobileColumn))
+                                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$2, vue.toDisplayString(props.cols.filter(function (col) { return col.name === vue.unref(mobileColumn).name; })[0].value), 1 /* TEXT */))
+                                : (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$2, vue.toDisplayString(props.cols[0].value), 1 /* TEXT */))
+                          ]; }),
+                          _: 2 /* DYNAMIC */
+                        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]),
+                        vue.createVNode(vue.unref(quasar.QItemSection), {
+                          style: {"display":"flex","flex-direction":"row","align-items":"center"},
+                          side: ""
+                        }, {
+                          default: vue.withCtx(function () { return [
+                            vue.renderSlot(_ctx.$slots, "row-action-before-controllers", {
+                                  key: 0,
+                                  data: props.row
+                                })
+                              
+                          ]; }),
+                          _: 2 /* DYNAMIC */
+                        }, 1024 /* DYNAMIC_SLOTS */)
+                      ]; }),
+                      _: 2 /* DYNAMIC */
+                    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class"])
+                  ]; }),
+                  _: 2 /* DYNAMIC */
+                }, [
+                  (__props.showSlideLeft)
+                    ? {
+                        name: "left",
+                        fn: vue.withCtx(function () { return [
+                          vue.renderSlot(_ctx.$slots, "content-slider-left", {
+                            data: props.row
+                          }, function () { return [
+                            vue.createVNode(vue.unref(quasar.QIcon), { name: "mdi-pencil" })
+                          ]; })
+                        ]; })
+                      }
+                    : undefined,
+                  (vue.unref(showBtnDelete))
+                    ? {
+                        name: "right",
+                        fn: vue.withCtx(function () { return [
+                          vue.createVNode(vue.unref(quasar.QIcon), { name: "mdi-delete" })
+                        ]; })
+                      }
+                    : undefined
+                ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["onLeft", "onRight"])
+              ]; })
+            }
+          : undefined,
         vue.renderList(vue.unref(customFields), function (options) {
           return {
             name: options.slotName,
@@ -1491,7 +1846,7 @@
                 ? (vue.openBlock(), vue.createElementBlock("td", {
                     props: props,
                     key: options.slotName,
-                    class: vue.normalizeClass(vue.unref(isTdClickable)(options) ? 'cursor-pointer' : ''),
+                    class: vue.normalizeClass((vue.unref(isTdClickable)(options) ? 'cursor-pointer' : '') + vue.unref(getAdditionalClassActionBtns)(props.row)),
                     onClick: function ($event) { return (vue.unref(isTdClickable)(options) ? options.to(props.row) : null); }
                   }, [
                     (props.row[options.field])
@@ -1509,15 +1864,15 @@
                           key: 1,
                           data: props.row
                         })
-                  ], 10 /* CLASS, PROPS */, _hoisted_2$2))
+                  ], 10 /* CLASS, PROPS */, _hoisted_4$2))
                 : (vue.openBlock(), vue.createElementBlock("td", {
                     props: props,
                     key: options.slotName + '-else',
-                    class: "cursor-pointer",
+                    class: vue.normalizeClass('cursor-pointer' + vue.unref(getAdditionalClassActionBtns)(props.row)),
                     onClick: function ($event) { return (options.to(props.row)); }
                   }, vue.toDisplayString(options.format
                 ? options.format(props.row)
-                : props.row[options.field]), 9 /* TEXT, PROPS */, _hoisted_3$2))
+                : props.row[options.field]), 11 /* TEXT, CLASS, PROPS */, _hoisted_5$1))
             ]; })
           }
         }),
@@ -1529,17 +1884,22 @@
             ]; })
           }
         }),
-        vue.renderList(vue.unref(getEditablesTd), function (config) {
+        vue.renderList(vue.unref(getEditablesTd), function (config, index) {
           return {
             name: config.slotName,
             fn: vue.withCtx(function (slotProps) { return [
               (vue.unref(editOnTable))
                 ? (vue.openBlock(), vue.createBlock(script$3, {
+                    ref: function (el) { popupCells.value[getRowIndex(slotProps.row) + '_' + index] = el; },
                     key: config.slotName,
+                    rowIndex: getRowIndex(slotProps.row),
+                    cellIndex: index,
                     data: slotProps.row,
                     props: vue.unref(props),
                     colOptions: config.options,
-                    onUpdate: vue.unref(onUpdateTd)
+                    onUpdate: vue.unref(onUpdateTd),
+                    onOnEditCellHandler: onEditCellHandler,
+                    onOnClickTabHandler: onClickTabHandler
                   }, vue.createSlots({ _: 2 /* DYNAMIC */ }, [
                     vue.renderList(vue.unref($slots), function (_, slot) {
                       return {
@@ -1549,12 +1909,12 @@
                         ]; })
                       }
                     })
-                  ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["data", "props", "colOptions", "onUpdate"]))
+                  ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["rowIndex", "cellIndex", "data", "props", "colOptions", "onUpdate"]))
                 : vue.createCommentVNode("v-if", true)
             ]; })
           }
         })
-      ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["rows", "filter", "onRequest", "pagination"]),
+      ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["rows", "filter", "onRequest", "pagination", "selection", "selected"]),
       vue.createCommentVNode(" Modal de Confirmation Suppression "),
       vue.createVNode(script$5, {
         localDetail: localDetail.value,
@@ -1581,45 +1941,59 @@
       vue.createVNode(script$4, vue.mergeProps({ localDetail: localDetail.value }, vue.unref(props), {
         editModal: editModal.value,
         onClose: vue.unref(onCloseEditModal),
-        isMobile: vue.unref(isMobile)
+        isMobile: vue.unref(isMobile),
+        closeModalAfterValidation: __props.closeModalAfterValidation,
+        propsLibelleTitle: __props.propsLibelleTitle
       }), vue.createSlots({ _: 2 /* DYNAMIC */ }, [
         vue.renderList(vue.unref($slots), function (_, slot) {
           return {
             name: slot,
             fn: vue.withCtx(function (scope) { return [
               (vue.openBlock(), vue.createElementBlock("div", {
-                class: "modal-content",
+                class: vue.normalizeClass(vue.unref(isMobile) ? 'mobile-content modal-content' : 'modal-content'),
                 key: slot
               }, [
                 vue.renderSlot(_ctx.$slots, slot, vue.normalizeProps(vue.guardReactiveProps(scope)))
-              ]))
+              ], 2 /* CLASS */))
             ]; })
           }
         })
-      ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["localDetail", "editModal", "onClose", "isMobile"])
+      ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["localDetail", "editModal", "onClose", "isMobile", "closeModalAfterValidation", "propsLibelleTitle"])
     ]))
   }
   }
 
   };
 
-  var css_248z$2 = "\n.action-buttons[data-v-60881ef8] {\n  text-align: end;\n}\n.modal-content[data-v-60881ef8] {\n  padding: 15px;\n}\n.q-table-control[data-v-60881ef8] {\n  flex: 0 1 55%;\n}\n#search-slot[data-v-60881ef8] {\n  display: flex;\n}\n#top-right-under-add[data-v-60881ef8] {\n  margin-top: 20px;\n  display: flex;\n  flex-direction: column;\n}\n";
+  var css_248z$2 = "\n.action-buttons[data-v-60881ef8] {\n  text-align: end;\n}\n.modal-content[data-v-60881ef8] {\n  padding: 15px;\n}\n.q-table-control[data-v-60881ef8] {\n  flex: 0 1 55%;\n}\n#search-slot[data-v-60881ef8] {\n  display: flex;\n  align-items: center;\n}\n#top-right-under-add[data-v-60881ef8] {\n  margin-top: 20px;\n  display: flex;\n  flex-direction: column;\n}\n.mobile-item[data-v-60881ef8] {\n  min-height: 8.5vh;\n  border-bottom: solid 1px lightgrey;\n}\n.mobile-item-content>span[data-v-60881ef8] {\n  word-break: break-all;\n}\n.body-cell-mobile[data-v-60881ef8] {\n  word-break: break-all;\n}\n";
   styleInject(css_248z$2);
 
   script$2.__scopeId = "data-v-60881ef8";
   script$2.__file = "src/components/VlankCollectionCrud.vue";
 
-  var _hoisted_1$1 = {
-    key: 0,
-    class: "edit-page-header"
-  };
-  var _hoisted_2$1 = { style: {"display":"flex","align-items":"center"} };
-  var _hoisted_3$1 = { key: 0 };
-  var _hoisted_4$1 = {
+  function onClickBack(route, router) {
+    if(!route || !route.meta) {
+      router.go(-1);
+      return;
+    }
+    var localStorageRoute = localStorage.getItem(route.meta.goBackRoute);
+    if (localStorageRoute) {
+      router.push(localStorageRoute);
+      localStorage.removeItem(route.meta.goBackRoute);
+    } else if (route.meta.mainParentRoutePath) {
+      router.push(route.meta.mainParentRoutePath);
+    } else {
+      router.go(-1);
+    }
+  }
+
+  var _hoisted_1$1 = { style: {"display":"flex","align-items":"center"} };
+  var _hoisted_2$1 = { key: 0 };
+  var _hoisted_3$1 = {
     key: 1,
     class: "edit-page-body"
   };
-  var _hoisted_5$1 = {
+  var _hoisted_4$1 = {
     key: 2,
     class: "edit-page-body"
   };
@@ -1633,12 +2007,17 @@
   var $emit = ref$1.emit;
 
 
-  var router = vueRouter.useRouter();
   var route = vueRouter.useRoute();
+  var router = vueRouter.useRouter();
   var store = vuex.useStore();
   var collectionCrud = vue.inject('vlank-ccrud');
 
 
+  function onClickBackTemplate(){
+    onClickBack(route, router);
+  }
+
+
 
   var localDetail = vue.ref(null);
   var containerMode = vue.ref(route.meta.containerMode);
@@ -1666,13 +2045,6 @@
       : { label: "Valider", icon: "mdi-check" };
   });
 
-  var onClickBack = function () {
-    if (route.meta.mainParentRoutePath) {
-      router.push(route.meta.mainParentRoutePath);
-    } else {
-      router.go(-1);
-    }
-  };
   var onCustomTitle = function (title) {
     customTitle.value = title;
   };
@@ -1689,20 +2061,48 @@
   var onExtraRequestParams = function (extraRequestParamsValue) {
     if (extraRequestParamsValue) { extraRequestParams.value = extraRequestParamsValue; }
   };
+
+  var submitLoading = vue.ref(false);
   var onClickSubmit = function () {
-    collectionCrud
+    submitLoading.value = true;
+    if (route.meta.useSendFiles) {
+      collectionCrud
+      .collectionAction({
+        collectionName: route.meta.collection,
+        action: "send-file",
+        params: Object.assign({}, localDetail.value, extraRequestParams.value),
+        axios_options: {
+          oniti_success_notification_message: 'Modification effectuée'
+        },
+      })
+      .then(function (obj) {
+        submitCallback(obj);
+      }).finally(function () {
+        submitLoading.value = false;
+      });
+    } else {
+      collectionCrud
       .collectionAction({
         collectionName: route.meta.collection,
         action: "update",
         params: Object.assign({}, localDetail.value, extraRequestParams.value),
       })
       .then(function (obj) {
-        if (route.meta.goBackAfterValidation) {
-          onClickBack();
-        }
-        localDetail.value = obj;
+        submitCallback(obj);
+      }).finally(function () {
+        submitLoading.value = false;
       });
+    }
   };
+
+  function submitCallback(obj) {
+    if (route.meta.goBackAfterValidation) {
+      onClickBack(route, router);
+    }
+    localDetail.value = JSON.parse(JSON.stringify(obj));
+    previousLocalDetail.value = JSON.parse(JSON.stringify(obj));
+  }
+
   var onSubscribe = function (mutation, state) {
 
     if (
@@ -1714,15 +2114,27 @@
     }
   };
 
-  vue.onMounted(function () {
+  var route_parameter_name = collectionCrud.getRouteParameterName(route.meta.collection);
+  var actual_route = route;
+  var actual_collection = vue.ref(route.meta.collection);
+  vue.watch(router.currentRoute,function (new_current_route, old_current_route ) {
+    if(new_current_route.meta.collection){
+      actual_route = new_current_route;
+      route_parameter_name = collectionCrud.getRouteParameterName(new_current_route.meta.collection);
+      propsLibelleTitle.value = new_current_route.meta.propsLibelleTitle;
+      actual_collection.value = new_current_route.meta.collection;
+      fetchDetail();
+    }
+  },{deep:true});
+
+  function fetchDetail(){
     var obj;
 
     if (!containerMode.value) {
-      var parameter_route_value = route.params[route_parameter_name];
-
+      var parameter_route_value = actual_route.params[route_parameter_name];
       collectionCrud
         .collectionAction({
-          collectionName: route.meta.collection,
+          collectionName: actual_route.meta.collection,
           action: "detail",
           lazy: true,
           params: ( obj = {}, obj[route_parameter_name] = parameter_route_value, obj ),
@@ -1731,7 +2143,24 @@
           localDetail.value = Object.assign({}, obj);
           $emit("collectionCrudUpdateLocalDetail", localDetail.value);
         });
+    }else {
+      localDetail.value = null;
     }
+  }
+
+  var isLocalDetailUpdated = vue.ref(false);
+  var previousLocalDetail = vue.ref(null);
+
+  vue.watch(localDetail, function (newVal) {
+    if (newVal && !previousLocalDetail.value) {
+      previousLocalDetail.value = JSON.parse(JSON.stringify(newVal));
+    } else {
+      isLocalDetailUpdated.value = JSON.stringify(newVal) !== JSON.stringify(previousLocalDetail.value);
+    }
+  }, {deep:true});
+
+  vue.onMounted(function () {
+    fetchDetail();
     unsubscribe = store.subscribe(onSubscribe);
   });
 
@@ -1741,41 +2170,46 @@
     }
   });
 
-  var route_parameter_name = collectionCrud.getRouteParameterName(route.meta.collection);
 
   return function (_ctx, _cache) {
     return (vue.openBlock(), vue.createBlock(vue.unref(quasar.QPage), null, {
       default: vue.withCtx(function () { return [
         (!containerMode.value)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
-              vue.createElementVNode("div", _hoisted_2$1, [
+          ? (vue.openBlock(), vue.createElementBlock("div", {
+              class: "edit-page-header",
+              key: actual_collection.value
+            }, [
+              vue.createElementVNode("div", _hoisted_1$1, [
                 vue.createVNode(vue.unref(quasar.QBtn), {
-                  onClick: onClickBack,
+                  onClick: onClickBackTemplate,
                   color: "primary",
                   icon: "arrow_back"
                 }),
                 vue.createElementVNode("h2", null, vue.toDisplayString(vue.unref(getTitle)), 1 /* TEXT */)
               ]),
               (!containerMode.value && editablePage.value)
-                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
+                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, [
                     vue.createVNode(vue.unref(quasar.QBtn), {
-                      color: "primary",
                       icon: vue.unref(getSubmitBtn).icon,
-                      onClick: onClickSubmit
+                      onClick: onClickSubmit,
+                      disable: !isLocalDetailUpdated.value,
+                      color: isLocalDetailUpdated.value ? 'primary' : 'grey-5',
+                      loading: submitLoading.value
                     }, {
                       default: vue.withCtx(function () { return [
                         vue.createTextVNode(vue.toDisplayString(vue.unref(getSubmitBtn).label), 1 /* TEXT */)
                       ]; }),
                       _: 1 /* STABLE */
-                    }, 8 /* PROPS */, ["icon"])
+                    }, 8 /* PROPS */, ["icon", "disable", "color", "loading"])
                   ]))
                 : vue.createCommentVNode("v-if", true)
             ]))
           : vue.createCommentVNode("v-if", true),
         (localDetail.value)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [
+          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(Components__default["default"])[vue.unref(formComponent)]), {
                 data: localDetail.value,
+                key: localDetail.value[vue.unref(route_parameter_name)],
                 onExtraRequestParams: onExtraRequestParams,
                 onCustomTitle: onCustomTitle,
                 onCustomSubmitBtn: onCustomSubmitBtn,
@@ -1783,7 +2217,7 @@
                 onEditablePage: onEditablePage
               }, null, 40 /* PROPS, HYDRATE_EVENTS */, ["data"]))
             ]))
-          : (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, [
+          : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [
               vue.createVNode(vue.unref(quasar.QSpinner), {
                 class: "loader",
                 color: "accent"
@@ -1827,10 +2261,15 @@
   var $emit = ref$1.emit;
 
 
-  var router = vueRouter.useRouter();
   var route = vueRouter.useRoute();
+  var router = vueRouter.useRouter();
   var collectionCrud = vue.inject('vlank-ccrud');
 
+  function onClickBackTemplate(){
+    onClickBack(route, router);
+  }
+
+
 
 
   var localDetail = vue.ref(null);
@@ -1857,14 +2296,6 @@
       : { label: "Valider", icon: "mdi-check" };
   });
 
-  var onClickBack = function () {
-    if (route.meta.mainParentRoutePath) {
-      router.push(route.meta.mainParentRoutePath);
-    } else {
-      router.go(-1);
-    }
-  };
-
   var onCustomSubmitBtn = function (button) {
     customSubmitBtn.value.label = button.label;
     customSubmitBtn.value.icon = button.icon;
@@ -1876,8 +2307,27 @@
   var onExtraRequestParams = function (extraRequestParamsValue) {
     if (extraRequestParamsValue) { extraRequestParams.value = extraRequestParamsValue; }
   };
+
+  var submitLoading = vue.ref(false);
   var onClickSubmit = function () {
-    collectionCrud
+    submitLoading.value = true;
+    if (route.meta.useSendFiles) {
+      collectionCrud
+      .collectionAction({
+        collectionName: route.meta.collection,
+        action: "send-file",
+        params: Object.assign({}, localDetail.value, extraRequestParams.value),
+      })
+      .then(function (obj) {
+        if (route.meta.goBackAfterValidation) {
+          onClickBack(route, router);
+        }
+        localDetail.value = obj;
+      }).finally(function () {
+        submitLoading.value = false;
+      });
+    } else {
+      collectionCrud
       .collectionAction({
         collectionName: route.meta.collection,
         action: "create",
@@ -1885,10 +2335,14 @@
       })
       .then(function (obj) {
         if (route.meta.goBackAfterValidation) {
-          onClickBack();
+          onClickBack(route, router);
         }
         localDetail.value = obj;
+      }).finally(function () {
+        submitLoading.value = false;
       });
+    }
+
   };
   vue.onMounted(function () {
     collectionCrud
@@ -1911,7 +2365,7 @@
           ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
               vue.createElementVNode("div", _hoisted_2, [
                 vue.createVNode(vue.unref(quasar.QBtn), {
-                  onClick: onClickBack,
+                  onClick: onClickBackTemplate,
                   color: "primary",
                   icon: "arrow_back"
                 }),
@@ -1922,13 +2376,14 @@
                     vue.createVNode(vue.unref(quasar.QBtn), {
                       color: "primary",
                       icon: vue.unref(getSubmitBtn).icon,
-                      onClick: onClickSubmit
+                      onClick: onClickSubmit,
+                      loading: submitLoading.value
                     }, {
                       default: vue.withCtx(function () { return [
                         vue.createTextVNode(vue.toDisplayString(vue.unref(getSubmitBtn).label), 1 /* TEXT */)
                       ]; }),
                       _: 1 /* STABLE */
-                    }, 8 /* PROPS */, ["icon"])
+                    }, 8 /* PROPS */, ["icon", "loading"])
                   ]))
                 : vue.createCommentVNode("v-if", true)
             ]))
@@ -1962,7 +2417,7 @@
   script.__scopeId = "data-v-29e3989a";
   script.__file = "src/components/VlankCreatePage.vue";
 
-  var version = '3.5.2';
+  var version = '3.7.42';
 
   function install (app) {
     app.component(script$2.name, script$2);