update

ts_web/elements/ops-view-emails.ts

@@ -50,9 +50,13 @@ export class OpsViewEmails extends DeesElement {
   @state()
   private searchTerm = '';
 
+  @state()
+  private emailDomains: string[] = [];
+
   constructor() {
     super();
     this.loadEmails();
+    this.loadEmailDomains();
   }
 
   public static styles = [
@@ -436,6 +440,11 @@ export class OpsViewEmails extends DeesElement {
   private async openComposeModal(replyTo?: IEmail, replyAll = false, forward = false) {
     const { DeesModal } = await import('@design.estate/dees-catalog');
     
+    // Ensure domains are loaded before opening modal
+    if (this.emailDomains.length === 0) {
+      await this.loadEmailDomains();
+    }
+    
     await DeesModal.createAndShow({
       heading: forward ? 'Forward Email' : replyTo ? 'Reply to Email' : 'New Email',
       width: 'large',
@@ -447,18 +456,27 @@ export class OpsViewEmails extends DeesElement {
             const modals = document.querySelectorAll('dees-modal');
             modals.forEach(m => (m as any).destroy?.());
           }}>
-            <dees-input-dropdown
-              key="from"
-              label="From"
-              .options=${[
-                { key: 'admin@dcrouter.local', value: 'Admin <admin@dcrouter.local>' },
-                { key: 'noreply@dcrouter.local', value: 'No Reply <noreply@dcrouter.local>' },
-                { key: 'support@dcrouter.local', value: 'Support <support@dcrouter.local>' },
-                { key: 'alerts@dcrouter.local', value: 'Alerts <alerts@dcrouter.local>' }
-              ]}
-              .selectedKey=${'admin@dcrouter.local'}
-              required
-            ></dees-input-dropdown>
+            <div style="display: flex; gap: 8px; align-items: flex-end;">
+              <dees-input-text
+                key="fromUsername"
+                label="From"
+                placeholder="username"
+                .value=${'admin'}
+                required
+                style="flex: 1;"
+              ></dees-input-text>
+              <span style="padding-bottom: 12px; font-size: 18px; color: #666;">@</span>
+              <dees-input-dropdown
+                key="fromDomain"
+                label=" "
+                .options=${this.emailDomains.length > 0 
+                  ? this.emailDomains.map(domain => ({ key: domain, value: domain }))
+                  : [{ key: 'dcrouter.local', value: 'dcrouter.local' }]}
+                .selectedKey=${this.emailDomains[0] || 'dcrouter.local'}
+                required
+                style="flex: 1;"
+              ></dees-input-dropdown>
+            </div>
             
             <dees-input-tags 
               key="to" 
@@ -567,6 +585,25 @@ export class OpsViewEmails extends DeesElement {
     this.generateMockEmails();
   }
 
+  private async loadEmailDomains() {
+    try {
+      // Fetch configuration from the server
+      await appstate.configStatePart.dispatchAction(appstate.fetchConfigurationAction, null);
+      const config = appstate.configStatePart.getState().config;
+      
+      if (config?.email?.domains && Array.isArray(config.email.domains) && config.email.domains.length > 0) {
+        this.emailDomains = config.email.domains;
+      } else {
+        // Fallback to default domains if none configured
+        this.emailDomains = ['dcrouter.local'];
+      }
+    } catch (error) {
+      console.error('Failed to load email domains:', error);
+      // Fallback to default domain on error
+      this.emailDomains = ['dcrouter.local'];
+    }
+  }
+
   private async refreshEmails() {
     this.isLoading = true;
     await this.loadEmails();
@@ -579,9 +616,12 @@ export class OpsViewEmails extends DeesElement {
       console.log('Sending email:', formData);
       
       // Add to sent folder (mock)
+      // Combine username and domain
+      const fromEmail = `${formData.fromUsername || 'admin'}@${formData.fromDomain || this.emailDomains[0] || 'dcrouter.local'}`;
+      
       const newEmail: IEmail = {
         id: `email-${Date.now()}`,
-        from: formData.from || 'admin@dcrouter.local',
+        from: fromEmail,
         to: formData.to || [],
         cc: formData.cc || [],
         bcc: formData.bcc || [],