WrenchBoardIonic2023/src/app/components/job-group/job-group.component.html

<div style="min-height: 150px;">
  <div *ngIf="group_count == 0 ">
    <ion-grid>
      <ion-row>
        <ion-col>
          You do not have any group currently
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-button
                  size="small"
                  shape="round"
                  id="open-modal-new"
                  expand="block"
                  (click)="addGroup()">Create a group</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

  <div *ngIf="group_count > 0 ">

      <div style="width: 100%; margin-bottom: 10px; height: 35px;">
        <div style="float: left; width: 75%; padding-right: 10px; ">
          <ion-select label="Select Group"
                      [(ngModel)]='job_group'
                      (ionChange)="refreshGroupOnChange()"
                      style=" background-color: #3dc2ff;
                      border-radius: 10px; font-size: 12px; height: 35px;"
                      placeholder="Select Group"
                      label-placement="stacked">
            <ion-select-option value="" selected="true">Select Group</ion-select-option>
            <ion-select-option *ngFor="let item of jobGroupDataResult"
                               value="{{item.group_id}}"
                               selected
            >{{item.group_name}}</ion-select-option>
          </ion-select>
        </div>
        <div style="float: right; width: 20%;">
          <ion-button
                  (click)="addGroup()"
                  style="height: 35px;"
                  id="open-modal"
                  size="small" >+Group</ion-button>
        </div>
      </div>

      <div *ngIf="job_group> 0 && group_member_count > 0" style="margin-top: 20px; padding: 5px;">
        <ion-button size="small" shape="round" expand="block" (click)="sendOffers()">Send Task to Group</ion-button>
      </div>

      <div>
        <ion-list>

          <ion-item-sliding *ngFor="let item of jobGroupListFilterdData">
            <ion-item style="display: inline-flex;">
              <div class="text">
                <ion-label class="bold_text">{{item.firstname}} {{item.lastname}}</ion-label>
                <ion-label class="grey_text">{{item.email}}</ion-label>
              </div>

<!--              <div>{{item.firstname}} {{item.lastname}}</div>-->
<!--              <div>{{item.email}} </div>-->
            </ion-item>

            <ion-item-options>
              <ion-item-option color="danger">Delete</ion-item-option>
            </ion-item-options>
          </ion-item-sliding>

        </ion-list>
        <div *ngIf="job_group > 0" style="text-align: right; margin-top: 10px; width: 100%;">
          <ion-button
                  size="small"
                  (click)="addGroupMember()"
                  shape="round"
                  >Add Member</ion-button>
        </div>
      </div>

  </div>


</div>

<div *ngIf="isModalOpenBackdrop==true">
  <ion-backdrop [visible]="isModalOpenBackdrop"></ion-backdrop>
  <ion-modal class="common_modal" [isOpen]="isModalOpen"><ng-template>
    <ion-header  class="modal-head">
      <ion-toolbar>
        <ion-title>Job Groups</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="setCloseModal()">Close</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-grid style="background-color: lightgoldenrodyellow;">
        <ion-row>
          <ion-col>
            <ion-input
                    maxlength="25"
                    (ionChange)="inVerifyNewGroup()"
                    [(ngModel)]="new_group_name"
                    style="background-color: aliceblue; border-radius: 10px;"
                    label="New Group Name.">
            </ion-input>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            {{group_created_result}}
          </ion-col>
          <ion-col style="text-align: right;">
          <ion-button
                  shape="round"
                  [disabled]="isDisabled"
                  size="small"
                  (click)="processAddGroup()">
           Add Group
          </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
      <ion-list>
        <ion-item-sliding  *ngFor="let item of jobGroupDataResult">
          <ion-item>
            <ion-label>{{item.group_name}}</ion-label>
          </ion-item>

          <ion-item-options>
            <ion-item-option color="danger">Delete</ion-item-option>
          </ion-item-options>
        </ion-item-sliding>

      </ion-list>


    </ion-content>
    <ion-footer>
      <ion-grid style="background-color: lightgray;">
        <ion-row>
          <ion-col>
<!--            <ion-button-->
<!--                    (click)="setCloseModal()"-->
<!--                    shape="round"-->
<!--                    size="small"-->
<!--                    color="danger">-->
<!--              Close-->
<!--            </ion-button>-->
          </ion-col>
          <ion-col></ion-col>
          <ion-col>
            <ion-button
                    (click)="setCloseModal()"
                    shape="round"
                    size="small"
                    color="danger">
              Close
            </ion-button>
<!--            -->
<!--            <ion-button-->
<!--                    shape="round"-->
<!--                    size="small"-->
<!--                    (click)="processCreateJob()">Create Job</ion-button>-->
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-footer>
  </ng-template>
  </ion-modal>
</div>


<div *ngIf="isModalMemberOpenBackdrop==true">
  <ion-backdrop [visible]="isModalMemberOpenBackdrop"></ion-backdrop>
  <ion-modal class="common_modal" [isOpen]="isModalMemberOpen"><ng-template>
    <ion-header  class="modal-head">
      <ion-toolbar>
        <ion-title>Groups Members</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="setCloseMemberModal()">Close</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-grid style="background-color: lightgoldenrodyellow;">
        <ion-row>
          <ion-col>
            {{current_group_name}}
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            <ion-input
                    maxlength="25"
                    placeholder="Firstname"
                    (ionChange)="inVerifyNewMember()"
                    [(ngModel)]="firstname"
                    style="background-color: aliceblue; border-radius: 10px;"
                    label="Firstname">
            </ion-input>
          </ion-col>
          <ion-col>
            <ion-input
                    maxlength="25"
                    placeholder="Lastname"
                    (ionChange)="inVerifyNewMember()"
                    [(ngModel)]="lastname"
                    style="background-color: aliceblue; border-radius: 10px;"
                    label="Lastname">
            </ion-input>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            <ion-input
                    maxlength="35"
                    placeholder="Email"
                    (ionChange)="inVerifyNewMember()"
                    [(ngModel)]="email"
                    style="background-color: aliceblue; border-radius: 10px;"
                    label="Email">
            </ion-input>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            {{group_created_result}}
          </ion-col>
          <ion-col style="text-align: right;">
            <ion-button
                    shape="round"
                    [disabled]="isMemberDisabled"
                    size="small"
                    (click)="processAddMember()">
              Add Member
            </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
      <ion-list>
        <ion-item-sliding  *ngFor="let item of jobGroupListFilterdData">
          <ion-item>
            <div class="text">
              <ion-label class="bold_text">{{item.firstname}} {{item.lastname}}</ion-label>
              <ion-label class="grey_text">{{item.email}}</ion-label>
            </div>
          </ion-item>

          <ion-item-options>
            <ion-item-option color="danger">Delete</ion-item-option>
          </ion-item-options>
        </ion-item-sliding>

      </ion-list>


    </ion-content>
    <ion-footer>
      <ion-grid style="background-color: lightgray;">
        <ion-row>
          <ion-col>
            <!--            <ion-button-->
            <!--                    (click)="setCloseModal()"-->
            <!--                    shape="round"-->
            <!--                    size="small"-->
            <!--                    color="danger">-->
            <!--              Close-->
            <!--            </ion-button>-->
          </ion-col>
          <ion-col></ion-col>
          <ion-col>
            <ion-button
                    (click)="setCloseMemberModal()"
                    shape="round"
                    size="small"
                    color="danger">
              Close
            </ion-button>
            <!--            -->
            <!--            <ion-button-->
            <!--                    shape="round"-->
            <!--                    size="small"-->
            <!--                    (click)="processCreateJob()">Create Job</ion-button>-->
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-footer>
  </ng-template>
  </ion-modal>
</div>