@tager/admin-blog 0.3.41 → 0.3.42

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 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 { getFilterParamAsStringArray, getFilterParamAsString, getFilterParams, useTranslation, useDataTable, formatDateTime, ShortCodeConstructor, FormFooter, createTabErrorFinder } from '@tager/admin-ui';
 import { compile } from 'path-to-regexp';
 import { universalFieldUtils, DynamicField } from '@tager/admin-dynamic-field';
 
@@ -82,6 +82,12 @@ const EN = {
     statusPublished: 'Published',
     statusDraft: 'Draft',
     statusArchived: 'Archived',
+    scheduleArchive: 'Schedule archive',
+    schedulePublish: 'Schedule publish',
+    archiveAt: 'Archive at',
+    publishAt: 'Publish at',
+    archiveAtLabel: 'Archive at',
+    publishAtLabel: 'Publish at',
 };
 
 const RU = {
@@ -162,6 +168,12 @@ const RU = {
     statusPublished: 'Опубликован',
     statusDraft: 'Черновик',
     statusArchived: 'В архиве',
+    scheduleArchive: 'Запланировать перенос в архив',
+    schedulePublish: 'Запланировать публикацию',
+    archiveAt: 'Перенести в архив в',
+    publishAt: 'Опубликовать в',
+    archiveAtLabel: 'Перенос в архив',
+    publishAtLabel: 'Публикация',
 };
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -2685,7 +2697,7 @@ function getNameWithDepth(name, depth) {
 const getStatusOptions = (t) => [
     { label: t('blog:statusPublished'), value: 'PUBLISHED' },
     { label: t('blog:statusDraft'), value: 'DRAFT' },
-    { label: t('blog:statusArchived'), value: 'ARCHIVED' },
+    { label: t('blog:statusArchived'), value: 'ARCHIVED' }
 ];
 function convertPostToFormValues(post, languageOptionList, postOptionList, additionalFieldList, statusOptions) {
     var _a, _b, _c;
@@ -2708,6 +2720,8 @@ function convertPostToFormValues(post, languageOptionList, postOptionList, addit
             tags: '',
             additionalFields: additionalFieldList.map((fieldConfig) => universalFieldUtils.createFormField(fieldConfig, null)),
             status: statusOptions[0],
+            statusDateEnabled: false,
+            statusDate: null
         };
     }
     const currentLangOption = languageOptionList.find((option) => option.value === post.language);
@@ -2733,7 +2747,7 @@ function convertPostToFormValues(post, languageOptionList, postOptionList, addit
         urlAlias: post.urlAlias,
         categories: post.categories.map((category) => ({
             value: category.id,
-            label: category.name,
+            label: category.name
         })),
         language: currentLangOption !== null && currentLangOption !== void 0 ? currentLangOption : null,
         relatedPosts: selectedPostOptionList,
@@ -2743,6 +2757,8 @@ function convertPostToFormValues(post, languageOptionList, postOptionList, addit
             return universalFieldUtils.createFormField(fieldConfig, postAdditionalField === null || postAdditionalField === void 0 ? void 0 : postAdditionalField.value);
         }),
         status: foundStatus,
+        statusDateEnabled: post.status === 'PUBLISHED' ? !!post.archiveAt : (post.status === 'DRAFT' ? !!post.publishAt : false),
+        statusDate: post.status === 'PUBLISHED' && post.archiveAt ? post.archiveAt.substr(0, 10) : (post.status === 'DRAFT' && post.publishAt ? post.publishAt.substr(0, 10) : null)
     };
 }
 function convertFormValuesToCreationPayload(values) {
@@ -2765,9 +2781,11 @@ function convertFormValuesToCreationPayload(values) {
         tags: values.tags.split(',').filter((tag) => tag.trim().length > 0),
         additionalFields: values.additionalFields.map((field) => ({
             name: field.config.name,
-            value: universalFieldUtils.getOutgoingValue(field),
+            value: universalFieldUtils.getOutgoingValue(field)
         })),
         status: values.status.value,
+        archiveAt: values.status.value === 'PUBLISHED' && values.statusDateEnabled && values.statusDate ? values.statusDate : null,
+        publishAt: values.status.value === 'DRAFT' && values.statusDateEnabled && values.statusDate ? values.statusDate : null
     };
 }
 function convertFormValuesToUpdatePayload(values) {
@@ -2778,7 +2796,7 @@ function convertCategoryListToOptions(categoryList, languageId) {
         .filter(({ language }) => (languageId ? language === languageId : true))
         .map(({ id, name, depth }) => ({
         value: id,
-        label: getNameWithDepth(name, depth),
+        label: getNameWithDepth(name, depth)
     }));
 }
 
@@ -2820,10 +2838,9 @@ function getPostTableColumnDefs(moduleConfig, t) {
             field: 'status',
             style: { width: '120px' },
             headStyle: { width: '120px' },
-            format: ({ row }) => getStatuses(t)[row.status],
         },
         {
-            id: 2,
+            id: 3,
             name: t('blog:name'),
             field: 'name',
             type: 'name',
@@ -2842,7 +2859,7 @@ function getPostTableColumnDefs(moduleConfig, t) {
             }),
         },
         {
-            id: 3,
+            id: 4,
             name: t('blog:image'),
             field: 'image',
             type: 'image',
@@ -2850,23 +2867,23 @@ function getPostTableColumnDefs(moduleConfig, t) {
             headStyle: { width: '250px' },
         },
         isLangSpecific
-            ? { id: 4, name: t('blog:language'), field: 'language' }
+            ? { id: 5, name: t('blog:language'), field: 'language' }
             : null,
         {
-            id: 5,
+            id: 6,
             name: t('blog:date'),
             field: 'datetime',
             type: 'datetime',
             options: { ignoreStartOfDayTime: true },
         },
         {
-            id: 6,
+            id: 7,
             name: t('blog:categories'),
             field: 'categories',
             format: ({ row }) => row.categories.map((category) => category.name).join(', '),
         },
         {
-            id: 7,
+            id: 8,
             name: t('blog:actions'),
             field: 'actions',
             style: { whiteSpace: 'nowrap', width: '120px' },
@@ -3041,10 +3058,10 @@ var script = defineComponent({
         });
         const statusOptionList = computed(() => getStatusOptions(t));
         /** Fetch module config **/
-        const { data: moduleConfig, loading: isModuleConfigLoading, } = useFetchModuleConfig({ context });
+        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 : []; });
         /** Fetch category list **/
-        const { data: categoryList, loading: isCategoryListLoading, } = useFetchCategories({ context });
+        const { data: categoryList, loading: isCategoryListLoading } = useFetchCategories({ context });
         const selectedCategory = computed(() => {
             var _a;
             return categoryId.value
@@ -3056,20 +3073,20 @@ var script = defineComponent({
                 : context.root.$t('blog:posts');
         });
         /** Advanced search **/
-        const { categoryFilter, categoryOptionList, languageFilter, languageOptionList, fromDateFilter, toDateFilter, filterParams, tags, tagRemovalHandler, statusFilter, } = useAdvancedSearch({
+        const { categoryFilter, categoryOptionList, languageFilter, languageOptionList, fromDateFilter, toDateFilter, filterParams, tags, tagRemovalHandler, statusFilter } = useAdvancedSearch({
             context,
             categoryList,
             languageList,
-            statusOptionList,
+            statusOptionList
         });
         const isLangSpecific = computed(() => languageOptionList.value.length > 1);
         /** Fetch Post list **/
-        const { fetchEntityList: fetchPostList, isLoading: isPostLoading, rowData: postList, errorMessage, searchQuery, handleChange, pageNumber, pageCount, pageSize, } = useDataTable({
+        const { fetchEntityList: fetchPostList, isLoading: isPostLoading, rowData: postList, errorMessage, searchQuery, handleChange, pageNumber, pageCount, pageSize } = useDataTable({
             fetchEntityList: (params) => getPosts(Object.assign({ query: params.searchQuery, pageNumber: params.pageNumber, pageSize: params.pageSize }, filterParams.value)),
             initialValue: [],
             context,
             resourceName: 'Blog post list',
-            pageSize: 100,
+            pageSize: 100
         });
         watch(filterParams, () => {
             if (isModuleConfigLoading.value || isCategoryListLoading.value) {
@@ -3092,7 +3109,7 @@ var script = defineComponent({
             deleteResource: deleteBlogPost,
             resourceName: 'Post',
             onSuccess: fetchPostList,
-            context,
+            context
         });
         const { isCloning, handleResourceClone } = useResourceClone({
             cloneResource: clonePost,
@@ -3100,13 +3117,15 @@ var script = defineComponent({
             successMessage: t('blog:cloneSuccess'),
             failureMessage: t('blog:cloneFailure'),
             onSuccessRedirectTo: (data) => `/blog/posts/${data.id}`,
-            context,
+            context
         });
         function isBusy(postId) {
             return isDeleting(postId) || isCloning(postId) || isRowDataLoading.value;
         }
         const columnDefs = computed(() => getPostTableColumnDefs(moduleConfig.value, context.root.$t));
         return {
+            t,
+            formatDateTime,
             columnDefs,
             rowData: displayedPostList,
             handleResourceDelete,
@@ -3133,11 +3152,12 @@ var script = defineComponent({
             statusOptionList,
             tags,
             tagRemovalHandler,
+            getStatuses,
             // Clone
             handleResourceClone,
-            isBusy,
+            isBusy
         };
-    },
+    }
 });
 
 function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
@@ -3433,6 +3453,59 @@ var __vue_render__ = function () {
                   },
                   proxy: true,
                 },
+                {
+                  key: "cell(status)",
+                  fn: function (ref) {
+                    var row = ref.row;
+                    return [
+                      _c("div", { staticClass: "status" }, [
+                        _c("span", [
+                          _vm._v(_vm._s(_vm.getStatuses(_vm.t)[row.status])),
+                        ]),
+                        _vm._v(" "),
+                        row.status === "PUBLISHED" && row.archiveAt
+                          ? _c("span", [
+                              _vm._v(
+                                "\n            " +
+                                  _vm._s(_vm.t("blog:publishAtLabel")) +
+                                  ": "
+                              ),
+                              _c("i", [
+                                _vm._v(
+                                  _vm._s(
+                                    _vm.formatDateTime(
+                                      new Date(row.archiveAt),
+                                      true
+                                    )
+                                  )
+                                ),
+                              ]),
+                            ])
+                          : _vm._e(),
+                        _vm._v(" "),
+                        row.status === "DRAFT" && row.publishAt
+                          ? _c("span", [
+                              _vm._v(
+                                "\n            " +
+                                  _vm._s(_vm.t("blog:publishAtLabel")) +
+                                  ": "
+                              ),
+                              _c("i", [
+                                _vm._v(
+                                  _vm._s(
+                                    _vm.formatDateTime(
+                                      new Date(row.publishAt),
+                                      true
+                                    )
+                                  )
+                                ),
+                              ]),
+                            ])
+                          : _vm._e(),
+                      ]),
+                    ]
+                  },
+                },
                 {
                   key: "cell(actions)",
                   fn: function (ref) {
@@ -3505,11 +3578,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    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 });
+    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 });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-075b6310";
+  const __vue_scope_id__ = "data-v-61f152be";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
@@ -3543,21 +3616,21 @@ var script$1 = defineComponent({
         const urlAliasChanged = ref(false);
         const statusOptions = computed(() => getStatusOptions(context.root.$t));
         /** Fetch module config **/
-        const { data: moduleConfig, loading: isModuleConfigLoading, } = useFetchModuleConfig({ context });
+        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 : []; });
         const languageOptionList = computed(() => languageList.value.map(({ id, name }) => ({
             value: id,
-            label: name,
+            label: name
         })));
         const isLangSpecific = computed(() => languageOptionList.value.length > 0);
         /** Fetch category list */
-        const { data: categoryList, loading: isCategoryListLoading, } = useFetchCategories({ context });
+        const { data: categoryList, loading: isCategoryListLoading } = useFetchCategories({ context });
         /** Fetch Post */
         const [fetchPost, { data: post, loading: isPostLoading }] = useResource({
             fetchResource: () => getPost(postId.value),
             initialValue: null,
             context,
-            resourceName: 'Post',
+            resourceName: 'Post'
         });
         onMounted(() => {
             if (isCreation.value)
@@ -3571,13 +3644,13 @@ var script$1 = defineComponent({
         });
         /** Fetch post list */
         const { data: postList, loading: isPostListLoading } = useFetchPosts({
-            context,
+            context
         });
         const postOptionList = computed(() => postList.value
             .filter((relatedPost) => { var _a; return relatedPost.id !== ((_a = post.value) === null || _a === void 0 ? void 0 : _a.id); })
             .map((post) => ({
             value: post.id,
-            label: post.title,
+            label: post.title
         })));
         /** Form State **/
         const isSubmitting = ref(false);
@@ -3617,7 +3690,7 @@ var script$1 = defineComponent({
                     title: context.root.$t('blog:success'),
                     body: isCreation.value
                         ? context.root.$t('blog:blogPostWasSuccessfullyCreated')
-                        : context.root.$t('blog:blogPostWasSuccessfullyUpdated'),
+                        : context.root.$t('blog:blogPostWasSuccessfullyUpdated')
                 });
             })
                 .catch((error) => {
@@ -3628,7 +3701,7 @@ var script$1 = defineComponent({
                     title: context.root.$t('blog:error'),
                     body: isCreation.value
                         ? context.root.$t('blog:blogPostCreationWasFailed')
-                        : context.root.$t('blog:blogPostUpdateWasFailed'),
+                        : context.root.$t('blog:blogPostUpdateWasFailed')
                 });
             })
                 .finally(() => {
@@ -3681,24 +3754,24 @@ var script$1 = defineComponent({
                         'urlAlias',
                         'excerpt',
                         'body',
-                        'date',
-                    ]),
+                        'date'
+                    ])
                 },
                 {
                     id: 'images',
                     label: context.root.$t('blog:images'),
-                    hasErrors: hasErrors(['coverImage', 'image']),
+                    hasErrors: hasErrors(['coverImage', 'image'])
                 },
                 {
                     id: 'relations',
                     label: context.root.$t('blog:relations'),
-                    hasErrors: hasErrors(['categories', 'relatedPosts', 'tags']),
+                    hasErrors: hasErrors(['categories', 'relatedPosts', 'tags'])
                 },
                 values.value.additionalFields.length > 0
                     ? {
                         id: 'additional',
                         label: context.root.$t('blog:additionalFields'),
-                        hasErrors: hasErrors([]),
+                        hasErrors: hasErrors([])
                     }
                     : null,
                 {
@@ -3707,9 +3780,9 @@ var script$1 = defineComponent({
                     hasErrors: hasErrors([
                         'pageTitle',
                         'pageDescription',
-                        'openGraphImage',
-                    ]),
-                },
+                        'openGraphImage'
+                    ])
+                }
             ].filter(isNotNullish);
         });
         const selectedTabId = ref(tabList.value[0].id);
@@ -3718,11 +3791,11 @@ var script$1 = defineComponent({
                 ? {
                     text: context.root.$t('blog:viewPost'),
                     href: process.env.VUE_APP_WEBSITE_URL + post.value.url,
-                    target: '_blank',
+                    target: '_blank'
                 }
-                : null,
+                : null
         ].filter(isNotNullish));
-        function handleSeoFieldGroupChange({ title, description, image, }) {
+        function handleSeoFieldGroupChange({ title, description, image }) {
             values.value.pageTitle = title;
             values.value.pageDescription = description;
             values.value.openGraphImage = image;
@@ -3758,7 +3831,7 @@ var script$1 = defineComponent({
                     }
                     const newSelectedOption = {
                         value: foundSelectedCategory.id,
-                        label: foundSelectedCategory.name,
+                        label: foundSelectedCategory.name
                     };
                     if (!newSelectedOptions.some(({ value }) => value === newSelectedOption.value)) {
                         newSelectedOptions.push(newSelectedOption);
@@ -3795,9 +3868,9 @@ var script$1 = defineComponent({
             handleAliasChange,
             urlAliasTemplate,
             handleCategoriesChange,
-            statusOptions,
+            statusOptions
         };
-    },
+    }
 });
 
 /* script */
@@ -3852,23 +3925,6 @@ 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: {
@@ -3921,6 +3977,114 @@ var __vue_render__$1 = function () {
                         },
                       }),
                       _vm._v(" "),
+                      _c("div", { staticClass: "status" }, [
+                        _c(
+                          "div",
+                          { staticClass: "status-value" },
+                          [
+                            _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",
+                              },
+                            }),
+                          ],
+                          1
+                        ),
+                        _vm._v(" "),
+                        _vm.values.status.value === "PUBLISHED" ||
+                        _vm.values.status.value === "DRAFT"
+                          ? _c(
+                              "div",
+                              { staticClass: "status-checkbox" },
+                              [
+                                _c("form-field-checkbox", {
+                                  attrs: {
+                                    name: "statusDateEnabled",
+                                    label: _vm.$t(
+                                      _vm.values.status.value === "PUBLISHED"
+                                        ? "blog:scheduleArchive"
+                                        : "blog:schedulePublish"
+                                    ),
+                                    error: _vm.errors.status,
+                                  },
+                                  model: {
+                                    value: _vm.values.statusDateEnabled,
+                                    callback: function ($$v) {
+                                      _vm.$set(
+                                        _vm.values,
+                                        "statusDateEnabled",
+                                        $$v
+                                      );
+                                    },
+                                    expression: "values.statusDateEnabled",
+                                  },
+                                }),
+                              ],
+                              1
+                            )
+                          : _vm._e(),
+                        _vm._v(" "),
+                        _vm.values.statusDateEnabled &&
+                        (_vm.values.status.value === "PUBLISHED" ||
+                          _vm.values.status.value === "DRAFT")
+                          ? _c(
+                              "div",
+                              { staticClass: "status-date" },
+                              [
+                                _c("form-field", {
+                                  attrs: {
+                                    name: "statusDate",
+                                    type: "date",
+                                    label: _vm.$t(
+                                      _vm.values.status.value === "PUBLISHED"
+                                        ? "blog:archiveAt"
+                                        : "blog:publishAt"
+                                    ),
+                                    error: _vm.errors.statusDate,
+                                  },
+                                  model: {
+                                    value: _vm.values.statusDate,
+                                    callback: function ($$v) {
+                                      _vm.$set(_vm.values, "statusDate", $$v);
+                                    },
+                                    expression: "values.statusDate",
+                                  },
+                                }),
+                              ],
+                              1
+                            )
+                          : _vm._e(),
+                      ]),
+                      _vm._v(" "),
+                      _c("form-field", {
+                        attrs: {
+                          name: "datetime",
+                          label: _vm.$t("blog:date"),
+                          type: "date",
+                          error: _vm.errors.datetime,
+                        },
+                        model: {
+                          value: _vm.values.datetime,
+                          callback: function ($$v) {
+                            _vm.$set(_vm.values, "datetime", $$v);
+                          },
+                          expression: "values.datetime",
+                        },
+                      }),
+                      _vm._v(" "),
                       _c("form-field", {
                         attrs: {
                           name: "excerpt",
@@ -3961,22 +4125,6 @@ var __vue_render__$1 = function () {
                             : [],
                         },
                       }),
-                      _vm._v(" "),
-                      _c("form-field", {
-                        attrs: {
-                          name: "datetime",
-                          label: _vm.$t("blog:date"),
-                          type: "date",
-                          error: _vm.errors.datetime,
-                        },
-                        model: {
-                          value: _vm.values.datetime,
-                          callback: function ($$v) {
-                            _vm.$set(_vm.values, "datetime", $$v);
-                          },
-                          expression: "values.datetime",
-                        },
-                      }),
                     ]
                   : _vm._e(),
                 _vm._v(" "),
@@ -4147,15 +4295,17 @@ var __vue_staticRenderFns__$1 = [];
 __vue_render__$1._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$1 = undefined;
+  const __vue_inject_styles__$1 = function (inject) {
+    if (!inject) return
+    inject("data-v-50f3750d_0", { source: ".status[data-v-50f3750d] {\n  display: flex;\n  align-items: flex-end;\n}\n.status-value[data-v-50f3750d] {\n  flex-basis: 50%;\n}\n.status-checkbox[data-v-50f3750d] {\n  margin-left: 20px;\n  padding-bottom: 8px;\n}\n.status-date[data-v-50f3750d] {\n  margin-left: 20px;\n  flex: 1 1 1px;\n}\n\n/*# sourceMappingURL=PostForm.vue.map */", map: {"version":3,"sources":["/home/runner/work/tager-admin-blog/tager-admin-blog/src/views/Posts/PostForm/PostForm.vue","PostForm.vue"],"names":[],"mappings":"AA2nBA;EACA,aAAA;EACA,qBAAA;AC1nBA;AD6nBA;EACA,eAAA;AC1nBA;AD6nBA;EACA,iBAAA;EACA,mBAAA;AC1nBA;AD6nBA;EACA,iBAAA;EACA,aAAA;AC1nBA;;AAEA,uCAAuC","file":"PostForm.vue","sourcesContent":["<template>\n  <page\n    :title=\"isCreation ? $t('blog:createPost') : $t('blog:updatePost')\"\n    :is-content-loading='isContentLoading'\n    :header-buttons='headerButtonList'\n    :footer='{\n      backHref: postListUrl,\n      onSubmit: submitForm,\n      isSubmitting: isSubmitting,\n    }'\n  >\n    <template v-slot:content>\n      <form novalidate @submit.prevent='submitForm'>\n        <tab-list\n          :tab-list='tabList'\n          :selected-tab-id='selectedTabId'\n          @tab:update='selectedTabId = $event.tabId'\n        />\n\n        <template v-if=\"selectedTabId === 'common'\">\n\n          <form-field-select\n            v-if='isCreation && isLangSpecific'\n            v-model='values.language'\n            name='language'\n            :label=\"$t('blog:language')\"\n            :options='languageOptionList'\n            :error='errors.language'\n          />\n\n          <form-field\n            v-model='values.title'\n            name='title'\n            :label=\"$t('blog:title')\"\n            :error='errors.title'\n            @input='handleTitleChange'\n          />\n\n          <form-field-url-alias-input\n            id='urlAlias'\n            v-model='values.urlAlias'\n            name='urlAlias'\n            :label=\"$t('blog:link')\"\n            :url-template='urlAliasTemplate'\n            :error='errors.urlAlias'\n            @change='handleAliasChange'\n          />\n\n          <div class='status'>\n            <div class='status-value'>\n              <form-field-select\n                v-model='values.status'\n                name='status'\n                :error='errors.status'\n                :label=\"$t('blog:status')\"\n                :no-options-message=\"$t('blog:noTemplates')\"\n                :options='statusOptions'\n              />\n            </div>\n            <div class='status-checkbox' v-if='values.status.value === \"PUBLISHED\" || values.status.value === \"DRAFT\"'>\n              <form-field-checkbox\n                v-model='values.statusDateEnabled'\n                name='statusDateEnabled'\n                :label=\"$t(values.status.value === 'PUBLISHED' ? 'blog:scheduleArchive' : 'blog:schedulePublish')\"\n                :error='errors.status'\n              />\n            </div>\n            <div class='status-date'\n                 v-if='values.statusDateEnabled && (values.status.value === \"PUBLISHED\" || values.status.value === \"DRAFT\")'>\n              <form-field\n                v-model='values.statusDate'\n                name='statusDate'\n                type='date'\n                :label=\"$t(values.status.value === 'PUBLISHED' ? 'blog:archiveAt' : 'blog:publishAt')\"\n                :error='errors.statusDate'\n              />\n            </div>\n          </div>\n\n          <form-field\n            v-model='values.datetime'\n            name='datetime'\n            :label=\"$t('blog:date')\"\n            type='date'\n            :error='errors.datetime'\n          />\n\n          <form-field\n            v-model='values.excerpt'\n            name='excerpt'\n            :label=\"$t('blog:excerpt')\"\n            type='textarea'\n            :error='errors.excerpt'\n          />\n\n          <form-field-rich-text-input\n            v-model='values.body'\n            name='body'\n            :label=\"$t('blog:body')\"\n            :error='errors.body'\n            :get-upload-adapter-options='getUploadAdapterOptions'\n          />\n\n          <ShortCodeConstructor\n            :short-code-config-list='\n              moduleConfig ? moduleConfig.shortcodes : []\n            '\n          />\n        </template>\n\n        <template v-if=\"selectedTabId === 'images'\">\n          <form-field-file-input\n            v-model='values.coverImage'\n            :label=\"$t('blog:coverImage')\"\n            name='coverImage'\n            file-type='image'\n            :scenario='moduleConfig ? moduleConfig.fileScenarios.cover : null'\n          />\n\n          <form-field-file-input\n            v-model='values.image'\n            name='image'\n            :label=\"$t('blog:innerImage')\"\n            file-type='image'\n            :scenario='moduleConfig ? moduleConfig.fileScenarios.image : null'\n          />\n\n          <form-field-file-input\n            v-model='values.imageMobile'\n            name='imageMobile'\n            :label=\"$t('blog:innerImageMobile')\"\n            file-type='image'\n            :scenario='\n              moduleConfig ? moduleConfig.fileScenarios.imageMobile : null\n            '\n          />\n        </template>\n\n        <template v-if=\"selectedTabId === 'relations'\">\n          <form-field\n            v-model='values.tags'\n            name='tags'\n            :label=\"$t('blog:tags')\"\n            :error='errors.tags'\n          />\n\n          <form-field-multi-select\n            :selected-options='values.categories'\n            name='categories'\n            :label=\"$t('blog:categories')\"\n            :options='categoryOptionList'\n            :error='errors.categories'\n            @change='handleCategoriesChange'\n          />\n\n          <form-field-multi-select\n            v-model='values.relatedPosts'\n            name='relatedPosts'\n            :label=\"$t('blog:relatedPosts')\"\n            :options='postOptionList'\n            :error='errors.relatedPosts'\n            :searchable='true'\n          />\n        </template>\n\n        <template v-if=\"selectedTabId === 'additional'\">\n          <DynamicField\n            v-for='field of values.additionalFields'\n            :key='field.name'\n            :field='field'\n          />\n        </template>\n\n        <template v-if=\"selectedTabId === 'seo'\">\n          <seo-field-group\n            :title='values.pageTitle'\n            :title-error-message='errors.pageTitle'\n            :title-label=\"$t('blog:pageTitle')\"\n            :description='values.pageDescription'\n            :description-error-message='errors.pageDescription'\n            :description-label=\"$t('blog:pageDescription')\"\n            :image='values.openGraphImage'\n            :image-error-message='errors.openGraphImage'\n            :image-label=\"$t('blog:openGraphImage')\"\n            :image-scenario='\n              moduleConfig ? moduleConfig.fileScenarios.openGraph : null\n            '\n            @change='handleSeoFieldGroupChange'\n          />\n        </template>\n      </form>\n    </template>\n\n    <template v-slot:footer>\n      <FormFooter\n        :back-href='postListUrl'\n        :on-submit='submitForm'\n        :is-submitting='isSubmitting'\n        :is-creation='isCreation'\n        :can-create-another='isCreation'\n      />\n    </template>\n  </page>\n</template>\n\n<script lang='ts'>\nimport {\n  computed,\n  defineComponent,\n  onMounted,\n  ref,\n  watch\n} from '@vue/composition-api';\n\nimport {\n  convertRequestErrorToMap,\n  isNotNullish,\n  Nullable,\n  useResource,\n  urlTranslit\n} from '@tager/admin-services';\nimport {\n  createTabErrorFinder,\n  OptionType,\n  TabType,\n  ShortCodeConstructor,\n  SeoChangeEvent,\n  FormFooter,\n  TagerFormSubmitEvent\n} from '@tager/admin-ui';\nimport { DynamicField } from '@tager/admin-dynamic-field';\n\nimport {\n  getBlogPostFormUrl,\n  getBlogPostListUrl\n} from '../../../constants/paths';\nimport {\n  createBlogPost,\n  getPost,\n  updateBlogPost\n} from '../../../services/requests';\nimport { Language, PostFull } from '../../../typings/model';\nimport {\n  useFetchModuleConfig,\n  useFetchCategories,\n  useFetchPosts\n} from '../../../hooks';\n\nimport {\n  convertCategoryListToOptions,\n  convertFormValuesToCreationPayload,\n  convertFormValuesToUpdatePayload,\n  convertPostToFormValues,\n  FormValues,\n  getStatusOptions\n} from './PostForm.helpers';\n\nexport default defineComponent({\n  name: 'BlogPostForm',\n  components: { DynamicField, ShortCodeConstructor, FormFooter },\n  setup(props, context) {\n    const postId = computed<string>(() => context.root.$route.params.postId);\n    const isCreation = computed<boolean>(() => postId.value === 'create');\n\n    const urlAliasChanged = ref<boolean>(false);\n\n    const statusOptions = computed<OptionType[]>(() =>\n      getStatusOptions(context.root.$t)\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    const languageOptionList = computed<OptionType[]>(() =>\n      languageList.value.map(({ id, name }) => ({\n        value: id,\n        label: name\n      }))\n    );\n\n    const isLangSpecific = computed(() => languageOptionList.value.length > 0);\n\n    /** Fetch category list */\n\n    const {\n      data: categoryList,\n      loading: isCategoryListLoading\n    } = useFetchCategories({ context });\n\n    /** Fetch Post */\n\n    const [fetchPost, { data: post, loading: isPostLoading }] = useResource<Nullable<PostFull>>({\n      fetchResource: () => getPost(postId.value),\n      initialValue: null,\n      context,\n      resourceName: 'Post'\n    });\n\n    onMounted(() => {\n      if (isCreation.value) return;\n\n      fetchPost();\n    });\n\n    watch(postId, () => {\n      if (isCreation.value) return;\n\n      fetchPost();\n    });\n\n    /** Fetch post list */\n    const { data: postList, loading: isPostListLoading } = useFetchPosts({\n      context\n    });\n\n    const postOptionList = computed<OptionType<number>[]>(() =>\n      postList.value\n        .filter((relatedPost) => relatedPost.id !== post.value?.id)\n        .map((post) => ({\n          value: post.id,\n          label: post.title\n        }))\n    );\n\n    /** Form State **/\n    const isSubmitting = ref<boolean>(false);\n    const values = ref<FormValues>(\n      convertPostToFormValues(\n        post.value,\n        languageOptionList.value,\n        postOptionList.value,\n        moduleConfig.value?.fields ?? [],\n        statusOptions.value\n      )\n    );\n    const errors = ref<Record<string, string>>({});\n\n    watch([post, languageOptionList, postOptionList, moduleConfig], () => {\n      values.value = convertPostToFormValues(\n        post.value,\n        languageOptionList.value,\n        postOptionList.value,\n        moduleConfig.value?.fields ?? [],\n        statusOptions.value\n      );\n    });\n\n    function submitForm(event: TagerFormSubmitEvent) {\n      isSubmitting.value = true;\n\n      const creationBody = convertFormValuesToCreationPayload(values.value);\n      const updateBody = convertFormValuesToUpdatePayload(values.value);\n\n      const requestPromise = isCreation.value\n        ? createBlogPost(creationBody)\n        : updateBlogPost(postId.value, updateBody);\n\n      requestPromise\n        .then(({ data }) => {\n          errors.value = {};\n\n          if (event.type === 'create') {\n            context.root.$router.push(\n              getBlogPostFormUrl({ postId: String(data.id) })\n            );\n          }\n\n          if (event.type === 'create_exit' || event.type === 'save_exit') {\n            if (context.root.$previousRoute) {\n              context.root.$router.back();\n            } else {\n              context.root.$router.push(getBlogPostListUrl());\n            }\n          }\n\n          if (event.type === 'create_create-another') {\n            values.value = convertPostToFormValues(\n              null,\n              languageOptionList.value,\n              postOptionList.value,\n              moduleConfig.value?.fields ?? [],\n              statusOptions.value\n            );\n          }\n\n          context.root.$toast({\n            variant: 'success',\n            title: context.root.$t('blog:success'),\n            body: isCreation.value\n              ? context.root.$t('blog:blogPostWasSuccessfullyCreated')\n              : context.root.$t('blog:blogPostWasSuccessfullyUpdated')\n          });\n        })\n        .catch((error) => {\n          console.error(error);\n          errors.value = convertRequestErrorToMap(error);\n          context.root.$toast({\n            variant: 'danger',\n            title: context.root.$t('blog:error'),\n            body: isCreation.value\n              ? context.root.$t('blog:blogPostCreationWasFailed')\n              : context.root.$t('blog:blogPostUpdateWasFailed')\n          });\n        })\n        .finally(() => {\n          isSubmitting.value = false;\n        });\n    }\n\n    /** Category Options */\n\n    const categoryOptionList = computed<OptionType<number>[]>(() =>\n      convertCategoryListToOptions(\n        categoryList.value,\n        values.value.language?.value ?? null\n      )\n    );\n\n    watch([categoryOptionList, moduleConfig], () => {\n      function isOptionExist(\n        selectedCategoryOption: OptionType<number>\n      ): boolean {\n        return categoryOptionList.value.some(\n          (option) => option.value === selectedCategoryOption.value\n        );\n      }\n\n      if (isCreation.value) {\n        if (moduleConfig?.value?.defaultCategories) {\n          const defaultIds = moduleConfig.value.defaultCategories.map(\n            (item: { id: number }) => item.id\n          );\n          values.value.categories = categoryOptionList.value.filter(\n            (item: OptionType<number>) => {\n              return defaultIds.indexOf(item.value) !== -1;\n            }\n          );\n        }\n      }\n\n      values.value.categories = values.value.categories.filter(isOptionExist);\n    });\n\n    /** Misc */\n\n    const isContentLoading = computed<boolean>(\n      () =>\n        isPostLoading.value ||\n        isCategoryListLoading.value ||\n        isPostListLoading.value ||\n        isModuleConfigLoading.value\n    );\n\n    function getUploadAdapterOptions() {\n      return { uploadScenario: moduleConfig.value?.fileScenarios.content };\n    }\n\n    const blogPagePath = computed<string>(() => {\n      const origin = process.env.VUE_APP_WEBSITE_URL || window.location.origin;\n      return origin + (post.value?.urlTemplate ?? '');\n    });\n\n    const tabList = computed<TabType[]>(() => {\n      const hasErrors = createTabErrorFinder(errors.value);\n      return [\n        {\n          id: 'common',\n          label: context.root.$t('blog:common'),\n          hasErrors: hasErrors([\n            'title',\n            'language',\n            'urlAlias',\n            'excerpt',\n            'body',\n            'date'\n          ])\n        },\n        {\n          id: 'images',\n          label: context.root.$t('blog:images'),\n          hasErrors: hasErrors(['coverImage', 'image'])\n        },\n        {\n          id: 'relations',\n          label: context.root.$t('blog:relations'),\n          hasErrors: hasErrors(['categories', 'relatedPosts', 'tags'])\n        },\n        values.value.additionalFields.length > 0\n          ? {\n            id: 'additional',\n            label: context.root.$t('blog:additionalFields'),\n            hasErrors: hasErrors([])\n          }\n          : null,\n        {\n          id: 'seo',\n          label: 'SEO',\n          hasErrors: hasErrors([\n            'pageTitle',\n            'pageDescription',\n            'openGraphImage'\n          ])\n        }\n      ].filter(isNotNullish);\n    });\n\n    const selectedTabId = ref<string>(tabList.value[0].id);\n\n    const headerButtonList = computed<{ text: string; href: string; target?: string }[]>(() =>\n      [\n        post.value\n          ? {\n            text: context.root.$t('blog:viewPost'),\n            href: process.env.VUE_APP_WEBSITE_URL + post.value.url,\n            target: '_blank'\n          }\n          : null\n      ].filter(isNotNullish)\n    );\n\n    function handleSeoFieldGroupChange({\n                                         title,\n                                         description,\n                                         image\n                                       }: SeoChangeEvent) {\n      values.value.pageTitle = title;\n      values.value.pageDescription = description;\n      values.value.openGraphImage = image;\n    }\n\n    function handleTitleChange(value: string) {\n      if (isCreation.value && urlAliasChanged.value === false) {\n        values.value.urlAlias = urlTranslit(value);\n      }\n    }\n\n    function handleAliasChange() {\n      urlAliasChanged.value = true;\n    }\n\n    const urlAliasTemplate = computed<string>(() => {\n      if (!moduleConfig.value || !moduleConfig.value.urlPostTemplate) {\n        return '';\n      }\n\n      let result = moduleConfig.value.urlPostTemplate;\n\n      if (values.value.language) {\n        result = result.replace('{language}', values.value.language.value);\n      }\n\n      if (postId.value !== 'create') {\n        result = result.replace('{id}', postId.value);\n      }\n\n      return result;\n    });\n\n    const handleCategoriesChange = (selectedOptions: OptionType<number>[]) => {\n      const newSelectedOptions: OptionType<number>[] = [];\n\n      selectedOptions.forEach((selectedOption) => {\n        const findTreeSelectedCategory = (categoryId: Nullable<number>) => {\n          const foundSelectedCategory = categoryList.value.find(\n            ({ id }) => id === categoryId\n          );\n\n          if (!foundSelectedCategory) {\n            return;\n          }\n\n          const newSelectedOption: OptionType<number> = {\n            value: foundSelectedCategory.id,\n            label: foundSelectedCategory.name\n          };\n\n          if (\n            !newSelectedOptions.some(\n              ({ value }) => value === newSelectedOption.value\n            )\n          ) {\n            newSelectedOptions.push(newSelectedOption);\n          }\n\n          if (foundSelectedCategory.parent) {\n            findTreeSelectedCategory(foundSelectedCategory.parent.id);\n          }\n        };\n\n        findTreeSelectedCategory(selectedOption.value);\n      });\n\n      values.value.categories = newSelectedOptions;\n    };\n\n    return {\n      isCreation,\n      postId,\n      pagePath: blogPagePath,\n      categoryOptionList,\n      values,\n      errors,\n      isContentLoading,\n      postListUrl: getBlogPostListUrl(),\n      submitForm,\n      isLangSpecific,\n      languageOptionList,\n      isSubmitting,\n      moduleConfig,\n      postOptionList,\n      getUploadAdapterOptions,\n      tabList,\n      selectedTabId,\n      headerButtonList,\n      handleSeoFieldGroupChange,\n      handleTitleChange,\n      handleAliasChange,\n      urlAliasTemplate,\n      handleCategoriesChange,\n\n      statusOptions\n    };\n  }\n});\n</script>\n\n<style scoped lang='scss'>\n.status {\n  display: flex;\n  align-items: flex-end;\n}\n\n.status-value {\n  flex-basis: 50%;\n}\n\n.status-checkbox {\n  margin-left: 20px;\n  padding-bottom: 8px;\n}\n\n.status-date {\n  margin-left: 20px;\n  flex: 1 1 1px;\n}\n</style>",".status {\n  display: flex;\n  align-items: flex-end;\n}\n\n.status-value {\n  flex-basis: 50%;\n}\n\n.status-checkbox {\n  margin-left: 20px;\n  padding-bottom: 8px;\n}\n\n.status-date {\n  margin-left: 20px;\n  flex: 1 1 1px;\n}\n\n/*# sourceMappingURL=PostForm.vue.map */"]}, media: undefined });
+
+  };
   /* scoped */
-  const __vue_scope_id__$1 = undefined;
+  const __vue_scope_id__$1 = "data-v-50f3750d";
   /* module identifier */
   const __vue_module_identifier__$1 = undefined;
   /* functional template */
   const __vue_is_functional_template__$1 = false;
-  /* style inject */
-  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -4170,7 +4320,7 @@ __vue_render__$1._withStripped = true;
     __vue_is_functional_template__$1,
     __vue_module_identifier__$1,
     false,
-    undefined,
+    createInjector,
     undefined,
     undefined
   );