From 93db5cc914dbcd72d5fe780301a20cdb9f2139ee Mon Sep 17 00:00:00 2001
From: gsiri-jack <gsirijack@gmail.com>
Date: Thu, 31 Jul 2025 22:22:28 +0530
Subject: [PATCH 1/2] Fix: Show error in UI when rule saving fails

---
 modules/ext.rules/components/App.vue      | 50 +++++++++++++++++++++--
 modules/ext.rules/composables/useRules.js | 34 +++++++++------
 2 files changed, 69 insertions(+), 15 deletions(-)

diff --git a/modules/ext.rules/components/App.vue b/modules/ext.rules/components/App.vue
index 0789c71..712e1f8 100644
--- a/modules/ext.rules/components/App.vue
+++ b/modules/ext.rules/components/App.vue
@@ -1,4 +1,7 @@
 <template>
+	<div v-if="errorMessage" class="error-banner">
+  		{{ errorMessage }}
+	</div>
 	<edit-rule
 		v-model:open="isFormVisible"
 		:rule="ruleToEdit"
@@ -35,7 +38,7 @@ module.exports = defineComponent( {
 		/** @type {import('vue').Ref<Rule | null>} */
 		const ruleToEdit = ref( null );
 		const { rules, addRule, updateRule, deleteRule, saveRules } = useRules( getInitialRules() );
-
+		const errorMessage = ref('');
 		const api = new mw.Api();
 		provide( 'api', api );
 		const title = mw.config.get( 'wgPageName' );
@@ -87,8 +90,21 @@ module.exports = defineComponent( {
 				);
 			}
 		}
+		// Watch for changes in rules and save them to the API
+		//return an error message if saving fails
+		watch( rules, async () => {
+			errorMessage.value = '';
+			try {
+				await saveRules( api, title );
+			} catch ( error ) {
+				console.error( 'Save failed:', error );
+				errorMessage.value = 'Failed to save rules. Please try again.';
+				mw.notify( errorMessage.value, { type: 'error' } );
+			}
+		}, { deep: true } );
 
-		watch( rules, () => saveRules( api, title ), { deep: true } );
+	}
+}, { deep: true } );
 
 		return {
 			rules,
@@ -97,8 +113,36 @@ module.exports = defineComponent( {
 			onAddRule,
 			onEditRule,
 			onDeleteRule,
-			onSaveRule
+			onSaveRule,
+			errorMessage
 		};
 	}
 } );
+
 </script>
+<style scoped>
+.error-banner {
+  background-color: #ffe6e6;
+  color: #cc0000;
+  border: 1px solid #ffcccc;
+  padding: 12px 16px;
+  border-radius: 6px;
+  margin: 12px 0;
+  font-weight: 500;
+  font-family: sans-serif;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>
+
diff --git a/modules/ext.rules/composables/useRules.js b/modules/ext.rules/composables/useRules.js
index 0df5ab7..010403c 100644
--- a/modules/ext.rules/composables/useRules.js
+++ b/modules/ext.rules/composables/useRules.js
@@ -5,6 +5,7 @@ const { ref } = require( 'vue' );
 /**
  * @typedef {object} RulesComposable
  * @property {import('vue').Ref<boolean>} saving
+ * @property {import('vue').Ref<string|null>} saveError
  * @property {import('vue').Ref<Rule[]>} rules
  * @property {( rule: Rule ) => Rule} addRule
  * @property {( originalRule: Rule, updatedRule: Rule ) => Rule | null} updateRule
@@ -18,6 +19,7 @@ const { ref } = require( 'vue' );
  */
 function useRules( initialRules = [] ) {
 	const saving = ref( false );
+	const saveError = ref(' ');
 	/** @type {import('vue').Ref<Rule[]>} */
 	const rules = ref( [ ...initialRules ] );
 
@@ -66,22 +68,30 @@ function useRules( initialRules = [] ) {
 	 * @param {string} title
 	 * @return {Promise<any>}
 	 */
-	async function saveRules( api, title ) {
-		saving.value = true;
-		try {
-			const content = JSON.stringify( { rules: rules.value } );
-			return await api.postWithToken( 'csrf', {
-				action: 'edit',
-				title,
-				text: content
-			} );
-		} finally {
-			saving.value = false;
-		}
+	async function saveRules(api, title) {
+	saving.value = true;
+	saveError.value = null;
+
+	try {
+		const content = JSON.stringify({ rules: rules.value });
+		return await api.postWithToken('csrf', {
+			action: 'edit',
+			title,
+			text: content
+		});
+	} catch (error) {
+		console.error('Failed to save rules:', error);
+		saveError.value = error;
+		return null;
+	} finally {
+		saving.value = false;
 	}
+}
+
 
 	return {
 		saving,
+		saveError,
 		rules,
 		addRule,
 		updateRule,

From 7b9fdfcadd8348ce71481241e039549227ee4bc9 Mon Sep 17 00:00:00 2001
From: gsiri-jack <gsirijack@gmail.com>
Date: Fri, 1 Aug 2025 07:11:24 +0530
Subject: [PATCH 2/2] Fix: Move return inside setup() in App.vue

---
 modules/ext.rules/components/App.vue      | 10 +++++-----
 modules/ext.rules/composables/useRules.js |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/modules/ext.rules/components/App.vue b/modules/ext.rules/components/App.vue
index 712e1f8..53b4ed8 100644
--- a/modules/ext.rules/components/App.vue
+++ b/modules/ext.rules/components/App.vue
@@ -90,8 +90,8 @@ module.exports = defineComponent( {
 				);
 			}
 		}
+
 		// Watch for changes in rules and save them to the API
-		//return an error message if saving fails
 		watch( rules, async () => {
 			errorMessage.value = '';
 			try {
@@ -103,9 +103,7 @@ module.exports = defineComponent( {
 			}
 		}, { deep: true } );
 
-	}
-}, { deep: true } );
-
+		
 		return {
 			rules,
 			isFormVisible,
@@ -118,8 +116,10 @@ module.exports = defineComponent( {
 		};
 	}
 } );
-
 </script>
+
+
+
 <style scoped>
 .error-banner {
   background-color: #ffe6e6;
diff --git a/modules/ext.rules/composables/useRules.js b/modules/ext.rules/composables/useRules.js
index 010403c..bf674be 100644
--- a/modules/ext.rules/composables/useRules.js
+++ b/modules/ext.rules/composables/useRules.js
@@ -82,7 +82,7 @@ function useRules( initialRules = [] ) {
 	} catch (error) {
 		console.error('Failed to save rules:', error);
 		saveError.value = error;
-		return null;
+		throw error;
 	} finally {
 		saving.value = false;
 	}