@tager/admin-administrators 0.2.7 → 1.0.0

package/src/views/AdminForm/AdminForm.vue

@@ -1,49 +1,47 @@
 <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"
-          name="name"
-          :error="errors.name"
-          :label="t('administrators:name')"
+        <FormField
+            v-model:value="values.name"
+            name="name"
+            :error="errors.name"
+            :label="$i18n.t('administrators:name')"
         />
-        <form-field
-          v-model="values.email"
-          name="email"
-          :error="errors.email"
-          :label="t('administrators:email')"
+        <FormField
+            v-model:value="values.email"
+            name="email"
+            :error="errors.email"
+            :label="$i18n.t('administrators:email')"
         />
-        <form-field-multi-select
-          v-model="values.roles"
-          name="roles"
-          :label="t('administrators:roles')"
-          :options="roleOptionList"
-          :error="errors.roles"
+        <FormFieldMultiSelect
+            v-model:selected-options="values.roles"
+            name="roles"
+            :label="$i18n.t('administrators:roles')"
+            :options="roleOptionList"
+            :error="errors.roles"
         />
-        <form-field
-          v-model="values.password"
-          name="password"
-          :error="errors.password"
-          :label="
+        <FormField
+            v-model:value="values.password"
+            name="password"
+            :error="errors.password"
+            :label="
             isCreation
-              ? t('administrators:password')
-              : t('administrators:newPassword')
+              ? $i18n.t('administrators:password')
+              : $i18n.t('administrators:newPassword')
           "
         />
-      </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">
@@ -54,23 +52,27 @@ import {
   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 { OptionType, FormFooter, TagerFormSubmitEvent, useTranslation } from '@tager/admin-ui';
+import {OptionType, FormFooter, TagerFormSubmitEvent, FormField, FormFieldMultiSelect} from '@tager/admin-ui';
+
+import {useI18n} from "@tager/admin-services";
 
-import { AdminType, RoleType } from '../../typings/model';
+import {AdminType, RoleType} from '../../typings/model';
 import {
   createAdmin,
   getAdmin,
   getRoleList,
   updateAdmin,
 } from '../../services/requests';
-import { getAdminFormUrl, getAdminListUrl } from '../../utils/paths';
+import {getAdminFormUrl, getAdminListUrl, getRoleFormUrl, getRoleListUrl} from '../../utils/paths';
 
 import {
   convertFormValuesToAdminCreationPayload,
@@ -79,23 +81,25 @@ import {
   convertRoleListToOptions,
   FormValues,
 } from './AdminForm.helpers';
+import {useRoute, useRouter} from "vue-router";
 
 export default defineComponent({
   name: 'AdminForm',
-  components: { FormFooter },
-  setup(props, context: SetupContext) {
-    const { t } = useTranslation(context);
+  components: {Page, FormFooter, FormField, FormFieldMultiSelect},
+  setup() {
+    const {t} = useI18n();
 
-    const adminId = computed<string>(() => context.root.$route.params.adminId);
+    const route = useRoute();
+    const router = useRouter();
+    const toast = useToast();
 
-    const isCreation = computed<boolean>(() => adminId.value === 'create');
+    const adminId = computed(() => route.params.adminId as string | number);
 
-    const [fetchAdmin, { data: admin, loading: isAdminLoading }] = useResource<
-      Nullable<AdminType>
-    >({
+    const isCreation = computed(() => adminId.value === "create");
+
+    const [fetchAdmin, {data: admin, loading: isAdminLoading}] = useResource<Nullable<AdminType>>({
       fetchResource: () => getAdmin(adminId.value),
       initialValue: null,
-      context,
       resourceName: 'Admin',
     });
 
@@ -103,11 +107,10 @@ export default defineComponent({
 
     const [
       fetchRoleList,
-      { data: roleList, loading: isRoleListLoading },
+      {data: roleList, loading: isRoleListLoading},
     ] = useResource<Array<RoleType>>({
       fetchResource: getRoleList,
       initialValue: [],
-      context,
       resourceName: 'Role list',
     });
 
@@ -120,11 +123,11 @@ export default defineComponent({
 
     /** Role Options */
     const roleOptionList = computed<Array<OptionType<number>>>(() =>
-      convertRoleListToOptions(roleList.value)
+        convertRoleListToOptions(roleList.value)
     );
 
     const values = ref<FormValues>(
-      convertAdminToFormValues(admin.value, roleOptionList.value)
+        convertAdminToFormValues(admin.value, roleOptionList.value)
     );
 
     const errors = ref<Record<string, string>>({});
@@ -132,8 +135,8 @@ export default defineComponent({
 
     watch([admin, roleOptionList], () => {
       values.value = convertAdminToFormValues(
-        admin.value,
-        roleOptionList.value
+          admin.value,
+          roleOptionList.value
       );
     });
 
@@ -143,63 +146,63 @@ export default defineComponent({
       if (admin.value && admin.value.isSelf) return;
 
       const creationBody = convertFormValuesToAdminCreationPayload(
-        values.value
+          values.value
       );
 
       const updateBody = convertFormValuesToAdminUpdatePayload(values.value);
 
       const requestPromise = isCreation.value
-        ? createAdmin(creationBody)
-        : updateAdmin(adminId.value, updateBody);
+          ? createAdmin(creationBody)
+          : updateAdmin(adminId.value, updateBody);
 
       requestPromise
-        .then(({ data }) => {
-          errors.value = {};
-
-          if (event.type === 'create') {
-            context.root.$router.push(getAdminFormUrl({ adminId: data.id }));
-          }
-
-          if (event.type === 'create_exit' || event.type === 'save_exit') {
-            context.root.$router.push(getAdminListUrl());
-          }
-
-          if (event.type === 'create_create-another') {
-            values.value = convertAdminToFormValues(null, roleOptionList.value);
-          }
-
-          context.root.$toast({
-            variant: 'success',
-            title: t('administrators:success'),
-            body: isCreation.value
-              ? t('administrators:adminSuccessfullyCreated')
-              : t('administrators:adminSuccessfullyUpdated'),
-          });
-        })
-        .catch((error) => {
-          console.error(error);
-          errors.value = convertRequestErrorToMap(error);
-          context.root.$toast({
-            variant: 'danger',
-            title: t('administrators:error'),
-            body: isCreation.value
-              ? t('administrators:adminCreationError')
-              : t('administrators:adminUpdateError'),
+          .then(({data}) => {
+            errors.value = {};
+
+            if (event.type === "create") {
+              router.push(getAdminFormUrl({adminId: data.id}));
+            }
+
+            if (event.type === "create_exit" || event.type === "save_exit") {
+              navigateBack(router, getAdminListUrl());
+            }
+
+            if (event.type === 'create_create-another') {
+              values.value = convertAdminToFormValues(null, roleOptionList.value);
+            }
+
+            toast.show({
+              variant: 'success',
+              title: t('administrators:success'),
+              body: isCreation.value
+                  ? t('administrators:adminSuccessfullyCreated')
+                  : t('administrators:adminSuccessfullyUpdated'),
+            });
+          })
+          .catch((error) => {
+            console.error(error);
+            errors.value = convertRequestErrorToMap(error);
+            toast.show({
+              variant: 'danger',
+              title: t('administrators:error'),
+              body: isCreation.value
+                  ? t('administrators:adminCreationError')
+                  : t('administrators:adminUpdateError'),
+            });
+          })
+          .finally(() => {
+            isSubmitting.value = false;
           });
-        })
-        .finally(() => {
-          isSubmitting.value = false;
-        });
     }
 
     const pageTitle = computed<string>(() => {
       return isCreation.value
-        ? t('administrators:createAdmin')
-        : `${t('administrators:updateAdmin')} "${values.value.name}"`;
+          ? t('administrators:createAdmin')
+          : `${t('administrators:updateAdmin')} "${values.value.name}"`;
     });
 
     const isContentLoading = computed<boolean>(
-      () => isAdminLoading.value || isRoleListLoading.value
+        () => isAdminLoading.value || isRoleListLoading.value
     );
 
     return {

package/src/views/AdminList/AdminList.vue

@@ -1,75 +1,81 @@
 <template>
-  <page
-    :title="t('administrators:administrators')"
-    :header-buttons="[
+  <Page
+      :title="$i18n.t('administrators:administrators')"
+      :header-buttons="[
       {
-        text: t('administrators:createAdministrator'),
+        text: $i18n.t('administrators:createAdministrator'),
         href: getAdminFormUrl({ adminId: 'create' }),
       },
     ]"
   >
-    <template v-slot:content>
-      <base-table
+    <DataTable
         :column-defs="columnDefs"
         :row-data="rowData"
         :loading="isRowDataLoading"
         :error-message="errorMessage"
-      >
-        <template v-slot:cell(roles)="{ row }">
-          <ul>
-            <li v-for="role of row.roles" :key="role.id">
-              {{ role.name }}
-            </li>
-          </ul>
-        </template>
-        <template v-slot:cell(actions)="{ row }">
-          <base-button
+    >
+      <template v-slot:cell(roles)="{ row }">
+        <ul>
+          <li v-for="role of row.roles" :key="role.id">
+            {{ role.name }}
+          </li>
+        </ul>
+      </template>
+      <template #cell(actions)="{ row }">
+        <BaseButton
             v-if="!row.isSelf"
             variant="icon"
-            :title="t('administrators:edit')"
+            :title="$i18n.t('administrators:edit')"
             :disabled="isBusy(row.id)"
             :href="getAdminFormUrl({ adminId: row.id })"
-          >
-            <svg-icon name="edit"></svg-icon>
-          </base-button>
-          <base-button
+        >
+          <EditIcon/>
+        </BaseButton>
+        <BaseButton
             v-if="!row.isSuperAdmin || !row.isSelf"
             variant="icon"
-            :title="t('administrators:delete')"
+            :title="$i18n.t('administrators:delete')"
             :disabled="isBusy(row.id)"
             @click="handleAdminDelete(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} from '@tager/admin-services';
+import {ColumnDefinition, DataTable, BaseButton, DeleteIcon, EditIcon, useDataTable} from '@tager/admin-ui';
+import {useI18n} from "@tager/admin-services";
 
-import { AdminType } from '../../typings/model';
-import { deleteAdmin, getAdminList } from '../../services/requests';
-import { getAdminFormUrl } from '../../utils/paths';
+import {AdminType} from '../../typings/model';
+import {deleteAdmin, getAdminList} from '../../services/requests';
+import {getAdminFormUrl} from '../../utils/paths';
+
+import {Page} from "@tager/admin-layout";
 
 export default defineComponent({
   name: 'AdminList',
-  setup(props, context: SetupContext) {
-    const { t } = useTranslation(context);
+  components: {
+    Page, DataTable, BaseButton, DeleteIcon, EditIcon
+  },
+  setup() {
+    const {t} = useI18n();
 
-    const [
-      fetchAdminList,
-      { data: adminList, loading: isAdminLoading, error },
-    ] = useResource<Array<AdminType>>({
-      fetchResource: getAdminList,
+    const {
+      fetchEntityList: fetchAdminList,
+      isLoading: isAdminListLoading,
+      rowData: adminList,
+      errorMessage: error,
+    } = useDataTable<AdminType>({
+      fetchEntityList: () => getAdminList(),
       initialValue: [],
-      context,
-      resourceName: 'Admin list',
+      resourceName: "Admin list",
+      pageSize: 100,
     });
 
     onMounted(() => {
@@ -83,11 +89,10 @@ export default defineComponent({
       deleteResource: deleteAdmin,
       resourceName: 'Admin',
       onSuccess: fetchAdminList,
-      context,
     });
 
     function isBusy(adminId: number): boolean {
-      return isDeleting(adminId) || isAdminLoading.value;
+      return isDeleting(adminId) || isAdminListLoading.value;
     }
 
     const columnDefs: Array<ColumnDefinition<AdminType>> = [
@@ -110,8 +115,8 @@ export default defineComponent({
         id: 4,
         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'},
       },
     ];
 
@@ -119,7 +124,7 @@ export default defineComponent({
       t,
       columnDefs,
       rowData: adminList,
-      isRowDataLoading: isAdminLoading,
+      isRowDataLoading: isAdminListLoading,
       errorMessage: error,
       isBusy,
       handleAdminDelete,