@tager/admin-banners 0.1.5 → 0.3.0

package/src/views/BannerAreaList.vue

@@ -1,176 +0,0 @@
-<template>
-  <page
-    title="Banner Areas"
-    :header-buttons="[
-      { text: 'New banner area', href: getBannerAreaUrl('create') },
-    ]"
-  >
-    <template v-slot:content>
-      <base-table
-        :column-defs="columnDefs"
-        :row-data="rowData"
-        :loading="isRowDataLoading"
-        :error-message="errorMessage"
-      >
-        <template v-slot:cell(link-to-banner-items)="{ row }">
-          <base-button
-            :href="getLinkToBannerItems(row.alias)"
-            variant="outline-secondary"
-          >
-            Banner Items
-          </base-button>
-        </template>
-
-        <template v-slot:cell(actions)="{ row }">
-          <base-button
-            variant="icon"
-            title="Edit"
-            :disabled="deletingBannerAreaIdList.includes(row.id)"
-            :href="getBannerAreaUrl(row.id)"
-          >
-            <svg-icon name="edit"></svg-icon>
-          </base-button>
-          <base-button
-            variant="icon"
-            title="Remove"
-            :disabled="deletingBannerAreaIdList.includes(row.id)"
-            @click="handleBannerAreaDelete(row)"
-          >
-            <svg-icon name="delete"></svg-icon>
-          </base-button>
-        </template>
-      </base-table>
-    </template>
-  </page>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { ColumnDefinition } from '@tager/admin-ui';
-import { getMessageFromError, Nullable } from '@tager/admin-services';
-
-import { BannerArea } from '../typings/model';
-import { deleteBannerArea, getBannerAreaList } from '../services/requests';
-import { getBannerAreaFormUrl, getBannerItemListUrl } from '../constants/paths';
-
-const COLUMN_DEFS: Array<ColumnDefinition<BannerArea>> = [
-  {
-    id: 1,
-    name: 'ID',
-    field: 'id',
-    style: { width: '50px', textAlign: 'center' },
-    headStyle: { width: '50px', textAlign: 'center' },
-  },
-  { id: 2, name: 'Alias', field: 'alias' },
-  { id: 3, name: 'Label', field: 'label' },
-  { id: 4, name: 'Scenario', field: 'scenario' },
-  {
-    id: 6,
-    name: 'Banner Items',
-    field: 'linkToBannerItems',
-    style: { whiteSpace: 'nowrap', width: '120px', textAlign: 'center' },
-    headStyle: { whiteSpace: 'nowrap', width: '120px', textAlign: 'center' },
-  },
-  {
-    id: 8,
-    name: 'Actions',
-    field: 'actions',
-    style: { whiteSpace: 'nowrap', width: '110px', textAlign: 'center' },
-    headStyle: { whiteSpace: 'nowrap', width: '110px', textAlign: 'center' },
-  },
-];
-
-export default Vue.extend({
-  name: 'BannerAreaList',
-  data(): {
-    columnDefs: Array<ColumnDefinition<BannerArea>>;
-    rowData: Array<BannerArea>;
-    deletingBannerAreaIdList: Array<number>;
-    isRowDataLoading: boolean;
-    errorMessage: Nullable<string>;
-  } {
-    return {
-      columnDefs: COLUMN_DEFS,
-      rowData: [],
-      deletingBannerAreaIdList: [],
-      isRowDataLoading: false,
-      errorMessage: null,
-    };
-  },
-  mounted(): void {
-    this.refreshBannerAreaList();
-  },
-  methods: {
-    getBannerAreaUrl(areaId: number | string): string {
-      return getBannerAreaFormUrl({ areaId });
-    },
-    refreshBannerAreaList(): Promise<void> {
-      this.isRowDataLoading = true;
-
-      return getBannerAreaList()
-        .then((response) => {
-          this.rowData = response.data;
-          this.errorMessage = null;
-        })
-        .catch((error) => {
-          console.error(error);
-          this.rowData = [];
-          this.errorMessage = getMessageFromError(error);
-        })
-        .finally(() => {
-          this.isRowDataLoading = false;
-        });
-    },
-    handleBannerAreaDelete(bannerArea: BannerArea) {
-      const shouldDeleteBannerArea = confirm(
-        `Are you sure you want to delete banner area "${bannerArea.label}"`
-      );
-
-      if (!shouldDeleteBannerArea) return;
-
-      this.deletingBannerAreaIdList.push(bannerArea.id);
-
-      deleteBannerArea(bannerArea.id)
-        .then((response) => {
-          if (response.success) {
-            this.refreshBannerAreaList().then(() => {
-              this.deletingBannerAreaIdList.filter(
-                (id) => id !== bannerArea.id
-              );
-            });
-            this.$toast({
-              variant: 'success',
-              title: 'Success',
-              body: 'Banner area was successfully removed',
-            });
-          } else {
-            this.$toast({
-              variant: 'danger',
-              title: 'Error',
-              body: 'Banner area deletion was failed',
-            });
-          }
-        })
-        .catch((error) => {
-          console.error(error);
-          this.$toast({
-            variant: 'danger',
-            title: 'Error',
-            body: 'Banner area deletion was failed',
-          });
-        });
-    },
-    getLinkToBannerItems(areaAlias: string) {
-      return getBannerItemListUrl({ areaAlias });
-    },
-  },
-});
-</script>
-
-<style scoped lang="scss">
-.actions-cell {
-  button:not(:last-child) {
-    margin-right: 0.5rem;
-  }
-}
-</style>

package/src/views/BannerItemForm.vue

@@ -1,230 +0,0 @@
-<template>
-  <page
-    :title="isCreation ? 'Create Banner Item' : 'Update Banner Item'"
-    :is-content-loading="isContentLoading"
-    :footer="{ onSubmit: submitForm, backHref: bannerItemListUrl }"
-  >
-    <template v-slot:content>
-      <form novalidate @submit.prevent>
-        <form-field
-          v-model="values.title"
-          name="title"
-          label="Title"
-          :error="errors.title"
-        />
-
-        <form-field-rich-text-input
-          v-model="values.text"
-          name="text"
-          label="Text"
-          :error="errors.text"
-        />
-
-        <form-field-file-input
-          v-model="values.image"
-          label="Image"
-          name="image"
-          file-type="image"
-        />
-
-        <form-field
-          v-model="values.buttonLabel"
-          name="buttonLabel"
-          label="Button: Label"
-          :error="errors.buttonLabel"
-        />
-
-        <form-field
-          v-model="values.buttonLink"
-          name="buttonLink"
-          label="Button: Link"
-          :error="errors.buttonLink"
-        />
-
-        <form-field-checkbox
-          v-model="values.buttonIsNewTab"
-          name="buttonIsNewTab"
-          label="Button: Is new tab?"
-          :error="errors.buttonIsNewTab"
-        />
-      </form>
-    </template>
-  </page>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import {
-  convertRequestErrorToMap,
-  FileType,
-  Nullable,
-} from '@tager/admin-services';
-
-import {
-  BannerItemCreatePayload,
-  createBannerItem,
-  getBannerAreaByAlias,
-  getBannerItemById,
-  updateBannerItem,
-} from '../services/requests';
-import { BannerArea, BannerItem } from '../typings/model';
-import { getBannerItemListUrl } from '../constants/paths';
-
-type FormValues = {
-  title: string;
-  text: string;
-  buttonLink: string;
-  buttonLabel: string;
-  buttonIsNewTab: boolean;
-  image: Nullable<FileType>;
-};
-
-const INITIAL_VALUES: FormValues = {
-  title: '',
-  text: '',
-  buttonLink: '',
-  buttonLabel: '',
-  buttonIsNewTab: false,
-  image: null,
-};
-
-export default Vue.extend({
-  name: 'BannerItemForm',
-  data(): {
-    values: FormValues;
-    errors: Record<string, string>;
-    isContentLoading: boolean;
-    bannerArea: Nullable<BannerArea>;
-  } {
-    return {
-      values: { ...INITIAL_VALUES },
-      errors: {},
-      isContentLoading: false,
-      bannerArea: null,
-    };
-  },
-  computed: {
-    itemId(): string {
-      return this.$route.params.itemId;
-    },
-    areaAlias(): string {
-      return this.$route.params.areaAlias;
-    },
-    isCreation(): boolean {
-      return this.itemId === 'create';
-    },
-    bannerItemListUrl(): string {
-      return getBannerItemListUrl({
-        areaAlias: this.bannerArea?.alias ?? 'unknown',
-      });
-    },
-  },
-  watch: {
-    itemId() {
-      this.updateValues();
-    },
-    areaAlias() {
-      this.updateValues();
-    },
-  },
-  mounted(): void {
-    this.updateValues();
-  },
-  methods: {
-    updateValues(): void {
-      this.isContentLoading = true;
-
-      Promise.all([
-        getBannerAreaByAlias(this.areaAlias)
-          .then((response) => {
-            this.bannerArea = response.data;
-          })
-          .catch(console.error),
-        this.isCreation
-          ? new Promise((resolve) => {
-              this.values = { ...INITIAL_VALUES };
-              resolve();
-            })
-          : getBannerItemById(this.itemId)
-              .then((response) => {
-                this.values = this.convertReviewToInitialValues(response.data);
-              })
-              .catch(console.error),
-      ]).finally(() => {
-        this.isContentLoading = false;
-      });
-    },
-    convertReviewToInitialValues(bannerItem: BannerItem): FormValues {
-      return {
-        title: bannerItem.title,
-        text: bannerItem.text,
-        buttonLink: bannerItem.buttonLink ?? '',
-        buttonLabel: bannerItem.buttonLabel,
-        buttonIsNewTab: bannerItem.buttonIsNewTab,
-        image: bannerItem.image,
-      };
-    },
-    submitForm() {
-      const creationBody: BannerItemCreatePayload = {
-        title: this.values.title,
-        text: this.values.text,
-        buttonLink: this.values.buttonLink.trim() || null,
-        buttonLabel: this.values.buttonLabel,
-        buttonIsNewTab: this.values.buttonIsNewTab,
-        image: this.values.image?.id ?? null,
-      };
-
-      const requestPromise = this.isCreation
-        ? createBannerItem(this.bannerArea?.id ?? 'unknown', creationBody)
-        : updateBannerItem(this.itemId, creationBody);
-
-      requestPromise
-        .then(() => {
-          this.errors = {};
-          this.$router.push(this.bannerItemListUrl);
-
-          this.$toast({
-            variant: 'success',
-            title: 'Success',
-            body: `Banner item has been successfully ${
-              this.isCreation ? 'created' : 'updated'
-            }`,
-          });
-        })
-        .catch((error) => {
-          console.error(error);
-          this.errors = convertRequestErrorToMap(error);
-          this.$toast({
-            variant: 'danger',
-            title: 'Error',
-            body: `Banner item ${
-              this.isCreation ? 'creation' : 'update'
-            } has been failed`,
-          });
-        });
-    },
-  },
-});
-</script>
-
-<style scoped lang="scss">
-.bottom {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.save-button {
-  min-width: 100px;
-}
-
-.alias-field-inner {
-  display: flex;
-  align-items: center;
-
-  span {
-    font-size: 0.9em;
-    margin-right: 10px;
-  }
-}
-</style>

package/src/views/BannerItemList.vue

@@ -1,221 +0,0 @@
-<template>
-  <page
-    :title="pageTitle"
-    :header-buttons="[
-      { text: 'New Banner Item', href: getLinkToBannerItemForm('create') },
-    ]"
-  >
-    <template v-slot:content>
-      <base-table
-        :column-defs="columnDefs"
-        :row-data="rowData"
-        :loading="isRowDataLoading"
-        :error-message="errorMessage"
-        enumerable
-      >
-        <template v-slot:cell(actions)="{ row, rowIndex }">
-          <base-button
-            variant="icon"
-            title="Edit"
-            :disabled="deletingBannerItemIdList.includes(row.id)"
-            :href="getLinkToBannerItemForm(row.id)"
-          >
-            <svg-icon name="edit"></svg-icon>
-          </base-button>
-
-          <base-button
-            variant="icon"
-            title="Move up"
-            :disabled="rowIndex === 0 || isBannerItemMoving"
-            @click="moveBannerItem(row.id, 'up')"
-          >
-            <svg-icon name="north"></svg-icon>
-          </base-button>
-
-          <base-button
-            variant="icon"
-            title="Move down"
-            :disabled="rowIndex === rowData.length - 1 || isBannerItemMoving"
-            @click="moveBannerItem(row.id, 'down')"
-          >
-            <svg-icon name="south"></svg-icon>
-          </base-button>
-
-          <base-button
-            variant="icon"
-            title="Remove"
-            :disabled="deletingBannerItemIdList.includes(row.id)"
-            @click="handleBannerItemDelete(row)"
-          >
-            <svg-icon name="delete"></svg-icon>
-          </base-button>
-        </template>
-      </base-table>
-    </template>
-  </page>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { ColumnDefinition, formatBoolean } from '@tager/admin-ui';
-import { getMessageFromError, Nullable } from '@tager/admin-services';
-import { BannerArea, BannerItem } from '../typings/model';
-import {
-  deleteBannerItem,
-  getBannerAreaByAlias,
-  getBannerItemList,
-  moveBannerItem,
-} from '../services/requests';
-import { getBannerItemFormUrl } from '../constants/paths';
-
-const COLUMN_DEFS: Array<ColumnDefinition<BannerItem>> = [
-  {
-    id: 2,
-    name: 'Image',
-    field: 'image',
-    type: 'image',
-  },
-  {
-    id: 1,
-    name: 'Title',
-    field: 'title',
-  },
-  { id: 3, name: 'Text', field: 'text', type: 'html' },
-  { id: 4, name: 'Button: Label', field: 'buttonLabel' },
-  { id: 5, name: 'Button: Link', field: 'buttonLink' },
-  {
-    id: 6,
-    name: 'Button: Is new tab?',
-    field: 'buttonIsNewTab',
-    format: ({ row }) => formatBoolean(row.buttonIsNewTab),
-  },
-  {
-    id: 7,
-    name: 'Actions',
-    field: 'actions',
-    style: { whiteSpace: 'nowrap', width: '205px' },
-    headStyle: { whiteSpace: 'nowrap', width: '205px' },
-  },
-];
-
-export default Vue.extend({
-  name: 'BannerItemList',
-  data(): {
-    columnDefs: Array<ColumnDefinition<BannerItem>>;
-    rowData: Array<BannerItem>;
-    deletingBannerItemIdList: Array<number>;
-    isBannerItemMoving: boolean;
-    isRowDataLoading: boolean;
-    errorMessage: Nullable<string>;
-    bannerArea: Nullable<BannerArea>;
-  } {
-    return {
-      bannerArea: null,
-      columnDefs: COLUMN_DEFS,
-      rowData: [],
-      deletingBannerItemIdList: [],
-      isBannerItemMoving: false,
-      isRowDataLoading: false,
-      errorMessage: null,
-    };
-  },
-  computed: {
-    areaAlias(): string {
-      return this.$route.params.areaAlias;
-    },
-    pageTitle(): string {
-      return this.bannerArea ? `"${this.bannerArea.label}" banners` : 'Banners';
-    },
-  },
-  watch: {
-    areaAlias() {
-      this.refreshBannerItemList();
-    },
-  },
-  mounted(): void {
-    this.refreshBannerItemList();
-  },
-  methods: {
-    refreshBannerItemList(): Promise<void> {
-      this.isRowDataLoading = true;
-      return getBannerAreaByAlias(this.areaAlias)
-        .then((response) => {
-          this.bannerArea = response.data;
-          return getBannerItemList(this.bannerArea.id);
-        })
-        .then((response) => {
-          this.rowData = response.data;
-          this.errorMessage = null;
-        })
-        .catch((error) => {
-          console.error(error);
-          this.rowData = [];
-          this.errorMessage = getMessageFromError(error);
-        })
-        .finally(() => {
-          this.isRowDataLoading = false;
-        });
-    },
-    moveBannerItem(bannerItemId: number, direction: 'up' | 'down') {
-      this.isBannerItemMoving = true;
-
-      moveBannerItem(bannerItemId, direction)
-        .then((response) => {
-          if (response.success) {
-            return this.refreshBannerItemList();
-          }
-        })
-        .catch(console.error)
-        .finally(() => {
-          this.isBannerItemMoving = false;
-        });
-    },
-    handleBannerItemDelete(bannerItem: BannerItem) {
-      const shouldDeleteBannerItem = confirm(
-        `Are you sure you want to delete banner item "${bannerItem.title}"`
-      );
-
-      if (shouldDeleteBannerItem) {
-        this.deletingBannerItemIdList.push(bannerItem.id);
-        deleteBannerItem(bannerItem.id)
-          .then((response) => {
-            if (response.success) {
-              this.refreshBannerItemList().then(() => {
-                this.deletingBannerItemIdList.filter(
-                  (id) => id !== bannerItem.id
-                );
-              });
-              this.$toast({
-                variant: 'success',
-                title: 'Success',
-                body: 'Banner Item was successfully removed',
-              });
-            } else {
-              this.$toast({
-                variant: 'danger',
-                title: 'Error',
-                body: 'Banner Item deletion was failed',
-              });
-            }
-          })
-          .catch((error) => {
-            console.error(error);
-            this.$toast({
-              variant: 'danger',
-              title: 'Error',
-              body: 'Banner Item deletion was failed',
-            });
-          });
-      }
-    },
-    getLinkToBannerItemForm(bannerItemId: number | string) {
-      return getBannerItemFormUrl({
-        areaAlias: this.bannerArea?.alias ?? 'unknowm',
-        itemId: bannerItemId,
-      });
-    },
-  },
-});
-</script>
-
-<style scoped lang="scss"></style>

package/typings/index.d.ts

@@ -1,15 +0,0 @@
-import { CustomRouteConfig, MenuItemType } from '@tager/admin-layout';
-
-export declare const BLOG_POST_LIST_ROUTE: CustomRouteConfig;
-export declare const BLOG_POST_FORM_ROUTE: CustomRouteConfig;
-export declare const BLOG_CATEGORY_LIST_ROUTE: CustomRouteConfig;
-export declare const BLOG_CATEGORY_FORM_ROUTE: CustomRouteConfig;
-
-export declare const BLOG_MENU_ITEM: MenuItemType;
-
-export declare const BLOG_ROUTE_PATHS: {
-  POST_LIST: string;
-  POST_FORM: string;
-  CATEGORY_LIST: string;
-  CATEGORY_FORM: string;
-};