mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-04-10 15:05:35 -04:00
chore: Nuxt 4 upgrade (#7426)
This commit is contained in:
Kuchenpirat
GitHub
236
frontend/app/pages/admin/maintenance/index.vue
Normal file
236
frontend/app/pages/admin/maintenance/index.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<v-container fluid class="narrow-container">
|
||||
<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" :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>
|
||||
<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>
|
||||
</BasePageTitle>
|
||||
|
||||
<section>
|
||||
<BaseCardSectionTitle class="pb-0" :icon="$globals.icons.wrench" :title="$t('admin.maintenance.summary-title')" />
|
||||
<div class="mb-6 d-flex" style="gap: 0.3rem">
|
||||
<BaseButton color="info" @click="getSummary">
|
||||
<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>
|
||||
{{ $t("admin.maintenance.button-label-open-details") }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
<v-card class="" :loading="state.fetchingInfo">
|
||||
<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-title>
|
||||
</v-list-item>
|
||||
<v-divider class="mx-2" />
|
||||
</template>
|
||||
</v-card>
|
||||
</section>
|
||||
<section>
|
||||
<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-t>
|
||||
</BaseCardSectionTitle>
|
||||
<v-card class="ma-0" flat :loading="state.actionLoading">
|
||||
<template v-for="(action, idx) in actions" :key="`item-${idx}`">
|
||||
<v-list-item class="py-2 px-0">
|
||||
<v-list-item-title>
|
||||
<div>{{ action.name }}</div>
|
||||
<v-list-item-subtitle class="wrap-word">
|
||||
{{ action.subtitle }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-title>
|
||||
<template #append>
|
||||
<BaseButton color="info" @click="action.handler">
|
||||
<template #icon>
|
||||
{{ $globals.icons.robot }}
|
||||
</template>
|
||||
{{ $t("general.run") }}
|
||||
</BaseButton>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider class="mx-2" />
|
||||
</template>
|
||||
</v-card>
|
||||
</section>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useAdminApi } from "~/composables/api";
|
||||
import type { MaintenanceStorageDetails, MaintenanceSummary } from "~/lib/api/types/admin";
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
storageDetails: false,
|
||||
storageDetailsLoading: false,
|
||||
fetchingInfo: false,
|
||||
actionLoading: false,
|
||||
});
|
||||
|
||||
const adminApi = useAdminApi();
|
||||
const i18n = useI18n();
|
||||
|
||||
// Set page title
|
||||
useSeoMeta({
|
||||
title: i18n.t("admin.maintenance.page-title"),
|
||||
});
|
||||
|
||||
// ==========================================================================
|
||||
// General Info
|
||||
|
||||
const infoResults = ref<MaintenanceSummary>({
|
||||
dataDirSize: i18n.t("about.unknown-version"),
|
||||
cleanableDirs: 0,
|
||||
cleanableImages: 0,
|
||||
});
|
||||
|
||||
async function getSummary() {
|
||||
state.fetchingInfo = true;
|
||||
const { data } = await adminApi.maintenance.getInfo();
|
||||
|
||||
infoResults.value = data ?? {
|
||||
dataDirSize: i18n.t("about.unknown-version"),
|
||||
cleanableDirs: 0,
|
||||
cleanableImages: 0,
|
||||
};
|
||||
|
||||
state.fetchingInfo = false;
|
||||
}
|
||||
|
||||
const info = computed(() => {
|
||||
return [
|
||||
{
|
||||
name: i18n.t("admin.maintenance.info-description-data-dir-size"),
|
||||
value: infoResults.value.dataDirSize,
|
||||
},
|
||||
{
|
||||
name: i18n.t("admin.maintenance.info-description-cleanable-directories"),
|
||||
value: infoResults.value.cleanableDirs,
|
||||
},
|
||||
{
|
||||
name: i18n.t("admin.maintenance.info-description-cleanable-images"),
|
||||
value: infoResults.value.cleanableImages,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
// ==========================================================================
|
||||
// Storage Details
|
||||
|
||||
const storageTitles: { [key: string]: string } = {
|
||||
tempDirSize: i18n.t("admin.maintenance.storage.title-temporary-directory") as string,
|
||||
backupsDirSize: i18n.t("admin.maintenance.storage.title-backups-directory") as string,
|
||||
groupsDirSize: i18n.t("admin.maintenance.storage.title-groups-directory") as string,
|
||||
recipesDirSize: i18n.t("admin.maintenance.storage.title-recipes-directory") as string,
|
||||
userDirSize: i18n.t("admin.maintenance.storage.title-user-directory") as string,
|
||||
};
|
||||
|
||||
function storageDetailsText(key: string) {
|
||||
return storageTitles[key] ?? i18n.t("about.unknown-version");
|
||||
}
|
||||
|
||||
const storageDetails = ref<MaintenanceStorageDetails | null>(null);
|
||||
|
||||
async function openDetails() {
|
||||
state.storageDetailsLoading = true;
|
||||
state.storageDetails = true;
|
||||
|
||||
const { data } = await adminApi.maintenance.getStorageDetails();
|
||||
|
||||
if (data) {
|
||||
storageDetails.value = data;
|
||||
}
|
||||
|
||||
state.storageDetailsLoading = true;
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Actions
|
||||
|
||||
async function handleCleanDirectories() {
|
||||
state.actionLoading = true;
|
||||
await adminApi.maintenance.cleanRecipeFolders();
|
||||
state.actionLoading = false;
|
||||
}
|
||||
|
||||
async function handleCleanImages() {
|
||||
state.actionLoading = true;
|
||||
await adminApi.maintenance.cleanImages();
|
||||
state.actionLoading = false;
|
||||
}
|
||||
|
||||
async function handleCleanTemp() {
|
||||
state.actionLoading = true;
|
||||
await adminApi.maintenance.cleanTemp();
|
||||
state.actionLoading = false;
|
||||
}
|
||||
|
||||
const actions = [
|
||||
{
|
||||
name: i18n.t("admin.maintenance.action-clean-directories-name"),
|
||||
handler: handleCleanDirectories,
|
||||
subtitle: i18n.t("admin.maintenance.action-clean-directories-description"),
|
||||
},
|
||||
{
|
||||
name: i18n.t("admin.maintenance.action-clean-temporary-files-name"),
|
||||
handler: handleCleanTemp,
|
||||
subtitle: i18n.t("admin.maintenance.action-clean-temporary-files-description"),
|
||||
},
|
||||
{
|
||||
name: i18n.t("admin.maintenance.action-clean-images-name"),
|
||||
handler: handleCleanImages,
|
||||
subtitle: i18n.t("admin.maintenance.action-clean-images-description"),
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wrap-word {
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user