From df5eb9f27ed5f2e1bbbf8192b8f68f256a95e93d Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Tue, 20 Dec 2022 11:01:13 +0100
Subject: [PATCH] refactor styles and add image not found to worker descriptor

---
 src/i18n/en/index.js                       |  1 +
 src/i18n/es/index.js                       |  1 +
 src/pages/Worker/Card/WorkerDescriptor.vue | 15 ++++++++++++++-
 src/pages/Worker/WorkerList.vue            | 14 ++++++--------
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 89c4e3947..ca398d87c 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -376,6 +376,7 @@ export default {
             role: 'Role',
             sipExtension: 'Extension',
         },
+        imageNotFound: 'Image not found',
     },
     components: {
         topbar: {},
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index d0c370977..bc503fe96 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -375,6 +375,7 @@ export default {
             role: 'Rol',
             sipExtension: 'Extensión',
         },
+        imageNotFound: 'No se ha encontrado la imagen',
     },
     components: {
         topbar: {},
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 513bb4255..bd08fb1c1 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -77,7 +77,20 @@ function getWorkerAvatar() {
 <template>
     <card-descriptor v-if="worker" module="Worker" :data="worker" :description="worker.user.name">
         <template #before>
-            <q-img :src="getWorkerAvatar()" class="q-mb-md" />
+            <q-img :src="getWorkerAvatar()" class="q-mb-md">
+                <template #error>
+                    <div class="absolute-full bg-grey-10 text-center q-pa-md flex flex-center">
+                        <div>
+                            <div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
+                                <q-icon name="vn:claims" />
+                            </div>
+                            <div class="text-grey-5" style="opacity: 0.4">
+                                {{ t('worker.imageNotFound') }}
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </q-img>
         </template>
         <template #body>
             <q-list>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index 622f858fd..fc28eba96 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -77,14 +77,12 @@ function viewSummary(id) {
                         </q-item-section>
                         <q-separator vertical />
                         <q-card-actions vertical class="justify-between">
-                            <q-item-section side class="q-pa-md">
-                                <q-btn flat round color="orange" icon="preview" @click="viewSummary(row.id)">
-                                    <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
-                                </q-btn>
-                                <q-btn flat round color="grey-7" icon="schedule" @click="navigate(row.id)">
-                                    <q-tooltip>{{ t('worker.list.schedule') }}</q-tooltip>
-                                </q-btn>
-                            </q-item-section>
+                            <q-btn flat round color="orange" icon="preview" @click="viewSummary(row.id)">
+                                <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
+                            </q-btn>
+                            <q-btn flat round color="grey-7" icon="schedule" @click="navigate(row.id)">
+                                <q-tooltip>{{ t('worker.list.schedule') }}</q-tooltip>
+                            </q-btn>
                         </q-card-actions>
                     </q-item>
                 </q-card>