@tager/admin-blog 0.3.21 → 0.3.25

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

@@ -0,0 +1,361 @@
+<template>
+  <page
+    :title="pageTitle"
+    :header-buttons="
+      [
+        canViewAdministrators
+          ? {
+              text: $t('blog:newPost'),
+              href: getBlogPostFormUrl({ postId: '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-post"
+        @change="handleChange"
+      >
+        <template v-slot:filters>
+          <advanced-search :tags="tags" @click:tag="tagRemovalHandler">
+            <div class="filters">
+              <form-field-multi-select
+                v-model="categoryFilter"
+                :options="categoryOptionList"
+                name="categoryFilter"
+                :searchable="true"
+                :label="$t('blog:category')"
+                class="filter"
+              />
+
+              <form-field-multi-select
+                v-if="isLangSpecific"
+                v-model="languageFilter"
+                :options="languageOptionList"
+                name="languageFilter"
+                :searchable="true"
+                :label="$t('blog:language')"
+                class="filter"
+              />
+
+              <div class="filter">
+                <div class="date-label">
+                  {{ $t('blog:dateOfPublication') }}
+                </div>
+
+                <div class="date-content">
+                  <form-field
+                    v-model="fromDateFilter"
+                    :label="$t('blog:From')"
+                    name="fromDateFilter"
+                    type="date"
+                    :max="toDateFilter"
+                  />
+
+                  <form-field
+                    v-model="toDateFilter"
+                    :label="$t('blog:To')"
+                    name="toDateFilter"
+                    type="date"
+                    :min="fromDateFilter"
+                  />
+                </div>
+              </div>
+            </div>
+          </advanced-search>
+        </template>
+
+        <template v-slot:cell(actions)="{ row }">
+          <base-button
+            v-if="canViewAdministrators"
+            variant="icon"
+            :title="$t('blog:edit')"
+            :disabled="isBusy(row.id)"
+            :href="getBlogPostFormUrl({ postId: row.id })"
+          >
+            <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="isBusy(row.id)"
+            @click="handleResourceDelete(row.id)"
+          >
+            <svg-icon name="delete" />
+          </base-button>
+        </template>
+      </data-table>
+    </template>
+  </page>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, watch } from '@vue/composition-api';
+import isEqual from 'lodash.isequal';
+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,
+  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';
+
+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] ?? ''
+        : context.root.$route.query.category;
+    });
+
+    /** Fetch module config */
+    const {
+      data: moduleConfig,
+      loading: isModuleConfigLoading,
+    } = useModuleConfig({ context });
+
+    const languageList = computed<Language[]>(
+      () => moduleConfig.value?.languages ?? []
+    );
+
+    /** Fetch category list */
+    const {
+      data: categoryList,
+      loading: isCategoryListLoading,
+    } = useBlogCategoryList({ context });
+
+    const selectedCategory = computed<Nullable<Category>>(() =>
+      categoryId.value
+        ? categoryList.value.find(
+            ({ id }) => String(id) === String(categoryId.value)
+          ) ?? null
+        : null
+    );
+
+    const pageTitle = computed<string>(() => {
+      return selectedCategory.value
+        ? `${context.root.$t('blog:postsByCategory')} "${
+            selectedCategory.value.name
+          }"`
+        : context.root.$t('blog:posts');
+    });
+
+    /** Advanced search **/
+
+    const {
+      categoryFilter,
+      categoryOptionList,
+      languageFilter,
+      languageOptionList,
+      fromDateFilter,
+      toDateFilter,
+      filterParams,
+      tags,
+      tagRemovalHandler,
+    } = useAdvancedSearch({
+      context,
+      categoryList,
+      languageList,
+    });
+
+    const isLangSpecific = computed<boolean>(
+      () => languageOptionList.value.length > 1
+    );
+
+    /** Fetch Post list */
+    const {
+      fetchEntityList: fetchPostList,
+      isLoading: isPostLoading,
+      rowData: postList,
+      errorMessage,
+      searchQuery,
+      handleChange,
+      pageNumber,
+      pageCount,
+      pageSize,
+    } = useDataTable<PostShort>({
+      fetchEntityList: (params) =>
+        getBlogPostList({
+          query: params.searchQuery,
+          pageNumber: params.pageNumber,
+          pageSize: params.pageSize,
+          ...filterParams.value,
+        }),
+      initialValue: [],
+      context,
+      resourceName: 'Blog post list',
+      pageSize: 100,
+    });
+
+    watch(filterParams, () => {
+      if (isModuleConfigLoading.value || isCategoryListLoading.value) {
+        return;
+      }
+
+      const newQuery = {
+        ...pick(context.root.$route.query, ['query', 'pageNumber']),
+        ...filterParams.value,
+      };
+
+      if (!isEqual(context.root.$route.query, newQuery)) {
+        context.root.$router.replace({ query: newQuery });
+        fetchPostList();
+      }
+    });
+
+    const displayedPostList = computed<PostShort[]>(() =>
+      convertPostList(
+        postList.value,
+        selectedCategory.value,
+        moduleConfig.value?.languages ?? []
+      )
+    );
+
+    const isRowDataLoading = computed<boolean>(
+      () =>
+        isCategoryListLoading.value ||
+        isPostLoading.value ||
+        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)
+    );
+
+    return {
+      columnDefs,
+      rowData: displayedPostList,
+      handleResourceDelete,
+      isDeleting,
+      categoryList,
+      isRowDataLoading,
+      errorMessage,
+      getBlogPostFormUrl,
+      pageTitle,
+      searchQuery,
+      handleChange,
+      pageNumber,
+      pageCount,
+      pageSize,
+
+      // Advanced search
+      categoryFilter,
+      categoryOptionList,
+      isLangSpecific,
+      languageFilter,
+      languageOptionList,
+      fromDateFilter,
+      toDateFilter,
+      tags,
+      tagRemovalHandler,
+
+      // Permissions
+      canViewAdministrators,
+
+      // Clone
+      handleResourceClone,
+      isBusy,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.filters {
+  display: flex;
+  margin: 0 -10px;
+
+  &:not(:first-child) {
+    margin-top: 10px;
+  }
+
+  .filter {
+    padding: 10px 10px 0;
+    width: 50%;
+    margin: 0;
+  }
+}
+
+.date-label {
+  margin-bottom: 0.5rem;
+}
+
+.date-content {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 10px;
+}
+</style>

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

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

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

@@ -0,0 +1,250 @@
+import {
+  computed,
+  ComputedRef,
+  Ref,
+  ref,
+  SetupContext,
+  watch,
+} from '@vue/composition-api';
+
+import {
+  FilterTagType,
+  getFilterParamAsString,
+  getFilterParamAsStringArray,
+  getFilterParams,
+  OptionType,
+} from '@tager/admin-ui';
+import { isNotNullish } from '@tager/admin-services';
+
+import { Category, Language } from '@/typings/model';
+import { getNameWithDepth } from '@/utils/common';
+
+interface Params {
+  context: SetupContext;
+  categoryList: ComputedRef<Category[]>;
+  languageList: ComputedRef<Language[]>;
+}
+
+interface State {
+  categoryFilter: Ref<OptionType[]>;
+  categoryOptionList: ComputedRef<OptionType[]>;
+  languageFilter: Ref<OptionType[]>;
+  languageOptionList: ComputedRef<OptionType[]>;
+  fromDateFilter: Ref<string>;
+  toDateFilter: Ref<string>;
+  filterParams: ComputedRef<Record<string, string | string[]>>;
+  tags: ComputedRef<FilterTagType[]>;
+  tagRemovalHandler(event: FilterTagType): void;
+}
+
+enum FilterTypes {
+  CATEGORY = 'category',
+  LANGUAGE = 'language',
+  FROM_DATE = 'from-date',
+  TO_DATE = 'to-date',
+}
+
+export const dateFormat = (date: string) => date.split('-').reverse().join('.');
+
+export function useAdvancedSearch({
+  context,
+  categoryList,
+  languageList,
+}: Params): State {
+  /** Category **/
+
+  const categoryOptionList = computed<OptionType[]>(() =>
+    categoryList.value.map(({ id, name, depth }) => ({
+      value: String(id),
+      label: getNameWithDepth(name, depth),
+    }))
+  );
+
+  const initialCategoryFilter = computed<OptionType[]>(() => {
+    const queryValue = getFilterParamAsStringArray(
+      context.root.$route.query,
+      FilterTypes.CATEGORY
+    );
+    return categoryOptionList.value.filter(({ value }) =>
+      queryValue.some((selected) => selected === value)
+    );
+  });
+
+  const categoryFilter = ref<OptionType[]>(initialCategoryFilter.value);
+
+  watch(initialCategoryFilter, () => {
+    categoryFilter.value = initialCategoryFilter.value;
+  });
+
+  /** 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;
+  });
+
+  /** From date **/
+
+  const initialFromDateFilter = computed<string>(
+    () =>
+      getFilterParamAsString(
+        context.root.$route.query,
+        FilterTypes.FROM_DATE
+      ) ?? ''
+  );
+
+  const fromDateFilter = ref<string>(initialFromDateFilter.value);
+
+  watch(initialFromDateFilter, () => {
+    fromDateFilter.value = initialFromDateFilter.value;
+  });
+
+  /** To date **/
+
+  const initialToDateFilter = computed<string>(
+    () =>
+      getFilterParamAsString(context.root.$route.query, FilterTypes.TO_DATE) ??
+      ''
+  );
+
+  const toDateFilter = ref<string>(initialToDateFilter.value);
+
+  watch(initialToDateFilter, () => {
+    toDateFilter.value = initialToDateFilter.value;
+  });
+
+  /** Date **/
+
+  const date = computed<FilterTagType | null>(() => {
+    if (!fromDateFilter.value && !toDateFilter.value) {
+      return null;
+    }
+
+    let label = '';
+
+    if (fromDateFilter.value && toDateFilter.value) {
+      label = `${dateFormat(fromDateFilter.value)} - ${dateFormat(
+        toDateFilter.value
+      )}`;
+    }
+
+    if (fromDateFilter.value && !toDateFilter.value) {
+      label = `${context.root.$t('blog:from')} ${dateFormat(
+        fromDateFilter.value
+      )}`;
+    }
+
+    if (!fromDateFilter.value && toDateFilter.value) {
+      label = `${context.root.$t('blog:to')} ${dateFormat(toDateFilter.value)}`;
+    }
+
+    return {
+      value: '',
+      label,
+      name: FilterTypes.FROM_DATE,
+      title: context.root.$t('blog:dateOfPublication'),
+    };
+  });
+
+  /** Params **/
+
+  const filterParams = computed(() => {
+    const filters: Record<string, string | string[]> = {
+      [FilterTypes.CATEGORY]: categoryFilter.value.map(({ value }) => value),
+      [FilterTypes.LANGUAGE]: languageFilter.value.map(({ value }) => value),
+    };
+
+    if (fromDateFilter.value) {
+      filters[FilterTypes.FROM_DATE] = fromDateFilter.value;
+    }
+
+    if (toDateFilter.value) {
+      filters[FilterTypes.TO_DATE] = toDateFilter.value;
+    }
+
+    return getFilterParams(filters);
+  });
+
+  /** Tag removal handler **/
+
+  function tagRemovalHandler(event: FilterTagType) {
+    if (event.name === FilterTypes.CATEGORY) {
+      categoryFilter.value = categoryFilter.value.filter(
+        ({ value }) => value !== event.value
+      );
+    }
+    if (event.name === FilterTypes.LANGUAGE) {
+      languageFilter.value = languageFilter.value.filter(
+        ({ value }) => value !== event.value
+      );
+    }
+    if (event.name === FilterTypes.FROM_DATE) {
+      fromDateFilter.value = '';
+      toDateFilter.value = '';
+    }
+  }
+
+  /** Tags **/
+
+  const tags = computed<FilterTagType[]>(() =>
+    [
+      ...categoryFilter.value.map(({ value, label }) => ({
+        value,
+        label,
+        name: FilterTypes.CATEGORY,
+        title: context.root.$t('blog:category'),
+      })),
+      ...languageFilter.value.map(({ value, label }) => ({
+        value,
+        label,
+        name: FilterTypes.LANGUAGE,
+        title: context.root.$t('blog:language'),
+      })),
+      date.value,
+    ].filter(isNotNullish)
+  );
+
+  /** Helpers **/
+
+  const selectedCategoryOptionList = computed<OptionType[]>(() => {
+    if (languageFilter.value.length === 0) {
+      return categoryOptionList.value;
+    }
+
+    const selectedList = categoryList.value.filter(({ language }) =>
+      languageFilter.value.some(({ value }) => value === language)
+    );
+
+    return selectedList.map(({ id, name, depth }) => ({
+      value: String(id),
+      label: getNameWithDepth(name, depth),
+    }));
+  });
+
+  return {
+    categoryFilter,
+    categoryOptionList: selectedCategoryOptionList,
+    languageFilter,
+    languageOptionList,
+    fromDateFilter,
+    toDateFilter,
+    tagRemovalHandler,
+    tags: tags,
+    filterParams,
+  };
+}

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

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

package/dist/constants/menu.d.ts

@@ -1,5 +0,0 @@
-import { MenuItemType } from '@tager/admin-layout';
-import { TranslateFunction } from '@tager/admin-services';
-export declare function getBlogMenuItem(params: {
-    t: TranslateFunction;
-}): MenuItemType;

package/dist/constants/paths.d.ts

@@ -1,16 +0,0 @@
-export declare const BLOG_ROUTE_PATHS: {
-    readonly POST_LIST: "/blog/posts";
-    readonly POST_FORM: "/blog/posts/:postId";
-    readonly CATEGORY_LIST: "/blog/categories";
-    readonly CATEGORY_FORM: "/blog/categories/:categoryId";
-    readonly SETTINGS: "/blog/settings";
-};
-export declare function getBlogPostListUrl(): "/blog/posts";
-export declare function getBlogPostFormUrl(params: {
-    postId: number | string;
-}): string;
-export declare function getBlogCategoryListUrl(): "/blog/categories";
-export declare function getBlogCategoryFormUrl(params: {
-    categoryId: number | string;
-}): string;
-export declare function getBlogSettingsUrl(): "/blog/settings";

package/dist/constants/routes.d.ts

@@ -1,6 +0,0 @@
-import { CustomRouteConfig } from '@tager/admin-layout';
-export declare const BLOG_POST_LIST_ROUTE: CustomRouteConfig;
-export declare const BLOG_POST_FORM_ROUTE: CustomRouteConfig;
-export declare const BLOG_CATEGORY_LIST_ROUTE: CustomRouteConfig;
-export declare const BLOG_CATEGORY_FORM_ROUTE: CustomRouteConfig;
-export declare const BLOG_SETTINGS_ROUTE: CustomRouteConfig;

package/dist/dev.d.ts

@@ -1,3 +0,0 @@
-import { CustomRouteConfig } from '@tager/admin-layout';
-import '@tager/admin-ui/dist/admin-ui.css';
-export declare const HOME_ROUTE: CustomRouteConfig;

package/dist/hooks/useBlogCategoryList.d.ts

@@ -1,7 +0,0 @@
-import { SetupContext } from '@vue/composition-api';
-import { ResourceRef } from '@tager/admin-services';
-import { BlogCategory } from '../typings/model';
-export declare function useBlogCategoryList(params: {
-    context: SetupContext;
-}): ResourceRef<Array<BlogCategory>>;
-export default useBlogCategoryList;

package/dist/hooks/useBlogPostList.d.ts

@@ -1,7 +0,0 @@
-import { SetupContext } from '@vue/composition-api';
-import { ResourceRef } from '@tager/admin-services';
-import { PostShort } from '../typings/model';
-export declare function useBlogPostList(params: {
-    context: SetupContext;
-}): ResourceRef<Array<PostShort>>;
-export default useBlogPostList;

package/dist/hooks/useModuleConfig.d.ts

@@ -1,7 +0,0 @@
-import { SetupContext } from '@vue/composition-api';
-import { Nullable, ResourceRef } from '@tager/admin-services';
-import { BlogModuleConfigType } from '../typings/model';
-export declare function useModuleConfig(params: {
-    context: SetupContext;
-}): ResourceRef<Nullable<BlogModuleConfigType>>;
-export default useModuleConfig;