@tager/admin-banners 0.2.1 → 0.3.3

package/src/views/BannerAreaForm.vue

@@ -1,173 +0,0 @@
-<template>
-  <page
-    :title="isCreation ? 'Create Banner Area' : 'Update Banner Area'"
-    :is-content-loading="isContentLoading"
-    :footer="{ onSubmit: submitForm, backHref: getAreaListUrl() }"
-  >
-    <template v-slot:content>
-      <form novalidate @submit.prevent="submitForm">
-        <form-field
-          v-model="values.alias"
-          name="alias"
-          label="Alias"
-          :error="errors.alias"
-        />
-
-        <form-field
-          v-model="values.label"
-          name="label"
-          label="Label"
-          :error="errors.label"
-        />
-
-        <form-field
-          v-model="values.scenario"
-          name="scenario"
-          label="Scenario"
-          :error="errors.scenario"
-        />
-      </form>
-    </template>
-  </page>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { convertRequestErrorToMap } from '@tager/admin-services';
-
-import {
-  BannerAreaCreatePayload,
-  createBannerArea,
-  getBannerAreaById,
-  updateBannerArea,
-} from '../services/requests';
-import { BannerArea } from '../typings/model';
-import { getBannerAreaListUrl } from '../constants/paths';
-
-type FormValues = {
-  alias: string;
-  label: string;
-  scenario: string;
-};
-
-const initialValues: FormValues = {
-  alias: '',
-  label: '',
-  scenario: '',
-};
-
-export default Vue.extend({
-  name: 'BannerAreaForm',
-  data(): {
-    values: FormValues;
-    errors: Record<string, string>;
-    isContentLoading: boolean;
-  } {
-    return {
-      values: { ...initialValues },
-      errors: {},
-      isContentLoading: false,
-    };
-  },
-  computed: {
-    areaId(): string {
-      return this.$route.params.areaId;
-    },
-    isCreation(): boolean {
-      return this.areaId === 'create';
-    },
-  },
-  watch: {
-    areaId() {
-      this.updateValues();
-    },
-  },
-  mounted(): void {
-    this.updateValues();
-  },
-  methods: {
-    convertReviewToInitialValues(bannerArea: BannerArea): FormValues {
-      return {
-        alias: bannerArea.alias,
-        label: bannerArea.label,
-        scenario: bannerArea.scenario,
-      };
-    },
-    updateValues() {
-      if (this.isCreation) {
-        this.values = { ...initialValues };
-      } else {
-        this.isContentLoading = true;
-
-        getBannerAreaById(this.areaId)
-          .then((response) => {
-            this.values = this.convertReviewToInitialValues(response.data);
-          })
-          .catch(console.error)
-          .finally(() => {
-            this.isContentLoading = false;
-          });
-      }
-    },
-    submitForm() {
-      const body: BannerAreaCreatePayload = {
-        label: this.values.label,
-        alias: this.values.alias,
-        scenario: this.values.scenario,
-      };
-
-      const requestPromise = this.isCreation
-        ? createBannerArea(body)
-        : updateBannerArea(this.areaId, body);
-
-      requestPromise
-        .then(() => {
-          this.errors = {};
-          this.$router.push(getBannerAreaListUrl());
-
-          this.$toast({
-            variant: 'success',
-            title: 'Success',
-            body: `Banner Area was successfully ${
-              this.isCreation ? 'created' : 'updated'
-            }`,
-          });
-        })
-        .catch((error) => {
-          console.error(error);
-          this.errors = convertRequestErrorToMap(error);
-          this.$toast({
-            variant: 'danger',
-            title: 'Error',
-            body: `Blog bannerArea ${
-              this.isCreation ? 'creation' : 'update'
-            } was failed`,
-          });
-        });
-    },
-    getAreaListUrl: getBannerAreaListUrl,
-  },
-});
-</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/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,231 +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"
-          type="textarea"
-        />
-
-        <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>