@tager/admin-blog 0.3.38 → 0.3.39

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { request, useResource, notEmpty, isNotNullish, useResourceDelete, useResourceClone, createId, convertRequestErrorToMap, urlTranslit, getWebsiteOrigin, i18n } from '@tager/admin-services';
+import { request, useResource, createId, notEmpty, isNotNullish, useResourceDelete, useResourceClone, convertRequestErrorToMap, urlTranslit, getWebsiteOrigin, i18n } from '@tager/admin-services';
 import { onMounted, watch, computed, ref, defineComponent } from '@vue/composition-api';
 import { getFilterParamAsStringArray, getFilterParamAsString, getFilterParams, useTranslation, useDataTable, ShortCodeConstructor, FormFooter, createTabErrorFinder } from '@tager/admin-ui';
 import { compile } from 'path-to-regexp';
@@ -37,7 +37,6 @@ const EN = {
     actions: 'Actions',
     updatePost: 'Update post',
     title: 'Title',
-    status: 'Status',
     link: 'Link',
     excerpt: 'Excerpt',
     body: 'Body',
@@ -79,9 +78,10 @@ const EN = {
     },
     parentCategory: 'Parent category',
     noParent: 'No parent',
+    status: 'Status',
     statusPublished: 'Published',
     statusDraft: 'Draft',
-    statusArchived: 'Archived'
+    statusArchived: 'Archived',
 };
 
 const RU = {
@@ -118,7 +118,6 @@ const RU = {
     updatePost: 'Обновить пост',
     title: 'Заголовок',
     link: 'Ссылка',
-    status: 'Статус',
     excerpt: 'Краткое описание',
     defaultCategory: 'Категория по-умолчанию',
     body: 'Содержание',
@@ -159,9 +158,10 @@ const RU = {
     },
     parentCategory: 'Родительская категория',
     noParent: 'Нет родительской',
+    status: 'Статус',
     statusPublished: 'Опубликован',
     statusDraft: 'Черновик',
-    statusArchived: 'Снят с публикации'
+    statusArchived: 'В архиве',
 };
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -2671,6 +2671,117 @@ function getBlogCategoryFormUrl(params) {
     });
 }
 
+function generateNumberArray(length) {
+    return Array.from({ length }, (_, index) => index);
+}
+function getNameWithDepth(name, depth) {
+    return (generateNumberArray(depth)
+        .map(() => '—')
+        .join(' ') +
+        ' ' +
+        name);
+}
+
+const getStatusOptions = (t) => [
+    { label: t('blog:statusPublished'), value: 'PUBLISHED' },
+    { label: t('blog:statusDraft'), value: 'DRAFT' },
+    { label: t('blog:statusArchived'), value: 'ARCHIVED' },
+];
+function convertPostToFormValues(post, languageOptionList, postOptionList, additionalFieldList, statusOptions) {
+    var _a, _b, _c;
+    if (!post) {
+        return {
+            title: '',
+            excerpt: '',
+            body: '',
+            datetime: '',
+            coverImage: null,
+            image: null,
+            imageMobile: null,
+            pageTitle: '',
+            pageDescription: '',
+            openGraphImage: null,
+            urlAlias: '',
+            categories: [],
+            language: null,
+            relatedPosts: [],
+            tags: '',
+            additionalFields: additionalFieldList.map((fieldConfig) => universalFieldUtils.createFormField(fieldConfig, null)),
+            status: statusOptions[0],
+        };
+    }
+    const currentLangOption = languageOptionList.find((option) => option.value === post.language);
+    const selectedPostOptionList = postOptionList.filter((option) => post.relatedPosts.some((relatedPost) => relatedPost.id === option.value));
+    const foundStatus = (_a = statusOptions.find(({ value }) => value === post.status)) !== null && _a !== void 0 ? _a : statusOptions[0];
+    return {
+        title: post.title,
+        excerpt: post.excerpt,
+        body: post.body,
+        datetime: post.datetime ? post.datetime.substr(0, 10) : '',
+        coverImage: post.coverImage
+            ? { id: createId(), file: post.coverImage }
+            : null,
+        image: post.image ? { id: createId(), file: post.image } : null,
+        imageMobile: post.imageMobile
+            ? { id: createId(), file: post.imageMobile }
+            : null,
+        pageTitle: (_b = post.pageTitle) !== null && _b !== void 0 ? _b : '',
+        pageDescription: (_c = post.pageDescription) !== null && _c !== void 0 ? _c : '',
+        openGraphImage: post.openGraphImage
+            ? { id: createId(), file: post.openGraphImage }
+            : null,
+        urlAlias: post.urlAlias,
+        categories: post.categories.map((category) => ({
+            value: category.id,
+            label: category.name,
+        })),
+        language: currentLangOption !== null && currentLangOption !== void 0 ? currentLangOption : null,
+        relatedPosts: selectedPostOptionList,
+        tags: post.tags.join(','),
+        additionalFields: additionalFieldList.map((fieldConfig) => {
+            const postAdditionalField = post.additionalFields.find(({ name }) => name === fieldConfig.name);
+            return universalFieldUtils.createFormField(fieldConfig, postAdditionalField === null || postAdditionalField === void 0 ? void 0 : postAdditionalField.value);
+        }),
+        status: foundStatus,
+    };
+}
+function convertFormValuesToCreationPayload(values) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    return {
+        title: values.title,
+        excerpt: values.excerpt,
+        urlAlias: values.urlAlias,
+        body: values.body,
+        datetime: values.datetime,
+        coverImage: (_b = (_a = values.coverImage) === null || _a === void 0 ? void 0 : _a.file.id) !== null && _b !== void 0 ? _b : null,
+        image: (_d = (_c = values.image) === null || _c === void 0 ? void 0 : _c.file.id) !== null && _d !== void 0 ? _d : null,
+        imageMobile: (_f = (_e = values.imageMobile) === null || _e === void 0 ? void 0 : _e.file.id) !== null && _f !== void 0 ? _f : null,
+        pageTitle: values.pageTitle,
+        pageDescription: values.pageDescription,
+        openGraphImage: (_h = (_g = values.openGraphImage) === null || _g === void 0 ? void 0 : _g.file.id) !== null && _h !== void 0 ? _h : null,
+        categories: values.categories.map((option) => option.value),
+        language: (_k = (_j = values.language) === null || _j === void 0 ? void 0 : _j.value) !== null && _k !== void 0 ? _k : null,
+        relatedPosts: values.relatedPosts.map((relatedPostOption) => relatedPostOption.value),
+        tags: values.tags.split(',').filter((tag) => tag.trim().length > 0),
+        additionalFields: values.additionalFields.map((field) => ({
+            name: field.config.name,
+            value: universalFieldUtils.getOutgoingValue(field),
+        })),
+        status: values.status.value,
+    };
+}
+function convertFormValuesToUpdatePayload(values) {
+    return Object.assign(Object.assign({}, convertFormValuesToCreationPayload(values)), { urlAlias: values.urlAlias });
+}
+function convertCategoryListToOptions(categoryList, languageId) {
+    return categoryList
+        .filter(({ language }) => (languageId ? language === languageId : true))
+        .map(({ id, name, depth }) => ({
+        value: id,
+        label: getNameWithDepth(name, depth),
+    }));
+}
+
 function convertPostList(postList, selectedCategory, languages) {
     return postList
         .filter((post) => selectedCategory
@@ -2701,7 +2812,7 @@ function getPostTableColumnDefs(moduleConfig, t) {
             name: 'ID',
             field: 'id',
             style: { width: '50px', textAlign: 'center' },
-            headStyle: { width: '50px', textAlign: 'center' }
+            headStyle: { width: '50px', textAlign: 'center' },
         },
         {
             id: 2,
@@ -2709,9 +2820,7 @@ function getPostTableColumnDefs(moduleConfig, t) {
             field: 'status',
             style: { width: '120px' },
             headStyle: { width: '120px' },
-            format: ({ row }) => {
-                return getStatuses(t)[row.status];
-            }
+            format: ({ row }) => getStatuses(t)[row.status],
         },
         {
             id: 2,
@@ -2721,16 +2830,16 @@ function getPostTableColumnDefs(moduleConfig, t) {
             format: ({ row }) => ({
                 adminLink: {
                     text: row.title,
-                    url: getBlogPostFormUrl({ postId: row.id })
+                    url: getBlogPostFormUrl({ postId: row.id }),
                 },
                 websiteLink: {
                     text: row.url,
                     url: [
                         process.env.VUE_APP_WEBSITE_URL || window.location.origin,
-                        row.url
-                    ].join('')
-                }
-            })
+                        row.url,
+                    ].join(''),
+                },
+            }),
         },
         {
             id: 3,
@@ -2738,49 +2847,45 @@ function getPostTableColumnDefs(moduleConfig, t) {
             field: 'image',
             type: 'image',
             style: { width: '250px' },
-            headStyle: { width: '250px' }
+            headStyle: { width: '250px' },
         },
         isLangSpecific
             ? { id: 4, name: t('blog:language'), field: 'language' }
             : null,
-        { id: 5, name: t('blog:date'), field: 'datetime', type: 'datetime', options: { ignoreStartOfDayTime: true } },
+        {
+            id: 5,
+            name: t('blog:date'),
+            field: 'datetime',
+            type: 'datetime',
+            options: { ignoreStartOfDayTime: true },
+        },
         {
             id: 6,
             name: t('blog:categories'),
             field: 'categories',
-            format: ({ row }) => row.categories.map((category) => category.name).join(', ')
+            format: ({ row }) => row.categories.map((category) => category.name).join(', '),
         },
         {
             id: 7,
             name: t('blog:actions'),
             field: 'actions',
             style: { whiteSpace: 'nowrap', width: '120px' },
-            headStyle: { whiteSpace: 'nowrap', width: '120px' }
-        }
+            headStyle: { whiteSpace: 'nowrap', width: '120px' },
+        },
     ];
     return COLUMN_DEFS.filter(notEmpty);
 }
 
-function generateNumberArray(length) {
-    return Array.from({ length }, (_, index) => index);
-}
-function getNameWithDepth(name, depth) {
-    return (generateNumberArray(depth)
-        .map(() => '—')
-        .join(' ') +
-        ' ' +
-        name);
-}
-
 var FilterTypes;
 (function (FilterTypes) {
     FilterTypes["CATEGORY"] = "category";
     FilterTypes["LANGUAGE"] = "language";
     FilterTypes["FROM_DATE"] = "from-date";
     FilterTypes["TO_DATE"] = "to-date";
+    FilterTypes["STATUS"] = "status";
 })(FilterTypes || (FilterTypes = {}));
 const dateFormat = (date) => date.split('-').reverse().join('.');
-function useAdvancedSearch({ context, categoryList, languageList, }) {
+function useAdvancedSearch({ context, categoryList, languageList, statusOptionList, }) {
     /** Category **/
     const categoryOptionList = computed(() => categoryList.value.map(({ id, name, depth }) => ({
         value: String(id),
@@ -2838,11 +2943,21 @@ function useAdvancedSearch({ context, categoryList, languageList, }) {
             title: context.root.$t('blog:dateOfPublication'),
         };
     });
+    /** Status **/
+    const initialStatusFilter = computed(() => {
+        const queryValue = getFilterParamAsStringArray(context.root.$route.query, FilterTypes.STATUS);
+        return statusOptionList.value.filter(({ value }) => queryValue.some((selected) => selected === value));
+    });
+    const statusFilter = ref(initialStatusFilter.value);
+    watch(initialStatusFilter, () => {
+        statusFilter.value = initialStatusFilter.value;
+    });
     /** Params **/
     const filterParams = computed(() => {
         const filters = {
             [FilterTypes.CATEGORY]: categoryFilter.value.map(({ value }) => value),
             [FilterTypes.LANGUAGE]: languageFilter.value.map(({ value }) => value),
+            [FilterTypes.STATUS]: statusFilter.value.map(({ value }) => value),
         };
         if (fromDateFilter.value) {
             filters[FilterTypes.FROM_DATE] = fromDateFilter.value;
@@ -2864,6 +2979,9 @@ function useAdvancedSearch({ context, categoryList, languageList, }) {
             fromDateFilter.value = '';
             toDateFilter.value = '';
         }
+        if (event.name === FilterTypes.STATUS) {
+            statusFilter.value = statusFilter.value.filter(({ value }) => value !== event.value);
+        }
     }
     /** Tags **/
     const tags = computed(() => [
@@ -2880,6 +2998,12 @@ function useAdvancedSearch({ context, categoryList, languageList, }) {
             title: context.root.$t('blog:language'),
         })),
         date.value,
+        ...statusFilter.value.map(({ value, label }) => ({
+            value,
+            label,
+            name: FilterTypes.STATUS,
+            title: context.root.$t('blog:status'),
+        })),
     ].filter(isNotNullish));
     /** Helpers **/
     const selectedCategoryOptionList = computed(() => {
@@ -2899,6 +3023,7 @@ function useAdvancedSearch({ context, categoryList, languageList, }) {
         languageOptionList,
         fromDateFilter,
         toDateFilter,
+        statusFilter,
         tagRemovalHandler,
         tags: tags,
         filterParams,
@@ -2914,6 +3039,7 @@ var script = defineComponent({
             return Array.isArray(context.root.$route.query.category)
                 ? (_a = context.root.$route.query.category[0]) !== null && _a !== void 0 ? _a : '' : context.root.$route.query.category;
         });
+        const statusOptionList = computed(() => getStatusOptions(t));
         /** Fetch module config **/
         const { data: moduleConfig, loading: isModuleConfigLoading, } = useFetchModuleConfig({ context });
         const languageList = computed(() => { var _a, _b; return (_b = (_a = moduleConfig.value) === null || _a === void 0 ? void 0 : _a.languages) !== null && _b !== void 0 ? _b : []; });
@@ -2930,10 +3056,11 @@ var script = defineComponent({
                 : context.root.$t('blog:posts');
         });
         /** Advanced search **/
-        const { categoryFilter, categoryOptionList, languageFilter, languageOptionList, fromDateFilter, toDateFilter, filterParams, tags, tagRemovalHandler, } = useAdvancedSearch({
+        const { categoryFilter, categoryOptionList, languageFilter, languageOptionList, fromDateFilter, toDateFilter, filterParams, tags, tagRemovalHandler, statusFilter, } = useAdvancedSearch({
             context,
             categoryList,
             languageList,
+            statusOptionList,
         });
         const isLangSpecific = computed(() => languageOptionList.value.length > 1);
         /** Fetch Post list **/
@@ -3002,6 +3129,8 @@ var script = defineComponent({
             languageOptionList,
             fromDateFilter,
             toDateFilter,
+            statusFilter,
+            statusOptionList,
             tags,
             tagRemovalHandler,
             // Clone
@@ -3278,6 +3407,23 @@ var __vue_render__ = function () {
                                   1
                                 ),
                               ]),
+                              _vm._v(" "),
+                              _c("form-field-multi-select", {
+                                staticClass: "filter",
+                                attrs: {
+                                  options: _vm.statusOptionList,
+                                  name: "statusFilter",
+                                  searchable: true,
+                                  label: _vm.$t("blog:status"),
+                                },
+                                model: {
+                                  value: _vm.statusFilter,
+                                  callback: function ($$v) {
+                                    _vm.statusFilter = $$v;
+                                  },
+                                  expression: "statusFilter",
+                                },
+                              }),
                             ],
                             1
                           ),
@@ -3359,11 +3505,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-6697ac14_0", { source: ".filters[data-v-6697ac14] {\n  display: flex;\n  margin: 0 -10px;\n}\n.filters[data-v-6697ac14]:not(:first-child) {\n  margin-top: 10px;\n}\n.filters .filter[data-v-6697ac14] {\n  padding: 10px 10px 0;\n  width: 50%;\n  margin: 0;\n}\n.date-label[data-v-6697ac14] {\n  margin-bottom: 0.5rem;\n}\n.date-content[data-v-6697ac14] {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\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":"AAqUA;EACA,aAAA;EACA,eAAA;ACpUA;ADsUA;EACA,gBAAA;ACpUA;ADuUA;EACA,oBAAA;EACA,UAAA;EACA,SAAA;ACrUA;ADyUA;EACA,qBAAA;ACtUA;ADyUA;EACA,aAAA;EACA,qCAAA;EACA,gBAAA;ACtUA;;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            </div>\n          </advanced-search>\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  useDataTable,\n  useTranslation,\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';\n\nimport { convertPostList, getPostTableColumnDefs } 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    /** 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    } = useAdvancedSearch({\n      context,\n      categoryList,\n      languageList,\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      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      tags,\n      tagRemovalHandler,\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</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/*# sourceMappingURL=PostList.vue.map */"]}, media: undefined });
+    inject("data-v-075b6310_0", { source: ".filters[data-v-075b6310] {\n  display: flex;\n  margin: 0 -10px;\n}\n.filters[data-v-075b6310]:not(:first-child) {\n  margin-top: 10px;\n}\n.filters .filter[data-v-075b6310] {\n  padding: 10px 10px 0;\n  width: 50%;\n  margin: 0;\n}\n.date-label[data-v-075b6310] {\n  margin-bottom: 0.5rem;\n}\n.date-content[data-v-075b6310] {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\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":"AAsVA;EACA,aAAA;EACA,eAAA;ACrVA;ADuVA;EACA,gBAAA;ACrVA;ADwVA;EACA,oBAAA;EACA,UAAA;EACA,SAAA;ACtVA;AD0VA;EACA,qBAAA;ACvVA;AD0VA;EACA,aAAA;EACA,qCAAA;EACA,gBAAA;ACvVA;;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(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} 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 } 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      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\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</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/*# sourceMappingURL=PostList.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-6697ac14";
+  const __vue_scope_id__ = "data-v-075b6310";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
@@ -3387,98 +3533,6 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-function convertPostToFormValues(post, languageOptionList, postOptionList, additionalFieldList) {
-    var _a, _b;
-    if (!post) {
-        return {
-            title: '',
-            excerpt: '',
-            body: '',
-            datetime: '',
-            coverImage: null,
-            image: null,
-            imageMobile: null,
-            pageTitle: '',
-            pageDescription: '',
-            openGraphImage: null,
-            urlAlias: '',
-            categories: [],
-            language: null,
-            relatedPosts: [],
-            tags: '',
-            additionalFields: additionalFieldList.map((fieldConfig) => universalFieldUtils.createFormField(fieldConfig, null)),
-        };
-    }
-    const currentLangOption = languageOptionList.find((option) => option.value === post.language);
-    const selectedPostOptionList = postOptionList.filter((option) => post.relatedPosts.some((relatedPost) => relatedPost.id === option.value));
-    return {
-        title: post.title,
-        excerpt: post.excerpt,
-        body: post.body,
-        datetime: post.datetime ? post.datetime.substr(0, 10) : '',
-        coverImage: post.coverImage
-            ? { id: createId(), file: post.coverImage }
-            : null,
-        image: post.image ? { id: createId(), file: post.image } : null,
-        imageMobile: post.imageMobile
-            ? { id: createId(), file: post.imageMobile }
-            : null,
-        pageTitle: (_a = post.pageTitle) !== null && _a !== void 0 ? _a : '',
-        pageDescription: (_b = post.pageDescription) !== null && _b !== void 0 ? _b : '',
-        openGraphImage: post.openGraphImage
-            ? { id: createId(), file: post.openGraphImage }
-            : null,
-        urlAlias: post.urlAlias,
-        categories: post.categories.map((category) => ({
-            value: category.id,
-            label: category.name,
-        })),
-        language: currentLangOption !== null && currentLangOption !== void 0 ? currentLangOption : null,
-        relatedPosts: selectedPostOptionList,
-        tags: post.tags.join(','),
-        additionalFields: additionalFieldList.map((fieldConfig, index) => {
-            const postAdditionalField = post.additionalFields.find((item) => item.name === fieldConfig.name);
-            return universalFieldUtils.createFormField(fieldConfig, postAdditionalField === null || postAdditionalField === void 0 ? void 0 : postAdditionalField.value);
-        }),
-    };
-}
-function convertFormValuesToCreationPayload(values) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    return {
-        title: values.title,
-        excerpt: values.excerpt,
-        urlAlias: values.urlAlias,
-        body: values.body,
-        datetime: values.datetime,
-        coverImage: (_b = (_a = values.coverImage) === null || _a === void 0 ? void 0 : _a.file.id) !== null && _b !== void 0 ? _b : null,
-        image: (_d = (_c = values.image) === null || _c === void 0 ? void 0 : _c.file.id) !== null && _d !== void 0 ? _d : null,
-        imageMobile: (_f = (_e = values.imageMobile) === null || _e === void 0 ? void 0 : _e.file.id) !== null && _f !== void 0 ? _f : null,
-        pageTitle: values.pageTitle,
-        pageDescription: values.pageDescription,
-        openGraphImage: (_h = (_g = values.openGraphImage) === null || _g === void 0 ? void 0 : _g.file.id) !== null && _h !== void 0 ? _h : null,
-        status: 'PUBLISHED',
-        categories: values.categories.map((option) => option.value),
-        language: (_k = (_j = values.language) === null || _j === void 0 ? void 0 : _j.value) !== null && _k !== void 0 ? _k : null,
-        relatedPosts: values.relatedPosts.map((relatedPostOption) => relatedPostOption.value),
-        tags: values.tags.split(',').filter((tag) => tag.trim().length > 0),
-        additionalFields: values.additionalFields.map((field) => ({
-            name: field.config.name,
-            value: universalFieldUtils.getOutgoingValue(field),
-        })),
-    };
-}
-function convertFormValuesToUpdatePayload(values) {
-    return Object.assign(Object.assign({}, convertFormValuesToCreationPayload(values)), { urlAlias: values.urlAlias });
-}
-function convertCategoryListToOptions(categoryList, languageId) {
-    return categoryList
-        .filter(({ language }) => (languageId ? language === languageId : true))
-        .map(({ id, name, depth }) => ({
-        value: id,
-        label: getNameWithDepth(name, depth),
-    }));
-}
-
 var script$1 = defineComponent({
     name: 'BlogPostForm',
     components: { DynamicField, ShortCodeConstructor, FormFooter },
@@ -3487,6 +3541,7 @@ var script$1 = defineComponent({
         const postId = computed(() => context.root.$route.params.postId);
         const isCreation = computed(() => postId.value === 'create');
         const urlAliasChanged = ref(false);
+        const statusOptions = computed(() => getStatusOptions(context.root.$t));
         /** Fetch module config **/
         const { data: moduleConfig, loading: isModuleConfigLoading, } = useFetchModuleConfig({ context });
         const languageList = computed(() => { var _a, _b; return (_b = (_a = moduleConfig.value) === null || _a === void 0 ? void 0 : _a.languages) !== null && _b !== void 0 ? _b : []; });
@@ -3526,11 +3581,11 @@ var script$1 = defineComponent({
         })));
         /** Form State **/
         const isSubmitting = ref(false);
-        const values = ref(convertPostToFormValues(post.value, languageOptionList.value, postOptionList.value, (_b = (_a = moduleConfig.value) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : []));
+        const values = ref(convertPostToFormValues(post.value, languageOptionList.value, postOptionList.value, (_b = (_a = moduleConfig.value) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : [], statusOptions.value));
         const errors = ref({});
         watch([post, languageOptionList, postOptionList, moduleConfig], () => {
             var _a, _b;
-            values.value = convertPostToFormValues(post.value, languageOptionList.value, postOptionList.value, (_b = (_a = moduleConfig.value) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : []);
+            values.value = convertPostToFormValues(post.value, languageOptionList.value, postOptionList.value, (_b = (_a = moduleConfig.value) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : [], statusOptions.value);
         });
         function submitForm(event) {
             isSubmitting.value = true;
@@ -3555,7 +3610,7 @@ var script$1 = defineComponent({
                     }
                 }
                 if (event.type === 'create_create-another') {
-                    values.value = convertPostToFormValues(null, languageOptionList.value, postOptionList.value, (_b = (_a = moduleConfig.value) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : []);
+                    values.value = convertPostToFormValues(null, languageOptionList.value, postOptionList.value, (_b = (_a = moduleConfig.value) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : [], statusOptions.value);
                 }
                 context.root.$toast({
                     variant: 'success',
@@ -3740,6 +3795,7 @@ var script$1 = defineComponent({
             handleAliasChange,
             urlAliasTemplate,
             handleCategoriesChange,
+            statusOptions,
         };
     },
 });
@@ -3796,6 +3852,23 @@ var __vue_render__$1 = function () {
                 _vm._v(" "),
                 _vm.selectedTabId === "common"
                   ? [
+                      _c("form-field-select", {
+                        attrs: {
+                          name: "status",
+                          error: _vm.errors.status,
+                          label: _vm.$t("blog:status"),
+                          "no-options-message": _vm.$t("blog:noTemplates"),
+                          options: _vm.statusOptions,
+                        },
+                        model: {
+                          value: _vm.values.status,
+                          callback: function ($$v) {
+                            _vm.$set(_vm.values, "status", $$v);
+                          },
+                          expression: "values.status",
+                        },
+                      }),
+                      _vm._v(" "),
                       _vm.isCreation && _vm.isLangSpecific
                         ? _c("form-field-select", {
                             attrs: {