From 89e428b4d285f3465a40773fbda564c432fb371e Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Date: Mon, 26 Sep 2022 16:09:24 +0000
Subject: [PATCH] feat: ListLabels script setup (#2416)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2416
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
---
 src/models/label.ts             |   2 +-
 src/views/labels/ListLabels.vue | 146 +++++++++++++++-----------------
 2 files changed, 68 insertions(+), 80 deletions(-)

diff --git a/src/models/label.ts b/src/models/label.ts
index d151260b..798c38dd 100644
--- a/src/models/label.ts
+++ b/src/models/label.ts
@@ -22,7 +22,7 @@ export default class LabelModel extends AbstractModel<ILabel> implements ILabel
 	created: Date = null
 	updated: Date = null
 
-	constructor(data: Partial<ILabel>) {
+	constructor(data: Partial<ILabel> = {}) {
 		super()
 		this.assignData(data)
 
diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue
index d578d078..a588edae 100644
--- a/src/views/labels/ListLabels.vue
+++ b/src/views/labels/ListLabels.vue
@@ -109,90 +109,78 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
-import {mapState as mapVuexState} from 'vuex'
-import {mapState} from 'pinia'
+<script setup lang="ts">
+import {computed, nextTick, ref} from 'vue'
+import {useI18n} from 'vue-i18n'
 
-import LabelModel from '../../models/label'
+import BaseButton from '@/components/base/BaseButton.vue'
+import Editor from '@/components/input/AsyncEditor'
+import ColorPicker from '@/components/input/colorPicker.vue'
+
+import LabelModel from '@/models/label'
 import type {ILabel} from '@/modelTypes/ILabel'
 import {useLabelStore} from '@/stores/labels'
 
-import BaseButton from '@/components/base/BaseButton.vue'
-import AsyncEditor from '@/components/input/AsyncEditor'
-import ColorPicker from '@/components/input/colorPicker.vue'
-import { setTitle } from '@/helpers/setTitle'
+import { useTitle } from '@/composables/useTitle'
+import { useStore } from '@/store'
 
-export default defineComponent({
-	name: 'ListLabels',
-	components: {
-		BaseButton,
-		ColorPicker,
-		editor: AsyncEditor,
-	},
-	data() {
-		return {
-			labelEditLabel: new LabelModel(),
-			isLabelEdit: false,
-			editorActive: false,
-			showDeleteModal: false,
-			labelToDelete: null,
-		}
-	},
-	created() {
+const {t} = useI18n({useScope: 'global'})
+
+const labelEditLabel = ref<ILabel>(new LabelModel())
+const isLabelEdit = ref(false)
+const editorActive = ref(false)
+const showDeleteModal = ref(false)
+const labelToDelete = ref<ILabel>(null)
+
+useTitle(() => t('label.title'))
+
+const store = useStore()
+const userInfo = computed(() => store.state.auth.info)
+
+const labelStore = useLabelStore()
+labelStore.loadAllLabels()
+
+// Alphabetically sort the labels
+const labels = computed(() => Object.values(labelStore.labels).sort((f, s) => f.title > s.title ? 1 : -1))
+const loading = computed(() =>labelStore.isLoading)
+
+function deleteLabel(label: ILabel) {
+	showDeleteModal.value = false
+	isLabelEdit.value = false
+	const labelStore = useLabelStore()
+	return labelStore.deleteLabel(label)
+}
+
+function editLabelSubmit() {
 		const labelStore = useLabelStore()
-		labelStore.loadAllLabels()
-	},
-	mounted() {
-		setTitle(this.$t('label.title'))
-	},
-	computed: {
-		...mapVuexState({
-			userInfo: state => state.auth.info,
-		}),
-		...mapState(useLabelStore, {
-			// Alphabetically sort the labels
-			labels: state => Object.values(state.labels).sort((f, s) => f.title > s.title ? 1 : -1),
-			loading: state => state.isLoading,
-		}),
-	},
-	methods: {
-		deleteLabel(label: ILabel) {
-			this.showDeleteModal = false
-			this.isLabelEdit = false
-			const labelStore = useLabelStore()
-			return labelStore.deleteLabel(label)
-		},
-		editLabelSubmit() {
-			const labelStore = useLabelStore()
-			return labelStore.updateLabel(this.labelEditLabel)
-		},
-		editLabel(label: ILabel) {
-			if (label.createdBy.id !== this.userInfo.id) {
-				return
-			}
-			// Duplicating the label to make sure it does not look like changes take effect immediatly as the label 
-			// object passed to this function here still has a reference to the store.
-			this.labelEditLabel = new LabelModel({
-				...label,
-				// The model does not support passing dates into it directly so we need to convert them first				
-				created: +label.created,
-				updated: +label.updated,
-			})
-			this.isLabelEdit = true
+		return labelStore.updateLabel(labelEditLabel.value)
+	}
 
-			// This makes the editor trigger its mounted function again which makes it forget every input
-			// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
-			// which made it impossible to detect change from the outside. Therefore the component would
-			// not update if new content from the outside was made available.
-			// See https://github.com/NikulinIlya/vue-easymde/issues/3
-			this.editorActive = false
-			this.$nextTick(() => this.editorActive = true)
-		},
-		showDeleteDialoge(label: ILabel) {
-			this.labelToDelete = label
-			this.showDeleteModal = true
-		},
-	},
-})
+function editLabel(label: ILabel) {
+	if (label.createdBy.id !== userInfo.value.id) {
+		return
+	}
+	// Duplicating the label to make sure it does not look like changes take effect immediatly as the label 
+	// object passed to this function here still has a reference to the store.
+	labelEditLabel.value = new LabelModel({
+		...label,
+		// The model does not support passing dates into it directly so we need to convert them first				
+		created: +label.created,
+		updated: +label.updated,
+	})
+	isLabelEdit.value = true
+
+	// This makes the editor trigger its mounted function again which makes it forget every input
+	// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
+	// which made it impossible to detect change from the outside. Therefore the component would
+	// not update if new content from the outside was made available.
+	// See https://github.com/NikulinIlya/vue-easymde/issues/3
+	editorActive.value = false
+	nextTick(() => editorActive.value = true)
+}
+
+function showDeleteDialoge(label: ILabel) {
+	labelToDelete.value = label
+	showDeleteModal.value = true
+}
 </script>