coopgo-apps/parcoursmob-default-theme
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add Quilljs for rich text input instead of simple textereas

Browse Source
This commit is contained in:
Arnaud Delcasse
2024-11-19 15:16:57 +01:00
parent c6f40f2aa2
commit fc0739ab57
9 changed files with 88 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/layouts/vehicles_management/fleet-add.html
View File

@@ -10,11 +10,13 @@
licence_plate: null,
name: null,
type: null,
informations: '',
},
rules: {
licence_plate: ['required'], // 'regexMatch:^[A-Z]{1,2}-[0-9]{1,3}-[A-Z]{1,2}$'
name: ['required'],
type: ['required'],
informations: ['optional']
},
formValidation: {
valid: false,
@@ -22,9 +24,19 @@
name: {valid: null},
licence_plate: {valid: null},
type: {valid: null},
informations: {valid: null},
}
},
isFormValid: true,
init() {
let quill = new Quill(this.$refs.quill, { theme: 'snow', modules: { toolbar: [[{ 'header': [1, 2, 3, 4, 5, 6, false] }], ['bold', 'italic', 'underline'], ['link', 'image']] } })
quill.root.innerHTML = this.fields.informations
quill.on('text-change', () => {
this.fields.informations = quill.root.innerHTML
})
},
validate() {
this.formValidation = Iodine.assert(this.fields, this.rules)
},
@@ -94,13 +106,13 @@
@blur="fields.licence_plate = fields.licence_plate.toUpperCase(); validateField('licence_plate')"
:class="formValidation.fields.licence_plate.valid == false ? 'border-co-red border-2' : 'border-gray-300'">
</div>
<div class="col-span-3">
<!--<div class="col-span-3">
<label for="kilometers"
class="block text-sm font-medium text-gray-700">Kilométrage</label>
<input type="text" name="kilometers" id="kilometers" placeholder="1 km"
class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm rounded-2xl"
x-model="fields.kilometers">
</div>
</div>-->
</div>
</div>
</div>
@@ -118,8 +130,8 @@
<div class="mt-5">
<label for="informations" class="block text-sm font-medium text-gray-700">Informations pratiques</label>
<div class="mt-1">
<textarea rows="4" name="informations" id="informations"
class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-2xl"></textarea>
<div x-ref="quill" class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-b-2xl"></div>
<input type="hidden" name="informations" x-model="fields.informations" />
</div>
</div>
</div>
@@ -138,4 +150,4 @@
</div>
</form>
</div>
{{end}}
{{end}}

4
web/layouts/vehicles_management/fleet-display.html
View File

@@ -69,7 +69,7 @@
{{if .ViewState.vehicle.Data.informations}}
<div class="sm:col-span-2">
<dt class="text-sm font-medium text-gray-500">Informations pratiques pour le bénéficiaire</dt>
<dd class="mt-1 text-sm text-gray-900">{{.ViewState.vehicle.Data.informations}}</dd>
<dd class="mt-1 text-sm text-gray-900">{{unescapeHTML .ViewState.vehicle.Data.informations}}</dd>
</div>
{{end}}
@@ -240,4 +240,4 @@
</form>
</div>
</div>
{{end}}
{{end}}

20
web/layouts/vehicles_management/fleet-update.html
View File

@@ -10,6 +10,7 @@
licence_plate: '{{ .ViewState.vehicle.Data.licence_plate }}',
name: '{{ .ViewState.vehicle.Data.name }}',
kilometers: '{{ .ViewState.vehicle.Data.kilometers }}',
informations: '{{ .ViewState.vahicle.Data.informations}}',
},
rules: {
licence_plate: ['required', 'regexMatch:^[A-Z]{1,2}-[0-9]{1,3}-[A-Z]{1,2}$'],
@@ -23,6 +24,15 @@
}
},
isFormValid: true,
init() {
let quill = new Quill(this.$refs.quill, { theme: 'snow', modules: { toolbar: [[{ 'header': [1, 2, 3, 4, 5, 6, false] }], ['bold', 'italic', 'underline'], ['link', 'image']] } })
quill.root.innerHTML = this.fields.informations
quill.on('text-change', () => {
this.fields.informations = quill.root.innerHTML
})
},
validate() {
this.formValidation = Iodine.assert(this.fields, this.rules)
},
@@ -95,7 +105,7 @@
@blur="fields.licence_plate = fields.licence_plate.toUpperCase(); validateField('licence_plate')"
:class="formValidation.fields.licence_plate.valid == false ? 'border-co-red border-2' : 'border-gray-300'">
</div>
<div class="col-span-3">
<!--<div class="col-span-3">
<label for="kilometers"
class="block text-sm font-medium text-gray-700">Kilométrage</label>
<input type="text" name="kilometers" id="kilometers" placeholder="1200 km"
@@ -103,7 +113,7 @@
x-model="fields.kilometers"
@blur="fields.kilometers; validateField('kilometers')"
:class="formValidation.fields.kilometers.valid == false ? 'border-co-red border-2' : 'border-gray-300'">
</div>
</div>-->
</div>
</div>
</div>
@@ -121,8 +131,8 @@
<div class="mt-5">
<label for="informations" class="block text-sm font-medium text-gray-700">Informations pratiques pour le bénéficiaire</label>
<div class="mt-1">
<textarea rows="4" name="informations" id="informations"
class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-2xl"></textarea>
<div x-ref="quill" class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-b-2xl"></div>
<input type="hidden" name="informations" x-model="fields.informations" />
</div>
</div>
</div>
@@ -141,4 +151,4 @@
</div>
</form>
</div>
{{end}}
{{end}}