@drax/identity-vue 0.5.4 → 0.5.5

package/src/{forms → cruds/user-crud}/UserPasswordForm.vue

@@ -50,7 +50,7 @@ const onSubmit = () => {
   <v-sheet v-else>
     <form ref="changeUserPassword" @submit.prevent="onSubmit">
 
-      <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"
@@ -63,7 +63,9 @@ const onSubmit = () => {
           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/index.ts

@@ -4,35 +4,28 @@ import IdentityProfileDrawer from "./components/IdentityProfileDrawer/IdentityPr
 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 UserCrudPage from "./pages/crud/UserCrudPage.vue";
+import UserForm from "./cruds/user-crud/UserForm.vue";
 import UserView from "./views/UserView.vue";
 
-import RoleForm from "./forms/RoleForm.vue";
+import RoleForm from "./cruds/role-crud/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 RoleCrudPage from "./pages/crud/RoleCrudPage.vue";
 
 import LoginPage from "./pages/LoginPage.vue";
 import ProfilePage from "./pages/ProfilePage.vue";
 import PasswordPage from "./pages/PasswordPage.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 TenantCrudPage from "./pages/crud/TenantCrudPage.vue";
 
 
 import UserApiKeyForm from "./forms/UserApiKeyForm.vue";
 import UserApiKeyView from "./views/UserApiKeyView.vue";
 import UserApiKeyCrud from "./cruds/user-api-key-crud/UserApiKeyCrud.vue";
 import UserApiKeyList from "./cruds/user-api-key-crud/UserApiKeyList.vue";
-import UserApiKeyCrudPage from "./pages/UserApiKeyCrudPage.vue";
+import UserApiKeyCrudPage from "./pages/crud/UserApiKeyCrudPage.vue";
 
 import {useAuth} from "./composables/useAuth.js";
 import {useUser} from "./composables/useUser.js";
@@ -60,10 +53,8 @@ export {
 
     //User
     UserView,
-    UserCreateForm,
-    UserEditForm,
+    UserForm,
     UserCrud,
-    UserList,
     UserCrudPage,
     useAuth,
     useUser,
@@ -71,16 +62,11 @@ export {
     //Role
     RoleView,
     RoleForm,
-    RoleCrud,
-    RoleList,
     RoleCrudPage,
     useRole,
 
     //Tenant
     TenantView,
-    TenantForm,
-    TenantCrud,
-    TenantList,
     TenantCrudPage,
     useTenant,
 

package/src/pages/ProfilePage.vue

@@ -16,7 +16,7 @@ const { t } = useI18n();
           <identity-profile-view> </identity-profile-view>
           <v-card-text class="text-center">
             <v-btn color="blue" variant="tonal" @click="router.push({name: 'Password'})">
-              {{t('user.changeOwnPassword')}}
+              {{t('user.action.changeOwnPassword')}}
             </v-btn>
           </v-card-text>
         </v-card>

package/src/pages/{RoleCrudPage.vue → crud/RoleCrudPage.vue}

@@ -1,7 +1,7 @@
 <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 RoleCrud from "../../cruds/role-crud/RoleCrud";
+import RoleForm from "../../cruds/role-crud/RoleForm.vue";
 import {useI18n} from "vue-i18n";
 
 const {t, te} = useI18n()
@@ -34,14 +34,15 @@ const {
     </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>
+
+        <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 }">

package/src/pages/{TenantCrudPage.vue → crud/TenantCrudPage.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import TenantCrud from '../cruds/tenant-crud/TenantCrud'
+import TenantCrud from '../../cruds/tenant-crud/TenantCrud'
 import {Crud} from "@drax/crud-vue";
 </script>
 

package/src/pages/{UserApiKeyCrudPage.vue → crud/UserApiKeyCrudPage.vue}

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import UserApiKeyCrud from "../cruds/user-api-key-crud/UserApiKeyCrud.vue";
+import UserApiKeyCrud from "../../cruds/user-api-key-crud/UserApiKeyCrud.vue";
 </script>
 
 <template>

package/src/pages/crud/UserCrudPage.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import {ref} from "vue"
+import UserCrud from "../../cruds/user-crud/UserCrud";
+import {Crud, useCrud} from "@drax/crud-vue";
+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";
+
+const {onCancel, onSubmit,form, operation } = useCrud(UserCrud.instance);
+
+const dialogPassword = ref(false);
+const userSelected = ref();
+
+function onChangePassword(user:IUser){
+  console.log("onChangePassword for user: ", user);
+  userSelected.value = user;
+  dialogPassword.value = true;
+}
+
+</script>
+
+<template>
+  <div>
+    <user-password-dialog
+        v-if="dialogPassword && userSelected"
+        v-model="dialogPassword"
+        :user="userSelected"
+    />
+
+    <crud :entity="UserCrud.instance">
+
+      <template v-slot:form>
+        <user-form
+            :enable-password="operation === 'create'"
+            v-model="form"
+            @submit="onSubmit"
+            @cancel="onCancel"
+        />
+      </template>
+
+
+
+      <template v-slot:item.actions="{ item }">
+        <password-update-button @click="onChangePassword(item as IUser)"></password-update-button>
+      </template>
+
+
+      <template v-slot:item.active="{ value }" >
+        <v-chip :color="value ? 'green':'red'" >
+          {{ value ? 'Active' : 'Inactive' }}
+        </v-chip>
+      </template>
+    </crud>
+  </div>
+
+</template>
+
+<style scoped>
+
+</style>

package/src/routes/IdentityRoutes.ts

@@ -1,13 +1,10 @@
 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'
+import UserCrudPage from '../pages/crud/UserCrudPage.vue'
+import RoleCrudPage from '../pages/crud/RoleCrudPage.vue'
+import TenantCrudPage from '../pages/crud/TenantCrudPage.vue'
+import UserApiKeyCrudPage from '../pages/crud/UserApiKeyCrudPage.vue'
 
 const routes = [
     {
@@ -74,34 +71,7 @@ const routes = [
         }
     },
 
-    //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'
-        }
-    },
+
 
 ]
 

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

@@ -1,171 +0,0 @@
-<script setup lang="ts">
-import {computed, ref} from 'vue'
-import RoleList from "./RoleList.vue";
-import {useRole} from "../../composables/useRole";
-import type {IRole, IRoleBase} from "@drax/identity-share";
-import RoleForm from "../../forms/RoleForm.vue";
-import RoleView from "../../views/RoleView.vue";
-import {useI18n} from "vue-i18n";
-const {t} = useI18n()
-const {createRole, editRole, deleteRole, loading, roleError, inputErrors} = useRole()
-
-interface RoleList {
-  loadItems: () => void;
-  items: IRole[];
-}
-
-type DialogMode = 'create' | 'edit' | 'delete' | null;
-
-
-let dialog = ref(false);
-let dialogMode = ref<DialogMode>(null);
-let dialogTitle = ref('');
-const roleList = ref<RoleList | null>(null);
-let form = ref<IRoleBase>({name: "", permissions: [], childRoles:[], readonly: false})
-let target = ref<IRole>();
-let targetId = ref<string>('');
-let filterEnable = ref(false);
-
-function cancel() {
-  dialog.value = false
-  inputErrors.value = {}
-  roleError.value = '';
-  dialogMode.value = null
-  dialogTitle.value = ''
-  targetId.value = ''
-  target.value = undefined
-}
-
-async function save() {
-
-  try {
-    if (dialogMode.value === 'create') {
-      await createRole(form.value)
-    } else if (dialogMode.value === 'edit') {
-      await editRole(targetId.value, form.value)
-    } else if (dialogMode.value === 'delete') {
-      await deleteRole(targetId.value)
-    }
-    dialog.value = false
-    inputErrors.value = {}
-    roleError.value = '';
-    if (roleList.value !== null) {
-      roleList.value.loadItems()
-    }
-  } catch (e) {
-    console.error(e)
-    if (e instanceof Error) {
-      roleError.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 = 'role.creating';
-  form.value = {name: "", permissions: [], childRoles:[], readonly: false}
-  dialog.value = true;
-}
-
-function toEdit(item: IRole) {
-  dialogMode.value = 'edit';
-  dialogTitle.value = 'role.updating';
-  targetId.value = item.id;
-  form.value = {
-    name: item.name,
-    permissions: item.permissions,
-    childRoles: item.childRoles ? item.childRoles.map(c => c.id) : [],
-    readonly: item.readonly
-
-  }
-  dialog.value = true;
-}
-
-function toDelete(item: IRole) {
-  console.log('toDelete', item)
-  dialogMode.value = 'delete';
-  dialogTitle.value = 'role.deleting';
-  target.value = item
-  const {id} = item;
-  targetId.value = id;
-  dialog.value = true;
-}
-
-</script>
-
-<template>
-  <v-container fluid>
-
-    <v-card border rounded>
-      <v-toolbar class="bg-toolbar">
-        <v-toolbar-title>{{t('role.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">
-        <RoleList
-            ref="roleList"
-            @toEdit="toEdit"
-            @toDelete="toDelete"
-            :filterEnable="filterEnable"
-        />
-      </v-theme-provider>
-    </v-card>
-
-    <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="roleError">
-            <v-alert type="error">{{ roleError }}</v-alert>
-          </v-card-text>
-          <v-card-text>
-            <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>
-          <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/role-crud/RoleList.vue

@@ -1,129 +0,0 @@
-<script setup lang="ts">
-
-import {defineProps, type Ref, ref} from "vue";
-import {useRole} from "../../composables/useRole";
-import {useAuth} from "../../composables/useAuth";
-import {useI18n} from "vue-i18n";
-import type {IRole} from "@drax/identity-share";
-
-const {hasPermission} = useAuth()
-const {paginateRole} = useRole()
-const {t,te} = useI18n()
-
-defineProps({
-  filterEnable: {
-    type: Boolean,
-    default: false,
-  }
-})
-
-const itemsPerPage = ref(5)
-const page = ref(1)
-const headers = ref<any>([
-  //{title: 'ID', align: 'start', sortable: false, key: 'id'},
-  { title: t('role.name') as string, key: 'name', align: 'start' },
-  { title: t('role.childRoles') as string, key: 'childRoles', align: 'start' },
-  { title: t('role.permissions') as string, key: 'permissions', align: 'start' },
-  { title: t('role.readonly') as string, key: 'readonly', align: 'start' },
-  { title: '', key: 'actions', align: 'end', minWidth: '150px' },
-])
-
-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{
-    loading.value = true
-    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
-  }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"
-      :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"
-      item-value="name"
-      @update:options="loadItems"
-  >
-    <template v-slot:top>
-      <v-toolbar  density="compact" v-if="filterEnable">
-        <v-toolbar-title>{{ t('action.filters') }}</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.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-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>
-
-    <template v-slot:item.actions="{item}" >
-      <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>
-</template>
-
-<style scoped>
-
-</style>