Merge pull request #489 from CruGlobal/toolDetailsUpdate

GT-1343 GT-1355 Resource Details update
CruGlobal · Dec 2, 2021 · b68ed28 · b68ed28
2 parents df7e285 + a1a16cb
commit b68ed28
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 86 deletions.
diff --git a/src/app/components/edit-resource/create-resource/create-resource.component.spec.ts b/src/app/components/edit-resource/create-resource/create-resource.component.spec.ts
@@ -9,6 +9,7 @@ import { FormsModule } from '@angular/forms';
 import { AceEditorDirective } from 'ng2-ace-editor';
 import { By } from '@angular/platform-browser';
 import { Resource } from '../../../models/resource';
+import { NgArrayPipesModule } from 'ngx-pipes';
 
 describe('CreateResourceComponent', () => {
   let comp: CreateResourceComponent;
@@ -29,7 +30,7 @@ describe('CreateResourceComponent', () => {
         XmlEditorComponent,
         AceEditorDirective,
       ],
-      imports: [NgbModule.forRoot(), FormsModule],
+      imports: [NgbModule.forRoot(), FormsModule, NgArrayPipesModule],
       providers: [
         { provide: ResourceService, useValue: resourceServiceStub },
         { provide: SystemService },

diff --git a/src/app/components/edit-resource/edit-resource.component.html b/src/app/components/edit-resource/edit-resource.component.html
@@ -1,131 +1,153 @@
 <div class="modal-body">
-  <div class="row">
-    <div class="col">
-      <label>Name</label>
-    </div>
-    <div class="col">
+  <div class="row mb-2">
+    <div class="col-6">
+      <label for="name">Name</label>
       <input
+        id="name"
         class="form-control"
         placeholder="Name"
         [(ngModel)]="resource.name"
       />
     </div>
-  </div>
-
-  <div class="row">
-    <div class="col">
-      <label>Abbreviation</label>
-    </div>
-    <div class="col">
+    <div class="col-3">
+      <label for="abbrev">Abbreviation</label>
       <input
+        id="abbrev"
         class="form-control"
         placeholder="Abbreviation"
         [(ngModel)]="resource.abbreviation"
       />
     </div>
-  </div>
-
-  <div class="row">
-    <div class="col">
+    <div class="col-3">
       <label>System</label>
-    </div>
-    <div class="col">
-      <select class="form-control" [(ngModel)]="resource.system">
+      <select class="custom-select" [(ngModel)]="resource.system">
         <option *ngFor="let system of systems" [ngValue]="system">
           {{ system.name }}
         </option>
       </select>
     </div>
   </div>
 
-  <div class="row">
+  <div class="row mb-2">
     <div class="col">
       <label>Type</label>
-    </div>
-    <div class="col">
-      <select class="form-control" [(ngModel)]="resource.resourceType">
+      <select class="custom-select" [(ngModel)]="resource.resourceType">
         <option *ngFor="let type of resourceTypes" [ngValue]="type">
           {{ type.name }}
         </option>
       </select>
     </div>
-  </div>
-
-  <div class="row">
-    <div class="col">
-      <label>OneSky Project ID</label>
-    </div>
-    <div class="col">
-      <input
-        class="form-control"
-        placeholder="OneSky Project ID"
-        [(ngModel)]="resource.oneskyProjectId"
-      />
-    </div>
-  </div>
-
-  <div class="row">
     <div class="col">
-      <label>Description</label>
+      <label>Category</label>
+      <select class="custom-select" [(ngModel)]="resource['attr-category']">
+        <option value="articles">Articles</option>
+        <option value="growth">Christian Growth</option>
+        <option value="conversation_starter">Conversation Starter</option>
+        <option value="gospel">Gospel Invitation</option>
+        <option value="training">Training</option>
+      </select>
     </div>
     <div class="col">
+      <label for="order">Order</label>
       <input
+        id="order"
         class="form-control"
-        placeholder="Description"
-        [(ngModel)]="resource.description"
+        placeholder="Order"
+        [(ngModel)]="resource['attr-default-order']"
       />
     </div>
-  </div>
-
-  <div class="row">
-    <div class="col">
-      <label>Youtube Video Id</label>
-    </div>
     <div class="col">
+      <label for="onesky">OneSky Project ID</label>
       <input
+        id="onesky"
         class="form-control"
-        placeholder="Youtube Video Id"
-        [(ngModel)]="resource.aboutOverviewVideoYoutube"
+        placeholder="OneSky Project ID"
+        [(ngModel)]="resource.oneskyProjectId"
       />
     </div>
   </div>
 
-  <div class="row">
-    <div class="col">
+  <div class="row mb-2">
+    <div class="col-3">
       <label>Banner</label>
-    </div>
-    <div class="col">
-      <input
-        class="form-control"
-        placeholder="Attachment Id"
-        [(ngModel)]="resource.banner"
-      />
+      <div class="row">
+        <div class="col">
+          <label>Image</label>
+          <select class="custom-select" [(ngModel)]="resource.banner">
+            <option
+              *ngFor="
+                let attachment of resource.attachments
+                  | orderBy: 'file-file-name'
+              "
+              [ngValue]="attachment.id"
+            >
+              {{ attachment['file-file-name'] }}
+            </option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <div class="col-9">
+      <label>Banner (About)</label>
+      <div class="row">
+        <div class="col">
+          <label>Image</label>
+          <select class="custom-select" [(ngModel)]="resource.bannerAbout">
+            <option
+              *ngFor="
+                let attachment of resource.attachments
+                  | orderBy: 'file-file-name'
+              "
+              [ngValue]="attachment.id"
+            >
+              {{ attachment['file-file-name'] }}
+            </option>
+          </select>
+        </div>
+        <div class="col">
+          <label for="about_banner_youtube">Youtube</label>
+          <input
+            id="about_banner_youtube"
+            class="form-control"
+            placeholder="Youtube Video Id"
+            [(ngModel)]="resource.aboutOverviewVideoYoutube"
+          />
+        </div>
+        <div class="col">
+          <label>Animation (Coming Soon)</label>
+          <!-- <select class="custom-select" [(ngModel)]="resource.animation">
+            <option *ngFor="let attachment of resource.attachments | orderBy: 'file-file-name'" [ngValue]="attachment.id">
+              {{ attachment['file-file-name'] }}
+            </option>
+          </select> -->
+        </div>
+      </div>
     </div>
   </div>
 
   <div class="row">
-    <div class="col">
-      <label>Banner (About)</label>
-    </div>
     <div class="col">
       <input
-        class="form-control"
-        placeholder="Attachment Id"
-        [(ngModel)]="resource.bannerAbout"
+        id="hidden"
+        placeholder="hidden"
+        type="checkbox"
+        [(ngModel)]="resource['attr-hidden']"
       />
+      &nbsp;
+      <label for="hidden">Hidden</label>
     </div>
   </div>
 
-  <div class="row">
-    <div class="col">
-      <label>Order</label>
-    </div>
+  <div class="row mb-2">
     <div class="col">
-      <input
+      <label>Description</label>
+      <textarea
+        name="description"
         class="form-control"
-        placeholder="Order"
-        [(ngModel)]="resource['attr-default-order']"
-      />
+        placeholder="Description"
+        rows="3"
+        [(ngModel)]="resource.description"
+      ></textarea>
     </div>
   </div>
 
@@ -135,15 +157,16 @@
     </div>
   </div>
   <div class="row">
-    <div
-      ace-editor
-      [(text)]="resource.manifest"
-      [mode]="'xml'"
-      [autoUpdateContent]="true"
-      [options]="{ wrap: true }"
-      class="col"
-      style="min-height: 250px; overflow: auto"
-    ></div>
+    <div class="col">
+      <div
+        ace-editor
+        [(text)]="resource.manifest"
+        [mode]="'xml'"
+        [autoUpdateContent]="true"
+        [options]="{ wrap: true }"
+        style="min-height: 250px; overflow: auto"
+      ></div>
+    </div>
   </div>
 
   <div class="row" *ngIf="saving">

diff --git a/src/app/components/edit-resource/update-resource/update-resource.component.spec.ts b/src/app/components/edit-resource/update-resource/update-resource.component.spec.ts
@@ -9,6 +9,7 @@ import { FormsModule } from '@angular/forms';
 import { AceEditorDirective } from 'ng2-ace-editor';
 import { By } from '@angular/platform-browser';
 import { Resource } from '../../../models/resource';
+import { NgArrayPipesModule } from 'ngx-pipes';
 
 describe('UpdateResourceComponent', () => {
   let comp: UpdateResourceComponent;
@@ -30,7 +31,7 @@ describe('UpdateResourceComponent', () => {
         XmlEditorComponent,
         AceEditorDirective,
       ],
-      imports: [NgbModule.forRoot(), FormsModule],
+      imports: [NgbModule.forRoot(), FormsModule, NgArrayPipesModule],
       providers: [
         { provide: ResourceService, useValue: resourceServiceStub },
         { provide: SystemService },

diff --git a/src/app/components/resources/resources.component.spec.ts b/src/app/components/resources/resources.component.spec.ts
@@ -62,7 +62,7 @@ describe('ResourcesComponent', () => {
 
     setTimeout(() => {
       expect(resourceServiceStub.getResources).toHaveBeenCalledWith(
-        'translations,pages,custom-manifests,tips',
+        'translations,pages,custom-manifests,tips,attachments',
       );
 
       done();

diff --git a/src/app/components/resources/resources.component.ts b/src/app/components/resources/resources.component.ts
@@ -34,7 +34,7 @@ export class ResourcesComponent implements OnInit {
     this.loadingResources = true;
 
     this.resourceService
-      .getResources('translations,pages,custom-manifests,tips')
+      .getResources('translations,pages,custom-manifests,tips,attachments')
       .then((resources) => {
         this.resources = resources;
       })

diff --git a/src/app/models/resource.ts b/src/app/models/resource.ts
@@ -26,7 +26,14 @@ export class Resource {
   aboutOverviewVideoYoutube?: string;
   bannerAbout?: number;
   banner?: number;
+  'attr-category'?:
+    | 'articles'
+    | 'conversation_starter'
+    | 'gospel'
+    | 'growth'
+    | 'training';
   'attr-default-order'?: number;
+  'attr-hidden'?: boolean;
 
   static getResourceTypeId(resource: Resource): number {
     return resource.resourceType ? resource.resourceType.id : null;

diff --git a/src/app/service/resource/resource.service.ts b/src/app/service/resource/resource.service.ts
@@ -77,7 +77,9 @@ export class ResourceService extends AbstractService {
           'attr-banner-about': resource.bannerAbout || null,
           'attr-about-overview-video-youtube':
             resource.aboutOverviewVideoYoutube || null,
+          'attr-category': resource['attr-category'] || null,
           'attr-default-order': resource['attr-default-order'] || null,
+          'attr-hidden': resource['attr-hidden'] || null,
         },
       },
     };