@kalisio/kdk 2.6.3 → 2.7.0

package/core/client/components/account/KAccount.vue

@@ -1,68 +0,0 @@
-<template>
-  <q-card class="q-py-sm no-shadow">
-    <!-- Sections -->
-    <q-expansion-item
-      v-if="isVerified"
-      :label="$t('KVerifyEmailManager.TITLE')"
-      group="account"
-      class="bg-grey-2"
-      header-class= 'text-red'
-      id="verify-email-manager"
-      default-opened
-    >
-      <KVerifyEmailManager notifierEmail="email-notifications@kalisio.com" />
-    </q-expansion-item>
-    <template v-for="section in sections" :key="section.title">
-      <q-expansion-item
-        :label="$tie(section.title)"
-        group="account"
-        class="bg-grey-2"
-        :id="section.id"
-      >
-        <component :is="section.instance" v-bind="section" />
-      </q-expansion-item>
-    </template>
-    <!-- Deletion -->
-    <q-expansion-item
-      v-if="deletable"
-      :label="$t('KDeleteAccountManager.TITLE')"
-      group="account"
-      class="bg-grey-2"
-      id="delete-account-manager"
-    >
-      <KDeleteAccountManager />
-    </q-expansion-item>
-  </q-card>
-</template>
-
-<script setup>
-import _ from 'lodash'
-import config from 'config'
-import { ref, onMounted } from 'vue'
-import { Store, utils, Events } from '../..'
-import KVerifyEmailManager from './KVerifyEmailManager.vue'
-import KDeleteAccountManager from './KDeleteAccountManager.vue'
-
-// Data
-const isVerified = ref(false)
-const deletable = ref(true)
-const sections = ref([])
-const User = Store.get('user')
-
-// Make store react to external changes to update verify email section
-Events.on('user-changed', (path, value) => {
-  if (_.has(value, 'isVerified')) isVerified.value = !value.isVerified
-})
-
-// Hooks
-onMounted(async () => {
-  deletable.value = _.get(config, 'account.deletable', true)
-  if (_.has(User, 'isVerified')) isVerified.value = !User.isVerified
-  const confSections = _.cloneDeep(_.get(config, 'account.sections', []))
-  for (let i = 0; i < confSections.length; ++i) {
-    const section = confSections[i]
-    section.instance = utils.loadComponent(section.component)
-  }
-  sections.value = confSections
-})
-</script>

package/core/client/components/account/KDeleteAccountManager.vue

@@ -1,62 +0,0 @@
-<template>
-  <div class="q-pa-md row justify-between items-center no-wrap bg-white">
-    <span>{{ $t('KDeleteAccountManager.QUESTION') }}</span>
-    <KAction
-      id="delete-account"
-      label="DELETE"
-      color="negative"
-      renderer= 'form-button'
-      outline
-      :closePopup="true"
-      :handler="onDelete"
-    />
-  </div>
-</template>
-
-<script setup>
-import _ from 'lodash'
-import { useRouter } from 'vue-router'
-import { Dialog } from 'quasar'
-import { Store, i18n, api } from '../..'
-import KAction from '../action/KAction.vue'
-
-// Data
-const router = useRouter()
-const User = Store.get('user')
-
-// Function
-async function onDelete () {
-  const name = _.get(User, 'profile.name')
-  Dialog.create({
-    title: i18n.t('KDeleteAccountManager.CONFIRMATION_TITLE'),
-    message: i18n.t('KDeleteAccountManager.CONFIRMATION'),
-    html: true,
-    prompt: {
-      model: '',
-      type: 'text',
-      isValid: val => val === name
-    },
-    persistent: true,
-    ok: {
-      label: i18n.t('OK'),
-      flat: true
-    },
-    cancel: {
-      label: i18n.t('CANCEL'),
-      flat: true
-    }
-  }).onOk(async (data) => {
-    try {
-      await api.getService('users').remove(User._id)
-      // Redirecting to logout will logout the user but logout an inexsiting user will raise an error
-      // We prefer to clean the token manually instead
-      // router.push({ name: 'logout' })
-      Store.set('user', null)
-      await api.authentication.removeAccessToken()
-      router.push({ name: 'login' })
-    } catch (error) {
-      throw new Error(`[KDK] Cannot delete ${name} account: ${error}`)
-    }
-  })
-}
-</script>

package/core/client/components/account/KEmailManager.vue

@@ -1,128 +0,0 @@
-<template>
-  <q-card class="q-pa-md">
-    <!-- Form -->
-    <q-card-section>
-      <KForm
-        ref="modifyEmailFormRef"
-        :schema="modifyEmailSchema"
-      />
-    </q-card-section>
-    <!-- Actions -->
-    <q-card-actions align="right">
-      <KAction
-        id="modify-email"
-        label="APPLY"
-        renderer="form-button"
-        outline
-        :loading="processing"
-        :handler="apply"
-      />
-    </q-card-actions>
-    <q-dialog v-model="dialog" persistent>
-      <q-card>
-        <!-- Form -->
-        <q-card-section align="center">
-          <KForm
-            ref="validateEmailFormRef"
-            :schema="validateEmailSchema"
-          />
-        </q-card-section>
-        <!-- Actions -->
-        <q-card-actions align="center">
-          <KAction
-            id="validate-email"
-            label="APPLY"
-            renderer="form-button"
-            :loading="processing"
-            :handler="applyChanges"
-          />
-        </q-card-actions>
-      </q-card>
-    </q-dialog>
-  </q-card>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Notify } from 'quasar'
-import { Store, utils, i18n } from '../..'
-
-// Data
-const User = Store.get('user')
-const modifyEmailFormRef = ref(null)
-const validateEmailFormRef = ref(null)
-const dialog = ref(false)
-const processing = ref(false)
-const modifyEmailSchema = ref({
-  $schema: 'http://json-schema.org/draft-07/schema#',
-  $id: 'http://kalisio.xyz/schemas/modify-email-manager#',
-  title: 'Modify email form',
-  type: 'object',
-  properties: {
-    password: {
-      type: 'string',
-      format: 'password',
-      field: {
-        component: 'form/KPasswordField',
-        label: 'KEmailManager.PASSWORD_FIELD_LABEL'
-      }
-    },
-    email: {
-      type: 'string',
-      format: 'email',
-      field: {
-        component: 'form/KEmailField',
-        label: 'KEmailManager.EMAIL_FIELD_LABEL'
-      }
-    }
-  },
-  required: ['email', 'password']
-})
-const validateEmailSchema = ref({
-  $schema: 'http://json-schema.org/draft-07/schema#',
-  $id: 'http://kalisio.xyz/schemas/verify-email-manager#',
-  title: 'Verify email form',
-  type: 'object',
-  properties: {
-    token: {
-      type: 'string',
-      minLength: 6,
-      maxLength: 6,
-      tokenLength: 6,
-      field: {
-        component: 'form/KTokenField',
-        label: 'KEmailManager.TOKEN_LABEL'
-      }
-    }
-  },
-  required: ['token']
-})
-
-// Functions
-async function apply () {
-  const { isValid, values } = modifyEmailFormRef.value.validate()
-  if (!isValid) return false
-  try {
-    processing.value = true
-    await utils.sendChangeIdentity(User.email, values.email, values.password)
-    dialog.value = true
-    processing.value = false
-  } catch (error) {
-    processing.value = false
-  }
-}
-async function applyChanges () {
-  const { isValid, values } = validateEmailFormRef.value.validate()
-  if (!isValid) return
-  try {
-    processing.value = true
-    await utils.verifySignup(values.token, User.email)
-    processing.value = false
-    Notify.create({ type: 'positive', message: i18n.t('KEmailManager.EMAIL_CHANGED') })
-  } catch (error) {
-    processing.value = false
-    Notify.create({ type: 'negative', message: i18n.t('KEmailManager.ERROR_MESSAGE') })
-  }
-  dialog.value = false
-}
-</script>

package/core/client/components/account/KPasswordManager.vue

@@ -1,90 +0,0 @@
-<template>
-  <q-card class="q-pa-md">
-    <!-- Form -->
-    <q-card-section>
-      <KForm
-        ref="formRef"
-        :schema="schema"
-      />
-    </q-card-section>
-    <!-- Actions -->
-    <q-card-actions align="right">
-      <KAction
-        id="change-password"
-        label="APPLY"
-        renderer="form-button"
-        outline
-        :loading="processing"
-        :handler="apply"
-      />
-    </q-card-actions>
-  </q-card>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Notify } from 'quasar'
-import { Store, i18n, utils } from '../..'
-import KForm from '../form/KForm.vue'
-import KAction from '../action/KAction.vue'
-
-// Data
-const formRef = ref(null)
-const User = Store.get('user')
-const schema = ref({
-  $schema: 'http://json-schema.org/draft-07/schema#',
-  $id: 'http://kalisio.xyz/schemas/password-manager.json#',
-  title: 'Change Password form',
-  type: 'object',
-  properties: {
-    oldPassword: {
-      type: 'string',
-      format: 'password',
-      field: {
-        component: 'form/KPasswordField',
-        label: 'KPasswordManager.OLD_PASSWORD_FIELD_LABEL'
-      }
-    },
-    password: {
-      type: 'string',
-      format: 'password',
-      field: {
-        component: 'form/KPasswordField',
-        label: 'KPasswordManager.PASSWORD_FIELD_LABEL'
-      }
-    },
-    confirmPassword: {
-      type: 'string',
-      format: 'password',
-      const: {
-        $data: '1/password'
-      },
-      field: {
-        component: 'form/KPasswordField',
-        label: 'KPasswordManager.CONFIRM_PASSWORD_FIELD_LABEL'
-      }
-    }
-  },
-  required: ['oldPassword', 'password', 'confirmPassword']
-})
-const processing = ref(false)
-
-// Functions
-async function apply () {
-  const { isValid, values } = formRef.value.validate()
-  if (!isValid) return false
-  try {
-    processing.value = true
-    await utils.changePassword(User.email, values.oldPassword, values.password)
-    processing.value = false
-    Notify.create({
-      type: 'positive',
-      message: i18n.t('KPasswordManager.PASSWORD_CHANGED')
-    })
-  } catch (error) {
-    processing.value = false
-    return false
-  }
-  return true
-}
-</script>

package/core/client/components/account/KVerifyEmailManager.vue

@@ -1,105 +0,0 @@
-<template>
-  <!-- Helper -->
-  <q-expansion-item icon="las la-question" :label="$t('KVerifyEmailManager.HELP_LABEL')">
-    <div class="q-pa-md">
-      <i18n-t class="text-body2" keypath="KVerifyEmailManager.HELP_TEXT" tag="p" scope="global" />
-    </div>
-  </q-expansion-item>
-  <q-expansion-item icon="las la-question" :label="$t('KVerifyEmailManager.HELP_EMAIL_LABEL')">
-    <div class="q-pa-md">
-      <i18n-t class="text-body2" keypath="KVerifyEmailManager.HELP_EMAIL_TEXT" tag="p" scope="global">
-        <template v-slot:email>
-          <span class="text-weight-bold">{{ notifierEmail }}</span>
-        </template>
-      </i18n-t>
-    </div>
-  </q-expansion-item>
-  <q-card>
-    <!-- Form -->
-    <q-card-section>
-      <KForm
-        ref="formRef"
-        :schema="schema"
-      />
-    </q-card-section>
-    <!-- Actions -->
-    <q-card-actions align="center">
-      <KAction
-        id="resend-verify-signup"
-        label="KVerifyEmailManager.ACTION"
-        renderer="form-button"
-        outline
-        :handler="resendVerifySignup"
-      />
-      <KAction
-        id="verify-email"
-        label="APPLY"
-        renderer="form-button"
-        :loading="processing"
-        :handler="apply"
-      />
-    </q-card-actions>
-  </q-card>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Notify } from 'quasar'
-import { Store, i18n, utils } from '../..'
-
-// Props
-defineProps({
-  notifierEmail: {
-    type: String,
-    default: true
-  }
-})
-
-// Data
-const User = Store.get('user')
-const formRef = ref(null)
-const processing = ref(false)
-const schema = ref({
-  $schema: 'http://json-schema.org/draft-07/schema#',
-  $id: 'http://kalisio.xyz/schemas/verify-email-manager#',
-  title: 'Verify email form',
-  type: 'object',
-  properties: {
-    token: {
-      type: 'string',
-      minLength: 6,
-      maxLength: 6,
-      tokenLength: 6,
-      field: {
-        component: 'form/KTokenField',
-        label: 'KVerifyEmailManager.TOKEN_LABEL'
-      }
-    }
-  },
-  required: ['token']
-})
-
-// Functions
-async function apply () {
-  const { isValid, values } = formRef.value.validate()
-  if (!isValid) return
-  try {
-    processing.value = true
-    await utils.verifySignup(values.token, User.email)
-    processing.value = false
-    Notify.create({
-      type: 'positive',
-      message: i18n.t('KVerifyEmailManager.EMAIL_VERIFIED')
-    })
-  } catch (error) {
-    processing.value = false
-    Notify.create({
-      type: 'negative',
-      message: i18n.t('KVerifyEmailManager.ERROR_MESSAGE')
-    })
-  }
-}
-function resendVerifySignup () {
-  utils.resendVerifySignup(User.email)
-}
-</script>

package/core/client/components/collection/KColumn.vue

@@ -1,227 +0,0 @@
-<template>
-  <div class="column full-width">
-    <!--
-      Header
-     -->
-     <div class="full-width">
-      <q-resize-observer @resize="onHeaderResized" />
-      <KPanel
-        id="header"
-        :content="header"
-        class="no-wrap"
-      />
-    </div>
-    <!--
-      Items
-     -->
-    <div v-if="items.length > 0">
-      <KScrollArea
-        ref="scrollAreaRef"
-        :max-height="scrollHeight"
-        @scrolled="onScrolled"
-      >
-        <div
-          class="full-width column"
-          :class="{
-            'q-gutter-y-xs': gutter && dense,
-            'q-gutter-y-sm': gutter && !dense
-          }"
-          :style="{ maxWidth: `${width}px` }"
-        >
-          <template v-for="item in items" :key="item._id">
-            <component
-              :id="item._id"
-              :service="service"
-              :item="item"
-              :is="rendererComponent"
-              v-bind="renderer"
-              @item-selected="onItemSelected"
-              :class="{
-                'q-pr-xs': hasScrollArea && dense,
-                'q-pr-sm': hasScrollArea && !dense
-              }"
-            />
-          </template>
-        </div>
-      </KScrollArea>
-      <div
-        v-if="hasScrollAction"
-        class="row justify-center"
-      >
-        <KAction
-          id="scroll-action"
-          icon="las la-angle-double-down"
-          color="accent"
-          size="0.8rem"
-          :handler="scrollDown"
-        />
-      </div>
-    </div>
-    <div v-else>
-      <slot name="empty-column">
-        <div class="row justify-center">
-          <KStamp
-            icon="las la-exclamation-circle"
-            icon-size="1.6rem"
-            :text="$t('KColumn.EMPTY_COLUMN')"
-            direction="horizontal"
-            class="q-pt-lg"
-          />
-        </div>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import _ from 'lodash'
-import { ref, computed, watch, toRefs, onBeforeMount, onBeforeUnmount } from 'vue'
-import { Events } from '../../events.js'
-import KAction from '../action/KAction.vue'
-import KScrollArea from '../KScrollArea.vue'
-import KStamp from '../KStamp.vue'
-import { useCollection } from '../../composables'
-import { loadComponent } from '../../utils/index.js'
-
-const emit = defineEmits(['selection-changed', 'collection-refreshed'])
-
-// Props
-const props = defineProps({
-  name: {
-    type: String,
-    default: undefined
-  },
-  header: {
-    type: Array,
-    default: () => null
-  },
-  renderer: {
-    type: Object,
-    default: () => {
-      return {
-        component: 'collection/KCard'
-      }
-    }
-  },
-  width: {
-    type: Number,
-    default: 200
-  },
-  height: {
-    type: Number,
-    default: 300
-  },
-  gutter: {
-    type: Boolean,
-    default: true
-  },
-  dense: {
-    type: Boolean,
-    default: false
-  },
-  service: {
-    type: String,
-    required: true
-  },
-  baseQuery: {
-    type: Object,
-    default: () => {}
-  },
-  filterQuery: {
-    type: Object,
-    default: () => {}
-  },
-  listStrategy: {
-    type: String,
-    default: 'smart'
-  },
-  nbItemsPerPage: {
-    type: Number,
-    default: 12
-  },
-  processor: {
-    type: Function,
-    default: undefined
-  }
-})
-
-// Data
-const scrollAreaRef = ref(null)
-const hasScrollArea = ref(false)
-const hasScrollAction = ref(false)
-const headerHeight = ref(0)
-// Configuration
-const scrollOffset = 350
-const scrollDuration = 250
-
-// Computed
-const rendererComponent = computed(() => loadComponent(props.renderer.component))
-const scrollHeight = computed(() => props.height - headerHeight.value - (hasScrollAction.value ? 24 : 0))
-
-// Always use append mode for columns
-const { items, nbTotalItems, nbPages, currentPage, refreshCollection, resetCollection } =
-  useCollection(Object.assign({ appendItems: ref(true) }, toRefs(props)))
-
-// Functions
-function onHeaderResized (size) {
-  headerHeight.value = size.height
-}
-function onScrolled (info) {
-  hasScrollArea.value = info.verticalSize > scrollHeight.value
-  if (items.value.length < nbTotalItems.value) {
-    if (info.verticalPercentage === 1) {
-      if (items.value.length === currentPage.value * props.nbItemsPerPage) currentPage.value++
-      refreshCollection()
-      hasScrollAction.value = true
-    } else {
-      hasScrollAction.value = hasScrollArea.value
-    }
-  } else {
-    if (info.verticalPercentage === 1) {
-      hasScrollAction.value = false
-    } else {
-      hasScrollAction.value = hasScrollArea.value
-    }
-  }
-}
-function scrollDown () {
-  const position = scrollAreaRef.value.getScrollPosition('vertical')
-  scrollAreaRef.value.setScrollPosition('vertical', position + scrollOffset, scrollDuration)
-}
-function onItemSelected (item, section) {
-  emit('selection-changed', item, section)
-}
-function onCollectionRefreshed () {
-  emit('collection-refreshed', items.value)
-}
-
-// Watch
-watch(items, () => {
-  // On reset, reset as well scroll area
-  if (_.isEmpty(items.value) && scrollAreaRef.value) scrollAreaRef.value.setScrollPosition('vertical', 0)
-  // Emit events so that embbeding components can be aware of it
-  onCollectionRefreshed()
-})
-
-// Hooks
-onBeforeMount(() => {
-  refreshCollection()
-  // Whenever the user abilities are updated, update collection as well
-  Events.on('user-abilities-changed', resetCollection)
-})
-
-onBeforeUnmount(() => {
-  Events.off('user-abilities-changed', resetCollection)
-})
-
-// Expose
-defineExpose({
-  name: props.name,
-  items,
-  nbTotalItems,
-  nbPages,
-  currentPage,
-  refreshCollection,
-  resetCollection
-})
-</script>