feat: use new image picker for show image and logo

refs #89

src/components/shows/MetaImages.vue

 <template>
-  <div>
-    <b-row>
-      <b-col lg="2">
-        <b-badge class="tw-w-10/12 tw-mr-1"> {{ $t('showMeta.logo') }}: </b-badge>
-        <img
-          src="/assets/edit.svg"
-          class="tw-w-4 tw-cursor-pointer"
-          :alt="$t('showMeta.editLogo')"
-          @click="openModalLogo()"
-        />
-      </b-col>
-      <b-col lg="4">
-        <div v-if="!selectedShow.image || selectedShow.logo.length === 0">
-          <small
-            ><i>{{ $t('noneSetNeuter') }}</i></small
-          >
-        </div>
-        <div v-else>
-          <br />
-          <b-img thumbnail :src="selectedShow.logo" fluid @click="openModalLogo()" />
-        </div>
-      </b-col>
-
-      <b-col lg="2">
-        <b-badge class="tw-w-10/12 tw-mr-1"> {{ $t('showMeta.image') }}: </b-badge>
-        <img
-          src="/assets/edit.svg"
-          class="tw-w-4 tw-cursor-pointer"
-          :alt="$t('showMeta.editImage')"
-          @click="openModalImage()"
-        />
-      </b-col>
-      <b-col lg="4">
-        <div v-if="!selectedShow.image || selectedShow.image.length === 0">
-          <small
-            ><i>{{ $t('noneSetNeuter') }}</i></small
-          >
-        </div>
-        <div v-else>
-          <br />
-          <b-img thumbnail :src="selectedShow.image" fluid @click="openModalImage()" />
-        </div>
-      </b-col>
-    </b-row>
-
-    <b-modal
-      ref="modalLogo"
-      :title="$t('showMeta.editLogo')"
-      :cancel-title="$t('cancel')"
-      size="lg"
-      @ok="saveLogo"
-    >
-      <b-row>
-        <b-col lg="4">
-          <p>{{ $t('showMeta.currentLogo') }}:</p>
-        </b-col>
-        <b-col lg="8">
-          <p v-if="string.length === 0">
-            <small
-              ><i>{{ $t('noneSetNeuter') }}</i></small
-            >
-          </p>
-          <p v-else>
-            <b-img thumbnail fluid :src="string" />
-          </p>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col>
-          <b-form-file
-            ref="fileinputLogo"
-            v-model="file"
-            accept="image/jpeg, image/png"
-            :state="Boolean(file)"
-            :placeholder="$t('showMeta.chooseLogo')"
-            :browse-text="$t('browse')"
-          />
-        </b-col>
-      </b-row>
-    </b-modal>
-
-    <b-modal
-      ref="modalImage"
-      :title="$t('showMeta.editImage')"
-      :cancel-title="$t('cancel')"
-      size="lg"
-      @ok="saveImage"
-    >
-      <b-row>
-        <b-col lg="4">
-          <p>{{ $t('showMeta.currentImage') }}:</p>
-        </b-col>
-        <b-col lg="8">
-          <p v-if="string.length === 0">
-            <small
-              ><i>{{ $t('noneSetNeuter') }}</i></small
-            >
-          </p>
-          <p v-else>
-            <b-img thumbnail fluid :src="string" />
-          </p>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col>
-          <b-form-file
-            ref="fileinputImage"
-            v-model="file"
-            accept="image/jpeg, image/png"
-            :state="Boolean(file)"
-            :browse-text="$t('browse')"
-            :placeholder="$t('showMeta.chooseImage')"
-          />
-        </b-col>
-      </b-row>
-    </b-modal>
+  <div class="tw-flex tw-gap-6">
+    <div>
+      <label id="show-logo" class="tw-block tw-font-bold">{{ t('showMeta.logo') }}</label>
+      <ImagePicker v-model="logoId" aria-labelledby="show-logo" />
+    </div>
+
+    <div>
+      <label id="show-image" class="tw-block tw-font-bold">{{ t('showMeta.image') }}</label>
+      <ImagePicker v-model="imageId" aria-labelledby="show-image" />
+    </div>
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-export default {
-  data() {
-    return {
-      string: '',
-      file: null,
-    }
-  },
-  computed: {
-    ...mapGetters({
-      selectedShow: 'shows/selectedShow',
-    }),
-  },
-  methods: {
-    openModalLogo() {
-      if (this.selectedShow.logo === null) {
-        this.string = ''
-      } else {
-        this.string = this.selectedShow.logo
-      }
-      this.file = null
-      this.$refs.modalLogo.show()
-    },
-    openModalImage() {
-      if (this.selectedShow.image === null) {
-        this.string = ''
-      } else {
-        this.string = this.selectedShow.image
-      }
-      this.file = null
-      this.$refs.modalImage.show()
-    },
-
-    updateImage(type, modal, event) {
-      event.preventDefault()
-      if (this.file === null) {
-        alert('Please provide a file to upload')
-      } else if (this.file.type !== 'image/jpeg' && this.file.type !== 'image/png') {
-        alert('Please provide a valid image file (JPEG or PNG)')
-      } else {
-        this.$store.dispatch('shows/updateImage', {
-          id: this.selectedShow.id,
-          type: type,
-          file: this.file,
-          callback: (response) => {
-            this.$log.debug('updateImage callback')
-            this.$log.debug(response)
-            modal.hide()
-          },
-        })
-      }
-    },
-
-    saveImage(event) {
-      this.updateImage('image', this.$refs.modalImage, event)
-    },
-
-    saveLogo(event) {
-      this.updateImage('logo', this.$refs.modalLogo, event)
-    },
-  },
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import { useI18n } from '@/i18n'
+import { useSelectedShow } from '@/utilities'
+import { useUpdatableState } from '@/util'
+import ImagePicker from '@/components/images/ImagePicker.vue'
+
+const store = useStore()
+const { t } = useI18n()
+const selectedShow = useSelectedShow()
+const logoId = useUpdatableState(
+  computed(() => null),
+  (imageId) => updateImage('logo', imageId),
+)
+const imageId = useUpdatableState(
+  computed(() => selectedShow.value.image),
+  (imageId) => updateImage('image', imageId),
+)
+async function updateImage(property: 'logo' | 'image', imageId: number | null) {
+  await store.dispatch('shows/updateProperty', {
+    id: selectedShow.value.id,
+    property,
+    value: imageId,
+  })
 }
 </script>