- wip dashboard

app/Http/Controllers/Dashboard/AdminPanelController.php

@@ -6,7 +6,7 @@ use App\Http\Controllers\Controller;
 use App\Repository\Interfaces\CategoryRepository;
 use App\Repository\Interfaces\ProjectRepository;
 use Illuminate\Http\Request;
-use Illuminate\View\View;
+use Inertia\Response as InertiaResponse;
 
 class AdminPanelController extends Controller
 {
@@ -18,12 +18,12 @@ class AdminPanelController extends Controller
         $this->categoryRepository->auth = true;
     }
 
-    public function __invoke(Request $request): View
+    public function __invoke(Request $request): InertiaResponse
     {
         $categories = $this->categoryRepository->all();
         $projects = $this->projectRepository->all();
 
-        return view('dashboard.home', compact('categories', 'projects'));
+        return inertia('Dashboard/Index', compact('categories', 'projects'));
     }
 
 }

app/Http/Controllers/Dashboard/ProjectController.php

@@ -5,9 +5,9 @@ namespace App\Http\Controllers\Dashboard;
 use App\Http\Requests\ProjectRequest;
 use App\Models\Project;
 use App\Repository\Interfaces\ProjectRepository;
-use Carbon\Carbon;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\View\View;
+use Inertia\Response as InertiaResponse;
 
 class ProjectController
 {
@@ -33,9 +33,9 @@ class ProjectController
         return back()->withError(['message_error', 'Wystąpił błąd podczas aktualizacji!']);
     }
 
-    public function create(): View
+    public function create(): InertiaResponse
     {
-        return view('dashboard.projects.create');
+        return inertia('Projects/Create');
     }
 
     public function store(ProjectRequest $request): RedirectResponse

resources/js/Pages/Dashboard/Index.vue

@@ -0,0 +1,28 @@
+<script setup>
+import ProjectsList from '../../Share/ProjectsList.vue';
+import CategoriesList from '../../Share/CategoriesList.vue';
+
+defineProps({
+    categories: {
+        type: Array,
+        required: true,
+    },
+    projects: {
+        type: Array,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <InertiaHead title="Dashboard" />
+    <div class="p-4">
+        <header class="pb-4">
+            <h1 class="text-3xl font-roboto font-light">Dashboard</h1>
+        </header>
+        <div class="grid md:grid-cols-3 lg:grid-cols-4 gap-3">
+            <ProjectsList class="md:col-span-2 lg:col-span-3" :projects="projects" />
+            <CategoriesList class="col-span-1" :categories="categories" />
+        </div>
+    </div>
+</template>

resources/js/Pages/Projects/Create.vue

@@ -0,0 +1,122 @@
+<script setup>
+import { useForm } from '@inertiajs/inertia-vue3';
+import Input from '../../Share/Components/Input.vue';
+
+const form = useForm({
+    title: null,
+    author: null,
+    categories: null,
+    release_date: null,
+    update_date: null,
+    image_small: null,
+    image_medium: null,
+    image_large: null,
+    project_url: null,
+    project_version: null,
+    description: null,
+    visible: false,
+});
+</script>
+
+<template>
+    <InertiaHead title="Nowy projekt" />
+    <div class="p-4">
+        <header class="pb-4">
+            <h1 class="text-3xl font-roboto font-light">Nowy projekt</h1>
+        </header>
+        <div>
+            <form class="flex flex-col gap-4" @submit.prevent>
+                <Input
+                    id="title"
+                    label="Tytuł"
+                    placeholder="Nazwa projektu"
+                    v-model="form.title"
+                    :error="form.errors.title"
+                />
+                <Input
+                    id="author"
+                    label="Autor"
+                    placeholder="Imię i nazwisko"
+                    v-model="form.author"
+                    :error="form.errors.author"
+                />
+                <Input
+                    id="categories"
+                    label="Kategorie"
+                    placeholder="Kategorie projektu"
+                    v-model="form.categories"
+                    :error="form.errors.categories"
+                />
+                <Input
+                    id="release_date"
+                    label="Data pierwszego wydania"
+                    type="date"
+                    v-model="form.release_date"
+                    :error="form.errors.release_date"
+                />
+                <Input
+                    id="update_date"
+                    label="Data aktualizacji"
+                    type="date"
+                    v-model="form.update_date"
+                    :error="form.errors.update_date"
+                />
+                <Input
+                    id="image_small"
+                    label="Zdjęcie projekty - małe"
+                    v-model="form.image_small"
+                    :error="form.errors.image_small"
+                />
+                <Input
+                    id="image_medium"
+                    label="Zdjęcie projekty - średnie"
+                    v-model="form.image_medium"
+                    :error="form.errors.image_medium"
+                />
+                <Input
+                    id="image_large"
+                    label="Zdjęcie projekty - duże"
+                    v-model="form.image_large"
+                    :error="form.errors.image_large"
+                />
+                <Input
+                    id="project_url"
+                    label="Adres projektu"
+                    placeholder="Adres www strony projektu"
+                    v-model="form.project_url"
+                    :error="form.errors.project_url"
+                />
+                <Input
+                    id="project_url"
+                    label="Adres projektu"
+                    placeholder="Adres www strony projektu"
+                    v-model="form.project_url"
+                    :error="form.errors.project_url"
+                />
+                <Input
+                    id="project_version"
+                    label="Wersja projektu"
+                    placeholder="v1.0.0"
+                    v-model="form.project_version"
+                    :error="form.errors.project_version"
+                />
+                <Input
+                    id="description"
+                    label="Opis"
+                    type="textarea"
+                    placeholder="Ładny opis"
+                    v-model="form.description"
+                    :error="form.errors.description"
+                    textareaHeight="200px"
+                />
+                <Input
+                    id="visible"
+                    label="Widoczny"
+                    type="checkbox"
+                    v-model="form.visible"
+                />
+                <button class="px-0.5 py-1 rounded-lg bg-[#436da7] border-4 border-[#436da7] text-white text-lg hover:bg-transparent hover:text-[#436da7]">Dodaj projekt</button>
+            </form>
+        </div>
+    </div>
+</template>

resources/js/Share/CategoriesList.vue

@@ -0,0 +1,25 @@
+<script setup>
+defineProps({
+    categories: {
+        type: Array,
+        required: true,
+    }
+});
+</script>
+
+<template>
+    <section class="bg-gray-100 rounded-md p-4">
+        <header class="pb-4">
+            <h2 class="text-2xl font-roboto font-light">Categories</h2>
+        </header>
+        <ul class="flex flex-col gap-2">
+            <li
+                v-for="(category, key) in categories"
+                :key="key"
+                class="px-3 py-2 bg-white hover:bg-zinc-300"
+            >
+                {{ category.name }}
+            </li>
+        </ul>
+    </section>
+</template>

resources/js/Share/Components/Input.vue

@@ -0,0 +1,47 @@
+<script setup>
+defineProps({
+    modelValue: String,
+    id: String,
+    type: {
+        type: String,
+        default: 'text',
+    },
+    label: String,
+    placeholder: String,
+    error: {
+        type: Object,
+        default: null,
+    },
+    textareaHeight: {
+        type: String,
+        default: null,
+    }
+});
+defineEmits(['update:modelValue']);
+</script>
+
+<template>
+    <div :class="['flex w-full', (type === 'checkbox' ? 'flex-row gap-2 items-center bg-gray-200 px-2 py-2 rounded-md' : 'flex-col gap-1')]">
+        <label :for="id"
+            class="text-gray-500">{{ label }}</label>
+        <textarea v-if="type === 'textarea'"
+            :id="id"
+            :class="['w-full min-w-full max-w-full h-[200px] min-h-[200px] px-2.5 py-2 border-b-2 rounded-md', error ? 'border-red-300 focus:border-red-400 hover:border-red-500 outline-none text-red-900 placeholder-red-400' : 'border-neutral-300 focus:border-neutral-400 hover:border-neutral-500 outline-none text-gray-900 placeholder-gray-400']"
+            :value="modelValue"
+            @input="$emit('update:modelValue', $event.target.value)"
+            :placeholder="placeholder"></textarea>
+        <input v-else-if="type === 'checkbox'"
+            :id="id"
+            :value="modelValue"
+            @input="$emit('update:modelValue', $event.target.value)"
+            type="checkbox" />
+        <input v-else
+            :id="id"
+            :class="['w-full px-2.5 py-2 border-b-2 rounded-md', error ? 'border-red-300 focus:border-red-400 hover:border-red-500 outline-none text-red-900 placeholder-red-400' : 'border-neutral-300 focus:border-neutral-400 hover:border-neutral-500 outline-none text-gray-900 placeholder-gray-400']"
+            :type="type"
+            :value="modelValue"
+            @input="$emit('update:modelValue', $event.target.value)"
+            :placeholder="placeholder" />
+        <span class="text-red-400" v-if="error">{{ error }}</span>
+    </div>
+</template>

resources/js/Share/Layout/App.vue

@@ -1,7 +1,34 @@
-<template>
-
-</template>
-
 <script setup>
 
 </script>
+
+<style lang="css">
+.header {
+    background: linear-gradient(237.74deg,#1199a5,#436da7 83%);
+}
+.logo-green {
+    color: rgb(162, 207, 0);
+}
+</style>
+
+<template>
+    <div>
+        <header class="header">
+            <div class="flex gap-5 items-center justify-between md:justify-start max-w-screen-lg mx-auto font-thasadith">
+                <InertiaLink href="/dashboard">
+                    <div
+                        class="bg-white text-gray-800 pl-10 pr-5 py-2.5 text-4xl"
+                    >Kamil<span class="logo-green">Craft</span></div>
+                </InertiaLink>
+                <nav>
+                    <ul class="flex gap-3 items-center">
+                        <li></li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+        <main class="max-w-screen-lg mx-2 lg:mx-auto mt-2 rounded-md bg-gray-50">
+            <slot />
+        </main>
+    </div>
+</template>

resources/js/Share/ProjectsList.vue

@@ -0,0 +1,32 @@
+<script setup>
+defineProps({
+    projects: {
+        type: Array,
+        required: true,
+    }
+});
+</script>
+
+<template>
+    <section class="bg-gray-100 rounded-md p-4">
+        <header class="flex justify-between items-center pb-4">
+            <h2 class="text-2xl font-roboto font-light">Projekty</h2>
+            <InertiaLink as="button" href="/dashboard/project/create" class="bg-blue-400 hover:bg-blue-500 text-white px-2 py-1">Dodaj nowy</InertiaLink>
+        </header>
+        <ul v-if="projects.length" class="flex flex-col gap-2">
+            <li
+                v-for="(project, key) in projects"
+                :key="key"
+            >
+                <InertiaLink href="/dashboard">
+                    <div class="px-3 py-2 bg-white hover:bg-zinc-300 cursor-pointer">
+                        {{ project.title }}
+                    </div>
+                </InertiaLink>
+            </li>
+        </ul>
+        <div v-else>
+            Empty
+        </div>
+    </section>
+</template>