Lots of changes

This commit is contained in:
Simon Pocrnjič
2024-11-13 22:11:07 +01:00
parent 90a5858320
commit 953ff38d64
76 changed files with 2822 additions and 427 deletions
+23 -72
View File
@@ -1,27 +1,20 @@
<script setup>
import { ref } from 'vue';
import { Head, Link, router } from '@inertiajs/vue3';
import { computed, ref } from 'vue';
import { Head, Link, router, usePage } from '@inertiajs/vue3';
import ApplicationMark from '@/Components/ApplicationMark.vue';
import Banner from '@/Components/Banner.vue';
import Dropdown from '@/Components/Dropdown.vue';
import DropdownLink from '@/Components/DropdownLink.vue';
import NavLink from '@/Components/NavLink.vue';
import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
import Breadcrumbs from '@/Components/Breadcrumbs.vue';
defineProps({
const props = defineProps({
title: String,
});
const showingNavigationDropdown = ref(false);
const switchToTeam = (team) => {
router.put(route('current-team.update'), {
team_id: team.id,
}, {
preserveState: false,
});
};
const logout = () => {
router.post(route('logout'));
};
@@ -55,70 +48,22 @@ const logout = () => {
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
<NavLink :href="route('client')" :active="route().current('client') || route().current('client.*')">
Client
Clients
</NavLink>
</div>
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
<NavLink :href="route('clientCase')" :active="route().current('clientCase') || route().current('clientCase.*')">
Cases
</NavLink>
</div>
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
<NavLink :href="route('settings')" :active="route().current('settings') || route().current('settings.*')">
Settings
</NavLink>
</div>
</div>
<div class="hidden sm:flex sm:items-center sm:ms-6">
<div class="ms-3 relative">
<!-- Teams Dropdown -->
<Dropdown v-if="$page.props.jetstream.hasTeamFeatures" align="right" width="60">
<template #trigger>
<span class="inline-flex rounded-md">
<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">
{{ $page.props.auth.user.current_team.name }}
<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="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
</svg>
</button>
</span>
</template>
<template #content>
<div class="w-60">
<!-- Team Management -->
<div class="block px-4 py-2 text-xs text-gray-400">
Manage Team
</div>
<!-- Team Settings -->
<DropdownLink :href="route('teams.show', $page.props.auth.user.current_team)">
Team Settings
</DropdownLink>
<DropdownLink v-if="$page.props.jetstream.canCreateTeams" :href="route('teams.create')">
Create New Team
</DropdownLink>
<!-- Team Switcher -->
<template v-if="$page.props.auth.user.all_teams.length > 1">
<div class="border-t border-gray-200" />
<div class="block px-4 py-2 text-xs text-gray-400">
Switch Teams
</div>
<template v-for="team in $page.props.auth.user.all_teams" :key="team.id">
<form @submit.prevent="switchToTeam(team)">
<DropdownLink as="button">
<div class="flex items-center">
<svg v-if="team.id == $page.props.auth.user.current_team_id" class="me-2 h-5 w-5 text-green-400" 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="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>{{ team.name }}</div>
</div>
</DropdownLink>
</form>
</template>
</template>
</div>
</template>
</Dropdown>
</div>
<!-- Settings Dropdown -->
<div class="ms-3 relative">
<Dropdown align="right" width="48">
@@ -130,7 +75,6 @@ const logout = () => {
<span v-else class="inline-flex rounded-md">
<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">
{{ $page.props.auth.user.name }}
<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>
@@ -203,6 +147,12 @@ const logout = () => {
<ResponsiveNavLink :href="route('client')" :active="route().current('client')">
Clients
</ResponsiveNavLink>
<ResponsiveNavLink :href="route('clientCase')" :active="route().current('clientCase')">
Cases
</ResponsiveNavLink>
<ResponsiveNavLink :href="route('settings')" :active="route().current('settings')">
Settings
</ResponsiveNavLink>
</div>
<!-- Responsive Settings Options -->
@@ -285,7 +235,8 @@ const logout = () => {
<!-- Page Heading -->
<header v-if="$slots.header" class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<slot name="header" />
<Breadcrumbs :breadcrumbs="$page.props.breadcrumbs"></Breadcrumbs>
</div>
</header>