Added Upload Campaign

src/components/admin/misc/carouselSearch.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="container">
+    <div v-if="loaded" class="container">
       <div class="container">
         <div class="row">
           <div class="col-md-12 col-lg-8">
@@ -24,67 +24,83 @@
         </div>
       </div>
     </div>
+    <div v-else class="text-center mt-5">
+      <vue-loaders
+        class="my-auto"
+        name="line-spin-fade-loader"
+        color="black"
+        scale="1"
+      ></vue-loaders>
+    </div>
   </div>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import ListView from '../../shared/listView.vue';
-import ListView2 from '../../shared/listView.vue';
-import Log from '../../../assets/Log';
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import ListView from "../../shared/listView.vue";
+import ListView2 from "../../shared/listView.vue";
+import Log from "../../../assets/Log";
 
 export default {
-  name: 'CarouselSearch',
+  name: "CarouselSearch",
   props: {
-    name: String,
+    name: String
   },
   components: {
     ListView,
-    ListView2,
+    ListView2
   },
   data() {
     return {
-      user: Log.getUser(),
+      loaded: false,
+      user: Log.getUser()
     };
   },
   mounted() {
-    if (this.name === 'Timeshare') {
-      this.getItems(this.user.id);
-    } else {
-      this.getLiveProperties();
-    }
+    this.loadData().then(() => {
+      setTimeout(() => {
+        this.loaded = true;
+      }, 100);
+    });
   },
   computed: {
-    ...mapState('myWeeks', ['items']),
-    ...mapState('propertyList', ['propertiesLive']),
+    ...mapState("myWeeks", ["items"]),
+    ...mapState("propertyList", ["propertiesLive"]),
     // eslint-disable-next-line vue/return-in-computed-property
     nameChanged() {
-      if (this.name === 'Timeshare') {
+      if (this.name === "Timeshare") {
         this.getItems(this.user.id);
       } else {
         this.getLiveProperties();
       }
-    },
+    }
   },
   methods: {
-    ...mapActions('myWeeks', ['getItems']),
-    ...mapActions('propertyList', ['getLiveProperties']),
+    ...mapActions("myWeeks", ["getItems"]),
+    ...mapActions("propertyList", ["getLiveProperties"]),
     onRowClick(item) {
-         
       // if (this.name === 'Timeshare') {
       //   const week = this.items[item];
       //   this.$emit('onSelected', week);
       // } else {
       //   const prop = this.propertiesLive[item];
-      //           alert(JSON.stringify(prop));   
-        this.$emit('onSelected', item);
+      //           alert(JSON.stringify(prop));
+      this.$emit("onSelected", item);
       //}
     },
+    async loadData() {
+      if (this.name === "Timeshare") {
+        await this.getItems(this.user.id);
+      } else {
+        await this.getLiveProperties();
+      }
+    }
   },
   watch: {
     nameChanged() {
       return null;
-    },
-  },
+    }
+  }
 };
 </script>

src/components/admin/misc/carouselSearchProperty.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div v-if="loaded" class="container">
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>Search</h2>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="container">
+          <ListView
+            :items="properties"
+            :showNew="false"
+            :showColumnChooser="false"
+            @onRowClick="onRowClick"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-else class="text-center mt-5">
+      <vue-loaders
+        class="my-auto"
+        name="line-spin-fade-loader"
+        color="black"
+        scale="1"
+      ></vue-loaders>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import ListView from "../../shared/listView.vue";
+import Log from "../../../assets/Log";
+
+export default {
+  name: "CarouselSearch",
+  props: {
+    name: String
+  },
+  components: {
+    ListView
+  },
+  data() {
+    return {
+      loaded: false,
+      user: Log.getUser()
+    };
+  },
+  mounted() {
+    this.loadData().then(() => {
+      setTimeout(() => {
+        this.loaded = true;
+      }, 100);
+    });
+  },
+  computed: {
+    ...mapState("propertyList", ["properties"])
+  },
+  methods: {
+    ...mapActions("propertyList", ["getAdminProperties"]),
+    onRowClick(item) {
+      console.log(item[0]);
+      this.$emit("onSelected", item[0]);
+    },
+    async loadData() {
+      await this.getAdminProperties(this.user.id);
+    }
+  }
+};
+</script>

src/components/marketing/campaignUpload.vue

@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <main v-if="boolLoaded" id="main" style="margin-top:20px; padding-bottom:50px;">
+      <div class="container">
+        <div class="row">
+          <div class="col">
+            <div class="section-header">
+              <h2>Upload Campaign</h2>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col">
+            <!--UPLOAD-->
+            <h2 class="mb-5">New Campaign</h2>
+            <form enctype="multipart/form-data" novalidate v-if="isInitial || isSaving">
+              <div>
+                <input
+                  type="file"
+                  multiple
+                  :name="uploadFieldName"
+                  :disabled="isSaving"
+                  @change="
+                    filesChange($event.target.files);
+                    fileCount = $event.target.files.length;
+                  "
+                />
+                <p v-if="isSaving">Uploading {{ fileCount }} files...</p>
+              </div>
+            </form>
+            <div>
+              <alert v-if="isSuccess" :text="errorMessage" :type="errorOccurred" />
+              <button v-if="isSuccess" class="btn-solid-blue" @click="openInNewTab">
+                View
+              </button>
+              <alert v-if="isFailed" :text="errorMessage" :type="errorOccurred" />
+            </div>
+          </div>
+        </div>
+        <hr class="mt-5" />
+        <div class="row mt-5">
+          <div class="col">
+            <h2>Uploaded Campaigns</h2>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col">
+            <ListView
+              :items="uploadedCampaigns"
+              :search="false"
+              @onDelete="Delete"
+              :deleteable="true"
+            />
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <div v-else id="preloader"></div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapActions, mapState } from "vuex";
+import Alert from "../shared/alert";
+import ListView from "../shared/listView";
+
+const STATUS_INITIAL = 0,
+  STATUS_SAVING = 1,
+  STATUS_SUCCESS = 2,
+  STATUS_FAILED = 3;
+
+export default {
+  name: "app",
+  components: {
+    Alert,
+    ListView
+  },
+  data() {
+    return {
+      uploadedFiles: [],
+      errorOccurred: "",
+      errorMessage: "",
+      uploadError: null,
+      currentStatus: null,
+      uploadFieldName: "photos",
+      fileCount: 0,
+      files: new FormData(),
+      link: "",
+      boolLoaded: false
+    };
+  },
+  computed: {
+    ...mapState("campaign", ["uploadedCampaigns"]),
+    isInitial() {
+      return this.currentStatus === STATUS_INITIAL;
+    },
+    isSaving() {
+      return this.currentStatus === STATUS_SAVING;
+    },
+    isSuccess() {
+      return this.currentStatus === STATUS_SUCCESS;
+    },
+    isFailed() {
+      return this.currentStatus === STATUS_FAILED;
+    }
+  },
+  methods: {
+    ...mapActions("campaign", ["uploadCampaign", "getUploadedCampaign", "deleteUploadedCampaign"]),
+    openInNewTab() {
+      window.open(this.link, "_blank");
+    },
+    reset() {
+      // reset form to initial state
+      this.currentStatus = STATUS_INITIAL;
+      this.uploadedFiles = [];
+      this.uploadError = null;
+    },
+    Delete(item) {
+      this.deleteUploadedCampaign(item.id);
+    },
+    save() {
+      // upload data to the server
+      this.currentStatus = STATUS_SAVING;
+      const files = this.files;
+      this.boolLoaded = false;
+      this.uploadCampaign(files)
+        .then(data => {
+          console.log(data);
+          setTimeout(() => {
+            this.link = data.link;
+            this.currentStatus = STATUS_SUCCESS;
+            this.errorOccurred = "SUCCESS";
+            this.errorMessage = "Done! Please click View below to view the campaign " + data.link;
+            this.getUploadedCampaign().then(() => {
+              this.boolLoaded = true;
+            });
+          }, 100);
+        })
+        .catch(ex => {
+          console.log(ex);
+          this.currentStatus = STATUS_FAILED;
+          this.errorOccurred = "ERROR";
+          this.errorMessage = "Error!";
+        });
+
+      //   upload(formData)
+      //     .then(x => {
+      //       this.uploadedFiles = [].concat(x);
+      //       this.currentStatus = STATUS_SUCCESS;
+      //     })
+      //     .catch(err => {
+      //       this.uploadError = err.response;
+      //       this.currentStatus = STATUS_FAILED;
+      //     });
+    },
+    filesChange(fileList) {
+      this.files.append("file", fileList[0], fileList[0].name);
+      this.save();
+    }
+  },
+  mounted() {
+    this.reset();
+    this.getUploadedCampaign().then(() => {
+      this.boolLoaded = true;
+    });
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.dropbox {
+  outline: 2px dashed grey; /* the dash box */
+  outline-offset: -10px;
+  background: lightcyan;
+  color: dimgray;
+  padding: 10px 10px;
+  min-height: 200px; /* minimum height */
+  position: relative;
+  cursor: pointer;
+}
+
+.input-file {
+  opacity: 0; /* invisible but it's there! */
+  width: 100%;
+  height: 200px;
+  position: absolute;
+  cursor: pointer;
+}
+
+.dropbox:hover {
+  background: lightblue; /* when mouse over to the drop zone, change color */
+}
+
+.dropbox p {
+  font-size: 1.2em;
+  text-align: center;
+  padding: 50px 0;
+}
+</style>

src/components/marketing/landingPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <main id="main" style="margin-top:200px; padding-bottom:50px">
+  <div v-if="checkAccess" class="container">
     <div class="container">
       <div class="row">
         <div class="col">
@@ -9,295 +9,289 @@
         </div>
       </div>
     </div>
-
-    <div v-if="checkAccess" class="container">
-      <div 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 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="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 class="col-md-4">
+          <float-label fixed label="START DATE">
+            <input class="form-control uniInput" type="date" v-model="campaign.startDate" />
+          </float-label>
         </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="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-content"
-            id="myTabContent"
-            style="background-color:rgba(255,255,255,0.75);padding:10px;border:silver solid thin;border-radius:10px;"
+            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="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">
+            <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>
+                <textarea
+                  class="form-control"
+                  type="text"
+                  rows="10"
+                  step="any"
+                  name="levy"
+                  v-model="campaign.body"
+                />
               </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;"
+            class="tab-pane fade"
+            id="resort-layout"
+            role="tabpanel"
+            aria-labelledby="resort-layout-tab"
           >
-            <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="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
             >
-              <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">
+          </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>
+                <textarea
+                  class="form-control"
+                  type="text"
+                  rows="10"
+                  step="any"
+                  name="levy"
+                  v-model="campaign.itemBody"
+                />
               </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 class="tab-pane fade" id="preview" role="tabpanel" aria-labelledby="preview-tab">
+            <div class="no-style" v-html="campaign.itemBody"></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 btn-primary myBackground" @click="addClose()" v-if="CanEdit">
-                {{ btnCaption }}
-              </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 class="col-md-12" v-if="showNew">
-          <LandingPageItems
-            @onItemAdd="onItemAdd"
-            :selectedClass="defaultPlaceholderClass"
-            :canSelectClass="false"
-            :editItem="placeholderItem"
-          />
-        </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"
-            :sortKey="'name'"
-          />
-          <!-- :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 btn-primary myBackground" @click="addWeekClose()" v-if="CanEditWeeks">
-                {{ btnCaptionWeek }}
-              </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 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"
-            :sortKey="'weekUni'"
-            :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-if="wait" id="preloader"></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 class="container">
-      <div class="row">
-        <div class="col">
-          <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
-        </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>
-  </main>
+  </div>
 </template>
 
 <script>
@@ -326,6 +320,7 @@ export default {
   },
   data() {
     return {
+      loaded: false,
       wait: false,
       isNew: true,
       showNew: false,
@@ -333,17 +328,15 @@ export default {
       weekColumns: ["image", "weekUni"],
       weekFormats: ["image", ""],
       placeHolderColumns: ["name", "boundTo", "format"],
-      defaultPlaceholderClass: {
-        fullName: "UnivateProperties_API.Model.Timeshare.TimeshareWeek",
-        name: "TimeshareWeek"
-      }
+      defaultPlaceholderClass: this.CheckType
     };
   },
   props: {
+    passedDown: {},
     placeHolders: [],
     weeks: [],
     editable: {
-      default: false
+      default: true
     }
   },
   methods: {
@@ -357,6 +350,7 @@ export default {
     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 (
@@ -371,6 +365,7 @@ export default {
           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");
@@ -379,9 +374,10 @@ export default {
             console.log(error.message);
           });
       } else {
-        this.updateCampaign(this.campaign).then(() => {
-          this.$router.push("/landingPages");
-        });
+        console.log(this.passedDown);
+        // this.updateCampaign(this.campaign).then(() => {
+        //   this.$router.push("/landingPages");
+        // });
       }
     },
     Close() {
@@ -400,8 +396,7 @@ export default {
         format: item.format,
         formatTemplate: item.formatTemplate
       });
-      this.PlaceHolders = myList;
-      this.campaign.placeHolders = this.PlaceHolders;
+      this.campaign.placeHolders = myList;
       this.showNew = false;
     },
     addClose() {
@@ -439,14 +434,28 @@ export default {
     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.getCampaign(this.$route.params.id);
-    this.wait = false;
-    if (this.$route.params.id > 0) {
-      this.isNew = false;
-    }
+    this.loadData().then(() => {
+      setTimeout(() => {
+        this.loaded = true;
+      }, 100);
+    });
   },
   computed: {
     ...mapState("campaign", ["campaign", "campaignPlaceHolders", "campaignItems"]),
@@ -457,6 +466,29 @@ export default {
         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;
@@ -470,10 +502,10 @@ export default {
       return this.weeks;
     },
     CanEdit() {
-      return this.editable || this.campaign.id === 0;
+      return this.editable || this.campaign.id === 0 || this.passedDown === "0";
     },
     CanEditWeeks() {
-      return this.editable || this.campaign.id === 0;
+      return this.editable || this.campaign.id === 0 || this.passedDown === "0";
     },
     btnCaption() {
       return this.showNew ? "Close" : "New";

src/components/marketing/landingPageAddProperty.vue

@@ -0,0 +1,242 @@
+<template>
+  <div>
+    <div v-if="loaded">
+      <div class="row">
+        <div class="col-md-12" v-if="message !== undefined">
+          <Alert :text="message" :type="'ERROR'" />
+        </div>
+      </div>
+      <div class="container col-md-12" style="text-align:left">
+        <div class="form-group row">
+          <div class="col-md-3">
+            <button type="button" class="btn-solid-blue" @click="SearchWeeks()">
+              FIND PROPERTY
+            </button>
+            <modal name="propSearch" :width="700" :height="900">
+              <Search @onSelected="onSelected" />
+            </modal>
+          </div>
+          <div class="col-md-2 mt-3">
+            <input class="form-control" type="label" disabled :value="propertyObj.reference" />
+          </div>
+          <div class="col-md-2">
+            <label>Upload Image?</label>
+            <div class="custom-control custom-switch">
+              <input
+                type="checkbox"
+                class="custom-control-input"
+                id="customSwitch1"
+                :checked="uploadImage"
+                @change="checkImage"
+              />
+              <label class="custom-control-label" for="customSwitch1">{{
+                uploadImage ? "Yes" : "No"
+              }}</label>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <Images v-if="uploadImage" :allowMultiple="false" :loadedImages="LoadedImages" />
+            <input
+              v-else
+              class="form-control"
+              type="text"
+              placeholder="image url"
+              v-model="propertyObj.imageUrl"
+            />
+          </div>
+          <div class="col-md-2">
+            <label>Custom Place holders</label>
+            <div class="custom-control custom-switch">
+              <input
+                type="checkbox"
+                class="custom-control-input"
+                id="customSwitch2"
+                :checked="showPlaceholder"
+                @change="ShowFields"
+              />
+              <label class="custom-control-label" for="customSwitch2">{{
+                showPlaceholder ? "Yes" : "No"
+              }}</label>
+            </div>
+          </div>
+        </div>
+        <hr v-if="showPlaceholder" />
+        <!-- <div class="form-group row">
+        <div class="col-md-5">
+          <button
+            type="button"
+            @click="ShowFields()"
+            class="btn btn-primary myBackground"
+          >Add Custom Place Holders</button>
+        </div>
+      </div>-->
+        <div class="form-group row">
+          <div class="col-md-12" v-if="messageCPH !== undefined">
+            <Alert :text="messageCPH" :type="'ERROR'" />
+          </div>
+        </div>
+        <div class="form-group row" v-if="showPlaceholder">
+          <div class="col-md-2">
+            <label>Place Holder</label>
+          </div>
+          <div class="col-md-3">
+            <input class="form-control" type="text" v-model="placeHolder" />
+          </div>
+          <div class="col-md-2">
+            <label>Value</label>
+          </div>
+          <div class="col-md-3">
+            <input class="form-control" type="text" v-model="value" />
+          </div>
+          <div class="col-md-2">
+            <button type="button" @click="AddCustomHolder()" class="btn-solid-blue">
+              Add
+            </button>
+          </div>
+        </div>
+        <div class="form-group row" v-if="showPlaceholder">
+          <div class="col-md-12">
+            <ListView
+              :items="placeHolders"
+              :hideSearch="true"
+              :showColumnChooser="false"
+              :showNew="false"
+              :allowMultipleSelect="false"
+              :canEdit="false"
+              :deleteable="true"
+              @onDelete="onItemDelete"
+            />
+          </div>
+        </div>
+        <div class="form-group row">
+          <div class="col-md-1 offset-md-11">
+            <button type="button" @click="SaveData()" class="btn-solid-blue">
+              Add
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import Search from "../admin/misc/carouselSearchProperty.vue";
+import Images from "../property/propertyImage.vue";
+import { mapState, mapActions } from "vuex";
+import Alert from "../shared/alert.vue";
+import ListView from "../shared/listView.vue";
+
+export default {
+  name: "LandingPageWeek",
+  components: {
+    Search,
+    Images,
+    Alert,
+    ListView
+  },
+  data() {
+    return {
+      loaded: false,
+      uploadImage: false,
+      message: undefined,
+      messageCPH: undefined,
+      weekUni: "",
+      propertyObj: {},
+      placeHolders: [],
+      showPlaceholder: false,
+      placeHolder: undefined,
+      value: undefined
+    };
+  },
+  methods: {
+    ...mapActions("campaignItem", ["getCampaignItem"]),
+    SearchWeeks() {
+      this.$modal.show("propSearch");
+    },
+    onSelected(item) {
+      this.propertyObj = item;
+      console.log(this.propertyObj);
+      this.$modal.hide("propSearch");
+    },
+    checkImage(item) {
+      this.uploadImage = !this.uploadImage;
+    },
+    ShowFields() {
+      this.showPlaceholder = !this.showPlaceholder;
+    },
+    SaveData() {
+      this.message = undefined;
+      let msg = "";
+      if (!this.propertyObj) {
+        msg += "Please select a week. ";
+      }
+      if (this.propertyObj.image === undefined && this.propertyObj.imageUrl === undefined) {
+        msg += "Please select an image for this week. ";
+      }
+      if (msg.length > 0) {
+        this.message = msg;
+      } else {
+        if (this.uploadImage) {
+          this.campaignItem.image = this.propertyObj.image[0];
+        } else {
+          this.campaignItem.image = this.propertyObj.imageUrl;
+        }
+        this.campaignItem.property = this.propertyObj;
+        this.campaignItem.propertyId = this.propertyObj.id;
+
+        if (this.placeHolders.length > 0) {
+          this.campaignItem.placeHolders = this.placeHolders;
+          this.placeHolders = [];
+        }
+        this.$emit("onWeekItemAdd", this.campaignItem);
+        this.campaignItem.placeHolders = [];
+      }
+    },
+    LoadedImages(values) {
+      this.propertyObj.image = values;
+    },
+    AddCustomHolder() {
+      this.messageCPH = undefined;
+      let msg = "";
+
+      if (this.placeHolder === undefined) {
+        msg += "Please enter a Place Holder name. ";
+      }
+      if (this.value === undefined) {
+        msg += "Please enter a Value. ";
+      }
+
+      if (msg.length > 0) {
+        this.messageCPH = msg;
+      } else {
+        this.placeHolders.push({
+          placeHolder: this.placeHolder,
+          value: this.value
+        });
+        this.placeHolder = undefined;
+        this.value = undefined;
+      }
+    },
+    onItemDelete(item) {
+      this.placeHolders = _.remove(this.placeHolders, x => x !== item);
+    },
+    async loadData() {
+      if (this.$route.params.id) {
+        await this.getCampaignItem(this.$route.params.id);
+      }
+    }
+  },
+  mounted() {
+    this.loadData().then(() => {
+      setTimeout(() => {
+        this.loaded = true;
+      }, 100);
+    });
+  },
+  computed: {
+    ...mapState("campaignItem", ["campaignItem"])
+  }
+};
+</script>

src/components/marketing/landingPageItems.vue

@@ -1,19 +1,20 @@
 <template>
-  <div class="row">
-    <div class="col-md-12" v-if="message !== undefined">
-      <Alert :text="message" :type="'ERROR'" />
-    </div>
-    <div class="col-md-3">
-      <input
-        class="form-control"
-        type="text"
-        step="any"
-        name="levy"
-        placeholder="Name"
-        v-model="item.name"
-      />
-    </div>
-    <!-- <div class="col-md-3">
+  <div>
+    <div v-if="loaded" class="row">
+      <div class="col-md-12" v-if="message !== undefined">
+        <Alert :text="message" :type="'ERROR'" />
+      </div>
+      <div class="col-md-3 mt-3">
+        <input
+          class="form-control"
+          type="text"
+          step="any"
+          name="levy"
+          placeholder="Name"
+          v-model="item.name"
+        />
+      </div>
+      <!-- <div class="col-md-3">
       <select
         v-if="canSelectClass"
         class="form-control"
@@ -24,22 +25,24 @@
       </select>
       <input v-else disabled class="form-control" v-model="selectedClass.name" />
     </div>-->
-    <div class="col-md-3">
-      <select class="form-control" v-model="item.property">
-        <option v-for="(item, i) in properties" :key="i">{{item}}</option>
-      </select>
-    </div>
-    <div class="col-md-3">
-      <select class="form-control" v-model="item.format" @change="onFormatChanged">
-        <option v-for="(item, i) in formats" :key="i">{{item.displayName}}</option>
-      </select>
-    </div>
-    <div class="col-md-3">
-      <div class="btn btn-primary myBackground w-100" @click="onItemAdd()">Add</div>
+      <div class="col-md-3 mt-3">
+        <select class="form-control" v-model="item.property">
+          <option v-for="(item, i) in properties" :key="i">{{ item }}</option>
+        </select>
+      </div>
+      <div class="col-md-3 mt-3">
+        <select class="form-control" v-model="item.format" @change="onFormatChanged">
+          <option v-for="(item, i) in formats" :key="i">{{ item.displayName }}</option>
+        </select>
+      </div>
+      <div class="col-md-3">
+        <div class="btn-solid-blue" @click="onItemAdd()">Add</div>
+      </div>
     </div>
   </div>
 </template>
 <script>
+/* eslint-disable */
 import { mapState, mapActions } from "vuex";
 import Alert from "../shared/alert.vue";
 
@@ -48,15 +51,15 @@ export default {
     Alert
   },
   mounted() {
-    this.init();
-    this.getFormats();
-    if (this.selectedClass !== undefined) {
-      this.item.class = this.selectedClass;
-      this.getProperties(this.item.class);
-    }
+    this.loadData().then(() => {
+      setTimeout(() => {
+        this.loaded = true;
+      }, 100);
+    });
   },
   data() {
     return {
+      loaded: false,
       message: undefined,
       item: {
         name: undefined,
@@ -71,9 +74,7 @@ export default {
     canSelectClass: {
       default: true
     },
-    selectedClass: {
-      default: Object
-    }
+    selectedClass: {}
   },
   computed: {
     ...mapState("info", ["classes", "properties"]),
@@ -114,6 +115,11 @@ export default {
       } else {
         this.$emit("onItemAdd", this.item);
       }
+    },
+    async loadData() {
+      await this.init();
+      await this.getFormats();
+      await this.getProperties(this.selectedClass);
     }
   }
 };

src/components/marketing/landingPageProperty.vue

@@ -0,0 +1,493 @@
+<template>
+  <div v-if="checkAccess" class="container">
+    <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="defaultPlaceholderClass"
+          :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"
+          :sortKey="'name'"
+        />
+        <!-- :displayColumns="placeHolderColumns" -->
+      </div>
+      <br />
+      <div class="col-md-12">
+        <label>
+          <b>Properties</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="AddNewProperty" />
+      </div>
+      <div class="col-md-12">
+        <hr />
+      </div>
+      <div class="col-md-12">
+        <ListView
+          :items="Properties"
+          :hideSearch="true"
+          :showColumnChooser="false"
+          :showNew="false"
+          :canEdit="false"
+          :deleteable="CanEdit"
+          :allowMultipleSelect="false"
+          @onDelete="onItemDeleteWeek"
+          :sortKey="'reference'"
+          :displayColumns="propertyColumns"
+          :displayFormats="weekFormats"
+          :allowSelect="false"
+        />
+        <!-- -->
+      </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 "./landingPageAddProperty.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,
+      propertyColumns: ["image", "reference"],
+      weekFormats: ["image", ""],
+      placeHolderColumns: ["name", "boundTo", "format"],
+      defaultPlaceholderClass: {
+        fullName: "UnivateProperties_API.Model.Properties.Property",
+        name: "Property"
+      }
+    };
+  },
+  props: {
+    passedDown: {},
+    placeHolders: [],
+    weeks: [],
+    editable: {
+      default: false
+    }
+  },
+  methods: {
+    ...mapActions("campaign", [
+      "getCampaign",
+      "saveCampaign",
+      "updateCampaign",
+      "getCampaignItems",
+      "getCampaignPlaceHolders"
+    ]),
+    SaveData() {
+      this.wait = true;
+      if (this.isNew) {
+        this.campaign.isTimeshare = false;
+        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));
+        this.campaign.weekId = null;
+        this.saveCampaign(this.campaign)
+          .then(fulfilled => {
+            this.$router.push("/landingPages");
+          })
+          .catch(error => {
+            console.log(error.message);
+          });
+      } else {
+        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.PlaceHolders = myList;
+      this.campaign.placeHolders = this.PlaceHolders;
+      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;
+    // },
+    AddNewProperty(property) {
+      var item = {
+        image: property.image,
+        reference: property.property.reference,
+        propertyId: property.propertyId,
+        placeHolders: property.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.passedDown) {
+        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;
+      }
+    },
+    PlaceHolders() {
+      if (this.campaign && this.campaign.placeHolders) {
+        return this.campaign.placeHolders;
+      }
+      return this.placeHolders;
+    },
+    Properties() {
+      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>

src/components/marketing/landingPageWeek.vue

@@ -1,69 +1,67 @@
 <template>
   <div>
-    <div class="row">
-      <div class="col-md-12" v-if="message !== undefined">
-        <Alert :text="message" :type="'ERROR'" />
-      </div>
-    </div>
-    <div class="container col-md-12" style="text-align:left">
-      <div class="form-group row">
-        <div class="col-md-2">
-          <label>Find Week</label>
-          <button
-            type="button"
-            class="input-group-text fa fa-search"
-            style="color: #60CBEB"
-            @click="SearchWeeks()"
-          ></button>          
-          <modal name="weeksearch"  :width="700" :height="900" >
-            <Search :name="'Timeshare'" @onSelected="onSelected" />
-          </modal>          
-        </div>
-        <div class="col-md-3">
-          <input class="form-control" type="label" disabled :value="weekUni" />
+    <div v-if="loaded">
+      <div class="row">
+        <div class="col-md-12" v-if="message !== undefined">
+          <Alert :text="message" :type="'ERROR'" />
         </div>
-        <div class="col-md-2">
-          <label>Upload Image?</label>
-          <div class="custom-control custom-switch">
-            <input
-              type="checkbox"
-              class="custom-control-input"
-              id="customSwitch1"
-              :checked="uploadImage"
-              @change="checkImage"
-            />
-            <label class="custom-control-label" for="customSwitch1">{{uploadImage ? 'Yes' : 'No'}}</label>
+      </div>
+      <div class="container col-md-12" style="text-align:left">
+        <div class="form-group row">
+          <div class="col-md-3">
+            <button type="button" class="btn-solid-blue" @click="SearchWeeks()">
+              FIND WEEK
+            </button>
+            <modal name="weeksearch" :width="700" :height="900">
+              <Search :name="'Timeshare'" @onSelected="onSelected" />
+            </modal>
           </div>
-        </div>
-        <div class="col-md-3">
-          <Images v-if="uploadImage" :allowMultiple="false" :loadedImages="LoadedImages" />
-          <input
-            v-else
-            class="form-control"
-            type="text"
-            placeholder="image url"
-            v-model="weekItem.imageUrl"
-          />
-        </div>
-        <div class="col-md-2">
-          <label>Custom Place holders</label>
-          <div class="custom-control custom-switch">
+          <div class="col-md-2 mt-3">
+            <input class="form-control" type="label" disabled :value="weekUni" />
+          </div>
+          <div class="col-md-2">
+            <label>Upload Image?</label>
+            <div class="custom-control custom-switch">
+              <input
+                type="checkbox"
+                class="custom-control-input"
+                id="customSwitch1"
+                :checked="uploadImage"
+                @change="checkImage"
+              />
+              <label class="custom-control-label" for="customSwitch1">{{
+                uploadImage ? "Yes" : "No"
+              }}</label>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <Images v-if="uploadImage" :allowMultiple="false" :loadedImages="LoadedImages" />
             <input
-              type="checkbox"
-              class="custom-control-input"
-              id="customSwitch2"
-              :checked="showPlaceholder"
-              @change="ShowFields"
+              v-else
+              class="form-control"
+              type="text"
+              placeholder="image url"
+              v-model="weekItem.imageUrl"
             />
-            <label
-              class="custom-control-label"
-              for="customSwitch2"
-            >{{showPlaceholder ? 'Yes' : 'No'}}</label>
+          </div>
+          <div class="col-md-2">
+            <label>Custom Place holders</label>
+            <div class="custom-control custom-switch">
+              <input
+                type="checkbox"
+                class="custom-control-input"
+                id="customSwitch2"
+                :checked="showPlaceholder"
+                @change="ShowFields"
+              />
+              <label class="custom-control-label" for="customSwitch2">{{
+                showPlaceholder ? "Yes" : "No"
+              }}</label>
+            </div>
           </div>
         </div>
-      </div>
-      <hr v-if="showPlaceholder" />
-      <!-- <div class="form-group row">
+        <hr v-if="showPlaceholder" />
+        <!-- <div class="form-group row">
         <div class="col-md-5">
           <button
             type="button"
@@ -72,55 +70,50 @@
           >Add Custom Place Holders</button>
         </div>
       </div>-->
-      <div class="form-group row">
-        <div class="col-md-12" v-if="messageCPH !== undefined">
-          <Alert :text="messageCPH" :type="'ERROR'" />
-        </div>
-      </div>
-      <div class="form-group row" v-if="showPlaceholder">
-        <div class="col-md-2">
-          <label>Place Holder</label>
-        </div>
-        <div class="col-md-3">
-          <input class="form-control" type="text" v-model="placeHolder" />
-        </div>
-        <div class="col-md-2">
-          <label>Value</label>
-        </div>
-        <div class="col-md-3">
-          <input class="form-control" type="text" v-model="value" />
+        <div class="form-group row">
+          <div class="col-md-12" v-if="messageCPH !== undefined">
+            <Alert :text="messageCPH" :type="'ERROR'" />
+          </div>
         </div>
-        <div class="col-md-2">
-          <button
-            type="button"
-            @click="AddCustomHolder()"
-            class="btn btn-primary myBackground"
-            style="width: 85px; height:40px;"
-          >Add</button>
+        <div class="form-group row" v-if="showPlaceholder">
+          <div class="col-md-2">
+            <label>Place Holder</label>
+          </div>
+          <div class="col-md-3">
+            <input class="form-control" type="text" v-model="placeHolder" />
+          </div>
+          <div class="col-md-2">
+            <label>Value</label>
+          </div>
+          <div class="col-md-3">
+            <input class="form-control" type="text" v-model="value" />
+          </div>
+          <div class="col-md-2">
+            <button type="button" @click="AddCustomHolder()" class="btn-solid-blue">
+              Add
+            </button>
+          </div>
         </div>
-      </div>
-      <div class="form-group row" v-if="showPlaceholder">
-        <div class="col-md-12">
-          <ListView
-            :items="placeHolders"
-            :hideSearch="true"
-            :showColumnChooser="false"
-            :showNew="false"
-            :allowMultipleSelect="false"
-            :canEdit="false"
-            :deleteable="true"
-            @onDelete="onItemDelete"
-          />
+        <div class="form-group row" v-if="showPlaceholder">
+          <div class="col-md-12">
+            <ListView
+              :items="placeHolders"
+              :hideSearch="true"
+              :showColumnChooser="false"
+              :showNew="false"
+              :allowMultipleSelect="false"
+              :canEdit="false"
+              :deleteable="true"
+              @onDelete="onItemDelete"
+            />
+          </div>
         </div>
-      </div>
-      <div class="form-group row">
-        <div class="col-md-1 offset-md-11">
-          <button
-            type="button"
-            @click="SaveData()"
-            class="btn btn-primary myBackground"
-            style="width: 85px; height:40px;"
-          >Add</button>
+        <div class="form-group row">
+          <div class="col-md-1 offset-md-11">
+            <button type="button" @click="SaveData()" class="btn-solid-blue">
+              Add
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -128,6 +121,7 @@
 </template>
 
 <script>
+/* eslint-disable */
 import Search from "../admin/misc/carouselSearch.vue";
 import Images from "../property/propertyImage.vue";
 import { mapState, mapActions } from "vuex";
@@ -144,6 +138,7 @@ export default {
   },
   data() {
     return {
+      loaded: false,
       uploadImage: false,
       message: undefined,
       messageCPH: undefined,
@@ -161,13 +156,13 @@ export default {
   },
   methods: {
     ...mapActions("campaignItem", ["getCampaignItem"]),
-    SearchWeeks(){
+    SearchWeeks() {
       this.$modal.show("weeksearch");
     },
-    onSelected(item) {            
+    onSelected(item) {
       this.weekItem.selectedWeek = item[0];
-      this.weekUni = item[0].weekUni; 
-      this.$modal.hide("weeksearch");           
+      this.weekUni = item[0].weekUni;
+      this.$modal.hide("weeksearch");
     },
     checkImage(item) {
       this.uploadImage = !this.uploadImage;
@@ -181,10 +176,7 @@ export default {
       if (this.weekItem.selectedWeek === undefined) {
         msg += "Please select a week. ";
       }
-      if (
-        this.weekItem.image === undefined &&
-        this.weekItem.imageUrl === undefined
-      ) {
+      if (this.weekItem.image === undefined && this.weekItem.imageUrl === undefined) {
         msg += "Please select an image for this week. ";
       }
       if (msg.length > 0) {
@@ -233,14 +225,22 @@ export default {
     },
     onItemDelete(item) {
       this.placeHolders = _.remove(this.placeHolders, x => x !== item);
+    },
+    async loadData() {
+      if (this.$route.params.id) {
+        await this.getCampaignItem(this.$route.params.id);
+      }
     }
   },
   mounted() {
-    this.getCampaignItem(this.$route.params.id);
+    this.loadData().then(() => {
+      setTimeout(() => {
+        this.loaded = true;
+      }, 100);
+    });
   },
   computed: {
     ...mapState("campaignItem", ["campaignItem"])
   }
 };
 </script>
-

src/components/marketing/landingPages.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- eslint-disable max-len -->
   <main id="main" style="margin-top:-20px; padding-bottom:50px">
-    <div class="container">
+    <div v-if="loaded" class="container">
       <div class="row">
         <div class="col-md-12 col-lg-8">
           <div class="section-header">
@@ -33,6 +33,7 @@
         </div>
       </div>
     </div>
+    <div v-else id="preloader"></div>
   </main>
 </template>
 
@@ -53,7 +54,8 @@ export default {
   data() {
     return {
       columns: ["name", "startDate", "endDate", "subject"],
-      formats: ["text", "date", "date", "text"]
+      formats: ["text", "date", "date", "text"],
+      loaded: false
     };
   },
   methods: {
@@ -68,15 +70,20 @@ export default {
     //   this.publishProperty(item);
     // }
     New() {
-      this.$router.push("/landingPage/0");
+      this.$router.push("/newLandingPage");
     },
     ClientVue(item) {
       this.$router.push(`/MarketingCampaign/${item.id}`);
+    },
+    async loadData() {
+      await this.getCampaigns();
+      await this.$emit("setLandingPage", false);
     }
   },
   mounted() {
-    this.getCampaigns();
-    this.$emit("setLandingPage", false);
+    this.loadData().then(() => {
+      this.loaded = true;
+    });
   },
   computed: {
     ...mapState("campaign", ["campaigns"]),

src/components/marketing/newLandingPage.vue

@@ -0,0 +1,46 @@
+<template>
+  <main id="main" style="margin-top:200px; padding-bottom:50px">
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>Landing Page</h2>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-6">
+          <select name="landingType" class="form-control uniSelect" v-model="selectedType">
+            <option value="property">Property Campaign</option>
+            <option value="timeshare">Timeshare Campaign</option>
+          </select>
+        </div>
+      </div>
+      <div v-if="selectedType === 'property'" class="row">
+        <propertyLanding passedDown="0" />
+      </div>
+      <div v-if="selectedType === 'timeshare'" class="row">
+        <timeshareLanding passedDown="0" />
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import propertyLanding from "./landingPageProperty";
+import timeshareLanding from "./landingPage";
+export default {
+  components: {
+    propertyLanding,
+    timeshareLanding
+  },
+  data() {
+    return {
+      selectedType: ""
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/shared/navBar.vue

@@ -312,10 +312,10 @@
                         <router-link to="/payments">Payments</router-link>
                       </li>
                       <li v-if="ROLE === 'Super Admin'">
-                        <router-link to="/landingPages">Landing Pages / Campaignes</router-link>
+                        <router-link to="/campaignUpload">Landing Pages / Campaignes</router-link>
                       </li>
                       <li v-if="ROLE === 'Designer'">
-                        <router-link to="/landingPages">Landing Pages / Campaignes</router-link>
+                        <router-link to="/campaignUpload">Landing Pages / Campaignes</router-link>
                       </li>
                       <li>
                         <router-link class="btn-white-border p-2" to="/user/login"

src/router/index.js

@@ -95,8 +95,11 @@ import PaymentOption from '../components/financial/paymentOption.vue'
 import EFTPage from '../components/financial/eftPage.vue'
 import PayFast from '../components/financial/payFast.vue'
 
+import CampaignUpload from '../components/marketing/campaignUpload.vue'
 import LandingPages from "../components/marketing/landingPages.vue";
 import LandingPage from "../components/marketing/landingPage.vue";
+import LandingPageProperty from "../components/marketing/landingPageProperty.vue";
+import NewLandingPage from '../components/marketing/newLandingPage.vue'
 import LandingPageWeek from "../components/marketing/landingPageWeek.vue";
 import MarketingPage from "../components/marketing/clientView.vue";
 import MarketingPageExp from "../components/marketing/landingPageExpired.vue";
@@ -458,16 +461,31 @@ export default new Router({
       name: "Payments",
       component: Payments
     },
+    {
+      path: "/campaignUpload",
+      name: "CampaignUpload",
+      component: CampaignUpload
+    },
     {
       path: "/landingPages",
       name: "LandingPages",
       component: LandingPages
     },
+    {
+      path: "/newLandingPage",
+      name: "newLandingPage",
+      component: NewLandingPage
+    },
     {
       path: "/landingPage/:id",
       name: "LandingPage",
       component: LandingPage
     },
+    {
+      path: "/landingPageProperty/:id",
+      name: "LandingPageProperty",
+      component: LandingPageProperty
+    },
     {
       path: "/landingPage/week/:id",
       name: "LandingPageWeek",

src/store/modules/communication/info.js

@@ -20,10 +20,10 @@ export default {
   },
   getters: {},
   actions: {
-    init({
+    async init({
       dispatch,
     }) {
-      dispatch('clearAll');
+      await dispatch('clearAll');
       dispatch('getClasses');
     },
     getClasses({
@@ -42,5 +42,9 @@ export default {
         .then(result => commit('setProperties', result.data))
         .catch(ex => console.log(ex.response));
     },
+    clearAll({commit}){
+     console.log("it was here");
+      commit('clearAll')
+    }
   },
 };

src/store/modules/marketing/campaigns.js

@@ -1,5 +1,7 @@
+/* eslint-disable */
 import axios from "axios";
 import { Object } from "core-js";
+import promise from "core-js/fn/promise";
 
 export default {
     namespaced: true,
@@ -9,7 +11,8 @@ export default {
         campaignDTO: {},
         campaignHtml: '',
         campaignPlaceHolders: [],
-        campaignItems: []
+        campaignItems: [],
+        uploadedCampaigns: []
     },
     mutations: {
         setCampaign(state, campaign) {
@@ -36,6 +39,13 @@ export default {
         },
         setCampaignHTML(state, campaign) {
             state.campaignHtml = campaign;
+        },
+        setUploadedCampaigns(state, campaigns){
+            state.uploadedCampaigns = campaigns
+        },
+        deleteUploadedById(state, id){
+            var index = state.uploadedCampaigns.findIndex((camp) => camp.id == id)
+            state.uploadedCampaigns.splice(index, 1)
         }
     },
     getters: {},
@@ -93,6 +103,48 @@ export default {
                 .delete(`/api/campaign/${id}`)
                 .then(result => commit("removeCampaign", id))
                 .catch(console.error);
+        },
+        async uploadCampaign({commit}, file){
+            return await new Promise((resolve, reject) => {
+                axios({
+                    method: 'post',
+                    url: '/api/campaign/FileUpload',
+                    data: file,
+                    headers: { 'Content-Type': 'multipart/form-data' },
+                  }).then((resp) => {
+                    resolve(resp.data)
+                  }).catch((ex) => {
+                    reject(ex.response)
+                  })
+            })
+            
+        },
+        async getUploadedCampaign({commit}){
+            return await new Promise((resolve, reject) => {
+                 axios.get(`/api/campaign/GetUploaded`)
+                .then((resp) => {
+                    resolve(resp)
+                    commit("setUploadedCampaigns", resp.data)
+                })
+                .catch((ex) => {
+                    reject(ex)
+                    console.log(ex.response);
+                })
+            })
+            
+        },
+        async deleteUploadedCampaign({commit}, id){
+            return await new Promise((resolve, reject) => {
+                axios.delete(`api/campaign/DeleteUploaded/`+ id)
+                .then((resp) => {
+                    commit("deleteUploadedById", id)
+                    resolve(resp)
+                })
+                .catch((ex) => {
+                    console.log(ex.response)
+                    reject(ex.response)
+                })
+            })
         }
     }
 };