@drax/identity-vue 0.5.3 → 0.5.4

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.3",
+  "version": "0.5.4",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,9 +24,10 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.5.1",
-    "@drax/common-vue": "^0.5.1",
-    "@drax/crud-share": "^0.5.3",
+    "@drax/common-front": "^0.5.4",
+    "@drax/common-vue": "^0.5.4",
+    "@drax/crud-front": "^0.5.3",
+    "@drax/crud-share": "^0.5.4",
     "@drax/identity-share": "^0.5.1"
   },
   "peerDependencies": {
@@ -64,5 +65,5 @@
     "vue-tsc": "^2.1.6",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "56ea5a743bce196d6322ae6c26ea5b041450d7a3"
+  "gitHead": "6db0bebb2df9edecd2c3caa7288fb5c7001c4243"
 }

package/src/combobox/RoleCombobox.vue

@@ -1,31 +1,26 @@
 <script setup lang="ts">
-
 import {ref, onMounted, defineModel} from 'vue'
-import type { PropType } from 'vue'
+import type {PropType} from 'vue'
+import type {IRole} from "@drax/identity-share";
+import {useRole} from "../composables/useRole";
+
 defineProps({
-  errorMessages: {
-    type: String as PropType<string | string[] | undefined>,
-  },
-  multiple:{
-    type: Boolean,
-    default: false,
-  },
-  clearable:{
-    type: Boolean,
-    default: false,
-  }
+  errorMessages: {type: String as PropType<string | string[] | undefined>},
+  multiple: {type: Boolean, default: false},
+  clearable: {type: Boolean, default: false},
+  readonly: {type: Boolean, default: false},
+  density: {type: String as PropType<'comfortable' | 'compact' | 'default'>, default: 'default'},
+  variant: {type: String as PropType<'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'>, default: 'filled'},
 })
 
 const model = defineModel<any>()
-import {useRole} from "../composables/useRole";
+
 const {fetchRole} = useRole()
-let items = ref([])
+let items = ref<IRole[]>([])
 
 onMounted(async () => {
   items.value = await fetchRole()
 })
-
-
 </script>
 
 <template>
@@ -35,10 +30,12 @@ onMounted(async () => {
       :items="items"
       item-title="name"
       item-value="id"
-      variant="outlined"
+      :variant="variant"
       :error-messages="errorMessages"
       :multiple="multiple"
       :clearable="clearable"
+      :readonly="readonly"
+      :density="density"
   ></v-select>
 </template>
 

package/src/components/PermissionSelector/PermissionSelector.vue

@@ -6,9 +6,8 @@ import {useI18n} from "vue-i18n";
 const {t,te} = useI18n()
 
 defineProps({
-  errorMessages: {
-    type: String as PropType<string | string[] | undefined>,
-  }
+  errorMessages: {type: String as PropType<string | string[] | undefined>,},
+  readonly: {type: Boolean, default: false},
 })
 
 const model = defineModel()
@@ -68,17 +67,15 @@ const permissionGroups = computed(() => {
           <v-item
               v-for="permission in permissions"
               v-slot="{ isSelected, toggle }"
-              :value="permission"
+              :value="permission" :disabled="readonly"
           >
 
             <v-chip
-                :color="isSelected? 'green' : 'grey-darken-3'" class=""
+                :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>

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

@@ -0,0 +1,83 @@
+
+import {EntityCrud} from "@drax/crud-vue";
+import {RoleSystemFactory} from "@drax/identity-front";
+import type {IEntityCrud, IEntityCrudField, IEntityCrudFilter, IEntityCrudHeader} from "@drax/crud-share";
+
+
+class RoleCrud extends EntityCrud implements IEntityCrud {
+
+  static singleton: RoleCrud
+
+  constructor() {
+    super();
+    this.name = 'Role'
+  }
+
+  static get instance(): RoleCrud {
+    if(!RoleCrud.singleton){
+      RoleCrud.singleton = new RoleCrud()
+    }
+    return RoleCrud.singleton
+  }
+
+  get permissions(){
+    return {
+      manage: 'tenant:manage',
+      view: 'tenant:view',
+      create: 'tenant:create',
+      update: 'tenant:update',
+      delete: 'tenant:delete'
+    }
+  }
+
+  get headers():IEntityCrudHeader[] {
+    return [
+        //{title: 'id',key:'_id', align: 'start'},
+        {title: 'name',key:'name', align: 'start'},
+        {title: 'permissions',key:'permissions', align: 'start'},
+        {title: 'childRoles',key:'childRoles', align: 'start'},
+        {title: 'readonly',key:'readonly', align: 'start'},
+    ]
+  }
+
+  get provider(){
+    return RoleSystemFactory.getInstance()
+  }
+
+  get refs(){
+    return {
+
+    }
+  }
+
+  get rules(){
+    return {
+      name: [(v: any) => !!v || 'Requerido']
+    }
+  }
+
+  get fields(): IEntityCrudField[]{
+    return [
+        {name: 'name', type: 'string', label: 'name', default:'', prependInnerIcon:'mdi-text-short'  }
+    ]
+  }
+
+  get filters():IEntityCrudFilter[]{
+    return [
+
+    ]
+  }
+
+  get dialogFullscreen(){
+    return false
+  }
+
+  get exportHeaders(){
+    return ['_id', 'name']
+  }
+
+}
+
+export default RoleCrud
+
+export {RoleCrud}

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

@@ -1,7 +1,7 @@
 
 import {EntityCrud} from "@drax/crud-vue";
 import {TenantSystemFactory} from "@drax/identity-front";
-import type {IEntityCrud, IEntityCrudField, IEntityCrudHeader} from "@drax/crud-share";
+import type {IEntityCrud, IEntityCrudField, IEntityCrudFilter, IEntityCrudHeader} from "@drax/crud-share";
 
 
 class TenantCrud extends EntityCrud implements IEntityCrud {
@@ -55,7 +55,13 @@ class TenantCrud extends EntityCrud implements IEntityCrud {
 
   get fields(): IEntityCrudField[]{
     return [
-        {name: 'name', type: 'string', label: 'name', default:'' }
+        {name: 'name', type: 'string', label: 'name', default:'', prependInnerIcon:'mdi-text-short'  }
+    ]
+  }
+
+  get filters():IEntityCrudFilter[]{
+    return [
+
     ]
   }
 
@@ -70,4 +76,4 @@ class TenantCrud extends EntityCrud implements IEntityCrud {
 }
 
 export default TenantCrud
-
+export { TenantCrud }

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

@@ -0,0 +1,101 @@
+
+
+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 type {
+  IEntityCrud,
+  IEntityCrudField,
+  IEntityCrudFilter,
+  IEntityCrudHeader,
+  IEntityCrudRefs
+} from "@drax/crud-share";
+
+
+class UserCrud extends EntityCrud implements IEntityCrud {
+
+  static singleton: UserCrud
+
+  constructor() {
+    super();
+    this.name = 'User'
+  }
+
+  static get instance(): UserCrud {
+    if(!UserCrud.singleton){
+      UserCrud.singleton = new UserCrud()
+    }
+    return UserCrud.singleton
+  }
+
+  get permissions(){
+    return {
+      manage: 'tenant:manage',
+      view: 'tenant:view',
+      create: 'tenant:create',
+      update: 'tenant:update',
+      delete: 'tenant:delete'
+    }
+  }
+
+  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' },
+      { title: 'role', key: 'role.name', align: 'start' },
+      { title: 'tenant', key: 'tenant.name', align: 'start' },
+      { title: 'active', key: 'active', align: 'start' },
+    ]
+  }
+
+  get provider(){
+    return UserSystemFactory.getInstance()
+  }
+
+  get refs():IEntityCrudRefs{
+    return {
+      role: RoleCrud.instance,
+      tenant: TenantCrud.instance,
+    }
+  }
+
+  get rules(){
+    return {
+      name: [(v: any) => !!v || 'Requerido']
+    }
+  }
+
+  get fields(): IEntityCrudField[]{
+    return [
+        {name: 'name', type: 'string', label: 'name', default:'' },
+        {name: 'username', type: 'string', label: 'username', default:'' },
+        {name: 'email', type: 'string', label: 'email', default:'' },
+        {name: 'phone', type: 'string', label: 'phone', default:'' },
+        {name: 'role', type: 'ref', ref: 'role', label: 'role', default:null },
+        {name: 'tenant', type: 'ref', ref: 'tenant', label: 'tenant', default:null },
+        {name: 'active', type: 'boolean',  label: 'active', default:true },
+
+    ]
+  }
+
+  get filters():IEntityCrudFilter[]{
+    return [
+
+    ]
+  }
+
+  get dialogFullscreen(){
+    return false
+  }
+
+  get exportHeaders(){
+    return ['_id', 'name','username','email','phone','role.name','tenant.name','active']
+  }
+
+}
+
+export default UserCrud
+

package/src/forms/RoleForm.vue

@@ -1,55 +1,87 @@
 <script setup lang="ts">
-import {defineModel, type PropType} from "vue";
-import type {IRoleBase} from "@drax/identity-share";
+import {useFormUtils, useCrudStore} from "@drax/crud-vue";
+import {defineEmits, defineModel, defineProps, ref} from "vue";
 import {useI18nValidation} from "@drax/common-vue";
-import type {IClientInputError} from "@drax/common-front";
 import PermissionSelector from "../components/PermissionSelector/PermissionSelector.vue";
 import RoleCombobox from "../combobox/RoleCombobox.vue";
 
 const {$ta} = useI18nValidation()
+import {useI18n} from "vue-i18n";
+
+const {t} = useI18n()
+
+const valueModel = defineModel({type: [Object]})
 
 defineProps({
-  inputErrors: {
-    type: Object as PropType<IClientInputError>,
-    default: () => ({name: "", permissions: "", readonly: ""})
-  }
+  error: {type: String, required: false},
 })
 
-const form = defineModel<IRoleBase>({
-  type: Object,
-  default: () => ({name: "", permissions: [], readonly: false})
-})
+const emit = defineEmits(['submit', 'cancel'])
+
+const store = useCrudStore()
+
+const valid = ref()
+const formRef = ref()
 
-const emits = defineEmits(['formSubmit'])
+async function submit() {
+  store.resetErrors()
+  await formRef.value.validate()
 
-// Function to call when form is attempted to be submitted
-const onSubmit = () => {
-  emits('formSubmit', form); // Emitting an event with the form data
+  if(valid.value) {
+    emit('submit',valueModel.value)
+  }else{
+    console.log('Invalid form')
+  }
+}
+
+function cancel() {
+  emit('cancel')
 }
 
+const  {
+  variant, submitColor, readonly
+} = useFormUtils(store.operation)
+
 </script>
 
 <template>
-  <form @submit.prevent="onSubmit">
+  <v-form v-model="valid" ref="formRef" @submit.prevent="submit">
     <v-text-field
-        variant="outlined"
         id="name-input"
-        label="Name"
-        v-model="form.name"
+        name="name"
+        :label="$t('role.fields.name')"
+        v-model="valueModel.name"
         prepend-inner-icon="mdi-card-account-details"
-        required
-        :error-messages="$ta(inputErrors.name)"
+        :variant="variant"
+        :error-messages="$ta(store.inputErrors?.name)"
+        :rules="[v => !!v || 'validation.required']"
+        density="default"
+        :readonly="readonly"
+        :clearable="false"
     ></v-text-field>
 
     <RoleCombobox
-        v-model="form.childRoles"
-        :error-messages="$ta(inputErrors.role)"
+        v-model="valueModel.childRoles"
+        :error-messages="$ta(store.inputErrors?.role)"
         multiple
+        :readonly="readonly"
+        :variant="variant"
     ></RoleCombobox>
 
-    <PermissionSelector v-model="form.permissions"></PermissionSelector>
+    <PermissionSelector
+        v-model="valueModel.permissions"
+        :readonly="readonly"
+    ></PermissionSelector>
+
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-btn variant="text" color="grey" @click="cancel">{{ t('action.cancel') }}</v-btn>
+      <v-btn variant="flat" v-if="store.operation != 'view'" :color="submitColor" @click="submit">
+        {{ store.operation ? t('action.' + store.operation) : t('action.sent') }}
+      </v-btn>
+    </v-card-actions>
 
-  </form>
+  </v-form>
 </template>
 
 <style scoped>

package/src/forms/RoleFormOld.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import {defineModel, type PropType} from "vue";
+import type {IRoleBase} from "@drax/identity-share";
+import {useI18nValidation} from "@drax/common-vue";
+import type {IClientInputError} from "@drax/common-front";
+import PermissionSelector from "../components/PermissionSelector/PermissionSelector.vue";
+import RoleCombobox from "../combobox/RoleCombobox.vue";
+
+const {$ta} = useI18nValidation()
+
+defineProps({
+  inputErrors: {
+    type: Object as PropType<IClientInputError>,
+    default: () => ({name: "", permissions: "", readonly: ""})
+  }
+})
+
+const form = defineModel<IRoleBase>({
+  type: Object,
+  default: () => ({name: "", permissions: [], readonly: false})
+})
+
+const emits = defineEmits(['formSubmit'])
+
+// Function to call when form is attempted to be submitted
+const onSubmit = () => {
+  emits('formSubmit', form); // Emitting an event with the form data
+}
+
+</script>
+
+<template>
+  <form @submit.prevent="onSubmit">
+    <v-text-field
+        variant="outlined"
+        id="name-input"
+        label="Name"
+        v-model="form.name"
+        prepend-inner-icon="mdi-card-account-details"
+        required
+        :error-messages="$ta(inputErrors.name)"
+    ></v-text-field>
+
+    <RoleCombobox
+        v-model="form.childRoles"
+        :error-messages="$ta(inputErrors.role)"
+        multiple
+    ></RoleCombobox>
+
+    <PermissionSelector v-model="form.permissions"></PermissionSelector>
+
+  </form>
+</template>
+
+<style scoped>
+
+</style>

package/src/pages/RoleCrudCustomPage.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+import RoleCrud from "../cruds/role-crud/RoleCrud.vue";
+</script>
+
+<template>
+<RoleCrud></RoleCrud>
+</template>
+
+<style scoped>
+
+</style>

package/src/pages/RoleCrudPage.vue

@@ -1,10 +1,59 @@
 <script setup lang="ts">
+import {Crud, useCrud} from "@drax/crud-vue";
+import RoleCrud from "../cruds/role-crud/RoleCrud";
+import RoleForm from "../forms/RoleForm.vue";
+import {useI18n} from "vue-i18n";
+
+const {t, te} = useI18n()
+
+const {
+  onCancel, onSubmit,form
+} = useCrud(RoleCrud.instance);
 
-import RoleCrud from "../cruds/role-crud/RoleCrud.vue";
 </script>
 
 <template>
-<RoleCrud></RoleCrud>
+  <crud :entity="RoleCrud.instance">
+
+    <template v-slot:form>
+      <role-form
+          v-model="form"
+          @submit="onSubmit"
+          @cancel="onCancel"
+      />
+    </template>
+
+    <template v-slot:item.permissions="{ value }">
+      <v-chip
+          v-for="permission in value"
+          :key="permission" color="green"
+          class="ma-1"
+      >
+        {{ te(`permission.${permission}`) ? t(`permission.${permission}`) : permission }}
+      </v-chip>
+    </template>
+
+    <template v-slot:item.childRoles="{ value }">
+      <v-chip
+          v-if="value && value.length > 0"
+          v-for="role in value"
+          :key="role" color="blue"
+          class="ma-1"
+      >
+        {{ role.name }}
+      </v-chip>
+    </template>
+
+    <template v-slot:item.readonly="{ value }">
+      <v-chip v-if="value" color="red">
+        <v-icon class="mdi mdi-pencil-off-outline"></v-icon>
+      </v-chip>
+      <v-chip v-else color="green">
+        <v-icon class="mdi mdi-pencil-outline"></v-icon>
+      </v-chip>
+    </template>
+
+  </crud>
 </template>
 
 <style scoped>

package/src/pages/UserCrudCustomPage.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+import UserCrud from "../cruds/user-crud/UserCrud.vue";
+</script>
+
+<template>
+<UserCrud></UserCrud>
+</template>
+
+<style scoped>
+
+</style>

package/src/pages/UserCrudPage.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
-
-import UserCrud from "../cruds/user-crud/UserCrud.vue";
+import UserCrud from "../cruds/user-crud/UserCrud";
+import {Crud} from "@drax/crud-vue";
 </script>
 
 <template>
-<UserCrud></UserCrud>
+  <crud :entity="UserCrud.instance">
+    <template v-slot:item.active="{ value }" >
+      <v-chip :color="value ? 'green':'red'" >
+        {{ value ? 'Active' : 'Inactive' }}
+      </v-chip>
+    </template>
+  </crud>
 </template>
 
 <style scoped>

package/src/routes/IdentityRoutes.ts

@@ -2,71 +2,107 @@ import LoginPage from '../pages/LoginPage.vue'
 import ProfilePage from '../pages/ProfilePage.vue'
 import PasswordPage from '../pages/PasswordPage.vue'
 import UserCrudPage from '../pages/UserCrudPage.vue'
+import UserCrudCustomPage from '../pages/UserCrudCustomPage.vue'
 import RoleCrudPage from '../pages/RoleCrudPage.vue'
+import RoleCrudCustomPage from '../pages/RoleCrudCustomPage.vue'
 import TenantCrudPage from '../pages/TenantCrudPage.vue'
+import TenantCrudCustomPage from '../pages/TenantCrudCustomPage.vue'
 import UserApiKeyCrudPage from '../pages/UserApiKeyCrudPage.vue'
 
 const routes = [
-  {
-    name: 'Login',
-    path: '/login',
-    component: LoginPage,
-    meta: {
-      auth: false,
-    }
-  },
-  {
-    name: 'Profile',
-    path: '/profile',
-    component: ProfilePage,
-    meta: {
-      auth: true,
-    }
-  },
-  {
-    name: 'Password',
-    path: '/password',
-    component: PasswordPage,
-    meta: {
-      auth: true,
-    }
-  },
-  {
-    name: 'CrudRole',
-    path: '/crud/role',
-    component: RoleCrudPage,
-    meta: {
-      auth: true,
-      permission: 'role:manage'
-    }
-  },
-  {
-    name: 'CrudTenant',
-    path: '/crud/tenant',
-    component: TenantCrudPage,
-    meta: {
-      auth: true,
-      permission: 'tenant:manage'
-    }
-  },
-  {
-    name: 'CrudUser',
-    path: '/crud/user',
-    component: UserCrudPage,
-    meta: {
-      auth: true,
-      permission: 'user:manage'
-    }
-  },
-  {
-    name: 'CrudUserApiKey',
-    path: '/crud/user-api-key',
-    component: UserApiKeyCrudPage,
-    meta: {
-      auth: true,
-      permission: 'userApiKey:manage'
-    }
-  },
+    {
+        name: 'Login',
+        path: '/login',
+        component: LoginPage,
+        meta: {
+            auth: false,
+        }
+    },
+    {
+        name: 'Profile',
+        path: '/profile',
+        component: ProfilePage,
+        meta: {
+            auth: true,
+        }
+    },
+    {
+        name: 'Password',
+        path: '/password',
+        component: PasswordPage,
+        meta: {
+            auth: true,
+        }
+    },
+    //CRUDS
+    {
+        name: 'CrudRole',
+        path: '/crud/role',
+        component: RoleCrudPage,
+        meta: {
+            auth: true,
+            permission: 'role:manage'
+        }
+    },
+
+    {
+        name: 'CrudTenant',
+        path: '/crud/tenant',
+        component: TenantCrudPage,
+        meta: {
+            auth: true,
+            permission: 'tenant:manage'
+        }
+    },
+
+    {
+        name: 'CrudUser',
+        path: '/crud/user',
+        component: UserCrudPage,
+        meta: {
+            auth: true,
+            permission: 'user:manage'
+        }
+    },
+    {
+        name: 'CrudUserApiKey',
+        path: '/crud/user-api-key',
+        component: UserApiKeyCrudPage,
+        meta: {
+            auth: true,
+            permission: 'userApiKey:manage'
+        }
+    },
+
+    //CUSTOM CRUDs
+    {
+        name: 'CrudCustomTenant',
+        path: '/crud/custom/tenant',
+        component: TenantCrudCustomPage,
+        meta: {
+            auth: true,
+            permission: 'tenant:manage'
+        }
+    },
+    {
+        name: 'CrudRoleCustom',
+        path: '/crud/custom/role',
+        component: RoleCrudCustomPage,
+        meta: {
+            auth: true,
+            permission: 'role:manage'
+        }
+    },
+    {
+        name: 'CrudCustomUser',
+        path: '/crud/custom/user',
+        component: UserCrudCustomPage,
+        meta: {
+            auth: true,
+            permission: 'user:manage'
+        }
+    },
+
 ]