@tager/admin-blog 0.3.42 → 1.0.1

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,8 +64,8 @@ export function getPostTableColumnDefs(
       id: 2,
       name: t('blog:status'),
       field: 'status',
-      style: { width: '120px' },
-      headStyle: { width: '120px' },
+      style: { width: '140px' },
+      headStyle: { width: '140px' },
     },
     {
       id: 3,

package/src/views/Posts/PostList/PostList.vue

@@ -1,187 +1,207 @@
 <template>
-  <page
-    :title='pageTitle'
+  <Page
+    :title="pageTitle"
     :header-buttons="[
       {
-        text: $t('blog:newPost'),
+        text: $i18n.t('blog:newPost'),
         href: getBlogPostFormUrl({ postId: 'create' }),
       },
     ]"
   >
-    <template v-slot:content>
-      <data-table
-        :column-defs='columnDefs'
-        :row-data='rowData'
-        :loading='isRowDataLoading'
-        :error-message='errorMessage'
-        :search-query='searchQuery'
-        :pagination='{
+    <template #content>
+      <DataTable
+        :column-defs="columnDefs"
+        :row-data="rowData"
+        :loading="isRowDataLoading"
+        :error-message="errorMessage"
+        :search-query="searchQuery"
+        :pagination="{
           pageNumber,
           pageCount,
           pageSize,
           disabled: isRowDataLoading,
-        }'
-        data-table='blog-post'
-        @change='handleChange'
+        }"
+        data-table="blog-post"
+        @change="handleChange"
       >
-        <template v-slot:filters>
-          <advanced-search :tags='tags' @click:tag='tagRemovalHandler'>
-            <div class='filters'>
-              <form-field-multi-select
-                v-model='categoryFilter'
-                :options='categoryOptionList'
-                name='categoryFilter'
-                :searchable='true'
-                :label="$t('blog:category')"
-                class='filter'
+        <template #filters>
+          <AdvancedSearch :tags="tags" @click:tag="tagRemovalHandler">
+            <div class="filters">
+              <FormFieldMultiSelect
+                v-model:selected-options="categoryFilter"
+                :options="categoryOptionList"
+                name="categoryFilter"
+                :searchable="true"
+                :label="$i18n.t('blog:category')"
+                class="filter"
               />
 
-              <form-field-multi-select
-                v-if='isLangSpecific'
-                v-model='languageFilter'
-                :options='languageOptionList'
-                name='languageFilter'
-                :searchable='true'
-                :label="$t('blog:language')"
-                class='filter'
+              <FormFieldMultiSelect
+                v-if="isLangSpecific"
+                v-model:selected-options="languageFilter"
+                :options="languageOptionList"
+                name="languageFilter"
+                :searchable="true"
+                :label="$i18n.t('blog:language')"
+                class="filter"
+              />
+              <FormFieldMultiSelect
+                v-model:selected-options="statusFilter"
+                :options="statusOptionList"
+                name="statusFilter"
+                :searchable="true"
+                :label="$i18n.t('blog:status')"
+                class="filter"
+              />
+            </div>
+
+            <div class="filters">
+              <FormField
+                v-model:value="fromDateFilter"
+                :label="$i18n.t('blog:dateOfPublicationFrom')"
+                name="fromDateFilter"
+                type="date"
+                :max="toDateFilter"
               />
 
-              <div class='filter'>
-                <div class='date-label'>
-                  {{ $t('blog:dateOfPublication') }}
-                </div>
-
-                <div class='date-content'>
-                  <form-field
-                    v-model='fromDateFilter'
-                    :label="$t('blog:From')"
-                    name='fromDateFilter'
-                    type='date'
-                    :max='toDateFilter'
-                  />
-
-                  <form-field
-                    v-model='toDateFilter'
-                    :label="$t('blog:To')"
-                    name='toDateFilter'
-                    type='date'
-                    :min='fromDateFilter'
-                  />
-                </div>
-              </div>
-
-              <form-field-multi-select
-                v-model='statusFilter'
-                :options='statusOptionList'
-                name='statusFilter'
-                :searchable='true'
-                :label="$t('blog:status')"
-                class='filter'
+              <FormField
+                v-model:value="toDateFilter"
+                :label="$i18n.t('blog:dateOfPublicationTo')"
+                name="toDateFilter"
+                type="date"
+                :min="fromDateFilter"
               />
             </div>
-          </advanced-search>
+          </AdvancedSearch>
         </template>
 
-        <template v-slot:cell(status)='{ row }'>
-          <div class='status'>
-            <span>{{ getStatuses(t)[row.status] }}</span>
-            <span v-if='row.status === "PUBLISHED" && row.archiveAt'>
-              {{ t('blog:publishAtLabel') }}: <i>{{ formatDateTime(new Date(row.archiveAt), true) }}</i>
-             </span>
-            <span v-if='row.status === "DRAFT" && row.publishAt'>
-              {{ t('blog:publishAtLabel') }}: <i>{{ formatDateTime(new Date(row.publishAt), true) }}</i>
+        <template #cell(status)="{ row }">
+          <div class="status">
+            <span>{{ getStatuses($i18n.t)[row.status] }}</span>
+            <span v-if="row.status === 'PUBLISHED' && row.archiveAt">
+              {{ $i18n.t('blog:archiveAtLabel') }}:
+              <i>{{ formatDateTime(new Date(row.archiveAt), true) }}</i>
+            </span>
+            <span v-if="row.status === 'DRAFT' && row.publishAt">
+              {{ $i18n.t('blog:publishAtLabel') }}:
+              <i>{{ formatDateTime(new Date(row.publishAt), true) }}</i>
             </span>
           </div>
         </template>
 
-        <template v-slot:cell(actions)='{ row }'>
-          <base-button
-            variant='icon'
-            :title="$t('blog:edit')"
-            :disabled='isBusy(row.id)'
-            :href='getBlogPostFormUrl({ postId: row.id })'
+        <template #cell(actions)="{ row }">
+          <BaseButton
+            variant="icon"
+            :title="$i18n.t('blog:edit')"
+            :disabled="isBusy(row.id)"
+            :href="getBlogPostFormUrl({ postId: row.id })"
           >
-            <svg-icon name='edit' />
-          </base-button>
-
-          <base-button
-            variant='icon'
-            :title="$t('blog:clone')"
-            :disabled='isBusy(row.id)'
-            @click='handleResourceClone(row.id)'
+            <EditIcon />
+          </BaseButton>
+
+          <BaseButton
+            variant="icon"
+            :title="$i18n.t('blog:clone')"
+            :disabled="isBusy(row.id)"
+            @click="handleResourceClone(row.id)"
           >
-            <svg-icon name='contentCopy' />
-          </base-button>
-
-          <base-button
-            variant='icon'
-            :title="$t('blog:remove')"
-            :disabled='isBusy(row.id)'
-            @click='handleResourceDelete(row.id)'
+            <ContentCopyIcon />
+          </BaseButton>
+
+          <BaseButton
+            variant="icon"
+            :title="$i18n.t('blog:remove')"
+            :disabled="isBusy(row.id)"
+            @click="handleResourceDelete(row.id)"
           >
-            <svg-icon name='delete' />
-          </base-button>
+            <DeleteIcon />
+          </BaseButton>
         </template>
-      </data-table>
+      </DataTable>
     </template>
-  </page>
+  </Page>
 </template>
 
-<script lang='ts'>
-import { computed, defineComponent, watch } from '@vue/composition-api';
+<script lang="ts">
+import { computed, defineComponent, watch } from 'vue';
 import isEqual from 'lodash.isequal';
 import pick from 'lodash.pick';
+import { useRoute, useRouter } from 'vue-router';
 
 import {
   ColumnDefinition,
   OptionType,
   useDataTable,
-  useTranslation,
-  formatDateTime
+  formatDateTime,
+  AdvancedSearch,
+  FormFieldMultiSelect,
+  FormField,
+  BaseButton,
+  EditIcon,
+  ContentCopyIcon,
+  DeleteIcon,
+  DataTable,
 } from '@tager/admin-ui';
 import {
   Nullable,
+  useI18n,
   useResourceClone,
-  useResourceDelete
+  useResourceDelete,
 } from '@tager/admin-services';
+import { Page } from '@tager/admin-layout';
 
 import { useFetchModuleConfig, useFetchCategories } from '../../../hooks';
 import {
   clonePost,
   deleteBlogPost,
-  getPosts
+  getPosts,
 } from '../../../services/requests';
-import { getBlogPostFormUrl } from '../../../constants/paths';
+import { getBlogPostFormUrl } from '../../../utils/paths';
 import {
   Category,
   Language,
   PostFull,
-  PostShort
+  PostShort,
 } from '../../../typings/model';
 import { getStatusOptions } from '../PostForm/PostForm.helpers';
 
-import { convertPostList, getPostTableColumnDefs, getStatuses } from './PostList.helpers';
+import {
+  convertPostList,
+  getPostTableColumnDefs,
+  getStatuses,
+} from './PostList.helpers';
 import { useAdvancedSearch } from './hooks';
 
 export default defineComponent({
-  name: 'Posts',
-  setup(props, context) {
-    const { t } = useTranslation(context);
+  name: 'PostList',
+  components: {
+    DeleteIcon,
+    ContentCopyIcon,
+    EditIcon,
+    BaseButton,
+    FormField,
+    FormFieldMultiSelect,
+    AdvancedSearch,
+    Page,
+    DataTable,
+  },
+  setup() {
+    const { t } = useI18n();
+    const route = useRoute();
+    const router = useRouter();
 
     const categoryId = computed<string>(() => {
-      return Array.isArray(context.root.$route.query.category)
-        ? context.root.$route.query.category[0] ?? ''
-        : context.root.$route.query.category;
+      return Array.isArray(route.query.category)
+        ? (route.query.category[0] as string) ?? ''
+        : (route.query.category as string);
     });
 
     const statusOptionList = 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 ?? []
@@ -189,27 +209,27 @@ export default defineComponent({
 
     /** Fetch category list **/
 
-    const {
-      data: categoryList,
-      loading: isCategoryListLoading
-    } = useFetchCategories({ context });
+    const { data: categoryList, loading: isCategoryListLoading } =
+      useFetchCategories();
 
     const selectedCategory = computed<Nullable<Category>>(() =>
       categoryId.value
         ? categoryList.value.find(
-        ({ id }) => String(id) === String(categoryId.value)
-      ) ?? null
+            ({ id }) => String(id) === String(categoryId.value)
+          ) ?? null
         : null
     );
 
     const pageTitle = computed<string>(() => {
       return selectedCategory.value
-        ? `${context.root.$t('blog:postsByCategory')} "${
-          selectedCategory.value.name
-        }"`
-        : context.root.$t('blog:posts');
+        ? `${t('blog:postsByCategory')} "${selectedCategory.value.name}"`
+        : t('blog:posts');
     });
 
+    const isLangSpecific = computed<boolean>(
+      () => languageOptionList.value.length > 1
+    );
+
     /** Advanced search **/
 
     const {
@@ -222,18 +242,15 @@ export default defineComponent({
       filterParams,
       tags,
       tagRemovalHandler,
-      statusFilter
+      statusFilter,
     } = useAdvancedSearch({
-      context,
+      t,
+      route,
       categoryList,
       languageList,
-      statusOptionList
+      statusOptionList,
     });
 
-    const isLangSpecific = computed<boolean>(
-      () => languageOptionList.value.length > 1
-    );
-
     /** Fetch Post list **/
 
     const {
@@ -245,19 +262,18 @@ export default defineComponent({
       handleChange,
       pageNumber,
       pageCount,
-      pageSize
+      pageSize,
     } = useDataTable<PostShort>({
       fetchEntityList: (params) =>
         getPosts({
           query: params.searchQuery,
           pageNumber: params.pageNumber,
           pageSize: params.pageSize,
-          ...filterParams.value
+          ...filterParams.value,
         }),
       initialValue: [],
-      context,
       resourceName: 'Blog post list',
-      pageSize: 100
+      pageSize: 100,
     });
 
     watch(filterParams, () => {
@@ -266,12 +282,12 @@ export default defineComponent({
       }
 
       const newQuery = {
-        ...pick(context.root.$route.query, ['query', 'pageNumber']),
-        ...filterParams.value
+        ...pick(route.query, ['query', 'pageNumber']),
+        ...filterParams.value,
       };
 
-      if (!isEqual(context.root.$route.query, newQuery)) {
-        context.root.$router.replace({ query: newQuery });
+      if (!isEqual(route.query, newQuery)) {
+        router.replace({ query: newQuery });
         fetchPostList();
       }
     });
@@ -295,7 +311,6 @@ export default defineComponent({
       deleteResource: deleteBlogPost,
       resourceName: 'Post',
       onSuccess: fetchPostList,
-      context
     });
 
     const { isCloning, handleResourceClone } = useResourceClone({
@@ -304,7 +319,6 @@ export default defineComponent({
       successMessage: t('blog:cloneSuccess'),
       failureMessage: t('blog:cloneFailure'),
       onSuccessRedirectTo: (data: PostFull) => `/blog/posts/${data.id}`,
-      context
     });
 
     function isBusy(postId: number): boolean {
@@ -312,7 +326,7 @@ export default defineComponent({
     }
 
     const columnDefs = computed<ColumnDefinition<PostShort>[]>(() =>
-      getPostTableColumnDefs(moduleConfig.value, context.root.$t)
+      getPostTableColumnDefs(moduleConfig.value, t)
     );
 
     return {
@@ -349,36 +363,23 @@ export default defineComponent({
 
       // Clone
       handleResourceClone,
-      isBusy
+      isBusy,
     };
-  }
+  },
 });
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
 .filters {
-  display: flex;
-  margin: 0 -10px;
+  margin-bottom: 1rem;
+  width: 100%;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 1fr;
 
   &:not(:first-child) {
-    margin-top: 10px;
+    margin-top: 1rem;
   }
-
-  .filter {
-    padding: 10px 10px 0;
-    width: 50%;
-    margin: 0;
-  }
-}
-
-.date-label {
-  margin-bottom: 0.5rem;
-}
-
-.date-content {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  column-gap: 10px;
 }
 
 .status {
@@ -395,6 +396,5 @@ export default defineComponent({
       display: block;
     }
   }
-;
 }
 </style>

package/src/views/Posts/PostList/hooks/useAdvancedSearch.ts

@@ -1,11 +1,6 @@
-import {
-  computed,
-  ComputedRef,
-  Ref,
-  ref,
-  SetupContext,
-  watch,
-} from '@vue/composition-api';
+import { computed, ComputedRef, Ref, ref, watch } from 'vue';
+import { TFunction } from 'i18next';
+import { RouteLocationNormalizedLoaded } from 'vue-router';
 
 import {
   FilterTagType,
@@ -20,10 +15,12 @@ import { Category, Language } from '../../../../typings/model';
 import { getNameWithDepth } from '../../../../utils/common';
 
 interface Params {
-  context: SetupContext;
-  categoryList: ComputedRef<Category[]>;
+  categoryList: Ref<Category[]>;
   languageList: ComputedRef<Language[]>;
   statusOptionList: ComputedRef<OptionType[]>;
+
+  t: TFunction;
+  route: RouteLocationNormalizedLoaded;
 }
 
 interface State {
@@ -36,6 +33,7 @@ interface State {
   statusFilter: Ref<OptionType[]>;
   filterParams: ComputedRef<Record<string, string | string[]>>;
   tags: ComputedRef<FilterTagType[]>;
+
   tagRemovalHandler(event: FilterTagType): void;
 }
 
@@ -50,7 +48,8 @@ enum FilterTypes {
 export const dateFormat = (date: string) => date.split('-').reverse().join('.');
 
 export function useAdvancedSearch({
-  context,
+  t,
+  route,
   categoryList,
   languageList,
   statusOptionList,
@@ -66,9 +65,10 @@ export function useAdvancedSearch({
 
   const initialCategoryFilter = computed<OptionType[]>(() => {
     const queryValue = getFilterParamAsStringArray(
-      context.root.$route.query,
+      route.query,
       FilterTypes.CATEGORY
     );
+
     return categoryOptionList.value.filter(({ value }) =>
       queryValue.some((selected) => selected === value)
     );
@@ -88,7 +88,7 @@ export function useAdvancedSearch({
 
   const initialLanguageFilter = computed<OptionType[]>(() => {
     const queryValue = getFilterParamAsStringArray(
-      context.root.$route.query,
+      route.query,
       FilterTypes.LANGUAGE
     );
     return languageOptionList.value.filter(({ value }) =>
@@ -105,11 +105,7 @@ export function useAdvancedSearch({
   /** From date **/
 
   const initialFromDateFilter = computed<string>(
-    () =>
-      getFilterParamAsString(
-        context.root.$route.query,
-        FilterTypes.FROM_DATE
-      ) ?? ''
+    () => getFilterParamAsString(route.query, FilterTypes.FROM_DATE) ?? ''
   );
 
   const fromDateFilter = ref<string>(initialFromDateFilter.value);
@@ -121,9 +117,7 @@ export function useAdvancedSearch({
   /** To date **/
 
   const initialToDateFilter = computed<string>(
-    () =>
-      getFilterParamAsString(context.root.$route.query, FilterTypes.TO_DATE) ??
-      ''
+    () => getFilterParamAsString(route.query, FilterTypes.TO_DATE) ?? ''
   );
 
   const toDateFilter = ref<string>(initialToDateFilter.value);
@@ -148,20 +142,18 @@ export function useAdvancedSearch({
     }
 
     if (fromDateFilter.value && !toDateFilter.value) {
-      label = `${context.root.$t('blog:from')} ${dateFormat(
-        fromDateFilter.value
-      )}`;
+      label = `${t('blog:from')} ${dateFormat(fromDateFilter.value)}`;
     }
 
     if (!fromDateFilter.value && toDateFilter.value) {
-      label = `${context.root.$t('blog:to')} ${dateFormat(toDateFilter.value)}`;
+      label = `${t('blog:to')} ${dateFormat(toDateFilter.value)}`;
     }
 
     return {
       value: '',
       label,
       name: FilterTypes.FROM_DATE,
-      title: context.root.$t('blog:dateOfPublication'),
+      title: t('blog:dateOfPublication'),
     };
   });
 
@@ -169,7 +161,7 @@ export function useAdvancedSearch({
 
   const initialStatusFilter = computed<OptionType[]>(() => {
     const queryValue = getFilterParamAsStringArray(
-      context.root.$route.query,
+      route.query,
       FilterTypes.STATUS
     );
     return statusOptionList.value.filter(({ value }) =>
@@ -235,20 +227,20 @@ export function useAdvancedSearch({
         value,
         label,
         name: FilterTypes.CATEGORY,
-        title: context.root.$t('blog:category'),
+        title: t('blog:category'),
       })),
       ...languageFilter.value.map(({ value, label }) => ({
         value,
         label,
         name: FilterTypes.LANGUAGE,
-        title: context.root.$t('blog:language'),
+        title: t('blog:language'),
       })),
       date.value,
       ...statusFilter.value.map(({ value, label }) => ({
         value,
         label,
         name: FilterTypes.STATUS,
-        title: context.root.$t('blog:status'),
+        title: t('blog:status'),
       })),
     ].filter(isNotNullish)
   );

package/CHANGELOG.md

@@ -1,13 +0,0 @@
-# [0.0.2] (2020-06-06)
-
-### Features
-
-* **services:** Use VUE_APP_API_ORIGIN env variable as initial api origin value in ApiService
-
-# [0.0.3] (2020-06-06)
-
-### Bug Fixes
-
-* **services:** Use api origin from ApiService to configure url for file upload
-
-