Merge pull request #3 from somenathmaji/staging

repro ItemChanged issue

manifest_files/manifest-pinnate.xml → manifests/manifest-pinnate.xml

@@ -6,8 +6,8 @@
   <DefaultLocale>en-US</DefaultLocale>
   <DisplayName DefaultValue="Pinnate"/>
   <Description DefaultValue="A template to get started."/>
-  <IconUrl DefaultValue="https://localhost:3000/assets/icon-64.png"/>
-  <HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/icon-128.png"/>
+  <IconUrl DefaultValue="https://localhost:4000/assets/icon-64.png"/>
+  <HighResolutionIconUrl DefaultValue="https://localhost:4000/assets/icon-128.png"/>
   <SupportUrl DefaultValue="https://www.pinnate.com/help"/>
   <AppDomains>
     <AppDomain>https://www.pinnate.com</AppDomain>
@@ -23,7 +23,7 @@
   <FormSettings>
     <Form xsi:type="ItemRead">
       <DesktopSettings>
-        <SourceLocation DefaultValue="https://localhost:3000/index.html"/>
+        <SourceLocation DefaultValue="https://localhost:4000/index.html"/>
         <RequestedHeight>250</RequestedHeight>
       </DesktopSettings>
     </Form>
@@ -70,12 +70,12 @@
     </Hosts>
     <Resources>
       <bt:Images>
-        <bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/icon-16.png"/>
-        <bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/icon-32.png"/>
-        <bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/icon-80.png"/>
+        <bt:Image id="Icon.16x16" DefaultValue="https://localhost:4000/assets/icon-16.png"/>
+        <bt:Image id="Icon.32x32" DefaultValue="https://localhost:4000/assets/icon-32.png"/>
+        <bt:Image id="Icon.80x80" DefaultValue="https://localhost:4000/assets/icon-80.png"/>
       </bt:Images>
       <bt:Urls>
-        <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/index.html"/>
+        <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:4000/index.html"/>
       </bt:Urls>
       <bt:ShortStrings>
         <bt:String id="GroupLabel" DefaultValue="Pinnate Add-in"/>
@@ -124,12 +124,12 @@
     </Hosts>
     <Resources>
       <bt:Images>
-        <bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/icon-16.png"/>
-        <bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/icon-32.png"/>
-        <bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/icon-80.png"/>
+        <bt:Image id="Icon.16x16" DefaultValue="https://localhost:4000/assets/icon-16.png"/>
+        <bt:Image id="Icon.32x32" DefaultValue="https://localhost:4000/assets/icon-32.png"/>
+        <bt:Image id="Icon.80x80" DefaultValue="https://localhost:4000/assets/icon-80.png"/>
       </bt:Images>
       <bt:Urls>
-        <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/>
+        <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:4000/taskpane.html"/>
       </bt:Urls>
       <bt:ShortStrings>
         <bt:String id="GroupLabel" DefaultValue="Pinnate Add-in"/>

package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --port 3000 --ssl true --ssl-key ./localhost.key --ssl-cert ./localhost.crt",
+    "start": "ng serve --port 4000 --ssl true --ssl-key ./localhost.key --ssl-cert ./localhost.crt",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",

src/app/another/another.component.html

@@ -0,0 +1,3 @@
+<p>
+  another works!
+</p>

src/app/another/another.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-another',
+  templateUrl: './another.component.html',
+  styleUrls: ['./another.component.css']
+})
+export class AnotherComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/app-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+import { AnotherComponent } from "./another/another.component";
+
+const routes: Routes = [
+    {
+        path: "another",
+        component: AnotherComponent
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes, { useHash: true, enableTracing: true })],
+    exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -1 +1,5 @@
-{{subject}}
+<p>
+    app works!
+</p>
+<router-outlet></router-outlet>
+

src/app/app.component.ts

@@ -1,31 +1,29 @@
-import { ChangeDetectorRef, Component, NgZone, OnInit } from "@angular/core";
-import { OfficeService } from "./office.service";
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit{
-
-  public subject = "";
 
   constructor(
-    private officeService : OfficeService
+    private router: Router
   ) {}
 
   ngOnInit(): void {
-    this.subject = (window as any).Office.context.mailbox.item.subject;
-    if (this.officeService.isItemChangedEventAvailable()) {
-      console.log("[app-component] Registering to ItemChanged event");
-      this.officeService.registerEventHandler((window as any).Office.EventType.ItemChanged, func => this.updateSubject());
-    } else {
-      console.warn("[app-component] Skipping registering for ItemChanged event");
-    }
+    (<any>window).Office.context.mailbox.addHandlerAsync(
+      (<any>window).Office.EventType.ItemChanged, 
+      () => {console.error('hello!!'); this.itemChangedEventHandler()}, 
+      () => {console.error('registered')});
   }
 
-  public updateSubject() {
-    this.subject = (window as any).Office.context.mailbox.item.subject;
-    console.log(this.subject);
+  public itemChangedEventHandler = () => {
+    this.switchView();
+  }   
+
+  public switchView = () => {
+    this.router.navigate(["another"], { replaceUrl: true });
   }
 }

src/app/app.module.ts

@@ -2,17 +2,19 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
-import { OfficeService } from './office.service';
+import { AnotherComponent } from './another/another.component';
+import { AppRoutingModule } from './app-routing.module';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    AnotherComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    AppRoutingModule
   ],
   providers: [
-    OfficeService
   ],
   bootstrap: [AppComponent]
 })