Added Vendors in Admin Pannel

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

@@ -0,0 +1,26 @@
+<section class="common_card">
+    <div class="card_header">
+        <h4>Vendors</h4>
+        <div>
+            <input type="text" placeholder="Search Malls" [(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="mallList">
+            <img src="{{malls.image_url}}">
+            <div class="upfold-content">
+                <h5> {{vendor.vendorName}}</h5>
+                <div>
+                    <span *ngIf='vendor.outlets.length > 0'>Outlets: {{vendor.outlets.length}}</span>
+                    <span *ngIf='vendor.outlets.length === 0'>Outlets: 0</span>
+                    <span> Rating: {{vendor.ratings}} </span>
+                    <span> Location: {{vendor.vendorAddress}}</span>
+                </div>
+
+            </div>
+        </li>
+    </div>
+
+</section>

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

@@ -1 +1,234 @@
 @import '../commonCard';
+
+.common_card {
+    width: 100%;
+}
+
+.card_header {
+    div {
+        display: flex;
+        align-items: center;
+
+        input {
+            width: 150px;
+            height: 32px;
+            border: none;
+            border-radius: 10px;
+            padding: 10px;
+            box-shadow: 0 0 3px 0px var(--grey);
+            font-weight: 500;
+        }
+    }
+
+}
+
+.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);
+    }
+
+    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.ts

@@ -10,14 +10,18 @@ export class VendorsComponent implements OnInit {
 
   constructor(private vendorService: VendorService) { }
 
-
-  vendorInfo: any
+  vendors: any
   ngOnInit() {
     this.getVendorInfo()
   }
 
-  getVendorInfo(){
-
+  getVendorInfo() {
+    this.vendorService.getAllVendors().then(vendors => {
+      this.vendors = vendors
+      console.log(vendors)
+    }, () => {
+      console.log("Error Getting Vendors")
+    })
   }
 
 }