<p-toast></p-toast> <div class="container"> <!-- <div *ngIf="mode === 'list'"> --> <div *ngIf="mode === 'list'"> <p-button [rounded]="true" icon="pi pi-arrow-right" class="btn btn-danger" (click)="backToMail()" label="Test To Mailing List" /> <div class="text-center mb-3"> <h3>Group Mailing List</h3> </div> <div class="card shadow"> <div class="card-body"> <div class="grid-container mb-4 mt-2"> <span class="p-float-label input-group"> <input type="text" pInputText id="groupName" [(ngModel)]="searchFilters.groupName" /> <label class="font-normal">Group Name</label> </span> <!-- Button Search Group Name --> <p-button label="Search" icon="pi pi-search" [raised]="true" severity="help" (click)="searchGroups()" /> <span></span> </div> <!--Button ADD Group --> <div class="text-end mb-4 mt-3"> <p-button class="btn btn-light" (click)="addGroup()" icon="pi pi-plus" label="Add group" severity="success" /> </div> <!--Table of Group Name --> <p-table [value]="filteredGroupList" [paginator]="true" [rows]="10" [rowsPerPageOptions]="[5, 10, 20]" [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" > <ng-template pTemplate="header"> <tr> <th>No.</th> <th>Detail</th> <th>Action</th> <th>Group Name</th> <th>Create Date</th> <th>Create By</th> <th>Modified By</th> </tr> </ng-template> <ng-template let-group pTemplate="body" let-i="rowIndex"> <tr> <td>{{ i + 1 }}</td> <td> <p-button pTooltip="View Email in Group" tooltipPosition="top" icon="pi pi-eye" class="" (click)="viewDetails(group)" severity="secondary" > </p-button> </td> <td> <p-button pTooltip="Edit Group" tooltipPosition="top" icon="pi pi-pencil" class="btn btn-warning" (click)="editGroup(group)" severity="warning" > </p-button> <p-button pTooltip="Delete Group" tooltipPosition="top" icon="pi pi-trash" class="btn btn-danger" (click)="deleteGroup(group)" severity="danger" > </p-button> </td> <td>{{ group.groupName }}</td> <td>{{ group.createdBy }}</td> <td>{{ group.updatedBy }}</td> <td>{{ group.groupName_ID }} </td> </tr> </ng-template> </p-table> <p></p> </div> </div> </div> <!-- MODE ADD PAGE LIST--> <div *ngIf="mode === 'add'"> <p-dialog [(visible)]="visible" [modal]="true" [style]="{ width: '30rem' }" (onHide)="closeDialogAD()" > <ng-template pTemplate="header"> <div class="inline-flex align-items-center justify-content-center gap-2" > <span class="font-bold white-space-nowrap"> Create Group </span> </div> </ng-template> <span class="p-text-secondary block mb-5" >Please Insert a Group Name</span > <div class="flex align-items-center gap-3 mb-3"> <input pInputText id="GroupName" [(ngModel)]="newGroupName" class="flex-auto" autocomplete="off" /> </div> <!-- Button Cancle AND Create --> <ng-template pTemplate="footer"> <p-button icon="pi pi-check" label="CREATE" (click)="saveGroup()" /> <p-button icon="pi pi-times" label="CANCLE" (click)="backToList()" severity="danger" /> </ng-template> </p-dialog> </div> <!-- EDIT GROUP PAGE LIST--> <div *ngIf="mode === 'ed'"> <p-dialog [(visible)]="visible" [modal]="true" [style]="{ width: '30rem' }" (onHide)="closeDialogED()" > <ng-template pTemplate="header"> <div class="inline-flex align-items-center justify-content-center gap-2" > <span class="font-bold white-space-nowrap"> Edit Group </span> </div> </ng-template> <span class="p-text-secondary block mb-5" >Please Insert new a Group Name</span > <div class="flex align-items-center gap-3 mb-3"> <input pInputText id="GroupName" [(ngModel)]="newGroupName" class="flex-auto" autocomplete="off" /> </div> <!-- Button Save AND Cancel --> <ng-template pTemplate="footer"> <p-button icon="pi pi-save" label="Save" (click)="saveGroup()" severity="success" /> <p-button icon="pi pi-times" label="Cancel" (click)="backToList()" severity="danger" /> </ng-template> </p-dialog> </div> <!-- Detail In GROUP PAGE LIST--> <div *ngIf="mode === 'dt'"> <p-button pTooltip="Back to Group Mailing List" tooltipPosition="right" [rounded]="true" icon="pi pi-arrow-left" class="btn btn-danger" (click)="backToList()" /> <div class="text-center mb-3"> </div> <div class="card shadow"> <div class="card-body"> <!-- Email --> <div class="grid-container mb-4 mt-2"> <span class="p-float-label input-group"> <input type="text" pInputText id="email" [(ngModel)]="searchFiltersEmail.email" placeholder="Search Email" /> <label class="font-normal">Email</label> </span> <span></span> <span></span> </div> <div class="grid-container mb-4"> <span class="p-float-label input-group"> <input type="text" pInputText id="customerCode" [(ngModel)]="searchFiltersEmail.customerCode" placeholder="Search Customer Code" /> <label class="font-normal">Customer Code</label> </span> <span class="p-float-label input-group"> <input type="text" pInputText id="customerName" [(ngModel)]="searchFiltersEmail.customerName" placeholder="Search Customer Name"/> <label class="font-normal">Customer Name</label> </span> <p-button label="Search" severity="help" icon="pi pi-search" class="p-button-true ms-2" (click)="searchEmail()" /> </div> <div class="grid-container mb-3"> <span class="p-float-label input-group"> <input type="text" pInputText id="mobile" [(ngModel)]="searchFiltersEmail.mobile" /> <label class="font-normal">Mobile</label> </span> <span class="p-float-label input-group"> <input type="text" pInputText id="telephone" [(ngModel)]="searchFiltersEmail.telephone" /> <label class="font-normal">Telephone</label> </span> <span class="p-float-label input-group"> <input type="text" pInputText id="zipCode" [(ngModel)]="searchFiltersEmail.zipCode" /> <label class="font-normal">Zipcode</label> </span> </div> <!-- Button Add Email ,Import ,Export --> <div class="flex align-items-center gap-2 mb-3 mt-4"> <p-button class="btn btn-light" (click)="addEmail()" label="Add Email" icon="pi pi-plus" severity="success" /> <p-button class="btn btn-light" (click)="importEmail()" icon="pi pi-download" label="Import" /> <p-button class="btn btn-danger" (click)="exportFile()" label="Export" icon="pi pi-upload" severity="warning" /> </div> <p-table [value]="mailingList" [paginator]="true" [rows]="10" [rowsPerPageOptions]="[5, 10, 20, 50]" [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" > <ng-template pTemplate="header"> <tr> <th>No.</th> <th>Action</th> <th>Customer Code</th> <th>Customer Name</th> <th>Email</th> <th>Mobile</th> <th>Telephone</th> <th>Address</th> <th>Zipcode</th> </tr> </ng-template> <tr> <td>{{ i + 1 }}</td> <td> <p-button pTooltip="Edit Customer" tooltipPosition="top" icon="pi pi-pencil" class="btn btn-warning" (click)="editCustomer(mail)" severity="warning" > </p-button> <p-button pTooltip="Delete Customer" tooltipPosition="top" icon="pi pi-trash" class="btn btn-danger" (click)="deleteCustomer(mail)" severity="danger" > </p-button> </td> <td> <a href="javascript:void(0);" (click)="viewCustomer(mail)" pTooltip="Tips : Can view Detail on click " tooltipPosition="top"> </a> </td> </tr> </ng-template> </p-table> <p></p> </div> </div> </div> <div *ngIf="mode === 'im'"> <p-dialog [(visible)]="visible" [modal]="true" [style]="{ width: '30rem' }" (onHide)="closeDialogIm()" > <ng-template pTemplate="header"> <div class="inline-flex align-items-center justify-content-center gap-2" > <span class="font-bold white-space-nowrap"> Upload File </span> </div> </ng-template> <span class="p-text-secondary block mb-5" > <p-fileUpload name="demo[]" url="https://w...content-available-to-author-only...s.org/cdn/api/upload.php" (onUpload)="onUpload($event)" [multiple]="false" accept=".xlsx,.xls,.csv" [maxFileSize]="1000000" > <ng-template pTemplate="content"> <ul *ngIf="uploadedFiles.length"> <li *ngFor="let file of uploadedFiles"> </li> </ul> </ng-template> </p-fileUpload> </p-dialog> </div> <!-- Page Edit And Add New Email Customer <div *ngIf="mode === 'edm' || mode === 'addm'"> --> <div *ngIf="mode === 'edm' || mode === 'addm' || mode === 'vm'"> <div> <div class="text-center mb-3"> <h3 *ngIf="mode === 'vm'" >View(only) Mailing List</h3> <h3 *ngIf="mode === 'addm'" >Add Mailing List</h3> <h3 *ngIf="mode === 'edm'" >Edit Mailing List</h3> </div> <div class="card shadow"> <div class="grid-container mt-4"> <span class="p-float-label input-group2"> <input type="text" pInputText id="customerCode" [(ngModel)]="editingCustomer.customerCode" [ngClass]="{ 'invalid-input': !editingCustomer.customerCode }" [disabled]="mode === 'edm'" [readonly]="mode === 'vm'" /> <label class="font-normal">Customer Code</label> </span> <!-- [readonly]="mode === 'edm'" Change to [disabled]--> <!-- Field Edit/Add Customer Name --> <span class="p-float-label input-group2"> <input type="text" pInputText pTooltip="Tips : Enter your Fristname And Lastname" tooltipPosition="top" id="customerName" [ngClass]="{ 'invalid-input': !editingCustomer.customerName }" [readonly]="mode === 'vm'" [(ngModel)]="editingCustomer.customerName" /> <label class="font-normal">Customer Name</label> </span> <span></span> </div> <tr class="grid-container"> <th> <div *ngIf="!editingCustomer.customerCode" class="error-message" > This field is required Customer Code. </div> </th> <th> <div *ngIf="!editingCustomer.customerName" class="error-message" > This field is required Customer Name. </div> </th> <th></th> </tr> <div class="grid-container mt-4"> <!-- Field Edit/ Add Email --> <span class="p-float-label input-group2"> <input type="text" pInputText pTooltip="Tips : Enter your Email With @ " tooltipPosition="top" id="email" [ngClass]="{ 'invalid-input': !editingCustomer.emailAddress || !editingCustomer.emailAddress.includes('@') }" [readonly]="mode === 'vm'" [(ngModel)]="editingCustomer.emailAddress" /> <label class="font-normal">Email</label> </span> <!-- Field Edit/ Add Mobile --> <span class="p-float-label input-group2"> <input type="text" pInputText pTooltip="Tips : MobilePhone only Numeric" tooltipPosition="top" id="mobile" [(ngModel)]="editingCustomer.mobile" [readonly]="mode === 'vm'" [ngClass]="{ 'invalid-input': !isNumericFieldValid( editingCustomer.mobile ) }" /> <label class="font-normal">Mobile</label> </span> <!-- Field Edit/ Add Telephone --> <span class="p-float-label input-group2"> <input type="text" pInputText pTooltip="Tips : Telephone only Numeric" tooltipPosition="top" id="telephone" [(ngModel)]="editingCustomer.telephone" [readonly]="mode === 'vm'" [ngClass]="{ 'invalid-input': !isNumericFieldValid( editingCustomer.telephone ) }" /> <label class="font-normal">Telephone</label> </span> </div> <tr class="grid-container"> <th> <div *ngIf="!editingCustomer.emailAddress || !editingCustomer.emailAddress.includes('@')" class="error-message" > </div> </th> <th></th> <th></th> </tr> <div class="grid-container mb-5 mt-4"> <!-- Field Edit/ Add Address --> <span class="p-float-label input-group2"> <input type="text" pInputText id="address" [readonly]="mode === 'vm'" [(ngModel)]="editingCustomer.address" /> <label class="font-normal">Address</label> </span> <!-- Field Edit/ Add Zipcode --> <span class="p-float-label input-group2"> <input type="text" pInputText pTooltip="Tips : Zipcode only Numeric" tooltipPosition="top" id="zipCode" [(ngModel)]="editingCustomer.zipcode" [readonly]="mode === 'vm'" [ngClass]="{ 'invalid-input': !isNumericFieldValid( editingCustomer.zipcode ) }" /> <label class="font-normal">Zipcode</label> </span> <span></span> </div> <br /><br /> <br /> <br /> <!-- Button Save and Cancel Edit/Add Email. --> <div class="text-right mt-5"> <p-button *ngIf="mode === 'addm'" icon="pi pi-save" label="Save" (click)="saveEmail()" severity="success" class="mr-2" ></p-button> <p-button *ngIf="mode === 'edm'" icon="pi pi-save" label="Confrim" (click)="confirmEditCustomer()" severity="success" class="mr-2" ></p-button> <p-button icon="pi pi-times" label="Cancel" (click)="closeDialogIm()" severity="danger" ></p-button> </div> </div> </div> </div> <!-- Popup Delete Group --> <div *ngIf="mode === 'delgr'"> <p-dialog [(visible)]="visible" [modal]="true" [style]="{ width: '30rem' }" (onHide)="closeDialogED()" > <ng-template pTemplate="header"> <div class="inline-flex align-items-center justify-content-center gap-2" > <span class="font-bold white-space-nowrap"> Delete Group </span> </div> </ng-template> <span class="p-text-secondary block mb-5" >Are you sure You want to delete Group name?</span > <ng-template pTemplate="footer"> <p-button icon="pi pi-trash" label="Delete" severity="danger" (click)="confirmDeleteGroup()" /> <p-button icon="pi pi-times" [text]="true" label="Cancel" [plain]="true" (click)="backToList()" /> </ng-template> </p-dialog> </div> <!-- Popup Delete Customer in Group --> <div *ngIf="mode === 'delcm'"> <p-dialog [(visible)]="visible" [modal]="true" [style]="{ width: '30rem' }" (onHide)="closeDialogIm()" > <ng-template pTemplate="header"> <div class="inline-flex align-items-center justify-content-center gap-2" > <span class="font-bold white-space-nowrap"> Delete Email </span> </div> </ng-template> <span class="p-text-secondary block mb-5" >Are you sure You want to delete Email?</span > <ng-template pTemplate="footer"> <p-button icon="pi pi-check" label="CONFIRM" (click)="confirmDeleteCustomer()" severity="danger" /> <p-button icon="pi pi-times" label="CANCEL" [text]="true" [plain]="true" (click)="backToMail()" /> </ng-template> </p-dialog> </div> <!-- Popup Export After Click Button --> <div *ngIf="mode === 'export'"> </div> <!-- Dialog Confrim Edit --> <div *ngIf="mode === 'Confrim Edit'"> <p-dialog [(visible)]="visible" [modal]="true" [style]="{ width: '25rem' }" (onHide)="closeDialogAD()" > <ng-template pTemplate="header"> <div class="inline-flex align-items-center justify-content-center gap-2" > <span class="font-bold white-space-nowrap"> Create Group </span> </div> </ng-template> <span class="p-text-secondary block mb-5" >Please Insert a Group Name</span > <div class="flex align-items-center gap-3 mb-3"> <input pInputText id="GroupName" [(ngModel)]="newGroupName" class="flex-auto" autocomplete="off" /> </div> <ng-template pTemplate="footer"> <p-button icon="pi pi-check" label="CREATE" (click)="saveGroup()" /> <p-button icon="pi pi-times" label="CANCLE" (click)="backToList()" severity="danger" /> </ng-template> </p-dialog> </div> </div>
Standard input is empty
<p-toast></p-toast>
<div class="container">
<!-- <div *ngIf="mode === 'list'"> -->
<div *ngIf="mode === 'list'">
<p-button
[rounded]="true"
icon="pi pi-arrow-right"
class="btn btn-danger"
(click)="backToMail()"
label="Test To Mailing List"
/>
<div class="text-center mb-3">
<h3>Group Mailing List</h3>
</div>
<div class="card shadow">
<div class="card-body">
<div class="grid-container mb-4 mt-2">
<span class="p-float-label input-group">
<input
type="text"
pInputText
id="groupName"
[(ngModel)]="searchFilters.groupName"
/>
<label class="font-normal">Group Name</label>
</span>
<!-- Button Search Group Name -->
<p-button
label="Search"
icon="pi pi-search"
[raised]="true"
severity="help"
(click)="searchGroups()"
/>
<span></span>
</div>
<!--Button ADD Group -->
<div class="text-end mb-4 mt-3">
<p-button
class="btn btn-light"
(click)="addGroup()"
icon="pi pi-plus"
label="Add group"
severity="success"
/>
</div>
<!--Table of Group Name -->
<p-table
[value]="filteredGroupList"
[paginator]="true"
[rows]="10"
[rowsPerPageOptions]="[5, 10, 20]"
[showCurrentPageReport]="true"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
>
<!-- Header Table -->
<ng-template pTemplate="header">
<tr>
<th>No.</th>
<th>Detail</th>
<th>Action</th>
<th>Group Name</th>
<th>Create Date</th>
<th>Create By</th>
<th>Modified By</th>
</tr>
</ng-template>
<ng-template let-group pTemplate="body" let-i="rowIndex">
<tr>
<td>{{ i + 1 }}</td>
<td>
<p-button
pTooltip="View Email in Group"
tooltipPosition="top"
icon="pi pi-eye"
class=""
(click)="viewDetails(group)"
severity="secondary"
>
</p-button>
</td>
<td>
<p-button
pTooltip="Edit Group"
tooltipPosition="top"
icon="pi pi-pencil"
class="btn btn-warning"
(click)="editGroup(group)"
severity="warning"
>
</p-button>
<p-button
pTooltip="Delete Group"
tooltipPosition="top"
icon="pi pi-trash"
class="btn btn-danger"
(click)="deleteGroup(group)"
severity="danger"
>
</p-button>
</td>
<td>{{ group.groupName }}</td>
<td>{{ group.createdDate | date: 'dd-MM-yyyy' }}</td>
<td>{{ group.createdBy }}</td>
<td>{{ group.updatedBy }}</td>
<td>{{ group.groupName_ID }} </td>
</tr>
</ng-template>
</p-table>
<p></p>
</div>
</div>
</div>
<!-- MODE ADD PAGE LIST-->
<div *ngIf="mode === 'add'">
<p-dialog
header="Header"
[(visible)]="visible"
[modal]="true"
[style]="{ width: '30rem' }"
(onHide)="closeDialogAD()"
>
<ng-template pTemplate="header">
<div
class="inline-flex align-items-center justify-content-center gap-2"
>
<span class="font-bold white-space-nowrap">
Create Group
</span>
</div>
</ng-template>
<span class="p-text-secondary block mb-5"
>Please Insert a Group Name</span
>
<div class="flex align-items-center gap-3 mb-3">
<input
pInputText
id="GroupName"
[(ngModel)]="newGroupName"
class="flex-auto"
autocomplete="off"
/>
</div>
<!-- Button Cancle AND Create -->
<ng-template pTemplate="footer">
<p-button
icon="pi pi-check"
label="CREATE"
(click)="saveGroup()"
/>
<p-button
icon="pi pi-times"
label="CANCLE"
(click)="backToList()"
severity="danger"
/>
</ng-template>
</p-dialog>
</div>
<!-- EDIT GROUP PAGE LIST-->
<div *ngIf="mode === 'ed'">
<p-dialog
header="Header"
[(visible)]="visible"
[modal]="true"
[style]="{ width: '30rem' }"
(onHide)="closeDialogED()"
>
<ng-template pTemplate="header">
<div
class="inline-flex align-items-center justify-content-center gap-2"
>
<span class="font-bold white-space-nowrap">
Edit Group
</span>
</div>
</ng-template>
<span class="p-text-secondary block mb-5"
>Please Insert new a Group Name</span
>
<div class="flex align-items-center gap-3 mb-3">
<input
pInputText
id="GroupName"
[(ngModel)]="newGroupName"
class="flex-auto"
autocomplete="off"
/>
</div>
<!-- Button Save AND Cancel -->
<ng-template pTemplate="footer">
<p-button
icon="pi pi-save"
label="Save"
(click)="saveGroup()"
severity="success"
/>
<p-button
icon="pi pi-times"
label="Cancel"
(click)="backToList()"
severity="danger"
/>
</ng-template>
</p-dialog>
</div>
<!-- Detail In GROUP PAGE LIST-->
<div *ngIf="mode === 'dt'">
<p-button
pTooltip="Back to Group Mailing List"
tooltipPosition="right"
[rounded]="true"
icon="pi pi-arrow-left"
class="btn btn-danger"
(click)="backToList()"
/>
<div class="text-center mb-3">
<h3>Mailing List : {{ currentGroupName }}</h3>
</div>
<div class="card shadow">
<div class="card-body">
<!-- Email -->
<div class="grid-container mb-4 mt-2">
<span class="p-float-label input-group">
<input type="text" pInputText id="email" [(ngModel)]="searchFiltersEmail.email"
placeholder="Search Email" />
<label class="font-normal">Email</label>
</span>
<span></span>
<span></span>
</div>
<!-- Field Date, Create By, Modified By -->
<div class="grid-container mb-4">
<span class="p-float-label input-group">
<input type="text" pInputText id="customerCode" [(ngModel)]="searchFiltersEmail.customerCode"
placeholder="Search Customer Code" />
<label class="font-normal">Customer Code</label>
</span>
<span class="p-float-label input-group">
<input type="text" pInputText id="customerName" [(ngModel)]="searchFiltersEmail.customerName"
placeholder="Search Customer Name"/>
<label class="font-normal">Customer Name</label>
</span>
<p-button
label="Search"
severity="help"
icon="pi pi-search"
class="p-button-true ms-2"
(click)="searchEmail()"
/>
</div>
<div class="grid-container mb-3">
<span class="p-float-label input-group">
<input type="text" pInputText id="mobile" [(ngModel)]="searchFiltersEmail.mobile" />
<label class="font-normal">Mobile</label>
</span>
<span class="p-float-label input-group">
<input type="text" pInputText id="telephone" [(ngModel)]="searchFiltersEmail.telephone" />
<label class="font-normal">Telephone</label>
</span>
<span class="p-float-label input-group">
<input type="text" pInputText id="zipCode" [(ngModel)]="searchFiltersEmail.zipCode" />
<label class="font-normal">Zipcode</label>
</span>
</div>
<!-- Button Add Email ,Import ,Export -->
<div class="flex align-items-center gap-2 mb-3 mt-4">
<p-button
class="btn btn-light"
(click)="addEmail()"
label="Add Email"
icon="pi pi-plus"
severity="success"
/>
<p-button
class="btn btn-light"
(click)="importEmail()"
icon="pi pi-download"
label="Import"
/>
<p-button
class="btn btn-danger"
(click)="exportFile()"
label="Export"
icon="pi pi-upload"
severity="warning"
/>
</div>
<!-- Table Mailing List in Group-->
<p-table
[value]="mailingList"
[paginator]="true"
[rows]="10"
[rowsPerPageOptions]="[5, 10, 20, 50]"
[showCurrentPageReport]="true"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
>
<ng-template pTemplate="header">
<tr>
<th>No.</th>
<th>Action</th>
<th>Customer Code</th>
<th>Customer Name</th>
<th>Email</th>
<th>Mobile</th>
<th>Telephone</th>
<th>Address</th>
<th>Zipcode</th>
</tr>
</ng-template>
<ng-template let-mail pTemplate="body" let-i="rowIndex">
<tr>
<td>{{ i + 1 }}</td>
<td>
<p-button
pTooltip="Edit Customer"
tooltipPosition="top"
icon="pi pi-pencil"
class="btn btn-warning"
(click)="editCustomer(mail)"
severity="warning"
>
</p-button>
<p-button
pTooltip="Delete Customer"
tooltipPosition="top"
icon="pi pi-trash"
class="btn btn-danger"
(click)="deleteCustomer(mail)"
severity="danger"
>
</p-button>
</td>
<td>
<a href="javascript:void(0);" (click)="viewCustomer(mail)" pTooltip="Tips : Can view Detail on click "
tooltipPosition="top">
{{ mail.customerCode }}
</a>
</td>
<td>{{ mail.customerName }}</td>
<td>{{ mail.emailAddress }}</td>
<td>{{ mail.mobile }}</td>
<td>{{ mail.telephone }}</td>
<td>{{ mail.address }}</td>
<td>{{ mail.zipcode }}</td>
</tr>
</ng-template>
</p-table>
<p></p>
</div>
</div>
</div>
<!-- Popup IMPORT Mailing List Customer-->
<div *ngIf="mode === 'im'">
<p-dialog
header="Header"
[(visible)]="visible"
[modal]="true"
[style]="{ width: '30rem' }"
(onHide)="closeDialogIm()"
>
<ng-template pTemplate="header">
<div
class="inline-flex align-items-center justify-content-center gap-2"
>
<span class="font-bold white-space-nowrap">
Upload File
</span>
</div>
</ng-template>
<span class="p-text-secondary block mb-5"
>Upload File Excel To Add Customers</span
>
<p-fileUpload
name="demo[]"
url="https://w...content-available-to-author-only...s.org/cdn/api/upload.php"
(onUpload)="onUpload($event)"
[multiple]="false"
accept=".xlsx,.xls,.csv"
[maxFileSize]="1000000"
>
<ng-template pTemplate="content">
<ul *ngIf="uploadedFiles.length">
<li *ngFor="let file of uploadedFiles">
{{ file.name }} - {{ file.size }} bytes
</li>
</ul>
</ng-template>
</p-fileUpload>
</p-dialog>
</div>
<!-- Page Edit And Add New Email Customer <div *ngIf="mode === 'edm' || mode === 'addm'"> -->
<div *ngIf="mode === 'edm' || mode === 'addm' || mode === 'vm'">
<div>
<div class="text-center mb-3">
<h3 *ngIf="mode === 'vm'" >View(only) Mailing List</h3>
<h3 *ngIf="mode === 'addm'" >Add Mailing List</h3>
<h3 *ngIf="mode === 'edm'" >Edit Mailing List</h3>
</div>
<div class="card shadow">
<div class="grid-container mt-4">
<span class="p-float-label input-group2">
<input
type="text"
pInputText
id="customerCode"
[(ngModel)]="editingCustomer.customerCode"
[ngClass]="{
'invalid-input': !editingCustomer.customerCode
}"
[disabled]="mode === 'edm'"
[readonly]="mode === 'vm'"
/>
<label class="font-normal">Customer Code</label>
</span>
<!-- [readonly]="mode === 'edm'" Change to [disabled]-->
<!-- Field Edit/Add Customer Name -->
<span class="p-float-label input-group2">
<input
type="text"
pInputText
pTooltip="Tips : Enter your Fristname And Lastname"
tooltipPosition="top"
id="customerName"
[ngClass]="{
'invalid-input': !editingCustomer.customerName
}"
[readonly]="mode === 'vm'"
[(ngModel)]="editingCustomer.customerName"
/>
<label class="font-normal">Customer Name</label>
</span>
<span></span>
</div>
<tr class="grid-container">
<th>
<div
*ngIf="!editingCustomer.customerCode"
class="error-message"
>
This field is required Customer Code.
</div>
</th>
<th>
<div
*ngIf="!editingCustomer.customerName"
class="error-message"
>
This field is required Customer Name.
</div>
</th>
<th></th>
</tr>
<div class="grid-container mt-4">
<!-- Field Edit/ Add Email -->
<span class="p-float-label input-group2">
<input
type="text"
pInputText
pTooltip="Tips : Enter your Email With @ "
tooltipPosition="top"
id="email"
[ngClass]="{
'invalid-input': !editingCustomer.emailAddress || !editingCustomer.emailAddress.includes('@')
}"
[readonly]="mode === 'vm'"
[(ngModel)]="editingCustomer.emailAddress"
/>
<label class="font-normal">Email</label>
</span>
<!-- Field Edit/ Add Mobile -->
<span class="p-float-label input-group2">
<input
type="text"
pInputText
pTooltip="Tips : MobilePhone only Numeric"
tooltipPosition="top"
id="mobile"
[(ngModel)]="editingCustomer.mobile"
[readonly]="mode === 'vm'"
[ngClass]="{
'invalid-input': !isNumericFieldValid(
editingCustomer.mobile
)
}"
/>
<label class="font-normal">Mobile</label>
</span>
<!-- Field Edit/ Add Telephone -->
<span class="p-float-label input-group2">
<input
type="text"
pInputText
pTooltip="Tips : Telephone only Numeric"
tooltipPosition="top"
id="telephone"
[(ngModel)]="editingCustomer.telephone"
[readonly]="mode === 'vm'"
[ngClass]="{
'invalid-input': !isNumericFieldValid(
editingCustomer.telephone
)
}"
/>
<label class="font-normal">Telephone</label>
</span>
</div>
<tr class="grid-container">
<th>
<div
*ngIf="!editingCustomer.emailAddress || !editingCustomer.emailAddress.includes('@')"
class="error-message"
>
This field is required E-mail.
</div>
</th>
<th></th>
<th></th>
</tr>
<div class="grid-container mb-5 mt-4">
<!-- Field Edit/ Add Address -->
<span class="p-float-label input-group2">
<input
type="text"
pInputText
id="address"
[readonly]="mode === 'vm'"
[(ngModel)]="editingCustomer.address"
/>
<label class="font-normal">Address</label>
</span>
<!-- Field Edit/ Add Zipcode -->
<span class="p-float-label input-group2">
<input
type="text"
pInputText
pTooltip="Tips : Zipcode only Numeric"
tooltipPosition="top"
id="zipCode"
[(ngModel)]="editingCustomer.zipcode"
[readonly]="mode === 'vm'"
[ngClass]="{
'invalid-input': !isNumericFieldValid(
editingCustomer.zipcode
)
}"
/>
<label class="font-normal">Zipcode</label>
</span>
<span></span>
</div>
<br /><br />
<br />
<br />
<!-- Button Save and Cancel Edit/Add Email. -->
<div class="text-right mt-5">
<p-button *ngIf="mode === 'addm'"
icon="pi pi-save"
label="Save"
(click)="saveEmail()"
severity="success"
class="mr-2"
></p-button>
<p-button *ngIf="mode === 'edm'"
icon="pi pi-save"
label="Confrim"
(click)="confirmEditCustomer()"
severity="success"
class="mr-2"
></p-button>
<p-button
icon="pi pi-times"
label="Cancel"
(click)="closeDialogIm()"
severity="danger"
></p-button>
</div>
</div>
</div>
</div>
<!-- Popup Delete Group -->
<div *ngIf="mode === 'delgr'">
<p-dialog
header="Header"
[(visible)]="visible"
[modal]="true"
[style]="{ width: '30rem' }"
(onHide)="closeDialogED()"
>
<ng-template pTemplate="header">
<div
class="inline-flex align-items-center justify-content-center gap-2"
>
<span class="font-bold white-space-nowrap">
Delete Group
</span>
</div>
</ng-template>
<span class="p-text-secondary block mb-5"
>Are you sure You want to delete Group name?</span
>
<ng-template pTemplate="footer">
<p-button
icon="pi pi-trash"
label="Delete"
severity="danger"
(click)="confirmDeleteGroup()"
/>
<p-button
icon="pi pi-times"
[text]="true"
label="Cancel"
[plain]="true"
(click)="backToList()"
/>
</ng-template>
</p-dialog>
</div>
<!-- Popup Delete Customer in Group -->
<div *ngIf="mode === 'delcm'">
<p-dialog
header="Header"
[(visible)]="visible"
[modal]="true"
[style]="{ width: '30rem' }"
(onHide)="closeDialogIm()"
>
<ng-template pTemplate="header">
<div
class="inline-flex align-items-center justify-content-center gap-2"
>
<span class="font-bold white-space-nowrap">
Delete Email
</span>
</div>
</ng-template>
<span class="p-text-secondary block mb-5"
>Are you sure You want to delete Email?</span
>
<ng-template pTemplate="footer">
<p-button
icon="pi pi-check"
label="CONFIRM"
(click)="confirmDeleteCustomer()"
severity="danger"
/>
<p-button
icon="pi pi-times"
label="CANCEL"
[text]="true"
[plain]="true"
(click)="backToMail()"
/>
</ng-template>
</p-dialog>
</div>
<!-- Popup Export After Click Button -->
<div *ngIf="mode === 'export'">
</div>
<!-- Dialog Confrim Edit -->
<div *ngIf="mode === 'Confrim Edit'">
<p-dialog
header="Header"
[(visible)]="visible"
[modal]="true"
[style]="{ width: '25rem' }"
(onHide)="closeDialogAD()"
>
<ng-template pTemplate="header">
<div
class="inline-flex align-items-center justify-content-center gap-2"
>
<span class="font-bold white-space-nowrap">
Create Group
</span>
</div>
</ng-template>
<span class="p-text-secondary block mb-5"
>Please Insert a Group Name</span
>
<div class="flex align-items-center gap-3 mb-3">
<input
pInputText
id="GroupName"
[(ngModel)]="newGroupName"
class="flex-auto"
autocomplete="off"
/>
</div>
<ng-template pTemplate="footer">
<p-button
icon="pi pi-check"
label="CREATE"
(click)="saveGroup()"
/>
<p-button
icon="pi pi-times"
label="CANCLE"
(click)="backToList()"
severity="danger"
/>
</ng-template>
</p-dialog>
</div>
</div>