Move list edit/namespace to separate pages and in a menu (#397)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/397
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

src/components/misc/card.vue

@@ -10,7 +10,7 @@
 				</span>
 			</a>
 		</header>
-		<div class="card-content" :class="{'p-0': !padding}">
+		<div class="card-content loader-container" :class="{'p-0': !padding, 'is-loading': loading}">
 			<div :class="{'content': hasContent}">
 				<slot></slot>
 			</div>
@@ -46,6 +46,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		loading: {
+			type: Boolean,
+			default: false,
+		},
 	},
 }
 </script>

src/components/misc/create-edit.vue

@@ -0,0 +1,85 @@
+<template>
+	<modal @close="$router.back()" :overflow="true" :wide="wide">
+		<card
+			:title="title"
+			:shadow="false"
+			:padding="false"
+			class="has-text-left has-overflow"
+			:has-close="true"
+			close-icon="times"
+			@close="$router.back()"
+			:loading="loading"
+		>
+			<div class="p-4">
+				<slot></slot>
+			</div>
+			<footer class="modal-card-foot is-flex is-justify-content-flex-end">
+				<x-button
+					:shadow="false"
+					type="tertary"
+					@click.prevent.stop="$emit('tertary')"
+					v-if="tertary !== ''"
+				>
+					{{ tertary }}
+				</x-button>
+				<x-button
+					type="secondary"
+					@click.prevent.stop="$router.back()"
+				>
+					Cancel
+				</x-button>
+				<x-button
+					type="primary"
+					@click.prevent.stop="primary"
+					:icon="primaryIcon"
+					:disabled="primaryDisabled"
+					v-if="primaryLabel !== ''"
+				>
+					{{ primaryLabel }}
+				</x-button>
+			</footer>
+		</card>
+	</modal>
+</template>
+
+<script>
+export default {
+	name: 'create-edit',
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		primaryLabel: {
+			type: String,
+			default: 'Create',
+		},
+		primaryIcon: {
+			type: String,
+			default: 'plus',
+		},
+		primaryDisabled: {
+			type: Boolean,
+			default: false,
+		},
+		tertary: {
+			type: String,
+			default: '',
+		},
+		wide: {
+			type: Boolean,
+			default: false,
+		},
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	methods: {
+		primary() {
+			this.$emit('create')
+			this.$emit('primary')
+		},
+	},
+}
+</script>

src/components/misc/create.vue

@@ -1,55 +0,0 @@
-<template>
-	<modal @close="$router.back()" :overflow="true">
-		<card
-			:title="title"
-			:shadow="false"
-			:padding="false"
-			class="has-text-left has-overflow"
-			:has-close="true"
-			close-icon="times"
-			@close="$router.back()"
-		>
-			<div class="p-4">
-				<slot></slot>
-			</div>
-			<footer class="modal-card-foot is-flex is-justify-content-flex-end">
-				<x-button
-					:shadow="false"
-					type="secondary"
-					@click.prevent.stop="$router.back()"
-				>
-					Cancel
-				</x-button>
-				<x-button
-					:shadow="false"
-					type="primary"
-					@click.prevent.stop="$emit('create')"
-					icon="plus"
-					:disabled="createDisabled"
-				>
-					{{ createLabel }}
-				</x-button>
-			</footer>
-		</card>
-	</modal>
-</template>
-
-<script>
-export default {
-	name: 'create',
-	props: {
-		title: {
-			type: String,
-			default: '',
-		},
-		createLabel: {
-			type: String,
-			default: 'Create',
-		},
-		createDisabled: {
-			type: Boolean,
-			default: false,
-		},
-	},
-}
-</script>

src/components/misc/dropdown-item.vue

@@ -0,0 +1,28 @@
+<template>
+	<router-link
+		:to="to"
+		class="dropdown-item">
+		<span class="icon" v-if="icon !== ''">
+			<icon :icon="icon"/>
+		</span>
+		<span>
+			<slot></slot>
+		</span>
+	</router-link>
+</template>
+
+<script>
+export default {
+	name: 'dropdown-item',
+	props: {
+		to: {
+			required: true,
+		},
+		icon: {
+			type: String,
+			required: false,
+			default: '',
+		}
+	},
+}
+</script>

src/components/misc/dropdown.vue

@@ -0,0 +1,50 @@
+<template>
+	<div class="dropdown is-right is-active" ref="dropdown">
+		<div class="dropdown-trigger" @click="open = !open">
+			<slot name="trigger">
+				<icon :icon="triggerIcon" class="icon"/>
+			</slot>
+		</div>
+		<transition name="fade">
+			<div class="dropdown-menu" v-if="open">
+				<div class="dropdown-content">
+					<slot></slot>
+				</div>
+			</div>
+		</transition>
+	</div>
+</template>
+
+<script>
+import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
+
+export default {
+	name: 'dropdown',
+	data() {
+		return {
+			open: false,
+		}
+	},
+	mounted() {
+		document.addEventListener('click', this.hide)
+	},
+	beforeDestroy() {
+		document.removeEventListener('click', this.hide)
+	},
+	props: {
+		triggerIcon: {
+			type: String,
+			default: 'ellipsis-h',
+		},
+	},
+	methods: {
+		hide(e) {
+			if (this.open) {
+				closeWhenClickedOutside(e, this.$refs.dropdown, () => {
+					this.open = false
+				})
+			}
+		},
+	},
+}
+</script>

src/components/misc/nothing.vue

@@ -0,0 +1,11 @@
+<template>
+	<p class="has-text-centered has-text-grey is-italic p-4 mb-4">
+		<slot></slot>
+	</p>
+</template>
+
+<script>
+export default {
+	name: 'nothing'
+}
+</script>