@kalisio/kdk 2.0.1 → 2.1.1

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

@@ -4,12 +4,14 @@
     :header="header"
     :actions="itemActions"
     :bind-actions="false"
-    :dense="dense">
+    :dense="dense"
+    :options="{ nameField: 'profile.name', descriptionField: 'profile.description' }">
     <!--
-      Card avater
+      Card avatar
     -->
     <template v-slot:card-avatar>
-      <KAvatar :object="item" size="3.2rem" />
+      <KAvatar :subject="item" size="3.2rem"
+        :options="{ nameField: 'profile.name', avatarField: 'profile.avatar' }"/>
     </template>
     <!--
       Card descriptions
@@ -29,8 +31,8 @@
         :actions="tagsActions"
         :context="$props"
         :dense="dense">
-        <div v-if="hasTags">
-          <KChipsPane id="tags-pane" class="q-pa-sm" :chips="tags" />
+        <div v-if="hasTags" id="tags-section">
+          <KChipsPane id="tags-pane" class="q-pa-sm" :remove="true" @chip-removed="onRemoveTag" :chips="tags" />
         </div>
         <div v-else>
           {{ $t('KMemberCard.NO_TAGS_LABEL')}}
@@ -43,7 +45,7 @@
         :context="$props"
         :dense="dense"
       >
-        <div v-if="hasGroups" class="row justify-start items-center">
+        <div v-if="hasGroups" id="groups-section" class="row justify-start items-center">
           <template v-for="(group, index) in groups" :key="groupKey(group)">
             <q-btn :id="groupButtonId(group)" flat small round color="primary">
               <q-avatar color="primary" text-color="white" size="2rem">{{ groupInitials(group) }}</q-avatar>
@@ -102,8 +104,15 @@ export default {
   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' })
+      const roleLabel = this.roleLabel(this.role)
+      // It appears that due to reactivity role might not be available anymore when removing a member
+      components.splice(0, 0, {
+        id: 'role-badge', component: 'QBadge', label: (roleLabel ? this.$t(roleLabel) : ''), color: 'grey-7'
+      }, { component: 'QSpace' })
       return components
+    },
+    avatar () {
+
     },
     role () {
       const role = getRoleForOrganisation(this.item, this.contextId)
@@ -118,7 +127,7 @@ export default {
     },
     tags () {
       // Check for custom tags field
-      let tags = this.options.tagsField ? _.get(this.item, this.options.tagsField, '') : this.item.tags
+      let tags = _.get(this.item, this.options.tagsField || 'tags', [])
       // Filter tags from current context
       tags = _.filter(tags, { context: this.$store.get('context._id') })
       // Then process icons
@@ -147,8 +156,8 @@ export default {
   methods: {
     resendInvitation () {
       Dialog.create({
-        title: this.$t('KMemberCard.RESEND_INVITATION_DIALOG_TITLE', { member: this.item.name }),
-        message: this.$t('KMemberCard.RESEND_INVITATION_DIALOG_MESSAGE', { member: this.item.name }),
+        title: this.$t('KMemberCard.RESEND_INVITATION_DIALOG_TITLE', { member: _.get(this.item, 'profile.name') }),
+        message: this.$t('KMemberCard.RESEND_INVITATION_DIALOG_MESSAGE', { member: _.get(this.item, 'profile.name') }),
         html: true,
         prompt: {
           model: this.item.email,
@@ -182,8 +191,8 @@ export default {
     },
     removeMember () {
       Dialog.create({
-        title: this.$t('KMemberCard.REMOVE_DIALOG_TITLE', { member: this.item.name }),
-        message: this.$t('KMemberCard.REMOVE_DIALOG_MESSAGE', { member: this.item.name }),
+        title: this.$t('KMemberCard.REMOVE_DIALOG_TITLE', { member: _.get(this.item, 'profile.name') }),
+        message: this.$t('KMemberCard.REMOVE_DIALOG_MESSAGE', { member: _.get(this.item, 'profile.name') }),
         html: true,
         ok: {
           label: this.$t('OK'),
@@ -205,6 +214,26 @@ export default {
         })
       })
     },
+    onRemoveTag (removedTag) {
+      Dialog.create({
+        title: this.$t('KMemberCard.REMOVE_TAG_DIALOG_TITLE', { tag: removedTag.value }),
+        message: this.$t('KMemberCard.REMOVE_TAG_DIALOG_MESSAGE', { tag: removedTag.value, member: _.get(this.item, 'profile.name') }),
+        html: true,
+        ok: {
+          label: this.$t('OK'),
+          flat: true
+        },
+        cancel: {
+          label: this.$t('CANCEL'),
+          flat: true
+        }
+      }).onOk(() => {
+        const membersService = this.$api.getService('members', this.contextId)
+        const tags = _.get(this.item, this.options.tagsField || 'tags', [])
+        _.remove(tags, tag => tag._id === removedTag._id)
+        membersService.patch(this.item._id, { tags })
+      })
+    },
     groupKey (group) {
       return this.item._id + group._id
     },
@@ -267,7 +296,7 @@ export default {
     onLeaveGroup (group) {
       Dialog.create({
         title: this.$t('KMemberCard.LEAVE_GROUP_DIALOG_TITLE', { group: group.name }),
-        message: this.$t('KMemberCard.LEAVE_GROUP_DIALOG_MESSAGE', { group: group.name, member: this.item.name }),
+        message: this.$t('KMemberCard.LEAVE_GROUP_DIALOG_MESSAGE', { group: group.name, member: _.get(this.item, 'profile.name') }),
         html: true,
         ok: {
           label: this.$t('OK'),

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

@@ -96,13 +96,16 @@ export default {
       // Remove previous listener if any
       this.unsubscribeUsers()
       const usersService = this.$api.getService('users')
-      usersService.on('patched', this.refreshOnAddMember)
+      // Members service is only a filter on users but it will not trigger
+      // any remove operation when adding/removing permissions,
+      // thus it will not update the member list automatically
+      usersService.on('patched', this.refresh)
     },
     unsubscribeUsers () {
       const usersService = this.$api.getService('users')
-      usersService.off('patched', this.refreshOnAddMember)
+      usersService.off('patched', this.refresh)
     },
-    refreshOnAddMember (user) {
+    refresh (user) {
       const grid = this.$refs.membersGrid
       if (grid) {
         const member = _.find(grid.items, { _id: user._id })
@@ -110,6 +113,9 @@ export default {
         // If the user has a role in this organisation and
         // was not in our list he might have been added so refresh
         if (role && !member) this.$refs.membersGrid.refreshCollection()
+        // If the user has not a role in this organisation and
+        // was in our list he might have been removed so refresh
+        else if (!role && member) this.$refs.membersGrid.refreshCollection()
       }
     }
   },

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

@@ -14,7 +14,7 @@
         <KAction
           id="list-members"
           icon="las la-user-friends"
-          :label="$t('KTagCard.MEMBERS_LABEL', { count: item.count })"
+          :label="$t('KTagCard.MEMBERS_LABEL', { count: membersCount })"
           :tooltip="$t('KTagCard.VIEW_MEMBERS_LABEL')"
           @triggered="onListMembers"
         />
@@ -25,6 +25,7 @@
 
 <script>
 import { baseItem } from '../../mixins'
+import { countMembersWithTag } from '../../../common/permissions'
 import { KCard, KCardSection } from '../collection'
 import KAction from '../KAction.vue'
 
@@ -36,12 +37,22 @@ export default {
     KAction
   },
   mixins: [baseItem],
+  data () {
+    return {
+      membersCount: 0
+    }
+  },
   computed: {
     dense () {
       return this.$q.screen.lt.sm
     }
   },
   methods: {
+    async refreshStats () {
+      const membersService = this.$api.getService('members', this.contextId)
+      const members = await countMembersWithTag(membersService, this.item._id)
+      this.membersCount = members.total
+    },
     onListMembers () {
       // Setup filter accordingly
       this.$store.patch('filter', {
@@ -52,6 +63,10 @@ export default {
       })
       this.$router.push({ name: 'members-activity', params: { contextId: this.contextId, mode: 'filter' } })
     }
+  },
+  created () {
+    // Compute the count of members having the tag
+    this.refreshStats()
   }
 }
 </script>

package/core/client/composables/collection.js

@@ -0,0 +1,181 @@
+import _ from 'lodash'
+import logger from 'loglevel'
+import { ref, computed, watch, onBeforeMount, onBeforeUnmount } from 'vue'
+import { api } from '../api.js'
+import { getLocale } from '../utils/utils.locale.js'
+
+export function useCollection (options) {
+  _.defaults(options, {
+    // This value can be overriden in activities if they want to manage pagination by themselves
+    // nbItemsPerPage = 0 means that the client does not handle pagination and server defaults will be used
+    nbItemsPerPage: ref(12),
+    // This value indicate if items of each page replace or are appended to previous ones
+    appendItems: ref(false),
+    // Only invoke refresh at most once per every refreshThrottle milliseconds
+    refreshThrottle: ref(500),
+    // Refresh strategy to be used
+    listStrategy: ref('smart'),
+    // Item processor to be used
+    processor: ref()
+  })
+
+  // Data
+  const items = ref([])
+  const nbTotalItems = ref(0)
+  const currentPage = ref(1)
+  let itemListener = null
+
+  // Computed
+  const nbPages = computed(() => {
+    return options.nbItemsPerPage.value > 0
+      ? Math.ceil(nbTotalItems.value / options.nbItemsPerPage.value)
+      : 1
+  })
+
+  // Functions
+  function getService () {
+    const service = api.getService(options.service.value, options.contextId ? options.contextId.value : null)
+    if (!service) {
+      throw new Error('Cannot retrieve target service ' + options.service.value)
+    }
+    return service
+  }
+  function getCollectionBaseQuery () {
+    // This method should be overriden in collections
+    return options.baseQuery ? options.baseQuery.value : {}
+  }
+  function getCollectionFilterQuery () {
+    // This method should be overriden in collections
+    return options.filterQuery ? options.filterQuery.value : {}
+  }
+  function getCollectionPaginationQuery () {
+    // This method should be overriden in collections
+    return (options.nbItemsPerPage.value > 0
+      ? {
+          $limit: options.nbItemsPerPage.value,
+          $skip: (currentPage.value - 1) * options.nbItemsPerPage.value
+        }
+      : {})
+  }
+  function setCollectionItems (newItems) {
+    // Item processor defined ?
+    if (typeof options.processor.value === 'function') {
+      newItems = options.processor.value(newItems)
+    }
+    items.value = newItems
+  }
+  function subscribe (query) {
+    // Remove previous listener if any
+    unsubscribe()
+    itemListener = getService().watch({ listStrategy: options.listStrategy.value })
+      .find({ query })
+      .subscribe(response => {
+        // Manage GeoJson features collection as well
+        if (response.type === 'FeatureCollection') {
+          setCollectionItems(response.features)
+        } else if (options.appendItems.value) {
+          // Append the response ensuring there is no duplicates
+          setCollectionItems(_.unionBy(response.data, items.value, '_id'))
+          // We keep order from the updated list as depending on the sorting criteria a new item might have to be pushed on top of current items
+          const sortQuery = _.get(getCollectionBaseQuery(), '$sort')
+          if (sortQuery) {
+            // By default orderBy is case sensitive while using collation we want to perform case insensitive sort
+            setCollectionItems(_.orderBy(items.value,
+              // Sort function for each sort property
+              _.map(_.keys(sortQuery), property => {
+                return item => {
+                  const value = _.get(item, property)
+                  return (typeof value === 'string' ? value.toLowerCase() : value)
+                }
+              }),
+              // Sort order for each sort property
+              _.map(_.values(sortQuery), value => { return value > 0 ? 'asc' : 'desc' })))
+          }
+        } else {
+          setCollectionItems(response.data)
+        }
+        nbTotalItems.value = response.total
+      }, error => {
+        logger.error(error)
+      })
+  }
+
+  function unsubscribe () {
+    if (itemListener) {
+      itemListener.unsubscribe()
+      itemListener = null
+    }
+  }
+
+  const refreshCollection = _.throttle(() => {
+    const fullQuery = {
+      $locale: getLocale(),
+      ...getCollectionBaseQuery(),
+      ...getCollectionFilterQuery(),
+      ...getCollectionPaginationQuery()
+    }
+    subscribe(fullQuery)
+  }, options.refreshThrottle.value, { leading: false })
+
+  function resetCollection () {
+    // Reset pagination and start again refreshing the collection
+    setCollectionItems([])
+    currentPage.value = 1
+    refreshCollection()
+  }
+
+  function onItemsUpdated (updatedItems) {
+    // When we append items some items of the previous pages might have been updated.
+    // In this case we need to reset the full collection as Rx only tracks changes on the current page
+    updatedItems = (Array.isArray(updatedItems) ? updatedItems : [updatedItems])
+    // We keep order from the updated list as depending on the sorting criteria a new item might have to be pushed on top of current items
+    updatedItems = _.intersectionWith(items.value, updatedItems, (item1, item2) => (item1._id.toString() === item2._id.toString()))
+    if (updatedItems.length > 0) resetCollection()
+  }
+
+  // Lifecycle hooks
+  watch(options.service, resetCollection)
+  watch(options.listStrategy, resetCollection)
+  watch(options.nbItemsPerPage, resetCollection)
+  watch(options.appendItems, resetCollection)
+  // Some are not mandatory or initialized by default
+  if (options.contextId) watch(options.contextId, resetCollection)
+  if (options.baseQuery) watch(options.baseQuery, resetCollection)
+  if (options.filterQuery) watch(options.filterQuery, resetCollection)
+
+
+  onBeforeMount(() => {
+    if (options.appendItems.value) {
+      const service = getService()
+      service.on('patched', onItemsUpdated)
+      service.on('updated', onItemsUpdated)
+      service.on('removed', onItemsUpdated)
+    }
+  })
+
+  // Cleanup for appendItems
+  onBeforeUnmount(() => {
+    unsubscribe()
+    if (options.appendItems.value) {
+      const service = getService()
+      service.off('patched', onItemsUpdated)
+      service.off('updated', onItemsUpdated)
+      service.off('removed', onItemsUpdated)
+    }
+  })
+
+  return {
+    items,
+    nbTotalItems,
+    currentPage,
+    nbPages,
+    setCollectionItems,
+    subscribe,
+    unsubscribe,
+    getCollectionBaseQuery,
+    getCollectionFilterQuery,
+    getCollectionPaginationQuery,
+    resetCollection,
+    refreshCollection
+  }
+}

package/core/client/composables/index.js

@@ -1,4 +1,6 @@
 export * from './activity.js'
+export * from './collection.js'
+export * from './pwa.js'
 export * from './session.js'
 export * from './schema.js'
 export * from './selection.js'

package/core/client/composables/pwa.js

@@ -0,0 +1,71 @@
+import _ from 'lodash'
+import logger from 'loglevel'
+import config from 'config'
+import { onMounted, onBeforeUnmount } from 'vue'
+import { useQuasar } from 'quasar'
+import { Events } from '../events.js'
+import { i18n } from '../i18n.js'
+import { LocalStorage } from '../local-storage.js'
+import { InstallPwaPrompt, installFFDesktopPrompt, installSafariPrompt, installDefaultPrompt } from '../utils/utils.pwa.js'
+
+export function usePwa () {
+  // Data
+  const $q = useQuasar()
+  const installKey = 'install'
+  const changelogKey = 'appChangelog'
+
+  // Functions
+  function install () {
+    if (window.matchMedia('(display-mode: standalone)').matches) return
+    // Install prompt can be avoided, eg in tests
+    if (!LocalStorage.get(installKey, true)) return
+    // Take care of install prompt
+    if (InstallPwaPrompt) installDefaultPrompt()
+    // Take care of iOS
+    if ($q.platform.is.ios) installSafariPrompt()
+    // Take care of Firefox desktop
+    if ($q.platform.is.firefox && $q.platform.is.desktop) installFFDesktopPrompt()
+  }
+  function update (registration) {
+    // Refresh the page once the update has been applied
+    registration.waiting.addEventListener('statechange', (event) => {
+      if (event.target.state === 'activated') {
+        window.location.reload()
+      }
+    })
+    const changelog = _.get(config, changelogKey)
+    $q.dialog({
+      title: i18n.t('composables.pwa.UPDATE_TITLE'),
+      message: changelog ? i18n.t('composables.pwa.UPDATE_MESSAGE', { changelog }) : undefined,
+      html: true,
+      cancel: {
+        id: 'ignore-button',
+        label: i18n.t('composables.pwa.IGNORE'),
+        color: 'primary',
+        outline: true
+      },
+      ok: {
+        id: 'update-button',
+        label: i18n.t('composables.pwa.UPDATE'),
+        color: 'primary'
+      },
+      persistent: true,
+      position: 'bottom'
+    }).onOk(() => {
+      registration.waiting.postMessage({ type: 'SKIP_WAITING' })
+    })
+  }
+
+  // Hooks
+  onMounted(() => {
+    Events.on('pwa-updated', update)
+  })
+  onBeforeUnmount(() => {
+    Events.off('pwa-updated', update)
+  })
+
+  // Expose
+  return {
+    installPwa: install
+  }
+}

package/core/client/composables/session.js

@@ -5,11 +5,12 @@ import { useRouter, useRoute } from 'vue-router'
 import { useQuasar, Loading } from 'quasar'
 import { api } from '../api.js'
 import { i18n } from '../i18n.js'
+import { Events } from '../events.js'
 import { Store } from '../store.js'
 import { beforeGuard } from '../guards.js'
 import { LocalStorage } from '../local-storage.js'
 import { useVersion } from '../composables/version.js'
-import { updateAbilities, restoreSession } from '../utils/utils.session.js'
+import { restoreSession } from '../utils/utils.session.js'
 
 export function useSession (options = {}) {
   // Data
@@ -21,8 +22,7 @@ export function useSession (options = {}) {
   const isInitialized = ref(false)
   let pendingReconnection = null
 
-  // Computed
-  const User = computed(() => Store.get('user'))
+  const User = Store.getRef('user')
 
   // Functions
   function getRedirectKey () {
@@ -107,12 +107,6 @@ export function useSession (options = {}) {
     }).onOk(() => window.location.reload())
   }
 
-  // Watch
-  watch(User, async () => {
-    await updateAbilities()
-    await redirect()
-  })
-
   // Hooks
   onMounted(async () => {
     // Handle socket connexion
@@ -125,6 +119,8 @@ export function useSession (options = {}) {
       // Display error message if we have been banned from the server
       api.socket.on('rate-limit', onRateLimit)
     }
+    // Then redirection
+    Events.on('user-abilities-changed', redirect)
 
     try {
       await restoreSession()
@@ -139,6 +135,7 @@ export function useSession (options = {}) {
       api.socket.off('reconnect', onReconnect)
       api.socket.off('rate-limit', onRateLimit)
     }
+    Events.off('user-abilities-changed', redirect)
   })
 
   // Expose

package/core/client/composables/version.js

@@ -1,10 +1,7 @@
 import _ from 'lodash'
-import logger from 'loglevel'
 import config from 'config'
 import { ref, computed, readonly } from 'vue'
-import { Capabilities, Store, i18n } from '../index.js'
-import { Notify } from 'quasar'
-import { getPlatform } from '../utils/utils.platform.js'
+import { Capabilities } from '../index.js'
 
 const Version = ref({
   client: {
@@ -18,7 +15,6 @@ const Version = ref({
   flavor: _.get(config, 'flavor')
 })
 let isInitialized = false
-const Platform = getPlatform()
 
 export function useVersion () {
   // Computed
@@ -38,10 +34,8 @@ export function useVersion () {
   // Immediate
   if (!isInitialized) {
     isInitialized = true
-    logger.debug('Setting API version from capabilities')
     Version.value.api.number = Capabilities.get('version')
     Version.value.api.buildNumber = Capabilities.get('buildNumber')
-    if (Platform.cordova) checkVersion()
   }
 
   // Expose
@@ -51,18 +45,3 @@ export function useVersion () {
     apiVersionName
   }
 }
-
-export async function checkVersion () {
-  const api = Store.capabilities.api
-  // FIXME: we should elaborate a more complex check between compatible versions
-  if (api.version === config.version) {
-    if (config.flavor === 'prod') return
-    // Local dev has not the concept of build number
-    else if (!api.buildNumber) return
-    // On staging check it because we do not increase version number on each change
-    // and would like to know if the mobile client is up-to-date
-    else if (api.buildNumber === config.buildNumber) return
-  }
-  // Notify when a new version is available
-  Notify.create({ type: 'warning', message: i18n.t('composables.VERSION_MISMATCH') })
-}