Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
99a74dbd57 | ||
|
|
a00d18705a | ||
|
|
43faace480 | ||
|
|
97ea7c3554 | ||
|
|
bee89fc12b | ||
|
|
fe6dd92ef4 | ||
|
|
d8edd81fae |
@@ -23,20 +23,6 @@ export interface DashboardContentModel {
|
||||
component?: any;
|
||||
name: string;
|
||||
type?:string;
|
||||
// Common properties
|
||||
table?: string;
|
||||
connection?: string;
|
||||
baseFilters?: any[];
|
||||
// Common filter properties
|
||||
commonFilterEnabled?: boolean;
|
||||
// Drilldown properties
|
||||
drilldownEnabled?: boolean;
|
||||
drilldownApiUrl?: string;
|
||||
drilldownXAxis?: string;
|
||||
drilldownYAxis?: string;
|
||||
drilldownParameter?: string;
|
||||
drilldownFilters?: any[];
|
||||
drilldownLayers?: any[];
|
||||
}
|
||||
|
||||
export interface DashboardModel {
|
||||
@@ -81,10 +67,6 @@ export class value1{
|
||||
|
||||
|
||||
export const WidgetsMock: WidgetModel[] = [
|
||||
{
|
||||
name: 'Common Filter',
|
||||
identifier: 'common_filter'
|
||||
},
|
||||
{
|
||||
name: 'Radar Chart',
|
||||
identifier: 'radar_chart'
|
||||
@@ -129,4 +111,4 @@ export const WidgetsMock: WidgetModel[] = [
|
||||
name: 'To Do',
|
||||
identifier: 'to_do_chart'
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
@@ -1,155 +1,39 @@
|
||||
<!-- Modern AI-Inspired Login Page -->
|
||||
<div class="modern-login-container" *ngIf="showLogin2">
|
||||
<!-- Background Elements -->
|
||||
<div class="login-background">
|
||||
<div class="gradient-overlay"></div>
|
||||
<div class="floating-shapes">
|
||||
<div class="shape shape-1"></div>
|
||||
<div class="shape shape-2"></div>
|
||||
<div class="shape shape-3"></div>
|
||||
<div class="shape shape-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <router-outlet></router-outlet> -->
|
||||
|
||||
<!-- Main Login Content -->
|
||||
<div class="login-content">
|
||||
<!-- Left Side - Branding -->
|
||||
<div class="login-branding">
|
||||
<div class="brand-content">
|
||||
<div class="logo-section">
|
||||
<div class="logo-container">
|
||||
<img class="logo-img" src="assets/images/icon/micrologo.png" alt="CloudnSure Logo">
|
||||
<div class="logo-glow"></div>
|
||||
</div>
|
||||
<h1 class="brand-title">
|
||||
<ng-container *ngIf="loginEnvironment?.companyName; else defaultTitle">
|
||||
{{ loginEnvironment.companyName }}
|
||||
</ng-container>
|
||||
<ng-template #defaultTitle>
|
||||
CloudnSure
|
||||
</ng-template>
|
||||
</h1>
|
||||
<p class="brand-subtitle">Enterprise Platform</p>
|
||||
</div>
|
||||
|
||||
<div class="brand-features">
|
||||
<div class="feature-item">
|
||||
<clr-icon shape="shield" class="feature-icon"></clr-icon>
|
||||
<span>Secure & Reliable</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<clr-icon shape="analytics" class="feature-icon"></clr-icon>
|
||||
<span>Advanced Analytics</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<clr-icon shape="cog" class="feature-icon"></clr-icon>
|
||||
<span>Customizable</span>
|
||||
</div>
|
||||
<!-- <div class="login-wrapper" *ngIf="showLogin2 && loginEnvironment.templateNo == 'Template 1'" [style.backgroundImage]="'url(' + loginEnvironment.imagePath + ')'">
|
||||
<form class="login">
|
||||
<section class="title">
|
||||
<h3 class="welcome">Welcome to</h3>
|
||||
{{ loginEnvironment.companyName }}
|
||||
<h5 class="hint">Use your ID to sign in OR <a [routerLink]="['/email-verification']" class="signup">create one now </a> </h5>
|
||||
</section>
|
||||
<div class="login-group">
|
||||
<clr-input-container>
|
||||
<label class="clr-sr-only">Username</label>
|
||||
<input type="text" name="username" clrInput autocomplete="off" [(ngModel)]="model.email"
|
||||
placeholder="Username (sysadmin)"/>
|
||||
</clr-input-container>
|
||||
<clr-password-container>
|
||||
<label class="clr-sr-only">Password</label>
|
||||
<input type="password" name="password" clrPassword id="login_password" autocomplete="off" [(ngModel)]="model.password"
|
||||
placeholder="Password (test3)"/>
|
||||
</clr-password-container>
|
||||
<clr-checkbox-wrapper>
|
||||
<input clrCheckbox type="checkbox" id="rememberme">
|
||||
<label for="rememberme"> Remember me </label>
|
||||
</clr-checkbox-wrapper>
|
||||
|
||||
<div class="error active" *ngIf="isError">
|
||||
Invalid user name or password
|
||||
</div>
|
||||
|
||||
<button [disabled]="!model.email || !model.password" type="submit" class="btn btn-primary"
|
||||
(click)="onLogin()">Login</button>
|
||||
<a (click)="goforgotpass()" class="signup">{{ loginEnvironment.forgotpassword }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div> -->
|
||||
|
||||
<!-- Right Side - Login Form -->
|
||||
<div class="login-form-section">
|
||||
<div class="form-container">
|
||||
<div class="form-header">
|
||||
<h2 class="form-title">Welcome Back</h2>
|
||||
<p class="form-subtitle">Sign in to your account to continue</p>
|
||||
</div>
|
||||
|
||||
<form class="modern-login-form" (ngSubmit)="onLogin()">
|
||||
<!-- Username Field -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Username</label>
|
||||
<div class="input-container">
|
||||
<clr-icon shape="user" class="input-icon"></clr-icon>
|
||||
<input type="text" name="username" class="modern-input" autocomplete="username" [(ngModel)]="model.email"
|
||||
(input)="clearError()" placeholder="Enter your username" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Password Field -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Password</label>
|
||||
<div class="input-container">
|
||||
<clr-icon shape="lock" class="input-icon"></clr-icon>
|
||||
<input [type]="showPassword ? 'text' : 'password'" name="password" class="modern-input"
|
||||
autocomplete="current-password" [(ngModel)]="model.password" (input)="clearError()"
|
||||
placeholder="Enter your password" required>
|
||||
<button type="button" class="password-toggle" (click)="togglePasswordVisibility()"
|
||||
[attr.aria-label]="showPassword ? 'Hide password' : 'Show password'">
|
||||
<span class="toggle-text">{{ showPassword ? 'Hide' : 'Show' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Remember Me & Forgot Password -->
|
||||
<div class="form-options">
|
||||
<label class="checkbox-container">
|
||||
<input type="checkbox" id="rememberme" class="modern-checkbox">
|
||||
<span class="checkmark"></span>
|
||||
<span class="checkbox-label">Remember me</span>
|
||||
</label>
|
||||
<a href="javascript://" class="forgot-link" (click)="goforgotpass()">
|
||||
Forgot password?
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div class="error-message" *ngIf="isError">
|
||||
<clr-icon shape="exclamation-triangle"></clr-icon>
|
||||
<span>{{ errMsg || 'Invalid username or password' }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Login Button -->
|
||||
<button type="submit" class="modern-login-btn" [disabled]="isLoading" [class.loading]="isLoading">
|
||||
<span class="btn-content" *ngIf="!isLoading">
|
||||
<clr-icon shape="login"></clr-icon>
|
||||
Sign In
|
||||
</span>
|
||||
<span class="btn-loading" *ngIf="isLoading">
|
||||
<div class="spinner"></div>
|
||||
Signing In...
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!-- Sign Up Link -->
|
||||
<div class="signup-section" *ngIf="loginEnvironment?.isSignup === 'true'">
|
||||
<p class="signup-text">
|
||||
Don't have an account?
|
||||
<a [routerLink]="['/email-verification']" class="signup-link">
|
||||
Create one now
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Social Login (Optional) -->
|
||||
<div class="social-login">
|
||||
<div class="divider">
|
||||
<span>Or continue with</span>
|
||||
</div>
|
||||
<div class="social-buttons">
|
||||
<button class="social-btn google-btn" type="button">
|
||||
<clr-icon shape="world"></clr-icon>
|
||||
<span>Google</span>
|
||||
</button>
|
||||
<button class="social-btn microsoft-btn" type="button">
|
||||
<clr-icon shape="world"></clr-icon>
|
||||
<span>Microsoft</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
<div [class]="getWrapperClass()" *ngIf="showLogin2 && loginEnvironment.templateNo == '<templateNo>'" [style.backgroundImage]="'url(' + ('../../../../assets/images/new.png') + ')'">
|
||||
<form class="login">
|
||||
<section class="title">
|
||||
@@ -224,7 +108,7 @@
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <div class="login-wrapper"> -->
|
||||
<div [class]="getWrapperClass()" *ngIf="showLogin2 && loginEnvironment.templateNo == 'Template 2'" [style.backgroundImage]="'url(' + (loginEnvironment.loginImageURL !== 'null' || null ? loginEnvironment.loginImageURL : '../../../../assets/images/new.png') + ')'">
|
||||
<form class="login">
|
||||
<section class="title">
|
||||
@@ -259,4 +143,4 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
-->
|
||||
|
||||
@@ -1,653 +1,23 @@
|
||||
// ========================================
|
||||
// MODERN AI-INSPIRED LOGIN PAGE STYLES
|
||||
// ========================================
|
||||
|
||||
@import '../../../../styles/design-tokens';
|
||||
|
||||
// Modern Login Container
|
||||
.modern-login-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, $primary-50 0%, $primary-100 50%, $secondary-50 100%);
|
||||
}
|
||||
|
||||
// Background Elements
|
||||
.login-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.gradient-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg,
|
||||
rgba($primary-600, 0.1) 0%,
|
||||
rgba($primary-400, 0.05) 50%,
|
||||
rgba($accent-purple, 0.1) 100%);
|
||||
.tamplate1 {
|
||||
background-image: url(../../../../assets/images/new.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 60%;
|
||||
background-position: right center;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.tamplate2 {
|
||||
background-image: url(../../../../assets/images/new.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 60%;
|
||||
background-position: left center;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
.signup {
|
||||
cursor: pointer;
|
||||
// color:#80b0ff;
|
||||
}
|
||||
|
||||
.floating-shapes {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.shape {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(45deg, rgba($primary-400, 0.1), rgba($accent-purple, 0.1));
|
||||
animation: float 6s ease-in-out infinite;
|
||||
|
||||
&.shape-1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
&.shape-2 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: 60%;
|
||||
right: 15%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
&.shape-3 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
bottom: 20%;
|
||||
left: 20%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
&.shape-4 {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
top: 30%;
|
||||
right: 30%;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Main Content
|
||||
.login-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: $space-8;
|
||||
gap: $space-12;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Left Side - Branding
|
||||
.login-branding {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $space-8;
|
||||
|
||||
.brand-content {
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
margin-bottom: $space-8;
|
||||
|
||||
.logo-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-bottom: $space-6;
|
||||
|
||||
.logo-img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 8px 16px rgba($primary-600, 0.3));
|
||||
transition: transform $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
.logo-glow {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
background: linear-gradient(45deg, $primary-400, $accent-purple);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
filter: blur(20px);
|
||||
transition: opacity $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.logo-img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.logo-glow {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: $text-4xl;
|
||||
font-weight: $font-bold;
|
||||
color: $gray-900;
|
||||
margin-bottom: $space-2;
|
||||
background: linear-gradient(135deg, $primary-600, $accent-purple);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
font-size: $text-lg;
|
||||
color: $gray-600;
|
||||
font-weight: $font-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $space-4;
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-3;
|
||||
padding: $space-3;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: $radius-lg;
|
||||
backdrop-filter: $backdrop-blur-sm;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transition: all $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
transform: translateX(8px);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
color: $primary-600;
|
||||
font-size: $text-lg;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right Side - Login Form
|
||||
.login-form-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $space-8;
|
||||
|
||||
.form-container {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: $backdrop-blur-md;
|
||||
border-radius: $radius-2xl;
|
||||
padding: $space-8;
|
||||
box-shadow: $shadow-xl;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.form-header {
|
||||
text-align: center;
|
||||
margin-bottom: $space-8;
|
||||
|
||||
.form-title {
|
||||
font-size: $text-2xl;
|
||||
font-weight: $font-bold;
|
||||
color: $gray-900;
|
||||
margin-bottom: $space-2;
|
||||
}
|
||||
|
||||
.form-subtitle {
|
||||
font-size: $text-sm;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
.modern-login-form {
|
||||
.form-group {
|
||||
margin-bottom: $space-6;
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-semibold;
|
||||
color: $gray-700;
|
||||
margin-bottom: $space-2;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.input-icon {
|
||||
position: absolute;
|
||||
left: $space-3;
|
||||
color: $gray-400;
|
||||
font-size: $text-base;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.modern-input {
|
||||
width: 100%;
|
||||
padding: $space-3 $space-3 $space-3 $space-10;
|
||||
border: 2px solid $gray-200;
|
||||
border-radius: $radius-lg;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
color: $gray-900;
|
||||
background: $white;
|
||||
transition: all $duration-200 $ease-out;
|
||||
|
||||
&::placeholder {
|
||||
color: $gray-400;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $primary-500;
|
||||
box-shadow: 0 0 0 3px rgba($primary-500, 0.1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
// Password field with toggle button
|
||||
&:has(.password-toggle) .modern-input {
|
||||
padding-right: $space-10;
|
||||
}
|
||||
|
||||
.password-toggle {
|
||||
position: absolute;
|
||||
right: $space-3;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
color: $gray-400;
|
||||
cursor: pointer;
|
||||
padding: $space-1;
|
||||
border-radius: $radius-sm;
|
||||
transition: all $duration-200 $ease-out;
|
||||
z-index: 2;
|
||||
|
||||
&:hover {
|
||||
color: $gray-600;
|
||||
background: rgba($gray-100, 0.5);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
color: $primary-600;
|
||||
background: rgba($primary-50, 0.5);
|
||||
}
|
||||
|
||||
clr-icon {
|
||||
font-size: $text-base;
|
||||
}
|
||||
|
||||
.toggle-text {
|
||||
font-size: $text-xs;
|
||||
font-weight: $font-semibold;
|
||||
color: inherit;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: $space-6;
|
||||
|
||||
.checkbox-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-2;
|
||||
cursor: pointer;
|
||||
|
||||
.modern-checkbox {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: $primary-600;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
font-size: $text-sm;
|
||||
color: $gray-600;
|
||||
font-weight: $font-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-link {
|
||||
font-size: $text-sm;
|
||||
color: $primary-600;
|
||||
text-decoration: none;
|
||||
font-weight: $font-medium;
|
||||
transition: color $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
color: $primary-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-2;
|
||||
padding: $space-3;
|
||||
background: rgba($accent-red, 0.1);
|
||||
border: 1px solid rgba($accent-red, 0.2);
|
||||
border-radius: $radius-lg;
|
||||
margin-bottom: $space-6;
|
||||
color: $accent-red;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
|
||||
clr-icon {
|
||||
font-size: $text-base;
|
||||
}
|
||||
}
|
||||
|
||||
.modern-login-btn {
|
||||
width: 100%;
|
||||
padding: $space-4;
|
||||
background: linear-gradient(135deg, $primary-600, $primary-700);
|
||||
color: $white;
|
||||
border: none;
|
||||
border-radius: $radius-lg;
|
||||
font-size: $text-base;
|
||||
font-weight: $font-semibold;
|
||||
cursor: pointer;
|
||||
transition: all $duration-200 $ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-lg;
|
||||
background: linear-gradient(135deg, $primary-700, $primary-800);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
.btn-content {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.btn-loading {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $space-2;
|
||||
transition: opacity $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
.btn-loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-2;
|
||||
opacity: 0;
|
||||
transition: opacity $duration-200 $ease-out;
|
||||
|
||||
.spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-top: 2px solid $white;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.signup-section {
|
||||
text-align: center;
|
||||
margin-top: $space-6;
|
||||
|
||||
.signup-text {
|
||||
font-size: $text-sm;
|
||||
color: $gray-600;
|
||||
|
||||
.signup-link {
|
||||
color: $primary-600;
|
||||
text-decoration: none;
|
||||
font-weight: $font-semibold;
|
||||
transition: color $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
color: $primary-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-login {
|
||||
margin-top: $space-8;
|
||||
|
||||
.divider {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin-bottom: $space-6;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: $gray-200;
|
||||
}
|
||||
|
||||
span {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 0 $space-4;
|
||||
font-size: $text-xs;
|
||||
color: $gray-500;
|
||||
font-weight: $font-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.social-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: $space-3;
|
||||
|
||||
.social-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $space-2;
|
||||
padding: $space-3;
|
||||
border: 2px solid $gray-200;
|
||||
border-radius: $radius-lg;
|
||||
background: $white;
|
||||
color: $gray-700;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
cursor: pointer;
|
||||
transition: all $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
border-color: $gray-300;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
&.google-btn:hover {
|
||||
border-color: #db4437;
|
||||
color: #db4437;
|
||||
}
|
||||
|
||||
&.microsoft-btn:hover {
|
||||
border-color: #0078d4;
|
||||
color: #0078d4;
|
||||
}
|
||||
|
||||
clr-icon {
|
||||
font-size: $text-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Animations
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
// Responsive Design
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
.login-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: $space-8;
|
||||
padding: $space-6;
|
||||
}
|
||||
|
||||
.login-branding {
|
||||
order: 2;
|
||||
padding: $space-4;
|
||||
|
||||
.brand-content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.logo-section .brand-title {
|
||||
font-size: $text-3xl;
|
||||
}
|
||||
|
||||
.brand-features {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-section {
|
||||
order: 1;
|
||||
padding: $space-4;
|
||||
|
||||
.form-container {
|
||||
padding: $space-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
.modern-login-container {
|
||||
padding: $space-4;
|
||||
}
|
||||
|
||||
.login-content {
|
||||
padding: $space-4;
|
||||
}
|
||||
|
||||
.login-branding {
|
||||
.brand-features {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-section .form-container {
|
||||
padding: $space-4;
|
||||
}
|
||||
}
|
||||
|
||||
// Legacy styles (preserved for compatibility)
|
||||
.tamplate1 {
|
||||
background-image: url(../../../../assets/images/new.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 60%;
|
||||
background-position: right center;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.tamplate2 {
|
||||
background-image: url(../../../../assets/images/new.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 60%;
|
||||
background-position: left center;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.signup {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@@ -41,8 +41,6 @@ export class LoginPageComponent implements OnInit {
|
||||
email = '';
|
||||
password = '';
|
||||
isError = false;
|
||||
isLoading = false;
|
||||
showPassword = false;
|
||||
|
||||
model: any = {};
|
||||
errMsg: string = '';
|
||||
@@ -73,82 +71,32 @@ export class LoginPageComponent implements OnInit {
|
||||
}
|
||||
|
||||
onLogin() {
|
||||
console.log('onLogin called');
|
||||
console.log('Form data:', { email: this.model.email, password: this.model.password });
|
||||
|
||||
// Reset error state
|
||||
this.isError = false;
|
||||
this.errMsg = '';
|
||||
|
||||
// Validate inputs
|
||||
if (!this.model.email || !this.model.password) {
|
||||
this.isError = true;
|
||||
this.errMsg = 'Please enter both email and password';
|
||||
console.log('Validation failed - missing email or password');
|
||||
return;
|
||||
}
|
||||
|
||||
// Set loading state
|
||||
this.isLoading = true;
|
||||
console.log('Loading state set to true, making API call...');
|
||||
|
||||
// tslint:disable-next-line:max-line-length
|
||||
this.loginService.getToken(this.model.email, this.model.password)
|
||||
.subscribe(
|
||||
resp => {
|
||||
console.log('API Response received:', resp);
|
||||
// Always reset loading state when response is received
|
||||
this.isLoading = false;
|
||||
|
||||
// Handle different response formats
|
||||
if (resp.operationStatus === 'ERROR') {
|
||||
this.isError = true;
|
||||
this.errMsg = resp.operationMessage || 'Login failed';
|
||||
return;
|
||||
}
|
||||
// Handle different response formats
|
||||
if (resp.success === 'false' || resp.success === false) {
|
||||
this.isError = true;
|
||||
this.errMsg = resp.message || 'Login failed';
|
||||
return;
|
||||
}
|
||||
if (resp.user === undefined || resp.user.token === undefined || resp.user.token === "INVALID") {
|
||||
this.isError = true;
|
||||
this.errMsg = 'Invalid email or password';
|
||||
return;
|
||||
}
|
||||
|
||||
// Success - navigate to landing page
|
||||
console.log('Login successful, navigating to:', resp.landingPage);
|
||||
this.router.navigate([resp.landingPage]);
|
||||
},
|
||||
.subscribe(resp => {
|
||||
if (resp.user === undefined || resp.user.token === undefined || resp.user.token === "INVALID") {
|
||||
this.errMsg = 'Checking Email or password';
|
||||
return;
|
||||
}
|
||||
this.router.navigate([resp.landingPage]);// add , {skipLocationChange: true}
|
||||
},
|
||||
(errResponse: HttpErrorResponse) => {
|
||||
console.log('API Error received:', errResponse);
|
||||
// Always reset loading state when error occurs
|
||||
this.isLoading = false;
|
||||
this.isError = true;
|
||||
|
||||
switch (errResponse.status) {
|
||||
case 401:
|
||||
this.errMsg = 'Email or password is incorrect';
|
||||
break;
|
||||
case 404:
|
||||
this.errMsg = 'Service not found';
|
||||
break;
|
||||
case 408:
|
||||
this.errMsg = 'Request timeout';
|
||||
break;
|
||||
this.errMsg = 'Request Timedout';
|
||||
case 500:
|
||||
this.errMsg = 'Internal server error';
|
||||
break;
|
||||
case 0:
|
||||
this.errMsg = 'Network error - please check your connection';
|
||||
break;
|
||||
this.errMsg = 'Internal Server Error';
|
||||
default:
|
||||
this.errMsg = 'An error occurred. Please try again.';
|
||||
this.errMsg = 'Server Error';
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
goaccount(){
|
||||
}
|
||||
@@ -156,17 +104,5 @@ export class LoginPageComponent implements OnInit {
|
||||
this.router.navigate(["../forgotpass"], { relativeTo: this.route });
|
||||
}
|
||||
|
||||
// Clear error when user starts typing
|
||||
clearError() {
|
||||
if (this.isError) {
|
||||
this.isError = false;
|
||||
this.errMsg = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle password visibility
|
||||
togglePasswordVisibility() {
|
||||
this.showPassword = !this.showPassword;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,6 +12,12 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -234,8 +240,7 @@ export class Stepper_workflowComponent implements OnInit {
|
||||
|
||||
rsModaldescription = false;
|
||||
goToReplaceStringdescription(row) {
|
||||
this.rowSelected = row;
|
||||
this.rsModaldescription = true;
|
||||
this.rowSelected = row; this.rsModaldescription = true;
|
||||
}
|
||||
|
||||
|
||||
@@ -248,39 +253,6 @@ export class Stepper_workflowComponent implements OnInit {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
this.router.navigate(["../demostepper/", id], { relativeTo: this.route });
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
// updateaction
|
||||
|
||||
@@ -1,465 +1,279 @@
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong">
|
||||
<li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
|
||||
<li><a href="javascript://"><clr-icon shape="lock"></clr-icon> {{'SECURITY' | translate}}</a></li>
|
||||
<li><a href="javascript://">{{'MENU_ACCESS_CONTROL' | translate}}</a></li>
|
||||
<li><a href="javascript://"><clr-icon shape="lock"></clr-icon>{{'SECURITY' | translate}}</a></li>
|
||||
<li><a href="javascript://">{{ 'MENU_ACCESS_CONTROL' | translate }}</a></li>
|
||||
</ol>
|
||||
|
||||
<section class="mac-hero">
|
||||
<div class="mac-hero__content">
|
||||
<div class="mac-hero__icon">
|
||||
<clr-icon shape="shield-check"></clr-icon>
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-6" style="display:flex ;">
|
||||
<div style="margin-right: 25px;">
|
||||
<h4 style="font-weight:300;">{{ 'MENU_ACCESS_CONTROL' | translate }} </h4>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mac-hero__title">{{'MENU_ACCESS_CONTROL' | translate}}</h2>
|
||||
<p class="mac-hero__subtitle">{{'SECURITY' | translate}}</p>
|
||||
<div style="margin-top:27px ; position: relative;">
|
||||
<span class="label label-light-blue" style="display: inline;">{{ 'EDIT_MODE' | translate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mac-hero__actions">
|
||||
<span class="mac-chip">{{'EDIT_MODE' | translate}}</span>
|
||||
<div class="mac-sep"></div>
|
||||
<label class="mac-label">{{'FOR' | translate}}</label>
|
||||
<select class="mac-select" (change)="idofselected($event.target.value)">
|
||||
<div class="clr-col-6" style="text-align: right;">
|
||||
{{ 'FOR' | translate }} <select id="" style="height: 30px;" (change)="idofselected($event.target.value)">
|
||||
<option *ngFor="let sub of givendata" [value]="sub.usrGrp" [selected]="sub.usrGrp== 40">{{sub.groupName}}</option>
|
||||
</select>
|
||||
<button id="add" class="mac-btn mac-btn-primary" (click)="getbyuseriddata()">
|
||||
<clr-icon shape="refresh"></clr-icon>
|
||||
<span class="mac-btn-text">{{'RELOAD' | translate}}</span>
|
||||
</button>
|
||||
<div class="mac-toggle">
|
||||
<span class="mac-toggle__label" *ngIf="!toggle">{{'SHOW_ALL' | translate}}</span>
|
||||
<span class="mac-toggle__label" *ngIf="toggle">{{'ONLY_MAIN_MENU' | translate}}</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" ([ngModel])="toggle" checked (click)="toggleCheckbox()">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<button id="add" class="btn btn-primary" style="margin-left: 20px;" (click)="getbyuseriddata()"> {{ 'RELOAD' |
|
||||
translate }} </button>
|
||||
<span *ngIf="!toggle">{{ 'SHOW_ALL' | translate }} </span><span *ngIf="toggle">{{ 'ONLY_MAIN_MENU' | translate
|
||||
}}</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" ([ngModel])="toggle" checked (click)="toggleCheckbox()">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<div class="mac-container">
|
||||
<div class="dg-wrapper">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-12 mac-actions">
|
||||
<button id="add" class="mac-btn mac-btn-primary" (click)="modaladd()" [disabled]="!toggle">
|
||||
<clr-icon shape="plus"></clr-icon>
|
||||
<span>{{'ADD' | translate}}</span>
|
||||
</button>
|
||||
<div *ngIf="!toggle" class="error-message mac-hint">
|
||||
{{'CLOSE_TOGGLE_TO_ACTIVATE_ADD_BUTTON' | translate}}
|
||||
|
||||
<div class="clr-col-12" style="text-align: right;">
|
||||
|
||||
<button id="add" class="btn btn-primary" style="margin-left: 20px;" (click)="modaladd()" [disabled]="!toggle">
|
||||
<clr-icon shape="plus"></clr-icon>{{ 'ADD' | translate }} </button>
|
||||
<div *ngIf="!toggle" class="error-message" style="color: red; font-size: 14px; margin-top: 5px;">
|
||||
{{ ' Close toggle to activate Add button. ' | translate }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mac-toolbar">
|
||||
<div class="mac-toolbar__left">
|
||||
<div class="mac-search">
|
||||
<clr-icon shape="search"></clr-icon>
|
||||
<input class="mac-search__input" type="text" placeholder="{{'SEARCH' | translate}}" [(ngModel)]="filterText" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mac-toolbar__right mac-stats">
|
||||
<div class="mac-stat">
|
||||
<div class="mac-stat__value">{{ totalItems }}</div>
|
||||
<div class="mac-stat__label">{{'TOTAL_ITEMS' | translate}}</div>
|
||||
</div>
|
||||
<div class="mac-stat">
|
||||
<div class="mac-stat__value">{{ mainMenuCount }}</div>
|
||||
<div class="mac-stat__label">{{'MAIN_MENUS' | translate}}</div>
|
||||
</div>
|
||||
<div class="mac-stat">
|
||||
<div class="mac-stat__value">{{ subMenuCount }}</div>
|
||||
<div class="mac-stat__label">{{'SUB_MENUS' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<clr-datagrid class="mac-grid" [clrDgLoading]="loading" *ngIf="!toggle">
|
||||
<clr-datagrid [clrDgLoading]="loading" *ngIf="!toggle">
|
||||
<clr-dg-placeholder>
|
||||
<ng-template #loadingSpinner>
|
||||
<clr-spinner>{{'LOADING' | translate}} ... </clr-spinner>
|
||||
</ng-template>
|
||||
<div *ngIf="alldata?.length === 0;else loadingSpinner">{{'NO_DATA_AVAILABLE' | translate}}</div>
|
||||
<ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
|
||||
<div *ngIf="alldata?.length === 0;else loadingSpinner">{{ 'NO_DATA_AVAILABLE' | translate }}</div>
|
||||
</clr-dg-placeholder>
|
||||
|
||||
<clr-dg-column [clrDgField]="'no'" class="mac-col mac-col--no">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mac-col-title">
|
||||
<clr-icon shape="hashtag"></clr-icon> {{'NO' | translate}}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'menuname'" class="mac-col mac-col--name">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mac-col-title">
|
||||
<clr-icon shape="tag"></clr-icon> {{'MENU_ITEM_NAME' | translate}}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mvisible'" class="mac-col mac-col--perm">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mac-col-title">
|
||||
<clr-icon shape="eye"></clr-icon> {{'VIEW' | translate}}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mcreate'" class="mac-col mac-col--perm">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mac-col-title">
|
||||
<clr-icon shape="plus"></clr-icon> {{'CREATE' | translate}}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'medit'" class="mac-col mac-col--perm">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mac-col-title">
|
||||
<clr-icon shape="edit"></clr-icon> {{'EDIT' | translate}}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mdelete'" class="mac-col mac-col--perm">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mac-col-title">
|
||||
<clr-icon shape="trash"></clr-icon> {{'DELETE' | translate}}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mquery'" class="mac-col mac-col--perm">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mac-col-title">
|
||||
<clr-icon shape="search"></clr-icon> {{'QUERY' | translate}}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mexport'" class="mac-col mac-col--perm">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mac-col-title">
|
||||
<clr-icon shape="export"></clr-icon> {{'EXPORT' | translate}}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'no'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'NO' | translate }}
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'menuname'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'MENU_ITEM_NAME' | translate }}
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mvisible'"><ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'VIEW' | translate }}
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mcreate'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'CREATE' | translate }}
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'medit'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'EDIT' | translate }}
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mdelete'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'DELETE' | translate }}
|
||||
<!-- <input type="checkbox" clrCheckbox name="mdelete" [checked]="colvalue" (change)="changedelete($event.target.checked)"> -->
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mquery'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'QUERY' | translate }}
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mexport'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'EXPORT' | translate }}
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
<clr-dg-row *ngFor="let all of filteredAllData;let i=index">
|
||||
<clr-dg-row *ngFor="let all of alldata;let i=index">
|
||||
<clr-dg-cell>{{i+1}}</clr-dg-cell>
|
||||
<clr-dg-cell *ngIf="all.menuId==0">
|
||||
<b>{{all.menuItemDesc}}</b>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell *ngIf="all.menuId==0"><b>{{all.menuItemDesc}}</b></clr-dg-cell>
|
||||
<clr-dg-cell *ngIf="all.menuId!==0"> {{all.menuItemDesc}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<input type="checkbox" [checked]="selected ===all.mvisible">
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<input type="checkbox" [checked]="selected ===all.mcreate">
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<input type="checkbox" [checked]="selected ===all.medit">
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<input type="checkbox" [checked]="selected ===all.mdelete">
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<input type="checkbox" [checked]="selected ===all.mquery">
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<input type="checkbox" [checked]="selected ===all.mexport">
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell><input type="checkbox" [checked]="selected ===all.mvisible"></clr-dg-cell>
|
||||
<clr-dg-cell><input type="checkbox" [checked]="selected ===all.mcreate"></clr-dg-cell>
|
||||
<clr-dg-cell> <input type="checkbox" [checked]="selected ===all.medit"></clr-dg-cell>
|
||||
<clr-dg-cell><input type="checkbox" [checked]="selected ===all.mdelete"></clr-dg-cell>
|
||||
<clr-dg-cell><input type="checkbox" [checked]="selected ===all.mquery"></clr-dg-cell>
|
||||
<clr-dg-cell><input type="checkbox" [checked]="selected ===all.mexport"></clr-dg-cell>
|
||||
|
||||
<clr-dg-action-overflow>
|
||||
<button class="mac-action-item" (click)="modalEdit(all)">
|
||||
{{'EDIT' | translate}}
|
||||
<clr-icon shape="edit" class="is-error"></clr-icon>
|
||||
</button>
|
||||
<button class="mac-action-item" *ngIf="all.menuId!==0" (click)="modalDelete(all)">
|
||||
{{'DELETE' | translate}}
|
||||
<clr-icon shape="trash" class="is-error"></clr-icon>
|
||||
</button>
|
||||
<button class="mac-action-item" *ngIf="all.menuId==0" (click)="modaldeletemainmenu(all)">
|
||||
{{'DELETE_MENU_SUBMENU' | translate}}
|
||||
<clr-icon shape="edit" class="is-error"></clr-icon>
|
||||
</button>
|
||||
<button class="action-item" (click)="modalEdit(all)">{{ 'EDIT' | translate }} <clr-icon shape="edit"
|
||||
class="is-error"></clr-icon></button>
|
||||
<button class="action-item" *ngIf="all.menuId!==0" (click)="modalDelete(all)">{{ 'DELETE' | translate }}
|
||||
<clr-icon shape="trash" class="is-error"></clr-icon></button>
|
||||
<button class="action-item" *ngIf="all.menuId==0" (click)="modaldeletemainmenu(all)">{{ 'DELETE_MENU_SUBMENU' |
|
||||
translate }}
|
||||
<clr-icon shape="edit" class="is-error"></clr-icon></button>
|
||||
|
||||
</clr-dg-action-overflow>
|
||||
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">{{'MENUNAME' | translate}}</td>
|
||||
<td class="td-title">Menuname</td>
|
||||
<td class="td-content"></td>
|
||||
</tr>
|
||||
|
||||
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer class="mac-grid-footer">
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{'RECORDS_PER_PAGE' | translate}}</clr-dg-page-size>
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
{{'OF' | translate}} {{pagination.totalItems}} {{'RECORDS' | translate}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
|
||||
<clr-datagrid class="mac-grid" [clrDgLoading]="loading" *ngIf="toggle">
|
||||
<clr-datagrid [clrDgLoading]="loading" *ngIf="toggle">
|
||||
<clr-dg-placeholder>
|
||||
<ng-template #loadingSpinner>
|
||||
<clr-spinner>{{'LOADING' | translate}} ... </clr-spinner>
|
||||
</ng-template>
|
||||
<div *ngIf="alldata?.length === 0;else loadingSpinner">{{'NO_DATA_AVAILABLE' | translate}}</div>
|
||||
<ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
|
||||
<div *ngIf="alldata?.length === 0;else loadingSpinner">No data available</div>
|
||||
</clr-dg-placeholder>
|
||||
|
||||
<clr-dg-column [clrDgField]="'no'" class="mac-col mac-col--no">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mac-col-title">
|
||||
<clr-icon shape="hashtag"></clr-icon> {{'NO' | translate}}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'menuname'" class="mac-col mac-col--name">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mac-col-title">
|
||||
<clr-icon shape="tag"></clr-icon> {{'MENU_ITEM_NAME' | translate}}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mvisible'" class="mac-col mac-col--perm">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mac-col-title">
|
||||
<clr-icon shape="eye"></clr-icon> {{'VIEW' | translate}}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mcreate'" class="mac-col mac-col--perm">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mac-col-title">
|
||||
<clr-icon shape="plus"></clr-icon> {{'CREATE' | translate}}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'medit'" class="mac-col mac-col--perm">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mac-col-title">
|
||||
<clr-icon shape="edit"></clr-icon> {{'EDIT' | translate}}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mdelete'" class="mac-col mac-col--perm">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mac-col-title">
|
||||
<clr-icon shape="trash"></clr-icon> {{'DELETE' | translate}}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mquery'" class="mac-col mac-col--perm">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mac-col-title">
|
||||
<clr-icon shape="search"></clr-icon> {{'QUERY' | translate}}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mexport'" class="mac-col mac-col--perm">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mac-col-title">
|
||||
<clr-icon shape="export"></clr-icon> {{'EXPORT' | translate}}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<ng-container *ngFor="let all of filteredAllData;let i=index">
|
||||
<clr-dg-column [clrDgField]="'no'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
NO
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'menuname'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Menu Item Name
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mvisible'"><ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
View
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mcreate'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Create
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'medit'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Edit
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mdelete'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Delete
|
||||
<!-- <input type="checkbox" clrCheckbox name="mdelete" [checked]="colvalue" (change)="changedelete($event.target.checked)"> -->
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mquery'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Query
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'mexport'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Export
|
||||
</ng-container></clr-dg-column>
|
||||
<ng-container *ngFor="let all of alldata;let i=index">
|
||||
<clr-dg-row *ngIf="all.menuId==0">
|
||||
<clr-dg-cell>{{i+1}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<b>{{all.menuItemDesc}}</b>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<input type="checkbox" [checked]="selected ===all.mvisible">
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<input type="checkbox" [checked]="selected ===all.mcreate">
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<input type="checkbox" [checked]="selected ===all.medit">
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<input type="checkbox" [checked]="selected ===all.mdelete">
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<input type="checkbox" [checked]="selected ===all.mquery">
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<input type="checkbox" [checked]="selected ===all.mexport">
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell><b>{{all.menuItemDesc}}</b></clr-dg-cell>
|
||||
<clr-dg-cell><input type="checkbox" [checked]="selected ===all.mvisible"></clr-dg-cell>
|
||||
<clr-dg-cell><input type="checkbox" [checked]="selected ===all.mcreate"></clr-dg-cell>
|
||||
<clr-dg-cell> <input type="checkbox" [checked]="selected ===all.medit"></clr-dg-cell>
|
||||
<clr-dg-cell><input type="checkbox" [checked]="selected ===all.mdelete"></clr-dg-cell>
|
||||
<clr-dg-cell><input type="checkbox" [checked]="selected ===all.mquery"></clr-dg-cell>
|
||||
<clr-dg-cell><input type="checkbox" [checked]="selected ===all.mexport"></clr-dg-cell>
|
||||
<clr-dg-action-overflow>
|
||||
<button class="mac-action-item" (click)="Sync(all.menuItemId?.menuItemId,all)">
|
||||
{{'SYNC' | translate}}
|
||||
<clr-icon shape="shrink" class="is-error"></clr-icon>
|
||||
</button>
|
||||
<button class="action-item" (click)="Sync(all.menuItemId?.menuItemId,all)">Sync <clr-icon shape="shrink"
|
||||
class="is-error"></clr-icon> </button>
|
||||
</clr-dg-action-overflow>
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">{{'MENUNAME' | translate}}</td>
|
||||
<td class="td-title">Menuname</td>
|
||||
<td class="td-content"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
</ng-container>
|
||||
<clr-dg-footer class="mac-grid-footer">
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{'RECORDS_PER_PAGE' | translate}}</clr-dg-page-size>
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
{{'OF' | translate}} {{pagination.totalItems}} {{'RECORDS' | translate}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
|
||||
<clr-modal class="mac-modal" [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title mac-modal-title">
|
||||
<clr-icon shape="plus"></clr-icon> {{'ADD_MENU_ACCESS_CONTROL' | translate}}
|
||||
</h3>
|
||||
<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Add Menu Access Control</h3>
|
||||
<div class="modal-body">
|
||||
<form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-sm-12 mac-form-group">
|
||||
<label class="mac-form-label" for="name">{{'MENU_NAME' | translate}}
|
||||
<span class="required-field">*</span>
|
||||
</label>
|
||||
<select name="" id="" class="mac-form-select w-100" (change)="idselected($event.target.value)">
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="name">Menu Name<span class="required-field">*</span></label>
|
||||
<select name="" id="" style="width: 100%;padding: 5px 5px;border: 1px solid #ccc;border-radius: 4px;"
|
||||
(change)="idselected($event.target.value)">
|
||||
<option *ngFor="let sub of menus" [value]="sub.menuItemId">{{sub.menuItemDesc}}</option>
|
||||
</select>
|
||||
<div class="mac-form-help">{{'CHOOSE_MAIN_MENU_FOR_ACCESS' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="mac-btn mac-btn-outline" (click)="modalAdd = false">
|
||||
<clr-icon shape="times"></clr-icon>
|
||||
<span>{{'CANCEL' | translate}}</span>
|
||||
</button>
|
||||
<button type="submit" class="mac-btn mac-btn-primary">
|
||||
<clr-icon shape="check"></clr-icon>
|
||||
<span>{{'ADD' | translate}}</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">ADD</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</clr-modal>
|
||||
|
||||
<clr-modal class="mac-modal" [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title mac-modal-title">
|
||||
<clr-icon shape="edit"></clr-icon> {{'UPDATE_MENU_ACCESS_CONTROL' | translate}}
|
||||
</h3>
|
||||
<clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Update Menu Access Control</h3>
|
||||
<div class="modal-body" *ngIf="rowSelected.menuItemId">
|
||||
<div class="mac-form-help">{{'MENU_ID' | translate}}:
|
||||
<code class="clr-code">{{rowSelected.menuItemId.menuItemId}}</code>
|
||||
</div>
|
||||
<h2 class="heading">{{rowSelected.menuItemId.menuItemId}}</h2>
|
||||
<form (ngSubmit)="onUpdate(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)">
|
||||
<div class="mac-perms">
|
||||
<label class="mac-perm">
|
||||
<input type="checkbox" clrCheckbox name="mvisible" [(ngModel)]="selected ===rowSelected.mvisible" (change)="rowSelected.mvisible === $event.target.checked ? 'y' : 'n'">
|
||||
<span class="mac-perm__icon">
|
||||
<clr-icon shape="eye"></clr-icon>
|
||||
</span>
|
||||
<span class="mac-perm__label">{{'VIEW' | translate}}</span>
|
||||
</label>
|
||||
<label class="mac-perm">
|
||||
<input type="checkbox" clrCheckbox name="mcreate" [(ngModel)]="selected ===rowSelected.mcreate" (change)="rowSelected.mcreate === $event.target.checked ? 'y' : 'n'">
|
||||
<span class="mac-perm__icon">
|
||||
<clr-icon shape="plus"></clr-icon>
|
||||
</span>
|
||||
<span class="mac-perm__label">{{'CREATE' | translate}}</span>
|
||||
</label>
|
||||
<label class="mac-perm">
|
||||
<input type="checkbox" clrCheckbox name="medit" [(ngModel)]="selected ===rowSelected.medit" (change)="rowSelected.medit === $event.target.checked ? 'y' : 'n'">
|
||||
<span class="mac-perm__icon">
|
||||
<clr-icon shape="edit"></clr-icon>
|
||||
</span>
|
||||
<span class="mac-perm__label">{{'EDIT' | translate}}</span>
|
||||
</label>
|
||||
<label class="mac-perm">
|
||||
<input type="checkbox" clrCheckbox name="mdelete" [(ngModel)]="selected ===rowSelected.mdelete" (change)="rowSelected.mdelete === $event.target.checked ? 'y' : 'n'">
|
||||
<span class="mac-perm__icon">
|
||||
<clr-icon shape="trash"></clr-icon>
|
||||
</span>
|
||||
<span class="mac-perm__label">{{'DELETE' | translate}}</span>
|
||||
</label>
|
||||
<label class="mac-perm">
|
||||
<input type="checkbox" clrCheckbox name="mquery" [(ngModel)]="selected ===rowSelected.mquery" (change)="rowSelected.mquery === $event.target.checked ? 'y' : 'n'">
|
||||
<span class="mac-perm__icon">
|
||||
<clr-icon shape="search"></clr-icon>
|
||||
</span>
|
||||
<span class="mac-perm__label">{{'QUERY' | translate}}</span>
|
||||
</label>
|
||||
<label class="mac-perm">
|
||||
<input type="checkbox" clrCheckbox name="mexport" [(ngModel)]="selected ===rowSelected.mexport" (change)="rowSelected.mexport === $event.target.checked ? 'y' : 'n'">
|
||||
<span class="mac-perm__icon">
|
||||
<clr-icon shape="export"></clr-icon>
|
||||
</span>
|
||||
<span class="mac-perm__label">{{'EXPORT' | translate}}</span>
|
||||
</label>
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="tags">View</label>
|
||||
<input type="checkbox" clrCheckbox name="mvisible" [(ngModel)]="selected ===rowSelected.mvisible"
|
||||
(change)="rowSelected.mvisible === $event.target.checked ? 'y' : 'n'">
|
||||
</div>
|
||||
<div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="name">Create</label>
|
||||
<input type="checkbox" clrCheckbox name="mcreate" name="mcreate"
|
||||
[(ngModel)]="selected ===rowSelected.mcreate"
|
||||
(change)="rowSelected.mcreate === $event.target.checked ? 'y' : 'n'">
|
||||
</div>
|
||||
<div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="tags">Edit</label>
|
||||
<input type="checkbox" clrCheckbox name="medit" [(ngModel)]="selected ===rowSelected.medit"
|
||||
(change)="rowSelected.medit === $event.target.checked ? 'y' : 'n'">
|
||||
</div>
|
||||
<div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="tags">Delete</label>
|
||||
<input type="checkbox" clrCheckbox name="mdelete" [(ngModel)]="selected ===rowSelected.mdelete"
|
||||
(change)="rowSelected.mdelete === $event.target.checked ? 'y' : 'n'">
|
||||
</div>
|
||||
<div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="tags">Query</label>
|
||||
<input type="checkbox" clrCheckbox name="mquery" [(ngModel)]="selected ===rowSelected.mquery"
|
||||
(change)="rowSelected.mquery === $event.target.checked ? 'y' : 'n'">
|
||||
</div>
|
||||
<div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="tags">Export</label>
|
||||
<input type="checkbox" clrCheckbox name="mexport" [(ngModel)]="selected ===rowSelected.mexport"
|
||||
(change)="rowSelected.mexport === $event.target.checked ? 'y' : 'n'">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<br>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="mac-btn mac-btn-outline" (click)="modaledit = false">
|
||||
<clr-icon shape="times"></clr-icon>
|
||||
<span>{{'CANCEL' | translate}}</span>
|
||||
</button>
|
||||
<button type="submit" class="mac-btn mac-btn-primary">
|
||||
<clr-icon shape="check"></clr-icon>
|
||||
<span>{{'UPDATE' | translate}}</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">UPDATE</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
<clr-modal class="mac-modal" [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
<div class="modal-body">
|
||||
<div class="mac-delete-header">
|
||||
<div class="mac-delete-icon">
|
||||
<clr-icon shape="exclamation-triangle" size="48"></clr-icon>
|
||||
</div>
|
||||
<h1 class="mac-delete-title">{{'ARE_YOU_SURE_WANT_TO_DELETE' | translate}}?</h1>
|
||||
<p class="mac-delete-subtitle">{{'THIS_ACTION_CANNOT_BE_UNDONE' | translate}}</p>
|
||||
</div>
|
||||
<div class="mac-delete-details" *ngIf="rowSelected.menuItemId">
|
||||
<div class="mac-delete-detail-item">
|
||||
<span class="mac-delete-detail-label">{{'MENU_ITEM_ID' | translate}}:</span>
|
||||
<span class="mac-delete-detail-value">{{rowSelected.menuItemId.menuItemId}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="mac-btn mac-btn-outline" (click)="modaldelete = false">
|
||||
<clr-icon shape="times"></clr-icon>
|
||||
<span>{{'CANCEL' | translate}}</span>
|
||||
</button>
|
||||
<button type="submit" (click)="delete(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)" class="mac-btn mac-btn-error">
|
||||
<clr-icon shape="trash"></clr-icon>
|
||||
<span>{{'DELETE' | translate}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</clr-modal>
|
||||
<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
|
||||
<clr-modal class="mac-modal" [(clrModalOpen)]="modaldelete1" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
<div class="modal-body">
|
||||
<div class="mac-delete-header">
|
||||
<div class="mac-delete-icon">
|
||||
<clr-icon shape="exclamation-triangle" size="48"></clr-icon>
|
||||
</div>
|
||||
<h1 class="mac-delete-title">{{'ARE_YOU_SURE_WANT_TO_DELETE_MAIN_MENU_WITH_SUBMENU' | translate}}?</h1>
|
||||
<p class="mac-delete-subtitle">{{'THIS_ACTION_CANNOT_BE_UNDONE' | translate}}</p>
|
||||
</div>
|
||||
<div class="mac-delete-details" *ngIf="rowSelected.menuItemId">
|
||||
<div class="mac-delete-detail-item">
|
||||
<span class="mac-delete-detail-label">{{'MENU_ITEM_ID' | translate}}:</span>
|
||||
<span class="mac-delete-detail-value">{{rowSelected.menuItemId.menuItemId}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body" *ngIf="rowSelected.menuItemId">
|
||||
<h1 class="delete">Are You Sure Want to delete?</h1>
|
||||
<h2 class="heading">{{rowSelected.menuItemId.menuItemId}}</h2>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="mac-btn mac-btn-outline" (click)="modaldelete1 = false">
|
||||
<clr-icon shape="times"></clr-icon>
|
||||
<span>{{'CANCEL' | translate}}</span>
|
||||
</button>
|
||||
<button type="submit" (click)="delete1(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)" class="mac-btn mac-btn-error">
|
||||
<clr-icon shape="trash"></clr-icon>
|
||||
<span>{{'DELETE' | translate}}</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
|
||||
<button type="submit" (click)="delete(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)"
|
||||
class="btn btn-primary">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</clr-modal>
|
||||
</div>
|
||||
<clr-modal [(clrModalOpen)]="modaldelete1" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
|
||||
<div class="modal-body" *ngIf="rowSelected.menuItemId">
|
||||
<h1 class="delete">Are You Sure Want to delete Main menu with submenu?</h1>
|
||||
<h2 class="heading">{{rowSelected.menuItemId.menuItemId}}</h2>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="modaldelete1 = false">Cancel</button>
|
||||
<button type="submit" (click)="delete1(rowSelected.menuItemId.menuItemId,rowSelected.usrGrp.usrGrp)"
|
||||
class="btn btn-primary">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</clr-modal>
|
||||
@@ -1,160 +1,43 @@
|
||||
@import '../../../../../styles/_design-tokens.scss';
|
||||
|
||||
// Import base styles
|
||||
input[type=text],
|
||||
[type=date],
|
||||
[type=password],
|
||||
[type=checkbox] {
|
||||
input[type=text],[type=date],[type=password],[type=checkbox] {
|
||||
width: 100%;
|
||||
padding: 15px 20px;
|
||||
background-color: var(--theme-surface);
|
||||
// margin: 3px 0;
|
||||
background-color:rgb(255, 255, 255);
|
||||
display: inline-block;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
font-family: var(--theme-font-primary);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
.required-field{
|
||||
color: red;
|
||||
font-size: 18px;
|
||||
|
||||
input[type=text]:focus,
|
||||
[type=date]:focus,
|
||||
[type=password]:focus,
|
||||
[type=checkbox]:focus {
|
||||
outline: none;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
|
||||
}
|
||||
|
||||
.required-field {
|
||||
color: var(--theme-error, #ef4444);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
// select{
|
||||
// width: 100%;
|
||||
// padding: 5px 5px;
|
||||
// border: 1px solid #ccc;
|
||||
// border-radius: 4px;
|
||||
// }
|
||||
.td-title {
|
||||
text-align: center;
|
||||
width: 150px;
|
||||
color: white;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background-color: var(--theme-primary);
|
||||
background-color: rgba(63, 122, 231, 0.863);
|
||||
//color: rgb(24, 13, 13);
|
||||
}
|
||||
|
||||
th {
|
||||
th{
|
||||
//background-color:rgb(170, 169, 169);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.td-content {
|
||||
.td-content{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// Modern Button Styles using ThemeService
|
||||
.mac-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease-out;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: var(--theme-font-primary);
|
||||
z-index: 1;
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--theme-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.mac-btn-sm {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&.mac-btn-md {
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&.mac-btn-lg {
|
||||
padding: 16px 24px;
|
||||
font-size: 16px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
// Variants
|
||||
&.mac-btn-primary {
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
&.mac-btn-outline {
|
||||
background: transparent;
|
||||
color: var(--theme-secondary);
|
||||
border-color: var(--theme-secondary);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: rgba(100, 116, 139, 0.1);
|
||||
border-color: var(--theme-secondary);
|
||||
color: var(--theme-secondary);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
&.mac-btn-error {
|
||||
background: var(--theme-error, #ef4444);
|
||||
color: white;
|
||||
border-color: var(--theme-error, #ef4444);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-error-dark, #dc2626);
|
||||
border-color: var(--theme-error-dark, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.mac-btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--theme-text-secondary);
|
||||
border-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
.delete,.heading{
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
|
||||
//toggle button
|
||||
.switch {
|
||||
position: relative;
|
||||
@@ -193,585 +76,24 @@ th {
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
input:checked+.slider {
|
||||
background-color: var(--theme-primary);
|
||||
input:checked + .slider {
|
||||
background-color: #0072a3;
|
||||
}
|
||||
|
||||
input:focus+.slider {
|
||||
box-shadow: 0 0 1px var(--theme-primary);
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px #0072a3;
|
||||
}
|
||||
|
||||
input:checked+.slider:before {
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// Modern themed enhancements (ThemeService variables)
|
||||
.mm-breadcrumb {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
.mac-header-left {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mac-title h4 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.mac-edit-chip {
|
||||
margin-top: 27px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mac-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 12px;
|
||||
background-color: var(--theme-background);
|
||||
color: var(--theme-text);
|
||||
border-radius: var(--theme-border-radius);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.mac-header-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mac-select {
|
||||
height: 40px;
|
||||
padding: 8px 12px;
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
font-family: var(--theme-font-primary);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mac-btn-primary {
|
||||
margin-left: 20px;
|
||||
box-shadow: var(--theme-shadow);
|
||||
}
|
||||
|
||||
.mac-actions {
|
||||
text-align: right;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.mac-hint {
|
||||
color: var(--theme-error, #ef4444);
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.mac-grid {
|
||||
background: var(--theme-surface);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
margin-bottom: 24px;
|
||||
|
||||
::ng-deep .datagrid {
|
||||
.datagrid-head {
|
||||
background: var(--theme-background);
|
||||
|
||||
.datagrid-column {
|
||||
padding: 16px 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
}
|
||||
|
||||
.datagrid-row {
|
||||
transition: background-color 150ms ease-out;
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.datagrid-cell {
|
||||
padding: 16px 24px;
|
||||
font-size: 14px;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
|
||||
.datagrid-footer {
|
||||
background: var(--theme-background);
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mac-grid-footer {
|
||||
background: var(--theme-background);
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.mac-modal .modal-title {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
// Hero and actions
|
||||
.mac-hero {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24px 32px;
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
font-family: var(--theme-font-primary);
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
clr-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-family: var(--theme-font-secondary);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.mac-sep {
|
||||
width: 1px;
|
||||
height: 22px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.mac-label {
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mac-toggle__label {
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// Grid columns
|
||||
.mac-col-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
.mac-col--perm .mac-col-title clr-icon {
|
||||
color: var(--theme-primary);
|
||||
}
|
||||
|
||||
// Toolbar, search and stats
|
||||
.mac-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
background: var(--theme-surface);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&__left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__right {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.mac-search {
|
||||
position: relative;
|
||||
max-width: 400px;
|
||||
|
||||
clr-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #9ca3af;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
padding: 12px 12px 12px 40px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: all 200ms ease-out;
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
font-family: var(--theme-font-primary);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mac-stats {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.mac-stat {
|
||||
min-width: 110px;
|
||||
background: var(--theme-surface);
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
border-radius: var(--theme-border-radius);
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
box-shadow: var(--theme-shadow);
|
||||
|
||||
&__value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 12px;
|
||||
color: var(--theme-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
|
||||
// Enhanced modals
|
||||
.mac-modal-title clr-icon {
|
||||
margin-right: 6px;
|
||||
color: var(--theme-primary);
|
||||
}
|
||||
|
||||
.mac-form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mac-form-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--theme-text);
|
||||
margin-bottom: 8px;
|
||||
font-family: var(--theme-font-primary);
|
||||
}
|
||||
|
||||
.mac-form-select {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--theme-text);
|
||||
background: var(--theme-surface);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
transition: all 200ms ease-out;
|
||||
margin-bottom: 0;
|
||||
font-family: var(--theme-font-primary);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
||||
background-position: right 12px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px 12px;
|
||||
padding-right: 40px;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: var(--theme-background);
|
||||
color: var(--theme-text-secondary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.mac-form-help {
|
||||
color: var(--theme-text-secondary);
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
font-family: var(--theme-font-primary);
|
||||
}
|
||||
|
||||
.mac-perms {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.mac-perm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: var(--theme-surface);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: var(--theme-border-radius);
|
||||
box-shadow: var(--theme-shadow);
|
||||
transition: all 200ms ease-out;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: auto;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mac-perm__icon clr-icon {
|
||||
color: var(--theme-primary);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.mac-perm__label {
|
||||
color: var(--theme-text);
|
||||
font-weight: 500;
|
||||
font-family: var(--theme-font-primary);
|
||||
}
|
||||
|
||||
// Datagrid action overflow buttons
|
||||
.mac-action-item {
|
||||
@extend .mac-btn;
|
||||
@extend .mac-btn-ghost;
|
||||
@extend .mac-btn-sm;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 4px;
|
||||
text-align: left;
|
||||
|
||||
clr-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&.mac-btn-error {
|
||||
color: var(--theme-error, #ef4444);
|
||||
|
||||
&:hover {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Delete Modal Styles
|
||||
.mac-delete-header {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.mac-delete-icon {
|
||||
color: var(--theme-error, #ef4444);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mac-delete-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-text);
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.mac-delete-subtitle {
|
||||
font-size: 16px;
|
||||
color: var(--theme-text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mac-delete-details {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.mac-delete-detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mac-delete-detail-label {
|
||||
font-weight: 500;
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
.mac-delete-detail-value {
|
||||
font-weight: 600;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.delete,
|
||||
.heading {
|
||||
text-align: center;
|
||||
color: var(--theme-error, #ef4444);
|
||||
}
|
||||
|
||||
// Modal Header
|
||||
::ng-deep .modal-header {
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-radius: 16px 16px 0 0 !important;
|
||||
padding: 20px 24px !important;
|
||||
|
||||
.modal-title {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modal Body
|
||||
::ng-deep .modal-body {
|
||||
padding: 24px !important;
|
||||
}
|
||||
|
||||
// Modal Footer
|
||||
::ng-deep .modal-footer {
|
||||
padding: 20px 24px !important;
|
||||
background: var(--theme-background);
|
||||
border-radius: 0 0 16px 16px !important;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@media (max-width: 768px) {
|
||||
.mac-hero {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mac-toolbar {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.mac-search {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mac-stats {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mac-perms {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.mac-actions {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mac-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@@ -6,8 +6,6 @@ import { MenuGroupService } from 'src/app/services/admin/menu-group.service';
|
||||
import { MenumaintanceService } from 'src/app/services/admin/menumaintance.service';
|
||||
import { UsergrpmaintainceService } from 'src/app/services/admin/usergrpmaintaince.service';
|
||||
import { UsermaintanceService } from '../../../../services/admin/usermaintance.service';
|
||||
import { ThemeService } from 'src/app/services/theme.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-menuaccesscontrol',
|
||||
templateUrl: './menuaccesscontrol.component.html',
|
||||
@@ -38,26 +36,15 @@ export class MenuaccesscontrolComponent implements OnInit {
|
||||
toggle: boolean = false;
|
||||
maindata;
|
||||
showdata;
|
||||
// UI enhancements (no API changes)
|
||||
filterText: string = '';
|
||||
|
||||
constructor(
|
||||
private mainservice: UsermaintanceService,
|
||||
constructor(private mainservice: UsermaintanceService,
|
||||
private _fb: FormBuilder,
|
||||
private toastr: ToastrService,
|
||||
private route: ActivatedRoute,
|
||||
private usergrpservice: UsergrpmaintainceService,
|
||||
private menuGroupService: MenuGroupService,
|
||||
private menuservice: MenumaintanceService,
|
||||
private themeService: ThemeService
|
||||
) { }
|
||||
private menuservice: MenumaintanceService,) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
// Ensure theme variables are applied to the view
|
||||
this.themeService.currentTheme$.subscribe(() => {
|
||||
// CSS variables are updated globally; no extra handling needed here
|
||||
});
|
||||
|
||||
this.showdata = this.menuGroupService.getdata();
|
||||
console.log(this.showdata);
|
||||
this.mcreate = this.showdata.mcreate;
|
||||
@@ -74,64 +61,35 @@ export class MenuaccesscontrolComponent implements OnInit {
|
||||
grpid: this.usergrpid,
|
||||
gmenuid: this.menuselectid,
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Stats & filtering helpers for UI only
|
||||
get totalItems(): number {
|
||||
const list: any[] = (this.alldata as unknown as any[]) || [];
|
||||
return list.length;
|
||||
}
|
||||
|
||||
get mainMenuCount(): number {
|
||||
const list: any[] = (this.alldata as unknown as any[]) || [];
|
||||
return list.filter(it => it && it.menuId === 0).length;
|
||||
}
|
||||
|
||||
get subMenuCount(): number {
|
||||
const list: any[] = (this.alldata as unknown as any[]) || [];
|
||||
return list.filter(it => it && it.menuId !== 0).length;
|
||||
}
|
||||
|
||||
get filteredAllData(): any[] {
|
||||
const items: any[] = (this.alldata as unknown as any[]) || [];
|
||||
const text = (this.filterText || '').toLowerCase();
|
||||
if (!text) { return items; }
|
||||
return items.filter(m => (
|
||||
(m?.menuItemDesc || '').toLowerCase().includes(text)
|
||||
));
|
||||
}
|
||||
|
||||
dropddowngetdata() {
|
||||
this.usergrpservice.getAll().subscribe((data) => {
|
||||
console.log(data);
|
||||
this.givendata = data;
|
||||
});
|
||||
}
|
||||
|
||||
getdata() {
|
||||
this.menuservice.getByCurrentUserMenuGroupId1().subscribe(resp => {
|
||||
this.menus = resp;
|
||||
console.log('menus: ', this.menus);
|
||||
})
|
||||
}
|
||||
|
||||
getall() {
|
||||
this.usergrpservice.getall().subscribe((data) => {
|
||||
this.secmenuaccessdata = data
|
||||
console.log(data);
|
||||
})
|
||||
}
|
||||
|
||||
idofselected(val) {
|
||||
console.log(val);
|
||||
this.usergrpid = val;
|
||||
|
||||
}
|
||||
|
||||
idselected(val) {
|
||||
console.log(val)
|
||||
this.menuselectid = val;
|
||||
}
|
||||
|
||||
getbyuseriddata() {
|
||||
this.usergrpservice.getbyusergrpid(this.usergrpid).subscribe((data) => {
|
||||
this.alldata = data;
|
||||
@@ -146,19 +104,17 @@ export class MenuaccesscontrolComponent implements OnInit {
|
||||
|
||||
// console.log(this.menudata)
|
||||
},
|
||||
(error) => {
|
||||
console.log('Error in adding data...', error);
|
||||
if (error) {
|
||||
this.error = "No data Available"
|
||||
}
|
||||
});
|
||||
(error) => {
|
||||
console.log('Error in adding data...', error);
|
||||
if (error) {
|
||||
this.error = "No data Available"
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
modaladd() {
|
||||
this.modalAdd = true;
|
||||
this.getdata();
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
this.modalAdd = false;
|
||||
this.entryForm.value.grpid = this.usergrpid;
|
||||
@@ -172,30 +128,28 @@ export class MenuaccesscontrolComponent implements OnInit {
|
||||
this.ngOnInit();
|
||||
|
||||
},
|
||||
(error) => {
|
||||
console.log('Error in adding data...', error);
|
||||
if (error.status == 400) {
|
||||
this.toastr.error(error.error);
|
||||
(error) => {
|
||||
console.log('Error in adding data...', error);
|
||||
if (error.status == 400) {
|
||||
this.toastr.error(error.error);
|
||||
|
||||
} else if (error) {
|
||||
this.toastr.error('Not added Data Getting Some Error');
|
||||
}
|
||||
this.ngOnInit();
|
||||
});
|
||||
|
||||
} else if (error) {
|
||||
this.toastr.error('Not added Data Getting Some Error');
|
||||
}
|
||||
this.ngOnInit();
|
||||
});
|
||||
}
|
||||
|
||||
modalEdit(row) {
|
||||
this.rowSelected = row;
|
||||
console.log(this.rowSelected);
|
||||
this.modaledit = true;
|
||||
}
|
||||
|
||||
modalDelete(row) {
|
||||
this.rowSelected = row;
|
||||
console.log(this.rowSelected)
|
||||
this.modaldelete = true;
|
||||
}
|
||||
|
||||
delete(id, usrgrp) {
|
||||
this.modaldelete = false;
|
||||
this.usergrpservice.delete(id, usrgrp).subscribe((data) => {
|
||||
@@ -212,13 +166,11 @@ export class MenuaccesscontrolComponent implements OnInit {
|
||||
this.ngOnInit();
|
||||
});
|
||||
}
|
||||
|
||||
modaldeletemainmenu(row) {
|
||||
this.rowSelected = row;
|
||||
console.log(this.rowSelected)
|
||||
this.modaldelete1 = true;
|
||||
}
|
||||
|
||||
delete1(id, usrgrp) {
|
||||
this.modaldelete1 = false;
|
||||
this.usergrpservice.deletemain(id, usrgrp).subscribe((data) => {
|
||||
@@ -235,7 +187,6 @@ export class MenuaccesscontrolComponent implements OnInit {
|
||||
this.ngOnInit();
|
||||
});
|
||||
}
|
||||
|
||||
onUpdate(id: any, usrgrp: any) {
|
||||
this.modaledit = false;
|
||||
console.log(id, usrgrp);
|
||||
@@ -253,7 +204,6 @@ export class MenuaccesscontrolComponent implements OnInit {
|
||||
this.ngOnInit();
|
||||
});
|
||||
}
|
||||
|
||||
onChecked(value) {
|
||||
if (value == "y") {
|
||||
this.selected = "y"
|
||||
@@ -263,13 +213,11 @@ export class MenuaccesscontrolComponent implements OnInit {
|
||||
this.selected = "n"// make a call for unchecked
|
||||
}
|
||||
}
|
||||
|
||||
changedelete(val) {
|
||||
console.log(val);
|
||||
val = this.colvalue = val;
|
||||
console.log(val);
|
||||
}
|
||||
|
||||
data: {};
|
||||
Sync(id: any, row) {
|
||||
this.rowSelected = row;
|
||||
@@ -291,9 +239,8 @@ export class MenuaccesscontrolComponent implements OnInit {
|
||||
this.ngOnInit();
|
||||
})
|
||||
}
|
||||
|
||||
toggleCheckbox() {
|
||||
this.toggle = !this.toggle;
|
||||
//this.dataService.setDivToggler(this.toggler);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,39 +1,11 @@
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
|
||||
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong">
|
||||
<li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
|
||||
<li><a href="javascript://"><clr-icon shape="lock"></clr-icon>{{ 'SECURITY' | translate }}</a></li>
|
||||
<li><a href="javascript://">{{ 'MENU_MAINTENANCE' | translate }}</a></li>
|
||||
</ol>
|
||||
|
||||
<div class="mm-container">
|
||||
<section class="mm-hero">
|
||||
<div class="mm-hero__content">
|
||||
<div class="mm-hero__icon">
|
||||
<clr-icon shape="organization"></clr-icon>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="mm-hero__title">{{ 'MENU_MAINTENANCE' | translate }}</h2>
|
||||
<p class="mm-hero__subtitle">{{ 'MAIN_MENU' | translate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mm-hero__actions">
|
||||
<button class="btn btn-outline mm-btn-outline" (click)="onExport()">
|
||||
<clr-icon shape="export"></clr-icon>
|
||||
<span class="mm-btn-text">{{ 'EXPORT_XLSX' | translate }}</span>
|
||||
</button>
|
||||
<button class="btn btn-primary mm-btn-primary" (click)="csvImport()">
|
||||
<clr-icon shape="import"></clr-icon>
|
||||
<span class="mm-btn-text">{{ 'IMPORT' | translate }}</span>
|
||||
</button>
|
||||
<button id="add" class="btn btn-primary mm-btn-primary" (click)="goToAdd()">
|
||||
<clr-icon shape="plus"></clr-icon>
|
||||
<span class="mm-btn-text">{{ 'ADD' | translate }}</span>
|
||||
</button>
|
||||
<button class="btn mm-btn-secondary" (click)="downloadFiles()">
|
||||
<clr-icon shape="download"></clr-icon>
|
||||
<span class="mm-btn-text">{{ 'DOWNLOAD_TEMPLATE' | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- <div class="clr-row">
|
||||
<div class="clr-col-12" style="text-align: right;">
|
||||
<button id="add" *ngIf="mcreate == 'true'" class="btn btn-primary" (click)="goToAdd()">
|
||||
@@ -41,44 +13,29 @@
|
||||
</button>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="mm-stats">
|
||||
<div class="mm-stat">
|
||||
<div class="mm-stat__value">{{ totalMenus }}</div>
|
||||
<div class="mm-stat__label">{{ 'TOTAL_MENUS' | translate }}</div>
|
||||
</div>
|
||||
<div class="mm-stat">
|
||||
<div class="mm-stat__value">{{ enabledMenusCount }}</div>
|
||||
<div class="mm-stat__label">{{ 'ENABLED' | translate }}</div>
|
||||
</div>
|
||||
<div class="mm-stat">
|
||||
<div class="mm-stat__value">{{ disabledMenusCount }}</div>
|
||||
<div class="mm-stat__label">{{ 'DISABLED' | translate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-row" style="margin-top: 15px;">
|
||||
<div class="clr-col">
|
||||
<h3 style="font-weight: 300;display: inline;">{{ 'MENU_MAINTENANCE' | translate }} </h3>
|
||||
<span class="label label-light-blue" style="display: inline;margin-left: 30px;">{{ 'MAIN_MENU' | translate }}</span><br>
|
||||
|
||||
<div class="mm-toolbar">
|
||||
<div class="mm-toolbar__left">
|
||||
<div class="mm-search">
|
||||
<clr-icon shape="search"></clr-icon>
|
||||
<input class="mm-search__input" type="text" [placeholder]="'SEARCH' | translate" [(ngModel)]="filterText" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mm-toolbar__right">
|
||||
<select class="mm-select" [(ngModel)]="statusFilter">
|
||||
<option value="All">{{ 'ALL' | translate }}</option>
|
||||
<option value="Enable">{{ 'ENABLED' | translate }}</option>
|
||||
<option value="Disable">{{ 'DISABLED' | translate }}</option>
|
||||
</select>
|
||||
<div class="mm-view-toggle">
|
||||
<button class="btn btn-sm" [class.btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
|
||||
<clr-icon shape="view-cards"></clr-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm" [class.btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
|
||||
<clr-icon shape="table"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="clr-col" style="text-align: right;">
|
||||
<div class="btn-group">
|
||||
<button class="btn text-dark" (click)="downloadFiles()"><b>{{ 'DOWNLOAD_TEMPLATE' | translate }}</b></button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" (click)="csvImport()">{{ 'IMPORT' | translate }}</button>
|
||||
|
||||
<button class="btn btn-outline" (click)="onExport()">
|
||||
<clr-icon shape="export"></clr-icon> {{ 'EXPORT_XLSX' | translate }}
|
||||
</button>
|
||||
<button id="add" class="btn btn-primary" (click)="goToAdd()">
|
||||
<clr-icon shape="plus"></clr-icon> {{ 'ADD' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -187,253 +144,173 @@
|
||||
|
||||
</tbody>
|
||||
</table> -->
|
||||
|
||||
<div class="mm-skeleton-list" *ngIf="loading">
|
||||
<div class="mm-skeleton-item" *ngFor="let i of [1,2,3,4,5,6]">
|
||||
<div class="mm-skel mm-skel--icon"></div>
|
||||
<div class="mm-skel mm-skel--title"></div>
|
||||
<div class="mm-skel mm-skel--meta"></div>
|
||||
<div class="mm-skel mm-skel--chip"></div>
|
||||
<div class="mm-skel mm-skel--link"></div>
|
||||
<div class="mm-skel mm-skel--badge"></div>
|
||||
<div class="mm-skel mm-skel--actions"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mm-card" *ngIf="viewMode==='table'">
|
||||
<clr-datagrid class="mm-grid mm-grid--modern" [clrDgLoading]="loading" [(clrDgSelected)]="selected">
|
||||
<clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>{{'LOADING'|translate}} ...
|
||||
</clr-spinner></ng-template>
|
||||
<div class="mm-empty" *ngIf="error;else loadingSpinner">
|
||||
<clr-icon shape="warning-standard"></clr-icon>
|
||||
<div class="mm-empty__title">{{ 'NO_DATA' | translate }}</div>
|
||||
<div class="mm-empty__subtitle">{{ error }}</div>
|
||||
</div>
|
||||
</clr-dg-placeholder>
|
||||
<clr-dg-column [clrDgField]="''" class="mm-col mm-col--icon">
|
||||
<clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected">
|
||||
<clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>{{'LOADING'|translate}} ... </clr-spinner></ng-template>
|
||||
<div *ngIf="error;else loadingSpinner">{{error}}</div></clr-dg-placeholder>
|
||||
<clr-dg-column [clrDgField]="''" style="max-width: 40px;">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}"></ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-column class="mm-col mm-col--no">
|
||||
|
||||
<clr-dg-column>
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mm-col-title"><clr-icon shape="hashtag"></clr-icon> {{'NO' | translate}}</span>
|
||||
{{'NO' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-column class="mm-col mm-col--name">
|
||||
|
||||
<clr-dg-column>
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mm-col-title"><clr-icon shape="tag"></clr-icon> {{'MENU_ITEM_NAME' | translate}}</span>
|
||||
{{'MENU_ITEM_NAME' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-column class="mm-col mm-col--id">
|
||||
|
||||
<clr-dg-column>
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mm-col-title"><clr-icon shape="id-badge"></clr-icon> {{'ID' | translate}}</span>
|
||||
{{'ID' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-column class="mm-col mm-col--seq">
|
||||
|
||||
<clr-dg-column>
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mm-col-title"><clr-icon shape="number-list"></clr-icon> {{'SEQUENCE' | translate}}</span>
|
||||
{{'SEQUENCE' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-column class="mm-col mm-col--module">
|
||||
|
||||
<clr-dg-column>
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mm-col-title"><clr-icon shape="application"></clr-icon> {{'MODULE_NAME' | translate}}</span>
|
||||
{{'MODULE_NAME' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-column class="mm-col mm-col--link">
|
||||
|
||||
<clr-dg-column>
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mm-col-title"><clr-icon shape="link"></clr-icon> {{'MENU_ACTION_LINK' | translate}}</span>
|
||||
{{'MENU_ACTION_LINK' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-column class="mm-col mm-col--status">
|
||||
|
||||
<clr-dg-column>
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="mm-col-title"><clr-icon shape="shield-check"></clr-icon> {{'STATUS' | translate}}</span>
|
||||
{{'STATUS' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-column class="mm-col mm-col--submenu">
|
||||
|
||||
<clr-dg-column>
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'SUB_MENU' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-column class="mm-col mm-col--action">
|
||||
|
||||
<clr-dg-column>
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<clr-icon shape="bars"></clr-icon>
|
||||
{{'ACTION' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
<clr-dg-row class="mm-row" *clrDgItems="let user of filteredMenus;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell class="mm-cell mm-cell--icon">
|
||||
<span class="mm-icon-action"><clr-icon shape="edit" (click)="goToEdit(user)"
|
||||
class="is-error mm-icon-edit"></clr-icon></span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell class="mm-cell mm-cell--no">{{i+1}}</clr-dg-cell>
|
||||
<clr-dg-cell class="mm-cell mm-cell--name">
|
||||
<div class="mm-item">
|
||||
<div class="mm-item__avatar"><clr-icon shape="bookmark"></clr-icon></div>
|
||||
<div class="mm-item__text">
|
||||
<div class="mm-item__title">{{user.menuItemDesc}}</div>
|
||||
<div class="mm-item__meta">ID: {{user.menuId}} ⢠Seq: {{user.itemSeq}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell class="mm-cell mm-cell--id">{{user.menuId}}</clr-dg-cell>
|
||||
<clr-dg-cell class="mm-cell mm-cell--seq">{{user.itemSeq}}</clr-dg-cell>
|
||||
<clr-dg-cell class="mm-cell mm-cell--module">
|
||||
<div class="mm-chip mm-chip--module">
|
||||
<clr-icon shape="application"></clr-icon>
|
||||
<span>{{user.moduleName}}</span>
|
||||
</div>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell class="mm-cell mm-cell--link">
|
||||
<div class="mm-link">
|
||||
<clr-icon shape="link"></clr-icon>
|
||||
<span>{{user.main_menu_action_name}}</span>
|
||||
</div>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell class="mm-cell mm-cell--status">
|
||||
<span class="mm-badge" [class.mm-badge--success]="user.status==='Enable'"
|
||||
[class.mm-badge--muted]="user.status!=='Enable'">{{user.status}}</span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell class="mm-cell mm-cell--submenu"><clr-icon shape="bullet-list" (click)="submenu(user.menuItemId)"
|
||||
class="mm-icon-link"></clr-icon> </clr-dg-cell>
|
||||
<clr-dg-cell class="mm-cell mm-cell--action">
|
||||
<div class="mm-actions-inline">
|
||||
<button class="btn btn-sm btn-outline" (click)="goToEdit(user)"><clr-icon shape="edit"></clr-icon></button>
|
||||
<button class="btn btn-sm btn-outline" (click)="onDelete(user)"><clr-icon shape="trash"></clr-icon></button>
|
||||
</div>
|
||||
<clr-signpost>
|
||||
<span class="mm-icon-action" clrSignpostTrigger><clr-icon shape="help"
|
||||
class="mm-icon-help"></clr-icon></span>
|
||||
<clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
|
||||
<h5 style="margin-top: 0">{{'WHO_COLUMN'|translate}} </h5>
|
||||
<div>{{'ACCOUNT_ID'|translate}} <code class="clr-code">{{user.accountId}}</code></div>
|
||||
<div>{{'CREATED_AT'|translate}} <code class="clr-code">{{user.createdAt| date}}</code></div>
|
||||
<div>{{'CREATED_BY'|translate}} <code class="clr-code">{{user.createdBy}}</code></div>
|
||||
<div>{{'UPDATED_AT'|translate}} <code class="clr-code">{{user.updatedAt | date}}</code></div>
|
||||
<div>{{'UPDATED_BY'|translate}} <code class="clr-code">{{user.updatedBy}}</code></div>
|
||||
</clr-signpost-content>
|
||||
</clr-signpost>
|
||||
</clr-dg-cell>
|
||||
<!-- <clr-dg-action-overflow>
|
||||
<clr-dg-row *clrDgItems="let user of menus;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell style="max-width: 40px;">
|
||||
<span style="cursor: pointer;"><clr-icon shape="edit" (click)="goToEdit(user)" class="red is-error" style="color:red;"></clr-icon></span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell >{{i+1}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.menuItemDesc}}</clr-dg-cell>
|
||||
<clr-dg-cell >{{user.menuId}}</clr-dg-cell>
|
||||
<clr-dg-cell >{{user.itemSeq}}</clr-dg-cell>
|
||||
<clr-dg-cell > {{user.moduleName}} </clr-dg-cell>
|
||||
<clr-dg-cell > {{user.main_menu_action_name}}</clr-dg-cell>
|
||||
<clr-dg-cell >{{user.status}} </clr-dg-cell>
|
||||
<clr-dg-cell ><clr-icon shape="bullet-list" (click)="submenu(user.menuItemId)" style="color: rgb(108, 108, 194);"></clr-icon> </clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<span style="cursor: pointer;padding: 10px; "><clr-icon shape="trash" (click)="onDelete(user)" class="red is-error" style="color: red;"></clr-icon></span>
|
||||
<clr-signpost>
|
||||
<span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span>
|
||||
<clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
|
||||
<h5 style="margin-top: 0">{{'WHO_COLUMN'|translate}} </h5>
|
||||
<div>{{'ACCOUNT_ID'|translate}} <code class="clr-code">{{user.accountId}}</code></div>
|
||||
<div>{{'CREATED_AT'|translate}} <code class="clr-code">{{user.createdAt| date}}</code></div>
|
||||
<div>{{'CREATED_BY'|translate}} <code class="clr-code">{{user.createdBy}}</code></div>
|
||||
<div>{{'UPDATED_AT'|translate}} <code class="clr-code">{{user.updatedAt | date}}</code></div>
|
||||
<div>{{'UPDATED_BY'|translate}} <code class="clr-code">{{user.updatedBy}}</code></div>
|
||||
</clr-signpost-content>
|
||||
</clr-signpost>
|
||||
</clr-dg-cell>
|
||||
<!-- <clr-dg-action-overflow>
|
||||
<button class="action-item" *ngIf="medit == 'true'" (click)="goToEdit(user)">Edit <clr-icon shape="edit" class="is-error"></clr-icon></button>
|
||||
<button class="action-item" *ngIf="mdelete == 'true'" (click)="onDelete(user)">Delete<clr-icon shape="trash" class="is-error"></clr-icon></button>
|
||||
</clr-dg-action-overflow> -->
|
||||
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<div class="mm-detail">
|
||||
<div class="mm-detail__row"><span>Menu Name</span><strong>{{user.menuItemDesc}}</strong></div>
|
||||
<div class="mm-detail__row"><span>Action Link</span><strong>{{user.main_menu_action_name}}</strong></div>
|
||||
<div class="mm-detail__row"><span>Module</span><strong>{{user.moduleName}}</strong></div>
|
||||
</div>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
<clr-dg-row-detail *clrIfExpanded >
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">Menu Name: </td>
|
||||
<td class="td-content">{{user.menuItemDesc}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer class="mm-grid-footer">
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} users
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} users
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
|
||||
<div *ngIf="viewMode==='cards'">
|
||||
<div class="mm-cards">
|
||||
<div class="mm-card-item" *ngFor="let user of filteredMenus; let i = index">
|
||||
<div class="mm-card-item__header">
|
||||
<!-- <div class="mm-card-item__icon"><clr-icon [shape]="getIconShape(user)"></clr-icon></div> -->
|
||||
<div class="mm-card-item__title">{{user.menuItemDesc}}</div>
|
||||
<div class="mm-card-item__badge" [class.mm-badge--success]="user.status==='Enable'"
|
||||
[class.mm-badge--muted]="user.status!=='Enable'">{{user.status}}</div>
|
||||
</div>
|
||||
<div class="mm-card-item__body">
|
||||
<div class="mm-kv"><span>ID</span><strong>{{user.menuId}}</strong></div>
|
||||
<div class="mm-kv"><span>Sequence</span><strong>{{user.itemSeq}}</strong></div>
|
||||
<div class="mm-kv"><span>Module</span><strong>{{user.moduleName}}</strong></div>
|
||||
<div class="mm-kv mm-link"><clr-icon shape="link"></clr-icon><strong>{{user.main_menu_action_name}}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mm-card-item__footer">
|
||||
<button class="btn btn-sm btn-outline" (click)="goToEdit(user)"><clr-icon shape="edit"></clr-icon>
|
||||
Edit</button>
|
||||
<button class="btn btn-sm btn-outline" (click)="onDelete(user)"><clr-icon shape="trash"></clr-icon>
|
||||
Delete</button>
|
||||
<button class="btn btn-sm" (click)="submenu(user.menuItemId)"><clr-icon shape="bullet-list"></clr-icon>
|
||||
Submenu</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<clr-modal class="mm-modal" [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Add Menu Maintenance</h3>
|
||||
<div class="modal-body">
|
||||
<form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
|
||||
<form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
|
||||
<div class="clr-row">
|
||||
<!-- <div class="clr-col-sm-12">
|
||||
<!-- <div class="clr-col-sm-12">
|
||||
<label for="name">Menu Item ID<span class="required-field">*</span></label>
|
||||
<input type="text" class="clr-input" formControlName="menuItemId">
|
||||
</div> -->
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="name">Menu ID<span class="required-field">*</span></label>
|
||||
<input type="text" class="clr-input" formControlName="menuId" name="menuId" [(ngModel)]="mainid" readonly>
|
||||
<input type="text" class="clr-input" formControlName="menuId" name="menuId" [(ngModel)]="mainid" readonly>
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="name">Menu Item Name<span class="required-field">*</span></label>
|
||||
<input type="text" class="clr-input" formControlName="menuItemDesc">
|
||||
<div *ngIf="submitted && entryForm.controls.menuItemDesc.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.menuItemDesc.errors.required" class="error_mess">*This field
|
||||
is Required</div>
|
||||
</div>
|
||||
<input type="text" class="clr-input" formControlName="menuItemDesc">
|
||||
<div *ngIf="submitted && entryForm.controls.menuItemDesc.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.menuItemDesc.errors.required" class="error_mess">*This field is Required</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Sequence</label>
|
||||
<input type="text" class="clr-input" formControlName="itemSeq">
|
||||
<div *ngIf="submitted && entryForm.controls.itemSeq.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.itemSeq.errors.required" class="error_mess">*This field is
|
||||
Required</div>
|
||||
</div>
|
||||
<div *ngIf="submitted && entryForm.controls.itemSeq.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.itemSeq.errors.pattern" class="error_mess">*Required Only
|
||||
Number</div>
|
||||
</div>
|
||||
<div *ngIf="submitted && entryForm.controls.itemSeq.errors.required" class="error_mess">*This field is Required</div>
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Module Name</label>
|
||||
<input type="text" class="clr-input" formControlName="moduleName">
|
||||
<div *ngIf="submitted && entryForm.controls.moduleName.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.moduleName.errors.required" class="error_mess">*This field is
|
||||
Required</div>
|
||||
<div *ngIf="submitted && entryForm.controls.itemSeq.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.itemSeq.errors.pattern" class="error_mess">*Required Only Number</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Status</label>
|
||||
<select id="" formControlName="status">
|
||||
<option value="Enable">Enable</option>
|
||||
<option value="Disable">Disable</option>
|
||||
</select>
|
||||
<div *ngIf="submitted && entryForm.controls.status.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.status.errors.required" class="error_mess">*This field is
|
||||
Required</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Module Name</label>
|
||||
<input type="text" class="clr-input" formControlName="moduleName">
|
||||
<div *ngIf="submitted && entryForm.controls.moduleName.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.moduleName.errors.required" class="error_mess">*This field is Required</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Menu Action Link</label>
|
||||
<input type="text" class="clr-input" formControlName="main_menu_action_name">
|
||||
<div *ngIf="submitted && entryForm.controls.main_menu_action_name.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.main_menu_action_name.errors.required" class="error_mess">
|
||||
*This field is Required</div>
|
||||
</div>
|
||||
<!-- <select NAME="menu_id" >
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Status</label>
|
||||
<select id="" formControlName="status">
|
||||
<option value="Enable">Enable</option>
|
||||
<option value="Disable">Disable</option>
|
||||
</select>
|
||||
<div *ngIf="submitted && entryForm.controls.status.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.status.errors.required" class="error_mess">*This field is Required</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Menu Action Link</label>
|
||||
<input type="text" class="clr-input" formControlName="main_menu_action_name">
|
||||
<div *ngIf="submitted && entryForm.controls.main_menu_action_name.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.main_menu_action_name.errors.required" class="error_mess">*This field is Required</div>
|
||||
</div>
|
||||
<!-- <select NAME="menu_id" >
|
||||
<option SELECTED >Home Menu
|
||||
<OPTION >Home
|
||||
<OPTION >Job
|
||||
@@ -471,99 +348,94 @@
|
||||
|
||||
|
||||
</select> -->
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Menu Icon Name</label>
|
||||
<input type="text" class="clr-input" formControlName="main_menu_icon_name">
|
||||
<div *ngIf="submitted && entryForm.controls.main_menu_icon_name.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.main_menu_icon_name.errors.required" class="error_mess">*This
|
||||
field is Required</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Menu Icon Name</label>
|
||||
<input type="text" class="clr-input" formControlName="main_menu_icon_name">
|
||||
<div *ngIf="submitted && entryForm.controls.main_menu_icon_name.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.main_menu_icon_name.errors.required" class="error_mess">*This field is Required</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">ADD</button>
|
||||
<button type="submit" class="btn btn-primary" >ADD</button>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</clr-modal>
|
||||
|
||||
<clr-modal class="mm-modal" [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
|
||||
<div class="modal-body" *ngIf="rowSelected.menuItemId">
|
||||
<h1 class="delete">Are You Sure Want to delete?</h1>
|
||||
<h2 class="heading">{{rowSelected.menuItemId}}</h2>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
|
||||
<button type="submit" (click)="delete(rowSelected.menuItemId)" class="btn btn-primary">Delete</button>
|
||||
<button type="submit" (click)="delete(rowSelected.menuItemId)" class="btn btn-primary" >Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
|
||||
<clr-modal class="mm-modal" [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Update Menu Maintenance</h3>
|
||||
<div class="modal-body" *ngIf="rowSelected.menuItemId">
|
||||
<h2 class="heading">{{rowSelected.menuItemId}}</h2>
|
||||
<form (ngSubmit)="onUpdate(rowSelected.menuItemId)">
|
||||
<form (ngSubmit)="onUpdate(rowSelected.menuItemId)">
|
||||
<div class="clr-row">
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="name">Menu ID<span class="required-field">*</span></label>
|
||||
<input type="text" class="clr-input" name="menuId" [(ngModel)]="rowSelected.menuId" readonly>
|
||||
<input type="text" class="clr-input" name="menuId" [(ngModel)]="rowSelected.menuId" readonly>
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="name">Menu Item Name<span class="required-field">*</span></label>
|
||||
<input type="text" class="clr-input" name="menuItemDesc" [(ngModel)]="rowSelected.menuItemDesc">
|
||||
<input type="text" class="clr-input" name="menuItemDesc" [(ngModel)]="rowSelected.menuItemDesc">
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Sequence</label>
|
||||
<input type="text" class="clr-input" name="itemSeq" [(ngModel)]="rowSelected.itemSeq">
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Module Name</label>
|
||||
<input type="text" class="clr-input" name="moduleName" [(ngModel)]="rowSelected.moduleName">
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Status</label>
|
||||
<select id="" name="status" [(ngModel)]="rowSelected.status">
|
||||
<option value="Enable">Enable</option>
|
||||
<option value="Disable">Disable</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Menu Action Link</label>
|
||||
<input type="text" class="clr-input" name="main_menu_action_name"
|
||||
[(ngModel)]="rowSelected.main_menu_action_name">
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Menu Icon Name </label>
|
||||
<input type="text" class="clr-input" name="main_menu_icon_name"
|
||||
[(ngModel)]="rowSelected.main_menu_icon_name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Module Name</label>
|
||||
<input type="text" class="clr-input" name="moduleName" [(ngModel)]="rowSelected.moduleName">
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Status</label>
|
||||
<select id="" name="status" [(ngModel)]="rowSelected.status">
|
||||
<option value="Enable">Enable</option>
|
||||
<option value="Disable">Disable</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Menu Action Link</label>
|
||||
<input type="text" class="clr-input" name="main_menu_action_name" [(ngModel)]="rowSelected.main_menu_action_name">
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Menu Icon Name </label>
|
||||
<input type="text" class="clr-input" name="main_menu_icon_name" [(ngModel)]="rowSelected.main_menu_icon_name">
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Update</button>
|
||||
</div>
|
||||
</form>
|
||||
<button type="submit" class="btn btn-primary" >Update</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</clr-modal>
|
||||
|
||||
|
||||
<clr-modal class="mm-modal" [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
|
||||
<clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
|
||||
<h3 class="modal-title">Import File</h3>
|
||||
<div class="modal-body">
|
||||
<input type="file" name="file" class="file" (change)="selectFile($event)"
|
||||
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
|
||||
<input type="file" name="file" class="file" (change)="selectFile($event)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
|
||||
<button class="btn btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
|
||||
</div>
|
||||
</clr-modal>
|
||||
</div>
|
||||
</clr-modal>
|
||||
@@ -60,591 +60,3 @@ select{
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Modern theme-aware enhancements */
|
||||
.mm-container {
|
||||
background: var(--theme-surface);
|
||||
border-radius: var(--theme-border-radius);
|
||||
box-shadow: var(--theme-shadow);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.mm-hero {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--theme-glass-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--theme-glass-border);
|
||||
border-radius: calc(var(--theme-border-radius) + 4px);
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
box-shadow: var(--theme-glass-shadow);
|
||||
}
|
||||
|
||||
.mm-hero__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.mm-hero__icon clr-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: var(--theme-primary);
|
||||
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));
|
||||
}
|
||||
|
||||
.mm-hero__title {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mm-hero__subtitle {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
.mm-hero__actions .btn + .btn {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.mm-breadcrumb {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.mm-header-row {
|
||||
align-items: center;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.mm-title-wrap {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.mm-title {
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.mm-subtitle {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mm-actions {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mm-btn-group {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.mm-btn-primary {
|
||||
border-radius: var(--theme-border-radius);
|
||||
background: var(--theme-primary);
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
|
||||
transition: transform 120ms var(--ease-out, cubic-bezier(0, 0, 0.2, 1)), box-shadow 150ms ease;
|
||||
}
|
||||
|
||||
.mm-btn-primary:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.12); transform: translateY(-1px); }
|
||||
.mm-btn-primary:active { transform: translateY(0); }
|
||||
|
||||
.mm-btn-outline {
|
||||
border-radius: var(--theme-border-radius);
|
||||
border: 1px solid var(--theme-primary);
|
||||
color: var(--theme-primary);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.mm-btn-outline:hover { background: var(--theme-primary-100); }
|
||||
|
||||
.mm-btn-secondary {
|
||||
border-radius: var(--theme-border-radius);
|
||||
background: var(--theme-secondary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mm-btn-text {
|
||||
margin-left: 0.35rem;
|
||||
}
|
||||
|
||||
.mm-grid {
|
||||
background: var(--theme-surface);
|
||||
border-radius: var(--theme-border-radius);
|
||||
box-shadow: var(--theme-shadow);
|
||||
}
|
||||
.mm-grid--modern .datagrid-header {
|
||||
background: linear-gradient(135deg, var(--theme-primary-50), transparent);
|
||||
}
|
||||
|
||||
.mm-col-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mm-col--icon { width: 44px; }
|
||||
.mm-col--no { width: 70px; }
|
||||
.mm-col--name { min-width: 220px; }
|
||||
.mm-col--id { width: 120px; }
|
||||
.mm-col--seq { width: 120px; }
|
||||
.mm-col--module { min-width: 160px; }
|
||||
.mm-col--link { min-width: 220px; }
|
||||
.mm-col--status { width: 140px; }
|
||||
.mm-col--submenu { width: 100px; }
|
||||
.mm-col--action { width: 140px; }
|
||||
|
||||
.mm-card {
|
||||
background: var(--theme-glass-bg);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--theme-glass-border);
|
||||
border-radius: var(--theme-border-radius);
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.mm-grid-footer {
|
||||
border-top: 1px solid rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.mm-col--icon,
|
||||
.mm-cell--icon {
|
||||
max-width: 40px;
|
||||
}
|
||||
|
||||
.mm-row:hover {
|
||||
background: var(--theme-primary-50);
|
||||
}
|
||||
|
||||
.mm-icon-action {
|
||||
cursor: pointer;
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
transition: background 150ms ease-out, transform 150ms ease-out;
|
||||
}
|
||||
|
||||
.mm-icon-action:hover {
|
||||
background: var(--theme-primary-100);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.mm-icon-edit {
|
||||
color: var(--theme-accent);
|
||||
}
|
||||
|
||||
.mm-icon-link {
|
||||
color: var(--theme-secondary);
|
||||
}
|
||||
|
||||
.mm-icon-help {
|
||||
color: var(--theme-primary);
|
||||
}
|
||||
|
||||
.mm-icon-delete {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.mm-danger:hover {
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
}
|
||||
|
||||
.mm-modal .modal-body {
|
||||
background: var(--theme-surface);
|
||||
}
|
||||
|
||||
.mm-modal .modal-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Modernize Add/Edit modals */
|
||||
.mm-modal .modal-body form {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mm-modal .modal-body .clr-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.mm-modal .modal-body .clr-row { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.mm-modal label {
|
||||
display: inline-block;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.mm-modal input.clr-input,
|
||||
.mm-modal select {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(0,0,0,0.12);
|
||||
background: var(--theme-background);
|
||||
transition: border-color 150ms ease, box-shadow 150ms ease;
|
||||
}
|
||||
|
||||
.mm-modal input.clr-input:focus,
|
||||
.mm-modal select:focus {
|
||||
outline: none;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px var(--theme-primary-100);
|
||||
}
|
||||
|
||||
.mm-modal .modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mm-modal .modal-footer .btn.btn-primary {
|
||||
background: var(--theme-primary);
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.mm-modal .modal-footer .btn.btn-outline {
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--theme-secondary);
|
||||
color: var(--theme-secondary);
|
||||
}
|
||||
|
||||
.mm-modal .error_mess { color: #ef4444; font-size: 12px; margin-top: 4px; }
|
||||
|
||||
.mm-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.mm-item__avatar clr-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: var(--theme-accent);
|
||||
}
|
||||
|
||||
.mm-item__title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mm-item__meta {
|
||||
font-size: 0.75rem;
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
.mm-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(0,0,0,0.06);
|
||||
background: var(--theme-primary-50);
|
||||
}
|
||||
|
||||
.mm-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.mm-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--theme-secondary);
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.mm-badge--success {
|
||||
background: var(--theme-primary);
|
||||
}
|
||||
|
||||
.mm-badge--muted {
|
||||
background: var(--theme-primary-200);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.mm-actions-inline .btn {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.mm-detail {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.mm-detail__row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Skeleton loader */
|
||||
.mm-skeleton-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin: 8px 0 12px;
|
||||
}
|
||||
|
||||
.mm-skeleton-item {
|
||||
display: grid;
|
||||
grid-template-columns: 44px 1.2fr 0.8fr 0.6fr 1fr 120px 140px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px;
|
||||
background: var(--theme-surface);
|
||||
border-radius: var(--theme-border-radius);
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.mm-skel {
|
||||
height: 12px;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0,0,0,0.05) 25%,
|
||||
rgba(0,0,0,0.08) 37%,
|
||||
rgba(0,0,0,0.05) 63%
|
||||
);
|
||||
background-size: 400% 100%;
|
||||
animation: mm-shimmer 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.mm-skel--icon { width: 24px; height: 24px; border-radius: 50%; }
|
||||
.mm-skel--title { width: 60%; height: 14px; }
|
||||
.mm-skel--meta { width: 40%; }
|
||||
.mm-skel--chip { width: 80px; }
|
||||
.mm-skel--link { width: 60%; }
|
||||
.mm-skel--badge { width: 70px; }
|
||||
.mm-skel--actions { width: 60px; }
|
||||
|
||||
@keyframes mm-shimmer {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: 0 0; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.mm-skel { animation: none; }
|
||||
}
|
||||
|
||||
/* Row mount animation */
|
||||
.mm-row { transition: transform 220ms var(--ease-out, cubic-bezier(0, 0, 0.2, 1)), background 200ms ease; }
|
||||
.mm-row.ng-enter { transform: translateY(8px); opacity: 0.001; }
|
||||
.mm-row.ng-enter-active { transform: translateY(0); opacity: 1; }
|
||||
|
||||
/* Responsive layouts */
|
||||
@media (max-width: 1024px) {
|
||||
.mm-col--id, .mm-col--seq, .mm-col--submenu { display: none; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.mm-col--link { display: none; }
|
||||
.mm-item__meta { display: none; }
|
||||
.mm-actions-inline .btn { padding: 0 6px; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.mm-col--action { width: 100px; }
|
||||
.mm-col--status { width: 110px; }
|
||||
.mm-hero { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
|
||||
.mm-hero__actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
|
||||
}
|
||||
|
||||
/* Sticky toolbar */
|
||||
.mm-toolbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 8px;
|
||||
background: var(--theme-surface);
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
border-radius: var(--theme-border-radius);
|
||||
box-shadow: 0 1px 0 rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.mm-search {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
padding: 6px 8px;
|
||||
border-radius: 999px;
|
||||
background: var(--theme-background);
|
||||
}
|
||||
|
||||
.mm-search__input {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.mm-select {
|
||||
border-radius: 999px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
background: var(--theme-background);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.mm-search__input { min-width: 140px; }
|
||||
}
|
||||
|
||||
.mm-view-toggle .btn { margin-left: 6px; border-radius: 999px; }
|
||||
|
||||
/* Card view */
|
||||
.mm-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) { .mm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (max-width: 640px) { .mm-cards { grid-template-columns: 1fr; } }
|
||||
|
||||
.mm-card-item {
|
||||
background: var(--theme-surface);
|
||||
border: 1px solid rgba(0,0,0,0.06);
|
||||
border-radius: var(--theme-border-radius);
|
||||
box-shadow: var(--theme-shadow);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mm-card-item__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
background: linear-gradient(135deg, var(--theme-primary-50), transparent);
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.mm-card-item__icon clr-icon { color: var(--theme-primary); width: 18px; height: 18px; }
|
||||
.mm-card-item__title { font-weight: 700; flex: 1 1 auto; }
|
||||
.mm-card-item__badge { margin-left: auto; }
|
||||
|
||||
/* Prevent overlaps and long text issues */
|
||||
.mm-ellipsis {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mm-card-item__title {
|
||||
max-width: 60%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.mm-card-item__title { max-width: 54%; }
|
||||
}
|
||||
|
||||
.mm-card-item__body {
|
||||
padding: 10px 12px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0,1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) { .mm-card-item__body { grid-template-columns: 1fr; } }
|
||||
|
||||
.mm-kv { display: flex; justify-content: space-between; }
|
||||
.mm-kv span { color: var(--theme-text-secondary); }
|
||||
|
||||
.mm-card-item__footer {
|
||||
padding: 10px 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
border-top: 1px solid rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
/* Theme the card footer buttons */
|
||||
.mm-card-item__footer .btn {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.mm-card-item__footer .btn.btn-outline {
|
||||
border: 1px solid var(--theme-secondary);
|
||||
color: var(--theme-secondary);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.mm-card-item__footer .btn.btn-outline:hover { background: rgba(0,0,0,0.04); }
|
||||
|
||||
.mm-card-item__footer .btn:not(.btn-outline) {
|
||||
background: var(--theme-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mm-card-item__footer .btn:not(.btn-outline):hover {
|
||||
filter: brightness(0.98);
|
||||
}
|
||||
|
||||
/* View toggle buttons */
|
||||
.mm-view-toggle .btn.btn-primary { background: var(--theme-primary); color: #fff; }
|
||||
.mm-view-toggle .btn:not(.btn-primary) { background: var(--theme-primary-100); color: var(--theme-text); }
|
||||
|
||||
.mm-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
margin: 0.75rem 0 1rem;
|
||||
}
|
||||
|
||||
.mm-stat {
|
||||
background: var(--theme-surface);
|
||||
border-radius: var(--theme-border-radius);
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.mm-stat__value {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--theme-primary);
|
||||
}
|
||||
|
||||
.mm-stat__label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
.mm-empty {
|
||||
text-align: center;
|
||||
padding: 1.5rem 0.5rem;
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
.mm-empty clr-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: var(--theme-secondary);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.mm-empty__title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,6 @@ import { CsvService } from 'src/app/services/csv.service';
|
||||
import { ExcelService } from 'src/app/services/excel.service';
|
||||
import * as moment from 'moment';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { ThemeService } from 'src/app/services/theme.service';
|
||||
@Component({
|
||||
selector: 'app-menumaintance',
|
||||
templateUrl: './menumaintance.component.html',
|
||||
@@ -32,10 +31,6 @@ export class MenumaintanceComponent implements OnInit {
|
||||
showdata;
|
||||
error;
|
||||
submitted = false;
|
||||
// Quick filter UI state (no API/logic changes)
|
||||
filterText = '';
|
||||
statusFilter: 'All' | 'Enable' | 'Disable' | '' = 'All';
|
||||
viewMode: 'cards' | 'table' = 'cards';
|
||||
constructor(private menuservice: MenumaintanceService,
|
||||
private toastr: ToastrService,
|
||||
private excel: ExcelService,
|
||||
@@ -44,14 +39,9 @@ export class MenumaintanceComponent implements OnInit {
|
||||
private menuGroupService: MenuGroupService,
|
||||
private csvService: CsvService,
|
||||
private translate: TranslateService,
|
||||
private router: Router,
|
||||
private themeService: ThemeService) { }
|
||||
private router: Router,) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
// Ensure theme variables are applied; subscription keeps this view reactive to theme changes
|
||||
this.themeService.currentTheme$.subscribe(() => {
|
||||
// Theme applied globally via CSS variables; no additional handling needed here
|
||||
});
|
||||
this.showdata = this.menuGroupService.getdata();
|
||||
console.log(this.showdata);
|
||||
this.mcreate = this.showdata.mcreate;
|
||||
@@ -79,71 +69,6 @@ export class MenumaintanceComponent implements OnInit {
|
||||
this.getdata();
|
||||
}
|
||||
|
||||
// Stats for UI (template-safe, no inline arrow functions)
|
||||
get totalMenus(): number {
|
||||
return this.menus ? this.menus.length : 0;
|
||||
}
|
||||
|
||||
get enabledMenusCount(): number {
|
||||
const list: any[] = (this.menus as unknown as any[]) || [];
|
||||
return list.filter(menu => menu && menu.status === 'Enable').length;
|
||||
}
|
||||
|
||||
get disabledMenusCount(): number {
|
||||
const list: any[] = (this.menus as unknown as any[]) || [];
|
||||
return list.filter(menu => menu && menu.status === 'Disable').length;
|
||||
}
|
||||
|
||||
// Filtered list for view
|
||||
get filteredMenus(): Rn_Main_Menu[] {
|
||||
const items: any[] = (this.menus as unknown as any[]) || [];
|
||||
const text = (this.filterText || '').toLowerCase();
|
||||
const status = this.statusFilter;
|
||||
return items.filter(m => {
|
||||
const matchText = !text || (
|
||||
(m.menuItemDesc || '').toLowerCase().includes(text) ||
|
||||
(m.moduleName || '').toLowerCase().includes(text) ||
|
||||
(m.main_menu_action_name || '').toLowerCase().includes(text)
|
||||
);
|
||||
const matchStatus = !status || status === 'All' || m.status === status;
|
||||
return matchText && matchStatus;
|
||||
});
|
||||
}
|
||||
|
||||
setViewMode(mode: 'cards' | 'table') {
|
||||
this.viewMode = mode;
|
||||
}
|
||||
|
||||
// Resolve a safe Clarity icon shape for a menu item
|
||||
getIconShape(menu: any): string {
|
||||
const raw = (menu?.main_menu_icon_name ?? menu?.mainMenuIconName ?? '').toString().trim();
|
||||
const name = raw.toLowerCase();
|
||||
const invalid = !name || name === 'undefined' || name === 'null' || name === '-' || name === 'na' || name === 'n/a';
|
||||
if (invalid) {
|
||||
return 'file'; // universal fallback icon
|
||||
}
|
||||
// Optional alias normalization
|
||||
const aliasMap: Record<string, string> = {
|
||||
'home': 'home',
|
||||
'dashboard': 'dashboard',
|
||||
'menu': 'list',
|
||||
'list': 'list',
|
||||
'link': 'link',
|
||||
'application': 'application',
|
||||
'applications': 'applications',
|
||||
'module': 'application',
|
||||
'settings': 'cog',
|
||||
'config': 'cog',
|
||||
'user': 'user',
|
||||
'users': 'users',
|
||||
'folder': 'folder',
|
||||
'file': 'file',
|
||||
'tag': 'tag',
|
||||
'bookmark': 'bookmark'
|
||||
};
|
||||
return aliasMap[name] ?? name;
|
||||
}
|
||||
|
||||
switchLanguage(language: string) {
|
||||
this.translate.use(language);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong">
|
||||
<li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
|
||||
<li><a href="javascript://"><clr-icon shape="lock"></clr-icon>Security</a></li>
|
||||
<li><a href="javascript://">Menu Maintenance</a></li>
|
||||
@@ -9,50 +9,22 @@
|
||||
<span class="label label-light-blue" style="display: inline;margin-left: 30px;">Sub Menu</span><br> -->
|
||||
|
||||
|
||||
<section class="mm-hero">
|
||||
<div class="mm-hero__content">
|
||||
<div class="mm-hero__icon"><clr-icon shape="organization"></clr-icon></div>
|
||||
<div>
|
||||
<h2 class="mm-hero__title">Sub-Menu Maintenance</h2>
|
||||
<p class="mm-hero__subtitle">Sub Menu</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mm-hero__actions">
|
||||
<button id="add" class="btn btn-primary mm-btn-primary" (click)="goToAdd()">
|
||||
<clr-icon shape="plus"></clr-icon>
|
||||
<span class="mm-btn-text">Add</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<div class="clr-row" style="margin-top: 15px;">
|
||||
<div class="clr-col-8">
|
||||
<h3 style="font-weight: 300;display: inline;">Sub-Menu Maintenance </h3>
|
||||
<span class="label label-light-blue" style="display: inline;margin-left: 30px;">Sub Menu</span><br>
|
||||
|
||||
<div class="mm-toolbar">
|
||||
<div class="mm-toolbar__left">
|
||||
<div class="mm-search">
|
||||
<clr-icon shape="search"></clr-icon>
|
||||
<input class="mm-search__input" type="text" placeholder="Search" [(ngModel)]="filterText" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mm-toolbar__right">
|
||||
<select class="mm-select" [(ngModel)]="statusFilter">
|
||||
<option value="All">All</option>
|
||||
<option value="Enable">Enabled</option>
|
||||
<option value="Disable">Disabled</option>
|
||||
</select>
|
||||
<div class="mm-view-toggle">
|
||||
<button class="btn btn-sm" [class.btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
|
||||
<clr-icon shape="view-cards"></clr-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm" [class.btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
|
||||
<clr-icon shape="table"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-col-4" style="text-align: right;">
|
||||
<button id="add" class="btn btn-primary" (click)="goToAdd()">
|
||||
<clr-icon shape="plus"></clr-icon>ADD New
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="mm-card" *ngIf="viewMode==='table'">
|
||||
<clr-datagrid class="mm-grid mm-grid--modern" [clrDgLoading]="loading">
|
||||
<clr-datagrid [clrDgLoading]="loading" >
|
||||
<clr-dg-placeholder><clr-spinner [clrMedium]="true">Loading ...</clr-spinner></clr-dg-placeholder>
|
||||
|
||||
<clr-dg-column > <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
@@ -77,29 +49,19 @@
|
||||
Status
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
<clr-dg-row class="mm-row" *clrDgItems="let user of filteredSubMenus;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-row *clrDgItems="let user of sub;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell >{{i+1}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<div class="mm-item">
|
||||
<!-- <div class="mm-item__avatar"><clr-icon [shape]="getIconShape(user)"></clr-icon></div> -->
|
||||
<div class="mm-item__text">
|
||||
<div class="mm-item__title">{{user.menuItemDesc}}</div>
|
||||
<div class="mm-item__meta">ID: {{ user.menuId || 'â' }} | Seq: {{ (user.itemSeq === 0 || user.itemSeq) ? user.itemSeq : 'â' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.menuItemDesc}}</clr-dg-cell>
|
||||
<clr-dg-cell >{{user.menuId}}</clr-dg-cell>
|
||||
<clr-dg-cell >{{user.itemSeq}}</clr-dg-cell>
|
||||
<clr-dg-cell > {{user.moduleName}} </clr-dg-cell>
|
||||
<clr-dg-cell > {{user.main_menu_action_name}}</clr-dg-cell>
|
||||
<clr-dg-cell >{{user.status}} </clr-dg-cell>
|
||||
|
||||
<clr-dg-cell class="mm-cell mm-cell--action">
|
||||
<div class="mm-actions-inline">
|
||||
<button class="btn btn-sm btn-outline mm-btn-edit" (click)="goToEdit(user)"><clr-icon shape="edit"></clr-icon></button>
|
||||
<button class="btn btn-sm btn-outline mm-btn-delete" (click)="onDelete(user)"><clr-icon shape="trash"></clr-icon></button>
|
||||
</div>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-action-overflow>
|
||||
<button class="action-item" (click)="goToEdit(user)">Edit <clr-icon shape="edit" class="is-error"></clr-icon></button>
|
||||
<button class="action-item" (click)="onDelete(user)">Delete<clr-icon shape="trash" class="is-error"></clr-icon></button>
|
||||
</clr-dg-action-overflow>
|
||||
|
||||
<clr-dg-row-detail *clrIfExpanded >
|
||||
<table class="table">
|
||||
@@ -111,7 +73,7 @@
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer class="mm-grid-footer">
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
@@ -119,31 +81,8 @@
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<div *ngIf="viewMode==='cards'">
|
||||
<div class="mm-cards">
|
||||
<div class="mm-card-item" *ngFor="let user of filteredSubMenus; let i = index">
|
||||
<div class="mm-card-item__header">
|
||||
<!-- <div class="mm-card-item__icon"><clr-icon [shape]="getIconShape(user)"></clr-icon></div> -->
|
||||
<div class="mm-card-item__title">{{user.menuItemDesc}}</div>
|
||||
<div class="mm-card-item__badge" [class.mm-badge--success]="user.status==='Enable'" [class.mm-badge--muted]="user.status!=='Enable'">{{user.status}}</div>
|
||||
</div>
|
||||
<div class="mm-card-item__body">
|
||||
<div class="mm-kv"><span>ID</span><strong>{{ user.menuId || 'â' }}</strong></div>
|
||||
<div class="mm-kv"><span>Sequence</span><strong>{{ (user.itemSeq === 0 || user.itemSeq) ? user.itemSeq : 'â' }}</strong></div>
|
||||
<div class="mm-kv"><span>Module</span><strong class="mm-ellipsis">{{ user.moduleName || 'â' }}</strong></div>
|
||||
<div class="mm-kv mm-link"><clr-icon shape="link"></clr-icon><strong class="mm-ellipsis">{{ user.main_menu_action_name || 'â' }}</strong></div>
|
||||
</div>
|
||||
<div class="mm-card-item__footer">
|
||||
<button class="btn btn-sm btn-outline mm-btn-edit" (click)="goToEdit(user)"><clr-icon shape="edit"></clr-icon> Edit</button>
|
||||
<button class="btn btn-sm btn-outline mm-btn-delete" (click)="onDelete(user)"><clr-icon shape="trash"></clr-icon> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<clr-modal class="mm-modal" [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Add Sub Menu Maintenance</h3>
|
||||
<div class="modal-body">
|
||||
<form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
|
||||
@@ -242,7 +181,7 @@
|
||||
<br>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">ADD</button>
|
||||
<button type="submit" class="btn btn-primary" >ADD</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -262,7 +201,7 @@
|
||||
</clr-modal>
|
||||
|
||||
|
||||
<clr-modal class="mm-modal" [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Update Sub Menu Maintenance</h3>
|
||||
<div class="modal-body" *ngIf="rowSelected.menuItemId">
|
||||
<h2 class="heading">{{rowSelected.menuItemId}}</h2>
|
||||
@@ -301,7 +240,7 @@
|
||||
<br>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Update</button>
|
||||
<button type="submit" class="btn btn-primary" >Update</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,88 +1,3 @@
|
||||
@import '../../../../../styles/design-tokens';
|
||||
|
||||
.mm-breadcrumb { margin-bottom: 0.75rem; }
|
||||
.mm-modal .modal-body { background: var(--theme-surface); }
|
||||
.mm-modal .modal-title { font-weight: 600; }
|
||||
.mm-modal .modal-body .clr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
|
||||
@media (max-width: 640px) { .mm-modal .modal-body .clr-row { grid-template-columns: 1fr; } }
|
||||
.mm-modal label { display: inline-block; margin-bottom: 6px; font-weight: 600; color: var(--theme-text); }
|
||||
.mm-modal input.clr-input, .mm-modal select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.12); background: var(--theme-background); transition: border-color 150ms ease, box-shadow 150ms ease; }
|
||||
.mm-modal input.clr-input:focus, .mm-modal select:focus { outline: none; border-color: var(--theme-primary); box-shadow: 0 0 0 3px var(--theme-primary-100); }
|
||||
.mm-modal .modal-footer { display: flex; justify-content: flex-end; gap: 10px; }
|
||||
.mm-modal .modal-footer .btn.btn-primary { background: var(--theme-primary); color: #fff; border-radius: 10px; }
|
||||
.mm-modal .modal-footer .btn.btn-outline { border-radius: 10px; border: 1px solid var(--theme-secondary); color: var(--theme-secondary); }
|
||||
.mm-modal .error_mess { color: #ef4444; font-size: 12px; margin-top: 4px; }
|
||||
|
||||
.mm-hero {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
background: var(--theme-glass-bg); backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--theme-glass-border);
|
||||
border-radius: calc(var(--theme-border-radius) + 4px);
|
||||
padding: 1rem 1.25rem; margin-bottom: 0.75rem; box-shadow: var(--theme-glass-shadow);
|
||||
}
|
||||
.mm-hero__content { display: flex; align-items: center; gap: 0.75rem; }
|
||||
.mm-hero__icon clr-icon { width: 28px; height: 28px; color: var(--theme-primary); }
|
||||
.mm-hero__title { font-size: 1.25rem; margin: 0; }
|
||||
.mm-hero__subtitle { margin: 0; font-size: 0.875rem; color: var(--theme-text-secondary); }
|
||||
.mm-hero__actions .btn + .btn { margin-left: 0.5rem; }
|
||||
|
||||
.mm-btn-primary { border-radius: var(--theme-border-radius); background: var(--theme-primary); color: #fff; }
|
||||
.mm-btn-text { margin-left: 0.35rem; }
|
||||
|
||||
.mm-toolbar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--theme-surface); border: 1px solid rgba(0,0,0,0.05); border-radius: var(--theme-border-radius); box-shadow: 0 1px 0 rgba(0,0,0,0.03); }
|
||||
.mm-search { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(0,0,0,0.08); padding: 6px 8px; border-radius: 999px; background: var(--theme-background); }
|
||||
.mm-search__input { border: none; outline: none; background: transparent; min-width: 220px; }
|
||||
.mm-select { border-radius: 999px; padding: 6px 10px; border: 1px solid rgba(0,0,0,0.08); background: var(--theme-background); }
|
||||
.mm-view-toggle .btn { margin-left: 6px; border-radius: 999px; }
|
||||
|
||||
.mm-card { background: var(--theme-glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--theme-glass-border); border-radius: var(--theme-border-radius); padding: 0.25rem; }
|
||||
.mm-grid { background: var(--theme-surface); border-radius: var(--theme-border-radius); box-shadow: var(--theme-shadow); }
|
||||
.mm-grid--modern .datagrid-header { background: linear-gradient(135deg, var(--theme-primary-50), transparent); }
|
||||
.mm-grid-footer { border-top: 1px solid rgba(0,0,0,0.06); }
|
||||
.mm-row:hover { background: var(--theme-primary-50); }
|
||||
.mm-item { display: flex; align-items: center; gap: 0.75rem; }
|
||||
.mm-item__avatar clr-icon { width: 18px; height: 18px; color: var(--theme-accent); }
|
||||
.mm-item__title { font-weight: 600; }
|
||||
.mm-item__meta { font-size: 0.75rem; color: var(--theme-text-secondary); }
|
||||
.mm-actions-inline .btn { margin-right: 6px; }
|
||||
.mm-actions-inline .mm-btn-edit { border: 1px solid var(--theme-accent); color: var(--theme-accent); }
|
||||
.mm-actions-inline .mm-btn-edit:hover { background: rgba(139, 92, 246, 0.12); }
|
||||
.mm-actions-inline .mm-btn-delete { border: 1px solid #ef4444; color: #ef4444; }
|
||||
.mm-actions-inline .mm-btn-delete:hover { background: rgba(239, 68, 68, 0.12); }
|
||||
|
||||
.mm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
|
||||
@media (max-width: 1024px) { .mm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (max-width: 640px) { .mm-cards { grid-template-columns: 1fr; } .mm-search__input { min-width: 140px; } }
|
||||
.mm-card-item { background: var(--theme-surface); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--theme-border-radius); box-shadow: var(--theme-shadow); overflow: hidden; display: flex; flex-direction: column; }
|
||||
.mm-card-item__header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(135deg, var(--theme-primary-50), transparent); }
|
||||
.mm-card-item__icon clr-icon { color: var(--theme-primary); width: 18px; height: 18px; }
|
||||
.mm-card-item__title { font-weight: 700; flex: 1 1 auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.mm-card-item__badge { margin-left: auto; }
|
||||
.mm-card-item__body { padding: 10px 12px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
|
||||
@media (max-width: 640px) { .mm-card-item__body { grid-template-columns: 1fr; } }
|
||||
.mm-kv { display: flex; justify-content: space-between; }
|
||||
.mm-kv span { color: var(--theme-text-secondary); }
|
||||
.mm-card-item__footer { padding: 10px 12px; display: flex; gap: 8px; border-top: 1px solid rgba(0,0,0,0.06); }
|
||||
.mm-card-item__footer .mm-btn-edit { border: 1px solid var(--theme-accent); color: var(--theme-accent); }
|
||||
.mm-card-item__footer .mm-btn-edit:hover { background: rgba(139, 92, 246, 0.12); }
|
||||
.mm-card-item__footer .mm-btn-delete { border: 1px solid #ef4444; color: #ef4444; }
|
||||
.mm-card-item__footer .mm-btn-delete:hover { background: rgba(239, 68, 68, 0.12); }
|
||||
.mm-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--theme-secondary); color: #fff; font-size: 0.75rem; }
|
||||
.mm-badge--success { background: var(--theme-primary); }
|
||||
.mm-badge--muted { background: var(--theme-primary-200); color: var(--theme-text); }
|
||||
|
||||
/* Modals */
|
||||
.mm-modal .modal-body { background: var(--theme-surface); }
|
||||
.mm-modal .modal-title { font-weight: 600; }
|
||||
.mm-modal .modal-body .clr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
|
||||
@media (max-width: 640px) { .mm-modal .modal-body .clr-row { grid-template-columns: 1fr; } }
|
||||
.mm-modal label { display: inline-block; margin-bottom: 6px; font-weight: 600; color: var(--theme-text); }
|
||||
.mm-modal input.clr-input, .mm-modal select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.12); background: var(--theme-background); transition: border-color 150ms ease, box-shadow 150ms ease; }
|
||||
.mm-modal input.clr-input:focus, .mm-modal select:focus { outline: none; border-color: var(--theme-primary); box-shadow: 0 0 0 3px var(--theme-primary-100); }
|
||||
.mm-modal .modal-footer { display: flex; justify-content: flex-end; gap: 10px; }
|
||||
.mm-modal .modal-footer .btn.btn-primary { background: var(--theme-primary); color: #fff; border-radius: 10px; }
|
||||
.mm-modal .modal-footer .btn.btn-outline { border-radius: 10px; border: 1px solid var(--theme-secondary); color: var(--theme-secondary); }
|
||||
.mm-modal .error_mess { color: #ef4444; font-size: 12px; margin-top: 4px; }
|
||||
input[type=text],[type=date],[type=password],[type=number] {
|
||||
width: 100%;
|
||||
padding: 15px 20px;
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ThemeService } from 'src/app/services/theme.service';
|
||||
import { MenumaintanceService } from '../../../../services/admin/menumaintance.service';
|
||||
import { Rn_Main_Menu } from '../../../../models/builder/Rn_Main_Menu';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
@@ -31,22 +30,13 @@ export class SubmenuComponent implements OnInit {
|
||||
mainid;
|
||||
submitted = false;
|
||||
public entryForm: FormGroup;
|
||||
// UI filter/view state
|
||||
filterText = '';
|
||||
statusFilter: 'All' | 'Enable' | 'Disable' | '' = 'All';
|
||||
viewMode: 'cards' | 'table' = 'cards';
|
||||
|
||||
constructor(private menuservice: MenumaintanceService,
|
||||
private toastr: ToastrService,
|
||||
private _fb: FormBuilder,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private themeService: ThemeService) { }
|
||||
private router: Router,) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.themeService.currentTheme$.subscribe(() => {
|
||||
// Theme CSS variables applied globally
|
||||
});
|
||||
this.id = this.route.snapshot.params["id"];
|
||||
console.log("project mainmenu with id = ", this.id);
|
||||
this.getById(this.id);
|
||||
@@ -65,34 +55,6 @@ export class SubmenuComponent implements OnInit {
|
||||
|
||||
// this.getdata();
|
||||
}
|
||||
|
||||
// Derived/filtered list for view
|
||||
get filteredSubMenus(): any[] {
|
||||
const items: any[] = (this.sub as unknown as any[]) || [];
|
||||
const text = (this.filterText || '').toLowerCase();
|
||||
const status = this.statusFilter;
|
||||
return items.filter(m => {
|
||||
const matchText = !text || (
|
||||
(m.menuItemDesc || '').toLowerCase().includes(text) ||
|
||||
(m.moduleName || '').toLowerCase().includes(text) ||
|
||||
(m.main_menu_action_name || '').toLowerCase().includes(text)
|
||||
);
|
||||
const matchStatus = !status || status === 'All' || m.status === status;
|
||||
return matchText && matchStatus;
|
||||
});
|
||||
}
|
||||
|
||||
setViewMode(mode: 'cards' | 'table') { this.viewMode = mode; }
|
||||
|
||||
// Resolve a safe icon
|
||||
getIconShape(menu: any): string {
|
||||
const raw = (menu?.main_menu_icon_name ?? menu?.mainMenuIconName ?? '').toString().trim();
|
||||
const name = raw.toLowerCase();
|
||||
const invalid = !name || name === 'undefined' || name === 'null' || name === '-' || name === 'na' || name === 'n/a';
|
||||
if (invalid) return 'file';
|
||||
const alias: Record<string, string> = { application:'application', applications:'applications', settings:'cog', config:'cog', user:'user', users:'users', folder:'folder', file:'file', tag:'tag', bookmark:'bookmark', home:'home', dashboard:'dashboard', menu:'list', list:'list', link:'link', module:'application' };
|
||||
return alias[name] ?? name;
|
||||
}
|
||||
getById(id: any) {
|
||||
this.menuservice.getbyid(id).subscribe((data) => {
|
||||
this.sub = data;
|
||||
|
||||
@@ -1,320 +1,224 @@
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
|
||||
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong">
|
||||
<li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
|
||||
<li><a href="javascript://"><clr-icon shape="lock"></clr-icon>{{ 'SECURITY' | translate }}</a></li>
|
||||
<li><a href="javascript://">{{'USER_GROUP_MAINTENANCE' | translate}}</a></li>
|
||||
|
||||
</ol>
|
||||
|
||||
<section class="ug-hero">
|
||||
<div class="ug-hero__content">
|
||||
<div class="ug-hero__icon"><clr-icon shape="users"></clr-icon></div>
|
||||
<div>
|
||||
<h2 class="ug-hero__title">{{'USER_GROUP_MAINTENANCE' | translate}}</h2>
|
||||
<p class="ug-hero__subtitle">{{ 'SECURITY' | translate }}</p>
|
||||
</div>
|
||||
|
||||
<div class="dg-wrapper">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col">
|
||||
<h3>{{'USER_GROUP_MAINTENANCE' | translate}}</h3>
|
||||
</div>
|
||||
<div class="ug-hero__actions">
|
||||
<button class="ug-btn ug-btn-secondary" (click)="downloadFiles()">
|
||||
<clr-icon shape="download"></clr-icon>
|
||||
<span class="ug-btn-text">{{ 'DOWNLOAD_TEMPLATE' | translate }}</span>
|
||||
</button>
|
||||
<button class="ug-btn ug-btn-secondary" (click)="csvImport()">
|
||||
<clr-icon shape="import"></clr-icon>
|
||||
<span class="ug-btn-text">{{ 'IMPORT' | translate }}</span>
|
||||
</button>
|
||||
<button class="ug-btn ug-btn-secondary" (click)="onExport()">
|
||||
<clr-icon shape="export"></clr-icon>
|
||||
<span class="ug-btn-text">{{ 'EXPORT_XLSX' | translate }}</span>
|
||||
</button>
|
||||
<button id="add" class="ug-btn ug-btn-primary" (click)="goToAdd()">
|
||||
<clr-icon shape="plus"></clr-icon>
|
||||
<span class="ug-btn-text">{{ 'ADD' | translate }}</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<div class="clr-col" style="text-align: right;">
|
||||
<div class="btn-group">
|
||||
<button class="btn text-dark" (click)="downloadFiles()"><b>{{ 'DOWNLOAD_TEMPLATE' | translate }}</b></button>
|
||||
|
||||
<div class="ug-toolbar">
|
||||
<div class="ug-toolbar__left">
|
||||
<div class="ug-search">
|
||||
<clr-icon shape="search"></clr-icon>
|
||||
<input class="ug-search__input" type="text" [placeholder]="'SEARCH' | translate" [(ngModel)]="filterText" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ug-toolbar__right">
|
||||
<div class="ug-view-toggle">
|
||||
<button class="ug-btn ug-btn-sm" [class.ug-btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
|
||||
<clr-icon shape="view-cards"></clr-icon>
|
||||
</button>
|
||||
<button class="ug-btn ug-btn-sm" [class.ug-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
|
||||
<clr-icon shape="table"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<clr-datagrid class="ug-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'">
|
||||
<clr-dg-placeholder>
|
||||
<ng-template #loadingSpinner>
|
||||
<clr-spinner>{{'LOADING' | translate}} ... </clr-spinner>
|
||||
</ng-template>
|
||||
<div *ngIf="error;else loadingSpinner">{{error}}</div>
|
||||
</clr-dg-placeholder>
|
||||
|
||||
<clr-dg-column [clrDgField]="'usrGrp'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'USERGROUP_NO' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-column [clrDgField]="'groupName'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'GROUP_NAME' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'groupDesc'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'GROUP_DESC' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'groupLevel'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'GROUP_LEVEL' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'status'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'STATUS' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'updateDateFormated'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'UPDATED_DATE' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let user of filteredGroups;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell>{{user.usrGrp}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.groupName}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.groupDesc}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.groupLevel}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<span class="ug-status-badge" [class.ug-status-enabled]="user.status === 'E'"
|
||||
[class.ug-status-disabled]="user.status === 'D'">
|
||||
{{user.status === 'E' ? 'Enabled' : 'Disabled'}}
|
||||
</span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.updateDateFormated}}</clr-dg-cell>
|
||||
|
||||
<clr-dg-action-overflow>
|
||||
<!-- <button class="ug-action-item" *ngIf="medit == 'true' || medit == true" (click)="goToEdit(user)">
|
||||
<clr-icon shape="edit"></clr-icon>
|
||||
{{'EDIT' | translate}}
|
||||
</button> -->
|
||||
<button class="ug-action-item" (click)="goToEdit(user)">
|
||||
<clr-icon shape="edit"></clr-icon>
|
||||
{{'EDIT' | translate}}
|
||||
</button>
|
||||
<button class="ug-action-item ug-btn-error" (click)="onDelete(user)">
|
||||
<clr-icon shape="trash"></clr-icon>
|
||||
{{'DELETE'|translate}}
|
||||
</button>
|
||||
</clr-dg-action-overflow>
|
||||
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">username</td>
|
||||
<td class="td-content">{{user.groupName}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer class="ug-grid-footer">
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
|
||||
<div class="ug-cards" *ngIf="viewMode==='cards'">
|
||||
<div class="ug-card-item" *ngFor="let user of filteredGroups; let i = index">
|
||||
<div class="ug-card-item__header">
|
||||
<div class="ug-card-item__icon"><clr-icon shape="users"></clr-icon></div>
|
||||
|
||||
<div class="ug-card-item__title">{{user.groupName}}</div>
|
||||
<div class="ug-card-item__badge" [class.ug-status-enabled]="user.status === 'E'"
|
||||
[class.ug-status-disabled]="user.status === 'D'">
|
||||
{{user.status === 'E' ? 'Enabled' : 'Disabled'}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ug-card-item__body">
|
||||
<div class="ug-kv"><span>ID</span><strong>{{user.usrGrp}}</strong></div>
|
||||
<div class="ug-kv"><span>Desc</span><strong>{{user.groupDesc}}</strong></div>
|
||||
<div class="ug-kv"><span>Level</span><strong>{{user.groupLevel}}</strong></div>
|
||||
<div class="ug-kv"><span>Updated</span><strong>{{user.updateDateFormated}}</strong></div>
|
||||
</div>
|
||||
<div class="ug-card-item__footer">
|
||||
<!-- <button class="ug-btn ug-btn-sm ug-btn-outline" *ngIf="medit == 'true' || medit == true" (click)="goToEdit(user)">
|
||||
<clr-icon shape="edit"></clr-icon> Edit
|
||||
</button> -->
|
||||
<button class="ug-btn ug-btn-sm ug-btn-outline" (click)="goToEdit(user)">
|
||||
<clr-icon shape="edit"></clr-icon> Edit
|
||||
</button>
|
||||
<button class="ug-btn ug-btn-sm ug-btn-error" (click)="onDelete(user)">
|
||||
<clr-icon shape="trash"></clr-icon> Delete
|
||||
<button class="btn btn-primary" (click)="csvImport()">{{ 'IMPORT' | translate }}</button>
|
||||
<button class="btn btn-outline" (click)="onExport()">
|
||||
<clr-icon shape="export"></clr-icon> {{ 'EXPORT_XLSX' | translate }}
|
||||
</button>
|
||||
<button id="add" class="btn btn-primary" *ngIf="mcreate == 'true'" (click)="goToAdd()">
|
||||
<clr-icon shape="plus"></clr-icon> {{ 'ADD' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-datagrid [clrDgLoading]="loading">
|
||||
<clr-dg-placeholder> <ng-template #loadingSpinner><clr-spinner>{{'LOADING' | translate}} ... </clr-spinner></ng-template>
|
||||
<div *ngIf="error;else loadingSpinner">{{error}}</div></clr-dg-placeholder>
|
||||
|
||||
<clr-dg-column [clrDgField]="'usrGrp'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'USERGROUP_NO' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'groupName'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'GROUP_NAME' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'groupDesc'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'GROUP_DESC' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'groupLevel'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'GROUP_LEVEL' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'status'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'STATUS' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'updateDateFormated'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'UPDATED_DATE' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let user of givendata;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell>{{user.usrGrp}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.groupName}}</clr-dg-cell>
|
||||
<clr-dg-cell >{{user.groupDesc}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.groupLevel}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.status}}</clr-dg-cell>
|
||||
<!-- <clr-dg-cell>{{user.usrGrp}}</clr-dg-cell> -->
|
||||
<clr-dg-cell>{{user.updateDateFormated}}</clr-dg-cell>
|
||||
|
||||
<clr-dg-action-overflow>
|
||||
|
||||
<button class="action-item" *ngIf="medit == 'true'" (click)="goToEdit(user)"> {{'EDIT' | translate}}</button>
|
||||
<button class="action-item" (click)="onDelete(user)">{{'DELETE'|translate}}<clr-icon shape="trash" class="is-error"></clr-icon></button>
|
||||
</clr-dg-action-overflow>
|
||||
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">username</td>
|
||||
<td class="td-content">{{user.groupName}}</td>
|
||||
</tr>
|
||||
|
||||
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Add User Group Maintenance</h3>
|
||||
<div class="modal-body">
|
||||
<form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
|
||||
|
||||
<div class="ug-form-group">
|
||||
<label for="groupName" class="ug-form-label">User Group<span class="required-field">*</span></label>
|
||||
<input type="text" id="groupName" class="ug-form-input" formControlName="groupName">
|
||||
<div *ngIf="submitted && entryForm.controls.groupName.errors" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls.groupName.errors.required">*This field is Required</div>
|
||||
</div>
|
||||
<form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="name">User Group<span class="required-field">*</span></label>
|
||||
<input type="text" class="clr-input" formControlName="groupName">
|
||||
<div *ngIf="submitted && entryForm.controls.groupName.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.groupName.errors.required" class="error_mess">*This field is Required</div>
|
||||
</div>
|
||||
|
||||
<div class="ug-form-group">
|
||||
<label for="groupDesc" class="ug-form-label">Description<span class="required-field">*</span></label>
|
||||
<input type="text" id="groupDesc" class="ug-form-input" formControlName="groupDesc">
|
||||
<div *ngIf="submitted && entryForm.controls.groupDesc.errors" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls.groupDesc.errors.required">*This field is Required</div>
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="name">Description<span class="required-field">*</span></label>
|
||||
<input type="text" class="clr-input" formControlName="groupDesc">
|
||||
<div *ngIf="submitted && entryForm.controls.groupDesc.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.groupDesc.errors.required" class="error_mess">*This field is Required</div>
|
||||
</div>
|
||||
|
||||
<div class="ug-form-group">
|
||||
<label for="status" class="ug-form-label">Status<span class="required-field">*</span></label>
|
||||
<select id="status" class="ug-form-select" formControlName="status">
|
||||
<option value="">Select Status</option>
|
||||
<option value="E">Enable</option>
|
||||
<option value="D">Disable</option>
|
||||
</select>
|
||||
<div *ngIf="submitted && entryForm.controls.status.errors" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls.status.errors.required">*This field is Required</div>
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Status<span class="required-field">*</span></label>
|
||||
<select id="" formControlName="status">
|
||||
<option value="E">Enable</option>
|
||||
<option value="D">Disable</option></select>
|
||||
<div *ngIf="submitted && entryForm.controls.status.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.status.errors.required" class="error_mess">*This field is Required</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Group Level<span class="required-field">*</span></label>
|
||||
<select id="" formControlName="groupLevel">
|
||||
<option >10</option>
|
||||
<option >20</option>
|
||||
<option >30</option>
|
||||
<option >40</option>
|
||||
<option>50</option>
|
||||
</select>
|
||||
<div *ngIf="submitted && entryForm.controls.groupLevel.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.groupLevel.errors.required" class="error_mess">*This field is Required</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ug-form-group">
|
||||
<label for="groupLevel" class="ug-form-label">Group Level<span class="required-field">*</span></label>
|
||||
<select id="groupLevel" class="ug-form-select" formControlName="groupLevel">
|
||||
<option value="">Select Level</option>
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
<option value="50">50</option>
|
||||
</select>
|
||||
<div *ngIf="submitted && entryForm.controls.groupLevel.errors" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls.groupLevel.errors.required">*This field is Required</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="ug-btn ug-btn-outline" (click)="modalAdd = false">Cancel</button>
|
||||
<button type="submit" class="ug-btn ug-btn-primary">ADD</button>
|
||||
</div>
|
||||
</form>
|
||||
<button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" >ADD</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</clr-modal>
|
||||
|
||||
<clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Update User Group Maintenance</h3>
|
||||
|
||||
|
||||
<div class="modal-body" *ngIf="rowSelected.usrGrp">
|
||||
|
||||
<div class="ug-form-group">
|
||||
<label for="editUsrGrp" class="ug-form-label">User Group ID</label>
|
||||
<input type="text" id="editUsrGrp" class="ug-form-input" [(ngModel)]="rowSelected.usrGrp" name="usrGrp" disabled>
|
||||
</div>
|
||||
|
||||
<div class="ug-form-group">
|
||||
<label for="editGroupName" class="ug-form-label">User Group<span class="required-field">*</span></label>
|
||||
<input type="text" id="editGroupName" class="ug-form-input" [(ngModel)]="rowSelected.groupName" name="groupName">
|
||||
</div>
|
||||
|
||||
<div class="ug-form-group">
|
||||
<label for="editGroupDesc" class="ug-form-label">Description<span class="required-field">*</span></label>
|
||||
<input type="text" id="editGroupDesc" class="ug-form-input" [(ngModel)]="rowSelected.groupDesc" name="groupDesc">
|
||||
</div>
|
||||
|
||||
<div class="ug-form-group">
|
||||
<label for="editStatus" class="ug-form-label">Status<span class="required-field">*</span></label>
|
||||
<select id="editStatus" class="ug-form-select" [(ngModel)]="rowSelected.status" name="status">
|
||||
<option value="E">Enable</option>
|
||||
<option value="D">Disable</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="ug-form-group">
|
||||
<label for="editGroupLevel" class="ug-form-label">Group Level<span class="required-field">*</span></label>
|
||||
<select id="editGroupLevel" class="ug-form-select" [(ngModel)]="rowSelected.groupLevel" name="groupLevel">
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
<option value="50">50</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="ug-btn ug-btn-outline" (click)="modaledit = false">Cancel</button>
|
||||
<button type="submit" (click)="onUpdate(rowSelected.usrGrp)" class="ug-btn ug-btn-primary">Update</button>
|
||||
</div>
|
||||
<h2 class="heading">{{rowSelected.usrGrp}}</h2>
|
||||
<form (ngSubmit)="onUpdate(rowSelected.usrGrp)">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="name">User Group<span class="required-field">*</span></label>
|
||||
<input type="text" class="clr-input" [(ngModel)]="rowSelected.groupName" name="groupName">
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="name">Description<span class="required-field">*</span></label>
|
||||
<input type="text" class="clr-input" [(ngModel)]="rowSelected.groupDesc" name="groupDesc">
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Status<span class="required-field">*</span></label>
|
||||
<select id="" [(ngModel)]="rowSelected.status" name="status">
|
||||
<option value="E">Enable</option>
|
||||
<option value="D">Disable</option></select>
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Group Level<span class="required-field">*</span></label>
|
||||
<select id="" [(ngModel)]="rowSelected.groupLevel" name="groupLevel">
|
||||
<option >10</option>
|
||||
<option >20</option>
|
||||
<option >30</option>
|
||||
<option >40</option>
|
||||
<option>50</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" >Update</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
</clr-modal>
|
||||
<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
|
||||
<div class="modal-body" *ngIf="rowSelected.usrGrp">
|
||||
<div class="ug-delete-header">
|
||||
<div class="ug-delete-icon">
|
||||
<clr-icon shape="exclamation-triangle" size="48"></clr-icon>
|
||||
</div>
|
||||
<h1 class="ug-delete-title">Are You Sure Want to Delete?</h1>
|
||||
<p class="ug-delete-subtitle">This action cannot be undone</p>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-details">
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">User Group ID:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.usrGrp}}</span>
|
||||
</div>
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Group Name:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.groupName}}</span>
|
||||
</div>
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Description:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.groupDesc}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h1 class="delete">Are You Sure Want to delete?</h1>
|
||||
<h2 class="heading">{{rowSelected.usrGrp}}</h2>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="ug-btn ug-btn-outline" (click)="modaldelete = false">Cancel</button>
|
||||
<button type="submit" (click)="delete(rowSelected.usrGrp)" class="ug-btn ug-btn-error">Delete</button>
|
||||
<button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
|
||||
<button type="submit" (click)="delete(rowSelected.usrGrp)" class="btn btn-primary" >Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
|
||||
|
||||
<clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
|
||||
<h3 class="modal-title">Import File</h3>
|
||||
<div class="modal-body">
|
||||
<div class="ug-form-group">
|
||||
<label class="ug-form-label">Select CSV File</label>
|
||||
<input type="file" name="file" class="ug-file-input" (change)="selectFile($event)"
|
||||
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
|
||||
</div>
|
||||
<input type="file" name="file" class="file" (change)="selectFile($event)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="ug-btn ug-btn-outline" type="button" (click)="modalCsv = false">Cancel</button>
|
||||
<button class="ug-btn ug-btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
|
||||
<button class="btn btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
|
||||
</div>
|
||||
</clr-modal>
|
||||
@@ -1,748 +1,8 @@
|
||||
@import '../../../../../styles.scss';
|
||||
|
||||
// Import design tokens
|
||||
@import '../../../../../styles/design-tokens';
|
||||
|
||||
// User Group Maintenance Styles
|
||||
.ug-hero {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24px 32px;
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
font-family: var(--theme-font-primary);
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
clr-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-family: var(--theme-font-secondary);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
@import '../../../../../styles1.scss';
|
||||
input.ng-invalid.ng-touched {
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.ug-btn-text {
|
||||
margin-left: 8px;
|
||||
.error_mess {
|
||||
color: red;
|
||||
}
|
||||
|
||||
// Modern Button Styles using ThemeService
|
||||
.ug-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease-out;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: var(--theme-font-primary);
|
||||
z-index: 1;
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--theme-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.ug-btn-sm {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&.ug-btn-md {
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&.ug-btn-lg {
|
||||
padding: 16px 24px;
|
||||
font-size: 16px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
// Variants
|
||||
&.ug-btn-primary {
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
&.ug-btn-secondary {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
&.ug-btn-outline {
|
||||
background: transparent;
|
||||
color: var(--theme-secondary);
|
||||
border-color: var(--theme-secondary);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
|
||||
border-color: var(--theme-secondary);
|
||||
color: var(--theme-secondary);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
&.ug-btn-error {
|
||||
background: var(--theme-error, #ef4444);
|
||||
color: white;
|
||||
border-color: var(--theme-error, #ef4444);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-error-dark, #dc2626);
|
||||
border-color: var(--theme-error-dark, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.ug-btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--theme-text-secondary);
|
||||
border-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ug-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
background: var(--theme-surface);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&__left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.ug-search {
|
||||
position: relative;
|
||||
max-width: 400px;
|
||||
|
||||
clr-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #9ca3af;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
padding: 12px 12px 12px 40px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: all 200ms ease-out;
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ug-view-toggle {
|
||||
display: flex;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
.ug-btn {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text-secondary);
|
||||
|
||||
&:first-child {
|
||||
border-right: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
&.ug-btn-primary {
|
||||
background: var(--theme-primary);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modern Table Styles
|
||||
.ug-grid {
|
||||
background: var(--theme-surface);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
margin-bottom: 24px;
|
||||
|
||||
::ng-deep .datagrid {
|
||||
.datagrid-head {
|
||||
background: var(--theme-background);
|
||||
|
||||
.datagrid-column {
|
||||
padding: 16px 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
}
|
||||
|
||||
.datagrid-row {
|
||||
transition: background-color 150ms ease-out;
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.datagrid-cell {
|
||||
padding: 16px 24px;
|
||||
font-size: 14px;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
|
||||
.datagrid-footer {
|
||||
background: var(--theme-background);
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ug-grid-footer {
|
||||
background: var(--theme-background);
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
// Modern Card Styles - More beautiful design
|
||||
.ug-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.ug-card-item {
|
||||
background: var(--theme-surface);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: var(--theme-border-radius); // Using theme variable
|
||||
box-shadow: var(--theme-shadow); // Using theme variable
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
border-color: rgba(14, 165, 233, 0.3); // var(--theme-primary) with 30% opacity
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), transparent); // var(--theme-primary) with 10% opacity
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
clr-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--theme-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
flex: 1 1 auto;
|
||||
font-size: 18px;
|
||||
color: var(--theme-text);
|
||||
max-width: 60%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
margin-left: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border-radius: 9999px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 16px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
background: var(--theme-background);
|
||||
}
|
||||
}
|
||||
|
||||
.ug-kv {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
|
||||
span {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--theme-text);
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
max-width: 60%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
// Theme the card footer buttons
|
||||
.ug-card-item__footer .ug-btn {
|
||||
border-radius: 10px;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ug-card-item__footer .ug-btn.ug-btn-outline {
|
||||
border: 1px solid var(--theme-secondary);
|
||||
color: var(--theme-secondary);
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
|
||||
border-color: var(--theme-secondary);
|
||||
color: var(--theme-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.ug-card-item__footer .ug-btn.ug-btn-error {
|
||||
background: var(--theme-error, #ef4444);
|
||||
color: #fff;
|
||||
border-color: var(--theme-error, #ef4444);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-error-dark, #dc2626);
|
||||
border-color: var(--theme-error-dark, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
// Table view action buttons
|
||||
.ug-action-item {
|
||||
@extend .ug-btn;
|
||||
@extend .ug-btn-ghost;
|
||||
@extend .ug-btn-sm;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 4px;
|
||||
text-align: left;
|
||||
|
||||
clr-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&.ug-btn-error {
|
||||
color: var(--theme-error, #ef4444);
|
||||
|
||||
&:hover {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure action overflow is visible
|
||||
::ng-deep .datagrid-action-overflow {
|
||||
button.action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 8px 12px;
|
||||
|
||||
clr-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Status Badges
|
||||
.ug-status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border-radius: 9999px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.ug-status-enabled {
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.ug-status-disabled {
|
||||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
// Form Styles
|
||||
.ug-form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ug-form-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--theme-text);
|
||||
margin-bottom: 8px;
|
||||
font-family: var(--theme-font-primary);
|
||||
}
|
||||
|
||||
.ug-form-input, .ug-form-select {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--theme-text);
|
||||
background: var(--theme-surface);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
transition: all 200ms ease-out;
|
||||
margin-bottom: 0;
|
||||
font-family: var(--theme-font-primary);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: var(--theme-background);
|
||||
color: var(--theme-text-secondary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: #ef4444;
|
||||
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.ug-form-select {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
||||
background-position: right 12px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px 12px;
|
||||
padding-right: 40px;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.ug-form-error {
|
||||
color: #ef4444;
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.required-field {
|
||||
color: #ef4444;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.ug-file-input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
|
||||
&::file-selector-button {
|
||||
@extend .ug-btn;
|
||||
@extend .ug-btn-secondary;
|
||||
margin-right: 12px;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Delete Modal Styles
|
||||
.ug-delete-header {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.ug-delete-icon {
|
||||
color: #ef4444;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.ug-delete-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-text);
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.ug-delete-subtitle {
|
||||
font-size: 16px;
|
||||
color: var(--theme-text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ug-delete-details {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.ug-delete-detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ug-delete-detail-label {
|
||||
font-weight: 500;
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
.ug-delete-detail-value {
|
||||
font-weight: 600;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.delete {
|
||||
color: #ef4444;
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.heading {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
color: var(--theme-text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// Modal Header
|
||||
::ng-deep .modal-header {
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-radius: 16px 16px 0 0 !important;
|
||||
padding: 20px 24px !important;
|
||||
|
||||
.modal-title {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modal Body
|
||||
::ng-deep .modal-body {
|
||||
padding: 24px !important;
|
||||
}
|
||||
|
||||
// Modal Footer
|
||||
::ng-deep .modal-footer {
|
||||
padding: 20px 24px !important;
|
||||
background: var(--theme-background);
|
||||
border-radius: 0 0 16px 16px !important;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@media (max-width: 768px) {
|
||||
.ug-hero {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.ug-toolbar {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.ug-search {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ug-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.ug-card-item {
|
||||
&__header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
&__icon {
|
||||
margin-right: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ExcelService } from '../../../../services/excel.service';
|
||||
@@ -8,15 +8,12 @@ import { ToastrService } from 'ngx-toastr';
|
||||
import { MenuGroupService } from 'src/app/services/admin/menu-group.service';
|
||||
import { CsvService } from 'src/app/services/csv.service';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { ThemeService } from 'src/app/services/theme.service';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-usergrpmaintenance',
|
||||
templateUrl: './usergrpmaintenance.component.html',
|
||||
styleUrls: ['./usergrpmaintenance.component.scss']
|
||||
})
|
||||
export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
|
||||
export class UsergrpmaintenanceComponent implements OnInit {
|
||||
loading = false;
|
||||
public entryForm: FormGroup;
|
||||
givendata;
|
||||
@@ -26,13 +23,10 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
|
||||
modaledit=false;
|
||||
modaldelete=false;
|
||||
rowSelected :any= {};
|
||||
mcreate: string | boolean = false;
|
||||
medit: string | boolean = false;
|
||||
showdata: any;
|
||||
mcreate;
|
||||
medit;
|
||||
showdata;
|
||||
submitted=false;
|
||||
filterText: string = '';
|
||||
viewMode: 'table' | 'cards' = 'cards';
|
||||
private themeSubscription: Subscription;
|
||||
|
||||
constructor(
|
||||
private excel: ExcelService,
|
||||
@@ -44,32 +38,21 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
|
||||
private mainservice:UsergrpmaintainceService,
|
||||
private csvService: CsvService,
|
||||
private translate: TranslateService,
|
||||
private themeService: ThemeService,
|
||||
) { }
|
||||
|
||||
switchLanguage(language: string) {
|
||||
this.translate.use(language);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.themeSubscription = this.themeService.currentTheme$.subscribe(() => {
|
||||
// Theme changes will automatically update CSS variables
|
||||
// This triggers a re-render of themed elements
|
||||
});
|
||||
|
||||
this.showdata = this.menuGroupService.getdata();
|
||||
console.log('Showdata:', this.showdata);
|
||||
if (this.showdata) {
|
||||
// Handle both string and boolean values
|
||||
this.mcreate = this.showdata.mcreate === 'true' || this.showdata.mcreate === true ? true : false;
|
||||
this.medit = this.showdata.medit === 'true' || this.showdata.medit === true ? true : false;
|
||||
console.log('MCREATE:', this.mcreate);
|
||||
console.log('MEDIT:', this.medit);
|
||||
}
|
||||
console.log(this.showdata);
|
||||
this.mcreate=this.showdata.mcreate;
|
||||
console.log(this.mcreate);
|
||||
this.medit=this.showdata.medit
|
||||
console.log(this.medit);
|
||||
|
||||
this.mainservice.getAll().subscribe((data) => {
|
||||
console.log('Data received:', data);
|
||||
this.givendata = data || [];
|
||||
console.log(data);
|
||||
this.givendata = data;
|
||||
if(this.givendata.length==0){
|
||||
this.error="No data Available";
|
||||
console.log(this.error)
|
||||
@@ -89,30 +72,6 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (this.themeSubscription) {
|
||||
this.themeSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
get totalGroups(): number {
|
||||
const list: any[] = (this.givendata as unknown as any[]) || [];
|
||||
return list.length;
|
||||
}
|
||||
|
||||
|
||||
get filteredGroups(): any[] {
|
||||
const items: any[] = (this.givendata as unknown as any[]) || [];
|
||||
const text = (this.filterText || '').toLowerCase();
|
||||
if (!text) { return items; }
|
||||
return items.filter(g => (
|
||||
(g?.groupName || '').toLowerCase().includes(text) ||
|
||||
(g?.groupDesc || '').toLowerCase().includes(text)
|
||||
));
|
||||
}
|
||||
|
||||
setViewMode(mode: 'table' | 'cards') { this.viewMode = mode; }
|
||||
onExport() {
|
||||
this.excel.exportAsExcelFile(this.givendata, 'user_',
|
||||
moment().format('YYYYMMDD_HHmmss'))
|
||||
@@ -122,8 +81,7 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
|
||||
//this.router.navigate(["../usermaintanceadd"],{relativeTo:this.route});
|
||||
}
|
||||
goToEdit(row){
|
||||
console.log('Edit clicked for row:', row);
|
||||
this.rowSelected = {...row}; // Create a copy to avoid reference issues
|
||||
this.rowSelected = row;
|
||||
this.modaledit=true;
|
||||
//this.router.navigate(["../usermaintanceedit/"+ id], { relativeTo: this.route });
|
||||
}
|
||||
@@ -177,8 +135,7 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
|
||||
// }
|
||||
}
|
||||
onDelete(row) {
|
||||
console.log('Delete clicked for row:', row);
|
||||
this.rowSelected = {...row}; // Create a copy to avoid reference issues
|
||||
this.rowSelected = row;
|
||||
this.modaldelete=true;
|
||||
}
|
||||
|
||||
@@ -243,4 +200,4 @@ export class UsergrpmaintenanceComponent implements OnInit, OnDestroy {
|
||||
this.csvService.downloadCsvs(this.ttype);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,202 +1,124 @@
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
|
||||
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong">
|
||||
<li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
|
||||
<li><a href="javascript://"><clr-icon shape="lock"></clr-icon>{{ 'SECURITY' | translate }}</a></li>
|
||||
<li><a href="javascript://">{{'USER_MAINTENANCE'| translate}}</a></li>
|
||||
|
||||
</ol>
|
||||
|
||||
<section class="um-hero">
|
||||
<div class="um-hero__content">
|
||||
<div class="um-hero__icon"><clr-icon shape="user"></clr-icon></div>
|
||||
<div>
|
||||
<h2 class="um-hero__title">{{'USER_MAINTENANCE'| translate}}</h2>
|
||||
<p class="um-hero__subtitle">{{ 'SECURITY' | translate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="um-hero__actions">
|
||||
<button class="um-btn um-btn-secondary" (click)="downloadFiles()">
|
||||
<clr-icon shape="download"></clr-icon>
|
||||
<span class="um-btn-text">{{ 'DOWNLOAD_TEMPLATE' | translate }}</span>
|
||||
</button>
|
||||
<button class="um-btn um-btn-secondary" (click)="csvImport()">
|
||||
<clr-icon shape="import"></clr-icon>
|
||||
<span class="um-btn-text">{{ 'IMPORT' | translate }}</span>
|
||||
</button>
|
||||
<button class="um-btn um-btn-secondary" (click)="onExport()">
|
||||
<clr-icon shape="export"></clr-icon>
|
||||
<span class="um-btn-text">{{ 'EXPORT_XLSX' | translate }}</span>
|
||||
</button>
|
||||
<button id="add" class="um-btn um-btn-primary" (click)="goToAdd()">
|
||||
<clr-icon shape="plus"></clr-icon>
|
||||
<span class="um-btn-text">{{ 'ADD' | translate }}</span>
|
||||
</button>
|
||||
<!-- <button id="add" class="um-btn um-btn-primary" *ngIf="mcreate == 'true' || mcreate == true" (click)="goToAdd()">
|
||||
<clr-icon shape="plus"></clr-icon>
|
||||
<span class="um-btn-text">{{ 'ADD' | translate }}</span>
|
||||
</button> -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="um-toolbar">
|
||||
<div class="um-toolbar__left">
|
||||
<div class="um-search">
|
||||
<clr-icon shape="search"></clr-icon>
|
||||
<input class="um-search__input" type="text" [placeholder]="'SEARCH' | translate" [(ngModel)]="filterText" />
|
||||
</div>
|
||||
<div class="dg-wrapper">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col">
|
||||
<h3>{{'USER_MAINTENANCE'| translate}} </h3>
|
||||
</div>
|
||||
<div class="um-toolbar__right">
|
||||
<div class="um-view-toggle">
|
||||
<button class="um-btn um-btn-sm" [class.um-btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
|
||||
<clr-icon shape="view-cards"></clr-icon>
|
||||
<div class="clr-col" style="text-align: right;">
|
||||
<div class="btn-group">
|
||||
<button class="btn text-dark" (click)="downloadFiles()"><b>{{ 'DOWNLOAD_TEMPLATE' | translate }}</b></button>
|
||||
|
||||
</div>
|
||||
<button class="btn btn-primary" (click)="csvImport()">{{ 'IMPORT' | translate }}</button>
|
||||
<button class="btn btn-outline" (click)="onExport()">
|
||||
<clr-icon shape="export"></clr-icon> {{ 'EXPORT_XLSX' | translate }}
|
||||
</button>
|
||||
<button class="um-btn um-btn-sm" [class.um-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
|
||||
<clr-icon shape="table"></clr-icon>
|
||||
<button id="add" class="btn btn-primary" *ngIf="mcreate == 'true'" (click)="goToAdd()">
|
||||
<clr-icon shape="plus"></clr-icon> {{ 'ADD' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-datagrid [clrDgLoading]="loading">
|
||||
<clr-dg-placeholder >
|
||||
<ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
|
||||
<div *ngIf="error;else loadingSpinner">{{error}}</div>
|
||||
</clr-dg-placeholder>
|
||||
<!-- <clr-dg-placeholder *ngIf="!loading1;" > <clr-spinner>not</clr-spinner></clr-dg-placeholder>
|
||||
<ng-template #other_content style="text-align: center;">Data Not found...</ng-template> -->
|
||||
|
||||
<clr-dg-column [clrDgField]="'userId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
User Id
|
||||
</ng-container></clr-dg-column>
|
||||
<!-- <clr-dg-column [clrDgField]="'username'" style="width: 300px;"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
User Name
|
||||
</ng-container></clr-dg-column> -->
|
||||
<clr-dg-column [clrDgField]="'fullName'" style="width: 200px;"><ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Full Name
|
||||
</ng-container></clr-dg-column >
|
||||
<clr-dg-column [clrDgField]="'email'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Email
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'usrGrpName'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
User Group Name
|
||||
</ng-container></clr-dg-column>
|
||||
<!-- <clr-dg-column [clrDgField]="'customerNumer'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Customer Number
|
||||
</ng-container></clr-dg-column> -->
|
||||
|
||||
|
||||
|
||||
<clr-dg-row *clrDgItems="let user of givendata;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell>{{user.userId}}</clr-dg-cell>
|
||||
<!-- <clr-dg-cell>{{user.username}}</clr-dg-cell> -->
|
||||
<clr-dg-cell >{{user.fullName}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.email}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.usrGrpName}}</clr-dg-cell>
|
||||
<!-- <clr-dg-cell>{{user.customerNumer}}</clr-dg-cell> -->
|
||||
|
||||
|
||||
<clr-dg-action-overflow>
|
||||
|
||||
<button class="action-item" *ngIf="medit == 'true'" (click)="goToEdit(user.userId)">Edit</button>
|
||||
<button class="action-item" (click)="onDelete(user)">Delete<cds-icon shape="trash" class="is-error"></cds-icon></button>
|
||||
</clr-dg-action-overflow>
|
||||
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">username</td>
|
||||
<td class="td-content">{{user.username}}</td>
|
||||
</tr>
|
||||
|
||||
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<clr-datagrid class="um-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'">
|
||||
<clr-dg-placeholder>
|
||||
<ng-template #loadingSpinner>
|
||||
<clr-spinner>{{'LOADING' | translate}} ... </clr-spinner>
|
||||
</ng-template>
|
||||
<div *ngIf="error;else loadingSpinner">{{error}}</div>
|
||||
</clr-dg-placeholder>
|
||||
|
||||
<clr-dg-column [clrDgField]="'userId'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'USER_ID' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'fullName'" style="width: 200px;">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'FULL_NAME' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'email'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'EMAIL' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'usrGrpName'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'USER_GROUP_NAME' | translate}}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let user of filteredUsers;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell>{{user.userId}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.fullName}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.email}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.usrGrpName}}</clr-dg-cell>
|
||||
|
||||
<clr-dg-action-overflow>
|
||||
<!-- <button class="um-action-item" *ngIf="medit == 'true' || medit == true" (click)="goToEdit(user.userId)">
|
||||
<clr-icon shape="edit"></clr-icon>
|
||||
{{'EDIT' | translate}}
|
||||
</button> -->
|
||||
<button class="um-action-item" (click)="goToEdit(user.userId)">
|
||||
<clr-icon shape="edit"></clr-icon>
|
||||
{{'EDIT' | translate}}
|
||||
</button>
|
||||
<button class="um-action-item um-btn-error" (click)="onDelete(user)">
|
||||
<clr-icon shape="trash"></clr-icon>
|
||||
{{'DELETE'|translate}}
|
||||
</button>
|
||||
</clr-dg-action-overflow>
|
||||
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">username</td>
|
||||
<td class="td-content">{{user.username}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer class="um-grid-footer">
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
|
||||
<div class="um-cards" *ngIf="viewMode==='cards'">
|
||||
<div class="um-card-item" *ngFor="let user of filteredUsers; let i = index">
|
||||
<div class="um-card-item__header">
|
||||
<div class="um-card-item__icon"><clr-icon shape="user"></clr-icon></div>
|
||||
<div class="um-card-item__title">{{user.fullName}}</div>
|
||||
<div class="um-card-item__badge">ID: {{user.userId}}</div>
|
||||
</div>
|
||||
<div class="um-card-item__body">
|
||||
<div class="um-kv"><span>{{'EMAIL' | translate}}</span><strong>{{user.email}}</strong></div>
|
||||
<div class="um-kv"><span>{{'GROUP' | translate}}</span><strong>{{user.usrGrpName}}</strong></div>
|
||||
</div>
|
||||
<div class="um-card-item__footer">
|
||||
<!-- <button class="um-btn um-btn-sm um-btn-outline" *ngIf="medit == 'true' || medit == true"
|
||||
(click)="goToEdit(user.userId)">
|
||||
<clr-icon shape="edit"></clr-icon> {{'EDIT' | translate}}
|
||||
</button> -->
|
||||
|
||||
<button class="um-btn um-btn-sm um-btn-outline" (click)="goToEdit(user.userId)">
|
||||
<clr-icon shape="edit"></clr-icon> {{'EDIT' | translate}}
|
||||
</button>
|
||||
<button class="um-btn um-btn-sm um-btn-error" (click)="onDelete(user)">
|
||||
<clr-icon shape="trash"></clr-icon> {{'DELETE' | translate}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
|
||||
<div class="modal-body" *ngIf="rowSelected.userId">
|
||||
<div class="um-delete-header">
|
||||
<div class="um-delete-icon">
|
||||
<clr-icon shape="exclamation-triangle" size="48"></clr-icon>
|
||||
</div>
|
||||
<h1 class="um-delete-title">{{'ARE_YOU_SURE_WANT_TO_DELETE' | translate}}?</h1>
|
||||
<p class="um-delete-subtitle">{{'THIS_ACTION_CANNOT_BE_UNDONE' | translate}}</p>
|
||||
</div>
|
||||
|
||||
<div class="um-delete-details">
|
||||
<div class="um-delete-detail-item">
|
||||
<span class="um-delete-detail-label">{{'USER_ID' | translate}}:</span>
|
||||
<span class="um-delete-detail-value">{{rowSelected.userId}}</span>
|
||||
</div>
|
||||
<div class="um-delete-detail-item">
|
||||
<span class="um-delete-detail-label">{{'FULL_NAME' | translate}}:</span>
|
||||
<span class="um-delete-detail-value">{{rowSelected.fullName}}</span>
|
||||
</div>
|
||||
<div class="um-delete-detail-item">
|
||||
<span class="um-delete-detail-label">{{'EMAIL' | translate}}:</span>
|
||||
<span class="um-delete-detail-value">{{rowSelected.email}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="delete">Are You Sure Want to delete?</h1>
|
||||
<h2 class="heading">{{rowSelected.userId}}</h2>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="um-btn um-btn-outline" (click)="modaldelete = false">{{'CANCEL' |
|
||||
translate}}</button>
|
||||
<button type="submit" (click)="delete(rowSelected.userId)" class="um-btn um-btn-error">{{'DELETE' |
|
||||
translate}}</button>
|
||||
<button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
|
||||
<button type="submit" (click)="delete(rowSelected.userId)" class="btn btn-primary" >Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
|
||||
<clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
|
||||
<h3 class="modal-title">{{'IMPORT_FILE' | translate}}</h3>
|
||||
<h3 class="modal-title">Import File</h3>
|
||||
<div class="modal-body">
|
||||
<div class="um-form-group">
|
||||
<label class="um-form-label">{{'SELECT_CSV_FILE' | translate}}</label>
|
||||
<input type="file" name="file" class="um-file-input" (change)="selectFile($event)"
|
||||
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
|
||||
</div>
|
||||
<input type="file" name="file" class="file" (change)="selectFile($event)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="um-btn um-btn-outline" type="button" (click)="modalCsv = false">{{'CANCEL' | translate}}</button>
|
||||
<button class="um-btn um-btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">{{'IMPORT' |
|
||||
translate}}</button>
|
||||
<button class="btn btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
|
||||
</div>
|
||||
</clr-modal>
|
||||
</clr-modal>
|
||||
|
||||
@@ -1,656 +1,4 @@
|
||||
@import '../../../../../styles.scss';
|
||||
|
||||
// Import design tokens
|
||||
@import '../../../../../styles/design-tokens';
|
||||
|
||||
.delete, .heading {
|
||||
.delete,.heading{
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
|
||||
// Modern User Maintenance Styles
|
||||
.um-hero {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24px 32px;
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
font-family: var(--theme-font-primary);
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
clr-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-family: var(--theme-font-secondary);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.um-btn-text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
// Modern Button Styles using ThemeService
|
||||
.um-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease-out;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: var(--theme-font-primary);
|
||||
z-index: 1;
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--theme-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.um-btn-sm {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&.um-btn-md {
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&.um-btn-lg {
|
||||
padding: 16px 24px;
|
||||
font-size: 16px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
// Variants
|
||||
&.um-btn-primary {
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
&.um-btn-secondary {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
&.um-btn-outline {
|
||||
background: transparent;
|
||||
color: var(--theme-secondary);
|
||||
border-color: var(--theme-secondary);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
|
||||
border-color: var(--theme-secondary);
|
||||
color: var(--theme-secondary);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
&.um-btn-error {
|
||||
background: var(--theme-error, #ef4444);
|
||||
color: white;
|
||||
border-color: var(--theme-error, #ef4444);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-error-dark, #dc2626);
|
||||
border-color: var(--theme-error-dark, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.um-btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--theme-text-secondary);
|
||||
border-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.um-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
background: var(--theme-surface);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&__left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.um-search {
|
||||
position: relative;
|
||||
max-width: 400px;
|
||||
|
||||
clr-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #9ca3af;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
padding: 12px 12px 12px 40px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: all 200ms ease-out;
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.um-view-toggle {
|
||||
display: flex;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
.um-btn {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text-secondary);
|
||||
|
||||
&:first-child {
|
||||
border-right: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
&.um-btn-primary {
|
||||
background: var(--theme-primary);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modern Table Styles
|
||||
.um-grid {
|
||||
background: var(--theme-surface);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
margin-bottom: 24px;
|
||||
|
||||
::ng-deep .datagrid {
|
||||
.datagrid-head {
|
||||
background: var(--theme-background);
|
||||
|
||||
.datagrid-column {
|
||||
padding: 16px 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
}
|
||||
|
||||
.datagrid-row {
|
||||
transition: background-color 150ms ease-out;
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.datagrid-cell {
|
||||
padding: 16px 24px;
|
||||
font-size: 14px;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
|
||||
.datagrid-footer {
|
||||
background: var(--theme-background);
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.um-grid-footer {
|
||||
background: var(--theme-background);
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
// Modern Card Styles - More beautiful design
|
||||
.um-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.um-card-item {
|
||||
background: var(--theme-surface);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: var(--theme-border-radius); // Using theme variable
|
||||
box-shadow: var(--theme-shadow); // Using theme variable
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
border-color: rgba(14, 165, 233, 0.3); // var(--theme-primary) with 30% opacity
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), transparent); // var(--theme-primary) with 10% opacity
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
clr-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--theme-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
flex: 1 1 auto;
|
||||
font-size: 18px;
|
||||
color: var(--theme-text);
|
||||
max-width: 60%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
margin-left: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border-radius: 9999px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
background: linear-gradient(135deg, rgba(100, 116, 139, 0.1) 0%, rgba(100, 116, 139, 0.05) 100%);
|
||||
color: var(--theme-secondary);
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 16px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
background: var(--theme-background);
|
||||
}
|
||||
}
|
||||
|
||||
.um-kv {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
|
||||
span {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--theme-text);
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
max-width: 60%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
// Theme the card footer buttons
|
||||
.um-card-item__footer .um-btn {
|
||||
border-radius: 10px;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.um-card-item__footer .um-btn.um-btn-outline {
|
||||
border: 1px solid var(--theme-secondary);
|
||||
color: var(--theme-secondary);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.um-card-item__footer .um-btn.um-btn-outline:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.um-card-item__footer .um-btn.um-btn-error {
|
||||
background: var(--theme-error, #ef4444);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.um-card-item__footer .um-btn.um-btn-error:hover {
|
||||
background: var(--theme-error-dark, #dc2626);
|
||||
}
|
||||
|
||||
// Action items in table
|
||||
.um-action-item {
|
||||
@extend .um-btn;
|
||||
@extend .um-btn-ghost;
|
||||
@extend .um-btn-sm;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 4px;
|
||||
text-align: left;
|
||||
|
||||
clr-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&.um-btn-error {
|
||||
color: var(--theme-error, #ef4444);
|
||||
|
||||
&:hover {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure action overflow is visible
|
||||
::ng-deep .datagrid-action-overflow {
|
||||
button.action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 8px 12px;
|
||||
|
||||
clr-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Delete Modal Styles
|
||||
.um-delete-header {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.um-delete-icon {
|
||||
color: #ef4444;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.um-delete-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-text);
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.um-delete-subtitle {
|
||||
font-size: 16px;
|
||||
color: var(--theme-text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.um-delete-details {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.um-delete-detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.um-delete-detail-label {
|
||||
font-weight: 500;
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
.um-delete-detail-value {
|
||||
font-weight: 600;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
// Form Styles
|
||||
.um-form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.um-form-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--theme-text);
|
||||
margin-bottom: 8px;
|
||||
font-family: var(--theme-font-primary);
|
||||
}
|
||||
|
||||
.um-file-input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
|
||||
&::file-selector-button {
|
||||
@extend .um-btn;
|
||||
@extend .um-btn-secondary;
|
||||
margin-right: 12px;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal Header
|
||||
::ng-deep .modal-header {
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-radius: 16px 16px 0 0 !important;
|
||||
padding: 20px 24px !important;
|
||||
|
||||
.modal-title {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modal Body
|
||||
::ng-deep .modal-body {
|
||||
padding: 24px !important;
|
||||
}
|
||||
|
||||
// Modal Footer
|
||||
::ng-deep .modal-footer {
|
||||
padding: 20px 24px !important;
|
||||
background: var(--theme-background);
|
||||
border-radius: 0 0 16px 16px !important;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@media (max-width: 768px) {
|
||||
.um-hero {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.um-toolbar {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.um-search {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.um-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.um-card-item {
|
||||
&__header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
&__icon {
|
||||
margin-right: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ExcelService } from '../../../../services/excel.service';
|
||||
@@ -8,15 +8,12 @@ import { MenuGroupService } from 'src/app/services/admin/menu-group.service';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { CsvService } from 'src/app/services/csv.service';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { ThemeService } from 'src/app/services/theme.service';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-usermaintance',
|
||||
templateUrl: './usermaintance.component.html',
|
||||
styleUrls: ['./usermaintance.component.scss']
|
||||
})
|
||||
export class UsermaintanceComponent implements OnInit, OnDestroy {
|
||||
export class UsermaintanceComponent implements OnInit {
|
||||
loading = false;
|
||||
loading1=false;
|
||||
public entryForm: FormGroup;
|
||||
@@ -24,18 +21,13 @@ export class UsermaintanceComponent implements OnInit, OnDestroy {
|
||||
orders;
|
||||
modalAdd= false;
|
||||
modaledit=false;
|
||||
mcreate: string | boolean = false;
|
||||
medit: string | boolean = false;
|
||||
mdelete;
|
||||
showdata;
|
||||
error;
|
||||
modaldelete=false;
|
||||
rowSelected :any= {};
|
||||
// UI-only state
|
||||
filterText: string = '';
|
||||
viewMode: 'table' | 'cards' = 'cards';
|
||||
private themeSubscription: Subscription;
|
||||
|
||||
mcreate;
|
||||
medit;
|
||||
mdelete;
|
||||
showdata;
|
||||
error;
|
||||
modaldelete=false;
|
||||
rowSelected :any= {};
|
||||
constructor(private excel: ExcelService,
|
||||
private _fb: FormBuilder,
|
||||
private router: Router, private toastr:ToastrService,
|
||||
@@ -44,41 +36,25 @@ export class UsermaintanceComponent implements OnInit, OnDestroy {
|
||||
private mainservice:UsermaintanceService,
|
||||
private csvService: CsvService,
|
||||
private translate: TranslateService,
|
||||
private themeService: ThemeService,
|
||||
) {this.loading1 = true;
|
||||
setTimeout(() => {
|
||||
this.loading1 = false;
|
||||
}, 1000); }
|
||||
|
||||
switchLanguage(language: string) {
|
||||
this.translate.use(language);
|
||||
}
|
||||
|
||||
switchLanguage(language: string) {
|
||||
this.translate.use(language);
|
||||
}
|
||||
ngOnInit(): void {
|
||||
this.themeSubscription = this.themeService.currentTheme$.subscribe(() => {
|
||||
// Theme changes will automatically update CSS variables
|
||||
// This triggers a re-render of themed elements
|
||||
});
|
||||
|
||||
this.showdata = this.menuGroupService.getdata();
|
||||
console.log(this.showdata);
|
||||
if (this.showdata) {
|
||||
this.mcreate = this.showdata.mcreate === 'true' || this.showdata.mcreate === true ? true : false;
|
||||
this.mcreate=this.showdata.mcreate;
|
||||
console.log(this.mcreate);
|
||||
this.mdelete=this.showdata.mdelete
|
||||
console.log(this.mdelete);
|
||||
this.medit = this.showdata.medit === 'true' || this.showdata.medit === true ? true : false;
|
||||
this.medit=this.showdata.medit
|
||||
console.log(this.medit);
|
||||
}
|
||||
this.getData();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (this.themeSubscription) {
|
||||
this.themeSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
getData(){
|
||||
this.mainservice.getAll().subscribe((data) => {
|
||||
console.log(data);
|
||||
@@ -103,23 +79,6 @@ export class UsermaintanceComponent implements OnInit, OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
// UI helpers
|
||||
get totalUsers(): number {
|
||||
const list: any[] = (this.givendata as unknown as any[]) || [];
|
||||
return list.length;
|
||||
}
|
||||
get filteredUsers(): any[] {
|
||||
const items: any[] = (this.givendata as unknown as any[]) || [];
|
||||
const text = (this.filterText || '').toLowerCase();
|
||||
if (!text) { return items; }
|
||||
return items.filter(u => (
|
||||
(u?.fullName || '').toLowerCase().includes(text) ||
|
||||
(u?.email || '').toLowerCase().includes(text) ||
|
||||
(u?.usrGrpName || '').toLowerCase().includes(text)
|
||||
));
|
||||
}
|
||||
setViewMode(mode: 'table' | 'cards') { this.viewMode = mode; }
|
||||
|
||||
|
||||
// csv
|
||||
|
||||
@@ -170,7 +129,7 @@ export class UsermaintanceComponent implements OnInit, OnDestroy {
|
||||
this.router.navigate(["../usermaintancedit/"+ id], { relativeTo: this.route });
|
||||
}
|
||||
onDelete(row) {
|
||||
this.rowSelected = {...row}; // Create a copy to avoid reference issues
|
||||
this.rowSelected = row;
|
||||
this.modaldelete=true;
|
||||
}
|
||||
|
||||
@@ -196,4 +155,4 @@ export class UsermaintanceComponent implements OnInit, OnDestroy {
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,282 +1,319 @@
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
|
||||
<li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
|
||||
<li><a href="javascript://"><clr-icon shape="lock"></clr-icon> Security</a></li>
|
||||
<li><a href="javascript://">User Maintenance</a></li>
|
||||
</ol>
|
||||
|
||||
<section class="um-hero">
|
||||
<div class="um-hero__content">
|
||||
<div class="um-hero__icon"><clr-icon shape="user"></clr-icon></div>
|
||||
<div>
|
||||
<h2 class="um-hero__title">User Maintenance</h2>
|
||||
<p class="um-hero__subtitle">Add New User</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<h4 style="font-weight: 300;display: inline;"> User Maintenance</h4>
|
||||
<span class="label label-light-blue" style="display: inline;margin-left: 30px;">Add Mode</span><br>
|
||||
<hr>
|
||||
<div class="main" >
|
||||
<form [formGroup]="entryForm">
|
||||
|
||||
<div class="um-add-container">
|
||||
<div class="um-form-card">
|
||||
<form [formGroup]="entryForm" (ngSubmit)="onSubmit()" class="um-form">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="first_name" class="um-form-label">First Name<span class="required-field">*</span></label>
|
||||
<input type="text" id="first_name" class="um-form-input" formControlName="first_name">
|
||||
<div *ngIf="submitted && entryForm.controls.first_name.errors" class="um-error-message">
|
||||
<div *ngIf="submitted && entryForm.controls.first_name.errors.required">*This field is Required</div>
|
||||
</div>
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name"> First Name</label>
|
||||
<input type="text" class="clr-input" formControlName="first_name">
|
||||
<div *ngIf="submitted && entryForm.controls.first_name.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.first_name.errors.required" class="error_mess">*This field is Required</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="last_name" class="um-form-label">Last Name<span class="required-field">*</span></label>
|
||||
<input type="text" id="last_name" class="um-form-input" formControlName="last_name">
|
||||
<div *ngIf="submitted && entryForm.controls.last_name.errors" class="um-error-message">
|
||||
<div *ngIf="submitted && entryForm.controls.last_name.errors.required">*This field is Required</div>
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">Last Name</label>
|
||||
<input type="text" class="clr-input" formControlName="last_name">
|
||||
<div *ngIf="submitted && entryForm.controls.last_name.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.last_name.errors.required" class="error_mess">*This field is Required</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="mob_no" class="um-form-label">Mobile Number<span class="required-field">*</span></label>
|
||||
<input type="text" id="mob_no" class="um-form-input" formControlName="mob_no" required pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
|
||||
<div *ngIf="submitted && entryForm.controls.mob_no.errors" class="um-error-message">
|
||||
<div *ngIf="submitted && entryForm.controls.mob_no.errors.required">*This field is Required</div>
|
||||
<div *ngIf="submitted && entryForm.controls.mob_no.errors.pattern">* Please Follow your pattern,+91 Enter 10 digit Mobile Number.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="email" class="um-form-label">Email<span class="required-field">*</span></label>
|
||||
<input type="text" id="email" class="um-form-input" formControlName="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
|
||||
<div *ngIf="submitted && entryForm.controls.email.errors" class="um-error-message">
|
||||
<div *ngIf="submitted && entryForm.controls.email.errors.required">*This field is Required</div>
|
||||
<div *ngIf="submitted && entryForm.controls.email.errors.pattern">*Email must be a valid email address</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="new_password" class="um-form-label">New Password<span class="required-field">*</span></label>
|
||||
<input type="password" id="new_password" class="um-form-input" formControlName="new_password" minlength="6">
|
||||
<div *ngIf="submitted && entryForm.controls.new_password.errors" class="um-error-message">
|
||||
<div *ngIf="entryForm.controls.new_password.errors.required">*Password is required</div>
|
||||
<div *ngIf="entryForm.controls.new_password.errors.minlength">* Password must be at least 6 characters</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="confirm_password" class="um-form-label">Confirm New Password<span class="required-field">*</span></label>
|
||||
<input type="password" id="confirm_password" class="um-form-input" formControlName="confirm_password">
|
||||
<div *ngIf="submitted && entryForm.controls.confirm_password.errors" class="um-error-message">
|
||||
<div *ngIf="entryForm.controls.confirm_password.errors.required">* Confirm Password is required</div>
|
||||
<div *ngIf="entryForm.controls.confirm_password.errors.confirmedValidator">* Password and Confirm Password must be match.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="usrGrpId" class="um-form-label">User Group<span class="required-field">*</span></label>
|
||||
<select id="usrGrpId" class="um-form-select" formControlName="usrGrpId">
|
||||
<option value="">Select User Group</option>
|
||||
<option *ngFor="let group of usergrpdata" [value]="group.usrGrp">{{group.groupName}}</option>
|
||||
</select>
|
||||
<div *ngIf="submitted && entryForm.controls.usrGrpId.errors" class="um-error-message">
|
||||
<div *ngIf="submitted && entryForm.controls.usrGrpId.errors.required">*This field is Required</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="accesstype" class="um-form-label">Access Type<span class="required-field">*</span></label>
|
||||
<select id="accesstype" class="um-form-select" formControlName="accesstype">
|
||||
<option value="">Select Access Type</option>
|
||||
<option *ngFor="let access of accessdata" [value]="access.name">{{access.name}}</option>
|
||||
</select>
|
||||
<div *ngIf="submitted && entryForm.controls.accesstype.errors" class="um-error-message">
|
||||
<div *ngIf="submitted && entryForm.controls.accesstype.errors.required">*This field is Required</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="um-form-actions">
|
||||
<button type="button" class="um-btn um-btn-outline" (click)="goback()">
|
||||
<clr-icon shape="times"></clr-icon>
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
<button type="submit" class="um-btn um-btn-primary">
|
||||
<clr-icon shape="check"></clr-icon>
|
||||
<span>Add User</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">Mobile Number</label>
|
||||
<input type="text" class="clr-input" formControlName="mob_no" required pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
|
||||
<div *ngIf="submitted && entryForm.controls.mob_no.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.mob_no.errors.required" class="error_mess">*This field is Required</div>
|
||||
<div *ngIf="submitted && entryForm.controls.mob_no.errors.pattern" class="error_mess">* Please Follow your pattern,+91 Enter 10 digit Mobile Number.
|
||||
</div>
|
||||
|
||||
<!-- Customer Modal -->
|
||||
<clr-modal [(clrModalOpen)]="customer" [clrModalSize]="'lg'">
|
||||
<h3 class="modal-title"><b>Select From List:</b></h3>
|
||||
<div class="modal-body">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-12 clr-col-sm-12">
|
||||
<input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">New Password<span class="required-field">*</span></label>
|
||||
<input type="password" class="clr-input" formControlName="new_password" minlenght="6">
|
||||
<div *ngIf="submitted && entryForm.controls.new_password.errors" class="error_mess">
|
||||
<div *ngIf="entryForm.controls.new_password.errors.required" class="error_mess">*Password is required</div>
|
||||
<div *ngIf="entryForm.controls.new_password.errors.minlength" class="error_mess">* Password must be at least 6 characters</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">Confirm New Password<span class="required-field">*</span></label>
|
||||
<input type="password" class="clr-input" formControlName="confirm_password">
|
||||
<div *ngIf="submitted && entryForm.controls.confirm_password.errors" class="error_mess">
|
||||
<div *ngIf="entryForm.controls.confirm_password.errors.required" class="error_mess">* Confirm Password is required</div>
|
||||
<div *ngIf="entryForm.controls.confirm_password.errors.confirmedValidator" class="error_mess">* Password and Confirm Password must be match.</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">Business Title</label>
|
||||
<input type="text" class="clr-input" formControlName="title">
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name"> Short Name</label>
|
||||
<input type="text" class="clr-input" formControlName="shortName">
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">Full Name</label>
|
||||
<input type="text" class="clr-input" formControlName="fullName">
|
||||
</div> -->
|
||||
<!-- <div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="tags">Status</label>
|
||||
<select id="" formControlName="status">
|
||||
<option value="E">Enable</option>
|
||||
<option value="A">Active</option></select>
|
||||
</div> -->
|
||||
<!-- <div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="name">Position Code</label>
|
||||
<input type="text" class="clr-input" formControlName="positionCodeString" [(ngModel)]="userobjpos.positionCode" name="positionCode" >
|
||||
</div>
|
||||
<div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
|
||||
<button style="margin-right: 5px;" (click)="gotoposition()">V</button>
|
||||
</div>
|
||||
<div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="name">Department Code</label>
|
||||
<input type="text" class="clr-input" formControlName="departmentCodeString" [(ngModel)]="userobjdept.departmentCode" name="departmentCode">
|
||||
</div>
|
||||
<div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
|
||||
<button style="margin-right: 5px;" (click)="gotodepartmet()">V</button>
|
||||
</div> -->
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="tags">User Group</label>
|
||||
<select id="tags" formControlName="usrGrpId" >
|
||||
<option *ngFor="let sub of usergrpdata" [value]="sub.usrGrp">{{sub.groupName}}</option>
|
||||
</select>
|
||||
<div *ngIf="submitted && entryForm.controls.usrGrpId.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.usrGrpId.errors.required" class="error_mess">*This field is Required</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">Customer Id</label>
|
||||
<input type="text" class="clr-input" formControlName="customerId" name="customerCode">
|
||||
</div> -->
|
||||
<!-- <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
|
||||
<button style="margin-right: 5px;" >V</button>
|
||||
</div> -->
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">Email</label>
|
||||
<input type="text" class="clr-input" formControlName="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
|
||||
<div *ngIf="submitted && entryForm.controls.email.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.email.errors.required" class="error_mess">*This field is Required</div>
|
||||
<!-- <div *ngIf="submitted && entryForm.controls.email.errors.email" class="error_mess">*Email must be a valid email address</div> -->
|
||||
<div *ngIf="submitted && entryForm.controls.email.errors.pattern" class="error_mess">*Email must be a valid email address</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="tags">Access Type</label>
|
||||
<select name="usrGrpId" formControlName="accesstype">
|
||||
<option *ngFor="let sub of accessdata" [value]="sub.name" [selected]="true">{{sub.name}}</option>
|
||||
</select>
|
||||
<div *ngIf="submitted && entryForm.controls.accesstype.errors" class="error_mess">
|
||||
<div *ngIf="submitted && entryForm.controls.accesstype.errors.required" class="error_mess">*This field is Required</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="tags">Notification</label>
|
||||
<select id="" formControlName="notification">
|
||||
<option value="N" >NO</option>
|
||||
<option value="Y">YES</option></select>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
<!-- <div class="clr-row">
|
||||
<div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="name">Created By</label>
|
||||
<input type="text" class="clr-input">
|
||||
</div>
|
||||
<div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="name">Created On</label>
|
||||
<input type="text" class="clr-input">
|
||||
</div>
|
||||
<div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="name">Updated By</label>
|
||||
<input type="text" class="clr-input">
|
||||
</div>
|
||||
<div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="name">Updated On</label>
|
||||
<input type="text" class="clr-input">
|
||||
</div>
|
||||
</div> -->
|
||||
</form>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="goback()">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" (click)="onSubmit()">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<clr-datagrid [clrDgLoading]="loading">
|
||||
<clr-dg-placeholder>
|
||||
<clr-spinner>Loading ...</clr-spinner>
|
||||
</clr-dg-placeholder>
|
||||
<clr-dg-column [clrDgField]="'id'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
No
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerId'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Customer Code
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerCode'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Customer Id
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerName'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Customer Name
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let user of custdata;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell>{{i+1}}</clr-dg-cell>
|
||||
<clr-dg-cell (click)="getcustID(user.customerId)" class="um-clickable-cell">{{user.customerCode}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.customerId}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.customerName}}</clr-dg-cell>
|
||||
<clr-modal [(clrModalOpen)]="customer" [clrModalSize]="'lg'">
|
||||
<h3 class="modal-title"><b>Select From List:</b></h3>
|
||||
<div class="modal-body">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-12 clr-col-sm-12">
|
||||
<input id="data" type="text" placeholder="Enter search Criteria" class="clr-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">No</td>
|
||||
<td class="td-content">{{user.id}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title">Customer Code</td>
|
||||
<td class="td-content">{{user.customerCode}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title">Customer Id</td>
|
||||
<td class="td-content">{{user.customerId}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title">Customer Name</td>
|
||||
<td class="td-content">{{user.customerName}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
<clr-datagrid [clrDgLoading]="loading">
|
||||
<clr-dg-placeholder><clr-spinner>Loading ...</clr-spinner></clr-dg-placeholder>
|
||||
<clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
No
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Customer Code
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerCode'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Customer Id
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Records per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</clr-modal>
|
||||
<clr-dg-column [clrDgField]="'customerName'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Customer Name
|
||||
</ng-container>
|
||||
</clr-dg-column >
|
||||
|
||||
<!-- Department Modal -->
|
||||
<clr-modal [(clrModalOpen)]="department" [clrModalSize]="'lg'">
|
||||
<h3 class="modal-title"><b>Select From List:</b></h3>
|
||||
<div class="modal-body">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-12 clr-col-sm-12">
|
||||
<input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
|
||||
<clr-dg-row *clrDgItems="let user of custdata;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell>{{i+1}}</clr-dg-cell>
|
||||
<clr-dg-cell (click)="getcustID(user.customerId)" style="color: rgb(108, 108, 194);" >{{user.customerCode}}</clr-dg-cell>
|
||||
<clr-dg-cell >{{user.customerId}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.customerName}}</clr-dg-cell>
|
||||
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">NO</td>
|
||||
<td class="td-content">{{user.id}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title"> Customer Code</td>
|
||||
<td class="td-content">{{user.customerCode}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title">Customer Id</td>
|
||||
<td class="td-content">{{user.customerId}} </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title"> Customer Name<td>
|
||||
<td class="td-content">{{user.customerName}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Records per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
<clr-datagrid [clrDgLoading]="loading">
|
||||
<clr-dg-placeholder>
|
||||
<clr-spinner>Loading ...</clr-spinner>
|
||||
</clr-dg-placeholder>
|
||||
<clr-dg-column [clrDgField]="'id'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
No
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerId'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Department Code
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-modal [(clrModalOpen)]="department" [clrModalSize]="'lg'">
|
||||
<h3 class="modal-title"><b>Select From List:</b></h3>
|
||||
<div class="modal-body">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-12 clr-col-sm-12">
|
||||
<input id="data" type="text" placeholder="Enter search Criteria" class="clr-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<clr-datagrid [clrDgLoading]="loading">
|
||||
<clr-dg-placeholder><clr-spinner>Loading ...</clr-spinner></clr-dg-placeholder>
|
||||
<clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
No
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Department Code
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let user of departmentdata;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell>{{i+1}}</clr-dg-cell>
|
||||
<clr-dg-cell (click)="getdepid(user.departmentCode)" style="color: rgb(108, 108, 194);" >{{user.departmentCode}}</clr-dg-cell>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">NO</td>
|
||||
<td class="td-content">{{user.id}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Records per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
|
||||
<clr-dg-row *clrDgItems="let user of departmentdata;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell>{{i+1}}</clr-dg-cell>
|
||||
<clr-dg-cell (click)="getdepid(user.departmentCode)" class="um-clickable-cell">{{user.departmentCode}}</clr-dg-cell>
|
||||
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">No</td>
|
||||
<td class="td-content">{{user.id}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Records per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
<!-- Position Modal -->
|
||||
<clr-modal [(clrModalOpen)]="position" [clrModalSize]="'lg'">
|
||||
<h3 class="modal-title"><b>Select From List:</b></h3>
|
||||
<div class="modal-body">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-12 clr-col-sm-12">
|
||||
<input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
|
||||
</div>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
<clr-datagrid [clrDgLoading]="loading">
|
||||
<clr-dg-placeholder>
|
||||
<clr-spinner>Loading ...</clr-spinner>
|
||||
</clr-dg-placeholder>
|
||||
<clr-dg-column [clrDgField]="'id'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
No
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerId'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Position Code
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-modal [(clrModalOpen)]="position" [clrModalSize]="'lg'">
|
||||
<h3 class="modal-title"><b>Select From List:</b></h3>
|
||||
<div class="modal-body">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-12 clr-col-sm-12">
|
||||
<input id="data" type="text" placeholder="Enter search Criteria" class="clr-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<clr-dg-row *clrDgItems="let user of positiondata;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell>{{i+1}}</clr-dg-cell>
|
||||
<clr-dg-cell (click)="getposid(user.positionCode)" class="um-clickable-cell">{{user.positionCode}}</clr-dg-cell>
|
||||
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">No</td>
|
||||
<td class="td-content">{{user.id}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
<clr-datagrid [clrDgLoading]="loading">
|
||||
<clr-dg-placeholder><clr-spinner>Loading ...</clr-spinner></clr-dg-placeholder>
|
||||
<clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
No
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Position Code
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Records per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</clr-modal>
|
||||
<clr-dg-row *clrDgItems="let user of positiondata;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell>{{i+1}}</clr-dg-cell>
|
||||
<clr-dg-cell (click)="getposid(user.positionCode)" style="color: rgb(108, 108, 194);" >{{user.positionCode}}</clr-dg-cell>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">NO</td>
|
||||
<td class="td-content">{{user.id}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Records per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
@import '../../../../../styles1.scss';
|
||||
@import '../../../../../styles/_design-tokens.scss';
|
||||
|
||||
input.ng-invalid.ng-touched {
|
||||
border-color: red;
|
||||
}
|
||||
@@ -8,383 +6,3 @@ input.ng-invalid.ng-touched {
|
||||
.error_mess {
|
||||
color: red;
|
||||
}
|
||||
|
||||
// User Maintenance Add Styles
|
||||
.um-hero {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24px 32px;
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
font-family: var(--theme-font-primary);
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
clr-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-family: var(--theme-font-secondary);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.um-add-container {
|
||||
background: var(--theme-surface);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.um-form-card {
|
||||
background: var(--theme-surface);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.um-form {
|
||||
.clr-row {
|
||||
margin: 0 -12px;
|
||||
}
|
||||
|
||||
.clr-col-md-6,
|
||||
.clr-col-sm-12 {
|
||||
padding: 0 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.um-form-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--theme-text);
|
||||
margin-bottom: 8px;
|
||||
font-family: var(--theme-font-primary);
|
||||
}
|
||||
|
||||
.um-form-input,
|
||||
.um-form-select {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--theme-text);
|
||||
background: var(--theme-surface);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
transition: all 200ms ease-out;
|
||||
margin-bottom: 0;
|
||||
font-family: var(--theme-font-primary);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: var(--theme-background);
|
||||
color: var(--theme-text-secondary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: #ef4444;
|
||||
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.um-form-select {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
||||
background-position: right 12px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px 12px;
|
||||
padding-right: 40px;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.um-error-message {
|
||||
color: #ef4444;
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.required-field {
|
||||
color: #ef4444;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.um-form-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
// Modern Button Styles using ThemeService
|
||||
.um-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease-out;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: var(--theme-font-primary);
|
||||
z-index: 1;
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--theme-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.um-btn-sm {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&.um-btn-md {
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&.um-btn-lg {
|
||||
padding: 16px 24px;
|
||||
font-size: 16px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
// Variants
|
||||
&.um-btn-primary {
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
&.um-btn-outline {
|
||||
background: transparent;
|
||||
color: var(--theme-secondary);
|
||||
border-color: var(--theme-secondary);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
|
||||
border-color: var(--theme-secondary);
|
||||
color: var(--theme-secondary);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
&.um-btn-error {
|
||||
background: var(--theme-error, #ef4444);
|
||||
color: white;
|
||||
border-color: var(--theme-error, #ef4444);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-error-dark, #dc2626);
|
||||
border-color: var(--theme-error-dark, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.um-btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--theme-text-secondary);
|
||||
border-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.um-clickable-cell {
|
||||
color: var(--theme-primary);
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease-out;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
// Modal Styles
|
||||
::ng-deep .modal-header {
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-radius: 16px 16px 0 0 !important;
|
||||
padding: 20px 24px !important;
|
||||
|
||||
.modal-title {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .modal-body {
|
||||
padding: 24px !important;
|
||||
}
|
||||
|
||||
::ng-deep .modal-footer {
|
||||
padding: 20px 24px !important;
|
||||
background: var(--theme-background);
|
||||
border-radius: 0 0 16px 16px !important;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
// Data Grid Styles
|
||||
.um-datagrid {
|
||||
background: var(--theme-surface);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
margin-bottom: 24px;
|
||||
|
||||
::ng-deep .datagrid {
|
||||
.datagrid-head {
|
||||
background: var(--theme-background);
|
||||
|
||||
.datagrid-column {
|
||||
padding: 16px 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
}
|
||||
|
||||
.datagrid-row {
|
||||
transition: background-color 150ms ease-out;
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.datagrid-cell {
|
||||
padding: 16px 24px;
|
||||
font-size: 14px;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
|
||||
.datagrid-footer {
|
||||
background: var(--theme-background);
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@media (max-width: 768px) {
|
||||
.um-hero {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.um-form-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.um-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -4,9 +4,6 @@ import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { AccesstypeService } from 'src/app/services/admin/accesstype.service';
|
||||
import { UsergrpmaintainceService } from 'src/app/services/admin/usergrpmaintaince.service';
|
||||
import { UsermaintanceService } from '../../../../services/admin/usermaintance.service';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { ThemeService } from 'src/app/services/theme.service';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-usermaintanceadd',
|
||||
@@ -15,63 +12,51 @@ import { Subscription } from 'rxjs';
|
||||
})
|
||||
export class UsermaintanceaddComponent implements OnInit {
|
||||
public entryForm: FormGroup;
|
||||
customer: boolean = false;
|
||||
department: boolean = false;
|
||||
position: boolean = false;
|
||||
customer:boolean=false;
|
||||
department:boolean=false;
|
||||
position:boolean=false;
|
||||
custdata: any;
|
||||
loading = false;
|
||||
clickedID: number;
|
||||
clickedID:number;
|
||||
custiddata: any;
|
||||
userobjcust = {
|
||||
customerName: '',
|
||||
customerCode: '',
|
||||
userobjcust={
|
||||
customerName:'',
|
||||
customerCode:'',
|
||||
}
|
||||
departmentdata: any;
|
||||
positiondata: any;
|
||||
deptiddata: any;
|
||||
userobjdept = {
|
||||
departmentCode: '',
|
||||
userobjdept={
|
||||
departmentCode:'',
|
||||
}
|
||||
userobjpos = {
|
||||
positionCode: '',
|
||||
userobjpos={
|
||||
positionCode:'',
|
||||
}
|
||||
posiddata: any;
|
||||
usergrpdata;
|
||||
accessdata;
|
||||
error;
|
||||
submitted = false;
|
||||
private themeSubscription: Subscription;
|
||||
submitted=false;
|
||||
|
||||
constructor(private _fb: FormBuilder,
|
||||
private mainservice: UsermaintanceService,
|
||||
private router: Router, private accesstype: AccesstypeService,
|
||||
constructor( private _fb: FormBuilder,
|
||||
private mainservice:UsermaintanceService,
|
||||
private router: Router,private accesstype:AccesstypeService,
|
||||
private route: ActivatedRoute,
|
||||
private usergrpservice: UsergrpmaintainceService,
|
||||
private translate: TranslateService,
|
||||
private themeService: ThemeService,
|
||||
) { }
|
||||
private usergrpservice: UsergrpmaintainceService
|
||||
) { }
|
||||
|
||||
switchLanguage(language: string) {
|
||||
this.translate.use(language);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.themeSubscription = this.themeService.currentTheme$.subscribe(() => {
|
||||
// Theme changes will automatically update CSS variables
|
||||
// This triggers a re-render of themed elements
|
||||
});
|
||||
|
||||
this.entryForm = this._fb.group({
|
||||
first_name: ['', [Validators.required]],
|
||||
last_name: ['', [Validators.required]],
|
||||
email: ['', [Validators.required, Validators.email]],
|
||||
mob_no: ['', [Validators.required]],
|
||||
new_password: ['', [Validators.required, Validators.minLength(6)]],
|
||||
confirm_password: ['', [Validators.required]],
|
||||
usrGrpId: ['', [Validators.required]],
|
||||
account_id: 1,
|
||||
accesstype: ['', [Validators.required]],
|
||||
// status:[null],
|
||||
first_name :['',[Validators.required]],
|
||||
last_name:['',[Validators.required]],
|
||||
email:['',[Validators.required,Validators.email]],
|
||||
mob_no:['',[Validators.required]],
|
||||
new_password:['',[Validators.required,Validators.minLength(6)]],
|
||||
confirm_password:['',[Validators.required]],
|
||||
usrGrpId:['',[Validators.required]],
|
||||
account_id:1,
|
||||
accesstype:['',[Validators.required]],
|
||||
// status:[null],
|
||||
// username:[null] ,
|
||||
// userPassw:[null] ,
|
||||
// confirmPassword:[null],
|
||||
@@ -87,38 +72,31 @@ export class UsermaintanceaddComponent implements OnInit {
|
||||
// notification:[null],
|
||||
|
||||
//departmentCode: this._fb.array([this.department()]),
|
||||
// positionCode: this._fb.array([this.position()]),
|
||||
// positionCode: this._fb.array([this.position()]),
|
||||
//usrGrp: this._fb.array([this.user()]),
|
||||
|
||||
}, {
|
||||
validator: ConfirmedValidator('new_password', 'confirm_password')
|
||||
});
|
||||
this.usergrp();
|
||||
this.getdata();
|
||||
}, {
|
||||
validator: ConfirmedValidator('new_password', 'confirm_password')
|
||||
});
|
||||
this.usergrp();
|
||||
this.getdata();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (this.themeSubscription) {
|
||||
this.themeSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
getdata() {
|
||||
getdata(){
|
||||
this.accesstype.getAll().subscribe(resp => {
|
||||
this.accessdata = resp;
|
||||
console.log('accessdata: ', this.accessdata);
|
||||
if (this.accessdata.length == 0) {
|
||||
this.error = "No data Available";
|
||||
if(this.accessdata.length==0){
|
||||
this.error="No data Available";
|
||||
console.log(this.error)
|
||||
}
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
if (error) {
|
||||
this.error = "Server Error";
|
||||
}
|
||||
})
|
||||
},(error) => {
|
||||
console.log(error);
|
||||
if(error){
|
||||
this.error="Server Error";
|
||||
}
|
||||
})
|
||||
}
|
||||
usergrp() {
|
||||
usergrp(){
|
||||
this.usergrpservice.getAll().subscribe((data) => {
|
||||
console.log(data);
|
||||
this.usergrpdata = data;
|
||||
@@ -142,11 +120,11 @@ export class UsermaintanceaddComponent implements OnInit {
|
||||
|
||||
// });
|
||||
//}
|
||||
onSubmit() {
|
||||
this.submitted = true
|
||||
if (this.entryForm.invalid) {
|
||||
return;
|
||||
}
|
||||
onSubmit(){
|
||||
this.submitted=true
|
||||
if (this.entryForm.invalid) {
|
||||
return;
|
||||
}
|
||||
console.log(this.entryForm.value);
|
||||
this.mainservice.create(this.entryForm.value).subscribe(data => {
|
||||
console.log(data)
|
||||
@@ -158,63 +136,63 @@ export class UsermaintanceaddComponent implements OnInit {
|
||||
this.router.navigate(["../usermaintance"], { relativeTo: this.route });
|
||||
}
|
||||
|
||||
goback() {
|
||||
this.router.navigate(["../usermaintance"], { relativeTo: this.route });
|
||||
}
|
||||
gotodepartmet() {
|
||||
this.department = !this.department;
|
||||
this.mainservice.getalldepartment().subscribe((data) => {
|
||||
console.log(data);
|
||||
this.departmentdata = data;
|
||||
});
|
||||
}
|
||||
getdepid(id: number) {
|
||||
this.clickedID = id;
|
||||
console.log("clicked by id" + id);
|
||||
this.mainservice.getbydepartmentid(id).subscribe((data) => {
|
||||
console.log(data);
|
||||
this.deptiddata = data;
|
||||
// this.userObj= this.custiddata;
|
||||
this.userobjdept = this.deptiddata;
|
||||
goback(){
|
||||
this.router.navigate(["../usermaintance"], { relativeTo: this.route });
|
||||
}
|
||||
gotodepartmet(){
|
||||
this.department=!this.department;
|
||||
this.mainservice.getalldepartment().subscribe((data)=>{
|
||||
console.log(data);
|
||||
this.departmentdata=data;
|
||||
});
|
||||
}
|
||||
getdepid(id:number){
|
||||
this.clickedID=id;
|
||||
console.log("clicked by id"+ id);
|
||||
this.mainservice.getbydepartmentid(id).subscribe((data) => {
|
||||
console.log(data);
|
||||
this.deptiddata= data;
|
||||
// this.userObj= this.custiddata;
|
||||
this.userobjdept =this.deptiddata;
|
||||
|
||||
|
||||
});
|
||||
this.department = false;
|
||||
}
|
||||
gotoposition() {
|
||||
this.position = !this.position;
|
||||
this.mainservice.getallposition().subscribe((data) => {
|
||||
console.log(data);
|
||||
this.positiondata = data;
|
||||
})
|
||||
}
|
||||
getposid(id: number) {
|
||||
this.clickedID = id;
|
||||
console.log("clicked by id" + id);
|
||||
this.mainservice.getbypositionid(id).subscribe((data) => {
|
||||
console.log(data);
|
||||
this.posiddata = data;
|
||||
// this.userObj= this.custiddata;
|
||||
this.userobjpos = this.posiddata;
|
||||
});
|
||||
this.department=false;
|
||||
}
|
||||
gotoposition(){
|
||||
this.position=!this.position;
|
||||
this.mainservice.getallposition().subscribe((data)=>{
|
||||
console.log(data);
|
||||
this.positiondata=data;
|
||||
})
|
||||
}
|
||||
getposid(id:number){
|
||||
this.clickedID=id;
|
||||
console.log("clicked by id"+ id);
|
||||
this.mainservice.getbypositionid(id).subscribe((data) => {
|
||||
console.log(data);
|
||||
this.posiddata= data;
|
||||
// this.userObj= this.custiddata;
|
||||
this.userobjpos =this.posiddata;
|
||||
|
||||
|
||||
});
|
||||
this.position = false;
|
||||
}
|
||||
});
|
||||
this.position=false;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
export function ConfirmedValidator(controlName: string, matchingControlName: string) {
|
||||
export function ConfirmedValidator(controlName: string, matchingControlName: string){
|
||||
return (formGroup: FormGroup) => {
|
||||
const control = formGroup.controls[controlName];
|
||||
const matchingControl = formGroup.controls[matchingControlName];
|
||||
if (matchingControl.errors && !matchingControl.errors.confirmedValidator) {
|
||||
return;
|
||||
}
|
||||
if (control.value !== matchingControl.value) {
|
||||
matchingControl.setErrors({ confirmedValidator: true });
|
||||
} else {
|
||||
matchingControl.setErrors(null);
|
||||
}
|
||||
const control = formGroup.controls[controlName];
|
||||
const matchingControl = formGroup.controls[matchingControlName];
|
||||
if (matchingControl.errors && !matchingControl.errors.confirmedValidator) {
|
||||
return;
|
||||
}
|
||||
if (control.value !== matchingControl.value) {
|
||||
matchingControl.setErrors({ confirmedValidator: true });
|
||||
} else {
|
||||
matchingControl.setErrors(null);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,249 +1,348 @@
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
|
||||
<li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
|
||||
<li><a href="javascript://"><clr-icon shape="lock"></clr-icon> Security</a></li>
|
||||
<li><a href="javascript://">User Maintenance</a></li>
|
||||
</ol>
|
||||
|
||||
<section class="um-hero">
|
||||
<div class="um-hero__content">
|
||||
<div class="um-hero__icon"><clr-icon shape="user"></clr-icon></div>
|
||||
<div>
|
||||
<h2 class="um-hero__title">User Maintenance</h2>
|
||||
<p class="um-hero__subtitle">Edit User</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<h4 style="font-weight: 300;display: inline;"> User Maintenance</h4>
|
||||
<span class="label label-light-blue" style="display: inline;margin-left: 30px;">Edit Mode</span><br>
|
||||
<hr>
|
||||
<div class="main" >
|
||||
<form *ngIf="data1">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name"> First Name</label>
|
||||
<input type="text" class="clr-input" name="first_name" [(ngModel)]="data1.fullName" >
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">Last Name</label>
|
||||
<input type="text" class="clr-input" name="last_name" [(ngModel)]="data1.last_name">
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">Mobile Number</label>
|
||||
<input type="text" class="clr-input" name="mob_no" [(ngModel)]="data1.mob_no">
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">New Password<span class="required-field">*</span></label>
|
||||
<input type="password" class="clr-input" name="new_password" [(ngModel)]="data1.userPassw">
|
||||
</div>
|
||||
|
||||
<div class="um-edit-container">
|
||||
<div class="um-form-card">
|
||||
<form *ngIf="data1" (ngSubmit)="update()" class="um-form">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="first_name" class="um-form-label">First Name<span class="required-field">*</span></label>
|
||||
<input type="text" id="first_name" class="um-form-input" name="first_name" [(ngModel)]="data1.fullName">
|
||||
</div>
|
||||
<!-- <div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">Business Title</label>
|
||||
<input type="text" class="clr-input" formControlName="title">
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name"> Short Name</label>
|
||||
<input type="text" class="clr-input" formControlName="shortName">
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">Full Name</label>
|
||||
<input type="text" class="clr-input" formControlName="fullName">
|
||||
</div> -->
|
||||
<!-- <div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="tags">Status</label>
|
||||
<select id="" formControlName="status">
|
||||
<option value="E">Enable</option>
|
||||
<option value="A">Active</option></select>
|
||||
</div> -->
|
||||
<!-- <div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="name">Position Code</label>
|
||||
<input type="text" class="clr-input" formControlName="positionCodeString" [(ngModel)]="userobjpos.positionCode" name="positionCode" >
|
||||
</div>
|
||||
<div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
|
||||
<button style="margin-right: 5px;" (click)="gotoposition()">V</button>
|
||||
</div>
|
||||
<div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="name">Department Code</label>
|
||||
<input type="text" class="clr-input" formControlName="departmentCodeString" [(ngModel)]="userobjdept.departmentCode" name="departmentCode">
|
||||
</div>
|
||||
<div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
|
||||
<button style="margin-right: 5px;" (click)="gotodepartmet()">V</button>
|
||||
</div> -->
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="tags">User Group</label>
|
||||
<select [(ngModel)]="data1.usrGrpId" name="usrGrpId">
|
||||
<option *ngFor="let sub of usergrpdata" [value]="sub.usrGrp">{{sub.groupName}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">Customer Id</label>
|
||||
<input type="text" class="clr-input" formControlName="customerId" name="customerCode">
|
||||
</div> -->
|
||||
<!-- <div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
|
||||
<button style="margin-right: 5px;" >V</button>
|
||||
</div> -->
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">Email</label>
|
||||
<input type="text" class="clr-input" name="email" [(ngModel)]="data1.email">
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="tags">Access Type</label>
|
||||
<select [(ngModel)]="data1.accesstype" name="usrGrpId">
|
||||
<option *ngFor="let sub of accessdata" [value]="sub.name">{{sub.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="tags">Notification</label>
|
||||
<select id="" formControlName="notification">
|
||||
<option value="N" >NO</option>
|
||||
<option value="Y">YES</option></select>
|
||||
</div> -->
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="last_name" class="um-form-label">Last Name<span class="required-field">*</span></label>
|
||||
<input type="text" id="last_name" class="um-form-input" name="last_name" [(ngModel)]="data1.last_name">
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="clr-row">
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="mob_no" class="um-form-label">Mobile Number<span class="required-field">*</span></label>
|
||||
<input type="text" id="mob_no" class="um-form-input" name="mob_no" [(ngModel)]="data1.mob_no">
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="email" class="um-form-label">Email<span class="required-field">*</span></label>
|
||||
<input type="text" id="email" class="um-form-input" name="email" [(ngModel)]="data1.email">
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name"> User Name</label>
|
||||
<input type="text" class="clr-input" [(ngModel)]="data1.username" name="username">
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">New Password<span class="required-field">*</span></label>
|
||||
<input type="password" class="clr-input" [(ngModel)]="data1.userPassw" name="userPassw">
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="new_password" class="um-form-label">New Password<span class="required-field">*</span></label>
|
||||
<input type="password" id="new_password" class="um-form-input" name="new_password" [(ngModel)]="data1.userPassw">
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">Business Title</label>
|
||||
<input type="text" class="clr-input" [(ngModel)]="data1.title" name="title">
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name"> Short Name</label>
|
||||
<input type="text" class="clr-input" [(ngModel)]="data1.shortName" name="shortName">
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">Full Name</label>
|
||||
<input type="text" class="clr-input" [(ngModel)]="data1.fullName" name="fullName">
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="tags">Status</label>
|
||||
<select [(ngModel)]="data1.status" name="status">
|
||||
<option value="E">Enable</option>
|
||||
<option value="A">Active</option></select>
|
||||
</div>
|
||||
<div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="name">Position Code</label>
|
||||
<input type="text" class="clr-input" [(ngModel)]="data1.positionCodeString" [value]="userobjpos.positionCode" name="positionCodeString">
|
||||
</div>
|
||||
<div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
|
||||
<button style="margin-right: 5px;" (click)="gotoposition()">V</button>
|
||||
</div>
|
||||
<div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="name">Department Code</label>
|
||||
<input type="text" class="clr-input" [(ngModel)]="data1.departmentCodeString" [value]="userobjdept.departmentCode" name="departmentCodeString">
|
||||
</div>
|
||||
<div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
|
||||
<button style="margin-right: 5px;" (click)="gotodepartmet()">V</button>
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="tags">User Group</label>
|
||||
<select [(ngModel)]="data1.usrGrpId" name="usrGrpId">
|
||||
<option *ngFor="let sub of usergrpdata" [value]="sub.usrGrp">{{sub.groupName}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">Customer Id</label>
|
||||
<input type="text" class="clr-input" [(ngModel)]="data1.customerId" [value]="userobjcust.customerCode" name="customerId">
|
||||
</div>
|
||||
<div class="clr-col-md-1 clr-col-sm-12" style="margin-top: 25px;">
|
||||
<button style="margin-right: 5px;" (click)="gotocustomerid()">V</button>
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="name">Email</label>
|
||||
<input type="text" class="clr-input"[(ngModel)]="data1.email" name="email">
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="tags">Notification</label>
|
||||
<select [(ngModel)]="data1.notification" name="notification">
|
||||
<option value="N" >NO</option>
|
||||
<option value="Y">YES</option></select>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="usrGrpId" class="um-form-label">User Group<span class="required-field">*</span></label>
|
||||
<select id="usrGrpId" class="um-form-select" [(ngModel)]="data1.usrGrpId" name="usrGrpId">
|
||||
<option value="">Select User Group</option>
|
||||
<option *ngFor="let group of usergrpdata" [value]="group.usrGrp">{{group.groupName}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="name">Created By</label>
|
||||
<input type="text" class="clr-input" [(ngModel)]="data1.createby" name="createby">
|
||||
</div>
|
||||
<div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="name">Created On</label>
|
||||
<input type="text" class="clr-input" [(ngModel)]="data1.createdate" name="createdate">
|
||||
</div>
|
||||
<div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="name">Updated By</label>
|
||||
<input type="text" class="clr-input" [(ngModel)]="data1.updateby" name="updateby">
|
||||
</div>
|
||||
<div class="clr-col-md-3 clr-col-sm-12">
|
||||
<label for="name">Updated On</label>
|
||||
<input type="text" class="clr-input"[(ngModel)]="data1.updatedate" name="updatedate">
|
||||
</div>
|
||||
</div> -->
|
||||
</form>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="accesstype" class="um-form-label">Access Type<span class="required-field">*</span></label>
|
||||
<select id="accesstype" class="um-form-select" [(ngModel)]="data1.accesstype" name="accesstype">
|
||||
<option value="">Select Access Type</option>
|
||||
<option *ngFor="let access of accessdata" [value]="access.name">{{access.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="um-form-actions">
|
||||
<button type="button" class="um-btn um-btn-outline" (click)="goback()">
|
||||
<clr-icon shape="times"></clr-icon>
|
||||
<span>Close</span>
|
||||
</button>
|
||||
<button type="submit" class="um-btn um-btn-primary">
|
||||
<clr-icon shape="check"></clr-icon>
|
||||
<span>Update User</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer Modal -->
|
||||
<clr-modal [(clrModalOpen)]="customer" [clrModalSize]="'lg'">
|
||||
<h3 class="modal-title"><b>Select From List:</b></h3>
|
||||
<div class="modal-body">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-12 clr-col-sm-12">
|
||||
<input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="goback()">Close</button>
|
||||
<button type="button" class="btn btn-primary" (click)="update()">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<clr-datagrid [clrDgLoading]="loading">
|
||||
<clr-dg-placeholder>
|
||||
<clr-spinner>Loading ...</clr-spinner>
|
||||
</clr-dg-placeholder>
|
||||
<clr-dg-column [clrDgField]="'id'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
No
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerId'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Customer Code
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerCode'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Customer Id
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerName'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Customer Name
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-modal [(clrModalOpen)]="customer" [clrModalSize]="'lg'">
|
||||
<h3 class="modal-title"><b>Select From List:</b></h3>
|
||||
<div class="modal-body">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-12 clr-col-sm-12">
|
||||
<input id="data" type="text" placeholder="Enter search Criteria" class="clr-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<clr-dg-row *clrDgItems="let user of custdata;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell>{{i+1}}</clr-dg-cell>
|
||||
<clr-dg-cell (click)="getcustID(user.customerId)" class="um-clickable-cell">{{user.customerCode}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.customerId}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.customerName}}</clr-dg-cell>
|
||||
<clr-datagrid [clrDgLoading]="loading">
|
||||
<clr-dg-placeholder><clr-spinner>Loading ...</clr-spinner></clr-dg-placeholder>
|
||||
<clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
No
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Customer Code
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerCode'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Customer Id
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">No</td>
|
||||
<td class="td-content">{{user.id}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title">Customer Code</td>
|
||||
<td class="td-content">{{user.customerCode}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title">Customer Id</td>
|
||||
<td class="td-content">{{user.customerId}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title">Customer Name</td>
|
||||
<td class="td-content">{{user.customerName}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
<clr-dg-column [clrDgField]="'customerName'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Customer Name
|
||||
</ng-container>
|
||||
</clr-dg-column >
|
||||
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Records per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</clr-modal>
|
||||
<clr-dg-row *clrDgItems="let user of custdata;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell>{{i+1}}</clr-dg-cell>
|
||||
<clr-dg-cell (click)="getcustID(user.customerId)" style="color: rgb(108, 108, 194);" >{{user.customerCode}}</clr-dg-cell>
|
||||
<clr-dg-cell >{{user.customerId}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.customerName}}</clr-dg-cell>
|
||||
|
||||
<!-- Department Modal -->
|
||||
<clr-modal [(clrModalOpen)]="department" [clrModalSize]="'lg'">
|
||||
<h3 class="modal-title"><b>Select From List:</b></h3>
|
||||
<div class="modal-body">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-12 clr-col-sm-12">
|
||||
<input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">NO</td>
|
||||
<td class="td-content">{{user.id}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title"> Customer Code</td>
|
||||
<td class="td-content">{{user.customerCode}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title">Customer Id</td>
|
||||
<td class="td-content">{{user.customerId}} </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title"> Customer Name<td>
|
||||
<td class="td-content">{{user.customerName}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Records per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
<clr-datagrid [clrDgLoading]="loading">
|
||||
<clr-dg-placeholder>
|
||||
<clr-spinner>Loading ...</clr-spinner>
|
||||
</clr-dg-placeholder>
|
||||
<clr-dg-column [clrDgField]="'id'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
No
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerId'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Department Code
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-modal [(clrModalOpen)]="department" [clrModalSize]="'lg'">
|
||||
<h3 class="modal-title"><b>Select From List:</b></h3>
|
||||
<div class="modal-body">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-12 clr-col-sm-12">
|
||||
<input id="data" type="text" placeholder="Enter search Criteria" class="clr-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<clr-datagrid [clrDgLoading]="loading">
|
||||
<clr-dg-placeholder><clr-spinner>Loading ...</clr-spinner></clr-dg-placeholder>
|
||||
<clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
No
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Department Code
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let user of departmentdata;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell>{{i+1}}</clr-dg-cell>
|
||||
<clr-dg-cell (click)="getdepid(user.departmentCode)" style="color: rgb(108, 108, 194);" >{{user.departmentCode}}</clr-dg-cell>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">NO</td>
|
||||
<td class="td-content">{{user.id}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Records per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
|
||||
<clr-dg-row *clrDgItems="let user of departmentdata;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell>{{i+1}}</clr-dg-cell>
|
||||
<clr-dg-cell (click)="getdepid(user.departmentCode)" class="um-clickable-cell">{{user.departmentCode}}</clr-dg-cell>
|
||||
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">No</td>
|
||||
<td class="td-content">{{user.id}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Records per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
<!-- Position Modal -->
|
||||
<clr-modal [(clrModalOpen)]="position" [clrModalSize]="'lg'">
|
||||
<h3 class="modal-title"><b>Select From List:</b></h3>
|
||||
<div class="modal-body">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-12 clr-col-sm-12">
|
||||
<input id="data" type="text" placeholder="Enter search Criteria" class="um-form-input">
|
||||
</div>
|
||||
</div>
|
||||
</clr-modal>
|
||||
<clr-modal [(clrModalOpen)]="position" [clrModalSize]="'lg'">
|
||||
<h3 class="modal-title"><b>Select From List:</b></h3>
|
||||
<div class="modal-body">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-12 clr-col-sm-12">
|
||||
<input id="data" type="text" placeholder="Enter search Criteria" class="clr-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<clr-datagrid [clrDgLoading]="loading">
|
||||
<clr-dg-placeholder>
|
||||
<clr-spinner>Loading ...</clr-spinner>
|
||||
</clr-dg-placeholder>
|
||||
<clr-dg-column [clrDgField]="'id'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
No
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerId'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Position Code
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let user of positiondata;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell>{{i+1}}</clr-dg-cell>
|
||||
<clr-dg-cell (click)="getposid(user.positionCode)" class="um-clickable-cell">{{user.positionCode}}</clr-dg-cell>
|
||||
<clr-datagrid [clrDgLoading]="loading">
|
||||
<clr-dg-placeholder><clr-spinner>Loading ...</clr-spinner></clr-dg-placeholder>
|
||||
<clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
No
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Position Code
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">No</td>
|
||||
<td class="td-content">{{user.id}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
<clr-dg-row *clrDgItems="let user of positiondata;let i = index" [clrDgItem]="user">
|
||||
<clr-dg-cell>{{i+1}}</clr-dg-cell>
|
||||
<clr-dg-cell (click)="getposid(user.positionCode)" style="color: rgb(108, 108, 194);" >{{user.positionCode}}</clr-dg-cell>
|
||||
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Records per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
|
||||
|
||||
<clr-dg-row-detail *clrIfExpanded>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">NO</td>
|
||||
<td class="td-content">{{user.id}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</clr-dg-row-detail>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Records per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
@@ -1,375 +1 @@
|
||||
@import '../../../../../styles1.scss';
|
||||
@import '../../../../../styles/_design-tokens.scss';
|
||||
|
||||
// User Maintenance Edit Styles
|
||||
.um-hero {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24px 32px;
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
font-family: var(--theme-font-primary);
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
clr-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-family: var(--theme-font-secondary);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.um-edit-container {
|
||||
background: var(--theme-surface);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.um-form-card {
|
||||
background: var(--theme-surface);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.um-form {
|
||||
.clr-row {
|
||||
margin: 0 -12px;
|
||||
}
|
||||
|
||||
.clr-col-md-6,
|
||||
.clr-col-sm-12 {
|
||||
padding: 0 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.um-form-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--theme-text);
|
||||
margin-bottom: 8px;
|
||||
font-family: var(--theme-font-primary);
|
||||
}
|
||||
|
||||
.um-form-input,
|
||||
.um-form-select {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--theme-text);
|
||||
background: var(--theme-surface);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
transition: all 200ms ease-out;
|
||||
margin-bottom: 0;
|
||||
font-family: var(--theme-font-primary);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: var(--theme-background);
|
||||
color: var(--theme-text-secondary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: #ef4444;
|
||||
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.um-form-select {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
||||
background-position: right 12px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px 12px;
|
||||
padding-right: 40px;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.required-field {
|
||||
color: #ef4444;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.um-form-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
// Modern Button Styles using ThemeService
|
||||
.um-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease-out;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: var(--theme-font-primary);
|
||||
z-index: 1;
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--theme-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.um-btn-sm {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&.um-btn-md {
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&.um-btn-lg {
|
||||
padding: 16px 24px;
|
||||
font-size: 16px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
// Variants
|
||||
&.um-btn-primary {
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
&.um-btn-outline {
|
||||
background: transparent;
|
||||
color: var(--theme-secondary);
|
||||
border-color: var(--theme-secondary);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
|
||||
border-color: var(--theme-secondary);
|
||||
color: var(--theme-secondary);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
&.um-btn-error {
|
||||
background: var(--theme-error, #ef4444);
|
||||
color: white;
|
||||
border-color: var(--theme-error, #ef4444);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-error-dark, #dc2626);
|
||||
border-color: var(--theme-error-dark, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.um-btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--theme-text-secondary);
|
||||
border-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.um-clickable-cell {
|
||||
color: var(--theme-primary);
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease-out;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
// Modal Styles
|
||||
::ng-deep .modal-header {
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-radius: 16px 16px 0 0 !important;
|
||||
padding: 20px 24px !important;
|
||||
|
||||
.modal-title {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .modal-body {
|
||||
padding: 24px !important;
|
||||
}
|
||||
|
||||
::ng-deep .modal-footer {
|
||||
padding: 20px 24px !important;
|
||||
background: var(--theme-background);
|
||||
border-radius: 0 0 16px 16px !important;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
// Data Grid Styles
|
||||
.um-datagrid {
|
||||
background: var(--theme-surface);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
margin-bottom: 24px;
|
||||
|
||||
::ng-deep .datagrid {
|
||||
.datagrid-head {
|
||||
background: var(--theme-background);
|
||||
|
||||
.datagrid-column {
|
||||
padding: 16px 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
}
|
||||
|
||||
.datagrid-row {
|
||||
transition: background-color 150ms ease-out;
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.datagrid-cell {
|
||||
padding: 16px 24px;
|
||||
font-size: 14px;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
|
||||
.datagrid-footer {
|
||||
background: var(--theme-background);
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@media (max-width: 768px) {
|
||||
.um-hero {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.um-form-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.um-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -3,9 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { AccesstypeService } from 'src/app/services/admin/accesstype.service';
|
||||
import { UsergrpmaintainceService } from 'src/app/services/admin/usergrpmaintaince.service';
|
||||
import { UsermaintanceService } from '../../../../services/admin/usermaintance.service';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { ThemeService } from 'src/app/services/theme.service';
|
||||
import { Subscription } from 'rxjs';
|
||||
//import { Usermain } from 'src/app/models/usermaintaince';
|
||||
|
||||
@Component({
|
||||
selector: 'app-usermaintanceedit',
|
||||
@@ -13,52 +11,40 @@ import { Subscription } from 'rxjs';
|
||||
styleUrls: ['./usermaintanceedit.component.scss']
|
||||
})
|
||||
export class UsermaintanceeditComponent implements OnInit {
|
||||
id: number;
|
||||
data1: any = {};
|
||||
customer: boolean = false;
|
||||
id:number;
|
||||
data1:any={};
|
||||
customer:boolean=false;
|
||||
custdata: any;
|
||||
clickedID: number;
|
||||
clickedID:number;
|
||||
custiddata: any;
|
||||
loading = false;
|
||||
userobjcust = {
|
||||
customerName: '',
|
||||
customerCode: '',
|
||||
userobjcust={
|
||||
customerName:'',
|
||||
customerCode:'',
|
||||
}
|
||||
accessdata;
|
||||
department: boolean = false;
|
||||
department:boolean=false;
|
||||
departmentdata: any;
|
||||
positiondata: any;
|
||||
deptiddata: any;
|
||||
userobjdept = {
|
||||
departmentCode: '',
|
||||
userobjdept={
|
||||
departmentCode:'',
|
||||
}
|
||||
userobjpos = {
|
||||
positionCode: '',
|
||||
userobjpos={
|
||||
positionCode:'',
|
||||
}
|
||||
posiddata: any;
|
||||
position: boolean = false;
|
||||
position:boolean=false;
|
||||
usergrpdata;
|
||||
error;
|
||||
private themeSubscription: Subscription;
|
||||
constructor(private route:ActivatedRoute,
|
||||
private mainservice:UsermaintanceService,
|
||||
private router: Router,private accesstype:AccesstypeService,
|
||||
private usergrpservice: UsergrpmaintainceService
|
||||
|
||||
constructor(private route: ActivatedRoute,
|
||||
private mainservice: UsermaintanceService,
|
||||
private router: Router, private accesstype: AccesstypeService,
|
||||
private usergrpservice: UsergrpmaintainceService,
|
||||
private translate: TranslateService,
|
||||
private themeService: ThemeService,
|
||||
) { }
|
||||
|
||||
switchLanguage(language: string) {
|
||||
this.translate.use(language);
|
||||
}
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.themeSubscription = this.themeService.currentTheme$.subscribe(() => {
|
||||
// Theme changes will automatically update CSS variables
|
||||
// This triggers a re-render of themed elements
|
||||
});
|
||||
|
||||
this.id = this.route.snapshot.params["id"];
|
||||
console.log("update with id = ", this.id);
|
||||
this.getById(this.id);
|
||||
@@ -66,89 +52,82 @@ export class UsermaintanceeditComponent implements OnInit {
|
||||
this.usergrp();
|
||||
this.getdata();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (this.themeSubscription) {
|
||||
this.themeSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
getdata() {
|
||||
getdata(){
|
||||
this.accesstype.getAll().subscribe(resp => {
|
||||
this.accessdata = resp;
|
||||
console.log('accessdata: ', this.accessdata);
|
||||
if (this.accessdata.length == 0) {
|
||||
this.error = "No data Available";
|
||||
if(this.accessdata.length==0){
|
||||
this.error="No data Available";
|
||||
console.log(this.error)
|
||||
}
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
if (error) {
|
||||
this.error = "Server Error";
|
||||
}
|
||||
})
|
||||
},(error) => {
|
||||
console.log(error);
|
||||
if(error){
|
||||
this.error="Server Error";
|
||||
}
|
||||
})
|
||||
}
|
||||
usergrp() {
|
||||
usergrp(){
|
||||
this.usergrpservice.getAll().subscribe((data) => {
|
||||
console.log(data);
|
||||
this.usergrpdata = data;
|
||||
});
|
||||
}
|
||||
getById(id: number) {
|
||||
this.mainservice.getbyid(id).subscribe((data) => {
|
||||
this.data1 = data;
|
||||
// this.data1=this.data3;
|
||||
console.log(this.data1);
|
||||
});
|
||||
}
|
||||
update() {
|
||||
console.log(this.data1);
|
||||
this.mainservice.updatenew(this.id, this.data1).subscribe((data) => {
|
||||
console.log(data);
|
||||
});
|
||||
getById(id:number){
|
||||
this.mainservice.getbyid(id).subscribe((data)=>{
|
||||
this.data1=data;
|
||||
// this.data1=this.data3;
|
||||
console.log(this.data1);
|
||||
});
|
||||
}
|
||||
update(){
|
||||
console.log(this.data1);
|
||||
this.mainservice.updatenew(this.id,this.data1).subscribe((data)=>{
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
}
|
||||
goback() {
|
||||
this.router.navigate(["../../usermaintance"], { relativeTo: this.route });
|
||||
}
|
||||
gotodepartmet() {
|
||||
this.department = !this.department;
|
||||
this.mainservice.getalldepartment().subscribe((data) => {
|
||||
}
|
||||
goback(){
|
||||
this.router.navigate(["../../usermaintance"], { relativeTo: this.route });
|
||||
}
|
||||
gotodepartmet(){
|
||||
this.department=!this.department;
|
||||
this.mainservice.getalldepartment().subscribe((data)=>{
|
||||
console.log(data);
|
||||
this.departmentdata = data;
|
||||
this.departmentdata=data;
|
||||
});
|
||||
}
|
||||
getdepid(id: number) {
|
||||
this.clickedID = id;
|
||||
console.log("clicked by id" + id);
|
||||
getdepid(id:number){
|
||||
this.clickedID=id;
|
||||
console.log("clicked by id"+ id);
|
||||
this.mainservice.getbydepartmentid(id).subscribe((data) => {
|
||||
console.log(data);
|
||||
this.deptiddata = data;
|
||||
// this.userObj= this.custiddata;
|
||||
this.userobjdept = this.deptiddata;
|
||||
this.deptiddata= data;
|
||||
// this.userObj= this.custiddata;
|
||||
this.userobjdept =this.deptiddata;
|
||||
|
||||
|
||||
});
|
||||
this.department = false;
|
||||
});
|
||||
this.department=false;
|
||||
}
|
||||
gotoposition() {
|
||||
this.position = !this.position;
|
||||
this.mainservice.getallposition().subscribe((data) => {
|
||||
gotoposition(){
|
||||
this.position=!this.position;
|
||||
this.mainservice.getallposition().subscribe((data)=>{
|
||||
console.log(data);
|
||||
this.positiondata = data;
|
||||
this.positiondata=data;
|
||||
})
|
||||
}
|
||||
getposid(id: number) {
|
||||
this.clickedID = id;
|
||||
console.log("clicked by id" + id);
|
||||
getposid(id:number){
|
||||
this.clickedID=id;
|
||||
console.log("clicked by id"+ id);
|
||||
this.mainservice.getbypositionid(id).subscribe((data) => {
|
||||
console.log(data);
|
||||
this.posiddata = data;
|
||||
// this.userObj= this.custiddata;
|
||||
this.userobjpos = this.posiddata;
|
||||
this.posiddata= data;
|
||||
// this.userObj= this.custiddata;
|
||||
this.userobjpos =this.posiddata;
|
||||
|
||||
|
||||
});
|
||||
this.position = false;
|
||||
});
|
||||
this.position=false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -71,13 +71,19 @@
|
||||
Calculated Fields
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
|
||||
<!-- Webhook Status Column -->
|
||||
<clr-dg-column>
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Webhook Status
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<!-- who column -->
|
||||
<clr-dg-column>
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<clr-icon shape="bars"></clr-icon> Action
|
||||
</ng-container></clr-dg-column>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<!-- end -->
|
||||
|
||||
<clr-dg-row *clrDgItems="let user of product" [clrDgItem]="user">
|
||||
@@ -104,7 +110,7 @@
|
||||
<span
|
||||
style="margin-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1;"
|
||||
title="{{user.url_endpoint}}" (click)="showFullUrl(user.url_endpoint)">
|
||||
{{user.url | slice:0:30}}{{user.url_endpoint.length > 30 ? '...' : ''}}
|
||||
{{user.url | slice:0:30}}{{user?.url_endpoint?.length > 30 ? '...' : ''}}
|
||||
</span>
|
||||
<button class="btn btn-icon btn-sm" (click)="copyToClipboard(user.url_endpoint)" title="Copy URL">
|
||||
<clr-icon shape="copy-to-clipboard"></clr-icon>
|
||||
@@ -138,39 +144,79 @@
|
||||
style="cursor: pointer; align-items: center;"><clr-icon shape="details"
|
||||
*ngIf="user.calculated_field_json"></clr-icon></clr-dg-cell>
|
||||
|
||||
|
||||
<!-- Webhook Status Cell -->
|
||||
<clr-dg-cell>
|
||||
<span *ngIf="user.webhook_url && user.webhook_url.trim() !== ''" class="webhook-enabled">Enabled</span>
|
||||
<span *ngIf="!user.webhook_url || user.webhook_url.trim() === ''" class="webhook-disabled">Disabled</span>
|
||||
</clr-dg-cell>
|
||||
|
||||
<!-- who column -->
|
||||
<clr-dg-cell>
|
||||
<div style="display: flex; align-items: center; gap: 1px; flex-wrap: nowrap;">
|
||||
<clr-signpost>
|
||||
<span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success"
|
||||
style="color: rgb(0, 130, 236);"></clr-icon></span>
|
||||
<clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
|
||||
<h5 style="margin-top: 0">Who Column</h5>
|
||||
<div>Account ID: <code class="clr-code">{{user.accountId}}</code></div>
|
||||
<div>Created At: <code class="clr-code">{{user.createdAt| date}}</code></div>
|
||||
<div>Created By: <code class="clr-code">{{user.createdBy}}</code></div>
|
||||
<div>Updated At: <code class="clr-code">{{user.updatedAt | date}}</code></div>
|
||||
<div>Updated By: <code class="clr-code">{{user.updatedBy}}</code></div>
|
||||
</clr-signpost-content>
|
||||
</clr-signpost>
|
||||
<clr-signpost>
|
||||
<span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success"
|
||||
style="color: rgb(0, 130, 236);"></clr-icon></span>
|
||||
<clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
|
||||
<h5 style="margin-top: 0">Who Column</h5>
|
||||
<div>Account ID: <code class="clr-code">{{user.accountId}}</code></div>
|
||||
<div>Created At: <code class="clr-code">{{user.createdAt| date}}</code></div>
|
||||
<div>Created By: <code class="clr-code">{{user.createdBy}}</code></div>
|
||||
<div>Updated At: <code class="clr-code">{{user.updatedAt | date}}</code></div>
|
||||
<div>Updated By: <code class="clr-code">{{user.updatedBy}}</code></div>
|
||||
</clr-signpost-content>
|
||||
</clr-signpost>
|
||||
|
||||
<!-- New JSON Update button -->
|
||||
<button class="btn btn-icon btn-sm" (click)="updateJson(user.id)" title="Update JSON">
|
||||
<clr-icon shape="refresh"></clr-icon>
|
||||
</button>
|
||||
<!-- New JSON Update button -->
|
||||
<button class="btn btn-icon" (click)="updateJson(user.id)" title="Update JSON">
|
||||
<clr-icon shape="refresh"></clr-icon>
|
||||
</button>
|
||||
|
||||
<!-- Calculated Field button -->
|
||||
<button class="btn btn-icon btn-sm" (click)="fetchAvailableKeys(user, false)" title="Create Calculated Field">
|
||||
<clr-icon shape="calculator"></clr-icon>
|
||||
</button>
|
||||
|
||||
<!-- Group By button -->
|
||||
<button class="btn btn-icon btn-sm" (click)="openGroupByModal(user)" title="Group By Configuration">
|
||||
<clr-icon shape="group"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Calculated Field button -->
|
||||
<button class="btn btn-icon" (click)="fetchAvailableKeys(user)" title="Create Calculated Field">
|
||||
<clr-icon shape="calculator"></clr-icon>
|
||||
</button>
|
||||
|
||||
<!-- Group By button -->
|
||||
<button class="btn btn-icon" (click)="openGroupByModal(user)" title="Group By Configuration">
|
||||
<clr-icon shape="group"></clr-icon>
|
||||
</button>
|
||||
|
||||
<!-- Blending Keys button (only shown for blending type with non-empty blending_lakeids) -->
|
||||
<button class="btn btn-icon"
|
||||
(click)="fetchBlendingKeys(user)"
|
||||
title="Configure Blending Query"
|
||||
*ngIf="canShowBlendingAction(user)">
|
||||
<clr-icon shape="code"></clr-icon>
|
||||
</button>
|
||||
|
||||
<!-- Field Mapping button -->
|
||||
<button class="btn btn-icon"
|
||||
(click)="openFieldMappingModal(user)"
|
||||
title="Field Mapping"
|
||||
*ngIf="user.url && user.sure_connect_id">
|
||||
<clr-icon shape="map"></clr-icon>
|
||||
</button>
|
||||
|
||||
<!-- Scheduler button -->
|
||||
<button class="btn btn-icon"
|
||||
(click)="openSchedulerModal(user)"
|
||||
title="Scheduler">
|
||||
<clr-icon shape="clock"></clr-icon>
|
||||
</button>
|
||||
|
||||
<!-- Webhook toggle button -->
|
||||
<button class="btn btn-icon"
|
||||
(click)="toggleWebhook(user)"
|
||||
title="Toggle Webhook">
|
||||
<clr-icon shape="network-globe"></clr-icon>
|
||||
</button>
|
||||
|
||||
<!-- Copy Webhook URL button -->
|
||||
<button class="btn btn-icon"
|
||||
(click)="copyWebhookUrl(user.webhook_url)"
|
||||
title="Copy Webhook URL"
|
||||
*ngIf="user.webhook_url && user.webhook_url.trim() !== ''">
|
||||
<clr-icon shape="copy-to-clipboard"></clr-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
|
||||
<!-- who colmn -->
|
||||
@@ -434,8 +480,32 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Add ref_datalake_id dropdown -->
|
||||
<!-- Data Lake Type -->
|
||||
<div class="clr-col-sm-12">
|
||||
<label>Data Lake Type</label>
|
||||
<select class="clr-input" [(ngModel)]="rowSelected.datalake_type" name="datalake_type">
|
||||
<option *ngFor="let type of dataLakeTypes" [value]="type.value">{{ type.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Blending Data Lakes (only show when blending type is selected) -->
|
||||
<div class="clr-col-sm-12" *ngIf="rowSelected.datalake_type === 'blending'">
|
||||
<label>Blending Data Lakes</label>
|
||||
<div class="checkbox-container">
|
||||
<div *ngFor="let dataLake of dataLakeList" class="checkbox-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
[value]="dataLake.id"
|
||||
(change)="onEditBlendingLakeCheckboxChange($event, dataLake.id)"
|
||||
[checked]="isEditBlendingLakeSelected(dataLake.id)">
|
||||
<label>{{ dataLake.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<small class="clr-subtext">Select data lakes to blend</small>
|
||||
</div>
|
||||
|
||||
<!-- Reference Data Lake (only show when normal type is selected) -->
|
||||
<div class="clr-col-sm-12" *ngIf="rowSelected.datalake_type === 'normal'">
|
||||
<label>Reference Data Lake</label>
|
||||
<select class="clr-input" [(ngModel)]="rowSelected.ref_datalake_id" name="ref_datalake_id">
|
||||
<option value="">Select Data Lake</option>
|
||||
@@ -563,8 +633,32 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Add ref_datalake_id dropdown -->
|
||||
<!-- Data Lake Type -->
|
||||
<div class="clr-col-sm-12">
|
||||
<label>Data Lake Type</label>
|
||||
<select formControlName="datalake_type">
|
||||
<option *ngFor="let type of dataLakeTypes" [value]="type.value">{{ type.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Blending Data Lakes (only show when blending type is selected) -->
|
||||
<div class="clr-col-sm-12" *ngIf="entryForm.get('datalake_type')?.value === 'blending'">
|
||||
<label>Blending Data Lakes</label>
|
||||
<div class="checkbox-container">
|
||||
<div *ngFor="let dataLake of dataLakeList" class="checkbox-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
[value]="dataLake.id"
|
||||
(change)="onBlendingLakeCheckboxChange($event, dataLake.id)"
|
||||
[checked]="isBlendingLakeSelected(dataLake.id)">
|
||||
<label>{{ dataLake.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<small class="clr-subtext">Select data lakes to blend</small>
|
||||
</div>
|
||||
|
||||
<!-- Reference Data Lake (only show when normal type is selected) -->
|
||||
<div class="clr-col-sm-12" *ngIf="entryForm.get('datalake_type')?.value === 'normal'">
|
||||
<label>Reference Data Lake</label>
|
||||
<select formControlName="ref_datalake_id">
|
||||
<option value="">Select Data Lake</option>
|
||||
@@ -916,4 +1010,200 @@
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
<!-- htmlpopup -->
|
||||
<!-- Blending Keys Panel -->
|
||||
<div class="blending-keys-panel" *ngIf="showBlendingKeys">
|
||||
<div class="panel-header">
|
||||
<h3>Blending Configuration</h3>
|
||||
<button class="btn btn-icon" (click)="closeBlendingKeys()" title="Close">
|
||||
<clr-icon shape="close"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="panel-content">
|
||||
<!-- Display keys for each blending lake -->
|
||||
<div class="keys-container" *ngFor="let keyData of blendingKeysData">
|
||||
<h4>Data Lake {{ keyData.lakeId }} - Table: {{ keyData.tableName }}</h4>
|
||||
<div class="headers-container">
|
||||
<span class="header-tag" *ngFor="let header of keyData.headers">{{ header }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SQL Query Editor -->
|
||||
<div class="sql-editor-container">
|
||||
<h4>SQL Query Builder</h4>
|
||||
<textarea class="clr-textarea sql-textarea"
|
||||
[(ngModel)]="sqlQueryText"
|
||||
placeholder="Enter your SQL query here using the available headers..."
|
||||
rows="6"></textarea>
|
||||
<div class="editor-actions">
|
||||
<button class="btn btn-primary" (click)="updateSqlQuery()">Update SQL Query</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Blending Configuration Modal -->
|
||||
<clr-modal [(clrModalOpen)]="showBlendingKeys" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Blending Configuration</h3>
|
||||
<div class="modal-body">
|
||||
<div class="blending-config-container">
|
||||
<!-- Display keys for each blending lake -->
|
||||
<div class="keys-section" *ngIf="blendingKeysData && blendingKeysData.length > 0">
|
||||
<h4 class="section-title">
|
||||
<clr-icon shape="data-field" class="section-icon"></clr-icon>
|
||||
Available Data Sources
|
||||
</h4>
|
||||
<div class="keys-container">
|
||||
<div class="key-card" *ngFor="let keyData of blendingKeysData">
|
||||
<div class="key-header">
|
||||
<h5>Data Lake {{ keyData.lakeId }} - Table: {{ keyData.tableName }}</h5>
|
||||
</div>
|
||||
<div class="headers-container">
|
||||
<span class="header-tag" *ngFor="let header of keyData.headers"
|
||||
(click)="insertHeaderIntoQuery(header)">
|
||||
{{ header }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SQL Query Editor -->
|
||||
<div class="sql-editor-section">
|
||||
<h4 class="section-title">
|
||||
<clr-icon shape="code" class="section-icon"></clr-icon>
|
||||
SQL Query Builder
|
||||
</h4>
|
||||
<div class="sql-editor-container">
|
||||
<textarea class="clr-textarea sql-textarea"
|
||||
[(ngModel)]="sqlQueryText"
|
||||
placeholder="Enter your SQL query here using the available headers. Click on header names above to insert them into your query."
|
||||
rows="8"></textarea>
|
||||
<div class="editor-hint">
|
||||
<small class="clr-subtext">Tip: Click on header names above to automatically insert them into your query</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="closeBlendingKeys()">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" (click)="updateSqlQuery()">Update SQL Query</button>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
<!-- Field Mapping Modal -->
|
||||
<clr-modal [(clrModalOpen)]="showFieldMappingModal" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Field Mapping Configuration</h3>
|
||||
<div class="modal-body">
|
||||
<div class="field-mapping-container">
|
||||
<div class="instructions">
|
||||
<p>Map original field names to new names. Leave mapping blank to exclude field from mapping.</p>
|
||||
</div>
|
||||
|
||||
<div class="mapping-table-container" *ngIf="fieldMappingData && fieldMappingData.length > 0">
|
||||
<table class="table mapping-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="50%">Original Field Name</th>
|
||||
<th width="50%">Mapped Field Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let field of fieldMappingData; let i = index">
|
||||
<td class="original-field">
|
||||
<span class="field-tag">{{ field.original }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text"
|
||||
class="clr-input mapping-input"
|
||||
[(ngModel)]="field.mapped"
|
||||
placeholder="Enter new field name"
|
||||
(ngModelChange)="updateFieldMapping(i, $event)">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="no-data-message" *ngIf="fieldMappingData && fieldMappingData.length === 0">
|
||||
<p>No fields available for mapping. Please check the data source configuration.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="closeFieldMappingModal()">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" (click)="updateFieldMappings()" [disabled]="!fieldMappingData || fieldMappingData.length === 0">Update Field Mappings</button>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
<!-- Scheduler Modal -->
|
||||
<clr-modal [(clrModalOpen)]="showSchedulerModal" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Job Scheduler</h3>
|
||||
<div class="modal-body">
|
||||
<div class="scheduler-container">
|
||||
<div class="data-lake-info">
|
||||
<h4>Data Lake: {{ selectedSchedulerItem?.name }}</h4>
|
||||
</div>
|
||||
|
||||
<!-- Job Information -->
|
||||
<div class="job-info-section" *ngIf="schedulerJob">
|
||||
<div class="job-header">
|
||||
<h5>Job Information</h5>
|
||||
<span class="badge" [ngClass]="getStatusBadgeClass(schedulerJob.status)">
|
||||
{{ schedulerJob.status }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="job-details">
|
||||
<div class="detail-row">
|
||||
<label>Job Name:</label>
|
||||
<span>{{ schedulerJob.name }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<label>Job Type:</label>
|
||||
<span>{{ schedulerJob.jobType }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<label>Description:</label>
|
||||
<span>{{ schedulerJob.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Job Actions -->
|
||||
<div class="job-actions">
|
||||
<button class="btn btn-warning" (click)="pauseJob()" *ngIf="schedulerJob.status === 'RUNNING'">
|
||||
<clr-icon shape="pause"></clr-icon> Pause Job
|
||||
</button>
|
||||
<button class="btn btn-success" (click)="resumeJob()" *ngIf="schedulerJob.status === 'PAUSED'">
|
||||
<clr-icon shape="play"></clr-icon> Resume Job
|
||||
</button>
|
||||
<button class="btn btn-danger" (click)="stopJob()" *ngIf="schedulerJob.status !== 'STOPPED'">
|
||||
<clr-icon shape="stop"></clr-icon> Stop Job
|
||||
</button>
|
||||
<button class="btn btn-primary" (click)="restartJob()" *ngIf="schedulerJob.status === 'STOPPED'">
|
||||
<clr-icon shape="play"></clr-icon> Restart Job
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No Job Found -->
|
||||
<div class="no-job-section" *ngIf="schedulerJob === null">
|
||||
<div class="no-job-message">
|
||||
<p>No scheduled job found for this Data Lake.</p>
|
||||
<p>Would you like to create a new job?</p>
|
||||
</div>
|
||||
|
||||
<div class="create-job-actions">
|
||||
<button class="btn btn-primary" (click)="createJob()">
|
||||
<clr-icon shape="plus"></clr-icon> Create Job
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="closeSchedulerModal()">Close</button>
|
||||
</div>
|
||||
|
||||
</clr-modal>
|
||||
|
||||
@@ -384,3 +384,494 @@
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Data Lake Type Styles */
|
||||
.clr-subtext {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
[data-multiple] {
|
||||
height: auto !important;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
/* Checkbox Styles for Blending Data Lakes */
|
||||
.checkbox-container {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.checkbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.checkbox-item input[type="checkbox"] {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.checkbox-item label {
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Blending Keys Panel Styles */
|
||||
.blending-keys-panel {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: white;
|
||||
border-top: 1px solid #ccc;
|
||||
box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
|
||||
z-index: 1000;
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.panel-header h3 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.keys-container {
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.keys-container h4 {
|
||||
margin-top: 0;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.headers-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.header-tag {
|
||||
display: inline-block;
|
||||
background-color: #e3f2fd;
|
||||
border: 1px solid #bbdefb;
|
||||
border-radius: 12px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.sql-editor-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.sql-textarea {
|
||||
width: 100%;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.editor-actions {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Blending Configuration Modal Styles */
|
||||
.blending-config-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #0072a0;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.keys-section {
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
background-color: #f9f9f9;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.key-card {
|
||||
background-color: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.key-header h5 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.headers-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.header-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background-color: #e3f2fd;
|
||||
border: 1px solid #bbdefb;
|
||||
border-radius: 20px;
|
||||
padding: 6px 12px;
|
||||
margin: 4px;
|
||||
font-size: 13px;
|
||||
font-family: monospace;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.header-tag:hover {
|
||||
background-color: #bbdefb;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.sql-editor-section {
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
background-color: #f9f9f9;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.sql-editor-container {
|
||||
background-color: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.sql-textarea {
|
||||
width: 100%;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.editor-hint {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Field Mapping Modal Styles */
|
||||
.field-mapping-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
background-color: #e3f2fd;
|
||||
border: 1px solid #bbdefb;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.instructions p {
|
||||
margin: 0;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.mapping-table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.mapping-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.mapping-table th {
|
||||
background-color: #f5f5f5;
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.mapping-table td {
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.original-field {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.field-tag {
|
||||
display: inline-block;
|
||||
background-color: #e0e0e0;
|
||||
border: 1px solid #bdbdbd;
|
||||
border-radius: 4px;
|
||||
padding: 6px 10px;
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mapping-input {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mapping-input:focus {
|
||||
outline: none;
|
||||
border-color: #0072a0;
|
||||
box-shadow: 0 0 0 2px rgba(0, 114, 160, 0.2);
|
||||
}
|
||||
|
||||
.no-data-message {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Scheduler Modal Styles */
|
||||
.scheduler-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.data-lake-info h4 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.job-info-section {
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.job-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.job-header h5 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 5px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background-color: #ff9800;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-light {
|
||||
background-color: #e0e0e0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.job-details {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.detail-row label {
|
||||
font-weight: 500;
|
||||
width: 120px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.detail-row span {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.job-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.job-actions .btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.no-job-section {
|
||||
text-align: center;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.no-job-message p {
|
||||
margin: 10px 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.no-job-message p:first-child {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.create-job-actions {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.create-job-actions .btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Webhook Status Styles */
|
||||
.webhook-enabled {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.webhook-disabled {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Webhook Status Styles */
|
||||
.webhook-status {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.webhook-status.enabled {
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.webhook-status.disabled {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Webhook Modal Styles */
|
||||
.webhook-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.webhook-container .data-lake-info h4 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.webhook-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.webhook-info {
|
||||
background-color: #e3f2fd;
|
||||
border: 1px solid #bbdefb;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.webhook-info p {
|
||||
margin: 0;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { AlertService } from 'src/app/services/alert.service';
|
||||
import { Data_lakeservice } from './Data_lake.service';
|
||||
import { SchedulerService } from 'src/app/services/scheduler.service';
|
||||
import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators, ValidationErrors } from '@angular/forms';
|
||||
import { ExtensionService } from 'src/app/services/fnd/extension.service';
|
||||
import { DashboardContentModel2 } from 'src/app/models/builder/dashboard';
|
||||
@@ -10,6 +11,7 @@ import { UserInfoService } from 'src/app/services/user-info.service';
|
||||
import { SureconnectService } from '../sureconnect/sureconnect.service';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { ApiRequestService } from 'src/app/services/api/api-request.service';
|
||||
import { DataLakeSchedulerService } from './dataLakescheduler.service';
|
||||
declare var JsBarcode: any;
|
||||
@Component({
|
||||
selector: 'app-Data_lake',
|
||||
@@ -66,6 +68,12 @@ export class Data_lakeComponent implements OnInit {
|
||||
dataLakeList: any[] = [];
|
||||
selectedDataLake: any = null;
|
||||
|
||||
// New properties for data lake type
|
||||
dataLakeTypes = [
|
||||
{ value: 'normal', label: 'Normal' },
|
||||
{ value: 'blending', label: 'Blending' }
|
||||
];
|
||||
|
||||
// Calculated field properties
|
||||
calculatedFieldModalOpen = false;
|
||||
availableKeys: string[] = [];
|
||||
@@ -99,10 +107,36 @@ export class Data_lakeComponent implements OnInit {
|
||||
|
||||
selectedAggregationFields: { field: string; operation: string }[] = [];
|
||||
|
||||
// New property to store selected blending lake IDs as string
|
||||
selectedBlendingLakeIds: string[] = [];
|
||||
editSelectedBlendingLakeIds: string[] = [];
|
||||
|
||||
// New properties for blending functionality
|
||||
showBlendingKeys = false;
|
||||
blendingKeysData: any[] = [];
|
||||
sqlQueryText = '';
|
||||
selectedBlendingItem: any = null;
|
||||
|
||||
// New properties for field mapping
|
||||
showFieldMappingModal = false;
|
||||
fieldMappingData: any[] = [];
|
||||
fieldMappings: { [key: string]: string } = {};
|
||||
selectedMappingItem: any = null;
|
||||
|
||||
// New properties for scheduler functionality
|
||||
showSchedulerModal = false;
|
||||
schedulerJob: any = null;
|
||||
selectedSchedulerItem: any = null;
|
||||
|
||||
// New properties for webhook functionality
|
||||
showWebhookModal = false;
|
||||
selectedWebhookItem: any = null;
|
||||
|
||||
constructor(
|
||||
private extensionService: ExtensionService,
|
||||
private userInfoService: UserInfoService,
|
||||
private mainService: Data_lakeservice,
|
||||
private schedulerService: DataLakeSchedulerService,
|
||||
private alertService: AlertService,
|
||||
private toastr: ToastrService,
|
||||
private _fb: FormBuilder,
|
||||
@@ -124,23 +158,19 @@ export class Data_lakeComponent implements OnInit {
|
||||
this.getDataLakeList(); // Fetch Data Lake list for reference dropdown
|
||||
this.entryForm = this._fb.group({
|
||||
name: [null],
|
||||
|
||||
url: [null],
|
||||
|
||||
schedule: [null],
|
||||
|
||||
cron_job: [null],
|
||||
|
||||
json: [null],
|
||||
|
||||
url_endpoint: [null],
|
||||
|
||||
batch_volume: [null],
|
||||
|
||||
sure_connect_id: [null], // Add SureConnect field
|
||||
ref_datalake_id: [null], // Add Data Lake reference field
|
||||
|
||||
}); // component_button200
|
||||
sure_connect_id: [null],
|
||||
ref_datalake_id: [null],
|
||||
datalake_type: ['normal'], // Default to normal
|
||||
blending_lakeids: [[]], // Array for multiple selections
|
||||
webhook_url: [null] // Add webhook_url field
|
||||
});
|
||||
|
||||
// form code start
|
||||
this.extensionService.getJsonObjectsByFormCodeList(this.formcode).subscribe(data => {
|
||||
console.log(data);
|
||||
@@ -240,8 +270,7 @@ export class Data_lakeComponent implements OnInit {
|
||||
// Fetch Data Lake list for reference dropdown
|
||||
getDataLakeList() {
|
||||
this.mainService.getAll().subscribe((data: any[]) => {
|
||||
// Filter out the current item to avoid self-reference
|
||||
this.dataLakeList = data.filter(item => item.id !== (this.rowSelected?.id || 0));
|
||||
this.dataLakeList = data;
|
||||
console.log('Data Lake List:', this.dataLakeList);
|
||||
}, (error) => {
|
||||
console.log('Error fetching Data Lake list:', error);
|
||||
@@ -686,8 +715,16 @@ export class Data_lakeComponent implements OnInit {
|
||||
this.editCronExpression = row.cron_job || '';
|
||||
// Set the selected SureConnect for edit form
|
||||
this.selectedSureConnect = row.sure_connect_id || null;
|
||||
// Set the selected Data Lake for edit form
|
||||
this.selectedDataLake = row.ref_datalake_id || null;
|
||||
|
||||
// Initialize blending lake IDs for edit form from string
|
||||
if (row.blending_lakeids && typeof row.blending_lakeids === 'string') {
|
||||
this.editSelectedBlendingLakeIds = row.blending_lakeids.split(',').filter(id => id.trim() !== '');
|
||||
} else if (row.blending_lakeids && Array.isArray(row.blending_lakeids)) {
|
||||
this.editSelectedBlendingLakeIds = row.blending_lakeids.map(id => id.toString());
|
||||
} else {
|
||||
this.editSelectedBlendingLakeIds = [];
|
||||
}
|
||||
|
||||
// Use setTimeout to ensure the component has time to initialize
|
||||
setTimeout(() => {
|
||||
this.modalEdit = true;
|
||||
@@ -838,18 +875,22 @@ export class Data_lakeComponent implements OnInit {
|
||||
}
|
||||
|
||||
goToAdd(row) {
|
||||
this.modalAdd = true;
|
||||
this.modalAdd = false;
|
||||
this.addCronExpression = '';
|
||||
this.selectedSureConnect = null; // Reset SureConnect selection
|
||||
this.selectedDataLake = null; // Reset Data Lake selection
|
||||
this.submitted = false;
|
||||
// Reset blending lake IDs for add form
|
||||
this.selectedBlendingLakeIds = [];
|
||||
|
||||
// Reset the form control for cron_job and sure_connect_id
|
||||
if (this.entryForm) {
|
||||
if (this.entryForm.get('cron_job')) {
|
||||
this.entryForm.get('cron_job')?.setValue('');
|
||||
}
|
||||
|
||||
// Reset blending_lakeids to empty string
|
||||
this.entryForm.get('blending_lakeids')?.setValue('');
|
||||
}
|
||||
this.modalAdd = true;
|
||||
}
|
||||
submitted = false;
|
||||
onSubmit() {
|
||||
@@ -1290,4 +1331,433 @@ export class Data_lakeComponent implements OnInit {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// Method to check if blending action should be available
|
||||
canShowBlendingAction(item: any): boolean {
|
||||
return item.datalake_type === 'blending' &&
|
||||
item.blending_lakeids &&
|
||||
item.blending_lakeids.trim() !== '';
|
||||
}
|
||||
|
||||
// Method to insert header into SQL query at cursor position
|
||||
insertHeaderIntoQuery(header: string) {
|
||||
const textarea = document.querySelector('.sql-textarea') as HTMLTextAreaElement;
|
||||
if (textarea) {
|
||||
const start = textarea.selectionStart;
|
||||
const end = textarea.selectionEnd;
|
||||
const text = textarea.value;
|
||||
const before = text.substring(0, start);
|
||||
const after = text.substring(end, text.length);
|
||||
|
||||
// Insert the header at cursor position
|
||||
this.sqlQueryText = before + header + after;
|
||||
|
||||
// Set cursor position after the inserted text
|
||||
setTimeout(() => {
|
||||
textarea.selectionStart = start + header.length;
|
||||
textarea.selectionEnd = start + header.length;
|
||||
textarea.focus();
|
||||
}, 0);
|
||||
} else {
|
||||
// Fallback: append to end of text
|
||||
this.sqlQueryText += header;
|
||||
}
|
||||
}
|
||||
|
||||
// Method to fetch blending keys
|
||||
fetchBlendingKeys(item: any) {
|
||||
this.selectedBlendingItem = item;
|
||||
this.blendingKeysData = [];
|
||||
this.showBlendingKeys = true;
|
||||
|
||||
// Initialize SQL query text from existing data
|
||||
if (item.sqlquery_json) {
|
||||
this.sqlQueryText = item.sqlquery_json;
|
||||
} else {
|
||||
this.sqlQueryText = '';
|
||||
}
|
||||
|
||||
// Parse blending_lakeids string to array
|
||||
const lakeIds = item.blending_lakeids.split(',').map(id => id.trim()).filter(id => id !== '');
|
||||
|
||||
// Fetch keys for each lake ID
|
||||
lakeIds.forEach(lakeId => {
|
||||
this.mainService.fetchBlendingKeys(Number(lakeId)).subscribe(
|
||||
(data: any) => {
|
||||
this.blendingKeysData.push({
|
||||
lakeId: lakeId,
|
||||
tableName: data.tableName,
|
||||
headers: data.headers
|
||||
});
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error fetching keys for lake ID:', lakeId, error);
|
||||
this.toastr.error(`Failed to fetch keys for Data Lake ${lakeId}`);
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// Method to update SQL query
|
||||
updateSqlQuery() {
|
||||
if (!this.selectedBlendingItem) {
|
||||
this.toastr.error('No blending item selected');
|
||||
return;
|
||||
}
|
||||
|
||||
// Update the SQL query JSON field
|
||||
this.selectedBlendingItem.sqlquery_json = this.sqlQueryText;
|
||||
|
||||
// Call update service
|
||||
this.mainService.update(this.selectedBlendingItem.id, this.selectedBlendingItem).subscribe(
|
||||
(response) => {
|
||||
this.toastr.success('SQL query updated successfully');
|
||||
// Update the local data
|
||||
const index = this.product.findIndex(p => p.id === this.selectedBlendingItem.id);
|
||||
if (index !== -1) {
|
||||
this.product[index] = {...this.selectedBlendingItem};
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error updating SQL query:', error);
|
||||
this.toastr.error('Failed to update SQL query');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Method to close blending keys panel
|
||||
closeBlendingKeys() {
|
||||
this.showBlendingKeys = false;
|
||||
this.blendingKeysData = [];
|
||||
this.sqlQueryText = '';
|
||||
this.selectedBlendingItem = null;
|
||||
}
|
||||
|
||||
// Method to handle checkbox change for blending lakes (ADD form)
|
||||
onBlendingLakeCheckboxChange(event: any, lakeId: number) {
|
||||
const lakeIdStr = lakeId.toString();
|
||||
if (event.target.checked) {
|
||||
// Add to selected blending lake IDs
|
||||
if (!this.selectedBlendingLakeIds.includes(lakeIdStr)) {
|
||||
this.selectedBlendingLakeIds.push(lakeIdStr);
|
||||
}
|
||||
} else {
|
||||
// Remove from selected blending lake IDs
|
||||
const index = this.selectedBlendingLakeIds.indexOf(lakeIdStr);
|
||||
if (index > -1) {
|
||||
this.selectedBlendingLakeIds.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Update the form control value as a comma-separated string
|
||||
this.entryForm.get('blending_lakeids')?.setValue(this.selectedBlendingLakeIds.join(','));
|
||||
}
|
||||
|
||||
// Method to check if a blending lake is selected (ADD form)
|
||||
isBlendingLakeSelected(lakeId: number): boolean {
|
||||
return this.selectedBlendingLakeIds.includes(lakeId.toString());
|
||||
}
|
||||
|
||||
// Method to handle checkbox change for blending lakes (EDIT form)
|
||||
onEditBlendingLakeCheckboxChange(event: any, lakeId: number) {
|
||||
const lakeIdStr = lakeId.toString();
|
||||
if (event.target.checked) {
|
||||
// Add to selected blending lake IDs
|
||||
if (!this.editSelectedBlendingLakeIds.includes(lakeIdStr)) {
|
||||
this.editSelectedBlendingLakeIds.push(lakeIdStr);
|
||||
}
|
||||
} else {
|
||||
// Remove from selected blending lake IDs
|
||||
const index = this.editSelectedBlendingLakeIds.indexOf(lakeIdStr);
|
||||
if (index > -1) {
|
||||
this.editSelectedBlendingLakeIds.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Update the rowSelected value as a comma-separated string
|
||||
this.rowSelected.blending_lakeids = this.editSelectedBlendingLakeIds.join(',');
|
||||
}
|
||||
|
||||
// Method to check if a blending lake is selected (EDIT form)
|
||||
isEditBlendingLakeSelected(lakeId: number): boolean {
|
||||
return this.editSelectedBlendingLakeIds.includes(lakeId.toString());
|
||||
}
|
||||
|
||||
// Method to open field mapping modal
|
||||
openFieldMappingModal(item: any) {
|
||||
this.selectedMappingItem = item;
|
||||
this.fieldMappingData = [];
|
||||
this.fieldMappings = {};
|
||||
this.showFieldMappingModal = true;
|
||||
|
||||
// Fetch available keys using the same API as calculated fields
|
||||
this.mainService.fetchAvailableKeys(item.url, item.sure_connect_id).subscribe(
|
||||
(keys: string[]) => {
|
||||
// Initialize field mappings with empty values
|
||||
this.fieldMappingData = keys.map(key => ({
|
||||
original: key,
|
||||
mapped: ''
|
||||
}));
|
||||
|
||||
// If there's existing mapping data, populate it
|
||||
if (item.mapping_json) {
|
||||
try {
|
||||
const existingMappings = JSON.parse(item.mapping_json);
|
||||
this.fieldMappingData.forEach(field => {
|
||||
if (existingMappings[field.original]) {
|
||||
field.mapped = existingMappings[field.original];
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Error parsing existing mapping JSON:', e);
|
||||
}
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error fetching keys for field mapping:', error);
|
||||
this.toastr.error('Failed to fetch available keys for field mapping');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Method to update field mappings
|
||||
updateFieldMappings() {
|
||||
if (!this.selectedMappingItem) {
|
||||
this.toastr.error('No item selected for mapping');
|
||||
return;
|
||||
}
|
||||
|
||||
// Create mapping object
|
||||
const mappings: { [key: string]: string } = {};
|
||||
this.fieldMappingData.forEach(field => {
|
||||
if (field.mapped && field.mapped.trim() !== '') {
|
||||
mappings[field.original] = field.mapped.trim();
|
||||
}
|
||||
});
|
||||
|
||||
// Convert to JSON string
|
||||
const mappingJson = JSON.stringify(mappings);
|
||||
|
||||
// Update the mapping JSON field
|
||||
this.selectedMappingItem.mapping_json = mappingJson;
|
||||
|
||||
// Call update service
|
||||
this.mainService.update(this.selectedMappingItem.id, this.selectedMappingItem).subscribe(
|
||||
(response) => {
|
||||
this.toastr.success('Field mappings updated successfully');
|
||||
// Update the local data
|
||||
const index = this.product.findIndex(p => p.id === this.selectedMappingItem.id);
|
||||
if (index !== -1) {
|
||||
this.product[index] = {...this.selectedMappingItem};
|
||||
}
|
||||
this.closeFieldMappingModal();
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error updating field mappings:', error);
|
||||
this.toastr.error('Failed to update field mappings');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Method to close field mapping modal
|
||||
closeFieldMappingModal() {
|
||||
this.showFieldMappingModal = false;
|
||||
this.fieldMappingData = [];
|
||||
this.fieldMappings = {};
|
||||
this.selectedMappingItem = null;
|
||||
}
|
||||
|
||||
// Method to update individual field mapping
|
||||
updateFieldMapping(index: number, value: string) {
|
||||
if (index >= 0 && index < this.fieldMappingData.length) {
|
||||
this.fieldMappingData[index].mapped = value;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Method to open scheduler modal
|
||||
openSchedulerModal(item: any) {
|
||||
this.selectedSchedulerItem = item;
|
||||
this.schedulerJob = null;
|
||||
this.showSchedulerModal = true;
|
||||
|
||||
// Fetch job by lake ID
|
||||
this.schedulerService.getJobByLakeId(item.id).subscribe(
|
||||
(job: any) => {
|
||||
this.schedulerJob = job;
|
||||
},
|
||||
(error) => {
|
||||
// If job not found, it's expected - we'll show create option
|
||||
if (error.status === 404) {
|
||||
this.schedulerJob = null;
|
||||
} else {
|
||||
console.error('Error fetching scheduler job:', error);
|
||||
this.toastr.error('Failed to fetch scheduler job information');
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Method to create a new job
|
||||
createJob() {
|
||||
if (!this.selectedSchedulerItem) {
|
||||
this.toastr.error('No data lake selected');
|
||||
return;
|
||||
}
|
||||
|
||||
const jobData = {
|
||||
name: this.selectedSchedulerItem.name,
|
||||
status: 'RUNNING',
|
||||
description: `Scheduled job for ${this.selectedSchedulerItem.name}`,
|
||||
jobType: 'DATALAKE',
|
||||
lakeid: this.selectedSchedulerItem.id
|
||||
};
|
||||
|
||||
this.schedulerService.createJob(jobData).subscribe(
|
||||
(job: any) => {
|
||||
this.schedulerJob = job;
|
||||
this.toastr.success('Job created successfully');
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error creating job:', error);
|
||||
this.toastr.error('Failed to create job');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Method to pause a job
|
||||
pauseJob() {
|
||||
if (!this.schedulerJob || !this.schedulerJob.id) {
|
||||
this.toastr.error('No job selected');
|
||||
return;
|
||||
}
|
||||
|
||||
this.schedulerService.pauseJob(this.schedulerJob.id).subscribe(
|
||||
(response: any) => {
|
||||
this.schedulerJob.status = 'PAUSED';
|
||||
this.toastr.success('Job paused successfully');
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error pausing job:', error);
|
||||
this.toastr.error('Failed to pause job');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Method to resume a job
|
||||
resumeJob() {
|
||||
if (!this.schedulerJob || !this.schedulerJob.id) {
|
||||
this.toastr.error('No job selected');
|
||||
return;
|
||||
}
|
||||
|
||||
this.schedulerService.resumeJob(this.schedulerJob.id).subscribe(
|
||||
(response: any) => {
|
||||
this.schedulerJob.status = 'RUNNING';
|
||||
this.toastr.success('Job resumed successfully');
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error resuming job:', error);
|
||||
this.toastr.error('Failed to resume job');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Method to stop a job
|
||||
stopJob() {
|
||||
if (!this.schedulerJob || !this.schedulerJob.id) {
|
||||
this.toastr.error('No job selected');
|
||||
return;
|
||||
}
|
||||
|
||||
this.schedulerService.stopJob(this.schedulerJob.id).subscribe(
|
||||
(response: any) => {
|
||||
this.schedulerJob.status = 'STOPPED';
|
||||
this.toastr.success('Job stopped successfully');
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error stopping job:', error);
|
||||
this.toastr.error('Failed to stop job');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Method to restart a stopped job
|
||||
restartJob() {
|
||||
if (!this.schedulerJob || !this.schedulerJob.id) {
|
||||
this.toastr.error('No job selected');
|
||||
return;
|
||||
}
|
||||
|
||||
// To restart a job, we need to create a new job with the same parameters
|
||||
const jobData = {
|
||||
name: this.schedulerJob.name,
|
||||
status: 'RUNNING',
|
||||
description: this.schedulerJob.description,
|
||||
jobType: this.schedulerJob.jobType,
|
||||
lakeid: this.schedulerJob.lakeid
|
||||
};
|
||||
|
||||
this.schedulerService.createJob(jobData).subscribe(
|
||||
(job: any) => {
|
||||
this.schedulerJob = job;
|
||||
this.toastr.success('Job restarted successfully');
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error restarting job:', error);
|
||||
this.toastr.error('Failed to restart job');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Method to close scheduler modal
|
||||
closeSchedulerModal() {
|
||||
this.showSchedulerModal = false;
|
||||
this.schedulerJob = null;
|
||||
this.selectedSchedulerItem = null;
|
||||
}
|
||||
|
||||
// Method to get status badge class
|
||||
getStatusBadgeClass(status: string): string {
|
||||
switch (status) {
|
||||
case 'RUNNING':
|
||||
return 'badge-success';
|
||||
case 'PAUSED':
|
||||
return 'badge-warning';
|
||||
case 'STOPPED':
|
||||
return 'badge-danger';
|
||||
default:
|
||||
return 'badge-light';
|
||||
}
|
||||
}
|
||||
|
||||
// Method to toggle webhook for a data lake item
|
||||
toggleWebhook(item: any) {
|
||||
// Call the enableWebhook service method
|
||||
this.mainService.enableWebhook(item.id).subscribe(
|
||||
(updatedItem: any) => {
|
||||
// Update the local data with the response from the server
|
||||
const index = this.product.findIndex(p => p.id === item.id);
|
||||
if (index !== -1) {
|
||||
this.product[index] = {...updatedItem};
|
||||
}
|
||||
|
||||
// Show success message based on the new webhook status
|
||||
if (updatedItem.webhook_url && updatedItem.webhook_url.trim() !== '') {
|
||||
this.toastr.success('Webhook enabled successfully');
|
||||
} else {
|
||||
this.toastr.success('Webhook disabled successfully');
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error toggling webhook:', error);
|
||||
this.toastr.error('Failed to toggle webhook');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Method to copy webhook URL to clipboard
|
||||
copyWebhookUrl(webhookUrl: string) {
|
||||
this.copyToClipboard(webhookUrl);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,6 +42,12 @@ export class Data_lakeservice{
|
||||
return this.apiRequest.get(apiUrl);
|
||||
}
|
||||
|
||||
// Method to fetch blending keys for a specific lake ID
|
||||
fetchBlendingKeys(lakeId: number): Observable<any> {
|
||||
const _http = `${this.baseURL}/keys/${lakeId}`;
|
||||
return this.apiRequest.get(_http);
|
||||
}
|
||||
|
||||
// Method to update calculated fields for a data lake item
|
||||
updateCalculatedFields(id: number, calculatedFieldJson: string, isCalculatedField: boolean): Observable<any> {
|
||||
const _http = this.baseURL + "/" + id;
|
||||
@@ -51,5 +57,11 @@ export class Data_lakeservice{
|
||||
};
|
||||
return this.apiRequest.put(_http, data);
|
||||
}
|
||||
|
||||
// Method to enable webhook for a data lake item
|
||||
enableWebhook(id: number): Observable<any> {
|
||||
const _http = `${this.baseURL}/webhook/${id}`;
|
||||
return this.apiRequest.get(_http);
|
||||
}
|
||||
// updateaction
|
||||
}
|
||||
@@ -1,6 +1,15 @@
|
||||
<div class="cron-job-builder">
|
||||
<h4>Cron Job Builder</h4>
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
|
||||
<div class="form-group">
|
||||
<label>Second</label>
|
||||
<select class="form-control" [(ngModel)]="second" (change)="onFieldChange()">
|
||||
<option *ngFor="let option of secondOptions" [value]="option.value">{{ option.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
|
||||
<div class="form-group">
|
||||
<label>Minute</label>
|
||||
@@ -28,7 +37,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-lg-3 clr-col-md-6 clr-col-sm-6 clr-col-12">
|
||||
<div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
|
||||
<div class="form-group">
|
||||
<label>Month</label>
|
||||
<select class="form-control" [(ngModel)]="month" (change)="onFieldChange()">
|
||||
@@ -37,7 +46,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-lg-3 clr-col-md-6 clr-col-sm-12 clr-col-12">
|
||||
<div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
|
||||
<div class="form-group">
|
||||
<label>Day of Week</label>
|
||||
<select class="form-control" [(ngModel)]="dayOfWeek" (change)="onFieldChange()">
|
||||
|
||||
@@ -10,7 +10,8 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
|
||||
@Input() instanceId: string = ''; // Unique identifier for each instance
|
||||
@Output() cronExpressionChange = new EventEmitter<string>();
|
||||
|
||||
// Cron job fields
|
||||
// Cron job fields (now starting with seconds)
|
||||
second: string = '*';
|
||||
minute: string = '*';
|
||||
hour: string = '*';
|
||||
dayOfMonth: string = '*';
|
||||
@@ -21,6 +22,7 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
|
||||
cronDescription: string = '';
|
||||
|
||||
// Options for selectors
|
||||
secondOptions: any[] = [];
|
||||
minuteOptions: any[] = [];
|
||||
hourOptions: any[] = [];
|
||||
dayOfMonthOptions: any[] = [];
|
||||
@@ -29,9 +31,10 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
|
||||
|
||||
ngOnInit() {
|
||||
// Initialize options for each instance
|
||||
this.minuteOptions = this.generateOptions(0, 59);
|
||||
this.hourOptions = this.generateOptions(0, 23);
|
||||
this.dayOfMonthOptions = this.generateOptions(1, 31);
|
||||
this.secondOptions = this.generateOptions(0, 59, 'second');
|
||||
this.minuteOptions = this.generateOptions(0, 59, 'minute');
|
||||
this.hourOptions = this.generateOptions(0, 23, 'hour');
|
||||
this.dayOfMonthOptions = this.generateOptions(1, 31, 'day');
|
||||
this.monthOptions = [
|
||||
{ value: '*', label: 'Every month' },
|
||||
{ value: '1', label: 'January' },
|
||||
@@ -73,8 +76,8 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
|
||||
}
|
||||
}
|
||||
|
||||
generateOptions(start: number, end: number): any[] {
|
||||
const options = [{ value: '*', label: `Every (${start === 0 ? '0' : start}-${end})` }];
|
||||
generateOptions(start: number, end: number, type: string): any[] {
|
||||
const options = [{ value: '*', label: `Every ${type} (${start === 0 ? '0' : start}-${end})` }];
|
||||
for (let i = start; i <= end; i++) {
|
||||
options.push({ value: i.toString(), label: i.toString() });
|
||||
}
|
||||
@@ -83,7 +86,16 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
|
||||
|
||||
parseCronExpression(expression: string) {
|
||||
const parts = expression.split(' ');
|
||||
if (parts.length >= 5) {
|
||||
if (parts.length >= 6) { // Now expecting 6 parts with seconds
|
||||
this.second = parts[0];
|
||||
this.minute = parts[1];
|
||||
this.hour = parts[2];
|
||||
this.dayOfMonth = parts[3];
|
||||
this.month = parts[4];
|
||||
this.dayOfWeek = parts[5];
|
||||
} else if (parts.length >= 5) { // For backward compatibility with 5-part cron expressions
|
||||
// Default seconds to 0 if not provided
|
||||
this.second = '0';
|
||||
this.minute = parts[0];
|
||||
this.hour = parts[1];
|
||||
this.dayOfMonth = parts[2];
|
||||
@@ -95,19 +107,33 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
|
||||
generateDescription() {
|
||||
let description = 'Runs ';
|
||||
|
||||
// Second description
|
||||
if (this.second === '*') {
|
||||
description += 'every second';
|
||||
} else if (this.second.includes('/')) {
|
||||
const interval = this.second.split('/')[1];
|
||||
description += `every ${interval} seconds`;
|
||||
} else {
|
||||
description += `at second ${this.second}`;
|
||||
}
|
||||
|
||||
// Minute description
|
||||
if (this.minute === '*') {
|
||||
description += 'every minute';
|
||||
if (this.second === '*') {
|
||||
description += '';
|
||||
} else {
|
||||
description += ' of every minute';
|
||||
}
|
||||
} else if (this.minute.includes('/')) {
|
||||
const interval = this.minute.split('/')[1];
|
||||
description += `every ${interval} minutes`;
|
||||
description += ` of every ${interval} minutes`;
|
||||
} else {
|
||||
description += `at minute ${this.minute}`;
|
||||
description += ` at minute ${this.minute}`;
|
||||
}
|
||||
|
||||
// Hour description
|
||||
if (this.hour === '*') {
|
||||
if (this.minute === '*') {
|
||||
if (this.minute === '*' && this.second === '*') {
|
||||
description += '';
|
||||
} else {
|
||||
description += ' past every hour';
|
||||
@@ -146,21 +172,23 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
|
||||
}
|
||||
|
||||
// Special case for simple patterns
|
||||
if (this.minute === '0' && this.hour === '0' && this.dayOfMonth === '1' && this.month === '*' && this.dayOfWeek === '*') {
|
||||
if (this.second === '0' && this.minute === '0' && this.hour === '0' && this.dayOfMonth === '1' && this.month === '*' && this.dayOfWeek === '*') {
|
||||
description = 'Runs at midnight on the first day of every month';
|
||||
} else if (this.minute === '0' && this.hour === '0' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
|
||||
} else if (this.second === '0' && this.minute === '0' && this.hour === '0' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
|
||||
description = 'Runs at midnight every day';
|
||||
} else if (this.minute === '0' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
|
||||
} else if (this.second === '0' && this.minute === '0' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
|
||||
description = 'Runs at the top of every hour';
|
||||
} else if (this.minute === '*' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
|
||||
description = 'Runs every minute';
|
||||
} else if (this.second === '0' && this.minute === '*' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
|
||||
description = 'Runs at the top of every minute';
|
||||
} else if (this.second === '*' && this.minute === '*' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
|
||||
description = 'Runs every second';
|
||||
}
|
||||
|
||||
this.cronDescription = description;
|
||||
}
|
||||
|
||||
buildCronExpression() {
|
||||
const expression = `${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`;
|
||||
const expression = `${this.second} ${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`;
|
||||
this.cronExpressionChange.emit(expression);
|
||||
this.generateDescription(); // Update description when expression changes
|
||||
return expression;
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from "rxjs";
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import { ApiRequestService } from "src/app/services/api/api-request.service";
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class DataLakeSchedulerService {
|
||||
private baseURL = "scheduler";
|
||||
|
||||
constructor(
|
||||
private http: HttpClient,
|
||||
private apiRequest: ApiRequestService,
|
||||
) { }
|
||||
|
||||
// Get job by lake ID
|
||||
getJobByLakeId(lakeId: number): Observable<any> {
|
||||
const _http = `${this.baseURL}/lake/${lakeId}`;
|
||||
return this.apiRequest.get(_http);
|
||||
}
|
||||
|
||||
// Create a new job
|
||||
createJob(jobData: any): Observable<any> {
|
||||
const _http = `${this.baseURL}/create`;
|
||||
return this.apiRequest.post(_http, jobData);
|
||||
}
|
||||
|
||||
// Pause a job
|
||||
pauseJob(jobId: number): Observable<any> {
|
||||
const _http = `${this.baseURL}/pause/${jobId}`;
|
||||
return this.apiRequest.post(_http, {});
|
||||
}
|
||||
|
||||
// Resume a job
|
||||
resumeJob(jobId: number): Observable<any> {
|
||||
const _http = `${this.baseURL}/resume/${jobId}`;
|
||||
return this.apiRequest.post(_http, {});
|
||||
}
|
||||
|
||||
// Stop a job
|
||||
stopJob(jobId: number): Observable<any> {
|
||||
const _http = `${this.baseURL}/stop/${jobId}`;
|
||||
return this.apiRequest.delete(_http);
|
||||
}
|
||||
}
|
||||
@@ -1,61 +1,67 @@
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong">
|
||||
<li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
|
||||
<li><a href="javascript://"><clr-icon shape="dashboard"></clr-icon> {{ 'Dashboard_builder' | translate }}</a></li>
|
||||
</ol>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="dg-wrapper">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-8">
|
||||
<h3>{{ 'Dashboard_builder' | translate }}</h3>
|
||||
</div>
|
||||
<div class="clr-col-4" style="text-align: right;">
|
||||
<button class="btn btn-success" [routerLink]="['/cns-portal/shield-dashboard']">
|
||||
<clr-icon shape="shield"></clr-icon>Shield Dashboard
|
||||
</button>
|
||||
<button id="add" class="btn btn-primary" (click)="gotorunner()">
|
||||
<clr-icon shape="grid-view"></clr-icon>{{ 'Dashboard_runner' | translate }}
|
||||
</button>
|
||||
<button class="btn btn-outline" (click)="onExport()">
|
||||
<clr-icon shape="export"></clr-icon> {{ 'EXPORT_XLSX' | translate }}
|
||||
</button>
|
||||
<button id="add" class="btn btn-primary" (click)="gotoadd()">
|
||||
<clr-icon shape="plus"></clr-icon> {{ 'ADD' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<clr-datagrid [clrDgLoading]="loading">
|
||||
<clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>{{ 'Loading' | translate }} ...... </clr-spinner></ng-template>
|
||||
<div *ngIf="error;else loadingSpinner">{{error}}</div></clr-dg-placeholder>
|
||||
|
||||
<clr-dg-column [clrDgField]="''">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'Go_to' | translate }}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'dashboard_name'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'Dashboard_Name' | translate }}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'description'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'Description' | translate }}
|
||||
</ng-container>
|
||||
</clr-dg-column >
|
||||
<clr-dg-column [clrDgField]="'secuirity_profile'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'Security_Profile' | translate }}
|
||||
</ng-container>
|
||||
</clr-dg-column >
|
||||
<clr-dg-column [clrDgField]="'add_to_home'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'Add_to_home' | translate }}
|
||||
</ng-container>
|
||||
</clr-dg-column >
|
||||
<!-- <clr-dg-column [clrDgField]="'formType'">
|
||||
<li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"><clr-icon shape="home"></clr-icon></a></li>
|
||||
<li><a href="javascript://"><clr-icon shape="dashboard"></clr-icon> {{ 'Dashboard_builder' | translate }}</a></li>
|
||||
</ol>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="dg-wrapper">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-8">x
|
||||
<h3>{{ 'Dashboard_builder' | translate }}</h3>
|
||||
</div>
|
||||
<div class="clr-col-4" style="text-align: right;">
|
||||
<button class="btn btn-success" [routerLink]="['/cns-portal/shield-dashboard']">
|
||||
<clr-icon shape="shield"></clr-icon>Shield Dashboard
|
||||
</button>
|
||||
<button id="add" class="btn btn-primary" (click)="gotorunner()">
|
||||
<clr-icon shape="grid-view"></clr-icon>{{ 'Dashboard_runner' | translate }}
|
||||
</button>
|
||||
<!-- Add Chart Config button -->
|
||||
<button class="btn btn-primary" (click)="openChartConfig()">
|
||||
<clr-icon shape="cog"></clr-icon> Chart Config
|
||||
</button>
|
||||
<button class="btn btn-outline" (click)="onExport()">
|
||||
<clr-icon shape="export"></clr-icon> {{ 'EXPORT_XLSX' | translate }}
|
||||
</button>
|
||||
<button id="add" class="btn btn-primary" (click)="gotoadd()">
|
||||
<clr-icon shape="plus"></clr-icon> {{ 'ADD' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<clr-datagrid [clrDgLoading]="loading">
|
||||
<clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>{{ 'Loading' | translate }} ......
|
||||
</clr-spinner></ng-template>
|
||||
<div *ngIf="error;else loadingSpinner">{{error}}</div>
|
||||
</clr-dg-placeholder>
|
||||
|
||||
<clr-dg-column [clrDgField]="''">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'Go_to' | translate }}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'dashboard_name'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'Dashboard_Name' | translate }}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'description'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'Description' | translate }}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'secuirity_profile'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'Security_Profile' | translate }}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'add_to_home'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'Add_to_home' | translate }}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<!-- <clr-dg-column [clrDgField]="'formType'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Build Status
|
||||
</ng-container>
|
||||
@@ -65,81 +71,86 @@
|
||||
Testing
|
||||
</ng-container>
|
||||
</clr-dg-column > -->
|
||||
<clr-dg-column [clrDgField]="'action'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'Action' | translate }}
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let user of data?.slice()?.reverse();" [clrDgItem]="user">
|
||||
<clr-dg-cell><span class="label label-light-blue" style="display: inline;margin-left: 10px; cursor: pointer;" (click)="goToEdit(user.id)"> {{ 'SET_UP' | translate }}</span></clr-dg-cell>
|
||||
<clr-dg-cell>{{user.dashboard_name}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.description}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.secuirity_profile}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.add_to_home}}</clr-dg-cell>
|
||||
<clr-dg-column [clrDgField]="'action'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'Action' | translate }}
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
<!-- <clr-dg-cell><input type="radio" id="cb1" class="dots" [ngStyle]="{'background-color': user.build == true ? 'green' : 'red'}"></clr-dg-cell>
|
||||
<clr-dg-row *clrDgItems="let user of data?.slice()?.reverse();" [clrDgItem]="user">
|
||||
<clr-dg-cell><span class="label label-light-blue" style="display: inline;margin-left: 10px; cursor: pointer;"
|
||||
(click)="goToEdit(user.id)"> {{ 'SET_UP' | translate }}</span></clr-dg-cell>
|
||||
<clr-dg-cell>{{user.dashboard_name}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.description}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.secuirity_profile}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.add_to_home}}</clr-dg-cell>
|
||||
|
||||
<!-- <clr-dg-cell><input type="radio" id="cb1" class="dots" [ngStyle]="{'background-color': user.build == true ? 'green' : 'red'}"></clr-dg-cell>
|
||||
<clr-dg-cell>{{user.testing}}</clr-dg-cell> -->
|
||||
<clr-dg-cell>
|
||||
<!-- <span style="cursor: pointer; padding: 10px; "><clr-icon shape="form" (click)="goToEdit(user.id)" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span> -->
|
||||
<a href="javascript:void(0)" style="padding-right: 10px;" role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm tooltip-top-left">
|
||||
<span style="cursor: pointer;"><clr-icon shape="trash" (click)="onDelete(user)" class="red is-error" style="color: red;"></clr-icon></span>
|
||||
<span class="tooltip-content">{{ 'Delete' | translate }}</span>
|
||||
</a>
|
||||
|
||||
<clr-signpost>
|
||||
<span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span>
|
||||
<clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
|
||||
<h5 style="margin-top: 0">{{ 'Who_Column' | translate }}</h5>
|
||||
<div>{{ 'Account_ID' | translate }}: <code class="clr-code">{{ user.accountId }}</code></div>
|
||||
<div>{{ 'Created_At' | translate }}: <code class="clr-code">{{ user.createdAt | date }}</code></div>
|
||||
<div>{{ 'Created_By' | translate }}: <code class="clr-code">{{ user.createdBy }}</code></div>
|
||||
<div>{{ 'Updated_At' | translate }}: <code class="clr-code">{{ user.updatedAt | date }}</code></div>
|
||||
<div>{{ 'Updated_By' | translate }}: <code class="clr-code">{{ user.updatedBy }}</code></div>
|
||||
</clr-signpost-content>
|
||||
</clr-signpost>
|
||||
|
||||
</clr-dg-cell>
|
||||
<clr-dg-action-overflow>
|
||||
<button class="action-item" (click)="goToEditData(user.id)">{{ 'Edit' | translate }} <clr-icon shape="edit" class="is-error"></clr-icon></button>
|
||||
<!-- <button class="action-item" (click)="onDelete(user)">Delete<clr-icon shape="trash" class="is-error"></clr-icon></button> -->
|
||||
</clr-dg-action-overflow>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{ 'Users_per_page' | translate }}</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
{{ 'of' | translate }} {{pagination.totalItems}} {{ 'users' | translate }}
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
<clr-dg-cell>
|
||||
<!-- <span style="cursor: pointer; padding: 10px; "><clr-icon shape="form" (click)="goToEdit(user.id)" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span> -->
|
||||
<a href="javascript:void(0)" style="padding-right: 10px;" role="tooltip" aria-haspopup="true"
|
||||
class="tooltip tooltip-sm tooltip-top-left">
|
||||
<span style="cursor: pointer;"><clr-icon shape="trash" (click)="onDelete(user)" class="red is-error"
|
||||
style="color: red;"></clr-icon></span>
|
||||
<span class="tooltip-content">{{ 'Delete' | translate }}</span>
|
||||
</a>
|
||||
|
||||
<clr-signpost>
|
||||
<span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success"
|
||||
style="color: rgb(0, 130, 236);"></clr-icon></span>
|
||||
<clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
|
||||
<h5 style="margin-top: 0">{{ 'Who_Column' | translate }}</h5>
|
||||
<div>{{ 'Account_ID' | translate }}: <code class="clr-code">{{ user.accountId }}</code></div>
|
||||
<div>{{ 'Created_At' | translate }}: <code class="clr-code">{{ user.createdAt | date }}</code></div>
|
||||
<div>{{ 'Created_By' | translate }}: <code class="clr-code">{{ user.createdBy }}</code></div>
|
||||
<div>{{ 'Updated_At' | translate }}: <code class="clr-code">{{ user.updatedAt | date }}</code></div>
|
||||
<div>{{ 'Updated_By' | translate }}: <code class="clr-code">{{ user.updatedBy }}</code></div>
|
||||
</clr-signpost-content>
|
||||
</clr-signpost>
|
||||
|
||||
</clr-dg-cell>
|
||||
<clr-dg-action-overflow>
|
||||
<button class="action-item" (click)="goToEditData(user.id)">{{ 'Edit' | translate }} <clr-icon shape="edit"
|
||||
class="is-error"></clr-icon></button>
|
||||
<!-- <button class="action-item" (click)="onDelete(user)">Delete<clr-icon shape="trash" class="is-error"></clr-icon></button> -->
|
||||
</clr-dg-action-overflow>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{ 'Users_per_page' | translate }}</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
{{ 'of' | translate }} {{pagination.totalItems}} {{ 'users' | translate }}
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<clr-modal [(clrModalOpen)]="addModall" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
<div class="modal-body">
|
||||
<div class="s-order-dash-pg">
|
||||
<div class="chart-box" id="word1" (click)="gotoadd()"><br>
|
||||
<img style="margin: auto; display: block;" src="/assets/images/fromscratch.png" height="90" width="90">
|
||||
<h5 class="center"> <b>{{ 'Start_from_scratch' | translate }}</b> </h5>
|
||||
</div>
|
||||
<div class="chart-box" id="word1"><br>
|
||||
<img style="margin: auto; display: block;" src="/assets/images/copytemplate.png" height="90" width="90">
|
||||
<h5 class="center"> <b>{{ 'Import_from_template' | translate }}</b> </h5>
|
||||
</div>
|
||||
<div class="chart-box" id="word1"><br>
|
||||
<img style="margin: auto; display: block;" src="/assets/images/database.png" height="90" width="90">
|
||||
<h5 class="center"> <b>{{ 'Import_from_public_project' | translate }}</b> </h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<clr-modal [(clrModalOpen)]="addModall" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
<div class="modal-body">
|
||||
<div class="s-order-dash-pg">
|
||||
<div class="chart-box" id="word1" (click)="gotoadd()"><br>
|
||||
<img style="margin: auto; display: block;" src="/assets/images/fromscratch.png" height="90" width="90">
|
||||
<h5 class="center"> <b>{{ 'Start_from_scratch' | translate }}</b> </h5>
|
||||
</div>
|
||||
<div class="chart-box" id="word1" ><br>
|
||||
<img style="margin: auto; display: block;" src="/assets/images/copytemplate.png" height="90" width="90">
|
||||
<h5 class="center"> <b>{{ 'Import_from_template' | translate }}</b> </h5>
|
||||
</div>
|
||||
<div class="chart-box" id="word1"><br>
|
||||
<img style="margin: auto; display: block;" src="/assets/images/database.png" height="90" width="90">
|
||||
<h5 class="center"> <b>{{ 'Import_from_public_project' | translate }}</b> </h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
<clr-modal [(clrModalOpen)]="modalDelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
<div class="modal-body" *ngIf="rowSelected.id">
|
||||
<h1 class="delete">{{ 'Are_you_sure_want_to_delete' | translate }}</h1>
|
||||
<h2 class="heading">{{rowSelected.id}}</h2>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="modalDelete = false">{{ 'Cancel' | translate }}</button>
|
||||
<button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary" >{{ 'Delete' | translate }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</clr-modal>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
<clr-modal [(clrModalOpen)]="modalDelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
<div class="modal-body" *ngIf="rowSelected.id">
|
||||
<h1 class="delete">{{ 'Are_you_sure_want_to_delete' | translate }}</h1>
|
||||
<h2 class="heading">{{rowSelected.id}}</h2>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="modalDelete = false">{{ 'Cancel' | translate }}</button>
|
||||
<button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary">{{ 'Delete' | translate }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</clr-modal>
|
||||
@@ -24,6 +24,7 @@ export class AllnewdashComponent implements OnInit {
|
||||
projectname;
|
||||
projectId;
|
||||
error;
|
||||
chartConfigManagerOpen = false;
|
||||
constructor(
|
||||
private router : Router,
|
||||
private route: ActivatedRoute,private dashboardService : DashboardService,
|
||||
@@ -121,4 +122,9 @@ export class AllnewdashComponent implements OnInit {
|
||||
// this.router.navigate(['../editdashn'],{relativeTo:this.route});
|
||||
// }
|
||||
|
||||
// Add method to open chart configuration manager
|
||||
openChartConfig(): void {
|
||||
this.router.navigate(['../chart-types'],{relativeTo:this.route});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,630 @@
|
||||
<div class="chart-config-manager">
|
||||
<h2>Chart Configuration Manager</h2>
|
||||
|
||||
<!-- Chart Types Section -->
|
||||
<clr-tabs>
|
||||
<clr-tab>
|
||||
<button clrTabLink>Chart Types</button>
|
||||
<clr-tab-content>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Chart Types</h3>
|
||||
<button class="btn btn-sm btn-primary" (click)="showAddChartTypeForm = true">
|
||||
Add Chart Type
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Add Chart Type Form -->
|
||||
<div class="card-block" *ngIf="showAddChartTypeForm">
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="newChartType.name" name="chartTypeName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Display Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="newChartType.displayName" name="chartTypeDisplayName" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>Description</label>
|
||||
<textarea clrTextarea [(ngModel)]="newChartType.description" name="chartTypeDescription"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Active</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="newChartType.isActive" name="chartTypeIsActive" />
|
||||
<label>Active</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="createChartType()" [disabled]="!newChartType.name">Save</button>
|
||||
<button class="btn" (click)="showAddChartTypeForm = false">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Chart Types Table -->
|
||||
<div class="card-block">
|
||||
<clr-datagrid>
|
||||
<clr-dg-column>Name</clr-dg-column>
|
||||
<clr-dg-column>Display Name</clr-dg-column>
|
||||
<clr-dg-column>Description</clr-dg-column>
|
||||
<clr-dg-column>Status</clr-dg-column>
|
||||
<clr-dg-column>Actions</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let chartType of chartTypes" [clrDgItem]="chartType">
|
||||
<clr-dg-cell>{{chartType.name}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{chartType.displayName}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{chartType.description}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<span class="label" [class.label-success]="chartType.isActive" [class.label-danger]="!chartType.isActive">
|
||||
{{chartType.isActive ? 'Active' : 'Inactive'}}
|
||||
</span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<button class="btn btn-sm btn-icon" (click)="selectChartTypeForEdit(chartType)">
|
||||
<cds-icon shape="pencil"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteChartType(chartType.id)">
|
||||
<cds-icon shape="trash"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="onChartTypeSelect(chartType)">
|
||||
<cds-icon shape="eye"></cds-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{chartTypes.length}} chart types
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<!-- Edit Chart Type Form -->
|
||||
<div class="card-block" *ngIf="selectedChartType">
|
||||
<h4>Edit Chart Type</h4>
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedChartType.name" name="editChartTypeName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Display Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedChartType.displayName" name="editChartTypeDisplayName" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>Description</label>
|
||||
<textarea clrTextarea [(ngModel)]="selectedChartType.description" name="editChartTypeDescription"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Active</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="selectedChartType.isActive" name="editChartTypeIsActive" />
|
||||
<label>Active</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="updateChartType()" [disabled]="!selectedChartType.name">Update</button>
|
||||
<button class="btn" (click)="selectedChartType = null">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</clr-tab-content>
|
||||
</clr-tab>
|
||||
|
||||
<!-- UI Components Section -->
|
||||
<clr-tab *ngIf="selectedChartType">
|
||||
<button clrTabLink>UI Components</button>
|
||||
<clr-tab-content>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>UI Components for {{selectedChartType?.name}}</h3>
|
||||
<button class="btn btn-sm btn-primary" (click)="showAddUiComponentForm = true">
|
||||
Add UI Component
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Add UI Component Form -->
|
||||
<div class="card-block" *ngIf="showAddUiComponentForm">
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Component Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="newUiComponent.componentName" name="componentName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Component Type</label>
|
||||
<input clrInput type="text" [(ngModel)]="newUiComponent.componentType" name="componentType" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Display Label</label>
|
||||
<input clrInput type="text" [(ngModel)]="newUiComponent.displayLabel" name="displayLabel" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Placeholder</label>
|
||||
<input clrInput type="text" [(ngModel)]="newUiComponent.placeholder" name="placeholder" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Sort Order</label>
|
||||
<input clrInput type="number" [(ngModel)]="newUiComponent.sortOrder" name="sortOrder" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Required</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="newUiComponent.isRequired" name="isRequired" />
|
||||
<label>Required</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="createUiComponent()" [disabled]="!newUiComponent.componentName">Save</button>
|
||||
<button class="btn" (click)="showAddUiComponentForm = false">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- UI Components Table -->
|
||||
<div class="card-block">
|
||||
<clr-datagrid>
|
||||
<clr-dg-column>Component Name</clr-dg-column>
|
||||
<clr-dg-column>Component Type</clr-dg-column>
|
||||
<clr-dg-column>Display Label</clr-dg-column>
|
||||
<clr-dg-column>Placeholder</clr-dg-column>
|
||||
<clr-dg-column>Required</clr-dg-column>
|
||||
<clr-dg-column>Sort Order</clr-dg-column>
|
||||
<clr-dg-column>Actions</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let uiComponent of uiComponents" [clrDgItem]="uiComponent">
|
||||
<clr-dg-cell>{{uiComponent.componentName}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{uiComponent.componentType}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{uiComponent.displayLabel}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{uiComponent.placeholder}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<span class="label" [class.label-success]="uiComponent.isRequired" [class.label-danger]="!uiComponent.isRequired">
|
||||
{{uiComponent.isRequired ? 'Yes' : 'No'}}
|
||||
</span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>{{uiComponent.sortOrder}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<button class="btn btn-sm btn-icon" (click)="selectUiComponentForEdit(uiComponent)">
|
||||
<cds-icon shape="pencil"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteUiComponent(uiComponent.id)">
|
||||
<cds-icon shape="trash"></cds-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{uiComponents.length}} UI components
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<!-- Edit UI Component Form -->
|
||||
<div class="card-block" *ngIf="selectedUiComponent">
|
||||
<h4>Edit UI Component</h4>
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Component Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedUiComponent.componentName" name="editComponentName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Component Type</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedUiComponent.componentType" name="editComponentType" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Display Label</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedUiComponent.displayLabel" name="editDisplayLabel" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Placeholder</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedUiComponent.placeholder" name="editPlaceholder" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Sort Order</label>
|
||||
<input clrInput type="number" [(ngModel)]="selectedUiComponent.sortOrder" name="editSortOrder" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Required</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="selectedUiComponent.isRequired" name="editIsRequired" />
|
||||
<label>Required</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="updateUiComponent()" [disabled]="!selectedUiComponent.componentName">Update</button>
|
||||
<button class="btn" (click)="selectedUiComponent = null">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</clr-tab-content>
|
||||
</clr-tab>
|
||||
|
||||
<!-- Component Properties Section -->
|
||||
<clr-tab *ngIf="selectedUiComponent">
|
||||
<button clrTabLink>Component Properties</button>
|
||||
<clr-tab-content>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Properties for {{selectedUiComponent?.componentName}}</h3>
|
||||
<button class="btn btn-sm btn-primary" (click)="showAddComponentPropertyForm = true">
|
||||
Add Property
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Add Component Property Form -->
|
||||
<div class="card-block" *ngIf="showAddComponentPropertyForm">
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Property Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="newComponentProperty.propertyName" name="propertyName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Property Value</label>
|
||||
<input clrInput type="text" [(ngModel)]="newComponentProperty.propertyValue" name="propertyValue" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Property Type</label>
|
||||
<input clrInput type="text" [(ngModel)]="newComponentProperty.propertyType" name="propertyType" />
|
||||
</clr-input-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="createComponentProperty()" [disabled]="!newComponentProperty.propertyName">Save</button>
|
||||
<button class="btn" (click)="showAddComponentPropertyForm = false">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Component Properties Table -->
|
||||
<div class="card-block">
|
||||
<clr-datagrid>
|
||||
<clr-dg-column>Property Name</clr-dg-column>
|
||||
<clr-dg-column>Property Value</clr-dg-column>
|
||||
<clr-dg-column>Property Type</clr-dg-column>
|
||||
<clr-dg-column>Actions</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let property of componentProperties" [clrDgItem]="property">
|
||||
<clr-dg-cell>{{property.propertyName}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{property.propertyValue}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{property.propertyType}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<button class="btn btn-sm btn-icon" (click)="selectComponentPropertyForEdit(property)">
|
||||
<cds-icon shape="pencil"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteComponentProperty(property.id)">
|
||||
<cds-icon shape="trash"></cds-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{componentProperties.length}} properties
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<!-- Edit Component Property Form -->
|
||||
<div class="card-block" *ngIf="selectedComponentProperty">
|
||||
<h4>Edit Component Property</h4>
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Property Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyName" name="editPropertyName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Property Value</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyValue" name="editPropertyValue" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Property Type</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyType" name="editPropertyType" />
|
||||
</clr-input-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="updateComponentProperty()" [disabled]="!selectedComponentProperty.propertyName">Update</button>
|
||||
<button class="btn" (click)="selectedComponentProperty = null">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</clr-tab-content>
|
||||
</clr-tab>
|
||||
|
||||
<!-- Chart Templates Section -->
|
||||
<clr-tab *ngIf="selectedChartType">
|
||||
<button clrTabLink>Chart Templates</button>
|
||||
<clr-tab-content>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Templates for {{selectedChartType?.name}}</h3>
|
||||
<button class="btn btn-sm btn-primary" (click)="showAddChartTemplateForm = true">
|
||||
Add Template
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Add Chart Template Form -->
|
||||
<div class="card-block" *ngIf="showAddChartTemplateForm">
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Template Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="newChartTemplate.templateName" name="templateName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>HTML Template</label>
|
||||
<textarea clrTextarea [(ngModel)]="newChartTemplate.templateHtml" name="templateHtml" rows="5"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>CSS Template</label>
|
||||
<textarea clrTextarea [(ngModel)]="newChartTemplate.templateCss" name="templateCss" rows="5"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Default</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="newChartTemplate.isDefault" name="isDefault" />
|
||||
<label>Default Template</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="createChartTemplate()" [disabled]="!newChartTemplate.templateName">Save</button>
|
||||
<button class="btn" (click)="showAddChartTemplateForm = false">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Chart Templates Table -->
|
||||
<div class="card-block">
|
||||
<clr-datagrid>
|
||||
<clr-dg-column>Template Name</clr-dg-column>
|
||||
<clr-dg-column>Is Default</clr-dg-column>
|
||||
<clr-dg-column>Actions</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let template of chartTemplates" [clrDgItem]="template">
|
||||
<clr-dg-cell>{{template.templateName}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<span class="label" [class.label-success]="template.isDefault" [class.label-danger]="!template.isDefault">
|
||||
{{template.isDefault ? 'Yes' : 'No'}}
|
||||
</span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<button class="btn btn-sm btn-icon" (click)="selectChartTemplateForEdit(template)">
|
||||
<cds-icon shape="pencil"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteChartTemplate(template.id)">
|
||||
<cds-icon shape="trash"></cds-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{chartTemplates.length}} templates
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<!-- Edit Chart Template Form -->
|
||||
<div class="card-block" *ngIf="selectedChartTemplate">
|
||||
<h4>Edit Chart Template</h4>
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Template Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedChartTemplate.templateName" name="editTemplateName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>HTML Template</label>
|
||||
<textarea clrTextarea [(ngModel)]="selectedChartTemplate.templateHtml" name="editTemplateHtml" rows="5"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>CSS Template</label>
|
||||
<textarea clrTextarea [(ngModel)]="selectedChartTemplate.templateCss" name="editTemplateCss" rows="5"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Default</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="selectedChartTemplate.isDefault" name="editIsDefault" />
|
||||
<label>Default Template</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="updateChartTemplate()" [disabled]="!selectedChartTemplate.templateName">Update</button>
|
||||
<button class="btn" (click)="selectedChartTemplate = null">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</clr-tab-content>
|
||||
</clr-tab>
|
||||
|
||||
<!-- Dynamic Fields Section -->
|
||||
<clr-tab *ngIf="selectedChartType">
|
||||
<button clrTabLink>Dynamic Fields</button>
|
||||
<clr-tab-content>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Dynamic Fields for {{selectedChartType?.name}}</h3>
|
||||
<button class="btn btn-sm btn-primary" (click)="showAddDynamicFieldForm = true">
|
||||
Add Field
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Add Dynamic Field Form -->
|
||||
<div class="card-block" *ngIf="showAddDynamicFieldForm">
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Field Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="newDynamicField.fieldName" name="fieldName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Field Label</label>
|
||||
<input clrInput type="text" [(ngModel)]="newDynamicField.fieldLabel" name="fieldLabel" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Field Type</label>
|
||||
<input clrInput type="text" [(ngModel)]="newDynamicField.fieldType" name="fieldType" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>Field Options</label>
|
||||
<textarea clrTextarea [(ngModel)]="newDynamicField.fieldOptions" name="fieldOptions"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Sort Order</label>
|
||||
<input clrInput type="number" [(ngModel)]="newDynamicField.sortOrder" name="fieldSortOrder" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Required</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.isRequired" name="fieldIsRequired" />
|
||||
<label>Required</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Show in UI</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.showInUi" name="fieldShowInUi" />
|
||||
<label>Show in UI</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="createDynamicField()" [disabled]="!newDynamicField.fieldName">Save</button>
|
||||
<button class="btn" (click)="showAddDynamicFieldForm = false">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Dynamic Fields Table -->
|
||||
<div class="card-block">
|
||||
<clr-datagrid>
|
||||
<clr-dg-column>Field Name</clr-dg-column>
|
||||
<clr-dg-column>Field Label</clr-dg-column>
|
||||
<clr-dg-column>Field Type</clr-dg-column>
|
||||
<clr-dg-column>Required</clr-dg-column>
|
||||
<clr-dg-column>Show in UI</clr-dg-column>
|
||||
<clr-dg-column>Sort Order</clr-dg-column>
|
||||
<clr-dg-column>Actions</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let field of dynamicFields" [clrDgItem]="field">
|
||||
<clr-dg-cell>{{field.fieldName}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{field.fieldLabel}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{field.fieldType}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<span class="label" [class.label-success]="field.isRequired" [class.label-danger]="!field.isRequired">
|
||||
{{field.isRequired ? 'Yes' : 'No'}}
|
||||
</span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<span class="label" [class.label-success]="field.showInUi" [class.label-danger]="!field.showInUi">
|
||||
{{field.showInUi ? 'Yes' : 'No'}}
|
||||
</span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>{{field.sortOrder}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<button class="btn btn-sm btn-icon" (click)="selectDynamicFieldForEdit(field)">
|
||||
<cds-icon shape="pencil"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteDynamicField(field.id)">
|
||||
<cds-icon shape="trash"></cds-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{dynamicFields.length}} fields
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<!-- Edit Dynamic Field Form -->
|
||||
<div class="card-block" *ngIf="selectedDynamicField">
|
||||
<h4>Edit Dynamic Field</h4>
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Field Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldName" name="editFieldName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Field Label</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldLabel" name="editFieldLabel" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Field Type</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldType" name="editFieldType" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>Field Options</label>
|
||||
<textarea clrTextarea [(ngModel)]="selectedDynamicField.fieldOptions" name="editFieldOptions"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Sort Order</label>
|
||||
<input clrInput type="number" [(ngModel)]="selectedDynamicField.sortOrder" name="editFieldSortOrder" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Required</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="selectedDynamicField.isRequired" name="editFieldIsRequired" />
|
||||
<label>Required</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Show in UI</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="selectedDynamicField.showInUi" name="editFieldShowInUi" />
|
||||
<label>Show in UI</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="updateDynamicField()" [disabled]="!selectedDynamicField.fieldName">Update</button>
|
||||
<button class="btn" (click)="selectedDynamicField = null">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</clr-tab-content>
|
||||
</clr-tab>
|
||||
</clr-tabs>
|
||||
</div>
|
||||
@@ -0,0 +1,60 @@
|
||||
.chart-config-manager {
|
||||
padding: 20px;
|
||||
|
||||
.card {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-block {
|
||||
padding: 15px;
|
||||
|
||||
form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
clr-datagrid {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 4px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.label-success {
|
||||
background-color: #318700;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.label-danger {
|
||||
background-color: #e62200;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.alert {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,658 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { environment } from 'src/environments/environment';
|
||||
import { ClrLoadingState } from '@clr/angular';
|
||||
|
||||
interface ChartType {
|
||||
id: number;
|
||||
name: string;
|
||||
displayName: string;
|
||||
description: string;
|
||||
isActive: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface UiComponent {
|
||||
id: number;
|
||||
chartType: ChartType;
|
||||
componentName: string;
|
||||
componentType: string;
|
||||
displayLabel: string;
|
||||
placeholder: string;
|
||||
isRequired: boolean;
|
||||
sortOrder: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface ComponentProperty {
|
||||
id: number;
|
||||
component: UiComponent;
|
||||
propertyName: string;
|
||||
propertyValue: string;
|
||||
propertyType: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface ChartTemplate {
|
||||
id: number;
|
||||
chartType: ChartType;
|
||||
templateName: string;
|
||||
templateHtml: string;
|
||||
templateCss: string;
|
||||
isDefault: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface DynamicField {
|
||||
id: number;
|
||||
chartType: ChartType;
|
||||
fieldName: string;
|
||||
fieldLabel: string;
|
||||
fieldType: string;
|
||||
fieldOptions: string;
|
||||
isRequired: boolean;
|
||||
showInUi: boolean;
|
||||
sortOrder: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-chart-config-manager',
|
||||
templateUrl: './chart-config-manager.component.html',
|
||||
styleUrls: ['./chart-config-manager.component.scss']
|
||||
})
|
||||
export class ChartConfigManagerComponent implements OnInit {
|
||||
// Chart Types
|
||||
chartTypes: ChartType[] = [];
|
||||
selectedChartType: ChartType | null = null;
|
||||
newChartType: Partial<ChartType> = {};
|
||||
showAddChartTypeForm = false;
|
||||
chartTypeLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||
|
||||
// UI Components
|
||||
uiComponents: UiComponent[] = [];
|
||||
selectedUiComponent: UiComponent | null = null;
|
||||
newUiComponent: Partial<UiComponent> = {};
|
||||
showAddUiComponentForm = false;
|
||||
uiComponentLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||
|
||||
// Component Properties
|
||||
componentProperties: ComponentProperty[] = [];
|
||||
selectedComponentProperty: ComponentProperty | null = null;
|
||||
newComponentProperty: Partial<ComponentProperty> = {};
|
||||
showAddComponentPropertyForm = false;
|
||||
componentPropertyLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||
|
||||
// Chart Templates
|
||||
chartTemplates: ChartTemplate[] = [];
|
||||
selectedChartTemplate: ChartTemplate | null = null;
|
||||
newChartTemplate: Partial<ChartTemplate> = {};
|
||||
showAddChartTemplateForm = false;
|
||||
chartTemplateLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||
|
||||
// Dynamic Fields
|
||||
dynamicFields: DynamicField[] = [];
|
||||
selectedDynamicField: DynamicField | null = null;
|
||||
newDynamicField: Partial<DynamicField> = {};
|
||||
showAddDynamicFieldForm = false;
|
||||
dynamicFieldLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||
|
||||
// Error handling
|
||||
errorMessage: string | null = null;
|
||||
successMessage: string | null = null;
|
||||
|
||||
// API base URL
|
||||
private apiUrl = environment.apiUrl || 'http://localhost:8080/api';
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadChartTypes();
|
||||
}
|
||||
|
||||
// Show error message
|
||||
private showError(message: string): void {
|
||||
this.errorMessage = message;
|
||||
setTimeout(() => {
|
||||
this.errorMessage = null;
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Show success message
|
||||
private showSuccess(message: string): void {
|
||||
this.successMessage = message;
|
||||
setTimeout(() => {
|
||||
this.successMessage = null;
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Chart Type Methods
|
||||
loadChartTypes(): void {
|
||||
this.chartTypeLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.get<ChartType[]>(`${this.apiUrl}/chart-types`).subscribe({
|
||||
next: (data) => {
|
||||
this.chartTypes = data;
|
||||
this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading chart types:', error);
|
||||
this.showError('Error loading chart types: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.chartTypeLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createChartType(): void {
|
||||
if (!this.newChartType.name) {
|
||||
this.showError('Chart type name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.chartTypeLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.post<ChartType>(`${this.apiUrl}/chart-types`, this.newChartType).subscribe({
|
||||
next: (data) => {
|
||||
this.chartTypes.push(data);
|
||||
this.newChartType = {};
|
||||
this.showAddChartTypeForm = false;
|
||||
this.showSuccess('Chart type created successfully');
|
||||
this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error creating chart type:', error);
|
||||
this.showError('Error creating chart type: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.chartTypeLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateChartType(): void {
|
||||
if (!this.selectedChartType || !this.selectedChartType.name) {
|
||||
this.showError('Chart type name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.chartTypeLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.put<ChartType>(`${this.apiUrl}/chart-types/${this.selectedChartType.id}`, this.selectedChartType).subscribe({
|
||||
next: (data) => {
|
||||
const index = this.chartTypes.findIndex(ct => ct.id === data.id);
|
||||
if (index !== -1) {
|
||||
this.chartTypes[index] = data;
|
||||
}
|
||||
this.selectedChartType = null;
|
||||
this.showSuccess('Chart type updated successfully');
|
||||
this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error updating chart type:', error);
|
||||
this.showError('Error updating chart type: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.chartTypeLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteChartType(id: number): void {
|
||||
if (!confirm('Are you sure you want to delete this chart type?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.chartTypeLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.delete(`${this.apiUrl}/chart-types/${id}`).subscribe({
|
||||
next: () => {
|
||||
this.chartTypes = this.chartTypes.filter(ct => ct.id !== id);
|
||||
// Also clear related data if the deleted chart type was selected
|
||||
if (this.selectedChartType && this.selectedChartType.id === id) {
|
||||
this.selectedChartType = null;
|
||||
this.uiComponents = [];
|
||||
this.chartTemplates = [];
|
||||
this.dynamicFields = [];
|
||||
}
|
||||
this.showSuccess('Chart type deleted successfully');
|
||||
this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error deleting chart type:', error);
|
||||
this.showError('Error deleting chart type: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.chartTypeLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectChartTypeForEdit(chartType: ChartType): void {
|
||||
this.selectedChartType = { ...chartType };
|
||||
}
|
||||
|
||||
// UI Component Methods
|
||||
loadUiComponents(chartTypeId: number): void {
|
||||
this.uiComponentLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.get<UiComponent[]>(`${this.apiUrl}/ui-components/chart-type/${chartTypeId}`).subscribe({
|
||||
next: (data) => {
|
||||
this.uiComponents = data;
|
||||
this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading UI components:', error);
|
||||
this.showError('Error loading UI components: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.uiComponentLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createUiComponent(): void {
|
||||
if (!this.selectedChartType) {
|
||||
this.showError('Please select a chart type first');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.newUiComponent.componentName) {
|
||||
this.showError('Component name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.uiComponentLoadingState = ClrLoadingState.LOADING;
|
||||
const uiComponentData = {
|
||||
...this.newUiComponent,
|
||||
chartType: { id: this.selectedChartType.id }
|
||||
};
|
||||
|
||||
this.http.post<UiComponent>(`${this.apiUrl}/ui-components`, uiComponentData).subscribe({
|
||||
next: (data) => {
|
||||
this.uiComponents.push(data);
|
||||
this.newUiComponent = {};
|
||||
this.showAddUiComponentForm = false;
|
||||
this.showSuccess('UI component created successfully');
|
||||
this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error creating UI component:', error);
|
||||
this.showError('Error creating UI component: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.uiComponentLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateUiComponent(): void {
|
||||
if (!this.selectedUiComponent || !this.selectedUiComponent.componentName) {
|
||||
this.showError('Component name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.uiComponentLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.put<UiComponent>(`${this.apiUrl}/ui-components/${this.selectedUiComponent.id}`, this.selectedUiComponent).subscribe({
|
||||
next: (data) => {
|
||||
const index = this.uiComponents.findIndex(uc => uc.id === data.id);
|
||||
if (index !== -1) {
|
||||
this.uiComponents[index] = data;
|
||||
}
|
||||
this.selectedUiComponent = null;
|
||||
this.showSuccess('UI component updated successfully');
|
||||
this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error updating UI component:', error);
|
||||
this.showError('Error updating UI component: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.uiComponentLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteUiComponent(id: number): void {
|
||||
if (!confirm('Are you sure you want to delete this UI component?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.uiComponentLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.delete(`${this.apiUrl}/ui-components/${id}`).subscribe({
|
||||
next: () => {
|
||||
this.uiComponents = this.uiComponents.filter(uc => uc.id !== id);
|
||||
if (this.selectedUiComponent && this.selectedUiComponent.id === id) {
|
||||
this.selectedUiComponent = null;
|
||||
}
|
||||
this.showSuccess('UI component deleted successfully');
|
||||
this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error deleting UI component:', error);
|
||||
this.showError('Error deleting UI component: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.uiComponentLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectUiComponentForEdit(uiComponent: UiComponent): void {
|
||||
this.selectedUiComponent = { ...uiComponent };
|
||||
}
|
||||
|
||||
// Component Property Methods
|
||||
loadComponentProperties(componentId: number): void {
|
||||
this.componentPropertyLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.get<ComponentProperty[]>(`${this.apiUrl}/component-properties/component/${componentId}`).subscribe({
|
||||
next: (data) => {
|
||||
this.componentProperties = data;
|
||||
this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading component properties:', error);
|
||||
this.showError('Error loading component properties: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.componentPropertyLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createComponentProperty(): void {
|
||||
if (!this.selectedUiComponent) {
|
||||
this.showError('Please select a UI component first');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.newComponentProperty.propertyName) {
|
||||
this.showError('Property name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.componentPropertyLoadingState = ClrLoadingState.LOADING;
|
||||
const componentPropertyData = {
|
||||
...this.newComponentProperty,
|
||||
component: { id: this.selectedUiComponent.id }
|
||||
};
|
||||
|
||||
this.http.post<ComponentProperty>(`${this.apiUrl}/component-properties`, componentPropertyData).subscribe({
|
||||
next: (data) => {
|
||||
this.componentProperties.push(data);
|
||||
this.newComponentProperty = {};
|
||||
this.showAddComponentPropertyForm = false;
|
||||
this.showSuccess('Component property created successfully');
|
||||
this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error creating component property:', error);
|
||||
this.showError('Error creating component property: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.componentPropertyLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateComponentProperty(): void {
|
||||
if (!this.selectedComponentProperty || !this.selectedComponentProperty.propertyName) {
|
||||
this.showError('Property name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.componentPropertyLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.put<ComponentProperty>(`${this.apiUrl}/component-properties/${this.selectedComponentProperty.id}`, this.selectedComponentProperty).subscribe({
|
||||
next: (data) => {
|
||||
const index = this.componentProperties.findIndex(cp => cp.id === data.id);
|
||||
if (index !== -1) {
|
||||
this.componentProperties[index] = data;
|
||||
}
|
||||
this.selectedComponentProperty = null;
|
||||
this.showSuccess('Component property updated successfully');
|
||||
this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error updating component property:', error);
|
||||
this.showError('Error updating component property: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.componentPropertyLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteComponentProperty(id: number): void {
|
||||
if (!confirm('Are you sure you want to delete this component property?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.componentPropertyLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.delete(`${this.apiUrl}/component-properties/${id}`).subscribe({
|
||||
next: () => {
|
||||
this.componentProperties = this.componentProperties.filter(cp => cp.id !== id);
|
||||
if (this.selectedComponentProperty && this.selectedComponentProperty.id === id) {
|
||||
this.selectedComponentProperty = null;
|
||||
}
|
||||
this.showSuccess('Component property deleted successfully');
|
||||
this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error deleting component property:', error);
|
||||
this.showError('Error deleting component property: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.componentPropertyLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectComponentPropertyForEdit(componentProperty: ComponentProperty): void {
|
||||
this.selectedComponentProperty = { ...componentProperty };
|
||||
}
|
||||
|
||||
// Chart Template Methods
|
||||
loadChartTemplates(chartTypeId: number): void {
|
||||
this.chartTemplateLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.get<ChartTemplate[]>(`${this.apiUrl}/chart-templates/chart-type/${chartTypeId}`).subscribe({
|
||||
next: (data) => {
|
||||
this.chartTemplates = data;
|
||||
this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading chart templates:', error);
|
||||
this.showError('Error loading chart templates: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.chartTemplateLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createChartTemplate(): void {
|
||||
if (!this.selectedChartType) {
|
||||
this.showError('Please select a chart type first');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.newChartTemplate.templateName) {
|
||||
this.showError('Template name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.chartTemplateLoadingState = ClrLoadingState.LOADING;
|
||||
const chartTemplateData = {
|
||||
...this.newChartTemplate,
|
||||
chartType: { id: this.selectedChartType.id }
|
||||
};
|
||||
|
||||
this.http.post<ChartTemplate>(`${this.apiUrl}/chart-templates`, chartTemplateData).subscribe({
|
||||
next: (data) => {
|
||||
this.chartTemplates.push(data);
|
||||
this.newChartTemplate = {};
|
||||
this.showAddChartTemplateForm = false;
|
||||
this.showSuccess('Chart template created successfully');
|
||||
this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error creating chart template:', error);
|
||||
this.showError('Error creating chart template: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.chartTemplateLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateChartTemplate(): void {
|
||||
if (!this.selectedChartTemplate || !this.selectedChartTemplate.templateName) {
|
||||
this.showError('Template name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.chartTemplateLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.put<ChartTemplate>(`${this.apiUrl}/chart-templates/${this.selectedChartTemplate.id}`, this.selectedChartTemplate).subscribe({
|
||||
next: (data) => {
|
||||
const index = this.chartTemplates.findIndex(ct => ct.id === data.id);
|
||||
if (index !== -1) {
|
||||
this.chartTemplates[index] = data;
|
||||
}
|
||||
this.selectedChartTemplate = null;
|
||||
this.showSuccess('Chart template updated successfully');
|
||||
this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error updating chart template:', error);
|
||||
this.showError('Error updating chart template: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.chartTemplateLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteChartTemplate(id: number): void {
|
||||
if (!confirm('Are you sure you want to delete this chart template?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.chartTemplateLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.delete(`${this.apiUrl}/chart-templates/${id}`).subscribe({
|
||||
next: () => {
|
||||
this.chartTemplates = this.chartTemplates.filter(ct => ct.id !== id);
|
||||
if (this.selectedChartTemplate && this.selectedChartTemplate.id === id) {
|
||||
this.selectedChartTemplate = null;
|
||||
}
|
||||
this.showSuccess('Chart template deleted successfully');
|
||||
this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error deleting chart template:', error);
|
||||
this.showError('Error deleting chart template: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.chartTemplateLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectChartTemplateForEdit(chartTemplate: ChartTemplate): void {
|
||||
this.selectedChartTemplate = { ...chartTemplate };
|
||||
}
|
||||
|
||||
// Dynamic Field Methods
|
||||
loadDynamicFields(chartTypeId: number): void {
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.get<DynamicField[]>(`${this.apiUrl}/dynamic-fields/chart-type/${chartTypeId}`).subscribe({
|
||||
next: (data) => {
|
||||
this.dynamicFields = data;
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading dynamic fields:', error);
|
||||
this.showError('Error loading dynamic fields: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createDynamicField(): void {
|
||||
if (!this.selectedChartType) {
|
||||
this.showError('Please select a chart type first');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.newDynamicField.fieldName) {
|
||||
this.showError('Field name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
|
||||
const dynamicFieldData = {
|
||||
...this.newDynamicField,
|
||||
chartType: { id: this.selectedChartType.id }
|
||||
};
|
||||
|
||||
this.http.post<DynamicField>(`${this.apiUrl}/dynamic-fields`, dynamicFieldData).subscribe({
|
||||
next: (data) => {
|
||||
this.dynamicFields.push(data);
|
||||
this.newDynamicField = {};
|
||||
this.showAddDynamicFieldForm = false;
|
||||
this.showSuccess('Dynamic field created successfully');
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error creating dynamic field:', error);
|
||||
this.showError('Error creating dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateDynamicField(): void {
|
||||
if (!this.selectedDynamicField || !this.selectedDynamicField.fieldName) {
|
||||
this.showError('Field name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.put<DynamicField>(`${this.apiUrl}/dynamic-fields/${this.selectedDynamicField.id}`, this.selectedDynamicField).subscribe({
|
||||
next: (data) => {
|
||||
const index = this.dynamicFields.findIndex(df => df.id === data.id);
|
||||
if (index !== -1) {
|
||||
this.dynamicFields[index] = data;
|
||||
}
|
||||
this.selectedDynamicField = null;
|
||||
this.showSuccess('Dynamic field updated successfully');
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error updating dynamic field:', error);
|
||||
this.showError('Error updating dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteDynamicField(id: number): void {
|
||||
if (!confirm('Are you sure you want to delete this dynamic field?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
|
||||
this.http.delete(`${this.apiUrl}/dynamic-fields/${id}`).subscribe({
|
||||
next: () => {
|
||||
this.dynamicFields = this.dynamicFields.filter(df => df.id !== id);
|
||||
if (this.selectedDynamicField && this.selectedDynamicField.id === id) {
|
||||
this.selectedDynamicField = null;
|
||||
}
|
||||
this.showSuccess('Dynamic field deleted successfully');
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error deleting dynamic field:', error);
|
||||
this.showError('Error deleting dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectDynamicFieldForEdit(dynamicField: DynamicField): void {
|
||||
this.selectedDynamicField = { ...dynamicField };
|
||||
}
|
||||
|
||||
// Helper methods
|
||||
onChartTypeSelect(chartType: ChartType): void {
|
||||
this.selectedChartType = chartType;
|
||||
this.loadUiComponents(chartType.id);
|
||||
this.loadChartTemplates(chartType.id);
|
||||
this.loadDynamicFields(chartType.id);
|
||||
}
|
||||
|
||||
resetForms(): void {
|
||||
this.newChartType = {};
|
||||
this.newUiComponent = {};
|
||||
this.newComponentProperty = {};
|
||||
this.newChartTemplate = {};
|
||||
this.newDynamicField = {};
|
||||
this.showAddChartTypeForm = false;
|
||||
this.showAddUiComponentForm = false;
|
||||
this.showAddComponentPropertyForm = false;
|
||||
this.showAddChartTemplateForm = false;
|
||||
this.showAddDynamicFieldForm = false;
|
||||
this.selectedChartType = null;
|
||||
this.selectedUiComponent = null;
|
||||
this.selectedComponentProperty = null;
|
||||
this.selectedChartTemplate = null;
|
||||
this.selectedDynamicField = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,495 @@
|
||||
<div class="chart-config-manager">
|
||||
<h2>Chart Configuration Manager</h2>
|
||||
|
||||
<!-- Test message to verify component is loading -->
|
||||
<div class="alert alert-info">
|
||||
<div class="alert-item">
|
||||
<span class="alert-text">Chart Config Manager Component Loaded Successfully</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error and Success Messages -->
|
||||
<div class="alert alert-danger" *ngIf="errorMessage">
|
||||
<button type="button" class="close" aria-label="Close" (click)="errorMessage = null">
|
||||
<cds-icon shape="close"></cds-icon>
|
||||
</button>
|
||||
<div class="alert-item">
|
||||
<span class="alert-text">{{ errorMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success" *ngIf="successMessage">
|
||||
<button type="button" class="close" aria-label="Close" (click)="successMessage = null">
|
||||
<cds-icon shape="close"></cds-icon>
|
||||
</button>
|
||||
<div class="alert-item">
|
||||
<span class="alert-text">{{ successMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chart Types Section -->
|
||||
<clr-tab>
|
||||
<button clrTabLink>Chart Types</button>
|
||||
<clr-tab-content>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Chart Types</h3>
|
||||
<button class="btn btn-sm btn-primary" (click)="showAddChartTypeForm = true">
|
||||
<cds-icon shape="plus"></cds-icon> Add Chart Type
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Add Chart Type Form -->
|
||||
<div class="card-block" *ngIf="showAddChartTypeForm">
|
||||
<app-chart-type-form
|
||||
[chartType]="newChartType"
|
||||
(save)="createChartType()"
|
||||
(cancel)="showAddChartTypeForm = false">
|
||||
</app-chart-type-form>
|
||||
</div>
|
||||
|
||||
<!-- Chart Types Table -->
|
||||
<div class="card-block">
|
||||
<clr-datagrid [clrDgLoading]="chartTypeLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-dg-column>Name</clr-dg-column>
|
||||
<clr-dg-column>Display Name</clr-dg-column>
|
||||
<clr-dg-column>Description</clr-dg-column>
|
||||
<clr-dg-column>Status</clr-dg-column>
|
||||
<clr-dg-column>Created At</clr-dg-column>
|
||||
<clr-dg-column>Updated At</clr-dg-column>
|
||||
<clr-dg-column>Actions</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let chartType of chartTypes" [clrDgItem]="chartType">
|
||||
<clr-dg-cell>{{chartType.name}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{chartType.displayName}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{chartType.description}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<span class="label" [class.label-success]="chartType.isActive" [class.label-danger]="!chartType.isActive">
|
||||
{{chartType.isActive ? 'Active' : 'Inactive'}}
|
||||
</span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>{{chartType.createdAt | date:'short'}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{chartType.updatedAt | date:'short'}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<button class="btn btn-sm btn-icon" (click)="selectChartTypeForEdit(chartType)" title="Edit" [disabled]="chartTypeLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="chartTypeLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
<cds-icon *ngIf="chartTypeLoadingState !== ClrLoadingState.LOADING" shape="pencil"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteChartType(chartType.id)" title="Delete" [disabled]="chartTypeLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="chartTypeLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
<cds-icon *ngIf="chartTypeLoadingState !== ClrLoadingState.LOADING" shape="trash"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="onChartTypeSelect(chartType)" title="View Details" [disabled]="chartTypeLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="chartTypeLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
<cds-icon *ngIf="chartTypeLoadingState !== ClrLoadingState.LOADING" shape="eye"></cds-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{chartTypes.length}} chart type(s)
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<!-- Edit Chart Type Form -->
|
||||
<div class="card-block" *ngIf="selectedChartType">
|
||||
<h4>Edit Chart Type</h4>
|
||||
<app-chart-type-form
|
||||
[chartType]="selectedChartType"
|
||||
[isEdit]="true"
|
||||
(save)="updateChartType()"
|
||||
(cancel)="selectedChartType = null">
|
||||
</app-chart-type-form>
|
||||
</div>
|
||||
</div>
|
||||
</clr-tab-content>
|
||||
</clr-tab>
|
||||
|
||||
<!-- UI Components Section -->
|
||||
<clr-tab *ngIf="selectedChartType">
|
||||
<button clrTabLink>UI Components</button>
|
||||
<clr-tab-content>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>UI Components for {{selectedChartType?.name}}</h3>
|
||||
<button class="btn btn-sm btn-primary" (click)="showAddUiComponentForm = true">
|
||||
<cds-icon shape="plus"></cds-icon> Add UI Component
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Add UI Component Form -->
|
||||
<div class="card-block" *ngIf="showAddUiComponentForm">
|
||||
<app-ui-component-form
|
||||
[uiComponent]="newUiComponent"
|
||||
(save)="createUiComponent()"
|
||||
(cancel)="showAddUiComponentForm = false">
|
||||
</app-ui-component-form>
|
||||
</div>
|
||||
|
||||
<!-- UI Components Table -->
|
||||
<div class="card-block">
|
||||
<clr-datagrid [clrDgLoading]="uiComponentLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-dg-column>Component Name</clr-dg-column>
|
||||
<clr-dg-column>Component Type</clr-dg-column>
|
||||
<clr-dg-column>Display Label</clr-dg-column>
|
||||
<clr-dg-column>Required</clr-dg-column>
|
||||
<clr-dg-column>Actions</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let uiComponent of uiComponents" [clrDgItem]="uiComponent">
|
||||
<clr-dg-cell>{{uiComponent.componentName}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{uiComponent.componentType}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{uiComponent.displayLabel}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<span class="label" [class.label-success]="uiComponent.isRequired" [class.label-danger]="!uiComponent.isRequired">
|
||||
{{uiComponent.isRequired ? 'Yes' : 'No'}}
|
||||
</span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell class="action-cell">
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-sm btn-icon" (click)="selectUiComponentForEdit(uiComponent)" title="Edit" [disabled]="uiComponentLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="uiComponentLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
<cds-icon *ngIf="uiComponentLoadingState !== ClrLoadingState.LOADING" shape="pencil" aria-label="Edit"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteUiComponent(uiComponent.id)" title="Delete" [disabled]="uiComponentLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="uiComponentLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
<cds-icon *ngIf="uiComponentLoadingState !== ClrLoadingState.LOADING" shape="trash" aria-label="Delete"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="onUiComponentSelect(uiComponent)" title="View Properties" [disabled]="uiComponentLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="uiComponentLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
<cds-icon *ngIf="uiComponentLoadingState !== ClrLoadingState.LOADING" shape="eye" aria-label="View Properties"></cds-icon>
|
||||
</button>
|
||||
</div>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{uiComponents.length}} UI component(s)
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<!-- Edit UI Component Form -->
|
||||
<div class="card-block" *ngIf="selectedUiComponent">
|
||||
<h4>Edit UI Component</h4>
|
||||
<app-ui-component-form
|
||||
[uiComponent]="selectedUiComponent"
|
||||
[isEdit]="true"
|
||||
(save)="updateUiComponent()"
|
||||
(cancel)="selectedUiComponent = null">
|
||||
</app-ui-component-form>
|
||||
</div>
|
||||
</div>
|
||||
</clr-tab-content>
|
||||
</clr-tab>
|
||||
|
||||
<!-- Component Properties Section -->
|
||||
<clr-tab *ngIf="selectedUiComponent">
|
||||
<button clrTabLink>Component Properties</button>
|
||||
<clr-tab-content>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Properties for {{selectedUiComponent?.componentName}}</h3>
|
||||
<button class="btn btn-sm btn-primary" (click)="showAddComponentPropertyForm = true">
|
||||
<cds-icon shape="plus"></cds-icon> Add Property
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Add Component Property Form -->
|
||||
<div class="card-block" *ngIf="showAddComponentPropertyForm">
|
||||
<app-component-property-form
|
||||
[componentProperty]="newComponentProperty"
|
||||
(save)="createComponentProperty()"
|
||||
(cancel)="showAddComponentPropertyForm = false">
|
||||
</app-component-property-form>
|
||||
</div>
|
||||
|
||||
<!-- Component Properties Table -->
|
||||
<div class="card-block">
|
||||
<clr-datagrid [clrDgLoading]="componentPropertyLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-dg-column>Property Name</clr-dg-column>
|
||||
<clr-dg-column>Property Value</clr-dg-column>
|
||||
<clr-dg-column>Property Type</clr-dg-column>
|
||||
<clr-dg-column>Created At</clr-dg-column>
|
||||
<clr-dg-column>Updated At</clr-dg-column>
|
||||
<clr-dg-column>Actions</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let property of componentProperties" [clrDgItem]="property">
|
||||
<clr-dg-cell>{{property.propertyName}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{property.propertyValue}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{property.propertyType}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{property.createdAt | date:'short'}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{property.updatedAt | date:'short'}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<button class="btn btn-sm btn-icon" (click)="selectComponentPropertyForEdit(property)" title="Edit" [disabled]="componentPropertyLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
<cds-icon *ngIf="componentPropertyLoadingState !== ClrLoadingState.LOADING" shape="pencil"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteComponentProperty(property.id)" title="Delete" [disabled]="componentPropertyLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
<cds-icon *ngIf="componentPropertyLoadingState !== ClrLoadingState.LOADING" shape="trash"></cds-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{componentProperties.length}} propertie(s)
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<!-- Edit Component Property Form -->
|
||||
<div class="card-block" *ngIf="selectedComponentProperty">
|
||||
<h4>Edit Component Property</h4>
|
||||
<app-component-property-form
|
||||
[componentProperty]="selectedComponentProperty"
|
||||
[isEdit]="true"
|
||||
(save)="updateComponentProperty()"
|
||||
(cancel)="selectedComponentProperty = null">
|
||||
</app-component-property-form>
|
||||
</div>
|
||||
</div>
|
||||
</clr-tab-content>
|
||||
</clr-tab>
|
||||
|
||||
<!-- Chart Templates Section -->
|
||||
<clr-tab *ngIf="selectedChartType">
|
||||
<button clrTabLink>Chart Templates</button>
|
||||
<clr-tab-content>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Templates for {{selectedChartType?.name}}</h3>
|
||||
<button class="btn btn-sm btn-primary" (click)="showAddChartTemplateForm = true">
|
||||
<cds-icon shape="plus"></cds-icon> Add Template
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Add Chart Template Form -->
|
||||
<div class="card-block" *ngIf="showAddChartTemplateForm">
|
||||
<app-chart-template-form
|
||||
[chartTemplate]="newChartTemplate"
|
||||
(save)="createChartTemplate()"
|
||||
(cancel)="showAddChartTemplateForm = false">
|
||||
</app-chart-template-form>
|
||||
</div>
|
||||
|
||||
<!-- Chart Templates Table -->
|
||||
<div class="card-block">
|
||||
<clr-datagrid [clrDgLoading]="chartTemplateLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-dg-column>Template Name</clr-dg-column>
|
||||
<clr-dg-column>Is Default</clr-dg-column>
|
||||
<clr-dg-column>Created At</clr-dg-column>
|
||||
<clr-dg-column>Updated At</clr-dg-column>
|
||||
<clr-dg-column>Actions</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let template of chartTemplates" [clrDgItem]="template">
|
||||
<clr-dg-cell>{{template.templateName}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<span class="label" [class.label-success]="template.isDefault" [class.label-danger]="!template.isDefault">
|
||||
{{template.isDefault ? 'Yes' : 'No'}}
|
||||
</span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>{{template.createdAt | date:'short'}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{template.updatedAt | date:'short'}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<button class="btn btn-sm btn-icon" (click)="selectChartTemplateForEdit(template)" title="Edit" [disabled]="chartTemplateLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="chartTemplateLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
<cds-icon *ngIf="chartTemplateLoadingState !== ClrLoadingState.LOADING" shape="pencil"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteChartTemplate(template.id)" title="Delete" [disabled]="chartTemplateLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="chartTemplateLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
<cds-icon *ngIf="chartTemplateLoadingState !== ClrLoadingState.LOADING" shape="trash"></cds-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{chartTemplates.length}} template(s)
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<!-- Edit Chart Template Form -->
|
||||
<div class="card-block" *ngIf="selectedChartTemplate">
|
||||
<h4>Edit Chart Template</h4>
|
||||
<app-chart-template-form
|
||||
[chartTemplate]="selectedChartTemplate"
|
||||
[isEdit]="true"
|
||||
(save)="updateChartTemplate()"
|
||||
(cancel)="selectedChartTemplate = null">
|
||||
</app-chart-template-form>
|
||||
</div>
|
||||
</div>
|
||||
</clr-tab-content>
|
||||
</clr-tab>
|
||||
|
||||
<!-- Dynamic Fields Section -->
|
||||
<clr-tab *ngIf="selectedChartType">
|
||||
<button clrTabLink>Dynamic Fields</button>
|
||||
<clr-tab-content>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Dynamic Fields for {{selectedChartType?.name}}</h3>
|
||||
<button class="btn btn-sm btn-primary" (click)="showAddDynamicFieldForm = true">
|
||||
<cds-icon shape="plus"></cds-icon> Add Field
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Add Dynamic Field Form -->
|
||||
<div class="card-block" *ngIf="showAddDynamicFieldForm">
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Field Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="newDynamicField.fieldName" name="fieldName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Field Label</label>
|
||||
<input clrInput type="text" [(ngModel)]="newDynamicField.fieldLabel" name="fieldLabel" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Field Type</label>
|
||||
<input clrInput type="text" [(ngModel)]="newDynamicField.fieldType" name="fieldType" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>Field Options</label>
|
||||
<textarea clrTextarea [(ngModel)]="newDynamicField.fieldOptions" name="fieldOptions"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Sort Order</label>
|
||||
<input clrInput type="number" [(ngModel)]="newDynamicField.sortOrder" name="fieldSortOrder" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Required</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.isRequired" name="fieldIsRequired" />
|
||||
<label>Required</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Show in UI</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.showInUi" name="fieldShowInUi" />
|
||||
<label>Show in UI</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="createDynamicField()" [disabled]="!newDynamicField.fieldName || dynamicFieldLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="dynamicFieldLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
Save
|
||||
</button>
|
||||
<button class="btn" (click)="showAddDynamicFieldForm = false">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Dynamic Fields Table -->
|
||||
<div class="card-block">
|
||||
<clr-datagrid [clrDgLoading]="dynamicFieldLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-dg-column>Field Name</clr-dg-column>
|
||||
<clr-dg-column>Field Label</clr-dg-column>
|
||||
<clr-dg-column>Field Type</clr-dg-column>
|
||||
<clr-dg-column>Required</clr-dg-column>
|
||||
<clr-dg-column>Show in UI</clr-dg-column>
|
||||
<clr-dg-column>Sort Order</clr-dg-column>
|
||||
<clr-dg-column>Created At</clr-dg-column>
|
||||
<clr-dg-column>Updated At</clr-dg-column>
|
||||
<clr-dg-column>Actions</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let field of dynamicFields" [clrDgItem]="field">
|
||||
<clr-dg-cell>{{field.fieldName}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{field.fieldLabel}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{field.fieldType}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<span class="label" [class.label-success]="field.isRequired" [class.label-danger]="!field.isRequired">
|
||||
{{field.isRequired ? 'Yes' : 'No'}}
|
||||
</span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<span class="label" [class.label-success]="field.showInUi" [class.label-danger]="!field.showInUi">
|
||||
{{field.showInUi ? 'Yes' : 'No'}}
|
||||
</span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>{{field.sortOrder}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{field.createdAt | date:'short'}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{field.updatedAt | date:'short'}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<button class="btn btn-sm btn-icon" (click)="selectDynamicFieldForEdit(field)" title="Edit">
|
||||
<cds-icon shape="pencil"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteDynamicField(field.id)" title="Delete">
|
||||
<cds-icon shape="trash"></cds-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{dynamicFields.length}} field(s)
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<!-- Edit Dynamic Field Form -->
|
||||
<div class="card-block" *ngIf="selectedDynamicField">
|
||||
<h4>Edit Dynamic Field</h4>
|
||||
<form clrForm>
|
||||
<clr-input-container>
|
||||
<label>Field Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldName" name="editFieldName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Field Label</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldLabel" name="editFieldLabel" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Field Type</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldType" name="editFieldType" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>Field Options</label>
|
||||
<textarea clrTextarea [(ngModel)]="selectedDynamicField.fieldOptions" name="editFieldOptions"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Sort Order</label>
|
||||
<input clrInput type="number" [(ngModel)]="selectedDynamicField.sortOrder" name="editFieldSortOrder" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Required</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="selectedDynamicField.isRequired" name="editFieldIsRequired" />
|
||||
<label>Required</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Show in UI</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="selectedDynamicField.showInUi" name="editFieldShowInUi" />
|
||||
<label>Show in UI</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" (click)="updateDynamicField()" [disabled]="!selectedDynamicField.fieldName || dynamicFieldLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="dynamicFieldLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
Update
|
||||
</button>
|
||||
<button class="btn" (click)="selectedDynamicField = null">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</clr-tab-content>
|
||||
</clr-tab>
|
||||
</div>
|
||||
@@ -0,0 +1,97 @@
|
||||
.chart-config-manager {
|
||||
padding: 20px;
|
||||
|
||||
.card {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-block {
|
||||
padding: 15px;
|
||||
|
||||
form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
clr-datagrid {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 4px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.label-success {
|
||||
background-color: #318700;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.label-danger {
|
||||
background-color: #e62200;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.alert {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
clr-tab-content {
|
||||
padding: 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.action-cell {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-buttons .btn-icon {
|
||||
min-width: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// Ensure icons are visible
|
||||
cds-icon {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
clr-spinner {
|
||||
margin: 0;
|
||||
}cds-icon {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
clr-spinner {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,710 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ClrLoadingState } from '@clr/angular';
|
||||
import { ChartTypeService } from '../chart-type-manager/chart-type.service';
|
||||
import { UiComponentService } from './ui-component.service';
|
||||
import { ComponentPropertyService } from './component-property.service';
|
||||
import { ChartTemplateService } from './chart-template.service';
|
||||
import { DynamicFieldService } from './dynamic-field.service';
|
||||
|
||||
export interface ChartType {
|
||||
id: number;
|
||||
name: string;
|
||||
displayName: string;
|
||||
description: string;
|
||||
isActive: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface UiComponent {
|
||||
id: number;
|
||||
chartType: ChartType;
|
||||
componentName: string;
|
||||
componentType: string;
|
||||
displayLabel: string;
|
||||
placeholder: string;
|
||||
isRequired: boolean;
|
||||
sortOrder: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface ComponentProperty {
|
||||
id: number;
|
||||
component: UiComponent;
|
||||
propertyName: string;
|
||||
propertyValue: string;
|
||||
propertyType: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface ChartTemplate {
|
||||
id: number;
|
||||
chartType: ChartType;
|
||||
templateName: string;
|
||||
templateHtml: string;
|
||||
templateCss: string;
|
||||
isDefault: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface DynamicField {
|
||||
id: number;
|
||||
chartType: ChartType;
|
||||
fieldName: string;
|
||||
fieldLabel: string;
|
||||
fieldType: string;
|
||||
fieldOptions: string;
|
||||
isRequired: boolean;
|
||||
showInUi: boolean;
|
||||
sortOrder: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-chart-config-manager',
|
||||
templateUrl: './chart-config-manager.component.html',
|
||||
styleUrls: ['./chart-config-manager.component.scss']
|
||||
})
|
||||
export class ChartConfigManagerComponent implements OnInit {
|
||||
// Chart Types
|
||||
chartTypes: ChartType[] = [];
|
||||
selectedChartType: ChartType | null = null;
|
||||
newChartType: Partial<ChartType> = {};
|
||||
showAddChartTypeForm = false;
|
||||
chartTypeLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||
|
||||
// UI Components
|
||||
uiComponents: UiComponent[] = [];
|
||||
selectedUiComponent: UiComponent | null = null;
|
||||
newUiComponent: Partial<UiComponent> = {};
|
||||
showAddUiComponentForm = false;
|
||||
uiComponentLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||
|
||||
// Component Properties
|
||||
componentProperties: ComponentProperty[] = [];
|
||||
selectedComponentProperty: ComponentProperty | null = null;
|
||||
newComponentProperty: Partial<ComponentProperty> = {};
|
||||
showAddComponentPropertyForm = false;
|
||||
componentPropertyLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||
|
||||
// Chart Templates
|
||||
chartTemplates: ChartTemplate[] = [];
|
||||
selectedChartTemplate: ChartTemplate | null = null;
|
||||
newChartTemplate: Partial<ChartTemplate> = {};
|
||||
showAddChartTemplateForm = false;
|
||||
chartTemplateLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||
|
||||
// Dynamic Fields
|
||||
dynamicFields: DynamicField[] = [];
|
||||
selectedDynamicField: DynamicField | null = null;
|
||||
newDynamicField: Partial<DynamicField> = {};
|
||||
showAddDynamicFieldForm = false;
|
||||
dynamicFieldLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||
|
||||
// Make ClrLoadingState available to template
|
||||
readonly ClrLoadingState = ClrLoadingState;
|
||||
|
||||
// Error handling
|
||||
errorMessage: string | null = null;
|
||||
successMessage: string | null = null;
|
||||
|
||||
constructor(
|
||||
private chartTypeService: ChartTypeService,
|
||||
private uiComponentService: UiComponentService,
|
||||
private componentPropertyService: ComponentPropertyService,
|
||||
private chartTemplateService: ChartTemplateService,
|
||||
private dynamicFieldService: DynamicFieldService
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
console.log('ChartConfigManagerComponent initialized');
|
||||
this.loadChartTypes();
|
||||
}
|
||||
|
||||
// Show error message
|
||||
private showError(message: string): void {
|
||||
this.errorMessage = message;
|
||||
setTimeout(() => {
|
||||
this.errorMessage = null;
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Show success message
|
||||
private showSuccess(message: string): void {
|
||||
this.successMessage = message;
|
||||
setTimeout(() => {
|
||||
this.successMessage = null;
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Chart Type Methods
|
||||
loadChartTypes(): void {
|
||||
this.chartTypeLoadingState = ClrLoadingState.LOADING;
|
||||
console.log('Loading chart types...');
|
||||
this.chartTypeService.getAllChartTypes().subscribe({
|
||||
next: (data) => {
|
||||
console.log('Chart types loaded:', data);
|
||||
this.chartTypes = data;
|
||||
this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading chart types:', error);
|
||||
this.showError('Error loading chart types: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.chartTypeLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createChartType(): void {
|
||||
if (!this.newChartType.name) {
|
||||
this.showError('Chart type name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.chartTypeLoadingState = ClrLoadingState.LOADING;
|
||||
this.chartTypeService.createChartType(this.newChartType).subscribe({
|
||||
next: (data) => {
|
||||
this.chartTypes.push(data);
|
||||
this.newChartType = {};
|
||||
this.showAddChartTypeForm = false;
|
||||
this.showSuccess('Chart type created successfully');
|
||||
this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error creating chart type:', error);
|
||||
this.showError('Error creating chart type: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.chartTypeLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateChartType(): void {
|
||||
if (!this.selectedChartType || !this.selectedChartType.name) {
|
||||
this.showError('Chart type name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.chartTypeLoadingState = ClrLoadingState.LOADING;
|
||||
this.chartTypeService.updateChartType(this.selectedChartType.id, this.selectedChartType).subscribe({
|
||||
next: (data) => {
|
||||
const index = this.chartTypes.findIndex(ct => ct.id === data.id);
|
||||
if (index !== -1) {
|
||||
this.chartTypes[index] = data;
|
||||
}
|
||||
this.selectedChartType = null;
|
||||
this.showSuccess('Chart type updated successfully');
|
||||
this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error updating chart type:', error);
|
||||
this.showError('Error updating chart type: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.chartTypeLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteChartType(id: number): void {
|
||||
if (!confirm('Are you sure you want to delete this chart type? This will also delete all related UI components, templates, and fields.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.chartTypeLoadingState = ClrLoadingState.LOADING;
|
||||
this.chartTypeService.deleteChartType(id).subscribe({
|
||||
next: () => {
|
||||
this.chartTypes = this.chartTypes.filter(ct => ct.id !== id);
|
||||
// Clear related data if the deleted chart type was selected
|
||||
if (this.selectedChartType && this.selectedChartType.id === id) {
|
||||
this.selectedChartType = null;
|
||||
this.uiComponents = [];
|
||||
this.chartTemplates = [];
|
||||
this.dynamicFields = [];
|
||||
}
|
||||
this.showSuccess('Chart type deleted successfully');
|
||||
this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error deleting chart type:', error);
|
||||
this.showError('Error deleting chart type: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.chartTypeLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectChartTypeForEdit(chartType: ChartType): void {
|
||||
this.selectedChartType = { ...chartType };
|
||||
}
|
||||
|
||||
// UI Component Methods
|
||||
loadUiComponents(chartTypeId: number): void {
|
||||
if (!chartTypeId) {
|
||||
this.uiComponents = [];
|
||||
return;
|
||||
}
|
||||
|
||||
this.uiComponentLoadingState = ClrLoadingState.LOADING;
|
||||
this.uiComponentService.getUiComponentsByChartType(chartTypeId).subscribe({
|
||||
next: (data) => {
|
||||
this.uiComponents = data;
|
||||
this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading UI components:', error);
|
||||
this.showError('Error loading UI components: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.uiComponentLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createUiComponent(): void {
|
||||
if (!this.selectedChartType) {
|
||||
this.showError('Please select a chart type first');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.newUiComponent.componentName) {
|
||||
this.showError('Component name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.uiComponentLoadingState = ClrLoadingState.LOADING;
|
||||
|
||||
// Create a complete chartType object with only the ID
|
||||
const chartTypeWithId = {
|
||||
id: this.selectedChartType.id,
|
||||
name: '',
|
||||
displayName: '',
|
||||
description: '',
|
||||
isActive: true,
|
||||
createdAt: '',
|
||||
updatedAt: ''
|
||||
};
|
||||
|
||||
const uiComponentData = {
|
||||
...this.newUiComponent,
|
||||
chartType: chartTypeWithId
|
||||
};
|
||||
|
||||
this.uiComponentService.createUiComponent(uiComponentData).subscribe({
|
||||
next: (data) => {
|
||||
this.uiComponents.push(data);
|
||||
this.newUiComponent = {};
|
||||
this.showAddUiComponentForm = false;
|
||||
this.showSuccess('UI component created successfully');
|
||||
this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error creating UI component:', error);
|
||||
this.showError('Error creating UI component: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.uiComponentLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateUiComponent(): void {
|
||||
if (!this.selectedUiComponent || !this.selectedUiComponent.componentName) {
|
||||
this.showError('Component name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.uiComponentLoadingState = ClrLoadingState.LOADING;
|
||||
this.uiComponentService.updateUiComponent(this.selectedUiComponent.id, this.selectedUiComponent).subscribe({
|
||||
next: (data) => {
|
||||
const index = this.uiComponents.findIndex(uc => uc.id === data.id);
|
||||
if (index !== -1) {
|
||||
this.uiComponents[index] = data;
|
||||
}
|
||||
this.selectedUiComponent = null;
|
||||
this.showSuccess('UI component updated successfully');
|
||||
this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error updating UI component:', error);
|
||||
this.showError('Error updating UI component: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.uiComponentLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteUiComponent(id: number): void {
|
||||
if (!confirm('Are you sure you want to delete this UI component?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.uiComponentLoadingState = ClrLoadingState.LOADING;
|
||||
this.uiComponentService.deleteUiComponent(id).subscribe({
|
||||
next: () => {
|
||||
this.uiComponents = this.uiComponents.filter(uc => uc.id !== id);
|
||||
this.showSuccess('UI component deleted successfully');
|
||||
this.uiComponentLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error deleting UI component:', error);
|
||||
this.showError('Error deleting UI component: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.uiComponentLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectUiComponentForEdit(uiComponent: UiComponent): void {
|
||||
this.selectedUiComponent = { ...uiComponent };
|
||||
}
|
||||
|
||||
// Component Property Methods
|
||||
loadComponentProperties(componentId: number): void {
|
||||
if (!componentId) {
|
||||
this.componentProperties = [];
|
||||
return;
|
||||
}
|
||||
|
||||
this.componentPropertyLoadingState = ClrLoadingState.LOADING;
|
||||
this.componentPropertyService.getComponentPropertiesByComponent(componentId).subscribe({
|
||||
next: (data) => {
|
||||
this.componentProperties = data;
|
||||
this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading component properties:', error);
|
||||
this.showError('Error loading component properties: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.componentPropertyLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createComponentProperty(): void {
|
||||
if (!this.selectedUiComponent) {
|
||||
this.showError('Please select a UI component first');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.newComponentProperty.propertyName) {
|
||||
this.showError('Property name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.componentPropertyLoadingState = ClrLoadingState.LOADING;
|
||||
|
||||
// Create a complete component object with only the ID
|
||||
const componentWithId = {
|
||||
id: this.selectedUiComponent.id
|
||||
} as UiComponent;
|
||||
|
||||
const componentPropertyData = {
|
||||
...this.newComponentProperty,
|
||||
component: componentWithId
|
||||
};
|
||||
|
||||
this.componentPropertyService.createComponentProperty(componentPropertyData).subscribe({
|
||||
next: (data) => {
|
||||
this.componentProperties.push(data);
|
||||
this.newComponentProperty = {};
|
||||
this.showAddComponentPropertyForm = false;
|
||||
this.showSuccess('Component property created successfully');
|
||||
this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error creating component property:', error);
|
||||
this.showError('Error creating component property: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.componentPropertyLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateComponentProperty(): void {
|
||||
if (!this.selectedComponentProperty || !this.selectedComponentProperty.propertyName) {
|
||||
this.showError('Property name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.componentPropertyLoadingState = ClrLoadingState.LOADING;
|
||||
this.componentPropertyService.updateComponentProperty(this.selectedComponentProperty.id, this.selectedComponentProperty).subscribe({
|
||||
next: (data) => {
|
||||
const index = this.componentProperties.findIndex(cp => cp.id === data.id);
|
||||
if (index !== -1) {
|
||||
this.componentProperties[index] = data;
|
||||
}
|
||||
this.selectedComponentProperty = null;
|
||||
this.showSuccess('Component property updated successfully');
|
||||
this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error updating component property:', error);
|
||||
this.showError('Error updating component property: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.componentPropertyLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteComponentProperty(id: number): void {
|
||||
if (!confirm('Are you sure you want to delete this component property?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.componentPropertyLoadingState = ClrLoadingState.LOADING;
|
||||
this.componentPropertyService.deleteComponentProperty(id).subscribe({
|
||||
next: () => {
|
||||
this.componentProperties = this.componentProperties.filter(cp => cp.id !== id);
|
||||
this.showSuccess('Component property deleted successfully');
|
||||
this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error deleting component property:', error);
|
||||
this.showError('Error deleting component property: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.componentPropertyLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectComponentPropertyForEdit(componentProperty: ComponentProperty): void {
|
||||
this.selectedComponentProperty = { ...componentProperty };
|
||||
}
|
||||
|
||||
// Chart Template Methods
|
||||
loadChartTemplates(chartTypeId: number): void {
|
||||
if (!chartTypeId) {
|
||||
this.chartTemplates = [];
|
||||
return;
|
||||
}
|
||||
|
||||
this.chartTemplateLoadingState = ClrLoadingState.LOADING;
|
||||
this.chartTemplateService.getChartTemplatesByChartType(chartTypeId).subscribe({
|
||||
next: (data) => {
|
||||
this.chartTemplates = data;
|
||||
this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading chart templates:', error);
|
||||
this.showError('Error loading chart templates: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.chartTemplateLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createChartTemplate(): void {
|
||||
if (!this.selectedChartType) {
|
||||
this.showError('Please select a chart type first');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.newChartTemplate.templateName) {
|
||||
this.showError('Template name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.chartTemplateLoadingState = ClrLoadingState.LOADING;
|
||||
|
||||
// Remove the chartType from the template data since we're passing it as a parameter
|
||||
const chartTemplateData = { ...this.newChartTemplate };
|
||||
// Remove chartType property if it exists
|
||||
delete (chartTemplateData as any).chartType;
|
||||
|
||||
this.chartTemplateService.createChartTemplate(chartTemplateData, this.selectedChartType.id).subscribe({
|
||||
next: (data) => {
|
||||
this.chartTemplates.push(data);
|
||||
this.newChartTemplate = {};
|
||||
this.showAddChartTemplateForm = false;
|
||||
this.showSuccess('Chart template created successfully');
|
||||
this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error creating chart template:', error);
|
||||
this.showError('Error creating chart template: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.chartTemplateLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateChartTemplate(): void {
|
||||
if (!this.selectedChartTemplate || !this.selectedChartTemplate.templateName) {
|
||||
this.showError('Template name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.chartTemplateLoadingState = ClrLoadingState.LOADING;
|
||||
this.chartTemplateService.updateChartTemplate(this.selectedChartTemplate.id, this.selectedChartTemplate).subscribe({
|
||||
next: (data) => {
|
||||
const index = this.chartTemplates.findIndex(ct => ct.id === data.id);
|
||||
if (index !== -1) {
|
||||
this.chartTemplates[index] = data;
|
||||
}
|
||||
this.selectedChartTemplate = null;
|
||||
this.showSuccess('Chart template updated successfully');
|
||||
this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error updating chart template:', error);
|
||||
this.showError('Error updating chart template: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.chartTemplateLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteChartTemplate(id: number): void {
|
||||
if (!confirm('Are you sure you want to delete this chart template?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.chartTemplateLoadingState = ClrLoadingState.LOADING;
|
||||
this.chartTemplateService.deleteChartTemplate(id).subscribe({
|
||||
next: () => {
|
||||
this.chartTemplates = this.chartTemplates.filter(ct => ct.id !== id);
|
||||
this.showSuccess('Chart template deleted successfully');
|
||||
this.chartTemplateLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error deleting chart template:', error);
|
||||
this.showError('Error deleting chart template: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.chartTemplateLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectChartTemplateForEdit(chartTemplate: ChartTemplate): void {
|
||||
this.selectedChartTemplate = { ...chartTemplate };
|
||||
}
|
||||
|
||||
// Dynamic Field Methods
|
||||
loadDynamicFields(chartTypeId: number): void {
|
||||
if (!chartTypeId) {
|
||||
this.dynamicFields = [];
|
||||
return;
|
||||
}
|
||||
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
|
||||
this.dynamicFieldService.getDynamicFieldsByChartType(chartTypeId).subscribe({
|
||||
next: (data) => {
|
||||
this.dynamicFields = data;
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading dynamic fields:', error);
|
||||
this.showError('Error loading dynamic fields: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createDynamicField(): void {
|
||||
if (!this.selectedChartType) {
|
||||
this.showError('Please select a chart type first');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.newDynamicField.fieldName) {
|
||||
this.showError('Field name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
|
||||
|
||||
// Remove the chartType from the dynamic field data since we're passing it as a parameter
|
||||
const dynamicFieldData = { ...this.newDynamicField };
|
||||
// Remove chartType property if it exists
|
||||
delete (dynamicFieldData as any).chartType;
|
||||
|
||||
this.dynamicFieldService.createDynamicField(dynamicFieldData, this.selectedChartType.id).subscribe({
|
||||
next: (data) => {
|
||||
this.dynamicFields.push(data);
|
||||
this.newDynamicField = {};
|
||||
this.showAddDynamicFieldForm = false;
|
||||
this.showSuccess('Dynamic field created successfully');
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error creating dynamic field:', error);
|
||||
this.showError('Error creating dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateDynamicField(): void {
|
||||
if (!this.selectedDynamicField || !this.selectedDynamicField.fieldName) {
|
||||
this.showError('Field name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
|
||||
this.dynamicFieldService.updateDynamicField(this.selectedDynamicField.id, this.selectedDynamicField).subscribe({
|
||||
next: (data) => {
|
||||
const index = this.dynamicFields.findIndex(df => df.id === data.id);
|
||||
if (index !== -1) {
|
||||
this.dynamicFields[index] = data;
|
||||
}
|
||||
this.selectedDynamicField = null;
|
||||
this.showSuccess('Dynamic field updated successfully');
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error updating dynamic field:', error);
|
||||
this.showError('Error updating dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteDynamicField(id: number): void {
|
||||
if (!confirm('Are you sure you want to delete this dynamic field?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.LOADING;
|
||||
this.dynamicFieldService.deleteDynamicField(id).subscribe({
|
||||
next: () => {
|
||||
this.dynamicFields = this.dynamicFields.filter(df => df.id !== id);
|
||||
this.showSuccess('Dynamic field deleted successfully');
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error deleting dynamic field:', error);
|
||||
this.showError('Error deleting dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.dynamicFieldLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectDynamicFieldForEdit(dynamicField: DynamicField): void {
|
||||
this.selectedDynamicField = { ...dynamicField };
|
||||
}
|
||||
|
||||
// Helper methods
|
||||
onChartTypeSelect(chartType: ChartType): void {
|
||||
this.selectedChartType = chartType;
|
||||
this.loadUiComponents(chartType.id);
|
||||
this.loadChartTemplates(chartType.id);
|
||||
this.loadDynamicFields(chartType.id);
|
||||
}
|
||||
|
||||
onUiComponentSelect(uiComponent: UiComponent): void {
|
||||
this.selectedUiComponent = uiComponent;
|
||||
this.loadComponentProperties(uiComponent.id);
|
||||
// Scroll to the Component Properties tab
|
||||
setTimeout(() => {
|
||||
const element = document.querySelector('clr-tab[ng-reflect-ng-if="true"] button[clr-tab-link]:nth-child(3)');
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
resetForms(): void {
|
||||
this.newChartType = {};
|
||||
this.newUiComponent = {};
|
||||
this.newComponentProperty = {};
|
||||
this.newChartTemplate = {};
|
||||
this.newDynamicField = {};
|
||||
this.showAddChartTypeForm = false;
|
||||
this.showAddUiComponentForm = false;
|
||||
this.showAddComponentPropertyForm = false;
|
||||
this.showAddChartTemplateForm = false;
|
||||
this.showAddDynamicFieldForm = false;
|
||||
this.selectedChartType = null;
|
||||
this.selectedUiComponent = null;
|
||||
this.selectedComponentProperty = null;
|
||||
this.selectedChartTemplate = null;
|
||||
this.selectedDynamicField = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { ApiRequestService } from 'src/app/services/api/api-request.service';
|
||||
import { ChartTemplate } from './chart-config-manager.component';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ChartTemplateService {
|
||||
private chartTemplatesUrl = 'api/chart-templates';
|
||||
|
||||
constructor(private apiRequest: ApiRequestService) { }
|
||||
|
||||
// Get all chart templates for a chart type
|
||||
getChartTemplatesByChartType(chartTypeId: number): Observable<ChartTemplate[]> {
|
||||
const url = `${this.chartTemplatesUrl}/chart-type/${chartTypeId}`;
|
||||
return this.apiRequest.get(url);
|
||||
}
|
||||
|
||||
// Get chart template by ID
|
||||
getChartTemplateById(id: number): Observable<ChartTemplate> {
|
||||
const url = `${this.chartTemplatesUrl}/${id}`;
|
||||
return this.apiRequest.get(url);
|
||||
}
|
||||
|
||||
// Create new chart template with optional chart type ID as parameter
|
||||
createChartTemplate(chartTemplate: Partial<ChartTemplate>, chartTypeId?: number): Observable<ChartTemplate> {
|
||||
let url = this.chartTemplatesUrl;
|
||||
if (chartTypeId) {
|
||||
url = `${this.chartTemplatesUrl}?chartTypeId=${chartTypeId}`;
|
||||
}
|
||||
return this.apiRequest.post(url, chartTemplate);
|
||||
}
|
||||
|
||||
// Update chart template
|
||||
updateChartTemplate(id: number, chartTemplate: ChartTemplate): Observable<ChartTemplate> {
|
||||
const url = `${this.chartTemplatesUrl}/${id}`;
|
||||
return this.apiRequest.put(url, chartTemplate);
|
||||
}
|
||||
|
||||
// Delete chart template
|
||||
deleteChartTemplate(id: number): Observable<void> {
|
||||
const url = `${this.chartTemplatesUrl}/${id}`;
|
||||
return this.apiRequest.delete(url);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { ApiRequestService } from 'src/app/services/api/api-request.service';
|
||||
import { ComponentProperty } from './chart-config-manager.component';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ComponentPropertyService {
|
||||
private componentPropertiesUrl = 'api/component-properties';
|
||||
|
||||
constructor(private apiRequest: ApiRequestService) { }
|
||||
|
||||
// Get all component properties for a component
|
||||
getComponentPropertiesByComponent(componentId: number): Observable<ComponentProperty[]> {
|
||||
const url = `${this.componentPropertiesUrl}/component/${componentId}`;
|
||||
return this.apiRequest.get(url);
|
||||
}
|
||||
|
||||
// Get component property by ID
|
||||
getComponentPropertyById(id: number): Observable<ComponentProperty> {
|
||||
const url = `${this.componentPropertiesUrl}/${id}`;
|
||||
return this.apiRequest.get(url);
|
||||
}
|
||||
|
||||
// Create new component property
|
||||
createComponentProperty(componentProperty: Partial<ComponentProperty>): Observable<ComponentProperty> {
|
||||
return this.apiRequest.post(this.componentPropertiesUrl, componentProperty);
|
||||
}
|
||||
|
||||
// Update component property
|
||||
updateComponentProperty(id: number, componentProperty: ComponentProperty): Observable<ComponentProperty> {
|
||||
const url = `${this.componentPropertiesUrl}/${id}`;
|
||||
return this.apiRequest.put(url, componentProperty);
|
||||
}
|
||||
|
||||
// Delete component property
|
||||
deleteComponentProperty(id: number): Observable<void> {
|
||||
const url = `${this.componentPropertiesUrl}/${id}`;
|
||||
return this.apiRequest.delete(url);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable, forkJoin } from 'rxjs';
|
||||
import { map } from 'rxjs/operators';
|
||||
import { ApiRequestService } from 'src/app/services/api/api-request.service';
|
||||
import { ChartType, UiComponent, ComponentProperty, ChartTemplate, DynamicField } from './chart-config-manager.component';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class DynamicChartLoaderService {
|
||||
private chartTypesUrl = 'api/chart-types';
|
||||
private uiComponentsUrl = 'api/ui-components';
|
||||
private componentPropertiesUrl = 'api/component-properties';
|
||||
private chartTemplatesUrl = 'api/chart-templates';
|
||||
private dynamicFieldsUrl = 'api/dynamic-fields';
|
||||
|
||||
constructor(private apiRequest: ApiRequestService) { }
|
||||
|
||||
/**
|
||||
* Load all chart configurations dynamically
|
||||
* This method fetches all chart types and their associated components, templates, and fields
|
||||
*/
|
||||
loadAllChartConfigurations(): Observable<any> {
|
||||
console.log('Loading all chart configurations dynamically');
|
||||
|
||||
// Load all chart types first
|
||||
return this.apiRequest.get(this.chartTypesUrl).pipe(
|
||||
map(chartTypes => {
|
||||
console.log('Loaded chart types:', chartTypes);
|
||||
return chartTypes;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Load complete configuration for a specific chart type
|
||||
* This includes UI components, templates, and dynamic fields
|
||||
*/
|
||||
loadChartConfiguration(chartTypeId: number): Observable<{
|
||||
chartType: ChartType,
|
||||
uiComponents: UiComponent[],
|
||||
templates: ChartTemplate[],
|
||||
dynamicFields: DynamicField[]
|
||||
}> {
|
||||
console.log(`Loading complete configuration for chart type ${chartTypeId}`);
|
||||
|
||||
// Load all related data in parallel
|
||||
return forkJoin({
|
||||
chartType: this.apiRequest.get(`${this.chartTypesUrl}/${chartTypeId}`),
|
||||
uiComponents: this.apiRequest.get(`${this.uiComponentsUrl}/chart-type/${chartTypeId}`),
|
||||
templates: this.apiRequest.get(`${this.chartTemplatesUrl}/chart-type/${chartTypeId}`),
|
||||
dynamicFields: this.apiRequest.get(`${this.dynamicFieldsUrl}/chart-type/${chartTypeId}`)
|
||||
}).pipe(
|
||||
map(result => {
|
||||
console.log(`Loaded complete configuration for chart type ${chartTypeId}:`, result);
|
||||
return result;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Load chart template for a specific chart type
|
||||
* This is used to render the chart UI dynamically
|
||||
*/
|
||||
loadChartTemplate(chartTypeId: number): Observable<ChartTemplate[]> {
|
||||
console.log(`Loading chart templates for chart type ${chartTypeId}`);
|
||||
return this.apiRequest.get(`${this.chartTemplatesUrl}/chart-type/${chartTypeId}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Load UI components for a specific chart type
|
||||
* These define what configuration fields are needed for the chart
|
||||
*/
|
||||
loadUiComponents(chartTypeId: number): Observable<UiComponent[]> {
|
||||
console.log(`Loading UI components for chart type ${chartTypeId}`);
|
||||
return this.apiRequest.get(`${this.uiComponentsUrl}/chart-type/${chartTypeId}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Load dynamic fields for a specific chart type
|
||||
* These define additional dynamic fields that can be used in the chart
|
||||
*/
|
||||
loadDynamicFields(chartTypeId: number): Observable<DynamicField[]> {
|
||||
console.log(`Loading dynamic fields for chart type ${chartTypeId}`);
|
||||
return this.apiRequest.get(`${this.dynamicFieldsUrl}/chart-type/${chartTypeId}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get chart type by name
|
||||
* This is useful for finding a chart type by its name rather than ID
|
||||
*/
|
||||
// getChartTypeByName(name: string): Observable<ChartType | null> {
|
||||
// console.log(`Finding chart type by name: ${name}`);
|
||||
// return this.apiRequest.get(`${this.chartTypesUrl}/byname?chartName=${name}`).pipe(
|
||||
// map((chartTypes: ChartType[]) => {
|
||||
// console.log('Available chart types:', chartTypes);
|
||||
// const chartType = chartTypes.find(ct => ct.name === name);
|
||||
// console.log(`Found chart type for name ${name}:`, chartType);
|
||||
// return chartType || null;
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
|
||||
getChartTypeByName(name: string): Observable<any> {
|
||||
console.log(`Finding chart type by name: ${name}`);
|
||||
return this.apiRequest.get(`${this.chartTypesUrl}/byname?chartName=${name}`);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Load all active chart types
|
||||
* This is used to populate the chart selection in the dashboard editor
|
||||
*/
|
||||
loadActiveChartTypes(): Observable<ChartType[]> {
|
||||
console.log('Loading active chart types');
|
||||
return this.apiRequest.get(`${this.chartTypesUrl}`).pipe(
|
||||
map((chartTypes: ChartType[]) => {
|
||||
const activeChartTypes = chartTypes.filter(ct => ct.isActive);
|
||||
console.log('Loaded active chart types:', activeChartTypes);
|
||||
return activeChartTypes;
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { ApiRequestService } from 'src/app/services/api/api-request.service';
|
||||
import { DynamicField } from './chart-config-manager.component';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class DynamicFieldService {
|
||||
private dynamicFieldsUrl = 'api/dynamic-fields';
|
||||
|
||||
constructor(private apiRequest: ApiRequestService) { }
|
||||
|
||||
// Get all dynamic fields for a chart type
|
||||
getDynamicFieldsByChartType(chartTypeId: number): Observable<DynamicField[]> {
|
||||
const url = `${this.dynamicFieldsUrl}/chart-type/${chartTypeId}`;
|
||||
return this.apiRequest.get(url);
|
||||
}
|
||||
|
||||
// Get dynamic field by ID
|
||||
getDynamicFieldById(id: number): Observable<DynamicField> {
|
||||
const url = `${this.dynamicFieldsUrl}/${id}`;
|
||||
return this.apiRequest.get(url);
|
||||
}
|
||||
|
||||
// Create new dynamic field with optional chart type ID as parameter
|
||||
createDynamicField(dynamicField: Partial<DynamicField>, chartTypeId?: number): Observable<DynamicField> {
|
||||
let url = this.dynamicFieldsUrl;
|
||||
if (chartTypeId) {
|
||||
url = `${this.dynamicFieldsUrl}?chartTypeId=${chartTypeId}`;
|
||||
}
|
||||
return this.apiRequest.post(url, dynamicField);
|
||||
}
|
||||
|
||||
// Update dynamic field
|
||||
updateDynamicField(id: number, dynamicField: DynamicField): Observable<DynamicField> {
|
||||
const url = `${this.dynamicFieldsUrl}/${id}`;
|
||||
return this.apiRequest.put(url, dynamicField);
|
||||
}
|
||||
|
||||
// Delete dynamic field
|
||||
deleteDynamicField(id: number): Observable<void> {
|
||||
const url = `${this.dynamicFieldsUrl}/${id}`;
|
||||
return this.apiRequest.delete(url);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
<div class="chart-template-form">
|
||||
<form clrForm (ngSubmit)="onSubmit()" #chartTemplateForm="ngForm">
|
||||
<clr-input-container>
|
||||
<label>Template Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="chartTemplate.templateName" name="templateName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>HTML Template</label>
|
||||
<textarea clrTextarea [(ngModel)]="chartTemplate.templateHtml" name="templateHtml" rows="5" placeholder="<div class='chart-container'>...</div>"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>CSS Template</label>
|
||||
<textarea clrTextarea [(ngModel)]="chartTemplate.templateCss" name="templateCss" rows="5" placeholder=".chart-container { ... }"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Default</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="chartTemplate.isDefault" name="isDefault" />
|
||||
<label>Default Template</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" type="submit" [disabled]="!chartTemplate.templateName">
|
||||
{{ isEdit ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
<button class="btn" type="button" (click)="onCancel()">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
.chart-template-form {
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { ChartTemplate } from '../chart-config-manager.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chart-template-form',
|
||||
templateUrl: './chart-template-form.component.html',
|
||||
styleUrls: ['./chart-template-form.component.scss']
|
||||
})
|
||||
export class ChartTemplateFormComponent {
|
||||
@Input() chartTemplate: Partial<ChartTemplate> = {};
|
||||
@Input() isEdit = false;
|
||||
@Output() save = new EventEmitter<Partial<ChartTemplate>>();
|
||||
@Output() cancel = new EventEmitter<void>();
|
||||
|
||||
onSubmit(): void {
|
||||
this.save.emit(this.chartTemplate);
|
||||
}
|
||||
|
||||
onCancel(): void {
|
||||
this.cancel.emit();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
<div class="chart-type-form">
|
||||
<form clrForm (ngSubmit)="onSubmit()" #chartTypeForm="ngForm">
|
||||
<clr-input-container>
|
||||
<label>Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="chartType.name" name="chartTypeName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Display Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="chartType.displayName" name="chartTypeDisplayName" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>Description</label>
|
||||
<textarea clrTextarea [(ngModel)]="chartType.description" name="chartTypeDescription" rows="3"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Active</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="chartType.isActive" name="chartTypeIsActive" />
|
||||
<label>Active</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" type="submit" [disabled]="!chartType.name">
|
||||
{{ isEdit ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
<button class="btn" type="button" (click)="onCancel()">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,12 @@
|
||||
.chart-type-form {
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { ChartType } from '../chart-config-manager.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chart-type-form',
|
||||
templateUrl: './chart-type-form.component.html',
|
||||
styleUrls: ['./chart-type-form.component.scss']
|
||||
})
|
||||
export class ChartTypeFormComponent {
|
||||
@Input() chartType: Partial<ChartType> = {};
|
||||
@Input() isEdit = false;
|
||||
@Output() save = new EventEmitter<Partial<ChartType>>();
|
||||
@Output() cancel = new EventEmitter<void>();
|
||||
|
||||
onSubmit(): void {
|
||||
this.save.emit(this.chartType);
|
||||
}
|
||||
|
||||
onCancel(): void {
|
||||
this.cancel.emit();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
<div class="component-property-form">
|
||||
<form clrForm (ngSubmit)="onSubmit()" #componentPropertyForm="ngForm">
|
||||
<clr-input-container>
|
||||
<label>Property Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="componentProperty.propertyName" name="propertyName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Property Value</label>
|
||||
<input clrInput type="text" [(ngModel)]="componentProperty.propertyValue" name="propertyValue" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-select-container>
|
||||
<label>Property Type</label>
|
||||
<select clrSelect [(ngModel)]="componentProperty.propertyType" name="propertyType">
|
||||
<option value="">Select a type</option>
|
||||
<option *ngFor="let type of propertyTypes" [value]="type">{{ type | titlecase }}</option>
|
||||
</select>
|
||||
</clr-select-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" type="submit" [disabled]="!componentProperty.propertyName">
|
||||
{{ isEdit ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
<button class="btn" type="button" (click)="onCancel()">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,12 @@
|
||||
.component-property-form {
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { ComponentProperty } from '../chart-config-manager.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-component-property-form',
|
||||
templateUrl: './component-property-form.component.html',
|
||||
styleUrls: ['./component-property-form.component.scss']
|
||||
})
|
||||
export class ComponentPropertyFormComponent {
|
||||
@Input() componentProperty: Partial<ComponentProperty> = {};
|
||||
@Input() isEdit = false;
|
||||
@Output() save = new EventEmitter<Partial<ComponentProperty>>();
|
||||
@Output() cancel = new EventEmitter<void>();
|
||||
|
||||
propertyTypes = [
|
||||
'string',
|
||||
'number',
|
||||
'boolean',
|
||||
'array',
|
||||
'object',
|
||||
'function'
|
||||
];
|
||||
|
||||
onSubmit(): void {
|
||||
this.save.emit(this.componentProperty);
|
||||
}
|
||||
|
||||
onCancel(): void {
|
||||
this.cancel.emit();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
<div class="dynamic-field-form">
|
||||
<form clrForm (ngSubmit)="onSubmit()" #dynamicFieldForm="ngForm">
|
||||
<clr-input-container>
|
||||
<label>Field Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="dynamicField.fieldName" name="fieldName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Field Label</label>
|
||||
<input clrInput type="text" [(ngModel)]="dynamicField.fieldLabel" name="fieldLabel" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-select-container>
|
||||
<label>Field Type</label>
|
||||
<select clrSelect [(ngModel)]="dynamicField.fieldType" name="fieldType">
|
||||
<option value="">Select a type</option>
|
||||
<option *ngFor="let type of fieldTypes" [value]="type">{{ type | titlecase }}</option>
|
||||
</select>
|
||||
</clr-select-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>Field Options (JSON format)</label>
|
||||
<textarea clrTextarea [(ngModel)]="dynamicField.fieldOptions" name="fieldOptions" rows="3" placeholder='{"option1": "Option 1", "option2": "Option 2"}'></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Sort Order</label>
|
||||
<input clrInput type="number" [(ngModel)]="dynamicField.sortOrder" name="fieldSortOrder" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Required</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="dynamicField.isRequired" name="fieldIsRequired" />
|
||||
<label>Required</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Show in UI</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="dynamicField.showInUi" name="fieldShowInUi" />
|
||||
<label>Show in UI</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" type="submit" [disabled]="!dynamicField.fieldName">
|
||||
{{ isEdit ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
<button class="btn" type="button" (click)="onCancel()">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
.dynamic-field-form {
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { DynamicField } from '../chart-config-manager.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dynamic-field-form',
|
||||
templateUrl: './dynamic-field-form.component.html',
|
||||
styleUrls: ['./dynamic-field-form.component.scss']
|
||||
})
|
||||
export class DynamicFieldFormComponent {
|
||||
@Input() dynamicField: Partial<DynamicField> = {};
|
||||
@Input() isEdit = false;
|
||||
@Output() save = new EventEmitter<Partial<DynamicField>>();
|
||||
@Output() cancel = new EventEmitter<void>();
|
||||
|
||||
fieldTypes = [
|
||||
'text',
|
||||
'number',
|
||||
'email',
|
||||
'password',
|
||||
'date',
|
||||
'select',
|
||||
'checkbox',
|
||||
'radio',
|
||||
'textarea'
|
||||
];
|
||||
|
||||
onSubmit(): void {
|
||||
this.save.emit(this.dynamicField);
|
||||
}
|
||||
|
||||
onCancel(): void {
|
||||
this.cancel.emit();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
<div class="ui-component-form">
|
||||
<form clrForm (ngSubmit)="onSubmit()" #uiComponentForm="ngForm">
|
||||
<clr-input-container>
|
||||
<label>Component Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="uiComponent.componentName" name="componentName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-select-container>
|
||||
<label>Component Type</label>
|
||||
<select clrSelect [(ngModel)]="uiComponent.componentType" name="componentType">
|
||||
<option value="">Select a type</option>
|
||||
<option *ngFor="let type of componentTypes" [value]="type">{{ type | titlecase }}</option>
|
||||
</select>
|
||||
</clr-select-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Display Label</label>
|
||||
<input clrInput type="text" [(ngModel)]="uiComponent.displayLabel" name="displayLabel" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Placeholder</label>
|
||||
<input clrInput type="text" [(ngModel)]="uiComponent.placeholder" name="placeholder" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Sort Order</label>
|
||||
<input clrInput type="number" [(ngModel)]="uiComponent.sortOrder" name="sortOrder" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Required</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="uiComponent.isRequired" name="isRequired" />
|
||||
<label>Required</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" type="submit" [disabled]="!uiComponent.componentName">
|
||||
{{ isEdit ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
<button class="btn" type="button" (click)="onCancel()">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,12 @@
|
||||
.ui-component-form {
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { UiComponent } from '../chart-config-manager.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-ui-component-form',
|
||||
templateUrl: './ui-component-form.component.html',
|
||||
styleUrls: ['./ui-component-form.component.scss']
|
||||
})
|
||||
export class UiComponentFormComponent {
|
||||
@Input() uiComponent: Partial<UiComponent> = {};
|
||||
@Input() isEdit = false;
|
||||
@Output() save = new EventEmitter<Partial<UiComponent>>();
|
||||
@Output() cancel = new EventEmitter<void>();
|
||||
|
||||
componentTypes = [
|
||||
'input',
|
||||
'select',
|
||||
'checkbox',
|
||||
'radio',
|
||||
'textarea',
|
||||
'datepicker',
|
||||
'slider',
|
||||
'toggle'
|
||||
];
|
||||
|
||||
onSubmit(): void {
|
||||
this.save.emit(this.uiComponent);
|
||||
}
|
||||
|
||||
onCancel(): void {
|
||||
this.cancel.emit();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { ApiRequestService } from 'src/app/services/api/api-request.service';
|
||||
import { UiComponent } from './chart-config-manager.component';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class UiComponentService {
|
||||
private uiComponentsUrl = 'api/ui-components';
|
||||
|
||||
constructor(private apiRequest: ApiRequestService) { }
|
||||
|
||||
// Get all UI components for a chart type
|
||||
getUiComponentsByChartType(chartTypeId: number): Observable<UiComponent[]> {
|
||||
const url = `${this.uiComponentsUrl}/chart-type/${chartTypeId}`;
|
||||
console.log(`Fetching UI components for chart type ${chartTypeId} from ${url}`);
|
||||
return this.apiRequest.get(url);
|
||||
}
|
||||
|
||||
// Get UI component by ID
|
||||
getUiComponentById(id: number): Observable<UiComponent> {
|
||||
const url = `${this.uiComponentsUrl}/${id}`;
|
||||
console.log(`Fetching UI component ${id} from ${url}`);
|
||||
return this.apiRequest.get(url);
|
||||
}
|
||||
|
||||
// Create new UI component
|
||||
createUiComponent(uiComponent: Partial<UiComponent>): Observable<UiComponent> {
|
||||
console.log('Creating UI component:', uiComponent);
|
||||
return this.apiRequest.post(this.uiComponentsUrl, uiComponent);
|
||||
}
|
||||
|
||||
// Update UI component
|
||||
updateUiComponent(id: number, uiComponent: UiComponent): Observable<UiComponent> {
|
||||
const url = `${this.uiComponentsUrl}/${id}`;
|
||||
console.log(`Updating UI component ${id}:`, uiComponent);
|
||||
return this.apiRequest.put(url, uiComponent);
|
||||
}
|
||||
|
||||
// Delete UI component
|
||||
deleteUiComponent(id: number): Observable<void> {
|
||||
const url = `${this.uiComponentsUrl}/${id}`;
|
||||
console.log(`Deleting UI component ${id}`);
|
||||
return this.apiRequest.delete(url);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
<div class="add-chart-type-page">
|
||||
<div class="header">
|
||||
<h2>Add New Chart Type</h2>
|
||||
</div>
|
||||
|
||||
<!-- Error and Success Messages -->
|
||||
<div class="alert alert-danger" *ngIf="errorMessage">
|
||||
<button type="button" class="close" aria-label="Close" (click)="errorMessage = null">
|
||||
<cds-icon shape="close"></cds-icon>
|
||||
</button>
|
||||
<div class="alert-item">
|
||||
<span class="alert-text">{{ errorMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success" *ngIf="successMessage">
|
||||
<button type="button" class="close" aria-label="Close" (click)="successMessage = null">
|
||||
<cds-icon shape="close"></cds-icon>
|
||||
</button>
|
||||
<div class="alert-item">
|
||||
<span class="alert-text">{{ successMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<form clrForm (ngSubmit)="createChartType()" #addChartTypeForm="ngForm">
|
||||
<clr-input-container>
|
||||
<label>Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="chartType.name" name="chartTypeName" required />
|
||||
<clr-control-helper>Enter a unique name for the chart type (e.g., "line-chart", "bar-chart")</clr-control-helper>
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Display Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="chartType.displayName" name="chartTypeDisplayName" />
|
||||
<clr-control-helper>This is the user-friendly name shown in the UI</clr-control-helper>
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>Description</label>
|
||||
<textarea clrTextarea [(ngModel)]="chartType.description" name="chartTypeDescription" rows="3"></textarea>
|
||||
<clr-control-helper>Provide a detailed description of this chart type and when to use it</clr-control-helper>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Active</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="chartType.isActive" name="chartTypeIsActive" />
|
||||
<label>Active</label>
|
||||
</clr-checkbox-wrapper>
|
||||
<clr-control-helper>Deactivate chart types that should not be available for selection</clr-control-helper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" type="submit" [disabled]="!chartType.name || loadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
Create Chart Type
|
||||
</button>
|
||||
<button class="btn" type="button" (click)="onCancel()">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-section">
|
||||
<h4>About Chart Types</h4>
|
||||
<p>Chart types define the different visualization options available in the dashboard builder. Each chart type can have:</p>
|
||||
<ul>
|
||||
<li>Associated UI components that define the configuration form</li>
|
||||
<li>Templates that define how the chart is rendered</li>
|
||||
<li>Dynamic fields that capture specific configuration parameters</li>
|
||||
</ul>
|
||||
<p>After creating a chart type, you can configure its components, templates, and fields in the chart configuration manager.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,65 @@
|
||||
.add-chart-type-page {
|
||||
padding: 20px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
|
||||
.header {
|
||||
margin-bottom: 20px;
|
||||
h2 {
|
||||
color: #0079b8;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.card-block {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
background-color: #f6f6f6;
|
||||
border-left: 4px solid #0079b8;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
color: #0079b8;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 10px;
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { ClrLoadingState } from '@clr/angular';
|
||||
import { ChartType, ChartTypeService } from './chart-type.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-add-chart-type',
|
||||
templateUrl: './add-chart-type.component.html',
|
||||
styleUrls: ['./add-chart-type.component.scss']
|
||||
})
|
||||
export class AddChartTypeComponent {
|
||||
chartType: Partial<ChartType> = {
|
||||
isActive: true
|
||||
};
|
||||
loadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||
errorMessage: string | null = null;
|
||||
successMessage: string | null = null;
|
||||
|
||||
// Make ClrLoadingState available to template
|
||||
readonly ClrLoadingState = ClrLoadingState;
|
||||
|
||||
constructor(
|
||||
private chartTypeService: ChartTypeService,
|
||||
private router: Router
|
||||
) { }
|
||||
|
||||
// Show error message
|
||||
private showError(message: string): void {
|
||||
this.errorMessage = message;
|
||||
setTimeout(() => {
|
||||
this.errorMessage = null;
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Show success message
|
||||
private showSuccess(message: string): void {
|
||||
this.successMessage = message;
|
||||
setTimeout(() => {
|
||||
this.successMessage = null;
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
createChartType(): void {
|
||||
if (!this.chartType.name) {
|
||||
this.showError('Chart type name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadingState = ClrLoadingState.LOADING;
|
||||
this.chartTypeService.createChartType(this.chartType).subscribe({
|
||||
next: (data) => {
|
||||
this.showSuccess('Chart type created successfully');
|
||||
this.loadingState = ClrLoadingState.SUCCESS;
|
||||
// Redirect to chart types list after a short delay
|
||||
setTimeout(() => {
|
||||
this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
|
||||
}, 1500);
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error creating chart type:', error);
|
||||
this.showError('Error creating chart type: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.loadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onCancel(): void {
|
||||
this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
<div class="chart-type-fields-page">
|
||||
<div class="header">
|
||||
<h2>
|
||||
<button class="btn btn-link back-button" (click)="goBack()">
|
||||
<cds-icon shape="arrow" direction="left"></cds-icon>
|
||||
</button>
|
||||
Dynamic Fields for {{ chartType?.name || 'Chart Type' }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Error and Success Messages -->
|
||||
<div class="alert alert-danger" *ngIf="errorMessage">
|
||||
<button type="button" class="close" aria-label="Close" (click)="errorMessage = null">
|
||||
<cds-icon shape="close"></cds-icon>
|
||||
</button>
|
||||
<div class="alert-item">
|
||||
<span class="alert-text">{{ errorMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success" *ngIf="successMessage">
|
||||
<button type="button" class="close" aria-label="Close" (click)="successMessage = null">
|
||||
<cds-icon shape="close"></cds-icon>
|
||||
</button>
|
||||
<div class="alert-item">
|
||||
<span class="alert-text">{{ successMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Dynamic Field Form -->
|
||||
<div class="card" *ngIf="showAddForm">
|
||||
<div class="card-header">
|
||||
<h3>Add New Dynamic Field</h3>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form clrForm (ngSubmit)="createDynamicField()" #addDynamicFieldForm="ngForm">
|
||||
<clr-input-container>
|
||||
<label>Field Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="newDynamicField.fieldName" name="fieldName" required />
|
||||
<clr-control-helper>Enter a unique name for the dynamic field (e.g., "chart-title", "x-axis-label")</clr-control-helper>
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Field Label</label>
|
||||
<input clrInput type="text" [(ngModel)]="newDynamicField.fieldLabel" name="fieldLabel" />
|
||||
<clr-control-helper>User-friendly label shown in the configuration form</clr-control-helper>
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Field Type</label>
|
||||
<input clrInput type="text" [(ngModel)]="newDynamicField.fieldType" name="fieldType" />
|
||||
<clr-control-helper>Type of the field (e.g., "string", "number", "boolean")</clr-control-helper>
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>Field Options</label>
|
||||
<textarea clrTextarea [(ngModel)]="newDynamicField.fieldOptions" name="fieldOptions" rows="3"></textarea>
|
||||
<clr-control-helper>JSON options for the field (for select fields, etc.)</clr-control-helper>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Sort Order</label>
|
||||
<input clrInput type="number" [(ngModel)]="newDynamicField.sortOrder" name="fieldSortOrder" />
|
||||
<clr-control-helper>Order in which fields appear in the form</clr-control-helper>
|
||||
</clr-input-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Required</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.isRequired" name="fieldIsRequired" />
|
||||
<label>Required</label>
|
||||
</clr-checkbox-wrapper>
|
||||
<clr-control-helper>Mark as required if this field must be filled</clr-control-helper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Show in UI</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.showInUi" name="fieldShowInUi" />
|
||||
<label>Visible</label>
|
||||
</clr-checkbox-wrapper>
|
||||
<clr-control-helper>Uncheck to hide this field in the configuration form</clr-control-helper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" type="submit" [disabled]="!newDynamicField.fieldName || loadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
Create Dynamic Field
|
||||
</button>
|
||||
<button class="btn" type="button" (click)="showAddForm = false">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dynamic Fields Grid -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col">
|
||||
<h3>Dynamic Fields</h3>
|
||||
</div>
|
||||
<div class="clr-col" style="text-align: right;">
|
||||
<button class="btn btn-primary" (click)="showAddForm = true">
|
||||
<cds-icon shape="plus"></cds-icon> Add Dynamic Field
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-block">
|
||||
<clr-datagrid [clrDgLoading]="loadingState === ClrLoadingState.LOADING">
|
||||
<clr-dg-column>Field Name</clr-dg-column>
|
||||
<clr-dg-column>Field Label</clr-dg-column>
|
||||
<clr-dg-column>Field Type</clr-dg-column>
|
||||
<clr-dg-column>Required</clr-dg-column>
|
||||
<clr-dg-column>Visible</clr-dg-column>
|
||||
<clr-dg-column>Sort Order</clr-dg-column>
|
||||
<clr-dg-column>Actions</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let dynamicField of dynamicFields" [clrDgItem]="dynamicField">
|
||||
<clr-dg-cell>{{dynamicField.fieldName}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{dynamicField.fieldLabel}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{dynamicField.fieldType}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<span class="label" [class.label-success]="dynamicField.isRequired" [class.label-danger]="!dynamicField.isRequired">
|
||||
{{dynamicField.isRequired ? 'Yes' : 'No'}}
|
||||
</span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<span class="label" [class.label-success]="dynamicField.showInUi" [class.label-danger]="!dynamicField.showInUi">
|
||||
{{dynamicField.showInUi ? 'Yes' : 'No'}}
|
||||
</span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>{{dynamicField.sortOrder}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<button class="btn btn-sm btn-icon" (click)="selectDynamicFieldForEdit(dynamicField)" title="Edit">
|
||||
<cds-icon shape="pencil"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteDynamicField(dynamicField.id)" title="Delete">
|
||||
<cds-icon shape="trash"></cds-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{dynamicFields.length}} dynamic field(s)
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Dynamic Field Form -->
|
||||
<div class="card" *ngIf="selectedDynamicField">
|
||||
<div class="card-header">
|
||||
<h3>Edit Dynamic Field</h3>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form clrForm (ngSubmit)="updateDynamicField()" #editDynamicFieldForm="ngForm">
|
||||
<clr-input-container>
|
||||
<label>Field Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldName" name="editFieldName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Field Label</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldLabel" name="editFieldLabel" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Field Type</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldType" name="editFieldType" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>Field Options</label>
|
||||
<textarea clrTextarea [(ngModel)]="selectedDynamicField.fieldOptions" name="editFieldOptions" rows="3"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Sort Order</label>
|
||||
<input clrInput type="number" [(ngModel)]="selectedDynamicField.sortOrder" name="editFieldSortOrder" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Required</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="selectedDynamicField.isRequired" name="editFieldIsRequired" />
|
||||
<label>Required</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Show in UI</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="selectedDynamicField.showInUi" name="editFieldShowInUi" />
|
||||
<label>Visible</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" type="submit" [disabled]="!selectedDynamicField.fieldName || loadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
Update Dynamic Field
|
||||
</button>
|
||||
<button class="btn" type="button" (click)="selectedDynamicField = null">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-section">
|
||||
<h4>About Dynamic Fields</h4>
|
||||
<p>Dynamic fields define the configurable parameters for a chart type. Each field represents:</p>
|
||||
<ul>
|
||||
<li>A configuration option that can be set when creating or editing a chart</li>
|
||||
<li>Metadata like type, label, and validation rules</li>
|
||||
<li>Visibility and requirement settings</li>
|
||||
</ul>
|
||||
<p>Dynamic fields allow you to create flexible chart configurations that can be customized per instance.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,128 @@
|
||||
.chart-type-fields-page {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.header {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
color: #0079b8;
|
||||
font-weight: 300;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
padding: 0;
|
||||
cds-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.card-block {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
h3 {
|
||||
margin: 0;
|
||||
color: #0079b8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
|
||||
&.label-success {
|
||||
background-color: #3d9970;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.label-danger {
|
||||
background-color: #d32f2f;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
clr-datagrid {
|
||||
margin-top: 10px;
|
||||
|
||||
clr-dg-cell {
|
||||
&:first-child {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
background-color: #f6f6f6;
|
||||
border-left: 4px solid #0079b8;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
color: #0079b8;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 10px;
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.clr-row {
|
||||
flex-direction: column;
|
||||
|
||||
.clr-col {
|
||||
text-align: left !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ClrLoadingState } from '@clr/angular';
|
||||
import { ChartType, ChartTypeService } from './chart-type.service';
|
||||
import { DynamicField } from '../chart-config/chart-config-manager.component';
|
||||
import { DynamicFieldService } from '../chart-config/dynamic-field.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chart-type-fields',
|
||||
templateUrl: './chart-type-fields.component.html',
|
||||
styleUrls: ['./chart-type-fields.component.scss']
|
||||
})
|
||||
export class ChartTypeFieldsComponent implements OnInit {
|
||||
chartType: ChartType | null = null;
|
||||
dynamicFields: DynamicField[] = [];
|
||||
newDynamicField: Partial<DynamicField> = {
|
||||
isRequired: false,
|
||||
showInUi: true
|
||||
};
|
||||
selectedDynamicField: DynamicField | null = null;
|
||||
showAddForm = false;
|
||||
|
||||
loadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||
errorMessage: string | null = null;
|
||||
successMessage: string | null = null;
|
||||
|
||||
// Make ClrLoadingState available to template
|
||||
readonly ClrLoadingState = ClrLoadingState;
|
||||
|
||||
constructor(
|
||||
private chartTypeService: ChartTypeService,
|
||||
private dynamicFieldService: DynamicFieldService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
const chartTypeId = Number(this.route.snapshot.paramMap.get('id'));
|
||||
if (chartTypeId) {
|
||||
this.loadChartType(chartTypeId);
|
||||
this.loadDynamicFields(chartTypeId);
|
||||
} else {
|
||||
this.showError('Invalid chart type ID');
|
||||
}
|
||||
}
|
||||
|
||||
// Show error message
|
||||
private showError(message: string): void {
|
||||
this.errorMessage = message;
|
||||
setTimeout(() => {
|
||||
this.errorMessage = null;
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Show success message
|
||||
private showSuccess(message: string): void {
|
||||
this.successMessage = message;
|
||||
setTimeout(() => {
|
||||
this.successMessage = null;
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
loadChartType(id: number): void {
|
||||
this.chartTypeService.getChartTypeById(id).subscribe({
|
||||
next: (data) => {
|
||||
this.chartType = data;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading chart type:', error);
|
||||
this.showError('Error loading chart type: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
loadDynamicFields(chartTypeId: number): void {
|
||||
this.loadingState = ClrLoadingState.LOADING;
|
||||
this.dynamicFieldService.getDynamicFieldsByChartType(chartTypeId).subscribe({
|
||||
next: (data) => {
|
||||
this.dynamicFields = data;
|
||||
this.loadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading dynamic fields:', error);
|
||||
this.showError('Error loading dynamic fields: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.loadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createDynamicField(): void {
|
||||
if (!this.chartType || !this.newDynamicField.fieldName) {
|
||||
this.showError('Field name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a copy without the chartType property
|
||||
const fieldData: Partial<DynamicField> = {
|
||||
fieldName: this.newDynamicField.fieldName,
|
||||
fieldLabel: this.newDynamicField.fieldLabel,
|
||||
fieldType: this.newDynamicField.fieldType,
|
||||
fieldOptions: this.newDynamicField.fieldOptions,
|
||||
isRequired: this.newDynamicField.isRequired,
|
||||
showInUi: this.newDynamicField.showInUi,
|
||||
sortOrder: this.newDynamicField.sortOrder
|
||||
};
|
||||
|
||||
this.loadingState = ClrLoadingState.LOADING;
|
||||
this.dynamicFieldService.createDynamicField(fieldData, this.chartType.id).subscribe({
|
||||
next: (data) => {
|
||||
this.dynamicFields.push(data);
|
||||
this.newDynamicField = { isRequired: false, showInUi: true };
|
||||
this.showAddForm = false;
|
||||
this.showSuccess('Dynamic field created successfully');
|
||||
this.loadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error creating dynamic field:', error);
|
||||
this.showError('Error creating dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.loadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateDynamicField(): void {
|
||||
if (!this.selectedDynamicField || !this.selectedDynamicField.fieldName) {
|
||||
this.showError('Field name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Updating dynamic field:', this.selectedDynamicField);
|
||||
this.loadingState = ClrLoadingState.LOADING;
|
||||
this.dynamicFieldService.updateDynamicField(this.selectedDynamicField.id, this.selectedDynamicField).subscribe({
|
||||
next: (data) => {
|
||||
const index = this.dynamicFields.findIndex(df => df.id === data.id);
|
||||
if (index !== -1) {
|
||||
this.dynamicFields[index] = data;
|
||||
}
|
||||
this.selectedDynamicField = null;
|
||||
this.showSuccess('Dynamic field updated successfully');
|
||||
this.loadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error updating dynamic field:', error);
|
||||
this.showError('Error updating dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.loadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteDynamicField(id: number): void {
|
||||
if (!confirm('Are you sure you want to delete this dynamic field?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadingState = ClrLoadingState.LOADING;
|
||||
this.dynamicFieldService.deleteDynamicField(id).subscribe({
|
||||
next: () => {
|
||||
this.dynamicFields = this.dynamicFields.filter(df => df.id !== id);
|
||||
this.showSuccess('Dynamic field deleted successfully');
|
||||
this.loadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error deleting dynamic field:', error);
|
||||
this.showError('Error deleting dynamic field: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.loadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectDynamicFieldForEdit(dynamicField: DynamicField): void {
|
||||
this.selectedDynamicField = { ...dynamicField };
|
||||
}
|
||||
|
||||
goBack(): void {
|
||||
if (this.chartType) {
|
||||
this.router.navigate(['/cns-portal/dashboardbuilder/chart-types/edit', this.chartType.id]);
|
||||
} else {
|
||||
this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
<div class="chart-type-manager">
|
||||
<h2>Chart Type Management</h2>
|
||||
|
||||
<!-- Error and Success Messages -->
|
||||
<div class="alert alert-danger" *ngIf="errorMessage">
|
||||
<button type="button" class="close" aria-label="Close" (click)="errorMessage = null">
|
||||
<cds-icon shape="close"></cds-icon>
|
||||
</button>
|
||||
<div class="alert-item">
|
||||
<span class="alert-text">{{ errorMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success" *ngIf="successMessage">
|
||||
<button type="button" class="close" aria-label="Close" (click)="successMessage = null">
|
||||
<cds-icon shape="close"></cds-icon>
|
||||
</button>
|
||||
<div class="alert-item">
|
||||
<span class="alert-text">{{ successMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chart Types Grid -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col">
|
||||
<h3>Chart Types</h3>
|
||||
</div>
|
||||
<div class="clr-col" style="text-align: right;">
|
||||
<button class="btn btn-primary" [routerLink]="['/cns-portal/dashboardbuilder/chart-types/add']">
|
||||
<cds-icon shape="plus"></cds-icon> Add Chart Type
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-block">
|
||||
<clr-datagrid [clrDgLoading]="chartTypeLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-dg-column>Name</clr-dg-column>
|
||||
<clr-dg-column>Display Name</clr-dg-column>
|
||||
<clr-dg-column>Description</clr-dg-column>
|
||||
<clr-dg-column>Status</clr-dg-column>
|
||||
<clr-dg-column>Created At</clr-dg-column>
|
||||
<clr-dg-column>Updated At</clr-dg-column>
|
||||
<clr-dg-column>Actions</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let chartType of chartTypes" [clrDgItem]="chartType">
|
||||
<clr-dg-cell>{{chartType.name}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{chartType.displayName}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{chartType.description}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<span class="label" [class.label-success]="chartType.isActive" [class.label-danger]="!chartType.isActive">
|
||||
{{chartType.isActive ? 'Active' : 'Inactive'}}
|
||||
</span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>{{chartType.createdAt ? (chartType.createdAt | date:'short') : 'N/A'}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{chartType.updatedAt ? (chartType.updatedAt | date:'short') : 'N/A'}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<button class="btn btn-sm btn-icon" [routerLink]="['/cns-portal/dashboardbuilder/chart-types/edit', chartType.id]" title="Edit">
|
||||
<cds-icon shape="pencil"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteChartType(chartType.id)" title="Delete">
|
||||
<cds-icon shape="trash"></cds-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{chartTypes.length}} chart type(s)
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,71 @@
|
||||
.chart-type-manager {
|
||||
padding: 20px;
|
||||
|
||||
h2 {
|
||||
color: #0079b8;
|
||||
font-weight: 300;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.card-header {
|
||||
h3 {
|
||||
margin: 0;
|
||||
color: #0079b8;
|
||||
}
|
||||
}
|
||||
|
||||
.card-block {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
|
||||
&.label-success {
|
||||
background-color: #3d9970;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.label-danger {
|
||||
background-color: #d32f2f;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
clr-datagrid {
|
||||
margin-top: 10px;
|
||||
|
||||
clr-dg-cell {
|
||||
&:first-child {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 10px;
|
||||
|
||||
.card-header {
|
||||
.clr-row {
|
||||
flex-direction: column;
|
||||
|
||||
.clr-col {
|
||||
text-align: left !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ClrLoadingState } from '@clr/angular';
|
||||
import { ChartType, ChartTypeService } from './chart-type.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chart-type-manager',
|
||||
templateUrl: './chart-type-manager.component.html',
|
||||
styleUrls: ['./chart-type-manager.component.scss']
|
||||
})
|
||||
export class ChartTypeManagerComponent implements OnInit {
|
||||
chartTypes: ChartType[] = [];
|
||||
chartTypeLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||
|
||||
// Make ClrLoadingState available to template
|
||||
readonly ClrLoadingState = ClrLoadingState;
|
||||
|
||||
// Error handling
|
||||
errorMessage: string | null = null;
|
||||
successMessage: string | null = null;
|
||||
|
||||
constructor(private chartTypeService: ChartTypeService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadChartTypes();
|
||||
}
|
||||
|
||||
// Show error message
|
||||
private showError(message: string): void {
|
||||
this.errorMessage = message;
|
||||
setTimeout(() => {
|
||||
this.errorMessage = null;
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Show success message
|
||||
private showSuccess(message: string): void {
|
||||
this.successMessage = message;
|
||||
setTimeout(() => {
|
||||
this.successMessage = null;
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Chart Type Methods
|
||||
loadChartTypes(): void {
|
||||
this.chartTypeLoadingState = ClrLoadingState.LOADING;
|
||||
this.chartTypeService.getAllChartTypes().subscribe({
|
||||
next: (data) => {
|
||||
// Process the data to ensure dates are properly formatted
|
||||
this.chartTypes = data.map(chartType => ({
|
||||
...chartType,
|
||||
createdAt: this.formatDate(chartType.createdAt),
|
||||
updatedAt: this.formatDate(chartType.updatedAt)
|
||||
}));
|
||||
this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading chart types:', error);
|
||||
this.showError('Error loading chart types: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.chartTypeLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Format date to handle both string and object formats
|
||||
private formatDate(date: any): string {
|
||||
if (!date) return '';
|
||||
|
||||
// If it's already a string, return as is
|
||||
if (typeof date === 'string') {
|
||||
return date;
|
||||
}
|
||||
|
||||
// If it's an object, try to convert to string
|
||||
if (typeof date === 'object') {
|
||||
// Handle various date object formats
|
||||
if (date instanceof Date) {
|
||||
return date.toISOString();
|
||||
}
|
||||
|
||||
// Handle ISO string within object
|
||||
if (date.date) {
|
||||
return date.date;
|
||||
}
|
||||
|
||||
// Handle other object formats
|
||||
try {
|
||||
return new Date(date).toISOString();
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
deleteChartType(id: number): void {
|
||||
if (!confirm('Are you sure you want to delete this chart type?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.chartTypeLoadingState = ClrLoadingState.LOADING;
|
||||
this.chartTypeService.deleteChartType(id).subscribe({
|
||||
next: () => {
|
||||
this.chartTypes = this.chartTypes.filter(ct => ct.id !== id);
|
||||
this.showSuccess('Chart type deleted successfully');
|
||||
this.chartTypeLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error deleting chart type:', error);
|
||||
this.showError('Error deleting chart type: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.chartTypeLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chart-type-page',
|
||||
template: `
|
||||
<div class="chart-type-page">
|
||||
<app-chart-type-manager></app-chart-type-manager>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.chart-type-page {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chart-type-page {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class ChartTypePageComponent { }
|
||||
@@ -0,0 +1,175 @@
|
||||
<div class="chart-type-templates-page">
|
||||
<div class="header">
|
||||
<h2>
|
||||
<button class="btn btn-link back-button" (click)="goBack()">
|
||||
<cds-icon shape="arrow" direction="left"></cds-icon>
|
||||
</button>
|
||||
Chart Templates for {{ chartType?.name || 'Chart Type' }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Error and Success Messages -->
|
||||
<div class="alert alert-danger" *ngIf="errorMessage">
|
||||
<button type="button" class="close" aria-label="Close" (click)="errorMessage = null">
|
||||
<cds-icon shape="close"></cds-icon>
|
||||
</button>
|
||||
<div class="alert-item">
|
||||
<span class="alert-text">{{ errorMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success" *ngIf="successMessage">
|
||||
<button type="button" class="close" aria-label="Close" (click)="successMessage = null">
|
||||
<cds-icon shape="close"></cds-icon>
|
||||
</button>
|
||||
<div class="alert-item">
|
||||
<span class="alert-text">{{ successMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Chart Template Form -->
|
||||
<div class="card" *ngIf="showAddForm">
|
||||
<div class="card-header">
|
||||
<h3>Add New Chart Template</h3>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form clrForm (ngSubmit)="createChartTemplate()" #addChartTemplateForm="ngForm">
|
||||
<clr-input-container>
|
||||
<label>Template Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="newChartTemplate.templateName" name="templateName" required />
|
||||
<clr-control-helper>Enter a unique name for the chart template</clr-control-helper>
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>HTML Template</label>
|
||||
<textarea clrTextarea [(ngModel)]="newChartTemplate.templateHtml" name="templateHtml" rows="5"></textarea>
|
||||
<clr-control-helper>HTML structure for rendering the chart</clr-control-helper>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>CSS Template</label>
|
||||
<textarea clrTextarea [(ngModel)]="newChartTemplate.templateCss" name="templateCss" rows="5"></textarea>
|
||||
<clr-control-helper>CSS styling for the chart template</clr-control-helper>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Default</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="newChartTemplate.isDefault" name="isDefault" />
|
||||
<label>Default Template</label>
|
||||
</clr-checkbox-wrapper>
|
||||
<clr-control-helper>Mark as default template for this chart type</clr-control-helper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" type="submit" [disabled]="!newChartTemplate.templateName || loadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
Create Chart Template
|
||||
</button>
|
||||
<button class="btn" type="button" (click)="showAddForm = false">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chart Templates Grid -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col">
|
||||
<h3>Chart Templates</h3>
|
||||
</div>
|
||||
<div class="clr-col" style="text-align: right;">
|
||||
<button class="btn btn-primary" (click)="showAddForm = true">
|
||||
<cds-icon shape="plus"></cds-icon> Add Chart Template
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-block">
|
||||
<clr-datagrid [clrDgLoading]="loadingState === ClrLoadingState.LOADING">
|
||||
<clr-dg-column>Template Name</clr-dg-column>
|
||||
<clr-dg-column>Default</clr-dg-column>
|
||||
<clr-dg-column>Created At</clr-dg-column>
|
||||
<clr-dg-column>Updated At</clr-dg-column>
|
||||
<clr-dg-column>Actions</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let chartTemplate of chartTemplates" [clrDgItem]="chartTemplate">
|
||||
<clr-dg-cell>{{chartTemplate.templateName}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<span class="label" [class.label-success]="chartTemplate.isDefault" [class.label-danger]="!chartTemplate.isDefault">
|
||||
{{chartTemplate.isDefault ? 'Yes' : 'No'}}
|
||||
</span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell>{{chartTemplate.createdAt | date:'short'}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{chartTemplate.updatedAt | date:'short'}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<button class="btn btn-sm btn-icon" (click)="selectChartTemplateForEdit(chartTemplate)" title="Edit">
|
||||
<cds-icon shape="pencil"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteChartTemplate(chartTemplate.id)" title="Delete">
|
||||
<cds-icon shape="trash"></cds-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{chartTemplates.length}} chart template(s)
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Chart Template Form -->
|
||||
<div class="card" *ngIf="selectedChartTemplate">
|
||||
<div class="card-header">
|
||||
<h3>Edit Chart Template</h3>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form clrForm (ngSubmit)="updateChartTemplate()" #editChartTemplateForm="ngForm">
|
||||
<clr-input-container>
|
||||
<label>Template Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedChartTemplate.templateName" name="editTemplateName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>HTML Template</label>
|
||||
<textarea clrTextarea [(ngModel)]="selectedChartTemplate.templateHtml" name="editTemplateHtml" rows="5"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>CSS Template</label>
|
||||
<textarea clrTextarea [(ngModel)]="selectedChartTemplate.templateCss" name="editTemplateCss" rows="5"></textarea>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Default</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="selectedChartTemplate.isDefault" name="editIsDefault" />
|
||||
<label>Default Template</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" type="submit" [disabled]="!selectedChartTemplate.templateName || loadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
Update Chart Template
|
||||
</button>
|
||||
<button class="btn" type="button" (click)="selectedChartTemplate = null">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-section">
|
||||
<h4>About Chart Templates</h4>
|
||||
<p>Chart templates define how a chart of this type is rendered. Each template includes:</p>
|
||||
<ul>
|
||||
<li>HTML structure that defines the chart layout</li>
|
||||
<li>CSS styling that controls the appearance</li>
|
||||
<li>A default flag to indicate the primary template</li>
|
||||
</ul>
|
||||
<p>Templates allow you to have multiple visual representations for the same chart type.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,128 @@
|
||||
.chart-type-templates-page {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.header {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
color: #0079b8;
|
||||
font-weight: 300;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
padding: 0;
|
||||
cds-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.card-block {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
h3 {
|
||||
margin: 0;
|
||||
color: #0079b8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
|
||||
&.label-success {
|
||||
background-color: #3d9970;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.label-danger {
|
||||
background-color: #d32f2f;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
clr-datagrid {
|
||||
margin-top: 10px;
|
||||
|
||||
clr-dg-cell {
|
||||
&:first-child {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
background-color: #f6f6f6;
|
||||
border-left: 4px solid #0079b8;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
color: #0079b8;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 10px;
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.clr-row {
|
||||
flex-direction: column;
|
||||
|
||||
.clr-col {
|
||||
text-align: left !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ClrLoadingState } from '@clr/angular';
|
||||
import { ChartType, ChartTypeService } from './chart-type.service';
|
||||
import { ChartTemplateService } from '../chart-config/chart-template.service';
|
||||
import { ChartTemplate } from '../chart-config/chart-config-manager.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chart-type-templates',
|
||||
templateUrl: './chart-type-templates.component.html',
|
||||
styleUrls: ['./chart-type-templates.component.scss']
|
||||
})
|
||||
export class ChartTypeTemplatesComponent implements OnInit {
|
||||
chartType: ChartType | null = null;
|
||||
chartTemplates: ChartTemplate[] = [];
|
||||
newChartTemplate: Partial<ChartTemplate> = {
|
||||
isDefault: false
|
||||
};
|
||||
selectedChartTemplate: ChartTemplate | null = null;
|
||||
showAddForm = false;
|
||||
|
||||
loadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||
errorMessage: string | null = null;
|
||||
successMessage: string | null = null;
|
||||
|
||||
// Make ClrLoadingState available to template
|
||||
readonly ClrLoadingState = ClrLoadingState;
|
||||
|
||||
constructor(
|
||||
private chartTypeService: ChartTypeService,
|
||||
private chartTemplateService: ChartTemplateService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
const chartTypeId = Number(this.route.snapshot.paramMap.get('id'));
|
||||
if (chartTypeId) {
|
||||
this.loadChartType(chartTypeId);
|
||||
this.loadChartTemplates(chartTypeId);
|
||||
} else {
|
||||
this.showError('Invalid chart type ID');
|
||||
}
|
||||
}
|
||||
|
||||
// Show error message
|
||||
private showError(message: string): void {
|
||||
this.errorMessage = message;
|
||||
setTimeout(() => {
|
||||
this.errorMessage = null;
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Show success message
|
||||
private showSuccess(message: string): void {
|
||||
this.successMessage = message;
|
||||
setTimeout(() => {
|
||||
this.successMessage = null;
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
loadChartType(id: number): void {
|
||||
this.chartTypeService.getChartTypeById(id).subscribe({
|
||||
next: (data) => {
|
||||
this.chartType = data;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading chart type:', error);
|
||||
this.showError('Error loading chart type: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
loadChartTemplates(chartTypeId: number): void {
|
||||
this.loadingState = ClrLoadingState.LOADING;
|
||||
this.chartTemplateService.getChartTemplatesByChartType(chartTypeId).subscribe({
|
||||
next: (data) => {
|
||||
this.chartTemplates = data;
|
||||
this.loadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading chart templates:', error);
|
||||
this.showError('Error loading chart templates: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.loadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createChartTemplate(): void {
|
||||
if (!this.chartType || !this.newChartTemplate.templateName) {
|
||||
this.showError('Template name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a copy without the chartType property
|
||||
const templateData: Partial<ChartTemplate> = {
|
||||
templateName: this.newChartTemplate.templateName,
|
||||
templateHtml: this.newChartTemplate.templateHtml,
|
||||
templateCss: this.newChartTemplate.templateCss,
|
||||
isDefault: this.newChartTemplate.isDefault
|
||||
};
|
||||
|
||||
this.loadingState = ClrLoadingState.LOADING;
|
||||
this.chartTemplateService.createChartTemplate(templateData, this.chartType.id).subscribe({
|
||||
next: (data) => {
|
||||
this.chartTemplates.push(data);
|
||||
this.newChartTemplate = { isDefault: false };
|
||||
this.showAddForm = false;
|
||||
this.showSuccess('Chart template created successfully');
|
||||
this.loadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error creating chart template:', error);
|
||||
this.showError('Error creating chart template: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.loadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateChartTemplate(): void {
|
||||
if (!this.selectedChartTemplate || !this.selectedChartTemplate.templateName) {
|
||||
this.showError('Template name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadingState = ClrLoadingState.LOADING;
|
||||
this.chartTemplateService.updateChartTemplate(this.selectedChartTemplate.id, this.selectedChartTemplate).subscribe({
|
||||
next: (data) => {
|
||||
const index = this.chartTemplates.findIndex(ct => ct.id === data.id);
|
||||
if (index !== -1) {
|
||||
this.chartTemplates[index] = data;
|
||||
}
|
||||
this.selectedChartTemplate = null;
|
||||
this.showSuccess('Chart template updated successfully');
|
||||
this.loadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error updating chart template:', error);
|
||||
this.showError('Error updating chart template: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.loadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteChartTemplate(id: number): void {
|
||||
if (!confirm('Are you sure you want to delete this chart template?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadingState = ClrLoadingState.LOADING;
|
||||
this.chartTemplateService.deleteChartTemplate(id).subscribe({
|
||||
next: () => {
|
||||
this.chartTemplates = this.chartTemplates.filter(ct => ct.id !== id);
|
||||
this.showSuccess('Chart template deleted successfully');
|
||||
this.loadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error deleting chart template:', error);
|
||||
this.showError('Error deleting chart template: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.loadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectChartTemplateForEdit(chartTemplate: ChartTemplate): void {
|
||||
this.selectedChartTemplate = { ...chartTemplate };
|
||||
}
|
||||
|
||||
goBack(): void {
|
||||
if (this.chartType) {
|
||||
this.router.navigate(['/cns-portal/dashboardbuilder/chart-types/edit', this.chartType.id]);
|
||||
} else {
|
||||
this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,312 @@
|
||||
<div class="chart-type-ui-components-page">
|
||||
<div class="header">
|
||||
<h2>
|
||||
<button class="btn btn-link back-button" (click)="goBack()">
|
||||
<cds-icon shape="arrow" direction="left"></cds-icon>
|
||||
</button>
|
||||
UI Components for {{ chartType?.name || 'Chart Type' }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Error and Success Messages -->
|
||||
<div class="alert alert-danger" *ngIf="errorMessage">
|
||||
<button type="button" class="close" aria-label="Close" (click)="errorMessage = null">
|
||||
<cds-icon shape="close"></cds-icon>
|
||||
</button>
|
||||
<div class="alert-item">
|
||||
<span class="alert-text">{{ errorMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success" *ngIf="successMessage">
|
||||
<button type="button" class="close" aria-label="Close" (click)="successMessage = null">
|
||||
<cds-icon shape="close"></cds-icon>
|
||||
</button>
|
||||
<div class="alert-item">
|
||||
<span class="alert-text">{{ successMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add UI Component Form -->
|
||||
<div class="card" *ngIf="showAddForm">
|
||||
<div class="card-header">
|
||||
<h3>Add New UI Component</h3>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form clrForm (ngSubmit)="createUiComponent()" #addUiComponentForm="ngForm">
|
||||
<clr-input-container>
|
||||
<label>Component Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="newUiComponent.componentName" name="componentName" required />
|
||||
<clr-control-helper>Enter a unique name for the UI component (e.g., "title-config", "axis-config")</clr-control-helper>
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Component Type</label>
|
||||
<input clrInput type="text" [(ngModel)]="newUiComponent.componentType" name="componentType" />
|
||||
<clr-control-helper>Type of the component (e.g., "input", "select", "checkbox")</clr-control-helper>
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Display Label</label>
|
||||
<input clrInput type="text" [(ngModel)]="newUiComponent.displayLabel" name="displayLabel" />
|
||||
<clr-control-helper>User-friendly label shown in the configuration form</clr-control-helper>
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Placeholder</label>
|
||||
<input clrInput type="text" [(ngModel)]="newUiComponent.placeholder" name="placeholder" />
|
||||
<clr-control-helper>Placeholder text for input fields</clr-control-helper>
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Sort Order</label>
|
||||
<input clrInput type="number" [(ngModel)]="newUiComponent.sortOrder" name="sortOrder" />
|
||||
<clr-control-helper>Order in which components appear in the form</clr-control-helper>
|
||||
</clr-input-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Required</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="newUiComponent.isRequired" name="isRequired" />
|
||||
<label>Required</label>
|
||||
</clr-checkbox-wrapper>
|
||||
<clr-control-helper>Mark as required if this component must be filled</clr-control-helper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" type="submit" [disabled]="!newUiComponent.componentName || loadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
Create UI Component
|
||||
</button>
|
||||
<button class="btn" type="button" (click)="showAddForm = false">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UI Components Grid -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col">
|
||||
<h3>UI Components</h3>
|
||||
</div>
|
||||
<div class="clr-col" style="text-align: right;">
|
||||
<button class="btn btn-primary" (click)="showAddForm = true">
|
||||
<cds-icon shape="plus"></cds-icon> Add UI Component
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-block">
|
||||
<clr-datagrid [clrDgLoading]="loadingState === ClrLoadingState.LOADING">
|
||||
<clr-dg-column>Component Name</clr-dg-column>
|
||||
<clr-dg-column>Component Type</clr-dg-column>
|
||||
<clr-dg-column>Display Label</clr-dg-column>
|
||||
<clr-dg-column>Required</clr-dg-column>
|
||||
<clr-dg-column>Actions</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let uiComponent of uiComponents" [clrDgItem]="uiComponent">
|
||||
<clr-dg-cell>{{uiComponent.componentName}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{uiComponent.componentType}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{uiComponent.displayLabel}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<span class="label" [class.label-success]="uiComponent.isRequired" [class.label-danger]="!uiComponent.isRequired">
|
||||
{{uiComponent.isRequired ? 'Yes' : 'No'}}
|
||||
</span>
|
||||
</clr-dg-cell>
|
||||
<clr-dg-cell class="action-cell">
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-sm btn-icon" (click)="selectUiComponentForEdit(uiComponent)" title="Edit" [disabled]="loadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
<cds-icon *ngIf="loadingState !== ClrLoadingState.LOADING" shape="pencil" aria-label="Edit"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteUiComponent(uiComponent.id)" title="Delete" [disabled]="loadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
<cds-icon *ngIf="loadingState !== ClrLoadingState.LOADING" shape="trash" aria-label="Delete"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon btn-primary" (click)="onViewComponentProperties(uiComponent)" title="View Properties" [disabled]="loadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
<cds-icon *ngIf="loadingState !== ClrLoadingState.LOADING" shape="eye" aria-label="View Properties"></cds-icon>
|
||||
</button>
|
||||
</div>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{uiComponents.length}} UI component(s)
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit UI Component Form -->
|
||||
<div class="card" *ngIf="selectedUiComponent && !showAddComponentPropertyForm && !selectedComponentProperty">
|
||||
<div class="card-header">
|
||||
<h3>Edit UI Component</h3>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form clrForm (ngSubmit)="updateUiComponent()" #editUiComponentForm="ngForm">
|
||||
<clr-input-container>
|
||||
<label>Component Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedUiComponent.componentName" name="editComponentName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Component Type</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedUiComponent.componentType" name="editComponentType" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Display Label</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedUiComponent.displayLabel" name="editDisplayLabel" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Placeholder</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedUiComponent.placeholder" name="editPlaceholder" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Sort Order</label>
|
||||
<input clrInput type="number" [(ngModel)]="selectedUiComponent.sortOrder" name="editSortOrder" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Required</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="selectedUiComponent.isRequired" name="editIsRequired" />
|
||||
<label>Required</label>
|
||||
</clr-checkbox-wrapper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" type="submit" [disabled]="!selectedUiComponent.componentName || loadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
Update UI Component
|
||||
</button>
|
||||
<button class="btn" type="button" (click)="selectedUiComponent = null">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Component Properties Section -->
|
||||
<div class="card" *ngIf="selectedUiComponent">
|
||||
<div class="card-header">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col">
|
||||
<h3>Properties for {{selectedUiComponent?.componentName}}</h3>
|
||||
</div>
|
||||
<div class="clr-col" style="text-align: right;">
|
||||
<button class="btn btn-primary" (click)="showAddComponentPropertyForm = true">
|
||||
<cds-icon shape="plus"></cds-icon> Add Property
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Component Property Form -->
|
||||
<div class="card-block" *ngIf="showAddComponentPropertyForm">
|
||||
<form clrForm (ngSubmit)="createComponentProperty()" #addComponentPropertyForm="ngForm">
|
||||
<clr-input-container>
|
||||
<label>Property Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="newComponentProperty.propertyName" name="propertyName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Property Value</label>
|
||||
<input clrInput type="text" [(ngModel)]="newComponentProperty.propertyValue" name="propertyValue" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Property Type</label>
|
||||
<input clrInput type="text" [(ngModel)]="newComponentProperty.propertyType" name="propertyType" />
|
||||
</clr-input-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" type="submit" [disabled]="!newComponentProperty.propertyName || componentPropertyLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
Create Property
|
||||
</button>
|
||||
<button class="btn" type="button" (click)="showAddComponentPropertyForm = false">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Component Properties Table -->
|
||||
<div class="card-block">
|
||||
<clr-datagrid [clrDgLoading]="componentPropertyLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-dg-column>Property Name</clr-dg-column>
|
||||
<clr-dg-column>Property Value</clr-dg-column>
|
||||
<clr-dg-column>Property Type</clr-dg-column>
|
||||
<clr-dg-column>Created At</clr-dg-column>
|
||||
<clr-dg-column>Updated At</clr-dg-column>
|
||||
<clr-dg-column>Actions</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let property of componentProperties" [clrDgItem]="property">
|
||||
<clr-dg-cell>{{property.propertyName}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{property.propertyValue}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{property.propertyType}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{property.createdAt | date:'short'}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{property.updatedAt | date:'short'}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<button class="btn btn-sm btn-icon" (click)="selectComponentPropertyForEdit(property)" title="Edit" [disabled]="componentPropertyLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
<cds-icon *ngIf="componentPropertyLoadingState !== ClrLoadingState.LOADING" shape="pencil"></cds-icon>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-icon" (click)="deleteComponentProperty(property.id)" title="Delete" [disabled]="componentPropertyLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
<cds-icon *ngIf="componentPropertyLoadingState !== ClrLoadingState.LOADING" shape="trash"></cds-icon>
|
||||
</button>
|
||||
</clr-dg-cell>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
{{componentProperties.length}} propertie(s)
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<!-- Edit Component Property Form -->
|
||||
<div class="card-block" *ngIf="selectedComponentProperty">
|
||||
<h4>Edit Component Property</h4>
|
||||
<form clrForm (ngSubmit)="updateComponentProperty()" #editComponentPropertyForm="ngForm">
|
||||
<clr-input-container>
|
||||
<label>Property Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyName" name="editPropertyName" required />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Property Value</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyValue" name="editPropertyValue" />
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Property Type</label>
|
||||
<input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyType" name="editPropertyType" />
|
||||
</clr-input-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" type="submit" [disabled]="!selectedComponentProperty.propertyName || componentPropertyLoadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="componentPropertyLoadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
Update Property
|
||||
</button>
|
||||
<button class="btn" type="button" (click)="selectedComponentProperty = null">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-section">
|
||||
<h4>About UI Components</h4>
|
||||
<p>UI components define the configuration form elements for a chart type. Each component represents:</p>
|
||||
<ul>
|
||||
<li>A form field that appears when configuring a chart of this type</li>
|
||||
<li>Metadata like label, placeholder, and validation rules</li>
|
||||
<li>An order in which they appear in the configuration form</li>
|
||||
</ul>
|
||||
<p>After creating UI components, you can define their properties using the "View Properties" button.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,156 @@
|
||||
.chart-type-ui-components-page {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.header {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
color: #0079b8;
|
||||
font-weight: 300;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
padding: 0;
|
||||
cds-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.card-block {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
h3 {
|
||||
margin: 0;
|
||||
color: #0079b8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
|
||||
&.label-success {
|
||||
background-color: #3d9970;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.label-danger {
|
||||
background-color: #d32f2f;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
clr-datagrid {
|
||||
margin-top: 10px;
|
||||
|
||||
clr-dg-cell {
|
||||
&:first-child {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
background-color: #f6f6f6;
|
||||
border-left: 4px solid #0079b8;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
color: #0079b8;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Component Properties Section Styles
|
||||
.action-cell {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-buttons .btn-icon {
|
||||
min-width: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// Ensure icons are visible
|
||||
cds-icon {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
clr-spinner {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 10px;
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.clr-row {
|
||||
flex-direction: column;
|
||||
|
||||
.clr-col {
|
||||
text-align: left !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,309 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ClrLoadingState } from '@clr/angular';
|
||||
import { ChartType, ChartTypeService } from './chart-type.service';
|
||||
import { UiComponentService } from '../chart-config/ui-component.service';
|
||||
import { ComponentPropertyService } from '../chart-config/component-property.service';
|
||||
import { UiComponent, ComponentProperty } from '../chart-config/chart-config-manager.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chart-type-ui-components',
|
||||
templateUrl: './chart-type-ui-components.component.html',
|
||||
styleUrls: ['./chart-type-ui-components.component.scss']
|
||||
})
|
||||
export class ChartTypeUiComponentsComponent implements OnInit {
|
||||
chartType: ChartType | null = null;
|
||||
uiComponents: UiComponent[] = [];
|
||||
newUiComponent: Partial<UiComponent> = {
|
||||
isRequired: false
|
||||
};
|
||||
selectedUiComponent: UiComponent | null = null;
|
||||
showAddForm = false;
|
||||
|
||||
// Component Properties
|
||||
componentProperties: ComponentProperty[] = [];
|
||||
selectedComponentProperty: ComponentProperty | null = null;
|
||||
newComponentProperty: Partial<ComponentProperty> = {};
|
||||
showAddComponentPropertyForm = false;
|
||||
componentPropertyLoadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||
|
||||
loadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||
errorMessage: string | null = null;
|
||||
successMessage: string | null = null;
|
||||
|
||||
// Make ClrLoadingState available to template
|
||||
readonly ClrLoadingState = ClrLoadingState;
|
||||
|
||||
constructor(
|
||||
private chartTypeService: ChartTypeService,
|
||||
private uiComponentService: UiComponentService,
|
||||
private componentPropertyService: ComponentPropertyService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
const chartTypeId = Number(this.route.snapshot.paramMap.get('id'));
|
||||
if (chartTypeId) {
|
||||
this.loadChartType(chartTypeId);
|
||||
this.loadUiComponents(chartTypeId);
|
||||
} else {
|
||||
this.showError('Invalid chart type ID');
|
||||
}
|
||||
}
|
||||
|
||||
// Show error message
|
||||
private showError(message: string): void {
|
||||
this.errorMessage = message;
|
||||
setTimeout(() => {
|
||||
this.errorMessage = null;
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Show success message
|
||||
private showSuccess(message: string): void {
|
||||
this.successMessage = message;
|
||||
setTimeout(() => {
|
||||
this.successMessage = null;
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
loadChartType(id: number): void {
|
||||
this.chartTypeService.getChartTypeById(id).subscribe({
|
||||
next: (data) => {
|
||||
this.chartType = data;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading chart type:', error);
|
||||
this.showError('Error loading chart type: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
loadUiComponents(chartTypeId: number): void {
|
||||
this.loadingState = ClrLoadingState.LOADING;
|
||||
this.uiComponentService.getUiComponentsByChartType(chartTypeId).subscribe({
|
||||
next: (data) => {
|
||||
this.uiComponents = data;
|
||||
this.loadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading UI components:', error);
|
||||
this.showError('Error loading UI components: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.loadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createUiComponent(): void {
|
||||
if (!this.chartType || !this.newUiComponent.componentName) {
|
||||
this.showError('Component name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadingState = ClrLoadingState.LOADING;
|
||||
|
||||
// Create a complete chartType object with only the ID (following the pattern in chart-config-manager)
|
||||
const chartTypeWithId = {
|
||||
id: this.chartType.id,
|
||||
name: '',
|
||||
displayName: '',
|
||||
description: '',
|
||||
isActive: true,
|
||||
createdAt: '',
|
||||
updatedAt: ''
|
||||
};
|
||||
|
||||
const componentData = {
|
||||
...this.newUiComponent,
|
||||
chartType: chartTypeWithId
|
||||
};
|
||||
|
||||
this.uiComponentService.createUiComponent(componentData).subscribe({
|
||||
next: (data) => {
|
||||
this.uiComponents.push(data);
|
||||
this.newUiComponent = { isRequired: false };
|
||||
this.showAddForm = false;
|
||||
this.showSuccess('UI component created successfully');
|
||||
this.loadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error creating UI component:', error);
|
||||
this.showError('Error creating UI component: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.loadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateUiComponent(): void {
|
||||
if (!this.selectedUiComponent || !this.selectedUiComponent.componentName) {
|
||||
this.showError('Component name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadingState = ClrLoadingState.LOADING;
|
||||
this.uiComponentService.updateUiComponent(this.selectedUiComponent.id, this.selectedUiComponent).subscribe({
|
||||
next: (data) => {
|
||||
const index = this.uiComponents.findIndex(uc => uc.id === data.id);
|
||||
if (index !== -1) {
|
||||
this.uiComponents[index] = data;
|
||||
}
|
||||
this.selectedUiComponent = null;
|
||||
this.showSuccess('UI component updated successfully');
|
||||
this.loadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error updating UI component:', error);
|
||||
this.showError('Error updating UI component: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.loadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteUiComponent(id: number): void {
|
||||
if (!confirm('Are you sure you want to delete this UI component?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadingState = ClrLoadingState.LOADING;
|
||||
this.uiComponentService.deleteUiComponent(id).subscribe({
|
||||
next: () => {
|
||||
this.uiComponents = this.uiComponents.filter(uc => uc.id !== id);
|
||||
this.showSuccess('UI component deleted successfully');
|
||||
this.loadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error deleting UI component:', error);
|
||||
this.showError('Error deleting UI component: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.loadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectUiComponentForEdit(uiComponent: UiComponent): void {
|
||||
this.selectedUiComponent = { ...uiComponent };
|
||||
}
|
||||
|
||||
// Component Property Methods
|
||||
loadComponentProperties(componentId: number): void {
|
||||
if (!componentId) {
|
||||
this.componentProperties = [];
|
||||
return;
|
||||
}
|
||||
|
||||
this.componentPropertyLoadingState = ClrLoadingState.LOADING;
|
||||
this.componentPropertyService.getComponentPropertiesByComponent(componentId).subscribe({
|
||||
next: (data) => {
|
||||
this.componentProperties = data;
|
||||
this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading component properties:', error);
|
||||
this.showError('Error loading component properties: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.componentPropertyLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createComponentProperty(): void {
|
||||
if (!this.selectedUiComponent) {
|
||||
this.showError('Please select a UI component first');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.newComponentProperty.propertyName) {
|
||||
this.showError('Property name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.componentPropertyLoadingState = ClrLoadingState.LOADING;
|
||||
|
||||
// Create a complete component object with only the ID
|
||||
const componentWithId = {
|
||||
id: this.selectedUiComponent.id
|
||||
} as UiComponent;
|
||||
|
||||
const componentPropertyData = {
|
||||
...this.newComponentProperty,
|
||||
component: componentWithId
|
||||
};
|
||||
|
||||
this.componentPropertyService.createComponentProperty(componentPropertyData).subscribe({
|
||||
next: (data) => {
|
||||
this.componentProperties.push(data);
|
||||
this.newComponentProperty = {};
|
||||
this.showAddComponentPropertyForm = false;
|
||||
this.showSuccess('Component property created successfully');
|
||||
this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error creating component property:', error);
|
||||
this.showError('Error creating component property: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.componentPropertyLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateComponentProperty(): void {
|
||||
if (!this.selectedComponentProperty || !this.selectedComponentProperty.propertyName) {
|
||||
this.showError('Property name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.componentPropertyLoadingState = ClrLoadingState.LOADING;
|
||||
this.componentPropertyService.updateComponentProperty(this.selectedComponentProperty.id, this.selectedComponentProperty).subscribe({
|
||||
next: (data) => {
|
||||
const index = this.componentProperties.findIndex(cp => cp.id === data.id);
|
||||
if (index !== -1) {
|
||||
this.componentProperties[index] = data;
|
||||
}
|
||||
this.selectedComponentProperty = null;
|
||||
this.showSuccess('Component property updated successfully');
|
||||
this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error updating component property:', error);
|
||||
this.showError('Error updating component property: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.componentPropertyLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteComponentProperty(id: number): void {
|
||||
if (!confirm('Are you sure you want to delete this component property?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.componentPropertyLoadingState = ClrLoadingState.LOADING;
|
||||
this.componentPropertyService.deleteComponentProperty(id).subscribe({
|
||||
next: () => {
|
||||
this.componentProperties = this.componentProperties.filter(cp => cp.id !== id);
|
||||
this.showSuccess('Component property deleted successfully');
|
||||
this.componentPropertyLoadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error deleting component property:', error);
|
||||
this.showError('Error deleting component property: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.componentPropertyLoadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectComponentPropertyForEdit(componentProperty: ComponentProperty): void {
|
||||
this.selectedComponentProperty = { ...componentProperty };
|
||||
}
|
||||
|
||||
// Helper method to view properties for a UI component
|
||||
onViewComponentProperties(uiComponent: UiComponent): void {
|
||||
this.selectedUiComponent = uiComponent;
|
||||
this.loadComponentProperties(uiComponent.id);
|
||||
}
|
||||
|
||||
goBack(): void {
|
||||
if (this.chartType) {
|
||||
this.router.navigate(['/cns-portal/dashboardbuilder/chart-types/edit', this.chartType.id]);
|
||||
} else {
|
||||
this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { ApiRequestService } from 'src/app/services/api/api-request.service';
|
||||
|
||||
export interface ChartType {
|
||||
id: number;
|
||||
name: string;
|
||||
displayName: string;
|
||||
description: string;
|
||||
isActive: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ChartTypeService {
|
||||
private chartTypesUrl = 'api/chart-types';
|
||||
|
||||
constructor(private apiRequest: ApiRequestService) { }
|
||||
|
||||
// Get all chart types
|
||||
getAllChartTypes(): Observable<ChartType[]> {
|
||||
console.log('Fetching all chart types from', this.chartTypesUrl);
|
||||
return this.apiRequest.get(this.chartTypesUrl);
|
||||
}
|
||||
|
||||
// Get chart type by ID
|
||||
getChartTypeById(id: number): Observable<ChartType> {
|
||||
const url = `${this.chartTypesUrl}/${id}`;
|
||||
console.log(`Fetching chart type ${id} from ${url}`);
|
||||
return this.apiRequest.get(url);
|
||||
}
|
||||
|
||||
// Create new chart type
|
||||
createChartType(chartType: Partial<ChartType>): Observable<ChartType> {
|
||||
console.log('Creating chart type:', chartType);
|
||||
return this.apiRequest.post(this.chartTypesUrl, chartType);
|
||||
}
|
||||
|
||||
// Update chart type
|
||||
updateChartType(id: number, chartType: ChartType): Observable<ChartType> {
|
||||
const url = `${this.chartTypesUrl}/${id}`;
|
||||
console.log(`Updating chart type ${id}:`, chartType);
|
||||
return this.apiRequest.put(url, chartType);
|
||||
}
|
||||
|
||||
// Delete chart type
|
||||
deleteChartType(id: number): Observable<void> {
|
||||
const url = `${this.chartTypesUrl}/${id}`;
|
||||
console.log(`Deleting chart type ${id}`);
|
||||
return this.apiRequest.delete(url);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
<div class="edit-chart-type-page">
|
||||
<div class="header">
|
||||
<h2>Edit Chart Type</h2>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div *ngIf="loadingState === ClrLoadingState.LOADING" class="loading-spinner">
|
||||
<clr-spinner clrMedium></clr-spinner>
|
||||
<span>Loading chart type...</span>
|
||||
</div>
|
||||
|
||||
<!-- Error and Success Messages -->
|
||||
<div class="alert alert-danger" *ngIf="errorMessage">
|
||||
<button type="button" class="close" aria-label="Close" (click)="errorMessage = null">
|
||||
<cds-icon shape="close"></cds-icon>
|
||||
</button>
|
||||
<div class="alert-item">
|
||||
<span class="alert-text">{{ errorMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success" *ngIf="successMessage">
|
||||
<button type="button" class="close" aria-label="Close" (click)="successMessage = null">
|
||||
<cds-icon shape="close"></cds-icon>
|
||||
</button>
|
||||
<div class="alert-item">
|
||||
<span class="alert-text">{{ successMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chart Type Form -->
|
||||
<div class="card" *ngIf="chartType && loadingState !== ClrLoadingState.LOADING">
|
||||
<div class="card-header">
|
||||
<div class="chart-type-header">
|
||||
<h3>{{ chartType.name }}</h3>
|
||||
<span class="label" [class.label-success]="chartType.isActive" [class.label-danger]="!chartType.isActive">
|
||||
{{ chartType.isActive ? 'Active' : 'Inactive' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form clrForm (ngSubmit)="updateChartType()" #editChartTypeForm="ngForm">
|
||||
<clr-input-container>
|
||||
<label>Name <span class="required">*</span></label>
|
||||
<input clrInput type="text" [(ngModel)]="chartType.name" name="chartTypeName" required />
|
||||
<clr-control-helper>Enter a unique name for the chart type (e.g., "line-chart", "bar-chart")</clr-control-helper>
|
||||
</clr-input-container>
|
||||
|
||||
<clr-input-container>
|
||||
<label>Display Name</label>
|
||||
<input clrInput type="text" [(ngModel)]="chartType.displayName" name="chartTypeDisplayName" />
|
||||
<clr-control-helper>This is the user-friendly name shown in the UI</clr-control-helper>
|
||||
</clr-input-container>
|
||||
|
||||
<clr-textarea-container>
|
||||
<label>Description</label>
|
||||
<textarea clrTextarea [(ngModel)]="chartType.description" name="chartTypeDescription" rows="3"></textarea>
|
||||
<clr-control-helper>Provide a detailed description of this chart type and when to use it</clr-control-helper>
|
||||
</clr-textarea-container>
|
||||
|
||||
<clr-checkbox-container>
|
||||
<label>Is Active</label>
|
||||
<clr-checkbox-wrapper>
|
||||
<input type="checkbox" clrCheckbox [(ngModel)]="chartType.isActive" name="chartTypeIsActive" />
|
||||
<label>Active</label>
|
||||
</clr-checkbox-wrapper>
|
||||
<clr-control-helper>Deactivate chart types that should not be available for selection</clr-control-helper>
|
||||
</clr-checkbox-container>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" type="submit" [disabled]="!chartType.name || loadingState === ClrLoadingState.LOADING">
|
||||
<clr-spinner *ngIf="loadingState === ClrLoadingState.LOADING" clrSmall clrInline></clr-spinner>
|
||||
Update Chart Type
|
||||
</button>
|
||||
<button class="btn" type="button" (click)="onCancel()">Cancel</button>
|
||||
<button class="btn btn-danger" type="button" (click)="onDelete()" style="margin-left: auto;">
|
||||
<cds-icon shape="trash"></cds-icon> Delete
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Related Entities Management -->
|
||||
<div class="card" *ngIf="chartType && loadingState !== ClrLoadingState.LOADING">
|
||||
<div class="card-header">
|
||||
<h3>Related Configuration</h3>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="related-entities-grid">
|
||||
<div class="entity-card">
|
||||
<div class="entity-header">
|
||||
<cds-icon shape="view-list" size="24"></cds-icon>
|
||||
<h4>UI Components</h4>
|
||||
</div>
|
||||
<p>Manage the UI components that define the configuration form for this chart type.</p>
|
||||
<button class="btn btn-sm btn-link" [routerLink]="['/cns-portal/dashboardbuilder/chart-types', chartType.id, 'ui-components']">
|
||||
Manage UI Components
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="entity-card">
|
||||
<div class="entity-header">
|
||||
<cds-icon shape="template" size="24"></cds-icon>
|
||||
<h4>Chart Templates</h4>
|
||||
</div>
|
||||
<p>Manage the templates that define how this chart type is rendered.</p>
|
||||
<button class="btn btn-sm btn-link" [routerLink]="['/cns-portal/dashboardbuilder/chart-types', chartType.id, 'templates']">
|
||||
Manage Templates
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="entity-card">
|
||||
<div class="entity-header">
|
||||
<cds-icon shape="form" size="24"></cds-icon>
|
||||
<h4>Dynamic Fields</h4>
|
||||
</div>
|
||||
<p>Manage the dynamic fields that capture specific configuration parameters.</p>
|
||||
<button class="btn btn-sm btn-link" [routerLink]="['/cns-portal/dashboardbuilder/chart-types', chartType.id, 'fields']">
|
||||
Manage Fields
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chart Type Details -->
|
||||
<div class="card" *ngIf="chartType && loadingState !== ClrLoadingState.LOADING">
|
||||
<div class="card-header">
|
||||
<h3>Chart Type Details</h3>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="details-grid">
|
||||
<div class="detail-item">
|
||||
<label>ID:</label>
|
||||
<span>{{ chartType.id }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<label>Created At:</label>
|
||||
<span>{{ chartType.createdAt ? (chartType.createdAt | date:'medium') : 'N/A' }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<label>Updated At:</label>
|
||||
<span>{{ chartType.updatedAt ? (chartType.updatedAt | date:'medium') : 'N/A' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-section">
|
||||
<h4>About Chart Types</h4>
|
||||
<p>Chart types define the different visualization options available in the dashboard builder. Each chart type can have:</p>
|
||||
<ul>
|
||||
<li>Associated UI components that define the configuration form</li>
|
||||
<li>Templates that define how the chart is rendered</li>
|
||||
<li>Dynamic fields that capture specific configuration parameters</li>
|
||||
</ul>
|
||||
<p>After creating a chart type, you can configure its components, templates, and fields using the management links above.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,163 @@
|
||||
.edit-chart-type-page {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.header {
|
||||
margin-bottom: 20px;
|
||||
h2 {
|
||||
color: #0079b8;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.card-block {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.chart-type-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.related-entities-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
|
||||
.entity-card {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.entity-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
cds-icon {
|
||||
color: #0079b8;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
color: #0079b8;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 8px;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
background-color: #f6f6f6;
|
||||
border-left: 4px solid #0079b8;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
color: #0079b8;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 10px;
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-type-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start !important;
|
||||
|
||||
.label {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.related-entities-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ClrLoadingState } from '@clr/angular';
|
||||
import { ChartType, ChartTypeService } from './chart-type.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-edit-chart-type',
|
||||
templateUrl: './edit-chart-type.component.html',
|
||||
styleUrls: ['./edit-chart-type.component.scss']
|
||||
})
|
||||
export class EditChartTypeComponent implements OnInit {
|
||||
chartType: ChartType | null = null;
|
||||
loadingState: ClrLoadingState = ClrLoadingState.DEFAULT;
|
||||
errorMessage: string | null = null;
|
||||
successMessage: string | null = null;
|
||||
|
||||
// Make ClrLoadingState available to template
|
||||
readonly ClrLoadingState = ClrLoadingState;
|
||||
|
||||
constructor(
|
||||
private chartTypeService: ChartTypeService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
const id = Number(this.route.snapshot.paramMap.get('id'));
|
||||
if (id) {
|
||||
this.loadChartType(id);
|
||||
} else {
|
||||
this.showError('Invalid chart type ID');
|
||||
}
|
||||
}
|
||||
|
||||
// Show error message
|
||||
private showError(message: string): void {
|
||||
this.errorMessage = message;
|
||||
setTimeout(() => {
|
||||
this.errorMessage = null;
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Show success message
|
||||
private showSuccess(message: string): void {
|
||||
this.successMessage = message;
|
||||
setTimeout(() => {
|
||||
this.successMessage = null;
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
loadChartType(id: number): void {
|
||||
this.loadingState = ClrLoadingState.LOADING;
|
||||
this.chartTypeService.getChartTypeById(id).subscribe({
|
||||
next: (data) => {
|
||||
// Process the data to ensure dates are properly formatted
|
||||
this.chartType = {
|
||||
...data,
|
||||
createdAt: this.formatDate(data.createdAt),
|
||||
updatedAt: this.formatDate(data.updatedAt)
|
||||
};
|
||||
this.loadingState = ClrLoadingState.SUCCESS;
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading chart type:', error);
|
||||
this.showError('Error loading chart type: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.loadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Format date to handle both string and object formats
|
||||
private formatDate(date: any): string {
|
||||
if (!date) return '';
|
||||
|
||||
// If it's already a string, return as is
|
||||
if (typeof date === 'string') {
|
||||
return date;
|
||||
}
|
||||
|
||||
// If it's an object, try to convert to string
|
||||
if (typeof date === 'object') {
|
||||
// Handle various date object formats
|
||||
if (date instanceof Date) {
|
||||
return date.toISOString();
|
||||
}
|
||||
|
||||
// Handle ISO string within object
|
||||
if (date.date) {
|
||||
return date.date;
|
||||
}
|
||||
|
||||
// Handle other object formats
|
||||
try {
|
||||
return new Date(date).toISOString();
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
updateChartType(): void {
|
||||
if (!this.chartType || !this.chartType.name) {
|
||||
this.showError('Chart type name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadingState = ClrLoadingState.LOADING;
|
||||
this.chartTypeService.updateChartType(this.chartType.id, this.chartType).subscribe({
|
||||
next: (data) => {
|
||||
// Process the data to ensure dates are properly formatted
|
||||
this.chartType = {
|
||||
...data,
|
||||
createdAt: this.formatDate(data.createdAt),
|
||||
updatedAt: this.formatDate(data.updatedAt)
|
||||
};
|
||||
this.showSuccess('Chart type updated successfully');
|
||||
this.loadingState = ClrLoadingState.SUCCESS;
|
||||
// Redirect to chart types list after a short delay
|
||||
setTimeout(() => {
|
||||
this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
|
||||
}, 1500);
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error updating chart type:', error);
|
||||
this.showError('Error updating chart type: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.loadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onCancel(): void {
|
||||
this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
|
||||
}
|
||||
|
||||
onDelete(): void {
|
||||
if (!this.chartType) return;
|
||||
|
||||
if (confirm('Are you sure you want to delete this chart type? This action cannot be undone.')) {
|
||||
this.loadingState = ClrLoadingState.LOADING;
|
||||
this.chartTypeService.deleteChartType(this.chartType.id).subscribe({
|
||||
next: () => {
|
||||
this.showSuccess('Chart type deleted successfully');
|
||||
this.loadingState = ClrLoadingState.SUCCESS;
|
||||
// Redirect to chart types list after a short delay
|
||||
setTimeout(() => {
|
||||
this.router.navigate(['/cns-portal/dashboardbuilder/chart-types']);
|
||||
}, 1500);
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error deleting chart type:', error);
|
||||
this.showError('Error deleting chart type: ' + (error.error?.message || error.message || 'Unknown error'));
|
||||
this.loadingState = ClrLoadingState.ERROR;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
<div class="chart-config-modal">
|
||||
<h3>Chart Configuration Manager</h3>
|
||||
<app-chart-config-manager></app-chart-config-manager>
|
||||
</div>
|
||||
@@ -0,0 +1,5 @@
|
||||
.chart-config-modal {
|
||||
padding: 20px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chart-config-modal',
|
||||
templateUrl: './chart-config-modal.component.html',
|
||||
styleUrls: ['./chart-config-modal.component.scss']
|
||||
})
|
||||
export class ChartConfigModalComponent {
|
||||
// This component will be used to display the chart configuration manager in a modal
|
||||
}
|
||||
@@ -17,6 +17,9 @@
|
||||
<div style="display: inline; float: right;">
|
||||
<!-- <button class="btn btn-primary">Build</button>
|
||||
<button class="btn btn-primary" (click)="onSchedule()">Schedule</button> -->
|
||||
<button class="btn btn-success" (click)="testDynamicChartCreation()" style="margin-left: 10px;" *ngIf="!fromRunner">
|
||||
<clr-icon shape="test"></clr-icon> Test Dynamic Chart
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -28,6 +28,10 @@ import { CommonFilterComponent } from '../common-filter/common-filter.component'
|
||||
import { CompactFilterComponent } from '../common-filter';
|
||||
// Add the FilterService import
|
||||
import { FilterService } from '../common-filter/filter.service';
|
||||
// Add the UnifiedChartComponent import
|
||||
import { UnifiedChartComponent } from '../gadgets/unified-chart';
|
||||
// Add the DynamicChartLoaderService import
|
||||
import { DynamicChartLoaderService } from '../chart-config/dynamic-chart-loader.service';
|
||||
|
||||
function isNullArray(arr) {
|
||||
return !Array.isArray(arr) || arr.length === 0;
|
||||
@@ -56,6 +60,7 @@ export class EditnewdashComponent implements OnInit {
|
||||
// Add availableKeys property for compact filter
|
||||
availableKeys: string[] = [];
|
||||
|
||||
// Initialize with default widgets and update dynamically
|
||||
WidgetsMock: WidgetModel[] = [
|
||||
{
|
||||
name: 'Common Filter',
|
||||
@@ -73,26 +78,26 @@ export class EditnewdashComponent implements OnInit {
|
||||
name: 'Line Chart',
|
||||
identifier: 'line_chart'
|
||||
},
|
||||
{
|
||||
name: 'Bar Chart',
|
||||
identifier: 'bar_chart'
|
||||
},
|
||||
{
|
||||
name: 'Pie Chart',
|
||||
identifier: 'pie_chart'
|
||||
},
|
||||
{
|
||||
name: 'Polar Area Chart',
|
||||
identifier: 'polar_area_chart'
|
||||
},
|
||||
{
|
||||
name: 'Bubble Chart',
|
||||
identifier: 'bubble_chart'
|
||||
},
|
||||
{
|
||||
name: 'Scatter Chart',
|
||||
identifier: 'scatter_chart'
|
||||
},
|
||||
// {
|
||||
// name: 'Bar Chart',
|
||||
// identifier: 'bar_chart'
|
||||
// },
|
||||
// {
|
||||
// name: 'Pie Chart',
|
||||
// identifier: 'pie_chart'
|
||||
// },
|
||||
// {
|
||||
// name: 'Polar Area Chart',
|
||||
// identifier: 'polar_area_chart'
|
||||
// },
|
||||
// {
|
||||
// name: 'Bubble Chart',
|
||||
// identifier: 'bubble_chart'
|
||||
// },
|
||||
// {
|
||||
// name: 'Scatter Chart',
|
||||
// identifier: 'scatter_chart'
|
||||
// },
|
||||
{
|
||||
name: 'Dynamic Chart',
|
||||
identifier: 'dynamic_chart'
|
||||
@@ -112,6 +117,10 @@ export class EditnewdashComponent implements OnInit {
|
||||
{
|
||||
name: 'Compact Filter',
|
||||
identifier: 'compact_filter'
|
||||
},
|
||||
{
|
||||
name: 'Unified Chart',
|
||||
identifier: 'unified_chart'
|
||||
}
|
||||
]
|
||||
|
||||
@@ -125,19 +134,20 @@ export class EditnewdashComponent implements OnInit {
|
||||
|
||||
protected componentCollection = [
|
||||
{ name: "Common Filter", componentInstance: CommonFilterComponent },
|
||||
{ name: "Line Chart", componentInstance: LineChartComponent },
|
||||
{ name: "Doughnut Chart", componentInstance: DoughnutChartComponent },
|
||||
{ name: "Radar Chart", componentInstance: RadarChartComponent },
|
||||
{ name: "Bar Chart", componentInstance: BarChartComponent },
|
||||
{ name: "Pie Chart", componentInstance: PieChartComponent },
|
||||
{ name: "Polar Area Chart", componentInstance: PolarChartComponent },
|
||||
{ name: "Bubble Chart", componentInstance: BubbleChartComponent },
|
||||
{ name: "Scatter Chart", componentInstance: ScatterChartComponent },
|
||||
{ name: "Dynamic Chart", componentInstance: DynamicChartComponent },
|
||||
{ name: "Financial Chart", componentInstance: FinancialChartComponent },
|
||||
{ name: "Line Chart", componentInstance: UnifiedChartComponent },
|
||||
{ name: "Doughnut Chart", componentInstance: UnifiedChartComponent },
|
||||
{ name: "Radar Chart", componentInstance: UnifiedChartComponent },
|
||||
{ name: "Bar Chart", componentInstance: UnifiedChartComponent },
|
||||
{ name: "Pie Chart", componentInstance: UnifiedChartComponent },
|
||||
{ name: "Polar Area Chart", componentInstance: UnifiedChartComponent },
|
||||
{ name: "Bubble Chart", componentInstance: UnifiedChartComponent },
|
||||
{ name: "Scatter Chart", componentInstance: UnifiedChartComponent },
|
||||
{ name: "Dynamic Chart", componentInstance: UnifiedChartComponent },
|
||||
{ name: "Financial Chart", componentInstance: UnifiedChartComponent },
|
||||
{ name: "To Do Chart", componentInstance: ToDoChartComponent },
|
||||
{ name: "Grid View", componentInstance: GridViewComponent },
|
||||
{ name: "Compact Filter", componentInstance: CompactFilterComponent }, // Add this line
|
||||
{ name: "Compact Filter", componentInstance: CompactFilterComponent },
|
||||
{ name: "Unified Chart", componentInstance: UnifiedChartComponent },
|
||||
];
|
||||
model: any;
|
||||
linesdata: any;
|
||||
@@ -170,6 +180,7 @@ export class EditnewdashComponent implements OnInit {
|
||||
yAxis: '',
|
||||
xAxis: '',
|
||||
connection: '', // Add connection field
|
||||
chartType: '', // Add chartType field
|
||||
// Drilldown configuration properties (base level)
|
||||
drilldownEnabled: false,
|
||||
drilldownApiUrl: '',
|
||||
@@ -198,6 +209,9 @@ export class EditnewdashComponent implements OnInit {
|
||||
// Add drilldown column data property
|
||||
drilldownColumnData = []; // Add drilldown column data property
|
||||
|
||||
// Add chart types property for dynamic chart selection
|
||||
chartTypes: any[] = [];
|
||||
|
||||
constructor(private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private dashboardService: Dashboard3Service,
|
||||
@@ -206,7 +220,8 @@ export class EditnewdashComponent implements OnInit {
|
||||
private datastoreService: DatastoreService,
|
||||
private alertService: AlertsService,
|
||||
private sureconnectService: SureconnectService,
|
||||
private filterService: FilterService) { } // Add SureconnectService and FilterService to constructor
|
||||
private filterService: FilterService,
|
||||
private dynamicChartLoader: DynamicChartLoaderService) { } // Add SureconnectService, FilterService, and DynamicChartLoaderService to constructor
|
||||
|
||||
// Add property to track if coming from dashboard runner
|
||||
fromRunner: boolean = false;
|
||||
@@ -291,12 +306,46 @@ export class EditnewdashComponent implements OnInit {
|
||||
apiUrl: ['']
|
||||
});
|
||||
|
||||
// Load chart types for dynamic chart selection
|
||||
this.loadChartTypesForSelection();
|
||||
|
||||
// Load sureconnect data first, then load dashboard data
|
||||
this.loadSureconnectData();
|
||||
|
||||
// Load common filter data if it exists
|
||||
this.loadCommonFilterData();
|
||||
}
|
||||
|
||||
// Add method to load all chart types for dynamic selection
|
||||
loadChartTypesForSelection() {
|
||||
console.log('Loading chart types for selection');
|
||||
this.dynamicChartLoader.loadActiveChartTypes().subscribe({
|
||||
next: (chartTypes) => {
|
||||
console.log('Loaded chart types for selection:', chartTypes);
|
||||
this.chartTypes = chartTypes;
|
||||
|
||||
// Convert each chart type to a WidgetModel
|
||||
const newWidgets = chartTypes.map(ct => ({
|
||||
name: ct.displayName || ct.name,
|
||||
// identifier: ct.name.toLowerCase().replace(/\s+/g, '_')
|
||||
identifier: `${ct.name.toLowerCase().replace(/\s+/g, '_')}_chart`
|
||||
}));
|
||||
|
||||
// Filter out duplicates by identifier
|
||||
const existingIds = new Set(this.WidgetsMock.map(w => w.identifier));
|
||||
const uniqueNewWidgets = newWidgets.filter(w => !existingIds.has(w.identifier));
|
||||
|
||||
// Append unique new widgets to WidgetsMock
|
||||
this.WidgetsMock = [...this.WidgetsMock, ...uniqueNewWidgets];
|
||||
|
||||
console.log('Updated WidgetsMock:', this.WidgetsMock);
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading chart types for selection:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Add method to load sureconnect data
|
||||
loadSureconnectData() {
|
||||
@@ -385,6 +434,27 @@ export class EditnewdashComponent implements OnInit {
|
||||
}
|
||||
});
|
||||
|
||||
// Map chart names to unified chart types
|
||||
const chartTypeMap = {
|
||||
'Radar Chart': 'radar',
|
||||
'Line Chart': 'line',
|
||||
'Doughnut Chart': 'doughnut',
|
||||
'Bar Chart': 'bar',
|
||||
'Pie Chart': 'pie',
|
||||
'Polar Area Chart': 'polar',
|
||||
'Bubble Chart': 'bubble',
|
||||
'Scatter Chart': 'scatter',
|
||||
'Dynamic Chart': 'line',
|
||||
'Financial Chart': 'line'
|
||||
};
|
||||
|
||||
// If this is a chart, set the chartType property
|
||||
if (chartTypeMap.hasOwnProperty(dashboard.name)) {
|
||||
dashboard.chartType = chartTypeMap[dashboard.name];
|
||||
// Keep the original name instead of changing it to "Unified Chart"
|
||||
// dashboard.name = "Unified Chart";
|
||||
}
|
||||
|
||||
// Ensure compact filter configuration properties are properly initialized
|
||||
if (dashboard.component === 'Compact Filter' || dashboard.name === 'Compact Filter') {
|
||||
// Make sure all compact filter properties exist
|
||||
@@ -409,6 +479,30 @@ export class EditnewdashComponent implements OnInit {
|
||||
}
|
||||
});
|
||||
|
||||
// Map unified chart types back to chart names for serialization
|
||||
const chartNameMap = {
|
||||
'radar': 'Radar Chart',
|
||||
'line': 'Line Chart',
|
||||
'doughnut': 'Doughnut Chart',
|
||||
'bar': 'Bar Chart',
|
||||
'pie': 'Pie Chart',
|
||||
'polar': 'Polar Area Chart',
|
||||
'bubble': 'Bubble Chart',
|
||||
'scatter': 'Scatter Chart'
|
||||
// Removed hardcoded heatmap entry to make it fully dynamic
|
||||
};
|
||||
|
||||
// If this is a unified chart, set the name back to the appropriate chart name
|
||||
if (dashboard.name === 'Unified Chart' && dashboard.chartType && chartNameMap.hasOwnProperty(dashboard.chartType)) {
|
||||
dashboard.name = chartNameMap[dashboard.chartType];
|
||||
}
|
||||
// Also handle the case where the chart already has the correct name
|
||||
else if (dashboard.chartType && chartNameMap.hasOwnProperty(dashboard.chartType) &&
|
||||
dashboard.name === chartNameMap[dashboard.chartType]) {
|
||||
// The name is already correct, no need to change it
|
||||
dashboard.component = "Unified Chart";
|
||||
}
|
||||
|
||||
// Ensure compact filter configuration properties are preserved
|
||||
if (dashboard.name === 'Compact Filter') {
|
||||
// Make sure all compact filter properties exist
|
||||
@@ -420,6 +514,7 @@ export class EditnewdashComponent implements OnInit {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add method to get available fields for a filter dropdown (excluding already selected fields)
|
||||
getAvailableFields(filters: any[], currentIndex: number, allFields: string[]): string[] {
|
||||
if (!filters || !allFields) {
|
||||
@@ -451,9 +546,11 @@ export class EditnewdashComponent implements OnInit {
|
||||
//this._ds.updateDashboard(this.dashboardId, parsed).subscribe();
|
||||
}
|
||||
|
||||
onDrop(ev) {
|
||||
onDrop = (ev) => {
|
||||
console.log("on drop event ", ev);
|
||||
const componentType = ev.dataTransfer.getData("widgetIdentifier");
|
||||
// Safely calculate maxChartId, handling cases where chartid might be NaN or missing
|
||||
console.log("on drop ", componentType);
|
||||
let maxChartId = 0;
|
||||
if (this.dashboardArray && this.dashboardArray.length > 0) {
|
||||
const validChartIds = this.dashboardArray
|
||||
@@ -465,106 +562,28 @@ export class EditnewdashComponent implements OnInit {
|
||||
}
|
||||
}
|
||||
switch (componentType) {
|
||||
// Handle all chart types by converting them to unified charts
|
||||
case "radar_chart":
|
||||
return this.dashboardArray.push({
|
||||
cols: 5,
|
||||
rows: 6,
|
||||
x: 0,
|
||||
y: 0,
|
||||
chartid: maxChartId + 1,
|
||||
component: RadarChartComponent,
|
||||
name: "Radar Chart"
|
||||
});
|
||||
// Use dynamic chart creation for all chart types
|
||||
return this.createDynamicChart('radar', maxChartId);
|
||||
case "line_chart":
|
||||
return this.dashboardArray.push({
|
||||
cols: 5,
|
||||
rows: 7,
|
||||
x: 0,
|
||||
y: 0,
|
||||
chartid: maxChartId + 1,
|
||||
component: LineChartComponent,
|
||||
name: "Line Chart"
|
||||
});
|
||||
return this.createDynamicChart('line', maxChartId);
|
||||
case "doughnut_chart":
|
||||
return this.dashboardArray.push({
|
||||
cols: 5,
|
||||
rows: 6,
|
||||
x: 0,
|
||||
y: 0,
|
||||
chartid: maxChartId + 1,
|
||||
component: DoughnutChartComponent,
|
||||
name: "Doughnut Chart"
|
||||
});
|
||||
return this.createDynamicChart('doughnut', maxChartId);
|
||||
case "bar_chart":
|
||||
return this.dashboardArray.push({
|
||||
cols: 5,
|
||||
rows: 6,
|
||||
x: 0,
|
||||
y: 0,
|
||||
chartid: maxChartId + 1,
|
||||
component: BarChartComponent,
|
||||
name: "Bar Chart"
|
||||
});
|
||||
return this.createDynamicChart('bar', maxChartId);
|
||||
case "pie_chart":
|
||||
return this.dashboardArray.push({
|
||||
cols: 5,
|
||||
rows: 6,
|
||||
x: 0,
|
||||
y: 0,
|
||||
chartid: maxChartId + 1,
|
||||
component: PieChartComponent,
|
||||
name: "Pie Chart"
|
||||
});
|
||||
return this.createDynamicChart('pie', maxChartId);
|
||||
case "polar_area_chart":
|
||||
return this.dashboardArray.push({
|
||||
cols: 5,
|
||||
rows: 6,
|
||||
x: 0,
|
||||
y: 0,
|
||||
chartid: maxChartId + 1,
|
||||
component: PolarChartComponent,
|
||||
name: "Polar Area Chart"
|
||||
});
|
||||
return this.createDynamicChart('polar', maxChartId);
|
||||
case "bubble_chart":
|
||||
return this.dashboardArray.push({
|
||||
cols: 5,
|
||||
rows: 6,
|
||||
x: 0,
|
||||
y: 0,
|
||||
chartid: maxChartId + 1,
|
||||
component: BubbleChartComponent,
|
||||
name: "Bubble Chart"
|
||||
});
|
||||
return this.createDynamicChart('bubble', maxChartId);
|
||||
case "scatter_chart":
|
||||
return this.dashboardArray.push({
|
||||
cols: 5,
|
||||
rows: 6,
|
||||
x: 0,
|
||||
y: 0,
|
||||
chartid: maxChartId + 1,
|
||||
component: ScatterChartComponent,
|
||||
name: "Scatter Chart"
|
||||
});
|
||||
return this.createDynamicChart('scatter', maxChartId);
|
||||
case "dynamic_chart":
|
||||
return this.dashboardArray.push({
|
||||
cols: 5,
|
||||
rows: 6,
|
||||
x: 0,
|
||||
y: 0,
|
||||
chartid: maxChartId + 1,
|
||||
component: DynamicChartComponent,
|
||||
name: "Dynamic Chart"
|
||||
});
|
||||
return this.createDynamicChart('line', maxChartId); // Default to line for dynamic chart
|
||||
case "financial_chart":
|
||||
return this.dashboardArray.push({
|
||||
cols: 5,
|
||||
rows: 6,
|
||||
x: 0,
|
||||
y: 0,
|
||||
chartid: maxChartId + 1,
|
||||
component: FinancialChartComponent,
|
||||
name: "Financial Chart"
|
||||
});
|
||||
return this.createDynamicChart('line', maxChartId); // Default to line for financial chart
|
||||
case "to_do_chart":
|
||||
return this.dashboardArray.push({
|
||||
cols: 5,
|
||||
@@ -610,6 +629,17 @@ export class EditnewdashComponent implements OnInit {
|
||||
component: GridViewComponent,
|
||||
name: "Grid View"
|
||||
});
|
||||
case "unified_chart":
|
||||
return this.createDynamicChart('bar', maxChartId); // Default to bar for unified chart
|
||||
default:
|
||||
// Handle any other chart types dynamically
|
||||
// Extract chart type name from identifier (e.g., "heatmap_chart" -> "heatmap")
|
||||
const chartTypeName = componentType.replace('_chart', '');
|
||||
console.log('Creating dynamic chart of type:', chartTypeName);
|
||||
console.log('Display name for chart:', this.getChartDisplayName(chartTypeName));
|
||||
|
||||
// Use dynamic chart creation for all chart types
|
||||
return this.createDynamicChart(chartTypeName, maxChartId);
|
||||
}
|
||||
}
|
||||
removeItem(item) {
|
||||
@@ -662,6 +692,10 @@ export class EditnewdashComponent implements OnInit {
|
||||
if (item['filterOptions'] === undefined) {
|
||||
this.gadgetsEditdata['filterOptions'] = [];
|
||||
}
|
||||
// Initialize chartType property if not present (for unified chart)
|
||||
if (item['chartType'] === undefined) {
|
||||
this.gadgetsEditdata['chartType'] = 'bar';
|
||||
}
|
||||
|
||||
// Initialize filterOptionsString for compact filter
|
||||
if (item.name === 'Compact Filter') {
|
||||
@@ -930,6 +964,11 @@ export class EditnewdashComponent implements OnInit {
|
||||
xyz.connection = this.gadgetsEditdata.connection || undefined;
|
||||
}
|
||||
|
||||
// For unified chart, preserve chart configuration properties
|
||||
if (item.name === 'Unified Chart') {
|
||||
xyz.chartType = this.gadgetsEditdata.chartType || 'bar';
|
||||
}
|
||||
|
||||
console.log(xyz);
|
||||
return xyz;
|
||||
}
|
||||
@@ -1013,6 +1052,51 @@ export class EditnewdashComponent implements OnInit {
|
||||
return commonFilterInputs;
|
||||
}
|
||||
|
||||
// For UnifiedChartComponent, pass chart properties with chartType
|
||||
// Check if the component is UnifiedChartComponent dynamically
|
||||
if (item.component === UnifiedChartComponent ||
|
||||
(item.component && item.component.name === 'UnifiedChartComponent') ||
|
||||
item.name === 'Unified Chart') {
|
||||
const unifiedChartInputs = {
|
||||
chartType: item.chartType || 'bar',
|
||||
xAxis: item.xAxis,
|
||||
yAxis: item.yAxis,
|
||||
table: item.table,
|
||||
datastore: item.datastore,
|
||||
charttitle: item.charttitle,
|
||||
chartlegend: item.chartlegend,
|
||||
showlabel: item.showlabel,
|
||||
chartcolor: item.chartcolor,
|
||||
slices: item.slices,
|
||||
donut: item.donut,
|
||||
charturl: item.charturl,
|
||||
chartparameter: item.chartparameter,
|
||||
datasource: item.datasource,
|
||||
fieldName: item.name, // Using item.name as fieldName
|
||||
connection: item['connection'], // Add connection field using bracket notation
|
||||
// Base drilldown configuration properties
|
||||
drilldownEnabled: item['drilldownEnabled'],
|
||||
drilldownApiUrl: item['drilldownApiUrl'],
|
||||
// Removed drilldownParameterKey since we're using URL templates
|
||||
drilldownXAxis: item['drilldownXAxis'],
|
||||
drilldownYAxis: item['drilldownYAxis'],
|
||||
drilldownParameter: item['drilldownParameter'], // Add drilldown parameter
|
||||
baseFilters: item['baseFilters'] || [], // Add base filters
|
||||
drilldownFilters: item['drilldownFilters'] || [], // Add drilldown filters
|
||||
// Multi-layer drilldown configurations
|
||||
drilldownLayers: item['drilldownLayers'] || []
|
||||
};
|
||||
|
||||
// Remove undefined properties to avoid passing unnecessary data
|
||||
Object.keys(unifiedChartInputs).forEach(key => {
|
||||
if (unifiedChartInputs[key] === undefined) {
|
||||
delete unifiedChartInputs[key];
|
||||
}
|
||||
});
|
||||
|
||||
return unifiedChartInputs;
|
||||
}
|
||||
|
||||
// For GridViewComponent, pass chart properties with drilldown support
|
||||
if (item.component && item.component.name === 'GridViewComponent') {
|
||||
const gridInputs = {
|
||||
@@ -1867,4 +1951,266 @@ export class EditnewdashComponent implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
// Add method to apply dynamic template to a chart
|
||||
applyDynamicTemplate(chartItem: any, template: any) {
|
||||
console.log('Applying dynamic template to chart:', chartItem, template);
|
||||
|
||||
// Apply HTML template
|
||||
if (template.templateHtml) {
|
||||
// In a real implementation, you would dynamically render the HTML template
|
||||
// For now, we'll just log it
|
||||
console.log('HTML Template:', template.templateHtml);
|
||||
}
|
||||
|
||||
// Apply CSS styles
|
||||
if (template.templateCss) {
|
||||
// In a real implementation, you would dynamically apply the CSS styles
|
||||
// For now, we'll just log it
|
||||
console.log('CSS Template:', template.templateCss);
|
||||
}
|
||||
|
||||
// Return the chart item with template applied
|
||||
return {
|
||||
...chartItem,
|
||||
template: template
|
||||
};
|
||||
}
|
||||
|
||||
// Add method to test dynamic chart creation
|
||||
testDynamicChartCreation() {
|
||||
console.log('Testing dynamic chart creation');
|
||||
|
||||
// Show a success message to the user
|
||||
alert('Dynamic chart test started. Check the browser console for detailed output.');
|
||||
|
||||
// Load all chart types
|
||||
this.dynamicChartLoader.loadAllChartConfigurations().subscribe({
|
||||
next: (chartTypes) => {
|
||||
console.log('Loaded chart types:', chartTypes);
|
||||
|
||||
// Find bar chart type
|
||||
const barChartType = chartTypes.find((ct: any) => ct.name === 'bar');
|
||||
if (barChartType) {
|
||||
console.log('Found bar chart type:', barChartType);
|
||||
|
||||
// Load configuration for bar chart
|
||||
this.dynamicChartLoader.loadChartConfiguration(barChartType.id).subscribe({
|
||||
next: (config) => {
|
||||
console.log('Loaded bar chart configuration:', config);
|
||||
|
||||
// Create a test chart item
|
||||
const chartItem = {
|
||||
cols: 5,
|
||||
rows: 6,
|
||||
x: 0,
|
||||
y: 0,
|
||||
chartid: 100,
|
||||
component: UnifiedChartComponent,
|
||||
name: 'Test Dynamic Bar Chart',
|
||||
chartType: 'bar',
|
||||
xAxis: '',
|
||||
yAxis: '',
|
||||
table: '',
|
||||
connection: undefined,
|
||||
// Add dynamic fields from configuration
|
||||
dynamicFields: config.dynamicFields || []
|
||||
};
|
||||
|
||||
console.log('Created test chart item:', chartItem);
|
||||
|
||||
// If we have templates, apply the default one
|
||||
if (config.templates && config.templates.length > 0) {
|
||||
const defaultTemplate = config.templates.find((t: any) => t.isDefault) || config.templates[0];
|
||||
if (defaultTemplate) {
|
||||
console.log('Applying default template:', defaultTemplate);
|
||||
const chartWithTemplate = this.applyDynamicTemplate(chartItem, defaultTemplate);
|
||||
console.log('Chart with template:', chartWithTemplate);
|
||||
|
||||
// Show success message
|
||||
alert('Dynamic chart test completed successfully! Check console for details.');
|
||||
}
|
||||
} else {
|
||||
// Show success message even without templates
|
||||
alert('Dynamic chart test completed successfully! No templates found. Check console for details.');
|
||||
}
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading bar chart configuration:', error);
|
||||
alert('Error loading bar chart configuration. Check console for details.');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.warn('Bar chart type not found');
|
||||
alert('Bar chart type not found in the database.');
|
||||
}
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading chart types:', error);
|
||||
alert('Error loading chart types. Check console for details.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add method to load dynamic chart configuration
|
||||
loadDynamicChartConfiguration(chartTypeId: number) {
|
||||
console.log(`Loading dynamic chart configuration for chart type ${chartTypeId}`);
|
||||
this.dynamicChartLoader.loadChartConfiguration(chartTypeId).subscribe({
|
||||
next: (config) => {
|
||||
console.log('Loaded dynamic chart configuration:', config);
|
||||
// Here you would apply the configuration to the UI
|
||||
// For example, populate form fields, set up templates, etc.
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading dynamic chart configuration:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Add method to create a dynamic chart with configuration from database
|
||||
createDynamicChart = (chartTypeName: string, maxChartId: number) => {
|
||||
console.log(`Creating dynamic chart of type: ${chartTypeName}`);
|
||||
|
||||
// First, get the chart type by name
|
||||
this.dynamicChartLoader.getChartTypeByName(chartTypeName).subscribe({
|
||||
next: (chartType) => {
|
||||
if (chartType) {
|
||||
console.log(`Found chart type:`, chartType);
|
||||
|
||||
// Load the complete configuration for this chart type
|
||||
this.dynamicChartLoader.loadChartConfiguration(chartType.id).subscribe({
|
||||
next: (config) => {
|
||||
console.log(`Loaded configuration for ${chartTypeName}:`, config);
|
||||
|
||||
// Create the chart item with dynamic configuration
|
||||
const chartItem = {
|
||||
cols: 5,
|
||||
rows: 6,
|
||||
x: 0,
|
||||
y: 0,
|
||||
chartid: maxChartId + 1,
|
||||
component: UnifiedChartComponent,
|
||||
name: chartType.displayName || chartTypeName,
|
||||
chartType: chartType.name,
|
||||
xAxis: '',
|
||||
yAxis: '',
|
||||
table: '',
|
||||
connection: undefined,
|
||||
// Add any dynamic fields from the configuration
|
||||
dynamicFields: config.dynamicFields || []
|
||||
};
|
||||
|
||||
// Add UI components as configuration properties
|
||||
if (config.uiComponents && config.uiComponents.length > 0) {
|
||||
config.uiComponents.forEach(component => {
|
||||
chartItem[component.componentName] = '';
|
||||
});
|
||||
}
|
||||
|
||||
this.dashboardArray.push(chartItem);
|
||||
console.log(`Created dynamic chart:`, chartItem);
|
||||
},
|
||||
error: (error) => {
|
||||
console.error(`Error loading configuration for ${chartTypeName}:`, error);
|
||||
// Fallback to default configuration
|
||||
this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.warn(`Chart type ${chartTypeName} not found, using default configuration`);
|
||||
this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
|
||||
}
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error loading configuration for chart type:', error);
|
||||
// Fallback to default configuration
|
||||
this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Fallback method to create default chart configuration
|
||||
createDefaultChart = (chartTypeName: string, chartDisplayName: string) => {
|
||||
console.log(`Creating default chart for ${chartTypeName}`);
|
||||
|
||||
// Map chart type names to chart types - making it fully dynamic
|
||||
const chartTypeMap = {
|
||||
'bar': 'bar',
|
||||
'line': 'line',
|
||||
'pie': 'pie',
|
||||
'doughnut': 'doughnut',
|
||||
'radar': 'radar',
|
||||
'polar': 'polar',
|
||||
'bubble': 'bubble',
|
||||
'scatter': 'scatter'
|
||||
// Removed hardcoded heatmap entry to make it fully dynamic
|
||||
};
|
||||
|
||||
// Get the chart type from the name - default to bubble for unknown chart types
|
||||
const chartType = chartTypeMap[chartTypeName.toLowerCase()] || 'bubble';
|
||||
|
||||
// Safely calculate maxChartId, handling cases where chartid might be NaN or missing
|
||||
let maxChartId = 0;
|
||||
if (this.dashboardArray && this.dashboardArray.length > 0) {
|
||||
const validChartIds = this.dashboardArray
|
||||
.map(item => item.chartid)
|
||||
.filter(chartid => typeof chartid === 'number' && !isNaN(chartid));
|
||||
|
||||
if (validChartIds.length > 0) {
|
||||
maxChartId = Math.max(...validChartIds);
|
||||
}
|
||||
}
|
||||
|
||||
const chartItem = {
|
||||
cols: 5,
|
||||
rows: 6,
|
||||
x: 0,
|
||||
y: 0,
|
||||
chartid: maxChartId + 1,
|
||||
component: UnifiedChartComponent,
|
||||
name: chartDisplayName,
|
||||
chartType: chartType,
|
||||
xAxis: '',
|
||||
yAxis: '',
|
||||
table: '',
|
||||
connection: undefined
|
||||
};
|
||||
|
||||
this.dashboardArray.push(chartItem);
|
||||
console.log('Created default chart:', chartItem);
|
||||
|
||||
// Update the dashboard collection
|
||||
this.dashboardCollection.dashboard = this.dashboardArray.slice();
|
||||
|
||||
// Force gridster to refresh
|
||||
if (this.options && this.options.api) {
|
||||
this.options.api.optionsChanged();
|
||||
}
|
||||
}
|
||||
|
||||
// Helper method to get display name for chart type - making it fully dynamic
|
||||
getChartDisplayName = (chartTypeName: string): string => {
|
||||
const displayNameMap = {
|
||||
'bar': 'Bar Chart',
|
||||
'line': 'Line Chart',
|
||||
'pie': 'Pie Chart',
|
||||
'doughnut': 'Doughnut Chart',
|
||||
'radar': 'Radar Chart',
|
||||
'polar': 'Polar Area Chart',
|
||||
'bubble': 'Bubble Chart',
|
||||
'scatter': 'Scatter Chart'
|
||||
// Removed hardcoded heatmap entry to make it fully dynamic
|
||||
};
|
||||
|
||||
// For unknown chart types, create a display name by capitalizing the first letter and adding ' Chart'
|
||||
const displayName = displayNameMap[chartTypeName.toLowerCase()];
|
||||
if (displayName) {
|
||||
return displayName;
|
||||
} else {
|
||||
// Capitalize first letter and add ' Chart'
|
||||
return chartTypeName.charAt(0).toUpperCase() + chartTypeName.slice(1) + ' Chart';
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export * from './unified-chart.component';
|
||||
@@ -0,0 +1,296 @@
|
||||
<div class="chart-container" *ngIf="!noDataAvailable && !isLoading">
|
||||
<!-- Back button for drilldown navigation -->
|
||||
<div class="drilldown-back" *ngIf="currentDrilldownLevel > 0">
|
||||
<button class="btn btn-sm btn-secondary" (click)="navigateBack()">
|
||||
<clr-icon shape="arrow" dir="left"></clr-icon>
|
||||
Back
|
||||
</button>
|
||||
<span class="drilldown-level">Level: {{ currentDrilldownLevel }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Chart title -->
|
||||
<div class="chart-title" *ngIf="charttitle">
|
||||
<h4>{{ charttitle }}</h4>
|
||||
</div>
|
||||
|
||||
<!-- Filter toggle icon -->
|
||||
<div class="filter-toggle-icon" *ngIf="hasFilters()" (click)="toggleFilters()">
|
||||
<clr-icon shape="filter" size="24"
|
||||
[style.color]="showFilters ? '#007cba' : '#666'"
|
||||
title="Toggle Filters">
|
||||
</clr-icon>
|
||||
<span>
|
||||
{{ showFilters ? 'Hide Filters' : 'Show Filters' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Render different chart types based on chartType input -->
|
||||
<div class="chart-wrapper">
|
||||
<!-- Dynamic Chart Container - uses extracted dynamic options and styles but static template -->
|
||||
<div *ngIf="dynamicTemplate || chartType" class="chart-canvas-container">
|
||||
<canvas baseChart
|
||||
[datasets]="chartData"
|
||||
[labels]="chartLabels"
|
||||
[options]="chartOptions"
|
||||
[legend]="chartLegend"
|
||||
[chartType]="chartType || 'bar'"
|
||||
(chartClick)="chartClicked($event)"
|
||||
(chartHover)="chartHovered($event)">
|
||||
</canvas>
|
||||
</div>
|
||||
|
||||
<!-- Fallback for when no chart type is specified -->
|
||||
<div *ngIf="!dynamicTemplate && !chartType" class="chart-canvas-container">
|
||||
<canvas baseChart
|
||||
[datasets]="chartData"
|
||||
[labels]="chartLabels"
|
||||
[options]="chartOptions"
|
||||
[legend]="chartLegend"
|
||||
[chartType]="'bar'"
|
||||
(chartClick)="chartClicked($event)"
|
||||
(chartHover)="chartHovered($event)">
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collapsible Base Filters -->
|
||||
<div class="filters-section" *ngIf="baseFilters && baseFilters.length > 0 && showFilters">
|
||||
<h5>Filters</h5>
|
||||
<div class="filters-container">
|
||||
<div class="filter-item" *ngFor="let filter of baseFilters; let i = index">
|
||||
<!-- Text Filter -->
|
||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-text">
|
||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
||||
<input type="text" [(ngModel)]="filter.value" (ngModelChange)="onBaseFilterChange(filter)"
|
||||
class="form-control" placeholder="Enter {{ filter.field || 'value' }}">
|
||||
</div>
|
||||
|
||||
<!-- Dropdown Filter -->
|
||||
<div *ngIf="filter.type === 'dropdown'" class="filter-dropdown">
|
||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
||||
<select [(ngModel)]="filter.value" (ngModelChange)="onBaseFilterChange(filter)" class="form-control">
|
||||
<option value="">Select {{ filter.field || 'value' }}</option>
|
||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">
|
||||
{{ option }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Multiselect Filter -->
|
||||
<div *ngIf="filter.type === 'multiselect'" class="filter-multiselect">
|
||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
||||
<div class="multiselect-container">
|
||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
|
||||
<span *ngIf="!filter.value || (Array.isArray(filter.value) && filter.value.length === 0)">Select {{ filter.field || 'options' }}</span>
|
||||
<span *ngIf="filter.value && !Array.isArray(filter.value)">
|
||||
{{ filter.value }}
|
||||
</span>
|
||||
<span *ngIf="filter.value && Array.isArray(filter.value) && filter.value.length > 0">
|
||||
{{ filter.value.length }} selected
|
||||
</span>
|
||||
</div>
|
||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
|
||||
<div class="multiselect-option" *ngFor="let option of getFilterOptions(filter)">
|
||||
<input type="checkbox"
|
||||
[checked]="isOptionSelected(filter, option)"
|
||||
(change)="onMultiSelectChange(filter, option, $event)"
|
||||
id="base-{{ filter.field }}-{{ option }}">
|
||||
<label [for]="'base-' + filter.field + '-' + option">{{ option }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date Range Filter -->
|
||||
<div *ngIf="filter.type === 'date-range'" class="filter-date-range">
|
||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
||||
<div class="date-range-inputs">
|
||||
<input type="date" [(ngModel)]="filter.value.start" (ngModelChange)="onDateRangeInputChange(filter, 'start', $event)"
|
||||
class="form-control" placeholder="Start Date">
|
||||
<input type="date" [(ngModel)]="filter.value.end" (ngModelChange)="onDateRangeInputChange(filter, 'end', $event)"
|
||||
class="form-control" placeholder="End Date">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toggle Filter -->
|
||||
<div *ngIf="filter.type === 'toggle'" class="filter-toggle">
|
||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
||||
<div class="toggle-switch">
|
||||
<input type="checkbox" [(ngModel)]="filter.value" (ngModelChange)="onToggleChange(filter, $event.target.checked)"
|
||||
id="toggle-{{ filter.field }}">
|
||||
<label [for]="'toggle-' + filter.field" class="toggle-label">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Drilldown Filters -->
|
||||
<div class="filters-section" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0 && showFilters">
|
||||
<h5>Drilldown Filters</h5>
|
||||
<div class="filters-container">
|
||||
<div class="filter-item" *ngFor="let filter of drilldownFilters; let i = index">
|
||||
<!-- Text Filter -->
|
||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-text">
|
||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
||||
<input type="text" [(ngModel)]="filter.value" (ngModelChange)="onDrilldownFilterChange(filter)"
|
||||
class="form-control" placeholder="Enter {{ filter.field || 'value' }}">
|
||||
</div>
|
||||
|
||||
<!-- Dropdown Filter -->
|
||||
<div *ngIf="filter.type === 'dropdown'" class="filter-dropdown">
|
||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
||||
<select [(ngModel)]="filter.value" (ngModelChange)="onDrilldownFilterChange(filter)" class="form-control">
|
||||
<option value="">Select {{ filter.field || 'value' }}</option>
|
||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">
|
||||
{{ option }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Multiselect Filter -->
|
||||
<div *ngIf="filter.type === 'multiselect'" class="filter-multiselect">
|
||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
||||
<div class="multiselect-container">
|
||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
|
||||
<span *ngIf="!filter.value || (Array.isArray(filter.value) && filter.value.length === 0)">Select {{ filter.field || 'options' }}</span>
|
||||
<span *ngIf="filter.value && !Array.isArray(filter.value)">
|
||||
{{ filter.value }}
|
||||
</span>
|
||||
<span *ngIf="filter.value && Array.isArray(filter.value) && filter.value.length > 0">
|
||||
{{ filter.value.length }} selected
|
||||
</span>
|
||||
</div>
|
||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
|
||||
<div class="multiselect-option" *ngFor="let option of getFilterOptions(filter)">
|
||||
<input type="checkbox"
|
||||
[checked]="isOptionSelected(filter, option)"
|
||||
(change)="onMultiSelectChange(filter, option, $event)"
|
||||
id="drilldown-{{ filter.field }}-{{ option }}">
|
||||
<label [for]="'drilldown-' + filter.field + '-' + option">{{ option }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date Range Filter -->
|
||||
<div *ngIf="filter.type === 'date-range'" class="filter-date-range">
|
||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
||||
<div class="date-range-inputs">
|
||||
<input type="date" [(ngModel)]="filter.value.start" (ngModelChange)="onDateRangeInputChange(filter, 'start', $event)"
|
||||
class="form-control" placeholder="Start Date">
|
||||
<input type="date" [(ngModel)]="filter.value.end" (ngModelChange)="onDateRangeInputChange(filter, 'end', $event)"
|
||||
class="form-control" placeholder="End Date">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toggle Filter -->
|
||||
<div *ngIf="filter.type === 'toggle'" class="filter-toggle">
|
||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
||||
<div class="toggle-switch">
|
||||
<input type="checkbox" [(ngModel)]="filter.value" (ngModelChange)="onToggleChange(filter, $event.target.checked)"
|
||||
id="drilldown-toggle-{{ filter.field }}">
|
||||
<label [for]="'drilldown-toggle-' + filter.field" class="toggle-label">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Layer Filters -->
|
||||
<div class="filters-section" *ngIf="hasActiveLayerFilters() && showFilters">
|
||||
<h5>Layer Filters</h5>
|
||||
<div class="filters-container">
|
||||
<div class="filter-item" *ngFor="let filter of getActiveLayerFilters(); let i = index">
|
||||
<!-- Text Filter -->
|
||||
<div *ngIf="!filter.type || filter.type === 'text'" class="filter-text">
|
||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
||||
<input type="text" [(ngModel)]="filter.value" (ngModelChange)="onLayerFilterChange(filter)"
|
||||
class="form-control" placeholder="Enter {{ filter.field || 'value' }}">
|
||||
</div>
|
||||
|
||||
<!-- Dropdown Filter -->
|
||||
<div *ngIf="filter.type === 'dropdown'" class="filter-dropdown">
|
||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
||||
<select [(ngModel)]="filter.value" (ngModelChange)="onLayerFilterChange(filter)" class="form-control">
|
||||
<option value="">Select {{ filter.field || 'value' }}</option>
|
||||
<option *ngFor="let option of getFilterOptions(filter)" [value]="option">
|
||||
{{ option }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Multiselect Filter -->
|
||||
<div *ngIf="filter.type === 'multiselect'" class="filter-multiselect">
|
||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
||||
<div class="multiselect-container">
|
||||
<div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
|
||||
<span *ngIf="!filter.value || (Array.isArray(filter.value) && filter.value.length === 0)">Select {{ filter.field || 'options' }}</span>
|
||||
<span *ngIf="filter.value && !Array.isArray(filter.value)">
|
||||
{{ filter.value }}
|
||||
</span>
|
||||
<span *ngIf="filter.value && Array.isArray(filter.value) && filter.value.length > 0">
|
||||
{{ filter.value.length }} selected
|
||||
</span>
|
||||
</div>
|
||||
<div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
|
||||
<div class="multiselect-option" *ngFor="let option of getFilterOptions(filter)">
|
||||
<input type="checkbox"
|
||||
[checked]="isOptionSelected(filter, option)"
|
||||
(change)="onMultiSelectChange(filter, option, $event)"
|
||||
id="layer-{{ filter.field }}-{{ option }}">
|
||||
<label [for]="'layer-' + filter.field + '-' + option">{{ option }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date Range Filter -->
|
||||
<div *ngIf="filter.type === 'date-range'" class="filter-date-range">
|
||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
||||
<div class="date-range-inputs">
|
||||
<input type="date" [(ngModel)]="filter.value.start" (ngModelChange)="onDateRangeInputChange(filter, 'start', $event)"
|
||||
class="form-control" placeholder="Start Date">
|
||||
<input type="date" [(ngModel)]="filter.value.end" (ngModelChange)="onDateRangeInputChange(filter, 'end', $event)"
|
||||
class="form-control" placeholder="End Date">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toggle Filter -->
|
||||
<div *ngIf="filter.type === 'toggle'" class="filter-toggle">
|
||||
<label>{{ filter.field || 'Filter ' + (i + 1) }}</label>
|
||||
<div class="toggle-switch">
|
||||
<input type="checkbox" [(ngModel)]="filter.value" (ngModelChange)="onToggleChange(filter, $event.target.checked)"
|
||||
id="layer-toggle-{{ filter.field }}">
|
||||
<label [for]="'layer-toggle-' + filter.field" class="toggle-label">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Clear Filters Button -->
|
||||
<div class="clear-filters" *ngIf="hasActiveFilters() && showFilters">
|
||||
<button class="btn btn-sm btn-outline" (click)="clearAllFilters()">
|
||||
Clear All Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No Data Available Message -->
|
||||
<div class="no-data-message" *ngIf="noDataAvailable && !isLoading">
|
||||
<p>No data available for the selected filters.</p>
|
||||
<button class="btn btn-sm btn-primary" (click)="fetchChartData()">Retry</button>
|
||||
</div>
|
||||
|
||||
<!-- Loading Indicator -->
|
||||
<div class="loading-indicator" *ngIf="isLoading">
|
||||
<div class="spinner"></div>
|
||||
<p>Loading chart data...</p>
|
||||
</div>
|
||||
@@ -0,0 +1,307 @@
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.drilldown-back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.drilldown-level {
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
position: relative;
|
||||
height: calc(100% - 100px);
|
||||
min-height: 400px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.chart-canvas-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-toggle-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
|
||||
clr-icon {
|
||||
transition: color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
color: #007cba !important;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover span {
|
||||
color: #007cba;
|
||||
}
|
||||
}
|
||||
|
||||
.filters-section {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
h5 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
flex: 1 1 200px;
|
||||
min-width: 150px;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-text,
|
||||
.filter-dropdown,
|
||||
.filter-date-range {
|
||||
.form-control {
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.date-range-inputs {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
.form-control {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-multiselect {
|
||||
position: relative;
|
||||
|
||||
.multiselect-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.multiselect-display {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
min-height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.multiselect-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
z-index: 1000;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.multiselect-option {
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.toggle-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
transition: .4s;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.toggle-slider {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .toggle-label {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
input:checked + .toggle-label .toggle-slider {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
}
|
||||
|
||||
.clear-filters {
|
||||
margin-top: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-data-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 300px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
|
||||
p {
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 300px;
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #3498db;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.filters-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.chart-canvas-container {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { UnifiedChartComponent } from './unified-chart.component';
|
||||
|
||||
describe('UnifiedChartComponent', () => {
|
||||
let component: UnifiedChartComponent;
|
||||
let fixture: ComponentFixture<UnifiedChartComponent>;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [UnifiedChartComponent]
|
||||
});
|
||||
fixture = TestBed.createComponent(UnifiedChartComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -254,7 +254,7 @@ export class ReportbuildqueryComponent implements OnInit {
|
||||
name;
|
||||
databaseName;
|
||||
databasename(val) {
|
||||
console.log(val);
|
||||
console.log('connection ', val);
|
||||
this.databaseName = val.name;
|
||||
this.selecteddatabase = val.conn_string;
|
||||
console.log(this.selecteddatabase);
|
||||
|
||||
@@ -23,6 +23,18 @@
|
||||
<label for="workflow_name">{{'ACTIVE'| translate}}</label>
|
||||
<input type="checkbox" formControlName="active" clrToggle value="billable" name="billable" />
|
||||
</div>
|
||||
|
||||
<!-- SureConnect Dropdown -->
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="sureConnectId">SureConnect Connection</label>
|
||||
<select formControlName="sureConnectId" class="clr-select">
|
||||
<option value="">-- Select SureConnect --</option>
|
||||
<option *ngFor="let conn of sureconnectData" [value]="conn.id">
|
||||
{{conn.connection_name || conn.id}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="url">Get URL</label>
|
||||
@@ -76,4 +88,4 @@
|
||||
<button type="submit" class="btn btn-primary" [disabled]="!entryForm.valid" (click)="onSubmit()">{{'SUBMIT' | translate}}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -4,6 +4,8 @@ import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { ReportBuilderService } from 'src/app/services/api/report-builder.service';
|
||||
import { SureconnectService } from '../../dashboardnew/sureconnect/sureconnect.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-report-build2add',
|
||||
templateUrl: './report-build2add.component.html',
|
||||
@@ -11,8 +13,12 @@ import { ReportBuilderService } from 'src/app/services/api/report-builder.servic
|
||||
})
|
||||
export class ReportBuild2addComponent implements OnInit {
|
||||
public entryForm: FormGroup;
|
||||
// Add sureconnect data property
|
||||
sureconnectData: any[] = [];
|
||||
|
||||
constructor(private _fb: FormBuilder, private router: Router,private toastr: ToastrService,
|
||||
private route: ActivatedRoute,private reportBuilderService: ReportBuilderService) { }
|
||||
private route: ActivatedRoute,private reportBuilderService: ReportBuilderService,
|
||||
private sureconnectService: SureconnectService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.entryForm = this._fb.group({
|
||||
@@ -20,9 +26,23 @@ export class ReportBuild2addComponent implements OnInit {
|
||||
description:[null],
|
||||
active:[null],
|
||||
isSql:[false],
|
||||
// Add sureConnectId field to the form
|
||||
sureConnectId: [null],
|
||||
Rpt_builder2_lines: this._fb.array([this.initLinesFormReport()]),
|
||||
});
|
||||
|
||||
|
||||
// Load sureconnect data
|
||||
this.loadSureconnectData();
|
||||
}
|
||||
|
||||
// Add method to load sureconnect data
|
||||
loadSureconnectData() {
|
||||
this.sureconnectService.getAll().subscribe((data: any[]) => {
|
||||
this.sureconnectData = data;
|
||||
console.log('Sureconnect data loaded:', this.sureconnectData);
|
||||
}, (error) => {
|
||||
console.log('Error loading sureconnect data:', error);
|
||||
});
|
||||
}
|
||||
|
||||
initLinesFormReport() {
|
||||
@@ -68,4 +88,4 @@ export class ReportBuild2addComponent implements OnInit {
|
||||
this.router.navigate(["../all"], { relativeTo: this.route });
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -6,70 +6,87 @@
|
||||
|
||||
<div class="dg-wrapper">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-4">
|
||||
<h3><b>{{'REPORT_BUILDER_2' | translate}}</b></h3>
|
||||
</div>
|
||||
<div class="clr-col-8" style="text-align: right;">
|
||||
<button id="add" class="btn btn-primary" (click)="gotorunner()">
|
||||
<clr-icon shape="grid-view"></clr-icon>{{'REPORT_RUNNER' | translate}}
|
||||
</button>
|
||||
|
||||
<button id="add" class="btn btn-primary" (click)="goToAdd()">
|
||||
<clr-icon shape="plus"></clr-icon>{{'ADD' | translate}}
|
||||
</button>
|
||||
<div class="clr-col-4">
|
||||
<h3><b>{{'REPORT_BUILDER_2' | translate}}</b></h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-col-8" style="text-align: right;">
|
||||
<button id="add" class="btn btn-primary" (click)="gotorunner()">
|
||||
<clr-icon shape="grid-view"></clr-icon>{{'REPORT_RUNNER' | translate}}
|
||||
</button>
|
||||
|
||||
<clr-datagrid [clrDgLoading]="loading">
|
||||
<button id="add" class="btn btn-primary" (click)="goToAdd()">
|
||||
<clr-icon shape="plus"></clr-icon>{{'ADD' | translate}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<clr-datagrid [clrDgLoading]="loading">
|
||||
<clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>{{'LOADING' | translate}}</clr-spinner></ng-template>
|
||||
<div *ngIf="error;else loadingSpinner">{{error}}</div></clr-dg-placeholder>
|
||||
|
||||
|
||||
<div *ngIf="error;else loadingSpinner">{{error}}</div>
|
||||
</clr-dg-placeholder>
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="''"><ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'GO_TO' | translate}}
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'name'"><ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'REPORT_NAME' | translate}}
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'description'"><ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'REPORT_DESCRIPTION' | translate}}
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'active'"><ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'ACTIVE' | translate}}
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column><ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<clr-icon shape="bars"></clr-icon>{{'ACTION' | translate}}
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let user of gridData?.slice()?.reverse();" [clrDgItem]="user">
|
||||
<clr-dg-cell><span class="label label-light-blue" style="display: inline;margin-left: 10px; cursor: pointer;" (click)="goToLines(user)"> {{'SET_UP' | translate}}</span></clr-dg-cell>
|
||||
<clr-dg-cell id="word">{{user.reportName}}</clr-dg-cell>
|
||||
<clr-dg-cell id="word">{{user.description}}</clr-dg-cell>
|
||||
<clr-dg-cell id="word">{{user.active}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<a href="javascript:void(0)" style="padding-right: 10px;" role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm tooltip-top-left">
|
||||
<span style="cursor: pointer;"><clr-icon shape="trash" (click)="onDelete(user)" class="red is-error" style="color: red;"></clr-icon></span>
|
||||
<span class="tooltip-content"> {{'DELETE' | translate}}</span>
|
||||
</a>
|
||||
<clr-signpost>
|
||||
<span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span>
|
||||
<clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
|
||||
<h5 style="margin-top: 0">{{'WHO_COLUMN' | translate}}</h5>
|
||||
<div>{{'ACCOUNT_ID' | translate}}: <code class="clr-code">{{user.accountId}}</code></div>
|
||||
<div>{{'CREATED_AT' | translate}}: <code class="clr-code">{{user.createdAt | date}}</code></div>
|
||||
<div>{{'CREATED_BY' | translate}}: <code class="clr-code">{{user.createdBy}}</code></div>
|
||||
<div>{{'UPDATED_AT' | translate}}: <code class="clr-code">{{user.updatedAt | date}}</code></div>
|
||||
<div>{{'UPDATED_BY' | translate}}: <code class="clr-code">{{user.updatedBy}}</code></div>
|
||||
</clr-signpost-content>
|
||||
</clr-signpost>
|
||||
|
||||
<!-- <span style="cursor: pointer;"><clr-icon shape="form" (click)="goToLines(user.id)" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span> -->
|
||||
</clr-dg-cell>
|
||||
<clr-dg-action-overflow>
|
||||
<!-- <button class="action-item" (click)="goToEdit(user.id)">Edit <clr-icon shape="edit" class="is-error"></clr-icon></button> -->
|
||||
</clr-dg-action-overflow>
|
||||
|
||||
<!-- <clr-dg-row-detail *clrIfExpanded >
|
||||
{{'GO_TO' | translate}}
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
<clr-dg-column [clrDgField]="'name'"><ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'REPORT_NAME' | translate}}
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'description'"><ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'REPORT_DESCRIPTION' | translate}}
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
<clr-dg-column [clrDgField]="''"><ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Sureconnect
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
<clr-dg-column [clrDgField]="'active'"><ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{'ACTIVE' | translate}}
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column><ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<clr-icon shape="bars"></clr-icon>{{'ACTION' | translate}}
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let user of gridData?.slice()?.reverse();" [clrDgItem]="user">
|
||||
<clr-dg-cell><span class="label label-light-blue" style="display: inline;margin-left: 10px; cursor: pointer;"
|
||||
(click)="goToLines(user)"> {{'SET_UP' | translate}}</span></clr-dg-cell>
|
||||
<clr-dg-cell id="word">{{user.reportName}}</clr-dg-cell>
|
||||
<clr-dg-cell id="word">{{user.description}}</clr-dg-cell>
|
||||
|
||||
<clr-dg-cell id="word">{{user.sureconnect_name}}</clr-dg-cell>
|
||||
<clr-dg-cell id="word">{{user.active}}</clr-dg-cell>
|
||||
<clr-dg-cell>
|
||||
<a href="javascript:void(0)" style="padding-right: 10px;" role="tooltip" aria-haspopup="true"
|
||||
class="tooltip tooltip-sm tooltip-top-left">
|
||||
<span style="cursor: pointer;"><clr-icon shape="trash" (click)="onDelete(user)" class="red is-error"
|
||||
style="color: red;"></clr-icon></span>
|
||||
<span class="tooltip-content"> {{'DELETE' | translate}}</span>
|
||||
</a>
|
||||
<clr-signpost>
|
||||
<span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success"
|
||||
style="color: rgb(0, 130, 236);"></clr-icon></span>
|
||||
<clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
|
||||
<h5 style="margin-top: 0">{{'WHO_COLUMN' | translate}}</h5>
|
||||
<div>{{'ACCOUNT_ID' | translate}}: <code class="clr-code">{{user.accountId}}</code></div>
|
||||
<div>{{'CREATED_AT' | translate}}: <code class="clr-code">{{user.createdAt | date}}</code></div>
|
||||
<div>{{'CREATED_BY' | translate}}: <code class="clr-code">{{user.createdBy}}</code></div>
|
||||
<div>{{'UPDATED_AT' | translate}}: <code class="clr-code">{{user.updatedAt | date}}</code></div>
|
||||
<div>{{'UPDATED_BY' | translate}}: <code class="clr-code">{{user.updatedBy}}</code></div>
|
||||
</clr-signpost-content>
|
||||
</clr-signpost>
|
||||
|
||||
<!-- <span style="cursor: pointer;"><clr-icon shape="form" (click)="goToLines(user.id)" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span> -->
|
||||
</clr-dg-cell>
|
||||
<clr-dg-action-overflow>
|
||||
<!-- <button class="action-item" (click)="goToEdit(user.id)">Edit <clr-icon shape="edit" class="is-error"></clr-icon></button> -->
|
||||
</clr-dg-action-overflow>
|
||||
|
||||
<!-- <clr-dg-row-detail *clrIfExpanded >
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td class="td-title">actionName: </td>
|
||||
@@ -77,26 +94,26 @@
|
||||
</tr>
|
||||
</table>
|
||||
</clr-dg-row-detail> -->
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{'USERS_PER_PAGE' | translate}}</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} users
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
|
||||
<div class="modal-body" *ngIf="rowSelected.id">
|
||||
<h1 class="delete">{{'DELETE_CONFIRMATION' | translate}}</h1>
|
||||
<h2 class="heading">{{rowSelected.id}}</h2>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="modaldelete = false">{{'CANCEL' | translate}}</button>
|
||||
<button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary" >{{'DELETE' | translate}}</button>
|
||||
</div>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{'USERS_PER_PAGE' | translate}}</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} users
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
|
||||
<div class="modal-body" *ngIf="rowSelected.id">
|
||||
<h1 class="delete">{{'DELETE_CONFIRMATION' | translate}}</h1>
|
||||
<h2 class="heading">{{rowSelected.id}}</h2>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="modaldelete = false">{{'CANCEL' | translate}}</button>
|
||||
<button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary">{{'DELETE' | translate}}</button>
|
||||
</div>
|
||||
</clr-modal>
|
||||
</div>
|
||||
</clr-modal>
|
||||
@@ -1,13 +1,13 @@
|
||||
<div class="container">
|
||||
<h3 style="font-weight: 300;display: inline;"><b>REPORT SET UP - Project Details Report ({{ReportData.id}})</b></h3>
|
||||
<span class="label label-light-blue" style="display: inline;margin-left: 10px;">Edit Mode</span>
|
||||
<hr />
|
||||
<form [formGroup]="entryForm">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12">
|
||||
<div>
|
||||
<div class="clr-row">
|
||||
<!-- <div class="clr-col-md-4 clr-col-sm-12">
|
||||
<h3 style="font-weight: 300;display: inline;"><b>REPORT SET UP - Project Details Report ({{ReportData.id}})</b></h3>
|
||||
<span class="label label-light-blue" style="display: inline;margin-left: 10px;">Edit Mode</span>
|
||||
<hr />
|
||||
<form [formGroup]="entryForm">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12">
|
||||
<div>
|
||||
<div class="clr-row">
|
||||
<!-- <div class="clr-col-md-4 clr-col-sm-12">
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="projectName">Connection Name</label>
|
||||
<select formControlName="conn_name" name="conn_name" [(ngModel)]="nodeEditProperties.conn_name" id="service" class="clr-dropdown">
|
||||
@@ -24,55 +24,70 @@
|
||||
</select>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="url">Get URL</label>
|
||||
<div> <input type="text" class="clr-input" formControlName="url" name="url" [(ngModel)]="nodeEditProperties.url" placeholder="Enter Url" style="width: 76%"> <span><button class="btn btn-icon btn-primary" (click)="getkeys()">
|
||||
<clr-icon shape="view-list"></clr-icon>
|
||||
</button></span></div>
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="workflow_name">Include Date filter</label>
|
||||
<input type="checkbox" formControlName="date_param_req" name="date_param_req" [(ngModel)]="nodeEditProperties.date_param_req" clrToggle />
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label>Standard Parameters</label>
|
||||
<clr-combobox-container style="margin-top: 0; padding-top: 0;">
|
||||
<!-- <label style="padding-bottom: 5px; padding-top:0px; font-weight: lighter;" class="p1">Select Left Side Filter</label> -->
|
||||
<clr-combobox formControlName="std_param_html" name="std_param_html" [(ngModel)]="nodeEditProperties.std_param_html" clrMulti="true"
|
||||
required>
|
||||
<ng-container *clrOptionSelected="let selected">
|
||||
{{selected}}
|
||||
</ng-container>
|
||||
<clr-options>
|
||||
<clr-option *clrOptionItems="let state of keysfromurl" [clrValue]="state">
|
||||
{{state}}
|
||||
</clr-option>
|
||||
</clr-options>
|
||||
</clr-combobox>
|
||||
</clr-combobox-container>
|
||||
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label>List</label>
|
||||
<select>
|
||||
<option value="">Choose from list</option>
|
||||
<option></option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
<!-- <div class="clr-col-md-4 clr-col-sm-12">
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="url">Get URL</label>
|
||||
<div> <input type="text" class="clr-input" formControlName="url" name="url"
|
||||
[(ngModel)]="nodeEditProperties.url" placeholder="Enter Url" style="width: 76%"> <span><button
|
||||
class="btn btn-icon btn-primary" (click)="getkeys()">
|
||||
<clr-icon shape="view-list"></clr-icon>
|
||||
</button></span></div>
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="workflow_name">Include Date filter</label>
|
||||
<input type="checkbox" formControlName="date_param_req" name="date_param_req"
|
||||
[(ngModel)]="nodeEditProperties.date_param_req" clrToggle />
|
||||
</div>
|
||||
|
||||
<!-- SureConnect Dropdown -->
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="sureConnectId">SureConnect Connection</label>
|
||||
<select formControlName="sureConnectId" class="clr-select">
|
||||
<option value="">-- Select SureConnect --</option>
|
||||
<option *ngFor="let conn of sureconnectData" [value]="conn.id">
|
||||
{{conn.name || conn.id}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label>Standard Parameters</label>
|
||||
<clr-combobox-container style="margin-top: 0; padding-top: 0;">
|
||||
<!-- <label style="padding-bottom: 5px; padding-top:0px; font-weight: lighter;" class="p1">Select Left Side Filter</label> -->
|
||||
<clr-combobox formControlName="std_param_html" name="std_param_html"
|
||||
[(ngModel)]="nodeEditProperties.std_param_html" clrMulti="true" required>
|
||||
<ng-container *clrOptionSelected="let selected">
|
||||
{{selected}}
|
||||
</ng-container>
|
||||
<clr-options>
|
||||
<clr-option *clrOptionItems="let state of keysfromurl" [clrValue]="state">
|
||||
{{state}}
|
||||
</clr-option>
|
||||
</clr-options>
|
||||
</clr-combobox>
|
||||
</clr-combobox-container>
|
||||
|
||||
</div>
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label>List</label>
|
||||
<select>
|
||||
<option value="">Choose from list</option>
|
||||
<option></option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
<!-- <div class="clr-col-md-4 clr-col-sm-12">
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="description" class="d1">Adhoc Parameter String (html)</label>
|
||||
<textarea id="t1" cols="10" rows="3" formControlName="adhoc_param_html" placeholder="Enter Description" name="adhoc_param_html" [(ngModel)]="nodeEditProperties.adhoc_param_html" style="width:100%">
|
||||
</textarea>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<!-- <div class="clr-row" style="padding-left:10px;">
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<!-- <div class="clr-row" style="padding-left:10px;">
|
||||
<div class="clr-col-md-4 clr-col-sm-12">
|
||||
<label for="description" class="d1">Column String (html)</label>
|
||||
<textarea id="t1" cols="10" rows="3" formControlName="column_str" placeholder="Enter Description" name="column_str" [(ngModel)]="nodeEditProperties.column_str" style="width:100%">
|
||||
@@ -85,11 +100,10 @@
|
||||
</textarea>
|
||||
</div>
|
||||
</div> -->
|
||||
<br>
|
||||
<div class="center">
|
||||
<button type="button" class="btn btn-outline" (click)="back()">BACK</button>
|
||||
<button type="submit" form-control class="btn btn-primary" (click)="onSubmit()">UPDATE</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div class="center">
|
||||
<button type="button" class="btn btn-outline" (click)="back()">BACK</button>
|
||||
<button type="submit" form-control class="btn btn-primary" (click)="onSubmit()">UPDATE</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -3,6 +3,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { ReportBuilderService } from 'src/app/services/api/report-builder.service';
|
||||
import { SureconnectService } from '../../dashboardnew/sureconnect/sureconnect.service';
|
||||
|
||||
|
||||
@Component({
|
||||
@@ -23,11 +24,17 @@ export class ReportBuild2editComponent implements OnInit {
|
||||
date_param_req: '',
|
||||
// folderName:'',
|
||||
url: '',
|
||||
// Add sureConnectId property
|
||||
sureConnectId: null,
|
||||
|
||||
};
|
||||
// Add sureconnect data property
|
||||
sureconnectData: any[] = [];
|
||||
|
||||
constructor(private router: Router,
|
||||
private route: ActivatedRoute, private reportBuilderService: ReportBuilderService,
|
||||
private toastr: ToastrService, private _fb: FormBuilder) { }
|
||||
private toastr: ToastrService, private _fb: FormBuilder,
|
||||
private sureconnectService: SureconnectService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.id = this.route.snapshot.params["id"];
|
||||
@@ -41,11 +48,26 @@ export class ReportBuild2editComponent implements OnInit {
|
||||
date_param_req: [null],
|
||||
// folderName:[null],
|
||||
url: [null],
|
||||
// Add sureConnectId to form
|
||||
sureConnectId: [null],
|
||||
});
|
||||
|
||||
// Load sureconnect data first, then load report data
|
||||
this.loadSureconnectData();
|
||||
this.getById(this.id);
|
||||
this.listoddatabase();
|
||||
}
|
||||
|
||||
// Add method to load sureconnect data
|
||||
loadSureconnectData() {
|
||||
this.sureconnectService.getAll().subscribe((data: any[]) => {
|
||||
this.sureconnectData = data;
|
||||
console.log('Sureconnect data loaded:', this.sureconnectData);
|
||||
}, (error) => {
|
||||
console.log('Error loading sureconnect data:', error);
|
||||
});
|
||||
}
|
||||
|
||||
databaselist;
|
||||
listoddatabase() {
|
||||
this.reportBuilderService.getdatabse().subscribe((data) => {
|
||||
@@ -81,6 +103,11 @@ export class ReportBuild2editComponent implements OnInit {
|
||||
// this.nodeEditProperties.conn_name = this.builderLineData.conn_name;
|
||||
this.nodeEditProperties.date_param_req = this.builderLineData[0].date_param_req;
|
||||
this.nodeEditProperties.url = this.builderLineData[0].url;
|
||||
// Set sureConnectId if it exists in the data
|
||||
this.nodeEditProperties.sureConnectId = this.builderLineData[0].sureConnectId || null;
|
||||
|
||||
// Update form with loaded data
|
||||
this.entryForm.patchValue(this.nodeEditProperties);
|
||||
}
|
||||
},
|
||||
(err) => {
|
||||
@@ -115,6 +142,8 @@ export class ReportBuild2editComponent implements OnInit {
|
||||
adhoc_param_html: this.nodeEditProperties.adhoc_param_html,
|
||||
date_param_req: this.nodeEditProperties.date_param_req,
|
||||
url: this.nodeEditProperties.url,
|
||||
// Add sureConnectId to the data
|
||||
sureConnectId: this.nodeEditProperties.sureConnectId,
|
||||
};
|
||||
|
||||
this.builderLineData[0].std_param_html = this.nodeEditProperties.std_param_html;
|
||||
@@ -123,6 +152,9 @@ export class ReportBuild2editComponent implements OnInit {
|
||||
// this.builderLineData.conn_name = this.nodeEditProperties.conn_name ;
|
||||
this.builderLineData[0].date_param_req = this.nodeEditProperties.date_param_req;
|
||||
this.builderLineData[0].url = this.nodeEditProperties.url;
|
||||
// Add sureConnectId to the data
|
||||
this.builderLineData[0].sureConnectId = this.nodeEditProperties.sureConnectId;
|
||||
|
||||
console.log(this.builderLineData);
|
||||
// this.builderLineData.splice(1);
|
||||
console.log(this.builderLineData);
|
||||
@@ -148,6 +180,8 @@ export class ReportBuild2editComponent implements OnInit {
|
||||
|
||||
onSubmit() {
|
||||
this.updated = true;
|
||||
// Update nodeEditProperties with form values including sureConnectId
|
||||
Object.assign(this.nodeEditProperties, this.entryForm.value);
|
||||
this.update();
|
||||
}
|
||||
|
||||
@@ -155,4 +189,4 @@ export class ReportBuild2editComponent implements OnInit {
|
||||
this.router.navigate(["../../all"], { relativeTo: this.route });
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -14,18 +14,16 @@ import { ExcelService } from 'src/app/services/excel.service';
|
||||
})
|
||||
export class Reportrunneredit2Component implements OnInit {
|
||||
dynamicForm: FormGroup;
|
||||
modalselect: boolean = false;
|
||||
serverData = [{
|
||||
"andor": "AND",
|
||||
"fields_name": "",
|
||||
"condition": "=",
|
||||
"value": ""
|
||||
}];
|
||||
andor = ['AND', 'OR', 'NOT'];
|
||||
modalselect:boolean=false;
|
||||
serverData = [{"andor": "AND",
|
||||
"fields_name": "",
|
||||
"condition": "=",
|
||||
"value": ""}];
|
||||
andor = ['AND', 'OR','NOT'];
|
||||
fieldname = ['name1', 'name2'];
|
||||
condition = ['=', '!=', '<', '>', '<=', '>=', 'LIKE', 'BETWEEN', 'IN'];
|
||||
condition = ['=','!=','<','>','<=','>=','LIKE','BETWEEN','IN'];
|
||||
header_id;
|
||||
public array = [
|
||||
public array=[
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Jack",
|
||||
@@ -78,12 +76,13 @@ export class Reportrunneredit2Component implements OnInit {
|
||||
selectedfrom;
|
||||
selectedto;
|
||||
constructor(private router: Router,
|
||||
private route: ActivatedRoute, private _fb: FormBuilder,
|
||||
private reportBuilderService: ReportBuilderService, private toastr: ToastrService, private sanitizer: DomSanitizer, private excel: ExcelService) {
|
||||
this.dynamicForm = this._fb.group({
|
||||
});
|
||||
}
|
||||
todayDate;
|
||||
private route: ActivatedRoute,private _fb: FormBuilder,
|
||||
private reportBuilderService: ReportBuilderService,private toastr:ToastrService,private sanitizer: DomSanitizer,private excel: ExcelService)
|
||||
{
|
||||
this.dynamicForm = this._fb.group({
|
||||
});
|
||||
}
|
||||
todayDate;
|
||||
ngOnInit(): void {
|
||||
this.todayDate = new Date().toISOString().slice(0, 10);
|
||||
this.header_id = this.route.snapshot.params["id"];
|
||||
@@ -95,18 +94,21 @@ export class Reportrunneredit2Component implements OnInit {
|
||||
setTimeout(() => {
|
||||
this.runtheQuery();
|
||||
}, 2000);
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
reportName;
|
||||
builderLine;
|
||||
builderLineData;
|
||||
lineId;
|
||||
adhocList: any[];
|
||||
adhocList:any[];
|
||||
SQLQuery;
|
||||
getUrl;
|
||||
// Add sureConnectId property
|
||||
sureConnectId: number | null = null;
|
||||
stdParamfields;
|
||||
DateParam;
|
||||
|
||||
getById(id: number) {
|
||||
this.reportBuilderService.getrbDetailsById(id).subscribe(
|
||||
(data) => {
|
||||
@@ -114,31 +116,44 @@ export class Reportrunneredit2Component implements OnInit {
|
||||
this.reportName = data.reportName;
|
||||
this.builderLine = data.rpt_builder2_lines;
|
||||
this.lineId = this.builderLine[0].id
|
||||
this.builderLineData = JSON.parse(this.builderLine[0].model);
|
||||
console.log(this.lineId, this.builderLineData);
|
||||
this.builderLineData = JSON.parse(this.builderLine[0].model) ;
|
||||
console.log(this.lineId,this.builderLineData);
|
||||
this.builderLineData = this.builderLineData[0];
|
||||
this.adhocList = this.builderLineData.adhoc_param_html;
|
||||
// this.adhocList = JSON.parse(adhocList);
|
||||
this.DateParam = this.builderLineData.date_param_req;
|
||||
this.getUrl = this.builderLineData.url;
|
||||
console.log(this.adhocList, this.DateParam, this.getUrl)
|
||||
// Get sureConnectId if it exists
|
||||
this.sureConnectId = this.builderLineData.sureConnectId || null;
|
||||
console.log(this.adhocList,this.DateParam,this.getUrl)
|
||||
this.getStdParam(this.header_id);
|
||||
this.featchData();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
featchData() {
|
||||
this.reportBuilderService.getAllDetailsByurl(this.getUrl).subscribe(data => {
|
||||
/**
|
||||
* Fetch data using the URL and SureConnect connection if available
|
||||
*/
|
||||
featchData(){
|
||||
// If sureConnectId is available, we might want to modify the request
|
||||
// For now, we'll use the existing implementation but with better error handling
|
||||
this.reportBuilderService.getAllDetailsByurl(this.getUrl).subscribe(data =>{
|
||||
console.log(data);
|
||||
if (data.body) {
|
||||
if(data.body){
|
||||
// Check if the response is XML (starts with <) or JSON
|
||||
if (typeof data.body === 'string' && data.body.trim().startsWith('<')) {
|
||||
// Handle XML response - for now we'll set rows to empty array
|
||||
// In a real implementation, you would parse the XML properly
|
||||
console.warn('Received XML response instead of JSON');
|
||||
this.rows = [];
|
||||
this.filterRows = [];
|
||||
// Handle XML response
|
||||
console.log('Received XML response, parsing to JSON');
|
||||
try {
|
||||
this.rows = this.parseXMLToJSON(data.body);
|
||||
this.filterRows = [...this.rows]; // Create a copy
|
||||
console.log('Parsed XML data:', this.rows);
|
||||
} catch (error) {
|
||||
console.error('Error parsing XML:', error);
|
||||
this.rows = [];
|
||||
this.filterRows = [];
|
||||
}
|
||||
} else {
|
||||
// Handle JSON response
|
||||
try {
|
||||
@@ -858,4 +873,82 @@ export class Reportrunneredit2Component implements OnInit {
|
||||
value.dayOfMonth !== undefined)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Simple XML parser to convert XML to JSON array
|
||||
* Handles the specific format: <User><id>101</id><name>John Doe</name><email>john.doe@example.com</email></User>
|
||||
* @param xmlString The XML string to parse
|
||||
* @returns Array of objects representing the XML data
|
||||
*/
|
||||
private parseXMLToJSON(xmlString: string): any[] {
|
||||
// Remove any XML declaration
|
||||
xmlString = xmlString.replace(/<\?xml[^>]*\?>/g, '');
|
||||
|
||||
// Extract the root element name (e.g., "User" from <User>...</User>)
|
||||
const rootMatch = xmlString.match(/<(\w+)(?:\s[^>]*)?>/);
|
||||
if (!rootMatch) {
|
||||
console.warn('Could not identify root element in XML');
|
||||
return [];
|
||||
}
|
||||
|
||||
const rootElement = rootMatch[1];
|
||||
const results: any[] = [];
|
||||
|
||||
// Create a regex to match all instances of the root element
|
||||
const regex = new RegExp(`<${rootElement}(?:\\s[^>]*)?>([\\s\\S]*?)<\\/${rootElement}>`, 'g');
|
||||
let match;
|
||||
|
||||
while ((match = regex.exec(xmlString)) !== null) {
|
||||
const elementContent = match[1];
|
||||
const item: any = {};
|
||||
|
||||
// Extract all tags and their values
|
||||
const tagRegex = /<(\w+)>(.*?)<\/\1>/g;
|
||||
let tagMatch;
|
||||
|
||||
while ((tagMatch = tagRegex.exec(elementContent)) !== null) {
|
||||
const tagName = tagMatch[1];
|
||||
const tagValue = tagMatch[2];
|
||||
// Try to convert to appropriate type
|
||||
item[tagName] = this.convertValueType(tagValue);
|
||||
}
|
||||
|
||||
results.push(item);
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert string values to appropriate types (number, boolean, etc.)
|
||||
* @param value The string value to convert
|
||||
* @returns The value converted to the appropriate type
|
||||
*/
|
||||
private convertValueType(value: string): any {
|
||||
// Check for empty value
|
||||
if (value === '') {
|
||||
return value;
|
||||
}
|
||||
|
||||
// Check for boolean values
|
||||
if (value.toLowerCase() === 'true') {
|
||||
return true;
|
||||
}
|
||||
if (value.toLowerCase() === 'false') {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check for numeric values
|
||||
if (!isNaN(Number(value)) && !isNaN(parseFloat(value))) {
|
||||
// Check if it's an integer or float
|
||||
if (Number.isInteger(parseFloat(value))) {
|
||||
return parseInt(value, 10);
|
||||
} else {
|
||||
return parseFloat(value);
|
||||
}
|
||||
}
|
||||
|
||||
// Return as string if no other type matches
|
||||
return value;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong">
|
||||
<li>
|
||||
<a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']">
|
||||
<clr-icon shape="home"></clr-icon>
|
||||
@@ -8,400 +8,236 @@
|
||||
<a href="">
|
||||
<clr-icon shape="flag"></clr-icon>{{ 'SEQ_GENERATOR' | translate }}</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
<section class="sq-hero">
|
||||
<div class="sq-hero__content">
|
||||
<div class="sq-hero__icon"><clr-icon shape="number-list"></clr-icon></div>
|
||||
<div>
|
||||
<h2 class="sq-hero__title">{{ 'SEQ_GENERATOR' | translate }}</h2>
|
||||
<p class="sq-hero__subtitle">{{ 'FND' | translate }}</p>
|
||||
<div class="dg-wrapper">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-8">
|
||||
<h3>{{ 'SEQ_GENERATOR' | translate }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-4" style="text-align: right;">
|
||||
<button class="btn btn-outline" (click)="onExport()">
|
||||
<clr-icon shape="export"></clr-icon> {{ 'EXPORT' | translate }}
|
||||
</button>
|
||||
<button id="add" class="btn btn-primary" (click)="goToAdd()">
|
||||
<clr-icon shape="plus"></clr-icon>{{ 'ADD' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sq-hero__actions">
|
||||
<button class="sq-btn sq-btn-outline" (click)="onExport()">
|
||||
<clr-icon shape="export"></clr-icon> <span class="sq-btn-text">{{ 'EXPORT' | translate }}</span>
|
||||
</button>
|
||||
<button id="add" class="sq-btn sq-btn-primary" (click)="goToAdd()">
|
||||
<clr-icon shape="plus"></clr-icon><span class="sq-btn-text">{{ 'ADD' | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="sq-container">
|
||||
<div class="sq-toolbar">
|
||||
<div class="sq-toolbar__left">
|
||||
<div class="sq-search">
|
||||
<clr-icon shape="search"></clr-icon>
|
||||
<input class="sq-search__input" type="text" [placeholder]="'SEARCH_ALL_FIELDS' | translate" [(ngModel)]="filterText" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sq-toolbar__right sq-stats">
|
||||
<div class="sq-stat">
|
||||
<div class="sq-stat__value">{{ totalSequences }}</div>
|
||||
<div class="sq-stat__label">{{ 'TOTAL_SEQUENCES' | translate }}</div>
|
||||
</div>
|
||||
<div class="sq-view-toggle">
|
||||
<button class="sq-btn sq-btn-sm" [class.sq-btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
|
||||
<clr-icon shape="view-cards"></clr-icon>
|
||||
</button>
|
||||
<button class="sq-btn sq-btn-sm" [class.sq-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
|
||||
<clr-icon shape="table"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected">
|
||||
<clr-dg-placeholder>
|
||||
<ng-template #loadingSpinner>
|
||||
<clr-spinner>Loading ... </clr-spinner>
|
||||
</ng-template>
|
||||
<div *ngIf="error;else loadingSpinner">{{error}}</div>
|
||||
</clr-dg-placeholder>
|
||||
<clr-dg-column [clrDgField]="'seq_no'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'CURRENT_NO' | translate }}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'seq_no'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'NAME' | translate }}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'prefix'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'PREFIX' | translate }}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-datagrid class="sq-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'" [(clrDgSelected)]="selected">
|
||||
<clr-dg-placeholder>
|
||||
<ng-template #loadingSpinner>
|
||||
<clr-spinner>{{ 'LOADING' | translate }} ... </clr-spinner>
|
||||
</ng-template>
|
||||
<div *ngIf="error;else loadingSpinner">{{error}}</div>
|
||||
</clr-dg-placeholder>
|
||||
|
||||
<clr-dg-column [clrDgField]="'current_no'" class="sq-col sq-col--no">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="sq-col-title">
|
||||
<clr-icon shape="hashtag"></clr-icon> {{ 'CURRENT_NO' | translate }}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-column [clrDgField]="'sequence_name'" class="sq-col sq-col--name">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="sq-col-title">
|
||||
<clr-icon shape="tag"></clr-icon> {{ 'NAME' | translate }}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-column [clrDgField]="'prefix'" class="sq-col sq-col--prefix">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="sq-col-title">
|
||||
<clr-icon shape="text"></clr-icon> {{ 'PREFIX' | translate }}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'seperator'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'SEPARATOR' | translate }}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-column [clrDgField]="'seperator'" class="sq-col sq-col--separator">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="sq-col-title">
|
||||
<clr-icon shape="split-string"></clr-icon> {{ 'SEPARATOR' | translate }}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'digit'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
{{ 'SEQUENCE_SIZE' | translate }}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
<!-- <clr-dg-column [clrDgField]="'date_format'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Date Format
|
||||
</ng-container>
|
||||
</clr-dg-column> -->
|
||||
<clr-dg-row *clrDgItems="let user of alldata" [clrDgItem]="user">
|
||||
<clr-dg-cell>{{user.current_no}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.sequence_name}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.prefix}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.seperator}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.sequence_size}}</clr-dg-cell>
|
||||
<!-- <clr-dg-cell>{{user.date_format}}</clr-dg-cell> -->
|
||||
<clr-dg-action-overflow>
|
||||
<button class="action-item" (click)="goToEdit(user)"> {{ 'EDIT' | translate }} <clr-icon shape="edit"
|
||||
class="is-error"></clr-icon></button>
|
||||
<button class="action-item" (click)="onDelete(user)"> {{ 'DELETE' | translate }}<clr-icon shape="trash"
|
||||
class="is-error"></clr-icon></button>
|
||||
</clr-dg-action-overflow>
|
||||
|
||||
<clr-dg-column [clrDgField]="'sequence_size'" class="sq-col sq-col--size">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="sq-col-title">
|
||||
<clr-icon shape="ruler"></clr-icon> {{ 'SEQUENCE_SIZE' | translate }}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-column [clrDgField]="'suffix'" class="sq-col sq-col--suffix">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="sq-col-title">
|
||||
<clr-icon shape="text"></clr-icon> {{ 'SUFFIX' | translate }}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-column [clrDgField]="'starting_no'" class="sq-col sq-col--starting">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="sq-col-title">
|
||||
<clr-icon shape="play"></clr-icon> {{ 'STARTING_NO' | translate }}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-column [clrDgField]="'sequence_code'" class="sq-col sq-col--code">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="sq-col-title">
|
||||
<clr-icon shape="code"></clr-icon> {{ 'SEQUENCE_CODE' | translate }}
|
||||
</span>
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let user of filteredSequences" [clrDgItem]="user">
|
||||
<clr-dg-cell>{{user.current_no}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.sequence_name}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.prefix}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.seperator}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.sequence_size}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.suffix}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.starting_no}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.sequence_code}}</clr-dg-cell>
|
||||
<clr-dg-action-overflow>
|
||||
<button class="sq-action-item" (click)="goToEdit(user)">
|
||||
{{ 'EDIT' | translate }}
|
||||
<clr-icon shape="edit"></clr-icon>
|
||||
</button>
|
||||
<button class="sq-action-item sq-btn-error" (click)="onDelete(user)">
|
||||
{{ 'DELETE' | translate }}
|
||||
<clr-icon shape="trash"></clr-icon>
|
||||
</button>
|
||||
</clr-dg-action-overflow>
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer class="sq-grid-footer">
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">
|
||||
{{ 'RECORDS_PER_PAGE' | translate }}
|
||||
</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
{{ 'OF' | translate }} {{pagination.totalItems}} {{ 'RECORDS' | translate }}
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</clr-dg-row>
|
||||
|
||||
<div class="sq-cards" *ngIf="viewMode==='cards'">
|
||||
<div class="sq-card-item" *ngFor="let user of filteredSequences">
|
||||
<div class="sq-card-item__header">
|
||||
<div class="sq-card-item__icon"><clr-icon shape="number-list"></clr-icon></div>
|
||||
<div class="sq-card-item__title">{{user.sequence_name}}</div>
|
||||
<div class="sq-card-item__badge">{{user.current_no}}</div>
|
||||
</div>
|
||||
<div class="sq-card-item__body">
|
||||
<div class="sq-kv"><span>{{ 'PREFIX' | translate }}</span><strong>{{user.prefix}}</strong></div>
|
||||
<div class="sq-kv"><span>{{ 'SEPARATOR' | translate }}</span><strong>{{user.seperator}}</strong></div>
|
||||
<div class="sq-kv"><span>{{ 'SEQUENCE_SIZE' | translate }}</span><strong>{{user.sequence_size}}</strong></div>
|
||||
<div class="sq-kv" *ngIf="user.suffix"><span>{{ 'SUFFIX' | translate }}</span><strong>{{user.suffix}}</strong></div>
|
||||
<div class="sq-kv" *ngIf="user.starting_no"><span>{{ 'STARTING_NO' | translate }}</span><strong>{{user.starting_no}}</strong></div>
|
||||
<div class="sq-kv" *ngIf="user.sequence_code"><span>{{ 'SEQUENCE_CODE' | translate }}</span><strong>{{user.sequence_code}}</strong></div>
|
||||
<div class="sq-kv" *ngIf="user.demonstration"><span>{{ 'DEMONSTRATION' | translate }}</span><strong>{{user.demonstration}}</strong></div>
|
||||
</div>
|
||||
<div class="sq-card-item__footer">
|
||||
<button class="sq-btn sq-btn-sm sq-btn-outline" (click)="goToEdit(user)">
|
||||
<clr-icon shape="edit"></clr-icon> {{ 'EDIT' | translate }}
|
||||
</button>
|
||||
<button class="sq-btn sq-btn-sm sq-btn-outline" (click)="onDelete(user)">
|
||||
<clr-icon shape="trash"></clr-icon> {{ 'DELETE' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<clr-dg-footer>
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{ 'USERS_PER_PAGE' | translate
|
||||
}}</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
|
||||
<clr-modal class="sq-modal" [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
<div class="modal-body">
|
||||
<div class="sq-delete-header">
|
||||
<div class="sq-delete-icon">
|
||||
<clr-icon shape="exclamation-triangle" size="48"></clr-icon>
|
||||
</div>
|
||||
<h1 class="sq-delete-title">{{ 'ARE_YOU_SURE_WANT_TO_DELETE' | translate }}?</h1>
|
||||
<p class="sq-delete-subtitle">{{ 'THIS_ACTION_CANNOT_BE_UNDONE' | translate }}</p>
|
||||
<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
|
||||
<div class="modal-body" *ngIf="rowSelected.id">
|
||||
<h1 class="delete">Are You Sure Want to delete?</h1>
|
||||
<h2 class="heading">{{rowSelected.id}}</h2>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
|
||||
<button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sq-delete-details" *ngIf="rowSelected.id">
|
||||
<div class="sq-delete-detail-item">
|
||||
<span class="sq-delete-detail-label">{{ 'SEQUENCE_ID' | translate }}:</span>
|
||||
<span class="sq-delete-detail-value">{{rowSelected.id}}</span>
|
||||
</div>
|
||||
<div class="sq-delete-detail-item">
|
||||
<span class="sq-delete-detail-label">{{ 'SEQUENCE_NAME' | translate }}:</span>
|
||||
<span class="sq-delete-detail-value">{{rowSelected.sequence_name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="sq-btn sq-btn-outline" (click)="modaldelete = false">
|
||||
<clr-icon shape="times"></clr-icon>
|
||||
<span>{{ 'CANCEL' | translate }}</span>
|
||||
</button>
|
||||
<button type="submit" (click)="delete(rowSelected.id)" class="sq-btn sq-btn-error">
|
||||
<clr-icon shape="trash"></clr-icon>
|
||||
<span>{{ 'DELETE' | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
<clr-modal class="sq-modal" [(clrModalOpen)]="modaladd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title sq-modal-title">
|
||||
<clr-icon shape="plus"></clr-icon> {{ 'ADD_SEQUENCE_GENERATOR' | translate }}
|
||||
</h3>
|
||||
<div class="modal-body">
|
||||
<form [formGroup]="entryForm" (ngSubmit)="onSubmit()" class="sq-form">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="sequence_name" class="sq-form-label">
|
||||
{{ 'NAME' | translate }}<span class="required-field">*</span>
|
||||
</label>
|
||||
<input type="text" id="sequence_name" class="sq-form-input" name="sequence_name" formControlName="sequence_name">
|
||||
<div *ngIf="submitted && entryForm.controls.sequence_name.errors" class="sq-error-message">
|
||||
<div *ngIf="submitted && entryForm.controls.sequence_name.errors.required">
|
||||
{{ 'THIS_FIELD_IS_REQUIRED' | translate }}
|
||||
|
||||
<clr-modal [(clrModalOpen)]="modaladd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Add Sequence Genarator</h3>
|
||||
<div class="modal-body">
|
||||
<form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="name">Name<span class="required-field">*</span></label>
|
||||
<input type="text" class="clr-input" name="sequence_name" formControlName="sequence_name">
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="name">Sequence Code</label>
|
||||
<input type="text" class="clr-input" name="sequence_code" formControlName="sequence_code">
|
||||
</div>
|
||||
<!-- <div class="clr-col-sm-12">
|
||||
<label for="name">Implementation</label>
|
||||
<select name="implementation" formControlName="implementation" class="clr-dropdown">
|
||||
<option>standard</option>
|
||||
<option>shared</option>
|
||||
</select>
|
||||
</div> -->
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Demonstration</label>
|
||||
<input type="text" class="clr-input" formControlName="demonstration">
|
||||
</div>
|
||||
<!-- <div class="clr-col-sm-12">
|
||||
<label for="name">Active</label>
|
||||
<input type="checkbox" formControlName="active" name="active" clrCheckbox>
|
||||
</div> -->
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="name">Prefix<span class="required-field">*</span></label>
|
||||
<input type="text" class="clr-input" formControlName="prefix" name="prefix">
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">suffix</label>
|
||||
<input type="text" class="clr-input" name="suffix" formControlName="suffix">
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Separator</label>
|
||||
<input type="text" class="clr-input" name="seperator" formControlName="seperator">
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Starting No</label>
|
||||
<input type="number" class="clr-input" name="starting_no" formControlName="starting_no">
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Current No</label>
|
||||
<input type="number" class="clr-input" formControlName="current_no">
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags"> Size</label>
|
||||
<input type="number" class="clr-input" name="sequence_size" formControlName="sequence_size">
|
||||
</div>
|
||||
<!-- <div class="clr-col-sm-12">
|
||||
<label for="tags">Date Format</label>
|
||||
<input type="text" class="clr-input" name="date_format" formControlName="date_format">
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="sequence_code" class="sq-form-label">
|
||||
{{ 'SEQUENCE_CODE' | translate }}
|
||||
</label>
|
||||
<input type="text" id="sequence_code" class="sq-form-input" name="sequence_code" formControlName="sequence_code">
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="demonstration" class="sq-form-label">
|
||||
{{ 'DEMONSTRATION' | translate }}
|
||||
</label>
|
||||
<input type="text" id="demonstration" class="sq-form-input" formControlName="demonstration">
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="prefix" class="sq-form-label">
|
||||
{{ 'PREFIX' | translate }}<span class="required-field">*</span>
|
||||
</label>
|
||||
<input type="text" id="prefix" class="sq-form-input" formControlName="prefix" name="prefix">
|
||||
<div *ngIf="submitted && entryForm.controls.prefix.errors" class="sq-error-message">
|
||||
<div *ngIf="submitted && entryForm.controls.prefix.errors.required">
|
||||
{{ 'THIS_FIELD_IS_REQUIRED' | translate }}
|
||||
<br>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="modaladd = false">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">ADD</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="suffix" class="sq-form-label">
|
||||
{{ 'SUFFIX' | translate }}
|
||||
</label>
|
||||
<input type="text" id="suffix" class="sq-form-input" name="suffix" formControlName="suffix">
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="seperator" class="sq-form-label">
|
||||
{{ 'SEPARATOR' | translate }}
|
||||
</label>
|
||||
<input type="text" id="seperator" class="sq-form-input" name="seperator" formControlName="seperator">
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="starting_no" class="sq-form-label">
|
||||
{{ 'STARTING_NO' | translate }}
|
||||
</label>
|
||||
<input type="number" id="starting_no" class="sq-form-input" name="starting_no" formControlName="starting_no">
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="current_no" class="sq-form-label">
|
||||
{{ 'CURRENT_NO' | translate }}
|
||||
</label>
|
||||
<input type="number" id="current_no" class="sq-form-input" formControlName="current_no">
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="sequence_size" class="sq-form-label">
|
||||
{{ 'SEQUENCE_SIZE' | translate }}
|
||||
</label>
|
||||
<input type="number" id="sequence_size" class="sq-form-input" name="sequence_size" formControlName="sequence_size">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sq-form-actions">
|
||||
<button type="button" class="sq-btn sq-btn-outline" (click)="modaladd = false">
|
||||
<clr-icon shape="times"></clr-icon>
|
||||
<span>{{ 'CANCEL' | translate }}</span>
|
||||
</button>
|
||||
<button type="submit" class="sq-btn sq-btn-primary">
|
||||
<clr-icon shape="check"></clr-icon>
|
||||
<span>{{ 'ADD' | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</clr-modal>
|
||||
|
||||
<clr-modal class="sq-modal" [(clrModalOpen)]="modaledit" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title sq-modal-title">
|
||||
<clr-icon shape="edit"></clr-icon> {{ 'UPDATE_SEQUENCE_GENERATOR' | translate }}
|
||||
</h3>
|
||||
<div class="modal-body" *ngIf="rowSelected.id">
|
||||
<div class="sq-form-help">
|
||||
{{ 'SEQUENCE_ID' | translate }}: <code class="clr-code">{{rowSelected.id}}</code>
|
||||
<clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Update Sequence Genarator</h3>
|
||||
<div class="modal-body" *ngIf="rowSelected.id">
|
||||
<h2 class="heading">{{rowSelected.id}}</h2>
|
||||
<form (ngSubmit)="onUpdate(rowSelected.id)">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="name">Name<span class="required-field">*</span></label>
|
||||
<input type="text" class="clr-input" name="sequence_name" [(ngModel)]="rowSelected.sequence_name">
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="name">Sequence Code</label>
|
||||
<input type="text" class="clr-input" name="sequence_code" [(ngModel)]="rowSelected.sequence_code">
|
||||
</div>
|
||||
<!-- <div class="clr-col-sm-12">
|
||||
<label for="name">Implementation</label>
|
||||
<select name="implementation" class="clr-dropdown" [(ngModel)]="rowSelected.implementation">
|
||||
<option>standard</option>
|
||||
<option>shared</option>
|
||||
</select>
|
||||
</div> -->
|
||||
<!-- <div class="clr-col-sm-12">
|
||||
<label for="name">Active</label>
|
||||
<input type="checkbox" name="active" name="menuId" clrCheckbox [(ngModel)]="rowSelected.active">
|
||||
</div> -->
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="name">Prefix<span class="required-field">*</span></label>
|
||||
<input type="text" class="clr-input" name="prefix" [(ngModel)]="rowSelected.prefix">
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">suffix</label>
|
||||
<input type="text" class="clr-input" name="suffix" [(ngModel)]="rowSelected.suffix">
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Separator</label>
|
||||
<input type="text" class="clr-input" name="seperator" [(ngModel)]="rowSelected.seperator">
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Starting No</label>
|
||||
<input type="number" class="clr-input" name="starting_no" [(ngModel)]="rowSelected.starting_no">
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Current No</label>
|
||||
<input type="number" class="clr-input" name="current_no" [(ngModel)]="rowSelected.current_no"
|
||||
readonly>
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Demonstration</label>
|
||||
<input type="text" class="clr-input" name="demonstration" [(ngModel)]="rowSelected.demonstration"
|
||||
readonly>
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
<label for="tags">Sequence Size</label>
|
||||
<input type="number" class="clr-input" name="sequence_size" [(ngModel)]="rowSelected.sequence_size">
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="modaledit = false">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Update</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<form (ngSubmit)="onUpdate(rowSelected.id)" class="sq-form">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="sequence_name" class="sq-form-label">
|
||||
{{ 'NAME' | translate }}<span class="required-field">*</span>
|
||||
</label>
|
||||
<input type="text" id="sequence_name" class="sq-form-input" name="sequence_name" [(ngModel)]="rowSelected.sequence_name">
|
||||
<div class="sq-error-message" *ngIf="!rowSelected.sequence_name">
|
||||
{{ 'THIS_FIELD_IS_REQUIRED' | translate }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="sequence_code" class="sq-form-label">
|
||||
{{ 'SEQUENCE_CODE' | translate }}
|
||||
</label>
|
||||
<input type="text" id="sequence_code" class="sq-form-input" name="sequence_code" [(ngModel)]="rowSelected.sequence_code">
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="demonstration" class="sq-form-label">
|
||||
{{ 'DEMONSTRATION' | translate }}
|
||||
</label>
|
||||
<input type="text" id="demonstration" class="sq-form-input" name="demonstration" [(ngModel)]="rowSelected.demonstration" readonly>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="prefix" class="sq-form-label">
|
||||
{{ 'PREFIX' | translate }}<span class="required-field">*</span>
|
||||
</label>
|
||||
<input type="text" id="prefix" class="sq-form-input" name="prefix" [(ngModel)]="rowSelected.prefix">
|
||||
<div class="sq-error-message" *ngIf="!rowSelected.prefix">
|
||||
{{ 'THIS_FIELD_IS_REQUIRED' | translate }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="suffix" class="sq-form-label">
|
||||
{{ 'SUFFIX' | translate }}
|
||||
</label>
|
||||
<input type="text" id="suffix" class="sq-form-input" name="suffix" [(ngModel)]="rowSelected.suffix">
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="seperator" class="sq-form-label">
|
||||
{{ 'SEPARATOR' | translate }}
|
||||
</label>
|
||||
<input type="text" id="seperator" class="sq-form-input" name="seperator" [(ngModel)]="rowSelected.seperator">
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="starting_no" class="sq-form-label">
|
||||
{{ 'STARTING_NO' | translate }}
|
||||
</label>
|
||||
<input type="number" id="starting_no" class="sq-form-input" name="starting_no" [(ngModel)]="rowSelected.starting_no">
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="current_no" class="sq-form-label">
|
||||
{{ 'CURRENT_NO' | translate }}
|
||||
</label>
|
||||
<input type="number" id="current_no" class="sq-form-input" name="current_no" [(ngModel)]="rowSelected.current_no" readonly>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<label for="sequence_size" class="sq-form-label">
|
||||
{{ 'SEQUENCE_SIZE' | translate }}
|
||||
</label>
|
||||
<input type="number" id="sequence_size" class="sq-form-input" name="sequence_size" [(ngModel)]="rowSelected.sequence_size">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sq-form-actions">
|
||||
<button type="button" class="sq-btn sq-btn-outline" (click)="modaledit = false">
|
||||
<clr-icon shape="times"></clr-icon>
|
||||
<span>{{ 'CANCEL' | translate }}</span>
|
||||
</button>
|
||||
<button type="submit" class="sq-btn sq-btn-primary">
|
||||
<clr-icon shape="check"></clr-icon>
|
||||
<span>{{ 'UPDATE' | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</clr-modal>
|
||||
@@ -1,694 +1,72 @@
|
||||
@import '../../../../../styles/_design-tokens.scss';
|
||||
|
||||
// Sequence Generator Styles
|
||||
.sq-hero {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24px 32px;
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
font-family: var(--theme-font-primary);
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
clr-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-family: var(--theme-font-secondary);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.sq-container {
|
||||
background: var(--theme-surface);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
// Toolbar, search and stats
|
||||
.sq-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
background: var(--theme-surface);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&__left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.sq-search {
|
||||
position: relative;
|
||||
max-width: 400px;
|
||||
|
||||
clr-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #9ca3af;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__input {
|
||||
input[type=text],[type=number],
|
||||
[type=date],
|
||||
[type=password] {
|
||||
width: 100%;
|
||||
padding: 12px 12px 12px 40px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: all 200ms ease-out;
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
font-family: var(--theme-font-primary);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sq-stats {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.sq-stat {
|
||||
min-width: 110px;
|
||||
background: var(--theme-surface);
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
border-radius: var(--theme-border-radius);
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
box-shadow: var(--theme-shadow);
|
||||
|
||||
&__value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 12px;
|
||||
color: var(--theme-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
|
||||
.sq-view-toggle {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.sq-btn {
|
||||
min-width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
// Grid columns
|
||||
.sq-col-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
.sq-col--prefix .sq-col-title clr-icon,
|
||||
.sq-col--separator .sq-col-title clr-icon,
|
||||
.sq-col--size .sq-col-title clr-icon {
|
||||
color: var(--theme-primary);
|
||||
}
|
||||
|
||||
// Data Grid Styles
|
||||
.sq-grid {
|
||||
background: var(--theme-surface);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
margin-bottom: 24px;
|
||||
|
||||
::ng-deep .datagrid {
|
||||
.datagrid-head {
|
||||
background: var(--theme-background);
|
||||
|
||||
.datagrid-column {
|
||||
padding: 16px 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
}
|
||||
|
||||
.datagrid-row {
|
||||
transition: background-color 150ms ease-out;
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.datagrid-cell {
|
||||
padding: 16px 24px;
|
||||
font-size: 14px;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
|
||||
.datagrid-footer {
|
||||
background: var(--theme-background);
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sq-grid-footer {
|
||||
background: var(--theme-background);
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
// Card View Styles
|
||||
.sq-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.sq-card-item {
|
||||
background: var(--theme-surface);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
transition: all 200ms ease-out;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
padding: 12px;
|
||||
margin-right: 16px;
|
||||
|
||||
clr-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex: 1;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 4px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.sq-kv {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--theme-text-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--theme-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// Form Styles
|
||||
.sq-form {
|
||||
.clr-row {
|
||||
margin: 0 -12px;
|
||||
}
|
||||
|
||||
.clr-col-md-6,
|
||||
.clr-col-sm-12 {
|
||||
padding: 0 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.sq-form-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--theme-text);
|
||||
margin-bottom: 8px;
|
||||
font-family: var(--theme-font-primary);
|
||||
}
|
||||
|
||||
.sq-form-input,
|
||||
.sq-form-select {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--theme-text);
|
||||
background: var(--theme-surface);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
transition: all 200ms ease-out;
|
||||
margin-bottom: 0;
|
||||
font-family: var(--theme-font-primary);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: var(--theme-background);
|
||||
color: var(--theme-text-secondary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: var(--theme-error, #ef4444);
|
||||
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.sq-form-select {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
||||
background-position: right 12px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px 12px;
|
||||
padding-right: 40px;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.sq-error-message {
|
||||
color: var(--theme-error, #ef4444);
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
font-weight: 500;
|
||||
padding: 15px 20px;
|
||||
// margin: 3px 0;
|
||||
background-color: rgb(255, 255, 255);
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.required-field {
|
||||
color: var(--theme-error, #ef4444);
|
||||
margin-left: 4px;
|
||||
color: red;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.sq-form-help {
|
||||
color: var(--theme-text-secondary);
|
||||
font-size: 12px;
|
||||
margin-bottom: 16px;
|
||||
font-family: var(--theme-font-primary);
|
||||
.green {
|
||||
background-color: rgb(156, 231, 156);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.sq-form-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
.blue {
|
||||
background-color: #57abcf; //rgb(82, 87, 161);
|
||||
color: black;
|
||||
}
|
||||
|
||||
// Modern Button Styles using ThemeService
|
||||
.sq-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease-out;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: var(--theme-font-primary);
|
||||
z-index: 1;
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--theme-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.sq-btn-sm {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&.sq-btn-md {
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&.sq-btn-lg {
|
||||
padding: 16px 24px;
|
||||
font-size: 16px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
// Variants
|
||||
&.sq-btn-primary {
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
&.sq-btn-outline {
|
||||
background: transparent;
|
||||
color: var(--theme-secondary);
|
||||
border-color: var(--theme-secondary);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: rgba(100, 116, 139, 0.1);
|
||||
border-color: var(--theme-secondary);
|
||||
color: var(--theme-secondary);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
&.sq-btn-error {
|
||||
background: var(--theme-error, #ef4444);
|
||||
color: white;
|
||||
border-color: var(--theme-error, #ef4444);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-error-dark, #dc2626);
|
||||
border-color: var(--theme-error-dark, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.sq-btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--theme-text-secondary);
|
||||
border-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Action items in datagrid
|
||||
.sq-action-item {
|
||||
@extend .sq-btn;
|
||||
@extend .sq-btn-ghost;
|
||||
@extend .sq-btn-sm;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 4px;
|
||||
text-align: left;
|
||||
|
||||
clr-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&.sq-btn-error {
|
||||
color: var(--theme-error, #ef4444);
|
||||
|
||||
&:hover {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: var(--theme-error, #ef4444);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Delete Modal Styles
|
||||
.sq-delete-header {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.sq-delete-icon {
|
||||
color: var(--theme-error, #ef4444);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.sq-delete-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-text);
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.sq-delete-subtitle {
|
||||
font-size: 16px;
|
||||
color: var(--theme-text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sq-delete-details {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.sq-delete-detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sq-delete-detail-label {
|
||||
font-weight: 500;
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
.sq-delete-detail-value {
|
||||
font-weight: 600;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
// Modal Styles
|
||||
.sq-modal-title clr-icon {
|
||||
margin-right: 6px;
|
||||
color: var(--theme-primary);
|
||||
}
|
||||
|
||||
::ng-deep .modal-header {
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-radius: 16px 16px 0 0 !important;
|
||||
padding: 20px 24px !important;
|
||||
|
||||
.modal-title {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .modal-body {
|
||||
padding: 24px !important;
|
||||
}
|
||||
|
||||
::ng-deep .modal-footer {
|
||||
padding: 20px 24px !important;
|
||||
background: var(--theme-background);
|
||||
border-radius: 0 0 16px 16px !important;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
// Breadcrumb
|
||||
.mm-breadcrumb {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@media (max-width: 768px) {
|
||||
.sq-hero {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.td-title {
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.sq-toolbar {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.sq-search {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sq-stats {
|
||||
flex-direction: column;
|
||||
width: 150px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background-color: rgba(63, 122, 231, 0.863);
|
||||
//color: rgb(24, 13, 13);
|
||||
}
|
||||
|
||||
th {
|
||||
//background-color:rgb(170, 169, 169);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.td-content {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.delete,
|
||||
.heading {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.section p {
|
||||
background-color: rgb(206, 201, 201);
|
||||
padding: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sq-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sq-form-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sq-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sq-card-item__footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
padding: 5px 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
input.ng-invalid.ng-touched {
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.error_mess {
|
||||
color: red;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user