mirror of
https://github.com/MikroWizard/mikrofront.git
synced 2026-01-01 06:49:32 +00:00
MikroWizard Initial commit | MikroFront Welcome to the world :)
This commit is contained in:
sepehr
commit
b97aec6b97
203 changed files with 41097 additions and 0 deletions
21
src/app/views/permissions/permissions-routing.module.ts
Normal file
21
src/app/views/permissions/permissions-routing.module.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { PermissionsComponent } from './permissions.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: PermissionsComponent,
|
||||
data: {
|
||||
title: $localize`Permissions`
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class PermissionsRoutingModule {
|
||||
}
|
||||
137
src/app/views/permissions/permissions.component.html
Normal file
137
src/app/views/permissions/permissions.component.html
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
<c-row>
|
||||
<c-col xs>
|
||||
<c-card class="mb-4">
|
||||
<c-card-header>
|
||||
<c-row>
|
||||
<c-col xs [lg]="10">
|
||||
Permissions
|
||||
</c-col>
|
||||
<c-col xs [lg]="2" style="text-align: right;">
|
||||
<button cButton color="primary" (click)="editAddTask({},'showadd')"><i
|
||||
class="fa-solid fa-plus"></i></button>
|
||||
</c-col>
|
||||
</c-row>
|
||||
</c-card-header>
|
||||
<c-card-body>
|
||||
<gui-grid [rowHeight]="82" [autoResizeWidth]="true" [source]="source" [columnMenu]="columnMenu"
|
||||
[sorting]="sorting" [autoResizeWidth]=true [paging]="paging">
|
||||
<gui-grid-column header="Name" field="name">
|
||||
<ng-template let-value="item.name" let-item="item" let-index="index">
|
||||
{{value}} </ng-template>
|
||||
</gui-grid-column>
|
||||
<gui-grid-column width="auto" header="Perms" field="perms">
|
||||
<ng-template let-value="item.role" let-item="item" let-index="index">
|
||||
<div style="text-wrap: initial;">
|
||||
<ng-container *ngFor="let perm of item['perms'] | keyvalue">
|
||||
<c-badge *ngIf="perm.value" class="m-1" color="success">{{perm.key}}</c-badge>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
<gui-grid-column header="Actions" width="120" field="action">
|
||||
<ng-template let-value="item.id" let-item="item" let-index="index">
|
||||
<button cButton color="warning" size="sm" class="mx-1" (click)="editAddTask(item,'edit');"><i
|
||||
class="fa-regular fa-pen-to-square"></i></button>
|
||||
<button cButton color="danger" size="sm" (click)="confirm_delete(item);"><i
|
||||
class="fa-regular fa-trash-can"></i></button>
|
||||
</ng-template>
|
||||
</gui-grid-column>
|
||||
</gui-grid>
|
||||
</c-card-body>
|
||||
</c-card>
|
||||
</c-col>
|
||||
</c-row>
|
||||
<c-modal-header>
|
||||
|
||||
|
||||
<c-modal #EditTaskModal backdrop="static" size="lg" [(visible)]="EditTaskModalVisible" id="EditTaskModal">
|
||||
<c-modal-header>
|
||||
<h5 *ngIf="action=='edit'" cModalTitle>Editing Permission {{SelectedPerm['name']}}</h5>
|
||||
<h5 *ngIf="action=='add'" cModalTitle>Adding new Permission Rule</h5>
|
||||
<button [cModalToggle]="EditTaskModal.id" cButtonClose></button>
|
||||
</c-modal-header>
|
||||
<c-modal-body>
|
||||
|
||||
<div [cFormFloating]="true" class="mb-3">
|
||||
<input cFormControl id="floatingInput" placeholder="permname" [(ngModel)]="permname" />
|
||||
<label cLabel for="floatingInput">Name</label>
|
||||
</div>
|
||||
<c-row>
|
||||
<c-col>
|
||||
<c-form-check *ngFor='let val of ["api","ftp","password","read","romon","sniff","telnet","tikapp","winbox"]'
|
||||
[switch]="true">
|
||||
<input cFormCheckInput [(ngModel)]="perms[val] " type="checkbox" />
|
||||
<label cFormCheckLabel>{{ val}}</label>
|
||||
</c-form-check>
|
||||
</c-col>
|
||||
<c-col>
|
||||
<c-form-check
|
||||
*ngFor='let val of ["dude","local","policy","reboot","rest-api","sensitive","ssh","test","web","write"]'
|
||||
[switch]="true">
|
||||
<input cFormCheckInput [(ngModel)]="perms[val] " type="checkbox" />
|
||||
<label cFormCheckLabel>{{ val}}</label>
|
||||
</c-form-check>
|
||||
</c-col>
|
||||
</c-row>
|
||||
<ng-container *ngIf="SelectedMembers.length>0 && EditTaskModalVisible">
|
||||
<c-badge class="mx-1" *ngFor="let id of splitids(SelectedPermItems)"
|
||||
color="dark">{{get_member_by_id(id).name}}</c-badge>
|
||||
</ng-container>
|
||||
<!--
|
||||
<c-input-group class="mb-3">
|
||||
<cron-editor #cronEditorDemo1 [(ngModel)]="SelectedPerm['cron']" [options]="cronOptions">Cron here...</cron-editor>
|
||||
</c-input-group>
|
||||
-->
|
||||
|
||||
</c-modal-body>
|
||||
<c-modal-footer>
|
||||
<button *ngIf="action=='add'" (click)="submit('add')" cButton color="primary">Add</button>
|
||||
<button *ngIf="action=='edit'" (click)="submit('edit')" cButton color="primary">save</button>
|
||||
<button [cModalToggle]="EditTaskModal.id" cButton color="secondary">
|
||||
Close
|
||||
</button>
|
||||
</c-modal-footer>
|
||||
</c-modal>
|
||||
|
||||
|
||||
<c-modal #DeleteConfirmModal backdrop="static" [(visible)]="DeleteConfirmModalVisible" id="DeleteConfirmModal">
|
||||
<c-modal-header>
|
||||
<h5 cModalTitle>Confirm delete {{ SelectedPerm['name'] }}</h5>
|
||||
<button [cModalToggle]="DeleteConfirmModal.id" cButtonClose></button>
|
||||
</c-modal-header>
|
||||
<c-modal-body>
|
||||
Are you sure that You want to delete following Permission?
|
||||
<br />
|
||||
<br />
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td><b>Permission name : </b>{{ SelectedPerm['name'] }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<ng-container *ngFor="let perm of SelectedPerm['perms'] | keyvalue">
|
||||
<c-badge *ngIf="perm.value" class="m-1" color="success">{{perm.key}}</c-badge>
|
||||
</ng-container>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code
|
||||
style="padding: 0!important;"><b>Warning:</b> ALL Given <b>device access</b> related to this permision in Users Section <b>will be deleted</b> for each user</code>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</c-modal-body>
|
||||
<c-modal-footer>
|
||||
<button (click)="confirm_delete('',true)" cButton color="danger">
|
||||
Yes,Delete!
|
||||
</button>
|
||||
<button [cModalToggle]="DeleteConfirmModal.id" cButton color="info">
|
||||
Close
|
||||
</button>
|
||||
</c-modal-footer>
|
||||
</c-modal>
|
||||
|
||||
|
||||
<c-toaster position="fixed" placement="top-end"></c-toaster>
|
||||
260
src/app/views/permissions/permissions.component.ts
Normal file
260
src/app/views/permissions/permissions.component.ts
Normal file
|
|
@ -0,0 +1,260 @@
|
|||
import { Component, OnInit, QueryList, ViewChildren } from "@angular/core";
|
||||
import { dataProvider } from "../../providers/mikrowizard/data";
|
||||
import { Router } from "@angular/router";
|
||||
import { loginChecker } from "../../providers/login_checker";
|
||||
import {
|
||||
GuiColumn,
|
||||
GuiColumnMenu,
|
||||
GuiPaging,
|
||||
GuiPagingDisplay,
|
||||
} from "@generic-ui/ngx-grid";
|
||||
|
||||
import { ToasterComponent } from "@coreui/angular";
|
||||
import { AppToastComponent } from "../toast-simple/toast.component";
|
||||
|
||||
interface IUser {
|
||||
name: string;
|
||||
state: string;
|
||||
registered: string;
|
||||
country: string;
|
||||
usage: number;
|
||||
period: string;
|
||||
payment: string;
|
||||
activity: string;
|
||||
avatar: string;
|
||||
status: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
templateUrl: "permissions.component.html",
|
||||
})
|
||||
export class PermissionsComponent implements OnInit {
|
||||
public uid: number;
|
||||
public uname: string;
|
||||
|
||||
constructor(
|
||||
private data_provider: dataProvider,
|
||||
private router: Router,
|
||||
private login_checker: loginChecker
|
||||
) {
|
||||
var _self = this;
|
||||
if (!this.login_checker.isLoggedIn()) {
|
||||
setTimeout(function () {
|
||||
_self.router.navigate(["login"]);
|
||||
}, 100);
|
||||
}
|
||||
this.data_provider.getSessionInfo().then((res) => {
|
||||
_self.uid = res.uid;
|
||||
_self.uname = res.name;
|
||||
const userId = _self.uid;
|
||||
|
||||
if (res.role != "admin") {
|
||||
setTimeout(function () {
|
||||
_self.router.navigate(["/user/dashboard"]);
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
//get datagrid data
|
||||
function isNotEmpty(value: any): boolean {
|
||||
return value !== undefined && value !== null && value !== "";
|
||||
}
|
||||
}
|
||||
@ViewChildren(ToasterComponent) viewChildren!: QueryList<ToasterComponent>;
|
||||
|
||||
public source: Array<any> = [];
|
||||
public columns: Array<GuiColumn> = [];
|
||||
public loading: boolean = true;
|
||||
public rows: any = [];
|
||||
public SelectedPerm: any = {};
|
||||
public SelectedPermItems: string = "";
|
||||
|
||||
public EditTaskModalVisible: boolean = false;
|
||||
public DeleteConfirmModalVisible: boolean = false;
|
||||
public Members: any = "";
|
||||
public SelectedMembers: any = [];
|
||||
|
||||
public action: string = "add";
|
||||
public permid: number = 0;
|
||||
public permname: string = "";
|
||||
public perms: { [index: string]: boolean } = {
|
||||
api: false,
|
||||
ftp: false,
|
||||
password: false,
|
||||
read: false,
|
||||
romon: false,
|
||||
sniff: false,
|
||||
telnet: false,
|
||||
tikapp: false,
|
||||
winbox: false,
|
||||
dude: false,
|
||||
local: false,
|
||||
policy: false,
|
||||
reboot: false,
|
||||
"rest-api": false,
|
||||
sensitive: false,
|
||||
ssh: false,
|
||||
test: false,
|
||||
web: false,
|
||||
write: false,
|
||||
};
|
||||
|
||||
toasterForm = {
|
||||
autohide: true,
|
||||
delay: 3000,
|
||||
position: "fixed",
|
||||
fade: true,
|
||||
closeButton: true,
|
||||
};
|
||||
|
||||
public sorting = {
|
||||
enabled: true,
|
||||
multiSorting: true,
|
||||
};
|
||||
|
||||
public paging: GuiPaging = {
|
||||
enabled: true,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
pageSizes: [5, 10, 25, 50],
|
||||
display: GuiPagingDisplay.ADVANCED,
|
||||
};
|
||||
|
||||
public columnMenu: GuiColumnMenu = {
|
||||
enabled: true,
|
||||
sort: true,
|
||||
columnsManager: true,
|
||||
};
|
||||
show_toast(title: string, body: string, color: string) {
|
||||
const { ...props } = { ...this.toasterForm, color, title, body };
|
||||
const componentRef = this.viewChildren.first.addToast(
|
||||
AppToastComponent,
|
||||
props,
|
||||
{}
|
||||
);
|
||||
componentRef.instance["closeButton"] = props.closeButton;
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.initGridTable();
|
||||
}
|
||||
submit(action: string) {
|
||||
var _self = this;
|
||||
if (action == "add") {
|
||||
this.data_provider
|
||||
.create_perm(_self.permname, _self.perms)
|
||||
.then((res) => {
|
||||
if (res["status"] == "failed") {
|
||||
_self.show_toast(
|
||||
"Error",
|
||||
res.err,
|
||||
"danger"
|
||||
);
|
||||
return;
|
||||
} else {
|
||||
_self.initGridTable();
|
||||
this.EditTaskModalVisible = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.data_provider
|
||||
.edit_perm(_self.permid, _self.permname, _self.perms)
|
||||
.then((res) => {
|
||||
if (res["status"] == "failed") {
|
||||
_self.show_toast(
|
||||
"Error",
|
||||
res.err,
|
||||
"danger"
|
||||
);
|
||||
return;
|
||||
} else {
|
||||
_self.initGridTable();
|
||||
this.EditTaskModalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
editAddTask(item: any, action: string) {
|
||||
if (action == "showadd") {
|
||||
this.permname = item["name"];
|
||||
this.perms = {
|
||||
api: false,
|
||||
ftp: false,
|
||||
password: false,
|
||||
read: false,
|
||||
romon: false,
|
||||
sniff: false,
|
||||
telnet: false,
|
||||
tikapp: false,
|
||||
winbox: false,
|
||||
dude: false,
|
||||
local: false,
|
||||
policy: false,
|
||||
reboot: false,
|
||||
"rest-api": false,
|
||||
sensitive: false,
|
||||
ssh: false,
|
||||
test: false,
|
||||
web: false,
|
||||
write: false,
|
||||
};
|
||||
this.permid = 0;
|
||||
this.action = "add";
|
||||
this.EditTaskModalVisible = true;
|
||||
return;
|
||||
}
|
||||
this.action = "edit";
|
||||
this.permname = item["name"];
|
||||
this.perms = item.perms;
|
||||
this.permid = item["id"];
|
||||
this.EditTaskModalVisible = true;
|
||||
}
|
||||
|
||||
splitids(ids: string = "") {
|
||||
return ids.split(",");
|
||||
}
|
||||
|
||||
get_member_by_id(id: string) {
|
||||
return this.Members.find((x: any) => x.id == id);
|
||||
}
|
||||
|
||||
confirm_delete(item: any = "", del: boolean = false) {
|
||||
if (!del) {
|
||||
this.SelectedPerm = { ...item };
|
||||
this.DeleteConfirmModalVisible = true;
|
||||
} else {
|
||||
var _self = this;
|
||||
this.data_provider.delete_perm(_self.SelectedPerm["id"]).then((res) => {
|
||||
if (res["status"] == "failed") {
|
||||
_self.show_toast(
|
||||
"Error",
|
||||
res.err,
|
||||
"danger"
|
||||
);
|
||||
return;
|
||||
}
|
||||
else{
|
||||
_self.initGridTable();
|
||||
_self.DeleteConfirmModalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
logger(item: any) {
|
||||
console.dir(item);
|
||||
}
|
||||
|
||||
initGridTable(): void {
|
||||
var _self = this;
|
||||
var page = 1;
|
||||
var pageSize = 10;
|
||||
var searchstr = "";
|
||||
this.data_provider.get_perms(page, pageSize, searchstr).then((res) => {
|
||||
_self.source = res.map((x: any) => {
|
||||
return x;
|
||||
});
|
||||
_self.loading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
43
src/app/views/permissions/permissions.module.ts
Normal file
43
src/app/views/permissions/permissions.module.ts
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import { NgModule } from "@angular/core";
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { FormsModule } from "@angular/forms";
|
||||
|
||||
import {
|
||||
ButtonGroupModule,
|
||||
ButtonModule,
|
||||
CardModule,
|
||||
FormModule,
|
||||
GridModule,
|
||||
NavModule,
|
||||
TabsModule,
|
||||
ModalModule,
|
||||
BadgeModule,
|
||||
ToastModule,
|
||||
} from "@coreui/angular";
|
||||
import { IconModule } from "@coreui/icons-angular";
|
||||
|
||||
import { PermissionsRoutingModule } from "./permissions-routing.module";
|
||||
import { PermissionsComponent } from "./permissions.component";
|
||||
import { GuiGridModule } from "@generic-ui/ngx-grid";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
PermissionsRoutingModule,
|
||||
CardModule,
|
||||
NavModule,
|
||||
IconModule,
|
||||
TabsModule,
|
||||
CommonModule,
|
||||
GridModule,
|
||||
ToastModule,
|
||||
FormModule,
|
||||
ButtonModule,
|
||||
ButtonGroupModule,
|
||||
GuiGridModule,
|
||||
ModalModule,
|
||||
FormsModule,
|
||||
BadgeModule,
|
||||
],
|
||||
declarations: [PermissionsComponent],
|
||||
})
|
||||
export class PermissionsModule {}
|
||||
Loading…
Add table
Add a link
Reference in a new issue