@tager/admin-banners 0.1.5 → 0.3.0

package/src/router/index.ts

@@ -0,0 +1,38 @@
+import {
+  createRouter,
+  CustomRoute,
+  CustomRouteConfig,
+} from '@tager/admin-layout';
+
+import Home from '@/views/Home.vue';
+
+import {
+  BANNERS_ZONE_LIST_ROUTE,
+  BANNERS_BANNER_LIST_ROUTE,
+  BANNERS_BANNER_FORM_ROUTE,
+} from '../constants/routes';
+
+export const HOME_ROUTE: CustomRouteConfig = {
+  path: '/',
+  component: Home,
+  name: 'Home',
+  meta: {
+    getBreadcrumbs: (route: CustomRoute) => [
+      { url: '/', text: route.name ?? '' },
+    ],
+  },
+};
+
+const router = createRouter(
+  {
+    routes: [
+      HOME_ROUTE,
+      BANNERS_ZONE_LIST_ROUTE,
+      BANNERS_BANNER_LIST_ROUTE,
+      BANNERS_BANNER_FORM_ROUTE,
+    ],
+  },
+  { useTitleSync: false }
+);
+
+export default router;

package/src/services/requests.ts

@@ -1,107 +1,52 @@
-import { request, Nullable, ResponseBody } from '@tager/admin-services';
-import { BannerArea, BannerItem } from '../typings/model';
-
-/** Banner area */
-
-export function getBannerAreaList(): Promise<ResponseBody<Array<BannerArea>>> {
-  return request.get({ path: '/market-boards' });
-}
-
-export function getBannerAreaById(
-  areaId: number | string
-): Promise<ResponseBody<BannerArea>> {
-  return request.get({ path: `/market-boards/${areaId}` });
-}
-
-export function getBannerAreaByAlias(
-  areaAlias: number | string
-): Promise<ResponseBody<BannerArea>> {
-  return request.get({ path: `/market-boards/${areaAlias}` });
-}
-
-export type BannerAreaCreatePayload = {
-  alias: string;
-  label: string;
-  scenario: string;
-};
-
-export function createBannerArea(
-  payload: BannerAreaCreatePayload
-): Promise<ResponseBody<BannerArea>> {
-  return request.post({ path: '/market-boards', body: payload });
-}
-
-export type BannerAreaUpdatePayload = BannerAreaCreatePayload;
-
-export function updateBannerArea(
-  areaId: number | string,
-  payload: BannerAreaUpdatePayload
-): Promise<ResponseBody<BannerArea>> {
-  return request.put({ path: `/market-boards/${areaId}`, body: payload });
-}
-
-export function deleteBannerArea(
-  areaId: number | string
-): Promise<{ success: boolean }> {
-  return request.delete({ path: `/market-boards/${areaId}` });
-}
-
-/** Banners */
-
-export function getBannerItemList(
-  areaId: number | string
-): Promise<ResponseBody<Array<BannerItem>>> {
-  return request.get({ path: `/market-boards/${areaId}/items` });
-}
-
-export function getBannerItemById(
-  bannerItemId: number | string
-): Promise<ResponseBody<BannerItem>> {
-  return request.get({ path: `/market-boards/items/${bannerItemId}` });
-}
-
-export type BannerItemCreatePayload = {
-  title: string;
-  text: string;
-  buttonLink: Nullable<string>;
-  buttonLabel: string;
-  buttonIsNewTab: boolean;
-  image: Nullable<number>;
-};
-
-export function createBannerItem(
-  areaId: number | string,
-  payload: BannerItemCreatePayload
-): Promise<ResponseBody<BannerItem>> {
-  return request.post({
-    path: `/market-boards/${areaId}/items`,
-    body: payload,
-  });
-}
-
-export type BannerItemUpdatePayload = BannerItemCreatePayload;
-
-export function updateBannerItem(
-  bannerItemId: number | string,
-  payload: BannerItemUpdatePayload
-): Promise<ResponseBody<BannerItem>> {
-  return request.put({
-    path: `/market-boards/items/${bannerItemId}`,
-    body: payload,
-  });
-}
-
-export function deleteBannerItem(
-  bannerItemId: number | string
-): Promise<{ success: boolean }> {
-  return request.delete({ path: `/market-boards/items/${bannerItemId}` });
-}
-
-export function moveBannerItem(
-  bannerItemId: number | string,
-  direction: 'up' | 'down'
-): Promise<{ success: boolean }> {
-  return request.post({
-    path: `/market-boards/items/${bannerItemId}/${direction}`,
-  });
-}
+import { request, ResponseBody } from '@tager/admin-services';
+
+import { Zone } from '../typings/zones';
+import { Banner, BannerPayload } from '../typings/banners';
+
+/** Zones **/
+
+export function getZones(params?: {
+  query?: string;
+  pageNumber?: number;
+  pageSize?: number;
+}): Promise<ResponseBody<Zone[]>> {
+  return request.get({ path: '/admin/adv/zones', params });
+}
+
+/** Banners **/
+
+export function getBanners(params?: {
+  query?: string;
+  pageNumber?: number;
+  pageSize?: number;
+}): Promise<ResponseBody<Banner[]>> {
+  return request.get({ path: '/admin/adv', params });
+}
+
+export function getBanner(
+  bannerId: number | string
+): Promise<ResponseBody<Banner>> {
+  return request.get({ path: `/admin/adv/${bannerId}` });
+}
+
+export function createBanner(
+  payload: BannerPayload
+): Promise<ResponseBody<Banner>> {
+  return request.post({ path: '/admin/adv', body: payload });
+}
+
+export function updateBanner(
+  bannerId: number | string,
+  payload: BannerPayload
+): Promise<ResponseBody<Banner>> {
+  return request.put({
+    path: `/admin/adv/${bannerId}`,
+    body: payload,
+  });
+}
+
+export function deleteBanner(
+  bannerId: number | string
+): Promise<{ success: boolean }> {
+  return request.delete({ path: `/admin/banners/${bannerId}` });
+}

package/src/typings/banners.ts

@@ -0,0 +1,44 @@
+import { FileType, Nullable } from '@tager/admin-services';
+import { OptionType, SingleFileInputValueType } from '@tager/admin-ui';
+
+export enum Status {
+  Waiting = 'WAITING',
+  Archived = 'ARCHIVED',
+  Active = 'ACTIVE',
+  Disabled = 'DISABLED',
+}
+
+export interface Banner {
+  id: number;
+  status: Status;
+  link: Nullable<string>;
+  image: Nullable<FileType>;
+  bannerZone: Nullable<string>;
+  openNewTab: boolean;
+  dateStart: Nullable<string>;
+  dateEnd: Nullable<string>;
+  disabled: boolean;
+  comment: Nullable<string>;
+}
+
+export interface BannerFormValues {
+  link: Nullable<string>;
+  image: Nullable<SingleFileInputValueType>;
+  bannerZone: Nullable<OptionType>;
+  openNewTab: boolean;
+  dateStart: string;
+  dateEnd: string;
+  disabled: boolean;
+  comment: string;
+}
+
+export interface BannerPayload {
+  link: Nullable<string>;
+  image: Nullable<string>;
+  bannerZone: string;
+  openNewTab: boolean;
+  dateStart: string;
+  dateEnd: string;
+  disabled: boolean;
+  comment: string;
+}

package/src/typings/common.ts

@@ -0,0 +1 @@
+export type Values<T> = T[keyof T];

package/src/typings/model.ts

@@ -1,18 +1,121 @@
-import { Nullable, FileType } from '@tager/admin-services';
-
-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;
-};
+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 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/sfc.d.ts

@@ -1,12 +1,12 @@
-/** Reference: https://stackoverflow.com/a/53999913 */
-// 1. Make sure to import 'vue' before declaring augmented types
-import Vue from 'vue';
-
-// 2. Specify a file with the types you want to augment
-//    Vue has the constructor type in types/vue.d.ts
-declare module 'vue/types/vue' {
-  // 3. Declare augmentation for Vue
-  interface Vue {
-    $style: { [key: string]: string };
-  }
-}
+/** Reference: https://stackoverflow.com/a/53999913 */
+// 1. Make sure to import 'vue' before declaring augmented types
+import Vue from 'vue';
+
+// 2. Specify a file with the types you want to augment
+//    Vue has the constructor type in types/vue.d.ts
+declare module 'vue/types/vue' {
+  // 3. Declare augmentation for Vue
+  interface Vue {
+    $style: { [key: string]: string };
+  }
+}

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

@@ -1,13 +1,13 @@
-import Vue, { VNode } from 'vue';
-
-declare global {
-  namespace JSX {
-    // tslint:disable no-empty-interface
-    interface Element extends VNode {}
-    // tslint:disable no-empty-interface
-    interface ElementClass extends Vue {}
-    interface IntrinsicElements {
-      [elem: string]: any;
-    }
-  }
-}
+import Vue, { VNode } from 'vue';
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+}

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

@@ -1,10 +1,11 @@
-declare module '*.vue' {
-  import Vue from 'vue';
-  export default Vue;
-}
-
-declare module '*.svg' {
-  import Vue, { VueConstructor } from 'vue';
-  const content: VueConstructor<Vue>;
-  export default content;
-}
+declare module '*.vue' {
+  // eslint-disable-next-line import/order
+  import Vue from 'vue';
+  export default Vue;
+}
+
+declare module '*.svg' {
+  import Vue, { VueConstructor } from 'vue';
+  const content: VueConstructor<Vue>;
+  export default content;
+}

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

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

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 ?? '',
+  };
+}