Added Vendors to Admin Pannel

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

@@ -22,7 +22,7 @@
                 <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">
+            <img src="../../../assets/edit.svg" class="editsvg" (click) = "selectedMall(malls)">
         </li>
     </div>
 

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

@@ -26,6 +26,7 @@
         align-items: center;
         position: relative;
         margin: 20px;
+        cursor: pointer;
 
         &:before {
             content: '';

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

@@ -19,6 +19,15 @@ export class MallsComponent implements OnInit {
   showModal: boolean = false;
 
   newMall: {
+    mall_name: string,
+    mall_address: string,
+    description: string,
+    image_url: string,
+    mall_distance: 0,
+    offers_count: 0,
+    is_bookmarked: true,
+    rating: 0,
+    soft_delete: true
     advertisement: [
       {
         adv_type: true,
@@ -31,13 +40,6 @@ export class MallsComponent implements OnInit {
         updatedOn: string,
       }
     ],
-    description: string,
-    image_url: string,
-    is_bookmarked: true,
-    mall_address: string,
-    mall_distance: 0,
-    mall_name: string,
-    offers_count: 0,
     outlet: [
       {
         description: string,
@@ -51,10 +53,18 @@ export class MallsComponent implements OnInit {
         rating: number
       }
     ],
-    rating: 0,
-    soft_delete: true
   } = {
-      advertisement: [
+    mall_name: "",
+    description: "",
+    mall_address: "",
+    mall_distance: 0,
+    image_url: "",
+    is_bookmarked: true,
+    rating: 0,
+    soft_delete: true,
+    offers_count: 0,
+
+    advertisement: [
         {
           adv_type: true,
           createdBy: "",
@@ -66,13 +76,6 @@ export class MallsComponent implements OnInit {
           updatedOn: "2021-10-26T12:19:53.071Z"
         }
       ],
-      description: "",
-      image_url: "",
-      is_bookmarked: true,
-      mall_address: "",
-      mall_distance: 0,
-      mall_name: "",
-      offers_count: 0,
       outlet: [
         {
           description: "",
@@ -86,8 +89,6 @@ export class MallsComponent implements OnInit {
           rating: 0
         }
       ],
-      rating: 0,
-      soft_delete: true
     }
 
   currentTime: any = new Date()
@@ -106,7 +107,6 @@ export class MallsComponent implements OnInit {
         arrayofMalls.push(data.mall)
       })
       this.allMalls = arrayofMalls;
-      console.log(arrayofMalls)
       this.tempMalls = arrayofMalls;
       localStorage.allMalls = JSON.stringify(arrayofMalls)
 
@@ -126,7 +126,6 @@ export class MallsComponent implements OnInit {
   }
 
   addMall() {
-
     this.mallService.addNewMall(this.newMall).then(response => {
       alert("Mall Added Successfully")
       this.showModal = false;
@@ -137,5 +136,9 @@ export class MallsComponent implements OnInit {
 
     console.log(this.newMall)
   }
+
+  selectedMall(mall: any){
+    console.log(mall)
+  }
 }
 

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

@@ -8,11 +8,45 @@
         </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>
+        <li *ngFor='let vendor of vendors' class="vendorDetails" [ngClass]='{"vendorDetails" : showOutlets === true}'>
+
+            <div class="vendorList">
+                <img src="{{vendor.vendorImageLink}}" class="vendor-img">
+                <div class="upfold-content">
+                    <h5>{{vendor.vendorName}}</h5>
+                    <span>Id: {{vendor.vendor_Id}}</span>
+                    <span>GstIn: {{vendor.gstNumber}}</span>
+                </div>
+                <div>
+                    <span>{{vendor.vendorAddress}} <img src="../../../assets/location.svg"></span>
+                    <span>Outlets: {{vendor.outlet.length}} <img src="../../../assets/outlet.svg"></span>
+                    <span>Rating: {{vendor.ratings}} <img src="../../../assets/star.svg"></span>
+                </div>
+                <div>
+                    <span>Active: <div
+                            [ngClass]='{"active": vendor.active === true, "inactive": vendor.active === false    }'>
+                        </div></span>
+                    <span>Type: {{vendor.vendorType}}</span>
+                    <span>Ph: {{vendor.vendorOfficeNo}} Mob: {{vendor.vendorMobile}} </span>
+                </div>
+                <img src="../../../assets/expand.svg" [ngClass]="{'active': showOutlets === true}" (click)="showOutlets = !showOutlets" class="viewsvg">
+            </div>
+
+            <div *ngIf='showOutlets === true'>
+                <li *ngFor='let outlet of vendor.outlet;let index = index' class="outletList">
+                    <div class="index"><div>{{index+1}}</div></div>
+                    <img src="{{outlet.image_url}}" class="outlet-img">
+                    <div class="upfold-content">
+                        <h5>{{outlet.outlet_name}}</h5>
+                        <p>{{outlet.description}}</p>
+                    </div>
+                    <div>
+                        <span>Id: {{outlet.outlet_id}}</span>
+                        <span>Rating: {{outlet.rating}}</span>
+                        <span> MenuItems: {{outlet.menuitems.length}}</span>
+                    </div>
+                    <img src="../../../assets/visibility.svg" class="viewsvg" (click)='selectedOutlet(outlet)'>
+                </li>
             </div>
         </li>
     </div>

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

@@ -1,23 +1,3 @@
-.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;
@@ -33,14 +13,127 @@
             font-weight: 500;
         }
     }
+}
+
+
+.card_upfold{
+    overflow: auto;
+    list-style: none;
+    height: 300px;
+
+    .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);
+        }
 
+        .vendor-img {
+            width: 100px;
+            height: 100px;
+            border-radius: 10px;
+        }
+
+        .viewsvg{
+            border: 2px solid var(--brand-blue);
+            border-radius: 50px;
+            padding: 4px;
+            margin: 20px;
+            width: 30px;
+            transform: scale(100%) rotate(0deg);
+            transition: 0.2s transform ease-in;
+            cursor: pointer;
+            margin-right: 30px;
+ 
+            &:hover{
+                transform: scale(110%);
+                transition: 0.2s all ease-in;
+            }
+
+            &.active{
+                transform: rotate(180deg);
+                transition: 0.2s all ease-in;
+            }
+        }
+
+        .upfold-content {
+            padding: 0 10px;
+            position: relative;
+            width: 40%;
+
+            h5{
+                font-size: 18px;
+                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 {
+                width: 100%;
+                margin-right: 10px;
+                color: var(--grey);
+                font-size: 15px;
+                font-weight: 500;
+                display: inline-flex;
+
+                div{
+                    margin: auto 5px;
+                    vertical-align: middle;
+                    width: 10px;
+                    height: 10px;
+                    border-radius: 50px;
+
+                    &.active{
+                        border: 2px solid greenyellow;
+                        background-color: greenyellow;
+                    }
+
+                    &.inactive{
+                        border: 2px solid red;
+                        background-color: red;
+                    }
+                }
+
+                img{
+                    display: block;
+                    width: 15px;
+                    margin-left: 5px;
+                }
+            }
+
+        }
+    }
 }
 
-.vendorList {
+.outletList {
     display: flex;
     align-items: center;
     position: relative;
     margin: 20px;
+    opacity: 1;
+    transition: 0.2s opacity ease-in-out;
 
     &:before {
         content: '';
@@ -53,49 +146,117 @@
         border-radius: 10px;
         border: 1px solid var(--grey);
     }
+    .index{
+        border-radius: 50%;
+        width: 34px;
+        height: 30px;
+        padding: 5px;
+        border: 2px solid var(--brand-blue);
+        color: var(--brand-blue);
+        font-weight: 500;
+        text-align: center;
+        margin: 21px;
+        font-size: 15px;
 
-    img {
+    }
+
+    .outlet-img {
         width: 100px;
         height: 100px;
         border-radius: 10px;
     }
 
+    .viewsvg{
+        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;
+        }
+    }
+
     .upfold-content {
-        padding: 0 10px;
+        padding: 0 20px;
         position: relative;
+        width: 60%;
 
+        h5{
+            font-size: 18px;
+            color: var(--dark-grey);
+            padding: 5px 0;
+        }
+        
         p {
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            font-size: 14px;
+            color: var(--grey);
             overflow: hidden;
             width: 300px;
+            height: 55px;
+            font-weight: 500;
         }
+    }
 
-        .rating {
-            i {
-
-                color: var(--grey);
-            }
-        }
+    div{
+        span {
+            width: 100%;
+            margin-right: 10px;
+            color: var(--grey);
+            font-size: 15px;
+            font-weight: 500;
+            display: inline-flex;
 
-        div {
-            display: flex;
-            align-items: center;
+            div{
+                margin: auto 5px;
+                vertical-align: middle;
+                width: 10px;
+                height: 10px;
+                border-radius: 50px;
 
-            span {
-                margin: 10px 0;
-                margin-right: 10px;
-                color: var(--grey);
+                &.active{
+                    border: 2px solid greenyellow;
+                    background-color: greenyellow;
+                }
 
-                img {
-                    width: 10px;
-                    height: 10px;
+                &.inactive{
+                    border: 2px solid red;
+                    background-color: red;
                 }
             }
+
+            img{
+                display: block;
+                width: 15px;
+                margin-left: 5px;
+            }
         }
     }
 }
 
+.vendorDetails{
+    position: relative;
+    &:before{
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: var(--grey);
+        left: 0;
+        transform: scaleY(107%);
+        border-radius: 10px;
+        filter: brightness(170%);
+    }
+}
+
+
+
 .popUp {
     position: fixed;
     width: 100%;

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

@@ -10,7 +10,8 @@ export class VendorsComponent implements OnInit {
 
   constructor(private vendorService: VendorService) { }
 
-  vendors: any
+  vendors: any;
+  showOutlets: boolean = false;
 
   ngOnInit() {
     this.getVendorInfo();
@@ -25,4 +26,8 @@ export class VendorsComponent implements OnInit {
     })
   }
 
+  selectedOutlet(outlet: any){
+    console.log(outlet)
+  }
+
 }

src/assets/expand.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="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>

src/assets/visibility.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="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>