diff --git a/src/css/app.scss b/src/css/app.scss index c233b14f05..525fb2a95b 100644 --- a/src/css/app.scss +++ b/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; +} diff --git a/src/pages/Item/Card/ItemDescriptorImage.vue b/src/pages/Item/Card/ItemDescriptorImage.vue index d923dd28f7..d83f534b87 100644 --- a/src/pages/Item/Card/ItemDescriptorImage.vue +++ b/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; diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue index 8fbb23ef87..154db1258a 100644 --- a/src/pages/Worker/Card/WorkerDescriptor.vue +++ b/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" />