602 lines
24 KiB
TypeScript

import { Global } from "../../Core/Globals"
import { EventManager } from "../../Core/Events"
import { Ui } from "../../Core/Ui"
import * as Events from "../../Core/EventDefinitions"
import { LocalizationManager } from "../../Core/Localization"
import { Grid, Sort, Filter, Page, RowSelectEventArgs, Resize, ColumnChooser, Reorder } from "@syncfusion/ej2-grids"
import { Query, DataManager, UrlAdaptor } from "@syncfusion/ej2-data";
import * as Models from "../../Common/Models";
import { setValue, getValue } from "@syncfusion/ej2-base";
import ApplicationUserListItem = Models.ApplicationUserListItem;
import User = Events.User;
import * as Utility from "../../Core/Utility";
class UserModuleCustomer {
private _moduleName = "UserModuleCustomer";
private _component = "#usersCustomerContainer";
private _global: Global;
private _eventManager: EventManager;
private _uiManager: Ui;
private _localizationMananger: LocalizationManager;
private _data: any;
private _grid: Grid;
private _dataManager: DataManager;
constructor() {
this._global = Global.getInstance();
this._eventManager = EventManager.getInstance();
this._uiManager = Ui.getInstance();
this._localizationMananger = LocalizationManager.getInstance();
Grid.Inject(Sort, Filter, Page, Resize, ColumnChooser, Reorder);
}
/**
* Stellt einen Prefix vor einen Selektor
* @param selector
*/
private prefix(selector: string): string {
const self = this;
if ($(`${self._component} ${selector}`).length > 0)
return `${self._component} ${selector}`;
return `html ${selector}`;
}
/**
* Einstellungen für die Liste machen
*/
private setupList(): void {
var self = this;
self._dataManager = new DataManager({
url: <string>$(self.prefix("#jsGetUsersUrl")).val(),
adaptor: new UrlAdaptor(),
crossDomain: true,
headers: [{ "X-Requested-With": "XmlHttpRequest" }]
});
self._uiManager.blockUi(self.prefix("#listContainer"));
var query = new Query().addParams("searchValue", $(self.prefix("#search")).valForSearch());
self._grid = new Grid({
dataSource: self._dataManager,
query: query,
height: 450,
enablePersistence: true,
allowSorting: true,
allowFiltering: true,
allowPaging: true,
allowResizing: true,
allowReordering: true,
showColumnChooser: true,
gridLines: "Vertical",
filterSettings: { type: "Menu" },
selectionSettings: { checkboxMode: "ResetOnRowClick", checkboxOnly: false },
columns: <any> [
{ field: "select", type: "checkbox", width: 50, allowFiltering: false, allowSorting: false, showInColumnChooser: false, allowReordering: false },
{ field: "id", type: "string", visible: false, showInColumnChooser: false },
{ field: "Photo", headerText: "", template: "#photoTemplate", allowFiltering: false, allowSorting: false, width: 60 },
{ field: "userName", headerText: self._localizationMananger.get("ApplicationUser_UserName"), type: "string" },
{ field: "firstName", headerText: self._localizationMananger.get("ApplicationUser_FirstName"), type: "string" },
{ field: "lastName", headerText: self._localizationMananger.get("ApplicationUser_LastName"), type: "string" },
{ field: "locked", headerText: self._localizationMananger.get("ApplicationUser_Locked"), type: "boolean", textAlign: "Center", allowFiltering: false, allowSorting: false, template: "#lockTemplate" },
{ field: "emailConfirmed", headerText: self._localizationMananger.get("ApplicationUser_EmailConfirmed_Short"), type: "boolean", textAlign: "Center", allowFiltering: true, allowSorting: true, template: "#confirmedTemplate" },
{ field: "twoFactorEnabled", headerText: self._localizationMananger.get("ApplicationUser_TwoFactorEnabled_Short"), type: "boolean", textAlign: "Center", allowFiltering: true, allowSorting: true, template: "#twoFactorTemplate" },
{ field: "registrationDate", headerText: self._localizationMananger.get("ApplicationUser_RegistrationDate"), format: { type: "dateTime", skeleton: "medium" } },
{ field: "lastLoginDate", headerText: self._localizationMananger.get("ApplicationUser_LastLoginDate"), format: { type: "dateTime", skeleton: "medium" } }
],
pageSettings: { pageSizes: [5,10,25,50,100], pageSize: 50 },
rowSelected: function (args: RowSelectEventArgs) {
self.handleSelection();
},
rowDeselected: function (args: any) {
self.handleSelection();
},
recordDoubleClick: function (args: any) {
self._grid.clearSelection();
if (args.rowIndex !== undefined) {
self._grid.selectRow(args.rowIndex);
self.showEditUser();
}
},
headerCellInfo: function (args) {
if (args.cell.column.field !== "select") {
const toolcontent = args.cell.column.headerText;
args.node.setAttribute("title", toolcontent);
args.node.setAttribute("data-placement", "top");
args.node.setAttribute("data-toggle", "tooltip");
}
},
dataBound: function () {
const cloned = getValue("addOnPersist", self._grid);
setValue("addOnPersist", function (key) {
key = key.filter(item => item !== "selectedRowIndex");
return cloned.call(this, key);
}, self._grid);
setTimeout(() => { $(".tooltip").remove(); $('[data-toggle="tooltip"]').tooltip(); }, 500);
},
actionComplete: function (args) {
if (args.requestType === "filterafteropen") {
if (args.filterModel.dlgDiv.querySelector(".e-autocomplete")) {
var autoObject = args.filterModel.dlgDiv.querySelector(".e-autocomplete").ej2_instances[0];
autoObject.autofill = false;
autoObject.minLength = 20;
autoObject.open = args => { args.popup.element.classList.add("d-none"); };
}
}
}
});
self._grid.appendTo(self.prefix("#gridUsersCustomer"));
self._uiManager.unblockUi(self.prefix("#listContainer"));
}
/**
* Bei Auswahl oder abwahl einer Row...
*/
private handleSelection(): void {
var self = this;
let rows = self._grid.getSelectedRecords() as Array<ApplicationUserListItem>;
$(self.prefix("#btnLock")).hide();
$(self.prefix("#btnLock")).prop("disabled", true);
$(self.prefix("#btnUnlock")).hide();
$(self.prefix("#btnUnlock")).prop("disabled", true);
$(self.prefix("#btnConfirmEmail")).hide();
$(self.prefix("#btnConfirmEmail")).prop("disabled", true);
$(self.prefix("#btnSendConfirmEmail")).hide();
$(self.prefix("#btnSendConfirmEmail")).prop("disabled", true);
$(self.prefix("#btnTwoFactorDisable")).hide();
$(self.prefix("#btnTwoFactorDisable")).prop("disabled", true);
if (rows.length === 0) {
$(self.prefix("#btnEdit")).prop("disabled", true);
$(self.prefix("#btnDelete")).prop("disabled", true);
$(self.prefix("#btnResetPassword")).prop("disabled", true);
}
else {
if (rows.length === 1) {
$(self.prefix("#btnEdit")).prop("disabled", false);
if (rows[0].emailConfirmed === false) {
$(self.prefix("#btnConfirmEmail")).show();
$(self.prefix("#btnConfirmEmail")).prop("disabled", false);
$(self.prefix("#btnSendConfirmEmail")).show();
$(self.prefix("#btnSendConfirmEmail")).prop("disabled", false);
}
if (rows[0].twoFactorEnabled) {
$(self.prefix("#btnTwoFactorDisable")).show();
$(self.prefix("#btnTwoFactorDisable")).prop("disabled", false);
}
} else {
$(self.prefix("#btnEdit")).prop("disabled", true);
}
const existing = rows.find(c => c.userName === $("#jsMe").val());
if (existing !== undefined) {
$(self.prefix("#btnDelete")).prop("disabled", true);
$(self.prefix("#btnResetPassword")).prop("disabled", true);
} else {
$(self.prefix("#btnDelete")).prop("disabled", false);
$(self.prefix("#btnResetPassword")).prop("disabled", false);
}
if (rows.every(c => c.locked)) {
$(self.prefix("#btnUnlock")).show();
$(self.prefix("#btnUnlock")).prop("disabled", false);
} else {
if (existing === undefined) {
$(self.prefix("#btnLock")).show();
$(self.prefix("#btnLock")).prop("disabled", false);
}
}
}
}
/**
* Laden der Einträge
*/
private loadItems(): void {
var self = this;
self._grid.clearSelection();
self._grid.refresh();
self.handleSelection();
}
/**
* Behandeln der Suche via Feld
*/
private _oldSearch = "";
private handleSearch(): void {
var self = this;
if ($(self.prefix("#search")).doSearch()) {
var search = $(self.prefix("#search")).valForSearch();
if (self._oldSearch !== search) {
self._oldSearch = search;
self._grid.clearSelection();
self._grid.query = new Query().addParams("searchValue", $(self.prefix("#search")).valForSearch());
self.handleSelection();
}
}
}
/**
* Benutzer anlegen
*/
private showCreateUser(): void {
var self = this;
self._uiManager.blockMainUi();
$.ajax({
url: <string>$(self.prefix("#jsCreateUserUrl")).val(),
data: <any>{},
dataType: "HTML",
type: "GET",
success(data) {
$(self.prefix("#detail")).html(data);
$(self.prefix("#list")).fadeOut("slow", () => {
$(self.prefix("#detail")).fadeIn("slow");
});
},
error() {
},
complete() {
self._uiManager.unblockMainUi();
}
});
}
/**
* Benutzer bearbeiten
*/
private showEditUser(): void {
var self = this;
self._uiManager.blockMainUi();
$.ajax({
url: <string>$(self.prefix("#jsEditUserUrl")).val(),
data: <any>{ id: (<ApplicationUserListItem>self._grid.getSelectedRecords()[0]).id },
dataType: "HTML",
type: "GET",
success(data) {
$(self.prefix("#detail")).html(data);
$(self.prefix("#list")).fadeOut("slow", () => {
$(self.prefix("#detail")).fadeIn("slow");
});
},
error() {
var x = "muh";
},
complete() {
self._uiManager.unblockMainUi();
}
});
}
/**
* Löschen des gewählten Benutzers
*/
private delete(): void {
var self = usersCustomerModule; //Hier so weil Callback!
self._uiManager.blockMainUi();
let rows = self._grid.getSelectedRecords() as Array<ApplicationUserListItem>;
if (rows.length > 0) {
$.ajax({
url: <string>$(self.prefix("#jsDeleteUserUrl")).val(),
data: <any>{ ids: rows.map(({ id }) => id) },
dataType: "json",
type: "POST",
success(response) {
if (response.success)
self._uiManager.showSuccessMessage(self._localizationMananger.get("Common_Delete_Success"));
else
self._uiManager.showWarningMessage(response.errorMessage);
self.loadItems();
},
error(e) {
self._uiManager.showErrorMessage(self._localizationMananger.get("Common_Delete_NoSuccess"));
},
complete() {
self._uiManager.unblockMainUi();
}
});
}
}
/**
* Sperren des gewählten Benutzers
*/
private lock(): void {
var self = usersCustomerModule; //Hier so weil Callback!
self._uiManager.blockMainUi();
let rows = self._grid.getSelectedRecords() as Array<ApplicationUserListItem>;
if (rows.length > 0) {
$.ajax({
url: <string>$(self.prefix("#jsLockUserUrl")).val(),
data: <any>{ ids: rows.map(({ id }) => id) },
dataType: "json",
type: "POST",
success(response) {
if (response.success)
self._uiManager.showSuccessMessage(self._localizationMananger.get("Common_Save_Success"));
else
self._uiManager.showWarningMessage(response.errorMessage);
self.loadItems();
},
error(e) {
self._uiManager.showErrorMessage(self._localizationMananger.get("Common_Save_NoSuccess"));
},
complete() {
self._uiManager.unblockMainUi();
}
});
}
}
/**
* Entsperren des gewählten Benutzers
*/
private unlock(): void {
var self = usersCustomerModule; //Hier so weil Callback!
self._uiManager.blockMainUi();
let rows = self._grid.getSelectedRecords() as Array<ApplicationUserListItem>;
if (rows.length > 0) {
$.ajax({
url: <string>$(self.prefix("#jsUnlockUserUrl")).val(),
data: <any>{ ids: rows.map(({ id }) => id) },
dataType: "json",
type: "POST",
success(response) {
if (response.success)
self._uiManager.showSuccessMessage(self._localizationMananger.get("Common_Save_Success"));
else
self._uiManager.showWarningMessage(response.errorMessage);
self.loadItems();
},
error(e) {
self._uiManager.showErrorMessage(self._localizationMananger.get("Common_Save_NoSuccess"));
},
complete() {
self._uiManager.unblockMainUi();
}
});
}
}
/**
* Entsperren des gewählten Benutzers
*/
private resetPassword(): void {
var self = usersCustomerModule; //Hier so weil Callback!
self._uiManager.blockMainUi();
let rows = self._grid.getSelectedRecords() as Array<ApplicationUserListItem>;
if (rows.length > 0) {
$.ajax({
url: <string>$(self.prefix("#jsResetPasswordUrl")).val(),
data: <any>{ ids: rows.map(({ id }) => id) },
dataType: "json",
type: "POST",
success(response) {
if (response.success)
self._uiManager.showSuccessMessage(self._localizationMananger.get("Common_ResetPassword_Success"));
else
self._uiManager.showWarningMessage(response.errorMessage);
self.loadItems();
},
error(e) {
self._uiManager.showErrorMessage(self._localizationMananger.get("Common_ResetPassword_NoSuccess"));
},
complete() {
self._uiManager.unblockMainUi();
}
});
}
}
/**
* Bestätigen der Email-Adresse für einen Benutzer
*/
private confirmEmailAddress(): void {
var self = usersCustomerModule; //Hier so weil Callback!
self._uiManager.blockMainUi();
$.ajax({
url: <string>$(self.prefix("#jsConfirmEmailAddressUrl")).val(),
data: <any>{ id: (<ApplicationUserListItem>self._grid.getSelectedRecords()[0]).id },
dataType: "json",
type: "POST",
success(response) {
if (response.success)
self._uiManager.showSuccessMessage(self._localizationMananger.get("Common_Save_Success"));
else
self._uiManager.showErrorMessage(self._localizationMananger.get("Common_Save_NoSuccess"));
self.loadItems();
},
error(e) {
self._uiManager.showErrorMessage(self._localizationMananger.get("Common_Save_NoSuccess"));
},
complete() {
self._uiManager.unblockMainUi();
}
});
}
/**
* Bestätigen der Email-Adresse für einen Benutzer senden
*/
private sendConfirmEmailAddress(): void {
var self = usersCustomerModule; //Hier so weil Callback!
self._uiManager.blockMainUi();
$.ajax({
url: <string>$(self.prefix("#jsSendConfirmEmailAddressUrl")).val(),
data: <any>{ id: (<ApplicationUserListItem>self._grid.getSelectedRecords()[0]).id },
dataType: "json",
type: "POST",
success(response) {
if (response.success)
self._uiManager.showSuccessMessage(self._localizationMananger.get("Common_Save_Success"));
else
self._uiManager.showErrorMessage(self._localizationMananger.get("Common_Save_NoSuccess"));
},
error(e) {
self._uiManager.showErrorMessage(self._localizationMananger.get("Common_Save_NoSuccess"));
},
complete() {
self._uiManager.unblockMainUi();
}
});
}
/**
* Deaktivieren der 2 Faktor Authentifizierung
*/
private twoFactorDisable(): void {
var self = usersCustomerModule; //Hier so weil Callback!
self._uiManager.blockMainUi();
$.ajax({
url: <string>$(self.prefix("#jsTwoFactorDisableUrl")).val(),
data: <any>{ id: (<ApplicationUserListItem>self._grid.getSelectedRecords()[0]).id },
dataType: "json",
type: "POST",
success(response) {
if (response.success)
self._uiManager.showSuccessMessage(self._localizationMananger.get("Common_Save_Success"));
else
self._uiManager.showWarningMessage(response.errorMessage);
self.loadItems();
},
error(e) {
self._uiManager.showErrorMessage(self._localizationMananger.get("Common_Save_NoSuccess"));
},
complete() {
self._uiManager.unblockMainUi();
}
});
}
/**
* Bindungen erstellen
*/
private setupBindings(): void {
var self = this;
$(self.prefix("#btnColumns")).off("click").on("click", function () {
self._grid.columnChooserModule.openColumnChooser();
});
$(self.prefix("#btnAdd")).off("click").on("click", function () {
self.showCreateUser();
});
$(self.prefix("#btnEdit")).off("click").on("click", function () {
self.showEditUser();
});
$(self.prefix("#btnDelete")).off("click").on("click", function () {
if (self._grid.getSelectedRows().length === 1) {
self._uiManager.showModal(self._localizationMananger.get("User_Delete_Question"), true, self.delete);
}
else if (self._grid.getSelectedRows().length > 1) {
self._uiManager.showModal(self._localizationMananger.get("User_Delete_Question_Batch"), true, self.delete);
}
});
$(self.prefix("#btnResetPassword")).off("click").on("click", function () {
if (self._grid.getSelectedRows().length === 1) {
self._uiManager.showModal(self._localizationMananger.get("User_ResetPassword_Question"), true, self.resetPassword);
}
else if (self._grid.getSelectedRows().length > 1) {
self._uiManager.showModal(self._localizationMananger.get("User_ResetPassword_Question_Batch"), true, self.resetPassword);
}
});
$(self.prefix("#btnLock")).off("click").on("click", function () {
if (self._grid.getSelectedRows().length === 1) {
self._uiManager.showModal(self._localizationMananger.get("User_Lock_Question"), true, self.lock);
}
else if (self._grid.getSelectedRows().length > 1) {
self._uiManager.showModal(self._localizationMananger.get("User_Lock_Question_Batch"), true, self.lock);
}
});
$(self.prefix("#btnUnlock")).off("click").on("click", function () {
if (self._grid.getSelectedRows().length === 1) {
self._uiManager.showModal(self._localizationMananger.get("User_Unlock_Question"), true, self.unlock);
}
else if (self._grid.getSelectedRows().length > 1) {
self._uiManager.showModal(self._localizationMananger.get("User_Unlock_Question_Batch"), true, self.unlock);
}
});
$(self.prefix("#btnConfirmEmail")).off("click").on("click", function () {
self._uiManager.showModal(self._localizationMananger.get("User_ConfirmEmail_Question"), true, self.confirmEmailAddress);
});
$(self.prefix("#btnSendConfirmEmail")).off("click").on("click", function () {
self._uiManager.showModal(self._localizationMananger.get("User_SendConfirmEmail_Question"), true, self.sendConfirmEmailAddress);
});
$(self.prefix("#btnTwoFactorDisable")).off("click").on("click", function () {
self._uiManager.showModal(self._localizationMananger.get("Common_DeactivateTwoFactor_Question"), true, self.twoFactorDisable);
});
$(self.prefix("#search")).on("keyup change", Utility.debounce(() => {
self.handleSearch();
}, 500));
self._eventManager.subscribe(User.createCancel, self._moduleName, function () {
$(self.prefix("#detail")).fadeOut("slow", () => {
$(self.prefix("#list")).fadeIn();
$(self.prefix("#detail")).html("");
});
});
self._eventManager.subscribe(User.createSuccess, self._moduleName, function () {
self.loadItems();
$(self.prefix("#detail")).fadeOut("slow", () => {
$(self.prefix("#list")).fadeIn();
$(self.prefix("#detail")).html("");
});
});
self._eventManager.subscribe(User.editCancel, self._moduleName, function () {
$(self.prefix("#detail")).fadeOut("slow", () => {
$(self.prefix("#list")).fadeIn();
$(self.prefix("#detail")).html("");
});
});
self._eventManager.subscribe(User.editSuccess, self._moduleName, function () {
self.loadItems();
$(self.prefix("#detail")).fadeOut("slow", () => {
$(self.prefix("#list")).fadeIn();
$(self.prefix("#detail")).html("");
});
});
}
/**
* Aktivieren des Moduls
*/
public activate(): void {
//console.log("Users activate");
var self = this;
$.setupValidator();
$.reinitializeValidator();
this.setupBindings();
$.randomAutocompleteValue();
self.setupList();
}
/**
* Initialisieren des Moduls
*/
public init(): void {
if (this._global.appInitialized) {
usersCustomerModule.activate();
} else {
setTimeout(() => { this.init(); }, 10);
}
}
}
let usersCustomerModule = new UserModuleCustomer();
usersCustomerModule.init();