@kalisio/kdk 1.3.5 → 1.4.2

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

@@ -1,60 +1,79 @@
 <template>
-  <k-card v-bind="$props" :actions="itemActions" :bind-actions="false" >
+  <k-card
+    v-bind="$props"
+    :header="header"
+    :actions="itemActions"
+    :bind-actions="false"
+    :dense="dense">
     <!--
-      Card header
+      Card avater
     -->
-    <template v-slot:card-header>
-      <div class="q-pa-sm row justify-end">
-        <q-badge id="role-badge" outine color="grey-7">
-          {{ $t(roleLabel(role)) }}
-        </q-badge>
-      </div>
-    </template>
+    <div slot="card-avatar">
+      <k-avatar :object="item" size="3.2rem" />
+    </div>
     <!--
-      Card avater
+      Card descriptions
     -->
-    <template v-slot:card-avatar>
-      <k-avatar :object="item" size="4rem" />
-    </template>
+    <div slot="card-description">
+      <div class="row full-width justify-start" v-bind:class="{ 'q-py-xs': dense, 'q-py-sm': !dense }">
+        {{ description }}
+      </div>
+    </div>
     <!--
       Card content
     -->
     <div slot="card-content">
-      <q-separator />
-      <template  v-if="tags.length > 0">
-        <k-tags-pane id="tags-pane" class="q-pa-sm" :tags="tags" />
-        <q-separator />
-      </template>
-      <div class="q-pa-sm row justify-start items-center">
-        <template v-for="(group, index) in memberGroups">
-          <q-btn id="group-button" :key="groupKey(group)" flat small round color="primary">
-            <q-avatar color="primary" text-color="white" size="32px">{{ groupInitials(group) }}</q-avatar>
-            <q-menu ref="popover">
-              <q-toolbar inverted color="grey-7">
-                <span style="margin:8px">{{group.name}}</span>
-                <q-btn id="change-role-group" v-if="canChangeRoleInGroup(group)" flat round small @click="onChangeRoleInGroup(group), $refs.popover[index].hide()">
-                  <q-icon :name="roleIcon(roleForGroup(group))" />
-                </q-btn>
-                <q-btn id="leave-group" v-if="canLeaveGroup(group)" flat round small @click="onLeaveGroup(group), $refs.popover[index].hide()">
-                  <q-icon name="las la-minus-circle" />
-                </q-btn>
-              </q-toolbar>
-            </q-menu>
-            <q-tooltip>{{ group.name }}</q-tooltip>
-          </q-btn>
-        </template>
-        <q-btn id="join-group" v-if="canJoinGroup()" flat small round @click="onJoinGroup()">
-          <q-icon name="las la-plus-circle" color="grey-7">
-            <q-tooltip>{{ $t('KMemberCard.JOIN_GROUP_LABEL') }}</q-tooltip>
-          </q-icon>
-        </q-btn>
-      </div>
-      <q-separator />
-      <template v-if="expireAt">
-        <div class="q-pa-sm">
-          <cite  class="text-red" v-if="expireAt">{{$t('KMemberCard.EXPIRE_AT_LABEL')}} {{expireAt.toLocaleString()}}</cite>
+      <!-- Tags section -->
+      <k-card-section v-if="!item.expireAt"
+        :title="$t('KMemberCard.TAGS_SECTION')"
+        :actions="tagsActions"
+        :context="$props"
+        :dense="dense">
+        <div v-if="hasTags">
+          <k-chips-pane id="tags-pane" class="q-pa-sm" :chips="tags" />
+        </div>
+        <div v-else>
+          {{ $t('KMemberCard.NO_TAGS_LABEL')}}
         </div>
-      </template>
+      </k-card-section>
+      <!-- Groups section -->
+      <k-card-section v-if="!item.expireAt"
+        :title="$t('KMemberCard.GROUPS_SECTION')"
+        :actions="groupsActions"
+        :context="$props"
+        :dense=dense>
+        <div v-if="hasGroups" class="row justify-start items-center">
+          <template v-for="(group, index) in groups">
+            <q-btn :id="(group.name + '-button') | kebabCase" :key="groupKey(group)" flat small round color="primary">
+              <q-avatar color="primary" text-color="white" size="2rem">{{ groupInitials(group) }}</q-avatar>
+              <q-menu ref="popover">
+                <q-toolbar inverted color="grey-7">
+                  <span style="margin:8px">{{group.name}}</span>
+                  <q-btn id="change-role-group" v-if="canChangeRoleInGroup(group)" flat round small @click="onChangeRoleInGroup(group), $refs.popover[index].hide()">
+                    <q-icon :name="roleIcon(roleForGroup(group))" />
+                  </q-btn>
+                  <q-btn id="leave-group" v-if="canLeaveGroup(group)" flat round small @click="onLeaveGroup(group), $refs.popover[index].hide()">
+                    <q-icon name="las la-minus-circle" />
+                  </q-btn>
+                </q-toolbar>
+              </q-menu>
+              <q-tooltip>{{ group.name }}</q-tooltip>
+            </q-btn>
+          </template>
+        </div>
+        <div v-else>
+          {{ $t('KMemberCard.NO_GROUPS_LABEL')}}
+        </div>
+      </k-card-section>
+      <!-- Expiration section -->
+      <k-card-section v-if="item.expireAt" :dense="dense">
+        <div class="row full-width justify-between items-center no-wrap">
+          <span class="text-warning text-weight-bold" v-if="expireAt">
+            {{$t('KMemberCard.EXPIRE_AT_LABEL')}} {{expireAt.toLocaleString()}}
+          </span>
+          <k-panel :content="expirationActions" />
+        </div>
+      </k-card-section>
     </div>
   </k-card>
 </template>
@@ -65,11 +84,36 @@ import { Dialog } from 'quasar'
 import mixins from '../../mixins'
 import { getInitials, processIcon, isEmailValid } from '../../utils'
 import { Roles, getRoleForOrganisation, getRoleForGroup, findGroupsWithRole } from '../../../common/permissions'
+import { KCard, KCardSection } from '../collection'
+import { KAvatar, KPanel, KChipsPane } from '../frame'
 
 export default {
   name: 'k-member-card',
+  components: {
+    KCard,
+    KCardSection,
+    KAvatar,
+    KPanel,
+    KChipsPane
+  },
   mixins: [mixins.baseItem],
   computed: {
+    header () {
+      const components = _.filter(this.itemActions, { scope: 'header' })
+      components.splice(0, 0, { id: 'role-badge', component: 'QBadge', label: this.$t(this.roleLabel(this.role)), color: 'grey-7' }, { component: 'QSpace' })
+      return components
+    },
+    role () {
+      const role = getRoleForOrganisation(this.item, this.contextId)
+      if (!_.isUndefined(role)) return Roles[role]
+      return ''
+    },
+    tagsActions () {
+      return _.filter(this.itemActions, { scope: 'tags' })
+    },
+    hasTags () {
+      return !_.isEmpty(this.tags)
+    },
     tags () {
       // Check for custom tags field
       let tags = this.options.tagsField ? _.get(this.item, this.options.tagsField, '') : this.item.tags
@@ -79,16 +123,23 @@ export default {
       tags.forEach(tag => processIcon(tag))
       return tags
     },
-    memberGroups () {
+    groupsActions () {
+      return _.filter(this.itemActions, { scope: 'groups' })
+    },
+    hasGroups () {
+      return !_.isEmpty(this.groups)
+    },
+    groups () {
       return _.filter(this.item.groups, { context: this.contextId })
     },
-    role () {
-      const role = getRoleForOrganisation(this.item, this.contextId)
-      if (!_.isUndefined(role)) return Roles[role]
-      return ''
+    expirationActions () {
+      return _.filter(this.itemActions, { scope: 'expiration' })
     },
     expireAt () {
       return this.item.expireAt ? new Date(this.item.expireAt) : null
+    },
+    dense () {
+      return this.$q.screen.lt.sm
     }
   },
   methods: {
@@ -185,7 +236,7 @@ export default {
     },
     onChangeRoleInGroup (group) {
       this.$router.push({
-        name: 'change-role',
+        name: 'edit-member-role',
         params: {
           contextId: this.contextId,
           objectId: this.item._id,
@@ -193,12 +244,6 @@ export default {
         }
       })
     },
-    onJoinGroup () {
-      this.$router.push({
-        name: 'join-group',
-        params: { contextId: this.contextId, objectId: this.item._id }
-      })
-    },
     onLeaveGroup (group) {
       Dialog.create({
         title: this.$t('KMemberCard.LEAVE_GROUP_DIALOG_TITLE', { group: group.name }),
@@ -226,10 +271,6 @@ export default {
     }
   },
   created () {
-    // Load the required components
-    this.$options.components['k-card'] = this.$load('collection/KCard')
-    this.$options.components['k-avatar'] = this.$load('frame/KAvatar')
-    this.$options.components['k-tags-pane'] = this.$load('team/KTagsPane')
     // Load the role configuration
     this.roleIcons = this.$config('roles.icons')
     this.roleLabels = this.$config('roles.labels')

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

@@ -11,7 +11,13 @@
         :renderer="renderer"
         :contextId="contextId"
         :base-query="baseQuery"
-        :filter-query="filter.query" />
+        :filter-query="filter.query">
+        <template slot="empty-section">
+          <div class="absolute-center">
+            <k-stamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_GRID')" />
+          </div>
+        </template>
+      </k-grid>
       <!--
         Router view to enable routing to modals
       -->
@@ -99,10 +105,11 @@ export default {
       }
     }
   },
-  created () {
+  beforeCreate () {
     // Load the required components
     this.$options.components['k-page'] = this.$load('layout/KPage')
     this.$options.components['k-grid'] = this.$load('collection/KGrid')
+    this.$options.components['k-stamp'] = this.$load('frame/KStamp')
   },
   beforeDestroy () {
     this.unsubscribeUsers()

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

@@ -10,7 +10,13 @@
         :renderer="renderer"
         :base-query="sorter.query"
         :filter-query="filter.query"
-        :list-strategy="'smart'" />
+        :list-strategy="'smart'">
+        <template slot="empty-section">
+          <div class="absolute-center">
+            <k-stamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_GRID')" />
+          </div>
+        </template>
+      </k-grid>
       <!--
         Router view to enable routing to modals
       -->
@@ -40,6 +46,7 @@ export default {
     // Load the required components
     this.$options.components['k-page'] = this.$load('layout/KPage')
     this.$options.components['k-grid'] = this.$load('collection/KGrid')
+    this.$options.components['k-stamp'] = this.$load('frame/KStamp')
   }
 }
 </script>

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

@@ -1,40 +1,43 @@
 <template>
-  <k-card v-bind="$props" :actions="itemActions" :bind-actions="false" :options="{ nameField: 'value' }">
-    <div slot="card-label">
-      <span class="text-subtitle1 text-weight-medium ellipsis">{{ item.value }}</span>
-    </div>
+  <k-card
+    v-bind="$props"
+    :actions="itemActions"
+    :bind-actions="false"
+    :options="{ nameField: 'value' }"
+    :dense="dense">
     <!--
       Card content
      -->
     <div slot="card-content">
-      <q-list bordered>
-        <q-item
+      <!-- Members -->
+      <k-card-section :title="$t('KTagCard.MEMBERS_SECTION')" :dense="dense">
+        <k-action
           id="list-members"
-          clickable
-          @click="onListMembers">
-          <q-item-section avatar>
-            <q-icon name="las la-user-friends" />
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>
-              {{ $t(`KTagCard.MEMBERS_LABEL`, { count: item.count }) }}
-            </q-item-label>
-            <q-tooltip>
-              {{ $t(`KTagCard.VIEW_MEMBERS_LABEL`) }}
-            </q-tooltip>
-          </q-item-section>
-        </q-item>
-      </q-list>
+          icon="las la-user-friends"
+          :label="$t('KTagCard.MEMBERS_LABEL', { count: item.count })"
+          :tooltip="$t('KTagCard.VIEW_MEMBERS_LABEL')"
+          @triggered="onListMembers" />
+      </k-card-section>
     </div>
   </k-card>
 </template>
 
 <script>
 import mixins from '../../mixins'
+import { KCard, KCardSection } from '../collection'
 
 export default {
   name: 'k-tag-card',
+  components: {
+    KCard,
+    KCardSection
+  },
   mixins: [mixins.baseItem],
+  computed: {
+    dense () {
+      return this.$q.screen.lt.sm
+    }
+  },
   methods: {
     onListMembers () {
       // Setup filter accordingly
@@ -47,12 +50,9 @@ export default {
       this.$router.push({ name: 'members-activity', params: { contextId: this.contextId, mode: 'filter' } })
     }
   },
-  created () {
+  beforeCreate () {
     // Load the required components
-    this.$options.components['k-card'] = this.$load('collection/KCard')
-    this.$options.components['k-tags-pane'] = this.$load('team/KTagsPane')
-    // We will use the member role to illustrate the number of users with the tag
-    this.roleIcons = this.$config('roles.icons')
+    this.$options.components['k-action'] = this.$load('frame/KAction')
   }
 }
 </script>

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

@@ -11,7 +11,13 @@
         :renderer="renderer"
         :base-query="sorter.query"
         :filter-query="filter.query"
-        :list-strategy="'smart'" />
+        :list-strategy="'smart'">
+        <template slot="empty-section">
+          <div class="absolute-center">
+            <k-stamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_GRID')" />
+          </div>
+        </template>
+      </k-grid>
       <!--
         Router view to enable routing to modals
       -->
@@ -43,10 +49,11 @@ export default {
       }, this.activityOptions.items)
     }
   },
-  created () {
+  beforeCreate () {
     // Load the required components
     this.$options.components['k-page'] = this.$load('layout/KPage')
     this.$options.components['k-grid'] = this.$load('collection/KGrid')
+    this.$options.components['k-stamp'] = this.$load('frame/KStamp')
   }
 }
 </script>

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

@@ -0,0 +1,144 @@
+<template>
+  <div class="row justify-center items-center q-gutter-x-none">
+    <div class="q-pl-md">{{ $t('KTimeRange.START_LABEL') }}</div>
+    <k-action
+      id="start-time-action"
+      tooltip="KTimeRange.PICK_START_DATE_LABEL"
+      :label="formattedStart">
+      <template v-slot:content>
+        <q-popup-proxy ref="popup" transition-show="scale" transition-hide="scale">
+          <q-date id="start-time-popup" v-model="formattedStart" mask="DD/MM/YY"
+            :title="formattedStart" :subtitle="$t('KTimeRange.START_LABEL')"
+            @input="onTimeRangeChanged" :options="checkTimeRange" />
+        </q-popup-proxy>
+      </template>
+    </k-action>
+    <div class="q-pl-md">{{ $t('KTimeRange.END_LABEL') }}</div>
+    <k-action
+      id="end-time-action"
+      tooltip="KTimeRange.PICK_END_DATE_LABEL"
+      :label="formattedEnd">
+      <template v-slot:content>
+        <q-popup-proxy ref="popup" transition-show="scale" transition-hide="scale">
+          <q-date id="end-time-popup" v-model="formattedEnd" mask="DD/MM/YY"
+            :title="formattedEnd" :subtitle="$t('KTimeRange.END_LABEL')"
+            @input="onTimeRangeChanged" :options="checkTimeLimit" />
+        </q-popup-proxy>
+      </template>
+    </k-action>
+    <q-separator vertical size="2" />
+    <k-menu
+      id="timerange-selector"
+      icon="las la-calendar"
+      :content="entries"
+      action-renderer="item" />
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { Time } from '../../time'
+import KAction from '../frame/KAction.vue'
+import KStamp from '../frame/KStamp.vue'
+import KMenu from '../menu/KMenu.vue'
+
+export default {
+  name: 'k-time-range',
+  components: {
+    KAction,
+    KStamp,
+    KMenu
+  },
+  computed: {
+    formattedStart: {
+      get: function () {
+        return this.start.format('DD/MM/YY')
+      },
+      set: function (value) {
+        this.start = moment(value, 'DD/MM/YY')
+      }
+    },
+    formattedEnd: {
+      get: function () {
+        return this.end.format('DD/MM/YY')
+      },
+      set: function (value) {
+        this.end = moment(value, 'DD/MM/YY')
+      }
+    }
+  },
+  data () {
+    return {
+      start: Time.getRange().start,
+      end: Time.getRange().end,
+      entries: [
+        {
+          id: 'last-day',
+          label: 'KTimeRange.LAST_DAY_LABEL',
+          handler: () => this.quickRangeTriggered(moment.duration(1, 'days'))
+        },
+        {
+          id: 'last-2-days',
+          label: 'KTimeRange.LAST_2_DAYS_LABEL',
+          handler: () => this.quickRangeTriggered(moment.duration(2, 'days'))
+        },
+        {
+          id: 'last-3-days',
+          label: 'KTimeRange.LAST_3_DAYS_LABEL',
+          handler: () => this.quickRangeTriggered(moment.duration(3, 'days'))
+        },
+        {
+          id: 'last-week',
+          label: 'KTimeRange.LAST_WEEK_LABEL',
+          handler: () => this.quickRangeTriggered(moment.duration(1, 'weeks'))
+        },
+        {
+          id: 'last-2-weeks',
+          label: 'KTimeRange.LAST_2_WEEKS_LABEL',
+          handler: () => this.quickRangeTriggered(moment.duration(2, 'weeks'))
+        },
+        {
+          id: 'last-month',
+          label: 'KTimeRange.LAST_MONTH_LABEL',
+          handler: () => this.quickRangeTriggered(moment.duration(1, 'months'))
+        },
+        {
+          id: 'last-3-months',
+          label: 'KTimeRange.LAST_3_MONTHS_LABEL',
+          handler: () => this.quickRangeTriggered(moment.duration(3, 'months'))
+        },
+        {
+          id: 'last-6-months',
+          label: 'KTimeRange.LAST_6_MONTHS_LABEL',
+          handler: () => this.quickRangeTriggered(moment.duration(6, 'months'))
+        },
+        {
+          id: 'last-year',
+          label: 'KTimeRange.LAST_YEAR_LABEL',
+          handler: () => this.quickRangeTriggered(moment.duration(1, 'years'))
+        }
+      ]
+    }
+  },
+  methods: {
+    checkTimeRange (date) {
+      return moment(date).isSameOrBefore(this.end)
+    },
+    checkTimeLimit (date) {
+      return moment(date).isSameOrBefore(moment()) && moment(date).isAfter(this.start)
+    },
+    quickRangeTriggered (duration) {
+      this.end = moment()
+      this.start = moment().subtract(duration).startOf('day')
+      this.onTimeRangeChanged()
+    },
+    onTimeRangeChanged () {
+      Time.patchRange({ start: this.start, end: this.end })
+    }
+  },
+  beforeDestroy () {
+    // Reset the filter, we keep track of any existing items previously set by another activity
+    this.$store.patch('sorter', {})
+  }
+}
+</script>

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

@@ -2,6 +2,7 @@
   <k-modal
     id="modal-viewer"
     :title="viewerTitle"
+    :buttons="getButtons()"
     v-model="isModalOpened"
     @opened="$emit('opened')"
     @closed="$emit('closed')">
@@ -24,6 +25,11 @@ export default {
     mixins.schemaProxy
   ],
   methods: {
+    getButtons () {
+      return [
+        { id: 'close-button', label: 'CLOSE', renderer: 'form-button', handler: () => this.closeModal() }
+      ]
+    },
     async openModal () {
       await this.refresh()
       this.isModalOpened = true

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

@@ -15,12 +15,6 @@ export default {
     mixins.objectProxy,
     mixins.schemaProxy
   ],
-  watch: {
-    '$route' (to, from) {
-      // React to route changes but reusing the same component as this one is generic
-      this.refresh()
-    }
-  },
   created () {
     // Load the required components
     this.$options.components['k-view'] = this.$load('form/KView')