Restructured the Story creation page to make it less temporary

Also add a tab for the digital reader story library

ngapp/src/app/dialogs/basic-dialog/basic-dialog.component.html

@@ -53,7 +53,10 @@ <h2 mat-dialog-title>{{ data.title }}</h2>
       {{ data.data[2][1] }}:
       <div class="dialectContainer">
         <mat-checkbox *ngFor="let opt of data.data[1]" [(ngModel)]="textInputs[opt.ind]"><div class="viewStoryBtn" >{{ opt.dialect }}</div></mat-checkbox>
-      </div>
+      </div> <br>
+      {{ data.data[2][2] }}:
+      <mat-checkbox [(ngModel)]="textInputs[data.data[1].length+1]"></mat-checkbox>
+      <!-- Have to find another way to represent this - probably better off just creating new dialog -->
     </div>
     <!-- PDF -->
     <pdf-viewer *ngIf="data?.type == 'PDF'" [src]="data.data" [render-text]="true" [original-size]="false" style="width: 100%; height: 600px" ></pdf-viewer>

ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.component.html

@@ -0,0 +1,25 @@
+<div class="dialogContainer">
+  <div *ngIf="data?.title" class="header">
+    <h2 mat-dialog-title>{{ data.title }}</h2>
+  </div>
+
+  <div *ngIf="data?.message" mat-dialog-content [innerHTML]="data.message" ></div>
+
+  <!-- create-dr-story -->
+  <div *ngIf="data?.type == 'create-dr-story'">
+    {{ data.data[2][0] }}:
+    <input type="text" class="titleInput" placeholder="{{ data.data[0] }}" name="title" [(ngModel)]="inputs.title" /><br /><br />
+    {{ data.data[2][1] }}:
+    <div class="dialectContainer">
+      <mat-checkbox *ngFor="let dialect of data.data[1]" [(ngModel)]="inputs.dialects[dialectMapping[dialect]]"><div class="viewStoryBtn" >{{ dialect }}</div></mat-checkbox>
+    </div> <br>
+    {{ data.data[2][2] }}:
+    <mat-checkbox [(ngModel)]="inputs.public"></mat-checkbox>
+  </div>
+
+  <div mat-dialog-actions [align]="'center'">
+    <button class="modalBtn deleteRedBtn" [mat-dialog-close]="" *ngIf="data.cancelText" > {{ data.cancelText }} </button>
+    <button class="modalBtn confirmBtnGreen" [mat-dialog-close]="inputs" *ngIf="data.confirmText" > {{ data.confirmText }} </button>
+  </div>
+
+</div>

ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.component.scss

@@ -0,0 +1,73 @@
+.dialogContainer {
+  padding:10px;
+}
+
+h2 {
+  // overflow-wrap: break-word;
+  // max-width: 100%;
+  // padding-top: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.confirmBtnGreen {
+    background-color: var(--scealai-green);
+    color: white;
+}
+
+.confirmBtnGreen:hover {
+    background-color: var(--scealai-dark-green);
+}
+
+.codeView {
+    background-color: var(--scealai-gray);
+    border: 1px solid var(--scealai-light-gray);
+    border-radius: 4px;
+    padding: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+    margin-top: 16px;
+}
+
+.copyBtn:hover {
+  cursor: pointer;
+}
+
+.titleInput {
+    margin-top: 10px;
+    padding-left: 4px;
+    width: 80%;
+}
+
+/*.dialectChoice {
+  margin: auto;
+  width: inherit;
+  text-align: center;
+}*/
+
+.dialectContainer {
+  display:flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-right:auto;
+  margin-left: 0;
+  width:inherit;
+  gap: 1rem;
+}
+
+/*.viewStory {
+  padding-right: 10px;
+}*/
+
+.viewStoryBtn {
+    padding: 7px;
+    background-color: var(--scealai-green);
+    color: white;
+    border-radius: 4px;
+    text-decoration:none;
+    text-align: center;
+}

ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.component.ts

@@ -0,0 +1,61 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { TranslationService } from 'app/core/services/translation.service';
+import { AuthenticationService } from 'app/core/services/authentication.service';
+import { MatDialogRef } from '@angular/material/dialog';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
+
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+export interface DialogData {
+  title: string;
+  message: string;
+  data: any;
+  type: string;
+  confirmText: string;
+  cancelText: string;
+}
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, FormsModule, ClipboardModule, MatDialogModule, PdfViewerModule, MatCheckboxModule],
+  selector: 'app-basic-dialog',
+  templateUrl: './dr-story-creation-dialog.component.html',
+  styleUrls: ['./dr-story-creation-dialog.component.scss']
+})
+export class DigitalReaderStoryCreationDialogComponent {
+  public dialectMapping: Object;
+  public inputs: Object;
+  //public dialects: [] = [];
+  pdfSrc = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf";
+  copyIconClicked: boolean = false;
+
+  constructor(@Inject(MAT_DIALOG_DATA) 
+              public data: DialogData,
+              public ts: TranslationService,
+              public auth: AuthenticationService,
+              ) {
+                this.dialectMapping = {
+                  Connacht: 'connemara',
+                  Connachta: 'connemara',
+                  Munster: 'kerry',
+                  Mumha: 'kerry',
+                  Ulster: 'donegal',
+                  Ulaidh: 'donegal',
+                }
+
+                this.inputs = {
+                  title: '',
+                  dialects: {
+                    connemara: false,
+                    kerry: false,
+                    donegal: false
+                  },
+                  public: false
+                }
+              }
+}
+

ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.spec.ts

@@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DigitalReaderStoryCreationDialogComponent } from './dr-story-creation-dialog.component';
+import { MatDialog, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+describe('BasicDialogComponent', () => {
+  let component: DigitalReaderStoryCreationDialogComponent;
+  let fixture: ComponentFixture<DigitalReaderStoryCreationDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DigitalReaderStoryCreationDialogComponent ],
+      imports: [HttpClientTestingModule], 
+      providers: [
+          { provide: MatDialog, useValue: {} },
+          { provide: MAT_DIALOG_DATA, useValue: {} }
+      ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DigitalReaderStoryCreationDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ngapp/src/app/nav-bar/digital-reader-library/digital-reader-library.component.html

@@ -0,0 +1,22 @@
+<div class="container">
+  <div class="header">
+    Newly created tab!
+  </div>
+  <!--<div class="aboutContent">
+    <p style="text-align: center;">This is where the stories will be displayed/can be generated (I think)</p>
+    <p style="text-align: center;">List of stories in the db :</p>
+    <p style="text-align: center;">(will be filtered based in public/private/who created it)</p>
+  </div>-->
+  <div style="display: flex;">
+
+  </div>
+</div>
+
+<!-- Footer containing logos -->
+<div class="footerLARA">
+  <div class="footerLogos">
+    <div class="copyright"> {{ts.l.published_courtesy_of}} </div>
+    <div class="logoPadding"><img class="logoImg" src="assets/img/logo_an_gum.png"></div>
+    <div class="logoPadding"><img class="logoImg" src="assets/img/logo_foras_na_gaeilge.png"></div>
+  </div>
+</div>