Slugy, webp, hromada refaktoringu

src/components/poi/POIForm.vue

@@ -8,6 +8,8 @@ import {errorObject} from "src/composables/dialog";
 import {commonProps} from "src/composables/inputs";
 import {isRequired} from "src/composables/form/rules";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
+import {useRouter} from "vue-router";
+import SlugInput from "components/inputs/SlugInput.vue";
 
 const props = defineProps({
   poi: {
@@ -23,7 +25,8 @@ const props = defineProps({
 })
 
 const formData = reactive({
-  name: null,
+  name: "",
+  urlSlug: "",
   description: "",
   gpsLatitude: null,
   gpsLongitude: null,
@@ -47,7 +50,8 @@ const resetMap = () => {
 }
 
 const rules = {
-  name: [isRequired]
+  name: [isRequired],
+  urlSlug: []
 }
 
 const zoom = ref(10);
@@ -72,6 +76,18 @@ const handlePositionNotFound = () => {
       </template>
     </q-input>
 
+    <SlugInput
+      v-if="formData.isPublic"
+      v-bind="commonProps"
+      v-model="formData.urlSlug"
+      label="URL"
+      url="/mista/"
+      :slug-source="formData.name"
+      :rules="rules.urlSlug"
+    />
+    <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
+
+
     <MapGPSInput
       v-if="poiNameForMap"
       :key="poiNameForMap"
@@ -82,10 +98,8 @@ const handlePositionNotFound = () => {
       @not-found="handlePositionNotFound"
     />
 
-    <q-input type="textarea" v-model="formData.description" v-bind="commonProps" label="Popis" />
+    <q-input type="textarea" v-model="formData.description" v-bind="commonProps" label="Popis"/>
 
-    <ComboboxInput v-model="formData.type" :options="types" label="Kategorie" v-bind="commonProps" />
-
-    <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
+    <ComboboxInput v-model="formData.type" :options="types" label="Kategorie" v-bind="commonProps"/>
   </FormWrapper>
 </template>

src/components/poi/POIList.vue

@@ -30,7 +30,7 @@ const props = defineProps({
 
 const getRoute = (item) => {
   if (props.public)
-    return {name: "publicPOIDetail", params: {id: item.id}}
+    return {name: "publicPOIDetail", params: {slug: item.urlSlug}}
   else
     return {name: "poiDetail", params: {id: item.id}}
 }