- wip

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"