Add Mall via Admin Pannel --Partial commit

src/app/admin/_commonCard.scss

@@ -94,7 +94,7 @@
 }
 
 ::-webkit-scrollbar {
-    width: 10px;
+    width: 5px;
     border-radius: 10px;
     background: var(--dark-grey);
   }

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

@@ -26,33 +26,93 @@
         </li>
     </div>
 
-    <div class="popUp" *ngIf='showModal === true'>
+    <div class="popUp">
         <div class="popup-box">
             <ul class="input-list">
-                <li>
-                    <label> Advertisement</label>
-                    <input type="number">
-                </li>
-                <li>
-                    <label> Add Mall </label>
-                    <input type="number">
-                </li>
-                <li>
-                    <label> Add Mall </label>
-                    <input type="number">
-                </li>
-                <li>
-                    <label> Add Mall </label>
-                    <input type="number">
-                </li>
-                <li>
-                    <label> Add Mall </label>
-                    <input type="number">
-                </li>
-                <li>
-                    <label> Add Mall </label>
-                    <input type="number">
-                </li>
+                <h4>Mall Details:</h4>
+
+                <div class="mallDetails">
+                    <li>
+                        <label>Name:</label>
+                        <input type="text" [(ngModel)]="newMall.mall_name" required>
+                    </li>
+                    <li>
+                        <label>Description:</label>
+                        <input type="text" [(ngModel)]='newMall.description' required>
+                    </li>
+                    <li>
+                        <label>Image:</label>
+                        <input type="text" [(ngModel)]='newMall.image_url' required>
+                    </li>
+                    <li>
+                        <label>Address:</label>
+                        <input type="text" [(ngModel)]='newMall.mall_address' required>
+                    </li>
+                    <li>
+                        <label>Mall Distance:</label>
+                        <input type="number" [(ngModel)]='newMall.mall_distance' required>
+                    </li>
+                    <li>
+                        <label>Rating:</label>
+                        <input type="number" [(ngModel)]='newMall.rating' required>
+                    </li>
+                    <li>
+                        <label>Offers Count:</label>
+                        <input type="number" [(ngModel)]='newMall.offers_count' required>
+                    </li>
+                </div>
+
+                <h4>Advertisement:</h4>
+                <div class="addDetails">
+                    <li>
+                        <label>Created By</label>
+                        <input type="text" [(ngModel)]="newMall.advertisement.createdBy" required>
+                    </li>
+                    <li>
+                        <label>Image</label>
+                        <input type="text" [(ngModel)]="newMall.advertisement.image" required>
+                    </li>
+                    <li>
+                        <label>Type</label>
+                        <input type="text" [(ngModel)]="newMall.advertisement.type" required>
+                    </li>
+                    <li>
+                        <label>Updated By</label>
+                        <input type="text" [(ngModel)]="newMall.advertisement.updatedBy" required>
+                    </li>
+                </div>
+
+                <h4>Outlet Details:</h4>
+                <div class="outletdistance">
+                    <li>
+                        <label>Outlet Name</label>
+                        <input type="text" [(ngModel)]="newMall.outlet.outlet_name" required>
+                    </li>
+                    <li>
+                        <label>Description</label>
+                        <input type="text" [(ngModel)]="newMall.outlet.description" required>
+                    </li>
+                    <li>
+                        <label>Outlet Timings</label>
+                        <input type="text" [(ngModel)]="newMall.outlet.outlet_timing" required>
+                    </li>
+                    <li>
+                        <label>Image</label>
+                        <input type="text" [(ngModel)]="newMall.outlet.image_url" required>
+                    </li>
+                    <li>
+                        <label>Outlet GST</label>
+                        <input type="number" [(ngModel)]="newMall.outlet.outlet_Gst" required>
+                    </li>
+                    <li>
+                        <label>Outlet Type</label>
+                        <input type="text" [(ngModel)]="newMall.outlet.outlet_type" required>
+                    </li>
+                    <li>
+                        <label>Rating</label>
+                        <input type="number" [(ngModel)]="newMall.outlet.rating" required>
+                    </li>
+                </div>
             </ul>
 
             <div class="action-buttons">

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

@@ -93,22 +93,82 @@
     align-items: center;
     justify-content: center;
     z-index: 1;
-
+    
     .popup-box {
         width: 400px;
-        padding: 15px;
+        padding: 0 15px;
         background: white;
         border-radius: 10px;
+        height: 60vh;
+        overflow: auto;
+        border: 10px solid white;
 
         .input-list {
             list-style: none;
             padding: 0;
-            margin: 10px 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{
@@ -125,7 +185,7 @@
 
         li {
             text-align: left;
-            margin: 20px 0;
+            margin: 10px 0;
             position: relative;
 
             label {

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

@@ -17,6 +17,7 @@ export class MallsComponent implements OnInit {
   tempMalls: any = [];
 
   showModal: boolean = false;
+  toggleAdd: boolean = false;
 
   newMall: {
     advertisement: {
@@ -82,10 +83,14 @@ export class MallsComponent implements OnInit {
       soft_delete: true
     }
 
+  currentTime: any = new Date()
+
+  @Input() required: boolean | string
   @ViewChild('searchbar', null) searchElement: ElementRef;
 
   ngOnInit() {
     this.getAllMalls()
+    console.log(this.currentTime)
   }
 
   getAllMalls() {