@tager/admin-administrators 0.2.6 → 1.0.1

package/src/locales/ru.ts

@@ -1,6 +1,6 @@
-import EN from './en';
+import { EN } from './en';
 
-const RU: typeof EN = {
+export const RU: typeof EN = {
   home: 'Главная',
   administrators: 'Администраторы',
   role: 'Роль',
@@ -39,6 +39,8 @@ const RU: typeof EN = {
   roleList: 'Список ролей',
   roleForm: 'Форма роли',
   andMorePrivilege: 'и еще {{count}} привилегий...',
+  tabs: {
+    general: 'Основное',
+    params: 'Параметры',
+  },
 };
-
-export default RU;

package/src/main.ts

@@ -1,11 +1,7 @@
-import { i18n } from '@tager/admin-services';
+import {applyTranslations} from "./locales/apply";
 
-import EN from './locales/en';
-import RU from './locales/ru';
+applyTranslations();
 
-i18n.addTranslations('en', 'administrators', EN);
-i18n.addTranslations('ru', 'administrators', RU);
-
-export * from './constants/routes';
-export * from './services/requests';
-export * from './utils/paths';
+export * from "./constants/routes";
+export * from "./utils/paths";
+export * from "./services/requests";

package/src/services/requests.ts

@@ -1,9 +1,20 @@
 import { request, ResponseBody } from '@tager/admin-services';
+import {
+  FieldConfigUnion,
+  FieldShortType,
+  OutgoingValueUnion,
+} from '@tager/admin-dynamic-field';
 
 import { AdminType, RoleType, ScopeGroupsData } from '../typings/model';
 
 type SuccessData = { success: boolean };
 
+/** Fields */
+
+export function getFieldList(): Promise<ResponseBody<Array<FieldConfigUnion>>> {
+  return request.get({ path: '/admin/admins/fields' });
+}
+
 /** Roles */
 
 export function getRoleList(): Promise<ResponseBody<Array<RoleType>>> {
@@ -63,6 +74,8 @@ export type AdminUpdatePayload = {
   email: string;
   roles: Array<number>;
   password: string;
+
+  params: Array<FieldShortType<OutgoingValueUnion>>;
 };
 
 export type AdminCreationPayload = AdminUpdatePayload;

package/src/typings/model.ts

@@ -1,3 +1,5 @@
+import { FieldShortType, IncomingValueUnion } from '@tager/admin-dynamic-field';
+
 export type ScopeType = {
   readonly value: string;
   readonly label: string;
@@ -25,4 +27,5 @@ export type AdminType = {
   readonly roles: Array<RoleType>;
   readonly isSelf: boolean;
   readonly isSuperAdmin: boolean;
+  readonly params: Array<FieldShortType<IncomingValueUnion>>;
 };

package/src/views/AdminForm/AdminForm.helpers.ts

@@ -1,5 +1,6 @@
 import { Nullable, createId } from '@tager/admin-services';
 import { OptionType } from '@tager/admin-ui';
+import { FieldUnion, universalFieldUtils } from '@tager/admin-dynamic-field';
 
 import { AdminType, RoleType } from '../../typings/model';
 import {
@@ -39,21 +40,27 @@ export function convertAdminToFormValues(
 }
 
 export function convertFormValuesToAdminUpdatePayload(
-  values: FormValues
+  values: FormValues,
+  paramsValues: Array<FieldUnion> = []
 ): AdminUpdatePayload {
   return {
     name: values.name,
     email: values.email,
     roles: values.roles.map((role) => role.value),
     password: values.password,
+    params: paramsValues.map((field) => ({
+      value: universalFieldUtils.getOutgoingValue(field),
+      name: field.config.name,
+    })),
   };
 }
 
 export function convertFormValuesToAdminCreationPayload(
-  values: FormValues
+  values: FormValues,
+  paramsValues: Array<FieldUnion> = []
 ): AdminCreationPayload {
   return {
-    ...convertFormValuesToAdminUpdatePayload(values),
+    ...convertFormValuesToAdminUpdatePayload(values, paramsValues),
   };
 }
 

package/src/views/AdminForm/AdminForm.vue

@@ -1,49 +1,59 @@
 <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"
+      <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="t('administrators:name')"
+          :label="$i18n.t('administrators:name')"
         />
-        <form-field
-          v-model="values.email"
+        <FormField
+          v-model:value="values.email"
           name="email"
           :error="errors.email"
-          :label="t('administrators:email')"
+          :label="$i18n.t('administrators:email')"
         />
-        <form-field-multi-select
-          v-model="values.roles"
+        <FormFieldMultiSelect
+          v-model:selected-options="values.roles"
           name="roles"
-          :label="t('administrators:roles')"
+          :label="$i18n.t('administrators:roles')"
           :options="roleOptionList"
           :error="errors.roles"
         />
-        <form-field
-          v-model="values.password"
+        <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>
+
+      <template v-if="selectedTabId === 'params'">
+        <DynamicField
+          v-for="field of templateValues"
+          :key="field.config.name"
+          :field="field"
+        />
+      </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"
+        @submit="submitForm"
       />
     </template>
-  </page>
+  </Page>
 </template>
 
 <script lang="ts">
@@ -54,19 +64,42 @@ import {
   ref,
   SetupContext,
   watch,
-} from '@vue/composition-api';
+} from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
+import { Page } from '@tager/admin-layout';
 import {
   convertRequestErrorToMap,
+  navigateBack,
+  notEmpty,
   Nullable,
   useResource,
+  useToast,
 } from '@tager/admin-services';
-import { OptionType, FormFooter, TagerFormSubmitEvent, useTranslation } from '@tager/admin-ui';
+import {
+  OptionType,
+  FormFooter,
+  TagerFormSubmitEvent,
+  FormField,
+  FormFieldMultiSelect,
+  TabType,
+  TabList,
+} from '@tager/admin-ui';
+import { useI18n } from '@tager/admin-services';
+import {
+  DynamicField,
+  FieldConfigUnion,
+  FieldShortType,
+  FieldUnion,
+  IncomingValueUnion,
+  universalFieldUtils,
+} from '@tager/admin-dynamic-field';
 
 import { AdminType, RoleType } from '../../typings/model';
 import {
   createAdmin,
   getAdmin,
+  getFieldList,
   getRoleList,
   updateAdmin,
 } from '../../services/requests';
@@ -82,39 +115,54 @@ import {
 
 export default defineComponent({
   name: 'AdminForm',
-  components: { FormFooter },
-  setup(props, context: SetupContext) {
-    const { t } = useTranslation(context);
+  components: {
+    DynamicField,
+    TabList,
+    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 isCreation = computed(() => adminId.value === 'create');
 
     const [fetchAdmin, { data: admin, loading: isAdminLoading }] = useResource<
       Nullable<AdminType>
     >({
       fetchResource: () => getAdmin(adminId.value),
       initialValue: null,
-      context,
       resourceName: 'Admin',
     });
 
     /** Fetch role list */
 
-    const [
-      fetchRoleList,
-      { data: roleList, loading: isRoleListLoading },
-    ] = useResource<Array<RoleType>>({
-      fetchResource: getRoleList,
-      initialValue: [],
-      context,
-      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();
     });
 
@@ -143,10 +191,14 @@ 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)
@@ -157,18 +209,18 @@ export default defineComponent({
           errors.value = {};
 
           if (event.type === 'create') {
-            context.root.$router.push(getAdminFormUrl({ adminId: data.id }));
+            router.push(getAdminFormUrl({ adminId: data.id }));
           }
 
           if (event.type === 'create_exit' || event.type === 'save_exit') {
-            context.root.$router.push(getAdminListUrl());
+            navigateBack(router, getAdminListUrl());
           }
 
           if (event.type === 'create_create-another') {
             values.value = convertAdminToFormValues(null, roleOptionList.value);
           }
 
-          context.root.$toast({
+          toast.show({
             variant: 'success',
             title: t('administrators:success'),
             body: isCreation.value
@@ -179,7 +231,7 @@ export default defineComponent({
         .catch((error) => {
           console.error(error);
           errors.value = convertRequestErrorToMap(error);
-          context.root.$toast({
+          toast.show({
             variant: 'danger',
             title: t('administrators:error'),
             body: isCreation.value
@@ -199,9 +251,47 @@ export default defineComponent({
     });
 
     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(),
@@ -214,6 +304,9 @@ export default defineComponent({
       pageTitle,
       isCreation,
       roleOptionList,
+      tabList,
+      selectedTabId,
+      templateValues,
     };
   },
 });

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,