Working permission row addition and removal
This commit is contained in:
Jake Barnby
parent
531247deb4
commit
a5e6c04cb0
|
|
@ -528,8 +528,6 @@ $logs = $this->getParam('logs', null);
|
|||
data-failure-param-alert-text="Failed to update collection"
|
||||
data-failure-param-alert-classname="error">
|
||||
|
||||
<label> </label>
|
||||
|
||||
<div class="box">
|
||||
<label for="collection-name">Name</label>
|
||||
<input name="name" id="collection-name" type="text" autocomplete="off" data-ls-bind="{{project-collection.name}}" data-forms-text-direction required placeholder="Collection Name" maxlength="128" />
|
||||
|
|
@ -544,11 +542,10 @@ $logs = $this->getParam('logs', null);
|
|||
|
||||
<hr class="margin-top-small" />
|
||||
|
||||
<div
|
||||
class="permissions-matrix margin-bottom-large"
|
||||
data-ls-attrs="x-init=console.log({{project-collection}})"
|
||||
x-data="{permissions: []}">
|
||||
<table>
|
||||
<div class="permissions-matrix margin-bottom-large" x-data="permissionsMatrix">
|
||||
<input type="hidden" data-ls-bind="{{project-collection.$permissions}}" :value="rawPermissions"/>
|
||||
|
||||
<table data-ls-attrs="x-init=load({{project-collection.$permissions}})">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Role</th>
|
||||
|
|
@ -560,53 +557,51 @@ $logs = $this->getParam('logs', null);
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template x-for="permission in permissions">
|
||||
<template x-for="(permission, index) in permissions">
|
||||
<tr>
|
||||
<td>
|
||||
<label></label>
|
||||
<p x-text="permission.role"></p>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" name="read" id="read" value="1"/>
|
||||
<input type="checkbox" name="read" x-model="permission.read"/>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" name="create" id="create" value="1"/>
|
||||
<input type="checkbox" name="create" x-model="permission.create"/>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" name="update" id="update" value="1"/>
|
||||
<input type="checkbox" name="update" x-model="permission.update"/>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" name="delete" id="delete" value="1"/>
|
||||
<input type="checkbox" name="delete" x-model="permission.xdelete"/>
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" @click="deleteRow(index)"></button>
|
||||
<button type="button" @click="removePermission(index)"></button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr>
|
||||
<td style="vertical-align: middle">
|
||||
<input type="text" name="permission" id="permission" />
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<input type="checkbox" name="read" id="read" value="1"/>
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<input type="checkbox" name="create" id="create" value="1"/>
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<input type="checkbox" name="update" id="update" value="1"/>
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<input type="checkbox" name="delete" id="delete" value="1"/>
|
||||
</td>
|
||||
<tr x-data="permissionsRow" x-on:addrow.window="addPermission(role,read,create,update,xdelete)">
|
||||
<td>
|
||||
<button type="button" class="icon-trash"></button>
|
||||
<input style="display:block; vertical-align: middle" type="text" name="role" x-model="role" />
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<input type="checkbox" name="read" x-model="read" />
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<input type="checkbox" name="create" x-model="create"/>
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<input type="checkbox" name="update" x-model="update" />
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<input type="checkbox" name="delete" x-model="xdelete" />
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>
|
||||
<button type="button" class="btn btn-primary" @click="addRow()">Add</button>
|
||||
<td colspan="6">
|
||||
<button type="button" class="btn btn-primary" @click="$dispatch('addrow')">Add</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ const configApp = {
|
|||
'public/scripts/app.js',
|
||||
'public/scripts/upload-modal.js',
|
||||
'public/scripts/events.js',
|
||||
'public/scripts/permissions-matrix.js',
|
||||
|
||||
'public/scripts/views/service.js',
|
||||
|
||||
|
|
|
|||
8
public/dist/scripts/app-all.js
vendored
8
public/dist/scripts/app-all.js
vendored
|
|
@ -4041,7 +4041,11 @@ this.action=action;},showModal(modal){document.documentElement.classList.add("mo
|
|||
if(this.hasSubSubResource){event+=`.${this.subSubType}.${this.subSubResource ? this.subSubResource : '*'}`;}
|
||||
if(this.action){event+=`.${this.action}`;}
|
||||
if(this.attribute){event+=`.${this.attribute}`;}
|
||||
this.events.add(event);this.reset();},removeEvent(value){this.events.delete(value);}}));});})(window);(function(window){"use strict";window.ls.view.add({selector:"data-service",controller:function(element,view,container,form,alerts,expression,window){let action=element.dataset["service"];let service=element.dataset["name"]||null;let event=expression.parse(element.dataset["event"]);let confirm=element.dataset["confirm"]||"";let loading=element.dataset["loading"]||"";let loaderId=null;let scope=element.dataset["scope"]||"sdk";let success=element.dataset["success"]||"";let failure=element.dataset["failure"]||"";let running=false;let callbacks={hide:function(){return function(){return element.style.opacity='0';};},reset:function(){return function(){if("FORM"===element.tagName){return element.reset();}
|
||||
this.events.add(event);this.reset();},removeEvent(value){this.events.delete(value);}}));});})(window);(function(window){document.addEventListener('alpine:init',()=>{Alpine.data('permissionsMatrix',()=>({permissions:[],rawPermissions:[],load(permissions){this.rawPermissions=permissions;permissions.map(p=>{let parts=p.split('(')
|
||||
let type=parts[0];let roles=parts[1].replace(')','').replace(' ','').split(',');roles.map(role=>{let index=-1
|
||||
let existing=this.permissions.find((p,idx)=>{if(p.role===role){index=idx;return true;}})
|
||||
if(existing===undefined){this.permissions.push({role,[type]:true,})}
|
||||
existing[type]=true;this.permissions[index]=existing;});})},addPermission(role,read,create,update,xdelete){if(read)this.rawPermissions.push(`read(${role})`);if(create)this.rawPermissions.push(`create(${role})`);if(update)this.rawPermissions.push(`update(${role})`);if(xdelete)this.rawPermissions.push(`delete(${role})`);console.log(this.rawPermissions);this.permissions.push({role,read,create,update,xdelete});this.reset()},removePermission(index){let row=this.permissions.splice(index,1);this.rawPermissions=this.rawPermissions.filter(p=>!p.includes(row.role));}}));Alpine.data('permissionsRow',()=>({role:'',read:false,create:false,update:false,xdelete:false,reset(){this.role='';this.read=this.create=this.update=this.xdelete=false;}}));});})(window);(function(window){"use strict";window.ls.view.add({selector:"data-service",controller:function(element,view,container,form,alerts,expression,window){let action=element.dataset["service"];let service=element.dataset["name"]||null;let event=expression.parse(element.dataset["event"]);let confirm=element.dataset["confirm"]||"";let loading=element.dataset["loading"]||"";let loaderId=null;let scope=element.dataset["scope"]||"sdk";let success=element.dataset["success"]||"";let failure=element.dataset["failure"]||"";let running=false;let callbacks={hide:function(){return function(){return element.style.opacity='0';};},reset:function(){return function(){if("FORM"===element.tagName){return element.reset();}
|
||||
throw new Error("This callback is only valid for forms");};},alert:function(text,classname){return function(alerts){alerts.add({text:text,class:classname||"success"},6000);};},redirect:function(url){return function(router){if(url==="/console"){window.location=url;return;}
|
||||
router.change(url||"/");};},reload:function(){return function(router){router.reload();};},state:function(keys){let updateQueryString=function(key,value,url){var re=new RegExp("([?&])"+key+"=.*?(&|#|$)(.*)","gi"),hash;if(re.test(url)){if(typeof value!=="undefined"&&value!==null){return url.replace(re,"$1"+key+"="+value+"$2$3");}else{hash=url.split("#");url=hash[0].replace(re,"$1$3").replace(/(&|\?)$/,"");if(typeof hash[1]!=="undefined"&&hash[1]!==null){url+="#"+hash[1];}
|
||||
return url;}}else{if(typeof value!=="undefined"&&value!==null){var separator=url.indexOf("?")!==-1?"&":"?";hash=url.split("#");url=hash[0]+separator+key+"="+value;if(typeof hash[1]!=="undefined"&&hash[1]!==null){url+="#"+hash[1];}
|
||||
|
|
@ -4101,7 +4105,7 @@ if(observer){observer.disconnect();}else{observer=new MutationObserver(populateC
|
|||
populateChart();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-code",controller:function(element,alerts){let lang=element.dataset["formsCode"]||"json";let div=document.createElement("div");let pre=document.createElement("pre");let code=document.createElement("code");let copy=document.createElement("i");div.appendChild(pre);div.appendChild(copy);pre.appendChild(code);element.parentNode.appendChild(div);element.style.display='none';div.className="ide";div.dataset['langLabel']=element.dataset["langLabel"]||'JSON';div.dataset['lang']=element.dataset["lang"]||'json';pre.className="line-numbers";code.className="prism language-"+lang;copy.className="icon-docs copy";copy.textContent="Click Here to Copy";copy.title="Copy to Clipboard";copy.addEventListener("click",function(){window.getSelection().removeAllRanges();let range=document.createRange();range.selectNode(code);window.getSelection().addRange(range);try{document.execCommand("copy");alerts.add({text:"Copied to clipboard",class:""},3000);}catch(err){alerts.add({text:"Failed to copy text ",class:"error"},3000);}
|
||||
window.getSelection().removeAllRanges();});let check=function(){if(!element.value){return;}
|
||||
let value=null;try{value=JSON.stringify(JSON.parse(element.value),null,4);}catch(error){value=element.value;}
|
||||
code.innerHTML=value;Prism.highlightElement(code);div.scrollTop=0;};element.addEventListener("change",check);check();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-color",controller:function(element){var preview=document.createElement("div");var picker=document.createElement("input");picker.type="color";preview.className="color-preview";preview.appendChild(picker);picker.addEventListener("change",syncA);picker.addEventListener("input",syncA);element.addEventListener("input",update);element.addEventListener("change",update);function update(){if(element.validity.valid){preview.style.background=element.value;syncB();}}
|
||||
code.textContent=value;Prism.highlightElement(code);div.scrollTop=0;};element.addEventListener("change",check);check();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-color",controller:function(element){var preview=document.createElement("div");var picker=document.createElement("input");picker.type="color";preview.className="color-preview";preview.appendChild(picker);picker.addEventListener("change",syncA);picker.addEventListener("input",syncA);element.addEventListener("input",update);element.addEventListener("change",update);function update(){if(element.validity.valid){preview.style.background=element.value;syncB();}}
|
||||
function syncA(){element.value=picker.value;update();}
|
||||
function syncB(){picker.value=element.value;}
|
||||
element.parentNode.insertBefore(preview,element);update();syncB();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-copy",controller:function(element,alerts,document,window){var button=window.document.createElement("i");button.type="button";button.className="icon-docs note copy";button.style.cursor="pointer";element.parentNode.insertBefore(button,element.nextSibling);var copy=function(event){let disabled=element.disabled;element.disabled=false;element.focus();element.select();document.execCommand("Copy");if(document.selection){document.selection.empty();}else if(window.getSelection){window.getSelection().removeAllRanges();}
|
||||
|
|
|
|||
8
public/dist/scripts/app.js
vendored
8
public/dist/scripts/app.js
vendored
|
|
@ -706,7 +706,11 @@ this.action=action;},showModal(modal){document.documentElement.classList.add("mo
|
|||
if(this.hasSubSubResource){event+=`.${this.subSubType}.${this.subSubResource ? this.subSubResource : '*'}`;}
|
||||
if(this.action){event+=`.${this.action}`;}
|
||||
if(this.attribute){event+=`.${this.attribute}`;}
|
||||
this.events.add(event);this.reset();},removeEvent(value){this.events.delete(value);}}));});})(window);(function(window){"use strict";window.ls.view.add({selector:"data-service",controller:function(element,view,container,form,alerts,expression,window){let action=element.dataset["service"];let service=element.dataset["name"]||null;let event=expression.parse(element.dataset["event"]);let confirm=element.dataset["confirm"]||"";let loading=element.dataset["loading"]||"";let loaderId=null;let scope=element.dataset["scope"]||"sdk";let success=element.dataset["success"]||"";let failure=element.dataset["failure"]||"";let running=false;let callbacks={hide:function(){return function(){return element.style.opacity='0';};},reset:function(){return function(){if("FORM"===element.tagName){return element.reset();}
|
||||
this.events.add(event);this.reset();},removeEvent(value){this.events.delete(value);}}));});})(window);(function(window){document.addEventListener('alpine:init',()=>{Alpine.data('permissionsMatrix',()=>({permissions:[],rawPermissions:[],load(permissions){this.rawPermissions=permissions;permissions.map(p=>{let parts=p.split('(')
|
||||
let type=parts[0];let roles=parts[1].replace(')','').replace(' ','').split(',');roles.map(role=>{let index=-1
|
||||
let existing=this.permissions.find((p,idx)=>{if(p.role===role){index=idx;return true;}})
|
||||
if(existing===undefined){this.permissions.push({role,[type]:true,})}
|
||||
existing[type]=true;this.permissions[index]=existing;});})},addPermission(role,read,create,update,xdelete){if(read)this.rawPermissions.push(`read(${role})`);if(create)this.rawPermissions.push(`create(${role})`);if(update)this.rawPermissions.push(`update(${role})`);if(xdelete)this.rawPermissions.push(`delete(${role})`);console.log(this.rawPermissions);this.permissions.push({role,read,create,update,xdelete});this.reset()},removePermission(index){let row=this.permissions.splice(index,1);this.rawPermissions=this.rawPermissions.filter(p=>!p.includes(row.role));}}));Alpine.data('permissionsRow',()=>({role:'',read:false,create:false,update:false,xdelete:false,reset(){this.role='';this.read=this.create=this.update=this.xdelete=false;}}));});})(window);(function(window){"use strict";window.ls.view.add({selector:"data-service",controller:function(element,view,container,form,alerts,expression,window){let action=element.dataset["service"];let service=element.dataset["name"]||null;let event=expression.parse(element.dataset["event"]);let confirm=element.dataset["confirm"]||"";let loading=element.dataset["loading"]||"";let loaderId=null;let scope=element.dataset["scope"]||"sdk";let success=element.dataset["success"]||"";let failure=element.dataset["failure"]||"";let running=false;let callbacks={hide:function(){return function(){return element.style.opacity='0';};},reset:function(){return function(){if("FORM"===element.tagName){return element.reset();}
|
||||
throw new Error("This callback is only valid for forms");};},alert:function(text,classname){return function(alerts){alerts.add({text:text,class:classname||"success"},6000);};},redirect:function(url){return function(router){if(url==="/console"){window.location=url;return;}
|
||||
router.change(url||"/");};},reload:function(){return function(router){router.reload();};},state:function(keys){let updateQueryString=function(key,value,url){var re=new RegExp("([?&])"+key+"=.*?(&|#|$)(.*)","gi"),hash;if(re.test(url)){if(typeof value!=="undefined"&&value!==null){return url.replace(re,"$1"+key+"="+value+"$2$3");}else{hash=url.split("#");url=hash[0].replace(re,"$1$3").replace(/(&|\?)$/,"");if(typeof hash[1]!=="undefined"&&hash[1]!==null){url+="#"+hash[1];}
|
||||
return url;}}else{if(typeof value!=="undefined"&&value!==null){var separator=url.indexOf("?")!==-1?"&":"?";hash=url.split("#");url=hash[0]+separator+key+"="+value;if(typeof hash[1]!=="undefined"&&hash[1]!==null){url+="#"+hash[1];}
|
||||
|
|
@ -766,7 +770,7 @@ if(observer){observer.disconnect();}else{observer=new MutationObserver(populateC
|
|||
populateChart();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-code",controller:function(element,alerts){let lang=element.dataset["formsCode"]||"json";let div=document.createElement("div");let pre=document.createElement("pre");let code=document.createElement("code");let copy=document.createElement("i");div.appendChild(pre);div.appendChild(copy);pre.appendChild(code);element.parentNode.appendChild(div);element.style.display='none';div.className="ide";div.dataset['langLabel']=element.dataset["langLabel"]||'JSON';div.dataset['lang']=element.dataset["lang"]||'json';pre.className="line-numbers";code.className="prism language-"+lang;copy.className="icon-docs copy";copy.textContent="Click Here to Copy";copy.title="Copy to Clipboard";copy.addEventListener("click",function(){window.getSelection().removeAllRanges();let range=document.createRange();range.selectNode(code);window.getSelection().addRange(range);try{document.execCommand("copy");alerts.add({text:"Copied to clipboard",class:""},3000);}catch(err){alerts.add({text:"Failed to copy text ",class:"error"},3000);}
|
||||
window.getSelection().removeAllRanges();});let check=function(){if(!element.value){return;}
|
||||
let value=null;try{value=JSON.stringify(JSON.parse(element.value),null,4);}catch(error){value=element.value;}
|
||||
code.innerHTML=value;Prism.highlightElement(code);div.scrollTop=0;};element.addEventListener("change",check);check();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-color",controller:function(element){var preview=document.createElement("div");var picker=document.createElement("input");picker.type="color";preview.className="color-preview";preview.appendChild(picker);picker.addEventListener("change",syncA);picker.addEventListener("input",syncA);element.addEventListener("input",update);element.addEventListener("change",update);function update(){if(element.validity.valid){preview.style.background=element.value;syncB();}}
|
||||
code.textContent=value;Prism.highlightElement(code);div.scrollTop=0;};element.addEventListener("change",check);check();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-color",controller:function(element){var preview=document.createElement("div");var picker=document.createElement("input");picker.type="color";preview.className="color-preview";preview.appendChild(picker);picker.addEventListener("change",syncA);picker.addEventListener("input",syncA);element.addEventListener("input",update);element.addEventListener("change",update);function update(){if(element.validity.valid){preview.style.background=element.value;syncB();}}
|
||||
function syncA(){element.value=picker.value;update();}
|
||||
function syncB(){picker.value=element.value;}
|
||||
element.parentNode.insertBefore(preview,element);update();syncB();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-copy",controller:function(element,alerts,document,window){var button=window.document.createElement("i");button.type="button";button.className="icon-docs note copy";button.style.cursor="pointer";element.parentNode.insertBefore(button,element.nextSibling);var copy=function(event){let disabled=element.disabled;element.disabled=false;element.focus();element.select();document.execCommand("Copy");if(document.selection){document.selection.empty();}else if(window.getSelection){window.getSelection().removeAllRanges();}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,72 @@
|
|||
(function(window){
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.store('permissions', {
|
||||
_permissions: [],
|
||||
permissions() {
|
||||
return (this._permissions ?? []);
|
||||
},
|
||||
addRow() {
|
||||
Alpine.data('permissionsMatrix', () => ({
|
||||
permissions: [],
|
||||
rawPermissions: [],
|
||||
load(permissions) {
|
||||
this.rawPermissions = permissions;
|
||||
|
||||
},
|
||||
deleteRow(index) {
|
||||
permissions.map(p => {
|
||||
let parts = p.split('(')
|
||||
let type = parts[0];
|
||||
let roles = parts[1]
|
||||
.replace(')', '')
|
||||
.replace(' ', '')
|
||||
.split(',');
|
||||
|
||||
roles.map(role => {
|
||||
let index = -1
|
||||
let existing = this.permissions.find((p, idx) => {
|
||||
if (p.role === role) {
|
||||
index = idx;
|
||||
return true;
|
||||
}
|
||||
})
|
||||
if (existing === undefined) {
|
||||
this.permissions.push({
|
||||
role,
|
||||
[type]: true,
|
||||
})
|
||||
}
|
||||
existing[type] = true;
|
||||
this.permissions[index] = existing;
|
||||
});
|
||||
})
|
||||
},
|
||||
addPermission(role, read, create, update, xdelete) {
|
||||
if (read) this.rawPermissions.push(`read(${role})`);
|
||||
if (create) this.rawPermissions.push(`create(${role})`);
|
||||
if (update) this.rawPermissions.push(`update(${role})`);
|
||||
if (xdelete) this.rawPermissions.push(`delete(${role})`);
|
||||
|
||||
console.log(this.rawPermissions);
|
||||
|
||||
this.permissions.push({
|
||||
role,
|
||||
read,
|
||||
create,
|
||||
update,
|
||||
xdelete
|
||||
});
|
||||
|
||||
this.reset()
|
||||
},
|
||||
removePermission(index) {
|
||||
let row = this.permissions.splice(index, 1);
|
||||
this.rawPermissions = this.rawPermissions.filter(p => !p.includes(row.role));
|
||||
}
|
||||
});
|
||||
}));
|
||||
Alpine.data('permissionsRow', () => ({
|
||||
role: '',
|
||||
read: false,
|
||||
create: false,
|
||||
update: false,
|
||||
xdelete: false,
|
||||
|
||||
reset() {
|
||||
this.role = '';
|
||||
this.read = this.create = this.update = this.xdelete = false;
|
||||
}
|
||||
}));
|
||||
});
|
||||
})(window);
|
||||
|
|
|
|||
Loading…
Reference in a new issue