adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-16 20:22:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

change profile dropdown to shadcn, add feedback entry

Browse Source
This commit is contained in:
Gregor Vostrak
2025-09-30 13:10:55 +02:00
parent 61ae7edce5
commit e33f3538ce
3 changed files with 101 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/Http/Middleware/HandleInertiaRequests.php
View File

@@ -41,7 +41,8 @@ class HandleInertiaRequests extends Middleware
{ {
$hasBilling = Module::has('Billing') && Module::isEnabled('Billing'); $hasBilling = Module::has('Billing') && Module::isEnabled('Billing');
$hasInvoicing = Module::has('Invoicing') && Module::isEnabled('Invoicing'); $hasInvoicing = Module::has('Invoicing') && Module::isEnabled('Invoicing');
$hasServices = Module::has('Services') && Module::isEnabled('Services');
/** @var BillingContract $billing */ /** @var BillingContract $billing */
$billing = app(BillingContract::class); $billing = app(BillingContract::class);
@@ -50,6 +51,7 @@ class HandleInertiaRequests extends Middleware
return array_merge(parent::share($request), [ return array_merge(parent::share($request), [
'has_billing_extension' => $hasBilling, 'has_billing_extension' => $hasBilling,
'has_invoicing_extension' => $hasInvoicing, 'has_invoicing_extension' => $hasInvoicing,
'has_services_extension' => $hasServices,
'billing' => $currentOrganization !== null ? [ 'billing' => $currentOrganization !== null ? [
'has_subscription' => $billing->hasSubscription($currentOrganization), 'has_subscription' => $billing->hasSubscription($currentOrganization),
'has_trial' => $billing->hasTrial($currentOrganization), 'has_trial' => $billing->hasTrial($currentOrganization),

149
resources/js/Components/UserSettingsIcon.vue
View File

@@ -1,10 +1,22 @@
<script setup lang="ts"> <script setup lang="ts">
import { router, usePage } from '@inertiajs/vue3'; import { Link, router, usePage } from '@inertiajs/vue3';
import type { Organization, User } from '@/types/models'; import type { Organization, User } from '@/types/models';
import DropdownLink from '@/Components/DropdownLink.vue'; import {
import Dropdown from '@/packages/ui/src/Input/Dropdown.vue'; DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
} from '@/Components/ui/dropdown-menu';
import {
UserCircleIcon,
KeyIcon,
ArrowLeftOnRectangleIcon,
ChatBubbleLeftRightIcon,
} from '@heroicons/vue/24/solid';
const page = usePage<{ const page = usePage<{
has_services_extension?: boolean;
has_billing_extension?: boolean;
jetstream: { jetstream: {
canCreateTeams: boolean; canCreateTeams: boolean;
hasTeamFeatures: boolean; hasTeamFeatures: boolean;
@@ -21,62 +33,95 @@ const page = usePage<{
const logout = () => { const logout = () => {
router.post(route('logout')); router.post(route('logout'));
}; };
const openFeedback = () => {
if (
typeof window !== 'undefined' &&
'showChatWindow' in window &&
typeof window.showChatWindow === 'function'
) {
window.showChatWindow();
}
};
</script> </script>
<template> <template>
<div class="ms-3 relative"> <div class="relative">
<Dropdown align="center" width="48"> <DropdownMenu>
<template #trigger> <DropdownMenuTrigger>
<button <template v-if="page.props.jetstream.managesProfilePhotos">
v-if="page.props.jetstream.managesProfilePhotos" <button
data-testid="current_user_button" data-testid="current_user_button"
class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition"> class="flex text-sm border-2 outline-none border-transparent rounded-full focus:border-gray-300 transition">
<img <img
class="h-8 w-8 rounded-full object-cover" class="h-8 w-8 rounded-full object-cover"
:src="page.props.auth.user.profile_photo_url" :src="page.props.auth.user.profile_photo_url"
:alt="page.props.auth.user.name" /> :alt="page.props.auth.user.name" />
</button> </button>
</template>
<template v-else>
<span class="inline-flex rounded-md">
<button
type="button"
class="inline-flex outline-none items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:bg-gray-50 active:bg-gray-50 transition ease-in-out duration-150">
{{ page.props.auth.user.name }}
<span v-else class="inline-flex rounded-md"> <svg
class="ms-2 -me-0.5 h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</button>
</span>
</template>
</DropdownMenuTrigger>
<DropdownMenuContent align="center" class="min-w-40">
<div class="block px-2 py-2 text-xs text-gray-400">Manage Account</div>
<DropdownMenuItem as-child>
<Link
:href="route('profile.show')"
class="inline-flex items-center gap-2.5 w-full">
<UserCircleIcon class="w-5 h-5 text-text-secondary" />
<span>Profile</span>
</Link>
</DropdownMenuItem>
<DropdownMenuItem v-if="page.props.jetstream.hasApiFeatures" as-child>
<Link
:href="route('api-tokens.index')"
class="inline-flex items-center gap-2.5 w-full">
<KeyIcon class="w-5 h-5 text-text-secondary" />
<span>API Tokens</span>
</Link>
</DropdownMenuItem>
<DropdownMenuItem v-if="page.props.has_services_extension" as-child>
<button <button
type="button" type="button"
class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition ease-in-out duration-150"> class="inline-flex items-center gap-2.5 w-full"
{{ page.props.auth.user.name }} @click="openFeedback">
<ChatBubbleLeftRightIcon class="w-5 h-5 text-text-secondary" />
<svg <span>Feedback</span>
class="ms-2 -me-0.5 h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</button> </button>
</span> </DropdownMenuItem>
</template>
<template #content> <form class="w-full" @submit.prevent="logout">
<!-- Account Management --> <DropdownMenuItem as-child class="inline-flex items-center gap-2.5 w-full">
<div class="block px-4 py-2 text-xs text-gray-400">Manage Account</div> <button type="submit" data-testid="logout_button">
<ArrowLeftOnRectangleIcon class="w-5 h-5 text-text-secondary" />
<DropdownLink :href="route('profile.show')"> Profile </DropdownLink> <span>Log Out</span>
</button>
<DropdownLink </DropdownMenuItem>
v-if="page.props.jetstream.hasApiFeatures"
:href="route('api-tokens.index')">
API Tokens
</DropdownLink>
<div class="border-t border-card-border" />
<!-- Authentication -->
<form @submit.prevent="logout">
<DropdownLink as="button" data-testid="logout_button"> Log Out </DropdownLink>
</form> </form>
</template> </DropdownMenuContent>
</Dropdown> </DropdownMenu>
</div> </div>
</template> </template>

2
resources/js/Layouts/AppLayout.vue
View File

@@ -106,7 +106,7 @@ const page = usePage<{
<div v-bind="$attrs" class="flex flex-wrap bg-background text-text-secondary"> <div v-bind="$attrs" class="flex flex-wrap bg-background text-text-secondary">
<div <div
:class="{ :class="{
'!flex bg-default-background w-full z-[9999999999]': showSidebarMenu, '!flex bg-default-background w-full z-30': showSidebarMenu,
}" }"
class="flex-shrink-0 h-screen hidden fixed w-[230px] 2xl:w-[250px] px-2.5 2xl:px-3 py-4 lg:flex flex-col justify-between"> class="flex-shrink-0 h-screen hidden fixed w-[230px] 2xl:w-[250px] px-2.5 2xl:px-3 py-4 lg:flex flex-col justify-between">
<div class="flex flex-col h-full"> <div class="flex flex-col h-full">