Merge pull request '#6907 - input_clearable_hover' (!198) from 6907_fix_input_clearable_hover into dev

Reviewed-on: verdnatura/salix-front#198 Reviewed-by: Alex Moreno <alexm@verdnatura.es> Reviewed-by: Juan Ferrer <juan@verdnatura.es> Reviewed-by: Javi Gallego <jgallego@verdnatura.es>
2024-04-18 06:42:28 +00:00 · 2024-04-18 06:42:28 +00:00 · 19e5694e09
parent ebd02987b9 5382f306e2
commit 19e5694e09
7 changed files with 114 additions and 74 deletions
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@ -26,7 +26,7 @@ const value = computed({
        emit('update:modelValue', value);
    },
 });
-
+const hover = ref(false);
 const styleAttrs = computed(() => {
    return $props.isOutlined
        ? {
@ -41,6 +41,10 @@ const onEnterPress = () => {
    emit('keyup.enter');
 };

+const handleValue = (val = null) => {
+    value.value = val;
+};
+
 const focus = () => {
    vnInputRef.value.focus();
 };
@ -51,20 +55,33 @@ defineExpose({
 </script>

 <template>
-    <QInput
-        ref="vnInputRef"
-        v-model="value"
-        v-bind="{ ...$attrs, ...styleAttrs }"
-        type="text"
-        :class="{ required: $attrs.required }"
-        @keyup.enter="onEnterPress()"
+    <div
+        @mouseover="hover = true"
+        @mouseleave="hover = false"
        :rules="$attrs.required ? [requiredFieldRule] : null"
    >
-        <template v-if="$slots.prepend" #prepend>
-            <slot name="prepend" />
-        </template>
-        <template v-if="$slots.append" #append>
-            <slot name="append" />
-        </template>
-    </QInput>
+        <QInput
+            ref="vnInputRef"
+            v-model="value"
+            v-bind="{ ...$attrs, ...styleAttrs }"
+            :type="$attrs.type"
+            :class="{ required: $attrs.required }"
+            @keyup.enter="onEnterPress()"
+            :clearable="false"
+        >
+            <template v-if="$slots.prepend" #prepend>
+                <slot name="prepend" />
+            </template>
+
+            <template #append>
+                <slot name="append" v-if="$slots.append" />
+                <QIcon
+                    name="close"
+                    size="xs"
+                    v-if="hover && value"
+                    @click="handleValue(null)"
+                ></QIcon>
+            </template>
+        </QInput>
+    </div>
 </template>
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@ -1,7 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue';
-import VnInput from 'components/common/VnInput.vue';
-import isValidDate from "filters/isValidDate";
+import isValidDate from 'filters/isValidDate';

 const props = defineProps({
    modelValue: {
@ -17,6 +16,8 @@ const props = defineProps({
        default: false,
    },
 });
+const hover = ref(false);
+
 const emit = defineEmits(['update:modelValue']);

 const joinDateAndTime = (date, time) => {
@ -77,30 +78,39 @@ const styleAttrs = computed(() => {
 </script>

 <template>
-    <VnInput
-        class="vn-input-date"
-        :model-value="displayDate(value)"
-        v-bind="{ ...$attrs, ...styleAttrs }"
-        readonly
-        @click="isPopupOpen = true"
-    >
-        <template #append>
-            <QIcon name="event" class="cursor-pointer">
-                <QPopupProxy
-                    v-model="isPopupOpen"
-                    cover
-                    transition-show="scale"
-                    transition-hide="scale"
-                    :no-parent-event="props.readonly"
-                >
-                    <QDate
-                        :model-value="formatDate(value)"
-                        @update:model-value="onDateUpdate"
-                    />
-                </QPopupProxy>
-            </QIcon>
-        </template>
-    </VnInput>
+    <div @mouseover="hover = true" @mouseleave="hover = false">
+        <QInput
+            class="vn-input-date"
+            readonly
+            :model-value="displayDate(value)"
+            v-bind="{ ...$attrs, ...styleAttrs }"
+            @click="isPopupOpen = true"
+        >
+            <template #append>
+                <QIcon
+                    name="close"
+                    size="xs"
+                    v-if="hover && value"
+                    @click="onDateUpdate(null)"
+                ></QIcon>
+                <QIcon name="event" class="cursor-pointer">
+                    <QPopupProxy
+                        v-model="isPopupOpen"
+                        cover
+                        transition-show="scale"
+                        transition-hide="scale"
+                        :no-parent-event="props.readonly"
+                    >
+                        <QDate
+                            :today-btn="true"
+                            :model-value="formatDate(value)"
+                            @update:model-value="onDateUpdate"
+                        />
+                    </QPopupProxy>
+                </QIcon>
+            </template>
+        </QInput>
+    </div>
 </template>

 <style lang="scss">
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@ -2,7 +2,6 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import isValidDate from 'filters/isValidDate';
-import VnInput from "components/common/VnInput.vue";

 const props = defineProps({
    modelValue: {
@ -20,6 +19,7 @@ const props = defineProps({
 });
 const { t } = useI18n();
 const emit = defineEmits(['update:modelValue']);
+
 const value = computed({
    get() {
        return props.modelValue;
@ -27,12 +27,7 @@ const value = computed({
    set(value) {
        const [hours, minutes] = value.split(':');
        const date = new Date(props.modelValue);
-        date.setHours(
-            Number.parseInt(hours) || 0,
-            Number.parseInt(minutes) || 0,
-            0,
-            0
-        );
+        date.setHours(Number.parseInt(hours) || 0, Number.parseInt(minutes) || 0, 0, 0);
        emit('update:modelValue', value ? date.toISOString() : null);
    },
 });
@ -71,7 +66,7 @@ const styleAttrs = computed(() => {
 </script>

 <template>
-    <VnInput
+    <QInput
        class="vn-input-time"
        readonly
        :model-value="formatTime(value)"
@ -79,7 +74,7 @@ const styleAttrs = computed(() => {
        @click="isPopupOpen = true"
    >
        <template #append>
-            <QIcon name="event" class="cursor-pointer">
+            <QIcon name="schedule" class="cursor-pointer">
                <QPopupProxy
                    v-model="isPopupOpen"
                    cover
@ -111,7 +106,7 @@ const styleAttrs = computed(() => {
                </QPopupProxy>
            </QIcon>
        </template>
-    </VnInput>
+    </QInput>
 </template>

 <style lang="scss">
--- a/test/cypress/integration/VnLocation.spec.js
+++ b/test/cypress/integration/VnLocation.spec.js
@ -1,48 +1,64 @@
-const locationOptions ='[role="listbox"] > div.q-virtual-scroll__content > .q-item'
+const locationOptions = '[role="listbox"] > div.q-virtual-scroll__content > .q-item';
 describe('VnLocation', () => {
-    describe('Create',()=>{
-        const inputLocation = ':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
+    describe('Create', () => {
+        const inputLocation =
+            '.q-form .q-card> :nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
        beforeEach(() => {
            cy.viewport(1280, 720);
            cy.login('developer');
            cy.visit('/#/worker/create');
            cy.waitForElement('.q-card');
        });
-       it('Show all options', function() {
+        it('Show all options', function () {
            cy.get(inputLocation).click();
-            cy.get(locationOptions).should('have.length.at.least',5);
+            cy.get(locationOptions).should('have.length.at.least', 5);
        });
-       it('input filter location as "al"', function() {
+        it('input filter location as "al"', function () {
            cy.get(inputLocation).click();
            cy.get(inputLocation).clear();
            cy.get(inputLocation).type('al');
-            cy.get(locationOptions).should('have.length.at.least',3);
+            cy.get(locationOptions).should('have.length.at.least', 3);
        });
-        it('input filter location as "ecuador"', function() {
+        it('input filter location as "ecuador"', function () {
            cy.get(inputLocation).click();
            cy.get(inputLocation).clear();
            cy.get(inputLocation).type('ecuador');
-            cy.get(locationOptions).should('have.length.at.least',1);
+            cy.get(locationOptions).should('have.length.at.least', 1);
            cy.get(`${locationOptions}:nth-child(1)`).click();
-            cy.get(':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon').click();
+            cy.get(inputLocation + '> :nth-child(2) > .q-icon').click();
        });
    });
-    describe('Fiscal-data',()=>{
+    describe('Fiscal-data', () => {
        beforeEach(() => {
            cy.viewport(1280, 720);
            cy.login('developer');
-            cy.visit('/#/supplier/567/fiscal-data', {timeout: 2000});
+            cy.visit('/#/supplier/567/fiscal-data', { timeout: 2000 });
            cy.waitForElement('.q-card');
        });
-        it('Create postCode', function() {
-            cy.get(':nth-child(6) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(3) > .q-icon').click();
+        it('Create postCode', function () {
+            cy.get(
+                ':nth-child(6) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(3) > .q-icon'
+            ).click();
            cy.get(' .q-card > h1').should('have.text', 'New postcode');
-            cy.get('.q-card > :nth-child(4) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(1) > input').clear('12');
-            cy.get('.q-card > :nth-child(4) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(1) > input').type('1234453');
-            cy.selectOption('.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4) > :nth-child(2) > .q-field > .q-field__inner > .q-field__control ', 'Valencia');
-            cy.selectOption('.q-dialog__inner > .column > #formModel > .q-card > :nth-child(5) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control ', 'Province one');
-            cy.selectOption('.q-dialog__inner > .column > #formModel > .q-card > :nth-child(5) > :nth-child(2) > .q-field > .q-field__inner > .q-field__control ', 'España');
+            cy.get(
+                '.q-card > :nth-child(4) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(1) > input'
+            ).clear('12');
+            cy.get(
+                '.q-card > :nth-child(4) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(1) > input'
+            ).type('1234453');
+            cy.selectOption(
+                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4) > :nth-child(2) > .q-field > .q-field__inner > .q-field__control ',
+                'Valencia'
+            );
+            cy.selectOption(
+                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(5) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control ',
+                'Province one'
+            );
+            cy.selectOption(
+                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(5) > :nth-child(2) > .q-field > .q-field__inner > .q-field__control ',
+                'España'
+            );
            cy.get('.q-mt-lg > .q-btn--standard').click();
        });
    });
-})
+});
--- a/test/cypress/integration/claim/claimDevelopment.spec.js
+++ b/test/cypress/integration/claim/claimDevelopment.spec.js
@ -8,6 +8,7 @@ describe('ClaimDevelopment', () => {
        cy.viewport(1920, 1080);
        cy.login('developer');
        cy.visit(`/#/claim/${claimId}/development`);
+        cy.waitForElement('tbody');
    });

    it('should reset line', () => {
--- a/test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js
@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 describe('InvoiceInBasicData', () => {
-    const selects = ':nth-child(1) > :nth-child(1) > .q-field';
+    const selects = '.q-form .q-card>:nth-child(1) > :nth-child(1) > .q-field';
    const appendBtns = 'label button';
    const dialogAppendBtns = '.q-dialog label button';
    const dialogInputs = '.q-dialog input';
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@ -72,6 +72,7 @@ Cypress.Commands.add('getValue', (selector) => {

 // Fill Inputs
 Cypress.Commands.add('selectOption', (selector, option) => {
+    cy.waitForElement(selector);
    cy.get(selector).find('.q-select__dropdown-icon').click();
    cy.get('.q-menu .q-item').contains(option).click();
 });
@ -183,11 +184,11 @@ Cypress.Commands.add('closeSideMenu', (element) => {

 Cypress.Commands.add('clearSearchbar', (element) => {
    if (element) cy.waitForElement(element);
-    cy.get('#searchbar > form > label > div:nth-child(1) input').clear();
+    cy.get('#searchbar > form > div:nth-child(1) > label > div:nth-child(1) input').clear();
 });

 Cypress.Commands.add('writeSearchbar', (value) => {
-    cy.get('#searchbar > form > label > div:nth-child(1) input').type(value);
+    cy.get('#searchbar > form > div:nth-child(1) > label > div:nth-child(1) input').type(value);
 });
 Cypress.Commands.add('validateContent', (selector, expectedValue) => {
    cy.get(selector).should('have.text', expectedValue);