Add dependency click-outside-vue3 to make dropdowns work without boot…

…strap js Allow Vue3 to control bootstrap theme when using the Inertia Layout Moved theme selector into profile form, later realised Fortify actions dont have access to session Add help icon to Inertia layout Add Vue3 TS composition API template _Template.vue for easy duplication without a generator like yeoman
munkireport · Dec 27, 2023 · d2316c4 · d2316c4
1 parent 13a9c61
commit d2316c4
Show file tree

Hide file tree

Showing 12 changed files with 86 additions and 18 deletions.
diff --git a/app/Actions/Fortify/UpdateUserProfileInformation.php b/app/Actions/Fortify/UpdateUserProfileInformation.php
@@ -23,7 +23,8 @@ public function update(User $user, array $input): void
             'photo' => ['nullable', 'mimes:jpg,jpeg,png', 'max:1024'],
             'locale' => [
                 'string'
-            ]
+            ],
+            'theme' => ['string']
         ])->validateWithBag('updateProfileInformation');
 
         if (isset($input['photo'])) {
@@ -42,7 +43,8 @@ public function update(User $user, array $input): void
         }
 
         if (isset($input['theme'])) {
-            $request->session()->set('theme', $input['theme']);
+            // Session is not available in this context?
+//            session()->set('theme', $input['theme']);
         }
 
         if (isset($input['locale'])) {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
         "bootstrap-tagsinput": "^0.7.1",
         "bootstrap-vue": "^2.23.1",
         "bootstrap4-tagsinput": "^4.1.3",
+        "click-outside-vue3": "^4.0.1",
         "cm6-graphql": "^0.0.9",
         "codemirror": "^6.0.1",
         "codemirror6-bootstrap-theme": "^0.0.1",

diff --git a/resources/js/Components/Dropdown.vue b/resources/js/Components/Dropdown.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import {ref, defineProps} from 'vue'
+import vClickOutside from 'click-outside-vue3'
 
 export interface Props {
   label?: string;
@@ -17,10 +18,15 @@ let open = ref(false);
 
 const toggle = () => open.value = ! open.value;
 
+const hide = () => {
+  console.log('click outside')
+  open.value = false
+}
+
 </script>
 
 <template>
-  <div class="dropdown">
+  <div class="dropdown" v-click-outside="hide">
     <slot name="toggle" :toggle="toggle">
       <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false" @click="open = ! open">
         {{ label }}

diff --git a/resources/js/Components/Navbar.vue b/resources/js/Components/Navbar.vue
@@ -10,10 +10,11 @@
     faThLarge,
     faSearch,
     faUser,
+    faQuestion
   } from '@fortawesome/free-solid-svg-icons'
   import {
     faChartBar,
-    faListAlt,
+    faListAlt
   } from '@fortawesome/free-regular-svg-icons'
   import Dropdown from "./Dropdown.vue";
 
@@ -148,8 +149,9 @@
         </template>
 
         <Link class="dropdown-item" href="/user/profile">{{ t('nav.user.profile')}}</Link>
+        <Link class="dropdown-item" href="/user/api-tokens">{{ t('nav.user.tokens')}}</Link>
         <a class="dropdown-item" href="/api/documentation">{{ t('nav.api.documentation')}}</a>
-        <a class="dropdown-item dropdown-divider"></a>
+        <div class="dropdown-divider"></div>
 
         <form action="/auth/logout" method="POST" @submit.prevent="logout">
           <button type="submit" class="dropdown-item">
@@ -159,6 +161,11 @@
         </form>
       </Dropdown>
 
+      <li class="nav-item">
+        <a class="nav-link" href="https://github.com/munkireport/munkireport-php/wiki" target="_blank">
+          <FontAwesomeIcon :icon="faQuestion" />
+        </a>
+      </li>
     </ul>
   </nav>
 </template>

diff --git a/resources/js/Components/_Template.vue b/resources/js/Components/_Template.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import {
+  ref,
+  reactive,
+  computed,
+  defineEmits,
+  defineProps,
+  inject,
+  provide,
+} from 'vue'
+import {Head, Link, usePage} from '@inertiajs/vue3'
+import {useTranslation} from 'i18next-vue'
+
+</script>
+
+<template>
+  <div></div>
+</template>
+
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
@@ -1,18 +1,29 @@
 <script setup lang="ts">
-import { ref, defineProps } from 'vue';
-import { Head, Link, router } from '@inertiajs/vue3';
+import { ref, defineProps, withDefaults } from 'vue';
+import { Head, Link, usePage } from '@inertiajs/vue3';
 import Navbar from '@/Components/Navbar.vue'
 import Footer from '@/Components/Footer.vue'
 
-defineProps({
-  title: String,
-});
+export interface Props {
+  title?: string;
+  theme?: string;
+}
+
+const page = usePage()
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'MunkiReport 6.0',
+  theme: 'Default',
+})
 
 
 </script>
 
 <template>
-  <Head :title="title" />
+  <Head>
+    <title>{{ title }}</title>
+    <link rel="stylesheet" :href="`/assets/themes/${theme}/bootstrap.min.css`" id="bootstrap-stylesheet" />
+  </Head>
   <Navbar />
   <main style="padding-top: 56px;">
     <slot></slot>

diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -10,6 +10,7 @@ const { t, i18next } = useTranslation();
 
 const props = defineProps({
     user: Object,
+    themes: Array,
 });
 
 const form = useForm({
@@ -18,12 +19,14 @@ const form = useForm({
     email: props.user.email,
     photo: null,
     locale: props.user.locale,
+    theme: props.current_theme,
 });
 
 const verificationLinkSent = ref(null);
 const photoPreview = ref(null);
 const photoInput = ref(null);
 const selectLocale = ref(null);
+const themeSelect = ref(null);
 
 const updateProfileInformation = () => {
     if (photoInput.value) {
@@ -119,6 +122,14 @@ const clearPhotoFileInput = () => {
               </select>
               <div v-text="form.errors.locale" class="invalid-feedback" />
             </div>
+
+          <!-- Theme -->
+          <div class="form-group">
+            <label for="themeSelection">Theme</label>
+            <select class="form-control" id="themeSelection" ref="themeSelect" v-model="form.theme" @change="updateTheme">
+              <option v-for="theme in themes" :key="theme" :value="theme">{{ theme }}</option>
+            </select>
+          </div>
         </template>
 
         <template #actions>

diff --git a/resources/js/Pages/Profile/Show.vue b/resources/js/Pages/Profile/Show.vue
@@ -19,7 +19,7 @@ defineProps({
     <AppLayout title="Profile">
         <div class="container">
           <div v-if="$page.props.jetstream.canUpdateProfileInformation">
-              <UpdateProfileInformationForm :user="$page.props.auth.user" />
+              <UpdateProfileInformationForm :user="$page.props.auth.user" :themes="$page.props.themes" />
 
               <SectionBorder />
           </div>
@@ -49,10 +49,10 @@ defineProps({
 <!--            <SectionBorder />-->
 <!--          </div>-->
 
-          <div>
-            <UpdateThemeForm :user="$page.props.auth.user" :themes="$page.props.themes" class="mt-10" />
-            <SectionBorder />
-          </div>
+<!--          <div>-->
+<!--            <UpdateThemeForm :user="$page.props.auth.user" :themes="$page.props.themes" class="mt-10" />-->
+<!--            <SectionBorder />-->
+<!--          </div>-->
 
           <LogoutOtherBrowserSessionsForm :sessions="sessions" class="mt-10 sm:mt-0" />
 

diff --git a/resources/js/app.ts b/resources/js/app.ts
@@ -7,7 +7,6 @@ import I18NextVue from 'i18next-vue'
 import Fetch from 'i18next-fetch-backend';
 import urql, { cacheExchange, fetchExchange } from '@urql/vue';
 
-
 i18next
     .use(Fetch)
     .init({

diff --git a/resources/js/inertia.d.ts b/resources/js/inertia.d.ts
@@ -2,6 +2,7 @@ export {};
 declare global {
     export namespace inertia {
         export interface Props {
+            current_theme: string;
             user: {
                 id: number;
                 name: string;
@@ -14,6 +15,7 @@ declare global {
             };
             errorBags: unknown;
             errors: unknown;
+            themes: string[];
         }
     }
 }
diff --git a/resources/views/layouts/inertia.blade.php b/resources/views/layouts/inertia.blade.php
@@ -27,7 +27,8 @@
     <meta name="msapplication-config" content="{{ asset('assets/images/favicons/browserconfig.xml') }}">
     <meta name="theme-color" content="#5d5858">
 
-    <link rel="stylesheet" href="{{ asset('assets/themes/' . session('theme', 'Default') . '/bootstrap.min.css') }}" id="bootstrap-stylesheet" />
+    <!-- the bootstrap theme stylesheet is moved into the InertiaJS Head component so that it may be modified on the fly -->
+    <!-- <link rel="stylesheet" href="{{ asset('assets/themes/' . session('theme', 'Default') . '/bootstrap.min.css') }}" id="bootstrap-stylesheet" /> -->
 
     <!-- munkireport.custom_css -->
     @if (config('_munkireport.custom_css'))