added layers to mock, display layers in events on one line seperated by commas

Author: Katherine Brown

plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.html

@@ -16,25 +16,24 @@
             <mat-list-item class="arcEvent">
               <div class="arcEvent__info">
                 <a href="/#/admin/events/{{event.id}}" target="_blank">{{event.name}}</a>
-
-                <div *ngIf="!event.layers.length" class="featureLayer_value">
-                  <div>This event is not synchronizing to any ArcGIS layers.</div>
-                  <br/>
-                  <mat-divider *ngIf="!last"></mat-divider>
+                
+                <div *ngIf="event.layers.length; else noLayers">
+                  <div>
+                    <ng-container *ngFor="let featureLayer of event.layers; let i = index">
+                      {{ layerDisplay(featureLayer) }}<span *ngIf="i < event.layers.length - 1">, </span>
+                    </ng-container>
+                  </div>
                 </div>
+                
+                <ng-template #noLayers>
+                  <div>This event is not synchronizing to any ArcGIS layers.</div>
+                </ng-template>
               </div>
               <div class="arcEvent__edit">
                 <button mat-button color="primary" (click)="onEditEvent(event)">Edit</button>
               </div>
             </mat-list-item>
-          
-            <mat-list *ngIf="event.layers.length">
-              <mat-list-item *ngFor="let featureLayer of event.layers">
-                <div>{{ layerDisplay(featureLayer) }}</div>
-                  <mat-divider></mat-divider>
-              </mat-list-item>
-            </mat-list>
-            
+            <mat-divider *ngIf="!last"></mat-divider>
           </ng-container>
         </mat-list>
       </section>

plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.scss

@@ -5,6 +5,12 @@
     margin-top: 16px;
 }
 
+.arc-event {
+    mat-card-subtitle {
+      margin-bottom: 0px; 
+    }
+  }
+
 .arcEvent__info {
     flex-grow: 1; 
 }

plugins/arcgis/web-app/projects/showcase/src/app/arc.service.mock.ts

@@ -38,15 +38,30 @@ export const mockArcGISEventResult3 = Object.freeze<MageEvent>({
       title: 'test field 3'
     }]
   }]
-})
+});
 
 @Injectable({
   providedIn: 'root'
 })
+
 export class MockArcService implements ArcServiceInterface {
   fetchFeatureServiceLayers(featureServiceUrl: string): Observable<FeatureLayer[]> {
-    throw new Error("Method not implemented.");
+    return of([
+      {
+        id: 1,
+        name: 'Layer 1',
+        geometryType: 'esriGeometryPoint',
+        events: ['test event result name 1', 'test event result name 2']
+      },
+      {
+        id: 2,
+        name: 'Layer 2',
+        geometryType: 'esriGeometryPolygon',
+        events: ['test event result name 2']
+      }
+    ]);
   }
+
   fetchArcConfig(): Observable<ArcGISPluginConfig> {
     return of({
       enabled: true,
@@ -55,7 +70,21 @@ export class MockArcService implements ArcServiceInterface {
       startupIntervalSeconds: 1,
       updateIntervalSeconds: 1,
       batchSize: 100,
-      featureServices: [],
+      featureServices: [
+        {
+          url: 'https://mock.service.com/FeatureServer/0',
+          layers: [
+            {
+              layer: 'Layer 1',
+              events: ['test event result name 1', 'test event result name 2']
+            },
+            {
+              layer: 'Layer 2',
+              events: ['test event result name 2']
+            }
+          ]
+        }
+      ],
       attachmentModifiedTolerance: 5000,
       textFieldLength: 100,
       textAreaFieldLength: 256,
@@ -96,35 +125,31 @@ export class MockArcService implements ArcServiceInterface {
   fetchArcLayers(featureUrl: string) {
     return of({
       layers: [
-          {
-            id: 0, 
-            name: 'mage_sync', 
-            geometryType: 'esriGeometryPoint'
-          },
-        ]
-      }
-    )
+        {
+          id: 0,
+          name: 'mage_sync',
+          geometryType: 'esriGeometryPoint'
+        },
+      ]
+    }
+   )
   }
 
   fetchEvents() {
-    return of([mockArcGISEventResult1, mockArcGISEventResult2, mockArcGISEventResult3])
+    return of([mockArcGISEventResult1, mockArcGISEventResult2, mockArcGISEventResult3]);
   }
 
   fetchPopulatedEvents() {
-    return of([mockArcGISEventResult1, mockArcGISEventResult2, mockArcGISEventResult3])
+    return of([mockArcGISEventResult1, mockArcGISEventResult2, mockArcGISEventResult3]);
   }
 
   putArcConfig(config: ArcGISPluginConfig) {}
 
   removeUserTrack(userTrackId: string): Observable<ArcGISPluginConfig> {
-    return of(
-      defaultArcGISPluginConfig
-    )
+    return of(defaultArcGISPluginConfig);
   }
 
   removeOperation(operationId: string): Observable<ArcGISPluginConfig> {
-    return of(
-      defaultArcGISPluginConfig
-    )
+    return of(defaultArcGISPluginConfig);
   }
 }