@tager/admin-blog 0.3.21 → 0.3.25

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

@@ -0,0 +1,91 @@
+import { TFunction } from 'i18next';
+
+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 { getNameWithDepth } from '@/utils/common';
+
+export function convertCategoryList(
+  categoryList: Category[],
+  languages: Language[]
+): Category[] {
+  return categoryList.map((category) => {
+    if (languages.length > 0) {
+      const foundLanguage = languages.find(
+        ({ id }) => category.language === id
+      );
+
+      return {
+        ...category,
+        language: foundLanguage ? foundLanguage.name : category.language,
+      };
+    }
+
+    return category;
+  });
+}
+
+export function getCategoryTableColumnDefs(
+  moduleConfig: Nullable<ModuleConfig>,
+  t: TFunction
+): ColumnDefinition<Category>[] {
+  const isLangSpecific = moduleConfig
+    ? moduleConfig.languages.length > 0
+    : false;
+
+  const COLUMN_DEFS: (ColumnDefinition<Category> | null)[] = [
+    {
+      id: 1,
+      name: t('blog:name'),
+      field: 'name',
+      type: 'name',
+      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: 3, name: t('blog:language'), field: 'language' }
+      : null,
+    {
+      id: 4,
+      name: t('blog:posts'),
+      field: 'linkToPosts',
+      style: { whiteSpace: 'nowrap', width: '130px' },
+    },
+    {
+      id: 5,
+      name: t('blog:actions'),
+      field: 'actions',
+      style: { whiteSpace: 'nowrap', width: '205px' },
+      headStyle: { whiteSpace: 'nowrap', width: '205px' },
+      class: 'actions-cell',
+    },
+  ];
+
+  return COLUMN_DEFS.filter(notEmpty);
+}
+
+export function getLinkToPostsByCategory(categoryId: number): string {
+  return `${getBlogPostListUrl()}?filter[category]=${categoryId}`;
+}

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

@@ -0,0 +1,269 @@
+<template>
+  <page
+    :title="$t('blog:blogCategories')"
+    :header-buttons="
+      [
+        canViewAdministrators
+          ? {
+              text: $t('blog:newCategory'),
+              href: getBlogCategoryFormUrl({ categoryId: 'create' }),
+            }
+          : null,
+      ].filter(Boolean)
+    "
+  >
+    <template v-slot:content>
+      <data-table
+        :column-defs="columnDefs"
+        :row-data="rowData"
+        :loading="isRowDataLoading"
+        :error-message="errorMessage"
+        :search-query="searchQuery"
+        :pagination="{
+          pageNumber,
+          pageCount,
+          pageSize,
+          disabled: isRowDataLoading,
+        }"
+        data-table="blog-category"
+        @change="handleChange"
+      >
+        <template v-if="isLangSpecific" v-slot:filters>
+          <advanced-search :tags="tags" @click:tag="tagRemovalHandler">
+            <div class="filters">
+              <form-field-multi-select
+                v-model="languageFilter"
+                :options="languageOptionList"
+                name="languageFilter"
+                :searchable="true"
+                :label="$t('blog:language')"
+                class="filter"
+              />
+            </div>
+          </advanced-search>
+        </template>
+
+        <template v-slot:cell(link-to-posts)="{ row }">
+          <count-button
+            :href="getLinkToPostsByCategory(row.id)"
+            variant="outline-secondary"
+            :count="row.postsCount"
+          >
+            {{ $t('blog:posts') }}
+          </count-button>
+        </template>
+
+        <template v-slot:cell(actions)="{ row, rowIndex }">
+          <base-button
+            v-if="canViewAdministrators"
+            variant="icon"
+            :title="$t('blog:edit')"
+            :disabled="isDeleting(row.id)"
+            :href="getBlogCategoryFormUrl({ categoryId: row.id })"
+          >
+            <svg-icon name="edit" />
+          </base-button>
+
+          <base-button
+            variant="icon"
+            :title="$t('blog:moveUp')"
+            :disabled="rowIndex === 0 || isCategoryMoving"
+            @click="moveCategory(row.id, 'up')"
+          >
+            <svg-icon name="north" />
+          </base-button>
+
+          <base-button
+            variant="icon"
+            :title="$t('blog:moveDown')"
+            :disabled="rowIndex === rowData.length - 1 || isCategoryMoving"
+            @click="moveCategory(row.id, 'down')"
+          >
+            <svg-icon name="south" />
+          </base-button>
+
+          <base-button
+            v-if="canViewAdministrators"
+            variant="icon"
+            :title="$t('blog:remove')"
+            :disabled="isDeleting(row.id) || row.postsCount > 0"
+            @click="handleCategoryDelete(row.id)"
+          >
+            <svg-icon name="delete" />
+          </base-button>
+        </template>
+      </data-table>
+    </template>
+  </page>
+</template>
+
+<script lang="ts">
+import { computed, ref, defineComponent, watch } from '@vue/composition-api';
+import isEqual from 'lodash.isequal';
+
+import { useResourceDelete } from '@tager/admin-services';
+import { useDataTable } from '@tager/admin-ui';
+
+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, useUserPermission } from '@/hooks';
+
+import {
+  convertCategoryList,
+  getCategoryTableColumnDefs,
+  getLinkToPostsByCategory,
+} from './CategoryList.helpers';
+import { useAdvancedSearch } from './hooks';
+
+export default defineComponent({
+  name: 'BlogCategoryList',
+  setup(props, context) {
+    const canViewAdministrators = useUserPermission(
+      context,
+      Scope.AdministratorsView
+    );
+
+    /** Fetch module config */
+
+    const {
+      data: moduleConfig,
+      loading: isModuleConfigLoading,
+    } = useModuleConfig({ context });
+
+    const languageList = computed<Language[]>(
+      () => moduleConfig.value?.languages ?? []
+    );
+
+    /** Advanced search **/
+
+    const {
+      languageFilter,
+      languageOptionList,
+      filterParams,
+      tags,
+      tagRemovalHandler,
+    } = useAdvancedSearch({ context, languageList });
+
+    const isLangSpecific = computed<boolean>(
+      () => languageOptionList.value.length > 1
+    );
+
+    /** Fetch category list */
+
+    const {
+      fetchEntityList: fetchCategoryList,
+      isLoading: isCategoryListLoading,
+      rowData: categoryList,
+      errorMessage,
+      searchQuery,
+      handleChange,
+      pageNumber,
+      pageCount,
+      pageSize,
+    } = useDataTable<Category>({
+      fetchEntityList: (params) =>
+        getBlogCategoryList({
+          query: params.searchQuery,
+          pageNumber: params.pageNumber,
+          pageSize: params.pageSize,
+          ...filterParams.value,
+        }),
+      initialValue: [],
+      context,
+      resourceName: 'Blog category list',
+      pageSize: 100,
+    });
+
+    watch(filterParams, () => {
+      if (isModuleConfigLoading.value || isCategoryListLoading.value) {
+        return;
+      }
+
+      const newQuery = {
+        ...filterParams.value,
+        query: (context.root.$route.query.query ?? '') as string,
+      };
+
+      if (!isEqual(context.root.$route.query, newQuery)) {
+        context.root.$router.replace({ query: newQuery });
+        fetchCategoryList();
+      }
+    });
+
+    const {
+      isDeleting,
+      handleResourceDelete: handleCategoryDelete,
+    } = useResourceDelete({
+      deleteResource: deleteBlogCategory,
+      resourceName: 'Post',
+      onSuccess: fetchCategoryList,
+      context,
+    });
+
+    const isCategoryMoving = ref<boolean>(false);
+
+    function moveCategory(categoryId: number, direction: 'up' | 'down') {
+      isCategoryMoving.value = true;
+
+      moveBlogCategory(categoryId, direction)
+        .then((response) => {
+          if (response.success) {
+            return fetchCategoryList();
+          }
+        })
+        .catch(console.error)
+        .finally(() => {
+          isCategoryMoving.value = false;
+        });
+    }
+
+    /** Misc */
+
+    const isRowDataLoading = computed<boolean>(
+      () => isCategoryListLoading.value || isModuleConfigLoading.value
+    );
+
+    const displayedCategoryList = computed<Category[]>(() =>
+      convertCategoryList(categoryList.value, languageList.value)
+    );
+
+    const columnDefs = computed(() =>
+      getCategoryTableColumnDefs(moduleConfig.value, context.root.$t)
+    );
+
+    return {
+      columnDefs,
+      rowData: displayedCategoryList,
+      isRowDataLoading,
+      errorMessage,
+      isLangSpecific,
+      handleCategoryDelete,
+      isDeleting,
+      getBlogCategoryFormUrl,
+      getLinkToPostsByCategory,
+      moveCategory,
+      isCategoryMoving,
+
+      searchQuery,
+      handleChange,
+      pageNumber,
+      pageCount,
+      pageSize,
+
+      languageFilter,
+      languageOptionList,
+      tags,
+      tagRemovalHandler,
+
+      // Permissions
+      canViewAdministrators,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1 @@
+export { useAdvancedSearch } from './useAdvancedSearch';

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

@@ -0,0 +1,95 @@
+import {
+  computed,
+  ComputedRef,
+  Ref,
+  ref,
+  SetupContext,
+  watch,
+} from '@vue/composition-api';
+
+import {
+  FilterTagType,
+  getFilterParamAsStringArray,
+  getFilterParams,
+  OptionType,
+} from '@tager/admin-ui';
+
+import { Language } from '@/typings/model';
+
+interface Params {
+  context: SetupContext;
+  languageList: ComputedRef<Language[]>;
+}
+
+interface State {
+  languageFilter: Ref<OptionType[]>;
+  languageOptionList: ComputedRef<OptionType[]>;
+  filterParams: ComputedRef<Record<string, string | string[]>>;
+  tags: ComputedRef<FilterTagType[]>;
+  tagRemovalHandler(event: FilterTagType): void;
+}
+
+enum FilterTypes {
+  LANGUAGE = 'language',
+}
+
+export function useAdvancedSearch({ context, languageList }: Params): State {
+  /** Language **/
+
+  const languageOptionList = computed<OptionType[]>(() =>
+    languageList.value.map(({ id, name }) => ({ value: id, label: name }))
+  );
+
+  const initialLanguageFilter = computed<OptionType[]>(() => {
+    const queryValue = getFilterParamAsStringArray(
+      context.root.$route.query,
+      FilterTypes.LANGUAGE
+    );
+    return languageOptionList.value.filter(({ value }) =>
+      queryValue.some((selected) => selected === value)
+    );
+  });
+
+  const languageFilter = ref<OptionType[]>(initialLanguageFilter.value);
+
+  watch(initialLanguageFilter, () => {
+    languageFilter.value = initialLanguageFilter.value;
+  });
+
+  /** Params **/
+
+  const filterParams = computed(() =>
+    getFilterParams({
+      [FilterTypes.LANGUAGE]: languageFilter.value.map(({ value }) => value),
+    })
+  );
+
+  /** Tag removal handler **/
+
+  function tagRemovalHandler(event: FilterTagType) {
+    if (event.name === FilterTypes.LANGUAGE) {
+      languageFilter.value = languageFilter.value.filter(
+        ({ value }) => value !== event.value
+      );
+    }
+  }
+
+  /** Tags **/
+
+  const tags = computed<FilterTagType[]>(() => [
+    ...languageFilter.value.map(({ value, label }) => ({
+      value,
+      label,
+      name: FilterTypes.LANGUAGE,
+      title: context.root.$t('blog:language'),
+    })),
+  ]);
+
+  return {
+    languageFilter,
+    languageOptionList,
+    tagRemovalHandler,
+    tags: tags,
+    filterParams,
+  };
+}

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

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

package/src/views/Home.vue

@@ -7,16 +7,12 @@ import { defineComponent, ref } from '@vue/composition-api';
 
 import { NavigationGridItem } from '@tager/admin-ui';
 
-import {
-  getBlogCategoryListUrl,
-  getBlogPostListUrl,
-  getBlogSettingsUrl,
-} from '../constants/paths';
+import { getBlogCategoryListUrl, getBlogPostListUrl } from '@/constants/paths';
 
 export default defineComponent({
   name: 'Home',
   setup(props, context) {
-    const navItemList = ref<Array<NavigationGridItem>>([
+    const navItemList = ref<NavigationGridItem[]>([
       {
         name: context.root.$t('blog:blog'),
         linkList: [
@@ -25,7 +21,6 @@ export default defineComponent({
             url: getBlogCategoryListUrl(),
             text: context.root.$t('blog:categories'),
           },
-          { url: getBlogSettingsUrl(), text: context.root.$t('blog:settings') },
         ],
       },
     ]);
@@ -34,5 +29,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style scoped lang="scss"></style>

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

@@ -0,0 +1,150 @@
+import { createId, Nullable } from '@tager/admin-services';
+import { OptionType, SingleFileInputValueType } from '@tager/admin-ui';
+import {
+  FieldConfigUnion,
+  FieldUnion,
+  universalFieldUtils,
+} from '@tager/admin-dynamic-field';
+
+import { Category, PostFull } from '@/typings/model';
+import { PostCreationPayload, PostUpdatePayload } from '@/services/requests';
+
+export interface FormValues {
+  title: string;
+  excerpt: string;
+  body: string;
+  date: string;
+  coverImage: Nullable<SingleFileInputValueType>;
+  image: Nullable<SingleFileInputValueType>;
+  imageMobile: Nullable<SingleFileInputValueType>;
+  pageTitle: string;
+  pageDescription: string;
+  openGraphImage: Nullable<SingleFileInputValueType>;
+  urlAlias: string;
+  categories: OptionType<number>[];
+  language: Nullable<OptionType>;
+  relatedPosts: OptionType<number>[];
+  tags: string;
+  additionalFields: FieldUnion[];
+}
+
+export function convertPostToFormValues(
+  post: Nullable<PostFull>,
+  languageOptionList: OptionType[],
+  postOptionList: OptionType<number>[],
+  additionalFieldList: FieldConfigUnion[]
+): FormValues {
+  if (!post) {
+    return {
+      title: '',
+      excerpt: '',
+      body: '',
+      date: '',
+      coverImage: null,
+      image: null,
+      imageMobile: null,
+      pageTitle: '',
+      pageDescription: '',
+      openGraphImage: null,
+      urlAlias: '',
+      categories: [],
+      language: null,
+      relatedPosts: [],
+      tags: '',
+      additionalFields: additionalFieldList.map((fieldConfig) =>
+        universalFieldUtils.createFormField(fieldConfig, null)
+      ),
+    };
+  }
+
+  const currentLangOption = languageOptionList.find(
+    (option) => option.value === post.language
+  );
+
+  const selectedPostOptionList = postOptionList.filter((option) =>
+    post.relatedPosts.some((relatedPost) => relatedPost.id === option.value)
+  );
+
+  return {
+    title: post.title,
+    excerpt: post.excerpt,
+    body: post.body,
+    date: post.date,
+    coverImage: post.coverImage
+      ? { id: createId(), file: post.coverImage }
+      : null,
+    image: post.image ? { id: createId(), file: post.image } : null,
+    imageMobile: post.imageMobile
+      ? { id: createId(), file: post.imageMobile }
+      : null,
+    pageTitle: post.pageTitle ?? '',
+    pageDescription: post.pageDescription ?? '',
+    openGraphImage: post.openGraphImage
+      ? { id: createId(), file: post.openGraphImage }
+      : null,
+    urlAlias: post.urlAlias,
+    categories: post.categories.map((category) => ({
+      value: category.id,
+      label: category.name,
+    })),
+    language: currentLangOption ?? null,
+    relatedPosts: selectedPostOptionList,
+    tags: post.tags.join(','),
+    additionalFields: additionalFieldList.map((fieldConfig, index) => {
+      const postAdditionalField = post.additionalFields.find(
+        (item) => item.name === fieldConfig.name
+      );
+      return universalFieldUtils.createFormField(
+        fieldConfig,
+        postAdditionalField?.value
+      );
+    }),
+  };
+}
+
+export function convertFormValuesToCreationPayload(
+  values: FormValues
+): PostCreationPayload {
+  return {
+    title: values.title,
+    excerpt: values.excerpt,
+    urlAlias: values.urlAlias,
+    body: values.body,
+    date: values.date,
+    coverImage: values.coverImage?.file.id ?? null,
+    image: values.image?.file.id ?? null,
+    imageMobile: values.imageMobile?.file.id ?? null,
+    pageTitle: values.pageTitle,
+    pageDescription: values.pageDescription,
+    openGraphImage: values.openGraphImage?.file.id ?? null,
+    status: 'PUBLISHED',
+    categories: values.categories.map((option) => option.value),
+    language: values.language?.value ?? null,
+    relatedPosts: values.relatedPosts.map(
+      (relatedPostOption) => relatedPostOption.value
+    ),
+    tags: values.tags.split(',').filter((tag) => tag.trim().length > 0),
+    additionalFields: values.additionalFields.map((field) => ({
+      name: field.config.name,
+      value: universalFieldUtils.getOutgoingValue(field),
+    })),
+  };
+}
+
+export function convertFormValuesToUpdatePayload(
+  values: FormValues
+): PostUpdatePayload {
+  return {
+    ...convertFormValuesToCreationPayload(values),
+    urlAlias: values.urlAlias,
+  };
+}
+
+export function convertCategoryListToOptions(
+  categoryList: Category[],
+  languageId: Nullable<string>
+): OptionType<number>[] {
+  return categoryList
+    .filter(({ language }) => (languageId ? language === languageId : true))
+    .map(({ id, name }) => ({ value: id, label: name }));
+}