Feature/attributes page

src/app/_type/attribute.type.ts

@@ -0,0 +1,8 @@
+import {Phrase} from './phrase.type';
+
+export interface Attribute {
+  phrase: Phrase;
+  userCount: number;
+  sequence: number;
+  }
+

src/app/_type/phrase.type.ts

@@ -0,0 +1,8 @@
+export type Phrase = {
+      id: number;
+      adverb: string;
+      verb: string;
+      preposition: string;
+      noun: string;
+     }
+

src/app/pages/attributes-page/_services/attributes.api.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import {AuthService, JWTApiService} from '@savvato-software/savvato-javascript-services';
+import {Attribute} from '../../../_type/attribute.type'
 
 import { environment } from '../../../_environments/environment';
 import {GenericResponse} from "../../_types/generic-response.type";
@@ -27,7 +28,7 @@ export class AttributesApiService {
     }
 
 
-    save(model) {
+    save(model:Attribute) {
         const url = environment.apiUrl + '/api/attributes';
         let data = {
             'adverb': model['inputAdverbText'],
@@ -47,6 +48,22 @@ export class AttributesApiService {
             );
         });
     }
+    saveSequence(data: {phrases: {sequence: number, phraseId: number}[]}) {
+        const url = environment.apiUrl + '/api/attributes/update';
+         console.log(data);
+
+        return new Promise((resolve, reject) => {
+            this._apiService.post(url, data).subscribe(
+                (response: boolean) => {
+                    resolve(response);
+                },
+                (err) => {
+                    reject(err);
+                }
+            );
+        });
+    }
+
 
     delete(id: number): Promise<any> {
         const url = environment.apiUrl + '/api/attributes/?phraseId=' + id + '&userId=' + this._authService.getUser().id;

src/app/pages/attributes-page/_services/attributes.model.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import {AuthService, JWTApiService} from '@savvato-software/savvato-javascript-services';
 
 import { AttributesApiService } from "./attributes.api.service";
+import {Attribute} from '../../../_type/attribute.type'
 
 import { Constants } from "../../../_constants/constants";
 
@@ -10,7 +11,8 @@ import { Constants } from "../../../_constants/constants";
 })
 export class AttributesModelService {
 
-    model: any = {};
+    model:Attribute[] = [];
+    originalAttributes: Attribute[] = [];
 
     constructor(private _apiService: JWTApiService,
                 private _authService: AuthService,
@@ -22,8 +24,11 @@ export class AttributesModelService {
     init() {
         return new Promise((resolve, reject) => {
             this._attributesApiService.getAttributesByUser().then(
-                (rtn) => {
-                    this.model = rtn;
+                (rtn:Attribute[]) => {
+                    rtn.sort((a, b) => a.sequence - b.sequence)
+                    this.originalAttributes = rtn;
+                    this.model = JSON.parse(JSON.stringify(rtn));
+
                     resolve(rtn);
                 }
             )
@@ -35,8 +40,11 @@ export class AttributesModelService {
         return this.model;
     }
 
+    isDirty(): boolean{
+      return JSON.stringify(this.model) !== JSON.stringify(this.originalAttributes);
+      }
 
-    save(model: {}) {
+    save(model:Attribute) {
         return new Promise((resolve, reject) => {
             this._attributesApiService.save(model).then(
                 (isPhraseAssociatedWithUser: boolean) => {
@@ -50,6 +58,27 @@ export class AttributesModelService {
         });
     }
 
+    saveAttributeSequence() {
+            return new Promise((resolve, reject) => {
+              let phrase = this.model.map(item => {return {
+                               'sequence': item.sequence,
+                               'phraseId': item.phrase.id
+                             };
+                         })
+              let data = {'phrases': phrase}
+                this._attributesApiService.saveSequence(data).then(
+                    (booleanMessage: boolean) => {
+                        resolve(booleanMessage);
+                        console.log("Call to attributeApiService was successful(model) + (booleanMessage)")
+                    },
+                    (err) => {
+                        reject(err);
+                    }
+                );
+            });
+        }
+
+
     delete(id: number): Promise<any> {
         return this._attributesApiService.delete(id);
     }

src/app/pages/attributes-page/attributes.page.html

@@ -1,8 +1,13 @@
 <app-header [currentPageTitle]="headerPageTitle" [displayPrimaryActionButton]="true"
   [primaryActionButtonText]="headerPagePrimaryActionButtonText" [primaryActionButtonFunc]="getCreateBtnClickFunc()"></app-header>
-
+<ion-toolbar>
+  <ion-button (click)="moveUp()" [disabled]="!selectedAttr || !canMoveUp()">Up</ion-button>
+  <ion-button (click)="moveDown()" [disabled]="!selectedAttr || !canMoveDown()">Down</ion-button>
+  <ion-button (click)="saveChanges()" [disabled]="!isSaveEnabled()">Save</ion-button>
+</ion-toolbar>
   <ion-content>
-    <ion-card color="warning" *ngFor="let attr of getAttributes()">
+              <!--change attributes to getAttributes()-->
+    <ion-card color="warning" *ngFor="let attr of getAttributes()" [ngClass]="{'selected': selectedAttr === attr}" (click)="selectAttribute(attr)">
       <ion-card-content>
         <ion-card-title>{{attr['phrase']['adverb'] || ''}} {{attr['phrase']['verb'] || ''}} {{attr['phrase']['preposition'] || ''}} {{attr['phrase']['noun'] || ''}}
           <span class="user-count">({{attr['userCount'] || '0'}} users)</span>

src/app/pages/attributes-page/attributes.page.module.ts

@@ -11,6 +11,7 @@ import { CreateAttributePage } from './create/create';
 import { DetailAttributePage } from "./detail/detail";
 import { EditAttributePage } from "./edit/edit";
 import { SharedComponentsModule } from '../../_shared-components/shared-components/shared-components.module';
+import { SequenceService } from '@savvato-software/savvato-javascript-services';
 
 @NgModule({
   imports: [
@@ -25,6 +26,9 @@ import { SharedComponentsModule } from '../../_shared-components/shared-componen
     CreateAttributePage,
     DetailAttributePage,
     EditAttributePage
-  ]
+  ],
+  providers: [
+    SequenceService // Provide the service here
+  ],
 })
 export class AttributesPageModule {}

src/app/pages/attributes-page/attributes.page.scss

@@ -0,0 +1,3 @@
+.selected {
+  color: red;
+}

src/app/pages/attributes-page/attributes.page.ts

@@ -6,46 +6,103 @@ import { AlertService } from '../../_services/alert/alert.service';
 import { UserService } from '../../_services/user/user.service';
 import { LoadingService } from "../../_services/loading-spinner/loading.service";
 import { AttributesModelService } from "./_services/attributes.model.service";
+import { SequenceService, Sequenceable } from '@savvato-software/savvato-javascript-services';
+import {Attribute} from '../../_type/attribute.type'
+import {Phrase} from '../../_type/phrase.type'
 
 @Component({
   selector: 'app-attributes',
   templateUrl: './attributes.page.html',
   styleUrls: ['./attributes.page.scss'],
 })
+
 export class AttributesPage implements OnInit {
 
   headerPageTitle: string = 'Attributes';
   headerPagePrimaryActionButtonText: string = 'Create';
+  selectedAttr: Attribute | null = null;
+
 
   constructor(private _userService: UserService,
     private _alertService: AlertService,
     private _loadingService: LoadingService,
     private _attributesModelService: AttributesModelService,
-    private router: Router) { }
+    private router: Router,
+    private sequenceService: SequenceService,
+    ) {}
+
+    public ngOnInit() {
+      this.loadAttributes();
+    }
 
-  public ngOnInit() {
-
+    loadAttributes() {
+      this._loadingService.show({message: "..loading.."}).then(() => {
+        this._attributesModelService.init().then(() => {
+          this._loadingService.dismiss();
+        });
+      });
+    }
+
+  get attributes(): Attribute[] {
+    const attributes: Attribute[] = this._attributesModelService.get();
+    return attributes;
   }
 
-  ionViewWillEnter() {
-    this._loadingService.show({message: "..loading.."}).then(() => {
-      this._attributesModelService.init().then(() => {
-        this._loadingService.dismiss();
-      })
-    })
+  getAttributes():Attribute[] {
+      const attributes: Attribute[] = this._attributesModelService.get();
+      return attributes;
+    }
+
+  selectAttribute(attr: Attribute) {
+    this.selectedAttr = attr;
+  }
+
+  canMoveUp(): boolean {
+    return this.selectedAttr && this.selectedAttr.sequence > 1;
+  }
+
+  canMoveDown(): boolean {
+    return this.selectedAttr && this.selectedAttr.sequence < this.attributes.length;
   }
 
+  isSaveEnabled(): boolean {
+    //returns true if there is a change
+    let isDirty = this._attributesModelService.isDirty();
+    console.log(isDirty)
+    return isDirty;
+ }
+
+  moveUp() {
+   if (this.selectedAttr && this.canMoveUp()) {
+     this.sequenceService.moveSequenceByOne(this._attributesModelService.get(), this.selectedAttr, this.sequenceService.UP);
+   }
+  }
 
-  getAttributes() {
-    const attributes = this._attributesModelService.get(); 
-    return Object.values(attributes);
+  moveDown() {
+    if (this.selectedAttr && this.canMoveDown()) {
+      this.sequenceService.moveSequenceByOne(this._attributesModelService.get(), this.selectedAttr, this.sequenceService.DOWN);
+    }
+  }
+
+  saveChanges() {
+    this._attributesModelService.saveAttributeSequence()
+    .then((response) => {
+      console.log("Call to attributeApiService was successful");
+      return this._attributesModelService.init()
+       })
+    .then(() => {
+      this.selectedAttr = null;
+//       this.navigateTo('attributes');
+      })
+    .catch((err) => {
+      console.error("Error saving changes or reloading attributes", err);
+    });
   }
 
-
   deleteAttribute(id: number) {
     const self = this;
     let msg = "Deleting attribute...";
-  
+
     self._loadingService.show({message: msg}).then(() => {
       self._loadingService.dismiss().then(() => {
         self._alertService.show({
@@ -55,7 +112,7 @@ export class AttributesPage implements OnInit {
             {
               text: 'Yes',
               handler: () => {
-                
+
                 this._attributesModelService.delete(id).then(
                   (response) => {
                    console.log("Call to attributeApiService was successful");
@@ -73,14 +130,14 @@ export class AttributesPage implements OnInit {
             },
             {
               text: 'No',
-              role: 'cancel' 
+              role: 'cancel'
             }
           ]
         })
       })
     });
-  }  
-   
+  }
+
 
   getAttrString(attr) {
     let rtn = "";
@@ -114,4 +171,25 @@ export class AttributesPage implements OnInit {
     this.router.navigate([url], { replaceUrl: true });
   }
 
+  ionViewWillLeave() {
+    if (this._attributesModelService.isDirty()) {
+      this._alertService.show({
+        header: 'Unsaved Changes',
+        message: 'You have unsaved changes. Do you want to save before leaving?',
+        buttons: [
+          {
+            text: 'Yes',
+            handler: () => {
+              this.saveChanges();
+              this.navigateTo();
+            }
+          },
+          {
+            text: 'No',
+            role: 'cancel'
+          }
+        ]
+      });
+    }
+  }
 }