Merge pull request #207 from marcfilipan/master

Fixed that errors on form submissions are now reflected on tabs
eminiarts · May 13, 2022 · 84980cb · 84980cb
2 parents 2771e26 + 0cf734a
commit 84980cb
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Changelog
 
+## 2.0.5 - 2022-05-13
+- Fixed that errors on form submissions are now reflected on tabs
+
 ## 2.0.4 - 2022-05-13
 - Fixed padding issues
 - Fixed codemirror fields and styles

diff --git a/dist/css/field.css b/dist/css/field.css
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/css/field.css b/resources/css/field.css
@@ -37,3 +37,9 @@ form .tab-group .tab.fields-tab {
 .tab-group h1 + .flex + div {
     @apply tabs-shadow-none tabs-rounded-t-none tabs-rounded-b-lg;
 }
+.tab-has-error {
+    @apply tabs-text-red-500 tabs-border-b-2 tabs-border-b-red-500 !important
+}
+.tab-has-error:after {
+    content: ' *';
+}
diff --git a/resources/js/components/FormTabs.vue b/resources/js/components/FormTabs.vue
@@ -26,13 +26,15 @@
               <a
                 v-for="(tab, key) in getSortedTabs(tabs)"
                 :key="key"
-                :class="getIsTabCurrent(tab) ? 'active text-primary-500' : 'tabs-text-gray-800 dark:tabs-text-gray-50'"
+                :class="getIsTabCurrent(tab) ? 'active text-primary-500 tabs-border-2 border-primary-500' : 'tabs-text-gray-800 dark:tabs-text-gray-50'"
                 :dusk="tab.slug + '-tab'"
+                :ref="tab.slug + '-tab'"
                 class="tab-item"
                 @click.prevent="handleTabClick(tab)"
               >
                 <span class="capitalize">{{ tab.properties.title }}</span>
-                <span
+<!-- 
+               <span
                   v-if="getIsTabCurrent(tab)"
                   aria-hidden="true"
                   class="bg-primary-500 tabs-absolute tabs-inset-x-0 tabs-bottom-0 tabs-h-0.5"
@@ -42,6 +44,7 @@
                   aria-hidden="true"
                   class="tabs-bg-transparent tabs-absolute tabs-inset-x-0 tabs-bottom-0 tabs-h-0.5"
                 ></span>
+-->
               </a>
             </nav>
           </div>

diff --git a/resources/js/mixins/HasTabs.js b/resources/js/mixins/HasTabs.js
@@ -98,7 +98,7 @@ export default {
         if (event?.detail?.visit?.url) {
           let currPath = window.location.pathname;
           let newPath  = event?.detail?.visit?.url?.pathname;
-          
+
           currPath = currPath.substring(currPath.length - 5) === "/edit" ? currPath.substring(0, currPath.length - 5) : currPath;
           newPath = newPath.substring(newPath.length - 5) === "/edit" ? newPath.substring(0, newPath.length - 5) : newPath;
 
@@ -110,6 +110,18 @@ export default {
       });
       Nova.store.tabsListenerRegistered = true;
     }
+
+    this.$watch('validationErrors', (newErrors) => {
+      if (newErrors.errors) {
+        Object.entries(newErrors.errors).forEach(error => {
+          if (error[0] && this.fields.find(x => x.attribute === error[0])) {
+            let field = this.getNestedObject(this.fields, 'attribute', error[0]);
+            let slug = this.getNestedObject(this.fields, 'attribute', error[0]).tabSlug + '-tab';
+            this.$refs[slug][0].classList.add('tab-has-error')
+          }
+        });
+      }
+    })
   },
 
   methods: {
@@ -273,6 +285,25 @@ export default {
      */
     getSortedTabs(tabs) {
       return orderBy(tabs, [c => c.position], ['asc']);
+    },
+
+    /**
+     * Get nested object with specified key from object
+     *
+     * @param entireObj
+     * @param keyToFind
+     * @param valToFind
+     * @returns {*}
+     */
+    getNestedObject(entireObj, keyToFind, valToFind) {
+      let foundObj;
+      JSON.stringify(entireObj, (_, nestedValue) => {
+        if (nestedValue && nestedValue[keyToFind] === valToFind) {
+          foundObj = nestedValue;
+        }
+        return nestedValue;
+      });
+      return foundObj;
     }
 
   },