@tager/admin-blog 0.3.38 → 0.3.42

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

@@ -1,157 +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-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>
@@ -159,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 {
@@ -183,7 +217,7 @@ import {
   isNotNullish,
   Nullable,
   useResource,
-  urlTranslit,
+  urlTranslit
 } from '@tager/admin-services';
 import {
   createTabErrorFinder,
@@ -192,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 {
@@ -218,6 +252,7 @@ import {
   convertFormValuesToUpdatePayload,
   convertPostToFormValues,
   FormValues,
+  getStatusOptions
 } from './PostForm.helpers';
 
 export default defineComponent({
@@ -229,11 +264,15 @@ export default defineComponent({
 
     const urlAliasChanged = ref<boolean>(false);
 
+    const statusOptions = computed<OptionType[]>(() =>
+      getStatusOptions(context.root.$t)
+    );
+
     /** Fetch module config **/
 
     const {
       data: moduleConfig,
-      loading: isModuleConfigLoading,
+      loading: isModuleConfigLoading
     } = useFetchModuleConfig({ context });
 
     const languageList = computed<Language[]>(
@@ -243,7 +282,7 @@ export default defineComponent({
     const languageOptionList = computed<OptionType[]>(() =>
       languageList.value.map(({ id, name }) => ({
         value: id,
-        label: name,
+        label: name
       }))
     );
 
@@ -253,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(() => {
@@ -281,7 +318,7 @@ export default defineComponent({
 
     /** Fetch post list */
     const { data: postList, loading: isPostListLoading } = useFetchPosts({
-      context,
+      context
     });
 
     const postOptionList = computed<OptionType<number>[]>(() =>
@@ -289,7 +326,7 @@ export default defineComponent({
         .filter((relatedPost) => relatedPost.id !== post.value?.id)
         .map((post) => ({
           value: post.id,
-          label: post.title,
+          label: post.title
         }))
     );
 
@@ -300,7 +337,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 +348,8 @@ export default defineComponent({
         post.value,
         languageOptionList.value,
         postOptionList.value,
-        moduleConfig.value?.fields ?? []
+        moduleConfig.value?.fields ?? [],
+        statusOptions.value
       );
     });
 
@@ -347,7 +386,8 @@ export default defineComponent({
               null,
               languageOptionList.value,
               postOptionList.value,
-              moduleConfig.value?.fields ?? []
+              moduleConfig.value?.fields ?? [],
+              statusOptions.value
             );
           }
 
@@ -356,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) => {
@@ -367,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(() => {
@@ -440,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',
@@ -466,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);
       }
     }
@@ -541,7 +579,7 @@ export default defineComponent({
 
           const newSelectedOption: OptionType<number> = {
             value: foundSelectedCategory.id,
-            label: foundSelectedCategory.name,
+            label: foundSelectedCategory.name
           };
 
           if (
@@ -587,7 +625,30 @@ export default defineComponent({
       handleAliasChange,
       urlAliasTemplate,
       handleCategoriesChange,
+
+      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>