@drax/identity-vue 0.5.3 → 0.5.5

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>

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

@@ -1,168 +0,0 @@
-<script setup lang="ts">
-import {computed, ref} from 'vue'
-import TenantList from "./TenantList.vue";
-import {useTenant} from "../../composables/useTenant";
-import type {ITenant, ITenantBase} from "@drax/identity-share";
-import TenantForm from "../../forms/TenantForm.vue";
-import TenantView from "../../views/TenantView.vue";
-import {useI18n} from "vue-i18n";
-const {t} = useI18n()
-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<ITenantBase>({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';
-  targetId.value = item.id;
-  form.value = {
-    name: item.name
-  }
-  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-card border rounded >
-      <v-toolbar class="bg-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 class="font-weight-bold" 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-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="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

@@ -1,108 +0,0 @@
-<script setup lang="ts">
-import {defineProps, type Ref, ref} from "vue";
-import {useTenant} from "../../composables/useTenant";
-import {useAuth} from "../../composables/useAuth";
-import {useI18n} from "vue-i18n";
-import type {ITenant} from "@drax/identity-share";
-import {formatDateTime} from "@drax/common-front";
-
-const {hasPermission} = useAuth()
-const {paginateTenant} = useTenant()
-const {t} = useI18n()
-
-defineProps({
-  filterEnable: {
-    type: Boolean,
-    default: false,
-  }
-})
-
-const itemsPerPage = ref(5)
-const page = ref(1)
-const serverItems: Ref<ITenant[]> = ref([]);
-const totalItems = ref(0)
-const loading = ref(false)
-const search = ref('')
-const sortBy : Ref<any> = ref([])
-
-const headers = ref<any>([
-  { title: t('tenant.name') as string, key: 'name', align: 'start' },
-  { title: t('tenant.createdAt') as string, key: 'createdAt', align: 'start' },
-  { title: '', key: 'actions', align: 'end', minWidth: '150px' },
-])
-
-
-async function loadItems(){
-  try{
-    loading.value = true
-    const r = await paginateTenant({
-      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
-      class="border"
-      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"
-      :multi-sort="false"
-      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.createdAt="{ value }" >
-      {{formatDateTime(value)}}
-    </template>
-
-
-    <template v-slot:item.actions="{item}" >
-      <v-btn v-if="hasPermission('tenant:update')"  icon="mdi-pencil"  variant="text" color="primary" @click="$emit('toEdit', item)"></v-btn>
-      <v-btn v-if="hasPermission('tenant:delete')"  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/UserList.vue

@@ -1,110 +0,0 @@
-<script setup lang="ts">
-
-import {ref, defineProps, type Ref} from "vue";
-import {useUser} from "../../composables/useUser";
-import {useAuth} from "../../composables/useAuth";
-import {useI18n} from "vue-i18n";
-import type {IUser} from "@drax/identity-share";
-
-const {hasPermission} = useAuth()
-const {paginateUser} = useUser()
-const {t} = 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('user.name') as string, key: 'name', align: 'start' },
-  { title: t('user.username') as string, key: 'username', align: 'start' },
-  { title: t('user.email') as string, key: 'email', align: 'start' },
-  { title: t('user.role') as string, key: 'role.name', align: 'start' },
-  { title: t('user.tenant') as string, key: 'tenant.name', align: 'start' },
-  { title: t('user.active') as string, key: 'active', align: 'start' },
-  { title: '', key: 'actions', align: 'end', fixed:true },
-])
-
-const serverItems: Ref<IUser[]> = 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 paginateUser({
-      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"
-      v-model:page="page"
-      v-model:sort-by="sortBy"
-      :items-per-page-options="[5, 10, 20, 50]"
-      :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.active="{ value }" >
-      <v-chip :color="value ? 'green':'red'" >
-        {{ value ? 'Active' : 'Inactive' }}
-      </v-chip>
-    </template>
-
-    <template v-slot:item.actions="{item}" >
-      <v-btn v-if="hasPermission('user:update')" icon="mdi-pencil"  variant="text" color="primary" @click="$emit('toEdit', item)"></v-btn>
-      <v-btn v-if="hasPermission('user:update')" icon="mdi-lock"  variant="text" color="orange" @click="$emit('toChangePassword', item)"></v-btn>
-      <v-btn v-if="hasPermission('user:delete')" 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>