kamilniemczycki/kamilcraft-api
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

- wip dashboard

Browse Source
This commit is contained in:
Kamil Niemczycki
2023-07-28 00:47:36 +02:00
parent 992326ebf0
commit f5977c1b5d
8 changed files with 291 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/Http/Controllers/Dashboard/AdminPanelController.php
View File

@@ -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'));
}
}

6
app/Http/Controllers/Dashboard/ProjectController.php
View File

@@ -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
View 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
View 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
View 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
View 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>

35
resources/js/Share/Layout/App.vue
View File

@@ -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
View 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>