From a5f7fca795cf833049b4da450724779abab38394 Mon Sep 17 00:00:00 2001 From: prahalad Date: Fri, 26 Nov 2021 13:58:27 +0530 Subject: [PATCH] Added Vendors to Admin Pannel --- src/app/admin/malls/malls.component.html | 2 +- src/app/admin/malls/malls.component.scss | 1 + src/app/admin/malls/malls.component.ts | 45 ++-- src/app/admin/vendors/vendors.component.html | 44 +++- src/app/admin/vendors/vendors.component.scss | 243 +++++++++++++++---- src/app/admin/vendors/vendors.component.ts | 7 +- src/assets/expand.svg | 1 + src/assets/visibility.svg | 1 + 8 files changed, 275 insertions(+), 69 deletions(-) create mode 100644 src/assets/expand.svg create mode 100644 src/assets/visibility.svg diff --git a/src/app/admin/malls/malls.component.html b/src/app/admin/malls/malls.component.html index 89407db..968dbe8 100644 --- a/src/app/admin/malls/malls.component.html +++ b/src/app/admin/malls/malls.component.html @@ -22,7 +22,7 @@ Rating: {{malls.rating}} {{malls.mall_address}} - + diff --git a/src/app/admin/malls/malls.component.scss b/src/app/admin/malls/malls.component.scss index 256392c..3ae1382 100644 --- a/src/app/admin/malls/malls.component.scss +++ b/src/app/admin/malls/malls.component.scss @@ -26,6 +26,7 @@ align-items: center; position: relative; margin: 20px; + cursor: pointer; &:before { content: ''; diff --git a/src/app/admin/malls/malls.component.ts b/src/app/admin/malls/malls.component.ts index adf4245..473871b 100644 --- a/src/app/admin/malls/malls.component.ts +++ b/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) + } } diff --git a/src/app/admin/vendors/vendors.component.html b/src/app/admin/vendors/vendors.component.html index e8612f2..0bdc254 100644 --- a/src/app/admin/vendors/vendors.component.html +++ b/src/app/admin/vendors/vendors.component.html @@ -8,11 +8,45 @@
-
  • - -
    -
    Id:{{vendor.vendor_Id}} {{vendor.vendorName}}
    - Ph: {{vendor.vendorOfficeNo}} +
  • + +
    + +
    +
    {{vendor.vendorName}}
    + Id: {{vendor.vendor_Id}} + GstIn: {{vendor.gstNumber}} +
    +
    + {{vendor.vendorAddress}} + Outlets: {{vendor.outlet.length}} + Rating: {{vendor.ratings}} +
    +
    + Active:
    +
    + Type: {{vendor.vendorType}} + Ph: {{vendor.vendorOfficeNo}} Mob: {{vendor.vendorMobile}} +
    + +
    + +
    +
  • +
    {{index+1}}
    + +
    +
    {{outlet.outlet_name}}
    +

    {{outlet.description}}

    +
    +
    + Id: {{outlet.outlet_id}} + Rating: {{outlet.rating}} + MenuItems: {{outlet.menuitems.length}} +
    + +
    • diff --git a/src/app/admin/vendors/vendors.component.scss b/src/app/admin/vendors/vendors.component.scss index b91c516..92bec54 100644 --- a/src/app/admin/vendors/vendors.component.scss +++ b/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%; diff --git a/src/app/admin/vendors/vendors.component.ts b/src/app/admin/vendors/vendors.component.ts index a8c0e09..3f90f67 100644 --- a/src/app/admin/vendors/vendors.component.ts +++ b/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) + } + } diff --git a/src/assets/expand.svg b/src/assets/expand.svg new file mode 100644 index 0000000..65310a0 --- /dev/null +++ b/src/assets/expand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/visibility.svg b/src/assets/visibility.svg new file mode 100644 index 0000000..1d81b7e --- /dev/null +++ b/src/assets/visibility.svg @@ -0,0 +1 @@ + \ No newline at end of file