Displayed roles in users tree

Author: almerk

client/src/components/events/default/index.vue

@@ -1,7 +1,7 @@
 <template>
  <article class="event-content">
  <main>
- <fieldset>
+ <fieldset class="header">
  <legend>Name</legend>
  <header>{{ event.name }}</header>
  </fieldset>
@@ -98,6 +98,19 @@ export default {
  flex-direction: column;
  transition: 0.5s;
 }
+.event-content:not(.selected) aside{
+ display: none;
+}
+.event-content:not(.selected) main>fieldset:not(.header){
+ display: none;
+}
+.event-content:not(.selected) fieldset.header{
+ font-size:.7em;
+ letter-spacing: 0px;
+ font-weight:100;
+ line-height: 1em;
+}
+
 .event-content.selected {
  overflow: auto;
 }
@@ -143,7 +156,6 @@ export default {
 .event-content > aside {
  font-size: 0.95em;
  flex-shrink: 0;
- overflow:auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;

client/src/components/subjects/index-tree.vue

@@ -6,6 +6,7 @@
  :users="users"
  :selected="subjectIds"
  :view-only="viewOnly"
+ :roles="roles"
  @changed="selectionChanged"
  ></tree-item>
  </div>
@@ -39,6 +40,13 @@ export default {
  root() {
  return this.groups.find((x) => !x.parentId);
  },
+ roles() {
+ return this.relations.map((x) => ({
+ subjectId: x.subjectId,
+ access: { read: x.canRead, update: x.canUpdate, delete: x.canDelete },
+ other: x.characteristics,
+ }));
+ },
  },
  methods: {
  children(id) {
@@ -67,6 +75,7 @@ export default {
 div[role="tree"] {
  font-size: 12pt;
  overflow: auto;
+ max-width: 100%;
 }
 div[role="tree"] ul.group:hover {
  box-shadow: inset 1px 0 0 0 black;
@@ -90,13 +99,23 @@ div[role="tree"].view .collapsed.group > * {
 }
 div[role="tree"].view .collapsed.group > .indeterminate {
  max-width: 25%;
- white-space: nowrap;
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
  overflow: hidden;
- text-overflow: ellipsis;
+ -webkit-box-orient: vertical;
+ position: relative;
+ padding-right:.5em;
+}
+div[role="tree"].view .collapsed.group > .indeterminate [role=badge]{
+ visibility: hidden;
 }
-div[role="tree"].view .collapsed.group > .indeterminate::after{
- content:' > ';
- font-weight: 700;
+div[role="tree"].view .collapsed.group > .indeterminate::after {
+ position: absolute;
+ content: " > ";
+ z-index: 1;
+ font-weight: 700;
+ right: 0;
+ top: 0;
 }
 div[role="tree"] .collapsed.group > ul {
  flex-grow: 1;

client/src/components/subjects/tree-item.vue

@@ -1,7 +1,7 @@
 <template>
  <ul
  v-if="showCase"
- :class="[{ collapsed: selectedUsers==1 }, subject.$type]"
+ :class="[{ collapsed: selectedUsers == 1 }, subject.$type]"
  >
  <label :class="[{ indeterminate: containsSelected }]">
  <input
@@ -12,6 +12,16 @@
  />
  <span>{{ subject.name }}</span>
  <badge v-if="subject.$type == 'group'">{{ selectedUsers }}</badge>
+ <span v-if="viewOnly && currentRoles">
+ <span
+ v-for="(role, i) in currentRoles.other"
+ :key="i"
+ class="role"
+ :title="role"
+ >
+ {{ getRoleView(role) }}
+ </span>
+ </span>
  </label>
  <ul v-if="this.children.length" class="inner">
  <li v-for="child in children" :key="child.id">
@@ -21,6 +31,7 @@
  :groups="groups"
  :selected="selected"
  :view-only="viewOnly"
+ :roles="roles"
  @changed="emitChanged"
  ></tree-item>
  </li>
@@ -30,6 +41,11 @@
 
 <script>
 import badge from "../ui/badge.vue";
+const roles = {
+ acceptor: "👌",
+ perfomer: "✍️",
+ owner: "🔑",
+};
 export default {
  components: { badge },
  name: "tree-item",
@@ -39,6 +55,7 @@ export default {
  groups: Array,
  selected: Array,
  viewOnly: Boolean,
+ roles: Array,
  },
  data() {
  return {};
@@ -93,6 +110,9 @@ export default {
  );
  return allUsersIds.some((x) => this.selected.includes(x));
  },
+ currentRoles() {
+ return this.roles.find((x) => x.subjectId == this.subject.id);
+ },
  },
 
  methods: {
@@ -116,6 +136,9 @@ export default {
  };
  return compute(subj);
  },
+ getRoleView(role) {
+ return roles[role] || role;
+ },
  },
 };
 </script>