UnivateProperties/src/components/marketing/landingPage.vue

<template>
  <div v-if="checkAccess" class="container">
    <div class="container">
      <div class="row">
        <div class="col">
          <div class="section-header">
            <h2>Landing Page</h2>
          </div>
        </div>
      </div>
    </div>
    <div v-if="loaded" class="container col-md-12" style="text-align:left">
      <div class="form-goup row">
        <div class="col-md-4">
          <float-label>
            <input
              class="form-control uniInput"
              type="text"
              v-model="campaign.name"
              placeholder="CAMPAIGN NAME"
            />
          </float-label>
        </div>
        <div class="col-md-4">
          <float-label fixed label="START DATE">
            <input class="form-control uniInput" type="date" v-model="campaign.startDate" />
          </float-label>
        </div>
        <div class="col-md-4">
          <float-label fixed label="END DATE">
            <input class="form-control uniInput" type="date" v-model="campaign.endDate" />
          </float-label>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col-md-4">
          <float-label>
            <input
              class="form-control uniInput"
              type="text"
              v-model="campaign.subject"
              placeholder="SUBJECT"
            />
          </float-label>
        </div>
        <div class="col-md-4">
          <float-label>
            <input
              class="form-control uniInput"
              type="number"
              v-model="campaign.itemsPerRow"
              placeholder="NUMBER OF ITEMS PER ROW"
            />
          </float-label>
        </div>
      </div>
      <br />
      <div class="col-md-12">
        <label>Main Body</label>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <a
              class="nav-link active"
              id="directions-tab"
              data-toggle="tab"
              href="#directions"
              role="tab"
              aria-controls="directions"
              aria-selected="false"
              >Html</a
            >
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              id="resort-layout-tab"
              data-toggle="tab"
              href="#resort-layout"
              role="tab"
              aria-controls="resort-layout"
              aria-selected="true"
              >Preview</a
            >
          </li>
        </ul>
        <div
          class="tab-content"
          id="myTabContent"
          style="background-color:rgba(255,255,255,0.75);padding:10px;border:silver solid thin;border-radius:10px;"
        >
          <div
            class="tab-pane fade show active"
            style="background-color:rgba(255,255,255,0.75);padding:10px;"
            id="directions"
            role="tabpanel"
            aria-labelledby="directions-tab"
          >
            <div class="text-left">
              <div class="input-group mb-3">
                <label>
                  <i>Place the tag [items] as a place holder for the week items.</i>
                </label>
              </div>
              <div class="input-group mb-3">
                <!-- <div class="input-group-prepend">
                    <span class="input-group-text" style="color: #60CBEB">
                      <b>B</b>
                    </span>
                  </div>-->
                <textarea
                  class="form-control"
                  type="text"
                  rows="10"
                  step="any"
                  name="levy"
                  v-model="campaign.body"
                />
              </div>
            </div>
          </div>
          <div
            class="tab-pane fade"
            id="resort-layout"
            role="tabpanel"
            aria-labelledby="resort-layout-tab"
          >
            <div class="no-style" v-html="campaign.body"></div>
          </div>
        </div>
      </div>
      <br />
      <div class="col-md-12">
        <label>Item Template</label>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <a
              class="nav-link active"
              id="template-tab"
              data-toggle="tab"
              href="#template"
              role="tab"
              aria-controls="template"
              aria-selected="false"
              >Html</a
            >
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              id="preview-tab"
              data-toggle="tab"
              href="#preview"
              role="tab"
              aria-controls="preview"
              aria-selected="true"
              >Preview</a
            >
          </li>
        </ul>
        <div
          class="tab-content"
          id="myTabContent"
          style="background-color:rgba(255,255,255,0.75);padding:10px;border:silver solid thin;border-radius:10px;"
        >
          <div
            class="tab-pane fade show active"
            style="background-color:rgba(255,255,255,0.75);padding:10px;"
            id="template"
            role="tabpanel"
            aria-labelledby="template-tab"
          >
            <div class="text-left">
              <div class="input-group mb-3">
                <label>
                  <i>
                    Place the tag [image] as a place holder for the week's image.
                    <br />Place the tag [link] for a hypher link to the week's page
                  </i>
                </label>
              </div>
              <div class="input-group mb-3">
                <!-- <div class="input-group-prepend">
                    <span class="input-group-text" style="color: #60CBEB">
                      <b>B</b>
                    </span>
                  </div>-->
                <textarea
                  class="form-control"
                  type="text"
                  rows="10"
                  step="any"
                  name="levy"
                  v-model="campaign.itemBody"
                />
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="preview" role="tabpanel" aria-labelledby="preview-tab">
            <div class="no-style" v-html="campaign.itemBody"></div>
          </div>
        </div>
      </div>
      <div class="col-md-12"></div>
      <br />
      <div class="col-md-12">
        <label>
          <b>Place Holders</b>
        </label>
        <div class="d-flex">
          <div class="p-2">
            <div class="btn-solid-blue" @click="addClose()" v-if="CanEdit">
              {{ btnCaption }}
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12" v-if="showNew">
        <LandingPageItems
          @onItemAdd="onItemAdd"
          :selectedClass="CheckType"
          :canSelectClass="false"
        />
      </div>
      <div class="col-md-12">
        <hr />
      </div>
      <div class="col-md-12">
        <ListView
          :items="PlaceHolders"
          :hideSearch="true"
          :showColumnChooser="false"
          :showNew="false"
          :allowMultipleSelect="true"
          :canEdit="false"
          :deleteable="CanEdit"
          @onDelete="onItemDelete"
          :displayColumns="placeHolderColumns"
        />
        <!-- :displayColumns="placeHolderColumns" -->
      </div>
      <br />
      <div class="col-md-12">
        <label>
          <b>Weeks</b>
        </label>
        <div class="d-flex">
          <div class="p-2">
            <div class="btn-solid-blue" @click="addWeekClose()" v-if="CanEditWeeks">
              {{ btnCaptionWeek }}
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12" v-if="showNewWeek">
        <WeekAdd @onWeekItemAdd="AddNewWeek" />
      </div>
      <div class="col-md-12">
        <hr />
      </div>
      <div class="col-md-12">
        <ListView
          :items="Weeks"
          :hideSearch="true"
          :showColumnChooser="false"
          :showNew="false"
          :canEdit="false"
          :deleteable="CanEdit"
          :allowMultipleSelect="false"
          @onDelete="onItemDeleteWeek"
          :displayColumns="weekColumns"
          :displayFormats="weekFormats"
        />
        <!-- -->
      </div>
      <br />
      <br />
      <div class="form-group row">
        <button type="button" @click="SaveData()" class="btn-solid-blue">
          Save
        </button>
        <button type="button" @click="Close()" class="btn-solid-blue">
          Close
        </button>
      </div>
    </div>
    <div v-else id="preloader"></div>
  </div>
  <div v-else class="container">
    <div class="row">
      <div class="col">
        <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { VueEditor } from "vue2-editor";
import { mapState, mapActions } from "vuex";

import Log from "../../assets/Log";
import alert from "../shared/alert";
import FieldEditor from "../../components/shared/fieldEditor";
import ListView from "../shared/listView.vue";
import Search from "../admin/misc/carouselSearch.vue";
import LandingPageItems from "./landingPageItems.vue";
import WeekAdd from "./landingPageWeek.vue";

export default {
  name: "LandingPage",
  components: {
    VueEditor,
    FieldEditor,
    Search,
    LandingPageItems,
    ListView,
    WeekAdd,
    alert
  },
  data() {
    return {
      loaded: false,
      wait: false,
      isNew: true,
      showNew: false,
      showNewWeek: false,
      weekColumns: ["image", "weekUni"],
      weekFormats: ["image", ""],
      placeHolderColumns: ["name", "boundTo", "format"],
      defaultPlaceholderClass: this.CheckType
    };
  },
  props: {
    passedDown: {},
    placeHolders: [],
    weeks: [],
    editable: {
      default: true
    }
  },
  methods: {
    ...mapActions("campaign", [
      "getCampaign",
      "saveCampaign",
      "updateCampaign",
      "getCampaignItems",
      "getCampaignPlaceHolders"
    ]),
    SaveData() {
      this.wait = true;
      if (this.isNew) {
        this.campaign.isTimeshare = true;
        for (let i = 0; i < this.campaign.items.length; i++) {
          this.campaign.items[i].week = undefined;
          if (
            this.campaign.items[i].placeHolders &&
            this.campaign.items[i].placeHolders.length > 0
          ) {
            this.campaign.items[i].campaignItemPlaceHolder = this.campaign.items[i].placeHolders;
          }
        }

        for (let i = 0; i < this.campaign.placeHolders.length; i++) {
          this.campaign.placeHolders[i].format = this.campaign.placeHolders[i].formatTemplate;
        }
        //console.log(JSON.stringify(this.campaign));
        console.log(this.passedDown);
        this.saveCampaign(this.campaign)
          .then(fulfilled => {
            this.$router.push("/landingPages");
          })
          .catch(error => {
            console.log(error.message);
          });
      } else {
        console.log(this.passedDown);
        // this.updateCampaign(this.campaign).then(() => {
        //   this.$router.push("/landingPages");
        // });
      }
    },
    Close() {
      this.$router.push("/landingPages");
    },
    NewWeek() {
      this.$router.push("/landingPage/week/0");
    },
    onItemAdd(item) {
      const myList = this.campaign.placeHolders ? this.campaign.placeHolders : [];
      myList.push({
        name: item.name,
        boundTo: item.property,
        boundToClassDisplay: item.class.name,
        boundToClass: item.class.fullName,
        format: item.format,
        formatTemplate: item.formatTemplate
      });
      this.campaign.placeHolders = myList;
      this.showNew = false;
    },
    addClose() {
      if (this.showNew) {
        this.showNew = false;
      } else this.showNew = true;
    },
    addWeekClose() {
      if (this.showNewWeek) {
        this.showNewWeek = false;
      } else {
        this.showNewWeek = true;
      }
    },
    onItemDelete(item) {
      this.campaign.placeHolders = _.remove(this.campaign.placeHolders, x => x !== item);
      this.placeHolders = this.campaign.placeHolders;
    },
    // AddWeek(item) {
    //   // const myList = this.campaign.items ? this.campaign.items : [];
    //   // myList.push(item);
    //   // this.campaign.items = myList;
    //   //this.showNewWeek = false;
    // },
    AddNewWeek(week) {
      var item = {
        image: week.image,
        weekUni: week.week.weekUni,
        weekId: week.weekId,
        placeHolders: week.placeHolders
      };
      this.campaign.items.push(item);
      this.showNewWeek = false;
    },
    onItemDeleteWeek(item) {
      this.campaign.items = _.remove(this.campaign.items, x => x !== item);
      this.Weeks = this.campaign.items;
    },
    async loadData() {
      if (this.$route.params.id) {
        await this.getCampaign(this.$route.params.id);
        this.wait = false;
        if (this.$route.params.id > 0) {
          this.isNew = false;
        }
      } else {
        await this.getCampaign(0);
        if (this.passedDown === "0") {
          this.isNew = true;
        }
      }
    }
  },
  mounted() {
    this.loadData().then(() => {
      setTimeout(() => {
        this.loaded = true;
      }, 100);
    });
  },
  computed: {
    ...mapState("campaign", ["campaign", "campaignPlaceHolders", "campaignItems"]),
    checkAccess() {
      if (Log.getUser().role === "Super Admin" || Log.getUser().role === "Designer") {
        return true;
      } else {
        return false;
      }
    },
    CheckType() {
      var obj = {};
      if (this.campaign.id > 0) {
        console.log(this.campaign);
        if (this.campaign.isTimeshare) {
          obj = {
            fullName: "UnivateProperties_API.Model.Timeshare.TimeshareWeek",
            name: "TimeshareWeek"
          };
        } else {
          obj = {
            fullName: "UnivateProperties_API.Model.Properties.Property",
            name: "Property"
          };
        }
      } else {
        obj = {
          fullName: "UnivateProperties_API.Model.Timeshare.TimeshareWeek",
          name: "TimeshareWeek"
        };
      }
      return obj;
    },
    PlaceHolders() {
      if (this.campaign && this.campaign.placeHolders) {
        return this.campaign.placeHolders;
      }
      return this.placeHolders;
    },
    Weeks() {
      if (this.campaign && this.campaign.items) {
        return this.campaign.items;
      }
      return this.weeks;
    },
    CanEdit() {
      return this.editable || this.campaign.id === 0 || this.passedDown === "0";
    },
    CanEditWeeks() {
      return this.editable || this.campaign.id === 0 || this.passedDown === "0";
    },
    btnCaption() {
      return this.showNew ? "Close" : "New";
    },
    btnCaptionWeek() {
      return this.showNewWeek ? "Close" : "New";
    }
  }
};
</script>