Frontend form field conditions ... (#4949)

...and CP forms only submit visible fields, in order to fix sometimes/required_if/etc validation rules. (#5101)

Co-authored-by: Jason Varga <jasonvarga@users.noreply.github.com>
Co-authored-by: StyleCI Bot <bot@styleci.io>
Co-authored-by: Jason Varga <jason@pixelfear.com>

.github/workflows/release.yml

@@ -18,8 +18,11 @@ jobs:
       - name: Compile assets
         run: npm run production
 
+      - name: Compile frontend assets
+        run: npm run frontend-prod
+
       - name: Create zip
-        run: cd resources && tar -czvf dist.tar.gz dist
+        run: cd resources && tar -czvf dist.tar.gz dist dist-frontend
 
       - name: Get Changelog
         id: changelog

.gitignore

@@ -5,4 +5,5 @@ node_modules
 .phpunit.result.cache
 tests/Fakes/Composer/Package/test-package/composer.json
 resources/dist
+resources/dist-frontend
 composer.lock

babel.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": {
+        "node": "current"
+      }
+    }]
+  ]
+};

composer.json

@@ -51,7 +51,7 @@
     "extra": {
         "download-dist": {
             "url": "https://github.com/statamic/cms/releases/download/{$version}/dist.tar.gz",
-            "path": "resources/dist"
+            "path": "resources"
         },
         "laravel": {
             "providers": [

frontend.mix.js

@@ -0,0 +1,9 @@
+const mix = require('laravel-mix');
+const src = 'resources';
+const dest = 'resources/dist-frontend';
+
+mix.setPublicPath('./resources/dist-frontend');
+
+mix.js(`${src}/js/frontend/helpers.js`, `${dest}/js`)
+
+mix.sourceMaps();

jest.config.js

@@ -129,7 +129,7 @@ module.exports = {
   // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  testEnvironment: "node",
+  testEnvironment: "jsdom",
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},
@@ -167,9 +167,9 @@ module.exports = {
   // transform: null,
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  // transformIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
+  transformIgnorePatterns: [
+    'node_modules/(?!(underscore)/)'
+  ],
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,

package.json

@@ -10,8 +10,11 @@
     "prod": "npm run production",
     "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "svgo": "svgo -f ./resources/svg/  -r",
-    "test": "cross-env NODE_ENV=test jest",
-    "test-watch": "npm run test -- --watch --notify"
+    "test": "cross-env NODE_ENV=test jest --silent",
+    "test-watch": "npm run test -- --watch --notify",
+    "frontend-dev": "npm run development -- --env.mixfile=frontend.mix",
+    "frontend-prod": "npm run production -- --env.mixfile=frontend.mix",
+    "frontend-watch": "npm run watch -- --env.mixfile=frontend.mix"
   },
   "dependencies": {
     "@popperjs/core": "^2.5.3",
@@ -51,7 +54,7 @@
     "svgo": "^2.6.1",
     "sweetalert": "~1.0.1",
     "tiptap-extensions": "^1.28.6",
-    "underscore": "~1.9.2",
+    "underscore": "~1.13.2",
     "uniqid": "^5.2.0",
     "v-calendar": "^1.0.1",
     "v-tooltip": "^2.0.3",

resources/js/app.js

@@ -2,6 +2,11 @@ import Vue from 'vue';
 import Toast from './mixins/Toast.js';
 import Statamic from './components/Statamic.js';
 import Alpine from 'alpinejs'
+import * as Globals from './bootstrap/globals'
+
+let global_functions = Object.keys(Globals)
+global_functions.forEach(fnName => { global[fnName] = Globals[fnName] })
+global.Cookies = require('cookies-js');
 
 Vue.config.silent = false;
 Vue.config.devtools = true;
@@ -14,7 +19,6 @@ window._ = require('underscore');
 window.$ = window.jQuery = require('jquery');
 window.rangy = require('rangy');
 
-require('./bootstrap/globals');
 require('./bootstrap/polyfills');
 require('./bootstrap/underscore-mixins');
 require('./bootstrap/jquery-plugins');

resources/js/bootstrap/globals.js

@@ -1,52 +1,50 @@
 import { marked } from 'marked';
 import { translate, translateChoice } from '../translations/translator';
 
-global.cp_url = function(url) {
+export function cp_url(url) {
     url = Statamic.$config.get('cpUrl') + '/' + url;
     return tidy_url(url);
 };
 
-global.docs_url = function(url) {
+export function docs_url(url) {
     return tidy_url('https://statamic.dev/' + url);
 };
 
-global.resource_url = function(url) {
+export function resource_url(url) {
     url = Statamic.$config.get('resourceUrl') + '/' + url;
     return tidy_url(url);
 };
 
-global.tidy_url = function(url) {
+export function tidy_url(url) {
     return url.replace(/([^:])(\/\/+)/g, '$1/')
 }
 
-global.relative_url = function(url) {
+export function relative_url(url) {
     return url.replace(/^(?:\/\/|[^/]+)*\//, '/');
 }
 
-global.file_icon = function(extension) {
+export function file_icon(extension) {
     return resource_url('img/filetypes/'+ extension +'.png');
 };
 
-global.dd = function(args) {
+export function dd(args) {
     console.log(args);
 };
 
-global.data_get = function(obj, path, fallback=null) {
+export function data_get(obj, path, fallback=null) {
     // Source: https://stackoverflow.com/a/22129960
     var properties = Array.isArray(path) ? path : path.split('.');
     var value = properties.reduce((prev, curr) => prev && prev[curr], obj);
     return value !== undefined ? value : fallback;
 };
 
-global.clone = function (value) {
+export function clone(value) {
     if (value === undefined) return undefined;
 
     return JSON.parse(JSON.stringify(value));
 }
 
-global.Cookies = require('cookies-js');
-
-global.tailwind_width_class = function (width) {
+export function tailwind_width_class(width) {
     const widths = {
         25: '1/4',
         33: '1/3',
@@ -59,18 +57,18 @@ global.tailwind_width_class = function (width) {
     return `w-${widths[width] || 'full'}`;
 }
 
-global.markdown = function (value) {
+export function markdown(value) {
     return marked(value);
 };
 
-global.__ = function (string, replacements) {
+export function __(string, replacements) {
     return translate(string, replacements);
 }
-global.__n = function (string, number, replacements) {
+export function __n(string, number, replacements) {
     return translateChoice(string, number, replacements);
 }
 
-global.utf8btoa = function (stringToEncode) {
+export function utf8btoa(stringToEncode) {
     // first we convert it to utf-8
     const utf8String = encodeURIComponent(stringToEncode)
       .replace(/%([0-9A-F]{2})/g, (_, code) => String.fromCharCode(`0x${code}`));

resources/js/components/assets/Editor/Editor.vue

@@ -117,7 +117,7 @@
 
                 <publish-container
                     v-if="fields"
-                    name="publishContainer"
+                    :name="publishContainer"
                     :blueprint="fieldset"
                     :values="values"
                     :meta="meta"
@@ -185,9 +185,14 @@
 import EditorActions from './EditorActions.vue';
 import FocalPointEditor from './FocalPointEditor.vue';
 import PublishFields from '../../publish/Fields.vue';
+import HasHiddenFields from '../../data-list/HasHiddenFields';
 
 export default {
 
+    mixins: [
+        HasHiddenFields,
+    ],
+
     components: {
         EditorActions,
         FocalPointEditor,
@@ -332,7 +337,7 @@ export default {
             this.saving = true;
             const url = cp_url(`assets/${utf8btoa(this.id)}`);
 
-            this.$axios.patch(url, this.values).then(response => {
+            this.$axios.patch(url, this.visibleValues).then(response => {
                 this.$emit('saved', response.data.asset);
                 this.$toast.success(__('Saved'));
                 this.saving = false;

resources/js/components/data-list/HasHiddenFields.js

@@ -0,0 +1,17 @@
+export default {
+
+    computed: {
+
+        hiddenFields() {
+            return this.$store.state.publish[this.publishContainer].hiddenFields;
+        },
+
+        visibleValues() {
+            return _.omit(this.values, (_, handle) => {
+                return this.hiddenFields[handle];
+            });
+        },
+
+    }
+
+}

resources/js/components/entries/PublishForm.vue

@@ -257,11 +257,13 @@ import PublishActions from './PublishActions';
 import SaveButtonOptions from '../publish/SaveButtonOptions';
 import RevisionHistory from '../revision-history/History';
 import HasPreferences from '../data-list/HasPreferences';
+import HasHiddenFields from '../data-list/HasHiddenFields';
 
 export default {
 
     mixins: [
         HasPreferences,
+        HasHiddenFields,
     ],
 
     components: {
@@ -464,7 +466,7 @@ export default {
         performSaveRequest() {
             // Once the hook has completed, we need to make the actual request.
             // We build the payload here because the before hook may have modified values.
-            const payload = { ...this.values, ...{
+            const payload = { ...this.visibleValues, ...{
                 _blueprint: this.fieldset.handle,
                 _localized: this.localizedFields,
             }};

resources/js/components/field-conditions/Converter.js

@@ -1,15 +1,22 @@
 import { OPERATORS, ALIASES } from './Constants.js';
+import map from 'underscore/modules/map.js'
+import each from 'underscore/modules/each.js'
+import filter from 'underscore/modules/filter.js'
+import chain from 'underscore/modules/chain.js'
+import chainable from 'underscore/modules/mixin.js'
+
+chainable({ chain, filter, each });
 
 export default class {
 
     fromBlueprint(conditions, prefix=null) {
-        return _.map(conditions, (condition, field) => this.splitRhs(field, condition, prefix));
+        return map(conditions, (condition, field) => this.splitRhs(field, condition, prefix));
     }
 
     toBlueprint(conditions) {
         let converted = {};
 
-        _.each(conditions, condition => {
+        each(conditions, condition => {
             converted[condition.field] = this.combineRhs(condition);
         });
 
@@ -35,7 +42,7 @@ export default class {
     getOperatorFromRhs(condition) {
         let operator = '==';
 
-        _.chain(this.getOperatorsAndAliases())
+        chain(this.getOperatorsAndAliases())
             .filter(value => new RegExp(`^${value} [^=]`).test(this.normalizeConditionString(condition)))
             .each(value => operator = value);
 
@@ -51,7 +58,7 @@ export default class {
     getValueFromRhs(condition) {
         let rhs = this.normalizeConditionString(condition);
 
-        _.chain(this.getOperatorsAndAliases())
+        chain(this.getOperatorsAndAliases())
             .filter(value => new RegExp(`^${value} [^=]`).test(rhs))
             .each(value => rhs = rhs.replace(new RegExp(`^${value}[ ]*`), ''));