@drax/identity-vue 0.0.15 → 0.0.17

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.0.15",
+  "version": "0.0.17",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,7 +24,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.0.15",
+    "@drax/common-front": "^0.0.17",
     "vue-i18n": "^9.13.1"
   },
   "peerDependencies": {
@@ -61,5 +61,5 @@
     "vue-tsc": "^2.0.11",
     "vuetify": "^3.6.4"
   },
-  "gitHead": "141cd8b418596b7a16d4baf7f5f0b8b7587ec546"
+  "gitHead": "10c296881a942de671414c7494afecb7c2614e7d"
 }

package/src/combobox/RoleCombobox.vue

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

package/src/combobox/TenantCombobox.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+import {ref, onMounted, defineModel} from 'vue'
+import type { PropType } from 'vue'
+const props = defineProps({
+  errorMessages: {
+    type: String as PropType<string | string[] | undefined>,
+  }
+})
+
+const model = defineModel()
+import {useTenant} from "../composables/useTenant";
+const {fetchTenant} = useTenant()
+let items = ref([])
+
+onMounted(async () => {
+  items.value = await fetchTenant()
+})
+
+
+</script>
+
+<template>
+  <v-select
+      v-model="model"
+      label="Tenant"
+      :items="items"
+      item-title="name"
+      item-value="id"
+      variant="outlined"
+      :error-messages="errorMessages"
+  ></v-select>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/PermissionSelector/PermissionSelector.vue

@@ -69,12 +69,15 @@ const permissionGroups = computed(() => {
               v-slot="{ isSelected, toggle }"
               :value="permission"
           >
-            <v-btn
+
+            <v-chip
                 :color="isSelected? 'green' : 'grey-darken-3'" class=""
                 @click="toggle" variant="flat" :rounded="false" border
             >
               {{ $t ? $t('permission.'+permission) : permission }}
-            </v-btn>
+            </v-chip>
+
+
           </v-item>
         </v-card-text>
       </v-card>

package/src/composables/useTenant.ts

@@ -0,0 +1,86 @@
+import {inject, ref} from "vue";
+import type {ITenant, TenantSystem} from "@drax/identity-front";
+import {ClientError} from "@drax/common-front";
+import type { IClientInputError} from "@drax/common-front";
+
+
+export function useTenant() {
+
+    const tenantSystem = inject('TenantSystem') as TenantSystem
+
+    let tenantError = ref<string>('')
+    let inputErrors = ref<IClientInputError>()
+    let loading = ref(false);
+
+    async function fetchTenant(page = 1, perPage = 5) {
+        loading.value = true
+        let tenants = tenantSystem.fetchTenant()
+        loading.value = false
+        return tenants
+    }
+
+    async function paginateTenant(page = 1, perPage = 5, string = "") {
+        loading.value = true
+        let paginatedtenant = tenantSystem.paginateTenant(page, perPage,string)
+        loading.value = false
+        return paginatedtenant
+    }
+
+    async function createTenant(tenantData: ITenant) {
+        try {
+            loading.value = true
+            let tenant: ITenant =  await tenantSystem.createTenant(tenantData)
+            return tenant
+        } catch (err) {
+            if (err instanceof ClientError) {
+                inputErrors.value = err.inputErrors
+            }if(err instanceof Error) {
+                tenantError.value = err.message
+            }
+            throw err
+        }finally {
+            loading.value = false
+        }
+
+    }
+
+    async function editTenant(id: string, tenantData: ITenant) {
+        try {
+            loading.value = true
+            let tenant: ITenant = await tenantSystem.editTenant(id, tenantData)
+            return tenant
+        } catch (err) {
+
+            if (err instanceof ClientError) {
+                inputErrors.value = err.inputErrors
+            }
+            if(err instanceof Error) {
+                tenantError.value = err.message
+            }
+            throw err
+        }finally {
+            loading.value = false
+        }
+    }
+
+    async function deleteTenant(id: string) {
+        try {
+            loading.value = true
+            await tenantSystem.deleteTenant(id)
+        } catch (err) {
+            console.log("composable deleteTenant error: ", err, )
+            if (err instanceof ClientError) {
+                inputErrors.value = err.inputErrors
+            }
+            if(err instanceof Error) {
+                tenantError.value = err.message
+            }
+            throw err
+        }finally {
+            loading.value = false
+        }
+    }
+
+    return {fetchTenant,  paginateTenant, createTenant, editTenant, deleteTenant, loading, tenantError, inputErrors}
+
+}

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

@@ -20,7 +20,7 @@ let dialog = ref(false);
 let dialogMode = ref<DialogMode>(null);
 let dialogTitle = ref('');
 const roleList = ref<RoleList | null>(null);
-let form = ref<IRole>({name: "", permissions: [], readonly: false})
+let form = ref<IRole>({name: "", permissions: [], childRoles:[], readonly: false})
 let target = ref<IRole>();
 let targetId = ref<string>('');
 let filterEnable = ref(false);
@@ -75,15 +75,15 @@ let buttonText = computed(() => {
 function toCreate() {
   dialogMode.value = 'create';
   dialogTitle.value = 'role.creating';
-  form.value = {name: "", permissions: [], readonly: false}
+  form.value = {name: "", permissions: [], childRoles:[], readonly: false}
   dialog.value = true;
 }
 
 function toEdit(item: IRole) {
-  console.log('toEdit', item)
   dialogMode.value = 'edit';
   dialogTitle.value = 'role.updating';
   const {id, ...rest} = item;
+  rest.childRoles = rest.childRoles ? rest.childRoles.map(c => c.id) : []
   targetId.value = id;
   form.value = {...rest}
   dialog.value = true;
@@ -102,7 +102,7 @@ function toDelete(item: IRole) {
 </script>
 
 <template>
-  <v-container>
+  <v-container fluid>
 
     <v-sheet border rounded>
       <v-toolbar>
@@ -128,7 +128,7 @@ function toDelete(item: IRole) {
     <v-dialog v-model="dialog" max-width="800">
       <v-sheet border>
         <v-toolbar>
-          <v-toolbar-title>{{ $t(dialogTitle) }}</v-toolbar-title>
+          <v-toolbar-title>{{ dialogTitle ? $t(dialogTitle) : '-' }}</v-toolbar-title>
         </v-toolbar>
         <v-card class="pa-10">
           <v-card-text v-if="roleError">
@@ -138,6 +138,7 @@ function toDelete(item: IRole) {
             <RoleForm v-if="dialogMode === 'create' || dialogMode === 'edit'"
                       v-model="form"
                       :inputErrors="inputErrors"
+                      @formSubmit="save"
             />
             <RoleView v-if="dialogMode === 'delete' && target" :role="target"></RoleView>
           </v-card-text>

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

@@ -21,9 +21,10 @@ const page = ref(1)
 const headers = ref([
   //{title: 'ID', align: 'start', sortable: false, key: 'id'},
   { title: t('role.name'), key: 'name', align: 'start' },
+  { title: t('role.childRoles'), key: 'childRoles', align: 'start' },
   { title: t('role.permissions'), key: 'permissions', align: 'start' },
   { title: t('role.readonly'), key: 'readonly', align: 'start' },
-  { title: '', key: 'actions', align: 'start', minWidth: '150px' },
+  { title: '', key: 'actions', align: 'end', minWidth: '150px' },
 ])
 
 const serverItems = ref([])
@@ -88,6 +89,15 @@ defineExpose({
           </v-chip>
     </template>
 
+    <template v-slot:item.childRoles="{ value }" >
+      <v-chip 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>
@@ -98,8 +108,8 @@ defineExpose({
     </template>
 
     <template v-slot:item.actions="{item}" >
-      <v-btn v-if="hasPermission('user:update')" :disabled="item.readonly" icon="mdi-pencil"  variant="text" color="primary" @click="$emit('toEdit', item)"></v-btn>
-      <v-btn v-if="hasPermission('user:delete')" :disabled="item.readonly" icon="mdi-delete" class="mr-1" variant="text" color="red" @click="$emit('toDelete', item)"></v-btn>
+      <v-btn v-if="hasPermission('role:update')" :disabled="!!item.readonly" icon="mdi-pencil"  variant="text" color="primary" @click="$emit('toEdit', item)"></v-btn>
+      <v-btn v-if="hasPermission('role:delete')" :disabled="!!item.readonly" icon="mdi-delete" class="mr-1" variant="text" color="red" @click="$emit('toDelete', item)"></v-btn>
     </template>
 
   </v-data-table-server>

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

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+import TenantList from "./TenantList.vue";
+import {useTenant} from "../../composables/useTenant";
+import type {ITenant} from "@drax/identity-front";
+import TenantForm from "../../forms/TenantForm.vue";
+import TenantView from "../../views/TenantView.vue";
+
+const {createTenant, editTenant, deleteTenant, loading, tenantError, inputErrors} = useTenant()
+
+interface TenantList {
+  loadItems: () => void;
+  items: ITenant[];
+}
+
+type DialogMode = 'create' | 'edit' | 'delete' | null;
+
+
+let dialog = ref(false);
+let dialogMode = ref<DialogMode>(null);
+let dialogTitle = ref('');
+const tenantList = ref<TenantList | null>(null);
+let form = ref<ITenant>({name: ""})
+let target = ref<ITenant>();
+let targetId = ref<string>('');
+let filterEnable = ref(false);
+
+function cancel() {
+  dialog.value = false
+  inputErrors.value = {}
+  tenantError.value = '';
+  dialogMode.value = null
+  dialogTitle.value = ''
+  targetId.value = ''
+  target.value = undefined
+}
+
+async function save() {
+
+  try {
+    if (dialogMode.value === 'create') {
+      await createTenant(form.value)
+    } else if (dialogMode.value === 'edit') {
+      await editTenant(targetId.value, form.value)
+    } else if (dialogMode.value === 'delete') {
+      await deleteTenant(targetId.value)
+    }
+    dialog.value = false
+    inputErrors.value = {}
+    tenantError.value = '';
+    if (tenantList.value !== null) {
+      tenantList.value.loadItems()
+    }
+  } catch (e) {
+    console.error(e)
+    if (e instanceof Error) {
+      tenantError.value = e.message
+    }
+  }
+}
+
+let buttonText = computed(() => {
+  switch (dialogMode.value) {
+    case 'create':
+      return 'action.create'
+    case 'edit':
+      return 'action.update'
+    case 'delete':
+      return 'action.delete'
+    default:
+      return 'action.sent'
+  }
+})
+
+function toCreate() {
+  dialogMode.value = 'create';
+  dialogTitle.value = 'tenant.creating';
+  form.value = {name: ""}
+  dialog.value = true;
+}
+
+function toEdit(item: ITenant) {
+  console.log('toEdit', item)
+  dialogMode.value = 'edit';
+  dialogTitle.value = 'tenant.updating';
+  const {id, ...rest} = item;
+  targetId.value = id;
+  form.value = {...rest}
+  dialog.value = true;
+}
+
+function toDelete(item: ITenant) {
+  console.log('toDelete', item)
+  dialogMode.value = 'delete';
+  dialogTitle.value = 'tenant.deleting';
+  target.value = item
+  const {id} = item;
+  targetId.value = id;
+  dialog.value = true;
+}
+
+</script>
+
+<template>
+  <v-container fluid>
+
+    <v-sheet border rounded>
+      <v-toolbar>
+        <v-toolbar-title>{{ $t('tenant.managing') }}</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-btn icon @click="filterEnable = !filterEnable">
+          <v-icon>{{ filterEnable ? 'mdi-filter' : 'mdi-filter-off' }}</v-icon>
+        </v-btn>
+        <v-btn color="primary" @click="toCreate">
+          {{ $t('action.create') }}
+        </v-btn>
+      </v-toolbar>
+      <v-theme-provider with-background class="pa-2 rounded-b">
+        <TenantList
+            ref="tenantList"
+            @toEdit="toEdit"
+            @toDelete="toDelete"
+            :filterEnable="filterEnable"
+        />
+      </v-theme-provider>
+    </v-sheet>
+
+    <v-dialog v-model="dialog" max-width="800">
+      <v-sheet border>
+        <v-toolbar>
+          <v-toolbar-title>{{ dialogTitle ? $t(dialogTitle) : '-' }}</v-toolbar-title>
+        </v-toolbar>
+        <v-card class="pa-10">
+          <v-card-text v-if="tenantError">
+            <v-alert type="error">{{ tenantError }}</v-alert>
+          </v-card-text>
+          <v-card-text>
+            <TenantForm v-if="dialogMode === 'create' || dialogMode === 'edit'"
+                        v-model="form"
+                        :inputErrors="inputErrors"
+                        @formSubmit="save"
+            />
+            <TenantView v-if="dialogMode === 'delete' && target" :tenant="target"></TenantView>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn variant="text" @click="cancel" :loading="loading">Cancelar</v-btn>
+            <v-btn variant="flat"
+                   :color="dialogMode==='delete' ? 'red' : 'primary'"
+                   @click="save"
+                   :loading="loading"
+            >
+              {{ $t(buttonText) }}
+            </v-btn>
+          </v-card-actions>
+
+        </v-card>
+      </v-sheet>
+    </v-dialog>
+
+  </v-container>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+
+import {defineProps, ref} from "vue";
+import {useTenant} from "../../composables/useTenant";
+import {useAuth} from "../../composables/useAuth";
+import {useI18n} from "vue-i18n";
+
+const {hasPermission} = useAuth()
+const {paginateTenant} = useTenant()
+const {t} = useI18n()
+
+const props = defineProps({
+  filterEnable: {
+    type: Boolean,
+    default: false,
+  }
+})
+
+const itemsPerPage = ref(5)
+const page = ref(1)
+const headers = ref([
+  //{title: 'ID', align: 'start', sortable: false, key: 'id'},
+  { title: t('tenant.name'), key: 'name', align: 'start' },
+  { title: '', key: 'actions', align: 'end', minWidth: '150px' },
+])
+
+const serverItems = ref([])
+const totalItems = ref(0)
+const loading = ref(false)
+const search = ref('')
+
+async function loadItems(){
+  try{
+    loading.value = true
+    const r = await paginateTenant(page.value,itemsPerPage.value, search.value)
+    serverItems.value = r.items
+    totalItems.value = r.total
+  }catch (e){
+    console.error(e)
+  }finally {
+    loading.value = false
+  }
+}
+
+
+
+defineExpose({
+  loadItems
+});
+
+</script>
+
+<template>
+  <v-data-table-server
+      v-if="hasPermission('user:manage')"
+      v-model:items-per-page="itemsPerPage"
+      v-model:page="page"
+      :headers="headers"
+      :items="serverItems"
+      :items-length="totalItems"
+      :loading="loading"
+      :search="search"
+      item-value="name"
+      @update:options="loadItems"
+  >
+    <template v-slot:top>
+      <v-toolbar border density="compact" v-if="filterEnable" class="grey-lighten-1">
+        <v-toolbar-title>{{ $t('action.filter') }}</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-text-field v-model="search" hide-details
+                      density="compact" class="mr-2"
+                      variant="outlined"
+                      append-inner-icon="mdi-magnify"
+                      :label="$t('action.search')"
+                      single-line clearable @click:clear="() => search = ''"
+        />
+
+      </v-toolbar>
+    </template>
+
+
+    <template v-slot:item.actions="{item}" >
+      <v-btn v-if="hasPermission('tenant:update')" :disabled="item.readonly" icon="mdi-pencil"  variant="text" color="primary" @click="$emit('toEdit', item)"></v-btn>
+      <v-btn v-if="hasPermission('tenant:delete')" :disabled="item.readonly" icon="mdi-delete" class="mr-1" variant="text" color="red" @click="$emit('toDelete', item)"></v-btn>
+    </template>
+
+  </v-data-table-server>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -23,8 +23,8 @@ let dialog = ref(false);
 let dialogMode = ref<DialogMode>(null);
 let dialogTitle = ref('');
 const userList = ref<UserList | null>(null);
-let createForm = ref<IUserCreate>({name: "", username: "", password: "", email: "", phone: "", role: "", active: true})
-let editForm = ref<IUserUpdate>({name: "", username: "", email: "", phone: "", role: "", active: true})
+let createForm = ref<IUserCreate>({name: "", username: "", password: "", email: "", phone: "", role: "", tenant: "", active: true})
+let editForm = ref<IUserUpdate>({name: "", username: "", email: "", phone: "", role: "", tenant: "", active: true})
 let passwordForm = ref<IUserPassword>({newPassword: "", confirmPassword: ""})
 let passwordChanged = ref(false);
 let target = ref<IUser>();
@@ -92,7 +92,7 @@ function toCreate() {
   actionButtonEnable.value = true
   dialogMode.value = 'create';
   dialogTitle.value = 'user.creating';
-  createForm.value = {name: "", username: "", password: "", email: "", phone: "", role: "", active: true}
+  createForm.value = {name: "", username: "", password: "", email: "", phone: "", role: "", tenant: "", active: true}
   dialog.value = true;
 }
 
@@ -103,6 +103,7 @@ function toEdit(item: IUser) {
   const {id, ...rest} = item;
   targetId.value = id;
   rest.role = rest.role ? rest.role.id : null
+  rest.tenant = rest.tenant ? rest.tenant.id : null
   editForm.value = {...rest}
   dialog.value = true;
 }
@@ -131,7 +132,7 @@ function toChangePassword(item: IUser) {
 </script>
 
 <template>
-  <v-container>
+  <v-container fluid>
 
     <v-sheet border rounded>
       <v-toolbar>
@@ -158,7 +159,7 @@ function toChangePassword(item: IUser) {
     <v-dialog v-model="dialog" max-width="800">
       <v-sheet border>
         <v-toolbar>
-          <v-toolbar-title>{{ $t(dialogTitle) }}</v-toolbar-title>
+          <v-toolbar-title>{{ dialogTitle ? $t(dialogTitle) : '-' }}</v-toolbar-title>
         </v-toolbar>
         <v-card class="pa-10">
           <v-card-text v-if="userError">
@@ -169,12 +170,14 @@ function toChangePassword(item: IUser) {
                 v-if="dialogMode === 'create'"
                 v-model="createForm"
                 :inputErrors="inputErrors"
+                @formSubmit="save"
             />
 
             <UserEditForm
                 v-if="dialogMode === 'edit'"
                 v-model="editForm"
                 :inputErrors="inputErrors"
+                @formSubmit="save"
             />
 
             <UserView v-if="dialogMode === 'delete'
@@ -187,6 +190,7 @@ function toChangePassword(item: IUser) {
                 v-model="passwordForm"
                 :inputErrors="inputErrors"
                 :passwordChanged="passwordChanged"
+                @formSubmit="save"
             />
 
 

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

@@ -24,8 +24,9 @@ const headers = ref([
   { title: t('user.username'), key: 'username', align: 'start' },
   { title: t('user.email'), key: 'email', align: 'start' },
   { title: t('user.role'), key: 'role.name', align: 'start' },
+  { title: t('user.tenant'), key: 'tenant.name', align: 'start' },
   { title: t('user.active'), key: 'active', align: 'start' },
-  { title: '', key: 'actions', align: 'start', fixed:true },
+  { title: '', key: 'actions', align: 'end', fixed:true },
 ])
 
 const serverItems = ref([])

package/src/forms/RoleForm.vue

@@ -4,6 +4,7 @@ import type {IRole} from "@drax/identity-front";
 import {useI18nValidation} from "../composables/useI18nValidation";
 import type {IClientInputError} from "@drax/common-front";
 import PermissionSelector from "../components/PermissionSelector/PermissionSelector.vue";
+import RoleCombobox from "../combobox/RoleCombobox.vue";
 
 const {$ta} = useI18nValidation()
 
@@ -19,10 +20,17 @@ const form = defineModel<IRole>({
   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>
+  <form @submit.prevent="onSubmit">
     <v-text-field
         variant="outlined"
         id="name-input"
@@ -33,6 +41,11 @@ const form = defineModel<IRole>({
         :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>
 

package/src/forms/TenantForm.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import {defineModel, type PropType} from "vue";
+import type {ITenant} from "@drax/identity-front";
+import {useI18nValidation} from "../composables/useI18nValidation";
+import type {IClientInputError} from "@drax/common-front";
+
+const {$ta} = useI18nValidation()
+
+const props = defineProps({
+  inputErrors: {
+    type: Object as PropType<IClientInputError>,
+    default: () => ({name: ""})
+  }
+})
+
+const form = defineModel<ITenant>({
+  type: Object,
+  default: () => ({name: ""})
+})
+
+// Define emits
+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>
+
+  </form>
+</template>
+
+<style scoped>
+
+</style>

package/src/forms/UserCreateForm.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {ref, defineModel, type PropType} from "vue";
 import RoleCombobox from "../combobox/RoleCombobox.vue";
+import TenantCombobox from "../combobox/TenantCombobox.vue";
 import type {IClientInputError} from "@drax/common-front";
 import type {IUserCreate} from "@drax/identity-front/src/interfaces/IUser";
 import {useI18nValidation} from "../composables/useI18nValidation";
@@ -10,21 +11,28 @@ const {$ta} = useI18nValidation()
 const props = defineProps({
   inputErrors: {
     type: Object as PropType<IClientInputError>,
-    default: () => ({name: "", username: "", password: "", email: "", phone: "", role: "", active: ""})
+    default: () => ({name: "", username: "", password: "", email: "", phone: "", role: "", tenant: "", active: ""})
   }
 })
 
 const form = defineModel<IUserCreate>({
   type: Object,
-  default: () => ({name: "", username: "", password: "", email: "", phone: "", role: "", active: true})
+  default: () => ({name: "", username: "", password: "", email: "", phone: "", role: "", tenant: "", active: true})
 })
 
 let passwordVisibility = ref(false)
 
+// Define emits
+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>
+  <form @submit.prevent="onSubmit">
 
     <v-text-field
         variant="outlined"
@@ -65,6 +73,11 @@ let passwordVisibility = ref(false)
         :error-messages="$ta(inputErrors.role)"
     ></RoleCombobox>
 
+    <TenantCombobox
+        v-model="form.tenant"
+        :error-messages="$ta(inputErrors.tenant)"
+    ></TenantCombobox>
+
     <v-text-field
         v-model="form.email"
         variant="outlined"

package/src/forms/UserEditForm.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import {ref, defineModel, type PropType} from "vue";
+import {defineModel, type PropType} from "vue";
 import RoleCombobox from "../combobox/RoleCombobox.vue";
+import TenantCombobox from "../combobox/TenantCombobox.vue";
 import type {IClientInputError} from "@drax/common-front";
 import type {IUserUpdate} from "@drax/identity-front/src/interfaces/IUser";
 import {useI18nValidation} from "../composables/useI18nValidation";
@@ -9,20 +10,27 @@ const {$ta} = useI18nValidation()
 const props = defineProps({
   inputErrors: {
     type: Object as PropType<IClientInputError>,
-    default: () => ({name: "", username: "", email: "", phone: "", role: "", active: ""})
+    default: () => ({name: "", username: "", email: "", phone: "", role: "", tenant: "", active: ""})
   }
 })
 
 const form = defineModel<IUserUpdate>({
   type: Object,
-  default: () => ({name: "", username: "", email: "", phone: "", role: "", active: true})
+  default: () => ({name: "", username: "", email: "", phone: "", role: "", tenant: "", active: true})
 })
 
+// Define emits
+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>
+  <form @submit.prevent="onSubmit">
     <v-sheet>
     </v-sheet>
 
@@ -51,6 +59,11 @@ const form = defineModel<IUserUpdate>({
         :error-messages="$ta(inputErrors.role)"
     ></RoleCombobox>
 
+    <TenantCombobox
+        v-model="form.tenant"
+        :error-messages="$ta(inputErrors.tenant)"
+    ></TenantCombobox>
+
     <v-text-field
         v-model="form.email"
         variant="outlined"

package/src/forms/UserPasswordForm.vue

@@ -31,7 +31,13 @@ function confirmPasswordRule(value: string) {
   return form.value.newPassword === form.value.confirmPassword || t('validation.password.confirmed')
 }
 
+// Define emits
+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>
@@ -42,7 +48,7 @@ function confirmPasswordRule(value: string) {
     </v-alert>
   </v-sheet>
   <v-sheet v-else>
-    <form ref="changeUserPassword">
+    <form ref="changeUserPassword" @submit.prevent="onSubmit">
 
       <div class="text-subtitle-1 text-medium-emphasis">{{ $t('user.newPassword') }}</div>
       <v-text-field

package/src/index.ts

@@ -2,20 +2,31 @@ import IdentityLogin from "./components/IdentityLogin/IdentityLogin.vue";
 import IdentityProfileAvatar from "./components/IdentityProfileAvatar/IdentityProfileAvatar.vue";
 import IdentityProfileDrawer from "./components/IdentityProfileDrawer/IdentityProfileDrawer.vue";
 import IdentityProfileView from "./components/IdentityProfileView/IdentityProfileView.vue";
+
 import UserCrud from "./cruds/user-crud/UserCrud.vue";
 import UserList from "./cruds/user-crud/UserList.vue";
 import UserCrudPage from "./pages/UserCrudPage.vue";
 import UserCreateForm from "./forms/UserCreateForm.vue";
 import UserEditForm from "./forms/UserEditForm.vue";
-import RoleForm from "./forms/RoleForm.vue";
+import UserView from "./views/UserView.vue";
 
+import RoleForm from "./forms/RoleForm.vue";
+import RoleView from "./views/RoleView.vue";
 import RoleCrud from "./cruds/role-crud/RoleCrud.vue";
 import RoleList from "./cruds/role-crud/RoleList.vue";
 import RoleCrudPage from "./pages/RoleCrudPage.vue";
 
+
+import TenantForm from "./forms/TenantForm.vue";
+import TenantView from "./views/TenantView.vue";
+import TenantCrud from "./cruds/tenant-crud/TenantCrud.vue";
+import TenantList from "./cruds/tenant-crud/TenantList.vue";
+import TenantCrudPage from "./pages/TenantCrudPage.vue";
+
 import {useAuth} from "./composables/useAuth.js";
 import {useUser} from "./composables/useUser.js";
 import {useRole} from "./composables/useRole.js";
+import {useTenant} from "./composables/useTenant.js";
 import {useAuthStore} from "./stores/auth/AuthStore.js";
 
 export {
@@ -25,26 +36,32 @@ export {
     IdentityProfileView,
     IdentityProfileDrawer,
 
-    //Forms
+    //User
+    UserView,
     UserCreateForm,
     UserEditForm,
-    RoleForm,
-
-    //Vue Composables
-    useAuth,
-    useUser,
-    useRole,
-
-    //Cruds
     UserCrud,
     UserList,
+    UserCrudPage,
+    useAuth,
+    useUser,
 
+    //Role
+    RoleView,
+    RoleForm,
     RoleCrud,
     RoleList,
-
-    //Pages
-    UserCrudPage,
     RoleCrudPage,
+    useRole,
+
+    //Tenant
+    TenantView,
+    TenantForm,
+    TenantCrud,
+    TenantList,
+    TenantCrudPage,
+    useTenant,
+
 
     //Stores
     useAuthStore

package/src/pages/TenantCrudPage.vue

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

package/src/views/TenantView.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+import type {ITenant} from "@drax/identity-front";
+
+const props = defineProps({
+  tenant:{
+    type: Object as PropType<ITenant>,
+    required: true,
+  }
+})
+</script>
+
+<template>
+  <v-sheet border class="position-relative d-flex justify-center align-center" height="150">
+    <v-sheet class="text-center">
+      <h6 class="text-h6">{{$t ? $t('tenant.name') : 'Name'}} : {{ tenant.name }}</h6>
+    </v-sheet>
+  </v-sheet>
+
+</template>
+
+<style scoped>
+
+</style>