@tager/admin-administrators 0.2.7 → 1.0.0

package/src/views/RoleForm/RoleForm.vue

@@ -1,34 +1,32 @@
 <template>
-  <page :title="pageTitle" :is-content-loading="isContentLoading">
+  <Page :title="pageTitle" :is-content-loading="isContentLoading">
     <form novalidate @submit.prevent>
-      <template>
-        <form-field
-          v-model="values.name"
+      <FormField
+          v-model:value="values.name"
           name="name"
           :error="errors.name"
-          :label="t('administrators:name')"
-        />
-        <form-field-multi-select
+          :label="$i18n.t('administrators:name')"
+      />
+      <FormFieldMultiSelect
           v-if="!values.isSuperAdmin"
-          v-model="values.scopes"
+          v-model:selected-options="values.scopes"
           name="scopes"
-          :label="t('administrators:privileges')"
+          :label="$i18n.t('administrators:privileges')"
           :options="scopeOptionList"
           :error="errors.scopes"
-        />
-      </template>
+      />
     </form>
 
-    <template v-slot:footer>
+    <template #footer>
       <FormFooter
-        :back-href="backButtonUrl"
-        :on-submit="submitForm"
-        :is-submitting="isSubmitting"
-        :is-creation="isCreation"
-        :can-create-another="isCreation"
+          :back-href="backButtonUrl"
+          @submit="submitForm"
+          :is-submitting="isSubmitting"
+          :is-creation="isCreation"
+          :can-create-another="isCreation"
       />
     </template>
-  </page>
+  </Page>
 </template>
 
 <script lang="ts">
@@ -37,20 +35,24 @@ import {
   defineComponent,
   onMounted,
   ref,
-  SetupContext,
   watch,
-} from '@vue/composition-api';
+} from 'vue';
+
+import {Page} from "@tager/admin-layout";
 
 import {
-  convertRequestErrorToMap,
+  convertRequestErrorToMap, navigateBack,
   Nullable,
-  useResource,
+  useResource, useToast,
 } from '@tager/admin-services';
+
+import {useI18n} from "@tager/admin-services";
+
 import {
   OptionType,
   FormFooter,
   TagerFormSubmitEvent,
-  useTranslation,
+  FormField, FormFieldMultiSelect
 } from '@tager/admin-ui';
 
 import {
@@ -59,8 +61,8 @@ import {
   getScopes,
   updateRole,
 } from '../../services/requests';
-import { RoleType, ScopeGroupsData } from '../../typings/model';
-import { getRoleFormUrl, getRoleListUrl } from '../../utils/paths';
+import {RoleType, ScopeGroupsData} from '../../typings/model';
+import {getRoleFormUrl, getRoleListUrl} from '../../utils/paths';
 
 import {
   convertFormValuesToRoleCreationPayload,
@@ -69,34 +71,35 @@ import {
   convertScopeDataToOptions,
   FormValues,
 } from './RoleForm.helpers';
+import {useRoute, useRouter} from "vue-router";
 
 export default defineComponent({
   name: 'RoleForm',
-  components: { FormFooter },
-  setup(props, context: SetupContext) {
-    const { t } = useTranslation(context);
+  components: {Page, FormFooter, FormField, FormFieldMultiSelect},
+  setup() {
+    const {t} = useI18n();
+
+    const route = useRoute();
+    const router = useRouter();
+    const toast = useToast();
 
-    const roleId = computed<string>(() => context.root.$route.params.roleId);
+    const roleId = computed(() => route.params.roleId as string | number);
 
-    const isCreation = computed<boolean>(() => roleId.value === 'create');
+    const isCreation = computed(() => roleId.value === "create");
 
-    const [fetchRole, { data: role, loading: isRoleLoading }] = useResource<
-      Nullable<RoleType>
-    >({
+    const [fetchRole, {data: role, loading: isRoleLoading}] = useResource<Nullable<RoleType>>({
       fetchResource: () => getRole(roleId.value),
       initialValue: null,
-      context,
       resourceName: 'Role',
     });
 
     /** Fetch scope list */
     const [
       fetchScopeData,
-      { data: scopeData, loading: isScopeDataLoading },
+      {data: scopeData, loading: isScopeDataLoading},
     ] = useResource<Nullable<ScopeGroupsData>>({
       fetchResource: getScopes,
       initialValue: null,
-      context,
       resourceName: 'Scope list',
     });
 
@@ -110,7 +113,7 @@ export default defineComponent({
 
     /** Scope Options */
     const scopeOptionList = computed<Array<OptionType>>(() =>
-      convertScopeDataToOptions(scopeData.value)
+        convertScopeDataToOptions(scopeData.value)
     );
 
     const values = ref<FormValues>(convertRoleToFormValues(role.value));
@@ -128,61 +131,61 @@ export default defineComponent({
 
       const updateBody = convertFormValuesToRoleUpdatePayload(values.value);
       const requestPromise = isCreation.value
-        ? createRole(creationBody)
-        : updateRole(roleId.value, updateBody);
+          ? createRole(creationBody)
+          : updateRole(roleId.value, updateBody);
 
       requestPromise
-        .then(({ data }) => {
-          errors.value = {};
-
-          if (event.type === 'create') {
-            context.root.$router.push(getRoleFormUrl({ roleId: data.id }));
-          }
-
-          if (event.type === 'create_exit' || event.type === 'save_exit') {
-            context.root.$router.push(getRoleListUrl());
-          }
-
-          if (event.type === 'create_create-another') {
-            values.value = convertRoleToFormValues(null);
-          }
-
-          context.root.$toast({
-            variant: 'success',
-            title: t('administrators:success'),
-            body: isCreation.value
-              ? t('administrators:roleSuccessfullyCreated')
-              : t('administrators:roleSuccessfullyUpdate'),
-          });
-        })
-        .catch((error) => {
-          console.error(error);
-          errors.value = convertRequestErrorToMap(error);
-          context.root.$toast({
-            variant: 'danger',
-            title: t('administrators:error'),
-            body: isCreation.value
-              ? t('administrators:roleCreationError')
-              : t('administrators:roleUpdateError'),
+          .then(({data}) => {
+            errors.value = {};
+
+
+            if (event.type === "create") {
+              router.push(getRoleFormUrl({roleId: data.id}));
+            }
+
+            if (event.type === "create_exit" || event.type === "save_exit") {
+              navigateBack(router, getRoleListUrl());
+            }
+
+            if (event.type === 'create_create-another') {
+              values.value = convertRoleToFormValues(null);
+            }
+
+            toast.show({
+              variant: 'success',
+              title: t('administrators:success'),
+              body: isCreation.value
+                  ? t('administrators:roleSuccessfullyCreated')
+                  : t('administrators:roleSuccessfullyUpdate'),
+            });
+          })
+          .catch((error) => {
+            console.error(error);
+            errors.value = convertRequestErrorToMap(error);
+            toast.show({
+              variant: 'danger',
+              title: t('administrators:error'),
+              body: isCreation.value
+                  ? t('administrators:roleCreationError')
+                  : t('administrators:roleUpdateError'),
+            });
+          })
+          .finally(() => {
+            isSubmitting.value = false;
           });
-        })
-        .finally(() => {
-          isSubmitting.value = false;
-        });
     }
 
     const pageTitle = computed<string>(() => {
       return isCreation.value
-        ? t('administrators:createRole')
-        : `${t('administrators:updateRole')} "${values.value.name}"`;
+          ? t('administrators:createRole')
+          : `${t('administrators:updateRole')} "${values.value.name}"`;
     });
 
     const isContentLoading = computed<boolean>(
-      () => isRoleLoading.value || isScopeDataLoading.value
+        () => isRoleLoading.value || isScopeDataLoading.value
     );
 
     return {
-      t,
       backButtonUrl: getRoleListUrl(),
       values,
       errors,

package/src/views/RoleList/RoleList.vue

@@ -1,104 +1,120 @@
 <template>
-  <page
-    :title="t('administrators:listOfRoles')"
-    :header-buttons="[
+  <Page
+      :title="$i18n.t('administrators:listOfRoles')"
+      :header-buttons="[
       {
-        text: t('administrators:addRole'),
+        text: $i18n.t('administrators:addRole'),
         href: getRoleFormUrl({ roleId: 'create' }),
       },
     ]"
   >
-    <template v-slot:content>
-      <base-table
+    <DataTable
         :column-defs="columnDefs"
         :row-data="rowData"
         :loading="isRowDataLoading"
         :error-message="errorMessage"
-      >
-        <template v-slot:cell(scope)="{ row }">
+    >
+      <template #cell(scope)="{ row }">
           <span v-if="row.scopes.length === 0" class="no-scopes">
-            {{ t('administrators:noPrivileges') }}
+            {{ $i18n.t('administrators:noPrivileges') }}
           </span>
-          <span v-if="row.isSuperAdmin">{{ t('administrators:all') }}</span>
-          <div
+        <span v-if="row.isSuperAdmin">{{ $i18n.t('administrators:all') }}</span>
+        <div
             v-for="scopeGroup in getScopeGroupList(row.scopes)"
             v-else
             :key="scopeGroup.module"
             class="scope-group"
-          >
+        >
             <span class="module-name">
               {{ scopeGroup.module }}
             </span>
-            <ul class="scope-list">
-              <li
+          <ul class="scope-list">
+            <li
                 v-for="scope of scopeGroup.scopes.slice(
                   0,
                   scopesPerModuleCount
                 )"
                 :key="scope.value"
-              >
-                <span>— {{ scope.label }}</span>
-              </li>
-            </ul>
-            <span
+            >
+              <span>— {{ scope.label }}</span>
+            </li>
+          </ul>
+          <span
               v-if="scopeGroup.scopes.length > scopesPerModuleCount"
               class="rest-scopes-text"
-            >
+          >
               {{
-                getRestScopesText(
+              getRestScopesText(
                   scopeGroup.scopes.length - scopesPerModuleCount
-                )
-              }}
+              )
+            }}
             </span>
-          </div>
-        </template>
-        <template v-slot:cell(actions)="{ row }">
-          <base-button
+        </div>
+      </template>
+      <template #cell(actions)="{ row }">
+        <BaseButton
             variant="icon"
-            :title="t('administrators:edit')"
+            :title="$i18n.t('administrators:edit')"
             :disabled="isBusy(row.id)"
             :href="getRoleFormUrl({ roleId: row.id })"
-          >
-            <svg-icon name="edit"></svg-icon>
-          </base-button>
-          <base-button
+        >
+          <EditIcon/>
+        </BaseButton>
+        <BaseButton
             v-if="!row.isSuperAdmin"
             variant="icon"
-            :title="t('administrators:delete')"
+            :title="$i18n.t('administrators:delete')"
             :disabled="isBusy(row.id)"
             @click="handleRoleDelete(row.id)"
-          >
-            <svg-icon name="delete"></svg-icon>
-          </base-button>
-        </template>
-      </base-table>
-    </template>
-  </page>
+        >
+          <DeleteIcon/>
+        </BaseButton>
+      </template>
+    </DataTable>
+  </Page>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, SetupContext } from '@vue/composition-api';
+import {defineComponent, onMounted} from "vue";
 
-import { useResource, useResourceDelete } from '@tager/admin-services';
-import { ColumnDefinition, useTranslation } from '@tager/admin-ui';
+import {useResourceDelete, useI18n} from '@tager/admin-services';
+import {Page} from "@tager/admin-layout";
 
-import { RoleType, ScopeType } from '../../typings/model';
-import { deleteRole, getRoleList } from '../../services/requests';
-import { getRoleFormUrl } from '../../utils/paths';
+import {
+  BaseButton,
+  type ColumnDefinition,
+  DataTable,
+  DeleteIcon,
+  EditIcon,
+  useDataTable,
+} from "@tager/admin-ui";
+
+import {RoleType, ScopeType} from '../../typings/model';
+import {deleteRole, getRoleList} from '../../services/requests';
+import {getRoleFormUrl} from '../../utils/paths';
 
 export default defineComponent({
   name: 'RoleList',
-  setup(props, context: SetupContext) {
-    const { t } = useTranslation(context);
-
-    const [
-      fetchRoleList,
-      { data: roleList, loading: isRoleLoading, error },
-    ] = useResource<Array<RoleType>>({
-      fetchResource: getRoleList,
+  components: {
+    Page,
+    DeleteIcon,
+    EditIcon,
+    DataTable,
+    BaseButton,
+  },
+  setup() {
+    const {t} = useI18n();
+
+    const {
+      fetchEntityList: fetchRoleList,
+      isLoading: isRoleListLoading,
+      rowData: roleList,
+      errorMessage: error,
+    } = useDataTable<RoleType>({
+      fetchEntityList: (params) => getRoleList(),
       initialValue: [],
-      context,
-      resourceName: 'Role list',
+      resourceName: "Role list",
+      pageSize: 100,
     });
 
     onMounted(() => {
@@ -112,15 +128,14 @@ export default defineComponent({
       deleteResource: deleteRole,
       resourceName: 'Role',
       onSuccess: fetchRoleList,
-      context,
     });
 
     function isBusy(roleId: number): boolean {
-      return isDeleting(roleId) || isRoleLoading.value;
+      return isDeleting(roleId) || isRoleListLoading.value;
     }
 
     function getScopeGroupList(
-      scopes: Array<ScopeType>
+        scopes: Array<ScopeType>
     ): Array<{ module: string; scopes: ScopeType }> {
       const map = new Map();
       scopes.forEach((scope) => {
@@ -137,7 +152,7 @@ export default defineComponent({
 
     function getRestScopesText(restPrivilegesCount: number): string {
       if (restPrivilegesCount === 1) {
-        return t('administrators:andMorePrivilege', { count: 1 });
+        return t('administrators:andMorePrivilege', {count: 1});
       }
 
       if (restPrivilegesCount > 1) {
@@ -164,16 +179,15 @@ export default defineComponent({
         id: 3,
         name: t('administrators:actions'),
         field: 'actions',
-        style: { width: '180px', textAlign: 'center', whiteSpace: 'nowrap' },
-        headStyle: { width: '180px', textAlign: 'center' },
+        style: {width: '180px', textAlign: 'center', whiteSpace: 'nowrap'},
+        headStyle: {width: '180px', textAlign: 'center'},
       },
     ];
 
     return {
-      t,
       columnDefs,
       rowData: roleList,
-      isRowDataLoading: isRoleLoading,
+      isRowDataLoading: isRoleListLoading,
       errorMessage: error,
       isBusy,
       handleRoleDelete,

package/dist/dev.d.ts

@@ -1 +0,0 @@
-import '@tager/admin-ui/dist/admin-ui.css';