From 924dea66d484502bcc19bb85c4fa82f2cf40708a Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Tue, 12 Sep 2023 18:27:31 +0200
Subject: [PATCH 01/16] refs #6118 importSalixVariables

---
 src/css/app.scss                              |  12 ++
 src/css/variables.scss                        | 136 ++++++++++++++++++
 src/css/width.scss                            |  26 ++++
 src/pages/Claim/Card/ClaimBasicData.vue       |   7 -
 src/pages/Customer/Card/CustomerBasicData.vue |   6 +-
 5 files changed, 175 insertions(+), 12 deletions(-)
 create mode 100644 src/css/variables.scss
 create mode 100644 src/css/width.scss

diff --git a/src/css/app.scss b/src/css/app.scss
index 3c8cc50b6..d746fb8be 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -1,5 +1,6 @@
 // app global css in SCSS form
 @import './icons.scss';
+@import './width.scss';
 
 a {
     text-decoration: none;
@@ -14,6 +15,17 @@ a {
     color: $orange-4;
 }
 
+.q-card {
+    width: 100%;
+    max-width: $width-md;
+}
+
+@media screen and (max-width: $width-md) {
+    .q-form > div {
+        flex-direction: column; // Cambia la dirección cuando pase de cierto tamaño
+    }
+}
+
 // Removes chrome autofill background
 input:-webkit-autofill,
 select:-webkit-autofill {
diff --git a/src/css/variables.scss b/src/css/variables.scss
new file mode 100644
index 000000000..0a74c8277
--- /dev/null
+++ b/src/css/variables.scss
@@ -0,0 +1,136 @@
+$font-size: 11pt;
+$menu-width: 256px;
+$topbar-height: 56px;
+$mobile-width: 800px;
+$float-spacing: 20px;
+
+// Width
+
+$width-xs: 400px;
+$width-sm: 544px;
+$width-md: 800px;
+$width-lg: 1280px;
+$width-xl: 1600px;
+
+// Spacing
+
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 32px;
+$spacing-xl: 70px;
+
+// Light theme
+
+/* $color-primary: #f7931e;
+$color-secondary: $color-primary;
+
+$color-font: #222;
+$color-font-light: #555;
+$color-font-secondary: #9b9b9b;
+$color-font-dark: white;
+$color-font-link: #005a9a;
+$color-font-bg: rgba(0, 0, 0, .7);
+$color-font-bg-marginal: rgba(0, 0, 0, .4);
+$color-font-bg-dark: rgba(255, 255, 255, .7);
+$color-font-bg-dark-marginal: rgba(255, 255, 255, .4);
+
+$color-header: #3d3d3d;
+$color-menu-header: #3d3d3d;
+$color-bg: #e5e5e5;
+$color-bg-dark: #3d3d3d;
+$color-active: #3d3d3d;
+$color-active-font: $color-font-dark;
+$color-bg-panel: white;
+$color-main: $color-primary;
+$color-marginal: #ccc;
+$color-success: #a3d131;
+$color-notice: #32b1ce;
+$color-alert: #f42121;
+$color-button: $color-secondary;
+
+$color-spacer: rgba(0, 0, 0, .3);
+$color-spacer-light: rgba(0, 0, 0, .12);
+$color-input-underline: rgba(0, 0, 0, .12);
+$color-input-underline-hover: rgba(0, 0, 0, .6);
+$color-shadow: rgba(0, 0, 0, .2);
+$color-hightlight: rgba(0, 0, 0, .05);
+$color-hover-cd: rgba(0, 0, 0, .1);
+$color-hover-dc: .7;
+$color-disabled: .6;
+
+$color-primary-medium: lighten($color-primary, 20%);
+$color-primary-light: lighten($color-primary, 35%);
+$color-font-link-medium: lighten($color-font-link, 20%);
+$color-font-link-light: lighten($color-font-link, 35%);
+$color-main-medium: lighten($color-main, 20%);
+$color-main-light: lighten($color-main, 35%);
+$color-success-medium: lighten($color-success, 20%);
+$color-success-light: lighten($color-success, 35%);
+$color-notice-medium: lighten($color-notice, 20%);
+$color-notice-light: lighten($color-notice, 35%);
+$color-alert-medium: lighten($color-alert, 20%);
+$color-alert-light: lighten($color-alert, 35%); */
+/**/
+
+// Dark theme
+$color-primary: #ec8916;
+$color-secondary: $color-primary;
+
+$color-font: #eee;
+$color-font-light: #aaa;
+$color-font-secondary: #777;
+$color-font-dark: white;
+$color-font-link: #66bfff;
+$color-font-bg: rgba(0, 0, 0, .8);
+$color-font-bg-marginal: rgba(255, 255, 255, .4);
+$color-font-bg-dark: rgba(255, 255, 255, .7);
+$color-font-bg-dark-marginal: rgba(255, 255, 255, .4);
+
+$color-header: #3d3d3d;
+$color-menu-header: #3d3d3d;
+$color-bg: #222;
+$color-bg-dark: #222;
+$color-active: #666;
+$color-active-font: white;
+$color-bg-panel: #3c3b3b;
+$color-main: $color-primary;
+$color-marginal: #222;
+$color-success: #a3d131;
+$color-notice: #32b1ce;
+$color-alert: #fa3939;
+$color-pink: #ff99cc;
+$color-yellow: #ffff00;
+$color-button: $color-secondary;
+
+$color-spacer: rgba(255, 255, 255, .3);
+$color-spacer-light: rgba(255, 255, 255, .12);
+$color-input-underline: rgba(255, 255, 255, .12);
+$color-input-underline-hover: rgba(255, 255, 255, .6);
+$color-shadow: rgba(0, 0, 0, .2);
+$color-border: rgba(0, 0, 0, .3);
+$color-hightlight: rgba(255, 255, 255, .15);
+$color-hover-cd: rgba(255, 255, 255, .1);
+$color-hover-dc: .7;
+$color-disabled: .6;
+
+$color-primary-medium: lighten($color-primary, 20%);
+$color-primary-light: lighten($color-primary, 35%);
+$color-font-link-medium: lighten($color-font-link, 20%);
+$color-font-link-light: lighten($color-font-link, 35%);
+$color-main-medium: lighten($color-main, 20%);
+$color-main-light: lighten($color-main, 35%);
+$color-success-medium: lighten($color-success, 20%);
+$color-success-light: lighten($color-success, 35%);
+$color-notice-medium: lighten($color-notice, 20%);
+$color-notice-light: lighten($color-notice, 35%);
+$color-alert-medium: lighten($color-alert, 20%);
+$color-alert-light: lighten($color-alert, 35%);
+/**/
+
+// Border
+
+$border-thin: 1px solid $color-border;
+$border-thin-light: 1px solid $color-spacer-light;
+$border: 2px solid $color-border;
+$shadow: 0 2px 2px 0 rgba(0, 0, 0, .3);
diff --git a/src/css/width.scss b/src/css/width.scss
new file mode 100644
index 000000000..e017de3ea
--- /dev/null
+++ b/src/css/width.scss
@@ -0,0 +1,26 @@
+@import "./variables";
+
+%margin-auto {
+    margin-left: auto;
+    margin-right: auto;
+}
+.vn-w-xs {
+    @extend %margin-auto;
+    max-width: $width-xs;
+}
+.vn-w-sm {
+    @extend %margin-auto;
+    max-width: $width-sm;
+}
+.vn-w-md {
+    @extend %margin-auto;
+    max-width: $width-md;
+}
+.vn-w-lg {
+    @extend %margin-auto;
+    max-width: $width-lg;
+}
+.vn-w-xl {
+    @extend %margin-auto;
+    max-width: $width-xl;
+}
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index ddf669dd0..3dc5b0a59 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -218,10 +218,3 @@ const statesFilter = {
         </QCard>
     </div>
 </template>
-
-<style lang="scss" scoped>
-.q-card {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index ffd3c3476..889dc2376 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -171,8 +171,4 @@ const filterOptions = {
     </div>
 </template>
 
-<style lang="scss" scoped>
-.q-card {
-    width: 800px;
-}
-</style>
+<style lang="scss" scoped></style>

From ae1ba448f73091c1cbd60c77a76d78e41391eb7a Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 13 Sep 2023 16:24:54 +0200
Subject: [PATCH 02/16] refs #6118 fix

---
 src/pages/Customer/Card/CustomerBasicData.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 889dc2376..8032735e1 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -170,5 +170,3 @@ const filterOptions = {
         </QCard>
     </div>
 </template>
-
-<style lang="scss" scoped></style>

From 39cbc32547a136a457dea68dbf361e493478c085 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 13 Sep 2023 16:30:20 +0200
Subject: [PATCH 03/16] refs #6118 newVariable

---
 src/css/app.scss       |  2 +-
 src/css/variables.scss | 32 +++++++++++++++++---------------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index d746fb8be..65495de93 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -16,7 +16,7 @@ a {
 }
 
 .q-card {
-    width: 100%;
+    width: $width-full;
     max-width: $width-md;
 }
 
diff --git a/src/css/variables.scss b/src/css/variables.scss
index 0a74c8277..9f047456c 100644
--- a/src/css/variables.scss
+++ b/src/css/variables.scss
@@ -12,6 +12,8 @@ $width-md: 800px;
 $width-lg: 1280px;
 $width-xl: 1600px;
 
+$width-full: 100%;
+
 // Spacing
 
 $spacing-xs: 4px;
@@ -82,10 +84,10 @@ $color-font-light: #aaa;
 $color-font-secondary: #777;
 $color-font-dark: white;
 $color-font-link: #66bfff;
-$color-font-bg: rgba(0, 0, 0, .8);
-$color-font-bg-marginal: rgba(255, 255, 255, .4);
-$color-font-bg-dark: rgba(255, 255, 255, .7);
-$color-font-bg-dark-marginal: rgba(255, 255, 255, .4);
+$color-font-bg: rgba(0, 0, 0, 0.8);
+$color-font-bg-marginal: rgba(255, 255, 255, 0.4);
+$color-font-bg-dark: rgba(255, 255, 255, 0.7);
+$color-font-bg-dark-marginal: rgba(255, 255, 255, 0.4);
 
 $color-header: #3d3d3d;
 $color-menu-header: #3d3d3d;
@@ -103,16 +105,16 @@ $color-pink: #ff99cc;
 $color-yellow: #ffff00;
 $color-button: $color-secondary;
 
-$color-spacer: rgba(255, 255, 255, .3);
-$color-spacer-light: rgba(255, 255, 255, .12);
-$color-input-underline: rgba(255, 255, 255, .12);
-$color-input-underline-hover: rgba(255, 255, 255, .6);
-$color-shadow: rgba(0, 0, 0, .2);
-$color-border: rgba(0, 0, 0, .3);
-$color-hightlight: rgba(255, 255, 255, .15);
-$color-hover-cd: rgba(255, 255, 255, .1);
-$color-hover-dc: .7;
-$color-disabled: .6;
+$color-spacer: rgba(255, 255, 255, 0.3);
+$color-spacer-light: rgba(255, 255, 255, 0.12);
+$color-input-underline: rgba(255, 255, 255, 0.12);
+$color-input-underline-hover: rgba(255, 255, 255, 0.6);
+$color-shadow: rgba(0, 0, 0, 0.2);
+$color-border: rgba(0, 0, 0, 0.3);
+$color-hightlight: rgba(255, 255, 255, 0.15);
+$color-hover-cd: rgba(255, 255, 255, 0.1);
+$color-hover-dc: 0.7;
+$color-disabled: 0.6;
 
 $color-primary-medium: lighten($color-primary, 20%);
 $color-primary-light: lighten($color-primary, 35%);
@@ -133,4 +135,4 @@ $color-alert-light: lighten($color-alert, 35%);
 $border-thin: 1px solid $color-border;
 $border-thin-light: 1px solid $color-spacer-light;
 $border: 2px solid $color-border;
-$shadow: 0 2px 2px 0 rgba(0, 0, 0, .3);
+$shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);

From c727480569d547a2e07ca1c3bd0475ee3705ca53 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 13 Sep 2023 16:46:09 +0200
Subject: [PATCH 04/16] refs #6118 scoppedcss

---
 src/css/app.scss                              |   8 +-
 src/css/quasar.variables.scss                 |  10 ++
 src/css/variables.scss                        | 138 ------------------
 src/css/width.scss                            |  26 ----
 src/pages/Customer/Card/CustomerBasicData.vue |   7 +
 5 files changed, 18 insertions(+), 171 deletions(-)
 delete mode 100644 src/css/variables.scss
 delete mode 100644 src/css/width.scss

diff --git a/src/css/app.scss b/src/css/app.scss
index 65495de93..a65fcfec6 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -1,6 +1,5 @@
 // app global css in SCSS form
 @import './icons.scss';
-@import './width.scss';
 
 a {
     text-decoration: none;
@@ -15,14 +14,9 @@ a {
     color: $orange-4;
 }
 
-.q-card {
-    width: $width-full;
-    max-width: $width-md;
-}
-
 @media screen and (max-width: $width-md) {
     .q-form > div {
-        flex-direction: column; // Cambia la dirección cuando pase de cierto tamaño
+        flex-direction: column;
     }
 }
 
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 808bf3468..558aa63f0 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -47,3 +47,13 @@ $dark-shadow-color: #000;
 $dark: #292929;
 $layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
 $spacing-md: 16px;
+
+// Width from Salix variables.scss
+
+$width-xs: 400px;
+$width-sm: 544px;
+$width-md: 800px;
+$width-lg: 1280px;
+$width-xl: 1600px;
+
+$width-full: 100%;
diff --git a/src/css/variables.scss b/src/css/variables.scss
deleted file mode 100644
index 9f047456c..000000000
--- a/src/css/variables.scss
+++ /dev/null
@@ -1,138 +0,0 @@
-$font-size: 11pt;
-$menu-width: 256px;
-$topbar-height: 56px;
-$mobile-width: 800px;
-$float-spacing: 20px;
-
-// Width
-
-$width-xs: 400px;
-$width-sm: 544px;
-$width-md: 800px;
-$width-lg: 1280px;
-$width-xl: 1600px;
-
-$width-full: 100%;
-
-// Spacing
-
-$spacing-xs: 4px;
-$spacing-sm: 8px;
-$spacing-md: 16px;
-$spacing-lg: 32px;
-$spacing-xl: 70px;
-
-// Light theme
-
-/* $color-primary: #f7931e;
-$color-secondary: $color-primary;
-
-$color-font: #222;
-$color-font-light: #555;
-$color-font-secondary: #9b9b9b;
-$color-font-dark: white;
-$color-font-link: #005a9a;
-$color-font-bg: rgba(0, 0, 0, .7);
-$color-font-bg-marginal: rgba(0, 0, 0, .4);
-$color-font-bg-dark: rgba(255, 255, 255, .7);
-$color-font-bg-dark-marginal: rgba(255, 255, 255, .4);
-
-$color-header: #3d3d3d;
-$color-menu-header: #3d3d3d;
-$color-bg: #e5e5e5;
-$color-bg-dark: #3d3d3d;
-$color-active: #3d3d3d;
-$color-active-font: $color-font-dark;
-$color-bg-panel: white;
-$color-main: $color-primary;
-$color-marginal: #ccc;
-$color-success: #a3d131;
-$color-notice: #32b1ce;
-$color-alert: #f42121;
-$color-button: $color-secondary;
-
-$color-spacer: rgba(0, 0, 0, .3);
-$color-spacer-light: rgba(0, 0, 0, .12);
-$color-input-underline: rgba(0, 0, 0, .12);
-$color-input-underline-hover: rgba(0, 0, 0, .6);
-$color-shadow: rgba(0, 0, 0, .2);
-$color-hightlight: rgba(0, 0, 0, .05);
-$color-hover-cd: rgba(0, 0, 0, .1);
-$color-hover-dc: .7;
-$color-disabled: .6;
-
-$color-primary-medium: lighten($color-primary, 20%);
-$color-primary-light: lighten($color-primary, 35%);
-$color-font-link-medium: lighten($color-font-link, 20%);
-$color-font-link-light: lighten($color-font-link, 35%);
-$color-main-medium: lighten($color-main, 20%);
-$color-main-light: lighten($color-main, 35%);
-$color-success-medium: lighten($color-success, 20%);
-$color-success-light: lighten($color-success, 35%);
-$color-notice-medium: lighten($color-notice, 20%);
-$color-notice-light: lighten($color-notice, 35%);
-$color-alert-medium: lighten($color-alert, 20%);
-$color-alert-light: lighten($color-alert, 35%); */
-/**/
-
-// Dark theme
-$color-primary: #ec8916;
-$color-secondary: $color-primary;
-
-$color-font: #eee;
-$color-font-light: #aaa;
-$color-font-secondary: #777;
-$color-font-dark: white;
-$color-font-link: #66bfff;
-$color-font-bg: rgba(0, 0, 0, 0.8);
-$color-font-bg-marginal: rgba(255, 255, 255, 0.4);
-$color-font-bg-dark: rgba(255, 255, 255, 0.7);
-$color-font-bg-dark-marginal: rgba(255, 255, 255, 0.4);
-
-$color-header: #3d3d3d;
-$color-menu-header: #3d3d3d;
-$color-bg: #222;
-$color-bg-dark: #222;
-$color-active: #666;
-$color-active-font: white;
-$color-bg-panel: #3c3b3b;
-$color-main: $color-primary;
-$color-marginal: #222;
-$color-success: #a3d131;
-$color-notice: #32b1ce;
-$color-alert: #fa3939;
-$color-pink: #ff99cc;
-$color-yellow: #ffff00;
-$color-button: $color-secondary;
-
-$color-spacer: rgba(255, 255, 255, 0.3);
-$color-spacer-light: rgba(255, 255, 255, 0.12);
-$color-input-underline: rgba(255, 255, 255, 0.12);
-$color-input-underline-hover: rgba(255, 255, 255, 0.6);
-$color-shadow: rgba(0, 0, 0, 0.2);
-$color-border: rgba(0, 0, 0, 0.3);
-$color-hightlight: rgba(255, 255, 255, 0.15);
-$color-hover-cd: rgba(255, 255, 255, 0.1);
-$color-hover-dc: 0.7;
-$color-disabled: 0.6;
-
-$color-primary-medium: lighten($color-primary, 20%);
-$color-primary-light: lighten($color-primary, 35%);
-$color-font-link-medium: lighten($color-font-link, 20%);
-$color-font-link-light: lighten($color-font-link, 35%);
-$color-main-medium: lighten($color-main, 20%);
-$color-main-light: lighten($color-main, 35%);
-$color-success-medium: lighten($color-success, 20%);
-$color-success-light: lighten($color-success, 35%);
-$color-notice-medium: lighten($color-notice, 20%);
-$color-notice-light: lighten($color-notice, 35%);
-$color-alert-medium: lighten($color-alert, 20%);
-$color-alert-light: lighten($color-alert, 35%);
-/**/
-
-// Border
-
-$border-thin: 1px solid $color-border;
-$border-thin-light: 1px solid $color-spacer-light;
-$border: 2px solid $color-border;
-$shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
diff --git a/src/css/width.scss b/src/css/width.scss
deleted file mode 100644
index e017de3ea..000000000
--- a/src/css/width.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import "./variables";
-
-%margin-auto {
-    margin-left: auto;
-    margin-right: auto;
-}
-.vn-w-xs {
-    @extend %margin-auto;
-    max-width: $width-xs;
-}
-.vn-w-sm {
-    @extend %margin-auto;
-    max-width: $width-sm;
-}
-.vn-w-md {
-    @extend %margin-auto;
-    max-width: $width-md;
-}
-.vn-w-lg {
-    @extend %margin-auto;
-    max-width: $width-lg;
-}
-.vn-w-xl {
-    @extend %margin-auto;
-    max-width: $width-xl;
-}
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 8032735e1..bc27baf6c 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -170,3 +170,10 @@ const filterOptions = {
         </QCard>
     </div>
 </template>
+
+<style lang="scss" scoped>
+.q-card {
+    width: $width-full;
+    max-width: $width-md;
+}
+</style>

From 8d27ef5402a027d5867fbfe0d808ee01729c2cef Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Tue, 19 Sep 2023 09:42:47 +0200
Subject: [PATCH 05/16] refs #6118 fixResponsive

---
 src/components/FormModel.vue                  |  50 ++--
 src/css/app.scss                              |   6 -
 src/css/quasar.variables.scss                 |   8 -
 src/pages/Claim/Card/ClaimBasicData.vue       | 235 +++++++++---------
 src/pages/Customer/Card/CustomerBasicData.vue | 214 ++++++++--------
 5 files changed, 252 insertions(+), 261 deletions(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 9d0916a8e..5c40dfdd5 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -107,21 +107,28 @@ watch(formUrl, async () => {
         <QIcon name="warning" size="md" class="q-mr-md" />
         <span>{{ t('globals.changesToSave') }}</span>
     </QBanner>
-    <QForm v-if="formData" @submit="save" @reset="reset" class="q-pa-md">
-        <slot name="form" :data="formData" :validate="validate" :filter="filter"></slot>
-        <div class="q-mt-lg">
-            <slot name="actions">
-                <QBtn :label="t('globals.save')" type="submit" color="primary" />
-                <QBtn
-                    :label="t('globals.reset')"
-                    type="reset"
-                    class="q-ml-sm"
-                    color="primary"
-                    flat
-                    :disable="!hasChanges"
-                />
-            </slot>
-        </div>
+    <QForm v-if="formData" @submit="save" @reset="reset" class="q-pa-md formModel">
+        <QCard class="q-pa-lg">
+            <slot
+                name="form"
+                :data="formData"
+                :validate="validate"
+                :filter="filter"
+            ></slot>
+            <div class="q-mt-lg">
+                <slot name="actions">
+                    <QBtn :label="t('globals.save')" type="submit" color="primary" />
+                    <QBtn
+                        :label="t('globals.reset')"
+                        type="reset"
+                        class="q-ml-sm"
+                        color="primary"
+                        flat
+                        :disable="!hasChanges"
+                    />
+                </slot>
+            </div>
+        </QCard>
     </QForm>
     <SkeletonForm v-if="!formData" />
     <QInnerLoading
@@ -130,3 +137,16 @@ watch(formUrl, async () => {
         color="primary"
     />
 </template>
+
+<style lang="scss">
+@media screen and (max-width: 800px) {
+    .q-card > div {
+        flex-direction: column;
+    }
+}
+
+.formModel {
+    max-width: 800px;
+    width: 100%;
+}
+</style>
diff --git a/src/css/app.scss b/src/css/app.scss
index a65fcfec6..3c8cc50b6 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -14,12 +14,6 @@ a {
     color: $orange-4;
 }
 
-@media screen and (max-width: $width-md) {
-    .q-form > div {
-        flex-direction: column;
-    }
-}
-
 // Removes chrome autofill background
 input:-webkit-autofill,
 select:-webkit-autofill {
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 558aa63f0..d6a55ff93 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -48,12 +48,4 @@ $dark: #292929;
 $layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
 $spacing-md: 16px;
 
-// Width from Salix variables.scss
-
-$width-xs: 400px;
-$width-sm: 544px;
-$width-md: 800px;
-$width-lg: 1280px;
-$width-xl: 1600px;
-
 $width-full: 100%;
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index 3dc5b0a59..f6ba556e9 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -92,129 +92,124 @@ const statesFilter = {
     <FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
 
     <div class="column items-center">
-        <QCard>
-            <FormModel
-                :url="`Claims/${route.params.id}`"
-                :url-update="`Claims/updateClaim/${route.params.id}`"
-                :filter="claimFilter"
-                model="claim"
-            >
-                <template #form="{ data, validate, filter }">
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QInput
-                                v-model="data.client.name"
-                                :label="t('claim.basicData.customer')"
-                                disable
-                            />
-                        </div>
-                        <div class="col">
-                            <QInput
-                                v-model="data.created"
-                                mask="####-##-##"
-                                fill-mask="_"
-                                autofocus
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate
-                                                v-model="data.created"
-                                                mask="YYYY-MM-DD"
-                                            >
-                                                <div class="row items-center justify-end">
-                                                    <QBtn
-                                                        v-close-popup
-                                                        label="Close"
-                                                        color="primary"
-                                                        flat
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
-                        </div>
+        <FormModel
+            :url="`Claims/${route.params.id}`"
+            :url-update="`Claims/updateClaim/${route.params.id}`"
+            :filter="claimFilter"
+            model="claim"
+        >
+            <template #form="{ data, validate, filter }">
+                <div class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            v-model="data.client.name"
+                            :label="t('claim.basicData.customer')"
+                            disable
+                        />
                     </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QSelect
-                                v-model="data.workerFk"
-                                :options="workers"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                :label="t('claim.basicData.assignedTo')"
-                                map-options
-                                use-input
-                                @filter="
-                                    (value, update) => filter(value, update, workerFilter)
-                                "
-                                :rules="validate('claim.claimStateFk')"
-                                :input-debounce="0"
-                            >
-                                <template #before>
-                                    <QAvatar color="orange">
-                                        <QImg
-                                            v-if="data.workerFk"
-                                            :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
-                                            spinner-color="white"
-                                        />
-                                    </QAvatar>
-                                </template>
-                            </QSelect>
-                        </div>
-                        <div class="col">
-                            <QSelect
-                                v-model="data.claimStateFk"
-                                :options="claimStates"
-                                option-value="id"
-                                option-label="description"
-                                emit-value
-                                :label="t('claim.basicData.state')"
-                                map-options
-                                use-input
-                                @filter="
-                                    (value, update) => filter(value, update, statesFilter)
-                                "
-                                :rules="validate('claim.claimStateFk')"
-                                :input-debounce="0"
-                            >
-                            </QSelect>
-                        </div>
+                    <div class="col">
+                        <QInput
+                            v-model="data.created"
+                            mask="####-##-##"
+                            fill-mask="_"
+                            autofocus
+                        >
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="data.created" mask="YYYY-MM-DD">
+                                            <div class="row items-center justify-end">
+                                                <QBtn
+                                                    v-close-popup
+                                                    label="Close"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
                     </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QInput
-                                v-model.number="data.packages"
-                                :label="t('claim.basicData.packages')"
-                                :rules="validate('claim.packages')"
-                                type="number"
-                            />
-                        </div>
-                        <div class="col">
-                            <QInput
-                                v-model="data.rma"
-                                :label="t('claim.basicData.returnOfMaterial')"
-                                :rules="validate('claim.rma')"
-                            />
-                        </div>
+                </div>
+                <div class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QSelect
+                            v-model="data.workerFk"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            :label="t('claim.basicData.assignedTo')"
+                            map-options
+                            use-input
+                            @filter="
+                                (value, update) => filter(value, update, workerFilter)
+                            "
+                            :rules="validate('claim.claimStateFk')"
+                            :input-debounce="0"
+                        >
+                            <template #before>
+                                <QAvatar color="orange">
+                                    <QImg
+                                        v-if="data.workerFk"
+                                        :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
+                                        spinner-color="white"
+                                    />
+                                </QAvatar>
+                            </template>
+                        </QSelect>
                     </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QCheckbox
-                                v-model="data.hasToPickUp"
-                                :label="t('claim.basicData.picked')"
-                            />
-                        </div>
+                    <div class="col">
+                        <QSelect
+                            v-model="data.claimStateFk"
+                            :options="claimStates"
+                            option-value="id"
+                            option-label="description"
+                            emit-value
+                            :label="t('claim.basicData.state')"
+                            map-options
+                            use-input
+                            @filter="
+                                (value, update) => filter(value, update, statesFilter)
+                            "
+                            :rules="validate('claim.claimStateFk')"
+                            :input-debounce="0"
+                        >
+                        </QSelect>
                     </div>
-                </template>
-            </FormModel>
-        </QCard>
+                </div>
+                <div class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            v-model.number="data.packages"
+                            :label="t('claim.basicData.packages')"
+                            :rules="validate('claim.packages')"
+                            type="number"
+                        />
+                    </div>
+                    <div class="col">
+                        <QInput
+                            v-model="data.rma"
+                            :label="t('claim.basicData.returnOfMaterial')"
+                            :rules="validate('claim.rma')"
+                        />
+                    </div>
+                </div>
+                <div class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QCheckbox
+                            v-model="data.hasToPickUp"
+                            :label="t('claim.basicData.picked')"
+                        />
+                    </div>
+                </div>
+            </template>
+        </FormModel>
     </div>
 </template>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index bc27baf6c..c9460bce6 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -59,121 +59,111 @@ const filterOptions = {
         auto-load
     />
     <div class="column items-center">
-        <QCard>
-            <FormModel :url="`Clients/${route.params.id}`" model="customer">
-                <template #form="{ data, validate, filter }">
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QInput
-                                v-model="data.socialName"
-                                :label="t('customer.basicData.socialName')"
-                                :rules="validate('client.socialName')"
-                                autofocus
-                            />
-                        </div>
-                        <div class="col">
-                            <QSelect
-                                v-model="data.businessTypeFk"
-                                :options="businessTypes"
-                                option-value="code"
-                                option-label="description"
-                                emit-value
-                                :label="t('customer.basicData.businessType')"
-                                map-options
-                                :rules="validate('client.businessTypeFk')"
-                                :input-debounce="0"
-                            />
-                        </div>
+        <FormModel :url="`Clients/${route.params.id}`" model="customer">
+            <template #form="{ data, validate, filter }">
+                <div class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            v-model="data.socialName"
+                            :label="t('customer.basicData.socialName')"
+                            :rules="validate('client.socialName')"
+                            autofocus
+                        />
                     </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QInput
-                                v-model="data.contact"
-                                :label="t('customer.basicData.contact')"
-                                :rules="validate('client.contact')"
-                                clearable
-                            />
-                        </div>
-                        <div class="col">
-                            <QInput
-                                v-model="data.email"
-                                type="email"
-                                :label="t('customer.basicData.email')"
-                                :rules="validate('client.email')"
-                                clearable
-                            />
-                        </div>
+                    <div class="col">
+                        <QSelect
+                            v-model="data.businessTypeFk"
+                            :options="businessTypes"
+                            option-value="code"
+                            option-label="description"
+                            emit-value
+                            :label="t('customer.basicData.businessType')"
+                            map-options
+                            :rules="validate('client.businessTypeFk')"
+                            :input-debounce="0"
+                        />
                     </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QInput
-                                v-model="data.phone"
-                                :label="t('customer.basicData.phone')"
-                                :rules="validate('client.phone')"
-                                clearable
-                            />
-                        </div>
-                        <div class="col">
-                            <QInput
-                                v-model="data.mobile"
-                                :label="t('customer.basicData.mobile')"
-                                :rules="validate('client.mobile')"
-                                clearable
-                            />
-                        </div>
+                </div>
+                <div class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            v-model="data.contact"
+                            :label="t('customer.basicData.contact')"
+                            :rules="validate('client.contact')"
+                            clearable
+                        />
                     </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QSelect
-                                v-model="data.salesPersonFk"
-                                :options="workers"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                :label="t('customer.basicData.salesPerson')"
-                                map-options
-                                use-input
-                                @filter="
-                                    (value, update) =>
-                                        filter(value, update, filterOptions)
-                                "
-                                :rules="validate('client.salesPersonFk')"
-                                :input-debounce="0"
-                            >
-                                <template #prepend>
-                                    <QAvatar color="orange">
-                                        <QImg
-                                            v-if="data.salesPersonFk"
-                                            :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
-                                            spinner-color="white"
-                                        />
-                                    </QAvatar>
-                                </template>
-                            </QSelect>
-                        </div>
-                        <div class="col">
-                            <QSelect
-                                v-model="data.contactChannelFk"
-                                :options="contactChannels"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                :label="t('customer.basicData.contactChannel')"
-                                map-options
-                                :rules="validate('client.contactChannelFk')"
-                                :input-debounce="0"
-                            />
-                        </div>
+                    <div class="col">
+                        <QInput
+                            v-model="data.email"
+                            type="email"
+                            :label="t('customer.basicData.email')"
+                            :rules="validate('client.email')"
+                            clearable
+                        />
                     </div>
-                </template>
-            </FormModel>
-        </QCard>
+                </div>
+                <div class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            v-model="data.phone"
+                            :label="t('customer.basicData.phone')"
+                            :rules="validate('client.phone')"
+                            clearable
+                        />
+                    </div>
+                    <div class="col">
+                        <QInput
+                            v-model="data.mobile"
+                            :label="t('customer.basicData.mobile')"
+                            :rules="validate('client.mobile')"
+                            clearable
+                        />
+                    </div>
+                </div>
+                <div class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QSelect
+                            v-model="data.salesPersonFk"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            :label="t('customer.basicData.salesPerson')"
+                            map-options
+                            use-input
+                            @filter="
+                                (value, update) => filter(value, update, filterOptions)
+                            "
+                            :rules="validate('client.salesPersonFk')"
+                            :input-debounce="0"
+                        >
+                            <template #prepend>
+                                <QAvatar color="orange">
+                                    <QImg
+                                        v-if="data.salesPersonFk"
+                                        :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
+                                        spinner-color="white"
+                                    />
+                                </QAvatar>
+                            </template>
+                        </QSelect>
+                    </div>
+                    <div class="col">
+                        <QSelect
+                            v-model="data.contactChannelFk"
+                            :options="contactChannels"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            :label="t('customer.basicData.contactChannel')"
+                            map-options
+                            :rules="validate('client.contactChannelFk')"
+                            :input-debounce="0"
+                        />
+                    </div>
+                </div>
+            </template>
+        </FormModel>
     </div>
 </template>
-
-<style lang="scss" scoped>
-.q-card {
-    width: $width-full;
-    max-width: $width-md;
-}
-</style>

From b66c265deeffdd440e156803c778f1ad3926c430 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Tue, 19 Sep 2023 09:43:21 +0200
Subject: [PATCH 06/16] refs #6118 removeVariables

---
 src/css/quasar.variables.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index d6a55ff93..808bf3468 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -47,5 +47,3 @@ $dark-shadow-color: #000;
 $dark: #292929;
 $layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
 $spacing-md: 16px;
-
-$width-full: 100%;

From 7c20ee2a420c92e8a53dc2421ad94864730e1501 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Fri, 13 Oct 2023 13:10:29 +0200
Subject: [PATCH 07/16] refs #6118 modelfixes

---
 src/components/FormModel.vue                  |  8 +-------
 src/components/RowWrapper.vue                 | 11 +++++++++++
 src/pages/Customer/Card/CustomerBasicData.vue |  5 +++--
 3 files changed, 15 insertions(+), 9 deletions(-)
 create mode 100644 src/components/RowWrapper.vue

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 5c40dfdd5..4187c9eea 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -138,13 +138,7 @@ watch(formUrl, async () => {
     />
 </template>
 
-<style lang="scss">
-@media screen and (max-width: 800px) {
-    .q-card > div {
-        flex-direction: column;
-    }
-}
-
+<style lang="scss" scopped>
 .formModel {
     max-width: 800px;
     width: 100%;
diff --git a/src/components/RowWrapper.vue b/src/components/RowWrapper.vue
new file mode 100644
index 000000000..4dadaae60
--- /dev/null
+++ b/src/components/RowWrapper.vue
@@ -0,0 +1,11 @@
+<script setup></script>
+<template>
+    <div class="q-pa-md example-row-equal-width"></div>
+</template>
+
+<style lang="scss" scoped>
+.formModel {
+    max-width: 800px;
+    width: 100%;
+}
+</style>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index c9460bce6..b2c1eee0b 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
+import RowWrapper from 'components/RowWrapper.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -61,7 +62,7 @@ const filterOptions = {
     <div class="column items-center">
         <FormModel :url="`Clients/${route.params.id}`" model="customer">
             <template #form="{ data, validate, filter }">
-                <div class="row q-gutter-md q-mb-md">
+                <RowWrapper class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.socialName"
@@ -83,7 +84,7 @@ const filterOptions = {
                             :input-debounce="0"
                         />
                     </div>
-                </div>
+                </RowWrapper>
                 <div class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput

From 081fdcaba58db02c22226f5cbcf46d022a677abf Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 18 Oct 2023 13:31:23 +0200
Subject: [PATCH 08/16] feat(vnrow): create component vnrow refs #6118

---
 src/components/ui/CardDescriptor.vue     |  2 ++
 src/components/ui/VnRow.vue              | 14 ++++++++++++++
 src/pages/Claim/Card/ClaimBasicData.vue  |  8 ++++++--
 src/pages/Claim/Card/ClaimDescriptor.vue |  3 +++
 4 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ui/VnRow.vue

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 65a89ee28..e4b8740e9 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -41,7 +41,9 @@ async function fetch() {
     if ($props.filter) params.filter = JSON.stringify($props.filter);
 
     const { data } = await axios.get($props.url, { params });
+    console.log(data);
     entity.value = data;
+    console.log('entity.value: ', entity.value);
 
     emit('onFetch', data);
 }
diff --git a/src/components/ui/VnRow.vue b/src/components/ui/VnRow.vue
new file mode 100644
index 000000000..687d0cdf4
--- /dev/null
+++ b/src/components/ui/VnRow.vue
@@ -0,0 +1,14 @@
+<script></script>
+<template>
+    <div id="row">
+        <slot></slot>
+    </div>
+</template>
+<style lang="scss">
+@media screen and (max-width: 800px) {
+    #row {
+        flex-direction: column;
+        background-color: blue;
+    }
+}
+</style>
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index f6ba556e9..a36b08541 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -44,6 +45,7 @@ function setWorkers(data) {
 }
 
 function setClaimStates(data) {
+    console.log(data);
     claimStates.value = data;
     claimStatesCopy.value = data;
 }
@@ -51,6 +53,7 @@ function setClaimStates(data) {
 const workerFilter = {
     options: workers,
     filterFn: (options, value) => {
+        console.log('Filtering workers with value:', value);
         const search = value.toLowerCase();
 
         if (value === '') return workersCopy.value;
@@ -70,6 +73,7 @@ const workerFilter = {
 const statesFilter = {
     options: claimStates,
     filterFn: (options, value) => {
+        console.log('Filtering claim states with value:', value);
         const search = value.toLowerCase();
 
         if (value === '') return claimStatesCopy.value;
@@ -99,7 +103,7 @@ const statesFilter = {
             model="claim"
         >
             <template #form="{ data, validate, filter }">
-                <div class="row q-gutter-md q-mb-md">
+                <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.client.name"
@@ -136,7 +140,7 @@ const statesFilter = {
                             </template>
                         </QInput>
                     </div>
-                </div>
+                </VnRow>
                 <div class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QSelect
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index 914de2eb2..8bfe78cb3 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -17,6 +17,8 @@ const $props = defineProps({
         default: null,
     },
 });
+console.log('Component id:', $props.id);
+if ($props.id === undefined) console.log('$props.id: ', $props.id);
 
 const route = useRoute();
 const { t } = useI18n();
@@ -109,6 +111,7 @@ const setData = (entity) => {
                 <template #value>
                     <span class="link">
                         {{ entity.worker.user.name }}
+                        {{ console.log('Worker userFk:', entity.worker.userFk) }}
                         <WorkerDescriptorProxy :id="entity.worker.userFk" />
                     </span>
                 </template>

From 9dd69dbcb75ff7cbfa0cf48489e4b8a06528fd25 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Thu, 19 Oct 2023 08:45:40 +0200
Subject: [PATCH 09/16] feat(vnRow): new component vnRow refs #6118

---
 src/components/RowWrapper.vue                 | 11 -----------
 src/components/ui/CardDescriptor.vue          |  2 --
 src/components/ui/VnRow.vue                   |  4 +---
 src/pages/Claim/Card/ClaimBasicData.vue       | 15 ++++++---------
 src/pages/Claim/Card/ClaimDescriptor.vue      |  3 ---
 src/pages/Customer/Card/CustomerBasicData.vue | 18 +++++++++---------
 6 files changed, 16 insertions(+), 37 deletions(-)
 delete mode 100644 src/components/RowWrapper.vue

diff --git a/src/components/RowWrapper.vue b/src/components/RowWrapper.vue
deleted file mode 100644
index 4dadaae60..000000000
--- a/src/components/RowWrapper.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup></script>
-<template>
-    <div class="q-pa-md example-row-equal-width"></div>
-</template>
-
-<style lang="scss" scoped>
-.formModel {
-    max-width: 800px;
-    width: 100%;
-}
-</style>
diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index e4b8740e9..65a89ee28 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -41,9 +41,7 @@ async function fetch() {
     if ($props.filter) params.filter = JSON.stringify($props.filter);
 
     const { data } = await axios.get($props.url, { params });
-    console.log(data);
     entity.value = data;
-    console.log('entity.value: ', entity.value);
 
     emit('onFetch', data);
 }
diff --git a/src/components/ui/VnRow.vue b/src/components/ui/VnRow.vue
index 687d0cdf4..c3c951528 100644
--- a/src/components/ui/VnRow.vue
+++ b/src/components/ui/VnRow.vue
@@ -1,14 +1,12 @@
-<script></script>
 <template>
     <div id="row">
         <slot></slot>
     </div>
 </template>
-<style lang="scss">
+<style lang="scss" scopped>
 @media screen and (max-width: 800px) {
     #row {
         flex-direction: column;
-        background-color: blue;
     }
 }
 </style>
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index a36b08541..dd4fe2f88 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -45,7 +45,6 @@ function setWorkers(data) {
 }
 
 function setClaimStates(data) {
-    console.log(data);
     claimStates.value = data;
     claimStatesCopy.value = data;
 }
@@ -53,7 +52,6 @@ function setClaimStates(data) {
 const workerFilter = {
     options: workers,
     filterFn: (options, value) => {
-        console.log('Filtering workers with value:', value);
         const search = value.toLowerCase();
 
         if (value === '') return workersCopy.value;
@@ -73,7 +71,6 @@ const workerFilter = {
 const statesFilter = {
     options: claimStates,
     filterFn: (options, value) => {
-        console.log('Filtering claim states with value:', value);
         const search = value.toLowerCase();
 
         if (value === '') return claimStatesCopy.value;
@@ -141,7 +138,7 @@ const statesFilter = {
                         </QInput>
                     </div>
                 </VnRow>
-                <div class="row q-gutter-md q-mb-md">
+                <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QSelect
                             v-model="data.workerFk"
@@ -187,8 +184,8 @@ const statesFilter = {
                         >
                         </QSelect>
                     </div>
-                </div>
-                <div class="row q-gutter-md q-mb-md">
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model.number="data.packages"
@@ -204,15 +201,15 @@ const statesFilter = {
                             :rules="validate('claim.rma')"
                         />
                     </div>
-                </div>
-                <div class="row q-gutter-md q-mb-md">
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QCheckbox
                             v-model="data.hasToPickUp"
                             :label="t('claim.basicData.picked')"
                         />
                     </div>
-                </div>
+                </VnRow>
             </template>
         </FormModel>
     </div>
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index 8bfe78cb3..914de2eb2 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -17,8 +17,6 @@ const $props = defineProps({
         default: null,
     },
 });
-console.log('Component id:', $props.id);
-if ($props.id === undefined) console.log('$props.id: ', $props.id);
 
 const route = useRoute();
 const { t } = useI18n();
@@ -111,7 +109,6 @@ const setData = (entity) => {
                 <template #value>
                     <span class="link">
                         {{ entity.worker.user.name }}
-                        {{ console.log('Worker userFk:', entity.worker.userFk) }}
                         <WorkerDescriptorProxy :id="entity.worker.userFk" />
                     </span>
                 </template>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index b2c1eee0b..952020a82 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -6,7 +6,7 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
-import RowWrapper from 'components/RowWrapper.vue';
+import VnRow from 'components/ui/VnRow.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -62,7 +62,7 @@ const filterOptions = {
     <div class="column items-center">
         <FormModel :url="`Clients/${route.params.id}`" model="customer">
             <template #form="{ data, validate, filter }">
-                <RowWrapper class="row q-gutter-md q-mb-md">
+                <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.socialName"
@@ -84,8 +84,8 @@ const filterOptions = {
                             :input-debounce="0"
                         />
                     </div>
-                </RowWrapper>
-                <div class="row q-gutter-md q-mb-md">
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.contact"
@@ -103,8 +103,8 @@ const filterOptions = {
                             clearable
                         />
                     </div>
-                </div>
-                <div class="row q-gutter-md q-mb-md">
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.phone"
@@ -121,8 +121,8 @@ const filterOptions = {
                             clearable
                         />
                     </div>
-                </div>
-                <div class="row q-gutter-md q-mb-md">
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QSelect
                             v-model="data.salesPersonFk"
@@ -163,7 +163,7 @@ const filterOptions = {
                             :input-debounce="0"
                         />
                     </div>
-                </div>
+                </VnRow>
             </template>
         </FormModel>
     </div>

From edf6de25106fe591633f7b60f793852b94841fff Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Thu, 19 Oct 2023 14:51:22 +0200
Subject: [PATCH 10/16] feat(app.scss): vn-horizontal flex direction column
 refs #6118

---
 src/components/ui/VnRow.vue                   | 12 ------------
 src/css/app.scss                              |  8 ++++++++
 src/pages/Claim/Card/ClaimBasicData.vue       | 17 ++++++++---------
 src/pages/Customer/Card/CustomerBasicData.vue | 18 +++++++++---------
 4 files changed, 25 insertions(+), 30 deletions(-)
 delete mode 100644 src/components/ui/VnRow.vue

diff --git a/src/components/ui/VnRow.vue b/src/components/ui/VnRow.vue
deleted file mode 100644
index c3c951528..000000000
--- a/src/components/ui/VnRow.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-    <div id="row">
-        <slot></slot>
-    </div>
-</template>
-<style lang="scss" scopped>
-@media screen and (max-width: 800px) {
-    #row {
-        flex-direction: column;
-    }
-}
-</style>
diff --git a/src/css/app.scss b/src/css/app.scss
index 3c8cc50b6..92bddc304 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -39,3 +39,11 @@ body.body--dark {
     --vn-gray: #313131;
     --vn-label: #a8a8a8;
 }
+
+html [vn-horizontal],
+vn-horizontal,
+.vn-horizontal {
+    @media screen and (max-width: 800px) {
+        flex-direction: column;
+    }
+}
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index dd4fe2f88..4a7f61930 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -6,7 +6,6 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -100,7 +99,7 @@ const statesFilter = {
             model="claim"
         >
             <template #form="{ data, validate, filter }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <vn-horizontal class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.client.name"
@@ -137,8 +136,8 @@ const statesFilter = {
                             </template>
                         </QInput>
                     </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                </vn-horizontal>
+                <vn-horizontal class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QSelect
                             v-model="data.workerFk"
@@ -184,8 +183,8 @@ const statesFilter = {
                         >
                         </QSelect>
                     </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                </vn-horizontal>
+                <vn-horizontal class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model.number="data.packages"
@@ -201,15 +200,15 @@ const statesFilter = {
                             :rules="validate('claim.rma')"
                         />
                     </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                </vn-horizontal>
+                <vn-horizontal class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QCheckbox
                             v-model="data.hasToPickUp"
                             :label="t('claim.basicData.picked')"
                         />
                     </div>
-                </VnRow>
+                </vn-horizontal>
             </template>
         </FormModel>
     </div>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 952020a82..230ebc8db 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -6,7 +6,7 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import vn-horizontal from 'components/ui/vn-horizontal.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -62,7 +62,7 @@ const filterOptions = {
     <div class="column items-center">
         <FormModel :url="`Clients/${route.params.id}`" model="customer">
             <template #form="{ data, validate, filter }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <vn-horizontal class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.socialName"
@@ -84,8 +84,8 @@ const filterOptions = {
                             :input-debounce="0"
                         />
                     </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                </vn-horizontal>
+                <vn-horizontal class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.contact"
@@ -103,8 +103,8 @@ const filterOptions = {
                             clearable
                         />
                     </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                </vn-horizontal>
+                <vn-horizontal class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.phone"
@@ -121,8 +121,8 @@ const filterOptions = {
                             clearable
                         />
                     </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                </vn-horizontal>
+                <vn-horizontal class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QSelect
                             v-model="data.salesPersonFk"
@@ -163,7 +163,7 @@ const filterOptions = {
                             :input-debounce="0"
                         />
                     </div>
-                </VnRow>
+                </vn-horizontal>
             </template>
         </FormModel>
     </div>

From 8c3998ea4021df51b174364e7c8d2026456a95e5 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Fri, 20 Oct 2023 14:22:02 +0200
Subject: [PATCH 11/16] feat(vnRow): se cambia de vn-horizontal vnRow por el
 kebab case refs #6118

---
 src/css/app.scss                              |  6 +++---
 src/pages/Claim/Card/ClaimBasicData.vue       | 16 ++++++++--------
 src/pages/Customer/Card/CustomerBasicData.vue | 18 ++++++++----------
 3 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index 92bddc304..fa43bdcef 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -40,9 +40,9 @@ body.body--dark {
     --vn-label: #a8a8a8;
 }
 
-html [vn-horizontal],
-vn-horizontal,
-.vn-horizontal {
+html [vnRow],
+vnRow,
+.vnRow {
     @media screen and (max-width: 800px) {
         flex-direction: column;
     }
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index 4a7f61930..6985e45ab 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -99,7 +99,7 @@ const statesFilter = {
             model="claim"
         >
             <template #form="{ data, validate, filter }">
-                <vn-horizontal class="row q-gutter-md q-mb-md">
+                <vnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.client.name"
@@ -136,8 +136,8 @@ const statesFilter = {
                             </template>
                         </QInput>
                     </div>
-                </vn-horizontal>
-                <vn-horizontal class="row q-gutter-md q-mb-md">
+                </vnRow>
+                <vnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QSelect
                             v-model="data.workerFk"
@@ -183,8 +183,8 @@ const statesFilter = {
                         >
                         </QSelect>
                     </div>
-                </vn-horizontal>
-                <vn-horizontal class="row q-gutter-md q-mb-md">
+                </vnRow>
+                <vnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model.number="data.packages"
@@ -200,15 +200,15 @@ const statesFilter = {
                             :rules="validate('claim.rma')"
                         />
                     </div>
-                </vn-horizontal>
-                <vn-horizontal class="row q-gutter-md q-mb-md">
+                </vnRow>
+                <vnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QCheckbox
                             v-model="data.hasToPickUp"
                             :label="t('claim.basicData.picked')"
                         />
                     </div>
-                </vn-horizontal>
+                </vnRow>
             </template>
         </FormModel>
     </div>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 230ebc8db..b7e6fd283 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -6,8 +6,6 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
-import vn-horizontal from 'components/ui/vn-horizontal.vue';
-
 const route = useRoute();
 const { t } = useI18n();
 const session = useSession();
@@ -62,7 +60,7 @@ const filterOptions = {
     <div class="column items-center">
         <FormModel :url="`Clients/${route.params.id}`" model="customer">
             <template #form="{ data, validate, filter }">
-                <vn-horizontal class="row q-gutter-md q-mb-md">
+                <vnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.socialName"
@@ -84,8 +82,8 @@ const filterOptions = {
                             :input-debounce="0"
                         />
                     </div>
-                </vn-horizontal>
-                <vn-horizontal class="row q-gutter-md q-mb-md">
+                </vnRow>
+                <vnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.contact"
@@ -103,8 +101,8 @@ const filterOptions = {
                             clearable
                         />
                     </div>
-                </vn-horizontal>
-                <vn-horizontal class="row q-gutter-md q-mb-md">
+                </vnRow>
+                <vnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.phone"
@@ -121,8 +119,8 @@ const filterOptions = {
                             clearable
                         />
                     </div>
-                </vn-horizontal>
-                <vn-horizontal class="row q-gutter-md q-mb-md">
+                </vnRow>
+                <vnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QSelect
                             v-model="data.salesPersonFk"
@@ -163,7 +161,7 @@ const filterOptions = {
                             :input-debounce="0"
                         />
                     </div>
-                </vn-horizontal>
+                </vnRow>
             </template>
         </FormModel>
     </div>

From 36cf762857a64c1ee377807559ce35c7ef70dc19 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 25 Oct 2023 18:45:29 +0200
Subject: [PATCH 12/16] feat(VnRow): add new conponenet VnRow refs #6118

---
 src/components/FormModel.vue                  | 14 +++++++++-----
 src/components/ui/VnRow.vue                   | 13 +++++++++++++
 src/pages/Claim/Card/ClaimBasicData.vue       | 17 +++++++++--------
 src/pages/Customer/Card/CustomerBasicData.vue |  2 ++
 4 files changed, 33 insertions(+), 13 deletions(-)
 create mode 100644 src/components/ui/VnRow.vue

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 7f283f3b4..61ad34ea4 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -122,8 +122,10 @@ watch(formUrl, async () => {
         <QIcon name="warning" size="md" class="q-mr-md" />
         <span>{{ t('globals.changesToSave') }}</span>
     </QBanner>
-    <QForm v-if="formData" @submit="save" @reset="reset" class="q-pa-md">
-        <slot name="form" :data="formData" :validate="validate" :filter="filter"></slot>
+    <QForm v-if="formData" @submit="save" @reset="reset" class="q-pa-md" id="formModel">
+        <QCard>
+            <slot name="form" :data="formData" :validate="validate" :filter="filter" />
+        </QCard>
     </QForm>
     <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
         <div v-if="$props.defaultActions">
@@ -156,10 +158,12 @@ watch(formUrl, async () => {
         color="primary"
     />
 </template>
-
-<style lang="scss" scopped>
-.formModel {
+<style lang="scss" scoped>
+#formModel {
     max-width: 800px;
     width: 100%;
 }
+.q-card {
+    padding: 32px;
+}
 </style>
diff --git a/src/components/ui/VnRow.vue b/src/components/ui/VnRow.vue
new file mode 100644
index 000000000..a243d7546
--- /dev/null
+++ b/src/components/ui/VnRow.vue
@@ -0,0 +1,13 @@
+<script></script>
+<template>
+    <div id="row">
+        <slot></slot>
+    </div>
+</template>
+<style lang="scss" scopped>
+@media screen and (max-width: 800px) {
+    #row {
+        flex-direction: column;
+    }
+}
+</style>
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index 6985e45ab..dd4fe2f88 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -99,7 +100,7 @@ const statesFilter = {
             model="claim"
         >
             <template #form="{ data, validate, filter }">
-                <vnRow class="row q-gutter-md q-mb-md">
+                <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.client.name"
@@ -136,8 +137,8 @@ const statesFilter = {
                             </template>
                         </QInput>
                     </div>
-                </vnRow>
-                <vnRow class="row q-gutter-md q-mb-md">
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QSelect
                             v-model="data.workerFk"
@@ -183,8 +184,8 @@ const statesFilter = {
                         >
                         </QSelect>
                     </div>
-                </vnRow>
-                <vnRow class="row q-gutter-md q-mb-md">
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model.number="data.packages"
@@ -200,15 +201,15 @@ const statesFilter = {
                             :rules="validate('claim.rma')"
                         />
                     </div>
-                </vnRow>
-                <vnRow class="row q-gutter-md q-mb-md">
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QCheckbox
                             v-model="data.hasToPickUp"
                             :label="t('claim.basicData.picked')"
                         />
                     </div>
-                </vnRow>
+                </VnRow>
             </template>
         </FormModel>
     </div>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index b7e6fd283..d8d3f3ece 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -6,6 +6,8 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+
 const route = useRoute();
 const { t } = useI18n();
 const session = useSession();

From 157a2b854e42a4deae817d8d7c3943e44562eabf Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 25 Oct 2023 18:49:44 +0200
Subject: [PATCH 13/16] fix(vnRow): refs #6118 remove script label

---
 src/components/ui/VnRow.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ui/VnRow.vue b/src/components/ui/VnRow.vue
index a243d7546..c3c951528 100644
--- a/src/components/ui/VnRow.vue
+++ b/src/components/ui/VnRow.vue
@@ -1,4 +1,3 @@
-<script></script>
 <template>
     <div id="row">
         <slot></slot>

From d31757e63d1c2166e3eae28141761d5b1781d843 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 25 Oct 2023 18:51:38 +0200
Subject: [PATCH 14/16] remove(vnRow): refs #6118 remove html custom elemnt

---
 src/css/app.scss | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index a49ff3f28..0f04c9ad8 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -45,11 +45,3 @@ body.body--dark {
 .bg-vn-dark {
     background-color: var(--vn-dark);
 }
-
-html [vnRow],
-vnRow,
-.vnRow {
-    @media screen and (max-width: 800px) {
-        flex-direction: column;
-    }
-}

From b3df66b5666e78c7c9e0382c7802bcab203fdd17 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 25 Oct 2023 18:55:20 +0200
Subject: [PATCH 15/16] remove(div): refs #6118 unificar los divs en el
 componente

---
 src/components/FormModel.vue                  |  23 +-
 src/pages/Claim/Card/ClaimBasicData.vue       | 237 +++++++++---------
 src/pages/Customer/Card/CustomerBasicData.vue | 213 ++++++++--------
 3 files changed, 238 insertions(+), 235 deletions(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 61ad34ea4..e8a9e4c17 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -122,11 +122,24 @@ watch(formUrl, async () => {
         <QIcon name="warning" size="md" class="q-mr-md" />
         <span>{{ t('globals.changesToSave') }}</span>
     </QBanner>
-    <QForm v-if="formData" @submit="save" @reset="reset" class="q-pa-md" id="formModel">
-        <QCard>
-            <slot name="form" :data="formData" :validate="validate" :filter="filter" />
-        </QCard>
-    </QForm>
+    <div class="column items-center">
+        <QForm
+            v-if="formData"
+            @submit="save"
+            @reset="reset"
+            class="q-pa-md"
+            id="formModel"
+        >
+            <QCard>
+                <slot
+                    name="form"
+                    :data="formData"
+                    :validate="validate"
+                    :filter="filter"
+                />
+            </QCard>
+        </QForm>
+    </div>
     <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
         <div v-if="$props.defaultActions">
             <QBtnGroup push class="q-gutter-x-sm">
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index dd4fe2f88..94e447e13 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -91,126 +91,119 @@ const statesFilter = {
         auto-load
     />
     <FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
-
-    <div class="column items-center">
-        <FormModel
-            :url="`Claims/${route.params.id}`"
-            :url-update="`Claims/updateClaim/${route.params.id}`"
-            :filter="claimFilter"
-            model="claim"
-        >
-            <template #form="{ data, validate, filter }">
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QInput
-                            v-model="data.client.name"
-                            :label="t('claim.basicData.customer')"
-                            disable
-                        />
-                    </div>
-                    <div class="col">
-                        <QInput
-                            v-model="data.created"
-                            mask="####-##-##"
-                            fill-mask="_"
-                            autofocus
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="data.created" mask="YYYY-MM-DD">
-                                            <div class="row items-center justify-end">
-                                                <QBtn
-                                                    v-close-popup
-                                                    label="Close"
-                                                    color="primary"
-                                                    flat
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QSelect
-                            v-model="data.workerFk"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            :label="t('claim.basicData.assignedTo')"
-                            map-options
-                            use-input
-                            @filter="
-                                (value, update) => filter(value, update, workerFilter)
-                            "
-                            :rules="validate('claim.claimStateFk')"
-                            :input-debounce="0"
-                        >
-                            <template #before>
-                                <QAvatar color="orange">
-                                    <QImg
-                                        v-if="data.workerFk"
-                                        :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
-                                        spinner-color="white"
-                                    />
-                                </QAvatar>
-                            </template>
-                        </QSelect>
-                    </div>
-                    <div class="col">
-                        <QSelect
-                            v-model="data.claimStateFk"
-                            :options="claimStates"
-                            option-value="id"
-                            option-label="description"
-                            emit-value
-                            :label="t('claim.basicData.state')"
-                            map-options
-                            use-input
-                            @filter="
-                                (value, update) => filter(value, update, statesFilter)
-                            "
-                            :rules="validate('claim.claimStateFk')"
-                            :input-debounce="0"
-                        >
-                        </QSelect>
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QInput
-                            v-model.number="data.packages"
-                            :label="t('claim.basicData.packages')"
-                            :rules="validate('claim.packages')"
-                            type="number"
-                        />
-                    </div>
-                    <div class="col">
-                        <QInput
-                            v-model="data.rma"
-                            :label="t('claim.basicData.returnOfMaterial')"
-                            :rules="validate('claim.rma')"
-                        />
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QCheckbox
-                            v-model="data.hasToPickUp"
-                            :label="t('claim.basicData.picked')"
-                        />
-                    </div>
-                </VnRow>
-            </template>
-        </FormModel>
-    </div>
+    <FormModel
+        :url="`Claims/${route.params.id}`"
+        :url-update="`Claims/updateClaim/${route.params.id}`"
+        :filter="claimFilter"
+        model="claim"
+    >
+        <template #form="{ data, validate, filter }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model="data.client.name"
+                        :label="t('claim.basicData.customer')"
+                        disable
+                    />
+                </div>
+                <div class="col">
+                    <QInput
+                        v-model="data.created"
+                        mask="####-##-##"
+                        fill-mask="_"
+                        autofocus
+                    >
+                        <template #append>
+                            <QIcon name="event" class="cursor-pointer">
+                                <QPopupProxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <QDate v-model="data.created" mask="YYYY-MM-DD">
+                                        <div class="row items-center justify-end">
+                                            <QBtn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </QDate>
+                                </QPopupProxy>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QSelect
+                        v-model="data.workerFk"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        :label="t('claim.basicData.assignedTo')"
+                        map-options
+                        use-input
+                        @filter="(value, update) => filter(value, update, workerFilter)"
+                        :rules="validate('claim.claimStateFk')"
+                        :input-debounce="0"
+                    >
+                        <template #before>
+                            <QAvatar color="orange">
+                                <QImg
+                                    v-if="data.workerFk"
+                                    :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
+                                    spinner-color="white"
+                                />
+                            </QAvatar>
+                        </template>
+                    </QSelect>
+                </div>
+                <div class="col">
+                    <QSelect
+                        v-model="data.claimStateFk"
+                        :options="claimStates"
+                        option-value="id"
+                        option-label="description"
+                        emit-value
+                        :label="t('claim.basicData.state')"
+                        map-options
+                        use-input
+                        @filter="(value, update) => filter(value, update, statesFilter)"
+                        :rules="validate('claim.claimStateFk')"
+                        :input-debounce="0"
+                    >
+                    </QSelect>
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model.number="data.packages"
+                        :label="t('claim.basicData.packages')"
+                        :rules="validate('claim.packages')"
+                        type="number"
+                    />
+                </div>
+                <div class="col">
+                    <QInput
+                        v-model="data.rma"
+                        :label="t('claim.basicData.returnOfMaterial')"
+                        :rules="validate('claim.rma')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.hasToPickUp"
+                        :label="t('claim.basicData.picked')"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
 </template>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index d8d3f3ece..f3abca2cc 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -59,112 +59,109 @@ const filterOptions = {
         @on-fetch="(data) => (businessTypes = data)"
         auto-load
     />
-    <div class="column items-center">
-        <FormModel :url="`Clients/${route.params.id}`" model="customer">
-            <template #form="{ data, validate, filter }">
-                <vnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QInput
-                            v-model="data.socialName"
-                            :label="t('customer.basicData.socialName')"
-                            :rules="validate('client.socialName')"
-                            autofocus
-                        />
-                    </div>
-                    <div class="col">
-                        <QSelect
-                            v-model="data.businessTypeFk"
-                            :options="businessTypes"
-                            option-value="code"
-                            option-label="description"
-                            emit-value
-                            :label="t('customer.basicData.businessType')"
-                            map-options
-                            :rules="validate('client.businessTypeFk')"
-                            :input-debounce="0"
-                        />
-                    </div>
-                </vnRow>
-                <vnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QInput
-                            v-model="data.contact"
-                            :label="t('customer.basicData.contact')"
-                            :rules="validate('client.contact')"
-                            clearable
-                        />
-                    </div>
-                    <div class="col">
-                        <QInput
-                            v-model="data.email"
-                            type="email"
-                            :label="t('customer.basicData.email')"
-                            :rules="validate('client.email')"
-                            clearable
-                        />
-                    </div>
-                </vnRow>
-                <vnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QInput
-                            v-model="data.phone"
-                            :label="t('customer.basicData.phone')"
-                            :rules="validate('client.phone')"
-                            clearable
-                        />
-                    </div>
-                    <div class="col">
-                        <QInput
-                            v-model="data.mobile"
-                            :label="t('customer.basicData.mobile')"
-                            :rules="validate('client.mobile')"
-                            clearable
-                        />
-                    </div>
-                </vnRow>
-                <vnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QSelect
-                            v-model="data.salesPersonFk"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            :label="t('customer.basicData.salesPerson')"
-                            map-options
-                            use-input
-                            @filter="
-                                (value, update) => filter(value, update, filterOptions)
-                            "
-                            :rules="validate('client.salesPersonFk')"
-                            :input-debounce="0"
-                        >
-                            <template #prepend>
-                                <QAvatar color="orange">
-                                    <QImg
-                                        v-if="data.salesPersonFk"
-                                        :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
-                                        spinner-color="white"
-                                    />
-                                </QAvatar>
-                            </template>
-                        </QSelect>
-                    </div>
-                    <div class="col">
-                        <QSelect
-                            v-model="data.contactChannelFk"
-                            :options="contactChannels"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            :label="t('customer.basicData.contactChannel')"
-                            map-options
-                            :rules="validate('client.contactChannelFk')"
-                            :input-debounce="0"
-                        />
-                    </div>
-                </vnRow>
-            </template>
-        </FormModel>
-    </div>
+
+    <FormModel :url="`Clients/${route.params.id}`" model="customer">
+        <template #form="{ data, validate, filter }">
+            <vnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model="data.socialName"
+                        :label="t('customer.basicData.socialName')"
+                        :rules="validate('client.socialName')"
+                        autofocus
+                    />
+                </div>
+                <div class="col">
+                    <QSelect
+                        v-model="data.businessTypeFk"
+                        :options="businessTypes"
+                        option-value="code"
+                        option-label="description"
+                        emit-value
+                        :label="t('customer.basicData.businessType')"
+                        map-options
+                        :rules="validate('client.businessTypeFk')"
+                        :input-debounce="0"
+                    />
+                </div>
+            </vnRow>
+            <vnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model="data.contact"
+                        :label="t('customer.basicData.contact')"
+                        :rules="validate('client.contact')"
+                        clearable
+                    />
+                </div>
+                <div class="col">
+                    <QInput
+                        v-model="data.email"
+                        type="email"
+                        :label="t('customer.basicData.email')"
+                        :rules="validate('client.email')"
+                        clearable
+                    />
+                </div>
+            </vnRow>
+            <vnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model="data.phone"
+                        :label="t('customer.basicData.phone')"
+                        :rules="validate('client.phone')"
+                        clearable
+                    />
+                </div>
+                <div class="col">
+                    <QInput
+                        v-model="data.mobile"
+                        :label="t('customer.basicData.mobile')"
+                        :rules="validate('client.mobile')"
+                        clearable
+                    />
+                </div>
+            </vnRow>
+            <vnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QSelect
+                        v-model="data.salesPersonFk"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        :label="t('customer.basicData.salesPerson')"
+                        map-options
+                        use-input
+                        @filter="(value, update) => filter(value, update, filterOptions)"
+                        :rules="validate('client.salesPersonFk')"
+                        :input-debounce="0"
+                    >
+                        <template #prepend>
+                            <QAvatar color="orange">
+                                <QImg
+                                    v-if="data.salesPersonFk"
+                                    :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
+                                    spinner-color="white"
+                                />
+                            </QAvatar>
+                        </template>
+                    </QSelect>
+                </div>
+                <div class="col">
+                    <QSelect
+                        v-model="data.contactChannelFk"
+                        :options="contactChannels"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        :label="t('customer.basicData.contactChannel')"
+                        map-options
+                        :rules="validate('client.contactChannelFk')"
+                        :input-debounce="0"
+                    />
+                </div>
+            </vnRow>
+        </template>
+    </FormModel>
 </template>

From 1a44937898f6c0fd0be0cc7ea143b93838459b25 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Thu, 26 Oct 2023 15:02:19 +0200
Subject: [PATCH 16/16] fix(CustomerBasicData): refs #6118 correct component
 format

---
 src/pages/Customer/Card/CustomerBasicData.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index f3abca2cc..08c661f0b 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -62,7 +62,7 @@ const filterOptions = {
 
     <FormModel :url="`Clients/${route.params.id}`" model="customer">
         <template #form="{ data, validate, filter }">
-            <vnRow class="row q-gutter-md q-mb-md">
+            <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <QInput
                         v-model="data.socialName"
@@ -84,8 +84,8 @@ const filterOptions = {
                         :input-debounce="0"
                     />
                 </div>
-            </vnRow>
-            <vnRow class="row q-gutter-md q-mb-md">
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <QInput
                         v-model="data.contact"
@@ -103,8 +103,8 @@ const filterOptions = {
                         clearable
                     />
                 </div>
-            </vnRow>
-            <vnRow class="row q-gutter-md q-mb-md">
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <QInput
                         v-model="data.phone"
@@ -121,8 +121,8 @@ const filterOptions = {
                         clearable
                     />
                 </div>
-            </vnRow>
-            <vnRow class="row q-gutter-md q-mb-md">
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <QSelect
                         v-model="data.salesPersonFk"
@@ -161,7 +161,7 @@ const filterOptions = {
                         :input-debounce="0"
                     />
                 </div>
-            </vnRow>
+            </VnRow>
         </template>
     </FormModel>
 </template>