Ui rework on Malls in Admin Pannel

src/app/admin/_commonCard.scss

@@ -1,115 +0,0 @@
-.common_card{
-    position: relative;
-    width: 25vw;
-    height: 100%;
-    border-radius: 10px;
-    margin: 10px;
-    z-index: 1;
-
-    &:before{
-        content: '';
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        box-shadow: 0 0 10px 1px var(--dark-grey);
-        filter: brightness(200%);
-        z-index: -1;
-        border-radius: 10px;
-    }
-}
-
-.card_header{
-    position: relative;
-    width: 100%;
-    height: 50px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    z-index: 1;
-    
-    &:before{
-        content: '';
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        background-color: var(--grey);
-        filter: brightness(150%);
-        z-index: -1;
-        border-radius: 10px 10px 0 0;
-
-    }
-
-    h4{
-        font-size: 18px;
-        color: var(--dark-grey);
-        margin: 0 20px;
-    }
-    
-    button{
-        width: 30px;
-        height: 30px;
-        padding: 0;
-        border-radius: 30px;
-        font-weight: 800;
-        font-size: 20px;
-        margin: 0 20px;
-    }
-}
-.card_upfold{
-    overflow: auto;
-    list-style: none;
-    height: 300px;
-
-    h5{
-        font-size: 16px;
-        color: var(--dark-grey);
-        padding: 5px 0;
-    }
-    p{
-        font-size: 14px;
-        color: var(--grey);
-        padding: 5px 0;
-    }
-
-    .cardList{
-        position: relative;
-        margin: 20px;
-        cursor: pointer;
-        z-index: 0;
-
-        &:before{
-            content: '';
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            background-color: var(--grey);
-            filter: brightness(160%);
-            z-index: -1;
-            transform: scale(105%);
-            border-radius: 10px;
-            border: 1px solid var(--grey);
-
-        }
-    }
-}
-
-::-webkit-scrollbar {
-    width: 5px;
-    border-radius: 10px;
-    background: var(--dark-grey);
-  }
-
-  ::-webkit-scrollbar-track {
-    background: white; 
-    border-radius: 10px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: var(--grey); 
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    border-radius: 10px;
-    background: var(--dark-grey); 
-  }

src/app/admin/admin.component.html

@@ -20,4 +20,5 @@
 
 <section class="malls">
     <app-malls></app-malls>
+    <app-vendors></app-vendors>
 </section>

src/app/admin/admin.component.scss

@@ -86,7 +86,7 @@
 
 .malls{
 	display: grid;
-	grid-template-columns: repeat(3, 1fr);
+	grid-template-columns: repeat(2, 1fr);
 
 	:nth-child(n){
 		margin: 30px;

src/app/admin/malls/malls.component.html

@@ -1,4 +1,4 @@
-<section class="common_card">
+<section class="card">
     <div class="card_header">
         <h4>Malls</h4>
         <div>
@@ -7,26 +7,26 @@
             <button class="rect-button" (click)='showModal = true'>+</button>
         </div>
     </div>
+
     <div class="card_upfold">
         <li *ngFor='let malls of allMalls' class="mallList">
-            <img src="{{malls.image_url}}">
+            <img src="{{malls.image_url}}" class="mall-img">
             <div class="upfold-content">
                 <h5> {{malls.mall_name}}</h5>
                 <p>{{malls.description}}</p>
-                {{showModal}}
-
-                <div>
-                    <span *ngIf='malls.outlet.length > 0'>Outlets: {{malls.outlet.length}}</span>
-                    <span *ngIf='malls.outlet.length === 0'>Outlets: 0</span>
-                    <span> Rating: {{malls.rating}} </span>
-                    <span> Location: {{malls.mall_address}}</span>
-                </div>
-
             </div>
+            <div>
+                <span>Id: {{malls.mall_id}}</span>
+                <span *ngIf='malls.outlet.length > 0'>Outlets: {{malls.outlet.length}} <img src="../../../assets/outlet.svg"></span>
+                <span *ngIf='malls.outlet.length === 0'>Outlets: 0 <img src="../../../assets/outlet.svg"></span>
+                <span> Rating: {{malls.rating}} <img src="../../../assets/star.svg"> </span>
+                <span>{{malls.mall_address}} <img src="../../../assets/location.svg"></span>
+            </div>
+            <img src="../../../assets/edit.svg" class="editsvg">
         </li>
     </div>
 
-    <div class="popUp">
+    <div class="popUp" *ngIf='showModal === true'>
         <div class="popup-box">
             <ul class="input-list">
                 <h4>Mall Details:</h4>
@@ -34,31 +34,31 @@
                 <div class="mallDetails">
                     <li>
                         <label>Name:</label>
-                        <input type="text" [(ngModel)]="newMall.mall_name" required>
+                        <input type="text" [(ngModel)]="newMall.mall_name">
                     </li>
                     <li>
                         <label>Description:</label>
-                        <input type="text" [(ngModel)]='newMall.description' required>
+                        <input type="text" [(ngModel)]='newMall.description'>
                     </li>
                     <li>
                         <label>Image:</label>
-                        <input type="text" [(ngModel)]='newMall.image_url' required>
+                        <input type="text" [(ngModel)]='newMall.image_url'>
                     </li>
                     <li>
                         <label>Address:</label>
-                        <input type="text" [(ngModel)]='newMall.mall_address' required>
+                        <input type="text" [(ngModel)]='newMall.mall_address'>
                     </li>
                     <li>
                         <label>Mall Distance:</label>
-                        <input type="number" [(ngModel)]='newMall.mall_distance' required>
+                        <input type="number" [(ngModel)]='newMall.mall_distance'>
                     </li>
                     <li>
                         <label>Rating:</label>
-                        <input type="number" [(ngModel)]='newMall.rating' required>
+                        <input type="number" [(ngModel)]='newMall.rating'>
                     </li>
                     <li>
                         <label>Offers Count:</label>
-                        <input type="number" [(ngModel)]='newMall.offers_count' required>
+                        <input type="number" [(ngModel)]='newMall.offers_count'>
                     </li>
                 </div>
 
@@ -66,19 +66,19 @@
                 <div class="addDetails">
                     <li>
                         <label>Created By</label>
-                        <input type="text" [(ngModel)]="newMall.advertisement.createdBy" required>
+                        <input type="text" [(ngModel)]="newMall.advertisement[0].createdBy">
                     </li>
                     <li>
                         <label>Image</label>
-                        <input type="text" [(ngModel)]="newMall.advertisement.image" required>
+                        <input type="text" [(ngModel)]="newMall.advertisement[0].image">
                     </li>
                     <li>
                         <label>Type</label>
-                        <input type="text" [(ngModel)]="newMall.advertisement.type" required>
+                        <input type="text" [(ngModel)]="newMall.advertisement[0].type">
                     </li>
                     <li>
                         <label>Updated By</label>
-                        <input type="text" [(ngModel)]="newMall.advertisement.updatedBy" required>
+                        <input type="text" [(ngModel)]="newMall.advertisement[0].updatedBy">
                     </li>
                 </div>
 
@@ -86,38 +86,46 @@
                 <div class="outletdistance">
                     <li>
                         <label>Outlet Name</label>
-                        <input type="text" [(ngModel)]="newMall.outlet.outlet_name" required>
+                        <input type="text" [(ngModel)]="newMall.outlet[0].outlet_name">
                     </li>
                     <li>
                         <label>Description</label>
-                        <input type="text" [(ngModel)]="newMall.outlet.description" required>
+                        <input type="text" [(ngModel)]="newMall.outlet[0].description">
                     </li>
                     <li>
                         <label>Outlet Timings</label>
-                        <input type="text" [(ngModel)]="newMall.outlet.outlet_timing" required>
+                        <input type="text" [(ngModel)]="newMall.outlet[0].outlet_timing">
                     </li>
                     <li>
                         <label>Image</label>
-                        <input type="text" [(ngModel)]="newMall.outlet.image_url" required>
+                        <input type="text" [(ngModel)]="newMall.outlet[0].image_url">
                     </li>
                     <li>
                         <label>Outlet GST</label>
-                        <input type="number" [(ngModel)]="newMall.outlet.outlet_Gst" required>
+                        <input type="number" [(ngModel)]="newMall.outlet[0].outlet_Gst">
                     </li>
                     <li>
                         <label>Outlet Type</label>
-                        <input type="text" [(ngModel)]="newMall.outlet.outlet_type" required>
+                        <input type="text" [(ngModel)]="newMall.outlet[0].outlet_type">
                     </li>
                     <li>
                         <label>Rating</label>
-                        <input type="number" [(ngModel)]="newMall.outlet.rating" required>
+                        <input type="number" [(ngModel)]="newMall.outlet[0].rating">
                     </li>
                 </div>
             </ul>
 
             <div class="action-buttons">
                 <button class="rect-button cancel" (click)="showModal = false">Cancel</button>
-                <button class="rect-button" (click)="addMall()">Add</button>
+                <button class="rect-button" [ngClass]='{disable: ((newMall.mall_name.length && newMall.mall_address.length && 
+                            newMall.image_url.length && 
+                            newMall.advertisement[0].createdBy &&
+                            newMall.advertisement[0].image.length &&
+                            newMall.advertisement[0].type &&
+                            newMall.outlet[0].outlet_name &&
+                            newMall.outlet[0].image_url) === 0)}' (click)="addMall()" [disabled]='(newMall.mall_name.length && newMall.mall_address.length && newMall.image_url.length &&
+                    newMall.advertisement[0].createdBy.length && newMall.advertisement[0].image.length && newMall.advertisement[0].type.length &&
+                    newMall.outlet[0].outlet_name.length && newMall.outlet[0].image_url.length) === 0'>Add</button>
             </div>
         </div>
     </div>

src/app/admin/malls/malls.component.scss

@@ -1,16 +1,10 @@
-@import '../commonCard';
-
-.common_card {
-    width: 100%;
-}
-
 .card_header {
     div {
         display: flex;
         align-items: center;
 
         input {
-            width: 150px;
+            width: 200px;
             height: 32px;
             border: none;
             border-radius: 10px;
@@ -22,66 +16,96 @@
 
 }
 
-.mallList {
-    display: flex;
-    align-items: center;
-    position: relative;
-    margin: 20px;
-
-    &:before {
-        content: '';
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        background-color: var(--grey);
-        filter: brightness(160%);
-        z-index: -1;
-        border-radius: 10px;
-        border: 1px solid var(--grey);
-    }
+.card_upfold{
+    overflow: auto;
+    list-style: none;
+    height: 300px;
 
-    img {
-        width: 100px;
-        height: 100px;
-        border-radius: 10px;
-    }
-
-    .upfold-content {
-        padding: 0 10px;
+    .mallList {
+        display: flex;
+        align-items: center;
         position: relative;
+        margin: 20px;
 
-        p {
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            width: 300px;
+        &:before {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: var(--grey);
+            filter: brightness(160%);
+            z-index: -1;
+            border-radius: 10px;
+            border: 1px solid var(--grey);
         }
 
-        .rating {
-            i {
+        .mall-img {
+            width: 100px;
+            height: 100px;
+            border-radius: 10px;
+        }
 
-                color: var(--grey);
+        .editsvg{
+            border: 2px solid var(--brand-blue);
+            border-radius: 50px;
+            padding: 4px;
+            margin: 20px;
+            width: 30px;
+            transform: scale(100%);
+            transition: 0.2s transform ease-in;
+            cursor: pointer;
+            margin-right: 30px;
+
+            &:hover{
+                transform: scale(110%);
+                transition: 0.2s all ease-in;
             }
         }
 
-        div {
-            display: flex;
-            align-items: center;
+        .upfold-content {
+            padding: 0 10px;
+            position: relative;
+            width: 100%;
+            width: 90%;
+
+            h5{
+                font-size: 16px;
+                color: var(--dark-grey);
+                padding: 5px 0;
+            }
+            
+            p {
+                font-size: 14px;
+                color: var(--grey);
+                overflow: hidden;
+                width: 300px;
+                height: 55px;
+                width: 400px;
+                font-weight: 500;
+            }
+        }
 
+        div{
             span {
-                margin: 10px 0;
+                width: 100%;
                 margin-right: 10px;
                 color: var(--grey);
+                font-size: 15px;
+                font-weight: 500;
+                display: inline-flex;
 
-                img {
-                    width: 10px;
-                    height: 10px;
+                img{
+                    display: block;
+                    width: 15px;
+                    margin-left: 5px;
                 }
             }
+
         }
     }
 }
 
+
 .popUp {
     position: fixed;
     width: 100%;
@@ -181,6 +205,11 @@
                 border: 2px solid var(--brand-blue);
                 color: var(--brand-blue);
             }
+
+            &.disable {
+                cursor: not-allowed;
+                filter: grayscale(1);
+            }
         }
 
         li {

src/app/admin/malls/malls.component.ts

@@ -17,68 +17,75 @@ export class MallsComponent implements OnInit {
   tempMalls: any = [];
 
   showModal: boolean = false;
-  toggleAdd: boolean = false;
 
   newMall: {
-    advertisement: {
-      adv_type: true,
-      createdBy: string,
-      createdOn: string,
-      image: string,
-      soft_delete: true,
-      type: string,
-      updatedBy: string,
-      updatedOn: string,
-    },
+    advertisement: [
+      {
+        adv_type: true,
+        createdBy: string,
+        createdOn: string,
+        image: string,
+        soft_delete: true,
+        type: string,
+        updatedBy: string,
+        updatedOn: string,
+      }
+    ],
     description: string,
     image_url: string,
     is_bookmarked: true,
     mall_address: string,
-    mall_distance: number,
+    mall_distance: 0,
     mall_name: string,
-    offers_count: number,
-    outlet: {
-      description: string,
-      image_url: string,
-      is_bookmarked: true,
-      outlet_Gst: 0,
-      outlet_id: 0,
-      outlet_name: string,
-      outlet_timing: string,
-      outlet_type: string,
-      rating: number,
-    },
-    rating: number,
+    offers_count: 0,
+    outlet: [
+      {
+        description: string,
+        image_url: string,
+        is_bookmarked: true,
+        outlet_Gst: number,
+        outlet_id: number,
+        outlet_name: string,
+        outlet_timing: string,
+        outlet_type: string,
+        rating: number
+      }
+    ],
+    rating: 0,
     soft_delete: true
   } = {
-      advertisement: {
-        adv_type: true,
-        createdBy: '',
-        createdOn: '',
-        image: '',
-        soft_delete: true,
-        type: '',
-        updatedBy: '',
-        updatedOn: '',
-      },
-      description: '',
-      image_url: '',
+      advertisement: [
+        {
+          adv_type: true,
+          createdBy: "",
+          createdOn: "2021-10-26T12:19:53.071Z",
+          image: "",
+          soft_delete: true,
+          type: "",
+          updatedBy: "",
+          updatedOn: "2021-10-26T12:19:53.071Z"
+        }
+      ],
+      description: "",
+      image_url: "",
       is_bookmarked: true,
-      mall_address: '',
+      mall_address: "",
       mall_distance: 0,
-      mall_name: '',
+      mall_name: "",
       offers_count: 0,
-      outlet: {
-        description: '',
-        image_url: '',
-        is_bookmarked: true,
-        outlet_Gst: 0,
-        outlet_id: 0,
-        outlet_name: '',
-        outlet_timing: '',
-        outlet_type: '',
-        rating: 0,
-      },
+      outlet: [
+        {
+          description: "",
+          image_url: "",
+          is_bookmarked: true,
+          outlet_Gst: 0,
+          outlet_id: 0,
+          outlet_name: "",
+          outlet_timing: "2021-10-26T12:19:53.071Z",
+          outlet_type: "",
+          rating: 0
+        }
+      ],
       rating: 0,
       soft_delete: true
     }
@@ -90,7 +97,6 @@ export class MallsComponent implements OnInit {
 
   ngOnInit() {
     this.getAllMalls()
-    console.log(this.currentTime)
   }
 
   getAllMalls() {
@@ -100,10 +106,10 @@ export class MallsComponent implements OnInit {
         arrayofMalls.push(data.mall)
       })
       this.allMalls = arrayofMalls;
+      console.log(arrayofMalls)
       this.tempMalls = arrayofMalls;
       localStorage.allMalls = JSON.stringify(arrayofMalls)
 
-      console.log(this.allMalls)
     }, (error) => {
       console.log("Error getting Malls", error)
     })
@@ -120,6 +126,15 @@ export class MallsComponent implements OnInit {
   }
 
   addMall() {
+
+    this.mallService.addNewMall(this.newMall).then(response => {
+      alert("Mall Added Successfully")
+      this.showModal = false;
+      console.log(response)
+    }, () => {
+      console.log("Error Adding New Mall")
+    })
+
     console.log(this.newMall)
   }
 }

src/app/admin/notificaiton/notificaiton.component.html

@@ -1,4 +1,4 @@
-<section class="common_card">
+<section class="card">
     <div class="card_header">
         <h4>Notification</h4>
         <button class="rect-button">+</button>

src/app/admin/notificaiton/notificaiton.component.scss

@@ -1 +1,37 @@
-@import '../commonCard'
+.card_upfold{
+    overflow: auto;
+    list-style: none;
+    height: 300px;
+
+    h5{
+        font-size: 16px;
+        color: var(--dark-grey);
+        padding: 5px 0;
+    }
+    p{
+        font-size: 14px;
+        color: var(--grey);
+        padding: 5px 0;
+    }
+
+    .cardList{
+        position: relative;
+        margin: 20px;
+        cursor: pointer;
+        z-index: 0;
+
+        &:before{
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: var(--grey);
+            filter: brightness(160%);
+            z-index: -1;
+            transform: scale(105%);
+            border-radius: 10px;
+            border: 1px solid var(--grey);
+
+        }
+    }
+}

src/app/admin/queries/queries.component.html

@@ -1,4 +1,4 @@
-<section class="common_card">
+<section class="card">
     <div class="card_header">
         <h4>Queries</h4>
         <button class="rect-button">+</button>

src/app/admin/queries/queries.component.scss

@@ -1 +1,37 @@
-@import "../commonCard";
+.card_upfold{
+    overflow: auto;
+    list-style: none;
+    height: 300px;
+
+    h5{
+        font-size: 16px;
+        color: var(--dark-grey);
+        padding: 5px 0;
+    }
+    p{
+        font-size: 14px;
+        color: var(--grey);
+        padding: 5px 0;
+    }
+
+    .cardList{
+        position: relative;
+        margin: 20px;
+        cursor: pointer;
+        z-index: 0;
+
+        &:before{
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: var(--grey);
+            filter: brightness(160%);
+            z-index: -1;
+            transform: scale(105%);
+            border-radius: 10px;
+            border: 1px solid var(--grey);
+
+        }
+    }
+}

src/app/admin/support-tickets/support-tickets.component.html

@@ -1,4 +1,4 @@
-<section class="common_card">
+<section class="card">
     <div class="card_header">
         <h4>Support Ticket</h4>
         <button class="rect-button">+</button>

src/app/admin/support-tickets/support-tickets.component.scss

@@ -1 +1,37 @@
-@import '../commonCard'
+.card_upfold{
+    overflow: auto;
+    list-style: none;
+    height: 300px;
+
+    h5{
+        font-size: 16px;
+        color: var(--dark-grey);
+        padding: 5px 0;
+    }
+    p{
+        font-size: 14px;
+        color: var(--grey);
+        padding: 5px 0;
+    }
+
+    .cardList{
+        position: relative;
+        margin: 20px;
+        cursor: pointer;
+        z-index: 0;
+
+        &:before{
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: var(--grey);
+            filter: brightness(160%);
+            z-index: -1;
+            transform: scale(105%);
+            border-radius: 10px;
+            border: 1px solid var(--grey);
+
+        }
+    }
+}

src/app/admin/vendors/vendors.component.html

@@ -0,0 +1,20 @@
+<section class="card">
+    <div class="card_header">
+        <h4>Vendors</h4>
+        <div>
+            <input type="text" placeholder="Search Vendors" [(ngModel)]="searchTerm" (input)="searchAllMalls()"
+                autocomplete="off" #searchbar>
+            <button class="rect-button" (click)='showModal = true'>+</button>
+        </div>
+    </div>
+    <div class="card_upfold">
+        <li *ngFor='let vendor of vendors' class="vendorList">
+            <img src="{{vendor.vendorImageLink}}">
+            <div class="upfold-content">
+                <h5>Id:{{vendor.vendor_Id}}   {{vendor.vendorName}}</h5>
+                <span>Ph: {{vendor.vendorOfficeNo}}</span>
+            </div>
+        </li>
+    </div>
+
+</section>

src/app/admin/vendors/vendors.component.scss

@@ -0,0 +1,248 @@
+.card {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    margin: 10px;
+    z-index: 0;
+
+    &:before{
+        content: '';
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        box-shadow: 0 0 10px 1px var(--dark-grey);
+        filter: brightness(200%);
+        z-index: -1;
+        border-radius: 10px;
+    }
+}
+
+.card_header {
+    div {
+        display: flex;
+        align-items: center;
+
+        input {
+            width: 200px;
+            height: 32px;
+            border: none;
+            border-radius: 10px;
+            padding: 10px;
+            box-shadow: 0 0 3px 0px var(--grey);
+            font-weight: 500;
+        }
+    }
+
+}
+
+.vendorList {
+    display: flex;
+    align-items: center;
+    position: relative;
+    margin: 20px;
+
+    &:before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-color: var(--grey);
+        filter: brightness(160%);
+        z-index: -1;
+        border-radius: 10px;
+        border: 1px solid var(--grey);
+    }
+
+    img {
+        width: 100px;
+        height: 100px;
+        border-radius: 10px;
+    }
+
+    .upfold-content {
+        padding: 0 10px;
+        position: relative;
+
+        p {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            width: 300px;
+        }
+
+        .rating {
+            i {
+
+                color: var(--grey);
+            }
+        }
+
+        div {
+            display: flex;
+            align-items: center;
+
+            span {
+                margin: 10px 0;
+                margin-right: 10px;
+                color: var(--grey);
+
+                img {
+                    width: 10px;
+                    height: 10px;
+                }
+            }
+        }
+    }
+}
+
+.popUp {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(0, 0, 0, 0.5);
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    
+    .popup-box {
+        width: 400px;
+        padding: 0 15px;
+        background: white;
+        border-radius: 10px;
+        height: 60vh;
+        overflow: auto;
+        border: 10px solid white;
+
+        .input-list {
+            list-style: none;
+            padding: 0;
+
+            h4{
+                display: block;
+                font-size: 18px;
+                color: dimgrey;
+                font-weight: 500;
+                margin-left: -5px;
+                position: sticky;
+                top: 0;
+                z-index: 1;
+                height: 30px;
+
+                
+                &:before{
+                    content: '';
+                    width: 100%;
+                    position: absolute;
+                    height: 100%;
+                    background-color: white;
+                    z-index: -1;
+                    transform: scale(105%);
+                }
+            }
+        }
+
+        .action-buttons{
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 10px;
+            position: sticky;
+            bottom: 0;
+            z-index: 1;
+            height: 50px;
+
+
+            &:before{
+                content: '';
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                background-color: white;
+                z-index: -1;
+                transform: scale(115%);
+            }
+        }
+
+        .mallDetails, .addDetails, .outletdistance{
+            position: relative;
+            margin-top: 20px;
+            margin-bottom: 30px;
+            
+            &:before{
+                content: '';
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                background-color: gainsboro;
+                border-radius: 7px;
+                transform: scale(105%);
+                filter: brightness(105%);
+            }
+        }
+
+        button{
+            margin: 0 20px;
+            width: 100px;
+            text-align: center;
+            
+            &.cancel{
+                background-color: white;
+                border: 2px solid var(--brand-blue);
+                color: var(--brand-blue);
+            }
+
+            &.disable {
+                cursor: not-allowed;
+                filter: grayscale(1);
+            }
+        }
+
+        li {
+            text-align: left;
+            margin: 10px 0;
+            position: relative;
+
+            label {
+                display: block;
+                font-size: 14px;
+                color: dimgrey;
+                font-weight: 500;
+            }
+
+            img {
+                width: 100px;
+                height: 100px;
+                border-radius: 10px;
+                box-shadow: 0px 0px 5px var(--grey);
+                margin: 0 auto;
+                display: block;
+            }
+
+            input {
+                width: 100%;
+                display: block;
+                height: 40px;
+                border-radius: 5px;
+                border: 2px solid var(--grey);
+                margin-top: 10px;
+                padding: 0 10px;
+                font-size: 16px;
+
+                &:focus {
+                    border-color: var(--brand-blue);
+                }
+            }
+
+            .toggle {
+                margin: 0;
+                margin-top: 10px;
+                cursor: pointer;
+            }
+        }
+    }
+}

src/app/admin/vendors/vendors.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VendorsComponent } from './vendors.component';
+
+describe('VendorsComponent', () => {
+  let component: VendorsComponent;
+  let fixture: ComponentFixture<VendorsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VendorsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VendorsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/vendors/vendors.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { VendorService } from 'src/app/services/vendor.service';
+
+@Component({
+  selector: 'app-vendors',
+  templateUrl: './vendors.component.html',
+  styleUrls: ['./vendors.component.scss']
+})
+export class VendorsComponent implements OnInit {
+
+  constructor(private vendorService: VendorService) { }
+
+  vendors: any
+
+  ngOnInit() {
+    this.getVendorInfo();
+  }
+
+  getVendorInfo() {
+    this.vendorService.getAllVendors().then(vendors => {
+      this.vendors = vendors
+      console.log(this.vendors)
+    }, () => {
+      console.log("Error Getting Vendors")
+    })
+  }
+
+}

src/app/app.module.ts

@@ -34,6 +34,7 @@ import { NotificaitonComponent } from './admin/notificaiton/notificaiton.compone
 import { SupportTicketsComponent } from './admin/support-tickets/support-tickets.component';
 import { QueriesComponent } from './admin/queries/queries.component';
 import { MallsComponent } from './admin/malls/malls.component';
+import { VendorsComponent } from './admin/vendors/vendors.component';
 
 @NgModule({
 	declarations: [
@@ -54,7 +55,8 @@ import { MallsComponent } from './admin/malls/malls.component';
 		NotificaitonComponent,
 		SupportTicketsComponent,
 		QueriesComponent,
-		MallsComponent
+		MallsComponent,
+		VendorsComponent
 	],
 	imports: [
 		BrowserModule,

src/app/services/malls.service.ts

@@ -35,4 +35,17 @@ export class MallsService {
 
     return await this.http.get(URL + '/api/maioraservice/mall/v1/latitude/' + latitude + '/longitude/' + longitude + '/check/', httpOptions).toPromise();
   }
+
+
+  async addNewMall(newMall: any) {
+    const httpOptions = {
+      headers: new HttpHeaders({
+        'Access-Control-Allow-Origin': '*',
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + localStorage.token
+      })
+    };
+
+    return await this.http.post(URL + '/api/maioraservice/Mall/v1/create/', newMall, httpOptions).toPromise();
+  }
 }

src/app/services/vendor.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { VendorService } from './vendor.service';
+
+describe('VendorService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: VendorService = TestBed.get(VendorService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/vendor.service.ts

@@ -0,0 +1,24 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { URL } from '../data/url';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class VendorService {
+
+  constructor(private http: HttpClient) { }
+
+  async getAllVendors() {
+    const httpOptions = {
+      headers: new HttpHeaders({
+        'Access-Control-Allow-Origin': '*',
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + localStorage.token
+      })
+    };
+
+    return await this.http.get(URL + "/api/maioraservice/vendor/getallVendorsInfo", httpOptions).toPromise()
+  }
+}

src/assets/edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#007bcc"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>

src/assets/location.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#9a9a9a"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>

src/assets/outlet.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#9a9a9a"><path d="M0 0h24v24H0z" fill="none"/><path d="M8.1 13.34l2.83-2.83L3.91 3.5c-1.56 1.56-1.56 4.09 0 5.66l4.19 4.18zm6.78-1.81c1.53.71 3.68.21 5.27-1.38 1.91-1.91 2.28-4.65.81-6.12-1.46-1.46-4.2-1.1-6.12.81-1.59 1.59-2.09 3.74-1.38 5.27L3.7 19.87l1.41 1.41L12 14.41l6.88 6.88 1.41-1.41L13.41 13l1.47-1.47z"/></svg>

src/assets/star.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#808080"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 7.13l.97 2.29.47 1.11 1.2.1 2.47.21-1.88 1.63-.91.79.27 1.18.56 2.41-2.12-1.28-1.03-.64-1.03.62-2.12 1.28.56-2.41.27-1.18-.91-.79-1.88-1.63 2.47-.21 1.2-.1.47-1.11.97-2.27M12 2L9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#9a9a9a"><path d="M0 0h24v24H0z" fill="none"/><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>

src/styles.scss

@@ -249,3 +249,90 @@ button {
 		}
 	}
 }
+
+.card{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    margin: 10px;
+    z-index: 1;
+
+    &:before{
+        content: '';
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        box-shadow: 0 0 10px 1px var(--dark-grey);
+        filter: brightness(200%);
+        z-index: -1;
+        border-radius: 10px;
+    }
+    
+    .card_header{
+        position: relative;
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        z-index: 1;
+        
+        &:before{
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: var(--grey);
+            filter: brightness(150%);
+            z-index: -1;
+            border-radius: 10px 10px 0 0;
+    
+        }
+    
+        h4{
+            font-size: 18px;
+            color: var(--dark-grey);
+            margin: 0 20px;
+        }
+        
+        button{
+            width: 30px;
+            height: 30px;
+            padding: 0;
+            border-radius: 30px;
+            font-weight: 800;
+            font-size: 20px;
+            margin: 0 20px;
+			transform: scale(100%);
+			transition: 0.2s all ease-in;
+
+			&:hover{
+                transform: scale(110%);
+                transition: 0.2s all ease-in;
+            }
+
+        }
+    }
+}
+
+::-webkit-scrollbar {
+    width: 5px;
+    border-radius: 10px;
+    background: var(--dark-grey);
+  }
+
+  ::-webkit-scrollbar-track {
+    background: white; 
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: var(--grey); 
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    border-radius: 10px;
+    background: var(--dark-grey); 
+  }