@tager/admin-blog 0.3.23 → 0.3.29

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

@@ -1,21 +1,7 @@
 import { createId, Nullable } from '@tager/admin-services';
-import { OptionType, SingleFileInputValueType } from '@tager/admin-ui';
+import { OptionType } from '@tager/admin-ui';
 
-import { Category } from '../../../typings/model';
-import {
-  BlogCategoryCreationPayload,
-  BlogCategoryUpdatePayload,
-} from '../../../services/requests';
-
-export type CategoryFormValues = {
-  name: string;
-  isDefault: boolean;
-  pageTitle: string;
-  pageDescription: string;
-  openGraphImage: Nullable<SingleFileInputValueType>;
-  urlAlias: string;
-  language: Nullable<OptionType>;
-};
+import { Category, CategoryFormValues, CategoryPayload } from '@/typings/model';
 
 export function convertCategoryToFormValues(
   category: Nullable<Category>,
@@ -27,46 +13,51 @@ export function convertCategoryToFormValues(
 
   if (!category) {
     return {
+      language: currentLangOption ?? null,
       name: '',
-      isDefault: false,
+      parent: null,
+      urlAlias: '',
+
       pageTitle: '',
       pageDescription: '',
+      pageKeywords: '',
+      openGraphTitle: '',
+      openGraphDescription: '',
       openGraphImage: null,
-      urlAlias: '',
-      language: currentLangOption ?? null,
     };
   }
+
   return {
+    language: currentLangOption ?? null,
     name: category.name,
-    isDefault: category.isDefault,
+    parent: category.parent
+      ? { value: category.parent.id, label: category.parent.name }
+      : null,
+    urlAlias: category.urlAlias,
+
     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,
   };
 }
 
-export function convertCategoryFormValuesToCreationPayload(
+export function convertCategoryFormValuesToPayload(
   values: CategoryFormValues
-): BlogCategoryCreationPayload {
+): CategoryPayload {
   return {
+    language: values.language?.value ?? null,
     name: values.name,
-    isDefault: values.isDefault,
+    parent: values.parent?.value ?? null,
+    urlAlias: values.urlAlias,
+    isDefault: false,
+
     pageTitle: values.pageTitle,
     pageDescription: values.pageDescription,
     openGraphImage: values.openGraphImage?.file.id ?? null,
-    language: values.language?.value ?? null,
-  };
-}
-
-export function convertCategoryFormValuesToUpdatePayload(
-  values: CategoryFormValues
-): BlogCategoryUpdatePayload {
-  return {
-    ...convertCategoryFormValuesToCreationPayload(values),
-    urlAlias: values.urlAlias,
   };
 }

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

@@ -7,63 +7,99 @@
   >
     <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-select
+            v-model="values.parent"
+            name="parentCategory"
+            :label="$t('blog:parentCategory')"
+            :options="categoryOptionList"
+            :error="errors.parent"
+          />
+
+          <form-field-url-alias-input
+            id="urlAlias"
+            v-model="values.urlAlias"
+            name="urlAlias"
+            :label="$t('blog:link')"
+            :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-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-select
+              v-model="values.parent"
+              name="parentCategory"
+              :label="$t('blog:parentCategory')"
+              :options="categoryOptionList"
+              :error="errors.parent"
+            />
+
+            <form-field-url-alias-input
+              id="urlAlias"
+              v-model="values.urlAlias"
+              name="urlAlias"
+              :label="$t('blog:link')"
+              :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>
 
@@ -80,54 +116,55 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  ref,
-  watch,
-} from '@vue/composition-api';
+import { computed, defineComponent, ref, watch } from '@vue/composition-api';
 
 import {
   convertRequestErrorToMap,
-  Nullable,
-  useResource,
+  getWebsiteOrigin,
 } from '@tager/admin-services';
-import { OptionType, FormFooter, TagerFormSubmitEvent } from '@tager/admin-ui';
-
 import {
-  createBlogCategory,
-  getBlogCategory,
-  updateBlogCategory,
-} from '../../../services/requests';
-import { Category, Language } from '../../../typings/model';
+  OptionType,
+  FormFooter,
+  TagerFormSubmitEvent,
+  SeoChangeEvent,
+  TabType,
+  useTranslation,
+} from '@tager/admin-ui';
+
+import { createCategory, updateCategory } from '@/services/requests';
+import { CategoryFormValues, Language } from '@/typings/model';
 import {
   getBlogCategoryFormUrl,
   getBlogCategoryListUrl,
-} from '../../../constants/paths';
-import { useModuleConfig } from '../../../hooks';
+} from '@/constants/paths';
+import {
+  useFetchCategories,
+  useFetchCategory,
+  useFetchModuleConfig,
+} from '@/hooks';
+import { convertCategoryListToOptions } from '@/views/Posts/PostForm/PostForm.helpers';
 
 import {
-  CategoryFormValues,
-  convertCategoryFormValuesToCreationPayload,
-  convertCategoryFormValuesToUpdatePayload,
+  convertCategoryFormValuesToPayload,
   convertCategoryToFormValues,
 } from './CategoryForm.helpers';
 
 export default defineComponent({
-  name: 'BlogCategoryForm',
+  name: 'CategoryForm',
   components: { FormFooter },
   setup(props, context) {
+    const { t } = useTranslation(context);
     const categoryId = computed<string>(
       () => context.root.$route.params.categoryId
     );
     const isCreation = computed<boolean>(() => categoryId.value === 'create');
 
     /** Fetch module config */
+
     const {
       data: moduleConfig,
       loading: isModuleConfigLoading,
-    } = useModuleConfig({ context });
+    } = useFetchModuleConfig({ context });
 
     const languageList = computed<Language[]>(
       () => moduleConfig.value?.languages ?? []
@@ -141,36 +178,31 @@ export default defineComponent({
       () => languageOptionList.value.length > 0
     );
 
-    /** Fetch Category */
-
-    const [
-      fetchCategory,
-      { data: category, loading: isCategoryLoading },
-    ] = useResource<Nullable<Category>>({
-      fetchResource: () => getBlogCategory(categoryId.value),
-      initialValue: null,
-      context,
-      resourceName: 'Category',
-    });
+    const imageScenario = computed<string | null>(
+      () => moduleConfig.value?.fileScenarios?.openGraph ?? null
+    );
 
-    onMounted(() => {
-      if (isCreation.value) return;
+    /** Fetch Categories */
 
-      fetchCategory();
-    });
+    const {
+      data: categories,
+      loading: isCategoriesLoading,
+    } = useFetchCategories({ context });
 
-    watch(categoryId, () => {
-      if (isCreation.value) return;
+    /** Fetch Category */
 
-      fetchCategory();
+    const { data: category, loading: isCategoryLoading } = useFetchCategory({
+      context,
+      categoryId,
+      isCreation,
     });
 
     /** Form State */
+    const isSubmitting = ref<boolean>(false);
     const values = ref<CategoryFormValues>(
       convertCategoryToFormValues(category.value, languageOptionList.value)
     );
     const errors = ref<Record<string, string>>({});
-    const isSubmitting = ref<boolean>(false);
 
     watch(category, () => {
       values.value = convertCategoryToFormValues(
@@ -182,19 +214,11 @@ export default defineComponent({
     function submitForm(event: TagerFormSubmitEvent) {
       isSubmitting.value = true;
 
-      const creationBody = convertCategoryFormValuesToCreationPayload(
-        values.value
-      );
-      const updateBody = convertCategoryFormValuesToUpdatePayload(values.value);
-      if (!isCreation.value) {
-        updateBody.language = category.value?.language
-          ? category.value?.language
-          : null;
-      }
+      const body = convertCategoryFormValuesToPayload(values.value);
 
       const requestPromise = isCreation.value
-        ? createBlogCategory(creationBody)
-        : updateBlogCategory(categoryId.value, updateBody);
+        ? createCategory(body)
+        : updateCategory(categoryId.value, body);
 
       requestPromise
         .then(({ data }) => {
@@ -241,17 +265,51 @@ export default defineComponent({
         });
     }
 
+    /** Category Options */
+
+    const categoryOptionList = computed<OptionType<number>[]>(() =>
+      convertCategoryListToOptions(
+        categories.value,
+        values.value.language?.value ?? null
+      )
+    );
+
     /** Misc */
 
     const isContentLoading = computed<boolean>(
-      () => isCategoryLoading.value || isModuleConfigLoading.value
+      () =>
+        isCategoryLoading.value ||
+        isModuleConfigLoading.value ||
+        isCategoriesLoading.value
     );
 
     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 +322,15 @@ export default defineComponent({
       submitForm,
       isSubmitting,
       moduleConfig,
+      categoryOptionList,
+
+      // 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[],
@@ -31,54 +29,61 @@ export function convertCategoryList(
 
 export function getCategoryTableColumnDefs(
   moduleConfig: Nullable<ModuleConfig>,
-  t: TFunction
+  t: TFunction,
+  canViewAdministrators: boolean
 ): ColumnDefinition<Category>[] {
   const isLangSpecific = moduleConfig
     ? 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('blog:link'),
+      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,
-      name: t('blog:actions'),
-      field: 'actions',
-      style: { whiteSpace: 'nowrap', width: '205px' },
-      headStyle: { whiteSpace: 'nowrap', width: '205px' },
-      class: 'actions-cell',
-    },
+    canViewAdministrators
+      ? {
+          id: 5,
+          name: t('blog:actions'),
+          field: 'actions',
+          style: { whiteSpace: 'nowrap', width: '170px' },
+          headStyle: { whiteSpace: 'nowrap', width: '170px' },
+          class: 'actions-cell',
+        }
+      : null,
   ];
 
   return COLUMN_DEFS.filter(notEmpty);