Merge pull request #110 from canyongbs/feature/AIDAPP-108-UploadLogoI…

…nPortal-frontend

Create header on portal page - frontend

app-modules/portal/src/Http/Controllers/KnowledgeManagementPortal/KnowledgeManagementPortalController.php

@@ -36,6 +36,7 @@
 
 namespace AidingApp\Portal\Http\Controllers\KnowledgeManagementPortal;
 
+use App\Models\SettingsProperty;
 use Illuminate\Http\JsonResponse;
 use Filament\Support\Colors\Color;
 use Illuminate\Support\Facades\URL;
@@ -48,9 +49,16 @@ class KnowledgeManagementPortalController extends Controller
     public function show(): JsonResponse
     {
         $settings = resolve(PortalSettings::class);
+        $settingsProperty = SettingsProperty::getInstance('portal.logo');
+        $logo = $settingsProperty->getFirstMedia('logo');
 
         return response()->json([
             'layout' => $settings->knowledge_management_portal_layout ?? PortalLayout::Full,
+            'header_logo' => $logo ? $logo->getTemporaryUrl(
+                expiration: now()->addMinutes(5),
+                conversionName: 'logo-height-250px',
+            ) : null,
+            'app_name' => config('app.name'),
             'primary_color' => Color::all()[$settings->knowledge_management_portal_primary_color ?? 'blue'],
             'rounding' => $settings->knowledge_management_portal_rounding,
             'requires_authentication' => $settings->knowledge_management_portal_requires_authentication,

portals/knowledge-management/src/App.vue

@@ -36,6 +36,7 @@
     import AppLoading from './Components/AppLoading.vue';
     import MobileSidebar from './Components/MobileSidebar.vue';
     import DesktopSidebar from './Components/DesktopSidebar.vue';
+    import Header from './Components/Header.vue';
     import determineIfUserIsAuthenticated from './Services/DetermineIfUserIsAuthenticated.js';
     import getAppContext from './Services/GetAppContext.js';
     import axios from './Globals/Axios.js';
@@ -85,7 +86,9 @@
     const portalRounding = ref('');
     const categories = ref({});
     const serviceRequests = ref({});
+    const headerLogo = ref('');
     const tags = ref({});
+    const appName = ref('');
 
     const authentication = ref({
         code: null,
@@ -156,6 +159,10 @@
 
                 portalLayout.value = response.data.layout;
 
+                headerLogo.value = response.data.header_logo;
+
+                appName.value = response.data.app_name;
+
                 setRequiresAuthentication(response.data.requires_authentication).then(() => {
                     requiresAuthentication.value = response.data.requires_authentication;
                 });
@@ -432,6 +439,8 @@
                 </div>
             </div>
             <div v-else>
+                <Header :api-url="apiUrl" @show-login="showLogin = true" :header-logo="headerLogo" :app-name="appName">
+                </Header>
                 <div v-if="errorLoading" class="text-center">
                     <h1 class="text-3xl font-bold text-red-500">Error Loading the Help Center</h1>
                     <p class="text-lg text-red-500">Please try again later</p>

portals/knowledge-management/src/Components/Header.vue

@@ -0,0 +1,98 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2024, Canyon GBS LLC. All rights reserved.
+
+    Aiding App™ is licensed under the Elastic License 2.0. For more details,
+    see <https://github.com/canyongbs/aidingapp/blob/main/LICENSE.>
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Aiding App™ are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    <https://www.canyongbs.com> or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<script setup>
+    import { defineProps } from 'vue';
+    import { consumer } from '../Services/Consumer.js';
+    import { useAuthStore } from '../Stores/auth.js';
+    import { useFeatureStore } from '../Stores/feature.js';
+    import { useTokenStore } from '../Stores/token.js';
+
+    const { user, requiresAuthentication } = useAuthStore();
+    const { hasServiceManagement } = useFeatureStore();
+    const { removeToken } = useTokenStore();
+
+    const props = defineProps({
+        apiUrl: {
+            type: String,
+            required: true,
+        },
+        headerLogo: {
+            type: String,
+            required: true,
+        },
+        appName: {
+            type: String,
+            required: true,
+        },
+    });
+
+    const logout = () => {
+        const { post } = consumer();
+
+        post(props.apiUrl + '/logout').then((response) => {
+            if (!response.data.success) {
+                return;
+            }
+
+            removeToken();
+            window.location.href = response.data.redirect_url;
+        });
+    };
+</script>
+
+<template>
+    <div class="header">
+        <div class="columns-2 mb-1">
+            <img :src="headerLogo" :alt="appName" class="h-12 m-3" />
+            <span v-if="requiresAuthentication || hasServiceManagement">
+                <button
+                    v-if="user"
+                    @click="logout"
+                    type="button"
+                    class="text-primary-700 text-sm font-medium float-right border-2 m-3 p-2 outline-primary-700"
+                >
+                    Sign out
+                </button>
+                <button
+                    v-else
+                    @click="$emit('showLogin')"
+                    type="button"
+                    class="text-primary-700 text-sm font-medium float-right border-2 m-3 p-2 outline-primary-700"
+                >
+                    Sign in
+                </button>
+            </span>
+        </div>
+    </div>
+</template>

portals/knowledge-management/src/Components/SidebarContent.vue

@@ -33,10 +33,6 @@
 -->
 <script setup>
     import { defineProps } from 'vue';
-    import { consumer } from '../Services/Consumer.js';
-    import { useTokenStore } from '../Stores/token.js';
-    import { useAuthStore } from '../Stores/auth.js';
-    import { useFeatureStore } from '../Stores/feature.js';
 
     const props = defineProps({
         categories: {
@@ -48,22 +44,6 @@
             required: true,
         },
     });
-
-    const { removeToken } = useTokenStore();
-    const { user, requiresAuthentication } = useAuthStore();
-    const { hasServiceManagement } = useFeatureStore();
-
-    const logout = () => {
-        const { post } = consumer();
-        post(props.apiUrl + '/logout').then((response) => {
-            if (!response.data.success) {
-                return;
-            }
-
-            removeToken();
-            window.location.href = response.data.redirect_url;
-        });
-    };
 </script>
 
 <template>
@@ -74,24 +54,6 @@
                     <span class="mr-1">🛟</span> <span>Help Center</span>
                 </h3>
             </router-link>
-            <div v-if="requiresAuthentication || hasServiceManagement" class="flex justify-center">
-                <button
-                    v-if="user"
-                    @click="logout"
-                    type="button"
-                    class="text-gray-700 hover:text-primary-700 text-sm font-medium hover:underline focus:underline"
-                >
-                    Sign out
-                </button>
-                <button
-                    v-else
-                    @click="$emit('showLogin')"
-                    type="button"
-                    class="text-gray-700 hover:text-primary-700 text-sm font-medium hover:underline focus:underline"
-                >
-                    Sign in
-                </button>
-            </div>
         </div>
 
         <ul role="list" class="my-2 flex flex-col gap-y-1">