- wip
This commit is contained in:
parent
8974721c9c
commit
f32f13604f
GPG Key ID:
04D4E2012F969213
@ -19,7 +19,14 @@ function createCategory() {
|
||||
<InertiaHead title="Nowa kategoria" />
|
||||
<div class="p-4">
|
||||
<header class="pb-4">
|
||||
<h1 class="text-3xl font-roboto font-light">Nowa kategoria</h1>
|
||||
<div class="flex items-center gap-2">
|
||||
<InertiaLink
|
||||
as="button"
|
||||
href="/dashboard"
|
||||
class="px-2 text-xl text-gray-700 hover:text-black"
|
||||
title="Wróc do dashboard"><FontAwesomeIcon :icon="['fas', 'caret-left']" /></InertiaLink>
|
||||
<h1 class="text-3xl font-roboto font-light">Nowa kategoria</h1>
|
||||
</div>
|
||||
</header>
|
||||
<div>
|
||||
<form class="flex flex-col gap-4" @submit.prevent="createCategory">
|
||||
|
||||
@ -30,10 +30,23 @@ function updateProject() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<InertiaHead title="Nowy projekt" />
|
||||
<InertiaHead title="Edytuj projekt" />
|
||||
<div class="p-4">
|
||||
<header class="pb-4">
|
||||
<h1 class="text-3xl font-roboto font-light">Edytuj {{ category.name }}</h1>
|
||||
<header class="flex items-center justify-between pb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<InertiaLink
|
||||
as="button"
|
||||
href="/dashboard"
|
||||
class="px-2 text-xl text-gray-700 hover:text-black"
|
||||
title="Wróc do dashboard"><FontAwesomeIcon :icon="['fas', 'caret-left']" /></InertiaLink>
|
||||
<h1 class="text-3xl font-roboto font-light">Edytuj {{ category.name }}</h1>
|
||||
</div>
|
||||
<InertiaLink
|
||||
as="button"
|
||||
:href="`/dashboard/category/${category.id}/delete`"
|
||||
class="flex items-center gap-2 px-2 py-1 text-red-600 hover:text-white hover:bg-red-600 rounded-md"
|
||||
title="Usuń kategorię"
|
||||
><FontAwesomeIcon :icon="['fas', 'trash']" />Usuń</InertiaLink>
|
||||
</header>
|
||||
<div>
|
||||
<form class="flex flex-col gap-4" @submit.prevent="updateProject">
|
||||
|
||||
@ -20,8 +20,8 @@ defineProps({
|
||||
<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" />
|
||||
<div class="grid md:grid-cols-3 gap-3">
|
||||
<ProjectsList class="md:col-span-2" :projects="projects" />
|
||||
<CategoriesList class="col-span-1" :categories="categories" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,27 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { useForm } from '@inertiajs/inertia-vue3';
|
||||
import Input from '../../Share/Components/Input.vue';
|
||||
|
||||
const categories = ref([]);
|
||||
|
||||
const categoryToString = computed({
|
||||
get: () => categories.value.join(', '),
|
||||
set: (val) => {
|
||||
val = val.replace(', ', ',').replace(' , ', ',').replace(' ,', ',');
|
||||
val = val.split(',');
|
||||
val.forEach((element, key) => {
|
||||
element = element.trim();
|
||||
val[key] = slug(element);
|
||||
});
|
||||
categories.value = val;
|
||||
}
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
title: null,
|
||||
author: null,
|
||||
categories: null,
|
||||
categories: categoryToString,
|
||||
release_date: null,
|
||||
update_date: null,
|
||||
image_small: null,
|
||||
@ -20,13 +36,38 @@ const form = useForm({
|
||||
function createProject() {
|
||||
form.post('/dashboard/project');
|
||||
}
|
||||
|
||||
function slug(str) {
|
||||
str = str.replace(/^\s+|\s+$/g, ''); // trim
|
||||
str = str.toLowerCase();
|
||||
|
||||
// remove accents, swap ñ for n, etc
|
||||
var from = "ãàáäâẽèéëêìíïîõòóöôùúüûñç·/_,:;";
|
||||
var to = "aaaaaeeeeeiiiiooooouuuunc------";
|
||||
for (var i = 0, l = from.length; i < l; i++) {
|
||||
str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
|
||||
}
|
||||
|
||||
str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
|
||||
.replace(/\s+/g, '-') // collapse whitespace and replace by -
|
||||
.replace(/-+/g, '-'); // collapse dashes
|
||||
|
||||
return str;
|
||||
};
|
||||
</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>
|
||||
<div class="flex items-center gap-2">
|
||||
<InertiaLink
|
||||
as="button"
|
||||
href="/dashboard"
|
||||
class="px-2 text-xl text-gray-700 hover:text-black"
|
||||
title="Wróc do dashboard"><FontAwesomeIcon :icon="['fas', 'caret-left']" /></InertiaLink>
|
||||
<h1 class="text-3xl font-roboto font-light">Nowy projekt</h1>
|
||||
</div>
|
||||
</header>
|
||||
<div>
|
||||
<form class="flex flex-col gap-4" @submit.prevent="createProject">
|
||||
@ -90,13 +131,6 @@ function createProject() {
|
||||
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"
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { useForm } from '@inertiajs/inertia-vue3';
|
||||
import Input from '../../Share/Components/Input.vue';
|
||||
|
||||
@ -9,10 +10,25 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const categories = ref(props.project.categories);
|
||||
|
||||
const categoryToString = computed({
|
||||
get: () => categories.value.join(', '),
|
||||
set: (val) => {
|
||||
val = val.replace(', ', ',').replace(' , ', ',').replace(' ,', ',');
|
||||
val = val.split(',');
|
||||
val.forEach((element, key) => {
|
||||
element = element.trim();
|
||||
val[key] = slug(element);
|
||||
});
|
||||
categories.value = val;
|
||||
}
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
title: props.project.title,
|
||||
author: props.project.author,
|
||||
categories: props.project.categories,
|
||||
categories: categoryToString,
|
||||
release_date: props.project.release_date,
|
||||
update_date: props.project.update_date,
|
||||
image_small: props.project.image_small,
|
||||
@ -27,13 +43,44 @@ const form = useForm({
|
||||
function updateProject() {
|
||||
form.put(`/dashboard/project/${props.project.id}`);
|
||||
}
|
||||
|
||||
function slug(str) {
|
||||
str = str.replace(/^\s+|\s+$/g, ''); // trim
|
||||
str = str.toLowerCase();
|
||||
|
||||
// remove accents, swap ñ for n, etc
|
||||
var from = "ãàáäâẽèéëêìíïîõòóöôùúüûñç·/_,:;";
|
||||
var to = "aaaaaeeeeeiiiiooooouuuunc------";
|
||||
for (var i = 0, l = from.length; i < l; i++) {
|
||||
str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
|
||||
}
|
||||
|
||||
str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
|
||||
.replace(/\s+/g, '-') // collapse whitespace and replace by -
|
||||
.replace(/-+/g, '-'); // collapse dashes
|
||||
|
||||
return str;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<InertiaHead title="Nowy projekt" />
|
||||
<div class="p-4">
|
||||
<header class="pb-4">
|
||||
<h1 class="text-3xl font-roboto font-light">Edytuj {{ project.title }}</h1>
|
||||
<header class="flex items-center justify-between pb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<InertiaLink
|
||||
as="button"
|
||||
href="/dashboard"
|
||||
class="px-2 text-xl text-gray-700 hover:text-black"
|
||||
title="Wróc do dashboard"><FontAwesomeIcon :icon="['fas', 'caret-left']" /></InertiaLink>
|
||||
<h1 class="text-3xl font-roboto font-light">Edytuj {{ project.title }}</h1>
|
||||
</div>
|
||||
<InertiaLink
|
||||
as="button"
|
||||
:href="`/dashboard/project/${project.id}/delete`"
|
||||
class="flex items-center gap-2 px-2 py-1 text-red-600 hover:text-white hover:bg-red-600 rounded-md"
|
||||
title="Usuń projekt"
|
||||
><FontAwesomeIcon :icon="['fas', 'trash']" />Usuń</InertiaLink>
|
||||
</header>
|
||||
<div>
|
||||
<form class="flex flex-col gap-4" @submit.prevent="updateProject">
|
||||
@ -97,13 +144,6 @@ function updateProject() {
|
||||
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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user