WrenchBoardIonic2023/src/app/pages/invite/invite.page.html

<ion-header mode="ios" class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start" (click)="onBack()">
      <ion-button>
        <ion-icon name="arrow-back-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Invite Friends</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <div class="inv-head">Invite Firends</div>

  <ion-accordion-group>
    <ion-accordion value="first">
      <ion-item class="arcord_head" slot="header" color="secondary" style="margin-bottom: 1px;">
        <ion-label>Invite with Email</ion-label>
      </ion-item>
      <div class="ion-padding" slot="content" style="background-color: white; padding: 5px">
        <div style="margin-top: 10px; background-color: aliceblue; border-radius: 10px; padding: 5px">
          <ion-item lines="none">
            <ion-icon slot="start" name="mail-outline"></ion-icon>
            <ion-input type="email" placeholder="Email"  maxlength="55"  [(ngModel)]='email'></ion-input>
          </ion-item>

          <ion-item lines="none">
            <ion-icon slot="start" name="text-outline"></ion-icon>
            <ion-input type="text" placeholder="Firstname" maxlength="15" [(ngModel)]='ref_firstname'></ion-input>
          </ion-item>

          <ion-item lines="none">
            <ion-icon slot="start" name="text-outline"></ion-icon>
            <ion-input type="text" placeholder="Lastname" maxlength="15" [(ngModel)]='lastname'></ion-input>
          </ion-item>

          <div lines="none" style="text-align: right">
            <ion-button
                    style="padding: 3px; height: 45px"
                    shape="round"
                    expand="block"
                    (click)="sendRefer()">
              Send Invite
            </ion-button>
          </div>

<!--          <ion-grid>-->
<!--            <ion-row>-->
<!--              <ion-col>-->
<!--              </ion-col>-->
<!--              <ion-col>-->
<!--                <ion-button expand="block" (click)="sendRefer()">-->
<!--                  Send-->
<!--                </ion-button>-->
<!--              </ion-col>-->
<!--            </ion-row>-->
<!--          </ion-grid>-->
        </div>
      </div>
    </ion-accordion>
    <ion-accordion value="second">
      <ion-item class="arcord_head" slot="header" color="secondary" style="margin-bottom: 1px;">
        <ion-label>Invite from Contacts</ion-label>
      </ion-item>
      <div class="ion-padding" slot="content" style="background-color: white; padding: 5px">
        <div style="margin-top: 10px; background-color: aliceblue; min-height: 150px;">
          <ion-button (click)="refreshContacts()">Refresh Contacts</ion-button>
        </div>


      </div>
    </ion-accordion>
  </ion-accordion-group>


<!--  <ion-segment [(ngModel)]="tabs">-->
<!--    <ion-segment-button value="refer">-->
<!--      <ion-label>Refer</ion-label>-->
<!--    </ion-segment-button>-->
<!--    <ion-segment-button value="history">-->
<!--      <ion-label>History</ion-label>-->
<!--    </ion-segment-button>-->
<!--  </ion-segment>-->

<!--  <div *ngIf="tabs =='refer'" class="refer">-->
<!--    <ion-card>-->
<!--      <ion-card-header>-->
<!--        <ion-card-title>Invite Friends</ion-card-title>-->
<!--        <ion-card-subtitle>Enter email and name.</ion-card-subtitle>-->
<!--      </ion-card-header>-->

<!--      <ion-card-content>-->
<!--        <ion-item lines="none">-->
<!--          <ion-icon slot="start" name="mail-outline"></ion-icon>-->
<!--          <ion-input type="email" placeholder="Email"  maxlength="55"  [(ngModel)]='email'></ion-input>-->
<!--        </ion-item>-->

<!--        <ion-item lines="none">-->
<!--          <ion-icon slot="start" name="text-outline"></ion-icon>-->
<!--          <ion-input type="text" placeholder="Firstname" maxlength="15" [(ngModel)]='ref_firstname'></ion-input>-->
<!--        </ion-item>-->

<!--        <ion-item lines="none">-->
<!--          <ion-icon slot="start" name="text-outline"></ion-icon>-->
<!--          <ion-input type="text" placeholder="Lastname" maxlength="15" [(ngModel)]='lastname'></ion-input>-->
<!--        </ion-item>-->

<!--        <ion-grid>-->
<!--          <ion-row>-->
<!--            <ion-col>-->
<!--            </ion-col>-->
<!--            <ion-col>-->
<!--              <ion-button expand="block" (click)="sendRefer()">-->
<!--                Send-->
<!--              </ion-button>-->
<!--            </ion-col>-->
<!--          </ion-row>-->
<!--        </ion-grid>-->
<!--      </ion-card-content>-->
<!--    </ion-card>-->
<!--  </div>-->
<!--  <div *ngIf="tabs =='history'" class="history">-->
  <div class="inv-head">Recent Invitations</div>
    <div class="history" style="background-color: aliceblue; padding: 5px;">
    <div class="chat" *ngFor="let item of referData">
      <div class="flex">
        <div class="bg_image back_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/invite-friend.svg)'"></div>
        <div style="margin-left: 10px;">
          <ion-label class="bold_text"> {{item.firstname}} {{item.lastname}} </ion-label>
          <div style="display: flex;">
            <ion-label class="grey_text"> {{item.email}} </ion-label>
          </div>
          <ion-label>{{item.added_date}}</ion-label>
        </div>
      </div>
      <div class="column">
        <ion-label class="invite"> {{item.status}}</ion-label>
      </div>
    </div>
  </div>










</ion-content>

<!--

 array (size=5)
          'added_date' => string '2022-06-14' (length=10)
          'email' => string 'works+nn1@chiefsoft.com' (length=23)
          'firstname' => string 'Olu' (length=3)
          'lastname' => string 'Amey' (length=4)
          'status' => string 'Pending' (length=7)

          -->