From ceb40029cbcb783158a00047bb868b7f00eb1ff9 Mon Sep 17 00:00:00 2001
From: Hamza Mahjoubi <hamzamahjoubi221@gmail.com>
Date: Mon, 16 Sep 2024 20:03:33 +0200
Subject: [PATCH] fixup! UI-fixes

Signed-off-by: Hamza Mahjoubi <hamzamahjoubi221@gmail.com>
---
 .../mailFilter/MailFilterOperator.vue         | 15 +++++--
 src/components/mailFilter/MailFilterTest.vue  | 14 +++----
 .../mailFilter/MailFilterUpdateModal.vue      | 15 ++++---
 src/components/mailFilter/MailFilters.vue     | 21 ++++------
 src/store/mailFilterStore.js                  | 39 ++++++++++---------
 5 files changed, 53 insertions(+), 51 deletions(-)

diff --git a/src/components/mailFilter/MailFilterOperator.vue b/src/components/mailFilter/MailFilterOperator.vue
index ec5287ab96..34af5ee0da 100644
--- a/src/components/mailFilter/MailFilterOperator.vue
+++ b/src/components/mailFilter/MailFilterOperator.vue
@@ -8,16 +8,18 @@
 			<p>{{ t('mail', 'Operator') }}</p>
 		</div>
 		<div class="mail-filter-row">
-			<NcCheckboxRadioSwitch :checked.sync="filter.operator"
+			<NcCheckboxRadioSwitch :checked="filter.operator"
 				value="allof"
 				name="sharing_permission_radio"
-				type="radio">
+				type="radio"
+				@update:checked="updateFilter('allof')">
 				{{ t('mail', 'allof') }}
 			</NcCheckboxRadioSwitch>
-			<NcCheckboxRadioSwitch :checked.sync="filter.operator"
+			<NcCheckboxRadioSwitch :checked="filter.operator"
 				value="anyof"
 				name="sharing_permission_radio"
-				type="radio">
+				type="radio"
+				@update:checked="updateFilter('anyof')">
 				{{ t('mail', 'anyof') }}
 			</NcCheckboxRadioSwitch>
 		</div>
@@ -37,6 +39,11 @@ export default {
 			required: true,
 		},
 	},
+	methods: {
+		updateFilter(operator) {
+			this.$emit('update:operator', operator)
+		},
+	},
 }
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/mailFilter/MailFilterTest.vue b/src/components/mailFilter/MailFilterTest.vue
index 6fbadde180..bd4c2844f3 100644
--- a/src/components/mailFilter/MailFilterTest.vue
+++ b/src/components/mailFilter/MailFilterTest.vue
@@ -7,6 +7,7 @@
 		<div class="mail-filter-rows__row">
 			<div class="mail-filter-rows__row__column">
 				<NcSelect id="mail-filter-field"
+					input-label="filed"
 					:value="test.field"
 					:required="true"
 					:label-outside="true"
@@ -15,6 +16,7 @@
 			</div>
 			<div class="mail-filter-rows__row__column">
 				<NcSelect id="mail-filter-operator"
+					input-label="operator"
 					:value="test.operator"
 					:required="true"
 					:label-outside="true"
@@ -35,6 +37,7 @@
 		<div class="mail-filter-rows__row">
 			<NcSelect id="mail-filter-value"
 				v-model="localValues"
+				input-label="value"
 				class="mail-filter-rows__row__select"
 				:multiple="true"
 				:wrap="true"
@@ -47,11 +50,8 @@
 	</div>
 </template>
 <script>
-import { NcActionButton, NcActions, NcButton, NcLoadingIcon, NcSelect, NcTextField, NcSelectTags } from '@nextcloud/vue'
+import { NcActionButton, NcActions, NcButton, NcLoadingIcon, NcSelect } from '@nextcloud/vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
-import NcChip from '@nextcloud/vue/dist/Components/NcChip.js'
-import CheckIcon from 'vue-material-design-icons/Check.vue'
-import ReceiptTextPlusIcon from 'vue-material-design-icons/ReceiptTextPlus.vue'
 
 export default {
 	name: 'MailFilterTest',
@@ -60,13 +60,8 @@ export default {
 		NcActions,
 		NcActionButton,
 		NcButton,
-		NcTextField,
 		NcSelect,
-		NcSelectTags,
 		DeleteIcon,
-		NcChip,
-		CheckIcon,
-		ReceiptTextPlusIcon,
 	},
 	props: {
 		test: {
@@ -112,6 +107,7 @@ export default {
 		}
 		&__select {
 			max-width: 100% !important;
+			width: 100%;
 		}
 
 	}
diff --git a/src/components/mailFilter/MailFilterUpdateModal.vue b/src/components/mailFilter/MailFilterUpdateModal.vue
index a35cd14248..f412314502 100644
--- a/src/components/mailFilter/MailFilterUpdateModal.vue
+++ b/src/components/mailFilter/MailFilterUpdateModal.vue
@@ -7,7 +7,7 @@
 		:close-on-click-outside="false"
 		:name="t('mail','Update mail filter')"
 		@close="closeModal">
-		<div class="modal__content">
+		<form class="modal__content">
 			<div class="filter-name">
 				<NcTextField :value.sync="clone.name"
 					:label="t('mail', 'Filter name')"
@@ -15,7 +15,7 @@
 			</div>
 
 			<div class="filter-operator">
-				<MailFilterOperator :filter="clone" />
+				<MailFilterOperator :filter="clone" @update:operator="updateOperator" />
 			</div>
 
 			<div class="filter-tests">
@@ -59,6 +59,7 @@
 			</NcCheckboxRadioSwitch>
 
 			<NcButton type="primary"
+				native-type="submit"
 				@click="updateFilter">
 				<template #icon>
 					<NcLoadingIcon v-if="loading" :size="16" />
@@ -66,14 +67,14 @@
 				</template>
 				{{ t('mail', 'Save filter') }}
 			</NcButton>
-		</div>
+		</form>
 	</NcModal>
 </template>
 <script>
-import { NcButton, NcCheckboxRadioSwitch, NcModal, NcSelect, NcTextField, NcLoadingIcon } from '@nextcloud/vue'
+import { NcButton, NcCheckboxRadioSwitch, NcModal, NcTextField, NcLoadingIcon } from '@nextcloud/vue'
 import MailFilterTest from './MailFilterTest.vue'
 import MailFilterOperator from './MailFilterOperator.vue'
-import { randomId } from '../../util/randomId'
+import { randomId } from '../../util/randomId.js'
 import MailFilterAction from './MailFilterAction.vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 
@@ -88,7 +89,6 @@ export default {
 		NcCheckboxRadioSwitch,
 		NcLoadingIcon,
 		NcModal,
-		NcSelect,
 		NcTextField,
 	},
 	props: {
@@ -128,6 +128,9 @@ export default {
 			const index = this.clone.actions.findIndex((item) => item.id === action.id)
 			this.$set(this.clone.actions, index, action)
 		},
+		updateOperator(operator) {
+			this.clone.operator = operator
+		},
 		deleteAction(action) {
 			this.clone.actions = this.clone.actions.filter((item) => item.id !== action.id)
 		},
diff --git a/src/components/mailFilter/MailFilters.vue b/src/components/mailFilter/MailFilters.vue
index e9b01ee0e5..7b3d69b9c8 100644
--- a/src/components/mailFilter/MailFilters.vue
+++ b/src/components/mailFilter/MailFilters.vue
@@ -45,26 +45,21 @@
 </template>
 
 <script>
-import { NcButton as ButtonVue, NcLoadingIcon as IconLoading, NcActionButton, NcListItem, NcButton } from '@nextcloud/vue'
-import IconCheck from 'vue-material-design-icons/Check.vue'
-import IconLock from 'vue-material-design-icons/Lock.vue'
+import { NcLoadingIcon as IconLoading, NcActionButton, NcListItem, NcButton } from '@nextcloud/vue'
 import MailFilterUpdateModal from './MailFilterUpdateModal.vue'
-import { randomId } from '../../util/randomId'
-import logger from '../../logger'
+import { randomId } from '../../util/randomId.js'
+import logger from '../../logger.js'
 import { mapStores } from 'pinia'
-import useMailFilterStore from '../../store/mailFilterStore'
+import useMailFilterStore from '../../store/mailFilterStore.js'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import MailFilterDeleteModal from './MailFilterDeleteModal.vue'
-import { showSuccess } from '@nextcloud/dialogs'
+import { showError, showSuccess } from '@nextcloud/dialogs'
 
 export default {
 	name: 'MailFilters',
 	components: {
-		IconLock,
 		NcButton,
-		ButtonVue,
 		IconLoading,
-		IconCheck,
 		NcListItem,
 		NcActionButton,
 		MailFilterUpdateModal,
@@ -157,13 +152,13 @@ export default {
 				await this.mailFilterStore.update(this.account.id).then(() => {
 					showSuccess(t('mail', 'Filter saved'))
 				})
+				await this.$store.dispatch('fetchActiveSieveScript', { accountId: this.account.id })
 			} catch (e) {
-				// TODO error toast
+				logger.error(e)
+				showError(t('mail', 'Could not save filter'))
 			} finally {
 				this.loading = false
 			}
-
-			await this.$store.dispatch('fetchActiveSieveScript', { accountId: this.account.id })
 		},
 		async deleteFilter(filter) {
 			this.loading = true
diff --git a/src/store/mailFilterStore.js b/src/store/mailFilterStore.js
index b93f7a1399..447dc25b66 100644
--- a/src/store/mailFilterStore.js
+++ b/src/store/mailFilterStore.js
@@ -4,9 +4,8 @@
  */
 
 import { defineStore } from 'pinia'
-import * as OutboxService from '../service/OutboxService'
-import * as MailFilterService from '../service/MailFilterService'
-import { randomId } from '../util/randomId'
+import * as MailFilterService from '../service/MailFilterService.js'
+import { randomId } from '../util/randomId.js'
 
 export default defineStore('mailFilter', {
 	state: () => {
@@ -18,24 +17,26 @@ export default defineStore('mailFilter', {
 		async fetch(accountId) {
 			await this.$patch(async (state) => {
 				const filters = await MailFilterService.getFilters(accountId)
-				state.filters = filters.map((filter) => {
-					filter.id = randomId()
-					filter.tests.map((test) => {
-						test.id = randomId()
-						if (!test.hasOwnProperty('values')) {
-							test.values = [test.value]
+				if (filters) {
+					state.filters = filters.map((filter) => {
+						filter.id = randomId()
+						filter.tests.map((test) => {
+							test.id = randomId()
+							if (!test.hasOwnProperty('values')) {
+								test.values = [test.value]
+							}
+							return test
+						})
+						filter.actions.map((action) => {
+							action.id = randomId()
+							return action
+						})
+						if (!filter.hasOwnProperty('priority')) {
+							filter.priority = 0
 						}
-						return test
+						return filter
 					})
-					filter.actions.map((action) => {
-						action.id = randomId()
-						return action
-					})
-					if (!filter.hasOwnProperty('priority')) {
-						filter.priority = 0
-					}
-					return filter
-				})
+				}
 			})
 		},
 		async update(accountId) {