Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DependsOnNullOrZero bug fix #185

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

DependsOnNullOrZero bug fix #185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
44edb6e
DependsOnNullOrZero FIX: fixed check for dependsOnNullOrZero to work …
xUJYx Jul 19, 2021
0ec6941
DependsOnNullOrZero FIX: assets rebuilt
xUJYx Jul 19, 2021
27b1921
DependsOnNullOrZero FIX: tabs fixes
xUJYx Jul 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/js/field.js
View file
Open in desktop

Large diffs are not rendered by default.

229 changes: 117 additions & 112 deletions resources/js/components/FormField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,143 +15,148 @@
</template>

<script>
import {FormField, HandlesValidationErrors} from 'laravel-nova'
import {FormField, HandlesValidationErrors} from 'laravel-nova'

export default {
mixins: [FormField, HandlesValidationErrors],
export default {
mixins: [FormField, HandlesValidationErrors],

props: ['resourceName', 'resourceId', 'field'],
props: ['resourceName', 'resourceId', 'field'],

mounted() {
this.registerDependencyWatchers(this.$root, function() {
this.updateDependencyStatus();
});
},
mounted() {
this.registerDependencyWatchers(this.$root, function () {
this.updateDependencyStatus();
});
},

data() {
return {
dependencyValues: {},
dependenciesSatisfied: false,
}
},
data() {
return {
dependencyValues: {},
dependenciesSatisfied: false,
}
},

methods: {

// @todo: refactor entire watcher procedure, this approach isn't maintainable ..
registerDependencyWatchers(root, callback) {
callback = callback || null;
root.$children.forEach(component => {
if (this.componentIsDependency(component)) {

// @todo: change `findWatchableComponentAttribute` to return initial state(s) of current dependency.
let attribute = this.findWatchableComponentAttribute(component),
initial_value = component.field.value; // @note: quick-fix for issue #88

component.$watch(attribute, (value) => {
// @todo: move to reactive factory
if (attribute === 'selectedResource') {
value = (value && value.value) || null;
}
this.dependencyValues[component.field.attribute] = value;
// @todo: change value as argument for `updateDependencyStatus`
this.updateDependencyStatus()
}, {immediate: true});

// @todo: move to initial state
// @note quick-fix for issue #88
if (attribute === 'fieldTypeName') {
initial_value = component.field.resourceLabel;
}
methods: {

// @todo: replace with `updateDependencyStatus(initial_value)` and let it resolve dependency state
this.dependencyValues[component.field.attribute] = initial_value;
}
// @todo: refactor entire watcher procedure, this approach isn't maintainable ..
registerDependencyWatchers(root, callback) {
callback = callback || null;
root.$children.forEach(component => {
if (this.componentIsDependency(component)) {

this.registerDependencyWatchers(component)
});
// @todo: change `findWatchableComponentAttribute` to return initial state(s) of current dependency.
let attribute = this.findWatchableComponentAttribute(component),
initial_value = component.field.value; // @note: quick-fix for issue #88

if (callback !== null) {
callback.call(this);
}
},

// @todo: not maintainable, move to factory
findWatchableComponentAttribute(component) {
let attribute;
switch(component.field.component) {
case 'belongs-to-many-field':
case 'belongs-to-field':
attribute = 'selectedResource';
break;
case 'morph-to-field':
attribute = 'fieldTypeName';
break;
default:
attribute = 'value';
}
return attribute;
},
component.$watch(attribute, (value) => {
// @todo: move to reactive factory
if (attribute === 'selectedResource') {
value = (value && value.value) || null;
}
this.dependencyValues[component.field.attribute] = value;
// @todo: change value as argument for `updateDependencyStatus`
this.updateDependencyStatus()
}, {immediate: true});

// @todo: move to initial state
// @note quick-fix for issue #88
if (attribute === 'fieldTypeName') {
initial_value = component.field.resourceLabel;
}

componentIsDependency(component) {
if (component.field === undefined) {
return false;
// @todo: replace with `updateDependencyStatus(initial_value)` and let it resolve dependency state
this.dependencyValues[component.field.attribute] = initial_value;
}

for (let dependency of this.field.dependencies) {
// #93 compatability with flexible-content, which adds a generated attribute for each field
if (component.field.attribute === (this.field.attribute + dependency.field)) {
return true;
}
}
this.registerDependencyWatchers(component)
});

if (callback !== null) {
callback.call(this);
}
},

// @todo: not maintainable, move to factory
findWatchableComponentAttribute(component) {
let attribute;
switch (component.field.component) {
case 'belongs-to-many-field':
case 'belongs-to-field':
attribute = 'selectedResource';
break;
case 'morph-to-field':
attribute = 'fieldTypeName';
break;
default:
attribute = 'value';
}
return attribute;
},

componentIsDependency(component) {
if (component.field === undefined) {
return false;
},
}

// @todo: align this method with the responsibility of updating the dependency, not verifying the dependency "values"
updateDependencyStatus() {
for (let dependency of this.field.dependencies) {
for (let dependency of this.field.dependencies) {
// #93 compatability with flexible-content, which adds a generated attribute for each field
if (component.field.attribute === (this.field.attribute + dependency.field)) {
return true;
}
}

// #93 compatability with flexible-content, which adds a generated attribute for each field
let dependencyValue = this.dependencyValues[(this.field.attribute + dependency.field)];
if (dependency.hasOwnProperty('empty') && !dependencyValue) {
this.dependenciesSatisfied = true;
return;
}
return false;
},

if (dependency.hasOwnProperty('notEmpty') && dependencyValue) {
this.dependenciesSatisfied = true;
return;
}
// @todo: align this method with the responsibility of updating the dependency, not verifying the dependency "values"
updateDependencyStatus() {
for (let dependency of this.field.dependencies) {

if (dependency.hasOwnProperty('nullOrZero') && 1 < [undefined, null, 0, '0'].indexOf(dependencyValue) ) {
this.dependenciesSatisfied = true;
return;
}
// #93 compatability with flexible-content, which adds a generated attribute for each field
let dependencyValue = this.dependencyValues[(this.field.attribute + dependency.field)];
if (dependency.hasOwnProperty('empty') && !dependencyValue) {
this.dependenciesSatisfied = true;
return;
}

if (dependency.hasOwnProperty('not') && dependencyValue !== dependency.not) {
this.dependenciesSatisfied = true;
return;
}
if (dependency.hasOwnProperty('notEmpty') && dependencyValue) {
this.dependenciesSatisfied = true;
return;
}

if (dependency.hasOwnProperty('value') && dependencyValue == dependency.value) {
this.dependenciesSatisfied = true;
return;
}
if (dependency.hasOwnProperty('nullOrZero') && -1 < [undefined, null, 0, '0'].indexOf(dependencyValue)) {
this.dependenciesSatisfied = true;
return;
}

this.dependenciesSatisfied = false;
},
if (dependency.hasOwnProperty('notArray') && -1 === dependency.notArray.indexOf(dependencyValue)) {
this.dependenciesSatisfied = true;
return;
}

fill(formData) {
if (this.dependenciesSatisfied) {
_.each(this.field.fields, field => {
if (field.fill) {
field.fill(formData)
}
})
if (dependency.hasOwnProperty('not') && dependencyValue !== dependency.not) {
this.dependenciesSatisfied = true;
return;
}

if (dependency.hasOwnProperty('value') && dependencyValue == dependency.value) {
this.dependenciesSatisfied = true;
return;
}
}

this.dependenciesSatisfied = false;
},

fill(formData) {
if (this.dependenciesSatisfied) {
_.each(this.field.fields, field => {
if (field.fill) {
field.fill(formData)
}
})
}
}

}
}
</script>