- wip dashboard
This commit is contained in:
parent
992326ebf0
commit
f5977c1b5d
GPG Key ID:
04D4E2012F969213
@ -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'));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
28
resources/js/Pages/Dashboard/Index.vue
Normal file
28
resources/js/Pages/Dashboard/Index.vue
Normal file
@ -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>
|
||||
122
resources/js/Pages/Projects/Create.vue
Normal file
122
resources/js/Pages/Projects/Create.vue
Normal file
@ -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>
|
||||
25
resources/js/Share/CategoriesList.vue
Normal file
25
resources/js/Share/CategoriesList.vue
Normal file
@ -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>
|
||||
47
resources/js/Share/Components/Input.vue
Normal file
47
resources/js/Share/Components/Input.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
32
resources/js/Share/ProjectsList.vue
Normal file
32
resources/js/Share/ProjectsList.vue
Normal file
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user