@kalisio/kdk 1.5.0 → 1.7.0

package/lib/core/client/components/team/KGroupCard.vue

@@ -25,7 +25,7 @@
 <script>
 import _ from 'lodash'
 import mixins from '../../mixins'
-import { findMembersOfGroup, getRoleForGroup, Roles, RoleNames } from '../../../common/permissions'
+import { findMembersOfGroup, getRoleForGroup, getRoleForOrganisation, Roles, RoleNames } from '../../../common/permissions'
 import { KCard, KCardSection } from '../collection'
 import { KTextArea } from '../frame'
 
@@ -47,14 +47,21 @@ export default {
   computed: {
     header () {
       const components = _.filter(this.itemActions, { scope: 'header' })
-      components.splice(0, 0, { component: 'QBadge', label: this.$t(this.memberRoleLabel), color: 'grey-7' }, { component: 'QSpace' })
+      if (this.memberRoleLabel) {
+        components.splice(0, 0, { component: 'QBadge', label: this.$t(this.memberRoleLabel), color: 'grey-7' }, { component: 'QSpace' })
+      } else {
+        components.splice(0, 0, { component: 'QSpace' })
+      }
       return components
     },
     memberRoleLabel () {
       const user = this.$store.get('user')
-      const role = getRoleForGroup(user, this.contextId, this.item._id)
-      if (!_.isUndefined(role)) return this.roleLabels[Roles[role]]
-      else return ''
+      // Organisation managers can manage all groups so that we do not display anything about role
+      let role = getRoleForOrganisation(user, this.contextId)
+      if (Roles[role] >= Roles.manager) return ''
+      // Otherwise the user can be member or manager of the group
+      role = getRoleForGroup(user, this.contextId, this.item._id)
+      return (!_.isUndefined(role) ? this.roleLabels[Roles[role]] : '')
     },
     dense () {
       return this.$q.screen.lt.sm

package/lib/core/client/components/team/KJoinGroup.vue

@@ -6,16 +6,16 @@
       :buttons="getButtons()"
       v-model="isModalOpened"
       @opened="$emit('opened')"
-      @closed="$emit('closed')">
-      <div slot="modal-content" class="column xs-gutter">
-        <k-form ref="form" :schema="schema" />
-      </div>
+      @closed="$emit('closed')"
+    >
+      <k-form ref="form" :schema="schema" />
     </k-modal>
   </div>
 </template>
 
 <script>
 import _ from 'lodash'
+import { Roles, getRoleForOrganisation } from '../../../common/permissions'
 import mixins from '../../mixins'
 
 export default {
@@ -42,7 +42,7 @@ export default {
     },
     schema () {
       if (this.member === null) return {}
-      return {
+      const schema = {
         $schema: 'http://json-schema.org/draft-06/schema#',
         $id: 'http://kalisio.xyz/schemas/join-group#',
         title: 'Join Group Form',
@@ -68,24 +68,21 @@ export default {
               component: 'form/KItemField',
               label: 'KJoinGroup.GROUP_FIELD_LABEL'
             }
-          },
-          role: {
-            type: 'string',
-            default: 'member',
-            field: {
-              component: 'form/KSelectField',
-              label: 'KJoinGroup.ROLE_FIELD_LABEL',
-              type: 'radio',
-              options: [
-                { label: this.$t('KAddMember.MEMBER_LABEL'), value: 'member' },
-                { label: this.$t('KAddMember.MANAGER_LABEL'), value: 'manager' },
-                { label: this.$t('KAddMember.OWNER_LABEL'), value: 'owner' }
-              ]
-            }
           }
         },
-        required: ['group', 'role']
+        required: ['group']
+      }
+      if (Roles[this.role] === Roles.member) {
+        _.set(schema, 'properties.role', {
+          type: 'boolean',
+          default: false,
+          field: {
+            component: 'form/KToggleField',
+            label: 'KJoinGroup.ROLE_FIELD_LABEL'
+          }
+        })
       }
+      return schema
     }
   },
   data () {
@@ -109,7 +106,7 @@ export default {
         const authorisationService = this.$api.getService('authorisations')
         await authorisationService.create({
           scope: 'groups',
-          permissions: result.values.role,
+          permissions: _.get(result, 'values.role', false) ? 'manager' : 'member',
           subjects: this.objectId,
           subjectsService: this.contextId + '/members',
           resource: result.values.group._id,
@@ -119,11 +116,14 @@ export default {
       }
     }
   },
-  async created () {
+  beforeCreate () {
     this.$options.components['k-modal'] = this.$load('frame/KModal')
     this.$options.components['k-form'] = this.$load('form/KForm')
+  },
+  async created () {
     // Load the member
     this.member = await this.loadObject()
+    this.role = getRoleForOrganisation(this.member, this.contextId)
   }
 }
 </script>

package/lib/core/client/components/team/KMemberCard.vue

@@ -222,17 +222,32 @@ export default {
     },
     canJoinGroup () {
       const user = this.$store.get('user')
-      // Can add members to a group if at least manager/owner of one
+      // Organisation managers can manage all groups
+      const role = getRoleForOrganisation(user, this.contextId)
+      if (Roles[role] >= Roles.manager) return true
+      // Group managers can manage members of their own groups so
+      // can add members to a group if at least manager of one
       const groups = findGroupsWithRole(user, this.contextId, Roles.manager)
-        .concat(findGroupsWithRole(user, this.contextId, Roles.owner))
       // FIXME: we should also filter by the member groups so that if already added to all my groups we don't show the action
       return groups.length > 0
     },
     canChangeRoleInGroup (group) {
-      return this.$can('create', 'authorisations', this.item._id, { resource: group._id })
+      const memberRole = getRoleForOrganisation(this.item, this.contextId)
+      if (Roles[memberRole] >= Roles.manager) return false
+      const user = this.$store.get('user')
+      // Organisation managers can manage all groups
+      const userRole = getRoleForOrganisation(user, this.contextId)
+      if (Roles[userRole] >= Roles.manager) return true
+      // Group managers can manage members of their own groups
+      else return this.$can('create', 'authorisations', null, { resource: group._id, permissions: 'member' })
     },
     canLeaveGroup (group) {
-      return this.$can('remove', 'authorisations', this.item._id, { resource: group._id })
+      const user = this.$store.get('user')
+      // Organisation managers can manage all groups
+      const role = getRoleForOrganisation(user, this.contextId)
+      if (Roles[role] >= Roles.manager) return true
+      // Group managers can manage members of their own groups
+      else return this.$can('remove', 'authorisations', null, { resource: group._id, permissions: 'member' })
     },
     onChangeRoleInGroup (group) {
       this.$router.push({

package/lib/core/client/components/time/KAbsoluteTimeRange.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="row justify-start items-center q-pl-sm q-pr-sm no-wrap">
+    <div id="start-date" class="k-datetime text-body2">
+      {{ formattedStartDate }}
+      <q-tooltip>{{ $t('KAbsoluteTimeRange.PICK_START_DATE_LABEL') }}</q-tooltip>
+      <q-popup-proxy ref="popup" transition-show="scale" transition-hide="scale">
+        <q-date
+          id="start-date-popup"
+          v-model="startDate"
+          mask="DD/MM/YYYY"
+          :title="startDate"
+          @input="onTimeRangeChanged"
+          :options="checkStartDate" />
+        </q-popup-proxy>
+    </div>
+    <div>&nbsp;</div>
+    <div id="start-time" class="k-datetime text-body2">
+      {{ formattedStartTime }}
+      <q-tooltip>{{ $t('KAbsoluteTimeRange.PICK_START_TIME_LABEL') }}</q-tooltip>
+      <q-popup-proxy ref="popup" transition-show="scale" transition-hide="scale">
+        <q-time
+          id="start-time-popup"
+          v-model="startTime"
+          mask="HH:mm"
+          @input="onTimeRangeChanged"
+          :options="checkStartTime" />
+        </q-popup-proxy>
+    </div>
+    <div>&nbsp;-&nbsp;</div>
+    <div id="end-date" class="k-datetime text-body2">
+      {{ formattedEndDate }}
+      <q-tooltip>{{ $t('KAbsoluteTimeRange.PICK_END_DATE_LABEL') }}</q-tooltip>
+      <q-popup-proxy ref="popup" transition-show="scale" transition-hide="scale">
+        <q-date
+          id="end-date-popup"
+          v-model="endDate"
+          mask="DD/MM/YYYY"
+          :title="endDate"
+          @input="onTimeRangeChanged"
+          :options="checkEndDate" />
+        </q-popup-proxy>
+    </div>
+    <div>&nbsp;</div>
+    <div id="end-time" class="k-datetime text-body2">
+      {{ formattedEndTime }}
+      <q-tooltip>{{ $t('KAbsoluteTimeRange.PICK_END_TIME_LABEL') }}</q-tooltip>
+      <q-popup-proxy ref="popup" transition-show="scale" transition-hide="scale">
+        <q-time
+          id="end-time-popup"
+          v-model="endTime"
+          mask="HH:mm"
+          @input="onTimeRangeChanged"
+          :options="checkEndTime" />
+        </q-popup-proxy>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { Time } from '../../time'
+
+export default {
+  name: 'k-absolute-time-range',
+  props: {
+    dense: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    formattedStartDate () {
+      return Time.format(this.range.start, 'date.short')
+    },
+    startDate: {
+      get: function () {
+        return this.range.start.format('DD/MM/YYYY')
+      },
+      set: function (value) {
+        const date = moment(value, 'DD/MM/YYYY')
+        this.range = {
+          start: this.range.start.set({ year: date.year(), month: date.month(), date: date.date() }),
+          end: this.range.end
+        }
+      }
+    },
+    formattedStartTime () {
+      return Time.format(this.range.start, 'time.long')
+    },
+    startTime: {
+      get: function () {
+        return this.range.start.format('HH:mm')
+      },
+      set: function (value) {
+        const time = moment(value, 'HH:mm')
+        this.range = {
+          start: this.range.start.set({ hour: time.hour(), minute: time.minute() }),
+          end: this.range.end
+        }
+      }
+    },
+    formattedEndDate () {
+      return Time.format(this.range.end, 'date.short')
+    },
+    endDate: {
+      get: function () {
+        return this.range.end.format('DD/MM/YYYY')
+      },
+      set: function (value) {
+        const date = moment(value, 'DD/MM')
+        this.range = {
+          start: this.range.start,
+          end: this.range.end.set({ month: date.month(), date: date.date() })
+        }
+      }
+    },
+    formattedEndTime () {
+      return Time.format(this.range.end, 'time.long')
+    },
+    endTime: {
+      get: function () {
+        return this.range.end.format('HH:mm')
+      },
+      set: function (value) {
+        const time = moment(value, 'HH:mm')
+        this.range = {
+          start: this.range.start,
+          end: this.range.end.set({ hour: time.hour(), minute: time.minute() })
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      range: Time.getRange()
+    }
+  },
+  methods: {
+    checkStartDate (date) {
+      const dateToCheck = moment({
+        year: date.substring(0, 4),
+        month: date.substring(5, 7) - 1,
+        date: date.substring(8, 10),
+        hour: this.range.start.hour(),
+        minute: this.range.start.minute()
+      }).utc()
+      return dateToCheck.isBefore(this.range.end)
+    },
+    checkStartTime (hour, minute) {
+      const timeToCheck = moment({
+        year: this.range.start.year(),
+        month: this.range.start.month(),
+        date: this.range.start.date(),
+        hour: hour,
+        minute: minute
+      }).utc()
+      return timeToCheck.isBefore(this.range.end)
+    },
+    checkEndDate (date) {
+      const dateToCheck = moment({
+        year: date.substring(0, 4),
+        month: date.substring(5, 7) - 1,
+        date: date.substring(8, 10),
+        hour: this.range.end.hour(),
+        minute: this.range.end.minute()
+      }).utc()
+      return dateToCheck.isAfter(this.range.start)
+    },
+    checkEndTime (hour, minute) {
+      const timeToCheck = moment({
+        year: this.range.end.year(),
+        month: this.range.end.month(),
+        date: this.range.end.date(),
+        hour: hour,
+        minute: minute
+      }).utc()
+      return timeToCheck.isAfter(this.range.start)
+    },
+    onTimeRangeChanged () {
+      Time.patchRange({ start: this.range.start, end: this.range.end })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .k-datetime:hover {
+    cursor: pointer;
+  }
+</style>

package/lib/core/client/components/time/KRelativeTimeRanges.vue

@@ -0,0 +1,192 @@
+<template>
+  <k-panel
+    id="time-ranges"
+    :content="content"
+    action-renderer="item"
+    :dense="dense"
+    direction="vertical" />
+</template>
+
+<script>
+import _ from 'lodash'
+import moment from 'moment'
+import { Time } from '../../time'
+import KPanel from '../frame/KPanel.vue'
+
+export default {
+  name: 'k-relative-time-ranges',
+  components: {
+    KPanel
+  },
+  props: {
+    ranges: {
+      type: Array,
+      default: () => []
+    },
+    dense: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    content () {
+      return _.filter(this.defaultRanges, range => {
+        return _.indexOf(this.ranges, range.id) > -1
+      })
+    }
+  },
+  methods: {
+    rangeTriggered (duration) {
+      const end = moment(Time.getCurrentTime())
+      const start = moment(Time.getCurrentTime()).add(duration)
+      // Revert range if duration in past
+      if (duration.asMilliseconds() > 0) Time.patchRange({ start: end, end: start })
+      else Time.patchRange({ start: start, end: end })
+    }
+  },
+  created () {
+    this.defaultRanges = [
+      {
+        id: 'last-hour',
+        label: 'KRelativeTimeRanges.LAST_HOUR_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(-1, 'hours'))
+      },
+      {
+        id: 'next-hour',
+        label: 'KRelativeTimeRanges.NEXT_HOUR_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(1, 'hours'))
+      },
+      {
+        id: 'last-2-hours',
+        label: 'KRelativeTimeRanges.LAST_2_HOURS_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(-2, 'hours'))
+      },
+      {
+        id: 'next-2-hours',
+        label: 'KRelativeTimeRanges.NEXT_2_HOURS_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(2, 'hours'))
+      },
+      {
+        id: 'last-3-hours',
+        label: 'KRelativeTimeRanges.LAST_3_HOURS_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(-3, 'hours'))
+      },
+      {
+        id: 'next-3-hours',
+        label: 'KRelativeTimeRanges.NEXT_3_HOURS_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(3, 'hours'))
+      },
+      {
+        id: 'last-6-hours',
+        label: 'KRelativeTimeRanges.LAST_6_HOURS_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(-6, 'hours'))
+      },
+      {
+        id: 'next-6-hours',
+        label: 'KRelativeTimeRanges.NEXT_6_HOURS_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(6, 'hours'))
+      },
+      {
+        id: 'last-12-hours',
+        label: 'KRelativeTimeRanges.LAST_12_HOURS_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(-12, 'hours'))
+      },
+      {
+        id: 'next-12-hours',
+        label: 'KRelativeTimeRanges.NEXT_12_HOURS_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(12, 'hours'))
+      },
+      {
+        id: 'last-day',
+        label: 'KRelativeTimeRanges.LAST_DAY_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(-1, 'days'))
+      },
+      {
+        id: 'next-day',
+        label: 'KRelativeTimeRanges.NEXT_DAY_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(1, 'days'))
+      },
+      {
+        id: 'last-2-days',
+        label: 'KRelativeTimeRanges.LAST_2_DAYS_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(-2, 'days'))
+      },
+      {
+        id: 'next-2-days',
+        label: 'KRelativeTimeRanges.NEXT_2_DAYS_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(2, 'days'))
+      },
+      {
+        id: 'last-3-days',
+        label: 'KRelativeTimeRanges.LAST_3_DAYS_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(-3, 'days'))
+      },
+      {
+        id: 'next-3-days',
+        label: 'KRelativeTimeRanges.NEXT_3_DAYS_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(3, 'days'))
+      },
+      {
+        id: 'last-week',
+        label: 'KRelativeTimeRanges.LAST_WEEK_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(-1, 'weeks'))
+      },
+      {
+        id: 'next-week',
+        label: 'KRelativeTimeRanges.NEXT_WEEK_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(1, 'weeks'))
+      },
+      {
+        id: 'last-2-weeks',
+        label: 'KRelativeTimeRanges.LAST_2_WEEKS_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(-2, 'weeks'))
+      },
+      {
+        id: 'next-2-weeks',
+        label: 'KRelativeTimeRanges.NEXT_2_WEEKS_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(2, 'weeks'))
+      },
+      {
+        id: 'last-month',
+        label: 'KRelativeTimeRanges.LAST_MONTH_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(-1, 'months'))
+      },
+      {
+        id: 'next-month',
+        label: 'KRelativeTimeRanges.NEXT_MONTH_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(1, 'months'))
+      },
+      {
+        id: 'last-3-months',
+        label: 'KRelativeTimeRanges.LAST_3_MONTHS_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(-3, 'months'))
+      },
+      {
+        id: 'next-3-months',
+        label: 'KRelativeTimeRanges.NEXT_3_MONTHS_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(3, 'months'))
+      },
+      {
+        id: 'last-6-months',
+        label: 'KRelativeTimeRanges.LAST_6_MONTHS_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(-6, 'months'))
+      },
+      {
+        id: 'next-6-months',
+        label: 'KRelativeTimeRanges.NEXT_6_MONTHS_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(6, 'months'))
+      },
+      {
+        id: 'last-year',
+        label: 'KRelativeTimeRanges.LAST_YEAR_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(-1, 'years'))
+      },
+      {
+        id: 'next-year',
+        label: 'KRelativeTimeRanges.NEXT_YEAR_LABEL',
+        handler: () => this.rangeTriggered(moment.duration(1, 'years'))
+      }
+    ]
+  }
+}
+</script>

package/lib/core/client/components/time/index.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KRelativeTimeRanges = exports.KAbsoluteTimeRange = undefined;
+
+var _KAbsoluteTimeRange = require('./KAbsoluteTimeRange.vue');
+
+var _KAbsoluteTimeRange2 = _interopRequireDefault(_KAbsoluteTimeRange);
+
+var _KRelativeTimeRanges = require('./KRelativeTimeRanges.vue');
+
+var _KRelativeTimeRanges2 = _interopRequireDefault(_KRelativeTimeRanges);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.KAbsoluteTimeRange = _KAbsoluteTimeRange2.default;
+exports.KRelativeTimeRanges = _KRelativeTimeRanges2.default;
+//# sourceMappingURL=index.js.map

package/lib/core/client/components/time/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../core/client/components/time/index.js"],"names":["KAbsoluteTimeRange","KRelativeTimeRanges"],"mappings":";;;;;;;AAAA;;;;AACA;;;;;;QAGEA,kB,GAAAA,4B;QACAC,mB,GAAAA,6B","file":"index.js","sourcesContent":["import KAbsoluteTimeRange from './KAbsoluteTimeRange.vue'\r\nimport KRelativeTimeRanges from './KRelativeTimeRanges.vue'\r\n\r\nexport {\r\n  KAbsoluteTimeRange,\r\n  KRelativeTimeRanges\r\n}\r\n"]}

package/lib/core/client/components/viewer/KModalViewer.vue

@@ -5,18 +5,24 @@
     :buttons="getButtons()"
     v-model="isModalOpened"
     @opened="$emit('opened')"
-    @closed="$emit('closed')">
-    <div slot="modal-content">
-      <k-view :values="object" :schema="schema" />
-    </div>
+    @closed="$emit('closed')"
+  >
+    <k-view :values="object" :schema="schema" />
   </k-modal>
 </template>
 
 <script>
+import { KModal, KScrollArea } from '../frame'
+import { KView } from '../form'
 import mixins from '../../mixins'
 
 export default {
   name: 'k-modal-viewer',
+  components: {
+    KModal,
+    KScrollArea,
+    KView
+  },
   mixins: [
     mixins.baseViewer,
     mixins.baseModal,
@@ -34,11 +40,6 @@ export default {
       await this.refresh()
       this.isModalOpened = true
     }
-  },
-  created () {
-    // Loads the required components
-    this.$options.components['k-modal'] = this.$load('frame/KModal')
-    this.$options.components['k-view'] = this.$load('form/KView')
   }
 }
 </script>