@tager/admin-blog 0.3.38 → 0.3.42

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

@@ -7,7 +7,7 @@ import {
   Category,
   ModuleConfig,
   Language,
-  PostShort
+  PostShort,
 } from '../../../typings/model';
 import { getBlogPostFormUrl } from '../../../constants/paths';
 
@@ -28,7 +28,7 @@ export function convertPostList(
 
         return {
           ...post,
-          language: foundLanguage ? foundLanguage.name : post.language
+          language: foundLanguage ? foundLanguage.name : post.language,
         };
       }
 
@@ -41,7 +41,7 @@ export function getStatuses(t: TFunction): Record<string, string> {
     PUBLISHED: t('blog:statusPublished'),
     DRAFT: t('blog:statusDraft'),
     ARCHIVED: t('blog:statusArchived'),
-  }
+  };
 }
 
 export function getPostTableColumnDefs(
@@ -58,7 +58,7 @@ export function getPostTableColumnDefs(
       name: 'ID',
       field: 'id',
       style: { width: '50px', textAlign: 'center' },
-      headStyle: { width: '50px', textAlign: 'center' }
+      headStyle: { width: '50px', textAlign: 'center' },
     },
     {
       id: 2,
@@ -66,55 +66,58 @@ export function getPostTableColumnDefs(
       field: 'status',
       style: { width: '120px' },
       headStyle: { width: '120px' },
-      format: ({ row }) => {
-        return getStatuses(t)[row.status];
-      }
     },
     {
-      id: 2,
+      id: 3,
       name: t('blog:name'),
       field: 'name',
       type: 'name',
       format: ({ row }) => ({
         adminLink: {
           text: row.title,
-          url: getBlogPostFormUrl({ postId: row.id })
+          url: getBlogPostFormUrl({ postId: row.id }),
         },
         websiteLink: {
           text: row.url,
           url: [
             process.env.VUE_APP_WEBSITE_URL || window.location.origin,
-            row.url
-          ].join('')
-        }
-      })
+            row.url,
+          ].join(''),
+        },
+      }),
     },
     {
-      id: 3,
+      id: 4,
       name: t('blog:image'),
       field: 'image',
       type: 'image',
       style: { width: '250px' },
-      headStyle: { width: '250px' }
+      headStyle: { width: '250px' },
     },
     isLangSpecific
-      ? { id: 4, name: t('blog:language'), field: 'language' }
+      ? { id: 5, name: t('blog:language'), field: 'language' }
       : null,
-    { id: 5, name: t('blog:date'), field: 'datetime', type: 'datetime', options: { ignoreStartOfDayTime: true } },
     {
       id: 6,
+      name: t('blog:date'),
+      field: 'datetime',
+      type: 'datetime',
+      options: { ignoreStartOfDayTime: true },
+    },
+    {
+      id: 7,
       name: t('blog:categories'),
       field: 'categories',
       format: ({ row }) =>
-        row.categories.map((category) => category.name).join(', ')
+        row.categories.map((category) => category.name).join(', '),
     },
     {
-      id: 7,
+      id: 8,
       name: t('blog:actions'),
       field: 'actions',
       style: { whiteSpace: 'nowrap', width: '120px' },
-      headStyle: { whiteSpace: 'nowrap', width: '120px' }
-    }
+      headStyle: { whiteSpace: 'nowrap', width: '120px' },
+    },
   ];
 
   return COLUMN_DEFS.filter(notEmpty);

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

@@ -1,6 +1,6 @@
 <template>
   <page
-    :title="pageTitle"
+    :title='pageTitle'
     :header-buttons="[
       {
         text: $t('blog:newPost'),
@@ -10,95 +10,116 @@
   >
     <template v-slot:content>
       <data-table
-        :column-defs="columnDefs"
-        :row-data="rowData"
-        :loading="isRowDataLoading"
-        :error-message="errorMessage"
-        :search-query="searchQuery"
-        :pagination="{
+        :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"
+        }'
+        data-table='blog-post'
+        @change='handleChange'
       >
         <template v-slot:filters>
-          <advanced-search :tags="tags" @click:tag="tagRemovalHandler">
-            <div class="filters">
+          <advanced-search :tags='tags' @click:tag='tagRemovalHandler'>
+            <div class='filters'>
               <form-field-multi-select
-                v-model="categoryFilter"
-                :options="categoryOptionList"
-                name="categoryFilter"
-                :searchable="true"
+                v-model='categoryFilter'
+                :options='categoryOptionList'
+                name='categoryFilter'
+                :searchable='true'
                 :label="$t('blog:category')"
-                class="filter"
+                class='filter'
               />
 
               <form-field-multi-select
-                v-if="isLangSpecific"
-                v-model="languageFilter"
-                :options="languageOptionList"
-                name="languageFilter"
-                :searchable="true"
+                v-if='isLangSpecific'
+                v-model='languageFilter'
+                :options='languageOptionList'
+                name='languageFilter'
+                :searchable='true'
                 :label="$t('blog:language')"
-                class="filter"
+                class='filter'
               />
 
-              <div class="filter">
-                <div class="date-label">
+              <div class='filter'>
+                <div class='date-label'>
                   {{ $t('blog:dateOfPublication') }}
                 </div>
 
-                <div class="date-content">
+                <div class='date-content'>
                   <form-field
-                    v-model="fromDateFilter"
+                    v-model='fromDateFilter'
                     :label="$t('blog:From')"
-                    name="fromDateFilter"
-                    type="date"
-                    :max="toDateFilter"
+                    name='fromDateFilter'
+                    type='date'
+                    :max='toDateFilter'
                   />
 
                   <form-field
-                    v-model="toDateFilter"
+                    v-model='toDateFilter'
                     :label="$t('blog:To')"
-                    name="toDateFilter"
-                    type="date"
-                    :min="fromDateFilter"
+                    name='toDateFilter'
+                    type='date'
+                    :min='fromDateFilter'
                   />
                 </div>
               </div>
+
+              <form-field-multi-select
+                v-model='statusFilter'
+                :options='statusOptionList'
+                name='statusFilter'
+                :searchable='true'
+                :label="$t('blog:status')"
+                class='filter'
+              />
             </div>
           </advanced-search>
         </template>
 
-        <template v-slot:cell(actions)="{ row }">
+        <template v-slot:cell(status)='{ row }'>
+          <div class='status'>
+            <span>{{ getStatuses(t)[row.status] }}</span>
+            <span v-if='row.status === "PUBLISHED" && row.archiveAt'>
+              {{ t('blog:publishAtLabel') }}: <i>{{ formatDateTime(new Date(row.archiveAt), true) }}</i>
+             </span>
+            <span v-if='row.status === "DRAFT" && row.publishAt'>
+              {{ t('blog:publishAtLabel') }}: <i>{{ formatDateTime(new Date(row.publishAt), true) }}</i>
+            </span>
+          </div>
+        </template>
+
+        <template v-slot:cell(actions)='{ row }'>
           <base-button
-            variant="icon"
+            variant='icon'
             :title="$t('blog:edit')"
-            :disabled="isBusy(row.id)"
-            :href="getBlogPostFormUrl({ postId: row.id })"
+            :disabled='isBusy(row.id)'
+            :href='getBlogPostFormUrl({ postId: row.id })'
           >
-            <svg-icon name="edit" />
+            <svg-icon name='edit' />
           </base-button>
 
           <base-button
-            variant="icon"
+            variant='icon'
             :title="$t('blog:clone')"
-            :disabled="isBusy(row.id)"
-            @click="handleResourceClone(row.id)"
+            :disabled='isBusy(row.id)'
+            @click='handleResourceClone(row.id)'
           >
-            <svg-icon name="contentCopy" />
+            <svg-icon name='contentCopy' />
           </base-button>
 
           <base-button
-            variant="icon"
+            variant='icon'
             :title="$t('blog:remove')"
-            :disabled="isBusy(row.id)"
-            @click="handleResourceDelete(row.id)"
+            :disabled='isBusy(row.id)'
+            @click='handleResourceDelete(row.id)'
           >
-            <svg-icon name="delete" />
+            <svg-icon name='delete' />
           </base-button>
         </template>
       </data-table>
@@ -106,37 +127,40 @@
   </page>
 </template>
 
-<script lang="ts">
+<script lang='ts'>
 import { computed, defineComponent, watch } from '@vue/composition-api';
 import isEqual from 'lodash.isequal';
 import pick from 'lodash.pick';
 
 import {
   ColumnDefinition,
+  OptionType,
   useDataTable,
   useTranslation,
+  formatDateTime
 } from '@tager/admin-ui';
 import {
   Nullable,
   useResourceClone,
-  useResourceDelete,
+  useResourceDelete
 } from '@tager/admin-services';
 
 import { useFetchModuleConfig, useFetchCategories } from '../../../hooks';
 import {
   clonePost,
   deleteBlogPost,
-  getPosts,
+  getPosts
 } from '../../../services/requests';
 import { getBlogPostFormUrl } from '../../../constants/paths';
 import {
   Category,
   Language,
   PostFull,
-  PostShort,
+  PostShort
 } from '../../../typings/model';
+import { getStatusOptions } from '../PostForm/PostForm.helpers';
 
-import { convertPostList, getPostTableColumnDefs } from './PostList.helpers';
+import { convertPostList, getPostTableColumnDefs, getStatuses } from './PostList.helpers';
 import { useAdvancedSearch } from './hooks';
 
 export default defineComponent({
@@ -150,11 +174,13 @@ export default defineComponent({
         : context.root.$route.query.category;
     });
 
+    const statusOptionList = computed<OptionType[]>(() => getStatusOptions(t));
+
     /** Fetch module config **/
 
     const {
       data: moduleConfig,
-      loading: isModuleConfigLoading,
+      loading: isModuleConfigLoading
     } = useFetchModuleConfig({ context });
 
     const languageList = computed<Language[]>(
@@ -165,22 +191,22 @@ export default defineComponent({
 
     const {
       data: categoryList,
-      loading: isCategoryListLoading,
+      loading: isCategoryListLoading
     } = useFetchCategories({ context });
 
     const selectedCategory = computed<Nullable<Category>>(() =>
       categoryId.value
         ? categoryList.value.find(
-            ({ id }) => String(id) === String(categoryId.value)
-          ) ?? null
+        ({ id }) => String(id) === String(categoryId.value)
+      ) ?? null
         : null
     );
 
     const pageTitle = computed<string>(() => {
       return selectedCategory.value
         ? `${context.root.$t('blog:postsByCategory')} "${
-            selectedCategory.value.name
-          }"`
+          selectedCategory.value.name
+        }"`
         : context.root.$t('blog:posts');
     });
 
@@ -196,10 +222,12 @@ export default defineComponent({
       filterParams,
       tags,
       tagRemovalHandler,
+      statusFilter
     } = useAdvancedSearch({
       context,
       categoryList,
       languageList,
+      statusOptionList
     });
 
     const isLangSpecific = computed<boolean>(
@@ -217,19 +245,19 @@ export default defineComponent({
       handleChange,
       pageNumber,
       pageCount,
-      pageSize,
+      pageSize
     } = useDataTable<PostShort>({
       fetchEntityList: (params) =>
         getPosts({
           query: params.searchQuery,
           pageNumber: params.pageNumber,
           pageSize: params.pageSize,
-          ...filterParams.value,
+          ...filterParams.value
         }),
       initialValue: [],
       context,
       resourceName: 'Blog post list',
-      pageSize: 100,
+      pageSize: 100
     });
 
     watch(filterParams, () => {
@@ -239,7 +267,7 @@ export default defineComponent({
 
       const newQuery = {
         ...pick(context.root.$route.query, ['query', 'pageNumber']),
-        ...filterParams.value,
+        ...filterParams.value
       };
 
       if (!isEqual(context.root.$route.query, newQuery)) {
@@ -267,7 +295,7 @@ export default defineComponent({
       deleteResource: deleteBlogPost,
       resourceName: 'Post',
       onSuccess: fetchPostList,
-      context,
+      context
     });
 
     const { isCloning, handleResourceClone } = useResourceClone({
@@ -276,7 +304,7 @@ export default defineComponent({
       successMessage: t('blog:cloneSuccess'),
       failureMessage: t('blog:cloneFailure'),
       onSuccessRedirectTo: (data: PostFull) => `/blog/posts/${data.id}`,
-      context,
+      context
     });
 
     function isBusy(postId: number): boolean {
@@ -288,6 +316,8 @@ export default defineComponent({
     );
 
     return {
+      t,
+      formatDateTime,
       columnDefs,
       rowData: displayedPostList,
       handleResourceDelete,
@@ -311,18 +341,21 @@ export default defineComponent({
       languageOptionList,
       fromDateFilter,
       toDateFilter,
+      statusFilter,
+      statusOptionList,
       tags,
       tagRemovalHandler,
+      getStatuses,
 
       // Clone
       handleResourceClone,
-      isBusy,
+      isBusy
     };
-  },
+  }
 });
 </script>
 
-<style scoped lang="scss">
+<style scoped lang='scss'>
 .filters {
   display: flex;
   margin: 0 -10px;
@@ -347,4 +380,21 @@ export default defineComponent({
   grid-template-columns: repeat(2, 1fr);
   column-gap: 10px;
 }
+
+.status {
+  span:first-child {
+    display: block;
+  }
+
+  span:nth-child(2) {
+    display: block;
+    margin-top: 5px;
+    font-size: 0.8rem;
+
+    i {
+      display: block;
+    }
+  }
+;
+}
 </style>

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

@@ -23,6 +23,7 @@ interface Params {
   context: SetupContext;
   categoryList: ComputedRef<Category[]>;
   languageList: ComputedRef<Language[]>;
+  statusOptionList: ComputedRef<OptionType[]>;
 }
 
 interface State {
@@ -32,6 +33,7 @@ interface State {
   languageOptionList: ComputedRef<OptionType[]>;
   fromDateFilter: Ref<string>;
   toDateFilter: Ref<string>;
+  statusFilter: Ref<OptionType[]>;
   filterParams: ComputedRef<Record<string, string | string[]>>;
   tags: ComputedRef<FilterTagType[]>;
   tagRemovalHandler(event: FilterTagType): void;
@@ -42,6 +44,7 @@ enum FilterTypes {
   LANGUAGE = 'language',
   FROM_DATE = 'from-date',
   TO_DATE = 'to-date',
+  STATUS = 'status',
 }
 
 export const dateFormat = (date: string) => date.split('-').reverse().join('.');
@@ -50,6 +53,7 @@ export function useAdvancedSearch({
   context,
   categoryList,
   languageList,
+  statusOptionList,
 }: Params): State {
   /** Category **/
 
@@ -161,12 +165,31 @@ export function useAdvancedSearch({
     };
   });
 
+  /** Status **/
+
+  const initialStatusFilter = computed<OptionType[]>(() => {
+    const queryValue = getFilterParamAsStringArray(
+      context.root.$route.query,
+      FilterTypes.STATUS
+    );
+    return statusOptionList.value.filter(({ value }) =>
+      queryValue.some((selected) => selected === value)
+    );
+  });
+
+  const statusFilter = ref<OptionType[]>(initialStatusFilter.value);
+
+  watch(initialStatusFilter, () => {
+    statusFilter.value = initialStatusFilter.value;
+  });
+
   /** Params **/
 
   const filterParams = computed(() => {
     const filters: Record<string, string | string[]> = {
       [FilterTypes.CATEGORY]: categoryFilter.value.map(({ value }) => value),
       [FilterTypes.LANGUAGE]: languageFilter.value.map(({ value }) => value),
+      [FilterTypes.STATUS]: statusFilter.value.map(({ value }) => value),
     };
 
     if (fromDateFilter.value) {
@@ -197,6 +220,11 @@ export function useAdvancedSearch({
       fromDateFilter.value = '';
       toDateFilter.value = '';
     }
+    if (event.name === FilterTypes.STATUS) {
+      statusFilter.value = statusFilter.value.filter(
+        ({ value }) => value !== event.value
+      );
+    }
   }
 
   /** Tags **/
@@ -216,6 +244,12 @@ export function useAdvancedSearch({
         title: context.root.$t('blog:language'),
       })),
       date.value,
+      ...statusFilter.value.map(({ value, label }) => ({
+        value,
+        label,
+        name: FilterTypes.STATUS,
+        title: context.root.$t('blog:status'),
+      })),
     ].filter(isNotNullish)
   );
 
@@ -243,6 +277,7 @@ export function useAdvancedSearch({
     languageOptionList,
     fromDateFilter,
     toDateFilter,
+    statusFilter,
     tagRemovalHandler,
     tags: tags,
     filterParams,