Lego tutorial

<template>
    <table class="w-full">
        <thead>
            <tr>
                <th class="p-2 text-center">Név</th>
                <th class="p-2 text-center">Korosztály</th>
                <th class="p-2 text-center">Elemszám</th>
                <th class="p-2 text-center">Értékelés</th>
                <th class="p-2 text-center">Ár</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="set of sets" :key="set.id" class="odd:bg-amber-100 even:bg-orange-100">
                <td class="p-2 text-center">
                    <RouterLink :to="{ name: 'set', params: { id: set.id } }">{{ set.name }}</RouterLink>
                </td>
                <td class="p-2 text-center">{{ set.age_range }}</td>
                <td class="p-2 text-center">{{ set.piece_count }}</td>
                <td class="p-2 text-center"><span class="p-1 bg-yellow-500">{{ set.rating }}</span></td>
                <td class="p-2 text-center">{{ set.price }} Ft</td>
            </tr>
        </tbody>
    </table>
</template>
<script>
import { useSetStore } from '@stores/SetStore'
import { mapState } from 'pinia'

export default {
    computed: {
        ...mapState(useSetStore, ['sets'])
    }
}
</script>

<template>
    <div class="rounded-md border border-amber-600">
        <h3 class="bg-amber-600 text-white text-center rounded-t-md py-2">{{ title }}</h3>
        <p class="p-4">{{ content }}</p>
    </div>
</template>

<script>
export default {
    props: {
        title:  String,
        content:  String,
    }
}
</script>

<script>
import { mapActions } from 'pinia';
import { useSetStore } from '@stores/SetStore.mjs';
import { useThemeStore } from '@stores/ThemeStore.mjs';

export default{
  methods:{
    ...mapActions(useSetStore, ['getSets']),
    ...mapActions(useThemeStore, ['getThemes'])
  },
  mounted(){
    this.getSets()
    this.getThemes()
  }
}
</script>

<template>
  <RouterView />
</template>

<route lang="yaml">
    name: set
</route>
<template>
    <BaseLayout>
        <BaseSpinner v-if="loading" class="block mx-auto mt-25"></BaseSpinner>
        <div v-else class="grid gap-4 grid-cols-4">
            <div class="col-span-4">
                <h1 class="text-6xl my-10">{{ set.theme.name }}: {{ set.name }}</h1>
            </div>
            <div class="col-span-4 md:col-span-2 lg:col-span-1"><BaseCard title="Korosztály" :content="set.age_range" /></div>
            <div class="col-span-4 md:col-span-2 lg:col-span-1"><BaseCard title="Elemszám" :content="set.piece_count" /></div>
            <div class="col-span-4 md:col-span-2 lg:col-span-1"><BaseCard title="Értékelés" :content="set.rating" /></div>
            <div class="col-span-4 md:col-span-2 lg:col-span-1"><BaseCard title="Ár" :content="price" /></div>
        </div>
    </BaseLayout>
</template>
<script>
import BaseLayout from '@layouts/BaseLayout.vue'
import BaseCard from '@components/BaseCard.vue'
import BaseSpinner from '@components/layout/BaseSpinner.vue'
import { mapActions } from 'pinia'
import { useSetStore } from '@stores/SetStore.mjs'
export default {
    data() {
        return {
            set: {},
            loading: true
        }
    },
    computed: {
        price(){
            if(this.set.price === 0){
                return "Jelenleg nincs forgalomban"
            }
            return `${this.set.price} Ft`
        }
    },
    methods: {
        ...mapActions(useSetStore, ['getSet'])
    },
    async mounted() {
        this.set = await this.getSet(this.$route.params.id)
        this.loading = false
    },
    components:{
        BaseCard,
        BaseLayout,
        BaseSpinner
    }
}
</script>

<route lang="yaml">
    name: create-set
</route>
<template>
    <BaseLayout>
        <FormKit type="form" :actions="false" @submit="submitForm">
            <FormKit type="text" label="Készlet neve" name="name" validation="required|length:1,255"/>
            <FormKit type="text" label="Korosztály" name="age_range" validation="required|length:1,50"/>
            <FormKit type="number" label="Elemszám" name="piece_count" validation="required|min:1"/>
            <FormKit type="number" label="Értékelés" name="rating" validation="required|min:0|max:5"/>
            <FormKit type="number" label="Ár" name="price" validation="required|min:0"/>
            <FormKit type="select" label="Téma" name="theme_id" :options="themeOptions" validation="required"/>
            <FormKit type="submit" value="Új készlet rögzítése"/>
        </FormKit>
    </BaseLayout>
</template>
<script>
import BaseLayout from '@layouts/BaseLayout.vue'
import { mapActions, mapState } from 'pinia'
import { useThemeStore } from '@stores/ThemeStore.mjs'
import { useSetStore } from '@stores/SetStore.mjs'

export default{
    components: {
        BaseLayout
    },
    computed:{
        ...mapState(useThemeStore, ['themeOptions'])
    },
    methods:{
        ...mapActions(useSetStore, ['createSet']),
        async submitForm(data){
            await this.createSet(data)
            this.$router.push({name: 'home'})
        }
    }
}
</script>