@tager/admin-blog 0.3.38 → 0.3.39

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

@@ -4657,6 +4657,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
             };
             value: null;
         })[];
+        status: {
+            value: string;
+            label: string;
+            disabled?: boolean | undefined;
+        };
     }>;
     errors: import("@vue/composition-api").Ref<{
         [x: string]: string;
@@ -4684,6 +4689,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     handleAliasChange: () => void;
     urlAliasTemplate: import("@vue/composition-api").ComputedRef<string>;
     handleCategoriesChange: (selectedOptions: OptionType<number>[]) => void;
+    statusOptions: import("@vue/composition-api").ComputedRef<OptionType<string>[]>;
 }> & {
     [key: string]: unknown;
 }, {}, {}, unknown, {
@@ -9347,6 +9353,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
             };
             value: null;
         })[];
+        status: {
+            value: string;
+            label: string;
+            disabled?: boolean | undefined;
+        };
     }>;
     errors: import("@vue/composition-api").Ref<{
         [x: string]: string;
@@ -9374,6 +9385,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     handleAliasChange: () => void;
     urlAliasTemplate: import("@vue/composition-api").ComputedRef<string>;
     handleCategoriesChange: (selectedOptions: OptionType<number>[]) => void;
+    statusOptions: import("@vue/composition-api").ComputedRef<OptionType<string>[]>;
 }>, {
     [x: string]: any;
 }, {}, {}, {

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

@@ -1,4 +1,4 @@
-import { ColumnDefinition } from '@tager/admin-ui';
+import { ColumnDefinition, OptionType } from '@tager/admin-ui';
 import { getBlogPostFormUrl } from '../../../constants/paths';
 import { Category, PostShort } from '../../../typings/model';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -16,13 +16,15 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     pageNumber: import("@vue/composition-api").Ref<number>;
     pageCount: import("@vue/composition-api").ComputedRef<number>;
     pageSize: import("@vue/composition-api").Ref<number>;
-    categoryFilter: import("@vue/composition-api").Ref<import("@tager/admin-ui").OptionType<string>[]>;
-    categoryOptionList: import("@vue/composition-api").ComputedRef<import("@tager/admin-ui").OptionType<string>[]>;
+    categoryFilter: import("@vue/composition-api").Ref<OptionType<string>[]>;
+    categoryOptionList: import("@vue/composition-api").ComputedRef<OptionType<string>[]>;
     isLangSpecific: import("@vue/composition-api").ComputedRef<boolean>;
-    languageFilter: import("@vue/composition-api").Ref<import("@tager/admin-ui").OptionType<string>[]>;
-    languageOptionList: import("@vue/composition-api").ComputedRef<import("@tager/admin-ui").OptionType<string>[]>;
+    languageFilter: import("@vue/composition-api").Ref<OptionType<string>[]>;
+    languageOptionList: import("@vue/composition-api").ComputedRef<OptionType<string>[]>;
     fromDateFilter: import("@vue/composition-api").Ref<string>;
     toDateFilter: import("@vue/composition-api").Ref<string>;
+    statusFilter: import("@vue/composition-api").Ref<OptionType<string>[]>;
+    statusOptionList: import("@vue/composition-api").ComputedRef<OptionType<string>[]>;
     tags: import("@vue/composition-api").ComputedRef<import("@tager/admin-ui").FilterTagType[]>;
     tagRemovalHandler: (event: import("@tager/admin-ui").FilterTagType) => void;
     handleResourceClone: (entityId: string | number) => void;
@@ -48,13 +50,15 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     pageNumber: import("@vue/composition-api").Ref<number>;
     pageCount: import("@vue/composition-api").ComputedRef<number>;
     pageSize: import("@vue/composition-api").Ref<number>;
-    categoryFilter: import("@vue/composition-api").Ref<import("@tager/admin-ui").OptionType<string>[]>;
-    categoryOptionList: import("@vue/composition-api").ComputedRef<import("@tager/admin-ui").OptionType<string>[]>;
+    categoryFilter: import("@vue/composition-api").Ref<OptionType<string>[]>;
+    categoryOptionList: import("@vue/composition-api").ComputedRef<OptionType<string>[]>;
     isLangSpecific: import("@vue/composition-api").ComputedRef<boolean>;
-    languageFilter: import("@vue/composition-api").Ref<import("@tager/admin-ui").OptionType<string>[]>;
-    languageOptionList: import("@vue/composition-api").ComputedRef<import("@tager/admin-ui").OptionType<string>[]>;
+    languageFilter: import("@vue/composition-api").Ref<OptionType<string>[]>;
+    languageOptionList: import("@vue/composition-api").ComputedRef<OptionType<string>[]>;
     fromDateFilter: import("@vue/composition-api").Ref<string>;
     toDateFilter: import("@vue/composition-api").Ref<string>;
+    statusFilter: import("@vue/composition-api").Ref<OptionType<string>[]>;
+    statusOptionList: import("@vue/composition-api").ComputedRef<OptionType<string>[]>;
     tags: import("@vue/composition-api").ComputedRef<import("@tager/admin-ui").FilterTagType[]>;
     tagRemovalHandler: (event: import("@tager/admin-ui").FilterTagType) => void;
     handleResourceClone: (entityId: string | number) => void;

package/dist/views/Posts/PostList/hooks/useAdvancedSearch.d.ts

@@ -5,6 +5,7 @@ interface Params {
     context: SetupContext;
     categoryList: ComputedRef<Category[]>;
     languageList: ComputedRef<Language[]>;
+    statusOptionList: ComputedRef<OptionType[]>;
 }
 interface State {
     categoryFilter: Ref<OptionType[]>;
@@ -13,10 +14,11 @@ interface State {
     languageOptionList: ComputedRef<OptionType[]>;
     fromDateFilter: Ref<string>;
     toDateFilter: Ref<string>;
+    statusFilter: Ref<OptionType[]>;
     filterParams: ComputedRef<Record<string, string | string[]>>;
     tags: ComputedRef<FilterTagType[]>;
     tagRemovalHandler(event: FilterTagType): void;
 }
 export declare const dateFormat: (date: string) => string;
-export declare function useAdvancedSearch({ context, categoryList, languageList, }: Params): State;
+export declare function useAdvancedSearch({ context, categoryList, languageList, statusOptionList, }: Params): State;
 export {};

package/package.json

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

package/src/locales/en.ts

@@ -31,7 +31,6 @@ const EN = {
   actions: 'Actions',
   updatePost: 'Update post',
   title: 'Title',
-  status: 'Status',
   link: 'Link',
   excerpt: 'Excerpt',
   body: 'Body',
@@ -77,9 +76,10 @@ const EN = {
   parentCategory: 'Parent category',
   noParent: 'No parent',
 
+  status: 'Status',
   statusPublished: 'Published',
   statusDraft: 'Draft',
-  statusArchived: 'Archived'
+  statusArchived: 'Archived',
 };
 
 export default EN;

package/src/locales/ru.ts

@@ -34,7 +34,6 @@ const RU: typeof EN = {
   updatePost: 'Обновить пост',
   title: 'Заголовок',
   link: 'Ссылка',
-  status: 'Статус',
   excerpt: 'Краткое описание',
   defaultCategory: 'Категория по-умолчанию',
   body: 'Содержание',
@@ -79,9 +78,10 @@ const RU: typeof EN = {
   parentCategory: 'Родительская категория',
   noParent: 'Нет родительской',
 
+  status: 'Статус',
   statusPublished: 'Опубликован',
   statusDraft: 'Черновик',
-  statusArchived: 'Снят с публикации'
+  statusArchived: 'В архиве',
 };
 
 export default RU;

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

@@ -1,3 +1,5 @@
+import { TFunction } from 'i18next';
+
 import { createId, Nullable } from '@tager/admin-services';
 import { OptionType, SingleFileInputValueType } from '@tager/admin-ui';
 import {
@@ -13,6 +15,12 @@ import {
 import { getNameWithDepth } from '../../../utils/common';
 import { Category, PostFull } from '../../../typings/model';
 
+export const getStatusOptions = (t: TFunction): OptionType[] => [
+  { label: t('blog:statusPublished'), value: 'PUBLISHED' },
+  { label: t('blog:statusDraft'), value: 'DRAFT' },
+  { label: t('blog:statusArchived'), value: 'ARCHIVED' },
+];
+
 export interface FormValues {
   title: string;
   excerpt: string;
@@ -30,13 +38,15 @@ export interface FormValues {
   relatedPosts: OptionType<number>[];
   tags: string;
   additionalFields: FieldUnion[];
+  status: OptionType;
 }
 
 export function convertPostToFormValues(
   post: Nullable<PostFull>,
   languageOptionList: OptionType[],
   postOptionList: OptionType<number>[],
-  additionalFieldList: FieldConfigUnion[]
+  additionalFieldList: FieldConfigUnion[],
+  statusOptions: OptionType[]
 ): FormValues {
   if (!post) {
     return {
@@ -58,6 +68,7 @@ export function convertPostToFormValues(
       additionalFields: additionalFieldList.map((fieldConfig) =>
         universalFieldUtils.createFormField(fieldConfig, null)
       ),
+      status: statusOptions[0],
     };
   }
 
@@ -69,6 +80,10 @@ export function convertPostToFormValues(
     post.relatedPosts.some((relatedPost) => relatedPost.id === option.value)
   );
 
+  const foundStatus =
+    statusOptions.find(({ value }) => value === post.status) ??
+    statusOptions[0];
+
   return {
     title: post.title,
     excerpt: post.excerpt,
@@ -94,15 +109,16 @@ export function convertPostToFormValues(
     language: currentLangOption ?? null,
     relatedPosts: selectedPostOptionList,
     tags: post.tags.join(','),
-    additionalFields: additionalFieldList.map((fieldConfig, index) => {
+    additionalFields: additionalFieldList.map((fieldConfig) => {
       const postAdditionalField = post.additionalFields.find(
-        (item) => item.name === fieldConfig.name
+        ({ name }) => name === fieldConfig.name
       );
       return universalFieldUtils.createFormField(
         fieldConfig,
         postAdditionalField?.value
       );
     }),
+    status: foundStatus,
   };
 }
 
@@ -121,7 +137,6 @@ export function convertFormValuesToCreationPayload(
     pageTitle: values.pageTitle,
     pageDescription: values.pageDescription,
     openGraphImage: values.openGraphImage?.file.id ?? null,
-    status: 'PUBLISHED',
     categories: values.categories.map((option) => option.value),
     language: values.language?.value ?? null,
     relatedPosts: values.relatedPosts.map(
@@ -132,6 +147,7 @@ export function convertFormValuesToCreationPayload(
       name: field.config.name,
       value: universalFieldUtils.getOutgoingValue(field),
     })),
+    status: values.status.value,
   };
 }
 

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

@@ -18,6 +18,15 @@
         />
 
         <template v-if="selectedTabId === 'common'">
+          <form-field-select
+            v-model="values.status"
+            name="status"
+            :error="errors.status"
+            :label="$t('blog:status')"
+            :no-options-message="$t('blog:noTemplates')"
+            :options="statusOptions"
+          />
+
           <form-field-select
             v-if="isCreation && isLangSpecific"
             v-model="values.language"
@@ -52,6 +61,7 @@
             type="textarea"
             :error="errors.excerpt"
           />
+
           <form-field-rich-text-input
             v-model="values.body"
             name="body"
@@ -59,6 +69,7 @@
             :error="errors.body"
             :get-upload-adapter-options="getUploadAdapterOptions"
           />
+
           <ShortCodeConstructor
             :short-code-config-list="
               moduleConfig ? moduleConfig.shortcodes : []
@@ -218,6 +229,7 @@ import {
   convertFormValuesToUpdatePayload,
   convertPostToFormValues,
   FormValues,
+  getStatusOptions,
 } from './PostForm.helpers';
 
 export default defineComponent({
@@ -229,6 +241,10 @@ export default defineComponent({
 
     const urlAliasChanged = ref<boolean>(false);
 
+    const statusOptions = computed<OptionType[]>(() =>
+      getStatusOptions(context.root.$t)
+    );
+
     /** Fetch module config **/
 
     const {
@@ -300,7 +316,8 @@ export default defineComponent({
         post.value,
         languageOptionList.value,
         postOptionList.value,
-        moduleConfig.value?.fields ?? []
+        moduleConfig.value?.fields ?? [],
+        statusOptions.value
       )
     );
     const errors = ref<Record<string, string>>({});
@@ -310,7 +327,8 @@ export default defineComponent({
         post.value,
         languageOptionList.value,
         postOptionList.value,
-        moduleConfig.value?.fields ?? []
+        moduleConfig.value?.fields ?? [],
+        statusOptions.value
       );
     });
 
@@ -347,7 +365,8 @@ export default defineComponent({
               null,
               languageOptionList.value,
               postOptionList.value,
-              moduleConfig.value?.fields ?? []
+              moduleConfig.value?.fields ?? [],
+              statusOptions.value
             );
           }
 
@@ -587,6 +606,8 @@ export default defineComponent({
       handleAliasChange,
       urlAliasTemplate,
       handleCategoriesChange,
+
+      statusOptions,
     };
   },
 });

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

@@ -7,7 +7,7 @@ import {
   Category,
   ModuleConfig,
   Language,
-  PostShort
+  PostShort,
 } from '../../../typings/model';
 import { getBlogPostFormUrl } from '../../../constants/paths';
 
@@ -28,7 +28,7 @@ export function convertPostList(
 
         return {
           ...post,
-          language: foundLanguage ? foundLanguage.name : post.language
+          language: foundLanguage ? foundLanguage.name : post.language,
         };
       }
 
@@ -41,7 +41,7 @@ export function getStatuses(t: TFunction): Record<string, string> {
     PUBLISHED: t('blog:statusPublished'),
     DRAFT: t('blog:statusDraft'),
     ARCHIVED: t('blog:statusArchived'),
-  }
+  };
 }
 
 export function getPostTableColumnDefs(
@@ -58,7 +58,7 @@ export function getPostTableColumnDefs(
       name: 'ID',
       field: 'id',
       style: { width: '50px', textAlign: 'center' },
-      headStyle: { width: '50px', textAlign: 'center' }
+      headStyle: { width: '50px', textAlign: 'center' },
     },
     {
       id: 2,
@@ -66,9 +66,7 @@ export function getPostTableColumnDefs(
       field: 'status',
       style: { width: '120px' },
       headStyle: { width: '120px' },
-      format: ({ row }) => {
-        return getStatuses(t)[row.status];
-      }
+      format: ({ row }) => getStatuses(t)[row.status],
     },
     {
       id: 2,
@@ -78,16 +76,16 @@ export function getPostTableColumnDefs(
       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,
@@ -95,26 +93,32 @@ export function getPostTableColumnDefs(
       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(', ')
+        row.categories.map((category) => category.name).join(', '),
     },
     {
       id: 7,
       name: t('blog:actions'),
       field: 'actions',
       style: { whiteSpace: 'nowrap', width: '120px' },
-      headStyle: { whiteSpace: 'nowrap', width: '120px' }
-    }
+      headStyle: { whiteSpace: 'nowrap', width: '120px' },
+    },
   ];
 
   return COLUMN_DEFS.filter(notEmpty);

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

@@ -69,6 +69,15 @@
                   />
                 </div>
               </div>
+
+              <form-field-multi-select
+                v-model="statusFilter"
+                :options="statusOptionList"
+                name="statusFilter"
+                :searchable="true"
+                :label="$t('blog:status')"
+                class="filter"
+              />
             </div>
           </advanced-search>
         </template>
@@ -113,6 +122,7 @@ import pick from 'lodash.pick';
 
 import {
   ColumnDefinition,
+  OptionType,
   useDataTable,
   useTranslation,
 } from '@tager/admin-ui';
@@ -135,6 +145,7 @@ import {
   PostFull,
   PostShort,
 } from '../../../typings/model';
+import { getStatusOptions } from '../PostForm/PostForm.helpers';
 
 import { convertPostList, getPostTableColumnDefs } from './PostList.helpers';
 import { useAdvancedSearch } from './hooks';
@@ -150,6 +161,8 @@ export default defineComponent({
         : context.root.$route.query.category;
     });
 
+    const statusOptionList = computed<OptionType[]>(() => getStatusOptions(t));
+
     /** Fetch module config **/
 
     const {
@@ -196,10 +209,12 @@ export default defineComponent({
       filterParams,
       tags,
       tagRemovalHandler,
+      statusFilter,
     } = useAdvancedSearch({
       context,
       categoryList,
       languageList,
+      statusOptionList,
     });
 
     const isLangSpecific = computed<boolean>(
@@ -311,6 +326,8 @@ export default defineComponent({
       languageOptionList,
       fromDateFilter,
       toDateFilter,
+      statusFilter,
+      statusOptionList,
       tags,
       tagRemovalHandler,
 

package/src/views/Posts/PostList/hooks/useAdvancedSearch.ts

@@ -23,6 +23,7 @@ interface Params {
   context: SetupContext;
   categoryList: ComputedRef<Category[]>;
   languageList: ComputedRef<Language[]>;
+  statusOptionList: ComputedRef<OptionType[]>;
 }
 
 interface State {
@@ -32,6 +33,7 @@ interface State {
   languageOptionList: ComputedRef<OptionType[]>;
   fromDateFilter: Ref<string>;
   toDateFilter: Ref<string>;
+  statusFilter: Ref<OptionType[]>;
   filterParams: ComputedRef<Record<string, string | string[]>>;
   tags: ComputedRef<FilterTagType[]>;
   tagRemovalHandler(event: FilterTagType): void;
@@ -42,6 +44,7 @@ enum FilterTypes {
   LANGUAGE = 'language',
   FROM_DATE = 'from-date',
   TO_DATE = 'to-date',
+  STATUS = 'status',
 }
 
 export const dateFormat = (date: string) => date.split('-').reverse().join('.');
@@ -50,6 +53,7 @@ export function useAdvancedSearch({
   context,
   categoryList,
   languageList,
+  statusOptionList,
 }: Params): State {
   /** Category **/
 
@@ -161,12 +165,31 @@ export function useAdvancedSearch({
     };
   });
 
+  /** Status **/
+
+  const initialStatusFilter = computed<OptionType[]>(() => {
+    const queryValue = getFilterParamAsStringArray(
+      context.root.$route.query,
+      FilterTypes.STATUS
+    );
+    return statusOptionList.value.filter(({ value }) =>
+      queryValue.some((selected) => selected === value)
+    );
+  });
+
+  const statusFilter = ref<OptionType[]>(initialStatusFilter.value);
+
+  watch(initialStatusFilter, () => {
+    statusFilter.value = initialStatusFilter.value;
+  });
+
   /** Params **/
 
   const filterParams = computed(() => {
     const filters: Record<string, string | string[]> = {
       [FilterTypes.CATEGORY]: categoryFilter.value.map(({ value }) => value),
       [FilterTypes.LANGUAGE]: languageFilter.value.map(({ value }) => value),
+      [FilterTypes.STATUS]: statusFilter.value.map(({ value }) => value),
     };
 
     if (fromDateFilter.value) {
@@ -197,6 +220,11 @@ export function useAdvancedSearch({
       fromDateFilter.value = '';
       toDateFilter.value = '';
     }
+    if (event.name === FilterTypes.STATUS) {
+      statusFilter.value = statusFilter.value.filter(
+        ({ value }) => value !== event.value
+      );
+    }
   }
 
   /** Tags **/
@@ -216,6 +244,12 @@ export function useAdvancedSearch({
         title: context.root.$t('blog:language'),
       })),
       date.value,
+      ...statusFilter.value.map(({ value, label }) => ({
+        value,
+        label,
+        name: FilterTypes.STATUS,
+        title: context.root.$t('blog:status'),
+      })),
     ].filter(isNotNullish)
   );
 
@@ -243,6 +277,7 @@ export function useAdvancedSearch({
     languageOptionList,
     fromDateFilter,
     toDateFilter,
+    statusFilter,
     tagRemovalHandler,
     tags: tags,
     filterParams,