mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-25 08:09:41 +02:00
feat: Migrate to Nuxt 3 framework (#5184)
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com> Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
This commit is contained in:
Hoa (Kyle) Trinh
GitHub
parent
89ab7fac25
commit
c24d532608
403 changed files with 23959 additions and 19557 deletions
|
|
@ -1,70 +1,75 @@
|
|||
<template>
|
||||
<v-container fluid class="narrow-container">
|
||||
<BaseDialog
|
||||
v-model="state.storageDetails"
|
||||
:title="$t('admin.maintenance.storage-details')"
|
||||
<BaseDialog v-model="state.storageDetails" :title="$t('admin.maintenance.storage-details')"
|
||||
:icon="$globals.icons.folderOutline"
|
||||
>
|
||||
>
|
||||
<div class="py-2">
|
||||
<template v-for="(value, key, idx) in storageDetails">
|
||||
<v-list-item :key="`item-${key}`">
|
||||
<template v-for="(value, key, idx) in storageDetails" :key="`item-${key}`">
|
||||
<v-list-item>
|
||||
<v-list-item-title>
|
||||
<div>{{ storageDetailsText(key) }}</div>
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle class="text-end"> {{ value }} </v-list-item-subtitle>
|
||||
<v-list-item-subtitle class="text-end">
|
||||
{{ value }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-divider v-if="idx != 4" :key="`divider-${key}`" class="mx-2"></v-divider>
|
||||
<v-divider v-if="idx != 4" :key="`divider-${key}`" class="mx-2" />
|
||||
</template>
|
||||
</div>
|
||||
</BaseDialog>
|
||||
|
||||
<BasePageTitle divider>
|
||||
<template #title> {{ $t("admin.maintenance.page-title") }} </template>
|
||||
<template #title>
|
||||
{{ $t("admin.maintenance.page-title") }}
|
||||
</template>
|
||||
</BasePageTitle>
|
||||
|
||||
<section>
|
||||
<BaseCardSectionTitle class="pb-0" :icon="$globals.icons.wrench" :title="$tc('admin.maintenance.summary-title')">
|
||||
</BaseCardSectionTitle>
|
||||
<BaseCardSectionTitle class="pb-0" :icon="$globals.icons.wrench" :title="$t('admin.maintenance.summary-title')" />
|
||||
<div class="mb-6 ml-2 d-flex" style="gap: 0.3rem">
|
||||
<BaseButton color="info" @click="getSummary">
|
||||
<template #icon> {{ $globals.icons.tools }} </template>
|
||||
<template #icon>
|
||||
{{ $globals.icons.tools }}
|
||||
</template>
|
||||
{{ $t("admin.maintenance.button-label-get-summary") }}
|
||||
</BaseButton>
|
||||
<BaseButton color="info" @click="openDetails">
|
||||
<template #icon> {{ $globals.icons.folderOutline }} </template>
|
||||
<template #icon>
|
||||
{{ $globals.icons.folderOutline }}
|
||||
</template>
|
||||
{{ $t("admin.maintenance.button-label-open-details") }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
<v-card class="ma-2" :loading="state.fetchingInfo">
|
||||
<template v-for="(value, idx) in info">
|
||||
<v-list-item :key="`item-${idx}`">
|
||||
<template v-for="(value, idx) in info" :key="`item-${idx}`">
|
||||
<v-list-item>
|
||||
<v-list-item-title class="py-2">
|
||||
<div>{{ value.name }}</div>
|
||||
<v-list-item-subtitle class="text-end"> {{ value.value }} </v-list-item-subtitle>
|
||||
<v-list-item-subtitle class="text-end">
|
||||
{{ value.value }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider :key="`divider-${idx}`" class="mx-2"></v-divider>
|
||||
<v-divider class="mx-2" />
|
||||
</template>
|
||||
</v-card>
|
||||
</section>
|
||||
<section>
|
||||
<BaseCardSectionTitle
|
||||
class="pb-0 mt-8"
|
||||
:icon="$globals.icons.wrench"
|
||||
:title="$tc('admin.mainentance.actions-title')"
|
||||
>
|
||||
<i18n path="admin.maintenance.actions-description">
|
||||
<BaseCardSectionTitle class="pb-0 mt-8" :icon="$globals.icons.wrench"
|
||||
:title="$t('admin.mainentance.actions-title')"
|
||||
>
|
||||
<i18n-t keypath="admin.maintenance.actions-description">
|
||||
<template #destructive_in_bold>
|
||||
<b>{{ $t("admin.maintenance.actions-description-destructive") }}</b>
|
||||
</template>
|
||||
<template #irreversible_in_bold>
|
||||
<b>{{ $t("admin.maintenance.actions-description-irreversible") }}</b>
|
||||
</template>
|
||||
</i18n>
|
||||
</i18n-t>
|
||||
</BaseCardSectionTitle>
|
||||
<v-card class="ma-2" :loading="state.actionLoading">
|
||||
<template v-for="(action, idx) in actions">
|
||||
<v-list-item :key="`item-${idx}`" class="py-1">
|
||||
<template v-for="(action, idx) in actions" :key="`item-${idx}`">
|
||||
<v-list-item class="py-1">
|
||||
<v-list-item-title>
|
||||
<div>{{ action.name }}</div>
|
||||
<v-list-item-subtitle class="wrap-word">
|
||||
|
|
@ -72,11 +77,13 @@
|
|||
</v-list-item-subtitle>
|
||||
</v-list-item-title>
|
||||
<BaseButton color="info" @click="action.handler">
|
||||
<template #icon> {{ $globals.icons.robot }}</template>
|
||||
<template #icon>
|
||||
{{ $globals.icons.robot }}
|
||||
</template>
|
||||
{{ $t("general.run") }}
|
||||
</BaseButton>
|
||||
</v-list-item>
|
||||
<v-divider :key="`divider-${idx}`" class="mx-2"></v-divider>
|
||||
<v-divider class="mx-2" />
|
||||
</template>
|
||||
</v-card>
|
||||
</section>
|
||||
|
|
@ -84,13 +91,15 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, ref, defineComponent, reactive, useContext } from "@nuxtjs/composition-api";
|
||||
import { useAdminApi } from "~/composables/api";
|
||||
import { MaintenanceStorageDetails, MaintenanceSummary } from "~/lib/api/types/admin";
|
||||
import type { MaintenanceStorageDetails, MaintenanceSummary } from "~/lib/api/types/admin";
|
||||
|
||||
export default defineComponent({
|
||||
layout: "admin",
|
||||
export default defineNuxtComponent({
|
||||
setup() {
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
storageDetails: false,
|
||||
storageDetailsLoading: false,
|
||||
|
|
@ -99,13 +108,18 @@ export default defineComponent({
|
|||
});
|
||||
|
||||
const adminApi = useAdminApi();
|
||||
const { i18n } = useContext();
|
||||
const i18n = useI18n();
|
||||
|
||||
// Set page title
|
||||
useSeoMeta({
|
||||
title: i18n.t("admin.maintenance.page-title"),
|
||||
});
|
||||
|
||||
// ==========================================================================
|
||||
// General Info
|
||||
|
||||
const infoResults = ref<MaintenanceSummary>({
|
||||
dataDirSize: i18n.tc("about.unknown-version"),
|
||||
dataDirSize: i18n.t("about.unknown-version"),
|
||||
cleanableDirs: 0,
|
||||
cleanableImages: 0,
|
||||
});
|
||||
|
|
@ -115,7 +129,7 @@ export default defineComponent({
|
|||
const { data } = await adminApi.maintenance.getInfo();
|
||||
|
||||
infoResults.value = data ?? {
|
||||
dataDirSize: i18n.tc("about.unknown-version"),
|
||||
dataDirSize: i18n.t("about.unknown-version"),
|
||||
cleanableDirs: 0,
|
||||
cleanableImages: 0,
|
||||
};
|
||||
|
|
@ -152,7 +166,7 @@ export default defineComponent({
|
|||
};
|
||||
|
||||
function storageDetailsText(key: string) {
|
||||
return storageTitles[key] ?? i18n.tc("about.unknown-version");
|
||||
return storageTitles[key] ?? i18n.t("about.unknown-version");
|
||||
}
|
||||
|
||||
const storageDetails = ref<MaintenanceStorageDetails | null>(null);
|
||||
|
|
@ -219,11 +233,6 @@ export default defineComponent({
|
|||
actions,
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.$t("admin.maintenance.page-title") as string,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue