You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

200 lines
5.9 KiB
JavaScript

angular.module('albums', ['ngResource', 'ui.bootstrap']).
factory('Albums', function ($resource) {
return $resource('albums');
}).
factory('Album', function ($resource) {
return $resource('albums/:id', {id: '@id'});
}).
factory("EditorStatus", function () {
var editorEnabled = {};
var enable = function (id, fieldName) {
editorEnabled = { 'id': id, 'fieldName': fieldName };
};
var disable = function () {
editorEnabled = {};
};
var isEnabled = function(id, fieldName) {
return (editorEnabled['id'] == id && editorEnabled['fieldName'] == fieldName);
};
return {
isEnabled: isEnabled,
enable: enable,
disable: disable
}
});
function AlbumsController($scope, $modal, Albums, Album, Status) {
function list() {
$scope.albums = Albums.query();
}
function clone (obj) {
return JSON.parse(JSON.stringify(obj));
}
function saveAlbum(album) {
Albums.save(album,
function () {
Status.success("Album saved");
list();
},
function (result) {
Status.error("Error saving album: " + result.status);
}
);
}
$scope.addAlbum = function () {
var addModal = $modal.open({
templateUrl: 'templates/albumForm.html',
controller: AlbumModalController,
resolve: {
album: function () {
return {};
},
action: function() {
return 'add';
}
}
});
addModal.result.then(function (album) {
saveAlbum(album);
});
};
$scope.updateAlbum = function (album) {
var updateModal = $modal.open({
templateUrl: 'templates/albumForm.html',
controller: AlbumModalController,
resolve: {
album: function() {
return clone(album);
},
action: function() {
return 'update';
}
}
});
updateModal.result.then(function (album) {
saveAlbum(album);
});
};
$scope.deleteAlbum = function (album) {
Album.delete({id: album.id},
function () {
Status.success("Album deleted");
list();
},
function (result) {
Status.error("Error deleting album: " + result.status);
}
);
};
$scope.setAlbumsView = function (viewName) {
$scope.albumsView = "templates/" + viewName + ".html";
};
$scope.init = function() {
list();
$scope.setAlbumsView("grid");
$scope.sortField = "name";
$scope.sortDescending = false;
};
}
function AlbumModalController($scope, $modalInstance, album, action) {
$scope.albumAction = action;
$scope.yearPattern = /^[1-2]\d{3}$/;
$scope.album = album;
$scope.ok = function () {
$modalInstance.close($scope.album);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
function AlbumEditorController($scope, Albums, Status, EditorStatus) {
$scope.enableEditor = function (album, fieldName) {
$scope.newFieldValue = album[fieldName];
EditorStatus.enable(album.id, fieldName);
};
$scope.disableEditor = function () {
EditorStatus.disable();
};
$scope.isEditorEnabled = function (album, fieldName) {
return EditorStatus.isEnabled(album.id, fieldName);
};
$scope.save = function (album, fieldName) {
if ($scope.newFieldValue === "") {
return false;
}
album[fieldName] = $scope.newFieldValue;
Albums.save({}, album,
function () {
Status.success("Album saved");
list();
},
function (result) {
Status.error("Error saving album: " + result.status);
}
);
$scope.disableEditor();
};
$scope.disableEditor();
}
angular.module('albums').
directive('inPlaceEdit', function () {
return {
restrict: 'E',
transclude: true,
replace: true,
scope: {
ipeFieldName: '@fieldName',
ipeInputType: '@inputType',
ipeInputClass: '@inputClass',
ipePattern: '@pattern',
ipeModel: '=model'
},
template:
'<div>' +
'<span ng-hide="isEditorEnabled(ipeModel, ipeFieldName)" ng-click="enableEditor(ipeModel, ipeFieldName)">' +
'<span ng-transclude></span>' +
'</span>' +
'<span ng-show="isEditorEnabled(ipeModel, ipeFieldName)">' +
'<div class="input-append">' +
'<input type="{{ipeInputType}}" name="{{ipeFieldName}}" class="{{ipeInputClass}}" ' +
'ng-required ng-pattern="{{ipePattern}}" ng-model="newFieldValue" ' +
'ui-keyup="{enter: \'save(ipeModel, ipeFieldName)\', esc: \'disableEditor()\'}"/>' +
'<div class="btn-group btn-group-xs" role="toolbar">' +
'<button ng-click="save(ipeModel, ipeFieldName)" type="button" class="btn"><span class="glyphicon glyphicon-ok"></span></button>' +
'<button ng-click="disableEditor()" type="button" class="btn"><span class="glyphicon glyphicon-remove"></span></button>' +
'</div>' +
'</div>' +
'</span>' +
'</div>',
controller: 'AlbumEditorController'
};
});