@drax/identity-vue 0.5.4 → 0.5.9

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>

package/src/forms/RoleForm.vue

@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import {useFormUtils, useCrudStore} from "@drax/crud-vue";
-import {defineEmits, defineModel, defineProps, ref} from "vue";
-import {useI18nValidation} from "@drax/common-vue";
-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({
-  error: {type: String, required: false},
-})
-
-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-text-field
-        id="name-input"
-        name="name"
-        :label="$t('role.fields.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"
-        :error-messages="$ta(store.inputErrors?.role)"
-        multiple
-        :readonly="readonly"
-        :variant="variant"
-    ></RoleCombobox>
-
-    <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>
-
-  </v-form>
-</template>
-
-<style scoped>
-
-</style>

package/src/forms/RoleFormOld.vue

@@ -1,57 +0,0 @@
-<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/forms/TenantForm.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import {defineModel, type PropType} from "vue";
-import type {ITenantBase} from "@drax/identity-share";
-import {useI18nValidation} from "@drax/common-vue";
-import type {IClientInputError} from "@drax/common-front";
-
-const {$ta} = useI18nValidation()
-
-defineProps({
-  inputErrors: {
-    type: Object as PropType<IClientInputError>,
-    default: () => ({name: ""})
-  }
-})
-
-const form = defineModel<ITenantBase>({
-  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,115 +0,0 @@
-<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-share";
-import {useI18nValidation} from "@drax/common-vue";
-
-const {$ta} = useI18nValidation()
-
-defineProps({
-  inputErrors: {
-    type: Object as PropType<IClientInputError>,
-    default: () => ({name: "", username: "", password: "", email: "", phone: "", role: "", tenant: "", active: ""})
-  }
-})
-
-const form = defineModel<IUserCreate>({
-  type: Object,
-  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 @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>
-
-    <v-text-field
-        variant="outlined"
-        id="username-input"
-        label="Username"
-        v-model="form.username"
-        prepend-inner-icon="mdi-account-question"
-        required
-        autocomplete="new-username"
-        :error-messages="$ta(inputErrors.username)"
-    ></v-text-field>
-    <v-text-field
-        variant="outlined"
-        id="password-input"
-        label="Password"
-        v-model="form.password"
-        :type="passwordVisibility ? 'text': 'password'"
-        required
-        prepend-inner-icon="mdi-lock-outline"
-        :append-inner-icon="passwordVisibility ? 'mdi-eye-off': 'mdi-eye'"
-        @click:append-inner="passwordVisibility = !passwordVisibility"
-        autocomplete="new-password"
-        :error-messages="$ta(inputErrors.password)"
-    ></v-text-field>
-
-    <RoleCombobox
-        v-model="form.role"
-        :error-messages="$ta(inputErrors.role)"
-    ></RoleCombobox>
-
-    <TenantCombobox
-        v-model="form.tenant"
-        :error-messages="$ta(inputErrors.tenant)"
-        clearable
-    ></TenantCombobox>
-
-    <v-text-field
-        v-model="form.email"
-        variant="outlined"
-        id="email-input"
-        label="Email"
-        prepend-inner-icon="mdi-email"
-        required
-        :error-messages="$ta(inputErrors.email)"
-    ></v-text-field>
-
-    <v-text-field
-        v-model="form.phone"
-        variant="outlined"
-        id="phone-input"
-        label="Phone"
-        prepend-inner-icon="mdi-phone"
-        required
-        :error-messages="$ta(inputErrors.phone)"
-    ></v-text-field>
-
-    <v-switch
-        id="active-input"
-        v-model="form.active"
-        color="primary"
-        label="Active"
-        :true-value="true"
-        :false-value="false"
-    ></v-switch>
-  </form>
-</template>
-
-<style scoped>
-
-</style>