- vue composition api (#91)

* wip

* fix

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>

resources/js/Pages/Users/Create.vue

@@ -258,57 +258,34 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { useForm } from '@inertiajs/inertia-vue3'
 import FlatPickr from 'vue-flatpickr-component'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import { CheckIcon, SelectorIcon } from '@heroicons/vue/solid'
 
-export default {
-  name: 'UserCreate',
-  components: {
-    FlatPickr,
-    Listbox,
-    ListboxButton,
-    ListboxLabel,
-    ListboxOption,
-    ListboxOptions,
-    CheckIcon,
-    SelectorIcon,
-  },
-  props: {
-    employmentForms: {
-      type: Object,
-      default: () => null,
-    },
-    roles: {
-      type: Object,
-      default: () => null,
-    },
-  },
-  setup(props) {
-    const form = useForm({
-      firstName: null,
-      lastName: null,
-      email: null,
-      employmentForm: props.employmentForms[0],
-      role: props.roles[0],
-      position: null,
-      employmentDate: null,
-    })
+const props = defineProps({
+  employmentForms: Object,
+  roles: Object,
+})
 
-    return { form }
-  },
-  methods: {
-    createUser() {
-      this.form
-        .transform(data => ({
-          ...data,
-          employmentForm: data.employmentForm.value,
-          role: data.role.value,
-        }))
-        .post('/users')
-    },
-  },
+const form = useForm({
+  firstName: null,
+  lastName: null,
+  email: null,
+  employmentForm: props.employmentForms[0],
+  role: props.roles[0],
+  position: null,
+  employmentDate: null,
+})
+
+function createUser() {
+  form
+    .transform(data => ({
+      ...data,
+      employmentForm: data.employmentForm.value,
+      role: data.role.value,
+    }))
+    .post('/users')
 }
 </script>