@tager/admin-banners 0.2.1 → 0.3.0

package/src/typings/model.ts

@@ -1,18 +1,121 @@
 import { Nullable, FileType } from '@tager/admin-services';
+import {
+  FieldConfigUnion,
+  FieldShortType,
+  IncomingValueUnion,
+} from '@tager/admin-dynamic-field';
+import {
+  OptionType,
+  ShortCodeItemType,
+  SingleFileInputValueType,
+} from '@tager/admin-ui';
 
-export type BannerArea = {
-  id: number;
-  alias: string;
-  label: string;
-  scenario: string;
-};
-
-export type BannerItem = {
-  id: number;
-  title: string;
-  text: string;
-  image: Nullable<FileType>;
-  buttonLabel: string;
-  buttonLink: Nullable<string>;
-  buttonIsNewTab: boolean;
-};
+export interface SeoInfo {
+  readonly pageTitle: Nullable<string>;
+  readonly pageDescription: Nullable<string>;
+  readonly pageKeywords: Nullable<string>;
+  readonly openGraphTitle: Nullable<string>;
+  readonly openGraphDescription: Nullable<string>;
+  readonly openGraphImage: Nullable<FileType>;
+}
+
+export interface Category extends SeoInfo {
+  readonly id: number;
+  readonly name: string;
+  readonly isDefault: boolean;
+  readonly language: string;
+  readonly url: string;
+  readonly urlTemplate: string;
+  readonly urlAlias: string;
+  readonly postsCount: string;
+  readonly parent: Nullable<{ id: Nullable<number>; name: string }>;
+  readonly depth: number;
+}
+
+export interface PostShort {
+  readonly id: number;
+  readonly title: string;
+  readonly url: string;
+  readonly excerpt: string;
+  readonly status: string;
+  readonly language: string;
+  readonly categories: Category[];
+  readonly datetime: string;
+  readonly image: Nullable<FileType>;
+}
+
+export interface PostFull extends SeoInfo {
+  readonly id: number;
+  readonly language: string;
+  readonly title: string;
+  readonly url: string;
+  readonly urlTemplate: string;
+  readonly urlAlias: string;
+  readonly datetime: string|null;
+  readonly status: string;
+  readonly excerpt: string;
+  readonly image: Nullable<FileType>;
+  readonly imageMobile: Nullable<FileType>;
+  readonly categories: Category[];
+  readonly body: string;
+  readonly coverImage: Nullable<FileType>;
+  readonly relatedPosts: Pick<PostShort, 'id' | 'title'>[];
+  readonly tags: string[];
+  readonly additionalFields: FieldShortType<IncomingValueUnion>[];
+}
+
+export interface Language {
+  readonly id: string;
+  readonly name: string;
+}
+
+export interface DefaultCategory {
+  readonly id: number;
+  readonly name: string;
+  readonly language: string;
+}
+
+export interface FileScenarios {
+  readonly cover: Nullable<string>;
+  readonly image: Nullable<string>;
+  readonly imageMobile: Nullable<string>;
+  readonly content: Nullable<string>;
+  readonly openGraph: Nullable<string>;
+}
+
+export interface ModuleConfig {
+  readonly urlPostTemplate: Nullable<string>;
+  readonly urlCategoryTemplate: Nullable<string>;
+  readonly languages: Language[];
+  readonly defaultCategories: DefaultCategory[];
+  readonly fields: FieldConfigUnion[];
+  readonly shortcodes: ShortCodeItemType[];
+  readonly fileScenarios: FileScenarios;
+}
+
+export interface CategoryFormValues {
+  language: Nullable<OptionType>;
+  name: string;
+  parent: OptionType<Nullable<number>>;
+  urlAlias: string;
+  isDefault: boolean;
+
+  pageTitle: Nullable<string>;
+  pageDescription: Nullable<string>;
+  pageKeywords: Nullable<string>;
+  openGraphTitle: Nullable<string>;
+  openGraphDescription: Nullable<string>;
+  openGraphImage: Nullable<SingleFileInputValueType>;
+}
+
+export interface CategoryPayload {
+  language: Nullable<string>;
+  name: string;
+  parent: Nullable<number>;
+  urlAlias: Nullable<string>;
+  isDefault: boolean;
+
+  pageTitle: Nullable<string>;
+  pageDescription: Nullable<string>;
+  openGraphImage: Nullable<string>;
+}

package/src/typings/shims-vue.d.ts

@@ -1,4 +1,5 @@
 declare module '*.vue' {
+  // eslint-disable-next-line import/order
   import Vue from 'vue';
   export default Vue;
 }

package/src/typings/translate.d.ts

@@ -0,0 +1,10 @@
+import { TFunction } from 'i18next';
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $t: TFunction;
+  }
+  interface VueConstructor {
+    $t: TFunction;
+  }
+}

package/src/typings/zones.ts

@@ -0,0 +1,5 @@
+export interface Zone {
+  id: string;
+  name: string;
+  bannersCount: number;
+}

package/src/utils/common.ts

@@ -0,0 +1,13 @@
+export function generateNumberArray(length: number): Array<number> {
+  return Array.from({ length }, (_, index) => index);
+}
+
+export function getNameWithDepth(name: string, depth: number): string {
+  return (
+    generateNumberArray(depth)
+      .map(() => '—')
+      .join(' ') +
+    ' ' +
+    name
+  );
+}

package/src/views/App.vue

@@ -5,18 +5,18 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, SetupContext } from '@vue/composition-api';
 
-import { BANNER_MENU_ITEM } from '../constants/menu';
+import { getBannersMenuItem } from '../constants/menu';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'App',
-  data() {
+  setup(props, context: SetupContext) {
+    const menu = getBannersMenuItem({ t: context.root.$t });
+
     return {
-      sidebarMenuList: [BANNER_MENU_ITEM],
+      sidebarMenuList: [menu],
     };
   },
 });
 </script>
-
-<style scoped lang="scss"></style>

package/src/views/Banners/BannerForm/BannerForm.helpers.ts

@@ -0,0 +1,38 @@
+import { OptionType } from '@tager/admin-ui';
+import { createId, Nullable } from '@tager/admin-services';
+
+import {
+  Banner,
+  BannerFormValues,
+  BannerPayload,
+} from '../../../typings/banners';
+
+export function convertBannerToFormValues(
+  banner: Nullable<Banner>,
+  zonesOptionList: OptionType[]
+): BannerFormValues {
+  const foundZone = zonesOptionList.find(
+    ({ value }) => value === banner?.bannerZone
+  );
+
+  return {
+    link: banner?.link ?? '',
+    image: banner?.image ? { id: createId(), file: banner.image } : null,
+    bannerZone: foundZone ?? null,
+    openNewTab: banner?.openNewTab ?? false,
+    dateStart: banner?.dateStart ?? '',
+    dateEnd: banner?.dateEnd ?? '',
+    disabled: banner?.disabled ?? false,
+    comment: banner?.comment ?? '',
+  };
+}
+
+export function convertBannerFormValuesToPayload(
+  values: BannerFormValues
+): BannerPayload {
+  return {
+    ...values,
+    image: values.image?.file.id ?? null,
+    bannerZone: values.bannerZone?.value ?? '',
+  };
+}

package/src/views/Banners/BannerForm/BannerForm.vue

@@ -0,0 +1,236 @@
+<template>
+  <page
+    :title="
+      isCreation ? $t('banners:createBanner') : $t('banners:updateBanner')
+    "
+    :is-content-loading="isContentLoading"
+  >
+    <template v-slot:content>
+      <form novalidate @submit.prevent="submitForm">
+        <form-field-select
+          v-model="values.bannerZone"
+          name="bannerZone"
+          :label="$t('banners:zone')"
+          :options="zonesOptionList"
+          :error="errors.bannerZone"
+        />
+
+        <form-field-file-input
+          v-model="values.image"
+          name="image"
+          file-type="image"
+          :label="$t('banners:image')"
+          :error="errors.file"
+        />
+
+        <form-field
+          v-model="values.link"
+          name="link"
+          :label="$t('banners:link')"
+          :error="errors.name"
+        />
+
+        <form-field-checkbox
+          v-model="values.openNewTab"
+          name="openNewTab"
+          :label="$t('banners:openNewTab')"
+          :error="errors.openNewTab"
+        />
+
+        <input-label>{{ $t('banners:period') }}</input-label>
+
+        <div class="date">
+          <form-field
+            v-model="values.dateStart"
+            :label="$t('banners:from')"
+            name="dateStart"
+            type="date"
+            :max="values.dateEnd"
+          />
+
+          <form-field
+            v-model="values.dateEnd"
+            :label="$t('banners:to')"
+            name="dateEnd"
+            type="date"
+            :min="values.dateStart"
+          />
+        </div>
+
+        <form-field-checkbox
+          v-model="values.disabled"
+          name="disabled"
+          :label="$t('banners:disabled')"
+          :error="errors.disabled"
+        />
+
+        <form-field
+          v-model="values.comment"
+          name="comment"
+          type="textarea"
+          :label="$t('banners:comment')"
+          :error="errors.comment"
+        />
+      </form>
+    </template>
+
+    <template v-slot:footer>
+      <FormFooter
+        :back-href="bannerListUrl"
+        :on-submit="submitForm"
+        :is-submitting="isSubmitting"
+        :is-creation="isCreation"
+        :can-create-another="isCreation"
+      />
+    </template>
+  </page>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  ref,
+  SetupContext,
+  watch,
+} from '@vue/composition-api';
+
+import { FormFooter, OptionType, TagerFormSubmitEvent } from '@tager/admin-ui';
+import { convertRequestErrorToMap } from '@tager/admin-services';
+
+import { useFetchZones } from '../../../hooks';
+import { BannerFormValues } from '../../../typings/banners';
+import { useFetchBanner } from '../../../hooks/useFetchBanner';
+import {
+  getBannersBannerFormUrl,
+  getBannersBannerListUrl,
+} from '../../../constants/paths';
+import { createBanner, updateBanner } from '../../../services/requests';
+
+import {
+  convertBannerFormValuesToPayload,
+  convertBannerToFormValues,
+} from './BannerForm.helpers';
+
+export default defineComponent({
+  name: 'BannerForm',
+  components: { FormFooter },
+  setup(props, context: SetupContext) {
+    const bannerId = computed<string>(
+      () => context.root.$route.params.bannerId
+    );
+    const isCreation = computed<boolean>(() => bannerId.value === 'create');
+
+    /** Zones **/
+
+    const { data: zones, loading: isZonesLoading } = useFetchZones({ context });
+
+    const zonesOptionList = computed<OptionType[]>(() =>
+      zones.value.map<OptionType>((zone) => ({
+        value: zone.id,
+        label: zone.name,
+      }))
+    );
+
+    /** Banner **/
+
+    const { data: banner, loading: isBannerLoading } = useFetchBanner({
+      context,
+      bannerId,
+      isCreation,
+    });
+
+    /** Form State **/
+
+    const isSubmitting = ref<boolean>(false);
+    const values = ref<BannerFormValues>(
+      convertBannerToFormValues(banner.value, zonesOptionList.value)
+    );
+    const errors = ref<Record<string, string>>({});
+
+    watch([banner, zones], () => {
+      values.value = convertBannerToFormValues(
+        banner.value,
+        zonesOptionList.value
+      );
+    });
+
+    const submitForm = (event: TagerFormSubmitEvent) => {
+      isSubmitting.value = true;
+
+      const body = convertBannerFormValuesToPayload(values.value);
+
+      const requestPromise = isCreation.value
+        ? createBanner(body)
+        : updateBanner(bannerId.value, body);
+
+      requestPromise
+        .then(({ data }) => {
+          errors.value = {};
+
+          if (event.type === 'create') {
+            context.root.$router.push(
+              getBannersBannerFormUrl({ bannerId: String(data.id) })
+            );
+          }
+
+          if (event.type === 'create_exit' || event.type === 'save_exit') {
+            context.root.$router.push(getBannersBannerListUrl());
+          }
+
+          if (event.type === 'create_create-another') {
+            values.value = convertBannerToFormValues(
+              null,
+              zonesOptionList.value
+            );
+          }
+
+          context.root.$toast({
+            variant: 'success',
+            title: context.root.$t('banners:success'),
+            body: isCreation.value
+              ? context.root.$t('banners:bannerWasSuccessfullyCreated')
+              : context.root.$t('banners:bannerWasSuccessfullyUpdated'),
+          });
+        })
+        .catch((error) => {
+          console.error(error);
+          errors.value = convertRequestErrorToMap(error);
+          context.root.$toast({
+            variant: 'danger',
+            title: context.root.$t('banners:error'),
+            body: isCreation.value
+              ? context.root.$t('banners:bannerCreationWasFailed')
+              : context.root.$t('banners:bannerUpdateWasFailed'),
+          });
+        })
+        .finally(() => {
+          isSubmitting.value = false;
+        });
+    };
+
+    const isContentLoading = computed<boolean>(
+      () => isBannerLoading.value || isZonesLoading.value
+    );
+
+    return {
+      isCreation,
+      isContentLoading,
+      isSubmitting,
+      values,
+      errors,
+      submitForm,
+      bannerListUrl: getBannersBannerListUrl(),
+      zonesOptionList,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+.date {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 10px;
+}
+</style>

package/src/views/Banners/BannerForm/index.ts

@@ -0,0 +1 @@
+export { default } from './BannerForm.vue';

package/src/views/Banners/BannerList/BannerList.helpers.ts

@@ -0,0 +1,93 @@
+import { TFunction } from 'i18next';
+
+import { ColumnDefinition } from '@tager/admin-ui';
+
+import { Banner, Status } from '../../../typings/banners';
+
+export function getStatus(type: Status, t: TFunction) {
+  switch (type) {
+    case Status.Waiting:
+      return t('banners:statuses.waiting');
+    case Status.Archived:
+      return t('banners:statuses.archived');
+    case Status.Active:
+      return t('banners:statuses.active');
+    case Status.Disabled:
+      return t('banners:statuses.disabled');
+
+    default:
+      return '';
+  }
+}
+
+export function getColumnDefs(t: TFunction): ColumnDefinition<Banner>[] {
+  return [
+    {
+      id: 0,
+      name: '#',
+      field: 'id',
+      style: { width: '50px', textAlign: 'center' },
+      headStyle: { width: '50px', textAlign: 'center' },
+    },
+    {
+      id: 1,
+      name: t('banners:zone'),
+      field: 'bannerZone',
+      format: ({ row }) =>
+        row.bannerZone ? row.bannerZone : t('banners:bannerZoneIsDeleted'),
+    },
+    {
+      id: 2,
+      name: t('banners:status'),
+      field: 'status',
+      format: ({ row }) => getStatus(row.status, t),
+      style: { width: '120px' },
+      headStyle: { width: '120px' },
+    },
+    {
+      id: 3,
+      name: t('banners:period'),
+      field: 'dateStart',
+      format: ({ row }) =>
+        `${row.dateStart ? `${t('banners:from')} ${row.dateStart}` : ''} ${
+          row.dateEnd ? `${t('banners:to')} ${row.dateEnd}` : ''
+        }`,
+    },
+    {
+      id: 4,
+      name: t('banners:image'),
+      field: 'image',
+      type: 'image',
+    },
+    {
+      id: 5,
+      name: t('banners:link'),
+      field: 'link',
+      type: 'name',
+      format: ({ row }) => ({
+        adminLink: {
+          url: row.link ?? '',
+          text: row.link ?? '',
+        },
+        paramList: [
+          {
+            name: t('banners:newTab'),
+            value: row.openNewTab ? t('banners:yes') : t('banners:no'),
+          },
+        ],
+      }),
+    },
+    {
+      id: 6,
+      name: t('banners:comment'),
+      field: 'comment',
+    },
+    {
+      id: 7,
+      name: t('banners:actions'),
+      field: 'actions',
+      style: { whiteSpace: 'nowrap', width: '100px' },
+      headStyle: { whiteSpace: 'nowrap', width: '100px' },
+    },
+  ];
+}