fixup! UI-fixes

Signed-off-by: Hamza Mahjoubi <[email protected]>

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>

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%;
 		}
 
 	}

src/components/mailFilter/MailFilterUpdateModal.vue

@@ -7,15 +7,15 @@
 		: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')"
 					:required="true" />
 			</div>
 
 			<div class="filter-operator">
-				<MailFilterOperator :filter="clone" />
+				<MailFilterOperator :filter="clone" @update:operator="updateOperator" />
 			</div>
 
 			<div class="filter-tests">
@@ -59,21 +59,22 @@
 			</NcCheckboxRadioSwitch>
 
 			<NcButton type="primary"
+				native-type="submit"
 				@click="updateFilter">
 				<template #icon>
 					<NcLoadingIcon v-if="loading" :size="16" />
 					<IconCheck v-else :size="16" />
 				</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)
 		},

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

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) {