Page MenuHomec4science
Files F77445315

Asset2DForm.vue
No OneTemporary
Actions

File Metadata

Created
Wed, Aug 14, 13:16

Asset2DForm.vue
View Options

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { use2DAssetStore } from '../stores';
import { getUpload } from '../stores/utils';
let { editId } = defineProps({
editId: Number
});
// shadowing the forms ref
const form = ref(null);
const router = useRouter();
const store = use2DAssetStore();
const rules = {
required: v => !!v || 'Champs requis',
validThumbnail: v => {
// can be empty
if (!v.length) return true;
return v[0].size < 5 * 1024 * 1024 || "La taille de l'imagette ne dois pas dépasser 5 MB!";
}
};
let newAsset = reactive({
name: '',
thumbnail: [],
path: '',
isVideo: false,
description: ''
});
if (editId) {
await store.fetch();
const asset = store.state.find(e => e.id == editId);
// if asset doesn't exist, create a new one
if (!asset) editId = null;
else {
const thumbnail = [];
if (asset.thumbnail)
thumbnail.push(await getUpload(asset.thumbnail));
asset.thumbnail = thumbnail;
newAsset = reactive(asset);
}
}
async function submit() {
// maybe not safe
const validate = await form.value.validate();
if (validate.valid) {
newAsset.thumbnail = newAsset.thumbnail[0];
if (editId) await store.update(newAsset);
else await store.add(newAsset);
newAsset.thumbnail = [];
await router.push('/assets/2d');
}
}
</script>
<template>
<v-container>
<v-form ref="form">
<v-row>
<v-col cols="6">
<v-text-field
v-model="newAsset.name"
:rules="[rules.required]"
label="Nom de l'asset"
></v-text-field>
</v-col>
<v-col cols="6">
<v-file-input
v-model="newAsset.thumbnail"
:rules="[rules.validThumbnail]"
label="Imagette"
></v-file-input>
</v-col>
<v-col cols="6">
<v-text-field
v-model="newAsset.path"
:rules="[rules.required]"
label="Chemin de l'asset"
></v-text-field>
</v-col>
<v-col cols="6">
<v-checkbox
v-model="newAsset.isVideo"
label="S'agit-il d'une Vidéo"
></v-checkbox>
</v-col>
<v-col cols="12">
<v-textarea
v-model="newAsset.description"
label="Description"
></v-textarea>
</v-col>
</v-row>
<v-row justify="space-around">
<v-btn
prepend-icon="mdi-content-save"
@click="submit"
>
Sauver
</v-btn>
<v-btn
prepend-icon="mdi-close"
to="/assets/2d"
>
Annuler
</v-btn>
</v-row>
</v-form>
</v-container>
</template>

Event Timeline

c4science · Help