improve ui for rules and explain quota table in personal settings

Signed-off-by: Lukas Schaefer <lukas@lschaefer.xyz>

Author: lukasdotcom

src/components/PersonalSettings.vue

@@ -87,6 +87,9 @@
 				<h4>
 					{{ t('integration_openai', 'Usage quota info') }}
 				</h4>
+				<NcNoteCard v-if="poolUsed" type="info">
+					{{ t('integration_openai', 'If you see a shared quota usage of 50% and a usage of 10% that means that you have used 10% of the total shared quota, and the sum of all other users affected by this quota is 40%.') }}
+				</NcNoteCard>
 				<!-- Loop through all quota types-->
 				<table class="quota-table">
 					<thead>

src/components/Rules/QuotaRules.vue

@@ -4,11 +4,11 @@
 -->
 <template>
 	<div>
+		<h2>{{ t('integration_openai', 'Quota Rules') }}</h2>
 		<NcNoteCard type="info">
 			{{ t('integration_openai', 'Rules can be set for specific groups or users. These rules will override the global quota settings.') }}
 			{{ t('integration_openai', 'Only the rule with the highest priority is active if multiple rules match.') }}
 		</NcNoteCard>
-		<h2>{{ t('integration_openai', 'Quota Rules') }}</h2>
 		<Rule v-for="(rule, index) in state"
 			:key="index"
 			v-model:value="state[index]"

src/components/Rules/Rule.vue

@@ -44,7 +44,10 @@
 				@update:model-value="update('pool', $event)">
 				{{ t('integration_openai', 'Use shared quota') }}
 			</NcCheckboxRadioSwitch>
-			<NcButton variant="success" @click="save">
+			<NcButton v-if="needSaving"
+				:disabled="saving"
+				variant="success"
+				@click="save">
 				{{ t('integration_openai', 'Save') }}
 			</NcButton>
 			<NcButton @click="$emit('delete')">
@@ -92,6 +95,12 @@ export default {
 	},
 
 	emits: ['update:value', 'delete'],
+	data() {
+		return {
+			needSaving: false,
+			saving: false,
+		}
+	},
 
 	computed: {
 		unit() {
@@ -126,14 +135,18 @@ export default {
 		update(key, value) {
 			console.debug('update', key, value)
 			if (value || value === false || value === 0) {
+				this.needSaving = true
 				this.$emit('update:value', { ...this.value, [key]: value })
 			}
 		},
 		save() {
+			this.saving = true
 			return axios.put(generateUrl('/apps/integration_openai/quota/rule'), {
 				rule: this.value,
 				id: this.value.id,
 			}).then((response) => {
+				this.saving = false
+				this.needSaving = false
 				const data = response.data ?? {}
 				this.$emit('update:value', data)
 				showSuccess(t('integration_openai', 'Quota rule saved'))
@@ -168,4 +181,7 @@ export default {
 	padding: 10px;
 	margin: 10px 0;
 }
+.user-selector {
+	max-width: 600px;
+}
 </style>