@tager/admin-administrators 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tager/admin-administrators",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
@@ -33,9 +33,9 @@
     "@babel/eslint-parser": "^7.17.0",
     "@rushstack/eslint-patch": "^1.1.2",
     "@tager/admin-dynamic-field": "^1.0.0",
-    "@tager/admin-layout": "^1.0.0",
-    "@tager/admin-services": "^1.0.0",
-    "@tager/admin-ui": "^1.0.1",
+    "@tager/admin-layout": "^1.0.6",
+    "@tager/admin-services": "^1.1.3",
+    "@tager/admin-ui": "^1.0.7",
     "@types/lodash.isequal": "^4.5.6",
     "@types/lodash.pick": "^4.4.7",
     "@types/node": "16.x",
@@ -54,6 +54,7 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.7.1",
+    "pinia": "^2.0.18",
     "sass": "^1.51.0",
     "sass-loader": "^12.6.0",
     "typescript": "^4.6.3",

package/src/dev/main.ts

@@ -1,22 +1,24 @@
-import { createApp } from "vue";
+import { createApp } from 'vue';
 
-import { configStore, i18n, i18nPlugin } from "@tager/admin-services";
-import { createRouter } from "@tager/admin-layout";
-import "@tager/admin-ui/css";
-import "@tager/admin-layout/css";
-import "@tager/admin-dynamic-field/css";
+import { configStore, i18n, i18nPlugin } from '@tager/admin-services';
+import { createRouter } from '@tager/admin-layout';
+import '@tager/admin-ui/css';
+import '@tager/admin-layout/css';
+import '@tager/admin-dynamic-field/css';
 
-import { applyTranslations } from "../locales/apply";
+import { applyTranslations } from '../locales/apply';
 import {
-    ADMIN_FORM_ROUTE,
-    ADMIN_LIST_ROUTE,
-    ROLE_FORM_ROUTE,
-    ROLE_LIST_ROUTE
-} from "../constants/routes";
+  ADMIN_FORM_ROUTE,
+  ADMIN_LIST_ROUTE,
+  ROLE_FORM_ROUTE,
+  ROLE_LIST_ROUTE,
+} from '../constants/routes';
 
-import { OZITAG_CONFIG } from "./config";
-import App from "./App.vue";
-import { populateEnvironment } from "./env";
+import { OZITAG_CONFIG } from './config';
+import App from './App.vue';
+import { populateEnvironment } from './env';
+
+import { createPinia } from 'pinia';
 
 populateEnvironment();
 
@@ -25,22 +27,24 @@ configStore.setConfig(OZITAG_CONFIG);
 const router = createRouter(
   {
     routes: [
-        ADMIN_LIST_ROUTE,
-        ADMIN_FORM_ROUTE,
-        ROLE_LIST_ROUTE,
-        ROLE_FORM_ROUTE,
+      ADMIN_LIST_ROUTE,
+      ADMIN_FORM_ROUTE,
+      ROLE_LIST_ROUTE,
+      ROLE_FORM_ROUTE,
     ],
   },
   { useTitleSync: false }
 );
 
 const app = createApp(App);
+const pinia = createPinia();
 
 app.use(router);
 app.use(i18nPlugin);
+app.use(pinia);
 
 applyTranslations();
 
-i18n.init({ debug: true, lng: "ru" }).then(() => {
-  app.mount("#app");
+i18n.init({ debug: true, lng: 'ru' }).then(() => {
+  app.mount('#app');
 });

package/src/locales/en.ts

@@ -37,4 +37,9 @@ export const EN = {
   roleList: 'Role List',
   roleForm: 'Role form',
   andMorePrivilege: 'and more {{count}} privilege...',
+
+  tabs: {
+    general: 'General',
+    params: 'Template',
+  },
 };

package/src/locales/ru.ts

@@ -1,42 +1,46 @@
-import {EN} from './en';
+import { EN } from './en';
 
 export const RU: typeof EN = {
-    home: 'Главная',
-    administrators: 'Администраторы',
-    role: 'Роль',
-    roles: 'Роли',
-    admin: 'Админ',
-    admins: 'Админы',
-    createRole: 'Создать роль',
-    createAdmin: 'Создать админа',
-    createAdministrator: 'Создать администратора',
-    edit: 'Редактировать',
-    delete: 'Удалить',
-    email: 'Электронная почта',
-    actions: 'Действия',
-    updateRole: 'Обновить роль',
-    updateAdmin: 'Обновить администратора',
-    password: 'Пароль',
-    newPassword: 'Новый пароль',
-    name: 'Имя',
-    success: 'Успех',
-    adminSuccessfullyCreated: 'Админ успешно создан',
-    adminSuccessfullyUpdated: 'Админ успешно обновлен',
-    error: 'Ошибка',
-    adminCreationError: 'Ошибка создания администратора',
-    adminUpdateError: 'Ошибка обновления администратора',
-    listOfRoles: 'Список ролей',
-    addRole: 'Добавить роль',
-    noPrivileges: 'Без привилегий',
-    privileges: 'Привилегии',
-    all: 'Все',
-    roleSuccessfullyCreated: 'Роль успешно создана',
-    roleSuccessfullyUpdate: 'Роль успешно обновлена',
-    roleCreationError: 'Ошибка создания роли',
-    roleUpdateError: 'Ошибка обновления роли',
-    adminList: 'Список администраторов',
-    adminForm: 'Форма администратора',
-    roleList: 'Список ролей',
-    roleForm: 'Форма роли',
-    andMorePrivilege: 'и еще {{count}} привилегий...',
+  home: 'Главная',
+  administrators: 'Администраторы',
+  role: 'Роль',
+  roles: 'Роли',
+  admin: 'Админ',
+  admins: 'Админы',
+  createRole: 'Создать роль',
+  createAdmin: 'Создать админа',
+  createAdministrator: 'Создать администратора',
+  edit: 'Редактировать',
+  delete: 'Удалить',
+  email: 'Электронная почта',
+  actions: 'Действия',
+  updateRole: 'Обновить роль',
+  updateAdmin: 'Обновить администратора',
+  password: 'Пароль',
+  newPassword: 'Новый пароль',
+  name: 'Имя',
+  success: 'Успех',
+  adminSuccessfullyCreated: 'Админ успешно создан',
+  adminSuccessfullyUpdated: 'Админ успешно обновлен',
+  error: 'Ошибка',
+  adminCreationError: 'Ошибка создания администратора',
+  adminUpdateError: 'Ошибка обновления администратора',
+  listOfRoles: 'Список ролей',
+  addRole: 'Добавить роль',
+  noPrivileges: 'Без привилегий',
+  privileges: 'Привилегии',
+  all: 'Все',
+  roleSuccessfullyCreated: 'Роль успешно создана',
+  roleSuccessfullyUpdate: 'Роль успешно обновлена',
+  roleCreationError: 'Ошибка создания роли',
+  roleUpdateError: 'Ошибка обновления роли',
+  adminList: 'Список администраторов',
+  adminForm: 'Форма администратора',
+  roleList: 'Список ролей',
+  roleForm: 'Форма роли',
+  andMorePrivilege: 'и еще {{count}} привилегий...',
+  tabs: {
+    general: 'Основное',
+    params: 'Параметры',
+  },
 };

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,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>
@@ -53,26 +65,45 @@ import {
   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,
+  convertRequestErrorToMap,
+  navigateBack,
+  notEmpty,
   Nullable,
-  useResource, useToast,
+  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 {
+  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';
-import {getAdminFormUrl, getAdminListUrl, getRoleFormUrl, getRoleListUrl} from '../../utils/paths';
+import { getAdminFormUrl, getAdminListUrl } from '../../utils/paths';
 
 import {
   convertFormValuesToAdminCreationPayload,
@@ -81,13 +112,19 @@ import {
   convertRoleListToOptions,
   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,
     };
   },
 });