@tager/admin-blog 0.3.43 → 1.0.2

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

@@ -1,7 +1,7 @@
 import { TFunction } from 'i18next';
 
 import { notEmpty, Nullable } from '@tager/admin-services';
-import { ColumnDefinition } from '@tager/admin-ui';
+import { ColumnDefinition, OptionType } from '@tager/admin-ui';
 
 import {
   Category,
@@ -9,7 +9,7 @@ import {
   Language,
   PostShort,
 } from '../../../typings/model';
-import { getBlogPostFormUrl } from '../../../constants/paths';
+import { getBlogPostFormUrl } from '../../../utils/paths';
 
 export function convertPostList(
   postList: PostShort[],
@@ -122,3 +122,28 @@ export function getPostTableColumnDefs(
 
   return COLUMN_DEFS.filter(notEmpty);
 }
+
+export function getPostTableSortOptions(t: TFunction): Array<OptionType> {
+  return [
+    {
+      value: 'datetime_desc',
+      label: t('blog:sortDateTimeDesc'),
+    },
+    {
+      value: 'datetime_asc',
+      label: t('blog:sortDateTimeAsc'),
+    },
+    {
+      value: 'title_asc',
+      label: t('blog:sortTitleAsc'),
+    },
+    {
+      value: 'title_desc',
+      label: t('blog:sortTitleDesc'),
+    },
+    {
+      value: 'status',
+      label: t('blog:sortStatus'),
+    },
+  ];
+}

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

@@ -1,215 +1,239 @@
 <template>
-  <page
-    :title='pageTitle'
-    :header-buttons="[
+  <Page
+      :title="pageTitle"
+      :header-buttons="[
       {
-        text: $t('blog:newPost'),
+        text: $i18n.t('blog:newPost'),
         href: getBlogPostFormUrl({ postId: 'create' }),
       },
     ]"
   >
-    <template v-slot:content>
-      <data-table
-        :column-defs='columnDefs'
-        :row-data='rowData'
-        :loading='isRowDataLoading'
-        :error-message='errorMessage'
-        :search-query='searchQuery'
-        :pagination='{
+    <template #content>
+      <DataTable
+          :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'
+        }"
+          :sort="{ options: sortOptions, value: sortValue }"
+          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'
+        <template #filters>
+          <AdvancedSearch :tags="tags" @click:tag="tagRemovalHandler">
+            <div class="filters">
+              <FormFieldMultiSelect
+                  v-model:selected-options="categoryFilter"
+                  :options="categoryOptionList"
+                  name="categoryFilter"
+                  :searchable="true"
+                  :label="$i18n.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'
+              <FormFieldMultiSelect
+                  v-if="isLangSpecific"
+                  v-model:selected-options="languageFilter"
+                  :options="languageOptionList"
+                  name="languageFilter"
+                  :searchable="true"
+                  :label="$i18n.t('blog:language')"
+                  class="filter"
+              />
+              <FormFieldMultiSelect
+                  v-model:selected-options="statusFilter"
+                  :options="statusOptionList"
+                  name="statusFilter"
+                  :searchable="true"
+                  :label="$i18n.t('blog:status')"
+                  class="filter"
+              />
+            </div>
+
+            <div class="filters">
+              <FormField
+                  v-model:value="fromDateFilter"
+                  :label="$i18n.t('blog:dateOfPublicationFrom')"
+                  name="fromDateFilter"
+                  type="date"
+                  :max="toDateFilter"
               />
 
-              <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>
-
-              <form-field-multi-select
-                v-model='statusFilter'
-                :options='statusOptionList'
-                name='statusFilter'
-                :searchable='true'
-                :label="$t('blog:status')"
-                class='filter'
+              <FormField
+                  v-model:value="toDateFilter"
+                  :label="$i18n.t('blog:dateOfPublicationTo')"
+                  name="toDateFilter"
+                  type="date"
+                  :min="fromDateFilter"
               />
             </div>
-          </advanced-search>
+          </AdvancedSearch>
         </template>
 
-        <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:archiveAtLabel') }}: <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>
+        <template #cell(status)="{ row }">
+          <div class="status">
+            <span>{{ getStatuses($i18n.t)[row.status] }}</span>
+
+            <span v-if="row.status === 'PUBLISHED' && row.archiveAt">
+              {{ $i18n.t('blog:archiveAtLabel') }}:
+              <i>{{ formatDateTime(new Date(row.archiveAt), true) }}</i>
+            </span>
+
+            <span v-if="row.status === 'DRAFT' && row.publishAt">
+              {{ $i18n.t('blog:publishAtLabel') }}:
+              <i>{{ formatDateTime(new Date(row.publishAt), true) }}</i>
             </span>
           </div>
         </template>
 
-        <template v-slot:cell(actions)='{ row }'>
-          <base-button
-            variant='icon'
-            :title="$t('blog:edit')"
-            :disabled='isBusy(row.id)'
-            :href='getBlogPostFormUrl({ postId: row.id })'
+        <template #cell(actions)="{ row }">
+          <BaseButton
+              variant="icon"
+              :title="$i18n.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)'
+            <EditIcon/>
+          </BaseButton>
+
+          <BaseButton
+              variant="icon"
+              :title="$i18n.t('blog:clone')"
+              :disabled="isBusy(row.id)"
+              @click="handleResourceClone(row.id)"
           >
-            <svg-icon name='contentCopy' />
-          </base-button>
-
-          <base-button
-            variant='icon'
-            :title="$t('blog:remove')"
-            :disabled='isBusy(row.id)'
-            @click='handleResourceDelete(row.id)'
+            <ContentCopyIcon/>
+          </BaseButton>
+
+          <BaseButton
+              variant="icon"
+              :title="$i18n.t('blog:remove')"
+              :disabled="isBusy(row.id)"
+              @click="handleResourceDelete(row.id)"
           >
-            <svg-icon name='delete' />
-          </base-button>
+            <DeleteIcon/>
+          </BaseButton>
         </template>
-      </data-table>
+      </DataTable>
     </template>
-  </page>
+  </Page>
 </template>
 
-<script lang='ts'>
-import { computed, defineComponent, watch } from '@vue/composition-api';
+<script lang="ts">
+import {computed, defineComponent, watch} from 'vue';
 import isEqual from 'lodash.isequal';
 import pick from 'lodash.pick';
+import {useRoute, useRouter} from 'vue-router';
 
 import {
   ColumnDefinition,
   OptionType,
   useDataTable,
-  useTranslation,
-  formatDateTime
+  formatDateTime,
+  AdvancedSearch,
+  FormFieldMultiSelect,
+  FormField,
+  BaseButton,
+  EditIcon,
+  ContentCopyIcon,
+  DeleteIcon,
+  DataTable,
 } from '@tager/admin-ui';
 import {
   Nullable,
+  useI18n,
   useResourceClone,
-  useResourceDelete
+  useResourceDelete,
 } from '@tager/admin-services';
+import {Page} from '@tager/admin-layout';
 
-import { useFetchModuleConfig, useFetchCategories } from '../../../hooks';
+import {useFetchModuleConfig, useFetchCategories} from '../../../hooks';
 import {
   clonePost,
   deleteBlogPost,
-  getPosts
+  getPosts,
 } from '../../../services/requests';
-import { getBlogPostFormUrl } from '../../../constants/paths';
+import {getBlogPostFormUrl} from '../../../utils/paths';
 import {
   Category,
   Language,
   PostFull,
-  PostShort
+  PostShort,
 } from '../../../typings/model';
-import { getStatusOptions } from '../PostForm/PostForm.helpers';
+import {getStatusOptions} from '../PostForm/PostForm.helpers';
 
-import { convertPostList, getPostTableColumnDefs, getStatuses } from './PostList.helpers';
-import { useAdvancedSearch } from './hooks';
+import {
+  convertPostList,
+  getPostTableColumnDefs,
+  getPostTableSortOptions,
+  getStatuses,
+} from './PostList.helpers';
+import {useAdvancedSearch} from './hooks';
 
 export default defineComponent({
-  name: 'Posts',
-  setup(props, context) {
-    const { t } = useTranslation(context);
+  name: 'PostList',
+  components: {
+    DeleteIcon,
+    ContentCopyIcon,
+    EditIcon,
+    BaseButton,
+    FormField,
+    FormFieldMultiSelect,
+    AdvancedSearch,
+    Page,
+    DataTable,
+  },
+  setup() {
+    const {t} = useI18n();
+    const route = useRoute();
+    const router = useRouter();
 
     const categoryId = computed<string>(() => {
-      return Array.isArray(context.root.$route.query.category)
-        ? context.root.$route.query.category[0] ?? ''
-        : context.root.$route.query.category;
+      return Array.isArray(route.query.category)
+          ? (route.query.category[0] as string) ?? ''
+          : (route.query.category as string);
     });
 
     const statusOptionList = computed<OptionType[]>(() => getStatusOptions(t));
 
     /** Fetch module config **/
 
-    const {
-      data: moduleConfig,
-      loading: isModuleConfigLoading
-    } = useFetchModuleConfig({ context });
+    const {data: moduleConfig, loading: isModuleConfigLoading} =
+        useFetchModuleConfig();
 
     const languageList = computed<Language[]>(
-      () => moduleConfig.value?.languages ?? []
+        () => moduleConfig.value?.languages ?? []
     );
 
     /** Fetch category list **/
 
-    const {
-      data: categoryList,
-      loading: isCategoryListLoading
-    } = useFetchCategories({ context });
+    const {data: categoryList, loading: isCategoryListLoading} =
+        useFetchCategories();
 
     const selectedCategory = computed<Nullable<Category>>(() =>
-      categoryId.value
-        ? categoryList.value.find(
-        ({ id }) => String(id) === String(categoryId.value)
-      ) ?? null
-        : null
+        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');
+          ? `${t('blog:postsByCategory')} "${selectedCategory.value.name}"`
+          : t('blog:posts');
     });
 
+    const isLangSpecific = computed<boolean>(
+        () => languageOptionList.value.length > 1
+    );
+
     /** Advanced search **/
 
     const {
@@ -222,17 +246,16 @@ export default defineComponent({
       filterParams,
       tags,
       tagRemovalHandler,
-      statusFilter
+      statusFilter,
     } = useAdvancedSearch({
-      context,
+      t,
+      route,
       categoryList,
       languageList,
-      statusOptionList
+      statusOptionList,
     });
 
-    const isLangSpecific = computed<boolean>(
-      () => languageOptionList.value.length > 1
-    );
+    const sortOptions = getPostTableSortOptions(t);
 
     /** Fetch Post list **/
 
@@ -245,19 +268,21 @@ export default defineComponent({
       handleChange,
       pageNumber,
       pageCount,
-      pageSize
+      pageSize,
+      sort,
     } = useDataTable<PostShort>({
       fetchEntityList: (params) =>
-        getPosts({
-          query: params.searchQuery,
-          pageNumber: params.pageNumber,
-          pageSize: params.pageSize,
-          ...filterParams.value
-        }),
+          getPosts({
+            query: params.searchQuery,
+            pageNumber: params.pageNumber,
+            pageSize: params.pageSize,
+            sort: params.sort || undefined,
+            ...filterParams.value,
+          }),
       initialValue: [],
-      context,
       resourceName: 'Blog post list',
-      pageSize: 100
+      pageSize: 100,
+      defaultSort: sortOptions[0].value,
     });
 
     watch(filterParams, () => {
@@ -266,45 +291,43 @@ export default defineComponent({
       }
 
       const newQuery = {
-        ...pick(context.root.$route.query, ['query', 'pageNumber']),
-        ...filterParams.value
+        ...pick(route.query, ['query', 'pageNumber', 'sort']),
+        ...filterParams.value,
       };
 
-      if (!isEqual(context.root.$route.query, newQuery)) {
-        context.root.$router.replace({ query: newQuery });
+      if (!isEqual(route.query, newQuery)) {
+        router.replace({query: newQuery});
         fetchPostList();
       }
     });
 
     const displayedPostList = computed<PostShort[]>(() =>
-      convertPostList(
-        postList.value,
-        selectedCategory.value,
-        moduleConfig.value?.languages ?? []
-      )
+        convertPostList(
+            postList.value,
+            selectedCategory.value,
+            moduleConfig.value?.languages ?? []
+        )
     );
 
     const isRowDataLoading = computed<boolean>(
-      () =>
-        isCategoryListLoading.value ||
-        isPostLoading.value ||
-        isModuleConfigLoading.value
+        () =>
+            isCategoryListLoading.value ||
+            isPostLoading.value ||
+            isModuleConfigLoading.value
     );
 
-    const { isDeleting, handleResourceDelete } = useResourceDelete({
+    const {isDeleting, handleResourceDelete} = useResourceDelete({
       deleteResource: deleteBlogPost,
       resourceName: 'Post',
       onSuccess: fetchPostList,
-      context
     });
 
-    const { isCloning, handleResourceClone } = useResourceClone({
+    const {isCloning, handleResourceClone} = useResourceClone({
       cloneResource: clonePost,
       confirmMessage: t('blog:cloneConfirm'),
       successMessage: t('blog:cloneSuccess'),
       failureMessage: t('blog:cloneFailure'),
       onSuccessRedirectTo: (data: PostFull) => `/blog/posts/${data.id}`,
-      context
     });
 
     function isBusy(postId: number): boolean {
@@ -312,13 +335,15 @@ export default defineComponent({
     }
 
     const columnDefs = computed<ColumnDefinition<PostShort>[]>(() =>
-      getPostTableColumnDefs(moduleConfig.value, context.root.$t)
+        getPostTableColumnDefs(moduleConfig.value, t)
     );
 
     return {
       t,
       formatDateTime,
       columnDefs,
+      sortOptions,
+      sortValue: sort,
       rowData: displayedPostList,
       handleResourceDelete,
       isDeleting,
@@ -349,40 +374,27 @@ export default defineComponent({
 
       // Clone
       handleResourceClone,
-      isBusy
+      isBusy,
     };
-  }
+  },
 });
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
 .filters {
-  display: flex;
-  margin: 0 -10px;
+  margin-bottom: 1rem;
+  width: 100%;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 1fr;
 
   &:not(:first-child) {
-    margin-top: 10px;
+    margin-top: 1rem;
   }
-
-  .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;
 }
 
 .status {
-  span:first-child {
+  span {
     display: block;
   }
 
@@ -395,6 +407,5 @@ export default defineComponent({
       display: block;
     }
   }
-;
 }
 </style>