@tager/admin-blog 0.3.42 → 1.0.1

package/src/hooks/useFetchModuleConfig.ts

@@ -1,19 +1,14 @@
-import { onMounted, SetupContext } from '@vue/composition-api';
+import { onMounted } from 'vue';
 
 import { Nullable, ResourceRef, useResource } from '@tager/admin-services';
 
 import { ModuleConfig } from '../typings/model';
 import { getModuleConfig } from '../services/requests';
 
-export function useFetchModuleConfig({
-  context,
-}: {
-  context: SetupContext;
-}): ResourceRef<Nullable<ModuleConfig>> {
+export function useFetchModuleConfig(): ResourceRef<Nullable<ModuleConfig>> {
   const [fetchModuleConfig, resource] = useResource<Nullable<ModuleConfig>>({
     fetchResource: getModuleConfig,
     initialValue: null,
-    context: context,
     resourceName: 'Module configuration',
   });
 

package/src/hooks/useFetchPosts.ts

@@ -1,17 +1,14 @@
-import { onMounted, SetupContext } from '@vue/composition-api';
+import { onMounted } from 'vue';
 
 import { ResourceRef, useResource } from '@tager/admin-services';
 
 import { PostShort } from '../typings/model';
 import { getPosts } from '../services/requests';
 
-export function useFetchPosts(params: {
-  context: SetupContext;
-}): ResourceRef<PostShort[]> {
+export function useFetchPosts(): ResourceRef<PostShort[]> {
   const [fetchPosts, resource] = useResource<PostShort[]>({
     fetchResource: () => getPosts({ pageNumber: 1, pageSize: 99999 }),
     initialValue: [],
-    context: params.context,
     resourceName: 'Blog posts',
   });
 

package/src/locales/apply.ts

@@ -0,0 +1,9 @@
+import { i18n } from '@tager/admin-services';
+
+import { EN } from './en';
+import { RU } from './ru';
+
+export function applyTranslations() {
+  i18n.addTranslations('en', 'blog', EN);
+  i18n.addTranslations('ru', 'blog', RU);
+}

package/src/locales/en.ts

@@ -1,4 +1,4 @@
-const EN = {
+export const EN = {
   yes: 'Yes',
   no: 'no',
   blog: 'Blog',
@@ -23,6 +23,8 @@ const EN = {
   languages: 'Languages',
   date: 'Date',
   dateOfPublication: 'Date of publication',
+  dateOfPublicationFrom: 'Date of publication - From',
+  dateOfPublicationTo: 'Date of publication - To',
   from: 'from',
   to: 'to',
   From: 'From',
@@ -88,5 +90,3 @@ const EN = {
   archiveAtLabel: 'Archive at',
   publishAtLabel: 'Publish at',
 };
-
-export default EN;

package/src/locales/ru.ts

@@ -1,6 +1,6 @@
-import EN from './en';
+import { EN } from './en';
 
-const RU: typeof EN = {
+export const RU: typeof EN = {
   yes: 'Да',
   no: 'Нет',
   blog: 'Блог',
@@ -25,6 +25,8 @@ const RU: typeof EN = {
   languages: 'Языки',
   date: 'Дата',
   dateOfPublication: 'Дата публикации',
+  dateOfPublicationFrom: 'Дата публикации - От',
+  dateOfPublicationTo: 'Дата публикации - До',
   from: 'от',
   to: 'до',
   From: 'От',

package/src/main.ts

@@ -1,12 +1,7 @@
-import { i18n } from '@tager/admin-services';
+import { applyTranslations } from './locales/apply';
 
-import EN from './locales/en';
-import RU from './locales/ru';
-
-i18n.addTranslations('en', 'blog', EN);
-i18n.addTranslations('ru', 'blog', RU);
+applyTranslations();
 
 export * from './constants/routes';
-export * from './constants/menu';
-export * from './constants/paths';
+export * from './utils/paths';
 export * from './services/requests';

package/src/utils/paths.ts

@@ -0,0 +1,23 @@
+import { compile } from 'path-to-regexp';
+
+import { BLOG_ROUTE_PATHS } from '../constants/paths';
+
+export function getBlogPostListUrl() {
+  return BLOG_ROUTE_PATHS.POST_LIST;
+}
+
+export function getBlogPostFormUrl(params: { postId: number | string }) {
+  return compile(BLOG_ROUTE_PATHS.POST_FORM)({ postId: params.postId });
+}
+
+export function getBlogCategoryListUrl() {
+  return BLOG_ROUTE_PATHS.CATEGORY_LIST;
+}
+
+export function getBlogCategoryFormUrl(params: {
+  categoryId: number | string;
+}) {
+  return compile(BLOG_ROUTE_PATHS.CATEGORY_FORM)({
+    categoryId: params.categoryId,
+  });
+}

package/src/views/Categories/CategoryForm/CategoryForm.vue

@@ -1,44 +1,46 @@
 <template>
-  <page
+  <Page
     :title="
-      isCreation ? $t('blog:createBlogCategory') : $t('blog:updateBlogCategory')
+      isCreation
+        ? $i18n.t('blog:createBlogCategory')
+        : $i18n.t('blog:updateBlogCategory')
     "
     :is-content-loading="isContentLoading"
   >
-    <template v-slot:content>
+    <template #content>
       <form novalidate @submit.prevent="submitForm">
         <template v-if="isCreation">
-          <form-field-select
+          <FormFieldSelect
             v-if="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.name"
+          <FormField
+            v-model:value="values.name"
             name="name"
-            :label="$t('blog:name')"
+            :label="$i18n.t('blog:name')"
             :error="errors.name"
             @input="handleNameChange"
           />
 
-          <form-field-select
+          <FormFieldSelect
             v-if="!isLangSpecific || values.language"
-            v-model="values.parent"
+            v-model:value="values.parent"
             name="parentCategory"
-            :label="$t('blog:parentCategory')"
+            :label="$i18n.t('blog:parentCategory')"
             :options="parentCategoryOptionList"
             :error="errors.parent"
           />
 
-          <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="pagePath"
             :error="errors.urlAlias"
             @change="handleAliasChange"
@@ -46,57 +48,53 @@
         </template>
 
         <template v-else>
-          <tab-list
-            :tab-list="tabList"
-            :selected-tab-id="selectedTabId"
-            @tab:update="selectedTabId = $event.tabId"
-          />
+          <TabList v-model:tab-id="selectedTabId" :tab-list="tabList" />
 
           <template v-if="selectedTabId === 'common'">
-            <form-field-select
+            <FormFieldSelect
               v-if="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-checkbox
-              v-model="values.isDefault"
+            <FormFieldCheckbox
+              v-model:checked="values.isDefault"
               name="isDefault"
-              :label="$t('blog:defaultCategory')"
+              :label="$i18n.t('blog:defaultCategory')"
               :error="errors.isDefault"
             />
 
-            <form-field
-              v-model="values.name"
+            <FormField
+              v-model:value="values.name"
               name="name"
-              :label="$t('blog:name')"
+              :label="$i18n.t('blog:name')"
               :error="errors.name"
             />
 
-            <form-field-select
+            <FormFieldSelect
               v-if="!isLangSpecific || values.language"
-              v-model="values.parent"
+              v-model:value="values.parent"
               name="parentCategory"
-              :label="$t('blog:parentCategory')"
+              :label="$i18n.t('blog:parentCategory')"
               :options="parentCategoryOptionList"
               :error="errors.parent"
             />
 
-            <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="pagePath"
               :error="errors.urlAlias"
             />
           </template>
 
           <template v-if="selectedTabId === 'seo'">
-            <seo-field-group
+            <SeoFieldGroup
               :title="values.pageTitle"
               :title-error-message="errors.pageTitle"
               :description="values.pageDescription"
@@ -114,26 +112,30 @@
       </form>
     </template>
 
-    <template v-slot:footer>
+    <template #footer>
       <FormFooter
         :back-href="categoryListUrl"
-        :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, ref, watch } from '@vue/composition-api';
+import { computed, defineComponent, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
 import {
   convertRequestErrorToMap,
   getWebsiteOrigin,
+  navigateBack,
   Nullable,
   urlTranslit,
+  useI18n,
+  useToast,
 } from '@tager/admin-services';
 import {
   OptionType,
@@ -141,8 +143,14 @@ import {
   TagerFormSubmitEvent,
   SeoChangeEvent,
   TabType,
-  useTranslation,
+  FormFieldSelect,
+  FormField,
+  FormFieldUrlAliasInput,
+  FormFieldCheckbox,
+  SeoFieldGroup,
+  TabList,
 } from '@tager/admin-ui';
+import { Page } from '@tager/admin-layout';
 
 import {
   useFetchCategories,
@@ -152,7 +160,7 @@ import {
 import {
   getBlogCategoryFormUrl,
   getBlogCategoryListUrl,
-} from '../../../constants/paths';
+} from '../../../utils/paths';
 import { CategoryFormValues, Language } from '../../../typings/model';
 import { createCategory, updateCategory } from '../../../services/requests';
 
@@ -164,20 +172,31 @@ import {
 
 export default defineComponent({
   name: 'CategoryForm',
-  components: { FormFooter },
-  setup(props, context) {
-    const { t } = useTranslation(context);
+  components: {
+    Page,
+    SeoFieldGroup,
+    FormFieldCheckbox,
+    TabList,
+    FormFieldUrlAliasInput,
+    FormField,
+    FormFieldSelect,
+    FormFooter,
+  },
+  setup() {
+    const { t } = useI18n();
+    const router = useRouter();
+    const route = useRoute();
+    const toast = useToast();
+
     const categoryId = computed<string>(
-      () => context.root.$route.params.categoryId
+      () => route.params.categoryId as string
     );
     const isCreation = computed<boolean>(() => categoryId.value === 'create');
 
     /** Fetch module config */
 
-    const {
-      data: moduleConfig,
-      loading: isModuleConfigLoading,
-    } = useFetchModuleConfig({ context });
+    const { data: moduleConfig, loading: isModuleConfigLoading } =
+      useFetchModuleConfig();
 
     const languageList = computed<Language[]>(
       () => moduleConfig.value?.languages ?? []
@@ -197,15 +216,12 @@ export default defineComponent({
 
     /** Fetch Categories */
 
-    const {
-      data: categories,
-      loading: isCategoriesLoading,
-    } = useFetchCategories({ context });
+    const { data: categories, loading: isCategoriesLoading } =
+      useFetchCategories();
 
     /** Fetch Category */
 
     const { data: category, loading: isCategoryLoading } = useFetchCategory({
-      context,
       categoryId,
       isCreation,
     });
@@ -239,13 +255,13 @@ export default defineComponent({
           errors.value = {};
 
           if (event.type === 'create') {
-            context.root.$router.push(
+            router.push(
               getBlogCategoryFormUrl({ categoryId: String(data.id) })
             );
           }
 
           if (event.type === 'create_exit' || event.type === 'save_exit') {
-            context.root.$router.push(getBlogCategoryListUrl());
+            navigateBack(router, getBlogCategoryListUrl());
           }
 
           if (event.type === 'create_create-another') {
@@ -256,23 +272,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:blogCategoryWasSuccessfullyCreated')
-              : context.root.$t('blog:blogCategoryWasSuccessfullyUpdated'),
+              ? t('blog:blogCategoryWasSuccessfullyCreated')
+              : t('blog:blogCategoryWasSuccessfullyUpdated'),
           });
         })
         .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:blogCategoryCreationWasFailed')
-              : context.root.$t('blog:blogCategoryUpdateWasFailed'),
+              ? t('blog:blogCategoryCreationWasFailed')
+              : t('blog:blogCategoryUpdateWasFailed'),
           });
         })
         .finally(() => {

package/src/views/Categories/CategoryList/CategoryList.helpers.ts

@@ -7,7 +7,7 @@ import { Category, Language, ModuleConfig } from '../../../typings/model';
 import {
   getBlogCategoryFormUrl,
   getBlogPostListUrl,
-} from '../../../constants/paths';
+} from '../../../utils/paths';
 import { getNameWithDepth } from '../../../utils/common';
 
 export function convertCategoryList(