PHP Classes

File: resources/js/Layouts/AppLayout.vue

Recommend this page to a friend!
  Classes of Robert Devenyi   Iceburg SAAS PHP CRM Open Source   resources/js/Layouts/AppLayout.vue   Download  
File: resources/js/Layouts/AppLayout.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Iceburg SAAS PHP CRM Open Source
Application to manage the contacts of customers
Author: By
Last change:
Date: 1 year ago
Size: 19,987 bytes
 

Contents

Class file image Download
<script setup> import { ref } from 'vue'; import { Inertia } from '@inertiajs/inertia'; import { Head, Link, usePage } from '@inertiajs/inertia-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'; defineProps({ title: String, }); const showingNavigationDropdown = ref(false); const subscriptions = ref(usePage().props.value.user.subscriptions); //sePage().props.value.user.subscriptions[0].stripe_status //let has_subscription = false; //console.log(usePage().props.value.subscribed); //console.log(usePage().props.value.user); //if(usePage().props.value.user.subscriptions.length > 0) //{ // has_subscription = usePage().props.value.user.subscriptions[0].stripe_status === 'active' ? true : false; //} const is_subscribed = ref(usePage().props.value.subscribed); //console.log(usePage().props.value.user.subscriptions[0].stripe_status); console.log(is_subscribed); const switchToTeam = (team) => { Inertia.put(route('current-team.update'), { team_id: team.id, }, { preserveState: false, }); }; const logout = () => { Inertia.post(route('logout')); }; </script> <template> <div data-theme="cupcake"> <Head :title="title" /> <Banner /> <div class="min-h-screen bg-gray-100"> <nav class="bg-white border-b border-gray-100"> <!-- Primary Navigation Menu --> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between h-16"> <div class="flex"> <!-- Logo --> <div class="flex items-center"> <img src='/images/iceburg_resized.png' alt="Logo" class="h-50 mask mask-hexagon-2" /> <span class="ml-2 text-3xl font-bold">Iceburg CRM</span> </div> <!-- Navigation Links --> <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex"> <NavLink :href="route('dashboard')" :active="route().current('dashboard')"> Dashboard </NavLink> <NavLink href="/create"> Create </NavLink> <NavLink href="/support"> Support </NavLink> <a v-if="!is_subscribed" class="ml-5 mt-5 btn btn-error text-white btn-xs" href="/subscribe">Upgrade</a> <a v-else class="inline-flex underline-offset-0 items-center px-1 pt-1 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition" href="https://dashboard.stripe.com" target="_blank" :active="route().current('plans')"> Billing Portal </a> </div> </div> <div class="hidden sm:flex sm:items-center sm:ml-6"> <div class="ml-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:bg-gray-50 hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition"> {{ $page.props.user.current_team.name }} <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" > <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg> </button> </span> </template> <template #content> <div class="w-60"> <!-- Team Management --> <template v-if="$page.props.jetstream.hasTeamFeatures"> <div class="block px-4 py-2 text-xs text-gray-400"> Manage Team </div> <!-- Team Settings --> <DropdownLink :href="route('teams.show', $page.props.user.current_team)"> Team Settings </DropdownLink> <DropdownLink v-if="$page.props.jetstream.canCreateTeams" :href="route('teams.create')"> Create New Team </DropdownLink> <div class="border-t border-gray-100" /> <!-- Team Switcher --> <div class="block px-4 py-2 text-xs text-gray-400"> Switch Teams </div> <template v-for="team in $page.props.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.user.current_team_id" class="mr-2 h-5 w-5 text-green-400" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24" ><path d="M9 12l2 2 4-4m6 2a9 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="ml-3 relative"> <Dropdown align="right" width="48"> <template #trigger> <button v-if="$page.props.jetstream.managesProfilePhotos" class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition"> <img class="h-8 w-8 rounded-full object-cover" :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name"> </button> <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 transition"> {{ $page.props.user.name }} <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" > <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg> </button> </span> </template> <template #content> <!-- Account Management --> <div class="block px-4 py-2 text-xs text-gray-400"> Manage Account </div> <DropdownLink :href="route('profile.show')"> Profile </DropdownLink> <DropdownLink v-if="$page.props.jetstream.hasApiFeatures" :href="route('api-tokens.index')"> API Tokens </DropdownLink> <div class="border-t border-gray-100" /> <!-- Authentication --> <form @submit.prevent="logout"> <DropdownLink as="button"> Log Out </DropdownLink> </form> </template> </Dropdown> </div> </div> <!-- Hamburger --> <div class="-mr-2 flex items-center sm:hidden"> <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition" @click="showingNavigationDropdown = ! showingNavigationDropdown"> <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24" > <path :class="{'hidden': showingNavigationDropdown, 'inline-flex': ! showingNavigationDropdown }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> <path :class="{'hidden': ! showingNavigationDropdown, 'inline-flex': showingNavigationDropdown }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> </div> </div> <!-- Responsive Navigation Menu --> <div :class="{'block': showingNavigationDropdown, 'hidden': ! showingNavigationDropdown}" class="sm:hidden"> <div class="pt-2 pb-3 space-y-1"> <ResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')"> Dashboard </ResponsiveNavLink> <ResponsiveNavLink href="/create"> Create </ResponsiveNavLink> <ResponsiveNavLink href="/support"> Support </ResponsiveNavLink> <ResponsiveNavLink href="https://dashboard.stripe.com/login" target="_blank"> Billing Portal </ResponsiveNavLink> <a v-if="!is_subscribed" class="ml-5 mt-5 btn btn-error text-white btn-xs" href="/subscribe">Upgrade</a> <a v-else class="inline-flex underline-offset-0 items-center px-1 pt-1 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition" href="https://dashboard.stripe.com" target="_blank" :active="route().current('plans')"> Billing Portal </a> </div> <!-- Responsive Settings Options --> <div class="pt-4 pb-1 border-t border-gray-200"> <div class="flex items-center px-4"> <div v-if="$page.props.jetstream.managesProfilePhotos" class="shrink-0 mr-3"> <img class="h-10 w-10 rounded-full object-cover" :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name"> </div> <div> <div class="font-medium text-base text-gray-800"> {{ $page.props.user.name }} </div> <div class="font-medium text-sm text-gray-500"> {{ $page.props.user.email }} </div> </div> </div> <div class="mt-3 space-y-1"> <ResponsiveNavLink :href="route('profile.show')" :active="route().current('profile.show')"> Profile </ResponsiveNavLink> <ResponsiveNavLink v-if="$page.props.jetstream.hasApiFeatures" :href="route('api-tokens.index')" :active="route().current('api-tokens.index')"> API Tokens </ResponsiveNavLink> <!-- Authentication --> <form method="POST" @submit.prevent="logout"> <ResponsiveNavLink as="button"> Log Out </ResponsiveNavLink> </form> <!-- Team Management --> <template v-if="$page.props.jetstream.hasTeamFeatures"> <div class="border-t border-gray-200" /> <div class="block px-4 py-2 text-xs text-gray-400"> Manage Team </div> <!-- Team Settings --> <ResponsiveNavLink :href="route('teams.show', $page.props.user.current_team)" :active="route().current('teams.show')"> Team Settings </ResponsiveNavLink> <ResponsiveNavLink v-if="$page.props.jetstream.canCreateTeams" :href="route('teams.create')" :active="route().current('teams.create')"> Create New Team </ResponsiveNavLink> <div class="border-t border-gray-200" /> <!-- Team Switcher --> <div class="block px-4 py-2 text-xs text-gray-400"> Switch Teams </div> <template v-for="team in $page.props.user.all_teams" :key="team.id"> <form @submit.prevent="switchToTeam(team)"> <ResponsiveNavLink as="button"> <div class="flex items-center"> <svg v-if="team.id == $page.props.user.current_team_id" class="mr-2 h-5 w-5 text-green-400" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24" ><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> <div>{{ team.name }}</div> </div> </ResponsiveNavLink> </form> </template> </template> </div> </div> </div> </nav> <!-- 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" /> </div> </header> <!-- Page Content --> <main> <slot /> </main> </div> </div> </template>