@drax/identity-vue 0.33.0 → 0.34.1

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.33.0",
+  "version": "0.34.1",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,12 +24,12 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.33.0",
-    "@drax/common-vue": "^0.33.0",
-    "@drax/crud-front": "^0.33.0",
-    "@drax/crud-share": "^0.33.0",
-    "@drax/crud-vue": "^0.33.0",
-    "@drax/identity-share": "^0.33.0"
+    "@drax/common-front": "^0.34.0",
+    "@drax/common-vue": "^0.34.0",
+    "@drax/crud-front": "^0.34.0",
+    "@drax/crud-share": "^0.34.0",
+    "@drax/crud-vue": "^0.34.0",
+    "@drax/identity-share": "^0.34.0"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -66,5 +66,5 @@
     "vue-tsc": "^2.1.6",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "2a006597a635f61776d252f92bb3899371244379"
+  "gitHead": "5c31e02383f5be9e2b647eff89bea7f33f461caa"
 }

package/src/components/IdentityProfileAvatar/IdentityProfileAvatar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {defineEmits} from 'vue'
-import {useAuthStore} from "../../stores/auth/AuthStore.js";
+import {useAuthStore} from "../../stores/AuthStore";
 
 
 

package/src/components/IdentityProfileView/IdentityProfileView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {useAuthStore} from "../../stores/auth/AuthStore.js";
+import {useAuthStore} from "../../stores/AuthStore";
 import IdentityProfileAvatarEdit from "../IdentityProfileAvatarEdit/IdentityProfileAvatarEdit.vue";
 import {useI18n} from "vue-i18n";
 defineEmits(['click'])

package/src/components/PermissionSelector/PermissionSelector.vue

@@ -3,21 +3,39 @@
 import {ref, onMounted, defineModel, computed} from 'vue'
 import type {PropType} from 'vue'
 import {useI18n} from "vue-i18n";
-const {t,te} = useI18n()
+import { useTheme } from 'vuetify'
+const {t, te} = useI18n()
 
 defineProps({
   errorMessages: {type: String as PropType<string | string[] | undefined>,},
   readonly: {type: Boolean, default: false},
 })
 
+const theme = useTheme()
+
+function hasCustomColor(colorName: string) {
+  return colorName in theme.current.value.colors
+}
+
+let enableColor = ref(hasCustomColor('enable') ? 'enable' : 'green-darken-3')
+
+
 const model = defineModel()
 import {useRole} from "../../composables/useRole";
 
 const {fetchPermissions} = useRole()
 let items = ref([])
+let loading = ref(false)
+
+async function sleep(ms: number) {
+  await new Promise((resolve) => setTimeout(resolve, ms));
+}
 
 onMounted(async () => {
+  loading.value = true
+  await sleep(1000) // simulate network delay
   items.value = await fetchPermissions()
+  loading.value = false
 })
 
 interface PermissionGroups {
@@ -49,39 +67,46 @@ const permissionGroups = computed(() => {
 </script>
 
 <template>
-  <v-sheet  class="pa-2">
-    <h5 class="text-h5 mb-2">{{te('permission.permissions') ? t('permission.permissions') : 'Permissions'}}</h5>
-  <v-item-group
-      v-model="model"
-      variant="outlined"
-      divided
-      multiple
-      color="green"
-  >
-    <template v-for="(permissions, entity) in permissionGroups" :key="entity">
-      <v-card class="mb-2" variant="outlined">
-        <v-card-title class="text-capitalize">
-          {{ t ? t('permission.'+entity) : entity }}
-        </v-card-title>
-        <v-card-text>
-          <v-item
-              v-for="permission in permissions"
-              v-slot="{ isSelected, toggle }"
-              :value="permission" :disabled="readonly"
-          >
-
-            <v-chip
-                :color="isSelected? 'green' : 'grey-darken-3'" :disabled="readonly"
-                @click="toggle" variant="flat" :rounded="false" border
-            >
-              {{ te('permission.'+permission) ? t('permission.'+permission) : permission }}
-            </v-chip>
-          </v-item>
-        </v-card-text>
-      </v-card>
-    </template>
-  </v-item-group>
+  <v-sheet class="pa-2">
+    <h5 class="text-h5 mb-2">{{ te('permission.permissions') ? t('permission.permissions') : 'Permissions' }}</h5>
+    <v-skeleton-loader
+        :loading="loading"
+        height="340"
+        type="list-item-two-line, list-item-two-line, list-item-two-line, list-item-two-line, list-item-two-line"
+    >
+
+      <v-item-group
+          v-model="model"
+          variant="outlined"
+          divided
+          multiple
+          color="green"
+      >
+        <template v-for="(permissions, entity) in permissionGroups" :key="entity">
+          <v-card class="mb-2" variant="outlined">
+            <v-card-title class="text-capitalize">
+              {{ t ? t('permission.' + entity) : entity }}
+            </v-card-title>
+            <v-card-text>
+              <v-item
+                  v-for="permission in permissions"
+                  v-slot="{ isSelected, toggle }"
+                  :value="permission" :disabled="readonly"
+              >
+
+                <v-btn
+                    :color="isSelected? enableColor : 'grey-darken-3'" :readonly="readonly"
+                    @click="toggle" variant="flat" :rounded="false" border
+                >
+                  {{ te('permission.' + permission) ? t('permission.' + permission) : permission }}
+                </v-btn>
+              </v-item>
+            </v-card-text>
+          </v-card>
+        </template>
+      </v-item-group>
 
+    </v-skeleton-loader>
   </v-sheet>
 </template>
 

package/src/components/SwitchTenant/SwitchTenant.vue

@@ -2,7 +2,7 @@
 import {ref} from "vue"
 import TenantCombobox from "../../combobox/TenantCombobox.vue";
 import {useAuth} from "../../composables/useAuth"
-import {useAuthStore} from "../../stores/auth/AuthStore"
+import {useAuthStore} from "../../stores/AuthStore"
 import {useI18n} from "vue-i18n"
 
 const authStore = useAuthStore()

package/src/composables/useAuth.ts

@@ -1,4 +1,4 @@
-import {useAuthStore} from "../stores/auth/AuthStore";
+import {useAuthStore} from "../stores/AuthStore";
 import {AuthHelper, AuthSystemFactory} from "@drax/identity-front";
 import type {AuthSystem} from "@drax/identity-front";
 import {useRouter} from 'vue-router'

package/src/cruds/role-crud/RoleCrud.ts

@@ -86,6 +86,14 @@ class RoleCrud extends EntityCrud implements IEntityCrud {
     return false
   }
 
+  get searchEnable() {
+    return true
+  }
+
+  get filterButtons() {
+    return false
+  }
+
 }
 
 export default RoleCrud

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

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import {useFormUtils, useCrudStore} from "@drax/crud-vue";
-import {defineEmits, defineModel, ref} from "vue";
+import {computed, defineEmits, defineModel, ref} from "vue";
 import {useI18nValidation} from "@drax/common-vue";
 import PermissionSelector from "../../components/PermissionSelector/PermissionSelector.vue";
 import RoleCombobox from "../../combobox/RoleCombobox.vue";
+import {useIdentityCrudStore} from "../../stores/IdentityCrudStore";
 import {useI18n} from "vue-i18n";
 
 const {$ta} = useI18nValidation()
@@ -14,6 +15,8 @@ const valueModel = defineModel({type: [Object]})
 const emit = defineEmits(['submit', 'cancel'])
 
 const store = useCrudStore()
+const identityCrudStore = useIdentityCrudStore()
+const entity = identityCrudStore.roleCrud
 
 const valid = ref()
 const formRef = ref()
@@ -33,8 +36,21 @@ function cancel() {
   emit('cancel')
 }
 
+const variant = computed(() => {
+  if (store.operation === 'create') {
+    return entity.inputVariantCreate
+  } else if (store.operation === 'edit') {
+    return entity.inputVariantEdit
+  } else if (store.operation === 'delete') {
+    return entity.inputVariantDelete
+  } else if (store.operation === 'view') {
+    return entity.inputVariantView
+  }
+  return 'outlined'
+})
+
 const {
-  variant, submitColor, readonly
+  submitColor, readonly
 } = useFormUtils(store.operation)
 
 </script>

package/src/cruds/tenant-crud/TenantCrud.ts

@@ -85,6 +85,14 @@ class TenantCrud extends EntityCrud implements IEntityCrud {
     return '800'
   }
 
+  get searchEnable() {
+    return true
+  }
+
+  get filterButtons() {
+    return false
+  }
+
 }
 
 export default TenantCrud

package/src/cruds/user-api-key-crud/UserApiKeyCrud.ts

@@ -88,6 +88,14 @@ class UserApiKeyCrud extends EntityCrud implements IEntityCrud {
     return false
   }
 
+  get searchEnable() {
+    return true
+  }
+
+  get filterButtons() {
+    return false
+  }
+
 }
 
 export default UserApiKeyCrud

package/src/cruds/user-crud/UserCrud.ts

@@ -1,13 +1,8 @@
-
-
 import {EntityCrud} from "@drax/crud-vue";
 import {UserSystemFactory} from "@drax/identity-front";
 import {RoleCrud} from '../role-crud/RoleCrud'
 import {TenantCrud} from '../tenant-crud/TenantCrud'
-import {useAuthStore} from '../../stores/auth/AuthStore'
-
-
-
+import {useAuthStore} from '../../stores/AuthStore'
 
 import type {
   IEntityCrud,
@@ -17,7 +12,6 @@ import type {
   IEntityCrudRefs
 } from "@drax/crud-share";
 
-
 class UserCrud extends EntityCrud implements IEntityCrud {
 
   static singleton: UserCrud
@@ -46,7 +40,6 @@ class UserCrud extends EntityCrud implements IEntityCrud {
 
   get headers():IEntityCrudHeader[] {
     return [
-        //{title: 'id',key:'_id', align: 'start'},
       { title: 'name', key: 'name', align: 'start' },
       { title: 'username', key: 'username', align: 'start' },
       { title: 'email', key: 'email', align: 'start' },
@@ -118,13 +111,30 @@ class UserCrud extends EntityCrud implements IEntityCrud {
 
   isItemEditable(item?:any) {
     const authStore = useAuthStore()
-    if(authStore?.authUser?.role?.childRoles){
+    if(authStore?.authUser?.role?.childRoles && authStore?.authUser?.role?.childRoles.length > 0){
       return  authStore.authUser.role.childRoles.some(role => role.name === item.role.name)
     }else{
       return true
     }
   }
 
+  isItemDeletable(item?:any) {
+    const authStore = useAuthStore()
+    if(authStore?.authUser?.role?.childRoles && authStore?.authUser?.role?.childRoles.length > 0){
+      return  authStore.authUser.role.childRoles.some(role => role.name === item.role.name)
+    }else{
+      return true
+    }
+  }
+
+  get searchEnable() {
+    return true
+  }
+
+  get filterButtons() {
+    return false
+  }
+
 }
 
 export default UserCrud

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

@@ -1,28 +1,28 @@
 <script setup lang="ts">
 import {useFormUtils, useCrudStore} from "@drax/crud-vue";
-import {defineEmits, defineModel, defineProps, type PropType, ref} from "vue";
+import {computed, defineEmits, defineModel, ref} from "vue";
 import {useI18nValidation} from "@drax/common-vue";
 import RoleCombobox from "../../combobox/RoleCombobox.vue";
 import TenantCombobox from "../../combobox/TenantCombobox.vue";
 import {useAuth} from "../../composables/useAuth";
 import {useI18n} from "vue-i18n";
-import type {IEntityCrudOperation} from "@drax/crud-share";
+import {useIdentityCrudStore} from "../../stores/IdentityCrudStore";
 
 const {$ta} = useI18nValidation()
 const {t, te} = useI18n()
 
 const {hasPermission} = useAuth()
 
-const {operation} = defineProps({
-  operation: {type: String as PropType<IEntityCrudOperation>, required: true},
-  enablePassword: {type: Boolean, default: false}
-})
 
 const valueModel = defineModel({type: [Object]})
 
 const emit = defineEmits(['submit', 'cancel'])
 
 const store = useCrudStore()
+const enablePassword = store.operation === 'create'
+
+const identityCrudStore = useIdentityCrudStore()
+const entity = identityCrudStore.userCrud
 
 const valid = ref()
 const formRef = ref()
@@ -31,7 +31,7 @@ const formRef = ref()
 async function submit() {
   store.resetErrors()
 
-  if(operation === 'delete') {
+  if(store.operation === 'delete') {
     emit('submit',valueModel.value)
     return
   }
@@ -49,10 +49,24 @@ function cancel() {
 }
 
 const {
-  variant, submitColor, readonly
+   submitColor, readonly
 } = useFormUtils(store.operation)
 
 
+const variant = computed(() => {
+  if (store.operation === 'create') {
+    return entity.inputVariantCreate
+  } else if (store.operation === 'edit') {
+    return entity.inputVariantEdit
+  } else if (store.operation === 'delete') {
+    return entity.inputVariantDelete
+  } else if (store.operation === 'view') {
+    return entity.inputVariantView
+  }
+  return 'outlined'
+})
+
+
 let passwordVisibility = ref(false)
 
 </script>

package/src/index.ts

@@ -38,7 +38,8 @@ import RoleCrud from "./cruds/role-crud/RoleCrud"
 
 
 
-import {useAuthStore} from "./stores/auth/AuthStore.js";
+import {useAuthStore} from "./stores/AuthStore.js";
+import {useIdentityCrudStore} from "./stores/IdentityCrudStore.js";
 
 import IdentityAuthRoutes from "./routes/IdentityAuthRoutes.js";
 import IdentityCrudRoutes from "./routes/IdentityCrudRoutes.js";
@@ -92,6 +93,7 @@ export {
 
     //Stores
     useAuthStore,
+    useIdentityCrudStore,
 
     //Routes
     IdentityCrudRoutes,

package/src/pages/crud/RoleCrudPage.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
 import {Crud, useCrud} from "@drax/crud-vue";
-import RoleCrud from "../../cruds/role-crud/RoleCrud";
 import RoleForm from "../../cruds/role-crud/RoleForm.vue";
 import {useI18n} from "vue-i18n";
-
+import {useIdentityCrudStore} from "../../stores/IdentityCrudStore"
+const identityCrudStore = useIdentityCrudStore();
 const {t, te} = useI18n()
 
 const {
   onCancel, onSubmit,form
-} = useCrud(RoleCrud.instance);
+} = useCrud(identityCrudStore.roleCrud);
 
 </script>
 
 <template>
-  <crud :entity="RoleCrud.instance">
+  <crud :entity="identityCrudStore.roleCrud">
 
     <template v-slot:form>
       <role-form

package/src/pages/crud/TenantCrudPage.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import TenantCrud from '../../cruds/tenant-crud/TenantCrud'
+import {useIdentityCrudStore} from "../../stores/IdentityCrudStore"
+const identityCrudStore = useIdentityCrudStore();
 import {Crud} from "@drax/crud-vue";
 </script>
 
 <template>
-  <crud :entity="TenantCrud.instance">
+  <crud :entity="identityCrudStore.tenantCrud">
 
   </crud>
 </template>

package/src/pages/crud/UserApiKeyCrudPage.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
 
-import UserApiKeyCrud from "../../cruds/user-api-key-crud/UserApiKeyCrud";
 import UserApiKeyForm from "../../cruds/user-api-key-crud/UserApiKeyForm.vue";
 import {Crud, useCrud} from "@drax/crud-vue";
 import type {IUserApiKey} from "@drax/identity-share";
 import {formatDateTime} from "@drax/common-front";
 import UserApiKeyCreated from "../../cruds/user-api-key-crud/UserApiKeyCreated.vue";
 import {ref} from "vue";
+import {useIdentityCrudStore} from "../../stores/IdentityCrudStore"
+const identityCrudStore = useIdentityCrudStore();
 
 const {
   onCancel, onSubmit,form
-} = useCrud(UserApiKeyCrud.instance);
+} = useCrud(identityCrudStore.userApiKeyCrud);
 
 const userApiKeyCreated = ref<IUserApiKey>();
 const userApiKeyCreatedDialog = ref<boolean>(false);
@@ -37,7 +38,7 @@ function onCreated(item:IUserApiKey) {
         v-model="userApiKeyCreatedDialog"
     />
 
-  <crud :entity="UserApiKeyCrud.instance" @created="onCreated">
+  <crud :entity="identityCrudStore.userApiKeyCrud" @created="onCreated">
 
     <template v-slot:form>
       <user-api-key-form

package/src/pages/crud/UserCrudPage.vue

@@ -7,8 +7,11 @@ import UserForm from "../../cruds/user-crud/UserForm.vue";
 import PasswordUpdateButton from "../../cruds/user-crud/PasswordUpdateButton.vue";
 import UserPasswordDialog from "../../cruds/user-crud/UserPasswordDialog.vue";
 import type {IUser} from "@drax/identity-share";
+import {useIdentityCrudStore} from "../../stores/IdentityCrudStore"
 
-const {onCancel, onSubmit,form, operation } = useCrud(UserCrud.instance);
+const identityCrudStore = useIdentityCrudStore();
+
+const {onCancel, onSubmit, form } = useCrud(UserCrud.instance);
 
 const dialogPassword = ref(false);
 const userSelected = ref();
@@ -31,12 +34,10 @@ function onChangePassword(user:IUser){
         :user="userSelected"
     />
 
-    <crud :entity="UserCrud.instance">
+    <crud :entity="identityCrudStore.userCrud">
 
       <template v-slot:form>
         <user-form
-            :enable-password="operation === 'create'"
-            :operation="operation"
             v-model="form"
             @submit="onSubmit"
             @cancel="onCancel"

package/src/stores/IdentityCrudStore.ts

@@ -0,0 +1,36 @@
+// Utilities
+import { defineStore } from 'pinia'
+import UserCrud from "../cruds/user-crud/UserCrud";
+import UserApiKeyCrud from "../cruds/user-api-key-crud/UserApiKeyCrud";
+import RoleCrud from "../cruds/role-crud/RoleCrud";
+import TenantCrud from "../cruds/tenant-crud/TenantCrud";
+import type {IEntityCrud} from "@drax/crud-share";
+
+export const useIdentityCrudStore = defineStore('IdentityCrudStore', {
+  state: (): {
+    userCrud: IEntityCrud;
+    userApiKeyCrud: IEntityCrud;
+    roleCrud: IEntityCrud;
+    tenantCrud: IEntityCrud;
+  } => ({
+    userCrud: UserCrud.instance,
+    userApiKeyCrud: UserApiKeyCrud.instance,
+    roleCrud: RoleCrud.instance,
+    tenantCrud: TenantCrud.instance,
+  }),
+  actions:{
+    setUserCrud(userCrud: IEntityCrud){
+      this.userCrud = userCrud
+    },
+    setUserApiKeyCrud(userApiKeyCrud: IEntityCrud){
+      this.userApiKeyCrud = userApiKeyCrud
+    },
+    setRoleCrud(roleCrud:IEntityCrud){
+      this.roleCrud = roleCrud
+    },
+    setTenantCrud(tenantCrud:IEntityCrud){
+      this.tenantCrud = tenantCrud
+    },
+
+  }
+})