|
|
@@ -28,30 +28,14 @@ Si la propriété 'upload' est à 'true', propose aussi un input pour uploader u
|
|
|
</v-row>
|
|
|
</template>
|
|
|
</v-img>
|
|
|
-
|
|
|
- <div>
|
|
|
- <div v-if="upload" class="click-action hover" @click="openUpload=true"><v-icon>mdi-upload</v-icon></div>
|
|
|
- <UiInputImage
|
|
|
- v-if="openUpload"
|
|
|
- @close="openUpload=false"
|
|
|
- :existingImageId="id"
|
|
|
- :field="field"
|
|
|
- :ownerId="ownerId"
|
|
|
- @update="$emit('update', $event, field); openUpload=false"
|
|
|
- @reload="onReload"
|
|
|
- @reset="reset"
|
|
|
- ></UiInputImage>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</main>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import {ref, Ref} from "@vue/reactivity";
|
|
|
import {useImageFetch} from "~/composables/data/useImageFetch";
|
|
|
import {onUnmounted, watch, WatchStopHandle} from "@vue/runtime-core";
|
|
|
-import {useImageManager} from "~/composables/data/useImageManager";
|
|
|
import ImageManager from "~/services/data/imageManager";
|
|
|
|
|
|
const props = defineProps({
|
|
|
@@ -87,31 +71,18 @@ const props = defineProps({
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-const { imageManager } = useImageManager()
|
|
|
const { fetch } = useImageFetch()
|
|
|
|
|
|
const defaultImagePath = props.defaultImage ?? ImageManager.defaultImage
|
|
|
|
|
|
-const openUpload: Ref<Boolean> = ref(false)
|
|
|
-
|
|
|
-const { data: imageSrc, pending, refresh } = fetch(props.id ?? null, defaultImagePath, props.height, props.width)
|
|
|
-
|
|
|
-const unwatch: WatchStopHandle = watch(() => props.id, async (newValue, oldValue) => {
|
|
|
- await refresh()
|
|
|
-})
|
|
|
-
|
|
|
-const onReload = async () => {
|
|
|
- await refresh()
|
|
|
- openUpload.value = false
|
|
|
-}
|
|
|
+const { data: imageSrc, pending, refresh } = fetch(props.id ?? null, defaultImagePath, props.height, props.width) as any
|
|
|
|
|
|
/**
|
|
|
- * Quand on souhaite faire un reset de l'image
|
|
|
+ * Si l'id change, on recharge l'image
|
|
|
*/
|
|
|
-const reset = () => {
|
|
|
- imageSrc.value = defaultImagePath
|
|
|
- openUpload.value = false
|
|
|
-}
|
|
|
+const unwatch: WatchStopHandle = watch(() => props.id, async () => {
|
|
|
+ await refresh()
|
|
|
+})
|
|
|
|
|
|
/**
|
|
|
* Lorsqu'on démonte le component, on supprime le watcher
|
|
|
@@ -129,34 +100,5 @@ onUnmounted(() => {
|
|
|
img {
|
|
|
max-width: 100%;
|
|
|
}
|
|
|
-
|
|
|
- .click-action {
|
|
|
- position: absolute;
|
|
|
- top:0;
|
|
|
- left:0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: transparent;
|
|
|
- opacity: 0;
|
|
|
- transition: all .2s;
|
|
|
- &:hover {
|
|
|
- opacity: 1;
|
|
|
- background: rgb(var(--v-theme-neutral-strong));
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- i {
|
|
|
- color: rgb(var(--v-theme-on-neutral-strong));
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50% , -50%);
|
|
|
- font-size: 50px;
|
|
|
- z-index: 1;
|
|
|
- opacity: 1;
|
|
|
- &:hover{
|
|
|
- color: rgb(var(--v-theme-primary-alt));
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
</style>
|