Update UI

docjyJ · Oct 15, 2024 · 122ac07 · 122ac07
1 parent 3e89eb6
commit 122ac07
Show file tree

Hide file tree

Showing 9 changed files with 229 additions and 234 deletions.
diff --git a/src/components/HealthAvatarServer.vue b/src/components/HealthAvatarServer.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import mdiAccessPoint from '@mdi/svg/svg/access-point.svg?raw'
+import mdiFingerprintOff from '@mdi/svg/svg/fingerprint-off.svg?raw'
+import mdiServerNetworkOff from '@mdi/svg/svg/server-network-off.svg?raw'
+import mdiNetworkStrengthOffOutline from '@mdi/svg/svg/network-strength-off-outline.svg?raw'
+import mdiTextBoxOutline from '@mdi/svg/svg/text-box-outline.svg?raw'
+import type { MailServer } from '~/type'
+
+defineProps<{
+  server: MailServer
+}>()
+
+</script>
+
+<template>
+	<NcAvatar
+		v-if="server.health === 'success'"
+		style="background-color: rgba(var(--color-success-rgb), 0.1)">
+		<template #icon>
+			<NcIconSvgWrapper
+				:svg="mdiAccessPoint"
+				name="AccessPoint"
+				style="color: var(--color-success); min-width: var(--size); min-height: var(--size)" />
+		</template>
+	</NcAvatar>
+	<NcAvatar
+		v-else-if="server.health === 'unauthorized'"
+		style="background-color: rgba(var(--color-error-rgb), 0.1)">
+		<template #icon>
+			<NcIconSvgWrapper
+				:svg="mdiFingerprintOff"
+				name="FingerprintOff"
+				style="color: var(--color-error); min-width: var(--size); min-height: var(--size)" />
+		</template>
+	</NcAvatar>
+	<NcAvatar
+		v-else-if="server.health === 'bad_network'"
+		style="background-color: rgba(var(--color-error-rgb), 0.1)">
+		<template #icon>
+			<NcIconSvgWrapper
+				:svg="mdiServerNetworkOff"
+				name="ServerNetworkOff"
+				style="color: var(--color-error); min-width: var(--size); min-height: var(--size)" />
+		</template>
+	</NcAvatar>
+	<NcAvatar
+		v-else-if="server.health === 'bad_server'"
+		style="background-color: rgba(var(--color-error-rgb), 0.1)">
+		<template #icon>
+			<NcIconSvgWrapper
+				:svg="mdiNetworkStrengthOffOutline"
+				name="NetworkStrengthOffOutline"
+				style="color: var(--color-error); min-width: var(--size); min-height: var(--size)" />
+		</template>
+	</NcAvatar>
+	<NcAvatar
+		v-else
+		style="background-color: rgba(var(--color-warning-rgb), 0.1)">
+		<template #icon>
+			<NcIconSvgWrapper
+				:svg="mdiTextBoxOutline"
+				name="TextBoxOutline"
+				style="color: var(--color-warning); min-width: var(--size); min-height: var(--size)" />
+		</template>
+	</NcAvatar>
+</template>
diff --git a/src/components/ListItemServer.vue b/src/components/ListItemServer.vue
diff --git a/src/components/PageSetting.vue b/src/components/PageSetting.vue
@@ -1,24 +1,47 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
-import ServerSelection from '~/components/ViewSelection.vue'
-import ServerView from '~/components/ViewServer.vue'
-
-import { useServerList } from '~/composable'
+import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
+import NcButton, { ButtonType } from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
+import HealthAvatarServer from '~/components/HealthAvatarServer.vue'
+import PopUpEntry from '~/components/PopUpEntry.vue'
+import { useNextmailTranslate, useServerList } from '~/composable'
 
 const { entries, loading, active, to, edit, reload, remove, create } = useServerList()
 
 onMounted(reload)
 
+const { t } = useNextmailTranslate()
+
 </script>
 
 <template>
 	<div id="nextmail">
-		<ServerSelection :servers="entries" :server="active" @update:server="e => to(e? e.id : null)" />
-		<ServerView
+		<NcSettingsSection :name="t('List of servers')"
+			:description="t('Select a server to view or edit its configuration.')"
+			doc-url="#todo">
+			<NcButton :type="ButtonType.Primary" @click="() => create()">
+				{{ t('Create a new config!') }}
+			</NcButton>
+			<ul>
+				<NcListItem
+					v-for="server in entries"
+					:key="server.id"
+					:name="/^[a-z0-9-]+:\/*([a-z0-9-.]+).*$/.exec(server.endpoint)?.at(1) || server.endpoint || '?????'"
+					:subname="server.endpoint"
+					@click="to(server.id)">
+					<template #icon>
+						<HealthAvatarServer :server="server" />
+					</template>
+				</NcListItem>
+			</ul>
+		</NcSettingsSection>
+		<PopUpEntry
 			:server="active"
 			:loading="loading"
 			@edit="edit"
 			@delete="remove"
-			@create="create" />
+			@create="create"
+			@close="() => to(null)" />
 	</div>
 </template>
diff --git a/src/components/PopUpEntry.vue b/src/components/PopUpEntry.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { defineEmits, defineProps } from 'vue'
+import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDialog.js'
+import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import mdiServer from '@mdi/svg/svg/server.svg?raw'
+import mdiAccount from '@mdi/svg/svg/account.svg?raw'
+import mdiCloseOctagon from '@mdi/svg/svg/close-octagon.svg?raw'
+import SectionConfig from '~/components/SectionServer.vue'
+import SectionStatus from '~/components/SectionStatus.vue'
+import type { MailServer, MailServerForm } from '~/type'
+import { useNextmailTranslate } from '~/composable'
+import SectionDanger from '~/components/SectionDanger.vue'
+import SectionUser from '~/components/SectionUser.vue'
+
+defineProps<{
+  server: MailServer | null,
+  loading: boolean
+}>()
+
+defineEmits<{
+  (e: 'edit', server: MailServerForm): void,
+  (e: 'delete', id: string): void
+  (e: 'create'): void
+  (e: 'close'): void
+}>()
+
+const { t } = useNextmailTranslate()
+
+</script>
+
+<template>
+	<NcAppSettingsDialog :open="server !== null"
+		:show-navigation="true"
+		:name="t('Server Management')"
+		@update:open="e => e ? undefined : $emit('close')">
+		<NcAppSettingsSection id="server" :name="t('Stalwart server configuration ')">
+			<template #icon>
+				<NcIconSvgWrapper :svg="mdiServer" :size="20" />
+			</template>
+			<SectionStatus v-if="server !== null" :server="server" />
+			<SectionConfig v-if="server !== null"
+				:server="server"
+				:loading="loading"
+				@submit="e => $emit('edit', e)" />
+		</NcAppSettingsSection>
+		<NcAppSettingsSection :name="t('Users')">
+			<template #icon>
+				<NcIconSvgWrapper id="account" :svg="mdiAccount" :size="20" />
+			</template>
+			<SectionUser v-if="server !== null" :server="server" />
+		</NcAppSettingsSection>
+		<NcAppSettingsSection id="danger" :name="t('Danger Zone')">
+			<template #icon>
+				<NcIconSvgWrapper :svg="mdiCloseOctagon" :size="20" />
+			</template>
+			<SectionDanger v-if="server !== null"
+				:server="server"
+				:loading="loading"
+				@delete="e => $emit('delete', e)" />
+		</NcAppSettingsSection>
+	</NcAppSettingsDialog>
+</template>
diff --git a/src/components/SectionDanger.vue b/src/components/SectionDanger.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { defineProps, defineEmits } from 'vue'
 import NcButton, { ButtonType } from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 import mdiDelete from '@mdi/svg/svg/delete.svg?raw'
 import { useNextmailTranslate } from '~/composable'
@@ -21,14 +20,12 @@ const { t } = useNextmailTranslate()
 </script>
 
 <template>
-	<NcSettingsSection
-		:name="t('Danger Zone')"
-		:description="t('This is the danger zone. Be careful with the actions you take here.')">
+	<div style="height: 100vh">
 		<NcButton :disabled="loading" :type="ButtonType.Error" @click="() => $emit('delete', server.id)">
 			<template #icon>
 				<NcIconSvgWrapper :svg="mdiDelete" name="Delete" />
 			</template>
 			{{ t('Delete Server') }}
 		</NcButton>
-	</NcSettingsSection>
+	</div>
 </template>
diff --git a/src/components/SectionServer.vue b/src/components/SectionServer.vue
@@ -40,38 +40,34 @@ watch(() => props.server, (config) => {
 </script>
 
 <template>
-	<NcSettingsSection
-		:name="t('Stalwart server configuration')"
-		:description="t('Configure the Stalwart server connection. The Salwart URL is http or https. Don\'t forget to include the port number if is not a standard port. Add api at the end of the URL.')">
-		<form @submit.prevent="() => $emit('submit', form)">
-			<NcTextField
-				v-model="form.endpoint"
-				:label="t('Stalwart API endpoint URL')"
-				placeholder="https://mail.example.com:443/api"
-				:disabled="props.loading" />
-			<NcTextField
-				v-model="form.username"
-				:label="t('Username')"
-				placeholder="admin"
-				:disabled="props.loading" />
-			<NcPasswordField
-				v-model="form.password"
-				:label="t('Password')"
-				placeholder="****************"
-				:disabled="props.loading" />
+	<form @submit.prevent="() => $emit('submit', form)">
+		<NcTextField
+			v-model="form.endpoint"
+			:label="t('Stalwart API endpoint URL')"
+			placeholder="https://mail.example.com:443/api"
+			:disabled="props.loading" />
+		<NcTextField
+			v-model="form.username"
+			:label="t('Username')"
+			placeholder="admin"
+			:disabled="props.loading" />
+		<NcPasswordField
+			v-model="form.password"
+			:label="t('Password')"
+			placeholder="****************"
+			:disabled="props.loading" />
 
-			<NcButton
-				:native-type="ButtonNativeType.Submit"
-				:disabled="props.loading"
-				:type="ButtonType.Primary">
-				<template #icon>
-					<NcLoadingIcon v-if="props.loading" />
-					<NcIconSvgWrapper v-else :svg="mdiContentSave" name="ContentSave" />
-				</template>
-				{{ t('Save') }}
-			</NcButton>
-		</form>
-	</NcSettingsSection>
+		<NcButton
+			:native-type="ButtonNativeType.Submit"
+			:disabled="props.loading"
+			:type="ButtonType.Primary">
+			<template #icon>
+				<NcLoadingIcon v-if="props.loading" />
+				<NcIconSvgWrapper v-else :svg="mdiContentSave" name="ContentSave" />
+			</template>
+			{{ t('Save') }}
+		</NcButton>
+	</form>
 </template>
 
 <style scoped>