@tager/admin-blog 0.3.39 → 0.3.43

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

@@ -1,168 +1,191 @@
 <template>
   <page
     :title="isCreation ? $t('blog:createPost') : $t('blog:updatePost')"
-    :is-content-loading="isContentLoading"
-    :header-buttons="headerButtonList"
-    :footer="{
+    :is-content-loading='isContentLoading'
+    :header-buttons='headerButtonList'
+    :footer='{
       backHref: postListUrl,
       onSubmit: submitForm,
       isSubmitting: isSubmitting,
-    }"
+    }'
   >
     <template v-slot:content>
-      <form novalidate @submit.prevent="submitForm">
+      <form novalidate @submit.prevent='submitForm'>
         <tab-list
-          :tab-list="tabList"
-          :selected-tab-id="selectedTabId"
-          @tab:update="selectedTabId = $event.tabId"
+          :tab-list='tabList'
+          :selected-tab-id='selectedTabId'
+          @tab:update='selectedTabId = $event.tabId'
         />
 
         <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"
-            name="language"
+            v-if='isCreation && isLangSpecific'
+            v-model='values.language'
+            name='language'
             :label="$t('blog:language')"
-            :options="languageOptionList"
-            :error="errors.language"
+            :options='languageOptionList'
+            :error='errors.language'
           />
 
           <form-field
-            v-model="values.title"
-            name="title"
+            v-model='values.title'
+            name='title'
             :label="$t('blog:title')"
-            :error="errors.title"
-            @input="handleTitleChange"
+            :error='errors.title'
+            @input='handleTitleChange'
           />
 
           <form-field-url-alias-input
-            id="urlAlias"
-            v-model="values.urlAlias"
-            name="urlAlias"
+            id='urlAlias'
+            v-model='values.urlAlias'
+            name='urlAlias'
             :label="$t('blog:link')"
-            :url-template="urlAliasTemplate"
-            :error="errors.urlAlias"
-            @change="handleAliasChange"
+            :url-template='urlAliasTemplate'
+            :error='errors.urlAlias'
+            @change='handleAliasChange'
+          />
+
+          <div class='status'>
+            <div class='status-value'>
+              <form-field-select
+                v-model='values.status'
+                name='status'
+                :error='errors.status'
+                :label="$t('blog:status')"
+                :no-options-message="$t('blog:noTemplates')"
+                :options='statusOptions'
+              />
+            </div>
+            <div class='status-checkbox' v-if='values.status.value === "PUBLISHED" || values.status.value === "DRAFT"'>
+              <form-field-checkbox
+                v-model='values.statusDateEnabled'
+                name='statusDateEnabled'
+                :label="$t(values.status.value === 'PUBLISHED' ? 'blog:scheduleArchive' : 'blog:schedulePublish')"
+                :error='errors.status'
+              />
+            </div>
+            <div class='status-date'
+                 v-if='values.statusDateEnabled && (values.status.value === "PUBLISHED" || values.status.value === "DRAFT")'>
+              <form-field
+                v-model='values.statusDate'
+                name='statusDate'
+                type='date'
+                :label="$t(values.status.value === 'PUBLISHED' ? 'blog:archiveAt' : 'blog:publishAt')"
+                :error='errors.statusDate'
+              />
+            </div>
+          </div>
+
+          <form-field
+            v-model='values.datetime'
+            name='datetime'
+            :label="$t('blog:date')"
+            type='date'
+            :error='errors.datetime'
           />
 
           <form-field
-            v-model="values.excerpt"
-            name="excerpt"
+            v-model='values.excerpt'
+            name='excerpt'
             :label="$t('blog:excerpt')"
-            type="textarea"
-            :error="errors.excerpt"
+            type='textarea'
+            :error='errors.excerpt'
           />
 
           <form-field-rich-text-input
-            v-model="values.body"
-            name="body"
+            v-model='values.body'
+            name='body'
             :label="$t('blog:body')"
-            :error="errors.body"
-            :get-upload-adapter-options="getUploadAdapterOptions"
+            :error='errors.body'
+            :get-upload-adapter-options='getUploadAdapterOptions'
           />
 
           <ShortCodeConstructor
-            :short-code-config-list="
+            :short-code-config-list='
               moduleConfig ? moduleConfig.shortcodes : []
-            "
-          />
-
-          <form-field
-            v-model="values.datetime"
-            name="datetime"
-            :label="$t('blog:date')"
-            type="date"
-            :error="errors.datetime"
+            '
           />
         </template>
 
         <template v-if="selectedTabId === 'images'">
           <form-field-file-input
-            v-model="values.coverImage"
+            v-model='values.coverImage'
             :label="$t('blog:coverImage')"
-            name="coverImage"
-            file-type="image"
-            :scenario="moduleConfig ? moduleConfig.fileScenarios.cover : null"
+            name='coverImage'
+            file-type='image'
+            :scenario='moduleConfig ? moduleConfig.fileScenarios.cover : null'
           />
 
           <form-field-file-input
-            v-model="values.image"
-            name="image"
+            v-model='values.image'
+            name='image'
             :label="$t('blog:innerImage')"
-            file-type="image"
-            :scenario="moduleConfig ? moduleConfig.fileScenarios.image : null"
+            file-type='image'
+            :scenario='moduleConfig ? moduleConfig.fileScenarios.image : null'
           />
 
           <form-field-file-input
-            v-model="values.imageMobile"
-            name="imageMobile"
+            v-model='values.imageMobile'
+            name='imageMobile'
             :label="$t('blog:innerImageMobile')"
-            file-type="image"
-            :scenario="
+            file-type='image'
+            :scenario='
               moduleConfig ? moduleConfig.fileScenarios.imageMobile : null
-            "
+            '
           />
         </template>
 
         <template v-if="selectedTabId === 'relations'">
           <form-field
-            v-model="values.tags"
-            name="tags"
+            v-model='values.tags'
+            name='tags'
             :label="$t('blog:tags')"
-            :error="errors.tags"
+            :error='errors.tags'
           />
 
           <form-field-multi-select
-            :selected-options="values.categories"
-            name="categories"
+            :selected-options='values.categories'
+            name='categories'
             :label="$t('blog:categories')"
-            :options="categoryOptionList"
-            :error="errors.categories"
-            @change="handleCategoriesChange"
+            :options='categoryOptionList'
+            :error='errors.categories'
+            @change='handleCategoriesChange'
           />
 
           <form-field-multi-select
-            v-model="values.relatedPosts"
-            name="relatedPosts"
+            v-model='values.relatedPosts'
+            name='relatedPosts'
             :label="$t('blog:relatedPosts')"
-            :options="postOptionList"
-            :error="errors.relatedPosts"
-            :searchable="true"
+            :options='postOptionList'
+            :error='errors.relatedPosts'
+            :searchable='true'
           />
         </template>
 
         <template v-if="selectedTabId === 'additional'">
           <DynamicField
-            v-for="field of values.additionalFields"
-            :key="field.name"
-            :field="field"
+            v-for='field of values.additionalFields'
+            :key='field.name'
+            :field='field'
           />
         </template>
 
         <template v-if="selectedTabId === 'seo'">
           <seo-field-group
-            :title="values.pageTitle"
-            :title-error-message="errors.pageTitle"
+            :title='values.pageTitle'
+            :title-error-message='errors.pageTitle'
             :title-label="$t('blog:pageTitle')"
-            :description="values.pageDescription"
-            :description-error-message="errors.pageDescription"
+            :description='values.pageDescription'
+            :description-error-message='errors.pageDescription'
             :description-label="$t('blog:pageDescription')"
-            :image="values.openGraphImage"
-            :image-error-message="errors.openGraphImage"
+            :image='values.openGraphImage'
+            :image-error-message='errors.openGraphImage'
             :image-label="$t('blog:openGraphImage')"
-            :image-scenario="
+            :image-scenario='
               moduleConfig ? moduleConfig.fileScenarios.openGraph : null
-            "
-            @change="handleSeoFieldGroupChange"
+            '
+            @change='handleSeoFieldGroupChange'
           />
         </template>
       </form>
@@ -170,23 +193,23 @@
 
     <template v-slot:footer>
       <FormFooter
-        :back-href="postListUrl"
-        :on-submit="submitForm"
-        :is-submitting="isSubmitting"
-        :is-creation="isCreation"
-        :can-create-another="isCreation"
+        :back-href='postListUrl'
+        :on-submit='submitForm'
+        :is-submitting='isSubmitting'
+        :is-creation='isCreation'
+        :can-create-another='isCreation'
       />
     </template>
   </page>
 </template>
 
-<script lang="ts">
+<script lang='ts'>
 import {
   computed,
   defineComponent,
   onMounted,
   ref,
-  watch,
+  watch
 } from '@vue/composition-api';
 
 import {
@@ -194,7 +217,7 @@ import {
   isNotNullish,
   Nullable,
   useResource,
-  urlTranslit,
+  urlTranslit
 } from '@tager/admin-services';
 import {
   createTabErrorFinder,
@@ -203,24 +226,24 @@ import {
   ShortCodeConstructor,
   SeoChangeEvent,
   FormFooter,
-  TagerFormSubmitEvent,
+  TagerFormSubmitEvent
 } from '@tager/admin-ui';
 import { DynamicField } from '@tager/admin-dynamic-field';
 
 import {
   getBlogPostFormUrl,
-  getBlogPostListUrl,
+  getBlogPostListUrl
 } from '../../../constants/paths';
 import {
   createBlogPost,
   getPost,
-  updateBlogPost,
+  updateBlogPost
 } from '../../../services/requests';
 import { Language, PostFull } from '../../../typings/model';
 import {
   useFetchModuleConfig,
   useFetchCategories,
-  useFetchPosts,
+  useFetchPosts
 } from '../../../hooks';
 
 import {
@@ -229,7 +252,7 @@ import {
   convertFormValuesToUpdatePayload,
   convertPostToFormValues,
   FormValues,
-  getStatusOptions,
+  getStatusOptions
 } from './PostForm.helpers';
 
 export default defineComponent({
@@ -249,7 +272,7 @@ export default defineComponent({
 
     const {
       data: moduleConfig,
-      loading: isModuleConfigLoading,
+      loading: isModuleConfigLoading
     } = useFetchModuleConfig({ context });
 
     const languageList = computed<Language[]>(
@@ -259,7 +282,7 @@ export default defineComponent({
     const languageOptionList = computed<OptionType[]>(() =>
       languageList.value.map(({ id, name }) => ({
         value: id,
-        label: name,
+        label: name
       }))
     );
 
@@ -269,18 +292,16 @@ export default defineComponent({
 
     const {
       data: categoryList,
-      loading: isCategoryListLoading,
+      loading: isCategoryListLoading
     } = useFetchCategories({ context });
 
     /** Fetch Post */
 
-    const [fetchPost, { data: post, loading: isPostLoading }] = useResource<
-      Nullable<PostFull>
-    >({
+    const [fetchPost, { data: post, loading: isPostLoading }] = useResource<Nullable<PostFull>>({
       fetchResource: () => getPost(postId.value),
       initialValue: null,
       context,
-      resourceName: 'Post',
+      resourceName: 'Post'
     });
 
     onMounted(() => {
@@ -297,7 +318,7 @@ export default defineComponent({
 
     /** Fetch post list */
     const { data: postList, loading: isPostListLoading } = useFetchPosts({
-      context,
+      context
     });
 
     const postOptionList = computed<OptionType<number>[]>(() =>
@@ -305,7 +326,7 @@ export default defineComponent({
         .filter((relatedPost) => relatedPost.id !== post.value?.id)
         .map((post) => ({
           value: post.id,
-          label: post.title,
+          label: post.title
         }))
     );
 
@@ -375,7 +396,7 @@ export default defineComponent({
             title: context.root.$t('blog:success'),
             body: isCreation.value
               ? context.root.$t('blog:blogPostWasSuccessfullyCreated')
-              : context.root.$t('blog:blogPostWasSuccessfullyUpdated'),
+              : context.root.$t('blog:blogPostWasSuccessfullyUpdated')
           });
         })
         .catch((error) => {
@@ -386,7 +407,7 @@ export default defineComponent({
             title: context.root.$t('blog:error'),
             body: isCreation.value
               ? context.root.$t('blog:blogPostCreationWasFailed')
-              : context.root.$t('blog:blogPostUpdateWasFailed'),
+              : context.root.$t('blog:blogPostUpdateWasFailed')
           });
         })
         .finally(() => {
@@ -459,25 +480,25 @@ export default defineComponent({
             'urlAlias',
             'excerpt',
             'body',
-            'date',
-          ]),
+            'date'
+          ])
         },
         {
           id: 'images',
           label: context.root.$t('blog:images'),
-          hasErrors: hasErrors(['coverImage', 'image']),
+          hasErrors: hasErrors(['coverImage', 'image'])
         },
         {
           id: 'relations',
           label: context.root.$t('blog:relations'),
-          hasErrors: hasErrors(['categories', 'relatedPosts', 'tags']),
+          hasErrors: hasErrors(['categories', 'relatedPosts', 'tags'])
         },
         values.value.additionalFields.length > 0
           ? {
-              id: 'additional',
-              label: context.root.$t('blog:additionalFields'),
-              hasErrors: hasErrors([]),
-            }
+            id: 'additional',
+            label: context.root.$t('blog:additionalFields'),
+            hasErrors: hasErrors([])
+          }
           : null,
         {
           id: 'seo',
@@ -485,40 +506,38 @@ export default defineComponent({
           hasErrors: hasErrors([
             'pageTitle',
             'pageDescription',
-            'openGraphImage',
-          ]),
-        },
+            'openGraphImage'
+          ])
+        }
       ].filter(isNotNullish);
     });
 
     const selectedTabId = ref<string>(tabList.value[0].id);
 
-    const headerButtonList = computed<
-      { text: string; href: string; target?: string }[]
-    >(() =>
+    const headerButtonList = computed<{ text: string; href: string; target?: string }[]>(() =>
       [
         post.value
           ? {
-              text: context.root.$t('blog:viewPost'),
-              href: process.env.VUE_APP_WEBSITE_URL + post.value.url,
-              target: '_blank',
-            }
-          : null,
+            text: context.root.$t('blog:viewPost'),
+            href: process.env.VUE_APP_WEBSITE_URL + post.value.url,
+            target: '_blank'
+          }
+          : null
       ].filter(isNotNullish)
     );
 
     function handleSeoFieldGroupChange({
-      title,
-      description,
-      image,
-    }: SeoChangeEvent) {
+                                         title,
+                                         description,
+                                         image
+                                       }: SeoChangeEvent) {
       values.value.pageTitle = title;
       values.value.pageDescription = description;
       values.value.openGraphImage = image;
     }
 
     function handleTitleChange(value: string) {
-      if (urlAliasChanged.value === false) {
+      if (isCreation.value && urlAliasChanged.value === false) {
         values.value.urlAlias = urlTranslit(value);
       }
     }
@@ -560,7 +579,7 @@ export default defineComponent({
 
           const newSelectedOption: OptionType<number> = {
             value: foundSelectedCategory.id,
-            label: foundSelectedCategory.name,
+            label: foundSelectedCategory.name
           };
 
           if (
@@ -607,8 +626,29 @@ export default defineComponent({
       urlAliasTemplate,
       handleCategoriesChange,
 
-      statusOptions,
+      statusOptions
     };
-  },
+  }
 });
 </script>
+
+<style scoped lang='scss'>
+.status {
+  display: flex;
+  align-items: flex-end;
+}
+
+.status-value {
+  flex-basis: 50%;
+}
+
+.status-checkbox {
+  margin-left: 20px;
+  padding-bottom: 8px;
+}
+
+.status-date {
+  margin-left: 20px;
+  flex: 1 1 1px;
+}
+</style>

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

@@ -64,12 +64,11 @@ export function getPostTableColumnDefs(
       id: 2,
       name: t('blog:status'),
       field: 'status',
-      style: { width: '120px' },
-      headStyle: { width: '120px' },
-      format: ({ row }) => getStatuses(t)[row.status],
+      style: { width: '140px' },
+      headStyle: { width: '140px' },
     },
     {
-      id: 2,
+      id: 3,
       name: t('blog:name'),
       field: 'name',
       type: 'name',
@@ -88,7 +87,7 @@ export function getPostTableColumnDefs(
       }),
     },
     {
-      id: 3,
+      id: 4,
       name: t('blog:image'),
       field: 'image',
       type: 'image',
@@ -96,24 +95,24 @@ export function getPostTableColumnDefs(
       headStyle: { width: '250px' },
     },
     isLangSpecific
-      ? { id: 4, name: t('blog:language'), field: 'language' }
+      ? { id: 5, name: t('blog:language'), field: 'language' }
       : null,
     {
-      id: 5,
+      id: 6,
       name: t('blog:date'),
       field: 'datetime',
       type: 'datetime',
       options: { ignoreStartOfDayTime: true },
     },
     {
-      id: 6,
+      id: 7,
       name: t('blog:categories'),
       field: 'categories',
       format: ({ row }) =>
         row.categories.map((category) => category.name).join(', '),
     },
     {
-      id: 7,
+      id: 8,
       name: t('blog:actions'),
       field: 'actions',
       style: { whiteSpace: 'nowrap', width: '120px' },