@tager/admin-blog 0.3.37 → 0.3.41

package/dist/index.umd.js

@@ -37,7 +37,6 @@
       actions: 'Actions',
       updatePost: 'Update post',
       title: 'Title',
-      status: 'Status',
       link: 'Link',
       excerpt: 'Excerpt',
       body: 'Body',
@@ -79,9 +78,10 @@
       },
       parentCategory: 'Parent category',
       noParent: 'No parent',
+      status: 'Status',
       statusPublished: 'Published',
       statusDraft: 'Draft',
-      statusArchived: 'Archived'
+      statusArchived: 'Archived',
   };
 
   const RU = {
@@ -118,7 +118,6 @@
       updatePost: 'Обновить пост',
       title: 'Заголовок',
       link: 'Ссылка',
-      status: 'Статус',
       excerpt: 'Краткое описание',
       defaultCategory: 'Категория по-умолчанию',
       body: 'Содержание',
@@ -159,9 +158,10 @@
       },
       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 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) => adminDynamicField.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: adminServices.createId(), file: post.coverImage }
+              : null,
+          image: post.image ? { id: adminServices.createId(), file: post.image } : null,
+          imageMobile: post.imageMobile
+              ? { id: adminServices.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: adminServices.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 adminDynamicField.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: adminDynamicField.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 @@
               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 @@
               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 @@
               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 @@
               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(adminServices.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 = compositionApi.computed(() => categoryList.value.map(({ id, name, depth }) => ({
           value: String(id),
@@ -2838,11 +2943,21 @@
               title: context.root.$t('blog:dateOfPublication'),
           };
       });
+      /** Status **/
+      const initialStatusFilter = compositionApi.computed(() => {
+          const queryValue = adminUi.getFilterParamAsStringArray(context.root.$route.query, FilterTypes.STATUS);
+          return statusOptionList.value.filter(({ value }) => queryValue.some((selected) => selected === value));
+      });
+      const statusFilter = compositionApi.ref(initialStatusFilter.value);
+      compositionApi.watch(initialStatusFilter, () => {
+          statusFilter.value = initialStatusFilter.value;
+      });
       /** Params **/
       const filterParams = compositionApi.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 @@
               fromDateFilter.value = '';
               toDateFilter.value = '';
           }
+          if (event.name === FilterTypes.STATUS) {
+              statusFilter.value = statusFilter.value.filter(({ value }) => value !== event.value);
+          }
       }
       /** Tags **/
       const tags = compositionApi.computed(() => [
@@ -2880,6 +2998,12 @@
               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(adminServices.isNotNullish));
       /** Helpers **/
       const selectedCategoryOptionList = compositionApi.computed(() => {
@@ -2899,6 +3023,7 @@
           languageOptionList,
           fromDateFilter,
           toDateFilter,
+          statusFilter,
           tagRemovalHandler,
           tags: tags,
           filterParams,
@@ -2914,6 +3039,7 @@
               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 = compositionApi.computed(() => getStatusOptions(t));
           /** Fetch module config **/
           const { data: moduleConfig, loading: isModuleConfigLoading, } = useFetchModuleConfig({ context });
           const languageList = compositionApi.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 @@
                   : 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 = compositionApi.computed(() => languageOptionList.value.length > 1);
           /** Fetch Post list **/
@@ -3002,6 +3129,8 @@
               languageOptionList,
               fromDateFilter,
               toDateFilter,
+              statusFilter,
+              statusOptionList,
               tags,
               tagRemovalHandler,
               // Clone
@@ -3278,6 +3407,23 @@
                                     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 @@
     /* 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 @@
       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) => adminDynamicField.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.substr(0, 10),
-          coverImage: post.coverImage
-              ? { id: adminServices.createId(), file: post.coverImage }
-              : null,
-          image: post.image ? { id: adminServices.createId(), file: post.image } : null,
-          imageMobile: post.imageMobile
-              ? { id: adminServices.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: adminServices.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 adminDynamicField.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: adminDynamicField.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 = compositionApi.defineComponent({
       name: 'BlogPostForm',
       components: { DynamicField: adminDynamicField.DynamicField, ShortCodeConstructor: adminUi.ShortCodeConstructor, FormFooter: adminUi.FormFooter },
@@ -3487,6 +3541,7 @@
           const postId = compositionApi.computed(() => context.root.$route.params.postId);
           const isCreation = compositionApi.computed(() => postId.value === 'create');
           const urlAliasChanged = compositionApi.ref(false);
+          const statusOptions = compositionApi.computed(() => getStatusOptions(context.root.$t));
           /** Fetch module config **/
           const { data: moduleConfig, loading: isModuleConfigLoading, } = useFetchModuleConfig({ context });
           const languageList = compositionApi.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 @@
           })));
           /** Form State **/
           const isSubmitting = compositionApi.ref(false);
-          const values = compositionApi.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 = compositionApi.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 = compositionApi.ref({});
           compositionApi.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 @@
                       }
                   }
                   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',
@@ -3673,7 +3728,7 @@
               values.value.openGraphImage = image;
           }
           function handleTitleChange(value) {
-              if (urlAliasChanged.value === false) {
+              if (isCreation.value && urlAliasChanged.value === false) {
                   values.value.urlAlias = adminServices.urlTranslit(value);
               }
           }
@@ -3740,6 +3795,7 @@
               handleAliasChange,
               urlAliasTemplate,
               handleCategoriesChange,
+              statusOptions,
           };
       },
   });
@@ -3796,6 +3852,23 @@
                   _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: {
@@ -4530,6 +4603,7 @@
               name: '',
               parent: { value: null, label: t('blog:noParent') },
               urlAlias: '',
+              isDefault: false,
               pageTitle: '',
               pageDescription: '',
               pageKeywords: '',
@@ -4540,6 +4614,7 @@
       }
       return {
           language: currentLangOption !== null && currentLangOption !== void 0 ? currentLangOption : null,
+          isDefault: category.isDefault,
           name: category.name,
           parent: category.parent
               ? { value: category.parent.id, label: category.parent.name }
@@ -4562,7 +4637,7 @@
           name: values.name,
           parent: values.parent.value,
           urlAlias: values.urlAlias,
-          isDefault: false,
+          isDefault: values.isDefault,
           pageTitle: values.pageTitle,
           pageDescription: values.pageDescription,
           openGraphImage: (_d = (_c = values.openGraphImage) === null || _c === void 0 ? void 0 : _c.file.id) !== null && _d !== void 0 ? _d : null,
@@ -4847,6 +4922,21 @@
                                   })
                                 : _vm._e(),
                               _vm._v(" "),
+                              _c("form-field-checkbox", {
+                                attrs: {
+                                  name: "isDefault",
+                                  label: _vm.$t("blog:defaultCategory"),
+                                  error: _vm.errors.isDefault,
+                                },
+                                model: {
+                                  value: _vm.values.isDefault,
+                                  callback: function ($$v) {
+                                    _vm.$set(_vm.values, "isDefault", $$v);
+                                  },
+                                  expression: "values.isDefault",
+                                },
+                              }),
+                              _vm._v(" "),
                               _c("form-field", {
                                 attrs: {
                                   name: "name",

package/dist/locales/en.d.ts

@@ -31,7 +31,6 @@ declare const EN: {
     actions: string;
     updatePost: string;
     title: string;
-    status: string;
     link: string;
     excerpt: string;
     body: string;
@@ -73,6 +72,7 @@ declare const EN: {
     };
     parentCategory: string;
     noParent: string;
+    status: string;
     statusPublished: string;
     statusDraft: string;
     statusArchived: string;