@kalisio/kdk 1.3.5 → 1.4.2

package/lib/core/client/components/layout/KPage.vue

@@ -1,16 +1,19 @@
 <template>
-  <q-page :padding="padding">
+  <q-page :padding="padding" :style-fn="layoutOffsetListener">
     <!--
       Specific page content: can be provided as slot and/or by configuration
      -->
-    <div :style="contentStyle">
-      <slot id="page-content" name="page-content"></slot>
-      <k-content
-        id="page"
-        v-show="page.content && page.mode"
-        :content="page.content"
-        :mode="page.mode"
-        :filter="page.filter" />
+    <div id="page-content-container" :style="contentStyleFunction">
+      <div class="fit">
+        <q-resize-observer @resize="onContentResized" />
+        <slot id="page-content" name="page-content"></slot>
+        <k-content
+          id="page"
+          v-show="page.content && page.mode"
+          :content="page.content"
+          :mode="page.mode"
+          :filter="page.filter" />
+      </div>
     </div>
     <!--
       Managed stickies
@@ -106,8 +109,17 @@ export default {
     }
   },
   computed: {
-    contentStyle () {
-      return `padding-top: ${this.topPadding}px; padding-bottom: ${this.bottomPadding}px`
+    contentStyleFunction () {
+      const layoutPadding = this.padding ? 24 * 2 : 0
+      const widthOffset = layoutPadding
+      const heightOffset = this.layoutOffset + layoutPadding
+      return {
+        paddingTop: `${this.topPadding}px`,
+        paddingBottom: `${this.bottomPadding}px`,
+        paddingRight: `${this.rightPadding}px`,
+        widht: `calc(100vw - ${widthOffset}px)`,
+        height: `calc(100vh - ${heightOffset}px)`
+      }
     },
     isTopPaneOpened: {
       get: function () {
@@ -173,6 +185,7 @@ export default {
       hasTopPaneOpener: false,
       hasRightPaneOpener: false,
       hasBottomPaneOpener: false,
+      layoutOffset: 0,
       topPadding: 0,
       leftPadding: 0,
       bottomPadding: 0,
@@ -196,17 +209,26 @@ export default {
     }
   },
   methods: {
+    layoutOffsetListener (offset) {
+      // Catch layout offset and returns default Quasar function
+      // see https://quasar.dev/layout/page#style-fn
+      this.layoutOffset = offset
+      return { minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh' }
+    },
+    onContentResized (size) {
+      this.$emit('content-resized', size)
+    },
     onTopPaneResized (size) {
-      this.topPadding = size.height + this.gutter
+      this.topPadding = size.height
     },
     onLeftPaneResized (size) {
-      this.leftPadding = size.width + this.gutter
+      this.leftPadding = size.width
     },
     onRightPaneResized (size) {
-      this.rightPaddding = size.width + this.gutter
+      this.rightPaddding = size.width
     },
     onBottomPaneResized (size) {
-      this.bottomPadding = size.height + this.gutter
+      this.bottomPadding = size.height
     },
     setTopPaneVisible (visible) {
       this.$store.patch('topPane', { visible })
@@ -231,13 +253,15 @@ export default {
       }
     }
   },
-  created () {
+  beforeCreate () {
     // load the required components
     this.$options.components['k-content'] = this.$load('frame/KContent')
     this.$options.components['k-panel'] = this.$load('frame/KPanel')
     this.$options.components['k-opener'] = this.$load('frame/KOpener')
     this.$options.components['k-window'] = this.$load('layout/KWindow')
     this.$options.components['k-fab'] = this.$load('layout/KFab')
+  },
+  created () {
     // Read top pane configuration
     this.hasTopPaneOpener = this.$config('layout.topPane.opener', false)
     if (this.$config('layout.topPane.visible', false)) this.$store.patch('topPane', { visible: true })
@@ -257,15 +281,16 @@ export default {
 </script>
 
 <style lang="stylus">
+body {
+  background-color: #EFEFEF;
+}
 .k-pane, .k-left-pane {
   border: solid 1px lightgrey;
-  border-radius: 5px;
+  border-radius: 3px;
 }
-
 .k-pane:hover, .k-left-pane:hover {
   border: solid 1px var(--q-color-primary);
 }
-
 .k-left-pane {
   height: 100vh;
   width: 300px;

package/lib/core/client/components/layout/KTour.vue

@@ -84,7 +84,7 @@ export default {
     }
   },
   watch: {
-    '$route' (to, from) {
+    $route (to, from) {
       // React to route changes by loading any tour
       this.refreshTour()
     }
@@ -176,7 +176,7 @@ export default {
     getTarget (target) {
       let element = null
       let querySelectorAll = false
-      const brackets = new RegExp(/\[(.*?)\]/, 'i')
+      const brackets = new RegExp(/\[([0-9]*?)\]/, 'i')
       // Check if there is an array notation like '#action[1]'
       // This is useful for id conflict resolution
       const result = brackets.exec(target)

package/lib/core/client/components/layout/KWelcome.vue

@@ -1,29 +1,23 @@
 <template>
   <q-dialog v-model="showWelcome" persistent>
-    <q-card class="q-pa-sm" style="min-width: 50vw">
-      <div class="row justify-between">
+    <q-card class="q-pa-sm column q-gutter-y-md" style="min-width: 50vw">
+      <div class="row justify-center">
         <img :src="banner">
-        <q-btn class="self-start" id="close-action" icon="las la-times" flat round dense @click="hide" />
       </div>
-      <q-card-section class="q-pa-none">
-        <div class="q-pa-none">
-
-        </div>
+      <div class="row justify-center">
         <q-carousel
           class="q-pa-none"
           v-model="slide"
-          arrows
           swipeable
           animated
           padding
-          vertical
+          navigation
           transition-prev="scale"
           transition-next="scale"
           control-type="flat"
           control-color="primary"
         >
           <q-carousel-slide name="welcome" class="column no-wrap justify-center text-center q-gutter-md">
-
             <div class="text-h5">{{ $t('KWelcome.WELCOME_TITLE') }}</div>
             <div class="text-subtitle1">{{ $t('KWelcome.WELCOME_MESSAGE') }}</div>
             <div class="text-subtitle1">{{ $t('KWelcome.ONLINE_HELP') }}
@@ -46,8 +40,13 @@
             <div class="text-subtitle1">{{ $t('KWelcome.GOODBYE_MESSAGE') }}</div>
           </q-carousel-slide>
         </q-carousel>
+      </div>
+      <div class="row justify-center">
+        <k-action id="close-button" label="CLOSE" renderer="form-button" :handler="() => this.hide()" />
+      </div>
+      <div class="row justify-center">
         <q-checkbox v-model="toggle" @input="onToggleIntroduction" :label="$t('KWelcome.HIDE_WELCOME')" color="primary" />
-      </q-card-section>
+      </div>
     </q-card>
   </q-dialog>
 </template>
@@ -55,6 +54,7 @@
 <script>
 import _ from 'lodash'
 import { openURL, QCheckbox, QCarousel, QCarouselSlide, QCarouselControl } from 'quasar'
+import KAction from '../frame/KAction.vue'
 
 export default {
   name: 'k-welcome',
@@ -62,7 +62,8 @@ export default {
     QCheckbox,
     QCarousel,
     QCarouselSlide,
-    QCarouselControl
+    QCarouselControl,
+    KAction
   },
   props: {
     defaultTour: {

package/lib/core/client/components/layout/KWindow.vue

@@ -53,7 +53,7 @@ export default {
         {
           id: 'change-mode',
           icon: this.mode === 'minimized' ? 'las la-expand' : 'las la-compress',
-          tooltip: this.mode === 'minimized' ? 'KWindow.MINIMIZE_ACTION' : 'KWindow.MAXIMIZE_ACTION',
+          tooltip: this.mode === 'minimized' ? 'KWindow.MAXIMIZE_ACTION' : 'KWindow.MINIMIZE_ACTION',
           handler: this.onModeChanged
         },
         {

package/lib/core/client/components/media/KImageViewer.vue

@@ -1,6 +1,6 @@
  <template>
   <div v-if="interactive === true" class="fit" >
-    <pinch-zoom class="pinch-zoom-controller fit row justify-center items-center">
+    <pinch-zoom class="pinch-zoom-controller fit row justify-center items-center" @change="$emit('image-transformed')">
       <img :src="source" style="max-width:100%; max-height:100%" />
     </pinch-zoom>
   </div>
@@ -27,12 +27,14 @@ export default {
   methods: {
     restore () {
       const controller = document.querySelector('.pinch-zoom-controller')
-      controller.setTransform({
-        scale: 1,
-        x: 0,
-        y: 0,
-        allowChangeEvent: true
-      })
+      if (controller) {
+        controller.setTransform({
+          scale: 1,
+          x: 0,
+          y: 0,
+          allowChangeEvent: true
+        })
+      }
     }
   },
   mounted () {

package/lib/core/client/components/media/KMediaBrowser.vue

@@ -14,7 +14,7 @@
       -->
     <template v-for="(media) in medias">
       <q-carousel-slide :name="media.name" :key="media._id" class="row justify-center items-center">
-        <k-image-viewer :ref="media._id" class="fit k-media-browser-slide" :source="media.uri" :interactive="media.isImage" />
+        <k-image-viewer :ref="media._id" class="fit k-media-browser-slide" :source="media.uri" :interactive="media.isImage" @image-transformed="onImageTrasnformed" />
       </q-carousel-slide>
     </template>
     <!--
@@ -70,9 +70,9 @@ export default {
     actions () {
       const actions = []
       if (this.currentMedia) {
-        if (this.currentMedia.isImage) {
+        if (this.currentMedia.isImage && this.currentMediaTransformed) {
           actions.push({
-            id: 'restore-image', icon: 'las la-undo', tooltip: this.$t('KMediaBrowser.RESTORE_IMAGE_ACTION'), handler: this.onImageRestored
+            id: 'restore-image', icon: 'las la-compress-arrows-alt', tooltip: this.$t('KMediaBrowser.RESTORE_IMAGE_ACTION'), handler: this.onImageRestored
           })
         }
         actions.push({
@@ -90,14 +90,17 @@ export default {
       opened: false,
       medias: [],
       currentMedia: null,
-      currentMediaName: ''
+      currentMediaName: '',
+      currentMediaTransformed: false
     }
   },
   methods: {
+    onImageTrasnformed () {
+      this.currentMediaTransformed = true
+    },
     onImageRestored () {
-      if (this.$refs[this.currentMedia._id]) {
-        this.$refs[this.currentMedia._id][0].restore()
-      }
+      if (this.$refs[this.currentMedia._id]) this.$refs[this.currentMedia._id][0].restore()
+      this.currentMediaTransformed = false
     },
     async onMediaDownload () {
       if (!this.currentMedia) return
@@ -128,6 +131,7 @@ export default {
       const mimeType = mime.lookup(media.name)
       this.currentMedia = media
       this.currentMedia.isImage = mimeType.startsWith('image/')
+      this.currentMediaTransformed = false
       // Download image the first time
       if (!media.uri) {
         // We only download images
@@ -163,7 +167,7 @@ export default {
       return this.$api.getService(this.options.service || 'storage')
     }
   },
-  created () {
+  beforeCreate () {
     // laod the required components
     this.$options.components['k-panel'] = this.$load('frame/KPanel')
     this.$options.components['k-image-viewer'] = this.$load('media/KImageViewer')

package/lib/core/client/components/menu/KMenu.vue

@@ -0,0 +1,103 @@
+<template>
+  <q-btn-dropdown
+    v-if="hasContent"
+    :id="id"
+    :label="$t(label)"
+    :icon="icon"
+    :color="color"
+    :size="size"
+    :disable="disabled"
+    :dense="dense"
+    :persistent="persistent"
+    :auto-close="autoClose"
+    menu-anchor="bottom left"
+    menu-self="top left"
+    flat
+    no-caps
+    fab-mini>
+    <k-panel
+      id="menu-entries"
+      :content="content"
+      :mode="mode"
+      :context="context"
+      :action-renderer="actionRenderer"
+      direction="vertical" />
+  </q-btn-dropdown>
+</template>
+
+<script>
+import _ from 'lodash'
+import { QBtnDropdown } from 'quasar'
+
+export default {
+  name: 'k-menu',
+  components: {
+    QBtnDropdown
+  },
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: 'las la-ellipsis-v'
+    },
+    color: {
+      type: String,
+      default: 'grey-9'
+    },
+    size: {
+      type: String,
+      default: 'md'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    autoClose: {
+      type: Boolean,
+      default: true
+    },
+    persistent: {
+      type: Boolean,
+      default: false
+    },
+    content: {
+      type: [Object, Array],
+      default: () => null
+    },
+    mode: {
+      type: String,
+      default: undefined
+    },
+    context: {
+      type: Object,
+      default: () => null
+    },
+    actionRenderer: {
+      type: String,
+      default: 'button',
+      validator: (value) => {
+        return ['button', 'item'].includes(value)
+      }
+    }
+  },
+  computed: {
+    dense () {
+      return this.$q.screen.lt.sm
+    },
+    hasContent () {
+      return !_.isEmpty(this.content)
+    }
+  },
+  created () {
+    // load the required components
+    this.$options.components['k-panel'] = this.$load('frame/KPanel')
+  }
+}
+</script>

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

@@ -19,7 +19,13 @@
                 class="q-pt-lg q-pb-lg"
                 ref="userEmailForm"
                 :schema="getUserEmailSchema()" />
-              <div class="row justify-end">
+              <div class="row justify-end q-gutter-x-sm">
+                <k-action
+                  id="cancel-button"
+                  label="KAddMember.CANCEL_BUTTON"
+                  renderer="form-button"
+                  :outline="true"
+                  :handler="() => this.closeModal()" />
                 <k-action
                   id="continue-button"
                   label="KAddMember.CONTINUE_BUTTON"
@@ -35,13 +41,20 @@
                 class="q-pt-lg q-pb-lg"
                 ref="userPropertiesForm"
                 :schema="getUserPropertiesSchema()" />
-              <div class="row justify-between">
+              <div class="row justify-start q-gutter-x-sm">
                 <k-action
                   id="back-button"
                   label="KAddMember.BACK_BUTTON"
                   :outline="true"
                   renderer="form-button"
                   :handler="() => { step = 1 }" />
+                <q-space />
+                <k-action
+                  id="cancel-button"
+                  label="KAddMember.CANCEL_BUTTON"
+                  renderer="form-button"
+                  :outline="true"
+                  :handler="() => this.closeModal()" />
                 <k-action
                   id="add-button"
                   :label="user ? 'KAddMember.ADD_BUTTON' : 'KAddMember.INVITE_BUTTON'"
@@ -140,14 +153,9 @@ export default {
         type: 'string',
         default: 'member',
         field: {
-          component: 'form/KSelectField',
+          component: 'form/KRoleField',
           label: 'KAddMember.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' }
-          ]
+          default: 'member'
         }
       }
       if (this.user) {

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

@@ -86,14 +86,12 @@ export default {
       }
     },
     getButtons () {
-      return [{
-        id: 'update-button',
-        label: 'KChangeRole.UPDATE_BUTTON',
-        renderer: 'form-button',
-        handler: () => this.doUpdate()
-      }]
+      return [
+        { id: 'cancel-button', label: 'CANCEL', renderer: 'form-button', outline: true, handler: () => this.closeModal() },
+        { id: 'update-button', label: 'KChangeRole.UPDATE_BUTTON', renderer: 'form-button', handler: () => this.doUpdate() }
+      ]
     },
-    loadService () {
+    getService () {
       return this.$api.getService('members')
     },
     async doUpdate () {

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

@@ -1,53 +1,23 @@
 <template>
-  <k-card v-bind="$props" :actions="itemActions" :bind-actions="false" >
-    <!--
-      Card header
-     -->
-    <template v-slot:card-header>
-      <div class="q-pa-sm row justify-end">
-        <q-badge outine color="grey-7">
-          {{ $t(memberRoleLabel) }}
-        </q-badge>
-      </div>
-    </template>
+  <k-card
+    v-bind="$props"
+    :header="header"
+    :actions="itemActions"
+    :bind-actions="false"
+    :dense="dense">
     <!--
       Card content
      -->
     <div slot="card-content">
-      <q-list bordered>
-        <q-item
+      <!-- Members -->
+      <k-card-section :title="$t('KGroupCard.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(`KGroupCard.MEMBERS_LABEL`, { count: membersCount }) }}
-            </q-item-label>
-            <q-tooltip>
-              {{ $t(`KGroupCard.VIEW_MEMBERS_LABEL`) }}
-            </q-tooltip>
-          </q-item-section>
-        </q-item>
-        <!--TODO display the stats q-separator />
-        <template v-for="(role, index) in roleNames">
-          <q-item
-            :id="role"
-            :key="roleKey(role)">
-            <q-item-section avatar>
-              <q-icon :name="roleIcons[index]" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>
-                {{ memberStats[role] }}
-                {{ roleLabels[index]}}
-              </q-item-label>
-            </q-item-section>
-          </q-item>
-        </template-->
-      </q-list>
+          icon="las la-user-friends"
+          :label="$t('KGroupCard.MEMBERS_LABEL', { count: membersCount })"
+          :tooltip="$t('KGroupCard.VIEW_MEMBERS_LABEL')"
+          @triggered="onListMembers" />
+      </k-card-section>
     </div>
   </k-card>
 </template>
@@ -56,9 +26,16 @@
 import _ from 'lodash'
 import mixins from '../../mixins'
 import { findMembersOfGroup, getRoleForGroup, Roles, RoleNames } from '../../../common/permissions'
+import { KCard, KCardSection } from '../collection'
+import { KTextArea } from '../frame'
 
 export default {
   name: 'k-group-card',
+  components: {
+    KCard,
+    KCardSection,
+    KTextArea
+  },
   mixins: [mixins.baseItem],
   data () {
     return {
@@ -68,20 +45,24 @@ 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' })
+      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 ''
+    },
+    dense () {
+      return this.$q.screen.lt.sm
     }
   },
   methods: {
-    roleKey (role) {
-      return this.item._id + '-' + role
-    },
     async refreshStats () {
-      // Clear the counters. We use a temporary object to ensure reactivity
-      // see: https://v1.vuejs.org/guide/reactivity.html
+      // TOTO: display stats ?
       const stats = {}
       this.roleNames.forEach(role => {
         stats[role] = 0
@@ -108,9 +89,11 @@ 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-action'] = this.$load('frame/KAction')
+  },
+  created () {
     // Compute the count of members belonging to group
     this.roleNames = RoleNames
     this.roleIcons = this.$config('roles.icons')

package/lib/core/client/components/team/KGroupsActivity.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/team/KJoinGroup.vue

@@ -95,14 +95,12 @@ export default {
   },
   methods: {
     getButtons () {
-      return [{
-        id: 'join-button',
-        label: 'KJoinGroup.ADD_BUTTON',
-        renderer: 'form-button',
-        handler: (event, done) => this.doJoin(event, done)
-      }]
+      return [
+        { id: 'cancel-button', label: 'CANCEL', renderer: 'form-button', outline: true, handler: () => this.closeModal() },
+        { id: 'join-button', label: 'KJoinGroup.ADD_BUTTON', renderer: 'form-button', handler: (event, done) => this.doJoin(event, done) }
+      ]
     },
-    loadService () {
+    getService () {
       return this.$api.getService('members')
     },
     async doJoin () {