feat: #7323 handle workerPhoto

src/css/app.scss

@@ -268,3 +268,10 @@ input::-webkit-inner-spin-button {
         max-width: 400px;
     }
 }
+.edit-photo-btn {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    z-index: 1;
+    cursor: pointer;
+}

src/pages/Item/Card/ItemDescriptorImage.vue

@@ -138,14 +138,6 @@ en:
 </i18n>
 
 <style lang="scss" scoped>
-.edit-photo-btn {
-    position: absolute;
-    right: 12px;
-    bottom: 12px;
-    z-index: 1;
-    cursor: pointer;
-}
-
 .separation-borders {
     border-left: 1px solid $white;
     border-right: 1px solid $white;

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -10,6 +10,7 @@ import useCardDescription from 'src/composables/useCardDescription';
 import { useState } from 'src/composables/useState';
 import axios from 'axios';
 import VnImg from 'src/components/ui/VnImg.vue';
+import EditPictureForm from 'components/EditPictureForm.vue';
 
 const $props = defineProps({
     id: {
@@ -18,6 +19,7 @@ const $props = defineProps({
         default: null,
     },
 });
+const image = ref(null);
 
 const route = useRoute();
 const { t } = useI18n();
@@ -25,6 +27,10 @@ const state = useState();
 const user = state.getUser();
 const changePasswordFormDialog = ref(null);
 const cardDescriptorRef = ref(null);
+const showEditPhotoForm = ref(false);
+const toggleEditPictureForm = () => {
+    showEditPhotoForm.value = !showEditPhotoForm.value;
+};
 
 const entityId = computed(() => {
     return $props.id || route.params.id;
@@ -99,7 +105,9 @@ const handleExcluded = async () => {
 
     workerExcluded.value = !workerExcluded.value;
 };
-
+const handlePhotoUpdated = (evt = false) => {
+    image.value.reload(evt);
+};
 const refetch = async () => await cardDescriptorRef.value.getData();
 </script>
 <template>
@@ -144,27 +152,49 @@ const refetch = async () => await cardDescriptorRef.value.getData();
             </QItem>
         </template>
         <template #before>
-            <VnImg
-                :id="parseInt(entityId)"
-                collection="user"
-                resolution="520x520"
-                class="photo"
-            >
-                <template #error>
-                    <div
-                        class="absolute-full picture text-center q-pa-md flex flex-center"
-                    >
-                        <div>
-                            <div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
-                                <QIcon name="vn:claims" />
-                            </div>
-                            <div class="text-grey-5" style="opacity: 0.4">
-                                {{ t('worker.imageNotFound') }}
+            <div class="relative-position">
+                <VnImg
+                    ref="image"
+                    :id="parseInt(entityId)"
+                    collection="user"
+                    resolution="520x520"
+                    class="photo"
+                >
+                    <template #error>
+                        <div
+                            class="absolute-full picture text-center q-pa-md flex flex-center"
+                        >
+                            <div>
+                                <div
+                                    class="text-grey-5"
+                                    style="opacity: 0.4; font-size: 5vh"
+                                >
+                                    <QIcon name="vn:claims" />
+                                </div>
+                                <div class="text-grey-5" style="opacity: 0.4">
+                                    {{ t('worker.imageNotFound') }}
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </template>
-            </VnImg>
+                    </template> </VnImg
+                ><QBtn
+                    color="primary"
+                    size="lg"
+                    round
+                    class="edit-photo-btn"
+                    @click="toggleEditPictureForm()"
+                >
+                    <QIcon name="edit" size="sm" />
+                    <QDialog ref="editPhotoFormDialog" v-model="showEditPhotoForm">
+                        <EditPictureForm
+                            collection="user"
+                            :id="entityId"
+                            @close-form="toggleEditPictureForm()"
+                            @on-photo-uploaded="handlePhotoUpdated"
+                        />
+                    </QDialog>
+                </QBtn>
+            </div>
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('worker.card.name')" :value="entity.user?.nickname" />