Start implementation of branches, new form element tabledropdown, model improvements

frontend/src/views/falukant/CreateView.vue

@@ -0,0 +1,118 @@
+<template>
+    <div>
+        <h2>{{ $t('falukant.create.title') }}</h2>
+        <form @submit.prevent="createFalukant">
+            <label>{{ $t('falukant.create.gender') }}</label>
+            <select v-model="falukant.gender" required @change="randomFirstName">
+                <option value="male">{{ $t('falukant.create.male') }}</option>
+                <option value="female">{{ $t('falukant.create.female') }}</option>
+            </select>
+            <div></div>
+            <label>{{ $t('falukant.create.firstname') }}</label>
+            <input type="text" v-model="falukant.firstname" required>
+            <button @click="randomFirstName" type="button">{{ $t('falukant.create.random') }}</button>
+            <label>{{ $t('falukant.create.lastname') }}</label>
+            <input type="text" v-model="falukant.lastname" required>
+            <button @click="randomLastName" type="button">{{ $t('falukant.create.random') }}</button>
+            <button type="submit">{{ $t('falukant.create.submit') }}</button>
+        </form>
+        <img :src="falukant.gender == 'male' ? '/images/mascot/mascot_male.png' : '/images/mascot/mascot_female.png'"
+            class="mascot-image" />
+    </div>
+</template>
+
+
+<script>
+import { mapActions } from 'vuex';
+import apiClient from '@/utils/axios.js';
+
+export default {
+    name: 'FalukantCreateView',
+    data() {
+        return {
+            falukant: {
+                gender: 'male',
+                firstname: '',
+                lastname: '',
+            },
+        };
+    },
+    async mounted() {
+        try {
+            const falukantUser = await apiClient.get('/api/falukant/user');
+            if (falukantUser.data) {
+                this.$router.push({ name: 'FalukantOverview' });
+                return;
+            }
+        } catch (error) {
+        }
+        await this.randomFirstName();
+        await this.randomLastName();
+    },
+    methods: {
+        ...mapActions(['createFalukant']),
+        async createFalukant() {
+            const newUser = await apiClient.post('/api/falukant/user', this.falukant);
+            console.log(newUser);
+            this.$router.push({ name: 'FalukantOverview' });
+        },
+        async randomFirstName() {
+            const randomNameResult = await apiClient.get('/api/falukant/name/randomfirstname/' + this.falukant.gender);
+            this.falukant.firstname = randomNameResult.data.name;
+            console.log(this.falukant, randomNameResult);
+        },
+        async randomLastName() {
+            const randomNameResult = await apiClient.get('/api/falukant/name/randomlastname');
+            this.falukant.lastname = randomNameResult.data.name;
+            console.log(this.falukant, randomNameResult);
+        },
+    },
+};
+
+</script>
+
+<style scoped lang="scss">
+form {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 10px;
+    row-gap: 15px;
+    width: fit-content;
+    margin: 0 auto;
+    border: 1px solid #ccc;
+    padding: 20px;
+    border-radius: 4px;
+}
+
+label {
+    text-align: right;
+    font-weight: bold;
+    margin-right: 10px;
+}
+
+select,
+input {
+    width: auto;
+}
+
+button {
+    width: auto;
+}
+
+button[type="submit"] {
+    grid-column: 1 / -1;
+    justify-self: start;
+    width: auto;
+}
+
+.mascot-image {
+    display: block;
+    margin: 0 auto;
+    height: calc(100vh - 400px); 
+    max-height: 100%;
+    min-height: 150px;
+    width: auto;
+    object-fit: contain;
+}
+</style>