@drax/identity-vue 0.5.3 → 0.5.5

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.3",
+  "version": "0.5.5",
   "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.5",
+    "@drax/common-vue": "^0.5.5",
+    "@drax/crud-front": "^0.5.3",
+    "@drax/crud-share": "^0.5.5",
     "@drax/identity-share": "^0.5.1"
   },
   "peerDependencies": {
@@ -64,5 +65,5 @@
     "vue-tsc": "^2.1.6",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "56ea5a743bce196d6322ae6c26ea5b041450d7a3"
+  "gitHead": "c89751dd8eb2ede7d565b596f698c2b83e0c2fed"
 }

package/src/combobox/RoleCombobox.vue

@@ -1,44 +1,49 @@
 <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";
+import {useI18n} from "vue-i18n";
+
+
+const {t,te} = useI18n()
+
+
 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>},
+  rules: {type: Array as PropType<any[]>, default: () => []},
+  multiple: {type: Boolean, default: false},
+  clearable: {type: Boolean, default: false},
+  readonly: {type: Boolean, default: false},
+  label: {type: String, default: 'role.entity'},
+  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>
   <v-select
       v-model="model"
-      label="Rol"
+      :label="te(label) ? t(label) : label"
       :items="items"
       item-title="name"
       item-value="id"
-      variant="outlined"
+      :variant="variant"
       :error-messages="errorMessages"
       :multiple="multiple"
       :clearable="clearable"
+      :readonly="readonly"
+      :density="density"
+      :rules="rules"
   ></v-select>
 </template>
 

package/src/combobox/TenantCombobox.vue

@@ -3,15 +3,15 @@
 import {ref, onMounted, defineModel} from 'vue'
 import type { PropType } from 'vue'
 import {useI18n} from "vue-i18n";
-const {t} = useI18n()
+const {t,te} = useI18n()
 defineProps({
-  errorMessages: {
-    type: String as PropType<string | string[] | undefined>,
-  },
-  clearable: {
-    type: Boolean,
-    default: false,
-  }
+  errorMessages: {type: String as PropType<string | string[] | undefined>,},
+  clearable: {type: Boolean, default: false},
+  readonly: {type: Boolean, default: false},
+  rules: {type: Array as PropType<any[]>, default: () => []},
+  label: {type: String, default: 'tenant.entity'},
+  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>()
@@ -29,13 +29,15 @@ onMounted(async () => {
 <template>
   <v-select
       v-model="model"
-      :label="t ? t('tenant.entity') : 'Tenant'"
+      :label="te(label) ? t(label) : label"
       :items="items"
       item-title="name"
       item-value="id"
       variant="outlined"
       :error-messages="errorMessages"
       :clearable="clearable"
+      :rules="rules"
+      :readonly="readonly"
   ></v-select>
 </template>
 

package/src/components/IdentityChangeOwnPassword/IdentityChangeOwnPassword.vue

@@ -65,14 +65,14 @@ async function submitChangePassowrd() {
 
           <v-form @submit.prevent="submitChangePassowrd">
             <v-card variant="elevated">
-              <v-card-title class="pa-4 text-center">{{ t('user.changeOwnPassword') }}</v-card-title>
+              <v-card-title class="pa-4 text-center">{{ t('user.action.changeOwnPassword') }}</v-card-title>
               <v-card-text v-if="errorMsg">
                 <v-alert type="error">
                   {{ te(errorMsg) ?t(errorMsg) : errorMsg }}
                 </v-alert>
               </v-card-text>
               <v-card-text>
-                <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.currentPassword') }}</div>
+                <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.field.currentPassword') }}</div>
                 <v-text-field
                     variant="outlined"
                     id="current-password-input"
@@ -85,7 +85,7 @@ async function submitChangePassowrd() {
                     autocomplete="new-password"
                     :error-messages="$ta(inputErrors?.currentPassword)"
                 ></v-text-field>
-                <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.newPassword') }}</div>
+                <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.field.newPassword') }}</div>
                 <v-text-field
                     variant="outlined"
                     id="new-password-input"
@@ -98,7 +98,7 @@ async function submitChangePassowrd() {
                     autocomplete="new-password"
                     :error-messages="$ta(inputErrors?.newPassword)"
                 ></v-text-field>
-                <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.confirmPassword') }}</div>
+                <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.field.confirmPassword') }}</div>
                 <v-text-field
                     variant="outlined"
                     id="confirm-password-input"

package/src/components/IdentityProfileDrawer/IdentityProfileDrawer.vue

@@ -37,7 +37,7 @@ const valueModel = defineModel<boolean>()
         <v-list-item
             @click="auth.logout()"
             prepend-icon="mdi-logout"
-            :title="t('user.logout')"
+            :title="t('user.action.logout')"
         >
         </v-list-item>
       </v-list>
@@ -48,7 +48,7 @@ const valueModel = defineModel<boolean>()
         <v-list-item
             href="/login"
             prepend-icon="mdi-login"
-            :title="t('user.login')"
+            :title="t('user.action.login')"
         >
         </v-list-item>
       </v-list>

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,91 @@
+
+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','permissions','childRoles','readonly']
+  }
+
+  get isExportable(){
+    return true
+  }
+
+  get isImportable(){
+    return false
+  }
+
+}
+
+export default RoleCrud
+
+export {RoleCrud}

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

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import {useFormUtils, useCrudStore} from "@drax/crud-vue";
+import {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 {useI18n} from "vue-i18n";
+
+const {$ta} = useI18nValidation()
+const {t, te} = useI18n()
+
+const valueModel = defineModel({type: [Object]})
+
+const emit = defineEmits(['submit', 'cancel'])
+
+const store = useCrudStore()
+
+const valid = ref()
+const formRef = ref()
+
+
+async function submit() {
+  store.resetErrors()
+  await formRef.value.validate()
+  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>
+
+
+  <v-form v-model="valid" ref="formRef" @submit.prevent="submit">
+    <v-card flat>
+      <v-alert v-if="valueModel.readonly && store.operation != 'view'" type="warning">
+        {{ t('role.readonly') }}
+      </v-alert>
+
+      <template v-if="!valueModel.readonly || store.operation == 'view'">
+
+
+        <v-card-subtitle v-if="valueModel._id">ID: {{ valueModel._id }}</v-card-subtitle>
+
+        <v-card-text v-if="store.error">
+          <v-alert color="error">{{ te(store.error) ? t(store.error) : store.error }}</v-alert>
+        </v-card-text>
+
+        <v-card-text>
+
+          <v-text-field
+              id="name-input"
+              name="name"
+              :label="$t('role.field.name')"
+              v-model="valueModel.name"
+              prepend-inner-icon="mdi-card-account-details"
+              :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="valueModel.childRoles"
+              label="role.field.childRoles"
+              :error-messages="$ta(store.inputErrors?.role)"
+              multiple
+              :readonly="readonly"
+              :variant="variant"
+          ></RoleCombobox>
+
+          <PermissionSelector
+              v-model="valueModel.permissions"
+              :readonly="readonly"
+          ></PermissionSelector>
+
+        </v-card-text>
+      </template>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+            variant="text"
+            color="grey"
+            @click="cancel">
+          {{ t('action.cancel') }}
+        </v-btn>
+        <v-btn
+            v-if="!valueModel.readonly && store.operation != 'view'"
+            variant="flat"
+            :color="submitColor"
+            @click="submit"
+        >
+          {{ store.operation ? t('action.' + store.operation) : t('action.sent') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-form>
+</template>
+
+<style scoped>
+
+</style>

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 [
+
     ]
   }
 
@@ -67,7 +73,15 @@ class TenantCrud extends EntityCrud implements IEntityCrud {
     return ['_id', 'name']
   }
 
+  get isExportable(){
+    return true
+  }
+
+  get isImportable(){
+    return false
+  }
+
 }
 
 export default TenantCrud
-
+export { TenantCrud }

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {useI18n} from "vue-i18n";
+const {t} = useI18n()
+</script>
+
+<template>
+  <v-tooltip location="top">
+    <template v-slot:activator="{ props}">
+      <v-btn
+          v-bind="{ ...$attrs, ...props }"
+          icon="mdi-form-textbox-password"
+          class="mr-1"
+          variant="text"
+          color="orange"
+          slim
+      >
+      </v-btn>
+    </template>
+      {{ t('user.action.changePassword')}}
+  </v-tooltip>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,112 @@
+
+
+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']
+  }
+
+  get exportFormats(){
+    return ['CSV']
+  }
+
+  get isExportable(){
+    return true
+  }
+
+  get isImportable(){
+    return false
+  }
+}
+
+export default UserCrud
+

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

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue'
-import UserList from "./UserList.vue";
 import {useUser} from "../../composables/useUser";
 import type {IUser, IUserCreate, IUserUpdate} from "@drax/identity-share";
 import type {IUserPassword} from "@drax/identity-front";
-import UserCreateForm from "../../forms/UserCreateForm.vue";
-import UserEditForm from "../../forms/UserEditForm.vue";
-import UserPasswordForm from "../../forms/UserPasswordForm.vue";
+import UserCreateForm from "./UserForm.vue";
+import UserPasswordForm from "./UserPasswordForm.vue";
 import UserView from "../../views/UserView.vue";
 import {useI18n} from "vue-i18n";
 
@@ -154,13 +152,7 @@ function toChangePassword(item: IUser) {
         </v-btn>
       </v-toolbar>
       <v-theme-provider with-background class="pa-2 rounded-b">
-        <UserList
-            ref="userList"
-            @toEdit="toEdit"
-            @toDelete="toDelete"
-            @toChangePassword="toChangePassword"
-            :filterEnable="filterEnable"
-        />
+
       </v-theme-provider>
     </v-card>
 
@@ -181,12 +173,7 @@ function toChangePassword(item: IUser) {
                 @formSubmit="save"
             />
 
-            <UserEditForm
-                v-if="dialogMode === 'edit'"
-                v-model="editForm"
-                :inputErrors="inputErrors"
-                @formSubmit="save"
-            />
+
 
             <UserView v-if="dialogMode === 'delete'
             && target" :user="target"