Page MenuHomec4science

ResultAddView.vue
No OneTemporary

File Metadata

Created
Tue, Jul 16, 04:59

ResultAddView.vue

<script setup>
import { ref, reactive, shallowReactive, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useResultStore, usePlayerStore, useScenarioStore } from '../stores';
import { getUpload } from '../stores/utils';
// shadowing the forms ref
const form = ref(null);
const router = useRouter();
const resultStore = useResultStore();
const playerStore = usePlayerStore();
const scenarioStore = useScenarioStore();
await resultStore.fetchResults();
await resultStore.fetchExperiences();
await playerStore.fetch();
await scenarioStore.fetch();
const rules = {
required: v => !!v || 'Champs requis',
validImage: v =>
!v || !v.length || v[0].size < 5 * 1024 * 1024 || "La taille de l'imagette ne dois pas dépasser 5 MB"
};
let newResult = reactive({
url: [],
ExperienceId: null
});
const experiences = computed(() =>
resultStore.experiences.map(exp => {
const pName = playerStore.state.find(p => p.id === exp.PlayerId).name;
const sName = scenarioStore.state.find(s => s.id === exp.ScenarioId).scenarioID;
exp.name = `${pName} / ${sName}`;
return exp;
})
);
async function submit() {
// maybe not safe
const validate = await form.value.validate();
if (validate.valid) {
newResult.url = newResult.url[0];
resultStore.add(newResult);
newResult.url = [];
await router.push('/results');
}
}
</script>
<template>
<v-container class="mt-4">
<v-form ref="form">
<v-row>
<v-col cols="6">
<v-text-field
type="datetime-local"
v-model="newResult.timestamp"
:rules="[rules.required]"
label="Date et heure du test"
></v-text-field>
</v-col>
<v-col cols="6">
<v-select
v-model="newResult.ExperienceId"
:items="experiences"
item-title="name"
item-value="id"
label="Expérience"
:rules="[rules.required]"
></v-select>
</v-col>
<v-col cols="12">
<v-file-input
v-model="newResult.url"
:rules="[rules.validImage]"
label="Fichier CSV contenant le résultat"
></v-file-input>
</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="/results"
>
Annuler
</v-btn>
</v-row>
</v-form>
</v-container>
</template>

Event Timeline