@tager/admin-blog 0.3.42 → 0.3.43

package/dist/index.esm.js

@@ -2836,8 +2836,8 @@ function getPostTableColumnDefs(moduleConfig, t) {
             id: 2,
             name: t('blog:status'),
             field: 'status',
-            style: { width: '120px' },
-            headStyle: { width: '120px' },
+            style: { width: '140px' },
+            headStyle: { width: '140px' },
         },
         {
             id: 3,
@@ -3467,7 +3467,7 @@ var __vue_render__ = function () {
                           ? _c("span", [
                               _vm._v(
                                 "\n            " +
-                                  _vm._s(_vm.t("blog:publishAtLabel")) +
+                                  _vm._s(_vm.t("blog:archiveAtLabel")) +
                                   ": "
                               ),
                               _c("i", [
@@ -3578,11 +3578,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-61f152be_0", { source: ".filters[data-v-61f152be] {\n  display: flex;\n  margin: 0 -10px;\n}\n.filters[data-v-61f152be]:not(:first-child) {\n  margin-top: 10px;\n}\n.filters .filter[data-v-61f152be] {\n  padding: 10px 10px 0;\n  width: 50%;\n  margin: 0;\n}\n.date-label[data-v-61f152be] {\n  margin-bottom: 0.5rem;\n}\n.date-content[data-v-61f152be] {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n.status span[data-v-61f152be]:first-child {\n  display: block;\n}\n.status span[data-v-61f152be]:nth-child(2) {\n  display: block;\n  margin-top: 5px;\n  font-size: 0.8rem;\n}\n.status span:nth-child(2) i[data-v-61f152be] {\n  display: block;\n}\n\n/*# sourceMappingURL=PostList.vue.map */", map: {"version":3,"sources":["/home/runner/work/tager-admin-blog/tager-admin-blog/src/views/Posts/PostList/PostList.vue","PostList.vue"],"names":[],"mappings":"AAsWA;EACA,aAAA;EACA,eAAA;ACrWA;ADuWA;EACA,gBAAA;ACrWA;ADwWA;EACA,oBAAA;EACA,UAAA;EACA,SAAA;ACtWA;AD0WA;EACA,qBAAA;ACvWA;AD0WA;EACA,aAAA;EACA,qCAAA;EACA,gBAAA;ACvWA;AD2WA;EACA,cAAA;ACxWA;AD2WA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;ACzWA;AD2WA;EACA,cAAA;ACzWA;;AAEA,uCAAuC","file":"PostList.vue","sourcesContent":["<template>\n  <page\n    :title='pageTitle'\n    :header-buttons=\"[\n      {\n        text: $t('blog:newPost'),\n        href: getBlogPostFormUrl({ postId: 'create' }),\n      },\n    ]\"\n  >\n    <template v-slot:content>\n      <data-table\n        :column-defs='columnDefs'\n        :row-data='rowData'\n        :loading='isRowDataLoading'\n        :error-message='errorMessage'\n        :search-query='searchQuery'\n        :pagination='{\n          pageNumber,\n          pageCount,\n          pageSize,\n          disabled: isRowDataLoading,\n        }'\n        data-table='blog-post'\n        @change='handleChange'\n      >\n        <template v-slot:filters>\n          <advanced-search :tags='tags' @click:tag='tagRemovalHandler'>\n            <div class='filters'>\n              <form-field-multi-select\n                v-model='categoryFilter'\n                :options='categoryOptionList'\n                name='categoryFilter'\n                :searchable='true'\n                :label=\"$t('blog:category')\"\n                class='filter'\n              />\n\n              <form-field-multi-select\n                v-if='isLangSpecific'\n                v-model='languageFilter'\n                :options='languageOptionList'\n                name='languageFilter'\n                :searchable='true'\n                :label=\"$t('blog:language')\"\n                class='filter'\n              />\n\n              <div class='filter'>\n                <div class='date-label'>\n                  {{ $t('blog:dateOfPublication') }}\n                </div>\n\n                <div class='date-content'>\n                  <form-field\n                    v-model='fromDateFilter'\n                    :label=\"$t('blog:From')\"\n                    name='fromDateFilter'\n                    type='date'\n                    :max='toDateFilter'\n                  />\n\n                  <form-field\n                    v-model='toDateFilter'\n                    :label=\"$t('blog:To')\"\n                    name='toDateFilter'\n                    type='date'\n                    :min='fromDateFilter'\n                  />\n                </div>\n              </div>\n\n              <form-field-multi-select\n                v-model='statusFilter'\n                :options='statusOptionList'\n                name='statusFilter'\n                :searchable='true'\n                :label=\"$t('blog:status')\"\n                class='filter'\n              />\n            </div>\n          </advanced-search>\n        </template>\n\n        <template v-slot:cell(status)='{ row }'>\n          <div class='status'>\n            <span>{{ getStatuses(t)[row.status] }}</span>\n            <span v-if='row.status === \"PUBLISHED\" && row.archiveAt'>\n              {{ t('blog:publishAtLabel') }}: <i>{{ formatDateTime(new Date(row.archiveAt), true) }}</i>\n             </span>\n            <span v-if='row.status === \"DRAFT\" && row.publishAt'>\n              {{ t('blog:publishAtLabel') }}: <i>{{ formatDateTime(new Date(row.publishAt), true) }}</i>\n            </span>\n          </div>\n        </template>\n\n        <template v-slot:cell(actions)='{ row }'>\n          <base-button\n            variant='icon'\n            :title=\"$t('blog:edit')\"\n            :disabled='isBusy(row.id)'\n            :href='getBlogPostFormUrl({ postId: row.id })'\n          >\n            <svg-icon name='edit' />\n          </base-button>\n\n          <base-button\n            variant='icon'\n            :title=\"$t('blog:clone')\"\n            :disabled='isBusy(row.id)'\n            @click='handleResourceClone(row.id)'\n          >\n            <svg-icon name='contentCopy' />\n          </base-button>\n\n          <base-button\n            variant='icon'\n            :title=\"$t('blog:remove')\"\n            :disabled='isBusy(row.id)'\n            @click='handleResourceDelete(row.id)'\n          >\n            <svg-icon name='delete' />\n          </base-button>\n        </template>\n      </data-table>\n    </template>\n  </page>\n</template>\n\n<script lang='ts'>\nimport { computed, defineComponent, watch } from '@vue/composition-api';\nimport isEqual from 'lodash.isequal';\nimport pick from 'lodash.pick';\n\nimport {\n  ColumnDefinition,\n  OptionType,\n  useDataTable,\n  useTranslation,\n  formatDateTime\n} from '@tager/admin-ui';\nimport {\n  Nullable,\n  useResourceClone,\n  useResourceDelete\n} from '@tager/admin-services';\n\nimport { useFetchModuleConfig, useFetchCategories } from '../../../hooks';\nimport {\n  clonePost,\n  deleteBlogPost,\n  getPosts\n} from '../../../services/requests';\nimport { getBlogPostFormUrl } from '../../../constants/paths';\nimport {\n  Category,\n  Language,\n  PostFull,\n  PostShort\n} from '../../../typings/model';\nimport { getStatusOptions } from '../PostForm/PostForm.helpers';\n\nimport { convertPostList, getPostTableColumnDefs, getStatuses } from './PostList.helpers';\nimport { useAdvancedSearch } from './hooks';\n\nexport default defineComponent({\n  name: 'Posts',\n  setup(props, context) {\n    const { t } = useTranslation(context);\n\n    const categoryId = computed<string>(() => {\n      return Array.isArray(context.root.$route.query.category)\n        ? context.root.$route.query.category[0] ?? ''\n        : context.root.$route.query.category;\n    });\n\n    const statusOptionList = computed<OptionType[]>(() => getStatusOptions(t));\n\n    /** Fetch module config **/\n\n    const {\n      data: moduleConfig,\n      loading: isModuleConfigLoading\n    } = useFetchModuleConfig({ context });\n\n    const languageList = computed<Language[]>(\n      () => moduleConfig.value?.languages ?? []\n    );\n\n    /** Fetch category list **/\n\n    const {\n      data: categoryList,\n      loading: isCategoryListLoading\n    } = useFetchCategories({ context });\n\n    const selectedCategory = computed<Nullable<Category>>(() =>\n      categoryId.value\n        ? categoryList.value.find(\n        ({ id }) => String(id) === String(categoryId.value)\n      ) ?? null\n        : null\n    );\n\n    const pageTitle = computed<string>(() => {\n      return selectedCategory.value\n        ? `${context.root.$t('blog:postsByCategory')} \"${\n          selectedCategory.value.name\n        }\"`\n        : context.root.$t('blog:posts');\n    });\n\n    /** Advanced search **/\n\n    const {\n      categoryFilter,\n      categoryOptionList,\n      languageFilter,\n      languageOptionList,\n      fromDateFilter,\n      toDateFilter,\n      filterParams,\n      tags,\n      tagRemovalHandler,\n      statusFilter\n    } = useAdvancedSearch({\n      context,\n      categoryList,\n      languageList,\n      statusOptionList\n    });\n\n    const isLangSpecific = computed<boolean>(\n      () => languageOptionList.value.length > 1\n    );\n\n    /** Fetch Post list **/\n\n    const {\n      fetchEntityList: fetchPostList,\n      isLoading: isPostLoading,\n      rowData: postList,\n      errorMessage,\n      searchQuery,\n      handleChange,\n      pageNumber,\n      pageCount,\n      pageSize\n    } = useDataTable<PostShort>({\n      fetchEntityList: (params) =>\n        getPosts({\n          query: params.searchQuery,\n          pageNumber: params.pageNumber,\n          pageSize: params.pageSize,\n          ...filterParams.value\n        }),\n      initialValue: [],\n      context,\n      resourceName: 'Blog post list',\n      pageSize: 100\n    });\n\n    watch(filterParams, () => {\n      if (isModuleConfigLoading.value || isCategoryListLoading.value) {\n        return;\n      }\n\n      const newQuery = {\n        ...pick(context.root.$route.query, ['query', 'pageNumber']),\n        ...filterParams.value\n      };\n\n      if (!isEqual(context.root.$route.query, newQuery)) {\n        context.root.$router.replace({ query: newQuery });\n        fetchPostList();\n      }\n    });\n\n    const displayedPostList = computed<PostShort[]>(() =>\n      convertPostList(\n        postList.value,\n        selectedCategory.value,\n        moduleConfig.value?.languages ?? []\n      )\n    );\n\n    const isRowDataLoading = computed<boolean>(\n      () =>\n        isCategoryListLoading.value ||\n        isPostLoading.value ||\n        isModuleConfigLoading.value\n    );\n\n    const { isDeleting, handleResourceDelete } = useResourceDelete({\n      deleteResource: deleteBlogPost,\n      resourceName: 'Post',\n      onSuccess: fetchPostList,\n      context\n    });\n\n    const { isCloning, handleResourceClone } = useResourceClone({\n      cloneResource: clonePost,\n      confirmMessage: t('blog:cloneConfirm'),\n      successMessage: t('blog:cloneSuccess'),\n      failureMessage: t('blog:cloneFailure'),\n      onSuccessRedirectTo: (data: PostFull) => `/blog/posts/${data.id}`,\n      context\n    });\n\n    function isBusy(postId: number): boolean {\n      return isDeleting(postId) || isCloning(postId) || isRowDataLoading.value;\n    }\n\n    const columnDefs = computed<ColumnDefinition<PostShort>[]>(() =>\n      getPostTableColumnDefs(moduleConfig.value, context.root.$t)\n    );\n\n    return {\n      t,\n      formatDateTime,\n      columnDefs,\n      rowData: displayedPostList,\n      handleResourceDelete,\n      isDeleting,\n      categoryList,\n      isRowDataLoading,\n      errorMessage,\n      getBlogPostFormUrl,\n      pageTitle,\n      searchQuery,\n      handleChange,\n      pageNumber,\n      pageCount,\n      pageSize,\n\n      // Advanced search\n      categoryFilter,\n      categoryOptionList,\n      isLangSpecific,\n      languageFilter,\n      languageOptionList,\n      fromDateFilter,\n      toDateFilter,\n      statusFilter,\n      statusOptionList,\n      tags,\n      tagRemovalHandler,\n      getStatuses,\n\n      // Clone\n      handleResourceClone,\n      isBusy\n    };\n  }\n});\n</script>\n\n<style scoped lang='scss'>\n.filters {\n  display: flex;\n  margin: 0 -10px;\n\n  &:not(:first-child) {\n    margin-top: 10px;\n  }\n\n  .filter {\n    padding: 10px 10px 0;\n    width: 50%;\n    margin: 0;\n  }\n}\n\n.date-label {\n  margin-bottom: 0.5rem;\n}\n\n.date-content {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n.status {\n  span:first-child {\n    display: block;\n  }\n\n  span:nth-child(2) {\n    display: block;\n    margin-top: 5px;\n    font-size: 0.8rem;\n\n    i {\n      display: block;\n    }\n  }\n;\n}\n</style>\n",".filters {\n  display: flex;\n  margin: 0 -10px;\n}\n.filters:not(:first-child) {\n  margin-top: 10px;\n}\n.filters .filter {\n  padding: 10px 10px 0;\n  width: 50%;\n  margin: 0;\n}\n\n.date-label {\n  margin-bottom: 0.5rem;\n}\n\n.date-content {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n.status span:first-child {\n  display: block;\n}\n.status span:nth-child(2) {\n  display: block;\n  margin-top: 5px;\n  font-size: 0.8rem;\n}\n.status span:nth-child(2) i {\n  display: block;\n}\n\n/*# sourceMappingURL=PostList.vue.map */"]}, media: undefined });
+    inject("data-v-8fa877aa_0", { source: ".filters[data-v-8fa877aa] {\n  display: flex;\n  margin: 0 -10px;\n}\n.filters[data-v-8fa877aa]:not(:first-child) {\n  margin-top: 10px;\n}\n.filters .filter[data-v-8fa877aa] {\n  padding: 10px 10px 0;\n  width: 50%;\n  margin: 0;\n}\n.date-label[data-v-8fa877aa] {\n  margin-bottom: 0.5rem;\n}\n.date-content[data-v-8fa877aa] {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n.status span[data-v-8fa877aa]:first-child {\n  display: block;\n}\n.status span[data-v-8fa877aa]:nth-child(2) {\n  display: block;\n  margin-top: 5px;\n  font-size: 0.8rem;\n}\n.status span:nth-child(2) i[data-v-8fa877aa] {\n  display: block;\n}\n\n/*# sourceMappingURL=PostList.vue.map */", map: {"version":3,"sources":["/home/runner/work/tager-admin-blog/tager-admin-blog/src/views/Posts/PostList/PostList.vue","PostList.vue"],"names":[],"mappings":"AAsWA;EACA,aAAA;EACA,eAAA;ACrWA;ADuWA;EACA,gBAAA;ACrWA;ADwWA;EACA,oBAAA;EACA,UAAA;EACA,SAAA;ACtWA;AD0WA;EACA,qBAAA;ACvWA;AD0WA;EACA,aAAA;EACA,qCAAA;EACA,gBAAA;ACvWA;AD2WA;EACA,cAAA;ACxWA;AD2WA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;ACzWA;AD2WA;EACA,cAAA;ACzWA;;AAEA,uCAAuC","file":"PostList.vue","sourcesContent":["<template>\n  <page\n    :title='pageTitle'\n    :header-buttons=\"[\n      {\n        text: $t('blog:newPost'),\n        href: getBlogPostFormUrl({ postId: 'create' }),\n      },\n    ]\"\n  >\n    <template v-slot:content>\n      <data-table\n        :column-defs='columnDefs'\n        :row-data='rowData'\n        :loading='isRowDataLoading'\n        :error-message='errorMessage'\n        :search-query='searchQuery'\n        :pagination='{\n          pageNumber,\n          pageCount,\n          pageSize,\n          disabled: isRowDataLoading,\n        }'\n        data-table='blog-post'\n        @change='handleChange'\n      >\n        <template v-slot:filters>\n          <advanced-search :tags='tags' @click:tag='tagRemovalHandler'>\n            <div class='filters'>\n              <form-field-multi-select\n                v-model='categoryFilter'\n                :options='categoryOptionList'\n                name='categoryFilter'\n                :searchable='true'\n                :label=\"$t('blog:category')\"\n                class='filter'\n              />\n\n              <form-field-multi-select\n                v-if='isLangSpecific'\n                v-model='languageFilter'\n                :options='languageOptionList'\n                name='languageFilter'\n                :searchable='true'\n                :label=\"$t('blog:language')\"\n                class='filter'\n              />\n\n              <div class='filter'>\n                <div class='date-label'>\n                  {{ $t('blog:dateOfPublication') }}\n                </div>\n\n                <div class='date-content'>\n                  <form-field\n                    v-model='fromDateFilter'\n                    :label=\"$t('blog:From')\"\n                    name='fromDateFilter'\n                    type='date'\n                    :max='toDateFilter'\n                  />\n\n                  <form-field\n                    v-model='toDateFilter'\n                    :label=\"$t('blog:To')\"\n                    name='toDateFilter'\n                    type='date'\n                    :min='fromDateFilter'\n                  />\n                </div>\n              </div>\n\n              <form-field-multi-select\n                v-model='statusFilter'\n                :options='statusOptionList'\n                name='statusFilter'\n                :searchable='true'\n                :label=\"$t('blog:status')\"\n                class='filter'\n              />\n            </div>\n          </advanced-search>\n        </template>\n\n        <template v-slot:cell(status)='{ row }'>\n          <div class='status'>\n            <span>{{ getStatuses(t)[row.status] }}</span>\n            <span v-if='row.status === \"PUBLISHED\" && row.archiveAt'>\n              {{ t('blog:archiveAtLabel') }}: <i>{{ formatDateTime(new Date(row.archiveAt), true) }}</i>\n             </span>\n            <span v-if='row.status === \"DRAFT\" && row.publishAt'>\n              {{ t('blog:publishAtLabel') }}: <i>{{ formatDateTime(new Date(row.publishAt), true) }}</i>\n            </span>\n          </div>\n        </template>\n\n        <template v-slot:cell(actions)='{ row }'>\n          <base-button\n            variant='icon'\n            :title=\"$t('blog:edit')\"\n            :disabled='isBusy(row.id)'\n            :href='getBlogPostFormUrl({ postId: row.id })'\n          >\n            <svg-icon name='edit' />\n          </base-button>\n\n          <base-button\n            variant='icon'\n            :title=\"$t('blog:clone')\"\n            :disabled='isBusy(row.id)'\n            @click='handleResourceClone(row.id)'\n          >\n            <svg-icon name='contentCopy' />\n          </base-button>\n\n          <base-button\n            variant='icon'\n            :title=\"$t('blog:remove')\"\n            :disabled='isBusy(row.id)'\n            @click='handleResourceDelete(row.id)'\n          >\n            <svg-icon name='delete' />\n          </base-button>\n        </template>\n      </data-table>\n    </template>\n  </page>\n</template>\n\n<script lang='ts'>\nimport { computed, defineComponent, watch } from '@vue/composition-api';\nimport isEqual from 'lodash.isequal';\nimport pick from 'lodash.pick';\n\nimport {\n  ColumnDefinition,\n  OptionType,\n  useDataTable,\n  useTranslation,\n  formatDateTime\n} from '@tager/admin-ui';\nimport {\n  Nullable,\n  useResourceClone,\n  useResourceDelete\n} from '@tager/admin-services';\n\nimport { useFetchModuleConfig, useFetchCategories } from '../../../hooks';\nimport {\n  clonePost,\n  deleteBlogPost,\n  getPosts\n} from '../../../services/requests';\nimport { getBlogPostFormUrl } from '../../../constants/paths';\nimport {\n  Category,\n  Language,\n  PostFull,\n  PostShort\n} from '../../../typings/model';\nimport { getStatusOptions } from '../PostForm/PostForm.helpers';\n\nimport { convertPostList, getPostTableColumnDefs, getStatuses } from './PostList.helpers';\nimport { useAdvancedSearch } from './hooks';\n\nexport default defineComponent({\n  name: 'Posts',\n  setup(props, context) {\n    const { t } = useTranslation(context);\n\n    const categoryId = computed<string>(() => {\n      return Array.isArray(context.root.$route.query.category)\n        ? context.root.$route.query.category[0] ?? ''\n        : context.root.$route.query.category;\n    });\n\n    const statusOptionList = computed<OptionType[]>(() => getStatusOptions(t));\n\n    /** Fetch module config **/\n\n    const {\n      data: moduleConfig,\n      loading: isModuleConfigLoading\n    } = useFetchModuleConfig({ context });\n\n    const languageList = computed<Language[]>(\n      () => moduleConfig.value?.languages ?? []\n    );\n\n    /** Fetch category list **/\n\n    const {\n      data: categoryList,\n      loading: isCategoryListLoading\n    } = useFetchCategories({ context });\n\n    const selectedCategory = computed<Nullable<Category>>(() =>\n      categoryId.value\n        ? categoryList.value.find(\n        ({ id }) => String(id) === String(categoryId.value)\n      ) ?? null\n        : null\n    );\n\n    const pageTitle = computed<string>(() => {\n      return selectedCategory.value\n        ? `${context.root.$t('blog:postsByCategory')} \"${\n          selectedCategory.value.name\n        }\"`\n        : context.root.$t('blog:posts');\n    });\n\n    /** Advanced search **/\n\n    const {\n      categoryFilter,\n      categoryOptionList,\n      languageFilter,\n      languageOptionList,\n      fromDateFilter,\n      toDateFilter,\n      filterParams,\n      tags,\n      tagRemovalHandler,\n      statusFilter\n    } = useAdvancedSearch({\n      context,\n      categoryList,\n      languageList,\n      statusOptionList\n    });\n\n    const isLangSpecific = computed<boolean>(\n      () => languageOptionList.value.length > 1\n    );\n\n    /** Fetch Post list **/\n\n    const {\n      fetchEntityList: fetchPostList,\n      isLoading: isPostLoading,\n      rowData: postList,\n      errorMessage,\n      searchQuery,\n      handleChange,\n      pageNumber,\n      pageCount,\n      pageSize\n    } = useDataTable<PostShort>({\n      fetchEntityList: (params) =>\n        getPosts({\n          query: params.searchQuery,\n          pageNumber: params.pageNumber,\n          pageSize: params.pageSize,\n          ...filterParams.value\n        }),\n      initialValue: [],\n      context,\n      resourceName: 'Blog post list',\n      pageSize: 100\n    });\n\n    watch(filterParams, () => {\n      if (isModuleConfigLoading.value || isCategoryListLoading.value) {\n        return;\n      }\n\n      const newQuery = {\n        ...pick(context.root.$route.query, ['query', 'pageNumber']),\n        ...filterParams.value\n      };\n\n      if (!isEqual(context.root.$route.query, newQuery)) {\n        context.root.$router.replace({ query: newQuery });\n        fetchPostList();\n      }\n    });\n\n    const displayedPostList = computed<PostShort[]>(() =>\n      convertPostList(\n        postList.value,\n        selectedCategory.value,\n        moduleConfig.value?.languages ?? []\n      )\n    );\n\n    const isRowDataLoading = computed<boolean>(\n      () =>\n        isCategoryListLoading.value ||\n        isPostLoading.value ||\n        isModuleConfigLoading.value\n    );\n\n    const { isDeleting, handleResourceDelete } = useResourceDelete({\n      deleteResource: deleteBlogPost,\n      resourceName: 'Post',\n      onSuccess: fetchPostList,\n      context\n    });\n\n    const { isCloning, handleResourceClone } = useResourceClone({\n      cloneResource: clonePost,\n      confirmMessage: t('blog:cloneConfirm'),\n      successMessage: t('blog:cloneSuccess'),\n      failureMessage: t('blog:cloneFailure'),\n      onSuccessRedirectTo: (data: PostFull) => `/blog/posts/${data.id}`,\n      context\n    });\n\n    function isBusy(postId: number): boolean {\n      return isDeleting(postId) || isCloning(postId) || isRowDataLoading.value;\n    }\n\n    const columnDefs = computed<ColumnDefinition<PostShort>[]>(() =>\n      getPostTableColumnDefs(moduleConfig.value, context.root.$t)\n    );\n\n    return {\n      t,\n      formatDateTime,\n      columnDefs,\n      rowData: displayedPostList,\n      handleResourceDelete,\n      isDeleting,\n      categoryList,\n      isRowDataLoading,\n      errorMessage,\n      getBlogPostFormUrl,\n      pageTitle,\n      searchQuery,\n      handleChange,\n      pageNumber,\n      pageCount,\n      pageSize,\n\n      // Advanced search\n      categoryFilter,\n      categoryOptionList,\n      isLangSpecific,\n      languageFilter,\n      languageOptionList,\n      fromDateFilter,\n      toDateFilter,\n      statusFilter,\n      statusOptionList,\n      tags,\n      tagRemovalHandler,\n      getStatuses,\n\n      // Clone\n      handleResourceClone,\n      isBusy\n    };\n  }\n});\n</script>\n\n<style scoped lang='scss'>\n.filters {\n  display: flex;\n  margin: 0 -10px;\n\n  &:not(:first-child) {\n    margin-top: 10px;\n  }\n\n  .filter {\n    padding: 10px 10px 0;\n    width: 50%;\n    margin: 0;\n  }\n}\n\n.date-label {\n  margin-bottom: 0.5rem;\n}\n\n.date-content {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n.status {\n  span:first-child {\n    display: block;\n  }\n\n  span:nth-child(2) {\n    display: block;\n    margin-top: 5px;\n    font-size: 0.8rem;\n\n    i {\n      display: block;\n    }\n  }\n;\n}\n</style>\n",".filters {\n  display: flex;\n  margin: 0 -10px;\n}\n.filters:not(:first-child) {\n  margin-top: 10px;\n}\n.filters .filter {\n  padding: 10px 10px 0;\n  width: 50%;\n  margin: 0;\n}\n\n.date-label {\n  margin-bottom: 0.5rem;\n}\n\n.date-content {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n.status span:first-child {\n  display: block;\n}\n.status span:nth-child(2) {\n  display: block;\n  margin-top: 5px;\n  font-size: 0.8rem;\n}\n.status span:nth-child(2) i {\n  display: block;\n}\n\n/*# sourceMappingURL=PostList.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-61f152be";
+  const __vue_scope_id__ = "data-v-8fa877aa";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/dist/index.umd.js

@@ -2836,8 +2836,8 @@
               id: 2,
               name: t('blog:status'),
               field: 'status',
-              style: { width: '120px' },
-              headStyle: { width: '120px' },
+              style: { width: '140px' },
+              headStyle: { width: '140px' },
           },
           {
               id: 3,
@@ -3467,7 +3467,7 @@
                             ? _c("span", [
                                 _vm._v(
                                   "\n            " +
-                                    _vm._s(_vm.t("blog:publishAtLabel")) +
+                                    _vm._s(_vm.t("blog:archiveAtLabel")) +
                                     ": "
                                 ),
                                 _c("i", [
@@ -3578,11 +3578,11 @@
     /* style */
     const __vue_inject_styles__ = function (inject) {
       if (!inject) return
-      inject("data-v-61f152be_0", { source: ".filters[data-v-61f152be] {\n  display: flex;\n  margin: 0 -10px;\n}\n.filters[data-v-61f152be]:not(:first-child) {\n  margin-top: 10px;\n}\n.filters .filter[data-v-61f152be] {\n  padding: 10px 10px 0;\n  width: 50%;\n  margin: 0;\n}\n.date-label[data-v-61f152be] {\n  margin-bottom: 0.5rem;\n}\n.date-content[data-v-61f152be] {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n.status span[data-v-61f152be]:first-child {\n  display: block;\n}\n.status span[data-v-61f152be]:nth-child(2) {\n  display: block;\n  margin-top: 5px;\n  font-size: 0.8rem;\n}\n.status span:nth-child(2) i[data-v-61f152be] {\n  display: block;\n}\n\n/*# sourceMappingURL=PostList.vue.map */", map: {"version":3,"sources":["/home/runner/work/tager-admin-blog/tager-admin-blog/src/views/Posts/PostList/PostList.vue","PostList.vue"],"names":[],"mappings":"AAsWA;EACA,aAAA;EACA,eAAA;ACrWA;ADuWA;EACA,gBAAA;ACrWA;ADwWA;EACA,oBAAA;EACA,UAAA;EACA,SAAA;ACtWA;AD0WA;EACA,qBAAA;ACvWA;AD0WA;EACA,aAAA;EACA,qCAAA;EACA,gBAAA;ACvWA;AD2WA;EACA,cAAA;ACxWA;AD2WA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;ACzWA;AD2WA;EACA,cAAA;ACzWA;;AAEA,uCAAuC","file":"PostList.vue","sourcesContent":["<template>\n  <page\n    :title='pageTitle'\n    :header-buttons=\"[\n      {\n        text: $t('blog:newPost'),\n        href: getBlogPostFormUrl({ postId: 'create' }),\n      },\n    ]\"\n  >\n    <template v-slot:content>\n      <data-table\n        :column-defs='columnDefs'\n        :row-data='rowData'\n        :loading='isRowDataLoading'\n        :error-message='errorMessage'\n        :search-query='searchQuery'\n        :pagination='{\n          pageNumber,\n          pageCount,\n          pageSize,\n          disabled: isRowDataLoading,\n        }'\n        data-table='blog-post'\n        @change='handleChange'\n      >\n        <template v-slot:filters>\n          <advanced-search :tags='tags' @click:tag='tagRemovalHandler'>\n            <div class='filters'>\n              <form-field-multi-select\n                v-model='categoryFilter'\n                :options='categoryOptionList'\n                name='categoryFilter'\n                :searchable='true'\n                :label=\"$t('blog:category')\"\n                class='filter'\n              />\n\n              <form-field-multi-select\n                v-if='isLangSpecific'\n                v-model='languageFilter'\n                :options='languageOptionList'\n                name='languageFilter'\n                :searchable='true'\n                :label=\"$t('blog:language')\"\n                class='filter'\n              />\n\n              <div class='filter'>\n                <div class='date-label'>\n                  {{ $t('blog:dateOfPublication') }}\n                </div>\n\n                <div class='date-content'>\n                  <form-field\n                    v-model='fromDateFilter'\n                    :label=\"$t('blog:From')\"\n                    name='fromDateFilter'\n                    type='date'\n                    :max='toDateFilter'\n                  />\n\n                  <form-field\n                    v-model='toDateFilter'\n                    :label=\"$t('blog:To')\"\n                    name='toDateFilter'\n                    type='date'\n                    :min='fromDateFilter'\n                  />\n                </div>\n              </div>\n\n              <form-field-multi-select\n                v-model='statusFilter'\n                :options='statusOptionList'\n                name='statusFilter'\n                :searchable='true'\n                :label=\"$t('blog:status')\"\n                class='filter'\n              />\n            </div>\n          </advanced-search>\n        </template>\n\n        <template v-slot:cell(status)='{ row }'>\n          <div class='status'>\n            <span>{{ getStatuses(t)[row.status] }}</span>\n            <span v-if='row.status === \"PUBLISHED\" && row.archiveAt'>\n              {{ t('blog:publishAtLabel') }}: <i>{{ formatDateTime(new Date(row.archiveAt), true) }}</i>\n             </span>\n            <span v-if='row.status === \"DRAFT\" && row.publishAt'>\n              {{ t('blog:publishAtLabel') }}: <i>{{ formatDateTime(new Date(row.publishAt), true) }}</i>\n            </span>\n          </div>\n        </template>\n\n        <template v-slot:cell(actions)='{ row }'>\n          <base-button\n            variant='icon'\n            :title=\"$t('blog:edit')\"\n            :disabled='isBusy(row.id)'\n            :href='getBlogPostFormUrl({ postId: row.id })'\n          >\n            <svg-icon name='edit' />\n          </base-button>\n\n          <base-button\n            variant='icon'\n            :title=\"$t('blog:clone')\"\n            :disabled='isBusy(row.id)'\n            @click='handleResourceClone(row.id)'\n          >\n            <svg-icon name='contentCopy' />\n          </base-button>\n\n          <base-button\n            variant='icon'\n            :title=\"$t('blog:remove')\"\n            :disabled='isBusy(row.id)'\n            @click='handleResourceDelete(row.id)'\n          >\n            <svg-icon name='delete' />\n          </base-button>\n        </template>\n      </data-table>\n    </template>\n  </page>\n</template>\n\n<script lang='ts'>\nimport { computed, defineComponent, watch } from '@vue/composition-api';\nimport isEqual from 'lodash.isequal';\nimport pick from 'lodash.pick';\n\nimport {\n  ColumnDefinition,\n  OptionType,\n  useDataTable,\n  useTranslation,\n  formatDateTime\n} from '@tager/admin-ui';\nimport {\n  Nullable,\n  useResourceClone,\n  useResourceDelete\n} from '@tager/admin-services';\n\nimport { useFetchModuleConfig, useFetchCategories } from '../../../hooks';\nimport {\n  clonePost,\n  deleteBlogPost,\n  getPosts\n} from '../../../services/requests';\nimport { getBlogPostFormUrl } from '../../../constants/paths';\nimport {\n  Category,\n  Language,\n  PostFull,\n  PostShort\n} from '../../../typings/model';\nimport { getStatusOptions } from '../PostForm/PostForm.helpers';\n\nimport { convertPostList, getPostTableColumnDefs, getStatuses } from './PostList.helpers';\nimport { useAdvancedSearch } from './hooks';\n\nexport default defineComponent({\n  name: 'Posts',\n  setup(props, context) {\n    const { t } = useTranslation(context);\n\n    const categoryId = computed<string>(() => {\n      return Array.isArray(context.root.$route.query.category)\n        ? context.root.$route.query.category[0] ?? ''\n        : context.root.$route.query.category;\n    });\n\n    const statusOptionList = computed<OptionType[]>(() => getStatusOptions(t));\n\n    /** Fetch module config **/\n\n    const {\n      data: moduleConfig,\n      loading: isModuleConfigLoading\n    } = useFetchModuleConfig({ context });\n\n    const languageList = computed<Language[]>(\n      () => moduleConfig.value?.languages ?? []\n    );\n\n    /** Fetch category list **/\n\n    const {\n      data: categoryList,\n      loading: isCategoryListLoading\n    } = useFetchCategories({ context });\n\n    const selectedCategory = computed<Nullable<Category>>(() =>\n      categoryId.value\n        ? categoryList.value.find(\n        ({ id }) => String(id) === String(categoryId.value)\n      ) ?? null\n        : null\n    );\n\n    const pageTitle = computed<string>(() => {\n      return selectedCategory.value\n        ? `${context.root.$t('blog:postsByCategory')} \"${\n          selectedCategory.value.name\n        }\"`\n        : context.root.$t('blog:posts');\n    });\n\n    /** Advanced search **/\n\n    const {\n      categoryFilter,\n      categoryOptionList,\n      languageFilter,\n      languageOptionList,\n      fromDateFilter,\n      toDateFilter,\n      filterParams,\n      tags,\n      tagRemovalHandler,\n      statusFilter\n    } = useAdvancedSearch({\n      context,\n      categoryList,\n      languageList,\n      statusOptionList\n    });\n\n    const isLangSpecific = computed<boolean>(\n      () => languageOptionList.value.length > 1\n    );\n\n    /** Fetch Post list **/\n\n    const {\n      fetchEntityList: fetchPostList,\n      isLoading: isPostLoading,\n      rowData: postList,\n      errorMessage,\n      searchQuery,\n      handleChange,\n      pageNumber,\n      pageCount,\n      pageSize\n    } = useDataTable<PostShort>({\n      fetchEntityList: (params) =>\n        getPosts({\n          query: params.searchQuery,\n          pageNumber: params.pageNumber,\n          pageSize: params.pageSize,\n          ...filterParams.value\n        }),\n      initialValue: [],\n      context,\n      resourceName: 'Blog post list',\n      pageSize: 100\n    });\n\n    watch(filterParams, () => {\n      if (isModuleConfigLoading.value || isCategoryListLoading.value) {\n        return;\n      }\n\n      const newQuery = {\n        ...pick(context.root.$route.query, ['query', 'pageNumber']),\n        ...filterParams.value\n      };\n\n      if (!isEqual(context.root.$route.query, newQuery)) {\n        context.root.$router.replace({ query: newQuery });\n        fetchPostList();\n      }\n    });\n\n    const displayedPostList = computed<PostShort[]>(() =>\n      convertPostList(\n        postList.value,\n        selectedCategory.value,\n        moduleConfig.value?.languages ?? []\n      )\n    );\n\n    const isRowDataLoading = computed<boolean>(\n      () =>\n        isCategoryListLoading.value ||\n        isPostLoading.value ||\n        isModuleConfigLoading.value\n    );\n\n    const { isDeleting, handleResourceDelete } = useResourceDelete({\n      deleteResource: deleteBlogPost,\n      resourceName: 'Post',\n      onSuccess: fetchPostList,\n      context\n    });\n\n    const { isCloning, handleResourceClone } = useResourceClone({\n      cloneResource: clonePost,\n      confirmMessage: t('blog:cloneConfirm'),\n      successMessage: t('blog:cloneSuccess'),\n      failureMessage: t('blog:cloneFailure'),\n      onSuccessRedirectTo: (data: PostFull) => `/blog/posts/${data.id}`,\n      context\n    });\n\n    function isBusy(postId: number): boolean {\n      return isDeleting(postId) || isCloning(postId) || isRowDataLoading.value;\n    }\n\n    const columnDefs = computed<ColumnDefinition<PostShort>[]>(() =>\n      getPostTableColumnDefs(moduleConfig.value, context.root.$t)\n    );\n\n    return {\n      t,\n      formatDateTime,\n      columnDefs,\n      rowData: displayedPostList,\n      handleResourceDelete,\n      isDeleting,\n      categoryList,\n      isRowDataLoading,\n      errorMessage,\n      getBlogPostFormUrl,\n      pageTitle,\n      searchQuery,\n      handleChange,\n      pageNumber,\n      pageCount,\n      pageSize,\n\n      // Advanced search\n      categoryFilter,\n      categoryOptionList,\n      isLangSpecific,\n      languageFilter,\n      languageOptionList,\n      fromDateFilter,\n      toDateFilter,\n      statusFilter,\n      statusOptionList,\n      tags,\n      tagRemovalHandler,\n      getStatuses,\n\n      // Clone\n      handleResourceClone,\n      isBusy\n    };\n  }\n});\n</script>\n\n<style scoped lang='scss'>\n.filters {\n  display: flex;\n  margin: 0 -10px;\n\n  &:not(:first-child) {\n    margin-top: 10px;\n  }\n\n  .filter {\n    padding: 10px 10px 0;\n    width: 50%;\n    margin: 0;\n  }\n}\n\n.date-label {\n  margin-bottom: 0.5rem;\n}\n\n.date-content {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n.status {\n  span:first-child {\n    display: block;\n  }\n\n  span:nth-child(2) {\n    display: block;\n    margin-top: 5px;\n    font-size: 0.8rem;\n\n    i {\n      display: block;\n    }\n  }\n;\n}\n</style>\n",".filters {\n  display: flex;\n  margin: 0 -10px;\n}\n.filters:not(:first-child) {\n  margin-top: 10px;\n}\n.filters .filter {\n  padding: 10px 10px 0;\n  width: 50%;\n  margin: 0;\n}\n\n.date-label {\n  margin-bottom: 0.5rem;\n}\n\n.date-content {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n.status span:first-child {\n  display: block;\n}\n.status span:nth-child(2) {\n  display: block;\n  margin-top: 5px;\n  font-size: 0.8rem;\n}\n.status span:nth-child(2) i {\n  display: block;\n}\n\n/*# sourceMappingURL=PostList.vue.map */"]}, media: undefined });
+      inject("data-v-8fa877aa_0", { source: ".filters[data-v-8fa877aa] {\n  display: flex;\n  margin: 0 -10px;\n}\n.filters[data-v-8fa877aa]:not(:first-child) {\n  margin-top: 10px;\n}\n.filters .filter[data-v-8fa877aa] {\n  padding: 10px 10px 0;\n  width: 50%;\n  margin: 0;\n}\n.date-label[data-v-8fa877aa] {\n  margin-bottom: 0.5rem;\n}\n.date-content[data-v-8fa877aa] {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n.status span[data-v-8fa877aa]:first-child {\n  display: block;\n}\n.status span[data-v-8fa877aa]:nth-child(2) {\n  display: block;\n  margin-top: 5px;\n  font-size: 0.8rem;\n}\n.status span:nth-child(2) i[data-v-8fa877aa] {\n  display: block;\n}\n\n/*# sourceMappingURL=PostList.vue.map */", map: {"version":3,"sources":["/home/runner/work/tager-admin-blog/tager-admin-blog/src/views/Posts/PostList/PostList.vue","PostList.vue"],"names":[],"mappings":"AAsWA;EACA,aAAA;EACA,eAAA;ACrWA;ADuWA;EACA,gBAAA;ACrWA;ADwWA;EACA,oBAAA;EACA,UAAA;EACA,SAAA;ACtWA;AD0WA;EACA,qBAAA;ACvWA;AD0WA;EACA,aAAA;EACA,qCAAA;EACA,gBAAA;ACvWA;AD2WA;EACA,cAAA;ACxWA;AD2WA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;ACzWA;AD2WA;EACA,cAAA;ACzWA;;AAEA,uCAAuC","file":"PostList.vue","sourcesContent":["<template>\n  <page\n    :title='pageTitle'\n    :header-buttons=\"[\n      {\n        text: $t('blog:newPost'),\n        href: getBlogPostFormUrl({ postId: 'create' }),\n      },\n    ]\"\n  >\n    <template v-slot:content>\n      <data-table\n        :column-defs='columnDefs'\n        :row-data='rowData'\n        :loading='isRowDataLoading'\n        :error-message='errorMessage'\n        :search-query='searchQuery'\n        :pagination='{\n          pageNumber,\n          pageCount,\n          pageSize,\n          disabled: isRowDataLoading,\n        }'\n        data-table='blog-post'\n        @change='handleChange'\n      >\n        <template v-slot:filters>\n          <advanced-search :tags='tags' @click:tag='tagRemovalHandler'>\n            <div class='filters'>\n              <form-field-multi-select\n                v-model='categoryFilter'\n                :options='categoryOptionList'\n                name='categoryFilter'\n                :searchable='true'\n                :label=\"$t('blog:category')\"\n                class='filter'\n              />\n\n              <form-field-multi-select\n                v-if='isLangSpecific'\n                v-model='languageFilter'\n                :options='languageOptionList'\n                name='languageFilter'\n                :searchable='true'\n                :label=\"$t('blog:language')\"\n                class='filter'\n              />\n\n              <div class='filter'>\n                <div class='date-label'>\n                  {{ $t('blog:dateOfPublication') }}\n                </div>\n\n                <div class='date-content'>\n                  <form-field\n                    v-model='fromDateFilter'\n                    :label=\"$t('blog:From')\"\n                    name='fromDateFilter'\n                    type='date'\n                    :max='toDateFilter'\n                  />\n\n                  <form-field\n                    v-model='toDateFilter'\n                    :label=\"$t('blog:To')\"\n                    name='toDateFilter'\n                    type='date'\n                    :min='fromDateFilter'\n                  />\n                </div>\n              </div>\n\n              <form-field-multi-select\n                v-model='statusFilter'\n                :options='statusOptionList'\n                name='statusFilter'\n                :searchable='true'\n                :label=\"$t('blog:status')\"\n                class='filter'\n              />\n            </div>\n          </advanced-search>\n        </template>\n\n        <template v-slot:cell(status)='{ row }'>\n          <div class='status'>\n            <span>{{ getStatuses(t)[row.status] }}</span>\n            <span v-if='row.status === \"PUBLISHED\" && row.archiveAt'>\n              {{ t('blog:archiveAtLabel') }}: <i>{{ formatDateTime(new Date(row.archiveAt), true) }}</i>\n             </span>\n            <span v-if='row.status === \"DRAFT\" && row.publishAt'>\n              {{ t('blog:publishAtLabel') }}: <i>{{ formatDateTime(new Date(row.publishAt), true) }}</i>\n            </span>\n          </div>\n        </template>\n\n        <template v-slot:cell(actions)='{ row }'>\n          <base-button\n            variant='icon'\n            :title=\"$t('blog:edit')\"\n            :disabled='isBusy(row.id)'\n            :href='getBlogPostFormUrl({ postId: row.id })'\n          >\n            <svg-icon name='edit' />\n          </base-button>\n\n          <base-button\n            variant='icon'\n            :title=\"$t('blog:clone')\"\n            :disabled='isBusy(row.id)'\n            @click='handleResourceClone(row.id)'\n          >\n            <svg-icon name='contentCopy' />\n          </base-button>\n\n          <base-button\n            variant='icon'\n            :title=\"$t('blog:remove')\"\n            :disabled='isBusy(row.id)'\n            @click='handleResourceDelete(row.id)'\n          >\n            <svg-icon name='delete' />\n          </base-button>\n        </template>\n      </data-table>\n    </template>\n  </page>\n</template>\n\n<script lang='ts'>\nimport { computed, defineComponent, watch } from '@vue/composition-api';\nimport isEqual from 'lodash.isequal';\nimport pick from 'lodash.pick';\n\nimport {\n  ColumnDefinition,\n  OptionType,\n  useDataTable,\n  useTranslation,\n  formatDateTime\n} from '@tager/admin-ui';\nimport {\n  Nullable,\n  useResourceClone,\n  useResourceDelete\n} from '@tager/admin-services';\n\nimport { useFetchModuleConfig, useFetchCategories } from '../../../hooks';\nimport {\n  clonePost,\n  deleteBlogPost,\n  getPosts\n} from '../../../services/requests';\nimport { getBlogPostFormUrl } from '../../../constants/paths';\nimport {\n  Category,\n  Language,\n  PostFull,\n  PostShort\n} from '../../../typings/model';\nimport { getStatusOptions } from '../PostForm/PostForm.helpers';\n\nimport { convertPostList, getPostTableColumnDefs, getStatuses } from './PostList.helpers';\nimport { useAdvancedSearch } from './hooks';\n\nexport default defineComponent({\n  name: 'Posts',\n  setup(props, context) {\n    const { t } = useTranslation(context);\n\n    const categoryId = computed<string>(() => {\n      return Array.isArray(context.root.$route.query.category)\n        ? context.root.$route.query.category[0] ?? ''\n        : context.root.$route.query.category;\n    });\n\n    const statusOptionList = computed<OptionType[]>(() => getStatusOptions(t));\n\n    /** Fetch module config **/\n\n    const {\n      data: moduleConfig,\n      loading: isModuleConfigLoading\n    } = useFetchModuleConfig({ context });\n\n    const languageList = computed<Language[]>(\n      () => moduleConfig.value?.languages ?? []\n    );\n\n    /** Fetch category list **/\n\n    const {\n      data: categoryList,\n      loading: isCategoryListLoading\n    } = useFetchCategories({ context });\n\n    const selectedCategory = computed<Nullable<Category>>(() =>\n      categoryId.value\n        ? categoryList.value.find(\n        ({ id }) => String(id) === String(categoryId.value)\n      ) ?? null\n        : null\n    );\n\n    const pageTitle = computed<string>(() => {\n      return selectedCategory.value\n        ? `${context.root.$t('blog:postsByCategory')} \"${\n          selectedCategory.value.name\n        }\"`\n        : context.root.$t('blog:posts');\n    });\n\n    /** Advanced search **/\n\n    const {\n      categoryFilter,\n      categoryOptionList,\n      languageFilter,\n      languageOptionList,\n      fromDateFilter,\n      toDateFilter,\n      filterParams,\n      tags,\n      tagRemovalHandler,\n      statusFilter\n    } = useAdvancedSearch({\n      context,\n      categoryList,\n      languageList,\n      statusOptionList\n    });\n\n    const isLangSpecific = computed<boolean>(\n      () => languageOptionList.value.length > 1\n    );\n\n    /** Fetch Post list **/\n\n    const {\n      fetchEntityList: fetchPostList,\n      isLoading: isPostLoading,\n      rowData: postList,\n      errorMessage,\n      searchQuery,\n      handleChange,\n      pageNumber,\n      pageCount,\n      pageSize\n    } = useDataTable<PostShort>({\n      fetchEntityList: (params) =>\n        getPosts({\n          query: params.searchQuery,\n          pageNumber: params.pageNumber,\n          pageSize: params.pageSize,\n          ...filterParams.value\n        }),\n      initialValue: [],\n      context,\n      resourceName: 'Blog post list',\n      pageSize: 100\n    });\n\n    watch(filterParams, () => {\n      if (isModuleConfigLoading.value || isCategoryListLoading.value) {\n        return;\n      }\n\n      const newQuery = {\n        ...pick(context.root.$route.query, ['query', 'pageNumber']),\n        ...filterParams.value\n      };\n\n      if (!isEqual(context.root.$route.query, newQuery)) {\n        context.root.$router.replace({ query: newQuery });\n        fetchPostList();\n      }\n    });\n\n    const displayedPostList = computed<PostShort[]>(() =>\n      convertPostList(\n        postList.value,\n        selectedCategory.value,\n        moduleConfig.value?.languages ?? []\n      )\n    );\n\n    const isRowDataLoading = computed<boolean>(\n      () =>\n        isCategoryListLoading.value ||\n        isPostLoading.value ||\n        isModuleConfigLoading.value\n    );\n\n    const { isDeleting, handleResourceDelete } = useResourceDelete({\n      deleteResource: deleteBlogPost,\n      resourceName: 'Post',\n      onSuccess: fetchPostList,\n      context\n    });\n\n    const { isCloning, handleResourceClone } = useResourceClone({\n      cloneResource: clonePost,\n      confirmMessage: t('blog:cloneConfirm'),\n      successMessage: t('blog:cloneSuccess'),\n      failureMessage: t('blog:cloneFailure'),\n      onSuccessRedirectTo: (data: PostFull) => `/blog/posts/${data.id}`,\n      context\n    });\n\n    function isBusy(postId: number): boolean {\n      return isDeleting(postId) || isCloning(postId) || isRowDataLoading.value;\n    }\n\n    const columnDefs = computed<ColumnDefinition<PostShort>[]>(() =>\n      getPostTableColumnDefs(moduleConfig.value, context.root.$t)\n    );\n\n    return {\n      t,\n      formatDateTime,\n      columnDefs,\n      rowData: displayedPostList,\n      handleResourceDelete,\n      isDeleting,\n      categoryList,\n      isRowDataLoading,\n      errorMessage,\n      getBlogPostFormUrl,\n      pageTitle,\n      searchQuery,\n      handleChange,\n      pageNumber,\n      pageCount,\n      pageSize,\n\n      // Advanced search\n      categoryFilter,\n      categoryOptionList,\n      isLangSpecific,\n      languageFilter,\n      languageOptionList,\n      fromDateFilter,\n      toDateFilter,\n      statusFilter,\n      statusOptionList,\n      tags,\n      tagRemovalHandler,\n      getStatuses,\n\n      // Clone\n      handleResourceClone,\n      isBusy\n    };\n  }\n});\n</script>\n\n<style scoped lang='scss'>\n.filters {\n  display: flex;\n  margin: 0 -10px;\n\n  &:not(:first-child) {\n    margin-top: 10px;\n  }\n\n  .filter {\n    padding: 10px 10px 0;\n    width: 50%;\n    margin: 0;\n  }\n}\n\n.date-label {\n  margin-bottom: 0.5rem;\n}\n\n.date-content {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n.status {\n  span:first-child {\n    display: block;\n  }\n\n  span:nth-child(2) {\n    display: block;\n    margin-top: 5px;\n    font-size: 0.8rem;\n\n    i {\n      display: block;\n    }\n  }\n;\n}\n</style>\n",".filters {\n  display: flex;\n  margin: 0 -10px;\n}\n.filters:not(:first-child) {\n  margin-top: 10px;\n}\n.filters .filter {\n  padding: 10px 10px 0;\n  width: 50%;\n  margin: 0;\n}\n\n.date-label {\n  margin-bottom: 0.5rem;\n}\n\n.date-content {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n.status span:first-child {\n  display: block;\n}\n.status span:nth-child(2) {\n  display: block;\n  margin-top: 5px;\n  font-size: 0.8rem;\n}\n.status span:nth-child(2) i {\n  display: block;\n}\n\n/*# sourceMappingURL=PostList.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__ = "data-v-61f152be";
+    const __vue_scope_id__ = "data-v-8fa877aa";
     /* module identifier */
     const __vue_module_identifier__ = undefined;
     /* functional template */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tager/admin-blog",
-  "version": "0.3.42",
+  "version": "0.3.43",
   "license": "MIT",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",

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

@@ -64,8 +64,8 @@ export function getPostTableColumnDefs(
       id: 2,
       name: t('blog:status'),
       field: 'status',
-      style: { width: '120px' },
-      headStyle: { width: '120px' },
+      style: { width: '140px' },
+      headStyle: { width: '140px' },
     },
     {
       id: 3,

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

@@ -86,7 +86,7 @@
           <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>
+              {{ 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>