Add initial placeholder page for email domains list

dashboard/src/Index.vue

@@ -22,6 +22,7 @@ import BackupListView from './views/BackupListView.vue';
 import CloudronAccountView from './views/CloudronAccountView.vue';
 import DomainsView from './views/DomainsView.vue';
 import EmailDomainView from './views/EmailDomainView.vue';
+import EmailDomainsView from './views/EmailDomainsView.vue';
 import EmailMailboxesView from './views/EmailMailboxesView.vue';
 import EmailMailinglistsView from './views/EmailMailinglistsView.vue';
 import EmailSettingsView from './views/EmailSettingsView.vue';
@@ -53,6 +54,7 @@ const VIEWS = {
   CLOUDRON_ACCOUNT: 'cloudron-account',
   DOMAINS: 'domains',
   EMAIL_DOMAIN: 'email-domain',
+  EMAIL_DOMAINS: 'email-domains',
   EMAIL_MAILBOXES: 'email-mailboxes',
   EMAIL_MAILINGLISTS: 'email-mailinglists',
   EMAIL_SETTINGS: 'email-settings',
@@ -158,8 +160,10 @@ function onHashChange() {
     view.value = VIEWS.CLOUDRON_ACCOUNT;
   } else if (v === VIEWS.DOMAINS && profile.value.isAtLeastAdmin) {
     view.value = VIEWS.DOMAINS;
-  } else if (v === VIEWS.EMAIL_DOMAIN && profile.value.isAtLeastMailManager) {
+  } else if (v.indexOf(VIEWS.EMAIL_DOMAIN+'/') === 0 && profile.value.isAtLeastMailManager) {
     view.value = VIEWS.EMAIL_DOMAIN;
+  } else if (v === VIEWS.EMAIL_DOMAINS && profile.value.isAtLeastMailManager) {
+    view.value = VIEWS.EMAIL_DOMAINS;
   } else if (v === VIEWS.EMAIL_MAILBOXES && profile.value.isAtLeastMailManager) {
     view.value = VIEWS.EMAIL_MAILBOXES;
   } else if (v === VIEWS.EMAIL_MAILINGLISTS && profile.value.isAtLeastMailManager) {
@@ -297,7 +301,7 @@ onMounted(async () => {
           <div class="sidebar-item" v-show="profile.isAtLeastMailManager" @click="onToggleGroup('email')"><i class="fa fa-envelope fa-fw"></i> {{ $t('emails.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroup === 'email' }" style="margin-left: 6px;"></i></div>
           <Transition name="sidebar-item-group-animation">
             <div class="sidebar-item-group" v-if="activeSidebarGroup === 'email'">
-              <a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-domain' }" href="#/email-domain" @click="onSidebarClose()"><i class="fa fa-fw fa-globe"></i> Domains</a>
+              <a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-domains' }" href="#/email-domains" @click="onSidebarClose()"><i class="fa fa-fw fa-globe"></i> Domains</a>
               <a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-mailboxes' }" href="#/email-mailboxes" @click="onSidebarClose()"><i class="fa fa-fw fa-inbox"></i> {{ $t('email.incoming.mailboxes.title') }}</a>
               <a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-mailinglists' }" href="#/email-mailinglists" @click="onSidebarClose()"><i class="fa fa-fw-solid fa-envelopes-bulk"></i> {{ $t('email.incoming.mailinglists.title') }}</a>
               <a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-eventlog' }" href="#/email-eventlog" @click="onSidebarClose()"><i class="fa fa-fw fa-list-alt"></i> {{ $t('emails.eventlog.title') }}</a>
@@ -359,6 +363,7 @@ onMounted(async () => {
           <BackupAppArchiveView v-else-if="view === VIEWS.BACKUP_APP_ARCHIVE" />
           <CloudronAccountView v-else-if="view === VIEWS.CLOUDRON_ACCOUNT" />
           <DomainsView v-else-if="view === VIEWS.DOMAINS" />
+          <EmailDomainsView v-else-if="view === VIEWS.EMAIL_DOMAINS" />
           <EmailDomainView v-else-if="view === VIEWS.EMAIL_DOMAIN" />
           <EmailMailboxesView v-else-if="view === VIEWS.EMAIL_MAILBOXES" />
           <EmailMailinglistsView v-else-if="view === VIEWS.EMAIL_MAILINGLISTS" />

dashboard/src/views/EmailDomainView.vue

@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef, inject } from 'vue';
-import { Button, Checkbox, InputDialog, Dialog, FormGroup, Switch, SingleSelect } from '@cloudron/pankow';
+import { Button, Checkbox, InputDialog, Dialog, FormGroup, Switch } from '@cloudron/pankow';
 import { prettyDecimalSize, sleep } from '@cloudron/pankow/utils';
 import Section from '../components/Section.vue';
 import SettingsItem from '../components/SettingsItem.vue';
@@ -26,7 +26,6 @@ const features = inject('features');
 const inputDialog = useTemplateRef('inputDialog');
 const enableIncomingDialog = useTemplateRef('enableIncomingDialog');
 const connectionDialog = useTemplateRef('connectionDialog');
-const domains = ref([]);
 const domain = ref('');
 const domainProvider = ref('');
 const mailConfig = ref({});
@@ -208,6 +207,14 @@ async function onDomainChanged() {
 }
 
 onMounted(async () => {
+  const tmp = window.location.hash.slice('#/email-domain/'.length);
+  if (!tmp) return;
+
+  const parts = tmp.split('/');
+  if (parts.length !== 1) return;
+
+  domain.value = parts[0];
+
   let [error, result] = await dashboardModel.config();
   if (error) return console.error(error);
 
@@ -221,9 +228,6 @@ onMounted(async () => {
   [error, result] = await domainsModel.list();
   if (error) return console.error(error);
 
-  domains.value = result;
-  domain.value = domains.value[0].domain;
-
   await onDomainChanged();
 });
 
@@ -298,7 +302,6 @@ onMounted(async () => {
 
     <Section :title="$t('email.config.title', { domain: domain })">
       <template #header-buttons>
-        <SingleSelect v-if="domains.length" v-model="domain" :options="domains" option-key="domain" option-label="domain" @select="onDomainChanged"/>
         <Button secondary tool icon="fa-solid fa-book" v-tooltip="$t('app.docsActionTooltip')" :menu="infoMenu" />
       </template>
 

dashboard/src/views/EmailDomainsView.vue

@@ -0,0 +1,30 @@
+<script setup>
+
+import { ref, onMounted } from 'vue';
+import Section from '../components/Section.vue';
+import DomainsModel from '../models/DomainsModel.js';
+
+const domainsModel = DomainsModel.create();
+
+const domains = ref([]);
+
+onMounted(async () => {
+  const [error, result] = await domainsModel.list();
+  if (error) return console.error(error);
+
+  domains.value = result;
+});
+
+</script>
+
+<template>
+  <div class="content">
+    <Section :title="$t('email.config.title')">
+      <div>
+        <div v-for="domain in domains" :key="domain.domain">
+          <a :href="`#/email-domain/${domain.domain}`">{{ domain.domain }}</a>
+        </div>
+      </div>
+    </Section>
+  </div>
+</template>