Merge pull request #282 from CruGlobal/sortAttachments

Sort the list of attachments

package.json

@@ -31,6 +31,7 @@
     "jsonapi-datastore": "0.4.0-beta",
     "ng2-ace-editor": "0.3.9",
     "ng2-file-upload": "1.4.0",
+    "ngx-pipes": "^2.7.5",
     "rxjs": "6.6.7",
     "rxjs-compat": "6.6.7",
     "tslib": "2.2.0",

src/app/app.module.ts

@@ -45,6 +45,7 @@ import { ResourceComponent } from './components/resource/resource.component';
 import { CustomManifestService } from './service/custom-manifest.service';
 import 'brace/mode/xml';
 import { TranslationVersionBadgeComponent } from './components/translation/translation-version-badge/translation-version-badge.component';
+import { NgArrayPipesModule } from 'ngx-pipes';
 
 @NgModule({
   declarations: [
@@ -77,6 +78,7 @@ import { TranslationVersionBadgeComponent } from './components/translation/trans
     FormsModule,
     AppRoutingModule,
     HttpModule,
+    NgArrayPipesModule,
     NgbModule.forRoot(),
   ],
   providers: [

src/app/components/attachments/attachments.component.html

@@ -86,7 +86,7 @@ <h5>Upload new attachment</h5>
 <ngb-alert type="warning" [dismissible]="false" *ngIf="loading">
   Loading...
 </ngb-alert>
-<div *ngFor="let resource of resources" class="card mb-3">
+<div *ngFor="let resource of resources | orderBy: 'name'" class="card mb-3">
   <div
     class="card-header"
     (click)="resource.showAttachments = !resource.showAttachments"
@@ -113,7 +113,11 @@ <h5>Upload new attachment</h5>
           <div class="col">Actions</div>
         </div>
       </strong>
-      <div *ngFor="let attachment of resource.attachments">
+      <div
+        *ngFor="
+          let attachment of resource.attachments | orderBy: 'file-file-name'
+        "
+      >
         <div class="row">
           <div class="col">
             {{ attachment.id }}

src/app/components/attachments/attachments.component.spec.ts

@@ -9,6 +9,7 @@ import { Attachment } from '../../models/attachment';
 import { By } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 import { FileSelectDirective } from 'ng2-file-upload';
+import { NgArrayPipesModule } from 'ngx-pipes';
 
 describe('AttachmentsComponent', () => {
   let comp: AttachmentsComponent;
@@ -47,7 +48,7 @@ describe('AttachmentsComponent', () => {
 
     TestBed.configureTestingModule({
       declarations: [AttachmentsComponent, FileSelectDirective],
-      imports: [NgbModule.forRoot(), FormsModule],
+      imports: [NgbModule.forRoot(), FormsModule, NgArrayPipesModule],
       providers: [
         { provide: ResourceService, useValue: resourceServiceStub },
         { provide: WindowRefService, useValue: windowRefStub },

yarn.lock

@@ -4930,6 +4930,13 @@ [email protected]:
   dependencies:
     tslib "^1.9.0"
 
+ngx-pipes@^2.7.5:
+  version "2.7.5"
+  resolved "https://registry.yarnpkg.com/ngx-pipes/-/ngx-pipes-2.7.5.tgz#22e2e4b7015ae9103210dfa2dacd6f4ae4411639"
+  integrity sha512-hlxHzu+snGJ038Z+HdkgEZRlZeE7suDTLWJD1yUP11eAM+xLPJAur1QtvvtZTHRHutOc7Wij1keBtuWIS9D0JQ==
+  dependencies:
+    tslib "^2.0.0"
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"