@tager/admin-blog 0.3.24 → 0.3.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tager/admin-blog",
-  "version": "0.3.24",
+  "version": "0.3.25",
   "license": "MIT",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
@@ -21,15 +21,16 @@
   "dependencies": {
     "lodash.isequal": "^4.5.0",
     "lodash.pick": "^4.4.0",
-    "path-to-regexp": "^6.1.0"
+    "path-to-regexp": "^6.1.0",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^15.0.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@tager/admin-dynamic-field": "^0.1.18",
     "@tager/admin-layout": "^0.5.3",
-    "@tager/admin-services": "^0.2.25",
-    "@tager/admin-ui": "^0.8.84",
+    "@tager/admin-services": "^0.2.26",
+    "@tager/admin-ui": "^0.8.85",
     "@types/lodash.isequal": "^4.5.5",
     "@types/lodash.pick": "^4.4.6",
     "@types/node": "12.x",
@@ -39,6 +40,7 @@
     "@vue/cli-plugin-eslint": "~4.5.6",
     "@vue/cli-plugin-router": "~4.5.6",
     "@vue/cli-plugin-typescript": "~4.5.6",
+    "@vue/cli-plugin-vuex": "^4.5.14",
     "@vue/cli-service": "~4.5.6",
     "@vue/composition-api": "^1.0.0-beta.14",
     "@vue/eslint-config-prettier": "^6.0.0",
@@ -54,7 +56,7 @@
     "rollup-plugin-typescript2": "^0.27.2",
     "rollup-plugin-vue": "^5.1.9",
     "sass-loader": "^10.0.2",
-    "typescript": "~3.9.6",
+    "typescript": "~3.9.10",
     "vue": "2.6.x",
     "vue-router": "^3.5.1",
     "vue-template-compiler": "^2.6.11"

package/src/constants/scopes.ts

@@ -0,0 +1,11 @@
+export const Scope = {
+  All: '*',
+  OrdersCreate: 'orders.create',
+  OrdersView: 'orders.view',
+  OrdersDelete: 'orders.delete',
+  RbacViewRoles: 'rbac.view-roles',
+  RbacEditRoles: 'rbac.edit-roles',
+  AdministratorsView: 'administrators.view',
+  AdministratorsEdit: 'administrators.edit',
+  AdministratorsDelete: 'administrators.delete',
+} as const;

package/src/dev.ts

@@ -1,67 +1,36 @@
 import Vue, { CreateElement } from 'vue';
 import VueCompositionApi, { createApp } from '@vue/composition-api';
+import Vuex from 'vuex';
 
 import { configStore, i18n } from '@tager/admin-services';
 import { AdminUiPlugin } from '@tager/admin-ui';
-import {
-  AdminLayoutPlugin,
-  createRouter,
-  CustomRoute,
-  CustomRouteConfig,
-} from '@tager/admin-layout';
+import { AdminLayoutPlugin } from '@tager/admin-layout';
 
 import '@tager/admin-ui/dist/admin-ui.css';
 
-import {
-  BLOG_CATEGORY_FORM_ROUTE,
-  BLOG_CATEGORY_LIST_ROUTE,
-  BLOG_POST_FORM_ROUTE,
-  BLOG_POST_LIST_ROUTE,
-} from './constants/routes';
-import config from './config/config.json';
-import App from './views/App.vue';
-import Home from './views/Home.vue';
-import EN from './locales/en';
-import RU from './locales/ru';
+import config from '@/config/config.json';
+import App from '@/views/App.vue';
+import EN from '@/locales/en';
+import RU from '@/locales/ru';
+import router from '@/router';
+import store from '@/store';
 
 configStore.setConfig(config);
 
-export const HOME_ROUTE: CustomRouteConfig = {
-  path: '/',
-  component: Home,
-  name: 'Home',
-  meta: {
-    getBreadcrumbs: (route: CustomRoute) => [
-      { url: '/', text: route.name ?? '' },
-    ],
-  },
-};
-
-const router = createRouter(
-  {
-    routes: [
-      HOME_ROUTE,
-      BLOG_POST_LIST_ROUTE,
-      BLOG_POST_FORM_ROUTE,
-      BLOG_CATEGORY_LIST_ROUTE,
-      BLOG_CATEGORY_FORM_ROUTE,
-    ],
-  },
-  { useTitleSync: false }
-);
+Vue.use(VueCompositionApi);
 
 i18n.addTranslations('en', 'blog', EN);
 i18n.addTranslations('ru', 'blog', RU);
 
 i18n.init({ debug: false }).then(() => {
-  Vue.use(VueCompositionApi);
-
   const app = createApp({
     router,
     render: (h: CreateElement) => h(App),
+    store,
   });
 
   app.use(i18n.getPlugin());
+  app.use(Vuex);
   app.use(AdminUiPlugin);
   app.use(AdminLayoutPlugin);
 

package/src/hooks/index.ts

@@ -1,3 +1,6 @@
 export { useModuleConfig } from './useModuleConfig';
 export { useBlogPostList } from './useBlogPostList';
 export { useBlogCategoryList } from './useBlogCategoryList';
+export { useStore } from './useStore';
+export { useUserProfile } from './useUserProfile';
+export { useUserPermission } from './useUserPermission';

package/src/hooks/useModuleConfig.ts

@@ -2,8 +2,8 @@ import { onMounted, SetupContext } from '@vue/composition-api';
 
 import { Nullable, ResourceRef, useResource } from '@tager/admin-services';
 
-import { ModuleConfig } from '../typings/model';
-import { getBlogModuleConfig } from '../services/requests';
+import { ModuleConfig } from '@/typings/model';
+import { getBlogModuleConfig } from '@/services/requests';
 
 export function useModuleConfig(params: {
   context: SetupContext;

package/src/hooks/useStore.ts

@@ -0,0 +1,8 @@
+import { Store } from 'vuex';
+import { SetupContext } from '@vue/composition-api';
+
+import { RootState } from '@/store';
+
+export function useStore(context: SetupContext): Store<RootState> {
+  return context.root.$store;
+}

package/src/hooks/useUserPermission.ts

@@ -0,0 +1,16 @@
+import { computed, ComputedRef, SetupContext } from '@vue/composition-api';
+
+import { ScopeType } from '@/typings/model';
+import { useStore } from '@/hooks/useStore';
+import { userNamespace } from '@/utils/common';
+
+export function useUserPermission(
+  context: SetupContext,
+  scope: ScopeType
+): ComputedRef<boolean> {
+  const store = useStore(context);
+
+  return computed<boolean>(() => {
+    return store.getters[userNamespace('userHasPermission')](scope);
+  });
+}

package/src/hooks/useUserProfile.ts

@@ -0,0 +1,13 @@
+import { computed, ComputedRef, SetupContext } from '@vue/composition-api';
+
+import { UserModel } from '@/typings/model';
+import { useStore } from '@/hooks/useStore';
+import { userNamespace } from '@/utils/common';
+
+export function useUserProfile(context: SetupContext): ComputedRef<UserModel> {
+  const store = useStore(context);
+
+  return computed<UserModel>(() => {
+    return store.getters[userNamespace('userProfile')];
+  });
+}

package/src/locales/en.ts

@@ -62,6 +62,16 @@ const EN = {
   blogCategoryWasSuccessfullyUpdated: 'Blog category was successfully updated',
   blogCategoryCreationWasFailed: 'Blog category creation was failed',
   blogCategoryUpdateWasFailed: 'Blog category update was failed',
+
+  clone: 'Clone',
+  cloneConfirm: 'Are you sure you want to clone the page?',
+  cloneSuccess: 'Page have copied successfully',
+  cloneFailure: 'Page copy failure',
+
+  tabs: {
+    common: 'Common',
+    seo: 'SEO',
+  },
 };
 
 export default EN;

package/src/locales/ru.ts

@@ -64,6 +64,16 @@ const RU: typeof EN = {
   blogCategoryWasSuccessfullyUpdated: 'Категория блога успешно обновлена',
   blogCategoryCreationWasFailed: 'Не удалось создать категорию блога',
   blogCategoryUpdateWasFailed: 'Не удалось обновить категорию блога',
+
+  clone: 'Клонировать',
+  cloneConfirm: 'Вы уверены, что хотите создать копию страницы?',
+  cloneSuccess: 'Копия страницы успешно создана',
+  cloneFailure: 'Ошибка копирования страницы',
+
+  tabs: {
+    common: 'Общие',
+    seo: 'SEO',
+  },
 };
 
 export default RU;

package/src/router/index.ts

@@ -0,0 +1,39 @@
+import {
+  createRouter,
+  CustomRoute,
+  CustomRouteConfig,
+} from '@tager/admin-layout';
+
+import {
+  BLOG_CATEGORY_FORM_ROUTE,
+  BLOG_CATEGORY_LIST_ROUTE,
+  BLOG_POST_FORM_ROUTE,
+  BLOG_POST_LIST_ROUTE,
+} from '@/constants/routes';
+import Home from '@/views/Home.vue';
+
+export const HOME_ROUTE: CustomRouteConfig = {
+  path: '/',
+  component: Home,
+  name: 'Home',
+  meta: {
+    getBreadcrumbs: (route: CustomRoute) => [
+      { url: '/', text: route.name ?? '' },
+    ],
+  },
+};
+
+const router = createRouter(
+  {
+    routes: [
+      HOME_ROUTE,
+      BLOG_POST_LIST_ROUTE,
+      BLOG_POST_FORM_ROUTE,
+      BLOG_CATEGORY_LIST_ROUTE,
+      BLOG_CATEGORY_FORM_ROUTE,
+    ],
+  },
+  { useTitleSync: false }
+);
+
+export default router;

package/src/services/requests.ts

@@ -1,7 +1,17 @@
 import { request, Nullable, ResponseBody } from '@tager/admin-services';
 import { FieldShortType, OutgoingValueUnion } from '@tager/admin-dynamic-field';
 
-import { Category, ModuleConfig, PostShort, PostFull } from '../typings/model';
+import {
+  Category,
+  ModuleConfig,
+  PostShort,
+  PostFull,
+  UserModel,
+} from '@/typings/model';
+
+export function getUserProfile(): Promise<ResponseBody<UserModel>> {
+  return request.get({ path: '/admin/self' });
+}
 
 /** Blog Posts */
 
@@ -23,6 +33,12 @@ export function getBlogPost(
   return request.get({ path: `/admin/blog/posts/${postId}` });
 }
 
+export function clonePost(
+  postId: number | string
+): Promise<ResponseBody<PostFull>> {
+  return request.post({ path: `/admin/blog/posts/${postId}/clone` });
+}
+
 export interface PostCreationPayload {
   title: string;
   urlAlias: string;

package/src/store/index.ts

@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+import userModule, {
+  USER_MODULE_NAMESPACE,
+  UserModuleStateModel,
+} from '@/store/user';
+
+Vue.use(Vuex);
+
+export interface RootState {
+  user: UserModuleStateModel;
+}
+
+const store = new Vuex.Store({
+  modules: {
+    [USER_MODULE_NAMESPACE]: userModule,
+  },
+});
+
+export default store;

package/src/store/user.ts

@@ -0,0 +1,109 @@
+import { GetterTree, Module } from 'vuex';
+
+import { FETCH_STATUSES, FetchStatus } from '@tager/admin-services';
+
+import { ScopeType, UserModel } from '@/typings/model';
+import { getUserProfile } from '@/services/requests';
+import { RootState } from '@/store';
+import { Scope } from '@/constants/scopes';
+
+export interface UserModuleStateModel {
+  profile: UserModel | null;
+  status: FetchStatus;
+}
+
+export const USER_MODULE_NAMESPACE = 'user';
+
+const USER_MUTATION_TYPES = {
+  PROFILE_REQUEST_STARTED: 'profileRequestStarted',
+  PROFILE_REQUEST_FULFILLED: 'profileRequestFulfilled',
+  PROFILE_REQUEST_REJECTED: 'profileRequestRejected',
+};
+
+export const USER_ACTION_TYPES = {
+  FETCH_USER_PROFILE: 'fetchUserProfile',
+} as const;
+
+type ReturnValueMapType<
+  T extends { [key: string]: (...args: any[]) => any }
+> = { [key in keyof T]: ReturnType<T[key]> };
+
+interface UserGettersType extends GetterTree<UserModuleStateModel, RootState> {
+  userScopes: (state: UserModuleStateModel) => Array<ScopeType>;
+  userHasPermission: (
+    state: UserModuleStateModel,
+    getters: ReturnValueMapType<UserGettersType>
+  ) => (scope: ScopeType) => boolean;
+}
+
+const userGetters: UserGettersType = {
+  userProfile(state) {
+    return state.profile;
+  },
+  userScopes(state) {
+    const roles = state.profile ? state.profile.roles : [];
+    const scopes: Array<ScopeType> = [];
+
+    roles.forEach((role) => {
+      scopes.push(...role.scopes);
+    });
+
+    return scopes;
+  },
+  userHasPermission: (state, getters) => (scope: ScopeType) => {
+    const scopes = getters.userScopes;
+
+    if (scopes.includes(Scope.All)) return true;
+
+    return scopes.includes(scope);
+  },
+};
+
+const userModule: Module<UserModuleStateModel, RootState> = {
+  namespaced: true,
+  state: {
+    profile: null,
+    status: FETCH_STATUSES.IDLE,
+  },
+  mutations: {
+    [USER_MUTATION_TYPES.PROFILE_REQUEST_STARTED](state) {
+      if (state.status === FETCH_STATUSES.IDLE) {
+        state.status = FETCH_STATUSES.LOADING;
+      }
+    },
+    [USER_MUTATION_TYPES.PROFILE_REQUEST_FULFILLED](state, user: UserModel) {
+      if (state.status === FETCH_STATUSES.LOADING) {
+        state.status = FETCH_STATUSES.SUCCESS;
+        state.profile = user;
+      }
+    },
+    [USER_MUTATION_TYPES.PROFILE_REQUEST_REJECTED](state) {
+      if (state.status === FETCH_STATUSES.LOADING) {
+        state.status = FETCH_STATUSES.FAILURE;
+        state.profile = null;
+      }
+    },
+  },
+  actions: {
+    [USER_ACTION_TYPES.FETCH_USER_PROFILE](store) {
+      if (store.state.status !== FETCH_STATUSES.IDLE) return;
+
+      store.commit(USER_MUTATION_TYPES.PROFILE_REQUEST_STARTED);
+
+      getUserProfile()
+        .then((response) => {
+          store.commit(
+            USER_MUTATION_TYPES.PROFILE_REQUEST_FULFILLED,
+            response.data
+          );
+        })
+        .catch((error) => {
+          console.error(error);
+          store.commit(USER_MUTATION_TYPES.PROFILE_REQUEST_REJECTED);
+        });
+    },
+  },
+  getters: userGetters,
+};
+
+export default userModule;

package/src/typings/common.ts

@@ -0,0 +1 @@
+export type Values<T> = T[keyof T];

package/src/typings/model.ts

@@ -6,9 +6,30 @@ import {
 } from '@tager/admin-dynamic-field';
 import { ShortCodeItemType } from '@tager/admin-ui';
 
+import { Values } from '@/typings/common';
+import { Scope } from '@/constants/scopes';
+
+export type ScopeType = Values<typeof Scope>;
+
+export interface RoleModel {
+  readonly id: number;
+  readonly name: string;
+  readonly scopes: Array<ScopeType>;
+}
+
+export interface UserModel {
+  readonly id: number;
+  readonly name: string;
+  readonly email: string;
+  readonly roles: Array<RoleModel>;
+}
+
 export interface SeoInfo {
   readonly pageTitle: Nullable<string>;
   readonly pageDescription: Nullable<string>;
+  readonly pageKeywords: Nullable<string>;
+  readonly openGraphTitle: Nullable<string>;
+  readonly openGraphDescription: Nullable<string>;
   readonly openGraphImage: Nullable<FileType>;
 }
 
@@ -21,6 +42,8 @@ export interface Category extends SeoInfo {
   readonly urlTemplate: string;
   readonly urlAlias: string;
   readonly postsCount: string;
+  readonly parent: Nullable<Pick<Category, 'id' | 'name'>>;
+  readonly depth: number;
 }
 
 export interface PostShort {

package/src/utils/common.ts

@@ -0,0 +1,23 @@
+import { USER_MODULE_NAMESPACE } from '@/store/user';
+
+export function namespace(namespace: string, name: string): string {
+  return `${namespace}/${name}`;
+}
+
+export function userNamespace(name: string): string {
+  return namespace(USER_MODULE_NAMESPACE, name);
+}
+
+export function generateNumberArray(length: number): Array<number> {
+  return Array.from({ length }, (_, index) => index);
+}
+
+export function getNameWithDepth(name: string, depth: number): string {
+  return (
+    generateNumberArray(depth)
+      .map(() => '—')
+      .join(' ') +
+    ' ' +
+    name
+  );
+}

package/src/views/App.vue

@@ -5,15 +5,23 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, SetupContext } from '@vue/composition-api';
+import { defineComponent, onMounted, SetupContext } from '@vue/composition-api';
 
-import { getBlogMenuItem } from '../constants/menu';
+import { getBlogMenuItem } from '@/constants/menu';
+import { useStore } from '@/hooks';
+import { USER_ACTION_TYPES } from '@/store/user';
+import { userNamespace } from '@/utils/common';
 
 export default defineComponent({
   name: 'App',
   setup(props, context: SetupContext) {
+    const store = useStore(context);
     const blogMenuItem = getBlogMenuItem({ t: context.root.$t });
 
+    onMounted(() => {
+      store.dispatch(userNamespace(USER_ACTION_TYPES.FETCH_USER_PROFILE));
+    });
+
     return {
       sidebarMenuList: [blogMenuItem],
     };

package/src/views/Categories/CategoryForm/CategoryForm.helpers.ts

@@ -1,18 +1,23 @@
 import { createId, Nullable } from '@tager/admin-services';
 import { OptionType, SingleFileInputValueType } from '@tager/admin-ui';
 
-import { Category } from '../../../typings/model';
+import { Category } from '@/typings/model';
 import {
   BlogCategoryCreationPayload,
   BlogCategoryUpdatePayload,
-} from '../../../services/requests';
+} from '@/services/requests';
 
 export type CategoryFormValues = {
   name: string;
   isDefault: boolean;
-  pageTitle: string;
-  pageDescription: string;
+
+  pageTitle: Nullable<string>;
+  pageDescription: Nullable<string>;
+  pageKeywords: Nullable<string>;
+  openGraphTitle: Nullable<string>;
+  openGraphDescription: Nullable<string>;
   openGraphImage: Nullable<SingleFileInputValueType>;
+
   urlAlias: string;
   language: Nullable<OptionType>;
 };
@@ -29,9 +34,14 @@ export function convertCategoryToFormValues(
     return {
       name: '',
       isDefault: false,
+
       pageTitle: '',
       pageDescription: '',
+      openGraphTitle: '',
+      openGraphDescription: '',
+      pageKeywords: '',
       openGraphImage: null,
+
       urlAlias: '',
       language: currentLangOption ?? null,
     };
@@ -39,11 +49,16 @@ export function convertCategoryToFormValues(
   return {
     name: category.name,
     isDefault: category.isDefault,
+
     pageTitle: category.pageTitle ?? '',
     pageDescription: category.pageDescription ?? '',
+    pageKeywords: category.pageKeywords ?? '',
+    openGraphTitle: category.openGraphTitle ?? '',
+    openGraphDescription: category.openGraphDescription ?? '',
     openGraphImage: category.openGraphImage
       ? { id: createId(), file: category.openGraphImage }
       : null,
+
     urlAlias: category.urlAlias,
     language: currentLangOption ?? null,
   };