From d2d80645d050e4147a044e98375b8be0a27b1112 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Tue, 21 May 2024 19:12:40 +0200
Subject: [PATCH 1/2] fix: refs #7187 fix responsive

---
 src/pages/Worker/Card/WorkerPda.vue           | 97 ++++++++-----------
 .../integration/worker/workerPda.spec.js      | 11 ++-
 2 files changed, 49 insertions(+), 59 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerPda.vue b/src/pages/Worker/Card/WorkerPda.vue
index 976469476..8e971a02c 100644
--- a/src/pages/Worker/Card/WorkerPda.vue
+++ b/src/pages/Worker/Card/WorkerPda.vue
@@ -71,52 +71,36 @@ function reloadData() {
                     bordered
                     :key="row.id"
                     v-for="row of rows"
-                    class="card q-pt-xs q-mb-sm"
+                    class="card q-px-md q-mb-sm"
                 >
-                    <QItem>
-                        <QItemSection side-left>
-                            <VnRow>
-                                <QField
-                                    :label="t('worker.pda.currentPDA')"
-                                    :model-value="row?.deviceProductionFk"
-                                    disable
-                                >
-                                    <template #control>
-                                        <div tabindex="0" style="padding: none">
-                                            <span>Id: </span>
-                                            <span>
-                                                {{ row?.deviceProductionFk }}&nbsp;
-                                            </span>
-                                            <span>{{ t('Model') }}: </span>
-                                            <span>
-                                                {{ row?.deviceProduction?.modelFk }}&nbsp;
-                                            </span>
-                                            <span>{{ t('SIM serial number') }}: </span>
-                                            <span>
-                                                {{
-                                                    row?.deviceProduction?.serialNumber
-                                                }}&nbsp;
-                                            </span>
-                                        </div>
-                                    </template>
-                                </QField>
-                                <QField
-                                    :label="t('Current SIM')"
-                                    :model-value="row?.simSerialNumber"
-                                    disable
-                                >
-                                    <template #control>
-                                        <div tabindex="0">{{ row?.simSerialNumber }}</div>
-                                    </template>
-                                </QField>
-                            </VnRow>
-                        </QItemSection>
-                        <QItemSection side>
+                    <VnRow>
+                        <VnInput
+                            :label="t('worker.pda.currentPDA')"
+                            :model-value="row?.deviceProductionFk"
+                            disable
+                        />
+                        <VnInput
+                            :label="t('Model')"
+                            :model-value="row?.deviceProduction?.modelFk"
+                            disable
+                        />
+                        <VnInput
+                            :label="t('Serial number')"
+                            :model-value="row?.deviceProduction?.serialNumber"
+                            disable
+                        />
+                        <VnInput
+                            :label="t('Current SIM')"
+                            :model-value="row?.simSerialNumber"
+                            disable
+                        />
+
+                        <div class="icon">
                             <QIcon
                                 name="delete"
                                 size="sm"
-                                class="cursor-pointer"
                                 color="primary"
+                                class="cursor-pointer"
                                 @click="
                                     openConfirmationModal(
                                         t(`Remove PDA`),
@@ -129,8 +113,8 @@ function reloadData() {
                                     {{ t('worker.pda.removePDA') }}
                                 </QTooltip>
                             </QIcon>
-                        </QItemSection>
-                    </QItem>
+                        </div>
+                    </VnRow>
                 </QCard>
             </template>
         </VnPaginate>
@@ -187,26 +171,23 @@ function reloadData() {
     </QPage>
 </template>
 <style lang="scss" scoped>
-.centerCard {
-    padding: 5%;
-    width: 100%;
-    max-width: 70%;
-    margin: 0 auto;
-}
-.label {
-    color: red;
-}
-.q-field {
-    height: 65px;
+.icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 2%;
+    max-width: 4%;
 }
 </style>
 <i18n>
 es:
+    Model: Modelo
+    Serial number: Número de serie
+    Current SIM: SIM actual
+    Add new device: Añadir nuevo dispositivo
+    PDA deallocated: PDA desasignada
     Remove PDA: Eliminar PDA
     Do you want to remove this PDA?: ¿Desea eliminar este PDA?
-    PDA deallocated: PDA desasignada
-    SIM serial number: Número de serie de la SIM
-    Model: Modelo
+    You can only have one PDA: Solo puedes tener un PDA si no eres autonomo
     This PDA is already assigned to another user: Este PDA ya está asignado a otro usuario
-    Add new device: Añadir nuevo dispositivo
 </i18n>
diff --git a/test/cypress/integration/worker/workerPda.spec.js b/test/cypress/integration/worker/workerPda.spec.js
index 9af994a70..e27127202 100644
--- a/test/cypress/integration/worker/workerPda.spec.js
+++ b/test/cypress/integration/worker/workerPda.spec.js
@@ -14,8 +14,17 @@ describe('WorkerPda', () => {
         cy.get('.q-notification__message').should('have.text', 'Data created');
     });
 
+    it('assign more than 1 pda', () => {
+        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get(deviceProductionField).type('{downArrow}{enter}');
+        cy.get('.vn-row > #simSerialNumber').type('123{enter}');
+        cy.get(
+            ':nth-child(1) > .q-notification__wrapper > .q-notification__content > .q-notification__message'
+        ).should('have.text', 'You can only have one PDA');
+    });
+
     it('delete pda', () => {
-        cy.get('.q-card > .q-item > .q-item__section--side > .q-icon').click();
+        cy.get('.icon > .q-icon').click();
         cy.get(
             '.q-card__actions > .q-btn--unelevated > .q-btn__content > .block'
         ).click();

From 410012df5504a8570c24a44230a0479e7717946e Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Thu, 23 May 2024 14:24:58 +0200
Subject: [PATCH 2/2] fix: refs #7187 fix div

---
 src/pages/Worker/Card/WorkerPda.vue           | 46 ++++++++-----------
 .../integration/worker/workerPda.spec.js      | 11 +----
 2 files changed, 21 insertions(+), 36 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerPda.vue b/src/pages/Worker/Card/WorkerPda.vue
index 8e971a02c..513edcf45 100644
--- a/src/pages/Worker/Card/WorkerPda.vue
+++ b/src/pages/Worker/Card/WorkerPda.vue
@@ -71,7 +71,7 @@ function reloadData() {
                     bordered
                     :key="row.id"
                     v-for="row of rows"
-                    class="card q-px-md q-mb-sm"
+                    class="card q-px-md q-mb-sm container"
                 >
                     <VnRow>
                         <VnInput
@@ -94,26 +94,23 @@ function reloadData() {
                             :model-value="row?.simSerialNumber"
                             disable
                         />
-
-                        <div class="icon">
-                            <QIcon
-                                name="delete"
-                                size="sm"
-                                color="primary"
-                                class="cursor-pointer"
-                                @click="
-                                    openConfirmationModal(
-                                        t(`Remove PDA`),
-                                        t('Do you want to remove this PDA?'),
-                                        () => deallocatePDA(row.deviceProductionFk)
-                                    )
-                                "
-                            >
-                                <QTooltip>
-                                    {{ t('worker.pda.removePDA') }}
-                                </QTooltip>
-                            </QIcon>
-                        </div>
+                        <QBtn
+                            flat
+                            icon="delete"
+                            color="primary"
+                            class="btn-delete"
+                            @click="
+                                openConfirmationModal(
+                                    t(`Remove PDA`),
+                                    t('Do you want to remove this PDA?'),
+                                    () => deallocatePDA(row.deviceProductionFk)
+                                )
+                            "
+                        >
+                            <QTooltip>
+                                {{ t('worker.pda.removePDA') }}
+                            </QTooltip>
+                        </QBtn>
                     </VnRow>
                 </QCard>
             </template>
@@ -171,12 +168,9 @@ function reloadData() {
     </QPage>
 </template>
 <style lang="scss" scoped>
-.icon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 2%;
+.btn-delete {
     max-width: 4%;
+    margin-top: 30px;
 }
 </style>
 <i18n>
diff --git a/test/cypress/integration/worker/workerPda.spec.js b/test/cypress/integration/worker/workerPda.spec.js
index e27127202..4184735ae 100644
--- a/test/cypress/integration/worker/workerPda.spec.js
+++ b/test/cypress/integration/worker/workerPda.spec.js
@@ -14,17 +14,8 @@ describe('WorkerPda', () => {
         cy.get('.q-notification__message').should('have.text', 'Data created');
     });
 
-    it('assign more than 1 pda', () => {
-        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
-        cy.get(deviceProductionField).type('{downArrow}{enter}');
-        cy.get('.vn-row > #simSerialNumber').type('123{enter}');
-        cy.get(
-            ':nth-child(1) > .q-notification__wrapper > .q-notification__content > .q-notification__message'
-        ).should('have.text', 'You can only have one PDA');
-    });
-
     it('delete pda', () => {
-        cy.get('.icon > .q-icon').click();
+        cy.get('.btn-delete').click();
         cy.get(
             '.q-card__actions > .q-btn--unelevated > .q-btn__content > .block'
         ).click();