Feat: Add validation check and alert user before saving the file (#164)

* feat: added validation check for save

* fix: update font weight for alert title

Author: srijitcoder

public/config.js

@@ -24,6 +24,7 @@ const schemaMap = [
     schema: {
       title: "FooBar editor",
       type: "object",
+      required: ["foo"],
       properties: {
         id: {
           type: "string",
@@ -35,6 +36,7 @@ const schemaMap = [
           title: "Foo",
           type: "string",
           description: "Simple string input",
+          minLength: 1,
           options: {
             inputAttributes: {
               placeholder: "Type something...",

src/assets/main.css

@@ -78,3 +78,13 @@ html {
 .z-index {
   z-index: 1;
 }
+
+.v-alert__content {
+  font-size: 0.875rem;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.v-alert__content .v-alert-title {
+  font-size: 1rem;
+  font-weight: 700;
+}

src/components/file/ValidationError.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { ref, watch } from "vue";
+
+const props = defineProps({
+  validationErrors: {
+    type: Array,
+    required: true,
+  },
+  closeValidationErrors: {
+    type: Function,
+    required: true,
+  },
+  saveFile: {
+    type: Function,
+    required: true,
+  },
+});
+
+const validateBind = ref(true);
+</script>
+
+<template>
+  <v-dialog
+    v-model="validateBind"
+    width="auto"
+    @update:model-value="!$event && closeValidationErrors()"
+  >
+    <v-card class="rounded-lg">
+      <template v-slot:text>
+        <h2 class="text-center pl-3 pr-3">
+          File contains incomplete or invalid fields.
+        </h2>
+
+        <v-alert
+          class="my-6"
+          text="There are issues in this file. You can fix the fields or continue saving with errors."
+          title="Validation Issues Detected"
+          type="warning"
+          variant="tonal"
+          icon="mdi-alert"
+          rounded="lg"
+        ></v-alert>
+        <div class="d-flex ga-4">
+          <div class="flex-grow-1">
+            <v-btn
+              variant="tonal"
+              block
+              color="primary"
+              prepend-icon="mdi-arrow-left"
+              @click="closeValidationErrors"
+            >
+              Back to Editing
+            </v-btn>
+          </div>
+          <div class="flex-grow-1">
+            <v-btn
+              block
+              color="primary"
+              variant="flat"
+              prepend-icon="mdi-alert"
+              @click="saveFile"
+            >
+              Save Anyway
+            </v-btn>
+          </div>
+        </div>
+      </template>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style>
+.v-card {
+  max-width: 480px !important;
+}
+.v-card-text {
+  padding: 1.5rem !important;
+}
+</style>

src/components/file/index.js

@@ -7,3 +7,4 @@ export { default as RenameFile } from "./Rename.vue";
 export { default as PreviewBtn } from "./Preview.vue";
 export { default as Github } from "./Github.vue";
 export { default as UploadArea } from "./UplaodArea.vue";
+export { default as ValidationError } from "./ValidationError.vue";

src/views/FileEditView.vue

@@ -23,7 +23,10 @@ import {
   jsonSchemaFileChangeMethod,
   addPostMessageEventMethod,
 } from "../methods/file-edit-view";
-import { ActionTabFileEditor } from "@/components/file/index.js";
+import {
+  ActionTabFileEditor,
+  ValidationError,
+} from "@/components/file/index.js";
 import debounce from "lodash.debounce";
 import "@eox/jsonform";
 import "@eox/drawtools";
@@ -47,6 +50,7 @@ const schemaMetaDetails = ref(null);
 const customInterfaces = ref([]);
 const previewExpanded = ref(false);
 const showPreview = ref(window.innerWidth >= 960);
+const validationErrors = ref([]);
 
 const snackbar = inject("set-snackbar");
 const navButtonConfig = inject("set-nav-button-config");
@@ -102,6 +106,7 @@ const updateFileDetails = async (cache = true) => {
 };
 
 const saveFile = async () => {
+  validationErrors.value = [];
   const loader = useLoader().show(
     {},
     {
@@ -166,11 +171,20 @@ const saveFile = async () => {
   loader.hide();
 };
 
+const validateFileBeforeSave = () => {
+  validationErrors.value = jsonFormInstance.value.editor.validate();
+  if (validationErrors.value.length === 0) saveFile();
+};
+
+const closeValidationErrors = () => {
+  validationErrors.value = [];
+};
+
 const updateNavButtonConfig = (text = "Saved", disabled = true) => {
   navButtonConfig.value = {
     text,
     disabled,
-    click: () => saveFile(),
+    click: () => validateFileBeforeSave(),
     icon: "mdi-cloud-upload-outline",
   };
   reset.value = disabled;
@@ -289,6 +303,12 @@ onUnmounted(() => {
       </v-col>
     </v-row>
   </div>
+  <ValidationError
+    v-if="validationErrors.length > 0"
+    :validationErrors="validationErrors"
+    :closeValidationErrors="closeValidationErrors"
+    :saveFile="saveFile"
+  />
 </template>
 
 <style>