Roles Final

src/components/financial/payments.vue

 <template>
-  <!-- eslint-disable max-len -->
   <main id="main" style="margin-top:-20px;padding-bottom:300px">
     <div class="container">
-      <div class="container">
-        <br />
-        <br />
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="section-header">
-              <h2>Payments</h2>
-            </div>
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="section-header">
+            <h2>Payments</h2>
           </div>
         </div>
       </div>
+      <div v-if="checkAccess" class="row">
+        <div class="col">
+          <listView
+            :items="payments"
+            :showNew="false"
+            :editable="true"
+            :deleteable="true"
+            @onEdit="Edit"
+            @onDelete="Delete"
+          />
+        </div>
+      </div>
+      <div v-else class="row">
+        <div class="col">
+          <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
+        </div>
+      </div>
     </div>
-    <div class="container">
-      <listView
-        :items="payments"
-        :showNew="false"
-        :editable="true"
-        :deleteable="true"
-        @onEdit="Edit"
-        @onDelete="Delete"
-      />
-    </div>
-    <br />
   </main>
 </template>
 
 <script>
+/* eslint-disable */
 import { mapState, mapActions } from "vuex";
-import listView from "../shared/listView.vue";
+
 import Log from "../../assets/Log";
+import alert from "../shared/alert";
+import listView from "../shared/listView.vue";
 
 export default {
   name: "PaymentList",
   components: {
-    listView
+    listView,
+    alert
   },
   data() {
     return {
     UserChanged() {
       this.getProperties(Object.assign(this.user.id));
       return this.user;
+    },
+    checkAccess() {
+      if (Log.getUser().role === "Super Admin") {
+        return true;
+      } else {
+        return false;
+      }
     }
   }
 };

src/components/marketing/landingPage.vue

 <template>
-  <div>
+  <main id="main" style="margin-top:200px; padding-bottom:50px">
     <div class="container">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="title-box-d">
-              <br />
-              <h1 class="title-d" style="text-align:left; font-size: 250%">Landing Page</h1>
-            </div>
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>Landing Page</h2>
           </div>
         </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">
-            <label>Campaign Name</label>
-            <input v-if="isNew" class="form-control" type="text" v-model="campaign.name" />
-            <FieldEditor v-else :type="'text'" v-model="campaign.name" :mayEdit="true" />
+            <float-label>
+              <input
+                class="form-control uniInput"
+                type="text"
+                v-model="campaign.name"
+                placeholder="CAMPAIGN NAME"
+              />
+            </float-label>
           </div>
           <div class="col-md-4">
-            <label>Start Date</label>
-            <input v-if="isNew" class="form-control" type="date" v-model="campaign.startDate" />
-            <FieldEditor v-else :type="'date'" v-model="campaign.startDate" :mayEdit="true" />
+            <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">
-            <label>End Date</label>
-            <input v-if="isNew" class="form-control" type="date" v-model="campaign.endDate" />
-            <FieldEditor v-else :type="'date'" v-model="campaign.endDate" :mayEdit="true" />
+            <float-label fixed label="END DATE">
+              <input class="form-control uniInput" type="date" v-model="campaign.endDate" />
+            </float-label>
           </div>
         </div>
-        <div class="form-goup row">
+        <div class="row mt-4">
           <div class="col-md-4">
-            <label>Subject</label>
-            <input v-if="isNew" class="form-control" type="text" v-model="campaign.subject" />
-            <FieldEditor v-else :type="'text'" v-model="campaign.subject" :mayEdit="true" />
+            <float-label>
+              <input
+                class="form-control uniInput"
+                type="text"
+                v-model="campaign.subject"
+                placeholder="SUBJECT"
+              />
+            </float-label>
           </div>
           <div class="col-md-4">
-            <label>Number of items per row</label>
-            <input v-if="isNew" class="form-control" type="number" v-model="campaign.itemsPerRow" />
-            <FieldEditor v-else :type="'number'" v-model="campaign.itemsPerRow" :mayEdit="true" />
+            <float-label>
+              <input
+                class="form-control uniInput"
+                type="number"
+                v-model="campaign.itemsPerRow"
+                placeholder="NUMBER OF ITEMS PER ROW"
+              />
+            </float-label>
           </div>
         </div>
         <br />
         <br />
         <br />
         <div class="form-group row">
-          <button
-            type="button"
-            @click="SaveData()"
-            class="btn btn-primary myBackground"
-            style="width: 85px; height:40px;"
-          >
+          <button type="button" @click="SaveData()" class="btn-solid-blue">
             Save
           </button>
-          <button
-            type="button"
-            @click="Close()"
-            class="btn btn-primary myBackground"
-            style="width: 85px; height:40px;"
-          >
+          <button type="button" @click="Close()" class="btn-solid-blue">
             Close
           </button>
         </div>
       </div>
       <div v-if="wait" id="preloader"></div>
     </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>
+  </main>
 </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";
     Search,
     LandingPageItems,
     ListView,
-    WeekAdd
+    WeekAdd,
+    alert
   },
   data() {
     return {
   },
   computed: {
     ...mapState("campaign", ["campaign", "campaignPlaceHolders", "campaignItems"]),
+    checkAccess() {
+      if (Log.getUser().role === "Super Admin") {
+        return true;
+      } else {
+        return false;
+      }
+    },
     PlaceHolders() {
       if (this.campaign && this.campaign.placeHolders) {
         return this.campaign.placeHolders;

src/components/marketing/landingPages.vue

   <!-- eslint-disable max-len -->
   <main id="main" style="margin-top:-20px; padding-bottom:50px">
     <div class="container">
-      <div class="container">
-        <br />
-        <br />
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="section-header">
-              <h2>Landing Pages</h2>
-            </div>
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="section-header">
+            <h2>Landing Pages</h2>
           </div>
         </div>
       </div>
+      <div v-if="checkAccess" class="row">
+        <div class="col">
+          <listView
+            @onNew="New"
+            @onEdit="Edit"
+            :items="campaigns"
+            :editable="true"
+            :deleteable="true"
+            :displayColumns="columns"
+            :displayFormats="formats"
+            :showCustomAction="true"
+            :CustomActionHeading="'Client View'"
+            :sortKey="'startDate'"
+            @onCustomClick="ClientVue"
+            @onDelete="Delete"
+          />
+        </div>
+      </div>
+      <div v-else class="row">
+        <div class="col">
+          <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
+        </div>
+      </div>
     </div>
-    <div class="container">
-      <listView
-        @onNew="New"
-        @onEdit="Edit"
-        :items="campaigns"
-        :editable="true"
-        :deleteable="true"
-        :displayColumns="columns"
-        :displayFormats="formats"
-        :showCustomAction="true"
-        :CustomActionHeading="'Client View'"
-        :sortKey="'startDate'"
-        @onCustomClick="ClientVue"
-        @onDelete="Delete"
-      />
-    </div>
-    <br />
   </main>
 </template>
 
 <script>
+/* eslint-disable */
 import { mapState, mapActions } from "vuex";
+
+import Log from "../../assets/Log";
+import alert from "../shared/alert";
 import listView from "../shared/listView.vue";
 
 export default {
   name: "LandingPages",
   components: {
-    listView
+    listView,
+    alert
   },
   data() {
     return {
     this.$emit("setLandingPage", false);
   },
   computed: {
-    ...mapState("campaign", ["campaigns"])
+    ...mapState("campaign", ["campaigns"]),
+    checkAccess() {
+      if (Log.getUser().role === "Super Admin") {
+        return true;
+      } else {
+        return false;
+      }
+    }
     // UserChanged() {
     //   this.getProperties(Object.assign(this.user.id));
     //   return this.user;