fix: save button enable/disable behaviour

apps/web/components/Editor/Editor.vue

@@ -37,17 +37,15 @@ const { jsonText, errorMessage, lineCount, textarea, lineNumberContainer, syncSc
   JSON.stringify(props.block, null, 2),
 );
 
-watch(
-  () => props.block,
-  (updatedData) => {
-    jsonText.value = JSON.stringify(updatedData, null, 2);
-  },
-  { immediate: true, deep: true },
-);
-
 const closeEditor = () => {
-  emit('update', props.index, JSON.parse(jsonText.value));
   const { isEditing } = useEditor();
   isEditing.value = false;
 };
+
+watch(
+  () => jsonText.value,
+  () => {
+    emit('update', props.index, JSON.parse(jsonText.value));
+  },
+);
 </script>

apps/web/components/ui/Toolbar/Toolbar.vue

@@ -10,7 +10,6 @@
         <button
           class="self-start text-[#062633] px-2 py-1 rounded-md font-inter font-medium text-sm leading-5 flex items-center md:px-4 md:py-2 md:text-base md:leading-6"
           @click="toggleEdit"
-          :disabled="!isEditingEnabled"
           data-testid="edit-preview-button"
         >
           <template v-if="disableActions">
@@ -27,7 +26,8 @@
           </template>
         </button>
         <button
-          class="cursor-pointer self-start bg-[#062633] text-white px-2 py-1 rounded-md font-inter font-medium text-sm leading-5 flex items-center md:px-4 md:py-2 md:text-base md:leading-6"
+          class="self-start bg-[#062633] text-white px-2 py-1 rounded-md font-inter font-medium text-sm leading-5 flex items-center md:px-4 md:py-2 md:text-base md:leading-6"
+          :class="{ 'opacity-40 cursor-not-allowed': !isEditingEnabled || !isLocalTemplate() }"
           :disabled="!isEditingEnabled || !isLocalTemplate()"
           data-testid="edit-save-button"
           @click="updatePageTemplate"

apps/web/composables/useJsonEditor/useJsonEditor.ts

@@ -6,6 +6,7 @@
   const lineNumberContainer = ref<HTMLElement | null>(null);
 
   const jsonText = useState<string>('jsonText', () => initialJson);
+  const originalJsonText = jsonText.value;
 
   const syncScroll = () => {
     if (lineNumberContainer.value && textarea.value) {
@@ -25,17 +26,24 @@
       JSON.parse(jsonText.value);
       errorMessage.value = '';
       isEditingEnabled.value = true;
     } catch (error: any) {
       errorMessage.value = 'Invalid JSON: ' + error.message;
       isEditingEnabled.value = false;
     }
   };
 
+  const checkInputChange = () => {
+    if (jsonText.value === originalJsonText) {
+      isEditingEnabled.value = false;
+    }
+  };
+
   const handleInput = () => {
     try {
       validateJson();
       updateLineCount();
+      checkInputChange();
     } catch (error: any) {
       errorMessage.value = 'Invalid JSON: ' + error.message;
       isEditingEnabled.value = false;
     }

apps/web/composables/useUpdatePageTemplate/useUpdatePageTemplate.ts

@@ -8,6 +8,7 @@ const stripArrayBrackets = (jsonString: string): string => {
 
 const updatePageTemplate = async (): Promise<void> => {
   const { setCategoryTemplate } = useCategoryTemplate();
+  const { isEditingEnabled } = useEditor();
   const runtimeConfig = useRuntimeConfig();
   const homepageCategoryId = runtimeConfig.public.homepageCategoryId;
   const { data, loading } = useHomepage();
@@ -17,6 +18,7 @@ const updatePageTemplate = async (): Promise<void> => {
     await setCategoryTemplate(homepageCategoryId, cleanedData);
   } finally {
     loading.value = false;
+    isEditingEnabled.value = false;
   }
 };
 

apps/web/pages/index.vue

@@ -64,7 +64,7 @@ const addNewBlock = (index: number, position: number) => {
   data.value.blocks = updatedBlocks;
 };
 
-const { isEditing, disableActions } = useEditor();
+const { isEditing, isEditingEnabled, disableActions } = useEditor();
 
 const getComponent = (name: string) => {
   if (name === 'NewsletterSubscribe') return resolveComponent('NewsletterSubscribe');
@@ -73,5 +73,9 @@ const getComponent = (name: string) => {
   if (name === 'ProductRecommendedProducts') return resolveComponent('ProductRecommendedProducts');
 };
 
+onMounted(() => {
+  isEditingEnabled.value = false;
+});
+
 fetchPageTemplate();
 </script>

docs/changelog/changelog_en.md

@@ -20,6 +20,7 @@
 - When the media card only displays text, the text block is now left aligned instead of centered.
 - The homepage now displays recommended products on initial load.
 - Fixed product gallery thumbnail image alternate.
+- Saving button is now disabled if there are no changes made to the JSON or if the JSON is invalid.
 
 ## v1.8.0 (2024-12-13) <a href="https://github.com/plentymarkets/plentyshop-pwa/compare/v1.7.0...v1.8.0" target="_blank" rel="noopener"><b>Overview of all changes</b></a>