179 lines
9.7 KiB
HTML
179 lines
9.7 KiB
HTML
<div class="ui-g" style="max-width: 1025px;">
|
|
<div class="ui-g-12">
|
|
<div class="card card-w-title">
|
|
<h1 i18n="Account List screen header@@accountList">Account Information</h1>
|
|
<form [formGroup]="form">
|
|
<div class="ui-g ui-g-nopad" style="margin-top:40px">
|
|
<div class="ui-g-12 ui-g-nopad ui-fluid">
|
|
<user-profile-form formControlName="profile" [focusOnFirst]="isNew"></user-profile-form>
|
|
</div>
|
|
<div class="ui-g-12 ui-md-6 ui-lg-6 form-row">
|
|
<label for="accountType" class="field-label">
|
|
<ng-container i18n="@@accountType">Account Type</ng-container>
|
|
<!-- Account Type Disabled Feedback - Icon inline with label (detached mode) -->
|
|
<agm-constraint-message #accountTypeConstraint *ngIf="shouldShowAccountTypeDisabledMessage"
|
|
[collapsible]="true" [detached]="true" [message]="accountTypeConstraintMessage"
|
|
[title]="accountTypeConstraintTitle" severity="info" icon="pi-info-circle" class="inline-constraint">
|
|
</agm-constraint-message>
|
|
</label>
|
|
<div class="field-input">
|
|
<p-dropdown name="type" formControlName="kind" [options]="kinds" [style]="{'min-width': '120px'}"
|
|
(onChange)="onAccountTypeChange($event.value)">
|
|
<ng-template let-type pTemplate="item">
|
|
<span>
|
|
<strong>{{ type.label }}</strong>
|
|
</span>
|
|
</ng-template>
|
|
</p-dropdown>
|
|
</div>
|
|
|
|
<!-- Account Type message appears below dropdown (detached content) -->
|
|
<div *ngIf="shouldShowAccountTypeDisabledMessage" class="field-message">
|
|
<ng-container *ngTemplateOutlet="accountTypeConstraint?.detachedContentTemplate"></ng-container>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vendor Selection (conditionally shown) -->
|
|
<div *ngIf="showVendorOptions" class="ui-g-12 ui-md-6 ui-lg-6 form-row">
|
|
<!-- Show label and dropdown only when vendors are available -->
|
|
<ng-container *ngIf="availableVendorOptions.length > 1">
|
|
<label for="{{VENDOR_SYSTEM_FIELD}}" class="field-label">
|
|
<ng-container i18n="@@vendorSystemLabel">Partner System</ng-container>
|
|
<!-- Vendor System Disabled Feedback - Icon inline with label (detached mode) -->
|
|
<agm-constraint-message #vendorSystemConstraint *ngIf="shouldShowVendorSystemDisabledMessage"
|
|
[collapsible]="true" [detached]="true" [message]="vendorSystemConstraintMessage"
|
|
[title]="vendorSystemConstraintTitle" severity="info" icon="pi-info-circle" class="inline-constraint">
|
|
</agm-constraint-message>
|
|
</label>
|
|
|
|
<div class="field-input">
|
|
<p-dropdown name="{{VENDOR_SYSTEM_FIELD}}" formControlName="{{VENDOR_SYSTEM_FIELD}}"
|
|
[options]="availableVendorOptions" [style]="{'min-width': '120px'}"
|
|
(onChange)="onVendorChange($event.value)"
|
|
[class.ng-invalid]="form.get(VENDOR_SYSTEM_FIELD)?.invalid && form.get(VENDOR_SYSTEM_FIELD)?.touched">
|
|
</p-dropdown>
|
|
</div>
|
|
|
|
<!-- Validation error for when dropdown is visible -->
|
|
<div *ngIf="form.get(VENDOR_SYSTEM_FIELD)?.invalid && form.get(VENDOR_SYSTEM_FIELD)?.touched"
|
|
class="ui-message ui-messages-error field-message">
|
|
<div *ngIf="form.get(VENDOR_SYSTEM_FIELD)?.hasError('required')" i18n="@@vendorSelectionRequired">
|
|
Partner System
|
|
selection is required for partner system accounts</div>
|
|
</div>
|
|
|
|
<!-- Vendor System message appears below dropdown (detached content) -->
|
|
<div *ngIf="shouldShowVendorSystemDisabledMessage" class="field-message">
|
|
<ng-container *ngTemplateOutlet="vendorSystemConstraint?.detachedContentTemplate"></ng-container>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<!-- Vendor loading indicator -->
|
|
<div *ngIf="vendorsLoading" class="loading-indicator">
|
|
<i class="fa fa-spinner fa-spin"></i> {{ Labels.LOADING_VENDOR_OPTIONS }}
|
|
</div>
|
|
|
|
<!-- Constraint message when no vendors available (replaces dropdown) -->
|
|
<agm-constraint-message *ngIf="availableVendorOptions.length <= 1 && !vendorsLoading" [collapsible]="true"
|
|
[message]="Labels.NO_AVAILABLE_VENDORS_MESSAGE" [title]="Labels.NO_AVAILABLE_VENDORS_TITLE"
|
|
severity="info" icon="pi-info-circle" class="field-message">
|
|
</agm-constraint-message>
|
|
</div>
|
|
|
|
<!-- Test Connection Section (conditionally shown for all partner systems) -->
|
|
<div *ngIf="showVendorOptions && selectedVendor && selectedVendor !== ''"
|
|
class="ui-g-12 test-connection-section">
|
|
<div class="test-connection-controls">
|
|
<button *ngIf="!isNew" pButton type="button" icon="ui-icon-link" [label]="Labels.TEST_CONNECTION"
|
|
i18n-pTooltip="@@testPartnerConnection" pTooltip="Test partner connection with current credentials"
|
|
tooltipPosition="bottom" [disabled]="satlocLoading" (click)="onTestPartnerConnection()">
|
|
</button>
|
|
|
|
<!-- Connection Status Icons -->
|
|
<div *ngIf="!isNew && !satlocLoading">
|
|
<!-- Success/Active Status -->
|
|
<span *ngIf="satlocIntegration.status === 'active'" class="connection-status-badge success"
|
|
i18n-pTooltip="@@connectionActive" pTooltip="Connection is active and working"
|
|
tooltipPosition="right">
|
|
<i class="ui-icon-check"></i>
|
|
</span>
|
|
|
|
<!-- Error Status -->
|
|
<span *ngIf="satlocIntegration.status === 'error'" class="connection-status-badge error"
|
|
i18n-pTooltip="@@connectionError" pTooltip="Connection failed or has errors" tooltipPosition="right">
|
|
<i class="ui-icon-close"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p-dialog [(visible)]="showSaveBeforeTestDialog" [modal]="true" [responsive]="true" [closable]="false"
|
|
[style]="{width: '450px'}" [header]="Labels.SAVE_BEFORE_TEST_TITLE">
|
|
|
|
<div class="dialog-content">
|
|
<!-- Info Message -->
|
|
<p>{{ Labels.SAVE_BEFORE_TEST_MESSAGE }}</p>
|
|
|
|
<!-- Warning Message -->
|
|
<agm-constraint-message [title]="Labels.SAVE_BEFORE_TEST_WARNING_TITLE"
|
|
[message]="Labels.SAVE_BEFORE_TEST_WARNING_MESSAGE" severity="warning" icon="pi-exclamation-triangle">
|
|
</agm-constraint-message>
|
|
</div>
|
|
|
|
<p-footer>
|
|
<button pButton type="button" [label]="Labels.CANCEL_BUTTON" icon="ui-icon-close"
|
|
(click)="onCancelSaveBeforeTest()" class="ui-button-secondary">
|
|
</button>
|
|
<button pButton type="button" [label]="Labels.SAVE_AND_TEST_BUTTON" icon="ui-icon-save"
|
|
(click)="onConfirmSaveBeforeTest()" class="ui-button-success">
|
|
</button>
|
|
</p-footer>
|
|
</p-dialog>
|
|
|
|
<agm-constraint-message *ngIf="(postSaveValidationError && !postSaveValidationInProgress) || satlocError"
|
|
[message]="postSaveValidationError ? postSaveErrorMessage : satlocError"
|
|
[title]="Labels.POST_SAVE_VALIDATION_FAILED_TITLE" severity="error" icon="pi-times"
|
|
class="post-save-message">
|
|
</agm-constraint-message>
|
|
|
|
<div *ngIf="postSaveValidationInProgress" class="validation-progress">
|
|
<i class="pi pi-spinner pi-spin"></i>
|
|
<span>{{ Labels.VALIDATING_CREDENTIALS }}</span>
|
|
</div>
|
|
|
|
<agm-constraint-message *ngIf="isNew" [message]="Labels.TEST_CONNECTION_UNAVAILABLE_MESSAGE"
|
|
[title]="Labels.TEST_CONNECTION_UNAVAILABLE_TITLE" severity="info" icon="pi-info-circle"
|
|
class="field-message">
|
|
</agm-constraint-message>
|
|
|
|
<div *ngIf="satlocLoading" class="loading-indicator">
|
|
<i class="pi pi-spinner pi-spin"></i>
|
|
<span i18n="@@processingRequest">Processing request...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui-g-12 ui-g-nopad form-row ui-fluid" style="padding-top: 0px; margin-top: 16px;">
|
|
<agm-account-editor #accountEditor formControlName="account" [isNew]="isNew" [required]="true"
|
|
[showActive]="true" [isPartnerSystemUser]="isCurrentAccountPartnerSystemUser"
|
|
[showAccountConstraint]="shouldShowAccountTypeDisabledMessage"
|
|
[accountConstraintMessage]="accountTypeConstraintMessage"
|
|
[accountConstraintTitle]="accountTypeConstraintTitle">
|
|
</agm-account-editor>
|
|
</div>
|
|
|
|
<!-- Account constraint message appears below account-editor (detached content) -->
|
|
<div *ngIf="shouldShowAccountTypeDisabledMessage" class="ui-g-12">
|
|
<ng-container *ngTemplateOutlet="accountEditor?.accountConstraint?.detachedContentTemplate"></ng-container>
|
|
</div>
|
|
|
|
<div class="ui-g-12 toolbar padtop1 ui-fluid">
|
|
<button pButton [disabled]="form.invalid" type="button" style="width:auto"
|
|
[icon]="isNew ? 'ui-icon-plus' : 'ui-icon-save'" [label]="isNew ? globals.create : globals.save"
|
|
(click)="saveAccount(); false"></button>
|
|
<button pButton type="button" style="width:auto" class="amber-btn" icon="ui-icon-arrow-back"
|
|
(click)="goBack()" [label]="globals.back"></button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div> |