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

<template>
  <BaseSetting title="Backup Einstellungen" :submit-function="submit" v-slot="{ enableEdit }">
    <div class="w-full">
      <label for="copies">Anzahl paralleler Backups (optional)</label>
      <input id="copies" type="text" :readonly="!enableEdit" :value="backupSettings['backup.copies']" />
    </div>
    <div class="w-full">
      <label for="interval">Intervall zur Backup-Erstellung (optional)</label>
      <input id="interval" type="text" :readonly="!enableEdit" :value="backupSettings['backup.interval']" /></div
  ></BaseSetting>
</template>

<script setup lang="ts">
import { useAbilityStore } from "@/stores/ability";
import { useSettingStore } from "@/stores/admin/management/setting";
import { mapActions, mapState } from "pinia";
import { defineComponent } from "vue";
import BaseSetting from "./BaseSetting.vue";
</script>

<script lang="ts">
export default defineComponent({
  data() {
    return {
      enableEdit: false as boolean,
      status: undefined as undefined | "loading" | "success" | "failed",
    };
  },
  computed: {
    ...mapState(useSettingStore, ["readByTopic"]),
    ...mapState(useAbilityStore, ["can"]),
    backupSettings() {
      return this.readByTopic("backup");
    },
  },
  methods: {
    ...mapActions(useSettingStore, ["updateSettings"]),
    submit(e: any) {
      const formData = e.target.elements;
      return this.updateSettings([
        {
          key: "backup.copies",
          value: formData.copies.value || null,
        },
        {
          key: "backup.interval",
          value: formData.interval.value || null,
        },
      ]);
    },
  },
});
</script>