Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-06-02 13:15:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: Add 'loading' message to settings page (#2806)

Browse Source 
* Add 'loading' message to settings page

* Fix loading message in site settings page

* Refactor code to use AppLoader
This commit is contained in:
boc-the-git 2023-12-11 03:56:22 +11:00 committed by GitHub
parent 2cba2d5fd2
commit 7aac82bff3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 289 additions and 317 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/lang/messages/en-US.json
View File

@ -114,6 +114,7 @@
"json": "JSON", "json": "JSON",
"keyword": "Keyword", "keyword": "Keyword",
"link-copied": "Link Copied", "link-copied": "Link Copied",
"loading": "Loading",
"loading-events": "Loading Events", "loading-events": "Loading Events",
"loading-recipe": "Loading recipe...", "loading-recipe": "Loading recipe...",
"loading-ocr-data": "Loading OCR data...", "loading-ocr-data": "Loading OCR data...",

65
frontend/pages/admin/site-settings.vue
View File

@ -130,6 +130,7 @@
<section class="mt-4"> <section class="mt-4">
<BaseCardSectionTitle class="pb-0" :icon="$globals.icons.cog" :title="$tc('settings.general-about')"> </BaseCardSectionTitle> <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.cog" :title="$tc('settings.general-about')"> </BaseCardSectionTitle>
<v-card class="mb-4"> <v-card class="mb-4">
<template v-if="appInfo && appInfo.length">
<template v-for="(property, idx) in appInfo"> <template v-for="(property, idx) in appInfo">
<v-list-item :key="property.name"> <v-list-item :key="property.name">
<v-list-item-icon> <v-list-item-icon>
@ -165,6 +166,12 @@
</v-list-item> </v-list-item>
<v-divider v-if="appInfo && idx !== appInfo.length - 1" :key="`divider-${property.name}`"></v-divider> <v-divider v-if="appInfo && idx !== appInfo.length - 1" :key="`divider-${property.name}`"></v-divider>
</template> </template>
</template>
<template v-else>
<div class="mb-3 text-center">
<AppLoader :waiting-text="$tc('general.loading')" />
</div>
</template>
</v-card> </v-card>
</section> </section>
</v-container> </v-container>
@ -186,6 +193,7 @@ import { useAdminApi, useUserApi } from "~/composables/api";
import { validators } from "~/composables/use-validators"; import { validators } from "~/composables/use-validators";
import { useAsyncKey } from "~/composables/use-utils"; import { useAsyncKey } from "~/composables/use-utils";
import { CheckAppConfig } from "~/lib/api/types/admin"; import { CheckAppConfig } from "~/lib/api/types/admin";
import AppLoader from "~/components/global/AppLoader.vue";
enum DockerVolumeState { enum DockerVolumeState {
Unknown = "unknown", Unknown = "unknown",
@ -216,29 +224,24 @@ export default defineComponent({
loading: false, loading: false,
state: DockerVolumeState.Unknown, state: DockerVolumeState.Unknown,
}); });
async function dockerValidate() { async function dockerValidate() {
docker.loading = true; docker.loading = true;
// Do API Check // Do API Check
const { data } = await adminApi.about.checkDocker(); const { data } = await adminApi.about.checkDocker();
if (data == null) { if (data == null) {
docker.state = DockerVolumeState.Error; docker.state = DockerVolumeState.Error;
return; return;
} }
// Get File Contents // Get File Contents
const { data: fileContents } = await adminApi.about.getDockerValidateFileContents(); const { data: fileContents } = await adminApi.about.getDockerValidateFileContents();
if (data.text === fileContents) { if (data.text === fileContents) {
docker.state = DockerVolumeState.Success; docker.state = DockerVolumeState.Success;
} else { }
else {
docker.state = DockerVolumeState.Error; docker.state = DockerVolumeState.Error;
} }
docker.loading = false; docker.loading = false;
} }
const state = reactive({ const state = reactive({
loading: false, loading: false,
address: "", address: "",
@ -246,7 +249,6 @@ export default defineComponent({
error: "", error: "",
tested: false, tested: false,
}); });
const appConfig = ref<CheckApp>({ const appConfig = ref<CheckApp>({
emailReady: true, emailReady: true,
baseUrlSet: true, baseUrlSet: true,
@ -254,34 +256,25 @@ export default defineComponent({
isUpToDate: false, isUpToDate: false,
ldapReady: false, ldapReady: false,
}); });
function isLocalHostOrHttps() { function isLocalHostOrHttps() {
return window.location.hostname === "localhost" || window.location.protocol === "https:"; return window.location.hostname === "localhost" || window.location.protocol === "https:";
} }
const api = useUserApi(); const api = useUserApi();
const adminApi = useAdminApi(); const adminApi = useAdminApi();
onMounted(async () => { onMounted(async () => {
const { data } = await adminApi.about.checkApp(); const { data } = await adminApi.about.checkApp();
if (data) { if (data) {
appConfig.value = { ...data, isSiteSecure: false }; appConfig.value = { ...data, isSiteSecure: false };
} }
appConfig.value.isSiteSecure = isLocalHostOrHttps(); appConfig.value.isSiteSecure = isLocalHostOrHttps();
}); });
const simpleChecks = computed<SimpleCheck[]>(() => { const simpleChecks = computed<SimpleCheck[]>(() => {
const goodIcon = $globals.icons.checkboxMarkedCircle; const goodIcon = $globals.icons.checkboxMarkedCircle;
const badIcon = $globals.icons.alert; const badIcon = $globals.icons.alert;
const warningIcon = $globals.icons.alertCircle; const warningIcon = $globals.icons.alertCircle;
const goodColor = "success"; const goodColor = "success";
const badColor = "error"; const badColor = "error";
const warningColor = "warning"; const warningColor = "warning";
const data: SimpleCheck[] = [ const data: SimpleCheck[] = [
{ {
id: "application-version", id: "application-version",
@ -305,8 +298,7 @@ export default defineComponent({
id: "server-side-base-url", id: "server-side-base-url",
text: i18n.t("settings.server-side-base-url"), text: i18n.t("settings.server-side-base-url"),
status: appConfig.value.baseUrlSet, status: appConfig.value.baseUrlSet,
errorText: errorText: i18n.t("settings.server-side-base-url-error-text"),
i18n.t("settings.server-side-base-url-error-text"),
successText: i18n.t("settings.server-side-base-url-success-text"), successText: i18n.t("settings.server-side-base-url-success-text"),
color: appConfig.value.baseUrlSet ? goodColor : badColor, color: appConfig.value.baseUrlSet ? goodColor : badColor,
icon: appConfig.value.baseUrlSet ? goodIcon : badIcon, icon: appConfig.value.baseUrlSet ? goodIcon : badIcon,
@ -315,26 +307,23 @@ export default defineComponent({
id: "ldap-ready", id: "ldap-ready",
text: i18n.t("settings.ldap-ready"), text: i18n.t("settings.ldap-ready"),
status: appConfig.value.ldapReady, status: appConfig.value.ldapReady,
errorText: errorText: i18n.t("settings.ldap-ready-error-text"),
i18n.t("settings.ldap-ready-error-text"),
successText: i18n.t("settings.ldap-ready-success-text"), successText: i18n.t("settings.ldap-ready-success-text"),
color: appConfig.value.ldapReady ? goodColor : warningColor, color: appConfig.value.ldapReady ? goodColor : warningColor,
icon: appConfig.value.ldapReady ? goodIcon : warningIcon, icon: appConfig.value.ldapReady ? goodIcon : warningIcon,
}, },
]; ];
return data; return data;
}); });
async function testEmail() { async function testEmail() {
state.loading = true; state.loading = true;
state.tested = false; state.tested = false;
const { data } = await api.email.test({ email: state.address }); const { data } = await api.email.test({ email: state.address });
if (data) { if (data) {
if (data.success) { if (data.success) {
state.success = true; state.success = true;
} else { }
else {
state.error = data.error ?? ""; state.error = data.error ?? "";
state.success = false; state.success = false;
} }
@ -342,38 +331,30 @@ export default defineComponent({
state.loading = false; state.loading = false;
state.tested = true; state.tested = true;
} }
const validEmail = computed(() => { const validEmail = computed(() => {
if (state.address === "") { if (state.address === "") {
return false; return false;
} }
const valid = validators.email(state.address); const valid = validators.email(state.address);
// Explicit bool check because validators.email sometimes returns a string // Explicit bool check because validators.email sometimes returns a string
if (valid === true) { if (valid === true) {
return true; return true;
} }
return false; return false;
}); });
// ============================================================ // ============================================================
// General About Info // General About Info
const { $globals, i18n } = useContext(); const { $globals, i18n } = useContext();
const rawAppInfo = ref({ const rawAppInfo = ref({
version: "null", version: "null",
versionLatest: "null", versionLatest: "null",
}); });
function getAppInfo() { function getAppInfo() {
const statistics = useAsync(async () => { const statistics = useAsync(async () => {
const { data } = await adminApi.about.about(); const { data } = await adminApi.about.about();
if (data) { if (data) {
rawAppInfo.value.version = data.version; rawAppInfo.value.version = data.version;
rawAppInfo.value.versionLatest = data.versionLatest; rawAppInfo.value.versionLatest = data.versionLatest;
const prettyInfo = [ const prettyInfo = [
{ {
name: i18n.t("about.version"), name: i18n.t("about.version"),
@ -428,40 +409,32 @@ export default defineComponent({
value: data.recipeScraperVersion, value: data.recipeScraperVersion,
}, },
]; ];
return prettyInfo; return prettyInfo;
} }
return data; return data;
}, useAsyncKey()); }, useAsyncKey());
return statistics; return statistics;
} }
const appInfo = getAppInfo(); const appInfo = getAppInfo();
const bugReportDialog = ref(false); const bugReportDialog = ref(false);
const bugReportText = computed(() => { const bugReportText = computed(() => {
const ignore = { const ignore = {
[i18n.tc("about.database-url")]: true, [i18n.tc("about.database-url")]: true,
[i18n.tc("about.default-group")]: true, [i18n.tc("about.default-group")]: true,
}; };
let text = "**Details**\n"; let text = "**Details**\n";
appInfo.value?.forEach((item) => { appInfo.value?.forEach((item) => {
if (ignore[item.name as string]) { if (ignore[item.name as string]) {
return; return;
} }
text += `${item.name as string}: ${item.value as string}\n`; text += `${item.name as string}: ${item.value as string}\n`;
}); });
const ignoreChecks: {
const ignoreChecks: { [key: string]: boolean } = { [key: string]: boolean;
} = {
"application-version": true, "application-version": true,
}; };
text += "\n**Checks**\n"; text += "\n**Checks**\n";
simpleChecks.value.forEach((item) => { simpleChecks.value.forEach((item) => {
if (ignoreChecks[item.id]) { if (ignoreChecks[item.id]) {
return; return;
@ -469,13 +442,10 @@ export default defineComponent({
const status = item.status ? i18n.tc("general.yes") : i18n.tc("general.no"); const status = item.status ? i18n.tc("general.yes") : i18n.tc("general.no");
text += `${item.text.toString()}: ${status}\n`; text += `${item.text.toString()}: ${status}\n`;
}); });
text += `${i18n.tc("settings.email-configured")}: ${appConfig.value.emailReady ? i18n.tc("general.yes") : i18n.tc("general.no")}\n`; text += `${i18n.tc("settings.email-configured")}: ${appConfig.value.emailReady ? i18n.tc("general.yes") : i18n.tc("general.no")}\n`;
text += `${i18n.tc("settings.docker-volume")}: ${docker.state}`; text += `${i18n.tc("settings.docker-volume")}: ${docker.state}`;
return text; return text;
}); });
return { return {
bugReportDialog, bugReportDialog,
bugReportText, bugReportText,
@ -496,6 +466,7 @@ export default defineComponent({
title: this.$t("settings.site-settings") as string, title: this.$t("settings.site-settings") as string,
}; };
}, },
components: { AppLoader }
}); });
</script> </script>