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

20
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>
@@ -277,4 +289,4 @@
</form>
</div>
{{end}}
{{end}}

4
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>
@@ -219,4 +219,4 @@
</div>
</div>
</main>
{{ end }}
{{ end }}

18
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>
@@ -252,4 +264,4 @@
</div>
</div>
{{end}}
{{end}}
{{end}}