@tager/admin-blog 0.3.41 → 1.0.0

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

@@ -1,6 +1,8 @@
 <template>
-  <page
-    :title="isCreation ? $t('blog:createPost') : $t('blog:updatePost')"
+  <Page
+    :title="
+      isCreation ? $i18n.t('blog:createPost') : $i18n.t('blog:updatePost')
+    "
     :is-content-loading="isContentLoading"
     :header-buttons="headerButtonList"
     :footer="{
@@ -9,63 +11,117 @@
       isSubmitting: isSubmitting,
     }"
   >
-    <template v-slot:content>
+    <template #content>
       <form novalidate @submit.prevent="submitForm">
-        <tab-list
+        <TabList
           :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
+          <FormFieldSelect
             v-if="isCreation && isLangSpecific"
-            v-model="values.language"
+            v-model:value="values.language"
             name="language"
-            :label="$t('blog:language')"
+            :label="$i18n.t('blog:language')"
             :options="languageOptionList"
             :error="errors.language"
           />
 
-          <form-field
-            v-model="values.title"
+          <FormField
+            v-model:value="values.title"
             name="title"
-            :label="$t('blog:title')"
+            :label="$i18n.t('blog:title')"
             :error="errors.title"
             @input="handleTitleChange"
           />
 
-          <form-field-url-alias-input
+          <FormFieldUrlAliasInput
             id="urlAlias"
-            v-model="values.urlAlias"
+            v-model:value="values.urlAlias"
             name="urlAlias"
-            :label="$t('blog:link')"
+            :label="$i18n.t('blog:link')"
             :url-template="urlAliasTemplate"
             :error="errors.urlAlias"
             @change="handleAliasChange"
           />
 
-          <form-field
-            v-model="values.excerpt"
+          <div class="status">
+            <div class="status-value">
+              <FormFieldSelect
+                v-model:value="values.status"
+                name="status"
+                :error="errors.status"
+                :label="$i18n.t('blog:status')"
+                :no-options-message="$i18n.t('blog:noTemplates')"
+                :options="statusOptions"
+              />
+            </div>
+            <div
+              v-if="
+                values.status.value === 'PUBLISHED' ||
+                values.status.value === 'DRAFT'
+              "
+              class="status-checkbox"
+            >
+              <FormFieldCheckbox
+                v-model:checked="values.statusDateEnabled"
+                name="statusDateEnabled"
+                :label="
+                  $i18n.t(
+                    values.status.value === 'PUBLISHED'
+                      ? 'blog:scheduleArchive'
+                      : 'blog:schedulePublish'
+                  )
+                "
+                :error="errors.status"
+              />
+            </div>
+            <div
+              v-if="
+                values.statusDateEnabled &&
+                (values.status.value === 'PUBLISHED' ||
+                  values.status.value === 'DRAFT')
+              "
+              class="status-date"
+            >
+              <FormField
+                v-model:value="values.statusDate"
+                name="statusDate"
+                type="date"
+                :label="
+                  $i18n.t(
+                    values.status.value === 'PUBLISHED'
+                      ? 'blog:archiveAt'
+                      : 'blog:publishAt'
+                  )
+                "
+                :error="errors.statusDate"
+              />
+            </div>
+          </div>
+
+          <FormField
+            v-model:value="values.datetime"
+            name="datetime"
+            :label="$i18n.t('blog:date')"
+            type="date"
+            :error="errors.datetime"
+          />
+
+          <FormField
+            v-model:value="values.excerpt"
             name="excerpt"
-            :label="$t('blog:excerpt')"
+            :label="$i18n.t('blog:excerpt')"
             type="textarea"
             :error="errors.excerpt"
           />
 
-          <form-field-rich-text-input
-            v-model="values.body"
+          <FormFieldRichTextInput
+            v-model:value="values.body"
             name="body"
-            :label="$t('blog:body')"
+            :label="$i18n.t('blog:body')"
             :error="errors.body"
             :get-upload-adapter-options="getUploadAdapterOptions"
           />
@@ -75,37 +131,29 @@
               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"
-            :label="$t('blog:coverImage')"
+          <FormFieldFileInput
+            v-model:value="values.coverImage"
+            :label="$i18n.t('blog:coverImage')"
             name="coverImage"
             file-type="image"
             :scenario="moduleConfig ? moduleConfig.fileScenarios.cover : null"
           />
 
-          <form-field-file-input
-            v-model="values.image"
+          <FormFieldFileInput
+            v-model:value="values.image"
             name="image"
-            :label="$t('blog:innerImage')"
+            :label="$i18n.t('blog:innerImage')"
             file-type="image"
             :scenario="moduleConfig ? moduleConfig.fileScenarios.image : null"
           />
 
-          <form-field-file-input
-            v-model="values.imageMobile"
+          <FormFieldFileInput
+            v-model:value="values.imageMobile"
             name="imageMobile"
-            :label="$t('blog:innerImageMobile')"
+            :label="$i18n.t('blog:innerImageMobile')"
             file-type="image"
             :scenario="
               moduleConfig ? moduleConfig.fileScenarios.imageMobile : null
@@ -114,26 +162,26 @@
         </template>
 
         <template v-if="selectedTabId === 'relations'">
-          <form-field
-            v-model="values.tags"
+          <FormField
+            v-model:value="values.tags"
             name="tags"
-            :label="$t('blog:tags')"
+            :label="$i18n.t('blog:tags')"
             :error="errors.tags"
           />
 
-          <form-field-multi-select
-            :selected-options="values.categories"
+          <FormFieldMultiSelect
+            v-model:selected-options="values.categories"
             name="categories"
-            :label="$t('blog:categories')"
+            :label="$i18n.t('blog:categories')"
             :options="categoryOptionList"
             :error="errors.categories"
             @change="handleCategoriesChange"
           />
 
-          <form-field-multi-select
-            v-model="values.relatedPosts"
+          <FormFieldMultiSelect
+            v-model:selected-options="values.relatedPosts"
             name="relatedPosts"
-            :label="$t('blog:relatedPosts')"
+            :label="$i18n.t('blog:relatedPosts')"
             :options="postOptionList"
             :error="errors.relatedPosts"
             :searchable="true"
@@ -149,16 +197,16 @@
         </template>
 
         <template v-if="selectedTabId === 'seo'">
-          <seo-field-group
+          <SeoFieldGroup
             :title="values.pageTitle"
             :title-error-message="errors.pageTitle"
-            :title-label="$t('blog:pageTitle')"
+            :title-label="$i18n.t('blog:pageTitle')"
             :description="values.pageDescription"
             :description-error-message="errors.pageDescription"
-            :description-label="$t('blog:pageDescription')"
+            :description-label="$i18n.t('blog:pageDescription')"
             :image="values.openGraphImage"
             :image-error-message="errors.openGraphImage"
-            :image-label="$t('blog:openGraphImage')"
+            :image-label="$i18n.t('blog:openGraphImage')"
             :image-scenario="
               moduleConfig ? moduleConfig.fileScenarios.openGraph : null
             "
@@ -168,26 +216,21 @@
       </form>
     </template>
 
-    <template v-slot:footer>
+    <template #footer>
       <FormFooter
         :back-href="postListUrl"
-        :on-submit="submitForm"
         :is-submitting="isSubmitting"
         :is-creation="isCreation"
         :can-create-another="isCreation"
+        @submit="submitForm"
       />
     </template>
-  </page>
+  </Page>
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  ref,
-  watch,
-} from '@vue/composition-api';
+import { computed, defineComponent, onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
 import {
   convertRequestErrorToMap,
@@ -195,6 +238,9 @@ import {
   Nullable,
   useResource,
   urlTranslit,
+  useI18n,
+  useToast,
+  navigateBack,
 } from '@tager/admin-services';
 import {
   createTabErrorFinder,
@@ -204,13 +250,19 @@ import {
   SeoChangeEvent,
   FormFooter,
   TagerFormSubmitEvent,
+  FormFieldSelect,
+  FormField,
+  FormFieldUrlAliasInput,
+  FormFieldCheckbox,
+  FormFieldRichTextInput,
+  FormFieldFileInput,
+  FormFieldMultiSelect,
+  SeoFieldGroup,
 } from '@tager/admin-ui';
 import { DynamicField } from '@tager/admin-dynamic-field';
+import { Page } from '@tager/admin-layout';
 
-import {
-  getBlogPostFormUrl,
-  getBlogPostListUrl,
-} from '../../../constants/paths';
+import { getBlogPostFormUrl, getBlogPostListUrl } from '../../../utils/paths';
 import {
   createBlogPost,
   getPost,
@@ -231,26 +283,42 @@ import {
   FormValues,
   getStatusOptions,
 } from './PostForm.helpers';
+import TabList from './components/TabList/TabList.vue';
 
 export default defineComponent({
   name: 'BlogPostForm',
-  components: { DynamicField, ShortCodeConstructor, FormFooter },
-  setup(props, context) {
-    const postId = computed<string>(() => context.root.$route.params.postId);
+  components: {
+    SeoFieldGroup,
+    FormFieldMultiSelect,
+    FormFieldFileInput,
+    FormFieldRichTextInput,
+    FormFieldCheckbox,
+    FormFieldUrlAliasInput,
+    FormField,
+    FormFieldSelect,
+    TabList,
+    Page,
+    DynamicField,
+    ShortCodeConstructor,
+    FormFooter,
+  },
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const toast = useToast();
+    const { t } = useI18n();
+
+    const postId = computed<string>(() => route.params.postId as string);
     const isCreation = computed<boolean>(() => postId.value === 'create');
 
     const urlAliasChanged = ref<boolean>(false);
 
-    const statusOptions = computed<OptionType[]>(() =>
-      getStatusOptions(context.root.$t)
-    );
+    const statusOptions = computed<OptionType[]>(() => getStatusOptions(t));
 
     /** Fetch module config **/
 
-    const {
-      data: moduleConfig,
-      loading: isModuleConfigLoading,
-    } = useFetchModuleConfig({ context });
+    const { data: moduleConfig, loading: isModuleConfigLoading } =
+      useFetchModuleConfig();
 
     const languageList = computed<Language[]>(
       () => moduleConfig.value?.languages ?? []
@@ -267,19 +335,17 @@ export default defineComponent({
 
     /** Fetch category list */
 
-    const {
-      data: categoryList,
-      loading: isCategoryListLoading,
-    } = useFetchCategories({ context });
+    const { data: categoryList, loading: isCategoryListLoading } =
+      useFetchCategories();
 
     /** Fetch Post */
 
     const [fetchPost, { data: post, loading: isPostLoading }] = useResource<
       Nullable<PostFull>
     >({
-      fetchResource: () => getPost(postId.value),
+      fetchResource: () =>
+        postId.value ? getPost(postId.value) : new Promise(() => null),
       initialValue: null,
-      context,
       resourceName: 'Post',
     });
 
@@ -296,9 +362,7 @@ export default defineComponent({
     });
 
     /** Fetch post list */
-    const { data: postList, loading: isPostListLoading } = useFetchPosts({
-      context,
-    });
+    const { data: postList, loading: isPostListLoading } = useFetchPosts();
 
     const postOptionList = computed<OptionType<number>[]>(() =>
       postList.value
@@ -347,17 +411,11 @@ export default defineComponent({
           errors.value = {};
 
           if (event.type === 'create') {
-            context.root.$router.push(
-              getBlogPostFormUrl({ postId: String(data.id) })
-            );
+            router.push(getBlogPostFormUrl({ postId: String(data.id) }));
           }
 
           if (event.type === 'create_exit' || event.type === 'save_exit') {
-            if (context.root.$previousRoute) {
-              context.root.$router.back();
-            } else {
-              context.root.$router.push(getBlogPostListUrl());
-            }
+            navigateBack(router, getBlogPostListUrl());
           }
 
           if (event.type === 'create_create-another') {
@@ -370,23 +428,23 @@ export default defineComponent({
             );
           }
 
-          context.root.$toast({
+          toast.show({
             variant: 'success',
-            title: context.root.$t('blog:success'),
+            title: t('blog:success'),
             body: isCreation.value
-              ? context.root.$t('blog:blogPostWasSuccessfullyCreated')
-              : context.root.$t('blog:blogPostWasSuccessfullyUpdated'),
+              ? t('blog:blogPostWasSuccessfullyCreated')
+              : t('blog:blogPostWasSuccessfullyUpdated'),
           });
         })
         .catch((error) => {
           console.error(error);
           errors.value = convertRequestErrorToMap(error);
-          context.root.$toast({
+          toast.show({
             variant: 'danger',
-            title: context.root.$t('blog:error'),
+            title: t('blog:error'),
             body: isCreation.value
-              ? context.root.$t('blog:blogPostCreationWasFailed')
-              : context.root.$t('blog:blogPostUpdateWasFailed'),
+              ? t('blog:blogPostCreationWasFailed')
+              : t('blog:blogPostUpdateWasFailed'),
           });
         })
         .finally(() => {
@@ -452,7 +510,7 @@ export default defineComponent({
       return [
         {
           id: 'common',
-          label: context.root.$t('blog:common'),
+          label: t('blog:common'),
           hasErrors: hasErrors([
             'title',
             'language',
@@ -464,18 +522,18 @@ export default defineComponent({
         },
         {
           id: 'images',
-          label: context.root.$t('blog:images'),
+          label: t('blog:images'),
           hasErrors: hasErrors(['coverImage', 'image']),
         },
         {
           id: 'relations',
-          label: context.root.$t('blog:relations'),
+          label: t('blog:relations'),
           hasErrors: hasErrors(['categories', 'relatedPosts', 'tags']),
         },
         values.value.additionalFields.length > 0
           ? {
               id: 'additional',
-              label: context.root.$t('blog:additionalFields'),
+              label: t('blog:additionalFields'),
               hasErrors: hasErrors([]),
             }
           : null,
@@ -499,7 +557,7 @@ export default defineComponent({
       [
         post.value
           ? {
-              text: context.root.$t('blog:viewPost'),
+              text: t('blog:viewPost'),
               href: process.env.VUE_APP_WEBSITE_URL + post.value.url,
               target: '_blank',
             }
@@ -612,3 +670,24 @@ export default defineComponent({
   },
 });
 </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/PostForm/components/TabList/TabList.vue

@@ -16,11 +16,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 import { TabType } from './TabList.types';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'TabList',
   props: {
     tabList: {

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

@@ -9,7 +9,7 @@ import {
   Language,
   PostShort,
 } from '../../../typings/model';
-import { getBlogPostFormUrl } from '../../../constants/paths';
+import { getBlogPostFormUrl } from '../../../utils/paths';
 
 export function convertPostList(
   postList: PostShort[],
@@ -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' },