From 627acacc13227d06234b0ca6d247f27630ee9800 Mon Sep 17 00:00:00 2001
From: Hamza Mahjoubi <hamzamahjoubi221@gmail.com>
Date: Thu, 12 Sep 2024 17:21:26 +0200
Subject: [PATCH 1/5] move files

Signed-off-by: Hamza Mahjoubi <hamzamahjoubi221@gmail.com>
---
 src/components/AccountSettings.vue                          | 2 +-
 src/components/{ => mailFilter}/MailFilterAction.vue        | 0
 src/components/{ => mailFilter}/MailFilterActionAddflag.vue | 0
 .../{ => mailFilter}/MailFilterActionFileinto.vue           | 2 +-
 src/components/{ => mailFilter}/MailFilterDeleteModal.vue   | 0
 src/components/{ => mailFilter}/MailFilterOperator.vue      | 0
 src/components/{ => mailFilter}/MailFilterTest.vue          | 0
 src/components/{ => mailFilter}/MailFilterUpdateModal.vue   | 4 ++--
 src/components/{ => mailFilter}/MailFilters.vue             | 6 +++---
 9 files changed, 7 insertions(+), 7 deletions(-)
 rename src/components/{ => mailFilter}/MailFilterAction.vue (100%)
 rename src/components/{ => mailFilter}/MailFilterActionAddflag.vue (100%)
 rename src/components/{ => mailFilter}/MailFilterActionFileinto.vue (94%)
 rename src/components/{ => mailFilter}/MailFilterDeleteModal.vue (100%)
 rename src/components/{ => mailFilter}/MailFilterOperator.vue (100%)
 rename src/components/{ => mailFilter}/MailFilterTest.vue (100%)
 rename src/components/{ => mailFilter}/MailFilterUpdateModal.vue (98%)
 rename src/components/{ => mailFilter}/MailFilters.vue (97%)

diff --git a/src/components/AccountSettings.vue b/src/components/AccountSettings.vue
index 8bed6e0838..d4a61327f6 100644
--- a/src/components/AccountSettings.vue
+++ b/src/components/AccountSettings.vue
@@ -111,7 +111,7 @@ import CertificateSettings from './CertificateSettings.vue'
 import SearchSettings from './SearchSettings.vue'
 import TrashRetentionSettings from './TrashRetentionSettings.vue'
 import logger from '../logger.js'
-import MailFilters from './MailFilters.vue'
+import MailFilters from './mailFilter/MailFilters.vue'
 
 export default {
 	name: 'AccountSettings',
diff --git a/src/components/MailFilterAction.vue b/src/components/mailFilter/MailFilterAction.vue
similarity index 100%
rename from src/components/MailFilterAction.vue
rename to src/components/mailFilter/MailFilterAction.vue
diff --git a/src/components/MailFilterActionAddflag.vue b/src/components/mailFilter/MailFilterActionAddflag.vue
similarity index 100%
rename from src/components/MailFilterActionAddflag.vue
rename to src/components/mailFilter/MailFilterActionAddflag.vue
diff --git a/src/components/MailFilterActionFileinto.vue b/src/components/mailFilter/MailFilterActionFileinto.vue
similarity index 94%
rename from src/components/MailFilterActionFileinto.vue
rename to src/components/mailFilter/MailFilterActionFileinto.vue
index b358edfb02..36609cdc18 100644
--- a/src/components/MailFilterActionFileinto.vue
+++ b/src/components/mailFilter/MailFilterActionFileinto.vue
@@ -11,7 +11,7 @@
 <script>
 
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
-import { mailboxHasRights } from '../util/acl.js'
+import { mailboxHasRights } from '../../util/acl.js'
 export default {
 	name: 'MailFilterActionFileinto',
 	components: {
diff --git a/src/components/MailFilterDeleteModal.vue b/src/components/mailFilter/MailFilterDeleteModal.vue
similarity index 100%
rename from src/components/MailFilterDeleteModal.vue
rename to src/components/mailFilter/MailFilterDeleteModal.vue
diff --git a/src/components/MailFilterOperator.vue b/src/components/mailFilter/MailFilterOperator.vue
similarity index 100%
rename from src/components/MailFilterOperator.vue
rename to src/components/mailFilter/MailFilterOperator.vue
diff --git a/src/components/MailFilterTest.vue b/src/components/mailFilter/MailFilterTest.vue
similarity index 100%
rename from src/components/MailFilterTest.vue
rename to src/components/mailFilter/MailFilterTest.vue
diff --git a/src/components/MailFilterUpdateModal.vue b/src/components/mailFilter/MailFilterUpdateModal.vue
similarity index 98%
rename from src/components/MailFilterUpdateModal.vue
rename to src/components/mailFilter/MailFilterUpdateModal.vue
index 4c3f0a1565..a846eb6899 100644
--- a/src/components/MailFilterUpdateModal.vue
+++ b/src/components/mailFilter/MailFilterUpdateModal.vue
@@ -77,9 +77,9 @@
 import { NcButton, NcCheckboxRadioSwitch, NcModal, NcSelect, 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'
 import MailFilterAction from './MailFilterAction.vue'
-import logger from '../logger'
+import logger from '../../logger'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 
 export default {
diff --git a/src/components/MailFilters.vue b/src/components/mailFilter/MailFilters.vue
similarity index 97%
rename from src/components/MailFilters.vue
rename to src/components/mailFilter/MailFilters.vue
index 08e0f8498b..0f6ab9d6d4 100644
--- a/src/components/MailFilters.vue
+++ b/src/components/mailFilter/MailFilters.vue
@@ -49,10 +49,10 @@ import { NcButton as ButtonVue, NcLoadingIcon as IconLoading, NcActionButton, Nc
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconLock from 'vue-material-design-icons/Lock.vue'
 import MailFilterUpdateModal from './MailFilterUpdateModal.vue'
-import { randomId } from '../util/randomId'
-import logger from '../logger'
+import { randomId } from '../../util/randomId'
+import logger from '../../logger'
 import { mapStores } from 'pinia'
-import useMailFilterStore from '../store/mailFilterStore'
+import useMailFilterStore from '../../store/mailFilterStore'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import MailFilterDeleteModal from './MailFilterDeleteModal.vue'
 

From e62a7db6118ee37dd92d0dca9ffad0b976ddd8c3 Mon Sep 17 00:00:00 2001
From: Hamza Mahjoubi <hamzamahjoubi221@gmail.com>
Date: Thu, 12 Sep 2024 17:59:00 +0200
Subject: [PATCH 2/5] UI-fixes

Signed-off-by: Hamza Mahjoubi <hamzamahjoubi221@gmail.com>
---
 .../mailFilter/MailFilterOperator.vue         |  6 --
 src/components/mailFilter/MailFilterTest.vue  | 74 +++++++------------
 .../mailFilter/MailFilterUpdateModal.vue      | 23 +++---
 src/components/mailFilter/MailFilters.vue     |  7 +-
 src/service/MailFilterService.js              | 16 +---
 5 files changed, 45 insertions(+), 81 deletions(-)

diff --git a/src/components/mailFilter/MailFilterOperator.vue b/src/components/mailFilter/MailFilterOperator.vue
index fc66074948..ec5287ab96 100644
--- a/src/components/mailFilter/MailFilterOperator.vue
+++ b/src/components/mailFilter/MailFilterOperator.vue
@@ -20,12 +20,6 @@
 				type="radio">
 				{{ t('mail', 'anyof') }}
 			</NcCheckboxRadioSwitch>
-			<NcCheckboxRadioSwitch :checked.sync="filter.operator"
-				value="true"
-				name="sharing_permission_radio"
-				type="radio">
-				{{ t('mail', 'true') }}
-			</NcCheckboxRadioSwitch>
 		</div>
 	</div>
 </template>
diff --git a/src/components/mailFilter/MailFilterTest.vue b/src/components/mailFilter/MailFilterTest.vue
index 9ab67b457a..d0e28e4b28 100644
--- a/src/components/mailFilter/MailFilterTest.vue
+++ b/src/components/mailFilter/MailFilterTest.vue
@@ -4,8 +4,8 @@
 -->
 <template>
 	<div class="mail-filter-rows">
-		<div class="mail-filter-row">
-			<div class="mail-filter-column">
+		<div class="mail-filter-rows__row">
+			<div class="mail-filter-rows__row__column">
 				<NcSelect id="mail-filter-field"
 					:value="test.field"
 					:required="true"
@@ -13,7 +13,7 @@
 					:options="['subject', 'to', 'from']"
 					@input="updateTest({ field: $event })" />
 			</div>
-			<div class="mail-filter-column">
+			<div class="mail-filter-rows__row__column">
 				<NcSelect id="mail-filter-operator"
 					:value="test.operator"
 					:required="true"
@@ -21,7 +21,7 @@
 					:options="['is', 'contains', 'matches']"
 					@input="updateTest({ operator: $event })" />
 			</div>
-			<div class="mail-filter-column">
+			<div class="mail-filter-rows__row__column">
 				<NcButton aria-label="Delete action"
 					type="tertiary-no-background"
 					@click="deleteTest">
@@ -32,21 +32,21 @@
 				</NcButton>
 			</div>
 		</div>
-		<div class="mail-filter-row">
-			<div class="mail-filter-column values-list">
-				<div v-for="(value, index) in test.values" :key="index" class="values-list-item">
+		<div class="mail-filter-rows__row">
+			<div class="mail-filter-rows__row__column values-list">
+				<div v-for="(value, index) in test.values" :key="index" class="values-list__item">
 					<NcChip :text="value"
 						@close="deleteValue(index)" />
 					<span v-if="(index + 1) < test.values.length">{{ t('mail', 'or') }}</span>
 				</div>
 			</div>
 		</div>
-		<div class="mail-filter-row">
-			<div class="mail-filter-column">
+		<div class="mail-filter-rows__row">
+			<div class="mail-filter-rows__row__column">
 				<NcTextField :value.sync="inputValue"
 					:label="t('mail', 'Value')" />
 			</div>
-			<div class="mail-filter-column">
+			<div class="mail-filter-rows__row__column">
 				<NcButton aria-label="Add value"
 					type="tertiary-no-background"
 					@click="addValue">
@@ -118,48 +118,28 @@ export default {
 <style lang="scss" scoped>
 .mail-filter-rows {
 	margin-bottom: calc(var(--default-grid-baseline) * 4);
-}
-.mail-filter-row {
-	display: flex;
-	gap: var(--default-grid-baseline);
-	align-items: baseline;
+	&__row {
+		display: flex;
+		gap: var(--default-grid-baseline);
+		align-items: baseline;
+		&__column {
+			display: block;
+			flex-grow: 1;
+		}
+		&__column *{
+			width: 100%;
+		}
+
+	}
 }
 
 .values-list {
 	display: flex;
 	gap: var(--default-grid-baseline);
 	flex-wrap: wrap;
-}
-
-.values-list-item {
-	display: flex;
-	gap: var(--default-grid-baseline);
-}
-
-.mail-filter-column label {
-	display: block;
-}
-
-.mail-filter-values {
-	display: flex;
-}
-
-.form-group {
-	margin: calc(var(--default-grid-baseline) * 4) 0;
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-}
-
-.external-label {
-	display: flex;
-	width: 100%;
-	margin-top: 1rem;
-}
-
-.external-label label {
-	padding-top: 7px;
-	padding-right: 14px;
-	white-space: nowrap;
+	&__item {
+		display: flex;
+		gap: var(--default-grid-baseline);
+	}
 }
 </style>
diff --git a/src/components/mailFilter/MailFilterUpdateModal.vue b/src/components/mailFilter/MailFilterUpdateModal.vue
index a846eb6899..a35cd14248 100644
--- a/src/components/mailFilter/MailFilterUpdateModal.vue
+++ b/src/components/mailFilter/MailFilterUpdateModal.vue
@@ -3,9 +3,9 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcModal size="full"
+	<NcModal size="large"
 		:close-on-click-outside="false"
-		name="Name inside modal"
+		:name="t('mail','Update mail filter')"
 		@close="closeModal">
 		<div class="modal__content">
 			<div class="filter-name">
@@ -49,18 +49,14 @@
 				</NcButton>
 			</div>
 
-			<div class="filter-priority">
-				<NcTextField :value.sync="clone.priority"
-					type="number"
-					:label="t('mail', 'Priority')"
-					:required="true" />
-			</div>
+			<NcTextField :value.sync="clone.priority"
+				type="number"
+				:label="t('mail', 'Priority')"
+				:required="true" />
 
-			<div>
-				<NcCheckboxRadioSwitch :checked.sync="clone.enable" type="switch">
-					{{ t('mail', 'Enable filter') }}
-				</NcCheckboxRadioSwitch>
-			</div>
+			<NcCheckboxRadioSwitch :checked.sync="clone.enable" type="switch">
+				{{ t('mail', 'Enable filter') }}
+			</NcCheckboxRadioSwitch>
 
 			<NcButton type="primary"
 				@click="updateFilter">
@@ -79,7 +75,6 @@ import MailFilterTest from './MailFilterTest.vue'
 import MailFilterOperator from './MailFilterOperator.vue'
 import { randomId } from '../../util/randomId'
 import MailFilterAction from './MailFilterAction.vue'
-import logger from '../../logger'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 
 export default {
diff --git a/src/components/mailFilter/MailFilters.vue b/src/components/mailFilter/MailFilters.vue
index 0f6ab9d6d4..dab881560b 100644
--- a/src/components/mailFilter/MailFilters.vue
+++ b/src/components/mailFilter/MailFilters.vue
@@ -55,6 +55,7 @@ import { mapStores } from 'pinia'
 import useMailFilterStore from '../../store/mailFilterStore'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import MailFilterDeleteModal from './MailFilterDeleteModal.vue'
+import { showSuccess } from '@nextcloud/dialogs'
 
 export default {
 	name: 'MailFilters',
@@ -119,7 +120,7 @@ export default {
 			this.currentFilter = {
 				id: randomId(),
 				name: t('mail', 'New filter'),
-				enable: false,
+				enable: true,
 				operator: 'allof',
 				tests: [],
 				actions: [],
@@ -153,7 +154,9 @@ export default {
 			})
 
 			try {
-				await this.mailFilterStore.update(this.account.id)
+				await this.mailFilterStore.update(this.account.id).then(() => {
+					showSuccess(t('mail', 'Filter saved'))
+				})
 			} catch (e) {
 				// TODO error toast
 			} finally {
diff --git a/src/service/MailFilterService.js b/src/service/MailFilterService.js
index 5204196e7b..542fbab3fd 100644
--- a/src/service/MailFilterService.js
+++ b/src/service/MailFilterService.js
@@ -4,25 +4,17 @@
  */
 import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
-import { convertAxiosError } from '../errors/convert.js'
-import { randomId } from '../util/randomId'
 
 export async function getFilters(accountId) {
 	const url = generateUrl('/apps/mail/api/mailfilter/{accountId}', { accountId })
 
-	try {
-		return (await axios.get(url)).data
-	} catch (error) {
-		throw convertAxiosError(error)
-	}
+	const { data } = await axios.get(url)
+	return data.data
 }
 
 export async function updateFilters(accountId, filters) {
 	const url = generateUrl('/apps/mail/api/mailfilter/{accountId}', { accountId })
 
-	try {
-		return (await axios.put(url, { filters })).data
-	} catch (error) {
-		throw convertAxiosError(error)
-	}
+	const { data } = await axios.put(url, { filters })
+	return data.data
 }

From 4ad4f4aa9046dd27559db614debdbf809ab339e5 Mon Sep 17 00:00:00 2001
From: Hamza Mahjoubi <hamzamahjoubi221@gmail.com>
Date: Mon, 16 Sep 2024 18:53:42 +0200
Subject: [PATCH 3/5] fixup! UI-fixes

Signed-off-by: Hamza Mahjoubi <hamzamahjoubi221@gmail.com>
---
 .../mailFilter/MailFilterAction.vue           | 30 +---------
 src/components/mailFilter/MailFilterTest.vue  | 60 +++++++------------
 src/components/mailFilter/MailFilters.vue     |  2 +-
 3 files changed, 24 insertions(+), 68 deletions(-)

diff --git a/src/components/mailFilter/MailFilterAction.vue b/src/components/mailFilter/MailFilterAction.vue
index b4ebf1f2f0..58f5bda10e 100644
--- a/src/components/mailFilter/MailFilterAction.vue
+++ b/src/components/mailFilter/MailFilterAction.vue
@@ -23,6 +23,7 @@
 			<NcButton aria-label="Delete action"
 				type="tertiary-no-background"
 				@click="deleteAction">
+				{{ t('mail', 'Delete action') }}
 				<template #icon>
 					<DeleteIcon :size="20" />
 				</template>
@@ -77,12 +78,6 @@ export default {
 		},
 	},
 	methods: {
-		// changeActionType(value) {
-		// 	this.changeAction({
-		// 		id: this.action.id,
-		// 		type: value,
-		// 	})
-		// },
 		updateAction(properties) {
 			this.$emit('update-action', { ...this.action, ...properties })
 		},
@@ -98,27 +93,4 @@ export default {
 	gap: 5px;
 	align-items: baseline;
 }
-//
-//.mail-filter-column label {
-//	display: block;
-//}
-//
-//.form-group {
-//	margin: calc(var(--default-grid-baseline) * 4) 0;
-//	display: flex;
-//	flex-direction: column;
-//	align-items: flex-start;
-//}
-//
-//.external-label {
-//	display: flex;
-//	width: 100%;
-//	margin-top: 1rem;
-//}
-//
-//.external-label label {
-//	padding-top: 7px;
-//	padding-right: 14px;
-//	white-space: nowrap;
-//}
 </style>
diff --git a/src/components/mailFilter/MailFilterTest.vue b/src/components/mailFilter/MailFilterTest.vue
index d0e28e4b28..6fbadde180 100644
--- a/src/components/mailFilter/MailFilterTest.vue
+++ b/src/components/mailFilter/MailFilterTest.vue
@@ -33,34 +33,21 @@
 			</div>
 		</div>
 		<div class="mail-filter-rows__row">
-			<div class="mail-filter-rows__row__column values-list">
-				<div v-for="(value, index) in test.values" :key="index" class="values-list__item">
-					<NcChip :text="value"
-						@close="deleteValue(index)" />
-					<span v-if="(index + 1) < test.values.length">{{ t('mail', 'or') }}</span>
-				</div>
-			</div>
-		</div>
-		<div class="mail-filter-rows__row">
-			<div class="mail-filter-rows__row__column">
-				<NcTextField :value.sync="inputValue"
-					:label="t('mail', 'Value')" />
-			</div>
-			<div class="mail-filter-rows__row__column">
-				<NcButton aria-label="Add value"
-					type="tertiary-no-background"
-					@click="addValue">
-					<template #icon>
-						<ReceiptTextPlusIcon :size="20" />
-					</template>
-					{{ t('mail', 'Add value') }}
-				</NcButton>
-			</div>
+			<NcSelect id="mail-filter-value"
+				v-model="localValues"
+				class="mail-filter-rows__row__select"
+				:multiple="true"
+				:wrap="true"
+				:close-on-select="false"
+				:taggable="true"
+				@option:selected="updateTest({ values: localValues })"
+				@option:deselected="updateTest({ values: localValues })" />
 		</div>
+		<hr class="solid">
 	</div>
 </template>
 <script>
-import { NcActionButton, NcActions, NcButton, NcLoadingIcon, NcSelect, NcTextField } from '@nextcloud/vue'
+import { NcActionButton, NcActions, NcButton, NcLoadingIcon, NcSelect, NcTextField, NcSelectTags } 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'
@@ -75,6 +62,7 @@ export default {
 		NcButton,
 		NcTextField,
 		NcSelect,
+		NcSelectTags,
 		DeleteIcon,
 		NcChip,
 		CheckIcon,
@@ -89,8 +77,12 @@ export default {
 	data() {
 		return {
 			inputValue: '',
+			localValues: [],
 		}
 	},
+	mounted() {
+		this.localValues = [...this.test.values]
+	},
 	methods: {
 		updateTest(properties) {
 			this.$emit('update-test', { ...this.test, ...properties })
@@ -98,24 +90,13 @@ export default {
 		deleteTest() {
 			this.$emit('delete-test', this.test)
 		},
-		addValue() {
-			if (this.inputValue.length > 0) {
-				const values = this.test.values
-				values.push(this.inputValue)
-				values.sort((a, b) => a.localeCompare(b))
-				this.updateTest({ values })
-			}
-			this.inputValue = ''
-		},
-		deleteValue(index) {
-			const values = this.test.values
-			values.splice(index, 1)
-			this.updateTest({ values })
-		},
 	},
 }
 </script>
 <style lang="scss" scoped>
+.solid {
+	margin: calc(var(--default-grid-baseline) * 4) 0 0 0;
+}
 .mail-filter-rows {
 	margin-bottom: calc(var(--default-grid-baseline) * 4);
 	&__row {
@@ -129,6 +110,9 @@ export default {
 		&__column *{
 			width: 100%;
 		}
+		&__select {
+			max-width: 100% !important;
+		}
 
 	}
 }
diff --git a/src/components/mailFilter/MailFilters.vue b/src/components/mailFilter/MailFilters.vue
index dab881560b..e9b01ee0e5 100644
--- a/src/components/mailFilter/MailFilters.vue
+++ b/src/components/mailFilter/MailFilters.vue
@@ -25,7 +25,7 @@
 			</NcListItem>
 		</ul>
 		<NcButton class="app-settings-button"
-			type="secondary"
+			type="primary"
 			:aria-label="t('mail', 'New filter')"
 			@click.prevent.stop="createFilter">
 			{{ t('mail', 'New filter') }}

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 4/5] 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) {

From a3cc9f5c82c87a8f3c50f81852fc9be0c2926513 Mon Sep 17 00:00:00 2001
From: Hamza Mahjoubi <hamzamahjoubi221@gmail.com>
Date: Tue, 17 Sep 2024 16:13:51 +0200
Subject: [PATCH 5/5] fixup! UI-fixes

Signed-off-by: Hamza Mahjoubi <hamzamahjoubi221@gmail.com>
---
 src/components/mailFilter/MailFilterUpdateModal.vue | 2 +-
 src/components/mailFilter/MailFilters.vue           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/mailFilter/MailFilterUpdateModal.vue b/src/components/mailFilter/MailFilterUpdateModal.vue
index f412314502..63d64b6b64 100644
--- a/src/components/mailFilter/MailFilterUpdateModal.vue
+++ b/src/components/mailFilter/MailFilterUpdateModal.vue
@@ -60,7 +60,7 @@
 
 			<NcButton type="primary"
 				native-type="submit"
-				@click="updateFilter">
+				@click.prevent.stop="updateFilter">
 				<template #icon>
 					<NcLoadingIcon v-if="loading" :size="16" />
 					<IconCheck v-else :size="16" />
diff --git a/src/components/mailFilter/MailFilters.vue b/src/components/mailFilter/MailFilters.vue
index 7b3d69b9c8..43083ca539 100644
--- a/src/components/mailFilter/MailFilters.vue
+++ b/src/components/mailFilter/MailFilters.vue
@@ -122,6 +122,7 @@ export default {
 				priority,
 			}
 			this.showUpdateModal = true
+			this.loading = false
 		},
 		openUpdateModal(filter) {
 			this.currentFilter = filter
@@ -134,7 +135,6 @@ export default {
 		},
 		async updateFilter(filter) {
 			this.loading = true
-
 			this.mailFilterStore.$patch((state) => {
 				const index = state.filters.findIndex((item) => item.id === filter.id)
 				logger.debug('update filter', { filter, index })