@tager/admin-administrators 1.0.0 → 1.0.1

package/dist/dev/main.d.ts

@@ -1,3 +1,3 @@
-import "@tager/admin-ui/css";
-import "@tager/admin-layout/css";
-import "@tager/admin-dynamic-field/css";
+import '@tager/admin-ui/css';
+import '@tager/admin-layout/css';
+import '@tager/admin-dynamic-field/css';

package/dist/index.mjs

@@ -1,6 +1,7 @@
-import { i18n, request, useI18n, useResourceDelete, createId, useToast, useResource, navigateBack, convertRequestErrorToMap } from "@tager/admin-services";
+import { i18n, request, useI18n, useResourceDelete, createId, useToast, useResource, notEmpty, navigateBack, convertRequestErrorToMap } from "@tager/admin-services";
 import { defineComponent, onMounted, resolveComponent, openBlock, createBlock, withCtx, createVNode, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString, createCommentVNode, computed, ref, watch, withModifiers } from "vue";
-import { DataTable, BaseButton, DeleteIcon, EditIcon, useDataTable, FormFooter, FormField, FormFieldMultiSelect } from "@tager/admin-ui";
+import { DataTable, BaseButton, DeleteIcon, EditIcon, useDataTable, TabList, FormFooter, FormField, FormFieldMultiSelect } from "@tager/admin-ui";
+import { universalFieldUtils, DynamicField } from "@tager/admin-dynamic-field";
 import { compile } from "path-to-regexp";
 import { Page } from "@tager/admin-layout";
 import { useRoute, useRouter } from "vue-router";
@@ -42,7 +43,11 @@ const EN = {
   adminForm: "Admin form",
   roleList: "Role List",
   roleForm: "Role form",
-  andMorePrivilege: "and more {{count}} privilege..."
+  andMorePrivilege: "and more {{count}} privilege...",
+  tabs: {
+    general: "General",
+    params: "Template"
+  }
 };
 const RU = {
   home: "\u0413\u043B\u0430\u0432\u043D\u0430\u044F",
@@ -82,12 +87,19 @@ const RU = {
   adminForm: "\u0424\u043E\u0440\u043C\u0430 \u0430\u0434\u043C\u0438\u043D\u0438\u0441\u0442\u0440\u0430\u0442\u043E\u0440\u0430",
   roleList: "\u0421\u043F\u0438\u0441\u043E\u043A \u0440\u043E\u043B\u0435\u0439",
   roleForm: "\u0424\u043E\u0440\u043C\u0430 \u0440\u043E\u043B\u0438",
-  andMorePrivilege: "\u0438 \u0435\u0449\u0435 {{count}} \u043F\u0440\u0438\u0432\u0438\u043B\u0435\u0433\u0438\u0439..."
+  andMorePrivilege: "\u0438 \u0435\u0449\u0435 {{count}} \u043F\u0440\u0438\u0432\u0438\u043B\u0435\u0433\u0438\u0439...",
+  tabs: {
+    general: "\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0435",
+    params: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B"
+  }
 };
 function applyTranslations() {
   i18n.addTranslations("en", "administrators", EN);
   i18n.addTranslations("ru", "administrators", RU);
 }
+function getFieldList() {
+  return request.get({ path: "/admin/admins/fields" });
+}
 function getRoleList() {
   return request.get({ path: "/admin/rbac/roles" });
 }
@@ -299,17 +311,21 @@ function convertAdminToFormValues(admin, roleOptionList) {
     roles: currentRoleOptionList
   };
 }
-function convertFormValuesToAdminUpdatePayload(values) {
+function convertFormValuesToAdminUpdatePayload(values, paramsValues = []) {
   return {
     name: values.name,
     email: values.email,
     roles: values.roles.map((role) => role.value),
-    password: values.password
+    password: values.password,
+    params: paramsValues.map((field) => ({
+      value: universalFieldUtils.getOutgoingValue(field),
+      name: field.config.name
+    }))
   };
 }
-function convertFormValuesToAdminCreationPayload(values) {
+function convertFormValuesToAdminCreationPayload(values, paramsValues = []) {
   return {
-    ...convertFormValuesToAdminUpdatePayload(values)
+    ...convertFormValuesToAdminUpdatePayload(values, paramsValues)
   };
 }
 function convertRoleListToOptions(roleList) {
@@ -320,7 +336,14 @@ function convertRoleListToOptions(roleList) {
 }
 const _sfc_main$2 = defineComponent({
   name: "AdminForm",
-  components: { Page, FormFooter, FormField, FormFieldMultiSelect },
+  components: {
+    DynamicField,
+    TabList,
+    Page,
+    FormFooter,
+    FormField,
+    FormFieldMultiSelect
+  },
   setup() {
     const { t } = useI18n();
     const route = useRoute();
@@ -333,16 +356,20 @@ const _sfc_main$2 = defineComponent({
       initialValue: null,
       resourceName: "Admin"
     });
-    const [
-      fetchRoleList,
-      { data: roleList, loading: isRoleListLoading }
-    ] = useResource({
+    const [fetchRoleList, { data: roleList, loading: isRoleListLoading }] = useResource({
       fetchResource: getRoleList,
       initialValue: [],
-      resourceName: "Role list"
+      resourceName: "Role List"
+    });
+    const [fetchFieldList, { data: fieldList, loading: isFieldListLoading }] = useResource({
+      fetchResource: getFieldList,
+      initialValue: [],
+      resourceName: "Field List"
     });
     onMounted(() => {
       fetchRoleList();
+      fetchFieldList();
+      updateTemplateValues();
       if (isCreation.value)
         return;
       fetchAdmin();
@@ -357,8 +384,8 @@ const _sfc_main$2 = defineComponent({
     function submitForm(event) {
       if (admin.value && admin.value.isSelf)
         return;
-      const creationBody = convertFormValuesToAdminCreationPayload(values.value);
-      const updateBody = convertFormValuesToAdminUpdatePayload(values.value);
+      const creationBody = convertFormValuesToAdminCreationPayload(values.value, templateValues.value);
+      const updateBody = convertFormValuesToAdminUpdatePayload(values.value, templateValues.value);
       const requestPromise = isCreation.value ? createAdmin(creationBody) : updateAdmin(adminId.value, updateBody);
       requestPromise.then(({ data }) => {
         errors.value = {};
@@ -391,7 +418,27 @@ const _sfc_main$2 = defineComponent({
     const pageTitle = computed(() => {
       return isCreation.value ? t("administrators:createAdmin") : `${t("administrators:updateAdmin")} "${values.value.name}"`;
     });
-    const isContentLoading = computed(() => isAdminLoading.value || isRoleListLoading.value);
+    const isContentLoading = computed(() => isAdminLoading.value || isRoleListLoading.value || isFieldListLoading.value);
+    const shouldDisplayParamsTab = computed(() => fieldList.value.length > 0);
+    const tabList = computed(() => {
+      return [
+        { id: "general", label: t("administrators:tabs.general") },
+        shouldDisplayParamsTab.value ? { id: "params", label: t("administrators:tabs.params") } : null
+      ].filter(notEmpty);
+    });
+    const selectedTabId = ref(tabList.value[0].id);
+    const templateValues = ref([]);
+    function updateTemplateValues() {
+      var _a, _b;
+      const incomingFieldList = (_b = (_a = admin.value) == null ? void 0 : _a.params) != null ? _b : [];
+      templateValues.value = fieldList.value.map((fieldConfig, index) => {
+        var _a2;
+        return universalFieldUtils.createFormField(fieldConfig, (_a2 = incomingFieldList[index]) == null ? void 0 : _a2.value);
+      });
+    }
+    watch([admin, fieldList], () => {
+      updateTemplateValues();
+    });
     return {
       t,
       backButtonUrl: getAdminListUrl(),
@@ -403,13 +450,18 @@ const _sfc_main$2 = defineComponent({
       admin,
       pageTitle,
       isCreation,
-      roleOptionList
+      roleOptionList,
+      tabList,
+      selectedTabId,
+      templateValues
     };
   }
 });
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_TabList = resolveComponent("TabList");
   const _component_FormField = resolveComponent("FormField");
   const _component_FormFieldMultiSelect = resolveComponent("FormFieldMultiSelect");
+  const _component_DynamicField = resolveComponent("DynamicField");
   const _component_FormFooter = resolveComponent("FormFooter");
   const _component_Page = resolveComponent("Page");
   return openBlock(), createBlock(_component_Page, {
@@ -419,47 +471,60 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     footer: withCtx(() => [
       createVNode(_component_FormFooter, {
         "back-href": _ctx.backButtonUrl,
-        onSubmit: _ctx.submitForm,
         "is-submitting": _ctx.isSubmitting,
         "is-creation": _ctx.isCreation,
-        "can-create-another": _ctx.isCreation
-      }, null, 8, ["back-href", "onSubmit", "is-submitting", "is-creation", "can-create-another"])
+        "can-create-another": _ctx.isCreation,
+        onSubmit: _ctx.submitForm
+      }, null, 8, ["back-href", "is-submitting", "is-creation", "can-create-another", "onSubmit"])
     ]),
     default: withCtx(() => [
       createElementVNode("form", {
         novalidate: "",
-        onSubmit: _cache[4] || (_cache[4] = withModifiers(() => {
+        onSubmit: _cache[5] || (_cache[5] = withModifiers(() => {
         }, ["prevent"]))
       }, [
-        createVNode(_component_FormField, {
-          value: _ctx.values.name,
-          "onUpdate:value": _cache[0] || (_cache[0] = ($event) => _ctx.values.name = $event),
-          name: "name",
-          error: _ctx.errors.name,
-          label: _ctx.$i18n.t("administrators:name")
-        }, null, 8, ["value", "error", "label"]),
-        createVNode(_component_FormField, {
-          value: _ctx.values.email,
-          "onUpdate:value": _cache[1] || (_cache[1] = ($event) => _ctx.values.email = $event),
-          name: "email",
-          error: _ctx.errors.email,
-          label: _ctx.$i18n.t("administrators:email")
-        }, null, 8, ["value", "error", "label"]),
-        createVNode(_component_FormFieldMultiSelect, {
-          "selected-options": _ctx.values.roles,
-          "onUpdate:selected-options": _cache[2] || (_cache[2] = ($event) => _ctx.values.roles = $event),
-          name: "roles",
-          label: _ctx.$i18n.t("administrators:roles"),
-          options: _ctx.roleOptionList,
-          error: _ctx.errors.roles
-        }, null, 8, ["selected-options", "label", "options", "error"]),
-        createVNode(_component_FormField, {
-          value: _ctx.values.password,
-          "onUpdate:value": _cache[3] || (_cache[3] = ($event) => _ctx.values.password = $event),
-          name: "password",
-          error: _ctx.errors.password,
-          label: _ctx.isCreation ? _ctx.$i18n.t("administrators:password") : _ctx.$i18n.t("administrators:newPassword")
-        }, null, 8, ["value", "error", "label"])
+        createVNode(_component_TabList, {
+          "tab-id": _ctx.selectedTabId,
+          "onUpdate:tab-id": _cache[0] || (_cache[0] = ($event) => _ctx.selectedTabId = $event),
+          "tab-list": _ctx.tabList
+        }, null, 8, ["tab-id", "tab-list"]),
+        _ctx.selectedTabId === "general" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createVNode(_component_FormField, {
+            value: _ctx.values.name,
+            "onUpdate:value": _cache[1] || (_cache[1] = ($event) => _ctx.values.name = $event),
+            name: "name",
+            error: _ctx.errors.name,
+            label: _ctx.$i18n.t("administrators:name")
+          }, null, 8, ["value", "error", "label"]),
+          createVNode(_component_FormField, {
+            value: _ctx.values.email,
+            "onUpdate:value": _cache[2] || (_cache[2] = ($event) => _ctx.values.email = $event),
+            name: "email",
+            error: _ctx.errors.email,
+            label: _ctx.$i18n.t("administrators:email")
+          }, null, 8, ["value", "error", "label"]),
+          createVNode(_component_FormFieldMultiSelect, {
+            "selected-options": _ctx.values.roles,
+            "onUpdate:selected-options": _cache[3] || (_cache[3] = ($event) => _ctx.values.roles = $event),
+            name: "roles",
+            label: _ctx.$i18n.t("administrators:roles"),
+            options: _ctx.roleOptionList,
+            error: _ctx.errors.roles
+          }, null, 8, ["selected-options", "label", "options", "error"]),
+          createVNode(_component_FormField, {
+            value: _ctx.values.password,
+            "onUpdate:value": _cache[4] || (_cache[4] = ($event) => _ctx.values.password = $event),
+            name: "password",
+            error: _ctx.errors.password,
+            label: _ctx.isCreation ? _ctx.$i18n.t("administrators:password") : _ctx.$i18n.t("administrators:newPassword")
+          }, null, 8, ["value", "error", "label"])
+        ], 64)) : createCommentVNode("", true),
+        _ctx.selectedTabId === "params" ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.templateValues, (field) => {
+          return openBlock(), createBlock(_component_DynamicField, {
+            key: field.config.name,
+            field
+          }, null, 8, ["field"]);
+        }), 128)) : createCommentVNode("", true)
       ], 32)
     ]),
     _: 1
@@ -872,4 +937,4 @@ const ROLE_FORM_ROUTE = {
   }
 };
 applyTranslations();
-export { ADMIN_FORM_ROUTE, ADMIN_LIST_ROUTE, ROLE_FORM_ROUTE, ROLE_LIST_ROUTE, createAdmin, createRole, deleteAdmin, deleteRole, getAdmin, getAdminFormUrl, getAdminList, getAdminListUrl, getRole, getRoleFormUrl, getRoleList, getRoleListUrl, getScopes, updateAdmin, updateRole };
+export { ADMIN_FORM_ROUTE, ADMIN_LIST_ROUTE, ROLE_FORM_ROUTE, ROLE_LIST_ROUTE, createAdmin, createRole, deleteAdmin, deleteRole, getAdmin, getAdminFormUrl, getAdminList, getAdminListUrl, getFieldList, getRole, getRoleFormUrl, getRoleList, getRoleListUrl, getScopes, updateAdmin, updateRole };

package/dist/locales/en.d.ts

@@ -37,4 +37,8 @@ export declare const EN: {
     roleList: string;
     roleForm: string;
     andMorePrivilege: string;
+    tabs: {
+        general: string;
+        params: string;
+    };
 };

package/dist/services/requests.d.ts

@@ -1,8 +1,11 @@
 import { ResponseBody } from '@tager/admin-services';
+import { FieldConfigUnion, FieldShortType, OutgoingValueUnion } from '@tager/admin-dynamic-field';
 import { AdminType, RoleType, ScopeGroupsData } from '../typings/model';
 declare type SuccessData = {
     success: boolean;
 };
+/** Fields */
+export declare function getFieldList(): Promise<ResponseBody<Array<FieldConfigUnion>>>;
 /** Roles */
 export declare function getRoleList(): Promise<ResponseBody<Array<RoleType>>>;
 export declare function getRole(roleId: string | number): Promise<ResponseBody<RoleType>>;
@@ -24,6 +27,7 @@ export declare type AdminUpdatePayload = {
     email: string;
     roles: Array<number>;
     password: string;
+    params: Array<FieldShortType<OutgoingValueUnion>>;
 };
 export declare type AdminCreationPayload = AdminUpdatePayload;
 export declare function createAdmin(payload: AdminCreationPayload): Promise<ResponseBody<AdminType>>;

package/dist/typings/model.d.ts

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

package/dist/views/AdminForm/AdminForm.helpers.d.ts

@@ -1,5 +1,6 @@
 import { Nullable } from '@tager/admin-services';
 import { OptionType } from '@tager/admin-ui';
+import { FieldUnion } from '@tager/admin-dynamic-field';
 import { AdminType, RoleType } from '../../typings/model';
 import { AdminCreationPayload, AdminUpdatePayload } from '../../services/requests';
 export declare type FormValues = {
@@ -9,6 +10,6 @@ export declare type FormValues = {
     roles: Array<OptionType<number>>;
 };
 export declare function convertAdminToFormValues(admin: Nullable<AdminType>, roleOptionList: Array<OptionType<number>>): FormValues;
-export declare function convertFormValuesToAdminUpdatePayload(values: FormValues): AdminUpdatePayload;
-export declare function convertFormValuesToAdminCreationPayload(values: FormValues): AdminCreationPayload;
+export declare function convertFormValuesToAdminUpdatePayload(values: FormValues, paramsValues?: Array<FieldUnion>): AdminUpdatePayload;
+export declare function convertFormValuesToAdminCreationPayload(values: FormValues, paramsValues?: Array<FieldUnion>): AdminCreationPayload;
 export declare function convertRoleListToOptions(roleList: Array<RoleType>): Array<OptionType<number>>;