Slugy, webp, hromada refaktoringu

src/components/event/EventForm.vue

@@ -8,20 +8,24 @@ import {isRequired} from "src/composables/form/rules";
 import RichTextEditor from "components/inputs/RichTextEditor.vue";
 import DatetimePicker from "components/inputs/DatetimePicker.vue";
 import {FORMAT_DATE, FORMAT_DATETIME_LONG} from "src/composables/datetimeUtils";
+import SlugInput from "components/inputs/SlugInput.vue";
+import {storeToRefs} from "pinia";
+import {useLoggedUserStore} from "stores/LoggedUser";
 
 const props = defineProps({
   event: {
     type: Object
   },
   isRequestPending: {
-  type: Boolean,
-  required: false,
-  default: false,
-}
+    type: Boolean,
+    required: false,
+    default: false,
+  }
 })
 
 const formData = reactive({
-  name: null,
+  name: "",
+  urlSlug: "",
   isPublic: false,
   description: "",
   dateFrom: null,
@@ -38,6 +42,7 @@ onMounted(() => {
   }
 })
 
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 </script>
 
 <template>
@@ -48,7 +53,15 @@ onMounted(() => {
       :rules="rules.name"
       v-model="formData.name"
     />
-
+    <SlugInput
+      v-if="formData.isPublic"
+      v-bind="commonProps"
+      v-model="formData.urlSlug"
+      label="URL"
+      :url="`/${loggedUser?.publicUsername}/udalosti/`"
+      :slug-source="formData.name"
+    />
+    <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
 
     <div class="row">
       <div class="col q-pr-sm">
@@ -61,7 +74,7 @@ onMounted(() => {
 
 
     <RichTextEditor v-model="formData.description" v-bind="commonProps" label="Popis letu, poznámky, ..."/>
-    <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
+
 
   </FormWrapper>
 </template>