@tager/admin-banners 0.1.5 → 0.3.0

package/package.json

@@ -1,67 +1,76 @@
-{
-  "name": "@tager/admin-banners",
-  "version": "0.1.5",
-  "license": "MIT",
-  "main": "dist/index.umd.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "typings",
-    "src"
-  ],
-  "scripts": {
-    "start": "vue-cli-service serve",
-    "lint": "vue-cli-service lint",
-    "build": "rollup --config",
-    "prepare": "yarn build",
-    "tager:update": "yarn upgrade --latest @tager/admin-services @tager/admin-ui @tager/admin-layout",
-    "yalc:clean": "yalc remove --all"
-  },
-  "dependencies": {
-    "path-to-regexp": "^6.1.0"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^13.0.0",
-    "@rollup/plugin-node-resolve": "^8.1.0",
-    "@tager/admin-layout": "^0.2.17",
-    "@tager/admin-services": "^0.1.6",
-    "@tager/admin-ui": "^0.4.27",
-    "@types/node": "12.x",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
-    "@vue/cli-plugin-babel": "~4.4.6",
-    "@vue/cli-plugin-eslint": "~4.4.6",
-    "@vue/cli-plugin-router": "~4.4.6",
-    "@vue/cli-plugin-typescript": "~4.4.6",
-    "@vue/cli-service": "~4.4.6",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^5.0.2",
-    "babel-eslint": "^10.1.0",
-    "core-js": "^3.6.5",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-vue": "^6.2.2",
-    "prettier": "^2.0.5",
-    "rollup": "^2.21.0",
-    "rollup-plugin-typescript2": "^0.27.1",
-    "rollup-plugin-vue": "^5.1.9",
-    "sass-loader": "^9.0.2",
-    "typescript": "~3.9.6",
-    "vue": "2.6.x",
-    "vue-router": "3.3.x",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "peerDependencies": {
-    "@tager/admin-layout": ">=0.2.17",
-    "@tager/admin-services": ">=0.1.6",
-    "@tager/admin-ui": ">=0.4.27",
-    "vue": "2.6.x"
-  },
-  "resolutions": {
-    "prettier": "2.x"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@tager/admin-banners",
+  "version": "0.3.0",
+  "license": "MIT",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/main.d.ts",
+  "files": [
+    "dist",
+    "typings",
+    "src"
+  ],
+  "scripts": {
+    "start": "vue-cli-service serve",
+    "lint": "vue-cli-service lint",
+    "build": "rollup --config",
+    "prepare": "yarn build",
+    "tager:update": "node scripts/tager-update.js",
+    "yalc:clean": "yalc remove --all"
+  },
+  "dependencies": {
+    "lodash.isequal": "^4.5.0",
+    "lodash.pick": "^4.4.0",
+    "path-to-regexp": "^6.1.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@tager/admin-dynamic-field": "^0.1.18",
+    "@tager/admin-layout": "^0.5.3",
+    "@tager/admin-services": "^0.2.26",
+    "@tager/admin-ui": "^0.8.85",
+    "@types/lodash.isequal": "^4.5.5",
+    "@types/lodash.pick": "^4.4.6",
+    "@types/node": "12.x",
+    "@typescript-eslint/eslint-plugin": "^2.26.0",
+    "@typescript-eslint/parser": "^2.26.0",
+    "@vue/cli-plugin-babel": "~4.5.6",
+    "@vue/cli-plugin-eslint": "~4.5.6",
+    "@vue/cli-plugin-router": "~4.5.6",
+    "@vue/cli-plugin-typescript": "~4.5.6",
+    "@vue/cli-service": "~4.5.6",
+    "@vue/composition-api": "^1.0.0-beta.14",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^5.1.0",
+    "babel-eslint": "^10.1.0",
+    "core-js": "^3.6.5",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-vue": "^6.2.2",
+    "prettier": "^2.1.2",
+    "rollup": "^2.27.1",
+    "rollup-plugin-typescript2": "^0.27.2",
+    "rollup-plugin-vue": "^5.1.9",
+    "sass-loader": "^10.0.2",
+    "typescript": "~3.9.10",
+    "vue": "2.6.x",
+    "vue-router": "^3.5.1",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "peerDependencies": {
+    "@tager/admin-dynamic-field": ">=0.1.3",
+    "@tager/admin-layout": ">=0.4.2",
+    "@tager/admin-services": ">=0.2.12",
+    "@tager/admin-ui": ">=0.7.5",
+    "@vue/composition-api": ">=1.0.0-beta.14",
+    "vue": "2.6.x"
+  },
+  "resolutions": {
+    "prettier": "2.x"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/config/config.json

@@ -1,20 +1,20 @@
-{
-  "APP_NAME": "OZiTAG_ADMIN_BLOG",
-  "TITLE_TEMPLATE": "OZiTAG Admin - Blog",
-  "LANGUAGE": "EN",
-  "BRAND": {
-    "small": {
-      "logo": "logo-small.svg"
-    },
-    "large": {
-      "logo": "logo.svg",
-      "label": "OZiTAG",
-      "label-color": "#DD6900"
-    }
-  },
-  "SPLASH_SCREEN": {
-    "enabled": false,
-    "logo": "logo-white.svg",
-    "background": "#1e1e1e"
-  }
+{
+  "APP_NAME": "OZiTAG_ADMIN_BLOG",
+  "TITLE_TEMPLATE": "OZiTAG Admin - Blog",
+  "LANGUAGE": "RU",
+  "BRAND": {
+    "small": {
+      "logo": "logo-small.svg"
+    },
+    "large": {
+      "logo": "logo.svg",
+      "label": "OZiTAG",
+      "label-color": "#DD6900"
+    }
+  },
+  "SPLASH_SCREEN": {
+    "enabled": false,
+    "logo": "logo-white.svg",
+    "background": "#1e1e1e"
+  }
 }

package/src/constants/menu.ts

@@ -1,12 +1,26 @@
-import { MenuItemType } from '@tager/admin-layout';
-
-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 { MenuItemType } from '@tager/admin-layout';
+import { TranslateFunction } from '@tager/admin-services';
+
+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',
-} as const;
-
-export function getBannerAreaListUrl(): string {
-  return BANNER_ROUTE_PATHS.AREA_LIST;
-}
-
-export function getBannerAreaFormUrl(params: {
-  areaId: string | number;
-}): string {
-  return compile(BANNER_ROUTE_PATHS.AREA_FORM)({
-    areaId: params.areaId,
-  });
-}
-
-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,
-  });
-}
+import { compile } from 'path-to-regexp';
+
+export const BANNERS_ROUTE_PATHS = {
+  ZONE_LIST: '/banners/zones',
+  BANNER_LIST: '/banners',
+  BANNER_FORM: '/banners/:bannerId',
+} as const;
+
+export function getBannersZoneListUrl() {
+  return BANNERS_ROUTE_PATHS.ZONE_LIST;
+}
+
+export function getBannersBannerListUrl() {
+  return BANNERS_ROUTE_PATHS.BANNER_LIST;
+}
+
+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 BannerAreaList from '../views/BannerAreaList.vue';
-import BannerAreaForm from '../views/BannerAreaForm.vue';
-import BannerItemList from '../views/BannerItemList.vue';
-import BannerItemForm from '../views/BannerItemForm.vue';
-
-import { BANNER_ROUTE_PATHS, getBannerItemListUrl } 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',
-  meta: {
-    getBreadcrumbs: (route: CustomRoute) => [
-      HOME_BREADCRUMB,
-      {
-        path: BANNER_ROUTE_PATHS.AREA_LIST,
-        label: BANNER_AREA_LIST_ROUTE.name,
-      },
-      { path: route.path, label: route.name },
-    ],
-  },
-};
-
-export const BANNER_ITEM_LIST_ROUTE: CustomRouteConfig = {
-  path: BANNER_ROUTE_PATHS.ITEM_LIST,
-  component: BannerItemList,
-  name: 'Banner Item List',
-  meta: {
-    getBreadcrumbs: (route) => [
-      HOME_BREADCRUMB,
-      { path: route.path, label: route.name },
-    ],
-  },
-};
-
-export const BANNER_ITEM_FORM_ROUTE: CustomRouteConfig = {
-  path: BANNER_ROUTE_PATHS.ITEM_FORM,
-  component: BannerItemForm,
-  name: 'Banner Item Form',
-  meta: {
-    getBreadcrumbs: (route) => [
-      HOME_BREADCRUMB,
-      {
-        path: getBannerItemListUrl({ areaAlias: route.params.areaAlias }),
-        label: BANNER_ITEM_LIST_ROUTE.name,
-      },
-      { path: route.path, label: route.name },
-    ],
-  },
-};
+import { CustomRouteConfig } from '@tager/admin-layout';
+
+import ZoneList from '../views/Zones/ZoneList';
+import BannerList from '../views/Banners/BannerList';
+import BannerForm from '../views/Banners/BannerForm';
+
+import { BANNERS_ROUTE_PATHS } from './paths';
+
+export const BANNERS_ZONE_LIST_ROUTE: CustomRouteConfig = {
+  path: BANNERS_ROUTE_PATHS.ZONE_LIST,
+  component: ZoneList,
+  name: 'Zones',
+  meta: {
+    getBreadcrumbs: (route, t) => [
+      { url: '/', text: t('banners:home') },
+      { url: BANNERS_ROUTE_PATHS.ZONE_LIST, text: t('banners:zones') },
+    ],
+  },
+};
+
+export const BANNERS_BANNER_LIST_ROUTE: CustomRouteConfig = {
+  path: BANNERS_ROUTE_PATHS.BANNER_LIST,
+  component: BannerList,
+  name: 'Banners',
+  meta: {
+    getBreadcrumbs: (route, t) => [
+      { url: '/', text: t('banners:home') },
+      { url: BANNERS_ROUTE_PATHS.BANNER_LIST, text: t('banners:banners') },
+    ],
+  },
+};
+
+export const BANNERS_BANNER_FORM_ROUTE: CustomRouteConfig = {
+  path: BANNERS_ROUTE_PATHS.BANNER_FORM,
+  component: BannerForm,
+  name: 'Banner Form',
+  meta: {
+    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';