From a5e6c04cb0507e3702c4c4ffddc731f7ce7dfee9 Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Fri, 12 Aug 2022 01:22:39 +1200
Subject: [PATCH] Working permission row addition and removal

---
 app/views/console/databases/collection.phtml | 61 ++++++++--------
 gulpfile.js                                  |  1 +
 public/dist/scripts/app-all.js               |  8 ++-
 public/dist/scripts/app.js                   |  8 ++-
 public/scripts/permissions-matrix.js         | 74 +++++++++++++++++---
 5 files changed, 106 insertions(+), 46 deletions(-)

diff --git a/app/views/console/databases/collection.phtml b/app/views/console/databases/collection.phtml
index 4e80f8f17a..f1134af85a 100644
--- a/app/views/console/databases/collection.phtml
+++ b/app/views/console/databases/collection.phtml
@@ -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>&nbsp;</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>
diff --git a/gulpfile.js b/gulpfile.js
index 728eee28a2..7ca0fcb0a2 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -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',
 
diff --git a/public/dist/scripts/app-all.js b/public/dist/scripts/app-all.js
index 061864b4e4..a6b56ec1b9 100644
--- a/public/dist/scripts/app-all.js
+++ b/public/dist/scripts/app-all.js
@@ -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();}
diff --git a/public/dist/scripts/app.js b/public/dist/scripts/app.js
index eb6ff24cb1..f81652be39 100644
--- a/public/dist/scripts/app.js
+++ b/public/dist/scripts/app.js
@@ -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();}
diff --git a/public/scripts/permissions-matrix.js b/public/scripts/permissions-matrix.js
index 52a447ddb6..93df927174 100644
--- a/public/scripts/permissions-matrix.js
+++ b/public/scripts/permissions-matrix.js
@@ -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);