From 924dea66d484502bcc19bb85c4fa82f2cf40708a Mon Sep 17 00:00:00 2001 From: pablone Date: Tue, 12 Sep 2023 18:27:31 +0200 Subject: [PATCH 01/37] 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 = { - - 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 = { - + From ae1ba448f73091c1cbd60c77a76d78e41391eb7a Mon Sep 17 00:00:00 2001 From: pablone Date: Wed, 13 Sep 2023 16:24:54 +0200 Subject: [PATCH 02/37] 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 = { - - From 39cbc32547a136a457dea68dbf361e493478c085 Mon Sep 17 00:00:00 2001 From: pablone Date: Wed, 13 Sep 2023 16:30:20 +0200 Subject: [PATCH 03/37] 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 Date: Wed, 13 Sep 2023 16:46:09 +0200 Subject: [PATCH 04/37] 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 = { + + From 8d27ef5402a027d5867fbfe0d808ee01729c2cef Mon Sep 17 00:00:00 2001 From: pablone Date: Tue, 19 Sep 2023 09:42:47 +0200 Subject: [PATCH 05/37] 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 () => { {{ t('globals.changesToSave') }} - - -
- - - - -
+ + + +
+ + + + +
+ { color="primary" /> + + 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 = {
- - - +
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 />
- - - +
- - From b66c265deeffdd440e156803c778f1ad3926c430 Mon Sep 17 00:00:00 2001 From: pablone Date: Tue, 19 Sep 2023 09:43:21 +0200 Subject: [PATCH 06/37] 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 7ae098d7795b88d6c50ef8bbf60e54aebf7ee1d5 Mon Sep 17 00:00:00 2001 From: jorgep Date: Wed, 27 Sep 2023 13:41:50 +0200 Subject: [PATCH 07/37] ref #5417 fix filters and view --- src/components/ui/VnFilterPanel.vue | 32 ++++--- src/composables/useArrayData.js | 20 ++-- src/pages/Customer/CustomerPayments.vue | 53 ++++++++--- src/pages/Customer/CustomerPaymentsFilter.vue | 92 ++++++++++++++++++- 4 files changed, 162 insertions(+), 35 deletions(-) diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue index 68b3a7676..0e42ae2bf 100644 --- a/src/components/ui/VnFilterPanel.vue +++ b/src/components/ui/VnFilterPanel.vue @@ -20,6 +20,10 @@ const props = defineProps({ required: false, default: null, }, + showAll: { + type: Boolean, + default: true, + }, }); const emit = defineEmits(['refresh', 'clear']); @@ -38,22 +42,27 @@ onMounted(() => { const isLoading = ref(false); async function search() { - const params = userParams.value; - for (const param in params) { - if (params[param] === '' || params[param] === null) { - delete userParams.value[param]; - delete store.userParams[param]; + if (props.showAll) { + const params = userParams.value; + for (const param in params) { + if (params[param] === '' || params[param] === null) { + delete userParams.value[param]; + delete store.userParams[param]; + } } - } - isLoading.value = true; - await arrayData.addFilter({ params }); - isLoading.value = false; + isLoading.value = true; + await arrayData.addFilter({ params }); + isLoading.value = false; + } else { + store.data = []; + } } async function reload() { isLoading.value = true; - await arrayData.fetch({ append: false }); + if (props.showAll) await arrayData.fetch({ append: false }); + else store.data = []; isLoading.value = false; emit('refresh'); } @@ -61,7 +70,8 @@ async function reload() { async function clearFilters() { userParams.value = {}; isLoading.value = true; - await arrayData.applyFilter({ params: {} }); + if (props.showAll) await arrayData.applyFilter({ params: {} }); + else store.data = []; isLoading.value = false; emit('clear'); diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js index c7808f9a8..08e4eb001 100644 --- a/src/composables/useArrayData.js +++ b/src/composables/useArrayData.js @@ -38,11 +38,11 @@ export function useArrayData(key, userOptions) { 'limit', 'skip', 'userParams', - 'userFilter' + 'userFilter', ]; if (typeof userOptions === 'object') { for (const option in userOptions) { - const isEmpty = userOptions[option] == null || userOptions[option] == '' + const isEmpty = userOptions[option] == null || userOptions[option] == ''; if (isEmpty || !allowedOptions.includes(option)) continue; if (Object.prototype.hasOwnProperty.call(store, option)) { @@ -73,12 +73,11 @@ export function useArrayData(key, userOptions) { Object.assign(params, store.userParams); - store.isLoading = true + store.isLoading = true; const response = await axios.get(store.url, { signal: canceller.signal, params, }); - const { limit } = filter; hasMoreData.value = response.data.length === limit; @@ -94,7 +93,7 @@ export function useArrayData(key, userOptions) { updateStateParams(); } - store.isLoading = false + store.isLoading = false; canceller = null; } @@ -135,8 +134,9 @@ export function useArrayData(key, userOptions) { await fetch({ append: true }); } - async function refresh() { - await fetch({ append: false }); + async function refresh(showAll = true) { + if (showAll) await fetch({ append: false }); + if (!showAll) store.data = []; } function updateStateParams() { @@ -153,8 +153,8 @@ export function useArrayData(key, userOptions) { }); } - const totalRows = computed(() => store.data && store.data.length || 0); - const isLoading = computed(() => store.isLoading || false) + const totalRows = computed(() => (store.data && store.data.length) || 0); + const isLoading = computed(() => store.isLoading || false); return { fetch, @@ -167,6 +167,6 @@ export function useArrayData(key, userOptions) { hasMoreData, totalRows, updateStateParams, - isLoading + isLoading, }; } diff --git a/src/pages/Customer/CustomerPayments.vue b/src/pages/Customer/CustomerPayments.vue index 608aca2af..6b8430d84 100644 --- a/src/pages/Customer/CustomerPayments.vue +++ b/src/pages/Customer/CustomerPayments.vue @@ -110,17 +110,23 @@ function stateColor(row) { - + - +
{{ t('Web Payments') }}