cob-cli 2.8.1 → 2.12.0

package/templates/frontend/easy/webapp/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "userm-easy",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "dist": "rsync -av --delete dist/*  -e ssh $npm_package_config_remote_server:/etc/userm/customUI/$npm_package_config_dash_dir/dist/"
+  },
+  "dependencies": {
+    "@cob/ui-vue-components": "^2.x",
+    "core-js": "^2.6.5",
+    "vue": "^2.6.10"
+  },
+  "devDependencies": {
+    "@cob/vue-cli-plugin-dashboard": "latest",
+    "@vue/cli-plugin-babel": "^3.12.0",
+    "@vue/cli-plugin-eslint": "^3.12.0",
+    "@vue/cli-service": "^3.12.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "stylus": "^0.54.0",
+    "stylus-loader": "^3.0.0",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "config": {
+    "remote_server": "dogfooding.cultofbits.com",
+    "dash_dir": "easy"
+  }
+}

package/templates/frontend/easy/webapp/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

package/templates/frontend/easy/webapp/public/dashboard.html

@@ -0,0 +1,13 @@
+<% for (var css in htmlWebpackPlugin.files.css) { %>
+<link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
+<% } %>
+
+<div id="userm-easy"></div>
+
+<script>
+	cob.utils.afterDeps([ 'Vue', 'Vuetify', 'axios', 'marked' ], function() {
+		<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
+		cob.utils.loadScript('<%=htmlWebpackPlugin.files.chunks[chunk].entry%>');
+		<% } %>
+	})
+</script>

package/templates/frontend/easy/webapp/src/App.vue

@@ -0,0 +1,181 @@
+<template>
+    <v-app>
+      <v-container fluid grid-list-sm>
+
+        <v-layout row wrap>
+          <v-flex m12 xs12>
+            <h3 style="text-align:center;margin-top:10px;">Easy Perms</h3>
+          </v-flex>
+
+          <v-flex md3 sm6 xs12>
+              <v-switch v-model="showTemplates" label="Templates" hide-details></v-switch>
+          </v-flex>
+          <v-flex md3 sm6 xs12>
+              <v-switch v-model="showBuilder" label="Builder" hide-details></v-switch>
+          </v-flex>
+          <v-flex md3 sm6 xs12>
+              <v-switch v-model="showPlan" label="Plan" hide-details></v-switch>
+          </v-flex>
+          <v-flex md3 sm6 xs12>
+              <v-switch v-model="debug" label="debug" hide-details></v-switch>
+          </v-flex>
+        </v-layout>
+
+        <v-layout v-if="showTemplates" row wrap>
+
+          <!-- Seleccionar template -->
+          <v-flex xs12>
+            <v-select :items="permTemplates"
+                  v-model="selectedTemplate"
+                  item-text="name" return-object
+                  label="Escolha um template" clearable dense solo></v-select>
+          </v-flex>
+
+          <!-- Template -->
+          <v-layout xs12 column v-if="selectedTemplate">
+            <v-flex xs12 v-if="debug">
+              {{ selectedTemplate }}
+            </v-flex>
+
+            <v-layout xs12 row wrap align-center
+                      v-for="tmplVar in selectedTemplate.vars"
+                      v-bind:key="tmplVar.name">
+              <v-flex md2 sm3 xs12>{{ tmplVar.name }} : {{ tmplVar.type }}</v-flex>
+              <v-flex md10 sm9 xs12>
+                <v-text-field v-if="tmplVar.type === 'simple'"
+                              v-model="tmplVar.value"></v-text-field>
+                <RmDefinitionChooser v-if="tmplVar.type === 'RM-DEF'"
+                                     v-model="tmplVar.value"></RmDefinitionChooser>
+                <RmDomainChooser v-if="tmplVar.type === 'RM-DOMAIN-ID'"
+                                 v-model="tmplVar.value"></RmDomainChooser>
+              </v-flex>
+            </v-layout>
+          </v-layout>
+
+          <v-flex xs12>
+            <v-btn color="primary"
+                   :disabled="selectedTemplate == null"
+                   v-on:click="applyTemplate">Apply Template</v-btn>
+          </v-flex>
+        </v-layout>
+
+        <!-- Builder -->
+        <v-flex xs12 v-if="showBuilder">
+          <ProductPermBuilder :perms="perms" :debug="debug" v-model="rmPerms"/>
+        </v-flex>
+
+        <v-flex md1 xs12 v-if="showBuilder">
+          <v-btn color="primary" v-on:click="plan">Planear</v-btn>
+        </v-flex>
+
+        <!-- Creator -->
+        <PlanExecutor v-if="showPlan" :value="rmPerms" :debug="debug"></PlanExecutor>
+      </v-container>
+
+    </v-app>
+</template>
+
+<script>
+import ProductPermBuilder from './components/ProductPermBuilder.vue';
+import RmDefinitionChooser from './components/RmDefinitionChooser.vue';
+import RmDomainChooser from './components/RmDomainChooser.vue';
+import PlanExecutor from './components/PlanExecutor.vue';
+
+import permTemplates from './perm-templates.js';
+import perms from './perms.js';
+
+const applyAllSubstitutions =  function(value, subs){
+  return subs.reduce(
+    (acc, curr) => {
+      // verdade para entidades complexas como Defs, Domains, etc...
+      if(typeof curr.value === 'object'){
+        acc = acc.replace(`$$${curr.name}.ID$$`, curr.value.id)
+        acc = acc.replace(`$$${curr.name}.NAME$$`, curr.value.name)
+      } else {
+        acc = acc.replace(`$$${curr.name}$$`, curr.value)
+      }
+      return acc;
+    } ,
+    value
+  )
+}
+
+export default {
+  name: 'app',
+  components: {
+    ProductPermBuilder,
+    RmDomainChooser,
+    RmDefinitionChooser,
+    PlanExecutor
+  },
+  data() {
+    return {
+      debug: false,
+      showTemplates: false,
+      showBuilder: true,
+      showPlan: false,
+
+      permTemplates: permTemplates,
+      selectedTemplate: null,
+
+      perms: perms,
+
+      rmPerms: {
+        product: "recordm",
+        perms: [
+          { name: "", description: ''}
+        ],
+        roles: [ ]
+      }
+    }
+  },
+
+  methods: {
+    applyTemplate: function(){
+      // todo jone tornar isto num ciclo
+      const vars = this.selectedTemplate.vars
+      const newPerms = JSON.parse(JSON.stringify(this.selectedTemplate.productPerms[0]))
+
+      newPerms.perms = newPerms.perms.map(p => ({
+        name: applyAllSubstitutions(p.name, vars),
+        description: applyAllSubstitutions(p.description, vars)
+      }))
+
+      newPerms.roles = newPerms.roles.map(r => ({
+        name: applyAllSubstitutions(r.name, vars),
+        description: applyAllSubstitutions(r.description, vars),
+        perms: r.perms.map(p => applyAllSubstitutions(p, vars))
+      }))
+
+      this.rmPerms = newPerms
+
+      this.showTemplates = false;
+      this.showBuilder = true;
+    },
+
+    plan() {
+      this.showBuilder = false;
+      this.showPlan = true;
+    },
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  //text-align: center;
+  color: #2c3e50;
+  font-size: 1.2em;
+}
+#app .v-input input,
+#app .v-input textarea,
+#app .v-input .v-select__selection {
+    font-size: 0.9em;
+    min-height: fit-content;
+}
+</style>
+
+<!-- vim: set sw=2 ts=2 et : -->

package/templates/frontend/easy/webapp/src/components/HelloWorld.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://www.npmjs.com/package/@cob%2Fvue-cli-plugin-dashboard" target="_blank" rel="noopener">dashboard</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

package/templates/frontend/easy/webapp/src/components/PermBuilder.vue

@@ -0,0 +1,163 @@
+<template>
+  <v-layout column>
+    <v-layout row wrap>
+
+      <v-flex sm3 xs12>
+        <v-combobox v-model="domain" :items="selectableDomains" @change="actions = []"
+                    label="Domain" dense clearable></v-combobox>
+      </v-flex>
+
+      <v-flex sm4 xs12>
+        <v-combobox v-model="actions" :items="selectableActions" @change="entities = []"
+                    label="Action" dense multiple clearable></v-combobox>
+      </v-flex>
+
+      <v-flex sm5 xs12>
+        <v-combobox v-if="!customEntityType" v-model="entities" :items="selectableEntities"
+                                             label="Entity" dense multiple clearable></v-combobox>
+        <RmDomainChooser v-if="customEntityType === 'RM-DOMAIN-ID'"
+                         v-model="customEntity"></RmDomainChooser>
+        <RmDefinitionChooser v-if="customEntityType === 'RM-DEF'"
+                             v-model="customEntity"></RmDefinitionChooser>
+      </v-flex>
+    </v-layout>
+
+    <v-flex xs12>
+      <v-textarea md3 v-model="description"
+                      label="Description" rows="1" auto-grow></v-textarea>
+    </v-flex>
+
+    <v-layout v-if="debug" row wrap>
+      <v-flex sm2 xs12>
+        domain: {{ domain }}
+      </v-flex>
+
+      <v-flex sm4 xs12 style="background-color: #efe">
+        actions: {{ actions }}
+      </v-flex>
+
+      <v-flex sm3 xs12>
+        entities: {{ customEntityType ? "custom" : "normal" }} {{ customEntityType ? customEntity : entities }}
+      </v-flex>
+
+    </v-layout>
+
+    <!-- needed to force de compute and emit of the resulting perm -->
+    <span style="display:none">{{ resultingPerm }}</span>
+  </v-layout>
+</template>
+
+<script>
+
+import RmDomainChooser from './RmDomainChooser.vue'
+import RmDefinitionChooser from './RmDefinitionChooser.vue'
+
+export default {
+  name: 'PermBuilder',
+
+  components: {
+    RmDomainChooser, RmDefinitionChooser
+  },
+
+  props: {
+    perms: Array,
+    value: Object,
+    debug: Boolean
+  },
+
+  data() {
+    const components = this.value.name.split(":");
+
+     return {
+       domain: components[0] || '',
+       components: components,
+       actions: components.length > 1 ? components[1].split(',') : [],
+       entities: components.length > 2 ? components[2].split(',') : []
+     }
+  },
+
+  computed: {
+
+    selectableDomains: function(){
+      return this.perms.map(d => d.domain);
+    },
+    selectableActions: function(){
+      const selectedDomain = this.perms.find(d => d.domain === this.domain)
+      const domainActions = ( selectedDomain || {} ).actions || [];
+      return domainActions.map(a => a.name);
+    },
+    customEntityType() {
+      const selectedDomain = this.perms.find(d => d.domain === this.domain)
+      if(typeof selectedDomain === 'undefined' ) return false;
+
+      const entities = selectedDomain.actions
+        .filter(a => this.actions.includes(a.name))
+        .flatMap(a => (a.entities || []) )
+
+      return entities.length > 0 && entities[0].type 
+    },
+    customEntity: {
+      get: function(){
+        return this.customEntityType && this.components.length > 2 ? { id: this.components[2] } : {id: null}
+      },
+      set: function(newValue) {
+        this.entities = [newValue]
+      }
+    },
+    selectableEntities: function(){
+      const selectedDomain = this.perms.find(d => d.domain === this.domain)
+      if(typeof selectedDomain === 'undefined' ) return [];
+
+      const selectedActions = selectedDomain.actions
+        .filter(a => this.actions.includes(a.name))
+      const actionEntities = selectedActions.flatMap(a => (a.entities || []) )
+        .map(e => e.name);
+
+      return actionEntities || [ "*" ];
+    },
+
+    description: {
+      get: function(){
+        return this.value.description
+      },
+      set: function(newValue){
+        this.value.description = newValue;
+      }
+    },
+
+    resultingPerm: function(){
+      const result = this.buildName();
+
+      if(this.value.name !== result){
+        this.$emit('input', { name: result, description: this.description });
+      }
+
+      return result;
+    }
+  },
+
+  methods: {
+    buildName: function(){
+      var result = '';
+
+      if(this.domain && this.domain != '')
+        result += this.domain;
+
+      if(this.actions.length > 0)
+        result += ':' + this.actions.join(",");
+
+      if(this.entities.length > 0){ 
+        if(this.customEntityType)
+          result += ':' + this.entities.map(e => e.id || e).join(",");
+        else
+          result += ':' + this.entities.join(",");
+      }
+      return result;
+    }
+  }
+}
+</script>
+
+<style></style>
+
+<!-- vim: set sw=2 ts=2 et : -->

package/templates/frontend/easy/webapp/src/components/PlanExecutor.vue

@@ -0,0 +1,225 @@
+<template>
+   <v-layout xs12 row wrap align-center>
+      <v-flex xs12>
+         <h3>Plano</h3>
+      </v-flex>
+
+      <v-flex v-if="debug"  xs12 style="text-align:left;">
+         <code>{{ value }}</code>
+      </v-flex>
+
+      <v-flex md5 xs12>
+         <v-layout column>
+            <v-flex xs12 text-center>
+               <h4>Permissões</h4>
+            </v-flex>
+            <v-layout row  v-for="perm in perms" v-bind:key="perm.name">
+               <v-flex xs3 text-right :class="'state-' + perm.state">
+                  {{ perm.state }}
+                  <span v-if="perm.state === 'existing'">
+                     [<a :href="'#/permission/' + perm.id" target="_blank">{{ perm.id }}</a>]
+                  </span>
+                  <span v-if="perm.state === 'error'"><pre>{{ perm.error }}</pre></span>
+               </v-flex>
+               <v-flex xs12 text-left>
+                  <code>{{ perm.name }}</code>
+               </v-flex>
+            </v-layout>
+         </v-layout>
+      </v-flex>
+
+      <v-flex md7 xs12>
+         <v-layout column>
+            <v-flex xs12 text-center>
+               <h4>Roles</h4>
+            </v-flex>
+            <v-layout row align-start fill-height v-for="role in roles" v-bind:key="role.name">
+               <v-flex xs2 text-right :class="'state-' + role.state">
+                  {{ role.state }}
+                  <span v-if="role.state === 'existing'">
+                     [<a :href="'#/role/' + role.id" target="_blank">{{ role.id }}</a>]
+                  </span>
+                  <span v-if="role.state === 'error'"><pre>{{ role.error }}</pre></span>
+               </v-flex>
+               <v-flex  md4 xs12 text-left>
+                  <code>{{ role.name }}</code>
+               </v-flex>
+               <v-flex  md6 xs12 text-left>
+                  com perms: {{ role.perms }}
+               </v-flex>
+            </v-layout>
+         </v-layout>
+      </v-flex>
+
+      <v-flex xs12 style="padding-top:20px">
+            <v-btn v-on:click="refresh">Refresh Cache</v-btn>
+            <v-btn color="primary" v-on:click="execute">Executar</v-btn>
+      </v-flex>
+   </v-layout>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+   name: 'PlanExecutor',
+
+   props: {
+      value: Object,
+      debug: Boolean
+   },
+
+   data() {
+      return {
+         waitingToCreateRoles: false
+      }
+   },
+
+   computed: {
+      plan() {
+         return this.value
+      },
+      perms() {
+         this.find('permission', this.plan.perms)
+
+         return this.plan.perms
+      },
+      roles() {
+         this.find('role', ( this.plan.roles || [] ))
+
+         return  this.plan.roles || []
+      }
+   },
+
+   watch: {
+      waitingToCreateRoles() {
+         if(this.waitingToCreateRoles && this.perms.every(p => p.state !== 'new')){
+            this.createRoles();
+         }
+      },
+      perms() {
+         if(this.waitingToCreateRoles && this.perms.every(p => p.state !== 'new')){
+            this.createRoles();
+         }
+      }
+   },
+
+   methods: {
+
+      find: function(type, entities, force){
+         entities.forEach((p, i) => {
+            if(!force && p.state) return;
+
+            axios.get('/userm/userm/' + type + '/product/recordm/name/' + encodeURIComponent(p.name))
+               .then((resp) => {
+                  this.$set(entities[i], 'state', 'existing')
+                  this.$set(entities[i], 'id', resp.data.id)
+               })
+               .catch(() => {
+                  this.$set(entities[i], 'state', 'new')
+               })
+         })
+      },
+
+      refresh: function(){
+         this.find('permission', this.plan.perms, true)
+         this.find('role', ( this.plan.roles || [] ), true)
+      },
+
+      execute: function(){
+         this.waitingToCreateRoles = true;
+         this.createPerms();
+      },
+
+      createPerms: function(){
+         const product = this.plan.product;
+         const perms = this.perms;
+         const uri = 'userm/permission'
+
+         const newPerms = perms.filter(p => p.state === 'new');
+
+         newPerms.forEach(p => {
+               const body = {
+                  product: product,
+                  name: p.name,
+                  description: p.description
+               }
+
+               axios.post(uri, body)
+                  .then(function(resp){
+                     this.$set(p, 'state', 'existing')
+                     this.$set(p, 'id', resp.data.id)
+                  }.bind(this))
+
+                  .catch(function(error){
+                     window.console.error('JN perm', error)
+                     this.$set(p, 'state', 'error')
+                     this.$set(p, 'error', error.response.data)
+                  }.bind(this))
+         })
+      },
+
+      createRoles: function(){
+         this.waitingToCreateRoles = false;
+
+         const product = this.plan.product;
+         const roles = this.roles;
+         const uri = 'userm/role'
+
+         const newRoles = roles.filter(r => r.state === 'new' || r.state === 'error' );
+
+         if(newRoles.length === 0){
+            roles.forEach(r => this.associateRoles(r.id, r.perms));
+         }
+
+         newRoles.forEach(r => {
+               const body = {
+                  product: product,
+                  name: r.name,
+                  description: r.description
+               }
+
+               axios.post(uri, body)
+                  .then(function(resp){
+                     this.$set(r, 'state', 'existing')
+                     this.$set(r, 'id', resp.data.id)
+
+                     this.associateRoles(r.id, r.perms);
+
+                  }.bind(this))
+
+                  .catch(function(error){
+                     window.console.error('JN role', error)
+                     this.$set(r, 'state', 'error')
+                     this.$set(r, 'error', error.response.data)
+                  }.bind(this))
+         })
+      },
+
+      associateRoles: function(roleId, permNames){
+         const permIds = permNames.map(name => this.perms.find(p => p.name === name).id)
+         window.console.debug('JN', 'associate', roleId, permNames, permIds);
+
+         axios.put('userm/role/' + roleId + '/permissions', permIds)
+            .then(resp => {
+               window.console.debug('JN', 'associar', resp)
+            })
+
+      }
+   }
+}
+</script>
+<style scoped>
+.state-new {
+   color: green
+}
+.state-existing {
+   color: gray
+}
+.state-error {
+   color: red
+}
+div, span, code {
+   font-size: 1.0em;
+}
+</style>