UI: Rewrite web UI, add URL routing and components

See #156

server/ui-src/components/NavSearch.vue

@@ -0,0 +1,115 @@
+<script>
+import NavSelected from '../components/NavSelected.vue'
+import AjaxLoader from './AjaxLoader.vue'
+import CommonMixins from '../mixins/CommonMixins'
+import { mailbox } from '../stores/mailbox'
+import { pagination } from '../stores/pagination'
+
+export default {
+	mixins: [CommonMixins],
+
+	components: {
+		NavSelected,
+		AjaxLoader,
+	},
+
+	props: {
+		modals: {
+			type: Boolean,
+			default: false,
+		}
+	},
+
+	emits: ['loadMessages'],
+
+	data() {
+		return {
+			mailbox,
+			pagination,
+		}
+	},
+
+	methods: {
+		loadMessages: function () {
+			this.hideNav() // hide mobile menu
+			this.$emit('loadMessages')
+		},
+
+		deleteAllMessages: function () {
+			let s = this.getSearch()
+			if (!s) {
+				return
+			}
+
+			let self = this
+
+			let uri = this.resolve(`/api/v1/search`) + '?query=' + encodeURIComponent(s)
+			this.delete(uri, false, function (response) {
+				self.$router.push('/')
+			})
+		}
+	}
+}
+</script>
+
+<template>
+	<template v-if="!modals">
+		<div class="list-group my-2">
+			<RouterLink to="/" class="list-group-item list-group-item-action">
+				<i class="bi bi-arrow-return-left me-1"></i>
+				<span class="ms-1">Inbox</span>
+				<span class="badge rounded-pill ms-1 float-end text-bg-secondary" title="Unread messages"
+					v-if="mailbox.unread">
+					{{ formatNumber(mailbox.unread) }}
+				</span>
+			</RouterLink>
+			<template v-if="!mailbox.selected.length">
+				<button class="list-group-item list-group-item-action" data-bs-toggle="modal"
+					data-bs-target="#DeleteAllModal" :disabled="!mailbox.count">
+					<i class="bi bi-trash-fill me-1 text-danger"></i>
+					Delete all
+				</button>
+			</template>
+
+			<!-- <button class="list-group-item list-group-item-action" data-bs-toggle="modal" data-bs-target="#MarkAllReadModal"
+				:disabled="!mailbox.unread">
+				<i class="bi bi-eye-fill me-1"></i>
+				Mark all read
+			</button>
+	
+			<button class="list-group-item list-group-item-action" data-bs-toggle="modal" data-bs-target="#DeleteAllModal"
+				:disabled="!mailbox.total">
+				<i class="bi bi-trash-fill me-1 text-danger"></i>
+				Delete all
+			</button> -->
+
+			<NavSelected @loadMessages="loadMessages" />
+		</div>
+	</template>
+
+	<template v-else>
+		<!-- Modals -->
+		<div class="modal fade" id="DeleteAllModal" tabindex="-1" aria-labelledby="DeleteAllModalLabel" aria-hidden="true">
+			<div class="modal-dialog">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 class="modal-title" id="DeleteAllModalLabel">Delete all messages matching search?</h5>
+						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+					</div>
+					<div class="modal-body">
+						This will permanently delete {{ formatNumber(mailbox.count) }}
+						message<span v-if="mailbox.count > 1">s</span> matching
+						<code>{{ getSearch() }}</code>
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+						<button type="button" class="btn btn-danger" data-bs-dismiss="modal"
+							v-on:click="deleteAllMessages">Delete</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</template>
+
+	<AjaxLoader :loading="loading" />
+</template>