Skip to content
GitLab
Commit f89d01e2 authored by Rafael Ostertag's avatar Rafael Ostertag
Browse files

Added QfqRecordList.js and mock files.

parent 6fc04734
Hide whitespace changes
Inline Side-by-side
javascript/src/QfqRecordList.js 0 → 100644
View file @ f89d01e2
/**
* @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
*/
/* global $ */
/* global console */
if (!QfqNS) {
var QfqNS = {};
}
(function (n) {
'use strict';
n.QfqRecordList = function (deleteUrl) {
this.deleteUrl = deleteUrl;
this.deleteButtonClass = 'record-delete';
this.recordClass = 'record';
this.sipDataAttribute = 'sip';
this.connectClickHandler();
};
/**
* @private
*/
n.QfqRecordList.prototype.connectClickHandler = function () {
$("." + this.deleteButtonClass).click(this.handleDeleteButtonClick.bind(this));
};
n.QfqRecordList.prototype.handleDeleteButtonClick = function (event) {
var $eventTarget = $(event.target);
var $recordElement = this.getRecordElement(event.target);
if ($recordElement.length !== 1) {
throw new Error($recordElement.length + ' match(es) found for record class');
}
var sip = $eventTarget.data('sip');
if (!sip) {
throw new Error('No `sip` on delete button');
}
var alert = new QfqNS.Alert("Do you really want to delete the record?", "warning", "yesno");
var that = this;
alert.addOkButtonHandler(function () {
$.post(that.deleteUrl + "?s=" + sip)
.done(that.ajaxDeleteSuccessDispatcher.bind(that, $recordElement))
.fail(that.ajaxDeleteFailureHandler.bind(that));
});
alert.show();
};
/**
*
* @param originatingEvent
* @param data
* @param textStatus
* @param jqXHR
*
* @private
*/
n.QfqRecordList.prototype.ajaxDeleteSuccessDispatcher = function ($recordElement, data, textStatus, jqXHR) {
if (!data.status) {
throw new Error("No 'status' property 'data'");
}
switch (data.status) {
case "error":
this.handleLogicDeleteError(data);
break;
case "success":
this.handleDeleteSuccess($recordElement, data);
break;
default:
throw new Error("Status '" + data.status + "' unknown.");
}
};
n.QfqRecordList.prototype.handleDeleteSuccess = function ($recordElement, data) {
if (data.redirect && data.redirect === "url" && data['redirect-url']) {
window.location = data['redirect-url'];
return;
}
if (data.redirect && data.redirect === "no") {
var alert = new QfqNS.Alert("redirect=='no' not allowed", "error");
alert.show();
}
$recordElement.fadeOut(400, function () {
$recordElement.remove();
});
};
n.QfqRecordList.prototype.ajaxDeleteFailureHandler = function (jqXHR, textStatus, errorThrown) {
var alert = new QfqNS.Alert("Error:<br> " +
errorThrown, "error");
alert.show();
};
n.QfqRecordList.prototype.getRecordElement = function (element) {
return $(element).closest('.' + this.recordClass);
};
/**
*
* @param data
*
* @private
*/
n.QfqRecordList.prototype.handleLogicDeleteError = function (data) {
if (!data.message) {
throw Error("Status is 'error' but required 'message' attribute is missing.");
}
var alert = new QfqNS.Alert(data.message, "error");
alert.show();
};
})(QfqNS);
\ No newline at end of file
less/qfq-bs.css.less
View file @ f89d01e2
......@@ -3,6 +3,7 @@
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
/*inline elements in horizontal mode are too much left*/
......
mockup/api/delete_list_ok.json 0 → 100644
View file @ f89d01e2
{
"status": "success",
"message": "successfully deleted item",
"redirect": "client"
}
\ No newline at end of file
mockup/recordlist.html 0 → 100644
View file @ f89d01e2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/jqx.base.css">
<link rel="stylesheet" href="../css/jqx.darkblue.css">
<link rel="stylesheet" href="../css/qfq-bs.css">
<title></title>
</head>
<body>
<label>Delete to
<select name="deleteTo" id="deleteTo">
<option>404 error</option>
<option>delete_list_ok.json</option>
</select>
</label>
<table>
<tr>
<th>Head1</th>
<th>Head2</th>
<th></th>
</tr>
<tr class="record">
<td>1</td>
<td>a</td>
<td>
<button data-sip="1" class="record-delete">Delete</button>
</td>
</tr>
<tr class="record">
<td>2</td>
<td>b</td>
<td>
<button data-sip="2" class="record-delete">Delete</button>
</td>
</tr>
<tr class="record">
<td>3</td>
<td>c</td>
<td>
<button data-sip="3" class="record-delete">Delete</button>
</td>
</tr>
<tr class="record">
<td>4</td>
<td>d</td>
<td>
<button data-sip="4" class="record-delete">Delete</button>
</td>
</tr>
</table>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jqx-all.js"></script>
<script src="../js/qfq.debug.js"></script>
<script type="text/javascript">
$(function () {
'use strict';
var qfqRecordList = new QfqNS.QfqRecordList('api/' + $("#deleteTo").val())
$("#deleteTo").on("change", function (evt) {
qfqRecordList.deleteUrl = 'api/' + $(evt.target).val();
});
QfqNS.Log.level = 0;
});
</script>
</body>
</html>
\ No newline at end of file
tests/jasmine/SpecRunner.html
View file @ f89d01e2
......@@ -26,6 +26,7 @@
<script src="spec/ElementElementSpec.js"></script>
<script src="spec/ElementTextSpec.js"></script>
<script src="spec/ElementRadioSpec.js"></script>
<script src="spec/ElementSelectSpec.js"></script>
<script src="spec/BSTabsSpec.js"></script>
<script src="spec/PageTitleSpec.js"></script>
<script src="spec/FormSpec.js"></script>
......@@ -210,13 +211,26 @@
</div>
<div class="col-md-6">
<select id="personTitle" class="form-control">
<option></option>
<option>none</option>
<option>Dr.</option>
<option>Prof. Dr.</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="selectTest2" class="control-label">Titel</label>
</div>
<div class="col-md-6">
<select id="selectTest2" class="form-control">
<option value="1">a</option>
<option value="2" selected>b</option>
<option value="3">c</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
......@@ -253,6 +267,26 @@
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Reminder Veranstaltung
</b>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
</div>
<div class="col-md-4">
<p class="help-block">Empfängt 'Reminder'-Mails für Veranstaltungen.</p>
</div>
</div>
</form>
</section>
......
tests/jasmine/spec/ElementFormGroupSpec.js
View file @ f89d01e2
......@@ -86,4 +86,8 @@ describe("Element FormGroup", function () {
it("personGender should have a help block", function () {
expect(personGender.hasHelpBlock()).toBe(true);
});
it("should properly disable the item", function () {
personGender.setEnabled(false);
});
});
\ No newline at end of file
tests/jasmine/spec/ElementSelectSpec.js 0 → 100644
View file @ f89d01e2
/**
* @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
*/
/* global describe */
/* global it */
/* global expect */
/* global QfqNS */
/* global beforeAll */
/* global jasmine */
/* global $ */
describe("Element Select", function () {
'use strict';
var personTitleSelect;
var selectTest2;
beforeAll(function () {
personTitleSelect = new QfqNS.Element.Select($('#personTitle'));
selectTest2 = new QfqNS.Element.Select($('#selectTest2'));
});
it("should get selected value", function () {
expect(personTitleSelect.getValue()).toBe("none");
expect(selectTest2.getValue()).toBe('2');
});
});
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment