@tager/admin-administrators 1.0.0 → 1.0.2

package/src/views/AdminForm/AdminForm.vue

@@ -1,44 +1,56 @@
 <template>
   <Page :title="pageTitle" :is-content-loading="isContentLoading">
     <form novalidate @submit.prevent>
+      <TabList v-model:tab-id="selectedTabId" :tab-list="tabList" />
+
+      <template v-if="selectedTabId === 'general'">
         <FormField
-            v-model:value="values.name"
-            name="name"
-            :error="errors.name"
-            :label="$i18n.t('administrators:name')"
+          v-model:value="values.name"
+          name="name"
+          :error="errors.name"
+          :label="$i18n.t('administrators:name')"
         />
         <FormField
-            v-model:value="values.email"
-            name="email"
-            :error="errors.email"
-            :label="$i18n.t('administrators:email')"
+          v-model:value="values.email"
+          name="email"
+          :error="errors.email"
+          :label="$i18n.t('administrators:email')"
         />
         <FormFieldMultiSelect
-            v-model:selected-options="values.roles"
-            name="roles"
-            :label="$i18n.t('administrators:roles')"
-            :options="roleOptionList"
-            :error="errors.roles"
+          v-model:selected-options="values.roles"
+          name="roles"
+          :label="$i18n.t('administrators:roles')"
+          :options="roleOptionList"
+          :error="errors.roles"
         />
         <FormField
-            v-model:value="values.password"
-            name="password"
-            :error="errors.password"
-            :label="
+          v-model:value="values.password"
+          name="password"
+          :error="errors.password"
+          :label="
             isCreation
               ? $i18n.t('administrators:password')
               : $i18n.t('administrators:newPassword')
           "
         />
+      </template>
+
+      <template v-if="selectedTabId === 'params'">
+        <DynamicField
+          v-for="field of templateValues"
+          :key="field.config.name"
+          :field="field"
+        />
+      </template>
     </form>
 
     <template #footer>
       <FormFooter
-          :back-href="backButtonUrl"
-          @submit="submitForm"
-          :is-submitting="isSubmitting"
-          :is-creation="isCreation"
-          :can-create-another="isCreation"
+        :back-href="backButtonUrl"
+        :is-submitting="isSubmitting"
+        :is-creation="isCreation"
+        :can-create-another="isCreation"
+        @submit="submitForm"
       />
     </template>
   </Page>
@@ -50,44 +62,69 @@ import {
   defineComponent,
   onMounted,
   ref,
-  SetupContext,
+  type SetupContext,
   watch,
 } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
-import {Page} from "@tager/admin-layout";
-
+import { Page } from '@tager/admin-layout';
 import {
-  convertRequestErrorToMap, navigateBack,
-  Nullable,
-  useResource, useToast,
+  convertRequestErrorToMap,
+  navigateBack,
+  notEmpty,
+  type Nullable,
+  useResource,
+  useToast,
 } from '@tager/admin-services';
-import {OptionType, FormFooter, TagerFormSubmitEvent, FormField, FormFieldMultiSelect} from '@tager/admin-ui';
-
-import {useI18n} from "@tager/admin-services";
-
-import {AdminType, RoleType} from '../../typings/model';
+import {
+  type OptionType,
+  FormFooter,
+  type TagerFormSubmitEvent,
+  FormField,
+  FormFieldMultiSelect,
+  type TabType,
+  TabList,
+} from '@tager/admin-ui';
+import { useI18n } from '@tager/admin-services';
+import {
+  DynamicField,
+  type FieldConfigUnion,
+  type FieldShortType,
+  type FieldUnion,
+  type IncomingValueUnion,
+  universalFieldUtils,
+} from '@tager/admin-dynamic-field';
+
+import { type AdminType, type RoleType } from '../../typings/model';
 import {
   createAdmin,
   getAdmin,
+  getFieldList,
   getRoleList,
   updateAdmin,
 } from '../../services/requests';
-import {getAdminFormUrl, getAdminListUrl, getRoleFormUrl, getRoleListUrl} from '../../utils/paths';
+import { getAdminFormUrl, getAdminListUrl } from '../../utils/paths';
 
 import {
   convertFormValuesToAdminCreationPayload,
   convertFormValuesToAdminUpdatePayload,
   convertAdminToFormValues,
   convertRoleListToOptions,
-  FormValues,
+  type FormValues,
 } from './AdminForm.helpers';
-import {useRoute, useRouter} from "vue-router";
 
 export default defineComponent({
   name: 'AdminForm',
-  components: {Page, FormFooter, FormField, FormFieldMultiSelect},
+  components: {
+    DynamicField,
+    TabList,
+    Page,
+    FormFooter,
+    FormField,
+    FormFieldMultiSelect,
+  },
   setup() {
-    const {t} = useI18n();
+    const { t } = useI18n();
 
     const route = useRoute();
     const router = useRouter();
@@ -95,9 +132,11 @@ export default defineComponent({
 
     const adminId = computed(() => route.params.adminId as string | number);
 
-    const isCreation = computed(() => adminId.value === "create");
+    const isCreation = computed(() => adminId.value === 'create');
 
-    const [fetchAdmin, {data: admin, loading: isAdminLoading}] = useResource<Nullable<AdminType>>({
+    const [fetchAdmin, { data: admin, loading: isAdminLoading }] = useResource<
+      Nullable<AdminType>
+    >({
       fetchResource: () => getAdmin(adminId.value),
       initialValue: null,
       resourceName: 'Admin',
@@ -105,29 +144,35 @@ export default defineComponent({
 
     /** Fetch role list */
 
-    const [
-      fetchRoleList,
-      {data: roleList, loading: isRoleListLoading},
-    ] = useResource<Array<RoleType>>({
-      fetchResource: getRoleList,
-      initialValue: [],
-      resourceName: 'Role list',
-    });
+    const [fetchRoleList, { data: roleList, loading: isRoleListLoading }] =
+      useResource<Array<RoleType>>({
+        fetchResource: getRoleList,
+        initialValue: [],
+        resourceName: 'Role List',
+      });
+
+    const [fetchFieldList, { data: fieldList, loading: isFieldListLoading }] =
+      useResource<Array<FieldConfigUnion>>({
+        fetchResource: getFieldList,
+        initialValue: [],
+        resourceName: 'Field List',
+      });
 
     onMounted(() => {
       fetchRoleList();
+      fetchFieldList();
+      updateTemplateValues();
       if (isCreation.value) return;
-
       fetchAdmin();
     });
 
     /** 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>>({});
@@ -135,8 +180,8 @@ export default defineComponent({
 
     watch([admin, roleOptionList], () => {
       values.value = convertAdminToFormValues(
-          admin.value,
-          roleOptionList.value
+        admin.value,
+        roleOptionList.value
       );
     });
 
@@ -146,65 +191,107 @@ export default defineComponent({
       if (admin.value && admin.value.isSelf) return;
 
       const creationBody = convertFormValuesToAdminCreationPayload(
-          values.value
+        values.value,
+        templateValues.value
       );
 
-      const updateBody = convertFormValuesToAdminUpdatePayload(values.value);
+      const updateBody = convertFormValuesToAdminUpdatePayload(
+        values.value,
+        templateValues.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") {
-              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;
+        .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;
+        });
     }
 
     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 ||
+        isFieldListLoading.value
     );
 
+    /** Tabs */
+
+    const shouldDisplayParamsTab = computed<boolean>(
+      () => fieldList.value.length > 0
+    );
+
+    const tabList = computed<Array<TabType>>(() => {
+      return [
+        { id: 'general', label: t('administrators:tabs.general') },
+        shouldDisplayParamsTab.value
+          ? { id: 'params', label: t('administrators:tabs.params') }
+          : null,
+      ].filter(notEmpty);
+    });
+
+    const selectedTabId = ref<string>(tabList.value[0].id);
+
+    const templateValues = ref<Array<FieldUnion>>([]);
+
+    function updateTemplateValues() {
+      const incomingFieldList: Array<FieldShortType<IncomingValueUnion>> =
+        admin.value?.params ?? [];
+
+      templateValues.value = fieldList.value.map((fieldConfig, index) =>
+        universalFieldUtils.createFormField(
+          fieldConfig,
+          incomingFieldList[index]?.value
+        )
+      );
+    }
+
+    watch([admin, fieldList], () => {
+      updateTemplateValues();
+    });
+
     return {
       t,
       backButtonUrl: getAdminListUrl(),
@@ -217,6 +304,9 @@ export default defineComponent({
       pageTitle,
       isCreation,
       roleOptionList,
+      tabList,
+      selectedTabId,
+      templateValues,
     };
   },
 });

package/src/views/AdminList/AdminList.vue

@@ -14,7 +14,7 @@
         :loading="isRowDataLoading"
         :error-message="errorMessage"
     >
-      <template v-slot:cell(roles)="{ row }">
+      <template #cell(roles)="{ row }">
         <ul>
           <li v-for="role of row.roles" :key="role.id">
             {{ role.name }}
@@ -49,14 +49,14 @@
 import {defineComponent, onMounted} from 'vue';
 
 import {useResourceDelete} from '@tager/admin-services';
-import {ColumnDefinition, DataTable, BaseButton, DeleteIcon, EditIcon, useDataTable} from '@tager/admin-ui';
+import {type ColumnDefinition, DataTable, BaseButton, DeleteIcon, EditIcon, useDataTable} from '@tager/admin-ui';
 import {useI18n} from "@tager/admin-services";
+import {Page} from "@tager/admin-layout";
 
-import {AdminType} from '../../typings/model';
+import {type 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',

package/src/views/RoleForm/RoleForm.helpers.ts

@@ -1,10 +1,10 @@
-import { Nullable } from '@tager/admin-services';
-import { OptionType } from '@tager/admin-ui';
+import { type Nullable } from '@tager/admin-services';
+import { type OptionType } from '@tager/admin-ui';
 
-import { RoleType, ScopeGroupsData } from '../../typings/model';
+import { type RoleType, type ScopeGroupsData } from '../../typings/model';
 import {
-  RoleCreationPayload,
-  RoleUpdatePayload,
+  type RoleCreationPayload,
+  type RoleUpdatePayload,
 } from '../../services/requests';
 
 export type FormValues = {

package/src/views/RoleForm/RoleForm.vue

@@ -20,10 +20,10 @@
     <template #footer>
       <FormFooter
           :back-href="backButtonUrl"
-          @submit="submitForm"
           :is-submitting="isSubmitting"
           :is-creation="isCreation"
           :can-create-another="isCreation"
+          @submit="submitForm"
       />
     </template>
   </Page>
@@ -37,21 +37,19 @@ import {
   ref,
   watch,
 } from 'vue';
+import {useRoute, useRouter} from "vue-router";
 
 import {Page} from "@tager/admin-layout";
-
 import {
   convertRequestErrorToMap, navigateBack,
-  Nullable,
+  type Nullable,
   useResource, useToast,
 } from '@tager/admin-services';
-
 import {useI18n} from "@tager/admin-services";
-
 import {
-  OptionType,
+  type OptionType,
   FormFooter,
-  TagerFormSubmitEvent,
+  type TagerFormSubmitEvent,
   FormField, FormFieldMultiSelect
 } from '@tager/admin-ui';
 
@@ -61,7 +59,7 @@ import {
   getScopes,
   updateRole,
 } from '../../services/requests';
-import {RoleType, ScopeGroupsData} from '../../typings/model';
+import {type RoleType, type ScopeGroupsData} from '../../typings/model';
 import {getRoleFormUrl, getRoleListUrl} from '../../utils/paths';
 
 import {
@@ -69,9 +67,8 @@ import {
   convertFormValuesToRoleUpdatePayload,
   convertRoleToFormValues,
   convertScopeDataToOptions,
-  FormValues,
+  type FormValues,
 } from './RoleForm.helpers';
-import {useRoute, useRouter} from "vue-router";
 
 export default defineComponent({
   name: 'RoleForm',

package/src/views/RoleList/RoleList.vue

@@ -79,7 +79,6 @@ import {defineComponent, onMounted} from "vue";
 
 import {useResourceDelete, useI18n} from '@tager/admin-services';
 import {Page} from "@tager/admin-layout";
-
 import {
   BaseButton,
   type ColumnDefinition,
@@ -89,7 +88,7 @@ import {
   useDataTable,
 } from "@tager/admin-ui";
 
-import {RoleType, ScopeType} from '../../typings/model';
+import {type RoleType, type ScopeType} from '../../typings/model';
 import {deleteRole, getRoleList} from '../../services/requests';
 import {getRoleFormUrl} from '../../utils/paths';
 
@@ -136,7 +135,7 @@ export default defineComponent({
 
     function getScopeGroupList(
         scopes: Array<ScopeType>
-    ): Array<{ module: string; scopes: ScopeType }> {
+    ): Array<{ module: string; scopes: Array<ScopeType> }> {
       const map = new Map();
       scopes.forEach((scope) => {
         const key = scope.module;