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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
emails/onboarding/support_emailing.html
View File

@ -1,4 +1,4 @@
{{define "content"}}
<p>Vous avez reçu un commentaire sur PARCOURSMOB de la part de <b>{{.user}}</b></p>
<p>{{.key}}</p>
<p>{{unescapeHTML .key}}</p>
{{end}}

18
web/layouts/agenda/create-event.html
View File

@ -8,7 +8,7 @@
fields: {
name: null,
type: null,
description: null,
description: '',
allday: false,
startdate: null,
enddate: null,
@ -50,6 +50,16 @@
}
},
isFormValid: true,
init() {
let quill = new Quill(this.$refs.quill, { theme: 'snow' })
quill.root.innerHTML = this.fields.description
quill.on('text-change', () => {
this.fields.description = quill.root.innerHTML
})
},
validate() {
this.formValidation = Iodine.assert(this.fields, this.rules)
@ -103,10 +113,12 @@
<div class="col-span-6">
<label for="description" class="block text-sm font-medium text-gray-700">Description</label>
<div class="mt-1">
<textarea rows="4" name="description" id="descrpition" x-model="fields.description"
<!-- <textarea rows="4" name="description" id="descrpition" x-model="fields.description"
@blur="validateField('description')"
:class="formValidation.fields.description.valid == false ? 'border-co-red border-2' : 'border-gray-300'"
class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-2xl"></textarea>
class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-2xl"></textarea> -->
<input type="hidden" name="description" x-model="fields.description" />
<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>
</div>
</div>

2
web/layouts/agenda/display-event.html
View File

@ -78,7 +78,7 @@
{{if .ViewState.event.Description}}
<div class="sm:col-span-2">
<dt class="text-sm font-medium text-gray-500">Description</dt>
<dd class="mt-1 text-sm text-gray-900">{{.ViewState.event.Description}}</dd>
<dd class="mt-1 text-sm text-gray-900">{{ unescapeHTML .ViewState.event.Description}}</dd>
</div>
{{end}}
</dl>

16
web/layouts/agenda/updateEvent.html
View File

@ -44,6 +44,16 @@
}
},
isFormValid: true,
init() {
let quill = new Quill(this.$refs.quill, { theme: 'snow' })
quill.root.innerHTML = this.fields.description
quill.on('text-change', () => {
this.fields.description = quill.root.innerHTML
})
},
validate() {
this.formValidation = Iodine.assert(this.fields, this.rules)
@ -99,10 +109,12 @@
<label for="description" class="block text-sm font-medium text-gray-700">Description</label>
<div class="mt-1">
<textarea rows="4" name="description" id="descrpition" value="{{.ViewState.event.Description}}"
<!--<textarea rows="4" name="description" id="descrpition" value="{{.ViewState.event.Description}}"
x-model="fields.description" @blur="validateField('description')"
:class="formValidation.fields.description.valid == false ? 'border-co-red border-2' : 'border-gray-300'"
class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-2xl"></textarea>
class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-2xl"></textarea>-->
<input type="hidden" name="description" x-model="fields.description" />
<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>
</div>
</div>

2
web/layouts/layout.html
View File

@ -5,9 +5,11 @@
<head>
<title>PARCOURSMOB</title>
<link rel="stylesheet" href="/public/css/main.css" />
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
<!-- <script defer type="text/javascript" src="/public/js/main.js" defer></script> -->
<script src="https://cdn.jsdelivr.net/npm/@kingshott/iodine@8.1.0/dist/iodine.min.umd.js" defer></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
</head>
<body class="h-full" x-data="{ offCanvasMenu: false }">

17
web/layouts/support/support.html
View File

@ -1,6 +1,17 @@
{{define "content"}}
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 space-y-6">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 space-y-6" x-data="{
comment: '',
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.comment
quill.on('text-change', () => {
this.comment = quill.root.innerHTML
})
},
}">
<h1 class="text-2xl font-semibold text-gray-900">Demande de support technique</h1>
<div class="bg-white py-2 px-4 shadow sm:rounded-lg sm:px-10">
<p class="text-sm text-gray-600 p-4">
@ -12,7 +23,9 @@
<div class="py-2 px-4 rounded-3xl bg-white dark:bg-gray-800">
<label class="sr-only">Votre message</label>
<textarea name="comment" rows="4" class="block w-full resize-none border-0 border-b border-transparent p-0 pb-2 focus:border-co-blue focus:ring-0 sm:text-sm" placeholder="Votre message..." required></textarea>
<div x-ref="quill" class="block w-full resize-none border-0 border-b border-transparent p-0 pb-2 focus:border-co-blue focus:ring-0 sm:text-sm"></div>
<input type="hidden" name="comment" x-model="comment" />
</div>
<div class="flex justify-center items-center py-2 px-3 border-t dark:border-gray-600">
<button type="submit" value="send message" class="px-2 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm text-white bg-co-blue hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">

20
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>

2
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}}

18
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>