@tager/admin-blog 0.3.21 → 0.3.25

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,13 +6,34 @@ import {
 } from '@tager/admin-dynamic-field';
 import { ShortCodeItemType } from '@tager/admin-ui';
 
-export type SeoInfo = {
+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>;
-};
+}
 
-export type BlogCategory = {
+export interface Category extends SeoInfo {
   readonly id: number;
   readonly name: string;
   readonly isDefault: boolean;
@@ -21,21 +42,23 @@ export type BlogCategory = {
   readonly urlTemplate: string;
   readonly urlAlias: string;
   readonly postsCount: string;
-} & SeoInfo;
+  readonly parent: Nullable<Pick<Category, 'id' | 'name'>>;
+  readonly depth: number;
+}
 
-export type PostShort = {
+export interface PostShort {
   readonly id: number;
   readonly title: string;
   readonly url: string;
   readonly excerpt: string;
   readonly status: string;
   readonly language: string;
-  readonly categories: Array<BlogCategory>;
+  readonly categories: Category[];
   readonly date: string;
   readonly image: Nullable<FileType>;
-};
+}
 
-export type PostFull = {
+export interface PostFull extends SeoInfo {
   readonly id: number;
   readonly language: string;
   readonly title: string;
@@ -47,38 +70,39 @@ export type PostFull = {
   readonly excerpt: string;
   readonly image: Nullable<FileType>;
   readonly imageMobile: Nullable<FileType>;
-  readonly categories: Array<BlogCategory>;
+  readonly categories: Category[];
   readonly body: string;
   readonly coverImage: Nullable<FileType>;
-  readonly relatedPosts: Array<Pick<PostShort, 'id' | 'title'>>;
-  readonly tags: Array<string>;
-  readonly additionalFields: Array<FieldShortType<IncomingValueUnion>>;
-} & SeoInfo;
+  readonly relatedPosts: Pick<PostShort, 'id' | 'title'>[];
+  readonly tags: string[];
+  readonly additionalFields: FieldShortType<IncomingValueUnion>[];
+}
 
-export type BlogModuleConfigType = {
+export interface Language {
+  readonly id: string;
+  readonly name: string;
+}
+
+export interface DefaultCategory {
+  readonly id: number;
+  readonly name: string;
+  readonly language: string;
+}
+
+export interface FileScenarios {
+  readonly cover: Nullable<string>;
+  readonly image: Nullable<string>;
+  readonly imageMobile: Nullable<string>;
+  readonly content: Nullable<string>;
+  readonly openGraph: Nullable<string>;
+}
+
+export interface ModuleConfig {
   readonly urlPostTemplate: Nullable<string>;
   readonly urlCategoryTemplate: Nullable<string>;
-  readonly languages: Array<{
-    id: string;
-    name: string;
-  }>;
-  defaultCategories: Array<{
-    id: number;
-    name: string;
-    language: string;
-  }>;
-  readonly fields: Array<FieldConfigUnion>;
-  readonly shortcodes: Array<ShortCodeItemType>;
-  readonly fileScenarios: {
-    cover: Nullable<string>;
-    image: Nullable<string>;
-    imageMobile: Nullable<string>;
-    content: Nullable<string>;
-    openGraph: Nullable<string>;
-  };
-};
-
-export type SettingItemType = {
-  field: FieldConfigUnion;
-  value: IncomingValueUnion;
-};
+  readonly languages: Language[];
+  readonly defaultCategories: DefaultCategory[];
+  readonly fields: FieldConfigUnion[];
+  readonly shortcodes: ShortCodeItemType[];
+  readonly fileScenarios: FileScenarios;
+}

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,20 +5,26 @@
 </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],
     };
   },
 });
 </script>
-
-<style scoped lang="scss"></style>

package/src/views/{BlogCategoryForm/BlogCategoryForm.helpers.ts → Categories/CategoryForm/CategoryForm.helpers.ts}

@@ -1,37 +1,47 @@
 import { createId, Nullable } from '@tager/admin-services';
 import { OptionType, SingleFileInputValueType } from '@tager/admin-ui';
 
-import { BlogCategory } 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>;
 };
 
 export function convertCategoryToFormValues(
-  category: Nullable<BlogCategory>,
-  languageOptionList: Array<OptionType>
+  category: Nullable<Category>,
+  languageOptionList: OptionType[]
 ): CategoryFormValues {
   const currentLangOption = languageOptionList.find(
-    (option) => option.value === category?.language
+    ({ value }) => value === category?.language
   );
 
   if (!category) {
     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,
   };

package/src/views/{BlogCategoryForm/BlogCategoryForm.vue → Categories/CategoryForm/CategoryForm.vue}

@@ -7,61 +7,88 @@
   >
     <template v-slot:content>
       <form novalidate @submit.prevent="submitForm">
-        <form-field-select
-            v-if="isCreation && isLangSpecific"
+        <template v-if="isCreation">
+          <form-field-select
+            v-if="isLangSpecific"
             v-model="values.language"
             name="language"
             :label="$t('blog:language')"
             :options="languageOptionList"
             :error="errors.language"
-        />
+          />
 
-        <form-field
+          <form-field
             v-model="values.name"
             name="name"
             :label="$t('blog:name')"
             :error="errors.name"
-        />
+          />
 
-        <form-field-checkbox
+          <form-field-checkbox
             v-model="values.isDefault"
             name="isDefault"
             :label="$t('blog:defaultCategory')"
             :error="errors.isDefault"
-        />
-
-        <form-field-url-alias-input
-          v-if="!isCreation"
-          id="urlAlias"
-          v-model="values.urlAlias"
-          name="urlAlias"
-          :label="$t('blog:URLAlias')"
-          :url-template="pagePath"
-          :error="errors.urlAlias"
-        />
-
-        <form-field
-          v-model="values.pageTitle"
-          name="pageTitle"
-          :label="$t('blog:pageTitle')"
-          :error="errors.pageTitle"
-        />
-
-        <form-field
-          v-model="values.pageDescription"
-          name="pageDescription"
-          :label="$t('blog:pageDescription')"
-          type="textarea"
-          :error="errors.pageDescription"
-        />
-
-        <form-field-file-input
-          v-model="values.openGraphImage"
-          :label="$t('blog:openGraphImage')"
-          name="openGraphImage"
-          file-type="image"
-          :image-scenario="moduleConfig ? moduleConfig.fileScenarios.openGraph : null"
-        />
+          />
+
+          <form-field-url-alias-input
+            id="urlAlias"
+            v-model="values.urlAlias"
+            name="urlAlias"
+            :label="$t('blog:URLAlias')"
+            :url-template="pagePath"
+            :error="errors.urlAlias"
+          />
+        </template>
+
+        <template v-else>
+          <tab-list
+            :tab-list="tabList"
+            :selected-tab-id="selectedTabId"
+            @tab:update="selectedTabId = $event.tabId"
+          />
+
+          <template v-if="selectedTabId === 'common'">
+            <form-field
+              v-model="values.name"
+              name="name"
+              :label="$t('blog:name')"
+              :error="errors.name"
+            />
+
+            <form-field-checkbox
+              v-model="values.isDefault"
+              name="isDefault"
+              :label="$t('blog:defaultCategory')"
+              :error="errors.isDefault"
+            />
+
+            <form-field-url-alias-input
+              id="urlAlias"
+              v-model="values.urlAlias"
+              name="urlAlias"
+              :label="$t('blog:URLAlias')"
+              :url-template="pagePath"
+              :error="errors.urlAlias"
+            />
+          </template>
+
+          <template v-if="selectedTabId === 'seo'">
+            <seo-field-group
+              :title="values.pageTitle"
+              :title-error-message="errors.pageTitle"
+              :description="values.pageDescription"
+              :description-error-message="errors.pageDescription"
+              :should-display-keywords="false"
+              :keywords="values.pageKeywords"
+              :keywords-error-message="errors.pageKeywords"
+              :image="values.openGraphImage"
+              :image-scenario="imageScenario"
+              :image-error-message="errors.openGraphImage"
+              @change="handleSeoFieldGroupChange"
+            />
+          </template>
+        </template>
       </form>
     </template>
 
@@ -88,34 +115,44 @@ import {
 
 import {
   convertRequestErrorToMap,
+  getWebsiteOrigin,
+  notEmpty,
   Nullable,
   useResource,
 } from '@tager/admin-services';
-import { OptionType, FormFooter, TagerFormSubmitEvent } from '@tager/admin-ui';
+import {
+  OptionType,
+  FormFooter,
+  TagerFormSubmitEvent,
+  SeoChangeEvent,
+  TabType,
+  useTranslation,
+} from '@tager/admin-ui';
 
 import {
   createBlogCategory,
   getBlogCategory,
   updateBlogCategory,
-} from '../../services/requests';
-import { BlogCategory } from '../../typings/model';
+} from '@/services/requests';
+import { Category, FileScenarios, Language } from '@/typings/model';
 import {
   getBlogCategoryFormUrl,
   getBlogCategoryListUrl,
-} from '../../constants/paths';
-import useModuleConfig from '../../hooks/useModuleConfig';
+} from '@/constants/paths';
+import { useModuleConfig } from '@/hooks';
 
 import {
   CategoryFormValues,
   convertCategoryFormValuesToCreationPayload,
   convertCategoryFormValuesToUpdatePayload,
   convertCategoryToFormValues,
-} from './BlogCategoryForm.helpers';
+} from './CategoryForm.helpers';
 
 export default defineComponent({
   name: 'BlogCategoryForm',
   components: { FormFooter },
   setup(props, context) {
+    const { t } = useTranslation(context);
     const categoryId = computed<string>(
       () => context.root.$route.params.categoryId
     );
@@ -127,22 +164,28 @@ export default defineComponent({
       loading: isModuleConfigLoading,
     } = useModuleConfig({ context });
 
-    const languageOptionList = computed<Array<OptionType>>(
-      () =>
-        moduleConfig.value?.languages.map((lang) => ({
-          value: lang.id,
-          label: lang.name,
-        })) ?? []
+    const languageList = computed<Language[]>(
+      () => moduleConfig.value?.languages ?? []
+    );
+
+    const languageOptionList = computed<OptionType[]>(() =>
+      languageList.value.map(({ id, name }) => ({ value: id, label: name }))
+    );
+
+    const isLangSpecific = computed<boolean>(
+      () => languageOptionList.value.length > 0
     );
 
-    const isLangSpecific = computed(() => languageOptionList.value.length > 0);
+    const imageScenario = computed<string | null>(
+      () => moduleConfig.value?.fileScenarios?.openGraph ?? null
+    );
 
     /** Fetch Category */
 
     const [
       fetchCategory,
       { data: category, loading: isCategoryLoading },
-    ] = useResource<Nullable<BlogCategory>>({
+    ] = useResource<Nullable<Category>>({
       fetchResource: () => getBlogCategory(categoryId.value),
       initialValue: null,
       context,
@@ -150,13 +193,17 @@ export default defineComponent({
     });
 
     onMounted(() => {
-      if (isCreation.value) return;
+      if (isCreation.value) {
+        return;
+      }
 
       fetchCategory();
     });
 
     watch(categoryId, () => {
-      if (isCreation.value) return;
+      if (isCreation.value) {
+        return;
+      }
 
       fetchCategory();
     });
@@ -182,8 +229,10 @@ export default defineComponent({
         values.value
       );
       const updateBody = convertCategoryFormValuesToUpdatePayload(values.value);
-      if(!isCreation.value){
-        updateBody.language = category.value?.language ? category.value?.language : null;
+      if (!isCreation.value) {
+        updateBody.language = category.value?.language
+          ? category.value?.language
+          : null;
       }
 
       const requestPromise = isCreation.value
@@ -242,10 +291,32 @@ export default defineComponent({
     );
 
     const categoryPagePath = computed<string>(() => {
-      const origin = process.env.VUE_APP_WEBSITE_URL || window.location.origin;
-      return origin + (category.value?.urlTemplate ?? '');
+      return `${getWebsiteOrigin()}${category.value?.urlTemplate ?? ''}`;
     });
 
+    // SEO
+
+    function handleSeoFieldGroupChange({
+      title,
+      description,
+      keywords,
+      image,
+    }: SeoChangeEvent) {
+      values.value.pageTitle = title;
+      values.value.pageDescription = description;
+      values.value.pageKeywords = keywords;
+      values.value.openGraphImage = image;
+    }
+
+    /** Tabs */
+
+    const tabList = computed<TabType[]>(() => [
+      { id: 'common', label: t('blog:tabs.common') },
+      { id: 'seo', label: t('blog:tabs.seo') },
+    ]);
+
+    const selectedTabId = ref<string>(tabList.value[0].id);
+
     return {
       isCreation,
       isContentLoading: isContentLoading,
@@ -257,10 +328,16 @@ export default defineComponent({
       categoryListUrl: getBlogCategoryListUrl(),
       submitForm,
       isSubmitting,
-      moduleConfig
+      moduleConfig,
+
+      // SEO
+      imageScenario,
+      handleSeoFieldGroupChange,
+
+      // Tabs
+      tabList,
+      selectedTabId,
     };
   },
 });
 </script>
-
-<style scoped lang="scss"></style>

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

@@ -0,0 +1 @@
+export { default } from './CategoryForm.vue';