@drax/identity-vue 0.0.10

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

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+
+import {defineProps, ref} from "vue";
+import {useRole} from "../../composables/useRole";
+import {useAuth} from "../../composables/useAuth";
+import {useI18n} from "vue-i18n";
+
+const {hasPermission} = useAuth()
+const {paginateRole} = useRole()
+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('role.name'), key: 'name', 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' },
+])
+
+const serverItems = ref([])
+const totalItems = ref(0)
+const loading = ref(false)
+const search = ref('')
+
+async function loadItems(){
+  try{
+    loading.value = true
+    const r = await paginateRole(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.permissions="{ value }" >
+          <v-chip v-for="permission in value"
+                  :key="permission" color="green"
+                  class="ma-1"
+          >
+            {{$t ? $t(`permission.${permission}`) : permission }}
+          </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('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>
+    </template>
+
+  </v-data-table-server>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+import UserList from "./UserList.vue";
+import {useUser} from "../../composables/useUser";
+import type {IUser} from "@drax/identity-front";
+import type {IUserCreate, IUserUpdate, IUserPassword} from "@drax/identity-front/src/interfaces/IUser";
+import UserCreateForm from "../../forms/UserCreateForm.vue";
+import UserEditForm from "../../forms/UserEditForm.vue";
+import UserPasswordForm from "../../forms/UserPasswordForm.vue";
+import UserView from "../../views/UserView.vue";
+
+const {createUser, editUser, changeUserPassword, deleteUser, loading, userError, inputErrors} = useUser()
+
+interface UserList {
+  loadItems: () => void;
+  items: IUser[];
+}
+
+type DialogMode = 'create' | 'edit' | 'delete' | 'changePassword' | null;
+
+
+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 passwordForm = ref<IUserPassword>({newPassword: "", confirmPassword: ""})
+let passwordChanged = ref(false);
+let target = ref<IUser>();
+let targetId = ref<string>('');
+let actionButtonEnable = ref(true);
+let filterEnable = ref(false);
+
+function cancel() {
+  dialog.value = false
+  inputErrors.value = {}
+  userError.value = '';
+  dialogMode.value = null
+  dialogTitle.value = ''
+  targetId.value = ''
+  target.value = undefined
+  actionButtonEnable.value = true
+}
+
+async function save() {
+
+  try {
+    if (dialogMode.value === 'create') {
+      await createUser(createForm.value)
+    } else if (dialogMode.value === 'edit') {
+      await editUser(targetId.value, editForm.value)
+    } else if (dialogMode.value === 'changePassword') {
+      if (passwordForm.value.newPassword === passwordForm.value.confirmPassword) {
+        passwordChanged.value = await changeUserPassword(targetId.value, passwordForm.value.newPassword)
+        actionButtonEnable.value = false
+        return
+      } else {
+        return
+      }
+    } else if (dialogMode.value === 'delete') {
+      await deleteUser(targetId.value)
+    }
+    dialog.value = false
+    inputErrors.value = {}
+    userError.value = '';
+    if (userList.value !== null) {
+      userList.value.loadItems()
+    }
+  } catch (e) {
+    console.error(e)
+    if (e instanceof Error) {
+      userError.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() {
+  actionButtonEnable.value = true
+  dialogMode.value = 'create';
+  dialogTitle.value = 'user.creating';
+  createForm.value = {name: "", username: "", password: "", email: "", phone: "", role: "", active: true}
+  dialog.value = true;
+}
+
+function toEdit(item: IUser) {
+  actionButtonEnable.value = true
+  dialogMode.value = 'edit';
+  dialogTitle.value = 'user.updating';
+  const {id, ...rest} = item;
+  targetId.value = id;
+  rest.role = rest.role ? rest.role.id : null
+  editForm.value = {...rest}
+  dialog.value = true;
+}
+
+function toDelete(item: IUser) {
+  actionButtonEnable.value = true
+  dialogMode.value = 'delete';
+  dialogTitle.value = 'user.deleting';
+  target.value = item
+  const {id} = item;
+  targetId.value = id;
+  dialog.value = true;
+}
+
+function toChangePassword(item: IUser) {
+  actionButtonEnable.value = true
+  dialogMode.value = 'changePassword';
+  dialogTitle.value = 'user.changingPassword';
+  target.value = item
+  const {id} = item;
+  targetId.value = id;
+  dialog.value = true;
+}
+
+
+</script>
+
+<template>
+  <v-container>
+
+    <v-sheet border rounded>
+      <v-toolbar>
+        <v-toolbar-title>{{ $t('user.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">
+        <UserList
+            ref="userList"
+            @toEdit="toEdit"
+            @toDelete="toDelete"
+            @toChangePassword="toChangePassword"
+            :filterEnable="filterEnable"
+        />
+      </v-theme-provider>
+    </v-sheet>
+
+    <v-dialog v-model="dialog" max-width="800">
+      <v-sheet border>
+        <v-toolbar>
+          <v-toolbar-title>{{ $t(dialogTitle) }}</v-toolbar-title>
+        </v-toolbar>
+        <v-card class="pa-10">
+          <v-card-text v-if="userError">
+            <v-alert type="error">{{ userError }}</v-alert>
+          </v-card-text>
+          <v-card-text>
+            <UserCreateForm
+                v-if="dialogMode === 'create'"
+                v-model="createForm"
+                :inputErrors="inputErrors"
+            />
+
+            <UserEditForm
+                v-if="dialogMode === 'edit'"
+                v-model="editForm"
+                :inputErrors="inputErrors"
+            />
+
+            <UserView v-if="dialogMode === 'delete'
+            && target" :user="target"
+            />
+
+
+            <UserPasswordForm
+                v-if="dialogMode === 'changePassword'&& target"
+                v-model="passwordForm"
+                :inputErrors="inputErrors"
+                :passwordChanged="passwordChanged"
+            />
+
+
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn
+                variant="text"
+                @click="cancel"
+                :loading="loading">
+              {{ actionButtonEnable ? $t('action.cancel') : $t('action.close') }}
+            </v-btn>
+            <v-btn
+                v-if="actionButtonEnable"
+                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/user-crud/UserList.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+
+import {ref, defineProps} from "vue";
+import {useUser} from "../../composables/useUser";
+import {useAuth} from "../../composables/useAuth";
+import {useI18n} from "vue-i18n";
+
+const {hasPermission} = useAuth()
+const {paginateUser} = useUser()
+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('user.name'), key: 'name', align: 'start' },
+  { 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.active'), key: 'active', align: 'start' },
+  { title: '', key: 'actions', align: 'start', fixed:true },
+])
+
+const serverItems = ref([])
+const totalItems = ref(0)
+const loading = ref(false)
+const search = ref('')
+
+async function loadItems(){
+  try{
+    loading.value = true
+    const r = await paginateUser(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.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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import {defineModel, type PropType} from "vue";
+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";
+
+const {$ta} = useI18nValidation()
+
+const props = defineProps({
+  inputErrors: {
+    type: Object as PropType<IClientInputError>,
+    default: () => ({name: "", permissions: "", readonly: ""})
+  }
+})
+
+const form = defineModel<IRole>({
+  type: Object,
+  default: () => ({name: "", permissions: [], readonly: false})
+})
+
+</script>
+
+<template>
+  <form>
+    <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>
+
+
+    <PermissionSelector v-model="form.permissions"></PermissionSelector>
+
+  </form>
+</template>
+
+<style scoped>
+
+</style>

package/src/forms/UserCreateForm.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import {ref, defineModel, type PropType} from "vue";
+import RoleCombobox from "../combobox/RoleCombobox.vue";
+import type {IClientInputError} from "@drax/common-front";
+import type {IUserCreate} from "@drax/identity-front/src/interfaces/IUser";
+import {useI18nValidation} from "../composables/useI18nValidation";
+
+const {$ta} = useI18nValidation()
+
+const props = defineProps({
+  inputErrors: {
+    type: Object as PropType<IClientInputError>,
+    default: () => ({name: "", username: "", password: "", email: "", phone: "", role: "", active: ""})
+  }
+})
+
+const form = defineModel<IUserCreate>({
+  type: Object,
+  default: () => ({name: "", username: "", password: "", email: "", phone: "", role: "", active: true})
+})
+
+let passwordVisibility = ref(false)
+
+</script>
+
+<template>
+  <form>
+
+    <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>
+
+    <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>

package/src/forms/UserEditForm.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import {ref, defineModel, type PropType} from "vue";
+import RoleCombobox from "../combobox/RoleCombobox.vue";
+import type {IClientInputError} from "@drax/common-front";
+import type {IUserUpdate} from "@drax/identity-front/src/interfaces/IUser";
+import {useI18nValidation} from "../composables/useI18nValidation";
+const {$ta} = useI18nValidation()
+
+const props = defineProps({
+  inputErrors: {
+    type: Object as PropType<IClientInputError>,
+    default: () => ({name: "", username: "", email: "", phone: "", role: "", active: ""})
+  }
+})
+
+const form = defineModel<IUserUpdate>({
+  type: Object,
+  default: () => ({name: "", username: "", email: "", phone: "", role: "", active: true})
+})
+
+
+</script>
+
+<template>
+  <form>
+    <v-sheet>
+    </v-sheet>
+
+    <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
+        :error-messages="$ta(inputErrors.username)"
+        autocomplete="new-username"
+    ></v-text-field>
+
+    <RoleCombobox
+        v-model="form.role"
+        :error-messages="$ta(inputErrors.role)"
+    ></RoleCombobox>
+
+    <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>