mealie/frontend/components/Domain/Admin/AdminBackupImportOptions.vue

<template>
  <div>
    <v-checkbox
      v-for="(option, index) in options"
      :key="index"
      v-model="option.value"
      class="mb-n4 mt-n3"
      dense
      :label="option.text"
      @change="emitValue()"
    ></v-checkbox>
    <template v-if="importBackup">
      <v-divider class="my-3"></v-divider>
      <v-checkbox
        v-model="forceImport"
        class="mb-n4"
        dense
        :label="$t('settings.remove-existing-entries-matching-imported-entries')"
        @change="emitValue()"
      ></v-checkbox>
    </template>
  </div>
</template>

<script>
const UPDATE_EVENT = "input";
export default {
  props: {
    importBackup: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      options: {
        recipes: {
          value: true,
          text: this.$t("general.recipes"),
        },
        settings: {
          value: true,
          text: this.$t("general.settings"),
        },
        pages: {
          value: true,
          text: this.$t("settings.pages"),
        },
        themes: {
          value: true,
          text: this.$t("general.themes"),
        },
        users: {
          value: true,
          text: this.$t("user.users"),
        },
        groups: {
          value: true,
          text: this.$t("group.groups"),
        },
        notifications: {
          value: true,
          text: this.$t("events.notification"),
        },
      },
      forceImport: false,
    };
  },
  mounted() {
    this.emitValue();
  },
  methods: {
    emitValue() {
      this.$emit(UPDATE_EVENT, {
        recipes: this.options.recipes.value,
        settings: this.options.settings.value,
        themes: this.options.themes.value,
        pages: this.options.pages.value,
        users: this.options.users.value,
        groups: this.options.groups.value,
        notifications: this.options.notifications.value,
        forceImport: this.forceImport,
      });
    },
  },
};
</script>