@tager/admin-blog 0.3.23 → 0.3.29

package/src/views/Categories/CategoryList/CategoryList.vue

@@ -1,12 +1,16 @@
 <template>
   <page
     :title="$t('blog:blogCategories')"
-    :header-buttons="[
-      {
-        text: $t('blog:newCategory'),
-        href: getBlogCategoryFormUrl({ categoryId: 'create' }),
-      },
-    ]"
+    :header-buttons="
+      [
+        canViewAdministrators
+          ? {
+              text: $t('blog:newCategory'),
+              href: getBlogCategoryFormUrl({ categoryId: 'create' }),
+            }
+          : null,
+      ].filter(Boolean)
+    "
   >
     <template v-slot:content>
       <data-table
@@ -63,7 +67,7 @@
             variant="icon"
             :title="$t('blog:moveUp')"
             :disabled="rowIndex === 0 || isCategoryMoving"
-            @click="moveCategory(row.id, 'up')"
+            @click="startMoveCategory(row.id, 'up')"
           >
             <svg-icon name="north" />
           </base-button>
@@ -72,7 +76,7 @@
             variant="icon"
             :title="$t('blog:moveDown')"
             :disabled="rowIndex === rowData.length - 1 || isCategoryMoving"
-            @click="moveCategory(row.id, 'down')"
+            @click="startMoveCategory(row.id, 'down')"
           >
             <svg-icon name="south" />
           </base-button>
@@ -98,14 +102,15 @@ import isEqual from 'lodash.isequal';
 import { useResourceDelete } from '@tager/admin-services';
 import { useDataTable } from '@tager/admin-ui';
 
-import { Category, Language } from '../../../typings/model';
+import { Scope } from '@/constants/scopes';
+import { Category, Language } from '@/typings/model';
 import {
-  deleteBlogCategory,
-  getBlogCategoryList,
-  moveBlogCategory,
-} from '../../../services/requests';
-import { getBlogCategoryFormUrl } from '../../../constants/paths';
-import { useModuleConfig } from '../../../hooks';
+  deleteCategory,
+  getCategories,
+  moveCategory,
+} from '@/services/requests';
+import { getBlogCategoryFormUrl } from '@/constants/paths';
+import { useFetchModuleConfig, useUserPermission } from '@/hooks';
 
 import {
   convertCategoryList,
@@ -117,12 +122,17 @@ import { useAdvancedSearch } from './hooks';
 export default defineComponent({
   name: 'BlogCategoryList',
   setup(props, context) {
-    /** Fetch module config */
+    const canViewAdministrators = useUserPermission(
+      context,
+      Scope.AdministratorsView
+    );
+
+    /** Fetch module config **/
 
     const {
       data: moduleConfig,
       loading: isModuleConfigLoading,
-    } = useModuleConfig({ context });
+    } = useFetchModuleConfig({ context });
 
     const languageList = computed<Language[]>(
       () => moduleConfig.value?.languages ?? []
@@ -156,7 +166,7 @@ export default defineComponent({
       pageSize,
     } = useDataTable<Category>({
       fetchEntityList: (params) =>
-        getBlogCategoryList({
+        getCategories({
           query: params.searchQuery,
           pageNumber: params.pageNumber,
           pageSize: params.pageSize,
@@ -164,7 +174,7 @@ export default defineComponent({
         }),
       initialValue: [],
       context,
-      resourceName: 'Blog category list',
+      resourceName: 'Blog categories',
       pageSize: 100,
     });
 
@@ -185,10 +195,10 @@ export default defineComponent({
     });
 
     const {
-      handleResourceDelete: handleCategoryDelete,
       isDeleting,
+      handleResourceDelete: handleCategoryDelete,
     } = useResourceDelete({
-      deleteResource: deleteBlogCategory,
+      deleteResource: deleteCategory,
       resourceName: 'Post',
       onSuccess: fetchCategoryList,
       context,
@@ -196,10 +206,10 @@ export default defineComponent({
 
     const isCategoryMoving = ref<boolean>(false);
 
-    function moveCategory(categoryId: number, direction: 'up' | 'down') {
+    function startMoveCategory(categoryId: number, direction: 'up' | 'down') {
       isCategoryMoving.value = true;
 
-      moveBlogCategory(categoryId, direction)
+      moveCategory(categoryId, direction)
         .then((response) => {
           if (response.success) {
             return fetchCategoryList();
@@ -222,7 +232,11 @@ export default defineComponent({
     );
 
     const columnDefs = computed(() =>
-      getCategoryTableColumnDefs(moduleConfig.value, context.root.$t)
+      getCategoryTableColumnDefs(
+        moduleConfig.value,
+        context.root.$t,
+        canViewAdministrators.value
+      )
     );
 
     return {
@@ -235,7 +249,7 @@ export default defineComponent({
       isDeleting,
       getBlogCategoryFormUrl,
       getLinkToPostsByCategory,
-      moveCategory,
+      startMoveCategory,
       isCategoryMoving,
 
       searchQuery,
@@ -248,6 +262,9 @@ export default defineComponent({
       languageOptionList,
       tags,
       tagRemovalHandler,
+
+      // Permissions
+      canViewAdministrators,
     };
   },
 });

package/src/views/Categories/CategoryList/hooks/useAdvancedSearch.ts

@@ -14,7 +14,7 @@ import {
   OptionType,
 } from '@tager/admin-ui';
 
-import { Language } from '../../../../typings/model';
+import { Language } from '@/typings/model';
 
 interface Params {
   context: SetupContext;

package/src/views/Home.vue

@@ -7,7 +7,7 @@ import { defineComponent, ref } from '@vue/composition-api';
 
 import { NavigationGridItem } from '@tager/admin-ui';
 
-import { getBlogCategoryListUrl, getBlogPostListUrl } from '../constants/paths';
+import { getBlogCategoryListUrl, getBlogPostListUrl } from '@/constants/paths';
 
 export default defineComponent({
   name: 'Home',

package/src/views/Posts/PostForm/PostForm.helpers.ts

@@ -6,11 +6,9 @@ import {
   universalFieldUtils,
 } from '@tager/admin-dynamic-field';
 
-import { Category, PostFull } from '../../../typings/model';
-import {
-  PostCreationPayload,
-  PostUpdatePayload,
-} from '../../../services/requests';
+import { Category, PostFull } from '@/typings/model';
+import { PostCreationPayload, PostUpdatePayload } from '@/services/requests';
+import { getNameWithDepth } from '@/utils/common';
 
 export interface FormValues {
   title: string;
@@ -149,5 +147,8 @@ export function convertCategoryListToOptions(
 ): OptionType<number>[] {
   return categoryList
     .filter(({ language }) => (languageId ? language === languageId : true))
-    .map(({ id, name }) => ({ value: id, label: name }));
+    .map(({ id, name, depth }) => ({
+      value: id,
+      label: getNameWithDepth(name, depth),
+    }));
 }

package/src/views/Posts/PostForm/PostForm.vue

@@ -39,7 +39,7 @@
             id="urlAlias"
             v-model="values.urlAlias"
             name="urlAlias"
-            :label="$t('blog:URLAlias')"
+            :label="$t('blog:link')"
             :url-template="urlAliasTemplate"
             :error="errors.urlAlias"
             @change="handleAliasChange"
@@ -111,11 +111,12 @@
           />
 
           <form-field-multi-select
-            v-model="values.categories"
+            :selected-options="values.categories"
             name="categories"
             :label="$t('blog:categories')"
             :options="categoryOptionList"
             :error="errors.categories"
+            @change="handleCategoriesChange"
           />
 
           <form-field-multi-select
@@ -195,20 +196,14 @@ import {
 } from '@tager/admin-ui';
 import { DynamicField } from '@tager/admin-dynamic-field';
 
+import { createBlogPost, getPost, updateBlogPost } from '@/services/requests';
+import { Language, PostFull } from '@/typings/model';
+import { getBlogPostFormUrl, getBlogPostListUrl } from '@/constants/paths';
+
 import {
-  createBlogPost,
-  getBlogPost,
-  updateBlogPost,
-} from '../../../services/requests';
-import { Language, PostFull } from '../../../typings/model';
-import {
-  getBlogPostFormUrl,
-  getBlogPostListUrl,
-} from '../../../constants/paths';
-import {
-  useModuleConfig,
-  useBlogCategoryList,
-  useBlogPostList,
+  useFetchModuleConfig,
+  useFetchCategories,
+  useFetchPosts,
 } from '../../../hooks';
 
 import {
@@ -228,11 +223,12 @@ export default defineComponent({
 
     const urlAliasChanged = ref<boolean>(false);
 
-    /** Fetch module config */
+    /** Fetch module config **/
+
     const {
       data: moduleConfig,
       loading: isModuleConfigLoading,
-    } = useModuleConfig({ context });
+    } = useFetchModuleConfig({ context });
 
     const languageList = computed<Language[]>(
       () => moduleConfig.value?.languages ?? []
@@ -248,17 +244,18 @@ export default defineComponent({
     const isLangSpecific = computed(() => languageOptionList.value.length > 0);
 
     /** Fetch category list */
+
     const {
       data: categoryList,
       loading: isCategoryListLoading,
-    } = useBlogCategoryList({ context });
+    } = useFetchCategories({ context });
 
     /** Fetch Post */
 
     const [fetchPost, { data: post, loading: isPostLoading }] = useResource<
       Nullable<PostFull>
     >({
-      fetchResource: () => getBlogPost(postId.value),
+      fetchResource: () => getPost(postId.value),
       initialValue: null,
       context,
       resourceName: 'Post',
@@ -277,7 +274,7 @@ export default defineComponent({
     });
 
     /** Fetch post list */
-    const { data: postList, loading: isPostListLoading } = useBlogPostList({
+    const { data: postList, loading: isPostListLoading } = useFetchPosts({
       context,
     });
 
@@ -290,7 +287,8 @@ export default defineComponent({
         }))
     );
 
-    /** Form State */
+    /** Form State **/
+    const isSubmitting = ref<boolean>(false);
     const values = ref<FormValues>(
       convertPostToFormValues(
         post.value,
@@ -300,7 +298,6 @@ export default defineComponent({
       )
     );
     const errors = ref<Record<string, string>>({});
-    const isSubmitting = ref<boolean>(false);
 
     watch([post, languageOptionList, postOptionList, moduleConfig], () => {
       values.value = convertPostToFormValues(
@@ -523,6 +520,43 @@ export default defineComponent({
       return result;
     });
 
+    const handleCategoriesChange = (selectedOptions: OptionType<number>[]) => {
+      const newSelectedOptions: OptionType<number>[] = [];
+
+      selectedOptions.forEach((selectedOption) => {
+        const findTreeSelectedCategory = (categoryId: number) => {
+          const foundSelectedCategory = categoryList.value.find(
+            ({ id }) => id === categoryId
+          );
+
+          if (!foundSelectedCategory) {
+            return;
+          }
+
+          const newSelectedOption: OptionType<number> = {
+            value: foundSelectedCategory.id,
+            label: foundSelectedCategory.name,
+          };
+
+          if (
+            !newSelectedOptions.some(
+              ({ value }) => value === newSelectedOption.value
+            )
+          ) {
+            newSelectedOptions.push(newSelectedOption);
+          }
+
+          if (foundSelectedCategory.parent) {
+            findTreeSelectedCategory(foundSelectedCategory.parent.id);
+          }
+        };
+
+        findTreeSelectedCategory(selectedOption.value);
+      });
+
+      values.value.categories = newSelectedOptions;
+    };
+
     return {
       isCreation,
       postId,
@@ -546,6 +580,7 @@ export default defineComponent({
       handleTitleChange,
       handleAliasChange,
       urlAliasTemplate,
+      handleCategoriesChange,
     };
   },
 });

package/src/views/Posts/PostList/PostList.helpers.ts

@@ -3,13 +3,8 @@ import { TFunction } from 'i18next';
 import { notEmpty, Nullable } from '@tager/admin-services';
 import { ColumnDefinition } from '@tager/admin-ui';
 
-import {
-  Category,
-  ModuleConfig,
-  Language,
-  PostShort,
-} from '../../../typings/model';
-import { getBlogPostFormUrl } from '../../../constants/paths';
+import { Category, ModuleConfig, Language, PostShort } from '@/typings/model';
+import { getBlogPostFormUrl } from '@/constants/paths';
 
 export function convertPostList(
   postList: PostShort[],
@@ -38,7 +33,8 @@ export function convertPostList(
 
 export function getPostTableColumnDefs(
   moduleConfig: Nullable<ModuleConfig>,
-  t: TFunction
+  t: TFunction,
+  canViewAdministrators: boolean
 ): ColumnDefinition<PostShort>[] {
   const isLangSpecific = moduleConfig
     ? moduleConfig.languages.length > 0
@@ -90,13 +86,15 @@ export function getPostTableColumnDefs(
       format: ({ row }) =>
         row.categories.map((category) => category.name).join(', '),
     },
-    {
-      id: 7,
-      name: t('blog:actions'),
-      field: 'actions',
-      style: { whiteSpace: 'nowrap', width: '120px' },
-      headStyle: { whiteSpace: 'nowrap', width: '120px' },
-    },
+    canViewAdministrators
+      ? {
+          id: 7,
+          name: t('blog:actions'),
+          field: 'actions',
+          style: { whiteSpace: 'nowrap', width: '120px' },
+          headStyle: { whiteSpace: 'nowrap', width: '120px' },
+        }
+      : null,
   ];
 
   return COLUMN_DEFS.filter(notEmpty);

package/src/views/Posts/PostList/PostList.vue

@@ -1,12 +1,16 @@
 <template>
   <page
     :title="pageTitle"
-    :header-buttons="[
-      {
-        text: $t('blog:newPost'),
-        href: getBlogPostFormUrl({ postId: 'create' }),
-      },
-    ]"
+    :header-buttons="
+      [
+        canViewAdministrators
+          ? {
+              text: $t('blog:newPost'),
+              href: getBlogPostFormUrl({ postId: 'create' }),
+            }
+          : null,
+      ].filter(Boolean)
+    "
   >
     <template v-slot:content>
       <data-table
@@ -77,18 +81,28 @@
           <base-button
             variant="icon"
             :title="$t('blog:edit')"
-            :disabled="isDeleting(row.id)"
+            :disabled="isBusy(row.id)"
             :href="getBlogPostFormUrl({ postId: row.id })"
           >
-            <svg-icon name="edit"></svg-icon>
+            <svg-icon name="edit" />
           </base-button>
+
+          <base-button
+            variant="icon"
+            :title="$t('blog:clone')"
+            :disabled="isBusy(row.id)"
+            @click="handleResourceClone(row.id)"
+          >
+            <svg-icon name="contentCopy" />
+          </base-button>
+
           <base-button
             variant="icon"
             :title="$t('blog:remove')"
-            :disabled="isDeleting(row.id)"
+            :disabled="isBusy(row.id)"
             @click="handleResourceDelete(row.id)"
           >
-            <svg-icon name="delete"></svg-icon>
+            <svg-icon name="delete" />
           </base-button>
         </template>
       </data-table>
@@ -99,42 +113,65 @@
 <script lang="ts">
 import { computed, defineComponent, watch } from '@vue/composition-api';
 import isEqual from 'lodash.isequal';
-
-import { ColumnDefinition, useDataTable } from '@tager/admin-ui';
-import { Nullable, useResourceDelete } from '@tager/admin-services';
-
-import { Category, Language, PostShort } from '../../../typings/model';
-import { deleteBlogPost, getBlogPostList } from '../../../services/requests';
-import { getBlogPostFormUrl } from '../../../constants/paths';
-import { useModuleConfig, useBlogCategoryList } from '../../../hooks';
+import pick from 'lodash.pick';
+
+import {
+  ColumnDefinition,
+  useDataTable,
+  useTranslation,
+} from '@tager/admin-ui';
+import {
+  Nullable,
+  useResourceClone,
+  useResourceDelete,
+} from '@tager/admin-services';
+
+import { Category, Language, PostFull, PostShort } from '@/typings/model';
+import { clonePost, deleteBlogPost, getPosts } from '@/services/requests';
+import { getBlogPostFormUrl } from '@/constants/paths';
+import {
+  useFetchModuleConfig,
+  useFetchCategories,
+  useUserPermission,
+} from '@/hooks';
+import { Scope } from '@/constants/scopes';
 
 import { convertPostList, getPostTableColumnDefs } from './PostList.helpers';
 import { useAdvancedSearch } from './hooks';
 
 export default defineComponent({
-  name: 'BlogPostList',
+  name: 'Posts',
   setup(props, context) {
+    const { t } = useTranslation(context);
+
+    const canViewAdministrators = useUserPermission(
+      context,
+      Scope.AdministratorsView
+    );
+
     const categoryId = computed<string>(() => {
       return Array.isArray(context.root.$route.query.category)
         ? context.root.$route.query.category[0] ?? ''
         : context.root.$route.query.category;
     });
 
-    /** Fetch module config */
+    /** Fetch module config **/
+
     const {
       data: moduleConfig,
       loading: isModuleConfigLoading,
-    } = useModuleConfig({ context });
+    } = useFetchModuleConfig({ context });
 
     const languageList = computed<Language[]>(
       () => moduleConfig.value?.languages ?? []
     );
 
-    /** Fetch category list */
+    /** Fetch category list **/
+
     const {
       data: categoryList,
       loading: isCategoryListLoading,
-    } = useBlogCategoryList({ context });
+    } = useFetchCategories({ context });
 
     const selectedCategory = computed<Nullable<Category>>(() =>
       categoryId.value
@@ -174,7 +211,8 @@ export default defineComponent({
       () => languageOptionList.value.length > 1
     );
 
-    /** Fetch Post list */
+    /** Fetch Post list **/
+
     const {
       fetchEntityList: fetchPostList,
       isLoading: isPostLoading,
@@ -187,7 +225,7 @@ export default defineComponent({
       pageSize,
     } = useDataTable<PostShort>({
       fetchEntityList: (params) =>
-        getBlogPostList({
+        getPosts({
           query: params.searchQuery,
           pageNumber: params.pageNumber,
           pageSize: params.pageSize,
@@ -205,8 +243,8 @@ export default defineComponent({
       }
 
       const newQuery = {
+        ...pick(context.root.$route.query, ['query', 'pageNumber']),
         ...filterParams.value,
-        query: (context.root.$route.query.query ?? '') as string,
       };
 
       if (!isEqual(context.root.$route.query, newQuery)) {
@@ -223,13 +261,6 @@ export default defineComponent({
       )
     );
 
-    const { handleResourceDelete, isDeleting } = useResourceDelete({
-      deleteResource: deleteBlogPost,
-      resourceName: 'Post',
-      onSuccess: fetchPostList,
-      context,
-    });
-
     const isRowDataLoading = computed<boolean>(
       () =>
         isCategoryListLoading.value ||
@@ -237,8 +268,32 @@ export default defineComponent({
         isModuleConfigLoading.value
     );
 
+    const { isDeleting, handleResourceDelete } = useResourceDelete({
+      deleteResource: deleteBlogPost,
+      resourceName: 'Post',
+      onSuccess: fetchPostList,
+      context,
+    });
+
+    const { isCloning, handleResourceClone } = useResourceClone({
+      cloneResource: clonePost,
+      confirmMessage: t('blog:cloneConfirm'),
+      successMessage: t('blog:cloneSuccess'),
+      failureMessage: t('blog:cloneFailure'),
+      onSuccessRedirectTo: (data: PostFull) => `/posts/${data.id}`,
+      context,
+    });
+
+    function isBusy(postId: number): boolean {
+      return isDeleting(postId) || isCloning(postId) || isRowDataLoading.value;
+    }
+
     const columnDefs = computed<ColumnDefinition<PostShort>[]>(() =>
-      getPostTableColumnDefs(moduleConfig.value, context.root.$t)
+      getPostTableColumnDefs(
+        moduleConfig.value,
+        context.root.$t,
+        canViewAdministrators.value
+      )
     );
 
     return {
@@ -267,6 +322,13 @@ export default defineComponent({
       toDateFilter,
       tags,
       tagRemovalHandler,
+
+      // Permissions
+      canViewAdministrators,
+
+      // Clone
+      handleResourceClone,
+      isBusy,
     };
   },
 });

package/src/views/Posts/PostList/hooks/useAdvancedSearch.ts

@@ -16,7 +16,8 @@ import {
 } from '@tager/admin-ui';
 import { isNotNullish } from '@tager/admin-services';
 
-import { Category, Language } from '../../../../typings/model';
+import { Category, Language } from '@/typings/model';
+import { getNameWithDepth } from '@/utils/common';
 
 interface Params {
   context: SetupContext;
@@ -53,9 +54,9 @@ export function useAdvancedSearch({
   /** Category **/
 
   const categoryOptionList = computed<OptionType[]>(() =>
-    categoryList.value.map(({ id, name }) => ({
+    categoryList.value.map(({ id, name, depth }) => ({
       value: String(id),
-      label: name,
+      label: getNameWithDepth(name, depth),
     }))
   );
 
@@ -229,9 +230,9 @@ export function useAdvancedSearch({
       languageFilter.value.some(({ value }) => value === language)
     );
 
-    return selectedList.map(({ id, name }) => ({
+    return selectedList.map(({ id, name, depth }) => ({
       value: String(id),
-      label: name,
+      label: getNameWithDepth(name, depth),
     }));
   });