Merge branch 'main' into translations

package.json

@@ -50,7 +50,7 @@
     "cypress": "7.6.0",
     "cypress-file-upload": "5.0.8",
     "eslint": "7.29.0",
-    "eslint-plugin-vue": "7.11.1",
+    "eslint-plugin-vue": "7.12.1",
     "faker": "5.5.3",
     "jest": "27.0.5",
     "sass-loader": "10.2.0",

src/components/input/multiselect.vue

@@ -28,7 +28,7 @@
 					:placeholder="placeholder"
 					@keydown.down.exact.prevent="() => preSelect(0)"
 					ref="searchInput"
-					@focus="() => showSearchResults = true"
+					@focus="handleFocus"
 				/>
 			</div>
 		</div>
@@ -258,6 +258,13 @@ export default {
 		closeSearchResults() {
 			this.showSearchResults = false
 		},
+		handleFocus() {
+			// We need the timeout to avoid the hideSearchResultsHandler hiding the search results right after the input
+			// is focused. That would lead to flickering pre-loaded search results and hiding them right after showing.
+			setTimeout(() => {
+				this.showSearchResults = true
+			}, 10)
+		},
 		select(object) {
 			if (this.multiple) {
 				if (this.internalValue === null) {

src/components/quick-actions/quick-actions.vue

@@ -51,15 +51,13 @@
 
 <script>
 import TaskService from '@/services/task'
-import ListService from '@/services/list'
-import NamespaceService from '@/services/namespace'
 import TeamService from '@/services/team'
 
 import TaskModel from '@/models/task'
 import NamespaceModel from '@/models/namespace'
 import TeamModel from '@/models/team'
 
-import {CURRENT_LIST, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
+import {CURRENT_LIST, LOADING, LOADING_MODULE, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import ListModel from '@/models/list'
 
 const TYPE_LIST = 'list'
@@ -91,9 +89,6 @@ export default {
 			foundTeams: [],
 			teamSearchTimeout: null,
 			teamService: null,
-
-			namespaceService: null,
-			listService: null,
 		}
 	},
 	computed: {
@@ -148,8 +143,8 @@ export default {
 		},
 		loading() {
 			return this.taskService.loading ||
-				this.listService.loading ||
-				this.namespaceService.loading ||
+				(this.$store.state[LOADING] && this.$store.state[LOADING_MODULE] === 'namespaces') ||
+				(this.$store.state[LOADING] && this.$store.state[LOADING_MODULE] === 'lists') ||
 				this.teamService.loading
 		},
 		placeholder() {
@@ -230,8 +225,6 @@ export default {
 	},
 	created() {
 		this.taskService = new TaskService()
-		this.listService = new ListService()
-		this.namespaceService = new NamespaceService()
 		this.teamService = new TeamService()
 	},
 	methods: {
@@ -378,7 +371,7 @@ export default {
 				title: this.query,
 				namespaceId: this.currentList.namespaceId,
 			})
-			this.listService.create(newList)
+			this.$store.dispatch('lists/createList', newList)
 				.then(r => {
 					this.success({message: this.$t('list.create.createdSuccess')})
 					this.$router.push({name: 'list.index', params: {listId: r.id}})
@@ -390,9 +383,9 @@ export default {
 		},
 		newNamespace() {
 			const newNamespace = new NamespaceModel({title: this.query})
-			this.namespaceService.create(newNamespace)
-				.then(r => {
-					this.$store.commit('namespaces/addNamespace', r)
+
+			this.$store.dispatch('namespaces/createNamespace', newNamespace)
+				.then(() => {
 					this.success({message: this.$t('namespace.create.success')})
 					this.closeQuickActions()
 				})

src/i18n/lang/en.json

@@ -761,7 +761,7 @@
     "4017": "Invalid task filter comparator.",
     "4018": "Invalid task filter concatinator.",
     "4019": "Invalid task filter value.",
-    "5001": "The namspace does not exist.",
+    "5001": "The namespace does not exist.",
     "5003": "You do not have access to the specified namespace.",
     "5006": "The namespace name cannot be empty.",
     "5009": "You need to have namespace read access to perform that action.",

src/store/modules/lists.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import ListService from '@/services/list'
+import {setLoading} from '@/store/helper'
 
 const FavoriteListsNamespace = -2
 
@@ -32,6 +33,7 @@ export default {
 			return ctx.dispatch('updateList', list)
 		},
 		createList(ctx, list) {
+			const cancel = setLoading(ctx, 'lists')
 			const listService = new ListService()
 
 			return listService.create(list)
@@ -41,11 +43,11 @@ export default {
 					ctx.commit('setList', r)
 					return Promise.resolve(r)
 				})
-				.catch(e => {
-					return Promise.reject(e)
-				})
+				.catch(e => Promise.reject(e))
+				.finally(() => cancel())
 		},
 		updateList(ctx, list) {
+			const cancel = setLoading(ctx, 'lists')
 			const listService = new ListService()
 
 			return listService.update(list)
@@ -69,6 +71,7 @@ export default {
 					ctx.commit('setList', list)
 					return Promise.reject(e)
 				})
+				.finally(() => cancel())
 		}
 	},
 }

src/store/modules/namespaces.js

@@ -116,9 +116,7 @@ export default {
 
 					return Promise.resolve(r)
 				})
-				.catch(e => {
-					return Promise.reject(e)
-				})
+				.catch(e => Promise.reject(e))
 				.finally(() => {
 					cancel()
 				})
@@ -136,6 +134,7 @@ export default {
 			}
 		},
 		deleteNamespace(ctx, namespace) {
+			const cancel = setLoading(ctx, 'namespaces')
 			const namespaceService = new NamespaceService()
 
 			return namespaceService.delete(namespace)
@@ -143,7 +142,20 @@ export default {
 					ctx.commit('removeNamespaceById', namespace.id)
 					return Promise.resolve(r)
 				})
-				.catch(Promise.reject)
+				.catch(e => Promise.reject(e))
+				.finally(() => cancel())
+		},
+		createNamespace(ctx, namespace) {
+			const cancel = setLoading(ctx, 'namespaces')
+			const namespaceService = new NamespaceService()
+
+			return namespaceService.create(namespace)
+				.then(r => {
+					ctx.commit('addNamespace', r)
+					return Promise.resolve(r)
+				})
+				.catch(e => Promise.reject(e))
+				.finally(() => cancel())
 		},
 	},
 }

src/styles/components/namespaces.scss

@@ -124,6 +124,13 @@ $lists-per-row: 5;
           color: $text;
           width: 100%;
           margin-bottom: 0;
+          max-height: calc(100% - 2rem); // 1rem padding, 1rem height of the "is archived" badge
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
         }
 
         &.has-light-text .title {

src/views/namespaces/ListNamespaces.vue

@@ -46,7 +46,7 @@
 			</h1>
 
 			<p class="has-text-centered has-text-grey mt-4 is-italic" v-if="n.lists.length === 0">
-				{{ $t('namespaces.noLists') }}
+				{{ $t('namespace.noLists') }}
 				<router-link :to="{name: 'list.create', params: {id:  n.id}}">
 					{{ $t('namespace.createList') }}
 				</router-link>

yarn.lock

@@ -6159,10 +6159,10 @@ eslint-loader@^2.2.1:
     object-hash "^1.1.4"
     rimraf "^2.6.1"
 
-eslint-plugin-vue@7.11.1:
-  version "7.11.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-7.11.1.tgz#77eb4b44032d5cca79f9af21d06991d8694a314a"
-  integrity sha512-lbw3vkEAGqYjqd1HpPFWHXtYaS8mILTJ5KOpJfRxO3Fo7o0wCf1zD7vSOasbm6nTA9xIgvZQ4VcyGIzQXxznHw==
+eslint-plugin-vue@7.12.1:
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-7.12.1.tgz#ef6499ce4fe0566659c8e12c71713f5308630a76"
+  integrity sha512-xHf/wCt88qmzqQerjaSteUFGASj7fPreglKD4ijnvoKRkoSJ3/H3kuJE8QFFtc+2wjw6hRDs834HH7vpuTJQzg==
   dependencies:
     eslint-utils "^2.1.0"
     natural-compare "^1.4.0"