Skip to content

Commit

Permalink
#3 - dashboard layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@krzysztofrewak
krzysztofrewak committed Sep 14, 2023
1 parent 637d695 commit f45d0f1
Show file tree
Hide file tree
Showing 5 changed files with 215 additions and 2 deletions.
31 changes: 31 additions & 0 deletions app/Http/Controllers/Dashboard/DashboardController.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<?php

declare(strict_types=1);

namespace App\Http\Controllers\Dashboard;

use App\Http\Controllers\Controller;
use Inertia\Response;

class DashboardController extends Controller
{
public function __invoke(): Response
{
return inertia("Dashboard/Home", [
"title" => "mgr inż.",
"name" => "Krzysztof Rewak",
"counters" => [
[
["name" => "Liczba studentów w tym semestrze", "value" => 54],
["name" => "Liczba kursów w tym semestrze", "value" => 6],
["name" => "Liczba grup w tym semestrze", "value" => 10],
],
[
["name" => "Liczba studentów", "value" => 356],
["name" => "Liczba kursów", "value" => 15],
["name" => "Liczba grup", "value" => 87],
],
],
]);
}
}
3 changes: 2 additions & 1 deletion app/Http/Controllers/HomeController.php → ...ttp/Controllers/Public/HomeController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@

declare(strict_types=1);

namespace App\Http\Controllers;
namespace App\Http\Controllers\Public;

use App\Http\Controllers\Controller;
use Inertia\Response;

class HomeController extends Controller
Expand Down
152 changes: 152 additions & 0 deletions resources/js/Layouts/DashboardLayout.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
<script setup>
import { ref } from 'vue'
import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
import {
Bars3Icon,
ClockIcon,
BriefcaseIcon,
HomeIcon,
PowerIcon,
QuestionMarkCircleIcon,
NewspaperIcon,
XMarkIcon,
AtSymbolIcon,
UsersIcon,
BookmarkSquareIcon,
MagnifyingGlassIcon,
ClipboardIcon,
CodeBracketSquareIcon,
Cog6ToothIcon,
} from '@heroicons/vue/24/outline'
const navigation = [
{
title: 'Ogólne',
elements: [
{ name: 'Dashboard', href: '#', icon: HomeIcon, current: true },
{ name: 'Ustawienia', href: '#', icon: Cog6ToothIcon, current: false },
{ name: 'Aktualności', href: '#', icon: NewspaperIcon, current: false },
{ name: 'FAQ', href: '#', icon: QuestionMarkCircleIcon, current: false },
{ name: 'Formy kontaktu', href: '#', icon: AtSymbolIcon, current: false },
],
},
{
title: 'Uczelnia',
elements: [
{ name: 'Studenci', href: '#', icon: UsersIcon, current: false },
{ name: 'Kursy w semestrze', href: '#', icon: BookmarkSquareIcon, current: false },
],
},
{
title: 'Słowniki',
elements: [
{ name: 'Kursy', href: '#', icon: BriefcaseIcon, current: false },
{ name: 'Kierunki i specjalności', href: '#', icon: MagnifyingGlassIcon, current: false },
{ name: 'Semestry', href: '#', icon: ClipboardIcon, current: false },
{ name: 'Formy zajęć', href: '#', icon: CodeBracketSquareIcon, current: false },
{ name: 'Tryby studiów', href: '#', icon: ClockIcon, current: false },
],
},
]
const sidebarOpen = ref(false)
</script>

<template>
<div>
<TransitionRoot as="template" :show="sidebarOpen">
<Dialog as="div" class="relative z-50 lg:hidden" @close="sidebarOpen = false">
<TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100" leave-to="opacity-0">
<div class="fixed inset-0 bg-gray-900/80" />
</TransitionChild>

<div class="fixed inset-0 flex">
<TransitionChild as="template" enter="transition ease-in-out duration-300 transform" enter-from="-translate-x-full" enter-to="translate-x-0" leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0" leave-to="-translate-x-full">
<DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
<TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100" leave-to="opacity-0">
<div class="absolute left-full top-0 flex w-16 justify-center pt-5">
<button type="button" class="-m-2.5 p-2.5" @click="sidebarOpen = false">
<span class="sr-only">Close sidebar</span>
<XMarkIcon class="h-6 w-6 text-white" aria-hidden="true" />
</button>
</div>
</TransitionChild>
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 pb-2">
<div class="flex h-16 shrink-0 items-center">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=sky&shade=600" alt="Your Company">
</div>
<nav class="flex flex-1 flex-col">
<ul role="list" class="flex flex-1 flex-col gap-y-7">
<li v-for="(section, i) in navigation" :key="i">
<div class="text-xs font-semibold leading-6 text-gray-400">
{{ section.title }}
</div>
<ul role="list" class="-mx-2 space-y-1">
<li v-for="item in section.elements" :key="item.name">
<a :href="item.href" :class="[item.current ? 'bg-gray-50 text-sky-600' : 'text-gray-700 hover:bg-gray-50 hover:text-sky-600', 'group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6']">
<component :is="item.icon" :class="[item.current ? 'text-sky-600' : 'text-gray-400 group-hover:text-sky-600', 'h-6 w-6 shrink-0']" aria-hidden="true" />
{{ item.name }}
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</DialogPanel>
</TransitionChild>
</div>
</Dialog>
</TransitionRoot>

<!-- Static sidebar for desktop -->
<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
<div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6">
<nav class="mt-5 flex flex-1 flex-col">
<ul role="list" class="flex flex-1 flex-col gap-y-7">
<li v-for="(section, i) in navigation" :key="i">
<div class="mb-2 text-xs font-semibold leading-6 text-gray-400">
{{ section.title }}
</div>
<ul role="list" class="-mx-2 space-y-1">
<li v-for="item in section.elements" :key="item.name">
<a :href="item.href" :class="[item.current ? 'bg-gray-50 text-sky-600' : 'text-gray-700 hover:bg-gray-50 hover:text-sky-600', 'group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6']">
<component :is="item.icon" :class="[item.current ? 'text-sky-600' : 'text-gray-400 group-hover:text-sky-600', 'h-6 w-6 shrink-0']" aria-hidden="true" />
{{ item.name }}
</a>
</li>
</ul>
</li>
<li class="-mx-6 mt-auto">
<a href="#" class="flex items-center gap-x-4 px-6 py-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-50">
<PowerIcon class="h-6 w-6 text-gray-700" title="Wyloguj się" />
<span aria-hidden="true">Wyloguj się</span>
</a>
</li>
</ul>
</nav>
</div>
</div>

<div class="sticky top-0 z-40 flex items-center gap-x-6 bg-white p-4 shadow-sm sm:px-6 lg:hidden">
<button type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden" @click="sidebarOpen = true">
<span class="sr-only">Open sidebar</span>
<Bars3Icon class="h-6 w-6" aria-hidden="true" />
</button>
<div class="flex-1 text-sm font-semibold leading-6 text-gray-900">
Dashboard
</div>
<a href="#">
<span class="sr-only">Wyloguj się</span>
<PowerIcon class="h-6 w-6 text-gray-700" title="Wyloguj się" />
</a>
</div>

<main class="py-10 lg:pl-72">
<div class="px-4 sm:px-6 lg:px-8">
<slot />
</div>
</main>
</div>
</template>
27 changes: 27 additions & 0 deletions resources/js/Pages/Dashboard/Home.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<script setup>
import DashboardLayout from '../../Layouts/DashboardLayout.vue'
defineProps({
counters: Array,
})
</script>

<template>
<DashboardLayout>
<h3 class="text-base font-semibold leading-6 text-gray-900">
Ogólne statystyki
</h3>
<div class="flex flex-col">
<dl v-for="(section, i) in counters" :key="i" class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
<div v-for="item in section" :key="item.name" class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
<dt class="truncate text-sm font-medium text-gray-500">
{{ item.name }}
</dt>
<dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
{{ item.value }}
</dd>
</div>
</dl>
</div>
</DashboardLayout>
</template>
4 changes: 3 additions & 1 deletion routes/web.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@

declare(strict_types=1);

use App\Http\Controllers\HomeController;
use App\Http\Controllers\Dashboard\DashboardController;
use App\Http\Controllers\Public\HomeController;
use Illuminate\Support\Facades\Route;

Route::get("/", HomeController::class);
Route::get("/dashboard", DashboardController::class);

0 comments on commit f45d0f1

Please sign in to comment.