@tager/admin-blog 0.3.23 → 0.3.29

package/src/hooks/useFetchCategory.ts

@@ -0,0 +1,41 @@
+import { onMounted, Ref, SetupContext, watch } from '@vue/composition-api';
+
+import { Nullable, ResourceRef, useResource } from '@tager/admin-services';
+
+import { Category } from '@/typings/model';
+import { getCategory } from '@/services/requests';
+
+export function useFetchCategory({
+  context,
+  categoryId,
+  isCreation,
+}: {
+  context: SetupContext;
+  categoryId: Ref<string>;
+  isCreation: Ref<boolean>;
+}): ResourceRef<Nullable<Category>> {
+  const [fetchCategory, resource] = useResource<Nullable<Category>>({
+    fetchResource: () => getCategory(categoryId.value),
+    initialValue: null,
+    context,
+    resourceName: 'Blog category',
+  });
+
+  onMounted(() => {
+    if (isCreation.value) {
+      return;
+    }
+
+    fetchCategory();
+  });
+
+  watch(categoryId, () => {
+    if (isCreation.value) {
+      return;
+    }
+
+    fetchCategory();
+  });
+
+  return resource;
+}

package/src/hooks/{useModuleConfig.ts → useFetchModuleConfig.ts}

@@ -2,16 +2,18 @@ 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 { getModuleConfig } from '@/services/requests';
 
-export function useModuleConfig(params: {
+export function useFetchModuleConfig({
+  context,
+}: {
   context: SetupContext;
 }): ResourceRef<Nullable<ModuleConfig>> {
   const [fetchModuleConfig, resource] = useResource<Nullable<ModuleConfig>>({
-    fetchResource: getBlogModuleConfig,
+    fetchResource: getModuleConfig,
     initialValue: null,
-    context: params.context,
+    context: context,
     resourceName: 'Module configuration',
   });
 

package/src/hooks/useFetchPosts.ts

@@ -0,0 +1,23 @@
+import { onMounted, SetupContext } from '@vue/composition-api';
+
+import { ResourceRef, useResource } from '@tager/admin-services';
+
+import { PostShort } from '@/typings/model';
+import { getPosts } from '@/services/requests';
+
+export function useFetchPosts(params: {
+  context: SetupContext;
+}): ResourceRef<PostShort[]> {
+  const [fetchPosts, resource] = useResource<PostShort[]>({
+    fetchResource: () => getPosts({ pageNumber: 1, pageSize: 99999 }),
+    initialValue: [],
+    context: params.context,
+    resourceName: 'Blog posts',
+  });
+
+  onMounted(() => {
+    fetchPosts();
+  });
+
+  return resource;
+}

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

@@ -31,7 +31,7 @@ const EN = {
   actions: 'Actions',
   updatePost: 'Update post',
   title: 'Title',
-  URLAlias: 'URL alias',
+  link: 'Link',
   excerpt: 'Excerpt',
   body: 'Body',
   defaultCategory: 'Default Category',
@@ -62,6 +62,18 @@ 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',
+  },
+
+  parentCategory: 'Parent category',
 };
 
 export default EN;

package/src/locales/ru.ts

@@ -19,7 +19,7 @@ const RU: typeof EN = {
   edit: 'Редактировать',
   remove: 'Удалить',
   postsByCategory: 'Посты по категориям',
-  name: 'Имя',
+  name: 'Название',
   image: 'Изображение',
   language: 'Язык',
   languages: 'Языки',
@@ -33,7 +33,7 @@ const RU: typeof EN = {
   actions: 'Действия',
   updatePost: 'Обновить пост',
   title: 'Заголовок',
-  URLAlias: 'URL',
+  link: 'Ссылка',
   excerpt: 'Краткое описание',
   defaultCategory: 'Категория по-умолчанию',
   body: 'Содержание',
@@ -64,6 +64,18 @@ const RU: typeof EN = {
   blogCategoryWasSuccessfullyUpdated: 'Категория блога успешно обновлена',
   blogCategoryCreationWasFailed: 'Не удалось создать категорию блога',
   blogCategoryUpdateWasFailed: 'Не удалось обновить категорию блога',
+
+  clone: 'Клонировать',
+  cloneConfirm: 'Вы уверены, что хотите создать копию страницы?',
+  cloneSuccess: 'Копия страницы успешно создана',
+  cloneFailure: 'Ошибка копирования страницы',
+
+  tabs: {
+    common: 'Общие',
+    seo: 'SEO',
+  },
+
+  parentCategory: 'Родительская категория',
 };
 
 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,11 +1,22 @@
 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,
+  CategoryPayload,
+} from '@/typings/model';
+
+export function getUserProfile(): Promise<ResponseBody<UserModel>> {
+  return request.get({ path: '/admin/self' });
+}
 
 /** Blog Posts */
 
-export function getBlogPostList(params?: {
+export function getPosts(params?: {
   query?: string;
   pageNumber?: number;
   pageSize?: number;
@@ -13,16 +24,22 @@ export function getBlogPostList(params?: {
   return request.get({ path: '/admin/blog/posts', params });
 }
 
-export function getBlogPostCount(): Promise<ResponseBody<{ count: number }>> {
+export function getPostsCount(): Promise<ResponseBody<{ count: number }>> {
   return request.get({ path: '/admin/blog/posts/count' });
 }
 
-export function getBlogPost(
+export function getPost(
   postId: number | string
 ): Promise<ResponseBody<PostFull>> {
   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;
@@ -68,7 +85,7 @@ export function deleteBlogPost(
 
 /** Blog Categories */
 
-export function getBlogCategoryList(params?: {
+export function getCategories(params?: {
   query?: string;
   pageNumber?: number;
   pageSize?: number;
@@ -76,34 +93,21 @@ export function getBlogCategoryList(params?: {
   return request.get({ path: '/admin/blog/categories', params });
 }
 
-export function getBlogCategory(
+export function getCategory(
   categoryId: number | string
 ): Promise<ResponseBody<Category>> {
   return request.get({ path: `/admin/blog/categories/${categoryId}` });
 }
 
-export interface BlogCategoryCreationPayload {
-  name: string;
-  isDefault: boolean;
-  pageTitle: Nullable<string>;
-  language: Nullable<string>;
-  pageDescription: Nullable<string>;
-  openGraphImage: Nullable<string>;
-}
-
-export function createBlogCategory(
-  payload: BlogCategoryCreationPayload
+export function createCategory(
+  payload: CategoryPayload
 ): Promise<ResponseBody<Category>> {
   return request.post({ path: '/admin/blog/categories', body: payload });
 }
 
-export type BlogCategoryUpdatePayload = BlogCategoryCreationPayload & {
-  urlAlias: string;
-};
-
-export function updateBlogCategory(
+export function updateCategory(
   categoryId: number | string,
-  payload: BlogCategoryUpdatePayload
+  payload: CategoryPayload
 ): Promise<ResponseBody<Category>> {
   return request.put({
     path: `/admin/blog/categories/${categoryId}`,
@@ -111,7 +115,7 @@ export function updateBlogCategory(
   });
 }
 
-export function deleteBlogCategory(
+export function deleteCategory(
   categoryId: number | string
 ): Promise<{ success: boolean }> {
   return request.delete({
@@ -119,7 +123,7 @@ export function deleteBlogCategory(
   });
 }
 
-export function moveBlogCategory(
+export function moveCategory(
   categoryId: number | string,
   direction: 'up' | 'down'
 ): Promise<{ success: boolean }> {
@@ -128,7 +132,7 @@ export function moveBlogCategory(
   });
 }
 
-export function getBlogModuleConfig(): Promise<ResponseBody<ModuleConfig>> {
+export function getModuleConfig(): Promise<ResponseBody<ModuleConfig>> {
   return request.get({
     path: `/admin/blog/module-info`,
   });

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

@@ -4,11 +4,36 @@ import {
   FieldShortType,
   IncomingValueUnion,
 } from '@tager/admin-dynamic-field';
-import { ShortCodeItemType } from '@tager/admin-ui';
+import {
+  OptionType,
+  ShortCodeItemType,
+  SingleFileInputValueType,
+} 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 +46,8 @@ export interface Category extends SeoInfo {
   readonly urlTemplate: string;
   readonly urlAlias: string;
   readonly postsCount: string;
+  readonly parent: Nullable<{ id: number; name: string }>;
+  readonly depth: number;
 }
 
 export interface PostShort {
@@ -83,3 +110,29 @@ export interface ModuleConfig {
   readonly shortcodes: ShortCodeItemType[];
   readonly fileScenarios: FileScenarios;
 }
+
+export interface CategoryFormValues {
+  language: Nullable<OptionType>;
+  name: string;
+  parent: Nullable<OptionType<number>>;
+  urlAlias: string;
+
+  pageTitle: Nullable<string>;
+  pageDescription: Nullable<string>;
+  pageKeywords: Nullable<string>;
+  openGraphTitle: Nullable<string>;
+  openGraphDescription: Nullable<string>;
+  openGraphImage: Nullable<SingleFileInputValueType>;
+}
+
+export interface CategoryPayload {
+  language: Nullable<string>;
+  name: string;
+  parent: Nullable<number>;
+  urlAlias: Nullable<string>;
+  isDefault: boolean;
+
+  pageTitle: Nullable<string>;
+  pageDescription: Nullable<string>;
+  openGraphImage: Nullable<string>;
+}

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],
     };