Merge pull request #168 from david-poindexter/default-view

Updated default view to ensure it shows bulletins for the current version of DNN
DNNCommunity · Jan 13, 2025 · 2ee1843 · 2ee1843
2 parents b51d039 + ea97f87
commit 2ee1843
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 21 deletions.
diff --git a/module.web/src/components/dnn-security-center/dnn-security-center.tsx b/module.web/src/components/dnn-security-center/dnn-security-center.tsx
@@ -1,4 +1,4 @@
-import { Component, h, Prop, Host, Element, State } from "@stencil/core";
+import { Component, h, Prop, Host, Element, State, Watch } from "@stencil/core";
 import { LocalizationClient, SecurityClient, LocalizationViewModel, SecurityBulletinsViewModel } from "../../services/services";
 import state, { localizationState } from "../../store/state";
 import alertError from "../../services/alert-error";
@@ -29,10 +29,16 @@ export class DnnSecurityCenter {
   /** The Dnn module id, required in order to access web services. */
   @Prop() moduleId!: number;
 
-  @State() selectValue: string = '090101';
   @State() securityBulletins: SecurityBulletinsViewModel;
   @State() expandedBulletinIndex: number;
   @State() dnnVersions: string[];
+  @State() selectValue: string;
+  @Watch('selectValue')
+  selectValueChanged(newValue: string, oldValue: string) {
+    if (newValue !== oldValue) {
+      this.getSecurityBulletins();
+    }
+  }
 
   componentWillLoad() {
     return new Promise<void>((resolve, reject) => {
@@ -50,20 +56,16 @@ export class DnnSecurityCenter {
     });
   }
 
-  componentDidLoad() {
-    this.getSecurityBulletins();
-  }
-
   private getDnnTags() {
     this.githubService.getTags().then(data => {
       this.dnnVersions = data;
-      this.dnnVersions.unshift('All Versions');
       this.dnnVersions = [...this.dnnVersions, ...preGitHubDnnVersions]
+      this.selectValue = this.dnnVersions[0].replace(/\./g, '');
     }).catch(reason => {
       alertError(reason);
     });
   }
-
+  
   private getSecurityBulletins() {
     this.securityClient.getSecurityBulletins(this.selectValue).then(data => {
       this.securityBulletins = data;
@@ -72,16 +74,6 @@ export class DnnSecurityCenter {
     });
   }
 
-  private handleSelect(event): void {
-    this.securityBulletins = undefined;
-    this.selectValue = event.target.value;
-    if (this.selectValue === 'All Versions') {
-      window.location.reload();
-      return;
-    }
-    this.getSecurityBulletins();
-  }
-
   private decodeHtml(text: string): string {
     return text.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace('”', '').replace('”', '');
   }
@@ -109,11 +101,11 @@ export class DnnSecurityCenter {
         {this.dnnVersions &&
           <h3>
             {this.resx.uI.dnnPlatformVersion}: &nbsp;
-            <select name="dnnVersions" onInput={e => this.handleSelect(e)}>
+            <dnn-select name="dnnVersions" onValueChange={e => this.selectValue = e.detail}>
               {this.dnnVersions.map(version => 
-                <option value={version.replace(/\./g, '')}>{version}</option>
+                <option value={version.replace(/\./g, '')} selected={this.selectValue == version.replace(/\./g, '')}>{version}</option>
               )}
-            </select>
+            </dnn-select>
           </h3>
         }
         {this.securityBulletins === undefined &&

diff --git a/module.web/src/components/dnn-security-center/readme.md b/module.web/src/components/dnn-security-center/readme.md
@@ -16,14 +16,17 @@ Root component that does all the module rendering.
 
 ### Depends on
 
+- dnn-select
 - dnn-chevron
 - dnn-collapsible
 
 ### Graph
 ```mermaid
 graph TD;
+  dnn-security-center --> dnn-select
   dnn-security-center --> dnn-chevron
   dnn-security-center --> dnn-collapsible
+  dnn-select --> dnn-fieldset
   style dnn-security-center fill:#f9f,stroke:#333,stroke-width:4px
 ```