globular-mvc
Version:
Generic template to create web-application that made use of globular as backend and materialize as css (wrap in web-component's)
1,283 lines (1,080 loc) • 89.3 kB
JavaScript
import { Model } from "../Model";
import { v4 as uuidv4 } from "uuid";
import { DeleteResourcePermissionsRqst, GetActionResourceInfosRqst, GetResourcePermissionsByResourceTypeRqst, GetResourcePermissionsRqst, Permissions, Permission, SetResourcePermissionsRqst } from "globular-web-client/rbac/rbac_pb";
import { Account } from "../Account";
import { ApplicationView } from "../ApplicationView";
import { SearchableAccountList, SearchableApplicationList, SearchableGroupList, SearchableOrganizationList, SearchablePeerList } from "./List.js";
import { getAllApplicationsInfo, getAllGroups, GetPackagesDescriptor } from "globular-web-client/api";
import { randomUUID } from "./utility";
import { getAllOrganizations, getOrganizationById } from "./Organization";
import { GetAllActionsRequest } from "globular-web-client/services_manager/services_manager_pb";
import { Application } from "../Application";
import { Group } from "../Group";
import '@polymer/iron-icons/av-icons'
import '@polymer/iron-icons/editor-icons'
import { GetApplicationsRqst, GetPackagesDescriptorRequest, Organization, RejectPeerRqst } from "globular-web-client/resource/resource_pb";
import { File } from "../File";
import { ApplicationInfo, BlogPostInfo, ConversationInfo, DomainInfo, FileInfo, GroupInfo, OrganizationInfo, PackageInfo, RoleInfo, WebpageInfo } from "./Informations";
import * as getUuidByString from "uuid-by-string";
import { getAllPeers, getPeerById } from "./Peers";
import * as JwtDecode from "jwt-decode";
import { GetConversationRequest, GetConversationsRequest } from "globular-web-client/conversation/conversation_pb";
import { getRoleById } from "./Role";
import { LogRqst } from "globular-web-client/log/log_pb";
import { GetBlogPostsRequest } from "globular-web-client/blog/blog_pb";
import { PermissionManager } from "../Permission";
import { FindOneRqst } from "globular-web-client/persistence/persistence_pb";
/**
* Sample empty component
*/
export class PermissionsManager extends HTMLElement {
// attributes.
// Create the applicaiton view.
constructor() {
super()
// The active globule
this.globule = Model.globular
// Set the shadow dom.
this.attachShadow({ mode: 'open' });
// the active permissions.
this.permissions = null
// the active path.
this.path = ""
// The listener
this.savePermissionListener = ""
// Keep the list of possible permissions.
this.permissionsNames = ["read", "write", "delete"]
this.onclose = null
// Innitialisation of the layout.
this.shadowRoot.innerHTML = `
<style>
#container{
display: flex;
flex-direction: column;
padding: 8px;
/*background-color: var(--palette-background-paper);*/
}
#header {
display: flex;
}
.title{
align-items: center;
display: flex;
flex-grow: 1;
font-weight: 400;
color: var(--palette-text-secondary);
border-bottom: 2px solid;
border-color: var(--palette-divider);
}
.permissions{
padding: 10px;
}
::slotted(globular-permissions-viewer){
padding-bottom: 20px;
padding-right: 40px;
}
</style>
<div id="container">
<div id="header">
<div id="path" class="title"> </div>
<paper-icon-button icon="close"></paper-icon-button>
</div>
<slot name="permission-viewer"></slot>
<div style="padding-right: 40px;">
<div class="title">
<div style="display: flex; width: 32px; height: 32px; justify-content: center; align-items: center;position: relative;">
<iron-icon id="owner-collapse-btn" icon="unfold-less" --iron-icon-fill-color:var(--palette-text-primary);"></iron-icon>
<paper-ripple class="circle" recenters=""></paper-ripple>
</div>
Owner(s)
</div>
<iron-collapse class="permissions" id="owner">
<slot name="owner"> </slot>
</iron-collapse>
</div>
<div>
<div style="display: flex; position: relative;">
<div class="title" style="flex-grow: 1;">
<div style="display: flex; width: 32px; height: 32px; justify-content: center; align-items: center;position: relative;">
<iron-icon id="allowed-collapse-btn" icon="unfold-less" --iron-icon-fill-color:var(--palette-text-primary);"></iron-icon>
<paper-ripple class="circle" recenters=""></paper-ripple>
</div>
Allowed(s)
</div>
<paper-icon-button id="add-allowed-btn" icon="icons:add"></paper-icon-button>
</div>
<iron-collapse class="permissions" id="allowed">
<slot name="allowed"> </slot>
</iron-collapse>
</div>
<div>
<div style="display: flex; position: relative;">
<div class="title" style="flex-grow: 1;">
<div style="display: flex; width: 32px; height: 32px; justify-content: center; align-items: center;position: relative;">
<iron-icon id="denied-collapse-btn" icon="unfold-less" --iron-icon-fill-color:var(--palette-text-primary);"></iron-icon>
<paper-ripple class="circle" recenters=""></paper-ripple>
</div>
Denied(s)
</div>
<paper-icon-button id="add-denied-btn" icon="icons:add"></paper-icon-button>
</div>
<iron-collapse class="permissions" id="denied">
<slot name="denied"> </slot>
</iron-collapse>
</div>
</div>
`
// give the focus to the input.
this.container = this.shadowRoot.querySelector("#container")
this.pathDiv = this.shadowRoot.querySelector("#path")
this.style.overflowY = "auto"
// The tree sections.
this.owners = this.shadowRoot.querySelector("#owner")
this.alloweds = this.shadowRoot.querySelector("#allowed")
this.denieds = this.shadowRoot.querySelector("#denied")
// Now the collapse panels...
this.owners_collapse_btn = this.shadowRoot.querySelector("#owner-collapse-btn")
this.owners_collapse_btn.onclick = () => {
if (!this.owners.opened) {
this.owners_collapse_btn.icon = "unfold-more"
} else {
this.owners_collapse_btn.icon = "unfold-less"
}
this.owners.toggle();
}
this.alloweds_collapse_btn = this.shadowRoot.querySelector("#allowed-collapse-btn")
this.alloweds_collapse_btn.onclick = () => {
if (!this.alloweds.opened) {
this.alloweds_collapse_btn.icon = "unfold-more"
} else {
this.alloweds_collapse_btn.icon = "unfold-less"
}
this.alloweds.toggle();
}
this.denieds_collapse_btn = this.shadowRoot.querySelector("#denied-collapse-btn")
this.denieds_collapse_btn.onclick = () => {
if (!this.denieds.opened) {
this.denieds_collapse_btn.icon = "unfold-more"
} else {
this.denieds_collapse_btn.icon = "unfold-less"
}
this.denieds.toggle();
}
this.addDeniedBtn = this.shadowRoot.querySelector("#add-denied-btn")
this.addDeniedBtn.onclick = () => {
this.addPermission(this.addDeniedBtn, "denied")
}
this.addAllowedBtn = this.shadowRoot.querySelector("#add-allowed-btn")
this.addAllowedBtn.onclick = () => {
this.addPermission(this.addAllowedBtn, "allowed")
}
// The close button...
let closeButton = this.shadowRoot.querySelector("paper-icon-button")
closeButton.onclick = () => {
if(this.onclose){
this.onclose()
}
// remove it from it parent.
this.parentNode.removeChild(this)
}
}
hideHeader() {
this.shadowRoot.querySelector("#header").style.display = "none"
}
showHeader() {
this.shadowRoot.querySelector("#header").style.display = ""
}
// Add the list of available permissions.
addPermission(parent, type) {
let addPermissionPanel = parent.parentNode.querySelector("#add-permission-panel")
if (addPermissionPanel == null && this.permissionsNames.length > 0) {
let html = `
<style>
#add-permission-panel{
position: absolute;
right: 20px;
top: ${parent.offsetTop + 20}px;
z-index: 100;
background-color: var(--palette-background-paper);
color: var(--palette-text-primary);
}
.card-content{
overflow-y: auto;
min-width: 200px;
}
paper-card{
background-color: var(--palette-background-paper);
color: var(--palette-text-primary);
}
</style>
<paper-card id="add-permission-panel">
<div style="display: flex; align-items: center;">
<div style="flex-grow: 1; padding: 5px;">
Add Permission
</div>
<paper-icon-button id="cancel-btn" icon="close"></paper-icon-button>
</div>
<div class="card-content">
<paper-radio-group>
</paper-radio-group>
</div>
</paper-card>
`
// Add the fragment.
parent.parentNode.appendChild(document.createRange().createContextualFragment(html))
let buttonGroup = parent.parentNode.querySelector("paper-radio-group")
this.permissionsNames.sort()
this.permissionsNames.forEach(p => {
let radioBtn = document.createElement("paper-radio-button")
radioBtn.name = p
radioBtn.innerHTML = p
buttonGroup.appendChild(radioBtn)
radioBtn.onclick = () => {
this.createPermission(p, type)
let popup = parent.parentNode.querySelector("paper-card")
popup.parentNode.removeChild(popup)
}
})
// Remove the popup...
parent.parentNode.querySelector("#cancel-btn").onclick = () => {
let popup = parent.parentNode.querySelector("paper-card")
popup.parentNode.removeChild(popup)
}
}
}
// Create the permission.
createPermission(name, type) {
// So here I will try to find if the permission already exist in the interface.
let id = "permission_" + name + "_" + type + "_panel"
let panel = this.querySelector("#" + id)
if (panel == null) {
// create the panel.
panel = new PermissionPanel(this)
panel.setAttribute("id", id)
let permission = new Permission
permission.setName(name)
panel.setPermission(permission)
// set the permission in the permissions object.
if (type == "allowed") {
this.permissions.getAllowedList().push(permission)
panel.slot = "allowed"
} else if (type == "denied") {
this.permissions.getDeniedList().push(permission)
panel.slot = "denied"
}
this.appendChild(panel)
} else {
ApplicationView.displayMessage("Permission " + name + " already exist", 3000)
}
if (type == "allowed") {
// display the panel
if (!this.alloweds.opened) {
this.alloweds.toggle()
}
} else if (type == "denied") {
if (!this.denieds.opened) {
this.denieds.toggle()
}
}
}
// Save permissions
savePermissions(callback) {
let rqst = new SetResourcePermissionsRqst
rqst.setPermissions(this.permissions)
rqst.setPath(this.path)
if (!this.permissions.getResourceType()) {
this.permissions.setResourceType("file")
}
rqst.setResourcetype(this.permissions.getResourceType())
this.globule.rbacService.setResourcePermissions(rqst, {
token: localStorage.getItem("user_token"),
application: Model.application,
domain: Model.domain,
address: Model.address
}).then(rsp => {
// reload the interface.
this.setPath(this.path)
Model.publish(Application.account.id + "_change_permission_event", {}, false)
if (callback) {
callback()
}
}).catch(err => {
ApplicationView.displayMessage(err, 3000);
this.setPath(this.path)
// force reload the interfce...
})
}
setPermissions(permissions) {
if (permissions == null) {
console.log("permissions is null")
return;
}
this.permissions = permissions
// clear the panel values.
this.pathDiv.innerHTML = this.path;
this.innerHTML = ""
// set the permssion viewer
this.permissionsViewer = new PermissionsViewer(["read", "write", "delete", "owner"])
this.permissionsViewer.slot = "permission-viewer"
this.permissionsViewer.setPermissions(this.permissions)
this.permissionsViewer.permissionManager = this;
this.appendChild(this.permissionsViewer)
// Here I will display the owner's
let ownersPermissionPanel = new PermissionPanel(this)
ownersPermissionPanel.id = "permission_owners_panel"
ownersPermissionPanel.setPermission(this.permissions.getOwners(), true)
ownersPermissionPanel.slot = "owner"
this.appendChild(ownersPermissionPanel)
// The list of denied and allowed permissions.
this.permissions.getAllowedList().forEach(p => {
let panel = new PermissionPanel(this)
panel.id = "permission_" + p.getName() + "_allowed_panel"
panel.slot = "allowed"
panel.setPermission(p)
this.appendChild(panel)
})
this.permissions.getDeniedList().forEach(p => {
let panel = new PermissionPanel(this)
panel.id = "permission_" + p.getName() + "_denied_panel"
panel.slot = "denied"
panel.setPermission(p)
this.appendChild(panel)
})
}
// retreive the permissions from the backeend and set it in the interface.
setPath(path) {
// Keep the path in memory
this.path = path;
// So here I will get the actual permissions.
let rqst = new GetResourcePermissionsRqst
rqst.setPath(path)
this.globule.rbacService.getResourcePermissions(rqst, {
token: localStorage.getItem("user_token"),
application: Model.application,
domain: Model.domain
}).then(rsp => {
let permissions = rsp.getPermissions()
this.setPermissions(permissions)
}).catch(err => {
// ApplicationView.displayMessage(err, 3000)
console.log("permissions not define for ", path, "new permissions will be created.")
let permissions = new Permissions
permissions.setPath(path)
let owners = new Permission
owners.setName("owner")
permissions.setOwners(owners)
this.setPermissions(permissions)
})
}
// Set the resource type.
setResourceType(resource_type) {
if (this.permissions) {
this.permissions.setResourceType(resource_type)
}
}
}
customElements.define('globular-permissions-manager', PermissionsManager)
/**
* Search Box
*/
export class PermissionPanel extends HTMLElement {
// attributes.
// Create the applicaiton view.
constructor(permissionManager) {
super()
// Set the shadow dom.
this.attachShadow({ mode: 'open' });
this.permissionManager = permissionManager;
// Innitialisation of the layout.
this.shadowRoot.innerHTML = `
<style>
.title{
flex-grow: 1;
font-size: 1.2rem;
font-weight: 400;
color: var(--palette-text-secondary);
border-color: var(--palette-divider);
}
.members{
display: flex;
flex-direction: column;
}
.header{
position: relative;
}
</style>
<div>
<div class="title">
</div>
<div class="members">
</div>
</div>
`
// test create offer...
}
// Set Permission infos...
setPermission(permission, hideTitle) {
this.permission = permission;
if (hideTitle == undefined) {
this.shadowRoot.querySelector(".title").innerHTML = permission.getName()
} else {
this.shadowRoot.querySelector(".title").style.display = "none";
}
// Set's account permissions.
if (permission.getAccountsList().length > 0)
this.setAccountsPermissions(permission.getAccountsList());
else
this.setAccountsPermissions([]);
// Set's groups permissions
if (permission.getGroupsList().length > 0)
this.setGroupsPermissions(permission.getGroupsList());
else
this.setGroupsPermissions([]);
// Set's Applications permissions
if (permission.getApplicationsList().length > 0)
this.setApplicationsPermissions(permission.getApplicationsList());
else
this.setApplicationsPermissions([]);
// Set's Orgnanization permissions
if (permission.getOrganizationsList().length > 0)
this.setOrgnanizationsPermissions(permission.getOrganizationsList());
else
this.setOrgnanizationsPermissions([]);
// Set's Peer permissions
if (permission.getPeersList().length > 0)
this.setPeersPermissions(permission.getPeersList());
else
this.setPeersPermissions([]);
}
// Create a collapseible panel.
createCollapsible(title) {
let uuid = "_" + randomUUID()
let html = `
<style>
.header {
display: flex;
align-items: center;
}
.title{
flex-grow: 1;
}
iron-icon:hover{
cursor: pointer;
}
</style>
<div style="padding-left: 10px; width: 100%">
<div class="header">
<div style="display: flex; width: 32px; height: 32px; justify-content: center; align-items: center;position: relative;">
<iron-icon id="${uuid}-btn" icon="unfold-less" --iron-icon-fill-color:var(--palette-text-primary);"></iron-icon>
<paper-ripple class="circle" recenters=""></paper-ripple>
</div>
<span class="title">${title}</span>
</div>
<iron-collapse id="${uuid}-collapse-panel" style="margin: 5px;">
</iron-collapse>
</div>
`
this.shadowRoot.querySelector(".members").appendChild(document.createRange().createContextualFragment(html))
let content = this.shadowRoot.querySelector(`#${uuid}-collapse-panel`)
this.hideBtn = this.shadowRoot.querySelector(`#${uuid}-btn`)
this.hideBtn.onclick = () => {
let button = this.shadowRoot.querySelector(`#${uuid}-btn`)
if (button && content) {
if (!content.opened) {
button.icon = "unfold-more"
} else {
button.icon = "unfold-less"
}
content.toggle();
}
}
// return the collapse panel.
return this.shadowRoot.querySelector(`#${uuid}-collapse-panel`)
}
// The organization permissions
setPeersPermissions(peers_) {
let content = this.createCollapsible(`Peers(${peers_.length})`)
getAllPeers(
this.permissionManager.globule,
peers => {
let list = []
this.permission.getPeersList().forEach(peerId => {
let p_ = peers.find(p => p.getMac() === peerId);
if (p_ != undefined) {
list.push(p_)
}
})
let peersList = new SearchablePeerList("Peers", list,
p => {
let index = this.permission.getPeersList().indexOf(p.getMac())
if (index != -1) {
this.permission.getPeersList().splice(index, 1)
this.permissionManager.savePermissions()
peersList.removeItem(p)
}
},
p => {
let index = this.permission.getPeersList().indexOf(p.getMac())
if (index == -1) {
this.permission.getPeersList().push(p.getMac())
this.permissionManager.savePermissions()
peersList.appendItem(p)
}
})
// Do not display the title again...
peersList.hideTitle()
content.appendChild(peersList)
}, err => ApplicationView.displayMessage(err, 3000))
}
// The organization permissions
setOrgnanizationsPermissions(organizations_) {
let content = this.createCollapsible(`Organizations(${organizations_.length})`)
getAllOrganizations(
organizations => {
let list = []
this.permission.getOrganizationsList().forEach(organizationId => {
let o_ = organizations.find(o => o.getId() === organizationId);
if (o_ == undefined) {
o_ = organizations.find(o => o.getId() + "@" + o.getDomain() === organizationId);
}
if (o_ != undefined) {
list.push(o_)
}
})
let organizationList = new SearchableOrganizationList("Organizations", list,
o => {
let index = this.permission.getOrganizationsList().indexOf(o.getId())
if (index == -1) {
index = this.permission.getOrganizationsList().indexOf(o.getId() + "@" + o.getDomain())
}
if (index != -1) {
this.permission.getOrganizationsList().splice(index, 1)
this.permissionManager.savePermissions()
organizationList.removeItem(o)
}
},
o => {
let index = this.permission.getOrganizationsList().indexOf(o.getId())
if (index == -1) {
index = this.permission.getOrganizationsList().indexOf(o.getId() + "@" + o.getDomain())
}
if (index == -1) {
this.permission.getOrganizationsList().push(o.getId() + "@" + o.getDomain())
this.permissionManager.savePermissions()
organizationList.appendItem(o)
}
})
// Do not display the title again...
organizationList.hideTitle()
content.appendChild(organizationList)
}, err => ApplicationView.displayMessage(err, 3000), this.permissionManager.globule)
}
// The group permissions
setApplicationsPermissions(applications_) {
let content = this.createCollapsible(`Applications(${applications_.length})`)
getAllApplicationsInfo(this.permissionManager.globule,
applications => {
// I will get the account object whit the given id.
let list = []
this.permission.getApplicationsList().forEach(applicationId => {
let a_ = applications.find(a => a.getId() + "@" + a.getDomain() === applicationId);
if (a_ == undefined) {
a_ = applications.find(a => a.getId() === applicationId);
}
if (a_ != undefined) {
list.push(a_)
}
})
let applicationList = new SearchableApplicationList("Applications", list,
a => {
let index = this.permission.getApplicationsList().indexOf(a.getId())
if (index == -1) {
index = this.permission.getApplicationsList().indexOf(a.getId() + "@" + a.getDomain())
}
if (index != -1) {
this.permission.getApplicationsList().splice(index, 1)
this.permissionManager.savePermissions()
applicationList.removeItem(a)
}
},
a => {
let index = this.permission.getApplicationsList().indexOf(a.getId())
if (index == -1) {
index = this.permission.getApplicationsList().indexOf(a.getId() + "@" + a.getDomain())
}
if (index == -1) {
this.permission.getApplicationsList().push(a.getId() + "@" + a.getDomain())
this.permissionManager.savePermissions()
applicationList.appendItem(a)
}
})
// Do not display the title again...
applicationList.hideTitle()
content.appendChild(applicationList)
}), err => ApplicationView.displayMessage(err, 3000)
}
// The group permissions
setGroupsPermissions(groups_) {
let content = this.createCollapsible(`Groups(${groups_.length})`)
getAllGroups(this.permissionManager.globule,
groups => {
// I will get the account object whit the given id.
let list = []
this.permission.getGroupsList().forEach(groupId => {
let g_ = groups.find(g => g.getId() === groupId);
if (g_ == undefined) {
g_ = groups.find(g => g.getId() + "@" + g.getDomain() === groupId);
}
if (g_ != undefined) {
list.push(g_)
}
})
let groupsList = new SearchableGroupList("Groups", list,
g => {
let index = this.permission.getGroupsList().indexOf(g.getId())
if (index == -1) {
index = this.permission.getGroupsList().indexOf(g.getId() + "@" + g.getDomain())
}
if (index != -1) {
this.permission.getGroupsList().splice(index, 1)
this.permissionManager.savePermissions()
groupsList.removeItem(g)
}
},
g => {
let index = this.permission.getGroupsList().indexOf(g.getId())
if (index == -1) {
index = this.permission.getGroupsList().indexOf(g.getId() + "@" + g.getDomain())
}
if (index == -1) {
this.permission.getGroupsList().push(g.getId() + "@" + g.getDomain())
this.permissionManager.savePermissions()
groupsList.appendItem(g)
}
})
// Do not display the title again...
groupsList.hideTitle()
content.appendChild(groupsList)
}), err => ApplicationView.displayMessage(err, 3000)
}
// Each permission can be set for applications, peers, accounts, groups or organizations
setAccountsPermissions(accounts_) {
let content = this.createCollapsible(`Account(${accounts_.length})`)
// Here I will set the content of the collapse panel.
// Now the account list.
Account.getAccounts("{}",
accounts => {
// I will get the account object whit the given id.
let list = []
accounts_.forEach(accountId => {
let a_ = accounts.find(a => a._id + "@" + a.domain === accountId);
if (a_ == undefined) {
a_ = accounts.find(a => a._id === accountId);
}
if (a_ != undefined) {
list.push(a_)
}
})
let accountsList = new SearchableAccountList("Accounts", list,
a => {
let index = this.permission.getAccountsList().indexOf(a._id)
if (index == -1) {
index = this.permission.getAccountsList().indexOf(a._id + "@" + a.domain)
}
if (index != -1) {
this.permission.getAccountsList().splice(index, 1)
this.permissionManager.savePermissions()
accountsList.removeItem(a)
}
},
a => {
let index = this.permission.getAccountsList().indexOf(a._id)
if (index == -1) {
index = this.permission.getAccountsList().indexOf(a._id + "@" + a.domain)
}
if (index == -1) {
this.permission.getAccountsList().push(a._id + "@" + a.domain)
this.permissionManager.savePermissions()
accountsList.appendItem(a)
}
})
// Do not display the title again...
accountsList.hideTitle()
content.appendChild(accountsList)
}, err => {
ApplicationView.displayMessage(err, 3000)
})
}
}
customElements.define('globular-permission-panel', PermissionPanel)
/**
* Display all permissions at once.
*/
export class PermissionsViewer extends HTMLElement {
// attributes.
// Create the applicaiton view.
constructor(permissionsNames) {
super()
// Set the shadow dom.
this.attachShadow({ mode: 'open' });
this.permissionsNames = permissionsNames;
this.permissionsViewer = null
// Innitialisation of the layout.
this.shadowRoot.innerHTML = `
<style>
#subjects-div{
vertical-align: middle;
text-aling: center;
}
#permissions-div{
display: table;
width: 100%;
vertical-align: middle;
text-aling: center;
}
#permissions-header{
display: table-row;
font-size: 1.0rem;
font-weight: 400;
color: var(--palette-text-secondary);
border-bottom: 2 px solid;
border-color: var(--palette-divider);
width: 100%;
}
#permissions-header div {
display: table-cell;
}
.subject-div{
vertical-align: middle;
text-aling: center;
max-width: 300px;
}
.permission-div{
text-align: center;
vertical-align: middle;
text-aling: center;
}
</style>
<div>
<div id="subjects-div">
</div>
<div id="permissions-div">
</div>
</div>
`
this.subjectsDiv = this.shadowRoot.querySelector("#subjects-div")
this.permissionsDiv = this.shadowRoot.querySelector("#permissions-div")
}
// Set the permission
setPermission(subjects, name, permission) {
if (!permission) {
permission = new Permission
permission.setName(name)
permission.setAccountsList([])
permission.setGroupsList([])
permission.setApplicationsList([])
permission.setOrganizationsList([])
}
// Accounts
permission.getAccountsList().forEach(a => {
let id = a + "_account"
let subject = subjects[id]
if (subject == null) {
subject = {}
subject.type = "account"
subject.id = a
subject.permissions = {}
subjects[id] = subject
}
subject.permissions[permission.getName()] = name
})
// Groups
permission.getGroupsList().forEach(g => {
let id = g + "_group"
let subject = subjects[id]
if (subject == null) {
subject = {}
subject.type = "group"
subject.id = g
subject.permissions = {}
subjects[id] = subject
}
subject.permissions[permission.getName()] = name
})
// Applications
permission.getApplicationsList().forEach(a => {
let id = a + "_application"
let subject = subjects[id]
if (subject == null) {
subject = {}
subject.type = "application"
subject.id = a
subject.permissions = {}
subjects[id] = subject
}
subject.permissions[permission.getName()] = name
})
// Organizations
permission.getOrganizationsList().forEach(o => {
let id = o + "_organization"
let subject = subjects[id]
if (subject == null) {
subject = {}
subject.type = "organization"
subject.id = o
subject.permissions = {}
subjects[id] = subject
}
subject.permissions[permission.getName()] = name
})
// Peers
permission.getPeersList().forEach(p => {
let id = p + "_peer"
let subject = subjects[id]
if (subject == null) {
subject = {}
subject.type = "peer"
subject.id = p
subject.permissions = {}
subjects[id] = subject
}
subject.permissions[permission.getName()] = name
})
}
createAccountDiv(account) {
let uuid = "_" + uuidv4();
let html = `
<style>
</style>
<div id="${uuid}" class="item-div" style="">
<div style="display: flex; align-items: center; padding: 5px; width: 100%;">
<img style="width: 40px; height: 40px; display: ${account.profilePicture.length == 0 ? "none" : "block"};" src="${account.profilePicture_}"></img>
<iron-icon icon="account-circle" style="width: 40px; height: 40px; --iron-icon-fill-color:var(--palette-action-disabled); display: ${account.profilePicture.length != 0 ? "none" : "block"};"></iron-icon>
<div style="display: flex; flex-direction: column; width:250px; font-size: .85em; padding-left: 8px;">
<span>${account.name}</span>
<span>${account.email_}</span>
</div>
</div>
</div>`
this.shadowRoot.appendChild(document.createRange().createContextualFragment(html))
let div = this.shadowRoot.getElementById(uuid)
div.parentNode.removeChild(div)
return div
}
createApplicationDiv(application) {
if (application == undefined) {
console.log("application is not defined")
return
}
let uuid = "_" + uuidv4();
let html = `
<style>
</style>
<div id="${uuid}" class="item-div" style="">
<div style="display: flex; align-items: center; padding: 5px; width: 100%;">
<img style="width: 40px; height: 40px; display: ${application.getIcon() == undefined ? "none" : "block"};" src="${application.getIcon()}"></img>
<iron-icon icon="account-circle" style="width: 40px; height: 40px; --iron-icon-fill-color:var(--palette-action-disabled); display: ${application.getIcon() != undefined ? "none" : "block"};"></iron-icon>
<div style="display: flex; flex-direction: column; width:250px; font-size: .85em; padding-left: 8px;">
<span>${application.getAlias()}</span>
<span>${application.getVersion()}</span>
</div>
</div>
</div>`
this.shadowRoot.appendChild(document.createRange().createContextualFragment(html))
let div = this.shadowRoot.getElementById(uuid)
div.parentNode.removeChild(div)
return div
}
createOrganizationDiv(organization) {
let uuid = "_" + uuidv4();
let html = `
<style>
</style>
<div id="${uuid}" class="item-div" style="">
<div style="display: flex; align-items: center; padding: 5px; width: 100%;">
<iron-icon icon="social:domain" style="width: 40px; height: 40px; --iron-icon-fill-color:var(--palette-action-disabled); display:block"};"></iron-icon>
<div style="display: flex; flex-direction: column; width:250px; font-size: .85em; padding-left: 8px;">
<span>${organization.getName()}</span>
</div>
</div>
</div>`
this.shadowRoot.appendChild(document.createRange().createContextualFragment(html))
let div = this.shadowRoot.getElementById(uuid)
div.parentNode.removeChild(div)
return div
}
createPeerDiv(peer) {
let uuid = "_" + uuidv4();
let html = `
<style>
</style>
<div id="${uuid}" class="item-div" style="">
<div style="display: flex; align-items: center; padding: 5px; width: 100%;">
<iron-icon icon="hardware:computer" style="width: 40px; height: 40px; --iron-icon-fill-color:var(--palette-action-disabled); display:block"};"></iron-icon>
<div style="display: flex; flex-direction: column; width:250px; font-size: .85em; padding-left: 8px;">
<span>${peer.getHostname()} (${peer.getMac()})</span>
</div>
</div>
</div>`
this.shadowRoot.appendChild(document.createRange().createContextualFragment(html))
let div = this.shadowRoot.getElementById(uuid)
div.parentNode.removeChild(div)
return div
}
createGroupDiv(group) {
let uuid = "_" + uuidv4();
let html = `
<style>
</style>
<div id="${uuid}" class="item-div" style="">
<div style="display: flex; align-items: center; padding: 5px; width: 100%;">
<iron-icon icon="social:people" style="width: 40px; height: 40px; --iron-icon-fill-color:var(--palette-action-disabled); display:block"};"></iron-icon>
<div style="display: flex; flex-direction: column; width:250px; font-size: .85em; padding-left: 8px;">
<span>${group.id + "@" + group.domain}</span>
</div>
</div>
</div>`
this.shadowRoot.appendChild(document.createRange().createContextualFragment(html))
let div = this.shadowRoot.getElementById(uuid)
div.parentNode.removeChild(div)
return div
}
setPermissionCell(row, value, permissions, name, subject) {
// The delete permission
let cell = document.createElement("div")
cell.style.display = "table-cell"
cell.className = "permission-div"
let check = document.createElement("iron-icon")
check.icon = "icons:check"
let none = document.createElement("iron-icon")
none.icon = "icons:remove"
let denied = document.createElement("iron-icon")
denied.icon = "av:not-interested"
if (value != undefined) {
if (value == "allowed") {
cell.appendChild(check)
} else if (value == "denied") {
cell.appendChild(denied)
} else if (value == "owner") {
cell.appendChild(check)
}
} else {
cell.appendChild(none)
}
check.onmouseover = none.onmouseover = denied.onmouseover = function (evt) {
this.style.cursor = "pointer"
}
check.onmouseleave = none.onmouseleave = denied.onmouseleave = function (evt) {
this.style.cursor = "default"
}
// Here I will append user interaction...
check.onclick = () => {
if (name == "owner") {
// remove the owner from the column...
let owner_permission = permissions.getOwners()
if (!owner_permission) {
owner_permission = new Permission
owner_permission.setName(name)
owner_permission.setAccountsList([])
owner_permission.setApplicationsList([])
owner_permission.setOrganizationsList([])
owner_permission.setGroupsList([])
permissions.setOwners(owner_permission)
}
if (subject.type == "group") {
let lst = owner_permission.getGroupsList()
lst = lst.filter(g => g != subject.id)
owner_permission.setGroupsList(lst)
} else if (subject.type == "account") {
let lst = owner_permission.getAccountsList()
lst = lst.filter(a => a != subject.id)
owner_permission.setAccountsList(lst)
} else if (subject.type == "application") {
let lst = owner_permission.getApplicationsList()
lst = lst.filter(a => a != subject.id)
owner_permission.setApplicationsList(lst)
} else if (subject.type == "organization") {
let lst = owner_permission.getOrganizationsList()
lst = lst.filter(o => o != subject.id)
owner_permission.setOrganizationsList(lst)
}
// set the icon...
cell.appendChild(none)
if (check.parentNode)
check.parentNode.removeChild(check)
} else {
// Remove previous allowed permission
let allowed_permission = permissions.getAllowedList().filter(p_ => p_.getName() == name)[0]
if (allowed_permission) {
// First I will remove the allowed permission.
if (subject.type == "group") {
let lst = allowed_permission.getGroupsList()
lst = lst.filter(g => g != subject.id)
allowed_permission.setGroupsList(lst)
} else if (subject.type == "account") {
let lst = allowed_permission.getAccountsList()
lst = lst.filter(a => a != subject.id)
allowed_permission.setAccountsList(lst)
} else if (subject.type == "application") {
let lst = allowed_permission.getApplicationsList()
lst = lst.filter(a => a != subject.id)
allowed_permission.setApplicationsList(lst)
} else if (subject.type == "organization") {
let lst = allowed_permission.getOrganizationsList()
lst = lst.filter(o => o != subject.id)
allowed_permission.setOrganizationsList(lst)
}
}
// Append in denied...
let denied_permission = permissions.getDeniedList().filter(p_ => p_.getName() == name)[0]
if (!denied_permission) {
denied_permission = new Permission
denied_permission.setName(name)
denied_permission.setAccountsList([])
denied_permission.setApplicationsList([])
denied_permission.setOrganizationsList([])
denied_permission.setGroupsList([])
let lst = permissions.getDeniedList()
lst.push(denied_permission)
permissions.getDeniedList(lst)
}
if (subject.type == "group") {
let lst = denied_permission.getGroupsList()
if (lst.filter(s => s == subject.id).length == 0) {
lst.push(subject.id)
}
denied_permission.setGroupsList(lst)
} else if (subject.type == "account") {
let lst = denied_permission.getAccountsList()
if (lst.filter(s => s == subject.id).length == 0) {
lst.push(subject.id)
}
denied_permission.setAccountsList(lst)
} else if (subject.type == "application") {
let lst = denied_permission.getApplicationsList()
if (lst.filter(s => s == subject.id).length == 0) {
lst.push(subject.id)
}
denied_permission.setApplicationsList(lst)
} else if (subject.type == "organization") {
let lst = denied_permission.getOrganizationsList()
if (lst.filter(s => s == subject.id).length == 0) {
lst.push(subject.id)
}
denied_permission.setOrgnanizationsPermissions(lst)
}
// set the icon...
cell.appendChild(denied)
if (check.parentNode)
check.parentNode.removeChild(check)
if (none.parentNode)
none.parentNode.removeChild(none)
}
this.permissionManager.savePermissions(() => {
console.log("permission was save!")
})
}
none.onclick = () => {
if (name == "owner") {
let owner_permission = permissions.getOwners()
if (!owner_permis