From f0298accb3a9774cb82f7dbfb52868f60f6f4658 Mon Sep 17 00:00:00 2001 From: Zahirul Iman Date: Tue, 27 May 2025 11:23:05 +0800 Subject: [PATCH] Style: Refactor logo paths and continue debugging site settings save/upload errors --- components/Loading.vue | 6 +-- components/layouts/Header.vue | 9 ++-- components/layouts/sidemenu/index.vue | 49 +++++++++++------ composables/useSiteSettings.js | 35 ++++++++++--- pages/devtool/config/site-settings/index.vue | 52 +++++++++++++------ pages/forgot-password/index.vue | 6 +-- pages/login/index.vue | 6 +-- pages/register/index.vue | 6 +-- {assets => public}/img/logo/corradAF-logo.svg | 0 9 files changed, 115 insertions(+), 54 deletions(-) rename {assets => public}/img/logo/corradAF-logo.svg (100%) diff --git a/components/Loading.vue b/components/Loading.vue index 0d3b1fd..a496756 100644 --- a/components/Loading.vue +++ b/components/Loading.vue @@ -14,13 +14,13 @@ const refreshPage = () => { const loadingLogoSrc = computed(() => { if (siteSettingsLoading.value) { - return '/assets/img/logo/corradAF-logo.svg'; // Default fallback during loading state + return '/img/logo/corradAF-logo.svg'; // Default fallback during loading state } const logoUrl = siteSettings.value?.siteLoadingLogo; if (logoUrl && logoUrl.trim() !== '') { return logoUrl; // Use logo from settings if available and not empty } - return '/assets/img/logo/corradAF-logo.svg'; // Ultimate fallback if no logo is set in settings + return '/img/logo/corradAF-logo.svg'; // Ultimate fallback if no logo is set in settings }); // Get site name with fallback @@ -42,7 +42,7 @@ const getSiteName = () => { :src="loadingLogoSrc" :alt="getSiteName()" class="max-w-[180px] max-h-[60px] object-contain" - @error="$event.target.src = '/assets/img/logo/corradAF-logo.svg'" + @error="$event.target.src = '/img/logo/corradAF-logo.svg'" /> diff --git a/components/layouts/Header.vue b/components/layouts/Header.vue index 0513ae5..7d4a379 100644 --- a/components/layouts/Header.vue +++ b/components/layouts/Header.vue @@ -73,9 +73,8 @@ onMounted(() => { // Load site settings on mount and ensure they're properly populated const { loadSiteSettings } = useSiteSettings(); loadSiteSettings().then(() => { - // Force reactivity update after loading nextTick(() => { - console.log('Site settings loaded:', siteSettings.value); + console.log('[Header.vue] Site settings loaded. Name:', siteSettings.value?.siteName, 'ShowInHeader:', siteSettings.value?.showSiteNameInHeader, 'Logo:', siteSettings.value?.siteLogo); }); }); }); @@ -86,7 +85,7 @@ const currentLogo = computed(() => { if (logoUrl && logoUrl.trim() !== '') { return logoUrl; // Use logo from settings if available and not empty } - return '/assets/img/logo/corradAF-logo.svg'; // Ultimate fallback + return '/img/logo/corradAF-logo.svg'; // Ultimate fallback }); @@ -105,7 +104,7 @@ const currentLogo = computed(() => { :src="currentLogo" :alt="siteSettings?.value?.siteName || 'Site Logo'" class="h-8 block" - @error="$event.target.src = '/assets/img/logo/corradAF-logo.svg'" + @error="$event.target.src = '/img/logo/corradAF-logo.svg'" /> { :src="currentLogo" :alt="siteSettings?.value?.siteName || 'Site Logo'" class="h-8 block" - @error="$event.target.src = '/assets/img/logo/corradAF-logo.svg'" + @error="$event.target.src = '/img/logo/corradAF-logo.svg'" /> { - return siteSettings.value.siteLogo && siteSettings.value.siteLogo.trim() !== '' - ? siteSettings.value.siteLogo - : '/assets/img/logo/logo-imigresen.svg'; +const logoToShow = computed(() => { + // Always try to use the siteLogo from settings first + if (siteSettings.value?.siteLogo && siteSettings.value.siteLogo.trim() !== '') { + return siteSettings.value.siteLogo; + } + // Fallback to default logo if siteLogo is not set + return '/img/logo/corradAF-logo.svg'; +}); + +const siteNameToShow = computed(() => { + return siteSettings.value.siteName || 'Jabatan Imigresen Malaysia'; }); // const menuItem = Menu; @@ -20,6 +27,10 @@ const props = defineProps({ default: () => Menu, required: false, }, + sidebarToggle: { + type: Boolean, + default: false, + }, }); onMounted(() => { @@ -44,17 +55,25 @@ onMounted(() => {
- - - {{ siteSettings.siteName || 'Jabatan Imigresen Malaysia' }} - +
diff --git a/composables/useSiteSettings.js b/composables/useSiteSettings.js index 6574733..f9fef1e 100644 --- a/composables/useSiteSettings.js +++ b/composables/useSiteSettings.js @@ -289,24 +289,45 @@ export const useSiteSettings = () => { // Update site settings const updateSiteSettings = async (newSettings) => { + console.log("[useSiteSettings] updateSiteSettings called with:", JSON.parse(JSON.stringify(newSettings))); try { const response = await $fetch("/api/devtool/config/site-settings", { method: "POST", body: newSettings, }); + console.log("[useSiteSettings] API response received:", JSON.parse(JSON.stringify(response))); if (response && response.data) { - // Update siteSettings with the full response from the API to ensure it reflects the saved state siteSettings.value = { ...siteSettings.value, ...response.data }; applyThemeSettings(); updateGlobalMeta(); - return { success: true, data: response.data }; // Return the actual settings data + console.log("[useSiteSettings] Returning success from updateSiteSettings."); + return { success: true, data: response.data }; } - // Handle cases where response or response.data might be missing, though API should ensure structure - return { success: false, data: response }; + + let errorMessage = "Update operation failed: No data returned from server."; + if (response && typeof response === 'object' && response !== null && 'message' in response) { + errorMessage = response.message; + } else if (response) { + errorMessage = "Update operation failed: Unexpected server response format on success."; + } else if (response === undefined) { + errorMessage = "Update failed: Server returned no content (e.g. 204). Treating as failure as data is expected for settings."; + console.log("[useSiteSettings] Returning failure (204 or undefined response) from updateSiteSettings."); + return { success: false, error: { message: errorMessage, details: response } }; + } + + console.log("[useSiteSettings] Returning failure (general case) from updateSiteSettings:", errorMessage); + return { success: false, error: { message: errorMessage, details: response } }; } catch (error) { - console.error("Error updating site settings:", error); - return { success: false, error }; + console.error("[useSiteSettings] Error in updateSiteSettings catch block:", error); + let detailedMessage = "An unexpected error occurred during update."; + if (error.data && error.data.message) { + detailedMessage = error.data.message; + } else if (error.message) { + detailedMessage = error.message; + } + console.log("[useSiteSettings] Returning failure (catch block) from updateSiteSettings:", detailedMessage); + return { success: false, error: { message: detailedMessage, details: error } }; } }; @@ -329,7 +350,7 @@ export const useSiteSettings = () => { }; return { - siteSettings: readonly(siteSettings), + siteSettings, loading: readonly(loading), loadSiteSettings, updateSiteSettings, diff --git a/pages/devtool/config/site-settings/index.vue b/pages/devtool/config/site-settings/index.vue index d635bc5..d22b6e4 100644 --- a/pages/devtool/config/site-settings/index.vue +++ b/pages/devtool/config/site-settings/index.vue @@ -154,20 +154,42 @@ const saveSettings = async () => { saving.value = true; try { + console.log("[SiteSettingsPage] Calling updateSiteSettings with:", JSON.parse(JSON.stringify(settings.value))); const result = await updateSiteSettings(settings.value); + console.log("[SiteSettingsPage] Received result from updateSiteSettings:", JSON.parse(JSON.stringify(result))); - if (result.success) { + if (result && result.success) { originalSettings.value = { ...settings.value }; $toast.success("Settings saved successfully"); // Apply changes - applyChanges(); - } else { - $toast.error("Failed to save settings"); + // applyChanges(); // Temporarily commented out to isolate the error source + console.log("[SiteSettingsPage] applyChanges() was skipped for testing."); + } else { + // Check if result or result.error is undefined before accessing properties + let errorMsg = "Failed to save settings. Please check console for details."; + if (result && result.error && result.error.message) { + errorMsg = result.error.message; + } else if (result === undefined) { + errorMsg = "Failed to save settings: No response from update operation."; + console.error("[SiteSettingsPage] 'result' from updateSiteSettings was undefined."); + } + + $toast.error(errorMsg); + + if (result && result.error && result.error.details) { + console.error("[SiteSettingsPage] Save settings error details:", result.error.details); + } else if (result === undefined) { + // Already logged above + } else if (result && !result.error) { + console.error("[SiteSettingsPage] Save settings failed, but no 'error' object in result:", JSON.parse(JSON.stringify(result))); + } } } catch (error) { - console.error("Error saving settings:", error); - $toast.error("Failed to save settings"); + // This catch block is for unexpected errors during the saveSettings execution itself, + // or if updateSiteSettings somehow re-throws an error not caught by its own try-catch. + console.error("Critical error saving settings:", error); + $toast.error("A critical error occurred. Failed to save settings."); } finally { saving.value = false; } @@ -320,11 +342,11 @@ const hasChanges = computed(() => { // Get current logo paths const getCurrentLogo = () => { - return settings.value.siteLogo || siteSettings.value.siteLogo || '/assets/img/logo/logo-imigresen.svg'; + return settings.value.siteLogo || siteSettings.value.siteLogo || '/img/logo/corradAF-logo.svg'; }; const getCurrentLoadingLogo = () => { - return settings.value.siteLoadingLogo || siteSettings.value.siteLoadingLogo || '/assets/img/logo/corradAF-logo.svg'; + return settings.value.siteLoadingLogo || siteSettings.value.siteLoadingLogo || '/img/logo/corradAF-logo.svg'; }; const getCurrentFavicon = () => { @@ -332,7 +354,7 @@ const getCurrentFavicon = () => { }; const getCurrentLoginLogo = () => { - return settings.value.siteLoginLogo || siteSettings.value.siteLoginLogo || '/assets/img/logo/corradAF-logo.svg'; + return settings.value.siteLoginLogo || siteSettings.value.siteLoginLogo || '/img/logo/corradAF-logo.svg'; }; // Apply Google Font @@ -562,7 +584,7 @@ watch(() => settings.value.showSiteNameInHeader, (newValue) => { :src="getCurrentLogo()" alt="Current Logo" class="max-w-full max-h-full object-contain" - @error="$event.target.src = '/assets/img/logo/logo-imigresen.svg'" + @error="$event.target.src = '/img/logo/corradAF-logo.svg'" /> @@ -601,7 +623,7 @@ watch(() => settings.value.showSiteNameInHeader, (newValue) => { :src="getCurrentLoadingLogo()" alt="Current Loading Logo" class="max-w-full max-h-full object-contain" - @error="$event.target.src = '/assets/img/logo/corradAF-logo.svg'" + @error="$event.target.src = '/img/logo/corradAF-logo.svg'" /> @@ -640,7 +662,7 @@ watch(() => settings.value.showSiteNameInHeader, (newValue) => { :src="getCurrentLoginLogo()" alt="Current Login Logo" class="max-w-full max-h-full object-contain" - @error="$event.target.src = '/assets/img/logo/corradAF-logo.svg'" + @error="$event.target.src = '/img/logo/corradAF-logo.svg'" /> @@ -977,7 +999,7 @@ watch(() => settings.value.showSiteNameInHeader, (newValue) => { :src="getCurrentLogo()" alt="Logo Preview" class="w-10 h-10 object-contain" - @error="$event.target.src = '/assets/img/logo/logo-imigresen.svg'" + @error="$event.target.src = '/img/logo/corradAF-logo.svg'" /> settings.value.showSiteNameInHeader, (newValue) => { :src="getCurrentLoadingLogo()" alt="Loading Logo Preview" class="w-20 h-20 object-contain" - @error="$event.target.src = '/assets/img/logo/corradAF-logo.svg'" + @error="$event.target.src = '/img/logo/corradAF-logo.svg'" /> @@ -1008,7 +1030,7 @@ watch(() => settings.value.showSiteNameInHeader, (newValue) => { :src="getCurrentLoginLogo()" alt="Login Logo Preview" class="w-20 h-20 object-contain" - @error="$event.target.src = '/assets/img/logo/corradAF-logo.svg'" + @error="$event.target.src = '/img/logo/corradAF-logo.svg'" /> diff --git a/pages/forgot-password/index.vue b/pages/forgot-password/index.vue index 9422b79..445bad3 100644 --- a/pages/forgot-password/index.vue +++ b/pages/forgot-password/index.vue @@ -12,9 +12,9 @@ const email = ref(""); // Get login logo with fallback const getLoginLogo = () => { if (siteSettingsLoading.value) { - return '/assets/img/logo/corradAF-logo.svg'; + return '/img/logo/corradAF-logo.svg'; } - return siteSettings.value?.siteLoginLogo || '/assets/img/logo/corradAF-logo.svg'; + return siteSettings.value?.siteLoginLogo || '/img/logo/corradAF-logo.svg'; }; // Get site name with fallback @@ -44,7 +44,7 @@ const changePassword = () => { :src="getLoginLogo()" :alt="getSiteName()" class="max-w-[180px] max-h-[60px] object-contain" - @error="$event.target.src = '/assets/img/logo/corradAF-logo.svg'" + @error="$event.target.src = '/img/logo/corradAF-logo.svg'" />

diff --git a/pages/login/index.vue b/pages/login/index.vue index 95739c3..d7090d5 100644 --- a/pages/login/index.vue +++ b/pages/login/index.vue @@ -19,9 +19,9 @@ const togglePasswordVisibility = ref(false); // Get login logo with fallback const getLoginLogo = () => { if (siteSettingsLoading.value) { - return '/assets/img/logo/corradAF-logo.svg'; + return '/img/logo/corradAF-logo.svg'; } - return siteSettings.value?.siteLoginLogo || '/assets/img/logo/corradAF-logo.svg'; + return siteSettings.value?.siteLoginLogo || '/img/logo/corradAF-logo.svg'; }; // Get site name with fallback @@ -98,7 +98,7 @@ const handleLoadCallback = (response) => { :src="getLoginLogo()" :alt="getSiteName()" class="max-w-[180px] max-h-[60px] object-contain" - @error="$event.target.src = '/assets/img/logo/corradAF-logo.svg'" + @error="$event.target.src = '/img/logo/corradAF-logo.svg'" />

Log masuk ke akaun anda

diff --git a/pages/register/index.vue b/pages/register/index.vue index 4ae9d65..030d813 100644 --- a/pages/register/index.vue +++ b/pages/register/index.vue @@ -36,9 +36,9 @@ const handleRecaptcha = (response) => { // Get login logo with fallback const getLoginLogo = () => { if (siteSettingsLoading.value) { - return '/assets/img/logo/corradAF-logo.svg'; + return '/img/logo/corradAF-logo.svg'; } - return siteSettings.value?.siteLoginLogo || '/assets/img/logo/corradAF-logo.svg'; + return siteSettings.value?.siteLoginLogo || '/img/logo/corradAF-logo.svg'; }; // Get site name with fallback @@ -62,7 +62,7 @@ const getSiteName = () => { :src="getLoginLogo()" :alt="getSiteName()" class="max-w-[180px] max-h-[60px] object-contain" - @error="$event.target.src = '/assets/img/logo/corradAF-logo.svg'" + @error="$event.target.src = '/img/logo/corradAF-logo.svg'" />

Daftar Akaun

diff --git a/assets/img/logo/corradAF-logo.svg b/public/img/logo/corradAF-logo.svg similarity index 100% rename from assets/img/logo/corradAF-logo.svg rename to public/img/logo/corradAF-logo.svg