Shows changes for user versions

Change-Id: I376a8ffe10001f404e01acc3526a2c5b911c2816

ui/app/admin/admin.module.ts

@@ -23,7 +23,7 @@ import { RouterModule } from '@angular/router';
 import { SharedModule } from '../shared.module';
 
 import { AdminComponent, UsersComponent,
-  RolesComponent, PermissionsGroup } from './index';
+  RolesComponent, PermissionsGroup, UserDiff } from './index';
 import { RoleNameStep, RoleApiPermissionsStep, RolePlaybookPermissionsStep, UserStep } from './wizard_steps/index';
 
 @NgModule({
@@ -32,7 +32,7 @@ import { RoleNameStep, RoleApiPermissionsStep, RolePlaybookPermissionsStep, User
     UsersComponent,
     RolesComponent,
     PermissionsGroup,
-    RoleNameStep, RoleApiPermissionsStep, RolePlaybookPermissionsStep, UserStep
+    RoleNameStep, RoleApiPermissionsStep, RolePlaybookPermissionsStep, UserStep, UserDiff
   ],
   imports: [
     BrowserModule,
@@ -48,7 +48,7 @@ import { RoleNameStep, RoleApiPermissionsStep, RolePlaybookPermissionsStep, User
     UsersComponent,
     RolesComponent,
     PermissionsGroup,
-    RoleNameStep, RoleApiPermissionsStep, RolePlaybookPermissionsStep, UserStep
+    RoleNameStep, RoleApiPermissionsStep, RolePlaybookPermissionsStep, UserStep, UserDiff
   ]
 })
 export class AdminModule { }

ui/app/admin/index.ts

@@ -19,4 +19,5 @@ export * from './admin.module';
 export * from './admin';
 export * from './users';
 export * from './roles';
+export * from './user_diff';
 export * from './admin.routes';

ui/app/admin/user_diff.ts

@@ -0,0 +1,62 @@
+/**
+* Copyright (c) 2016 Mirantis Inc.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*    http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+* implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+import { Component, Input } from '@angular/core';
+import * as _ from 'lodash';
+
+type change = {
+  name: string,
+  oldValue: string,
+  newValue: string
+}
+
+@Component({
+  selector: 'diff',
+  templateUrl: './app/templates/user_diff.html'
+})
+export class UserDiff {
+  @Input() index: number;
+  @Input() versions: any[] = [];
+  diff: change[] = [];
+  currentVersion: any;
+  fields = {
+    login: 'Login',
+    full_name: 'Full Name',
+    email: 'Email',
+    role_id: 'Role ID'
+  };
+
+  ngOnInit() {
+    this.currentVersion = this.versions[this.index];
+
+    if (!this.index) return;
+
+    let currentData = this.currentVersion.data;
+    let previousData = this.versions[this.index - 1].data;
+
+    _.forEach(this.fields, (name, field) => {
+      let [oldValue, newValue] = [currentData[field], previousData[field]];
+
+      console.log(field, oldValue, newValue);
+      if (!_.isEqual(oldValue, newValue)) {
+        this.diff.push({name, oldValue, newValue});
+      }
+    });
+
+    console.log(this.diff);
+  }
+}

ui/app/pipes.ts

@@ -49,14 +49,14 @@ function two(value: number): string {
 
 @Pipe({name: 'date_time'})
 export class DateTime implements PipeTransform {
-  transform(value: number): string {
+  transform(value: number, showTime: boolean = true): string {
     var date = new Date(1000 * value);
     return two(date.getDate()) + '/' +
       two(1 + date.getMonth()) + '/' +
-      date.getFullYear() + ' ' +
+      date.getFullYear() + (showTime ? ' ' +
       two(date.getHours()) + ':' +
       two(date.getMinutes()) + ':' +
-      two(date.getSeconds());
+      two(date.getSeconds()) : '');
   }
 }
 

ui/app/styles/main.less

@@ -605,6 +605,24 @@ label {
   }
 }
 
+.user-diff.grid {
+  .grid-header {
+    padding: auto 15px;
+    div {
+      text-align: center;
+    }
+  }
+  .row {
+    border: solid 1px @background - 50%;
+    border-width: 1px 0 0 0;
+    margin-left: 0px;
+    margin-right: 0px;
+    div:first-child, div:nth-child(2) {
+      text-align: center;
+    }
+  }
+}
+
 .permissions.long-content {
   padding-bottom: 10px;
 }

ui/app/styles/styles.css

@@ -7774,6 +7774,22 @@ a.grid .grid-header .icon:focus {
 .roles.grid .icon {
   text-align: center;
 }
+.user-diff.grid .grid-header {
+  padding: auto 15px;
+}
+.user-diff.grid .grid-header div {
+  text-align: center;
+}
+.user-diff.grid .row {
+  border: solid 1px #acb0b2;
+  border-width: 1px 0 0 0;
+  margin-left: 0px;
+  margin-right: 0px;
+}
+.user-diff.grid .row div:first-child,
+.user-diff.grid .row div:nth-child(2) {
+  text-align: center;
+}
 .permissions.long-content {
   padding-bottom: 10px;
 }

ui/app/templates/user_diff.html

@@ -0,0 +1,11 @@
+<div class="row">
+  <div class="col-xs-1">{{currentVersion.version}}</div>
+  <div class="col-xs-2">{{currentVersion.time_updated|date_time:false}}</div>
+  <div class="col-xs-9">
+    <ul>
+      <li *ngFor="let change of diff">
+        <strong>{{change.name}}:</strong> {{change.oldValue}} &rarr; {{change.newValue}}
+      </li>
+    </ul>
+  </div>
+</div>

ui/app/templates/users.html

@@ -157,8 +157,17 @@
         </div>
 
         <div class="col-xs-7">
-          <div *ngFor="let user of getUserVersions(user)">
-            {{user.version}}: {{user.time_updated|date_time}}
+          <div class="user-diff grid">
+            <div class="grid-header">
+              <div class="col-xs-1 name">Ver.</div>
+              <div class="col-xs-2 name">Date</div>
+              <div class="col-xs-9 name">Changes</div>
+            </div>
+            <diff
+              *ngFor="let user of getUserVersions(user);let i = index"
+              [index]="i"
+              [versions]="getUserVersions(user)"
+            ></diff>
           </div>
         </div>