Merge pull request #264 from tobiasKaminsky/toggleCategories

[WIP] toggle categories

Author: tobiasKaminsky

src/components/ListCategoryNew.vue

@@ -9,8 +9,8 @@
 			@trailing-button-click="newCategoryName = ''" />
 
 		<NcButton type="tertiary"
-              :aria-label="t('grocerylist', 'Add category {category}', { category: newCategoryName })"
-              @click="addCategory">
+			:aria-label="t('grocerylist', 'Add category {category}', { category: newCategoryName })"
+			@click="addCategory">
 			<template #icon>
 				<IconPlus :size="20" />
 			</template>

src/components/ListItem.vue

@@ -0,0 +1,83 @@
+<template>
+	<li :class="{'snoozed': isSnoozed}">
+		<NcButton aria-label="Snooze"
+			type="tertiary"
+			style="display:inline-block;"
+			@click="hideItem(item)">
+			<template #icon>
+				<AlarmSnooze :size="20" />
+			</template>
+		</NcButton>
+		<NcCheckboxRadioSwitch :checked="item.checked === true"
+			style="display:inline-block;"
+			@update:checked="checkItem(item)" />
+		<span @click="$emit('edit')">
+			<span v-if="item.quantity !== ''">
+				{{ item.quantity }}
+			</span>
+			{{ item.name }}
+		</span>
+	</li>
+</template>
+<script>
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import { showError } from '@nextcloud/dialogs'
+import AlarmSnooze from 'vue-material-design-icons/AlarmSnooze.vue'
+
+import {
+	NcCheckboxRadioSwitch,
+	NcButton,
+} from '@nextcloud/vue'
+export default {
+	name: 'ListItem',
+	components: {
+		AlarmSnooze,
+		NcCheckboxRadioSwitch,
+		NcButton,
+	},
+	props: {
+		item: {
+			type: Object,
+			required: true,
+		},
+	},
+	computed: {
+		isSnoozed() {
+			return this.item?.hidden > (Math.floor(Date.now() / 1000) - (15 * 60))
+		},
+	},
+	methods: {
+		async checkItem(item) {
+			if (item.checked === true) {
+				item.checked = false
+			} else {
+				item.checked = true
+			}
+			try {
+				await axios.post(generateUrl('/apps/grocerylist/api/item/check'),
+					{ id: item.id, checked: item.checked },
+				)
+			} catch (e) {
+				console.error(e)
+				showError(t('grocerylist', 'Could not check item'))
+			}
+		},
+		async hideItem(item) {
+			try {
+				await axios.post(generateUrl('/apps/grocerylist/api/item/hide'),
+					{ id: item.id },
+				)
+
+				this.$emit('update')
+			} catch (e) {
+				console.error(e)
+				showError(t('grocerylist', 'Could not add item'))
+			}
+		},
+	},
+}
+</script>
+<style scoped lang="scss">
+
+</style>

src/components/NavigationGroceryListItem.vue

@@ -16,19 +16,19 @@
 				{{ t('grocerylist', 'Delete list') }}
 			</NcActionButton>
 		</template>
-    <template #counter v-if="groceryList.uncheckedCount > 0">
-      <NcCounterBubble>
-        {{ groceryList.uncheckedCount }}
-      </NcCounterBubble>
-    </template>
+		<template v-if="groceryList.uncheckedCount > 0" #counter>
+			<NcCounterBubble>
+				{{ groceryList.uncheckedCount }}
+			</NcCounterBubble>
+		</template>
 	</NcAppNavigationItem>
 </template>
 <script>
 import { showError, showInfo, showSuccess } from '@nextcloud/dialogs'
 import {
 	NcActionButton,
 	NcAppNavigationItem,
-  NcCounterBubble,
+	NcCounterBubble,
 } from '@nextcloud/vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
@@ -38,7 +38,7 @@ export default {
 	components: {
 		NcActionButton,
 		NcAppNavigationItem,
-    NcCounterBubble
+		NcCounterBubble,
 	},
 	props: {
 		groceryList: {
@@ -63,14 +63,14 @@ export default {
 		},
 		title() {
 			return this.groceryList.title
-    },
-    titleWithCount() {
-      if (this.groceryList.uncheckedCount > 0) {
-        return this.groceryList.title + ' (' + this.groceryList.uncheckedCount + ')'
-      } else {
-        return this.groceryList.title
-      }
-    },
+		},
+		titleWithCount() {
+			if (this.groceryList.uncheckedCount > 0) {
+				return this.groceryList.title + ' (' + this.groceryList.uncheckedCount + ')'
+			} else {
+				return this.groceryList.title
+			}
+		},
 	},
 	methods: {
 		async onRename(newTitle) {