ff-admin/src/components/admin/management/setting/ClubImageSetting.vue

<template>
  <BaseSetting title="Vereins-Auftritt Einstellungen" :submit-function="submit" v-slot="{ enableEdit }" @reset="reset">
    <div class="w-full">
      <p>Vereins-Icon</p>
      <div class="flex flex-row gap-2">
        <AppIcon v-if="icon != '' && !overwriteIcon" class="h-10! max-w-full mx-auto" />
        <div
          v-else-if="!overwriteIcon"
          class="flex h-10 w-full border-2 border-gray-300 rounded-md items-center justify-center text-sm"
          :class="{ 'cursor-pointer': enableEdit }"
          @click="enableEdit ? ($refs.icon as HTMLInputElement).click() : null"
        >
          Kein eigenes Icon ausgewählt
        </div>
        <img ref="icon_img" class="hidden w-full h-10 object-contain" />
        <XMarkIcon
          v-if="enableEdit && (icon != '' || overwriteIcon)"
          class="h-5 w-5 cursor-pointer"
          @click="resetImage('icon')"
        />
      </div>
      <input class="hidden!" type="file" ref="icon" accept="image/png" @change="previewImage('icon')" />
    </div>
    <div class="w-full">
      <p>Vereins-Logo</p>
      <div class="flex flex-row gap-2">
        <AppLogo v-if="logo != '' && !overwriteLogo" class="h-10! max-w-full mx-auto" />
        <div
          v-else-if="!overwriteLogo"
          class="flex h-10 w-full border-2 border-gray-300 rounded-md items-center justify-center text-sm"
          :class="{ 'cursor-pointer': enableEdit }"
          @click="enableEdit ? ($refs.logo as HTMLInputElement).click() : null"
        >
          Kein eigenes Logo ausgewählt
        </div>
        <img ref="logo_img" class="hidden w-full h-10 object-contain" />
        <XMarkIcon
          v-if="enableEdit && (logo != '' || overwriteLogo)"
          class="h-5 w-5 cursor-pointer"
          @click="resetImage('logo')"
        />
      </div>
      <input class="hidden!" type="file" ref="logo" accept="image/png" @change="previewImage('logo')" />
    </div>
  </BaseSetting>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import { useSettingStore } from "@/stores/admin/management/setting";
import AppIcon from "@/components/AppIcon.vue";
import AppLogo from "@/components/AppLogo.vue";
import { useAbilityStore } from "@/stores/ability";
import type { SettingString } from "@/types/settingTypes";
import BaseSetting from "./BaseSetting.vue";
import { XMarkIcon } from "@heroicons/vue/24/outline";
</script>

<script lang="ts">
export default defineComponent({
  watch: {
    clubSettings() {
      this.reset();
    },
  },
  data() {
    return {
      logo: "",
      icon: "",
      overwriteIcon: false as boolean,
      overwriteLogo: false as boolean,
    };
  },
  computed: {
    ...mapState(useSettingStore, ["readByTopic"]),
    ...mapState(useAbilityStore, ["can"]),
    clubSettings() {
      return this.readByTopic("club");
    },
  },
  mounted() {
    this.reset();
  },
  methods: {
    ...mapActions(useSettingStore, ["updateSettings", "uploadImage"]),
    reset() {
      this.icon = this.clubSettings["club.icon"];
      this.overwriteIcon = false;
      (this.$refs.icon_img as HTMLImageElement).style.display = "none";
      (this.$refs.icon as HTMLInputElement).value = "";

      this.logo = this.clubSettings["club.logo"];
      this.overwriteLogo = false;
      (this.$refs.logo_img as HTMLImageElement).style.display = "none";
      (this.$refs.logo as HTMLInputElement).value = "";
    },
    resetImage(inputname: "icon" | "logo") {
      if (inputname == "icon") {
        this.icon = "";
        this.overwriteIcon = false;
        (this.$refs.icon_img as HTMLImageElement).style.display = "none";
        (this.$refs.icon as HTMLInputElement).value = "";
      } else {
        this.logo = "";
        this.overwriteLogo = false;
        (this.$refs.logo_img as HTMLImageElement).style.display = "none";
        (this.$refs.logo as HTMLInputElement).value = "";
      }
    },
    previewImage(inputname: "icon" | "logo") {
      let input = this.$refs[inputname] as HTMLInputElement;
      let previewElement = this.$refs[inputname + "_img"] as HTMLImageElement;
      if (input.files && input.files[0]) {
        const reader = new FileReader();

        reader.onload = function (e) {
          previewElement.src = e.target?.result as string;
          previewElement.style.display = "block";
        };

        reader.readAsDataURL(input.files[0]);

        if (inputname == "icon") {
          this.overwriteIcon = true;
        } else {
          this.overwriteLogo = true;
        }
      } else {
        previewElement.src = "";
        previewElement.style.display = "none";
      }
    },
    submit(e: any) {
      return this.uploadImage([
        {
          key: "club.icon",
          value:
            (this.$refs.icon as HTMLInputElement).files?.[0] ??
            (this.icon != "" && !this.overwriteIcon ? "keep" : undefined),
        },
        {
          key: "club.logo",
          value:
            (this.$refs.logo as HTMLInputElement).files?.[0] ??
            (this.logo != "" && !this.overwriteLogo ? "keep" : undefined),
        },
      ]);
    },
  },
});
</script>