Skip to content

Commit

Permalink
arrow and dropdown fix (#568)
Browse files Browse the repository at this point in the history 
Co-authored-by: Fyle <[email protected]>
  • Loading branch information
@DhaaraniCIT
DhaaraniCIT and Fyle authored Feb 15, 2024
1 parent 3fea4ac commit 245df28
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 112 deletions.
122 changes: 14 additions & 108 deletions src/app/integrations/bamboo-hr/configuration/configuration.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,87 +6,22 @@
Setup your {{ brandingConfig.brandName}} Bamboo HR integration to sync employee details from Bamboo HR to {{ brandingConfig.brandName}} and notify admins when the import fails
</p>
</div>

<p class="tw-h-1-px tw-w-[100%] tw-bg-separator"></p>

<div class="tw-p-24-px">
<div class="tw-p-24-px tw-border-y tw-border-separator">
<div class="tw-rounded-12-px tw-border-1-px tw-border-disabled-bg-color">
<div class="tw-p-24-px">
<div class="tw-flex tw-justify-between">
<div class="tw-flex">
<app-svg-icon [svgSource]="'envelope'" [width]="'24px'" [height]="'24px'" [styleClasses]="'tw-text-mandatory-field-color tw-mr-20-px'"></app-svg-icon>
<div class="tw-text-14-px tw-w-360-px max-lg:tw-w-260-px">
<p class="tw-text-slightly-normal-text-color">
Send email notification to
</p>
<p class="tw-text-faded-text-color tw-pt-8-px">
Select or add an email address to notify upon import failure or integration error.
</p>
</div>
</div>
<div>
<p-multiSelect formControlName="emails" styleClass="tw-z-1 tw-w-27-vw max-lg:tw-w-20-vw tw-h-40-px" [options]="emails" [filter]="true"
[filterBy]="'email,name'" defaultLabel="Select Email Address" optionLabel="email"
display="chip">
<ng-template let-value pTemplate="selectedItems">
<div *ngIf="selectedEmail"
class="tw-flex tw-text-12-px tw-h-22-px tw-rounded-12-px tw-text-slightly-normal-text-color tw-border-1-px tw-border-box-color tw-bg-white">
<p class="tw-pt-2-px tw-pl-12-px tw-pr-6-px">{{ selectedEmail }}</p>
<p class="tw-w-1-px tw-mr-8-px tw-bg-separator"></p>
<app-svg-icon (iconClick)="removeEmail()" [svgSource]="'cross-small'" [width]="'12px'" [height]="'12px'"
[styleClasses]="'tw-pr-10-px tw-pt-6-px tw-text-slightly-normal-text-color'"></app-svg-icon>
</div>
<div *ngIf="selectedEmail && cofigurationForm.value.emails.length > 1" class="tw-pl-8-px">
<p class="tw-flex tw-justify-center tw-items-center tw-p-5-px tw-h-24-px tw-w-24-px tw-bg-disabled-bg-color tw-text-12-px tw-text-faded-text-color tw-rounded-12-px">
+{{ cofigurationForm.value.emails.length - 1 }}
</p>
</div>
<div *ngIf="!selectedEmail" class="tw-text-placeholder">
Select Email Address
</div>
</ng-template>
<ng-template pTemplate="filter" let-options="options">
<div *ngIf="emails.length" class="p-inputgroup">
<div class="p-input-icon-left p-input-icon-right">
<i>
<app-svg-icon [svgSource]="'search-medium'" [height]="'18px'" [width]="'18px'"></app-svg-icon>
</i>
<input type="text" class="!tw-h-32-px !tw-w-300-px" (keyup)="options.filter($event)"
pInputText placeholder="Search by Name / Email" formControlName="search" />
<i>
<app-svg-icon [svgSource]="'cross-medium'" [width]="'16px'" [height]="'16px'"
[styleClasses]="'tw-text-faded-text-color tw-cursor-pointer'"
(iconClick)="clearSearch(options)">
</app-svg-icon>
</i>
</div>
</div>
</ng-template>
<ng-template let-user pTemplate="item">
<div>
<p class="tw-text-sub-text-color tw-text-14-px">{{ user.name }}</p>
<p class="tw-pt-4-px tw-text-placeholder tw-text-12-px">{{ user.email }}</p>
</div>
</ng-template>
</p-multiSelect>

<div class="tw-flex tw-pt-24-px tw-w-27-vw max-lg:tw-w-20-vw">
<p class="tw-text-slightly-normal-text-color tw-text-14-px tw-pr-12-px">or</p>
<div class="tw-flex tw-cursor-pointer" (click)="openDialog()">
<app-svg-icon [svgSource]="'plus-square-medium'" [width]="'18px'" [height]="'18px'"
[styleClasses]="'tw-text-mandatory-field-color'">
</app-svg-icon>
<p class="tw-pl-6-px tw-text-slightly-normal-text-color tw-text-14-px">Add new Email address</p>
</div>
</div>
</div>
</div>
</div>
<app-email-multi-select-field
[form]="cofigurationForm"
[appName]="appName"
[label]="'Send email notification to'"
[isFieldMandatory]="false"
[mandatoryErrorListName]="'email for error notification'"
[subLabel]="'Select or add an email address to notify upon import failure or integration error.'"
[options]="emails"
[iconPath]="'list'"
[placeholder]="'Select email address'"
[formControllerName]="'email'">
</app-email-multi-select-field>
</div>
</div>

<p class="tw-h-1-px tw-w-[100%] tw-bg-separator"></p>

<div class="tw-flex tw-justify-end tw-p-24-px">
<div>
<button [disabled]="!cofigurationForm.valid" pButton type="button" class="remove-bg p-button-raised" [ngClass]="isConfigurationSaveInProgress ? '!tw-bg-cta-disabled !tw-cursor-no-drop' : '!tw-bg-mandatory-field-color'" (click)="saveSettings()">
Expand All @@ -97,33 +32,4 @@
</div>
</div>
</div>

<p-dialog [dismissableMask]="true" [showHeader]="false" [modal]="true" [(visible)]="showDialog" [draggable]="false" [style]="{width: '468px'}">
<div class="tw-pt-34-px tw-px-40-px" [formGroup]="addEmailForm">
<p class="tw-text-slightly-normal-text-color tw-text-24-px tw-font-500">Add new Email Address</p>
<p class="tw-pt-10-px tw-text-faded-text-color tw-text-12-px">
Add an email address on which you would like to recieve your integration notifcation mails.
</p>

<div class="tw-pt-24-px">
<p class="tw-text-sub-text-color tw-text-14-px tw-pb-8-px">
Name <span class="tw-text-mandatory-field-color">*</span>
</p>
<input formControlName="name" type="text" class="tw-w-388-px tw-h-48-px" pInputText placeholder="Enter name" />

<p class="tw-pt-16-px tw-pb-8-px tw-text-sub-text-color tw-text-14-px">
Email Address <span class="tw-text-mandatory-field-color">*</span>
</p>

<div class="tw-flex">
<input formControlName="email" type="text" class="tw-w-388-px tw-h-48-px" pInputText placeholder="Enter name" />
</div>

<div class="tw-flex tw-items-center tw-pt-24-px tw-pb-40-px">
<button pButton type="button" class="p-button-raised" [disabled]="!addEmailForm.valid" (click)="addEmail()">
Save
</button>
</div>
</div>
</div>
</p-dialog>

6 changes: 4 additions & 2 deletions src/app/integrations/bamboo-hr/configuration/configuration.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DropdownFilterOptions } from 'primeng/dropdown';
import { brandingConfig } from 'src/app/branding/branding-config';
import { BambooHRConfiguration, BambooHRConfigurationPost, BambooHrModel, EmailOption } from 'src/app/core/models/bamboo-hr/bamboo-hr.model';
import { ClickEvent, TrackingApp } from 'src/app/core/models/enum/enum.model';
import { AppName, ClickEvent, TrackingApp } from 'src/app/core/models/enum/enum.model';
import { Org } from 'src/app/core/models/org/org.model';
import { TrackingService } from 'src/app/core/services/integration/tracking.service';
import { OrgService } from 'src/app/core/services/org/org.service';
Expand Down Expand Up @@ -36,6 +36,8 @@ export class ConfigurationComponent implements OnInit {

showDialog: boolean;

appName = AppName.BAMBOO_HR;

readonly brandingConfig = brandingConfig;

private readonly org: Org = this.orgService.getCachedOrg();
Expand Down Expand Up @@ -110,7 +112,7 @@ export class ConfigurationComponent implements OnInit {
private setupPage(): void {
this.cofigurationForm = this.formBuilder.group({
additionalEmails: [this.bambooHrConfiguration?.additional_email_options ? this.bambooHrConfiguration.additional_email_options : []],
emails: [this.bambooHrConfiguration?.emails_selected ? this.bambooHrConfiguration?.emails_selected : [], Validators.required],
email: [this.bambooHrConfiguration?.emails_selected ? this.bambooHrConfiguration?.emails_selected : [], Validators.required],
search: []
});

Expand Down
4 changes: 2 additions & 2 deletions src/app/shared/components/helper/paginator/paginator.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,15 @@
<div *ngIf="pageType === PaginatorPage.DASHBOARD" class="tw-border tw-border-border-tertiary tw-flex tw-items-center tw-rounded-4-px">
<div class="tw-border-r tw-border-r-separator">
<button type="button" class="tw-h-32-px tw-w-30-px prevBtn" (click)="previousPageChange(page)" [disabled]="page === 1" >
<app-svg-icon [svgSource]="'arrow-left-medium'" [styleClasses]="'tw-pt-6-px'" [height]="'18px'" [width]="'18px'"></app-svg-icon>
<app-svg-icon [svgSource]="'arrow-left-medium'" [styleClasses]="'tw-pl-6-px'" [height]="'18px'" [width]="'18px'"></app-svg-icon>
</button>
</div>
<div class="tw-w-30-px tw-h-32-px tw-flex tw-items-center tw-justify-center">
{{page}}
</div>
<div class="tw-border-l tw-border-l-separator">
<button type="button" class="tw-h-32-px tw-w-30-px nextBtn" (click)="nextPageChange(page)" [disabled]="page === totalPages">
<app-svg-icon [svgSource]="'arrow-right-medium'" [styleClasses]="'tw-pt-6-px'" [height]="'18px'" [width]="'18px'"></app-svg-icon>
<app-svg-icon [svgSource]="'arrow-right-medium'" [styleClasses]="'tw-pl-6-px'" [height]="'18px'" [width]="'18px'"></app-svg-icon>
</button>
</div>
</div>
Expand Down

0 comments on commit 245df28

Please sign in to comment.