@tager/admin-banners 0.2.0 → 0.3.2

package/src/constants/menu.ts

@@ -1,12 +1,26 @@
 import { MenuItemType } from '@tager/admin-layout';
+import { TranslateFunction } from '@tager/admin-services';
 
-export const BANNER_MENU_ITEM: MenuItemType = {
-  id: 'banner',
-  name: 'Banners',
-  path: '',
-  icon: 'viewList',
-  children: [
-    { name: 'Banner areas', path: '/banners' },
-    { name: 'Create banner area', path: '/banners/create' },
-  ],
-};
+import {
+  getBannersZoneListUrl,
+  getBannersBannerListUrl,
+  getBannersBannerFormUrl,
+} from './paths';
+
+export function getBannersMenuItem(params: {
+  t: TranslateFunction;
+}): MenuItemType {
+  return {
+    id: 'banners',
+    text: params.t('banners:banners'),
+    icon: 'viewList',
+    children: [
+      { text: params.t('banners:zones'), url: getBannersZoneListUrl() },
+      { text: params.t('banners:banners'), url: getBannersBannerListUrl() },
+      {
+        text: params.t('banners:createBanner'),
+        url: getBannersBannerFormUrl({ bannerId: 'create' }),
+      },
+    ],
+  };
+}

package/src/constants/paths.ts

@@ -1,36 +1,19 @@
 import { compile } from 'path-to-regexp';
 
-export const BANNER_ROUTE_PATHS = {
-  AREA_LIST: '/banners',
-  AREA_FORM: '/banners/:areaId',
-  ITEM_LIST: '/banners/:areaAlias/items',
-  ITEM_FORM: '/banners/:areaAlias/items/:itemId',
+export const BANNERS_ROUTE_PATHS = {
+  ZONE_LIST: '/banners/zones',
+  BANNER_LIST: '/banners',
+  BANNER_FORM: '/banners/:bannerId',
 } as const;
 
-export function getBannerAreaListUrl(): string {
-  return BANNER_ROUTE_PATHS.AREA_LIST;
+export function getBannersZoneListUrl() {
+  return BANNERS_ROUTE_PATHS.ZONE_LIST;
 }
 
-export function getBannerAreaFormUrl(params: {
-  areaId: string | number;
-}): string {
-  return compile(BANNER_ROUTE_PATHS.AREA_FORM)({
-    areaId: params.areaId,
-  });
+export function getBannersBannerListUrl() {
+  return BANNERS_ROUTE_PATHS.BANNER_LIST;
 }
 
-export function getBannerItemListUrl(params: { areaAlias: string }): string {
-  return compile(BANNER_ROUTE_PATHS.ITEM_LIST)({
-    areaAlias: params.areaAlias,
-  });
-}
-
-export function getBannerItemFormUrl(params: {
-  areaAlias: string;
-  itemId: string | number;
-}): string {
-  return compile(BANNER_ROUTE_PATHS.ITEM_FORM)({
-    areaAlias: params.areaAlias,
-    itemId: params.itemId,
-  });
+export function getBannersBannerFormUrl(params: { bannerId: number | string }) {
+  return compile(BANNERS_ROUTE_PATHS.BANNER_FORM)(params);
 }

package/src/constants/routes.ts

@@ -1,66 +1,44 @@
-import { CustomRoute, CustomRouteConfig } from '@tager/admin-layout';
+import { CustomRouteConfig } from '@tager/admin-layout';
 
-import BannerAreaList from '../views/BannerAreaList.vue';
-import BannerAreaForm from '../views/BannerAreaForm.vue';
-import BannerItemList from '../views/BannerItemList.vue';
-import BannerItemForm from '../views/BannerItemForm.vue';
+import ZoneList from '../views/Zones/ZoneList';
+import BannerList from '../views/Banners/BannerList';
+import BannerForm from '../views/Banners/BannerForm';
 
-import { BANNER_ROUTE_PATHS, getBannerItemListUrl } from './paths';
+import { BANNERS_ROUTE_PATHS } from './paths';
 
-const HOME_BREADCRUMB = { path: '/', label: 'Home' };
-
-export const BANNER_AREA_LIST_ROUTE: CustomRouteConfig = {
-  path: BANNER_ROUTE_PATHS.AREA_LIST,
-  component: BannerAreaList,
-  name: 'Banner Area List',
-  meta: {
-    getBreadcrumbs: (route) => [
-      HOME_BREADCRUMB,
-      { path: route.path, label: route.name },
-    ],
-  },
-};
-
-export const BANNER_AREA_FORM_ROUTE: CustomRouteConfig = {
-  path: BANNER_ROUTE_PATHS.AREA_FORM,
-  component: BannerAreaForm,
-  name: 'Banner Area Form',
+export const BANNERS_ZONE_LIST_ROUTE: CustomRouteConfig = {
+  path: BANNERS_ROUTE_PATHS.ZONE_LIST,
+  component: ZoneList,
+  name: 'Zones',
   meta: {
-    getBreadcrumbs: (route: CustomRoute) => [
-      HOME_BREADCRUMB,
-      {
-        path: BANNER_ROUTE_PATHS.AREA_LIST,
-        label: BANNER_AREA_LIST_ROUTE.name,
-      },
-      { path: route.path, label: route.name },
+    getBreadcrumbs: (route, t) => [
+      { url: '/', text: t('banners:home') },
+      { url: BANNERS_ROUTE_PATHS.ZONE_LIST, text: t('banners:zones') },
     ],
   },
 };
 
-export const BANNER_ITEM_LIST_ROUTE: CustomRouteConfig = {
-  path: BANNER_ROUTE_PATHS.ITEM_LIST,
-  component: BannerItemList,
-  name: 'Banner Item List',
+export const BANNERS_BANNER_LIST_ROUTE: CustomRouteConfig = {
+  path: BANNERS_ROUTE_PATHS.BANNER_LIST,
+  component: BannerList,
+  name: 'Banners',
   meta: {
-    getBreadcrumbs: (route) => [
-      HOME_BREADCRUMB,
-      { path: route.path, label: route.name },
+    getBreadcrumbs: (route, t) => [
+      { url: '/', text: t('banners:home') },
+      { url: BANNERS_ROUTE_PATHS.BANNER_LIST, text: t('banners:banners') },
     ],
   },
 };
 
-export const BANNER_ITEM_FORM_ROUTE: CustomRouteConfig = {
-  path: BANNER_ROUTE_PATHS.ITEM_FORM,
-  component: BannerItemForm,
-  name: 'Banner Item Form',
+export const BANNERS_BANNER_FORM_ROUTE: CustomRouteConfig = {
+  path: BANNERS_ROUTE_PATHS.BANNER_FORM,
+  component: BannerForm,
+  name: 'Banner Form',
   meta: {
-    getBreadcrumbs: (route) => [
-      HOME_BREADCRUMB,
-      {
-        path: getBannerItemListUrl({ areaAlias: route.params.areaAlias }),
-        label: BANNER_ITEM_LIST_ROUTE.name,
-      },
-      { path: route.path, label: route.name },
+    getBreadcrumbs: (route, t) => [
+      { url: '/', text: t('banners:home') },
+      { url: BANNERS_ROUTE_PATHS.BANNER_LIST, text: t('banners:banners') },
+      { url: route.path, text: t('banners:bannerForm') },
     ],
   },
 };

package/src/dev.ts

@@ -1,46 +1,34 @@
-import Vue from 'vue';
+import Vue, { CreateElement } from 'vue';
+import VueCompositionApi, { createApp } from '@vue/composition-api';
+
 import { configStore, i18n } from '@tager/admin-services';
 import { AdminUiPlugin } from '@tager/admin-ui';
-import {
-  AdminLayoutPlugin,
-  createRouter,
-  CustomRoute,
-  CustomRouteConfig,
-} from '@tager/admin-layout';
+import { AdminLayoutPlugin } from '@tager/admin-layout';
 
 import '@tager/admin-ui/dist/admin-ui.css';
 
-import {
-  BANNER_AREA_FORM_ROUTE,
-  BANNER_AREA_LIST_ROUTE,
-  BANNER_ITEM_FORM_ROUTE,
-  BANNER_ITEM_LIST_ROUTE,
-} from './constants/routes';
+import router from './router';
 import config from './config/config.json';
 import App from './views/App.vue';
+import EN from './locales/en';
+import RU from './locales/ru';
 
 configStore.setConfig(config);
 
-Vue.use(AdminUiPlugin);
-Vue.use(AdminLayoutPlugin);
-
-const router = createRouter(
-  {
-    routes: [
-      BANNER_AREA_LIST_ROUTE,
-      BANNER_AREA_FORM_ROUTE,
-      BANNER_ITEM_LIST_ROUTE,
-      BANNER_ITEM_FORM_ROUTE,
-    ],
-  },
-  { useTitleSync: false }
-);
-
-i18n.init().then(() => {
-  Vue.use(i18n.getPlugin());
-
-  new Vue({
+i18n.addTranslations('en', 'banners', EN);
+i18n.addTranslations('ru', 'banners', RU);
+
+i18n.init({ debug: false }).then(() => {
+  Vue.use(VueCompositionApi);
+
+  const app = createApp({
     router,
-    render: (h) => h(App),
-  }).$mount('#app');
+    render: (h: CreateElement) => h(App),
+  });
+
+  app.use(i18n.getPlugin());
+  app.use(AdminUiPlugin);
+  app.use(AdminLayoutPlugin);
+
+  app.mount('#app');
 });

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useFetchZones } from './useFetchZones';
+export { useFetchBanners } from './useFetchBanners';

package/src/hooks/useFetchBanner.ts

@@ -0,0 +1,41 @@
+import { onMounted, Ref, SetupContext, watch } from '@vue/composition-api';
+
+import { Nullable, ResourceRef, useResource } from '@tager/admin-services';
+
+import { getBanner } from '../services/requests';
+import { Banner } from '../typings/banners';
+
+export function useFetchBanner({
+  context,
+  bannerId,
+  isCreation,
+}: {
+  context: SetupContext;
+  bannerId: Ref<string>;
+  isCreation: Ref<boolean>;
+}): ResourceRef<Nullable<Banner>> {
+  const [fetchBanner, resource] = useResource<Nullable<Banner>>({
+    fetchResource: () => getBanner(bannerId.value),
+    initialValue: null,
+    context,
+    resourceName: 'Banner',
+  });
+
+  onMounted(() => {
+    if (isCreation.value) {
+      return;
+    }
+
+    fetchBanner();
+  });
+
+  watch(bannerId, () => {
+    if (isCreation.value) {
+      return;
+    }
+
+    fetchBanner();
+  });
+
+  return resource;
+}

package/src/hooks/useFetchBanners.ts

@@ -0,0 +1,23 @@
+import { onMounted, SetupContext } from '@vue/composition-api';
+
+import { ResourceRef, useResource } from '@tager/admin-services';
+
+import { getBanners } from '../services/requests';
+import { Banner } from '../typings/banners';
+
+export function useFetchBanners(params: {
+  context: SetupContext;
+}): ResourceRef<Banner[]> {
+  const [fetchBanners, resource] = useResource<Banner[]>({
+    fetchResource: getBanners,
+    initialValue: [],
+    context: params.context,
+    resourceName: 'Banners',
+  });
+
+  onMounted(() => {
+    fetchBanners();
+  });
+
+  return resource;
+}

package/src/hooks/useFetchZones.ts

@@ -0,0 +1,23 @@
+import { onMounted, SetupContext } from '@vue/composition-api';
+
+import { ResourceRef, useResource } from '@tager/admin-services';
+
+import { getZones } from '../services/requests';
+import { Zone } from '../typings/zones';
+
+export function useFetchZones(params: {
+  context: SetupContext;
+}): ResourceRef<Zone[]> {
+  const [fetchZones, resource] = useResource<Zone[]>({
+    fetchResource: getZones,
+    initialValue: [],
+    context: params.context,
+    resourceName: 'Banner zones',
+  });
+
+  onMounted(() => {
+    fetchZones();
+  });
+
+  return resource;
+}

package/src/locales/en.ts

@@ -0,0 +1,43 @@
+const EN = {
+  home: 'Home',
+  zone: 'Banner zone',
+  zones: 'Banner zones',
+  banners: 'Banners',
+  bannerForm: 'Banner Form',
+  createBanner: 'Create Banner',
+  updateBanner: 'Update Banner',
+  link: 'Link',
+  image: 'Image',
+  openNewTab: 'Open new tab',
+  period: 'Period',
+  from: 'From',
+  to: 'To',
+  disabled: 'Disabled',
+  comment: 'Comment',
+  status: 'Status',
+  bannerZoneIsDeleted: 'Banner zone is deleted',
+  newTab: 'New Tab',
+  yes: 'Yes',
+  no: 'No',
+  edit: 'Edit',
+  remove: 'Remove',
+  actions: 'actions',
+  date: 'Date',
+
+  success: 'Success',
+  error: 'Error',
+
+  statuses: {
+    waiting: 'Waiting',
+    archived: 'Archived',
+    active: 'Active',
+    disabled: 'Disabled',
+  },
+
+  bannerWasSuccessfullyCreated: 'Banner was successfully created',
+  bannerWasSuccessfullyUpdated: 'Banner was successfully updated',
+  bannerCreationWasFailed: 'Banner creation was failed',
+  bannerUpdateWasFailed: 'Banner update was failed',
+};
+
+export default EN;

package/src/locales/ru.ts

@@ -0,0 +1,45 @@
+import EN from './en';
+
+const RU: typeof EN = {
+  home: 'Главная',
+  zone: 'Баннерная зона',
+  zones: 'Баннерные зоны',
+  banners: 'Баннеры',
+  bannerForm: 'Форма баннера',
+  createBanner: 'Добавить баннер',
+  updateBanner: 'Редактировать баннер',
+  link: 'Ссылка',
+  image: 'Картинка',
+  openNewTab: 'Открывать в новой вкладке',
+  period: 'Срок действия',
+  from: 'От',
+  to: 'До',
+  disabled: 'Выключен',
+  comment: 'Комментарий',
+  status: 'Статус',
+  bannerZoneIsDeleted: 'Баннерная зона удалена',
+  newTab: 'Новая вкладка',
+  yes: 'Да',
+  no: 'Нет',
+  edit: 'Редактировать',
+  remove: 'Удалить',
+  actions: 'Действия',
+  date: 'Дата',
+
+  success: 'Успех',
+  error: 'Ошибка',
+
+  statuses: {
+    waiting: 'В ожидании',
+    archived: 'Архивный',
+    active: 'Активный',
+    disabled: 'Отключен',
+  },
+
+  bannerWasSuccessfullyCreated: 'Баннер успешно создан',
+  bannerWasSuccessfullyUpdated: 'Баннер успешно обновлен',
+  bannerCreationWasFailed: 'Не удалось создать баннер',
+  bannerUpdateWasFailed: 'Не удалось обновить баннер',
+};
+
+export default RU;

package/src/main.ts

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

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

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];