From f32f13604f69dce4e4bdc727f96bca1ff8748788 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Fri, 28 Jul 2023 16:50:46 +0200
Subject: [PATCH] - wip

---
 resources/js/Pages/Categories/Create.vue |  9 +++-
 resources/js/Pages/Categories/Edit.vue   | 19 ++++++--
 resources/js/Pages/Dashboard/Index.vue   |  4 +-
 resources/js/Pages/Projects/Create.vue   | 52 ++++++++++++++++----
 resources/js/Pages/Projects/Edit.vue     | 60 ++++++++++++++++++++----
 5 files changed, 119 insertions(+), 25 deletions(-)

diff --git a/resources/js/Pages/Categories/Create.vue b/resources/js/Pages/Categories/Create.vue
index a93c504..72922eb 100644
--- a/resources/js/Pages/Categories/Create.vue
+++ b/resources/js/Pages/Categories/Create.vue
@@ -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">
diff --git a/resources/js/Pages/Categories/Edit.vue b/resources/js/Pages/Categories/Edit.vue
index f68a109..3f847ee 100644
--- a/resources/js/Pages/Categories/Edit.vue
+++ b/resources/js/Pages/Categories/Edit.vue
@@ -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">
diff --git a/resources/js/Pages/Dashboard/Index.vue b/resources/js/Pages/Dashboard/Index.vue
index 823afbf..e36d5d6 100644
--- a/resources/js/Pages/Dashboard/Index.vue
+++ b/resources/js/Pages/Dashboard/Index.vue
@@ -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>
diff --git a/resources/js/Pages/Projects/Create.vue b/resources/js/Pages/Projects/Create.vue
index c43bd80..a0fc249 100644
--- a/resources/js/Pages/Projects/Create.vue
+++ b/resources/js/Pages/Projects/Create.vue
@@ -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"
diff --git a/resources/js/Pages/Projects/Edit.vue b/resources/js/Pages/Projects/Edit.vue
index 6a41f7f..9da642f 100644
--- a/resources/js/Pages/Projects/Edit.vue
+++ b/resources/js/Pages/Projects/Edit.vue
@@ -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"