@simsustech/quasar-components 0.8.0 → 0.9.0

package/src/ui/authentication/AccountsTable.vue

@@ -0,0 +1,279 @@
+<template>
+  <q-table
+    v-if="modelValue"
+    v-model:pagination="tablePagination"
+    :title="lang.account.title"
+    class="full-width"
+    :rows="modelValue"
+    :columns="accountColumns"
+    row-key="id"
+    @request="onRequest"
+  >
+    <template #header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          {{ col.label }}
+        </q-th>
+      </q-tr>
+    </template>
+    <template #top-right>
+      <q-btn icon="search" flat>
+        <q-menu>
+          <div class="q-pa-sm">
+            <q-input v-model="name" :label="lang.account.fields.name">
+              <template #append>
+                <q-icon
+                  v-if="name"
+                  name="cancel"
+                  @click="name = ''"
+                  class="q-field__focusable-action"
+                  role="button"
+                />
+              </template>
+            </q-input>
+            <q-input v-model="email" :label="lang.account.fields.email">
+              <template #append>
+                <q-icon
+                  v-if="email"
+                  name="cancel"
+                  @click="email = ''"
+                  class="q-field__focusable-action"
+                  role="button"
+                />
+              </template>
+            </q-input>
+
+            <q-select
+              v-model="roles"
+              multiple
+              style="min-width: 200px"
+              :label="lang.account.fields.roles"
+              :options="roleOptions"
+              map-options
+              emit-value
+            >
+              <template #append>
+                <q-icon
+                  v-if="roles.length"
+                  name="cancel"
+                  @click="roles = []"
+                  class="q-field__focusable-action"
+                  role="button"
+                />
+              </template>
+            </q-select>
+          </div>
+        </q-menu>
+      </q-btn>
+    </template>
+    <template #body="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          {{ col.value }}
+        </q-td>
+        <q-td auto-width>
+          <q-btn size="sm" round flat icon="more_vert">
+            <q-menu>
+              <q-list>
+                <q-item clickable @click="openAddRoleDialog(props.row)">
+                  <q-item-section>
+                    <q-item-label>
+                      {{ lang.account.labels.addRole }}
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable @click="openRemoveRoleDialog(props.row)">
+                  <q-item-section>
+                    <q-item-label>
+                      {{ lang.account.labels.removeRole }}
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </q-table>
+</template>
+
+<script lang="ts" setup generic="T extends Account">
+import { computed, ref, toRefs, watch } from 'vue'
+import { QTable, QTableColumn, useQuasar } from 'quasar'
+import { useLang } from './lang/index.js'
+
+export interface Account {
+  id: number
+  name?: string
+  email: string
+  roles: string[]
+}
+
+interface Pagination {
+  limit: number
+  offset: number
+  sortBy: keyof Account
+  descending: boolean
+}
+
+interface Criteria {
+  roles: string[]
+}
+interface Props {
+  modelValue: T[]
+  count: number
+  pagination: Pagination
+  mappedRoles: Record<string, string> // value: label
+  columns?: QTableColumn[]
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:pagination', pagination: Pagination): void
+  (e: 'update:criteria', criteria: Criteria): void
+  (e: 'addRole', { id, role }: { id: number; role: string }): void
+  (e: 'removeRole', { id, role }: { id: number; role: string }): void
+}>()
+
+const { modelValue, count, mappedRoles, columns } = toRefs(props)
+
+// const { useQuery } = await createUseTrpc()
+const lang = useLang()
+const $q = useQuasar()
+
+const sortBy = ref<keyof Account>(props.pagination.sortBy)
+const descending = ref(props.pagination.descending)
+const rowsPerPage = ref(props.pagination.limit)
+const page = ref(props.pagination.offset / props.pagination.limit + 1)
+
+const name = ref<string>('')
+const email = ref<string>('')
+const roles = ref<string[]>([])
+const criteria = computed(() => ({
+  name: name.value,
+  email: email.value,
+  roles: roles.value
+}))
+
+const tablePagination = computed({
+  // getter
+  get() {
+    return {
+      sortBy: sortBy.value,
+      descending: descending.value,
+      page: page.value,
+      rowsPerPage: rowsPerPage.value,
+      rowsNumber: count.value || 0
+    }
+  },
+  // setter
+  set(newValue) {
+    sortBy.value = newValue.sortBy
+    descending.value = newValue.descending
+    page.value = newValue.page
+    rowsPerPage.value = newValue.rowsPerPage
+  }
+})
+
+watch(criteria, () => emit('update:criteria', criteria.value))
+
+const onRequest: QTable['$props']['onRequest'] = ({ pagination }) => {
+  descending.value = pagination.descending
+  sortBy.value = pagination.sortBy as keyof Account
+  page.value = pagination.page
+  rowsPerPage.value = pagination.rowsPerPage
+
+  emit('update:pagination', {
+    limit: rowsPerPage.value,
+    offset: (page.value - 1) * rowsPerPage.value,
+    sortBy: sortBy.value as keyof Account,
+    descending: descending.value
+  })
+  return
+}
+
+const accountColumns = ref<QTableColumn[]>([
+  {
+    name: 'id',
+    required: true,
+    label: '#',
+    align: 'left',
+    field: (row) => row.id,
+    format: (val) => `${val}`,
+    sortable: true
+  },
+  {
+    name: 'name',
+    required: true,
+    label: lang.value.account.fields.name,
+    align: 'left',
+    field: (row) => row.name,
+    format: (val) => `${val || ''}`,
+    sortable: false
+  },
+  {
+    name: 'email',
+    required: true,
+    label: lang.value.account.fields.email,
+    align: 'left',
+    field: (row) => row.email,
+    format: (val) => `${val}`,
+    sortable: false
+  },
+  {
+    name: 'roles',
+    required: true,
+    label: lang.value.account.fields.roles,
+    align: 'right',
+    field: (row) => row.roles,
+    format: (val) =>
+      val.map((role: string) => mappedRoles.value[role]).join(', ')
+  }
+])
+
+if (columns?.value) accountColumns.value.push(...columns.value)
+
+const roleOptions = computed(() =>
+  Object.entries(mappedRoles.value).map(([key, value]) => ({
+    label: value,
+    value: key
+  }))
+)
+
+const openAddRoleDialog = (account: Account) => {
+  $q.dialog({
+    message: lang.value.account.messages.addRole(account),
+    options: {
+      type: 'radio',
+      model: 'role',
+      items: roleOptions.value.filter(
+        (newRole) => !account.roles.includes(newRole.value)
+      )
+    },
+    cancel: true,
+    persistent: true
+  }).onOk((role: string) => {
+    emit('addRole', { id: account.id, role })
+  })
+}
+
+const openRemoveRoleDialog = (account: Account) => {
+  $q.dialog({
+    message: lang.value.account.messages.removeRole(account),
+    options: {
+      type: 'radio',
+      model: 'role',
+      items: account.roles?.map((role) => ({
+        label: mappedRoles.value[role],
+        value: role
+      }))
+    },
+    cancel: true,
+    persistent: true
+  }).onOk((role) => {
+    emit('removeRole', { id: account.id, role })
+  })
+}
+</script>

package/src/ui/authentication/index.ts

@@ -10,4 +10,5 @@ export { default as VerificationSlider } from './VerificationSlider.vue'
 export { default as ConsentList } from './ConsentList.vue'
 export { default as UserMenuButton } from './UserMenuButton.vue'
 export { default as LoginButton } from './LoginButton.vue'
+export { default as AccountsTable } from './AccountsTable.vue'
 export { useLang, loadLang } from './lang/index.js'

package/src/ui/authentication/lang/en-US.ts

@@ -90,6 +90,24 @@ const lang: Language = {
   },
   verification: {
     slider: 'Please drag the slider below all the way to the right.'
+  },
+  account: {
+    title: 'Accounts',
+    fields: {
+      name: 'Name',
+      email: 'Email',
+      roles: 'Roles'
+    },
+    labels: {
+      addRole: 'Add role',
+      removeRole: 'Remove role'
+    },
+    messages: {
+      addRole: ({ email }) =>
+        `Select the role which you want to add to ${email}.`,
+      removeRole: ({ email }) =>
+        `Select the role which you want to remove from ${email}.`
+    }
   }
 }
 

package/src/ui/authentication/lang/index.ts

@@ -86,6 +86,22 @@ export interface Language {
   verification: {
     slider: string
   }
+  account: {
+    title: string
+    fields: {
+      name: string
+      email: string
+      roles: string
+    }
+    labels: {
+      addRole: string
+      removeRole: string
+    }
+    messages: {
+      addRole: ({ email }: { email: string }) => string
+      removeRole: ({ email }: { email: string }) => string
+    }
+  }
 }
 
 import type { Ref } from 'vue'

package/src/ui/authentication/lang/nl.ts

@@ -90,6 +90,24 @@ const lang: Language = {
   },
   verification: {
     slider: 'Sleep a.u.b. het onderstaande bolletje helemaal naar rechts.'
+  },
+  account: {
+    title: 'Accounts',
+    fields: {
+      name: 'Naam',
+      email: 'Email',
+      roles: 'Rollen'
+    },
+    labels: {
+      addRole: 'Rol toevoegen',
+      removeRole: 'Rol verwijderen'
+    },
+    messages: {
+      addRole: ({ email }) =>
+        `Selecteer de rol die u wilt toevoegen aan ${email}.`,
+      removeRole: ({ email }) =>
+        `Selecteer de rol die u wilt verwijderen van ${email}.`
+    }
   }
 }
 

package/src/ui/form/DateInput.vue

@@ -3,7 +3,7 @@
     :model-value="modelValue"
     bottom-slots
     :rules="validations"
-    :label="label"
+    :label="`${label}${required ? '*' : ''}`"
     stack-label
   >
     <template #control>
@@ -68,7 +68,7 @@ import { useLang } from './lang'
 export interface Props {
   modelValue: string | null
   format?: 'YYYY-MM-DD' | 'DD-MM-YYYY' | 'MM-DD-YYYY'
-  locale?: QuasarLanguageCodes
+  locale?: QuasarLanguageCodes[number]
   label?: string
   required?: boolean
   clearable?: boolean

package/src/ui/form/FilteredModelSelect.vue

@@ -19,12 +19,8 @@
     @update:model-value="$emit('update:model-value', $event)"
   >
     <template #hint> {{ hint }} </template>
-    <template
-      v-for="(slot, index) of Object.keys($slots)"
-      :key="index"
-      #[slot]="scope"
-    >
-      <slot :scope="scope" :name="slot"></slot>
+    <template v-for="(_, slot) in $slots" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="scope || {}" />
     </template>
   </q-select>
 </template>
@@ -41,13 +37,15 @@ export default {
   generic="T extends { id: number; [key: string]: unknown }"
 >
 import { QSelect } from 'quasar'
-import { computed, ref, toRefs, useAttrs, watch } from 'vue'
+import { computed, ref, toRefs, useAttrs, watch, onMounted } from 'vue'
 import { useLang } from './lang/index.js'
 
 interface Props {
   modelValue?: number | number[] | null
   labelKey: string
+  labelFunction?: (option: unknown) => string
   valueKey?: string
+  extraFields?: string[]
   filteredOptions: T[]
   required?: boolean
   onFilter?: unknown
@@ -76,13 +74,32 @@ const emit = defineEmits<{
 
 const lang = useLang()
 
-const { modelValue, onFilter, filteredOptions, labelKey, valueKey } =
-  toRefs(props)
+const {
+  modelValue,
+  onFilter,
+  filteredOptions,
+  labelKey,
+  valueKey,
+  labelFunction,
+  extraFields
+} = toRefs(props)
+
 const options = computed(() => {
   if (filteredOptions.value.length) {
     return filteredOptions.value?.map((option) => ({
-      label: option[labelKey.value],
-      value: option[valueKey.value || 'id']
+      label: labelFunction.value
+        ? labelFunction.value(option)
+        : option[labelKey.value],
+      value: option[valueKey.value || 'id'],
+      extraFields: extraFields.value?.reduce(
+        (result, key) => {
+          if (option.hasOwnProperty(key)) {
+            result[key] = option[key]
+          }
+          return result
+        },
+        {} as Record<string, unknown>
+      )
     }))
   }
   return []
@@ -122,4 +139,13 @@ watch(modelValue, () => {
       done: () => {}
     })
 })
+
+onMounted(() => {
+  if (!options.value.length)
+    emit('filter', {
+      ids: selectedIds.value,
+      searchPhrase: '',
+      done: () => {}
+    })
+})
 </script>

package/src/ui/form/LocaleSelect.vue

@@ -3,6 +3,7 @@
     v-bind="attrs"
     :options="languageOptions"
     :model-value="modelValue"
+    :label="`${lang.locale.locale}${required ? '*' : ''}`"
     emit-value
     map-options
   >
@@ -42,13 +43,17 @@ import { useAttrs, toRefs } from 'vue'
 import { QSelect } from 'quasar'
 import { nl, enUs } from '../flags/index.js'
 import { useLang as useFlagsLang } from '../flags/lang/index.js'
+import { useLang } from './lang/index.js'
+
 export interface Props {
   modelValue?: string | null
+  required?: boolean
 }
 const props = defineProps<Props>()
 const { modelValue } = toRefs(props)
 const attrs = useAttrs()
 
+const lang = useLang()
 const flagsLang = useFlagsLang()
 const languageOptions = [
   {

package/src/ui/form/lang/en-US.ts

@@ -36,6 +36,7 @@ const lang: Language = {
     }
   },
   datePicker: {
+    date: 'Date',
     placeholder: 'YYYY/MM/DD',
     YYYY: 'YYYY',
     MM: 'MM',
@@ -48,6 +49,9 @@ const lang: Language = {
     currency: 'Currency',
     EUR: 'Euro',
     USD: 'USD'
+  },
+  locale: {
+    locale: 'Locale'
   }
 }
 

package/src/ui/form/lang/index.ts

@@ -34,6 +34,7 @@ export interface Language {
     }
   }
   datePicker: {
+    date: string
     placeholder: string
     YYYY: string
     MM: string
@@ -47,6 +48,9 @@ export interface Language {
     EUR: string
     USD: string
   }
+  locale: {
+    locale: string
+  }
 }
 
 import type { Ref } from 'vue'

package/src/ui/form/lang/nl.ts

@@ -36,6 +36,7 @@ const lang: Language = {
     }
   },
   datePicker: {
+    date: 'Datum',
     placeholder: 'JJJJ/MM/DD',
     YYYY: 'JJJJ',
     MM: 'MM',
@@ -48,6 +49,9 @@ const lang: Language = {
     currency: 'Valuta',
     EUR: 'Euro',
     USD: 'USD'
+  },
+  locale: {
+    locale: 'Land'
   }
 }
 

package/src/ui/general/ResourcePage.vue

@@ -8,6 +8,7 @@
         class="shadow-2"
         :class="{ 'bg-dark': $q.dark.isActive, 'bg-white': !$q.dark.isActive }"
       >
+        <slot name="fab" />
         <q-btn
           v-if="type === 'create'"
           :disable="disabled"
@@ -21,7 +22,7 @@
           @click="create"
         />
         <q-btn
-          v-else
+          v-else-if="type === 'update'"
           :disable="disabled"
           flat
           style="margin-bottom: -50px; z-index: 5"
@@ -32,10 +33,10 @@
           class="q-mr-sm bg-primary text-white"
           @click="update"
         />
-        <q-toolbar-title shrink>
+        <q-toolbar-title>
           <slot name="header" />
         </q-toolbar-title>
-        <q-space />
+        <slot name="header-side" />
       </q-toolbar>
     </q-page-sticky>
   </q-page>
@@ -48,7 +49,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, toRefs, watch } from 'vue'
+import { ref, toRefs, watch, useSlots } from 'vue'
 import { useQuasar } from 'quasar'
 import { useLang, loadLang } from './lang'
 
@@ -56,13 +57,9 @@ export interface Props {
   type?: 'create' | 'update'
   disabled?: boolean
 }
-// const props = defineProps<Props>()
-const props = withDefaults(defineProps<Props>(), {
-  type: 'create',
-  disabled: false
-})
+const slots = useSlots()
+const props = defineProps<Props>()
 
-// const attrs = useAttrs();
 const emit = defineEmits<{
   (
     e: 'create',
@@ -92,7 +89,9 @@ watch($q.lang, (val) => {
   loadLang($q.lang.isoName)
 })
 
-const { disabled } = toRefs(props)
+const { type, disabled } = toRefs(props)
+
+if (!type.value && !slots.fab) type.value = 'create'
 
 const done = () => ''
 const create = (evt: unknown) =>