SF-2502 Add Help Videos to Scripture Forge

src/SIL.XForge.Scripture/ClientApp/src/app/app-routing.module.ts

@@ -14,10 +14,12 @@ import { SettingsComponent } from './settings/settings.component';
 import { PageNotFoundComponent } from './shared/page-not-found/page-not-found.component';
 import { SettingsAuthGuard, SyncAuthGuard } from './shared/project-router.guard';
 import { SyncComponent } from './sync/sync.component';
+import { HelpVideosComponent } from './shared/help-videos/help-videos.component';
 
 const routes: Routes = [
   { path: 'callback/auth0', component: MyProjectsComponent, canActivate: [AuthGuard] },
   { path: 'connect-project', component: ConnectProjectComponent, canActivate: [AuthGuard] },
+  { path: 'help-videos', component: HelpVideosComponent },
   { path: 'login', redirectTo: 'projects', pathMatch: 'full' },
   { path: 'join/:shareKey', component: JoinComponent },
   { path: 'join/:shareKey/:locale', component: JoinComponent },

src/SIL.XForge.Scripture/ClientApp/src/app/app.component.html

@@ -55,6 +55,7 @@
         </button>
         <mat-menu #helpMenu="matMenu" class="help-menu">
           <a mat-menu-item target="_blank" [href]="urls.helps"><mat-icon>help</mat-icon> {{ t("help") }}</a>
+          <a mat-menu-item appRouterLink="help-videos"><mat-icon>smart_display</mat-icon> Tutorials</a>
           <a mat-menu-item target="_blank" [href]="urls.manual"><mat-icon>book</mat-icon> {{ t("manual") }}</a>
           <a mat-menu-item target="_blank" [href]="urls.announcementPage">
             <mat-icon>campaign</mat-icon> {{ t("announcements") }}

src/SIL.XForge.Scripture/ClientApp/src/app/core/models/help-video.ts

@@ -0,0 +1,8 @@
+export interface HelpVideo {
+  id: string;
+  name: string;
+  url: string;
+  description: string;
+  keywords: string[];
+  feature: string;
+}

src/SIL.XForge.Scripture/ClientApp/src/app/shared/help-videos/help-videos.component.html

@@ -0,0 +1,27 @@
+<h1>Tutorial Videos</h1>
+@if (!isOnline) {
+  <span class="offline-text"> Connect to internet to view videos </span>
+} @else {
+  <mat-form-field>
+    <mat-label>Search for video</mat-label>
+    <input matInput type="text" placeholder="Search for video" />
+  </mat-form-field>
+  <button mat-button mat-icon-button aria-label="Search">
+    <mat-icon>search</mat-icon>
+  </button>
+  <div class="help-videos">
+    @for (value of ["1", "2", "3", "4", "5"]; track value) {
+      <mat-card class="help-video">
+        <mat-card-header>
+          <mat-card-title>Video Name {{ value }}</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <iframe width="320" height="240" src="https://www.youtube.com/embed/qgTusgXJOoM"> </iframe>
+        </mat-card-content>
+        <mat-card-footer>
+          <mat-card-subtitle> Description of the video {{ value }} </mat-card-subtitle>
+        </mat-card-footer>
+      </mat-card>
+    }
+  </div>
+}

src/SIL.XForge.Scripture/ClientApp/src/app/shared/help-videos/help-videos.component.scss

@@ -0,0 +1,12 @@
+.help-videos,
+mat-card-header,
+mat-card-footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 2rem;
+}
+
+mat-form-field {
+  width: 85%;
+}

src/SIL.XForge.Scripture/ClientApp/src/app/shared/help-videos/help-videos.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HelpVideosComponent } from './help-videos.component';
+
+describe('HelpVideosComponent', () => {
+  let component: HelpVideosComponent;
+  let fixture: ComponentFixture<HelpVideosComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HelpVideosComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HelpVideosComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/SIL.XForge.Scripture/ClientApp/src/app/shared/help-videos/help-videos.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { OnlineStatusService } from '../../../xforge-common/online-status.service';
+
+@Component({
+  selector: 'app-help-videos',
+  standalone: true,
+  imports: [MatCardModule, MatIconModule, MatInputModule, MatFormFieldModule],
+  templateUrl: './help-videos.component.html',
+  styleUrl: './help-videos.component.scss'
+})
+export class HelpVideosComponent {
+  isOnlineStatus: boolean;
+  constructor(private readonly onlineStatusService: OnlineStatusService) {
+    this.onlineStatusService.onlineStatus$.subscribe(isOnline => {
+      this.isOnlineStatus = isOnline;
+    });
+  }
+  get isOnline(): boolean {
+    return this.isOnlineStatus;
+  }
+}

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/sa-help-video-tab/sa-help-videos-dialog/sa-help-videos-dialog.component.html

@@ -0,0 +1,23 @@
+<h2 mat-dialog-title>{{ data.isEdit ? "Edit Help Video" : "Add Help Video" }}</h2>
+<mat-dialog-content>
+  <form [formGroup]="helpVideoForm">
+    <mat-form-field>
+      <mat-label>Title</mat-label>
+      <input matInput formControlName="title" required />
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>URL</mat-label>
+      <input matInput formControlName="url" required />
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>Description</mat-label>
+      <textarea matInput formControlName="description"></textarea>
+    </mat-form-field>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button (click)="onCancel()">Cancel</button>
+  <button mat-button [mat-dialog-close]="helpVideoForm.value" [disabled]="!helpVideoForm.valid">
+    {{ data.isEdit ? "Save" : "Add" }}
+  </button>
+</mat-dialog-actions>

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/sa-help-video-tab/sa-help-videos-dialog/sa-help-videos-dialog.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SaHelpVideosDialogComponent } from './sa-help-videos-dialog.component';
+
+describe('SaHelpVideosDialogComponent', () => {
+  let component: SaHelpVideosDialogComponent;
+  let fixture: ComponentFixture<SaHelpVideosDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SaHelpVideosDialogComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SaHelpVideosDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/sa-help-video-tab/sa-help-videos-dialog/sa-help-videos-dialog.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sa-help-videos-dialog',
+  standalone: true,
+  imports: [],
+  templateUrl: './sa-help-videos-dialog.component.html',
+  styleUrl: './sa-help-videos-dialog.component.scss'
+})
+export class SaHelpVideosDialogComponent {}

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/sa-help-video-tab/sa-help-videos.component.html

@@ -0,0 +1,54 @@
+<button mat-raised-button (click)="addEditVideoData()">Add Video</button>
+<mat-table [dataSource]="dataSource">
+  <ng-container matColumnDef="videoName">
+    <mat-header-cell *matHeaderCellDef> Video Name </mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      {{ element.videoName }}
+    </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="videoDescription">
+    <mat-header-cell *matHeaderCellDef> Video Description </mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      {{ element.videoDescription }}
+    </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="url">
+    <mat-header-cell *matHeaderCellDef> URL </mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      {{ element.url }}
+    </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="component">
+    <mat-header-cell *matHeaderCellDef> Component </mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      {{ element.component }}
+    </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="keywords">
+    <mat-header-cell *matHeaderCellDef> Keywords </mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      {{ element.keywords }}
+    </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="edit">
+    <mat-header-cell *matHeaderCellDef></mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      <button mat-raised-button (click)="addEditVideoData()">Edit</button>
+    </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="delete">
+    <mat-header-cell *matHeaderCellDef></mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      <button mat-raised-button (click)="addEditVideoData()">Delete</button>
+    </mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/sa-help-video-tab/sa-help-videos.component.scss

@@ -0,0 +1,47 @@
+@use 'src/variables';
+@use 'src/breakpoints';
+
+.help-controls {
+  margin: 32px 0;
+}
+
+mat-form-field {
+  margin-top: 10px;
+}
+
+mat-table {
+  width: 100%;
+}
+
+.mat-column-tasks {
+  @include breakpoints.media-breakpoint-down(md) {
+    display: none;
+  }
+}
+
+.no-projects-label {
+  padding-top: 14px;
+}
+
+.connect-cell {
+  text-align: right;
+  text-overflow: initial;
+}
+
+.task-label {
+  font-size: small;
+  color: variables.$greyLight;
+}
+
+.small-form-field {
+  width: 130px;
+}
+
+td > mat-checkbox {
+  margin: 0 1em;
+}
+
+ng-container {
+  display: flex;
+  align-items: center;
+}

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/sa-help-video-tab/sa-help-videos.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SaHelpVideosComponent } from './sa-help-videos.component';
+
+describe('HelpVideosComponent', () => {
+  let component: SaHelpVideosComponent;
+  let fixture: ComponentFixture<SaHelpVideosComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SaHelpVideosComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SaHelpVideosComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/sa-help-video-tab/sa-help-videos.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sa-help-videos',
+  templateUrl: './sa-help-videos.component.html',
+  styleUrl: './sa-help-videos.component.scss'
+})
+export class SaHelpVideosComponent {
+  constructor() {}
+  displayedColumns: string[] = ['videoName', 'videoDescription', 'url', 'component', 'keywords', 'edit', 'delete'];
+  dataSource = [
+    {
+      videoName: 'Video 1',
+      videoDescription: 'Description for Video 1',
+      url: 'https://youtube.com',
+      component: ['Component1']
+    }
+  ];
+
+  componentOptions: string[] = ['Component1', 'Component2', 'Component3'];
+
+  addEditVideoData() {
+    this.dataSource.push({ videoName: '', videoDescription: '', url: '', component: [] });
+  }
+}

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/system-administration.component.html

@@ -8,5 +8,8 @@ <h1>System Administration</h1>
     <mat-tab label="Projects">
       <app-sa-projects></app-sa-projects>
     </mat-tab>
+    <mat-tab label="Help Videos">
+      <app-sa-help-videos></app-sa-help-videos>
+    </mat-tab>
   </mat-tab-group>
 </div>

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/xforge-common.module.ts

@@ -23,6 +23,7 @@ import { SaUsersComponent } from './system-administration/sa-users.component';
 import { SystemAdministrationComponent } from './system-administration/system-administration.component';
 import { UICommonModule } from './ui-common.module';
 import { WriteStatusComponent } from './write-status/write-status.component';
+import { SaHelpVideosComponent } from './system-administration/sa-help-video-tab/sa-help-videos.component';
 
 const componentExports = [
   GenericDialogComponent,
@@ -34,7 +35,8 @@ const componentExports = [
   WriteStatusComponent,
   OwnerComponent,
   ProjectSelectComponent,
-  SyncProgressComponent
+  SyncProgressComponent,
+  SaHelpVideosComponent
 ];
 
 @NgModule({