Commit 2ad7f855 authored by Julien BOUYER's avatar Julien BOUYER
Browse files

UNOTOPLYS-220 feat(front) : gestion des id des champs de formulaires

parent 05a79d1c
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
"vue-meta": "^2.4.0", "vue-meta": "^2.4.0",
"vue-property-decorator": "9.1.2", "vue-property-decorator": "9.1.2",
"vue-router": "3.5.1", "vue-router": "3.5.1",
"vue-uuid": "^2.0.2",
"vue2-filters": "0.12.0", "vue2-filters": "0.12.0",
"vuelidate": "0.7.6", "vuelidate": "0.7.6",
"vuex": "3.6.2" "vuex": "3.6.2"
...@@ -3785,6 +3786,11 @@ ...@@ -3785,6 +3786,11 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/@types/uuid": {
"version": "8.3.0",
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.0.tgz",
"integrity": "sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ=="
},
"node_modules/@types/vuelidate": { "node_modules/@types/vuelidate": {
"version": "0.7.14", "version": "0.7.14",
"resolved": "https://registry.npmjs.org/@types/vuelidate/-/vuelidate-0.7.14.tgz", "resolved": "https://registry.npmjs.org/@types/vuelidate/-/vuelidate-0.7.14.tgz",
...@@ -35658,6 +35664,23 @@ ...@@ -35658,6 +35664,23 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true "dev": true
}, },
"node_modules/vue-uuid": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/vue-uuid/-/vue-uuid-2.0.2.tgz",
"integrity": "sha512-PRf1CHg3uKi77bVRyAuW2u/T2PO9LxMr7cw9t9rNdpZTkNDyw1Fx6eJVL+8JOtM9VxxPkoZ/rwhXJ5l+X5AYzQ==",
"dependencies": {
"@types/uuid": "^8.0.0",
"uuid": "^8.1.0"
}
},
"node_modules/vue-uuid/node_modules/uuid": {
"version": "8.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
"bin": {
"uuid": "dist/bin/uuid"
}
},
"node_modules/vue2-filters": { "node_modules/vue2-filters": {
"version": "0.12.0", "version": "0.12.0",
"resolved": "https://registry.npmjs.org/vue2-filters/-/vue2-filters-0.12.0.tgz", "resolved": "https://registry.npmjs.org/vue2-filters/-/vue2-filters-0.12.0.tgz",
...@@ -41987,6 +42010,11 @@ ...@@ -41987,6 +42010,11 @@
} }
} }
}, },
"@types/uuid": {
"version": "8.3.0",
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.0.tgz",
"integrity": "sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ=="
},
"@types/vuelidate": { "@types/vuelidate": {
"version": "0.7.14", "version": "0.7.14",
"resolved": "https://registry.npmjs.org/@types/vuelidate/-/vuelidate-0.7.14.tgz", "resolved": "https://registry.npmjs.org/@types/vuelidate/-/vuelidate-0.7.14.tgz",
...@@ -67614,6 +67642,22 @@ ...@@ -67614,6 +67642,22 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true "dev": true
}, },
"vue-uuid": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/vue-uuid/-/vue-uuid-2.0.2.tgz",
"integrity": "sha512-PRf1CHg3uKi77bVRyAuW2u/T2PO9LxMr7cw9t9rNdpZTkNDyw1Fx6eJVL+8JOtM9VxxPkoZ/rwhXJ5l+X5AYzQ==",
"requires": {
"@types/uuid": "^8.0.0",
"uuid": "^8.1.0"
},
"dependencies": {
"uuid": {
"version": "8.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
}
}
},
"vue2-filters": { "vue2-filters": {
"version": "0.12.0", "version": "0.12.0",
"resolved": "https://registry.npmjs.org/vue2-filters/-/vue2-filters-0.12.0.tgz", "resolved": "https://registry.npmjs.org/vue2-filters/-/vue2-filters-0.12.0.tgz",
import Vue from 'vue'; import Vue from 'vue';
import { uuid } from 'vue-uuid';
import { Prop } from 'vue-property-decorator'; import { Prop } from 'vue-property-decorator';
export default abstract class AbstractFormComponent extends Vue { export default abstract class AbstractFormComponent extends Vue {
@Prop() @Prop({
default() {
return uuid.v1();
},
})
public id: string; public id: string;
@Prop() @Prop()
......
<template> <template>
<div :class="['mb-8', disabled ? 'opacity-40' : '']"> <div :class="['mb-8', disabled ? 'opacity-40' : '']">
<oa-label :id="this.id" :label="label" :required="required" /> <oa-label :id="id" :label="label" :required="required" />
<input <input
class="w-full px-6 py-4 text-lg transition bg-white border rounded-md outline-none ring-inset focus:ring" class="w-full px-6 py-4 text-lg transition bg-white border rounded-md outline-none ring-inset focus:ring"
:type="type || 'text'" :type="type || 'text'"
:aria-describedby="helpTextId" :aria-describedby="helpTextId"
:id="this.id" :id="id"
:placeholder="placeholder" :placeholder="placeholder"
:required="required" :required="required"
:disabled="disabled" :disabled="disabled"
......
<template> <template>
<main> <main>
<div class="mb-8 border-b-2"> <div class="mb-8 border-b-2">
<oa-input id="type" :label="$t('screen.item.message.type')" :value="configuration.type" required="true" disabled="true" /> <oa-input :label="$t('screen.item.message.type')" :value="configuration.type" required="true" disabled="true" />
<oa-textarea <oa-textarea :label="$t('screen.item.message.content')" :value="configuration.content" required="true" @update="setContent" />
id="content" <oa-input :label="$t('screen.item.message.reference')" :value="configuration.reference" required="true" @update="setReference" />
:label="$t('screen.item.message.content')"
:value="configuration.content"
required="true"
@update="setContent"
/>
<oa-input
id="reference"
:label="$t('screen.item.message.reference')"
:value="configuration.reference"
required="true"
@update="setReference"
/>
<oa-input <oa-input
id="displayCondition"
:label="$t('screen.item.message.displayCondition')" :label="$t('screen.item.message.displayCondition')"
:value="configuration.displayCondition" :value="configuration.displayCondition"
required="true" required="true"
@update="setDisplayCondition" @update="setDisplayCondition"
/> />
<oa-input <oa-input :label="$t('screen.item.message.style')" :value="configuration.style" required="true" @update="setStyleAffichage" />
id="style"
:label="$t('screen.item.message.style')"
:value="configuration.style"
required="true"
@update="setStyleAffichage"
/>
</div> </div>
</main> </main>
</template> </template>
......
<template> <template>
<main> <main>
<div class="mb-8 border-b-2"> <div class="mb-8 border-b-2">
<oa-input id="type" :label="$t('screen.item.radio.type')" :value="configuration.type" required="true" disabled="true" /> <oa-input :label="$t('screen.item.radio.type')" :value="configuration.type" required="true" disabled="true" />
<oa-input :label="$t('screen.item.radio.question')" :value="configuration.question" required="true" @update="setQuestion" />
<oa-input :label="$t('screen.item.radio.reference')" :value="configuration.reference" required="true" @update="setReference" />
<oa-input <oa-input
id="question"
:label="$t('screen.item.radio.question')"
:value="configuration.question"
required="true"
@update="setQuestion"
/>
<oa-input
id="reference"
:label="$t('screen.item.radio.reference')"
:value="configuration.reference"
required="true"
@update="setReference"
/>
<oa-input
id="displayCondition"
:label="$t('screen.item.radio.displayCondition')" :label="$t('screen.item.radio.displayCondition')"
:value="configuration.displayCondition" :value="configuration.displayCondition"
required="true" required="true"
......
<template> <template>
<main> <main>
<section class="max-w-4xl mx-auto p-9"> <section class="max-w-4xl mx-auto p-9">
<h2 class="mb-4 text-2xl" id="s1" v-text="$t('form.settings.title')">Informations générales</h2> <h2 class="mb-4 text-2xl" v-text="$t('form.settings.title')">Informations générales</h2>
<form v-on:submit.prevent="save()"> <form v-on:submit.prevent="save()">
<oa-input id="id" :label="$t('form.settings.id')" type="text" :value="form.id" required="true" disabled="true"></oa-input> <oa-input id="identifiant" :label="$t('form.settings.id')" type="text" :value="form.id" required="true" disabled="true"></oa-input>
<oa-input <oa-input
id="reference" id="reference"
:label="$t('form.settings.reference')" :label="$t('form.settings.reference')"
......
...@@ -2,16 +2,16 @@ ...@@ -2,16 +2,16 @@
<main> <main>
<section class="max-w-4xl mx-auto p-9"> <section class="max-w-4xl mx-auto p-9">
<h1 class="mb-6 text-3xl">{{ $t('screen.label.step', { num: stepNum }) }}</h1> <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="title" :label="$t('screen.label.title')" required="true" @update="screen.name = $event" />
<oa-input id="0" :label="$t('screen.label.titleBo')" required="true" @update="screen.nameBo = $event" /> <oa-input id="titleBo" :label="$t('screen.label.titleBo')" required="true" @update="screen.nameBo = $event" />
<oa-input <oa-input
id="1" id="reference"
:label="$t('screen.label.reference.label')" :label="$t('screen.label.reference.label')"
required="true" required="true"
@update="screen.reference = $event" @update="screen.reference = $event"
:helpText="$t('screen.label.reference.helpText')" :helpText="$t('screen.label.reference.helpText')"
/> />
<oa-textarea id="2" :label="$t('screen.label.description')" @update="screen.description = $event" /> <oa-textarea id="description" :label="$t('screen.label.description')" @update="screen.description = $event" />
<div class="flex items-center"> <div class="flex items-center">
<div class="text-right flex-grow"> <div class="text-right flex-grow">
<oa-button type="submit" variant="primary" :label="$t('button.save')" @click="save" /> <oa-button type="submit" variant="primary" :label="$t('button.save')" @click="save" />
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
@update="setReference" @update="setReference"
:helpText="$t('screen.label.reference.helpText')" :helpText="$t('screen.label.reference.helpText')"
/> />
<oa-textarea id="2" :label="$t('screen.label.description')" :value="screen.description" @update="setDescription" /> <oa-textarea id="description" :label="$t('screen.label.description')" :value="screen.description" @update="setDescription" />
<ul class="flex justify-center border-b-2 mb-8"> <ul class="flex justify-center border-b-2 mb-8">
<li> <li>
...@@ -28,7 +28,13 @@ ...@@ -28,7 +28,13 @@
<screen-item-edit :componentConfiguration="item" @itemEdit="saveItemChange"></screen-item-edit> <screen-item-edit :componentConfiguration="item" @itemEdit="saveItemChange"></screen-item-edit>
</div> </div>
<div class="p-2 bg-blue-100"> <div class="p-2 bg-blue-100">
<oa-input id="0" :label="$t('screen.label.newItemType')" :value="newItemType" required="true" @update="setNewItemType" /> <oa-input
id="newItemType"
:label="$t('screen.label.newItemType')"
:value="newItemType"
required="true"
@update="setNewItemType"
/>
<button @click="addItem" class="flex items-center p-2 text-red-600 transition hover:bg-red-600 focus:ring hover:text-red-100"> <button @click="addItem" class="flex items-center p-2 text-red-600 transition hover:bg-red-600 focus:ring hover:text-red-100">
<icon name="add"></icon> <icon name="add"></icon>
</button> </button>
......
...@@ -3,7 +3,14 @@ ...@@ -3,7 +3,14 @@
<section class="max-w-4xl mx-auto p-9"> <section class="max-w-4xl mx-auto p-9">
<h2 class="mb-4 text-2xl" v-text="$t('form.settings.title')">Informations générales</h2> <h2 class="mb-4 text-2xl" v-text="$t('form.settings.title')">Informations générales</h2>
<form v-on:submit.prevent="save()"> <form v-on:submit.prevent="save()">
<oa-input id="id" :label="$t('form.settings.id')" type="text" :value="workspace.id" required="true" disabled="true"></oa-input> <oa-input
id="identifiant"
:label="$t('form.settings.id')"
type="text"
:value="workspace.id"
required="true"
disabled="true"
></oa-input>
<oa-input <oa-input
id="name" id="name"
:label="$t('form.settings.name')" :label="$t('form.settings.name')"
......
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