@tager/admin-blog 0.3.36 → 0.3.40

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

@@ -9,7 +9,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         title: string;
         excerpt: string;
         body: string;
-        date: string;
+        datetime: string;
         coverImage: {
             id: string;
             file: {
@@ -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, {
@@ -4699,7 +4705,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         title: string;
         excerpt: string;
         body: string;
-        date: string;
+        datetime: string;
         coverImage: {
             id: string;
             file: {
@@ -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.helpers.d.ts

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

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.36",
+  "version": "0.3.40",
   "license": "MIT",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",

package/src/locales/en.ts

@@ -75,6 +75,11 @@ const EN = {
 
   parentCategory: 'Parent category',
   noParent: 'No parent',
+
+  status: 'Status',
+  statusPublished: 'Published',
+  statusDraft: 'Draft',
+  statusArchived: 'Archived',
 };
 
 export default EN;

package/src/locales/ru.ts

@@ -77,6 +77,11 @@ const RU: typeof EN = {
 
   parentCategory: 'Родительская категория',
   noParent: 'Нет родительской',
+
+  status: 'Статус',
+  statusPublished: 'Опубликован',
+  statusDraft: 'Черновик',
+  statusArchived: 'В архиве',
 };
 
 export default RU;

package/src/services/requests.ts

@@ -40,7 +40,7 @@ export interface PostCreationPayload {
   urlAlias: string;
   excerpt: string;
   body: string;
-  date: string;
+  datetime: string;
   coverImage: Nullable<string>;
   image: Nullable<string>;
   imageMobile: Nullable<string>;

package/src/typings/model.ts

@@ -40,7 +40,7 @@ export interface PostShort {
   readonly status: string;
   readonly language: string;
   readonly categories: Category[];
-  readonly date: string;
+  readonly datetime: string;
   readonly image: Nullable<FileType>;
 }
 
@@ -51,7 +51,7 @@ export interface PostFull extends SeoInfo {
   readonly url: string;
   readonly urlTemplate: string;
   readonly urlAlias: string;
-  readonly date: string;
+  readonly datetime: string|null;
   readonly status: string;
   readonly excerpt: string;
   readonly image: Nullable<FileType>;

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,11 +15,17 @@ 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;
   body: string;
-  date: string;
+  datetime: string;
   coverImage: Nullable<SingleFileInputValueType>;
   image: Nullable<SingleFileInputValueType>;
   imageMobile: Nullable<SingleFileInputValueType>;
@@ -30,20 +38,22 @@ 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 {
       title: '',
       excerpt: '',
       body: '',
-      date: '',
+      datetime: '',
       coverImage: null,
       image: null,
       imageMobile: null,
@@ -58,6 +68,7 @@ export function convertPostToFormValues(
       additionalFields: additionalFieldList.map((fieldConfig) =>
         universalFieldUtils.createFormField(fieldConfig, null)
       ),
+      status: statusOptions[0],
     };
   }
 
@@ -69,11 +80,15 @@ 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,
     body: post.body,
-    date: post.date,
+    datetime: post.datetime ? post.datetime.substr(0, 10) : '',
     coverImage: post.coverImage
       ? { id: createId(), file: post.coverImage }
       : null,
@@ -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,
   };
 }
 
@@ -114,14 +130,13 @@ export function convertFormValuesToCreationPayload(
     excerpt: values.excerpt,
     urlAlias: values.urlAlias,
     body: values.body,
-    date: values.date,
+    datetime: values.datetime,
     coverImage: values.coverImage?.file.id ?? null,
     image: values.image?.file.id ?? null,
     imageMobile: values.imageMobile?.file.id ?? null,
     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 : []
@@ -66,11 +77,11 @@
           />
 
           <form-field
-            v-model="values.date"
-            name="date"
+            v-model="values.datetime"
+            name="datetime"
             :label="$t('blog:date')"
             type="date"
-            :error="errors.date"
+            :error="errors.datetime"
           />
         </template>
 
@@ -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
             );
           }
 
@@ -499,7 +518,7 @@ export default defineComponent({
     }
 
     function handleTitleChange(value: string) {
-      if (urlAliasChanged.value === false) {
+      if (isCreation.value && urlAliasChanged.value === false) {
         values.value.urlAlias = urlTranslit(value);
       }
     }
@@ -587,6 +606,8 @@ export default defineComponent({
       handleAliasChange,
       urlAliasTemplate,
       handleCategoriesChange,
+
+      statusOptions,
     };
   },
 });

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

@@ -36,6 +36,14 @@ export function convertPostList(
     });
 }
 
+export function getStatuses(t: TFunction): Record<string, string> {
+  return {
+    PUBLISHED: t('blog:statusPublished'),
+    DRAFT: t('blog:statusDraft'),
+    ARCHIVED: t('blog:statusArchived'),
+  };
+}
+
 export function getPostTableColumnDefs(
   moduleConfig: Nullable<ModuleConfig>,
   t: TFunction
@@ -52,6 +60,14 @@ export function getPostTableColumnDefs(
       style: { width: '50px', textAlign: 'center' },
       headStyle: { width: '50px', textAlign: 'center' },
     },
+    {
+      id: 2,
+      name: t('blog:status'),
+      field: 'status',
+      style: { width: '120px' },
+      headStyle: { width: '120px' },
+      format: ({ row }) => getStatuses(t)[row.status],
+    },
     {
       id: 2,
       name: t('blog:name'),
@@ -82,7 +98,13 @@ export function getPostTableColumnDefs(
     isLangSpecific
       ? { id: 4, name: t('blog:language'), field: 'language' }
       : null,
-    { id: 5, name: t('blog:date'), field: 'date', type: 'date' },
+    {
+      id: 5,
+      name: t('blog:date'),
+      field: 'datetime',
+      type: 'datetime',
+      options: { ignoreStartOfDayTime: true },
+    },
     {
       id: 6,
       name: t('blog:categories'),

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,