A lot of things

resources/js/news-submissions.js

@@ -0,0 +1,169 @@
+import { GalleryManager } from "./SubmissionsClass/GalleryManager.js";
+
+/**
+ * If there is some server side errors.
+ * We may need reload some things.
+ * @type {boolean}
+ */
+const SERVER_SIDE_ERRORS = document.querySelector('meta[name="submission-has-errors"]')?.content === '1';
+
+/**
+ * Object map of errors messages
+ * @type {Object<string,string>}
+ */
+const ERROR_TABLE = {
+    noDescription: "Please provide a description.",
+    noGalleryImages: "Please select at least a gallery image.",
+    isSubmitting: "The entry is already during submission."
+}
+
+window.GalleryManager = GalleryManager;
+
+/**
+ * Verify if an EasyMDE field is filled.
+ *
+ * @param {string} fieldName
+ * @returns {boolean}
+ */
+function verifyMDE( fieldName ){
+    const textarea = document.querySelector('#field_' + fieldName);
+    if( textarea && textarea.value.trim().length > 0 ) {
+        return true;
+    }
+
+    const field = window['mde_' + fieldName] || null;
+    return field && typeof field.value === 'function' && field.value().trim().length > 0;
+}
+
+window.SubmissionVerifications = {
+
+    /**
+     * Verify if the description field has at least one character.
+     * @returns {boolean}
+     */
+    step1_VerifyDescription: function(){
+        return verifyMDE('description');
+    },
+
+    /**
+     * Verify if at least one image is uploaded in the gallery.
+     * @param element this.$el
+     * @return {boolean}
+     */
+    step2_verifyGallery: function( element){
+        let GalleryData = element.querySelector('[x-data="GalleryManager()"]');
+        GalleryData = GalleryData ? Alpine.$data(GalleryData) : null;
+
+        if( ! GalleryData ){
+            return false;
+        }
+
+        return GalleryData.number > 0 && GalleryData.allUploaded;
+    }
+
+}
+
+/**
+ * Handle entire submission process.
+ */
+window.NewsSubmission = function(){
+    return {
+
+        /**
+         * If the script is during a try of submission process.
+         * @type {boolean}
+         */
+        duringSubmissionProcess: false,
+
+        /**
+         * Error checked.
+         * @type {string|null}
+         */
+        errorKey: null,
+
+        /**
+         * Return error message.
+         * @return {string}
+         */
+        get errorMessage(){
+          return ERROR_TABLE[this.errorKey] ?? "Unknown error";
+        },
+
+        init(){
+        },
+
+        /**
+         * Do each form verifications.
+         * Update also this.errorKey.
+         *
+         * @returns {boolean}
+         */
+        verifyForm(){
+
+            console.log( "Step 1" );
+            if( !SubmissionVerifications.step1_VerifyDescription() ){
+                this.errorKey = "noDescription";
+                return false;
+            }
+
+            console.log( "Step 2" );
+            if( !SubmissionVerifications.step2_verifyGallery( this.$el )){
+                this.errorKey = "noGalleryImages";
+                return false;
+            }
+
+            return true;
+
+        },
+
+        /**
+         * Scroll to the specific error field.
+         */
+        scrollToError(){
+            const refMap = {
+                noDescription: 'descriptionField',
+                noGalleryImages: 'gallery-field',
+                isSubmitting: 'submitButton'
+            };
+
+            const target = this.$refs[refMap[this.errorKey]]
+                || this.$el.querySelector('.upload-list')
+                || this.$el.querySelector('.form-upload');
+
+            if (target) {
+                target.scrollIntoView({behavior: 'smooth', block: 'center'});
+                return;
+            }
+        },
+
+        /**
+         * If you want to submit the form.
+         * @param {Event} e
+         */
+        submitForm( e ){
+
+            if( this.duringSubmissionProcess )
+                return; // Don't submit two times.
+
+            this.errorKey = null; // Reset.
+            this.duringSubmissionProcess = true;
+
+            const STATE = document.querySelector('select[name="submit-state"]')?.value;
+            if( STATE === 'draft' ){
+                e.target.submit();
+                return;
+            }
+
+            if( !this.verifyForm() ){
+
+                this.scrollToError();
+
+                this.duringSubmissionProcess = false;
+                return;
+            }
+
+            e.target.submit();
+        }
+
+    }
+}