ImagePicker fixes and use it also in app icon settings

dashboard/src/components/ImagePicker.vue

@@ -1,24 +1,25 @@
 <script setup>
 
-import { useTemplateRef, ref, onMounted } from 'vue';
+import { useTemplateRef, ref } from 'vue';
 
 const fileInput = useTemplateRef('fileInput');
 
 const props = defineProps(['src', 'fallbackSrc', 'size', 'maxSize', 'displayHeight']);
 const emits = defineEmits(['changed']);
+defineExpose({
+  clear(originalSrc = '') {
+    internalSrc.value = originalSrc || props.src || props.fallbackSrc;
+  }
+});
 
+const image = useTemplateRef('image');
 const internalSrc = ref('');
-const newSrc = ref('');
 const isChanged = ref(false);
 
 function onShowIconSelector() {
   fileInput.value.click();
 }
 
-// function onChanged(event) {
-//   emits('changed', event);
-// }
-
 function dataURLtoFile(dataURL, filename) {
   // Split the data URL to get the MIME type and the base64 data
   const [metadata, base64Data] = dataURL.split(',');
@@ -33,7 +34,7 @@ function dataURLtoFile(dataURL, filename) {
   const arrayBuffer = new ArrayBuffer(binaryData.length);
   const view = new Uint8Array(arrayBuffer);
   for (let i = 0; i < binaryData.length; i++) {
-      view[i] = binaryData.charCodeAt(i);
+    view[i] = binaryData.charCodeAt(i);
   }
 
   // Create a Blob from the array buffer
@@ -104,15 +105,9 @@ function onChanged(event) {
   fr.readAsDataURL(event.target.files[0]);
 }
 
-// function onClear() {
-//   internalSrc.value = props.src || props.fallbackSrc;
-//   newSrc.value = null;
-//   isChanged.value = true;
-// }
-
-onMounted(() => {
-  internalSrc.value = props.src;
-});
+function onError() {
+  internalSrc.value = props.fallbackSrc;
+}
 
 </script>
 
@@ -121,14 +116,11 @@ onMounted(() => {
     <div class="image-picker">
       <input @change="onChanged($event)" type="file" ref="fileInput" style="display: none" accept="image/*"/>
 
-      <div id="previewIcon" class="image-picker" @click="onShowIconSelector()">
-        <img :src="internalSrc" onerror="this.src = fallbackSrc" :style="{ height: displayHeight || null }" />
+      <div ref="image" class="image-picker" @click="onShowIconSelector()">
+        <img :src="internalSrc || src" @error="onError" :style="{ height: displayHeight || null }" />
         <i class="image-picker-edit-indicator fa fa-pencil-alt"></i>
       </div>
     </div>
-
-    <!-- TODO translate -->
-    <!-- <div v-show="src" class="actionable" @click="onClear()">Clear</div> -->
   </div>
 </template>