village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feature: Disabled fields (#98) 

* Feature: Disabled fields

* disable field for rating

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Chirag Chhatrala 2023-03-22 20:19:52 +05:30 committed by GitHub
parent db43b2825c
commit 9b3f5ddbdf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 60 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/forms/CodeInput.vue
View File

@ -9,7 +9,7 @@
<prism-editor :id="id?id:name" v-model="compVal" :disabled="disabled"
class="code-editor"
:class="[theme.CodeInput.input,{ 'ring-red-500 ring-2': hasValidation && form.errors.has(name), 'cursor-not-allowed bg-gray-200':disabled }]"
:class="[theme.CodeInput.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
:style="inputStyle" :name="name"
:placeholder="placeholder"
:highlight="highlighter" @change="onChange"

6
resources/js/components/forms/DateInput.vue
View File

@ -58,8 +58,10 @@ export default {
computed: {
inputClasses (){
const str = 'border border-gray-300 dark:bg-notion-dark-light dark:border-gray-600 dark:placeholder-gray-500 dark:text-gray-300 flex-1 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-opacity-100 placeholder-gray-400 px-4 py-2 rounded-lg shadow-sm text-base text-black text-gray-700'
return this.dateRange ? str + ' w-50' : str + ' w-full'
let str = 'border border-gray-300 dark:bg-notion-dark-light dark:border-gray-600 dark:placeholder-gray-500 dark:text-gray-300 flex-1 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-opacity-100 placeholder-gray-400 px-4 py-2 rounded-lg shadow-sm text-base text-black text-gray-700'
str += this.dateRange ? ' w-50' : ' w-full'
str += this.disabled ? ' !cursor-not-allowed !bg-gray-200' : ''
return str
},
useTime() {
return this.withTime && !this.dateRange

9
resources/js/components/forms/FileInput.vue
View File

@ -9,7 +9,7 @@
<span class="inline-block w-full rounded-md shadow-sm">
<button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" role="button"
class="cursor-pointer relative flex"
:class="[theme.default.input,{'ring-red-500 ring-2': hasValidation && form.errors.has(name)}]"
:class="[theme.default.input,{'!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled}]"
:style="inputStyle" @click.self="showUploadModal=true"
>
<div v-if="currentUrl==null" class="h-6 text-gray-600 dark:text-gray-400 flex-grow truncate"
@ -190,6 +190,13 @@ export default {
},
watch: {
showUploadModal: {
handler (val) {
if(this.disabled){
this.showUploadModal = false
}
}
},
files: {
deep: true,
handler (files) {

6
resources/js/components/forms/FlatSelectInput.vue
View File

@ -12,7 +12,7 @@
<loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
<div v-for="(option, index) in options" v-else :key="option[optionKey]" role="button"
:class="[theme.default.input,'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex',{ 'mb-2': index !== options.length,'ring-red-500 ring-2': hasValidation && form.errors.has(name), 'cursor-not-allowed bg-gray-200':disabled }]"
:class="[theme.default.input,'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex',{ 'mb-2': index !== options.length,'!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
@click="onSelect(option[optionKey])"
>
<p class="flex-grow">
@ -53,6 +53,10 @@ export default {
computed: {},
methods: {
onSelect (value) {
if(this.disabled){
return
}
if (this.multiple) {
const emitValue = Array.isArray(this.compVal) ? [...this.compVal] : []

7
resources/js/components/forms/RatingInput.vue
View File

@ -10,9 +10,9 @@
<div class="stars-outer">
<div v-for="i in numberOfStars" :key="i"
class="cursor-pointer inline-block"
:class="{'text-yellow-400':i<=compVal, 'text-yellow-100 dark:text-yellow-900':i>compVal && i<=hoverRating ,'text-gray-200 dark:text-gray-800':i>compVal && i>hoverRating}"
:class="{'text-yellow-400':i<=compVal, 'text-yellow-100 dark:text-yellow-900':i>compVal && i<=hoverRating ,'text-gray-200 dark:text-gray-800':i>compVal && i>hoverRating, '!cursor-not-allowed':disabled}"
role="button" @click="setRating(i)"
@mouseover="hoverRating = i"
@mouseover="hoverRating = (disabled) ? null : i"
@mouseleave="hoverRating = null"
>
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@ -56,6 +56,9 @@ export default {
methods: {
setRating (val) {
if(this.disabled){
return
}
if (this.compVal === val) {
this.compVal = 0
} else {

2
resources/js/components/forms/RichTextAreaInput.vue
View File

@ -7,7 +7,7 @@
<span v-if="required" class="text-red-500 required-dot">*</span>
</label>
<vue-editor :id="id?id:name" ref="editor" v-model="compVal" :disabled="disabled"
:placeholder="placeholder" :class="[{ 'ring-red-500 ring-2': hasValidation && form.errors.has(name) }, theme.RichTextAreaInput.input]"
:placeholder="placeholder" :class="[{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }, theme.RichTextAreaInput.input]"
:editor-toolbar="editorToolbar" class="rich-editor resize-y"
:style="inputStyle"
/>

1
resources/js/components/forms/SelectInput.vue
View File

@ -16,6 +16,7 @@
:theme="theme"
:has-error="hasValidation && form.errors.has(name)"
:allowCreation="allowCreation"
:disabled="disabled"
@update-options="updateOptions"
>

6
resources/js/components/forms/SignatureInput.vue
View File

@ -8,7 +8,7 @@
</label>
<VueSignaturePad ref="signaturePad"
:class="[theme.default.input,{ 'ring-red-500 ring-2': hasValidation && form.errors.has(name), 'cursor-not-allowed bg-gray-200':disabled }]" height="150px"
:class="[theme.default.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]" height="150px"
:name="name"
:options="{ onEnd }"
/>
@ -45,9 +45,13 @@ export default {
this.onEnd()
},
onEnd () {
if(this.disabled){
this.$refs.signaturePad.clearSignature()
}else{
const { isEmpty, data } = this.$refs.signaturePad.saveSignature()
this.$set(this.form, this.name, (!isEmpty && data) ? data : null)
}
}
}
}
</script>

2
resources/js/components/forms/TextAreaInput.vue
View File

@ -7,7 +7,7 @@
<span v-if="required" class="text-red-500 required-dot">*</span>
</label>
<textarea :id="id?id:name" v-model="compVal" :disabled="disabled"
:class="[theme.default.input,{ 'ring-red-500 ring-2': hasValidation && form.errors.has(name) }]"
:class="[theme.default.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
class="resize-y"
:name="name" :style="inputStyle"
:placeholder="placeholder"

2
resources/js/components/forms/TextInput.vue
View File

@ -11,7 +11,7 @@
<input :id="id?id:name" v-model="compVal" :disabled="disabled"
:type="nativeType"
:style="inputStyle"
:class="[theme.default.input,{ 'ring-red-500 ring-2': hasValidation && form.errors.has(name), 'cursor-not-allowed bg-gray-200':disabled }]"
:class="[theme.default.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
:name="name" :accept="accept"
:placeholder="placeholder" :min="min" :max="max" :maxlength="maxCharLimit"
@change="onChange" @keydown.enter.prevent="onEnterPress"

2
resources/js/components/forms/components/VCheckbox.vue
View File

@ -10,7 +10,7 @@
:disabled="disabled"
@click="handleClick"
>
<label :for="id || name" class="text-gray-700 dark:text-gray-300 ml-2" :class="{'cursor-not-allowed':disabled}">
<label :for="id || name" class="text-gray-700 dark:text-gray-300 ml-2" :class="{'!cursor-not-allowed':disabled}">
<slot />
</label>
</div>

5
resources/js/components/forms/components/VSelect.vue
View File

@ -13,7 +13,7 @@
<span class="inline-block w-full rounded-md">
<button type="button" :dusk="dusk" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
class="cursor-pointer"
:style="inputStyle" :class="[theme.SelectInput.input,{'py-2':!multiple || loading,'py-1': multiple, 'ring-red-500 ring-2': hasError}]"
:style="inputStyle" :class="[theme.SelectInput.input,{'py-2':!multiple || loading,'py-1': multiple, '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled}]"
@click="openDropdown"
>
<div :class="{'h-6':!multiple, 'min-h-8':multiple && !loading}">
@ -108,6 +108,7 @@ export default {
uppercaseLabels: { type: Boolean, default: true },
theme: { type: Object, default: () => themes.default },
allowCreation: { type: Boolean, default: false },
disabled: { type: Boolean, default: false }
},
data () {
return {
@ -172,7 +173,7 @@ export default {
this.searchTerm = ''
},
openDropdown () {
this.isOpen = !this.isOpen
this.isOpen = this.disabled ? false : !this.isOpen
},
select (value) {
if (!this.multiple) {

10
resources/js/components/open/forms/OpenForm.vue
View File

@ -12,6 +12,7 @@
<component :is="getFieldComponents(field)" v-if="getFieldComponents(field)"
:key="field.id + formVersionId" :class="getFieldClasses(field)"
v-bind="inputProperties(field)" :required="isFieldRequired[field.id]"
:disabled="isFieldDisabled[field.id]"
/>
<template v-else>
<div v-if="field.type === 'nf-text' && field.content" :id="field.id" :key="field.id"
@ -215,7 +216,14 @@ export default {
fieldsRequired[field.id] = (new FormLogicPropertyResolver(field, this.dataFormValue)).isRequired()
})
return fieldsRequired
}
},
isFieldDisabled () {
const fieldsDisabled = {}
this.fields.forEach((field) => {
fieldsDisabled[field.id] = (field.disabled === true)
})
return fieldsDisabled
},
},
watch: {

13
resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
View File

@ -53,6 +53,12 @@
>
Required
</v-checkbox>
<v-checkbox v-model="field.disabled" class="mb-3"
:name="field.id+'_disabled'"
@input="onFieldDisabledChange"
>
Disabled
</v-checkbox>
</div>
<!-- Checkbox -->
@ -440,6 +446,12 @@ export default {
this.close()
this.$emit('duplicate-block', this.field)
},
onFieldDisabledChange (val) {
this.$set(this.field, 'disabled', val)
if (this.field.disabled) {
this.$set(this.field, 'hidden', false)
}
},
onFieldRequiredChange(val) {
this.$set(this.field, 'required', val)
if (this.field.required) {
@ -450,6 +462,7 @@ export default {
this.$set(this.field, 'hidden', val)
if (this.field.hidden) {
this.$set(this.field, 'required', false)
this.$set(this.field, 'disabled', false)
} else {
this.$set(this.field, 'generates_uuid', false)
this.$set(this.field, 'generates_auto_increment_id', false)