提交 b4c6e2f3 编写于 作者: Y Yiming Liu

Merge pull request #66 from lepdou/v2

portal can load data
package com.ctrip.apollo.core.dto;
import java.util.Date;
public class ItemDTO {
private long id;
......@@ -12,6 +14,10 @@ public class ItemDTO {
private String comment;
private String dataChangeLastModifiedBy;
private Date dataChangeLastModifiedTime;
public ItemDTO() {
}
......@@ -60,4 +66,20 @@ public class ItemDTO {
public void setValue(String value) {
this.value = value;
}
public String getDataChangeLastModifiedBy() {
return dataChangeLastModifiedBy;
}
public void setDataChangeLastModifiedBy(String dataChangeLastModifiedBy) {
this.dataChangeLastModifiedBy = dataChangeLastModifiedBy;
}
public Date getDataChangeLastModifiedTime() {
return dataChangeLastModifiedTime;
}
public void setDataChangeLastModifiedTime(Date dataChangeLastModifiedTime) {
this.dataChangeLastModifiedTime = dataChangeLastModifiedTime;
}
}
......@@ -97,12 +97,12 @@ public class ConfigService {
NamespaceVO.ItemVO itemVO = new NamespaceVO.ItemVO();
itemVO.setItem(itemDTO);
String key = itemDTO.getKey();
String value = itemDTO.getValue();
String newValue = itemDTO.getValue();
String oldValue = releaseItems.get(key);
if (value.equals(oldValue)) {
if (oldValue == null || !newValue.equals(oldValue)) {
itemVO.setModified(true);
itemVO.setOldValue(oldValue);
itemVO.setNewValue(value);
itemVO.setOldValue(oldValue == null ? "" : oldValue);
itemVO.setNewValue(newValue);
}
return itemVO;
}
......
......@@ -3,7 +3,7 @@ var appService = angular.module('app.service', ['ngResource']);
/** page module 定义*/
//项目主页
var application_module = angular.module('application', ['ngResource','ui.router', 'app.service', 'toastr', 'angular-loading-bar', 'ngTable']);
var application_module = angular.module('application', ['ngResource','ui.router', 'app.service', 'toastr', 'angular-loading-bar']);
//创建项目页面
var create_app_module = angular.module('create_app', ['ngResource', 'toastr', 'app.service', 'angular-loading-bar']);
......
"use strict";
application_module.controller("AppConfigController",
['$scope', '$location', 'toastr', 'NgTableParams', 'AppService', 'ConfigService',
function ($scope, $location, toastr, NgTableParams, AppService, ConfigService) {
['$scope', '$location', 'toastr', 'AppService', 'ConfigService',
function ($scope, $location, toastr, AppService, ConfigService) {
$scope.appId = $location.$$url.split("=")[1];
......@@ -38,374 +37,13 @@ application_module.controller("AppConfigController",
///////////
$scope.env = 'LOCAL';
$scope.clusterName = 'DEFAULT';
ConfigService.load_all_namespaces($scope.appId, $scope.env,
$scope.clusterName).then(function (result) {
$scope.clusterName = 'default';
ConfigService.load_all_namespaces($scope.appId, $scope.env, $scope.clusterName).then(
function (result) {
$scope.namespaces = result;
}, function (result) {
toastr.error("加载配置信息出错");
});
var simpleList = [{
key: 'page',
value: 10,
comment: '页面大小',
dataChangeLastModifiedTime: '2016-02-23',
dataChangeLastModifiedBy: '网鱼'
},
{
key: 'page',
value: 10,
comment: '页面大小',
dataChangeLastModifiedTime: '2016-02-23',
dataChangeLastModifiedBy: '网鱼'
},
{
key: 'page',
value: 10,
comment: '页面大小',
dataChangeLastModifiedTime: '2016-02-23',
dataChangeLastModifiedBy: '网鱼'
},
{
key: 'page',
value: 5,
comment: '页面大小',
modified: "true",
dataChangeLastModifiedTime: '2016-02-23',
dataChangeLastModifiedBy: '网鱼'
},
{
key: 'ss',
value: 10,
comment: '页面大小',
dataChangeLastModifiedTime: '2016-02-23',
dataChangeLastModifiedBy: '网鱼'
},
{
key: 'page',
value: 10,
comment: '页面大小',
dataChangeLastModifiedTime: '2016-02-23',
dataChangeLastModifiedBy: '网鱼'
},
{
key: 'page',
value: 10,
comment: '页面大小',
dataChangeLastModifiedTime: '2016-02-23',
dataChangeLastModifiedBy: '网鱼'
},
{
key: 'page',
value: 10,
comment: '页面大小',
dataChangeLastModifiedTime: '2016-02-23',
dataChangeLastModifiedBy: '网鱼'
},
{
key: 'page',
value: 10,
comment: '页面大小',
dataChangeLastModifiedTime: '2016-02-23',
dataChangeLastModifiedBy: '网鱼'
}];
function Namespace(data) {
Namespace.prototype.data = data;
Namespace.prototype.tableParams = new NgTableParams({
count: 9999
}, {
dataset: angular.copy(data)
});
Namespace.prototype.deleteCount = 0;
Namespace.prototype.isEditing = false;
Namespace.prototype.isAdding = false;
Namespace.prototype.add = function () {
this.isEditing = true;
this.isAdding = true;
this.tableParams.settings().dataset.unshift({
name: "",
age: null,
money: null
});
this.tableParams.sorting({});
this.tableParams.page(1);
this.tableParams.reload();
};
Namespace.prototype.cancelChanges = function () {
this.resetTableStatus();
var currentPage = this.tableParams.page();
this.tableParams.settings({
dataset: angular.copy(this.data)
});
// keep the user on the current page when we can
if (!this.isAdding) {
this.tableParams.page(currentPage);
}
};
Namespace.prototype.del = function () {
_.remove(this.tableParams.settings().dataset,
function (item) {
return row === item;
});
this.deleteCount++;
this.tableTracker.untrack(row);
this.tableParams.reload().then(function (data) {
if (data.length === 0 && this.tableParams.total() > 0) {
this.tableParams.page(this.tableParams.page() - 1);
this.tableParams.reload();
}
});
};
Namespace.prototype.hasChanges = function () {
return this.tableForm.$dirty || this.deleteCount > 0
};
Namespace.prototype.saveChanges = function () {
this.resetTableStatus();
var currentPage = this.tableParams.page();
this.data = angular.copy(this.tableParams.settings().dataset);
};
Namespace.prototype.resetTableStatus = function () {
this.isEditing = false;
this.isAdding = false;
this.deleteCount = 0;
this.tableTracker.reset();
this.tableForm.$setPristine();
}
}
var space = new Namespace(simpleList);
$scope.cancelChanges = function () {
space.cancelChanges();
};
$scope.space = space;
}]);
(function () {
"use strict";
application_module.run(configureDefaults);
configureDefaults.$inject = ["ngTableDefaults"];
function configureDefaults(ngTableDefaults) {
ngTableDefaults.params.count = 5;
ngTableDefaults.settings.counts = [];
}
})();
/**********
The following directives are necessary in order to track dirty state and validity of the rows
in the table as the user pages within the grid
------------------------
*/
(function () {
application_module.directive("trackedTable", trackedTable);
trackedTable.$inject = [];
function trackedTable() {
return {
restrict: "A",
priority: -1,
require: "ngForm",
controller: trackedTableController
};
}
trackedTableController.$inject = ["$attrs", "$element", "$parse", "$scope"];
function trackedTableController($attrs, $element, $parse, $scope) {
var self = this;
var tableForm = $element.controller("form");
var dirtyCellsByRow = [];
var invalidCellsByRow = [];
init();
////////
function init() {
var setter = $parse($attrs.trackedTable).assign;
setter($scope, self);
$scope.$on("$destroy", function () {
setter(null);
});
self.reset = reset;
self.isCellDirty = isCellDirty;
self.setCellDirty = setCellDirty;
self.setCellInvalid = setCellInvalid;
self.untrack = untrack;
}
function getCellsForRow(row, cellsByRow) {
return _.find(cellsByRow, function (entry) {
return entry.row === row;
})
}
function isCellDirty(row, cell) {
var rowCells = getCellsForRow(row, dirtyCellsByRow);
return rowCells && rowCells.cells.indexOf(cell) !== -1;
}
function reset() {
dirtyCellsByRow = [];
invalidCellsByRow = [];
setInvalid(false);
}
function setCellDirty(row, cell, isDirty) {
setCellStatus(row, cell, isDirty, dirtyCellsByRow);
}
function setCellInvalid(row, cell, isInvalid) {
setCellStatus(row, cell, isInvalid, invalidCellsByRow);
setInvalid(invalidCellsByRow.length > 0);
}
function setCellStatus(row, cell, value, cellsByRow) {
var rowCells = getCellsForRow(row, cellsByRow);
if (!rowCells && !value) {
return;
}
if (value) {
if (!rowCells) {
rowCells = {
row: row,
cells: []
};
cellsByRow.push(rowCells);
}
if (rowCells.cells.indexOf(cell) === -1) {
rowCells.cells.push(cell);
}
} else {
_.remove(rowCells.cells, function (item) {
return cell === item;
});
if (rowCells.cells.length === 0) {
_.remove(cellsByRow, function (item) {
return rowCells === item;
});
}
}
}
function setInvalid(isInvalid) {
self.$invalid = isInvalid;
self.$valid = !isInvalid;
}
function untrack(row) {
_.remove(invalidCellsByRow, function (item) {
return item.row === row;
});
_.remove(dirtyCellsByRow, function (item) {
return item.row === row;
});
setInvalid(invalidCellsByRow.length > 0);
}
}
})();
(function () {
application_module.directive("trackedTableRow", trackedTableRow);
trackedTableRow.$inject = [];
function trackedTableRow() {
return {
restrict: "A",
priority: -1,
require: ["^trackedTable", "ngForm"],
controller: trackedTableRowController
};
}
trackedTableRowController.$inject = ["$attrs", "$element", "$parse", "$scope"];
function trackedTableRowController($attrs, $element, $parse, $scope) {
var self = this;
var row = $parse($attrs.trackedTableRow)($scope);
var rowFormCtrl = $element.controller("form");
var trackedTableCtrl = $element.controller("trackedTable");
self.isCellDirty = isCellDirty;
self.setCellDirty = setCellDirty;
self.setCellInvalid = setCellInvalid;
function isCellDirty(cell) {
return trackedTableCtrl.isCellDirty(row, cell);
}
function setCellDirty(cell, isDirty) {
trackedTableCtrl.setCellDirty(row, cell, isDirty)
}
function setCellInvalid(cell, isInvalid) {
trackedTableCtrl.setCellInvalid(row, cell, isInvalid)
}
}
})();
(function() {
application_module.directive("trackedTableCell", trackedTableCell);
trackedTableCell.$inject = [];
function trackedTableCell() {
return {
restrict: "A",
priority: -1,
scope: true,
require: ["^trackedTableRow", "ngForm"],
controller: trackedTableCellController
};
}
trackedTableCellController.$inject = ["$attrs", "$element", "$scope"];
function trackedTableCellController($attrs, $element, $scope) {
var self = this;
var cellFormCtrl = $element.controller("form");
var cellName = cellFormCtrl.$name;
var trackedTableRowCtrl = $element.controller("trackedTableRow");
if (trackedTableRowCtrl.isCellDirty(cellName)) {
cellFormCtrl.$setDirty();
} else {
cellFormCtrl.$setPristine();
}
// note: we don't have to force setting validaty as angular will run validations
// when we page back to a row that contains invalid data
$scope.$watch(function() {
return cellFormCtrl.$dirty;
}, function(newValue, oldValue) {
if (newValue === oldValue) return;
trackedTableRowCtrl.setCellDirty(cellName, newValue);
});
$scope.$watch(function() {
return cellFormCtrl.$invalid;
}, function(newValue, oldValue) {
if (newValue === oldValue) return;
trackedTableRowCtrl.setCellInvalid(cellName, newValue);
});
}
})();
......@@ -19,6 +19,9 @@ a{
}
/*panel*/
.panel{
border: 1px solid #ddd;
}
.panel-heading {
height: 45px;
font-size: 14px;
......
......@@ -13,7 +13,8 @@
<body>
<div ng-include="'../common/nav.html'"></div>
<div class="container-fluid">
<div class="container-fluid">
<div class="app" ng-controller="AppConfigController as appConfig">
<!--配置信息-->
......@@ -28,23 +29,23 @@
<div class="col-md-10 config-item-container">
<div class="cluster-namespace J_cluster-namespace">
<div ng-repeat="namespace in namespaces">
<div class="panel">
<header class="panel-heading">
<div class="row">
<div class="col-md-3">
<b>hermas</b>
<span class="label label-info">有修改,可发布
<span class="badge">4</span></span>
<div class="col-md-4">
<b>{{namespace.namespace.namespaceName}}</b>
<span class="label label-info" ng-show="namespace.itemModifiedCnt > 0">有修改,可发布
<span class="badge">{{namespace.itemModifiedCnt}}</span></span>
</div>
<div class="col-md-7">
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<button type="button"
class="btn btn-primary btn-sm J_tableview_btn">发布
class="btn btn-default btn-sm J_tableview_btn">发布
</button>
<button type="button"
class="btn btn-danger btn-sm J_tableview_btn">回滚
class="btn btn-default btn-sm J_tableview_btn">回滚
</button>
<button type="button"
class="btn btn-default btn-sm J_historyview_btn">
......@@ -62,10 +63,6 @@
</div>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button"
class="btn btn-info btn-sm J_tableview_btn" disabled>
视图
</button>
<button type="button"
class="btn btn-default btn-sm J_tableview_btn">文本
</button>
......@@ -80,136 +77,70 @@
</div>
</div>
<div class="col-md-2 text-right">
&nbsp;&nbsp;
<a data-toggle="tooltip" data-placement="top" title="取消修改"
ng-if="appConfig.space.isEditing" ng-click="cancelChanges()">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
<div class="col-md-1 text-right">
&nbsp;
<a data-toggle="tooltip" data-placement="top" title="修改配置"
ng-if="!appConfig.space.isEditing" ng-click="appConfig.space.isEditing = true">
<a data-toggle="tooltip" data-placement="top" title="修改配置">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a data-toggle="tooltip" data-placement="top" title="保存修改"
ng-if="appConfig.space.isEditing"
ng-disabled="!appConfig.space.hasChanges() || appConfig.space.tableTracker.$invalid"
ng-click="appConfig.space.saveChanges()">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</a>
&nbsp;
<a data-toggle="tooltip" data-placement="top" title="添加配置"
ng-click="appConfig.space.add()" ng-if="appConfig.space.isEditing">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</a>
</div>
</div>
</header>
<!--配置列表-->
<div class="J_tableview">
<table ng-table="appConfig.space.tableParams"
class="table table-bordered text-center table-hover editable-table"
ng-form="appConfig.space.tableForm" disable-filter="appConfig.space.isAdding"
tracked-table="appConfig.space.tableTracker">
<colgroup>
<col width="20%"/>
<col width="25%"/>
<col width="25%"/>
<col width="10%"/>
<col width="10%"/>
<col width="10%"/>
</colgroup>
<tr ng-repeat="row in $data" ng-form="rowForm" tracked-table-row="row"
ng-class="{danger:row.modified}">
<td title="'Key'" filter="{key: 'text'}" sortable="'key'"
ng-switch="appConfig.space.isEditing" ng-class="key.$dirty ? 'bg-warning' : ''"
ng-form="key" tracked-table-cell>
<span ng-switch-default class="editable-text">{{row.key}}</span>
<div class="controls"
ng-class="key.$invalid && key.$dirty ? 'has-error' : ''"
ng-switch-when="true">
<input type="text" name="key" ng-model="row.key"
class="editable-input form-control input-sm" required/>
</div>
<table class="table table-bordered text-center table-hover">
<thead>
<tr>
<th>
Key
</th>
<th>
value
</th>
<th>
备注
</th>
<th>
最后修改人
</th>
<th>
最后修改时间
</th>
</tr>
</thead>
<tbody ng-repeat="config in namespace.items">
<tr ng-class="{warning:config.modified}">
<td>
{{config.item.key}}
</td>
<td title="'Value'" filter="{value: 'text'}" sortable="'value'"
ng-switch="appConfig.space.isEditing"
ng-class="value.$dirty ? 'bg-warning' : ''"
ng-form="value" tracked-table-cell>
<a data-toggle="tooltip" data-placement="top" title="查看旧值"
class="glyphicon glyphicon-eye-open" ng-show="row.modified"
aria-hidden="true"></a>
<span ng-switch-default class="editable-text">{{row.value}}</span>
<div class="controls"
ng-class="value.$invalid && value.$dirty ? 'has-error' : ''"
ng-switch-when="true">
<input type="text" name="value" ng-model="row.value"
class="editable-input form-control input-sm" required/>
</div>
<td>
{{config.item.value}}
</td>
<td title="'备注'" filter="{comment: 'text'}" sortable="'comment'"
ng-switch="appConfig.space.isEditing"
ng-class="comment.$dirty ? 'bg-warning' : ''"
ng-form="comment" tracked-table-cell>
<span ng-switch-default class="editable-text">{{row.comment}}</span>
<div class="controls"
ng-class="comment.$invalid && comment.$dirty ? 'has-error' : ''"
ng-switch-when="true">
<input type="text" name="comment" ng-model="row.comment"
class="editable-input form-control input-sm" required/>
</div>
<td>
{{config.item.comment}}
</td>
<td title="'最后修改者'"
filter="{dataChangeLastModifiedBy: 'text'}"
sortable="'dataChangeLastModifiedBy'"
ng-switch="appConfig.space.isEditing"
ng-class="dataChangeLastModifiedBy.$dirty ? 'bg-warning' : ''"
ng-form="dataChangeLastModifiedBy" tracked-table-cell>
<span ng-switch-default class="editable-text">{{row.dataChangeLastModifiedBy}}</span>
<div class="controls"
ng-class="dataChangeLastModifiedBy.$invalid && dataChangeLastModifiedBy.$dirty ? 'has-error' : ''"
ng-switch-when="true">
<input type="text" name="dataChangeLastModifiedBy"
ng-model="row.dataChangeLastModifiedBy"
class="editable-input form-control input-sm" required/>
</div>
<td>
{{config.item.dataChangeLastModifiedBy}}
</td>
<td title="'最后修改时间'"
sortable="'value'"
ng-switch="appConfig.space.isEditing"
ng-class="dataChangeLastModifiedTime.$dirty ? 'bg-warning' : ''"
ng-form="dataChangeLastModifiedTime" tracked-table-cell>
<span ng-switch-default class="editable-text">{{row.dataChangeLastModifiedTime}}</span>
<div class="controls"
ng-class="dataChangeLastModifiedTime.$invalid && dataChangeLastModifiedTime.$dirty ? 'has-error' : ''"
ng-switch-when="true">
<input type="text" name="dataChangeLastModifiedTime"
ng-model="row.dataChangeLastModifiedTime"
class="editable-input form-control input-sm" required/>
</div>
</td>
<td ng-if="appConfig.space.isEditing" tracked-table-cell>
<button class="btn btn-danger btn-sm" ng-click="appConfig.space.del(row)"
ng-disabled="!appConfig.space.isEditing"><span
class="glyphicon glyphicon-trash"></span></button>
<td>
{{config.item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd HH:mm:ss'}}
</td>
</tr>
</tbody>
</table>
</div>
<!--历史修改视图-->
<div class="J_historyview Hide historyview">
<div class="row">
<div class="col-md-11 col-md-offset-1 list" style="">
<div class="media">
<img src="../../img/history.png"/>
<div class="row">
<div class="col-md-10"><h5 class="media-heading">2016-02-23
12:23
王玉</h5>
<p>
修改comment
</p></div>
......@@ -222,10 +153,12 @@
</div>
<div class="media">
<img src="../../img/history.png"/>
<div class="row">
<div class="col-md-10"><h5 class="media-heading">2016-02-23
12:23
王玉</h5>
<p>
修改comment
</p></div>
......@@ -240,23 +173,6 @@
</div>
</div>
<!--commit-->
<div class="media J_commitchange Hide">
<div class="media-left">
<a href="#">
<img class="media-object" src="../../img/icon.jpg" style="height: 75px; width: 75px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Commit changes</h4>
<textarea class="form-control" rows="4"></textarea>
<br>
<button class="btn btn-default" type="submit">submit</button>
<button class="btn btn-default" type="submit">cancel</button>
</div>
</div>
</div>
</div>
......@@ -266,7 +182,7 @@
</div>
</div>
</div>
</div>
<div ng-include="'../common/footer.html'"></div>
......@@ -282,7 +198,6 @@
<script src="../../vendor/angular/angular-resource.min.js"></script>
<script src="../../vendor/angular/angular-toastr-1.4.1.tpls.min.js"></script>
<script src="../../vendor/angular/loading-bar.min.js"></script>
<script src="../../vendor/angular/ng-table.min.js"></script>
<!-- bootstrap.js -->
<script src="../../vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册