@drax/identity-vue 0.1.9 → 0.3.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.9",
+  "version": "0.3.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,15 +24,15 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.1.0",
-    "@drax/common-share": "^0.1.0",
-    "@drax/common-vue": "^0.1.9",
-    "@drax/identity-share": "^0.1.6",
-    "vue-i18n": "^9.13.1"
+    "@drax/common-front": "^0.3.0",
+    "@drax/common-share": "^0.3.0",
+    "@drax/common-vue": "^0.3.0",
+    "@drax/identity-share": "^0.3.0"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
     "vue": "^3.5.3",
+    "vue-i18n": "^9.14.0",
     "vuetify": "^3.7.1"
   },
   "devDependencies": {
@@ -51,7 +51,7 @@
     "eslint-plugin-vue": "^9.23.0",
     "jsdom": "^24.0.0",
     "npm-run-all2": "^6.1.2",
-    "pinia": "^2.1.7",
+    "pinia": "^2.2.2",
     "pinia-plugin-persistedstate": "^3.2.1",
     "prettier": "^3.2.5",
     "start-server-and-test": "^2.0.3",
@@ -61,8 +61,8 @@
     "vite-plugin-dts": "^3.9.1",
     "vitest": "^1.6.0",
     "vue": "^3.5.3",
-    "vue-tsc": "^2.0.11",
+    "vue-tsc": "^2.1.6",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "008799fefedcf58880f74e9603b647ea94506f22"
+  "gitHead": "5ec8cb15b649fb29c69fbb7f248346487e0e9be2"
 }

package/src/combobox/TenantCombobox.vue

@@ -5,6 +5,10 @@ import type { PropType } from 'vue'
 defineProps({
   errorMessages: {
     type: String as PropType<string | string[] | undefined>,
+  },
+  clearable: {
+    type: Boolean,
+    default: false,
   }
 })
 
@@ -29,6 +33,7 @@ onMounted(async () => {
       item-value="id"
       variant="outlined"
       :error-messages="errorMessages"
+      :clearable="clearable"
   ></v-select>
 </template>
 

package/src/composables/useRole.ts

@@ -27,9 +27,9 @@ export function useRole() {
         return roles
     }
 
-    async function paginateRole({page= 1, limit= 5, orderBy="", orderDesc=false, search = ""}) {
+    async function paginateRole({page= 1, limit= 5, orderBy="", order=false, search = ""}) {
         loading.value = true
-        let paginatedrole = roleSystem.paginate({page, limit, orderBy, orderDesc, search})
+        let paginatedrole = roleSystem.paginate({page, limit, orderBy, order, search})
         loading.value = false
         return paginatedrole
     }

package/src/composables/useTenant.ts

@@ -20,9 +20,9 @@ export function useTenant() {
         return tenants
     }
 
-    async function paginateTenant({page= 1, limit= 5, orderBy="", orderDesc=false, search = ""}) {
+    async function paginateTenant({page= 1, limit= 5, orderBy="", order=false, search = ""}) {
         loading.value = true
-        let paginatedtenant = tenantSystem.paginate({page, limit, orderBy, orderDesc, search})
+        let paginatedtenant = tenantSystem.paginate({page, limit, orderBy, order, search})
         loading.value = false
         return paginatedtenant
     }

package/src/composables/useUser.ts

@@ -13,9 +13,9 @@ export function useUser() {
     let inputErrors = ref<IClientInputError>()
     let loading = ref(false);
 
-    async function paginateUser({page= 1, limit= 5, orderBy="", orderDesc=false, search = ""}) {
+    async function paginateUser({page= 1, limit= 5, orderBy="", order=false, search = ""}) {
         loading.value = true
-        let paginatedUser = userSystem.paginate({page, limit, orderBy, orderDesc, search})
+        let paginatedUser = userSystem.paginate({page, limit, orderBy, order, search})
         loading.value = false
         return paginatedUser
     }

package/src/composables/useUserApiKey.ts

@@ -14,9 +14,9 @@ export function useUserApiKey() {
     let loading = ref(false);
 
 
-    async function paginateUserApiKey({page= 1, limit= 5, orderBy="", orderDesc=false, search = ""}) {
+    async function paginateUserApiKey({page= 1, limit= 5, orderBy="", order=false, search = ""}) {
         loading.value = true
-        let paginateduserApiKey = userApiKeySystem.paginate({page, limit, orderBy, orderDesc, search})
+        let paginateduserApiKey = userApiKeySystem.paginate({page, limit, orderBy, order, search})
         loading.value = false
         return paginateduserApiKey
     }

package/src/cruds/role-crud/RoleList.vue

@@ -32,6 +32,7 @@ const serverItems: Ref<IRole[]> = ref([]);
 const totalItems = ref(0)
 const loading = ref(false)
 const search = ref('')
+const sortBy : Ref<any> = ref([])
 
 async function loadItems(){
   try{
@@ -39,6 +40,8 @@ async function loadItems(){
     const r = await paginateRole({
       page: page.value,
       limit: itemsPerPage.value,
+      orderBy: sortBy.value[0]?.key,
+      order: sortBy.value[0]?.order,
       search: search.value})
     serverItems.value = r.items
     totalItems.value = r.total
@@ -61,7 +64,9 @@ defineExpose({
   <v-data-table-server
       v-if="hasPermission('user:manage')"
       v-model:items-per-page="itemsPerPage"
+      :items-per-page-options="[5, 10, 20, 50]"
       v-model:page="page"
+      v-model:sort-by="sortBy"
       :headers="headers"
       :items="serverItems"
       :items-length="totalItems"

package/src/cruds/tenant-crud/TenantList.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-
 import {defineProps, type Ref, ref} from "vue";
 import {useTenant} from "../../composables/useTenant";
 import {useAuth} from "../../composables/useAuth";
 import {useI18n} from "vue-i18n";
 import type {ITenant} from "@drax/identity-share";
-import dayjs from "dayjs";
+import {formatDateTime} from "@drax/common-front";
 
 const {hasPermission} = useAuth()
 const {paginateTenant} = useTenant()
@@ -24,18 +23,23 @@ const serverItems: Ref<ITenant[]> = ref([]);
 const totalItems = ref(0)
 const loading = ref(false)
 const search = ref('')
+const sortBy : Ref<any> = ref([])
+
 const headers = ref<any>([
   { title: t('tenant.name') as string, key: 'name', align: 'start' },
   { title: t('tenant.createdAt') as string, key: 'createdAt', align: 'start' },
   { title: '', key: 'actions', align: 'end', minWidth: '150px' },
 ])
 
+
 async function loadItems(){
   try{
     loading.value = true
     const r = await paginateTenant({
       page: page.value,
       limit: itemsPerPage.value,
+      orderBy: sortBy.value[0]?.key,
+      order: sortBy.value[0]?.order,
       search: search.value})
     serverItems.value = r.items
     totalItems.value = r.total
@@ -59,12 +63,15 @@ defineExpose({
       class="border"
       v-if="hasPermission('user:manage')"
       v-model:items-per-page="itemsPerPage"
+      :items-per-page-options="[5, 10, 20, 50]"
       v-model:page="page"
+      v-model:sort-by="sortBy"
       :headers="headers"
       :items="serverItems"
       :items-length="totalItems"
       :loading="loading"
       :search="search"
+      :multi-sort="false"
       item-value="name"
       @update:options="loadItems"
   >
@@ -84,7 +91,7 @@ defineExpose({
     </template>
 
     <template v-slot:item.createdAt="{ value }" >
-      {{value ? dayjs(value).format('YYYY-MM-DD') : '' }}
+      {{formatDateTime(value)}}
     </template>
 
 

package/src/cruds/user-api-key-crud/UserApiKeyList.vue

@@ -5,7 +5,7 @@ import {useUserApiKey} from "../../composables/useUserApiKey";
 import {useAuth} from "../../composables/useAuth";
 import {useI18n} from "vue-i18n";
 import type {IUserApiKey} from "@drax/identity-share";
-import dayjs from "dayjs";
+import {formatDateTime} from "@drax/common-front";
 
 const {hasPermission} = useAuth()
 const {paginateUserApiKey} = useUserApiKey()
@@ -24,9 +24,10 @@ const serverItems: Ref<IUserApiKey[]> = ref([]);
 const totalItems = ref(0)
 const loading = ref(false)
 const search = ref('')
+const sortBy : Ref<any> = ref([])
 
 const headers = ref<any>([
-    ...( hasPermission('userApiKey:view') ? [{ title: t('userApiKey.user') as string, key: 'user.username', align: 'start' }] : []),
+    ...( hasPermission('userApiKey:view') ? [{ title: t('userApiKey.user') as string, key: 'user.username', align: 'start', sortable: false }] : []),
   { title: t('userApiKey.name') as string, key: 'name', align: 'start' },
   { title: t('userApiKey.ipv4') as string, key: 'ipv4', align: 'start' },
   { title: t('userApiKey.ipv6') as string, key: 'ipv6', align: 'start' },
@@ -40,6 +41,8 @@ async function loadItems(){
     const r = await paginateUserApiKey({
       page: page.value,
       limit: itemsPerPage.value,
+      orderBy: sortBy.value[0]?.key,
+      order: sortBy.value[0]?.order,
       search: search.value})
     serverItems.value = r.items
     totalItems.value = r.total
@@ -63,7 +66,9 @@ defineExpose({
       class="border"
       v-if="hasPermission('userApiKey:manage')"
       v-model:items-per-page="itemsPerPage"
+      :items-per-page-options="[5, 10, 20, 50]"
       v-model:page="page"
+      v-model:sort-by="sortBy"
       :headers="headers"
       :items="serverItems"
       :items-length="totalItems"
@@ -96,7 +101,7 @@ defineExpose({
     </template>
 
     <template v-slot:item.createdAt="{ value }" >
-      {{value ? dayjs(value).format('YYYY-MM-DD') : '' }}
+      {{formatDateTime(value)}}
     </template>
 
 

package/src/cruds/user-crud/UserList.vue

@@ -34,6 +34,7 @@ const serverItems: Ref<IUser[]> = ref([]);
 const totalItems = ref(0)
 const loading = ref(false)
 const search = ref('')
+const sortBy : Ref<any> = ref([])
 
 async function loadItems(){
   try{
@@ -41,6 +42,8 @@ async function loadItems(){
     const r = await paginateUser({
       page: page.value,
       limit: itemsPerPage.value,
+      orderBy: sortBy.value[0]?.key,
+      order: sortBy.value[0]?.order,
       search: search.value})
     serverItems.value = r.items
     totalItems.value = r.total
@@ -64,6 +67,8 @@ defineExpose({
       v-if="hasPermission('user:manage')"
       v-model:items-per-page="itemsPerPage"
       v-model:page="page"
+      v-model:sort-by="sortBy"
+      :items-per-page-options="[5, 10, 20, 50]"
       :headers="headers"
       :items="serverItems"
       :items-length="totalItems"

package/src/forms/UserCreateForm.vue

@@ -76,6 +76,7 @@ const onSubmit = () => {
     <TenantCombobox
         v-model="form.tenant"
         :error-messages="$ta(inputErrors.tenant)"
+        clearable
     ></TenantCombobox>
 
     <v-text-field

package/src/forms/UserEditForm.vue

@@ -62,6 +62,7 @@ const onSubmit = () => {
     <TenantCombobox
         v-model="form.tenant"
         :error-messages="$ta(inputErrors.tenant)"
+        clearable
     ></TenantCombobox>
 
     <v-text-field