Commit 8f769aad authored by Julien BOUYER's avatar Julien BOUYER
Browse files

UNOTOPLYS-164 feat(screen) : ajout d'un écran

parent 842977fb
<template>
<p :id="id" class="mt-1 text-sm italic text-gray-500">{{ text }}</p>
<p :id="id" class="mt-1 text-sm italic text-gray-500" v-html="text"></p>
</template>
<script lang="ts" src="./help-text.component.ts" />
......@@ -7,7 +7,7 @@
:to="{ name: 'ScreenCreateComponent', params: { idWorkspace: idWorkspace, idForm: idForm } }"
>
<icon name="add" />
<span class="ml-2" v-text="$t('screen.add')"></span>
<span class="ml-2">{{ $t('screen.add') }}</span>
</router-link>
<button class="flex items-center p-2 text-red-600 transition hover:bg-red-600 focus:ring hover:text-red-100">
<icon name="trash" />
......
......@@ -8,7 +8,10 @@ export default [
path: '/admin/workspace/:idWorkspace/form/:idForm/screen/create',
name: 'ScreenCreateComponent',
component: ScreenCreateComponent,
meta: { authorities: [Authority.ADMIN] },
meta: {
authorities: [Authority.ADMIN],
panel: 'panel/panel-screen/panel-screen',
},
},
{
path: '/admin/workspace/:idWorkspace/form/:idForm/screen/:idScreen/edit',
......
......@@ -27,3 +27,9 @@ export class Screen implements IScreen {
public formId?: number
) {}
}
export const screenValidate = {
validate(screen: IScreen): boolean {
return screen.name && screen.name.trim().length > 0 && screen.reference && screen.reference.trim().length > 0;
},
};
import Vue from 'vue';
import Component from 'vue-class-component';
import { Component, Inject, VModel } from 'vue-property-decorator';
@Component
export default class ScreenCreate extends Vue {}
import OaButton from '@/components/button/oa-button.vue';
import OaInput from '@/components/forms/input/oa-input.vue';
import OaTextarea from '@/components/forms/textarea/oa-textarea.vue';
import { IScreen, Screen, screenValidate } from '@/shared/model/screen.model';
import ScreenService from '@/entities/screen/screen.service';
@Component({
components: {
OaButton,
OaInput,
OaTextarea,
},
})
export default class ScreenCreate extends Vue {
@Inject('screenService') private screenService: () => ScreenService;
public screen: IScreen;
beforeRouteEnter(to, from, next) {
next(vm => {
vm.$store.commit('setIdWorkspace', to.params.idWorkspace);
vm.$store.commit('setIdForm', to.params.idForm);
vm.setFormId(to.params.idForm);
});
}
public constructor() {
super();
this.screen = new Screen();
this.screen.items = '[]';
}
public get stepNum(): number {
return this.$store.getters.screenList.length + 1;
}
public setFormId(idForm: number) {
this.screen.formId = idForm;
}
public save() {
if (screenValidate.validate(this.screen)) {
this.screenService()
.create(this.screen)
.then((res: IScreen) => {
this.$router.push({
name: 'ScreenEditComponent',
params: {
idWorkspace: this.$store.getters.idWorkspace,
idForm: this.$store.getters.idForm,
idScreen: `${res.id}`,
},
});
})
.catch(console.error);
} else {
// TODO message d'erreur de validation
}
}
}
<template>
<main>Création d'un screen</main>
<main>
<section class="max-w-4xl mx-auto p-9">
<h1 class="mb-6 text-3xl">{{ $t('screen.label.step', { num: stepNum }) }}</h1>
<oa-input id="0" :label="$t('screen.label.title')" required="true" @update="screen.name = $event" />
<oa-input
id="1"
:label="$t('screen.label.reference.label')"
required="true"
@update="screen.reference = $event"
:helpText="$t('screen.label.reference.helpText')"
/>
<oa-textarea id="2" :label="$t('screen.label.description')" @update="screen.description = $event" />
<div class="flex items-center">
<div class="text-right flex-grow">
<oa-button type="submit" variant="primary" :label="$t('button.save')" @click="save" />
</div>
</div>
</section>
</main>
</template>
<script lang="ts" src="./screen-create.component.ts" />
......@@ -143,5 +143,8 @@
"not.image": "Le fichier doit être une image et non du type \"{{ fileType }}\""
}
},
"footer": "Ceci est votre pied de page"
"footer": "Ceci est votre pied de page",
"button": {
"save": "Enregistrer"
}
}
......@@ -33,6 +33,15 @@
}
},
"screen": {
"add": "Ajouter un écran"
"add": "Ajouter un écran",
"label": {
"step": "Étape {{ num }}",
"title": "Titre de l’étape",
"reference": {
"label": "Référence",
"helpText": "Cette information est utilisée pour définir l'URL de l'étape (ex: https://apply.univ-nantes.fr/form/staps/<strong>ref1</strong>)"
},
"description": "Description"
}
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment