@tager/admin-blog 0.3.24 → 0.3.25

package/src/views/Categories/CategoryForm/CategoryForm.vue

@@ -7,63 +7,88 @@
   >
     <template v-slot:content>
       <form novalidate @submit.prevent="submitForm">
-        <form-field-select
-          v-if="isCreation && isLangSpecific"
-          v-model="values.language"
-          name="language"
-          :label="$t('blog:language')"
-          :options="languageOptionList"
-          :error="errors.language"
-        />
-
-        <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
-          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
-          "
-        />
+        <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
+            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-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>
 
@@ -90,22 +115,31 @@ 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 { Category, Language } from '../../../typings/model';
+} from '@/services/requests';
+import { Category, FileScenarios, Language } from '@/typings/model';
 import {
   getBlogCategoryFormUrl,
   getBlogCategoryListUrl,
-} from '../../../constants/paths';
-import { useModuleConfig } from '../../../hooks';
+} from '@/constants/paths';
+import { useModuleConfig } from '@/hooks';
 
 import {
   CategoryFormValues,
@@ -118,6 +152,7 @@ export default defineComponent({
   name: 'BlogCategoryForm',
   components: { FormFooter },
   setup(props, context) {
+    const { t } = useTranslation(context);
     const categoryId = computed<string>(
       () => context.root.$route.params.categoryId
     );
@@ -141,6 +176,10 @@ export default defineComponent({
       () => languageOptionList.value.length > 0
     );
 
+    const imageScenario = computed<string | null>(
+      () => moduleConfig.value?.fileScenarios?.openGraph ?? null
+    );
+
     /** Fetch Category */
 
     const [
@@ -154,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();
     });
@@ -248,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,
@@ -264,6 +329,14 @@ export default defineComponent({
       submitForm,
       isSubmitting,
       moduleConfig,
+
+      // SEO
+      imageScenario,
+      handleSeoFieldGroupChange,
+
+      // Tabs
+      tabList,
+      selectedTabId,
     };
   },
 });

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

@@ -1,13 +1,11 @@
 import { TFunction } from 'i18next';
 
-import { notEmpty, Nullable } from '@tager/admin-services';
+import { getWebsiteOrigin, notEmpty, Nullable } from '@tager/admin-services';
 import { ColumnDefinition } from '@tager/admin-ui';
 
-import { Category, Language, ModuleConfig } from '../../../typings/model';
-import {
-  getBlogCategoryFormUrl,
-  getBlogPostListUrl,
-} from '../../../constants/paths';
+import { Category, Language, ModuleConfig } from '@/typings/model';
+import { getBlogCategoryFormUrl, getBlogPostListUrl } from '@/constants/paths';
+import { getNameWithDepth } from '@/utils/common';
 
 export function convertCategoryList(
   categoryList: Category[],
@@ -37,42 +35,46 @@ export function getCategoryTableColumnDefs(
     ? moduleConfig.languages.length > 0
     : false;
 
-  const COLUMN_DEFS: Array<ColumnDefinition<Category> | null> = [
+  const COLUMN_DEFS: (ColumnDefinition<Category> | null)[] = [
     {
-      id: 2,
+      id: 1,
       name: t('blog:name'),
       field: 'name',
       type: 'name',
-      format: ({ row }) => {
-        return {
-          adminLink: {
-            url: getBlogCategoryFormUrl({ categoryId: row.id }),
-            text: row.name,
-          },
-          websiteLink: {
-            url: [
-              process.env.VUE_APP_WEBSITE_URL || window.location.origin,
-              row.url,
-            ].join(''),
-            text: row.url,
-          },
-          paramList: row.isDefault
-            ? [{ name: t('blog:defaultCategory'), value: t('blog:yes') }]
-            : [],
-        };
+      format: ({ row }) => ({
+        adminLink: {
+          url: getBlogCategoryFormUrl({ categoryId: row.id }),
+          text: getNameWithDepth(row.name, row.depth),
+        },
+        paramList: row.isDefault
+          ? [{ name: t('blog:defaultCategory'), value: t('blog:yes') }]
+          : [],
+      }),
+    },
+    {
+      id: 2,
+      name: t('pages:path'),
+      field: 'path',
+      type: 'link',
+      format: ({ row }) => ({
+        url: `${getWebsiteOrigin()}${row.url}`,
+        text: row.url,
+      }),
+      options: {
+        shouldOpenNewTab: true,
       },
     },
     isLangSpecific
-      ? { id: 4, name: t('blog:language'), field: 'language' }
+      ? { id: 3, name: t('blog:language'), field: 'language' }
       : null,
     {
-      id: 3,
+      id: 4,
       name: t('blog:posts'),
       field: 'linkToPosts',
       style: { whiteSpace: 'nowrap', width: '130px' },
     },
     {
-      id: 4,
+      id: 5,
       name: t('blog:actions'),
       field: 'actions',
       style: { whiteSpace: 'nowrap', width: '205px' },

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
@@ -51,6 +55,7 @@
 
         <template v-slot:cell(actions)="{ row, rowIndex }">
           <base-button
+            v-if="canViewAdministrators"
             variant="icon"
             :title="$t('blog:edit')"
             :disabled="isDeleting(row.id)"
@@ -78,6 +83,7 @@
           </base-button>
 
           <base-button
+            v-if="canViewAdministrators"
             variant="icon"
             :title="$t('blog:remove')"
             :disabled="isDeleting(row.id) || row.postsCount > 0"
@@ -98,14 +104,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';
+} from '@/services/requests';
+import { getBlogCategoryFormUrl } from '@/constants/paths';
+import { useModuleConfig, useUserPermission } from '@/hooks';
 
 import {
   convertCategoryList,
@@ -117,6 +124,11 @@ import { useAdvancedSearch } from './hooks';
 export default defineComponent({
   name: 'BlogCategoryList',
   setup(props, context) {
+    const canViewAdministrators = useUserPermission(
+      context,
+      Scope.AdministratorsView
+    );
+
     /** Fetch module config */
 
     const {
@@ -185,8 +197,8 @@ export default defineComponent({
     });
 
     const {
-      handleResourceDelete: handleCategoryDelete,
       isDeleting,
+      handleResourceDelete: handleCategoryDelete,
     } = useResourceDelete({
       deleteResource: deleteBlogCategory,
       resourceName: 'Post',
@@ -248,6 +260,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,8 @@ 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';
 
 export interface FormValues {
   title: string;

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

@@ -199,12 +199,10 @@ import {
   createBlogPost,
   getBlogPost,
   updateBlogPost,
-} from '../../../services/requests';
-import { Language, PostFull } from '../../../typings/model';
-import {
-  getBlogPostFormUrl,
-  getBlogPostListUrl,
-} from '../../../constants/paths';
+} from '@/services/requests';
+import { Language, PostFull } from '@/typings/model';
+import { getBlogPostFormUrl, getBlogPostListUrl } from '@/constants/paths';
+
 import {
   useModuleConfig,
   useBlogCategoryList,

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[],

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
@@ -75,20 +79,32 @@
 
         <template v-slot:cell(actions)="{ row }">
           <base-button
+            v-if="canViewAdministrators"
             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
+            v-if="canViewAdministrators"
             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>
@@ -101,13 +117,30 @@ import { computed, defineComponent, watch } from '@vue/composition-api';
 import isEqual from 'lodash.isequal';
 import pick from 'lodash.pick';
 
-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 {
+  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,
+  getBlogPostList,
+} from '@/services/requests';
+import { getBlogPostFormUrl } from '@/constants/paths';
+import {
+  useModuleConfig,
+  useBlogCategoryList,
+  useUserPermission,
+} from '@/hooks';
+import { Scope } from '@/constants/scopes';
 
 import { convertPostList, getPostTableColumnDefs } from './PostList.helpers';
 import { useAdvancedSearch } from './hooks';
@@ -115,6 +148,13 @@ import { useAdvancedSearch } from './hooks';
 export default defineComponent({
   name: 'BlogPostList',
   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] ?? ''
@@ -224,13 +264,6 @@ export default defineComponent({
       )
     );
 
-    const { handleResourceDelete, isDeleting } = useResourceDelete({
-      deleteResource: deleteBlogPost,
-      resourceName: 'Post',
-      onSuccess: fetchPostList,
-      context,
-    });
-
     const isRowDataLoading = computed<boolean>(
       () =>
         isCategoryListLoading.value ||
@@ -238,6 +271,26 @@ 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)
     );
@@ -268,6 +321,13 @@ export default defineComponent({
       toDateFilter,
       tags,
       tagRemovalHandler,
+
+      // Permissions
+      canViewAdministrators,
+
+      // Clone
+      handleResourceClone,
+      isBusy,
     };
   },
 });