Project

General

Profile

« Previous | Next » 

Revision 52098

Added by Sofia Baltzi about 6 years ago

Disable SAVE button if there are no changes to save in the form

View differences:

modules/uoa-admin-portal/branches/project-cli/src/app/pages/community/community-edit-form/community-edit-form.component.html
13 13 
                  <td class="uk-text-left">
14 14 
                      <div *ngIf="community.title == '' " class="uk-width-medium uk-text-danger uk-text-small style=display:none"> Please add name. </div>
15 15 
                      <input *ngIf="community.title != null" placeholder={{community.title}} type="text"
16 
                              class="form-control uk-input uk-width-large@l uk-width-medium@s" id="name" required [(ngModel)] = "community.title"></td>
16 
                              class="form-control uk-input uk-width-large@l uk-width-medium@s" id="name"
17 
                              required [(ngModel)] = "community.title" (input)="change()"></td>
18 
                              <!-- Todo remove after testing -->
19 
                              <!-- {{hasChanged}} -->
17 20 
              </tr>
18 21 
              <tr>
19 22 
                  <td for="shortName" class="uk-text-bold uk-text-right">Short Name:</td>
20 23 
                  <td class="uk-text-left">
21 24 
                      <input *ngIf="community.shortTitle != null" placeholder={{community.shortTitle}} type="text"
22 
                              class="form-control uk-input uk-width-large@l uk-width-medium@s" id="shortName" [(ngModel)] = "community.shortTitle"></td>
25 
                              class="form-control uk-input uk-width-large@l uk-width-medium@s" id="shortName"
26 
                              [(ngModel)] = "community.shortTitle" (input)="change()"></td>
23 27 
              </tr>
24 28 
              <tr>
25 29 
                  <td for="description" class="uk-text-bold uk-text-right">Description:</td>
26 30 
                  <td class="uk-text-left">
27 31 
                      <textarea *ngIf="community.description != null" placeholder={{community.description}} type="text"
28 
                                class="form-control uk-textarea uk-width-large@l uk-width-medium@s" rows="6" id="description" [(ngModel)] = "community.description">
32 
                                class="form-control uk-textarea uk-width-large@l uk-width-medium@s" rows="6" id="description"
33 
                                [(ngModel)] = "community.description" (input)="change()">
29 34 
                      </textarea></td>
30 35 
              </tr>
31 36 
              <tr>
32 37 
                  <td for="logoUrl" class="uk-text-bold uk-text-right">Logo Url:</td>
33 38 
                  <td class="uk-text-left">
34 39 
                      <input *ngIf="community.logoUrl != null" placeholder={{community.logoUrl}} type="text"
35 
                          class="form-control uk-input uk-width-large@l uk-width-medium@s" id="logoUrl" [(ngModel)] = "community.logoUrl"></td>
40 
                          class="form-control uk-input uk-width-large@l uk-width-medium@s" id="logoUrl"
41 
                          [(ngModel)] = "community.logoUrl" (input)="change()"></td>
36 42 
              </tr>
37 43 
              <tr>
38 44 
                  <td for="status" class="uk-text-bold uk-text-right">Status:</td>
39 45 
                  <td class="uk-text-left uk-margin">
40 
                      <select class="form-control uk-select uk-width-large@l uk-width-medium@s" id="status" [(ngModel)] = "community.status">
46 
                      <select class="form-control uk-select uk-width-large@l uk-width-medium@s" id="status"
47 
                              [(ngModel)] = "community.status" (input)="change()">
41 48 
                          <option value="all">Visible</option>
42 49 
                          <option value="manager">Visible to managers</option>
43 50 
                          <option value="hidden">Hidden</option>
......
51 58 
                          <div *ngIf="!community.managers[i].match('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$') && community.managers[i] != '' "
52 59 
                              class="uk-width-large uk-text-danger uk-text-small uk-margin-top"> Please add a valid email. </div>
53 60 
                          <input placeholder="Type managers" type="text" class="form-control uk-input uk-width-large@l uk-width-medium@s"
54 
                                                      id="{{'manager'+i}}" name="{{'manager'+i}}" [(ngModel)] = "community.managers[i]">
61 
                                                      id="{{'manager'+i}}" name="{{'manager'+i}}" [(ngModel)] = "community.managers[i]" (input)="change()">
55 62 
                          <!-- <img type="uk-image" src="assets/imgs/delete-icon.png" height="25" width="25" title="Remove" onmouseover="" style="cursor: pointer;" (click)="removeManager(i)"/> -->
56 63 
                          <a class="uk-icon-button remove red_background_color red_color" uk-icon="close" title="Remove" (click)="removeManager(i)"></a>
57 64 
                          <a *ngIf="i == community.managers.length - 1" class="uk-icon-button add green_background_color green_color" uk-icon="plus" title="Add" (click)="addManager()"></a>
......
67 74 
                    <div *ngIf="community.subjects != null">
68 75 
                      <div *ngFor='let subject of community.subjects; let i = index; trackBy:trackByFn'>
69 76 
                          <input placeholder="Type subjects" type="text" class="form-control uk-input uk-width-large@l uk-width-medium@s"
70 
                                                     id="{{'subject'+i}}" name="{{'subject'+i}}" [(ngModel)] = "community.subjects[i]">
77 
                                                     id="{{'subject'+i}}" name="{{'subject'+i}}" [(ngModel)] = "community.subjects[i]" (input)="change()">
71 78 
                          <!-- <img type="uk-image" src="assets/imgs/delete-icon.png" height="25" width="25" title="Remove" onmouseover="" style="cursor: pointer;" (click)="removeSubject(i)"/> -->
72 79 
                          <a class="uk-icon-button remove red_background_color red_color" uk-icon="close" title="Remove" (click)="removeSubject(i)"></a>
73 80 
                          <a *ngIf="i == community.subjects.length - 1" class="uk-icon-button add green_background_color green_color" uk-icon="plus" title="Add" (click)="addSubject()"></a>
......
86 93 
                <td class="uk-text-right"></td>
87 94 
                <td>
88 95 
                    <div class="uk-grid-margin uk-first-column uk-align-center uk-text-left uk-padding uk-padding-remove-top uk-padding-remove-bottom">
89 
                        <button class="uk-button uk-button-primary" (click)="updateCommunity()">Save</button>
96 
                        <button *ngIf="hasChanged" class="uk-button uk-button-primary" (click)="updateCommunity()">Save</button>
97 
                        <button *ngIf="!hasChanged" class="uk-button uk-button-default" disabled>Save</button>
90 98 
                        <button class="uk-button" (click)="resetForm(communityId)">Reset</button>
91 99 
                    </div>
92 100 
                </td>
modules/uoa-admin-portal/branches/project-cli/src/app/pages/community/community-edit-form/community-edit-form.component.ts
1 1 
import {Component, OnInit, Input}                        from '@angular/core';
2 
import {SimpleChanges, OnChanges}                        from '@angular/core';
2 3 
import {FormGroup, FormArray, FormBuilder, Validators}   from "@angular/forms";
3 4 
import {ActivatedRoute, Router}                          from '@angular/router';
4 5 

  		




  ......




  22
  23
  
    
    public errorMessage: string = '';


  		




  23
  24
  
    
    public updateErrorMessage: string = '';


  		




  24
  25
  
    

  		




  
  26
  
    
    public hasChanged: boolean = false;


  		




  
  27
  
    

  		




  25
  28
  
    
    public res=[];


  		




  26
  29
  
    

  		




  27
  30
  
    
    params: any;


  		




  ......




  64
  67
  
    
        });


  		




  65
  68
  
    
    }


  		




  66
  69
  
    

  		




  
  70
  
    
    // ngOnChanges(changes: SimpleChanges)


  		




  
  71
  
    
    // {


  		




  
  72
  
    
    //     this.hasChanged = true;


  		




  
  73
  
    
    //     console.log('I have changed in OnChanges');


  		




  
  74
  
    
    // }


  		




  
  75
  
    

  		




  67
  76
  
    
    public addManager() {


  		




  68
  77
  
    
            this.community.managers.push("");


  		




  69
  78
  
    
    }


  		




  ......




  95
  104
  
    
              error => this.handleError('System error retrieving community profile', error)


  		




  96
  105
  
    
            );


  		




  97
  106
  
    
        }


  		




  
  107
  
    
        this.resetChange();


  		




  98
  108
  
    
    }


  		




  99
  109
  
    

  		




  100
  110
  
    
    public updateCommunity() {


  		




  ......




  119
  129
  
    
                this._router.navigate(['/community-edit-form'], {queryParams: { "communityId": this.communityId}});


  		




  120
  130
  
    
            }


  		




  121
  131
  
    
        }


  		




  
  132
  
    
        this.resetChange();


  		




  122
  133
  
    
    }


  		




  123
  134
  
    

  		




  124
  135
  
    
    private parseUpdatedCommunity() : {} {


  		




  ......




  214
  225
  
    
            return false;


  		




  215
  226
  
    
    }


  		




  216
  227
  
    

  		




  
  228
  
    
    private change() {


  		




  
  229
  
    
        this.hasChanged = true;


  		




  
  230
  
    
        // TODO remove after testing


  		




  
  231
  
    
        console.log('I have changed: I AM TRUE');


  		




  
  232
  
    
    }


  		




  
  233
  
    

  		




  
  234
  
    
    private resetChange() {


  		




  
  235
  
    
        this.hasChanged = false;


  		




  
  236
  
    
        // TODO remove after testing


  		




  
  237
  
    
        console.log('I have changed: I AM FALSE');


  		




  
  238
  
    
    }


  		




  
  239
  
    

  		




  217
  240
  
    
    public get form() {


  		




  218
  241
  
    
        return this._fb.group({


  		




  219
  242
  
    
            _id : '',


  		












Also available in:  Unified diff