[WIP] Sort category via buttons

src/components/Category.vue

@@ -3,7 +3,13 @@
 		<h2>Categories for {{ listId }}</h2>
 
 		<ul>
-			<ListCategory v-for="category in categories" :key="category.id" :category="category" />
+      {{ sortUp() }}
+			<ListCategory v-for="category in categories.sort((a, b) => a.order > b.order)"
+                    :key="category.id"
+                    :category="category"
+                    @sortUp="sortUp()"
+                    @sortDown="sortDown()"
+      />
 		</ul>
 
 		<div class="new-category__wrapper">
@@ -74,6 +80,12 @@ export default {
 			this.newCategoryId = category.id
 			this.category = category.name
 		},
+    sortUp() {
+      console.error("sortup ")
+    },
+    sortDown() {
+      console.error("sort down")
+    },
 		async onSaveCategory() {
 			if (this.newCategoryId === -1) {
 				this.addCategory()

src/components/ListCategory.vue

@@ -1,22 +1,34 @@
 <template>
 	<li class="list-category">
+    <NcButton type="tertiary"
+              :aria-label="isEditing ? t('grocerylist', 'Save changed category') : t('grocerylist', 'Edit category')"
+              @click="toggleEditMode">
+      <template #icon>
+        <IconCheck v-if="isEditing" :size="20" />
+        <IconPencil v-else :size="20" />
+      </template>
+    </NcButton>
 		<NcTextField v-if="isEditing"
 			ref="input"
 			class="list-category__input"
 			:label="t('grocerylist', 'Category name')"
 			:loading="loading"
 			:value.sync="newCategoryName" />
-		<span v-else class="list-category__name">
+		<span v-else class="list-category__name" @click="$emit('sortUp')">
 			{{ category.name }}
 		</span>
-		<NcButton type="tertiary"
-			:aria-label="isEditing ? t('grocerylist', 'Save changed category') : t('grocerylist', 'Edit category')"
-			@click="toggleEditMode">
-			<template #icon>
-				<IconCheck v-if="isEditing" :size="20" />
-				<IconPencil v-else :size="20" />
-			</template>
-		</NcButton>
+    <NcButton type="tertiary"
+              @click="$emit('sortUp')">
+      <template #icon>
+        <IconArrowUp :size="20" />
+      </template>
+    </NcButton>
+    <NcButton type="tertiary"
+              @click="$emit('sortDown')">
+      <template #icon>
+        <IconArrowDown :size="20" />
+      </template>
+    </NcButton>
 	</li>
 </template>
 
@@ -28,13 +40,17 @@ import { useCategoryStore } from '../store/categoryStore.ts'
 
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconPencil from 'vue-material-design-icons/Pencil.vue'
+import IconArrowUp from 'vue-material-design-icons/ArrowUp.vue'
+import IconArrowDown from 'vue-material-design-icons/ArrowDown.vue'
 
 export default {
 	name: 'ListCategory',
 
 	components: {
 		IconCheck,
 		IconPencil,
+    IconArrowUp,
+    IconArrowDown,
 		NcButton,
 		NcTextField,
 	},

src/store/categoryStore.ts

@@ -46,11 +46,24 @@ export const useCategoryStore = defineStore('category', {
 				{
 					id: category.id,
 					newName: category.name,
+					order: category.order
 				},
 			)
 			this.categories = { ...this.categories, [category.grocery_list]: data }
 		},
 
+		async updateCategory(category: ICategory) {
+			const { data } = await axios.post<ICategory[]>(
+				generateUrl('/apps/grocerylist/api/category/update'),
+				{
+					id: category.id,
+					newName: category.name,
+					order: category.order
+				},
+			)
+			// this.categories = { ...this.categories, [category.grocery_list]: data }
+		},
+
 		async loadCategories(listId: number) {
 			const response = await axios.get<ICategory[]>(
 				generateUrl(`/apps/grocerylist/api/all_categories/${listId}`),

src/views/ListSettings.vue

@@ -13,7 +13,12 @@
 			</template>
 		</NcEmptyContent>
 		<ul v-else class="category-list">
-			<ListCategory v-for="category in categories" :key="category.name" :category="category" />
+			<ListCategory
+          v-for="category in categories.sort((a, b) => a.order > b.order)"
+                    :key="category.name"
+                    :category="category"
+                    @sortUp="() => sortUp(category)"
+                    @sortDown="sortDown()"/>
 		</ul>
 
 		<ListCategoryNew :list-id="listId" />
@@ -80,6 +85,19 @@ export default {
 	},
 
 	methods: {
+    async sortUp(category) {
+      category.order = category.order + 1
+
+      try {
+        this.categoryStore.updateCategory({ ...this.category, id: category.id, name: category.name, order: category.order })
+      } catch (e) {
+        console.error(e)
+        showError(t('grocerylist', 'Could not update category order'))
+      }
+    },
+    sortDown() {
+      console.error("sort down ")
+    },
 		/**
 		 * Handle loading categories, sets the loading state and triggers store updates
 		 */