jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

ImagePicker: introduce 'mode' - simple/editable

Browse Source 
We have two cases for the picker:
* in normal pages: here the image upload/reset happens automatically. this is
  the editable mode with action buttons.

* in dialogs: here you just upload images . this is simple mode.
This commit is contained in:
Girish Ramakrishnan
2025-09-11 16:22:01 +02:00
parent f3c0e8a835
commit 23012fbb5c
6 changed files with 33 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
dashboard/src/components/ImagePicker.vue
View File

@@ -6,6 +6,8 @@ import { Button } from '@cloudron/pankow';
const fileInput = useTemplateRef('fileInput');
const props = defineProps({
// in simple mode, you get just an upload button. useful for dialogs which do not save/unset immediately
mode: { type: String, default: 'editable', required: true },
src: { type: String, required: true },
fallbackSrc: { type: String, required: true },
size: { type: String, required: true },
@@ -17,6 +19,8 @@ const props = defineProps({
unsetHandler: { type: Function, required: false },
});
const emit = defineEmits(['changed']);
const image = useTemplateRef('image');
const internalSrc = ref('');
const isChanged = ref(false);
@@ -53,7 +57,7 @@ function dataURLtoFile(dataURL, filename) {
}
async function onSave() {
if (typeof props.saveHandler !== 'function') return console.error('saveHandler must be a function in ImagePicker');
if (typeof props.saveHandler !== 'function') return;
busy.value = true;
@@ -73,7 +77,7 @@ function onEdit() {
}
async function onUnset() {
if (typeof props.unsetHandler !== 'function') return console.error('unsetHandler must be a function in ImagePicker');
if (typeof props.unsetHandler !== 'function') return;
busy.value = true;
@@ -86,6 +90,9 @@ async function onUnset() {
}
function onChanged(event) {
const file = event.target.files[0];
if (!file) return;
const fr = new FileReader();
fr.onload = function () {
const image = new Image();
@@ -135,6 +142,7 @@ function onChanged(event) {
internalSrc.value = canvas.toDataURL('image/png');
isChanged.value = true;
emit('changed', file); // <— notify parent
};
image.src = fr.result;
@@ -155,14 +163,23 @@ function onError() {
<div ref="image" :disabled="disabled || null" class="image-picker" @click="!disabled && onEdit()">
<img :src="internalSrc || src" @error="onError" class="image-picker-image" :style="{ height: displayHeight || null, width: displayWidth || null }">
<div v-if="isChanged" class="image-picker-actions" style="visibility: visible;">
<Button @click.stop="onCancel" secondary tool small icon="fa fa-undo" :disabled="busy"/>
<Button @click.stop="onSave" success tool small :loading="busy" :disabled="busy" icon="fa fa-floppy-disk"/>
</div>
<div v-else-if="!disabled" class="image-picker-actions">
<Button @click.stop="onEdit" tool small icon="fa fa-pencil-alt" :disabled="busy"/>
<Button @click.stop="onUnset" tool small icon="fa fa-trash" :loading="busy" :disabled="busy" v-if="unsetHandler && internalSrc !== fallbackSrc"/>
</div>
<!-- Editable mode -->
<template v-if="mode === 'editable'">
<div v-if="isChanged" class="image-picker-actions" style="visibility: visible;">
<Button @click.stop="onCancel" secondary tool small icon="fa fa-undo" :disabled="busy"/>
<Button @click.stop="onSave" success tool small :loading="busy" :disabled="busy" icon="fa fa-floppy-disk"/>
</div>
<div v-else-if="!disabled" class="image-picker-actions">
<Button @click.stop="onEdit" tool small icon="fa fa-pencil-alt" :disabled="busy"/>
<Button @click.stop="onUnset" tool small icon="fa fa-trash" :loading="busy" :disabled="busy" v-if="unsetHandler && internalSrc !== fallbackSrc"/>
</div>
</template>
<template v-else-if="mode === 'simple'">
<div class="image-picker-actions">
<Button @click.stop="onEdit" tool small icon="fa fa-pencil-alt" :disabled="busy"/>
</div>
</template>
</div>
</div>
</div>