@tager/admin-blog 1.0.1 → 1.0.2

package/dist/dev/App.vue.d.ts

@@ -1,5 +1,5 @@
 import { MenuItemType } from '@tager/admin-layout';
 declare const _default: import("vue").DefineComponent<{}, {
     sidebarMenuList: MenuItemType[];
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { onMounted, watch, computed, ref, defineComponent, resolveComponent, ope
 import isEqual from "lodash.isequal";
 import pick from "lodash.pick";
 import { useRoute, useRouter } from "vue-router";
-import { getFilterParamAsStringArray, getFilterParamAsString, getFilterParams, DeleteIcon, ContentCopyIcon, EditIcon, BaseButton, FormField, FormFieldMultiSelect, AdvancedSearch, DataTable, useDataTable, formatDateTime, SeoFieldGroup, FormFieldFileInput, FormFieldRichTextInput, FormFieldCheckbox, FormFieldUrlAliasInput, FormFieldSelect, TabList, ShortCodeConstructor, FormFooter, createTabErrorFinder, SouthIcon, NorthIcon, CountButton } from "@tager/admin-ui";
+import { getFilterParamAsStringArray, getFilterParamAsString, getFilterParams, DeleteIcon, ContentCopyIcon, EditIcon, BaseButton, FormField, FormFieldMultiSelect, AdvancedSearch, DataTable, useDataTable, formatDateTime, SeoFieldGroup, FormFieldFileInput, FormFieldRichTextInput, FormFieldCheckbox, FormFieldUrlAliasInput, FormFieldSelect, TabList, ShortCodeConstructor, FormFooter, formatDate, createTabErrorFinder, SouthIcon, NorthIcon, CountButton } from "@tager/admin-ui";
 import { Page } from "@tager/admin-layout";
 import { universalFieldUtils, DynamicField } from "@tager/admin-dynamic-field";
 import { compile } from "path-to-regexp";
@@ -27,7 +27,7 @@ const EN = {
   edit: "Edit",
   remove: "Remove",
   postsByCategory: "Posts by category",
-  name: "Name",
+  name: "Title",
   image: "Image",
   language: "Language",
   languages: "Languages",
@@ -93,7 +93,12 @@ const EN = {
   archiveAt: "Archive at",
   publishAt: "Publish at",
   archiveAtLabel: "Archive at",
-  publishAtLabel: "Publish at"
+  publishAtLabel: "Publish at",
+  sortDateTimeAsc: "Date - Newest to Oldest",
+  sortDateTimeDesc: "Date - Oldest to Newest",
+  sortTitleAsc: "Title - A-Z",
+  sortTitleDesc: "Title - Z-A",
+  sortStatus: "Status"
 };
 const RU = {
   yes: "\u0414\u0430",
@@ -114,7 +119,7 @@ const RU = {
   edit: "\u0420\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C",
   remove: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C",
   postsByCategory: "\u041F\u043E\u0441\u0442\u044B \u043F\u043E \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u044F\u043C",
-  name: "\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435",
+  name: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A",
   image: "\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435",
   language: "\u042F\u0437\u044B\u043A",
   languages: "\u042F\u0437\u044B\u043A\u0438",
@@ -180,7 +185,12 @@ const RU = {
   archiveAt: "\u041F\u0435\u0440\u0435\u043D\u0435\u0441\u0442\u0438 \u0432 \u0430\u0440\u0445\u0438\u0432 \u0432",
   publishAt: "\u041E\u043F\u0443\u0431\u043B\u0438\u043A\u043E\u0432\u0430\u0442\u044C \u0432",
   archiveAtLabel: "\u041F\u0435\u0440\u0435\u043D\u043E\u0441 \u0432 \u0430\u0440\u0445\u0438\u0432",
-  publishAtLabel: "\u041F\u0443\u0431\u043B\u0438\u043A\u0430\u0446\u0438\u044F"
+  publishAtLabel: "\u041F\u0443\u0431\u043B\u0438\u043A\u0430\u0446\u0438\u044F",
+  sortDateTimeAsc: "\u0414\u0430\u0442\u0435 - \u041F\u043E \u0432\u043E\u0437\u0440\u0430\u0441\u0442\u0430\u043D\u0438\u044E",
+  sortDateTimeDesc: "\u0414\u0430\u0442\u0435 - \u041F\u043E \u0443\u0431\u044B\u0432\u0430\u043D\u0438\u044E",
+  sortTitleAsc: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u0443 - \u0410-\u042F",
+  sortTitleDesc: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u0443 - \u042F-\u0410",
+  sortStatus: "\u0421\u0442\u0430\u0442\u0443\u0441\u0443"
 };
 function applyTranslations() {
   i18n.addTranslations("en", "blog", EN);
@@ -239,7 +249,7 @@ function getModuleConfig() {
 }
 function useFetchPosts() {
   const [fetchPosts, resource] = useResource({
-    fetchResource: () => getPosts({ pageNumber: 1, pageSize: 99999 }),
+    fetchResource: () => getPosts({ pageNumber: 1, pageSize: 99999, sort: "status" }),
     initialValue: [],
     resourceName: "Blog posts"
   });
@@ -521,6 +531,30 @@ function getPostTableColumnDefs(moduleConfig, t) {
   ];
   return COLUMN_DEFS.filter(notEmpty);
 }
+function getPostTableSortOptions(t) {
+  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")
+    }
+  ];
+}
 const dateFormat = (date) => date.split("-").reverse().join(".");
 function useAdvancedSearch$1({
   t,
@@ -773,6 +807,7 @@ const _sfc_main$3 = defineComponent({
       languageList,
       statusOptionList
     });
+    const sortOptions = getPostTableSortOptions(t);
     const {
       fetchEntityList: fetchPostList,
       isLoading: isPostLoading,
@@ -782,24 +817,27 @@ const _sfc_main$3 = defineComponent({
       handleChange,
       pageNumber,
       pageCount,
-      pageSize
+      pageSize,
+      sort
     } = useDataTable({
       fetchEntityList: (params) => getPosts({
         query: params.searchQuery,
         pageNumber: params.pageNumber,
         pageSize: params.pageSize,
+        sort: params.sort || void 0,
         ...filterParams.value
       }),
       initialValue: [],
       resourceName: "Blog post list",
-      pageSize: 100
+      pageSize: 100,
+      defaultSort: sortOptions[0].value
     });
     watch(filterParams, () => {
       if (isModuleConfigLoading.value || isCategoryListLoading.value) {
         return;
       }
       const newQuery = {
-        ...pick(route.query, ["query", "pageNumber"]),
+        ...pick(route.query, ["query", "pageNumber", "sort"]),
         ...filterParams.value
       };
       if (!isEqual(route.query, newQuery)) {
@@ -842,6 +880,8 @@ const _sfc_main$3 = defineComponent({
       t,
       formatDateTime,
       columnDefs,
+      sortOptions,
+      sortValue: sort,
       rowData: displayedPostList,
       handleResourceDelete,
       isDeleting,
@@ -909,6 +949,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
           pageSize: _ctx.pageSize,
           disabled: _ctx.isRowDataLoading
         },
+        sort: { options: _ctx.sortOptions, value: _ctx.sortValue },
         "data-table": "blog-post",
         onChange: _ctx.handleChange
       }, {
@@ -1019,12 +1060,12 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
           }, 1032, ["title", "disabled", "onClick"])
         ]),
         _: 1
-      }, 8, ["column-defs", "row-data", "loading", "error-message", "search-query", "pagination", "onChange"])
+      }, 8, ["column-defs", "row-data", "loading", "error-message", "search-query", "pagination", "sort", "onChange"])
     ]),
     _: 1
   }, 8, ["title", "header-buttons"]);
 }
-var BlogPostList = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-2ee9b750"]]);
+var BlogPostList = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-02162423"]]);
 var PostForm_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _sfc_main$2 = defineComponent({
   name: "BlogPostForm",
@@ -1090,7 +1131,7 @@ const _sfc_main$2 = defineComponent({
         return relatedPost.id !== ((_a2 = post.value) == null ? void 0 : _a2.id);
       }).map((post2) => ({
         value: post2.id,
-        label: post2.title
+        label: (post2.status === "ARCHIVED" ? `${t("blog:statusArchived")} - ` : post2.status === "DRAFT" ? `${t("blog:statusDraft")} - ` : post2.datetime ? formatDate(new Date(post2.datetime)) + " - " : "") + post2.title
       }))
     );
     const isSubmitting = ref(false);
@@ -1555,7 +1596,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["title", "is-content-loading", "header-buttons", "footer"]);
 }
-var BlogPostForm = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-62596ad5"]]);
+var BlogPostForm = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-22282a12"]]);
 function convertCategoryList(categoryList, languages) {
   return categoryList.map((category) => {
     if (languages.length > 0) {
@@ -1906,7 +1947,8 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
               ]),
               _: 1
             }, 8, ["tags", "onClick:tag"])
-          ])
+          ]),
+          key: "0"
         } : void 0
       ]), 1032, ["column-defs", "row-data", "loading", "error-message", "search-query", "pagination", "onChange"])
     ]),

package/dist/locales/en.d.ts

@@ -84,4 +84,9 @@ export declare const EN: {
     publishAt: string;
     archiveAtLabel: string;
     publishAtLabel: string;
+    sortDateTimeAsc: string;
+    sortDateTimeDesc: string;
+    sortTitleAsc: string;
+    sortTitleDesc: string;
+    sortStatus: string;
 };

package/dist/services/requests.d.ts

@@ -6,6 +6,7 @@ export declare function getPosts(params?: {
     query?: string;
     pageNumber?: number;
     pageSize?: number;
+    sort?: string;
 }): Promise<ResponseBody<PostShort[]>>;
 export declare function getBlogPostCount(): Promise<ResponseBody<{
     count: number;

package/dist/style.css

@@ -1 +1 @@
-.filters[data-v-2ee9b750]{margin-bottom:1rem;width:100%;display:grid;gap:1rem;grid-template-columns:1fr 1fr}.filters[data-v-2ee9b750]:not(:first-child){margin-top:1rem}.status span[data-v-2ee9b750]:first-child{display:block}.status span[data-v-2ee9b750]:nth-child(2){display:block;margin-top:5px;font-size:.8rem}.status span:nth-child(2) i[data-v-2ee9b750]{display:block}.status[data-v-62596ad5]{display:flex;align-items:flex-end}.status-value[data-v-62596ad5]{flex-basis:50%}.status-checkbox[data-v-62596ad5]{margin-left:20px;padding-bottom:8px}.status-date[data-v-62596ad5]{margin-left:20px;flex:1 1 1px}
+.filters[data-v-02162423]{margin-bottom:1rem;width:100%;display:grid;gap:1rem;grid-template-columns:1fr 1fr}.filters[data-v-02162423]:not(:first-child){margin-top:1rem}.status span[data-v-02162423]{display:block}.status span[data-v-02162423]:nth-child(2){display:block;margin-top:5px;font-size:.8rem}.status span:nth-child(2) i[data-v-02162423]{display:block}.status[data-v-22282a12]{display:flex;align-items:flex-end}.status-value[data-v-22282a12]{flex-basis:50%}.status-checkbox[data-v-22282a12]{margin-left:20px;padding-bottom:8px}.status-date[data-v-22282a12]{margin-left:20px;flex:1 1 1px}

package/dist/views/Categories/CategoryForm/CategoryForm.vue.d.ts

@@ -49,5 +49,5 @@ declare const _default: import("vue").DefineComponent<{}, {
     handleSeoFieldGroupChange: ({ title, description, keywords, image, }: SeoChangeEvent) => void;
     tabList: import("vue").ComputedRef<TabType[]>;
     selectedTabId: import("vue").Ref<string>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/views/Categories/CategoryList/CategoryList.vue.d.ts

@@ -22,5 +22,5 @@ declare const _default: import("vue").DefineComponent<{}, {
     languageOptionList: import("vue").ComputedRef<import("@tager/admin-ui").OptionType<string>[]>;
     tags: import("vue").ComputedRef<import("@tager/admin-ui").FilterTagType[]>;
     tagRemovalHandler: (event: import("@tager/admin-ui").FilterTagType) => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/views/Posts/PostForm/PostForm.vue.d.ts

@@ -2764,5 +2764,5 @@ declare const _default: import("vue").DefineComponent<{}, {
     urlAliasTemplate: import("vue").ComputedRef<string>;
     handleCategoriesChange: (selectedOptions: OptionType<number>[]) => void;
     statusOptions: import("vue").ComputedRef<OptionType<string>[]>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/views/Posts/PostList/PostList.helpers.d.ts

@@ -1,7 +1,8 @@
 import { TFunction } from 'i18next';
 import { Nullable } from '@tager/admin-services';
-import { ColumnDefinition } from '@tager/admin-ui';
+import { ColumnDefinition, OptionType } from '@tager/admin-ui';
 import { Category, ModuleConfig, Language, PostShort } from '../../../typings/model';
 export declare function convertPostList(postList: PostShort[], selectedCategory: Nullable<Category>, languages: Language[]): PostShort[];
 export declare function getStatuses(t: TFunction): Record<string, string>;
 export declare function getPostTableColumnDefs(moduleConfig: Nullable<ModuleConfig>, t: TFunction): ColumnDefinition<PostShort>[];
+export declare function getPostTableSortOptions(t: TFunction): Array<OptionType>;

package/dist/views/Posts/PostList/PostList.vue.d.ts

@@ -7,6 +7,8 @@ declare const _default: import("vue").DefineComponent<{}, {
     t: import("i18next").TFunction;
     formatDateTime: typeof formatDateTime;
     columnDefs: import("vue").ComputedRef<ColumnDefinition<PostShort>[]>;
+    sortOptions: OptionType<string>[];
+    sortValue: import("vue").Ref<Nullable<string>>;
     rowData: import("vue").ComputedRef<PostShort[]>;
     handleResourceDelete: (entityId: string | number) => void;
     isDeleting: (entityId: string | number) => boolean;
@@ -34,5 +36,5 @@ declare const _default: import("vue").DefineComponent<{}, {
     getStatuses: typeof getStatuses;
     handleResourceClone: (entityId: string | number) => void;
     isBusy: (postId: number) => boolean;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tager/admin-blog",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "MIT",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
@@ -34,9 +34,9 @@
     "@babel/eslint-parser": "^7.17.0",
     "@rushstack/eslint-patch": "^1.1.2",
     "@tager/admin-dynamic-field": "^1.0.0",
-    "@tager/admin-layout": "^1.0.0",
-    "@tager/admin-services": "^1.0.0",
-    "@tager/admin-ui": "^1.0.1",
+    "@tager/admin-layout": "^1.0.7",
+    "@tager/admin-services": "^1.1.3",
+    "@tager/admin-ui": "^1.0.15",
     "@types/filesize": "^5.0.0",
     "@types/lodash.isequal": "^4.5.6",
     "@types/lodash.pick": "^4.4.7",

package/src/hooks/useFetchPosts.ts

@@ -7,7 +7,8 @@ import { getPosts } from '../services/requests';
 
 export function useFetchPosts(): ResourceRef<PostShort[]> {
   const [fetchPosts, resource] = useResource<PostShort[]>({
-    fetchResource: () => getPosts({ pageNumber: 1, pageSize: 99999 }),
+    fetchResource: () =>
+      getPosts({ pageNumber: 1, pageSize: 99999, sort: 'status' }),
     initialValue: [],
     resourceName: 'Blog posts',
   });

package/src/locales/en.ts

@@ -17,7 +17,7 @@ export const EN = {
   edit: 'Edit',
   remove: 'Remove',
   postsByCategory: 'Posts by category',
-  name: 'Name',
+  name: 'Title',
   image: 'Image',
   language: 'Language',
   languages: 'Languages',
@@ -89,4 +89,10 @@ export const EN = {
   publishAt: 'Publish at',
   archiveAtLabel: 'Archive at',
   publishAtLabel: 'Publish at',
+
+  sortDateTimeAsc: 'Date - Newest to Oldest',
+  sortDateTimeDesc: 'Date - Oldest to Newest',
+  sortTitleAsc: 'Title - A-Z',
+  sortTitleDesc: 'Title - Z-A',
+  sortStatus: 'Status',
 };

package/src/locales/ru.ts

@@ -19,7 +19,7 @@ export const RU: typeof EN = {
   edit: 'Редактировать',
   remove: 'Удалить',
   postsByCategory: 'Посты по категориям',
-  name: 'Название',
+  name: 'Заголовок',
   image: 'Изображение',
   language: 'Язык',
   languages: 'Языки',
@@ -91,6 +91,12 @@ export const RU: typeof EN = {
   publishAt: 'Опубликовать в',
   archiveAtLabel: 'Перенос в архив',
   publishAtLabel: 'Публикация',
+
+  sortDateTimeAsc: 'Дате - По возрастанию',
+  sortDateTimeDesc: 'Дате - По убыванию',
+  sortTitleAsc: 'Заголовку - А-Я',
+  sortTitleDesc: 'Заголовку - Я-А',
+  sortStatus: 'Статусу',
 };
 
 export default RU;

package/src/services/requests.ts

@@ -15,6 +15,7 @@ export function getPosts(params?: {
   query?: string;
   pageNumber?: number;
   pageSize?: number;
+  sort?: string;
 }): Promise<ResponseBody<PostShort[]>> {
   return request.get({ path: '/admin/blog/posts', params });
 }

package/src/views/Posts/PostForm/PostForm.vue

@@ -254,7 +254,7 @@ import {
   FormFieldFileInput,
   FormFieldMultiSelect,
   SeoFieldGroup,
-  TabList,
+  TabList, formatDateTime, formatDate,
 } from '@tager/admin-ui';
 import { DynamicField } from '@tager/admin-dynamic-field';
 import { Page } from '@tager/admin-layout';
@@ -365,9 +365,14 @@ export default defineComponent({
         .filter((relatedPost) => relatedPost.id !== post.value?.id)
         .map((post) => ({
           value: post.id,
-          label: post.title,
+          label:
+            (post.status === 'ARCHIVED'
+              ? `${t('blog:statusArchived')} - `
+              : post.status === 'DRAFT'
+              ? `${t('blog:statusDraft')} - `
+              : (post.datetime ? formatDate(new Date(post.datetime)) + ' - ' : '')) + post.title,
         }))
-    );
+    )
 
     /** Form State **/
     const isSubmitting = ref<boolean>(false);

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,
@@ -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,7 +1,7 @@
 <template>
   <Page
-    :title="pageTitle"
-    :header-buttons="[
+      :title="pageTitle"
+      :header-buttons="[
       {
         text: $i18n.t('blog:newPost'),
         href: getBlogPostFormUrl({ postId: 'create' }),
@@ -10,66 +10,67 @@
   >
     <template #content>
       <DataTable
-        :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"
+          :sort="{ options: sortOptions, value: sortValue }"
+          data-table="blog-post"
+          @change="handleChange"
       >
         <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"
+                  v-model:selected-options="categoryFilter"
+                  :options="categoryOptionList"
+                  name="categoryFilter"
+                  :searchable="true"
+                  :label="$i18n.t('blog:category')"
+                  class="filter"
               />
 
               <FormFieldMultiSelect
-                v-if="isLangSpecific"
-                v-model:selected-options="languageFilter"
-                :options="languageOptionList"
-                name="languageFilter"
-                :searchable="true"
-                :label="$i18n.t('blog:language')"
-                class="filter"
+                  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"
+                  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"
+                  v-model:value="fromDateFilter"
+                  :label="$i18n.t('blog:dateOfPublicationFrom')"
+                  name="fromDateFilter"
+                  type="date"
+                  :max="toDateFilter"
               />
 
               <FormField
-                v-model:value="toDateFilter"
-                :label="$i18n.t('blog:dateOfPublicationTo')"
-                name="toDateFilter"
-                type="date"
-                :min="fromDateFilter"
+                  v-model:value="toDateFilter"
+                  :label="$i18n.t('blog:dateOfPublicationTo')"
+                  name="toDateFilter"
+                  type="date"
+                  :min="fromDateFilter"
               />
             </div>
           </AdvancedSearch>
@@ -78,10 +79,12 @@
         <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>
@@ -91,30 +94,30 @@
 
         <template #cell(actions)="{ row }">
           <BaseButton
-            variant="icon"
-            :title="$i18n.t('blog:edit')"
-            :disabled="isBusy(row.id)"
-            :href="getBlogPostFormUrl({ postId: row.id })"
+              variant="icon"
+              :title="$i18n.t('blog:edit')"
+              :disabled="isBusy(row.id)"
+              :href="getBlogPostFormUrl({ postId: row.id })"
           >
-            <EditIcon />
+            <EditIcon/>
           </BaseButton>
 
           <BaseButton
-            variant="icon"
-            :title="$i18n.t('blog:clone')"
-            :disabled="isBusy(row.id)"
-            @click="handleResourceClone(row.id)"
+              variant="icon"
+              :title="$i18n.t('blog:clone')"
+              :disabled="isBusy(row.id)"
+              @click="handleResourceClone(row.id)"
           >
-            <ContentCopyIcon />
+            <ContentCopyIcon/>
           </BaseButton>
 
           <BaseButton
-            variant="icon"
-            :title="$i18n.t('blog:remove')"
-            :disabled="isBusy(row.id)"
-            @click="handleResourceDelete(row.id)"
+              variant="icon"
+              :title="$i18n.t('blog:remove')"
+              :disabled="isBusy(row.id)"
+              @click="handleResourceDelete(row.id)"
           >
-            <DeleteIcon />
+            <DeleteIcon/>
           </BaseButton>
         </template>
       </DataTable>
@@ -123,10 +126,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, watch } from 'vue';
+import {computed, defineComponent, watch} from 'vue';
 import isEqual from 'lodash.isequal';
 import pick from 'lodash.pick';
-import { useRoute, useRouter } from 'vue-router';
+import {useRoute, useRouter} from 'vue-router';
 
 import {
   ColumnDefinition,
@@ -148,29 +151,30 @@ import {
   useResourceClone,
   useResourceDelete,
 } from '@tager/admin-services';
-import { Page } from '@tager/admin-layout';
+import {Page} from '@tager/admin-layout';
 
-import { useFetchModuleConfig, useFetchCategories } from '../../../hooks';
+import {useFetchModuleConfig, useFetchCategories} from '../../../hooks';
 import {
   clonePost,
   deleteBlogPost,
   getPosts,
 } from '../../../services/requests';
-import { getBlogPostFormUrl } from '../../../utils/paths';
+import {getBlogPostFormUrl} from '../../../utils/paths';
 import {
   Category,
   Language,
   PostFull,
   PostShort,
 } from '../../../typings/model';
-import { getStatusOptions } from '../PostForm/PostForm.helpers';
+import {getStatusOptions} from '../PostForm/PostForm.helpers';
 
 import {
   convertPostList,
   getPostTableColumnDefs,
+  getPostTableSortOptions,
   getStatuses,
 } from './PostList.helpers';
-import { useAdvancedSearch } from './hooks';
+import {useAdvancedSearch} from './hooks';
 
 export default defineComponent({
   name: 'PostList',
@@ -186,48 +190,48 @@ export default defineComponent({
     DataTable,
   },
   setup() {
-    const { t } = useI18n();
+    const {t} = useI18n();
     const route = useRoute();
     const router = useRouter();
 
     const categoryId = computed<string>(() => {
       return Array.isArray(route.query.category)
-        ? (route.query.category[0] as string) ?? ''
-        : (route.query.category as string);
+          ? (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();
+    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();
+    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
-        ? `${t('blog:postsByCategory')} "${selectedCategory.value.name}"`
-        : t('blog:posts');
+          ? `${t('blog:postsByCategory')} "${selectedCategory.value.name}"`
+          : t('blog:posts');
     });
 
     const isLangSpecific = computed<boolean>(
-      () => languageOptionList.value.length > 1
+        () => languageOptionList.value.length > 1
     );
 
     /** Advanced search **/
@@ -251,6 +255,8 @@ export default defineComponent({
       statusOptionList,
     });
 
+    const sortOptions = getPostTableSortOptions(t);
+
     /** Fetch Post list **/
 
     const {
@@ -263,17 +269,20 @@ export default defineComponent({
       pageNumber,
       pageCount,
       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: [],
       resourceName: 'Blog post list',
       pageSize: 100,
+      defaultSort: sortOptions[0].value,
     });
 
     watch(filterParams, () => {
@@ -282,38 +291,38 @@ export default defineComponent({
       }
 
       const newQuery = {
-        ...pick(route.query, ['query', 'pageNumber']),
+        ...pick(route.query, ['query', 'pageNumber', 'sort']),
         ...filterParams.value,
       };
 
       if (!isEqual(route.query, newQuery)) {
-        router.replace({ 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,
     });
 
-    const { isCloning, handleResourceClone } = useResourceClone({
+    const {isCloning, handleResourceClone} = useResourceClone({
       cloneResource: clonePost,
       confirmMessage: t('blog:cloneConfirm'),
       successMessage: t('blog:cloneSuccess'),
@@ -326,13 +335,15 @@ export default defineComponent({
     }
 
     const columnDefs = computed<ColumnDefinition<PostShort>[]>(() =>
-      getPostTableColumnDefs(moduleConfig.value, t)
+        getPostTableColumnDefs(moduleConfig.value, t)
     );
 
     return {
       t,
       formatDateTime,
       columnDefs,
+      sortOptions,
+      sortValue: sort,
       rowData: displayedPostList,
       handleResourceDelete,
       isDeleting,
@@ -383,7 +394,7 @@ export default defineComponent({
 }
 
 .status {
-  span:first-child {
+  span {
     display: block;
   }