Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
99a74dbd57 | ||
|
|
a00d18705a | ||
|
|
43faace480 | ||
|
|
97ea7c3554 | ||
|
|
bee89fc12b | ||
|
|
fe6dd92ef4 | ||
|
|
d8edd81fae |
@@ -1,9 +1,8 @@
|
||||
export class ReportBuilder {
|
||||
public report_id: number;
|
||||
public report_name: string;
|
||||
public description: string;
|
||||
public report_tags: string;
|
||||
public servicename: string;
|
||||
// Add SureConnect reference
|
||||
public sureConnectId: number | null;
|
||||
public report_name:string;
|
||||
public description: string;
|
||||
public report_tags: string;
|
||||
public servicename:string;
|
||||
|
||||
}
|
||||
@@ -23,39 +23,6 @@ export interface DashboardContentModel {
|
||||
component?: any;
|
||||
name: string;
|
||||
type?:string;
|
||||
// Chart properties
|
||||
xAxis?: string;
|
||||
yAxis?: string | string[];
|
||||
chartType?: string;
|
||||
charttitle?: string;
|
||||
chartlegend?: boolean;
|
||||
showlabel?: boolean;
|
||||
chartcolor?: boolean;
|
||||
slices?: boolean;
|
||||
donut?: boolean;
|
||||
charturl?: string;
|
||||
chartparameter?: string;
|
||||
datastore?: string;
|
||||
table?: string;
|
||||
datasource?: string;
|
||||
fieldName?: 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[];
|
||||
// Compact filter properties
|
||||
filterKey?: string;
|
||||
filterType?: string;
|
||||
filterLabel?: string;
|
||||
filterOptions?: string[];
|
||||
}
|
||||
|
||||
export interface DashboardModel {
|
||||
@@ -100,10 +67,6 @@ export class value1{
|
||||
|
||||
|
||||
export const WidgetsMock: WidgetModel[] = [
|
||||
{
|
||||
name: 'Common Filter',
|
||||
identifier: 'common_filter'
|
||||
},
|
||||
{
|
||||
name: 'Radar Chart',
|
||||
identifier: 'radar_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">
|
||||
<!-- <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 }}
|
||||
</ng-container>
|
||||
<ng-template #defaultTitle>
|
||||
CloudnSure
|
||||
</ng-template>
|
||||
</h1>
|
||||
<p class="brand-subtitle">Enterprise Platform</p>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
</form>
|
||||
</div> -->
|
||||
|
||||
<!-- 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,642 +1,12 @@
|
||||
// ========================================
|
||||
// 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%);
|
||||
}
|
||||
|
||||
.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 {
|
||||
.tamplate1 {
|
||||
background-image: url(../../../../assets/images/new.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 60%;
|
||||
background-position: right center;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
}
|
||||
|
||||
.tamplate2 {
|
||||
.tamplate2 {
|
||||
background-image: url(../../../../assets/images/new.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 60%;
|
||||
@@ -645,9 +15,9 @@
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.signup {
|
||||
}
|
||||
.signup {
|
||||
cursor: pointer;
|
||||
}
|
||||
// color:#80b0ff;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
.subscribe(resp => {
|
||||
if (resp.user === undefined || resp.user.token === undefined || resp.user.token === "INVALID") {
|
||||
this.isError = true;
|
||||
this.errMsg = 'Invalid email or password';
|
||||
this.errMsg = 'Checking Email or password';
|
||||
return;
|
||||
}
|
||||
|
||||
// Success - navigate to landing page
|
||||
console.log('Login successful, navigating to:', resp.landingPage);
|
||||
this.router.navigate([resp.landingPage]);
|
||||
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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
@@ -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 {
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
.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);
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
@@ -153,12 +111,10 @@ export class MenuaccesscontrolComponent implements OnInit {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
modaladd() {
|
||||
this.modalAdd = true;
|
||||
this.getdata();
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
this.modalAdd = false;
|
||||
this.entryForm.value.grpid = this.usergrpid;
|
||||
@@ -182,20 +138,18 @@ export class MenuaccesscontrolComponent implements OnInit {
|
||||
}
|
||||
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,7 +239,6 @@ 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 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>
|
||||
|
||||
<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 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>
|
||||
<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 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="btn btn-sm" [class.btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
|
||||
<clr-icon shape="table"></clr-icon>
|
||||
<button id="add" class="btn btn-primary" (click)="goToAdd()">
|
||||
<clr-icon shape="plus"></clr-icon> {{ 'ADD' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -187,81 +144,62 @@
|
||||
|
||||
</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}}
|
||||
@@ -269,49 +207,22 @@
|
||||
</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-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 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-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 class="mm-icon-action" clrSignpostTrigger><clr-icon shape="help"
|
||||
class="mm-icon-help"></clr-icon></span>
|
||||
<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>
|
||||
@@ -327,16 +238,17 @@
|
||||
<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 *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-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}}
|
||||
@@ -344,37 +256,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 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()">
|
||||
@@ -391,28 +274,24 @@
|
||||
<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 *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 *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 *ngIf="submitted && entryForm.controls.itemSeq.errors.pattern" class="error_mess">*Required Only Number</div>
|
||||
</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.moduleName.errors.required" class="error_mess">*This field is Required</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-col-sm-12">
|
||||
@@ -422,16 +301,14 @@
|
||||
<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 *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 *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
|
||||
@@ -476,35 +353,34 @@
|
||||
<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 *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>
|
||||
</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>
|
||||
@@ -536,19 +412,17 @@
|
||||
</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">
|
||||
<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">
|
||||
<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>
|
||||
<button type="submit" class="btn btn-primary" >Update</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -556,14 +430,12 @@
|
||||
</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>
|
||||
</div>
|
||||
</clr-modal>
|
||||
</div>
|
||||
@@ -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>
|
||||
</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>
|
||||
<button class="btn btn-sm" [class.btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
|
||||
<clr-icon shape="table"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
</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,71 +1,47 @@
|
||||
<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 class="dg-wrapper">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col">
|
||||
<h3>{{'USER_GROUP_MAINTENANCE' | translate}}</h3>
|
||||
</div>
|
||||
</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 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>
|
||||
</section>
|
||||
|
||||
<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 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="ug-btn ug-btn-sm" [class.ug-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>
|
||||
</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-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}}
|
||||
@@ -92,32 +68,19 @@
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-row *clrDgItems="let user of filteredGroups;let i = index" [clrDgItem]="user">
|
||||
<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.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.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="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>
|
||||
|
||||
<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>
|
||||
@@ -126,195 +89,136 @@
|
||||
<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-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>
|
||||
</div>
|
||||
</div>
|
||||
</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 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>
|
||||
|
||||
<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 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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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.status.errors" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls.status.errors.required">*This field is Required</div>
|
||||
<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 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>
|
||||
<button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" >ADD</button>
|
||||
</div>
|
||||
</form>
|
||||
</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>
|
||||
<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="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 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="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">
|
||||
<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>
|
||||
<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 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>
|
||||
|
||||
<br>
|
||||
<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>
|
||||
<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;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
.error_mess {
|
||||
color: red;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,108 +1,80 @@
|
||||
<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 class="dg-wrapper">
|
||||
<div class="clr-row">
|
||||
<div class="clr-col">
|
||||
<h3>{{'USER_MAINTENANCE'| translate}} </h3>
|
||||
</div>
|
||||
</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>
|
||||
</button>
|
||||
<button class="um-btn um-btn-sm" [class.um-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
|
||||
<clr-icon shape="table"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
<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 ... </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' | 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-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 filteredUsers;let i = index" [clrDgItem]="user">
|
||||
|
||||
|
||||
<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.fullName}}</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="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>
|
||||
|
||||
<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>
|
||||
@@ -111,92 +83,42 @@
|
||||
<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-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>
|
||||
</clr-datagrid>
|
||||
</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>
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,169 +1,204 @@
|
||||
<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 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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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 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-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 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 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-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 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-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>
|
||||
<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="um-error-message">
|
||||
<div *ngIf="submitted && entryForm.controls.usrGrpId.errors.required">*This field is Required</div>
|
||||
<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 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>
|
||||
</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="um-error-message">
|
||||
<div *ngIf="submitted && entryForm.controls.accesstype.errors.required">*This field is Required</div>
|
||||
</div>
|
||||
<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 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>
|
||||
<!-- <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>
|
||||
</div>
|
||||
|
||||
<!-- Customer Modal -->
|
||||
<clr-modal [(clrModalOpen)]="customer" [clrModalSize]="'lg'">
|
||||
<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-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">
|
||||
<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}">
|
||||
<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}">
|
||||
</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}">
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerCode'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Customer Id
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
<clr-dg-column [clrDgField]="'customerName'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Customer Name
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
</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 (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-title">NO</td>
|
||||
<td class="td-content">{{user.id}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title">Customer Code</td>
|
||||
<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>
|
||||
<td class="td-content">{{user.customerId}} </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title">Customer Name</td>
|
||||
<td class="td-title"> Customer Name<td>
|
||||
<td class="td-content">{{user.customerName}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -179,41 +214,38 @@
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</clr-modal>
|
||||
</clr-modal>
|
||||
|
||||
<!-- Department Modal -->
|
||||
<clr-modal [(clrModalOpen)]="department" [clrModalSize]="'lg'">
|
||||
<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">
|
||||
<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}">
|
||||
<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}">
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Department Code
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
</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)" class="um-clickable-cell">{{user.departmentCode}}</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-title">NO</td>
|
||||
<td class="td-content">{{user.id}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -228,42 +260,43 @@
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
<!-- Position Modal -->
|
||||
<clr-modal [(clrModalOpen)]="position" [clrModalSize]="'lg'">
|
||||
|
||||
|
||||
|
||||
</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="um-form-input">
|
||||
<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}">
|
||||
<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}">
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Position Code
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
</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-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-title">NO</td>
|
||||
<td class="td-content">{{user.id}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -278,5 +311,9 @@
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</clr-modal>
|
||||
</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,62 +12,50 @@ 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]],
|
||||
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] ,
|
||||
@@ -96,29 +81,22 @@ export class UsermaintanceaddComponent 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) => {
|
||||
},(error) => {
|
||||
console.log(error);
|
||||
if (error) {
|
||||
this.error = "Server Error";
|
||||
if(error){
|
||||
this.error="Server Error";
|
||||
}
|
||||
})
|
||||
}
|
||||
usergrp() {
|
||||
usergrp(){
|
||||
this.usergrpservice.getAll().subscribe((data) => {
|
||||
console.log(data);
|
||||
this.usergrpdata = data;
|
||||
@@ -142,8 +120,8 @@ export class UsermaintanceaddComponent implements OnInit {
|
||||
|
||||
// });
|
||||
//}
|
||||
onSubmit() {
|
||||
this.submitted = true
|
||||
onSubmit(){
|
||||
this.submitted=true
|
||||
if (this.entryForm.invalid) {
|
||||
return;
|
||||
}
|
||||
@@ -158,53 +136,53 @@ export class UsermaintanceaddComponent implements OnInit {
|
||||
this.router.navigate(["../usermaintance"], { relativeTo: this.route });
|
||||
}
|
||||
|
||||
goback() {
|
||||
goback(){
|
||||
this.router.navigate(["../usermaintance"], { relativeTo: this.route });
|
||||
}
|
||||
gotodepartmet() {
|
||||
this.department = !this.department;
|
||||
this.mainservice.getalldepartment().subscribe((data) => {
|
||||
}
|
||||
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.deptiddata= data;
|
||||
// this.userObj= this.custiddata;
|
||||
this.userobjdept = this.deptiddata;
|
||||
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.posiddata= data;
|
||||
// this.userObj= this.custiddata;
|
||||
this.userobjpos = this.posiddata;
|
||||
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];
|
||||
|
||||
@@ -1,136 +1,234 @@
|
||||
<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>
|
||||
|
||||
<div class="um-edit-container">
|
||||
<div class="um-form-card">
|
||||
<form *ngIf="data1" (ngSubmit)="update()" class="um-form">
|
||||
<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-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 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="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 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-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 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-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 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-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 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-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>
|
||||
<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-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>
|
||||
<!-- <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>
|
||||
<!-- <div class="clr-row">
|
||||
|
||||
|
||||
<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="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 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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Customer Modal -->
|
||||
<clr-modal [(clrModalOpen)]="customer" [clrModalSize]="'lg'">
|
||||
<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-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">
|
||||
<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}">
|
||||
<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}">
|
||||
</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}">
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerCode'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Customer Id
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
<clr-dg-column [clrDgField]="'customerName'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Customer Name
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
</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 (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-title">NO</td>
|
||||
<td class="td-content">{{user.id}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title">Customer Code</td>
|
||||
<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>
|
||||
<td class="td-content">{{user.customerId}} </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title">Customer Name</td>
|
||||
<td class="td-title"> Customer Name<td>
|
||||
<td class="td-content">{{user.customerName}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -146,41 +244,38 @@
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</clr-modal>
|
||||
</clr-modal>
|
||||
|
||||
<!-- Department Modal -->
|
||||
<clr-modal [(clrModalOpen)]="department" [clrModalSize]="'lg'">
|
||||
<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">
|
||||
<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}">
|
||||
<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}">
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Department Code
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
</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)" class="um-clickable-cell">{{user.departmentCode}}</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-title">NO</td>
|
||||
<td class="td-content">{{user.id}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -195,42 +290,42 @@
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
<!-- Position Modal -->
|
||||
<clr-modal [(clrModalOpen)]="position" [clrModalSize]="'lg'">
|
||||
|
||||
|
||||
|
||||
</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="um-form-input">
|
||||
<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}">
|
||||
<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}">
|
||||
</ng-container></clr-dg-column>
|
||||
<clr-dg-column [clrDgField]="'customerId'"> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Position Code
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
</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-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-title">NO</td>
|
||||
<td class="td-content">{{user.id}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -245,5 +340,9 @@
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</clr-modal>
|
||||
</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) => {
|
||||
},(error) => {
|
||||
console.log(error);
|
||||
if (error) {
|
||||
this.error = "Server 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;
|
||||
getById(id:number){
|
||||
this.mainservice.getbyid(id).subscribe((data)=>{
|
||||
this.data1=data;
|
||||
// this.data1=this.data3;
|
||||
console.log(this.data1);
|
||||
});
|
||||
}
|
||||
update() {
|
||||
});
|
||||
}
|
||||
update(){
|
||||
console.log(this.data1);
|
||||
this.mainservice.updatenew(this.id, this.data1).subscribe((data) => {
|
||||
console.log(data);
|
||||
this.mainservice.updatenew(this.id,this.data1).subscribe((data)=>{
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
}
|
||||
goback() {
|
||||
}
|
||||
goback(){
|
||||
this.router.navigate(["../../usermaintance"], { relativeTo: this.route });
|
||||
}
|
||||
gotodepartmet() {
|
||||
this.department = !this.department;
|
||||
this.mainservice.getalldepartment().subscribe((data) => {
|
||||
}
|
||||
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.deptiddata= data;
|
||||
// this.userObj= this.custiddata;
|
||||
this.userobjdept = this.deptiddata;
|
||||
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.posiddata= data;
|
||||
// this.userObj= this.custiddata;
|
||||
this.userobjpos = this.posiddata;
|
||||
this.userobjpos =this.posiddata;
|
||||
|
||||
|
||||
});
|
||||
this.position = false;
|
||||
this.position=false;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
<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>
|
||||
<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 class="sq-btn sq-btn-sm" [class.sq-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
|
||||
<clr-icon shape="table"></clr-icon>
|
||||
<button id="add" class="btn btn-primary" (click)="goToAdd()">
|
||||
<clr-icon shape="plus"></clr-icon>{{ 'ADD' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<clr-datagrid class="sq-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'" [(clrDgSelected)]="selected">
|
||||
<clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected">
|
||||
<clr-dg-placeholder>
|
||||
<ng-template #loadingSpinner>
|
||||
<clr-spinner>{{ 'LOADING' | translate }} ... </clr-spinner>
|
||||
<clr-spinner>Loading ... </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">
|
||||
<clr-dg-column [clrDgField]="'seq_no'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="sq-col-title">
|
||||
<clr-icon shape="hashtag"></clr-icon> {{ 'CURRENT_NO' | translate }}
|
||||
</span>
|
||||
{{ '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-dg-column [clrDgField]="'sequence_name'" class="sq-col sq-col--name">
|
||||
<clr-dg-column [clrDgField]="'seperator'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="sq-col-title">
|
||||
<clr-icon shape="tag"></clr-icon> {{ 'NAME' | translate }}
|
||||
</span>
|
||||
{{ 'SEPARATOR' | translate }}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-column [clrDgField]="'prefix'" class="sq-col sq-col--prefix">
|
||||
<clr-dg-column [clrDgField]="'digit'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="sq-col-title">
|
||||
<clr-icon shape="text"></clr-icon> {{ 'PREFIX' | translate }}
|
||||
</span>
|
||||
{{ 'SEQUENCE_SIZE' | translate }}
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<clr-dg-column [clrDgField]="'seperator'" class="sq-col sq-col--separator">
|
||||
<!-- <clr-dg-column [clrDgField]="'date_format'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<span class="sq-col-title">
|
||||
<clr-icon shape="split-string"></clr-icon> {{ 'SEPARATOR' | translate }}
|
||||
</span>
|
||||
Date Format
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
<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-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.suffix}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.starting_no}}</clr-dg-cell>
|
||||
<clr-dg-cell>{{user.sequence_code}}</clr-dg-cell>
|
||||
<!-- <clr-dg-cell>{{user.date_format}}</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>
|
||||
<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-row>
|
||||
|
||||
<clr-dg-footer class="sq-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>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
{{ 'OF' | translate }} {{pagination.totalItems}} {{ 'RECORDS' | translate }}
|
||||
<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 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>
|
||||
</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>
|
||||
</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 [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
|
||||
<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 }}
|
||||
</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 }}
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
</clr-modal>
|
||||
|
||||
<form (ngSubmit)="onUpdate(rowSelected.id)" class="sq-form">
|
||||
|
||||
<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-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 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-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 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-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 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 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>
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</clr-modal>
|
||||
|
||||
<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>
|
||||
|
||||
</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%);
|
||||
.td-title {
|
||||
text-align: center;
|
||||
width: 150px;
|
||||
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);
|
||||
}
|
||||
}
|
||||
font-weight: bold;
|
||||
background-color: rgba(63, 122, 231, 0.863);
|
||||
//color: rgb(24, 13, 13);
|
||||
}
|
||||
|
||||
// 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;
|
||||
th {
|
||||
//background-color:rgb(170, 169, 169);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.td-content {
|
||||
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 {
|
||||
.delete,
|
||||
.heading {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
color: red;
|
||||
}
|
||||
|
||||
.sq-delete-icon {
|
||||
color: var(--theme-error, #ef4444);
|
||||
margin-bottom: 16px;
|
||||
.section p {
|
||||
background-color: rgb(206, 201, 201);
|
||||
padding: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.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;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
select {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.sq-toolbar {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.sq-search {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sq-stats {
|
||||
flex-direction: column;
|
||||
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;
|
||||
}
|
||||
@@ -1,13 +1,11 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { SequenceService } from 'src/app/services/api/sequence.service';
|
||||
import { ExcelService } from 'src/app/services/excel.service';
|
||||
import * as moment from 'moment';
|
||||
import { HttpErrorResponse } from '@angular/common/http';
|
||||
import { ThemeService } from 'src/app/services/theme.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sequencegenarator',
|
||||
templateUrl: './sequencegenarator.component.html',
|
||||
@@ -24,70 +22,27 @@ export class SequencegenaratorComponent implements OnInit {
|
||||
modaladd = false;
|
||||
modaledit = false;
|
||||
submitted = false;
|
||||
filterText = '';
|
||||
// Changed default view to cards
|
||||
viewMode: 'table' | 'cards' = 'cards';
|
||||
|
||||
public entryForm: FormGroup;
|
||||
|
||||
constructor(
|
||||
private seqservice: SequenceService,
|
||||
private router: Router,
|
||||
private toastr: ToastrService,
|
||||
private _fb: FormBuilder,
|
||||
private route: ActivatedRoute,
|
||||
private excel: ExcelService,
|
||||
private themeService: ThemeService
|
||||
) { }
|
||||
constructor(private seqservice: SequenceService, private router: Router, private toastr: ToastrService, private _fb: FormBuilder,
|
||||
private route: ActivatedRoute, private excel: ExcelService) { }
|
||||
|
||||
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.getall();
|
||||
this.entryForm = this._fb.group({
|
||||
prefix: [null, Validators.required],
|
||||
prefix: [null],
|
||||
sequence_size: [null],
|
||||
suffix: [null],
|
||||
starting_no: [null],
|
||||
seperator: [null],
|
||||
sequence_name: [null, Validators.required],
|
||||
|
||||
sequence_name: [null],
|
||||
sequence_code: [null],
|
||||
demonstration: [null],
|
||||
|
||||
current_no: [null]
|
||||
});
|
||||
}
|
||||
|
||||
// Stats & filtering helpers for UI only
|
||||
get totalSequences(): number {
|
||||
return ((this.alldata as unknown as any[]) || []).length;
|
||||
}
|
||||
|
||||
get filteredSequences(): any[] {
|
||||
const items: any[] = (this.alldata as unknown as any[]) || [];
|
||||
const text = (this.filterText || '').toLowerCase();
|
||||
if (!text) { return items; }
|
||||
|
||||
// Search across all relevant fields
|
||||
return items.filter(s => (
|
||||
(s?.sequence_name || '').toLowerCase().includes(text) ||
|
||||
(s?.prefix || '').toLowerCase().includes(text) ||
|
||||
(s?.sequence_code || '').toLowerCase().includes(text) ||
|
||||
(s?.suffix || '').toLowerCase().includes(text) ||
|
||||
(s?.seperator || '').toLowerCase().includes(text) ||
|
||||
(s?.sequence_size?.toString() || '').includes(text) ||
|
||||
(s?.starting_no?.toString() || '').includes(text) ||
|
||||
(s?.current_no?.toString() || '').includes(text) ||
|
||||
(s?.demonstration || '').toLowerCase().includes(text)
|
||||
));
|
||||
}
|
||||
|
||||
setViewMode(mode: 'table' | 'cards') {
|
||||
this.viewMode = mode;
|
||||
}
|
||||
|
||||
getall() {
|
||||
this.seqservice.getAll().subscribe((data) => {
|
||||
console.log(data);
|
||||
@@ -102,8 +57,27 @@ export class SequencegenaratorComponent implements OnInit {
|
||||
if (error) {
|
||||
this.error = "No data Available OR server Error";
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
// onSubmit(){
|
||||
// console.log(this.entryForm.value);
|
||||
// this.seqservice.create(this.entryForm.value).subscribe((data)=>{
|
||||
// console.log(data);
|
||||
// if (data) {
|
||||
// this.toastr.success('Added successfully');
|
||||
// }
|
||||
// },
|
||||
// (error) => {
|
||||
// console.log('Error in adding data...',+error);
|
||||
// if(error){
|
||||
// this.toastr.error('Not added Data');
|
||||
// }
|
||||
|
||||
// });
|
||||
// this.modaladd=false;
|
||||
// }
|
||||
|
||||
|
||||
onSubmit() {
|
||||
console.log(this.entryForm.value);
|
||||
@@ -112,8 +86,10 @@ export class SequencegenaratorComponent implements OnInit {
|
||||
return
|
||||
}
|
||||
this.onCreate();
|
||||
|
||||
}
|
||||
|
||||
|
||||
onCreate() {
|
||||
this.modaladd = false;
|
||||
this.seqservice.create(this.entryForm.value).subscribe(
|
||||
@@ -139,24 +115,22 @@ export class SequencegenaratorComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
goToAdd() {
|
||||
this.modaladd = true;
|
||||
this.submitted = false;
|
||||
// Reset form
|
||||
this.entryForm.reset();
|
||||
|
||||
}
|
||||
|
||||
onExport() {
|
||||
this.excel.exportAsExcelFile(this.alldata, 'sequence_',
|
||||
this.excel.exportAsExcelFile(this.alldata, 'user_',
|
||||
moment().format('YYYYMMDD_HHmmss'))
|
||||
}
|
||||
|
||||
goToEdit(row) {
|
||||
this.rowSelected = { ...row }; // Create a copy to avoid direct binding issues
|
||||
this.rowSelected = row;
|
||||
console.log(row)
|
||||
this.modaledit = true;
|
||||
}
|
||||
|
||||
onDelete(row) {
|
||||
this.rowSelected = row;
|
||||
this.modaldelete = true;
|
||||
@@ -187,8 +161,8 @@ export class SequencegenaratorComponent implements OnInit {
|
||||
this.ngOnInit();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
onUpdate(id) {
|
||||
this.modaledit = false;
|
||||
this.seqservice.update(id, this.rowSelected).subscribe((data) => {
|
||||
|
||||
@@ -1,74 +1,38 @@
|
||||
<clr-main-container class="modern-layout">
|
||||
<clr-header class="header-5 modern-header">
|
||||
<div class="branding modern-branding">
|
||||
<a href="javascript://" class="nav-link modern-nav-link">
|
||||
<div class="logo-container">
|
||||
<div class="logo-wrapper">
|
||||
<img class="logo-img" src="assets/images/icon/micrologo.png" alt="Logo" height="40" width="40">
|
||||
<div class="logo-glow"></div>
|
||||
<clr-main-container>
|
||||
<clr-header class="header-5">
|
||||
<div class="branding">
|
||||
<a href="javascript://" class="nav-link">
|
||||
<a href="#" class="logo">
|
||||
<img class="img" src="assets/images/icon/micrologo.png" alt="" height="50" width="50">
|
||||
</a>
|
||||
<div style="width:40px;margin-right:10px;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-text">
|
||||
<ng-container *ngIf="sysparameter?.company_Display_Name !== null; else OPtitle">
|
||||
<span class="company-title">{{ sysparameter?.company_Display_Name }}</span>
|
||||
<span class="company-subtitle">Enterprise Platform</span>
|
||||
<span class="title">{{ sysparameter?.company_Display_Name }}</span>
|
||||
</ng-container>
|
||||
<ng-template #OPtitle>
|
||||
<span class="company-title">CloudnSure</span>
|
||||
<span class="company-subtitle">Enterprise Platform</span>
|
||||
<span class="title">CloudnSure</span>
|
||||
</ng-template>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="header-nav modern-header-nav" [clr-nav-level]="1">
|
||||
<a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
|
||||
routerLink="/cns-portal/dashboard" (click)="loadMenuByMenuGroup()">
|
||||
<div class="nav-icon-wrapper">
|
||||
<div class="header-nav" [clr-nav-level]="1">
|
||||
<a href="javascript://" id="icon" class=" nav-link nav-icon" routerLinkActive="active" routerLink="/cns-portal/dashboard" (click)="loadMenuByMenuGroup()">
|
||||
<clr-icon shape="home"></clr-icon>
|
||||
<span class="nav-tooltip">Home</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
|
||||
routerLink="/cns-portal/dashboardrunner">
|
||||
<div class="nav-icon-wrapper">
|
||||
<a href="javascript://" id="icon" class=" nav-link nav-icon" routerLinkActive="active" routerLink="/cns-portal/dashboardrunner" >
|
||||
<clr-icon shape="grid-view" solid></clr-icon>
|
||||
<span class="nav-tooltip">Dashboard</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
|
||||
routerLink="/cns-portal/shield-dashboard">
|
||||
<div class="nav-icon-wrapper">
|
||||
<clr-icon shape="shield" solid></clr-icon>
|
||||
<span class="nav-tooltip">Shield Dashboard</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
|
||||
routerLink="/cns-portal/rerunner/all" (click)="getName()">
|
||||
<div class="nav-icon-wrapper">
|
||||
<a href="javascript://" id="icon" class=" nav-link nav-icon" routerLinkActive="active" routerLink="/cns-portal/rerunner/all" (click)="getName()">
|
||||
<clr-icon shape="file-group" solid="true"></clr-icon>
|
||||
<span class="nav-tooltip">Reports</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
|
||||
routerLink="/cns-portal/setupicon" (click)="toggleSetupMenus()">
|
||||
<div class="nav-icon-wrapper">
|
||||
<a href="javascript://" id="icon" class=" nav-link nav-icon" routerLinkActive="active" routerLink="/cns-portal/setupicon" (click)="toggleSetupMenus()">
|
||||
<clr-icon shape="cog" solid="true"></clr-icon>
|
||||
<span class="nav-tooltip">Settings</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
|
||||
routerLink="/cns-portal/theme-customization">
|
||||
<div class="nav-icon-wrapper">
|
||||
<clr-icon shape="palette" solid="true"></clr-icon>
|
||||
<span class="nav-tooltip">Theme Customization</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -78,149 +42,94 @@
|
||||
|
||||
|
||||
|
||||
<div class="header-actions modern-header-actions">
|
||||
<clr-dropdown class="modern-user-dropdown">
|
||||
<button class="modern-user-button" clrDropdownTrigger>
|
||||
<div class="user-avatar">
|
||||
<div class="avatar-circle">
|
||||
<clr-icon shape="user"></clr-icon>
|
||||
</div>
|
||||
<div class="user-status-indicator"></div>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<span class="user-name">{{userName}}</span>
|
||||
<span class="user-role">Administrator</span>
|
||||
</div>
|
||||
<clr-icon shape="caret down" class="dropdown-arrow"></clr-icon>
|
||||
<div class="header-actions">
|
||||
<!-- <span (click)="restartTour()" style="display: flex;align-items: center;margin-right: 20px;">
|
||||
<clr-icon shape="play"></clr-icon>
|
||||
</span> -->
|
||||
<clr-dropdown>
|
||||
<button class="nav-text demo-title" clrDropdownTrigger>
|
||||
<clr-icon shape="user"></clr-icon><label style="line-height: 60px; cursor: pointer;"> {{userName}}</label>
|
||||
<clr-icon shape="caret down"></clr-icon>
|
||||
</button>
|
||||
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right" class="modern-dropdown-menu">
|
||||
<div class="dropdown-header">
|
||||
<div class="user-profile">
|
||||
<div class="profile-avatar">
|
||||
<clr-icon shape="user"></clr-icon>
|
||||
</div>
|
||||
<div class="profile-info">
|
||||
<span class="profile-name">{{userName}}</span>
|
||||
<span class="profile-email">admin@cloudnsure.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
|
||||
<a href="javascript://" clrDropdownItem routerLink="/cns-portal/about">About</a>
|
||||
<a href="javascript://" clrDropdownItem routerLink="profile-settings">Profile Settings</a>
|
||||
|
||||
<div class="dropdown-divider"></div>
|
||||
|
||||
<a href="javascript://" clrDropdownItem routerLink="/cns-portal/about" class="modern-dropdown-item">
|
||||
<clr-icon shape="info-circle"></clr-icon>
|
||||
<span>About</span>
|
||||
</a>
|
||||
<a href="javascript://" clrDropdownItem routerLink="profile-settings" class="modern-dropdown-item">
|
||||
<clr-icon shape="cog"></clr-icon>
|
||||
<span>Profile Settings</span>
|
||||
</a>
|
||||
|
||||
<div class="dropdown-divider"></div>
|
||||
|
||||
<!-- Language Dropdown Section -->
|
||||
<clr-dropdown class="sub-dropdown modern-language-dropdown">
|
||||
<button clrDropdownTrigger class="modern-language-button">
|
||||
<clr-icon shape="language" class="language-icon"></clr-icon>
|
||||
<span>{{ 'Choose language' | translate }}</span>
|
||||
<clr-icon shape="caret down" class="dropdown-arrow"></clr-icon>
|
||||
<clr-dropdown class="sub-dropdown">
|
||||
<button clrDropdownTrigger style="display: flex; align-items: center; padding: 8px; width: 100%; background: none; border: none; cursor: pointer;">
|
||||
<clr-icon shape="language" class="language-icon" style="margin-right: 5px;"></clr-icon>
|
||||
<label style="margin: 0;">{{ 'Choose language' | translate }}</label>
|
||||
<clr-icon shape="caret down" style="margin-left: auto;"></clr-icon>
|
||||
</button>
|
||||
<clr-dropdown-menu *clrIfOpen clrPosition="right" class="modern-language-menu">
|
||||
<a href="javascript://" clrDropdownItem (click)="switchLanguage('en')" class="modern-lang-item">
|
||||
<clr-icon shape="globe" class="lang-icon"></clr-icon>
|
||||
<span>English</span>
|
||||
<div class="lang-flag">🇺🇸</div>
|
||||
<clr-dropdown-menu *clrIfOpen clrPosition="right">
|
||||
<a href="javascript://" clrDropdownItem (click)="switchLanguage('en')" class="lang-item" style="display: flex; align-items: center; padding: 8px 12px;">
|
||||
<clr-icon shape="globe" class="lang-icon"></clr-icon> English
|
||||
</a>
|
||||
<a href="javascript://" clrDropdownItem (click)="switchLanguage('hi')" class="modern-lang-item">
|
||||
<clr-icon shape="globe" class="lang-icon"></clr-icon>
|
||||
<span>हिन्दी</span>
|
||||
<div class="lang-flag">🇮🇳</div>
|
||||
<a href="javascript://" clrDropdownItem (click)="switchLanguage('hi')" class="lang-item" style="display: flex; align-items: center; padding: 8px 12px;">
|
||||
<clr-icon shape="globe" class="lang-icon"></clr-icon> Hindi
|
||||
</a>
|
||||
<a href="javascript://" clrDropdownItem (click)="switchLanguage('ta')" class="modern-lang-item">
|
||||
<clr-icon shape="globe" class="lang-icon"></clr-icon>
|
||||
<span>தமிழ்</span>
|
||||
<div class="lang-flag">🇮🇳</div>
|
||||
<a href="javascript://" clrDropdownItem (click)="switchLanguage('ta')" class="lang-item" style="display: flex; align-items: center; padding: 8px 12px;">
|
||||
<clr-icon shape="globe" class="lang-icon"></clr-icon> Tamil
|
||||
</a>
|
||||
<a href="javascript://" clrDropdownItem (click)="switchLanguage('pa')" class="modern-lang-item">
|
||||
<clr-icon shape="globe" class="lang-icon"></clr-icon>
|
||||
<span>ਪੰਜਾਬੀ</span>
|
||||
<div class="lang-flag">🇮🇳</div>
|
||||
<a href="javascript://" clrDropdownItem (click)="switchLanguage('pa')" class="lang-item" style="display: flex; align-items: center; padding: 8px 12px;">
|
||||
<clr-icon shape="globe" class="lang-icon"></clr-icon> Punjabi
|
||||
</a>
|
||||
<a href="javascript://" clrDropdownItem (click)="switchLanguage('ml')" class="modern-lang-item">
|
||||
<clr-icon shape="globe" class="lang-icon"></clr-icon>
|
||||
<span>മലയാളം</span>
|
||||
<div class="lang-flag">🇮🇳</div>
|
||||
<a href="javascript://" clrDropdownItem (click)="switchLanguage('ml')" class="lang-item" style="display: flex; align-items: center; padding: 8px 12px;">
|
||||
<clr-icon shape="globe" class="lang-icon"></clr-icon> Malayalam
|
||||
</a>
|
||||
</clr-dropdown-menu>
|
||||
</clr-dropdown>
|
||||
<!-- <a href="javascript://" clrDropdownItem routerLink="myworkspace">My Workspaces</a> -->
|
||||
<a href="javascript://" clrDropdownItem routerLink="/cns-portal/passwordreset">Change Password</a>
|
||||
<a href="javascript://" clrDropdownItem (click)="onLogout()">Log out</a>
|
||||
|
||||
<div class="dropdown-divider"></div>
|
||||
|
||||
<a href="javascript://" clrDropdownItem routerLink="/cns-portal/passwordreset" class="modern-dropdown-item">
|
||||
<clr-icon shape="key"></clr-icon>
|
||||
<span>Change Password</span>
|
||||
</a>
|
||||
<a href="javascript://" clrDropdownItem (click)="onLogout()" class="modern-dropdown-item logout-item">
|
||||
<clr-icon shape="logout"></clr-icon>
|
||||
<span>Log out</span>
|
||||
</a>
|
||||
</clr-dropdown-menu>
|
||||
</clr-dropdown>
|
||||
</div>
|
||||
</clr-header>
|
||||
|
||||
<div class="content-container modern-content-container">
|
||||
<main class="content-area modern-content-area">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-container">
|
||||
<main class="content-area">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<clr-vertical-nav class="modern-sidebar" [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapsed"
|
||||
[clr-nav-level]="2">
|
||||
<clr-vertical-nav [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapsed" [clr-nav-level]="2">
|
||||
|
||||
<!-- <clr-vertical-nav-group *ngIf="!showFolderNames && !showSetupMenus && !showDashNames" routerLinkActive="active">
|
||||
|
||||
|
||||
|
||||
</clr-vertical-nav-group> -->
|
||||
<div class="sidebar-content">
|
||||
<div *ngFor="let menu of menus" class="menu-item-wrapper">
|
||||
<div *ngFor="let menu of menus">
|
||||
<!-- NEED MODIFICATION-->
|
||||
<!-- <div *ngIf="menu.sub_menus.length >=1;then content else other_content"></div> -->
|
||||
<div *ngIf="menu.subMenus !== null && menu.subMenus?.length >=1;then content else other_content"></div>
|
||||
<ng-template #content>
|
||||
<!-- if sub menu is present -->
|
||||
<clr-vertical-nav-group routerLinkActive="active" class="modern-nav-group">
|
||||
<div class="nav-group-header">
|
||||
<clr-icon [attr.shape]="menu.main_menu_icon_name" clrVerticalNavIcon class="nav-group-icon"></clr-icon>
|
||||
<span class="nav-group-title">{{ menu.menuItemDesc }}</span>
|
||||
<clr-icon shape="angle" class="nav-group-arrow" [class.rotated]="false"></clr-icon>
|
||||
</div>
|
||||
<!-- if sub munu is present -->
|
||||
<clr-vertical-nav-group routerLinkActive="active"> <!--*ngIf="!showFolderNames && !showSetupMenus && !showDashNames" -->
|
||||
<clr-icon [attr.shape]="menu.main_menu_icon_name" clrVerticalNavIcon></clr-icon>
|
||||
{{ menu.menuItemDesc }}
|
||||
<!-- SUB NAV-->
|
||||
<clr-vertical-nav-group-children class="modern-nav-children">
|
||||
<ng-container *ngFor="let subnav of menu.subMenus">
|
||||
<a clrVerticalNavLink *ngIf="subnav.mvisible == 'true'" routerLinkActive="active"
|
||||
(click)="send(subnav)" class="modern-nav-link">
|
||||
<clr-icon [attr.shape]="subnav.mainMenuIconName || 'circle'" clrVerticalNavIcon
|
||||
class="nav-link-icon"></clr-icon>
|
||||
<span class="nav-link-text">{{ subnav.menuItemDesc }}</span>
|
||||
<clr-vertical-nav-group-children *ngFor="let subnav of menu.subMenus">
|
||||
<a clrVerticalNavLink *ngIf="subnav.mvisible == 'true'" routerLinkActive="active" (click)="send(subnav)">
|
||||
<!-- <clr-icon [attr.shape]="subnav.mainMenuIconName" clrVerticalNavIcon></clr-icon>'./' + subnav.main_menu_action_name (click)="send(subnav) [ngStyle]="subnav.mvisible == 'true' && { 'display': 'none' }"
|
||||
[routerLink]=subnav.mvisible == 'true' ? ['./' + subnav.main_menu_action_name] : []-->
|
||||
{{ subnav.menuItemDesc }}
|
||||
</a>
|
||||
</ng-container>
|
||||
</clr-vertical-nav-group-children>
|
||||
</clr-vertical-nav-group>
|
||||
<!-- </div> -->
|
||||
</ng-template>
|
||||
<ng-template #other_content>
|
||||
<!-- if sub menu is not present -->
|
||||
<a clrVerticalNavLink routerLinkActive="active" [routerLink]="'./'+ menu.main_menu_action_name"
|
||||
class="modern-nav-link-single">
|
||||
<clr-icon [attr.shape]="menu.main_menu_icon_name" clrVerticalNavIcon class="nav-link-icon"></clr-icon>
|
||||
<span class="nav-link-text">{{ menu.menuItemDesc }}</span>
|
||||
<a clrVerticalNavLink routerLinkActive="active" [routerLink]="'./'+ menu.main_menu_action_name">
|
||||
<clr-icon [attr.shape]="menu.main_menu_icon_name" clrVerticalNavIcon></clr-icon>
|
||||
{{ menu.menuItemDesc }}
|
||||
</a>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div *ngFor="let report of reportNames">
|
||||
<clr-vertical-nav-group *ngIf="showFolderNames && !showSetupMenus" routerLinkActive="active" routerLink="/cns-portal/rerunner/all">
|
||||
@@ -253,7 +162,7 @@
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
<!--
|
||||
<clr-vertical-nav-group *ngIf="showSetupMenus && !showDashNames && !showFolderNames" routerLinkActive="active">
|
||||
<clr-icon shape="cog" clrVerticalNavIcon class="project-visit-tour"></clr-icon>
|
||||
Setup
|
||||
@@ -306,7 +215,7 @@
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-md-6 clr-col-sm-12">
|
||||
<div class="clr-col-md-6 clr-col-sm-12" >
|
||||
<label>Name: </label>
|
||||
<input class="clr-input" type="text" name="name" placeholder="Enter name">
|
||||
</div>
|
||||
@@ -314,7 +223,7 @@
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="modalteam = false">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Add</button>
|
||||
<button type="submit" class="btn btn-primary" >Add</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,3 @@
|
||||
// ========================================
|
||||
// MODERN LAYOUT COMPONENT STYLES
|
||||
// ========================================
|
||||
|
||||
@import '../../../../styles/design-tokens';
|
||||
|
||||
// Legacy form styles (preserved for compatibility)
|
||||
input[type=text],[type=date], select,textarea {
|
||||
width: 100%;
|
||||
padding: 12px 20px;
|
||||
@@ -14,680 +7,6 @@ input[type=text],[type=date], select,textarea {
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
// Modern Layout Styles
|
||||
// ========================================
|
||||
|
||||
.modern-layout {
|
||||
background: linear-gradient(135deg, $gray-50 0%, $gray-100 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
// Header Styles
|
||||
// ========================================
|
||||
|
||||
.modern-header {
|
||||
background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
|
||||
backdrop-filter: $backdrop-blur-md;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: $shadow-lg;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: $z-sticky;
|
||||
height: $header-height;
|
||||
padding: 0 $space-6;
|
||||
}
|
||||
|
||||
.modern-branding {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-4;
|
||||
|
||||
.modern-nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-4;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: all $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: $gradient-primary;
|
||||
border-radius: $radius-xl;
|
||||
box-shadow: $shadow-md;
|
||||
transition: all $duration-300 $ease-out;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: $shadow-lg;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.logo-glow {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
background: $gradient-primary;
|
||||
border-radius: $radius-xl;
|
||||
opacity: 0;
|
||||
filter: blur(8px);
|
||||
transition: opacity $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
&:hover .logo-glow {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
.company-title {
|
||||
font-size: $text-xl;
|
||||
font-weight: $font-bold;
|
||||
color: $white;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.company-subtitle {
|
||||
font-size: $text-xs;
|
||||
font-weight: $font-medium;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Header Navigation
|
||||
// ========================================
|
||||
|
||||
.modern-header-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-2;
|
||||
margin-left: $space-8;
|
||||
|
||||
.modern-nav-icon {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: $radius-lg;
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-decoration: none;
|
||||
transition: all $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: $white;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: $white;
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
.nav-icon-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-tooltip {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: $gray-900;
|
||||
color: $white;
|
||||
padding: $space-2 $space-3;
|
||||
border-radius: $radius-md;
|
||||
font-size: $text-xs;
|
||||
font-weight: $font-medium;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all $duration-200 $ease-out;
|
||||
z-index: $z-tooltip;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 4px solid transparent;
|
||||
border-top-color: $gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .nav-tooltip {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Header Actions
|
||||
// ========================================
|
||||
|
||||
.modern-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-4;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.modern-user-dropdown {
|
||||
.modern-user-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-3;
|
||||
padding: $space-2 $space-4;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: $radius-xl;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
transition: all $duration-200 $ease-out;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-circle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $white;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
|
||||
.user-status-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: $accent-green;
|
||||
border: 2px solid $white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 2px;
|
||||
|
||||
.user-name {
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-semibold;
|
||||
color: $white;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.user-role {
|
||||
font-size: $text-xs;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-arrow {
|
||||
font-size: $text-xs;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
transition: transform $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
&:hover .dropdown-arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown Menu
|
||||
// ========================================
|
||||
|
||||
.modern-dropdown-menu {
|
||||
background: $white;
|
||||
border: 1px solid $gray-200;
|
||||
border-radius: $radius-xl;
|
||||
box-shadow: $shadow-xl;
|
||||
padding: $space-2;
|
||||
min-width: 280px;
|
||||
margin-top: $space-2;
|
||||
|
||||
.dropdown-header {
|
||||
padding: $space-4;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
margin-bottom: $space-2;
|
||||
|
||||
.user-profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-3;
|
||||
|
||||
.profile-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: $gradient-primary;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $white;
|
||||
font-size: $text-lg;
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
.profile-name {
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-semibold;
|
||||
color: $gray-900;
|
||||
}
|
||||
|
||||
.profile-email {
|
||||
font-size: $text-xs;
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
height: 1px;
|
||||
background: $gray-200;
|
||||
margin: $space-2 0;
|
||||
}
|
||||
|
||||
.modern-dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-3;
|
||||
padding: $space-3 $space-4;
|
||||
border-radius: $radius-lg;
|
||||
color: $gray-700;
|
||||
text-decoration: none;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
transition: all $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
background: $gray-50;
|
||||
color: $gray-900;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
&.logout-item {
|
||||
color: $accent-red;
|
||||
|
||||
&:hover {
|
||||
background: rgba($accent-red, 0.1);
|
||||
color: $accent-red;
|
||||
}
|
||||
}
|
||||
|
||||
clr-icon {
|
||||
font-size: $text-base;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Language Dropdown
|
||||
// ========================================
|
||||
|
||||
.modern-language-dropdown {
|
||||
.modern-language-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-3;
|
||||
padding: $space-3 $space-4;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: $gray-700;
|
||||
text-decoration: none;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
border-radius: $radius-lg;
|
||||
transition: all $duration-200 $ease-out;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $gray-50;
|
||||
color: $gray-900;
|
||||
}
|
||||
|
||||
.language-icon {
|
||||
font-size: $text-base;
|
||||
color: $primary-600;
|
||||
}
|
||||
|
||||
.dropdown-arrow {
|
||||
margin-left: auto;
|
||||
font-size: $text-xs;
|
||||
color: $gray-400;
|
||||
transition: transform $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
&:hover .dropdown-arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.modern-language-menu {
|
||||
background: $white;
|
||||
border: 1px solid $gray-200;
|
||||
border-radius: $radius-xl;
|
||||
box-shadow: $shadow-lg;
|
||||
padding: $space-2;
|
||||
min-width: 200px;
|
||||
margin-left: $space-2;
|
||||
|
||||
.modern-lang-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-3;
|
||||
padding: $space-3 $space-4;
|
||||
border-radius: $radius-lg;
|
||||
color: $gray-700;
|
||||
text-decoration: none;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
transition: all $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
background: $primary-50;
|
||||
color: $primary-700;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.lang-icon {
|
||||
font-size: $text-base;
|
||||
color: $primary-600;
|
||||
}
|
||||
|
||||
.lang-flag {
|
||||
margin-left: auto;
|
||||
font-size: $text-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Content Container
|
||||
// ========================================
|
||||
|
||||
.modern-content-container {
|
||||
display: flex;
|
||||
min-height: calc(100vh - #{$header-height});
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.modern-content-area {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
|
||||
.content-wrapper {
|
||||
padding: $space-6;
|
||||
min-height: calc(100vh - #{$header-height});
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar Styles
|
||||
// ========================================
|
||||
|
||||
.modern-sidebar {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
backdrop-filter: $backdrop-blur-md;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.05);
|
||||
box-shadow: $shadow-lg;
|
||||
width: $sidebar-width;
|
||||
transition: all $duration-300 $ease-out;
|
||||
|
||||
&.nav-collapsed {
|
||||
width: $sidebar-width-collapsed;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
padding: $space-4 0;
|
||||
}
|
||||
|
||||
.menu-item-wrapper {
|
||||
margin-bottom: $space-2;
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation Groups
|
||||
// ========================================
|
||||
|
||||
.modern-nav-group {
|
||||
margin-bottom: $space-2;
|
||||
|
||||
.nav-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-3;
|
||||
padding: $space-3 $space-4;
|
||||
color: $gray-700;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-semibold;
|
||||
cursor: pointer;
|
||||
border-radius: $radius-lg;
|
||||
margin: 0 $space-2;
|
||||
transition: all $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
background: $gray-50;
|
||||
color: $gray-900;
|
||||
}
|
||||
|
||||
.nav-group-icon {
|
||||
font-size: $text-lg;
|
||||
color: $primary-600;
|
||||
}
|
||||
|
||||
.nav-group-title {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav-group-arrow {
|
||||
font-size: $text-sm;
|
||||
color: $gray-400;
|
||||
transition: transform $duration-200 $ease-out;
|
||||
|
||||
&.rotated {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modern-nav-children {
|
||||
margin-top: $space-1;
|
||||
padding-left: $space-4;
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation Links
|
||||
// ========================================
|
||||
|
||||
.modern-nav-link,
|
||||
.modern-nav-link-single {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-3;
|
||||
padding: $space-3 $space-4;
|
||||
color: $gray-600;
|
||||
text-decoration: none;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
border-radius: $radius-lg;
|
||||
margin: 0 $space-2;
|
||||
transition: all $duration-200 $ease-out;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: $primary-50;
|
||||
color: $primary-700;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $primary-100;
|
||||
color: $primary-800;
|
||||
font-weight: $font-semibold;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
background: $primary-600;
|
||||
border-radius: 0 $radius-sm $radius-sm 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link-icon {
|
||||
font-size: $text-base;
|
||||
color: $gray-500;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-link-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&:hover .nav-link-icon {
|
||||
color: $primary-600;
|
||||
}
|
||||
|
||||
&.active .nav-link-icon {
|
||||
color: $primary-700;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive Design
|
||||
// ========================================
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
.modern-header {
|
||||
padding: 0 $space-4;
|
||||
}
|
||||
|
||||
.modern-header-nav {
|
||||
margin-left: $space-4;
|
||||
gap: $space-1;
|
||||
|
||||
.modern-nav-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.modern-content-area .content-wrapper {
|
||||
padding: $space-4;
|
||||
}
|
||||
|
||||
.modern-sidebar {
|
||||
width: $sidebar-width-collapsed;
|
||||
|
||||
.nav-group-title,
|
||||
.nav-link-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modern-nav-link,
|
||||
.modern-nav-link-single {
|
||||
justify-content: center;
|
||||
padding: $space-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
.modern-branding .brand-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modern-user-button .user-info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modern-header-nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Legacy styles (preserved for compatibility)
|
||||
// ========================================
|
||||
|
||||
.center-content {
|
||||
//width: 100%;
|
||||
// max-width: 800px;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
|
||||
import { Component, ViewEncapsulation, OnInit, Input } from '@angular/core';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { Component,ViewEncapsulation, OnInit, Input } from '@angular/core';
|
||||
import { Router,ActivatedRoute } from '@angular/router';
|
||||
import { LoginService } from '../../../services/api/login.service';
|
||||
import { UserInfoService } from '../../../services/user-info.service';
|
||||
import { UserInfoService} from '../../../services/user-info.service';
|
||||
import { RealnetMenuService } from '../../../services/api/realnet-menu.service';
|
||||
import { Rn_Main_Menu } from '../../../models/builder/Rn_Main_Menu';
|
||||
import { MenuGroupService } from '../../../services/admin/menu-group.service';
|
||||
@@ -20,7 +20,6 @@ import { ProjectSetup } from 'src/app/models/builder/Project_setup';
|
||||
import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
|
||||
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { ThemeService } from 'src/app/services/theme.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout',
|
||||
@@ -29,32 +28,31 @@ import { ThemeService } from 'src/app/services/theme.service';
|
||||
})
|
||||
export class LayoutComponent implements OnInit {
|
||||
// baseUrl= environment.chaturl;
|
||||
@Input() data: any;
|
||||
@Input() data:any;
|
||||
|
||||
loading = false;
|
||||
apps: Array<ProjectSetup> = [];
|
||||
projectsetup;
|
||||
|
||||
collapsed = true;
|
||||
public showAppAlert: boolean = false;
|
||||
modalteam = false;
|
||||
public userName: string = "";
|
||||
public showAppAlert:boolean = false;
|
||||
modalteam=false;
|
||||
public userName: string="";
|
||||
|
||||
private formCode: string = 'teacher_form';
|
||||
public key: string = "formCode";
|
||||
public storage: Storage = sessionStorage;
|
||||
private formCode: string ='teacher_form';
|
||||
public key:string="formCode";
|
||||
public storage:Storage = sessionStorage;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private userInfoService: UserInfoService,
|
||||
private userInfoService:UserInfoService,
|
||||
private realnetMenuService: RealnetMenuService,
|
||||
private menuGroupService: MenuGroupService,
|
||||
private sysparaservice: SysparameterService,
|
||||
private sysparaservice:SysparameterService,
|
||||
private reportBuilderService: ReportBuilderService,
|
||||
private dashboardService: Dashboard3Service,
|
||||
private dashboardService : Dashboard3Service,
|
||||
private translate: TranslateService,
|
||||
private themeService: ThemeService,
|
||||
// private guidedTourService: GuidedTourService,
|
||||
// private tourservice: TourService,
|
||||
private toastr: ToastrService,
|
||||
@@ -71,10 +69,10 @@ export class LayoutComponent implements OnInit {
|
||||
switchLanguage(language: string): void {
|
||||
this.translate.use(language); // Switch to the selected language
|
||||
}
|
||||
user_name: any;
|
||||
userrole: any;
|
||||
user_name : any;
|
||||
userrole:any;
|
||||
menus: Rn_Main_Menu[];
|
||||
menu: any;
|
||||
menu:any;
|
||||
tourdata;
|
||||
steps;
|
||||
error;
|
||||
@@ -82,47 +80,47 @@ export class LayoutComponent implements OnInit {
|
||||
this.storage.setItem(this.key, this.formCode);
|
||||
this.user_name = this.userInfoService.getUserName();
|
||||
console.log('user name: ' + this.user_name);
|
||||
this.userrole = this.userInfoService.getRoles();
|
||||
console.log('user_role', this.userrole);
|
||||
this.udata = this.userInfoService.getUserId();
|
||||
console.log('user id', this.udata);
|
||||
this.userrole=this.userInfoService.getRoles();
|
||||
console.log('user_role',this.userrole);
|
||||
this.udata=this.userInfoService.getUserId();
|
||||
console.log('user id',this.udata);
|
||||
this.loadMenuByAccountId();
|
||||
this.loadMenuByMenuGroup();
|
||||
this.getById(1);
|
||||
// this.tourservice.getall().subscribe((data)=>{
|
||||
// this.tourdata=data[1];
|
||||
// //console.log("tour data",data);
|
||||
// console.log(this.tourdata);
|
||||
// //console.log(this.tourdata.tourId);
|
||||
// //console.log(this.tourdata.useOrb);
|
||||
// //this.steps=JSON.stringify(this.tourdata.steps);
|
||||
// // console.log(this.tourdata.steps);
|
||||
// //this.dashboardTour.tourId=this.tourdata.tourId;
|
||||
// //console.log(this.dashboardTour.tourId);
|
||||
// //this.dashboardTour.useOrb=this.tourdata.useOrb;
|
||||
// // this.dashboardTour.steps=this.tourdata.steps;
|
||||
// });
|
||||
}
|
||||
// this.tourservice.getall().subscribe((data)=>{
|
||||
// this.tourdata=data[1];
|
||||
// //console.log("tour data",data);
|
||||
// console.log(this.tourdata);
|
||||
// //console.log(this.tourdata.tourId);
|
||||
// //console.log(this.tourdata.useOrb);
|
||||
// //this.steps=JSON.stringify(this.tourdata.steps);
|
||||
// // console.log(this.tourdata.steps);
|
||||
// //this.dashboardTour.tourId=this.tourdata.tourId;
|
||||
// //console.log(this.dashboardTour.tourId);
|
||||
// //this.dashboardTour.useOrb=this.tourdata.useOrb;
|
||||
// // this.dashboardTour.steps=this.tourdata.steps;
|
||||
// });
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
showFolderNames: boolean = false; // Variable to control the report names display
|
||||
reportNames: any[] = []; // Store the report names
|
||||
showFolderNames: boolean = false; // Variable to control the report names display
|
||||
reportNames: any[] = []; // Store the report names
|
||||
|
||||
// getName() {
|
||||
// this.reportBuilderService.getrbDetails().pipe(
|
||||
// map((data) => data.map((item) => item.folderName))
|
||||
// ).subscribe((reportName) => {
|
||||
// this.reportNames = reportName;
|
||||
// // this.showReportNames = true; // Toggle on
|
||||
// console.log('Report Names:', this.reportNames);
|
||||
// });
|
||||
// getName() {
|
||||
// this.reportBuilderService.getrbDetails().pipe(
|
||||
// map((data) => data.map((item) => item.folderName))
|
||||
// ).subscribe((reportName) => {
|
||||
// this.reportNames = reportName;
|
||||
// // this.showReportNames = true; // Toggle on
|
||||
// console.log('Report Names:', this.reportNames);
|
||||
// });
|
||||
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
getName() {
|
||||
getName() {
|
||||
if (this.showFolderNames) {
|
||||
// If in report mode, switch to default mode
|
||||
this.showFolderNames = false;
|
||||
@@ -137,18 +135,18 @@ export class LayoutComponent implements OnInit {
|
||||
this.showFolderNames = true;
|
||||
},);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
filteredGridData: any[] = [];
|
||||
gridData: any[] = [];
|
||||
// Function to filter the data based on the selected folder
|
||||
filterGridDataByFolder(folderName: string) {
|
||||
filteredGridData: any[] = [];
|
||||
gridData: any[] = [];
|
||||
// Function to filter the data based on the selected folder
|
||||
filterGridDataByFolder(folderName: string) {
|
||||
this.filteredGridData = this.gridData.filter(item => item.folderName === folderName);
|
||||
}
|
||||
}
|
||||
|
||||
showDashNames: boolean = false;
|
||||
dashNames: any[] = [];
|
||||
getDashName() {
|
||||
showDashNames: boolean = false;
|
||||
dashNames: any[] = [];
|
||||
getDashName() {
|
||||
if (this.showDashNames) {
|
||||
// If in report mode, switch to default mode
|
||||
this.showDashNames = false;
|
||||
@@ -164,7 +162,7 @@ export class LayoutComponent implements OnInit {
|
||||
this.showDashNames = true;
|
||||
},);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -172,11 +170,11 @@ export class LayoutComponent implements OnInit {
|
||||
|
||||
|
||||
|
||||
showSetupMenus: boolean = false;
|
||||
toggleSetupMenus() {
|
||||
showSetupMenus: boolean = false;
|
||||
toggleSetupMenus() {
|
||||
this.showSetupMenus = !this.showSetupMenus;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -185,74 +183,74 @@ export class LayoutComponent implements OnInit {
|
||||
|
||||
|
||||
|
||||
// side nav menu-sub_menu
|
||||
loadMenuByAccountId() {
|
||||
// side nav menu-sub_menu
|
||||
loadMenuByAccountId() {
|
||||
this.realnetMenuService.getByAccountId().subscribe(resp => {
|
||||
this.menus = resp;
|
||||
console.log('menu: ', this.menus);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
loadMenuByMenuGroup() {
|
||||
loadMenuByMenuGroup() {
|
||||
this.menuGroupService.getByCurrentUserMenuGroupId2().subscribe(resp => {
|
||||
this.menus = resp;
|
||||
console.log('menus: ', this.menus);
|
||||
}, (error) => {
|
||||
},(error) => {
|
||||
console.log(error);
|
||||
if (error) {
|
||||
this.error = "No data Available OR server Error";
|
||||
if(error){
|
||||
this.error="No data Available OR server Error";
|
||||
}
|
||||
if (error.status === 401) {
|
||||
// auto logout if 401 response returned from api
|
||||
// this.authenticationService.logout();
|
||||
this.toastr.error("Your Token Is Expire Plz login Again")
|
||||
//location.reload(true);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
sysparameter;
|
||||
getById(id: number) {
|
||||
}
|
||||
sysparameter;
|
||||
getById(id: number) {
|
||||
this.sysparaservice.getById(id).subscribe((data) => {
|
||||
this.sysparameter = data;
|
||||
console.log("getbyiddata", this.sysparameter);
|
||||
console.log("getbyiddata",this.sysparameter);
|
||||
},
|
||||
(err) => {
|
||||
console.log(err);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* menuGroup: Rn_Menu_Group_Header[];
|
||||
menu_id: number;
|
||||
loadMenuGroupData() {
|
||||
/* menuGroup: Rn_Menu_Group_Header[];
|
||||
menu_id: number;
|
||||
loadMenuGroupData() {
|
||||
this.menuGroupService.getAll().subscribe(resp => {
|
||||
this.menuGroup = resp;
|
||||
this.menu_id = this.menuGroup
|
||||
});
|
||||
} */
|
||||
} */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
navbarSelectionChange(val) {
|
||||
navbarSelectionChange(val){
|
||||
// console.log(val);
|
||||
}
|
||||
}
|
||||
|
||||
closeAppAlert() {
|
||||
this.showAppAlert = false;
|
||||
}
|
||||
closeAppAlert(){
|
||||
this.showAppAlert=false;
|
||||
}
|
||||
|
||||
isDisabled(input: string): boolean {
|
||||
if (input === null) {
|
||||
isDisabled(input: string): boolean{
|
||||
if(input === null) {
|
||||
return true;
|
||||
} else false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onLogout() {
|
||||
this.userInfoService.logout().subscribe((data) => {
|
||||
this.userInfoService.logout().subscribe((data)=>{
|
||||
console.log(data);
|
||||
});
|
||||
sessionStorage.clear();
|
||||
@@ -262,20 +260,20 @@ export class LayoutComponent implements OnInit {
|
||||
menuFlag1 = false;
|
||||
udata;
|
||||
uid;
|
||||
message() {
|
||||
message(){
|
||||
//this.menuFlag = false;
|
||||
// this.menuFlag1 = true;
|
||||
// this.menuGroupService.getuser(this.udata).subscribe((data)=>{
|
||||
// console.log(data);
|
||||
// })
|
||||
// window.open(`${this.baseUrl}`)
|
||||
// this.menuGroupService.getuser(this.udata).subscribe((data)=>{
|
||||
// console.log(data);
|
||||
// })
|
||||
// window.open(`${this.baseUrl}`)
|
||||
//window.location.href = `${this.baseUrl}`;
|
||||
//this.udata=this.userInfoService.getUserInfo();
|
||||
//console.log(this.udata);
|
||||
|
||||
this.menuGroupService.save(this.udata);
|
||||
|
||||
this.uid = this.udata.userid;
|
||||
this.uid=this.udata.userid;
|
||||
localStorage.setItem("id", JSON.stringify(this.udata));
|
||||
//localStorage.setItem('id', this.uid);
|
||||
//window.location.href = (`${this.baseUrl}/` + this.udata), true
|
||||
@@ -287,7 +285,7 @@ export class LayoutComponent implements OnInit {
|
||||
//this.userInfoService.storeUserInfo(JSON.stringify(this.udata.user));
|
||||
}//
|
||||
|
||||
modaladd() {
|
||||
modaladd(){
|
||||
//this.modalteam=true;
|
||||
this.router.navigate(['/cns-portal/myworkspace']);
|
||||
}
|
||||
@@ -295,17 +293,17 @@ export class LayoutComponent implements OnInit {
|
||||
me;
|
||||
md;
|
||||
mv;
|
||||
send(val) {
|
||||
send(val){
|
||||
console.log(val);
|
||||
this.menuGroupService.storeaddeditvalues(val);
|
||||
this.mc = val.mcreate;
|
||||
this.me = val.medit;
|
||||
this.md = val.mdelete;
|
||||
this.mv = val.mvisible;
|
||||
if (this.mv == 'false') {
|
||||
this.mc=val.mcreate;
|
||||
this.me=val.medit;
|
||||
this.md=val.mdelete;
|
||||
this.mv=val.mvisible;
|
||||
if(this.mv == 'false'){
|
||||
this.router.navigate(['/**'])
|
||||
}
|
||||
this.router.navigate(['./' + val.main_menu_action_name], { relativeTo: this.route });
|
||||
}
|
||||
this.router.navigate(['./'+ val.main_menu_action_name] , { relativeTo: this.route});
|
||||
}
|
||||
//skipLocationChange: true, value pass params->,queryParams:{mc:this.mc,me:this.me,md:this.md}
|
||||
}
|
||||
|
||||
@@ -1,240 +1,3 @@
|
||||
<!-- Modern Dashboard Welcome Section -->
|
||||
<div class="modern-dashboard">
|
||||
<!-- Welcome Header -->
|
||||
<div class="welcome-section">
|
||||
<div class="welcome-content">
|
||||
<div class="welcome-text">
|
||||
<h1 class="welcome-title animate-fade-in-up">
|
||||
Welcome to CloudnSure
|
||||
<span class="title-accent">Enterprise Platform</span>
|
||||
</h1>
|
||||
<p class="welcome-subtitle animate-fade-in-up stagger-1">
|
||||
Your comprehensive solution for data management, reporting, and business intelligence
|
||||
</p>
|
||||
<div class="welcome-actions animate-fade-in-up stagger-2">
|
||||
<button class="modern-btn btn-primary btn-lg">
|
||||
<clr-icon shape="play"></clr-icon>
|
||||
Get Started
|
||||
</button>
|
||||
<button class="modern-btn btn-outline btn-lg">
|
||||
<clr-icon shape="book"></clr-icon>
|
||||
View Documentation
|
||||
</button>
|
||||
<button class="modern-btn btn-ghost btn-lg" routerLink="/cns-portal/theme-customization">
|
||||
<clr-icon shape="palette"></clr-icon>
|
||||
Customize Theme
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="welcome-visual animate-fade-in-right">
|
||||
<div class="visual-container">
|
||||
<div class="floating-card card-1">
|
||||
<clr-icon shape="analytics"></clr-icon>
|
||||
<span>Analytics</span>
|
||||
</div>
|
||||
<div class="floating-card card-2">
|
||||
<clr-icon shape="file-group"></clr-icon>
|
||||
<span>Reports</span>
|
||||
</div>
|
||||
<div class="floating-card card-3">
|
||||
<clr-icon shape="cog"></clr-icon>
|
||||
<span>Settings</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Stats Cards -->
|
||||
<div class="stats-section">
|
||||
<div class="stats-grid">
|
||||
<div class="modern-card stats-card animate-fade-in-up stagger-1">
|
||||
<div class="card-header">
|
||||
<div class="stats-icon primary">
|
||||
<clr-icon shape="users"></clr-icon>
|
||||
</div>
|
||||
<div class="stats-trend positive">
|
||||
<clr-icon shape="trending-up"></clr-icon>
|
||||
<span>+12%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="stats-value">1,234</div>
|
||||
<div class="stats-label">Active Users</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modern-card stats-card animate-fade-in-up stagger-2">
|
||||
<div class="card-header">
|
||||
<div class="stats-icon success">
|
||||
<clr-icon shape="file-group"></clr-icon>
|
||||
</div>
|
||||
<div class="stats-trend positive">
|
||||
<clr-icon shape="trending-up"></clr-icon>
|
||||
<span>+8%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="stats-value">567</div>
|
||||
<div class="stats-label">Reports Generated</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modern-card stats-card animate-fade-in-up stagger-3">
|
||||
<div class="card-header">
|
||||
<div class="stats-icon warning">
|
||||
<clr-icon shape="clock"></clr-icon>
|
||||
</div>
|
||||
<div class="stats-trend negative">
|
||||
<clr-icon shape="trending-down"></clr-icon>
|
||||
<span>-3%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="stats-value">2.4s</div>
|
||||
<div class="stats-label">Avg Response Time</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modern-card stats-card animate-fade-in-up stagger-4">
|
||||
<div class="card-header">
|
||||
<div class="stats-icon info">
|
||||
<clr-icon shape="shield"></clr-icon>
|
||||
</div>
|
||||
<div class="stats-trend positive">
|
||||
<clr-icon shape="check"></clr-icon>
|
||||
<span>99.9%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="stats-value">99.9%</div>
|
||||
<div class="stats-label">Uptime</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="actions-section">
|
||||
<h2 class="section-title animate-fade-in-up">Quick Actions</h2>
|
||||
<div class="actions-grid">
|
||||
<a href="javascript://" class="modern-card action-card animate-fade-in-up stagger-1 hover-lift">
|
||||
<div class="action-icon">
|
||||
<clr-icon shape="plus-circle"></clr-icon>
|
||||
</div>
|
||||
<div class="action-content">
|
||||
<h3>Create Report</h3>
|
||||
<p>Build custom reports with our intuitive report builder</p>
|
||||
</div>
|
||||
<div class="action-arrow">
|
||||
<clr-icon shape="angle"></clr-icon>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="javascript://" class="modern-card action-card animate-fade-in-up stagger-2 hover-lift">
|
||||
<div class="action-icon">
|
||||
<clr-icon shape="upload"></clr-icon>
|
||||
</div>
|
||||
<div class="action-content">
|
||||
<h3>Import Data</h3>
|
||||
<p>Upload and process your data files quickly</p>
|
||||
</div>
|
||||
<div class="action-arrow">
|
||||
<clr-icon shape="angle"></clr-icon>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="javascript://" class="modern-card action-card animate-fade-in-up stagger-3 hover-lift">
|
||||
<div class="action-icon">
|
||||
<clr-icon shape="cog"></clr-icon>
|
||||
</div>
|
||||
<div class="action-content">
|
||||
<h3>System Settings</h3>
|
||||
<p>Configure your system preferences and options</p>
|
||||
</div>
|
||||
<div class="action-arrow">
|
||||
<clr-icon shape="angle"></clr-icon>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="javascript://" class="modern-card action-card animate-fade-in-up stagger-4 hover-lift">
|
||||
<div class="action-icon">
|
||||
<clr-icon shape="help-info"></clr-icon>
|
||||
</div>
|
||||
<div class="action-content">
|
||||
<h3>Help & Support</h3>
|
||||
<p>Get help and access our knowledge base</p>
|
||||
</div>
|
||||
<div class="action-arrow">
|
||||
<clr-icon shape="angle"></clr-icon>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="javascript://" class="modern-card action-card animate-fade-in-up stagger-5 hover-lift" routerLink="/cns-portal/theme-customization">
|
||||
<div class="action-icon">
|
||||
<clr-icon shape="palette"></clr-icon>
|
||||
</div>
|
||||
<div class="action-content">
|
||||
<h3>Theme Customization</h3>
|
||||
<p>Customize colors, fonts, and appearance</p>
|
||||
</div>
|
||||
<div class="action-arrow">
|
||||
<clr-icon shape="angle"></clr-icon>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<div class="activity-section">
|
||||
<h2 class="section-title animate-fade-in-up">Recent Activity</h2>
|
||||
<div class="modern-card activity-card animate-fade-in-up">
|
||||
<div class="activity-list">
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon success">
|
||||
<clr-icon shape="check"></clr-icon>
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<div class="activity-title">Report generated successfully</div>
|
||||
<div class="activity-time">2 minutes ago</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon info">
|
||||
<clr-icon shape="user"></clr-icon>
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<div class="activity-title">New user registered</div>
|
||||
<div class="activity-time">15 minutes ago</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon warning">
|
||||
<clr-icon shape="exclamation-triangle"></clr-icon>
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<div class="activity-title">System maintenance scheduled</div>
|
||||
<div class="activity-time">1 hour ago</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon primary">
|
||||
<clr-icon shape="upload"></clr-icon>
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<div class="activity-title">Data import completed</div>
|
||||
<div class="activity-time">2 hours ago</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Legacy breadcrumb (hidden but preserved for compatibility) -->
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong" style="display: none;">
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong">
|
||||
<li><a href="javascript://">Home</a></li>
|
||||
</ol>
|
||||
|
||||
@@ -1,510 +0,0 @@
|
||||
// ========================================
|
||||
// MODERN DASHBOARD COMPONENT STYLES
|
||||
// ========================================
|
||||
|
||||
|
||||
@import '../../../../styles/design-tokens';
|
||||
|
||||
|
||||
// Dashboard Container
|
||||
// ========================================
|
||||
|
||||
.modern-dashboard {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Welcome Section
|
||||
// ========================================
|
||||
|
||||
.welcome-section {
|
||||
background: linear-gradient(135deg, $primary-500 0%, $primary-700 100%);
|
||||
border-radius: $radius-2xl;
|
||||
margin-bottom: $space-8;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.welcome-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $space-12 $space-8;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: $space-8;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
flex: 1;
|
||||
max-width: 600px;
|
||||
|
||||
.welcome-title {
|
||||
font-size: $text-5xl;
|
||||
font-weight: $font-bold;
|
||||
color: $white;
|
||||
margin-bottom: $space-4;
|
||||
line-height: 1.1;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
font-size: $text-4xl;
|
||||
}
|
||||
|
||||
.title-accent {
|
||||
display: block;
|
||||
font-size: $text-2xl;
|
||||
font-weight: $font-medium;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-top: $space-2;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
font-size: $text-xl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
font-size: $text-xl;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin-bottom: $space-8;
|
||||
line-height: 1.6;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
font-size: $text-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-actions {
|
||||
display: flex;
|
||||
gap: $space-4;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-visual {
|
||||
flex: 0 0 300px;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.visual-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
|
||||
.floating-card {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: $backdrop-blur-md;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: $radius-xl;
|
||||
padding: $space-4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $space-2;
|
||||
color: $white;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
animation: float 3s ease-in-out infinite;
|
||||
|
||||
clr-icon {
|
||||
font-size: $text-2xl;
|
||||
}
|
||||
|
||||
&.card-1 {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
&.card-2 {
|
||||
top: 60px;
|
||||
right: 40px;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
&.card-3 {
|
||||
bottom: 20px;
|
||||
left: 60px;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Stats Section
|
||||
// ========================================
|
||||
|
||||
.stats-section {
|
||||
margin-bottom: $space-8;
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: $space-6;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: $space-4;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
padding: $space-6;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: $gradient-primary;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $space-4;
|
||||
|
||||
.stats-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: $radius-xl;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $text-xl;
|
||||
|
||||
&.primary {
|
||||
background: rgba($primary-500, 0.1);
|
||||
color: $primary-600;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: rgba($accent-green, 0.1);
|
||||
color: $accent-green;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: rgba($accent-orange, 0.1);
|
||||
color: $accent-orange;
|
||||
}
|
||||
|
||||
&.info {
|
||||
background: rgba($primary-500, 0.1);
|
||||
color: $primary-600;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-trend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-1;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-semibold;
|
||||
|
||||
&.positive {
|
||||
color: $accent-green;
|
||||
}
|
||||
|
||||
&.negative {
|
||||
color: $accent-red;
|
||||
}
|
||||
|
||||
clr-icon {
|
||||
font-size: $text-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.stats-value {
|
||||
font-size: $text-3xl;
|
||||
font-weight: $font-bold;
|
||||
color: $gray-900;
|
||||
margin-bottom: $space-1;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
font-size: $text-sm;
|
||||
color: $gray-600;
|
||||
font-weight: $font-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Actions Section
|
||||
// ========================================
|
||||
|
||||
.actions-section {
|
||||
margin-bottom: $space-8;
|
||||
|
||||
.section-title {
|
||||
font-size: $text-2xl;
|
||||
font-weight: $font-bold;
|
||||
color: $gray-900;
|
||||
margin-bottom: $space-6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.actions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: $space-6;
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: $space-4;
|
||||
}
|
||||
}
|
||||
|
||||
.action-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-4;
|
||||
padding: $space-6;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
border: 1px solid $gray-200;
|
||||
transition: all $duration-300 $ease-out;
|
||||
|
||||
&:hover {
|
||||
border-color: $primary-300;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-xl;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: $gradient-primary;
|
||||
border-radius: $radius-xl;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $white;
|
||||
font-size: $text-xl;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.action-content {
|
||||
flex: 1;
|
||||
|
||||
h3 {
|
||||
font-size: $text-lg;
|
||||
font-weight: $font-semibold;
|
||||
color: $gray-900;
|
||||
margin-bottom: $space-1;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $text-sm;
|
||||
color: $gray-600;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.action-arrow {
|
||||
color: $gray-400;
|
||||
font-size: $text-lg;
|
||||
transition: transform $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
&:hover .action-arrow {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Activity Section
|
||||
// ========================================
|
||||
|
||||
.activity-section {
|
||||
.section-title {
|
||||
font-size: $text-2xl;
|
||||
font-weight: $font-bold;
|
||||
color: $gray-900;
|
||||
margin-bottom: $space-6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.activity-card {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.activity-list {
|
||||
.activity-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-4;
|
||||
padding: $space-4 $space-6;
|
||||
border-bottom: 1px solid $gray-100;
|
||||
transition: background-color $duration-200 $ease-out;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $gray-50;
|
||||
}
|
||||
|
||||
.activity-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $text-base;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.success {
|
||||
background: rgba($accent-green, 0.1);
|
||||
color: $accent-green;
|
||||
}
|
||||
|
||||
&.info {
|
||||
background: rgba($primary-500, 0.1);
|
||||
color: $primary-600;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: rgba($accent-orange, 0.1);
|
||||
color: $accent-orange;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: rgba($primary-500, 0.1);
|
||||
color: $primary-600;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-content {
|
||||
flex: 1;
|
||||
|
||||
.activity-title {
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
color: $gray-900;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
font-size: $text-xs;
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive Design
|
||||
// ========================================
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
.welcome-section .welcome-content {
|
||||
padding: $space-8 $space-6;
|
||||
}
|
||||
|
||||
.stats-section .stats-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
}
|
||||
|
||||
.actions-section .actions-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
.welcome-section .welcome-content {
|
||||
padding: $space-6 $space-4;
|
||||
}
|
||||
|
||||
.welcome-text .welcome-title {
|
||||
font-size: $text-3xl;
|
||||
}
|
||||
|
||||
.welcome-text .welcome-subtitle {
|
||||
font-size: $text-base;
|
||||
}
|
||||
|
||||
.stats-section .stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.actions-section .actions-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
.modern-dashboard {
|
||||
padding: 0 $space-4;
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
margin-bottom: $space-6;
|
||||
}
|
||||
|
||||
.stats-section,
|
||||
.actions-section,
|
||||
.activity-section {
|
||||
margin-bottom: $space-6;
|
||||
}
|
||||
|
||||
.welcome-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
// Animation Keyframes
|
||||
// ========================================
|
||||
|
||||
@keyframes float {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ThemeService } from '../../../services/theme.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-main-page',
|
||||
@@ -8,13 +7,9 @@ import { ThemeService } from '../../../services/theme.service';
|
||||
})
|
||||
export class MainPageComponent implements OnInit {
|
||||
|
||||
constructor(private themeService: ThemeService) { }
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
// Initialize theme service
|
||||
this.themeService.currentTheme$.subscribe(theme => {
|
||||
// Theme changes will be automatically applied via CSS variables
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,25 +1,3 @@
|
||||
import { Ad10Component } from './BuilderComponents/angulardatatype/Ad10/Ad10.component';
|
||||
|
||||
import { DefatestComponent } from './BuilderComponents/defu/Defatest/Defatest.component';
|
||||
|
||||
|
||||
import { ChildformComponent } from './BuilderComponents/stpkg/Childform/Childform.component';
|
||||
import { DistrictComponent } from './BuilderComponents/testdata/District/District.component';
|
||||
import { StateComponent } from './BuilderComponents/testdata/State/State.component';
|
||||
import { CountryComponent } from './BuilderComponents/testdata/Country/Country.component';
|
||||
import { Ad9Component } from './BuilderComponents/angulardatatype/Ad9/Ad9.component';
|
||||
import { Ad8Component } from './BuilderComponents/angulardatatype/Ad8/Ad8.component';
|
||||
import { Ad7Component } from './BuilderComponents/angulardatatype/Ad7/Ad7.component';
|
||||
import { Ad6Component } from './BuilderComponents/angulardatatype/Ad6/Ad6.component';
|
||||
import { Adv5Component } from './BuilderComponents/angulardatatype/Adv5/Adv5.component';
|
||||
import { Adv4Component } from './BuilderComponents/angulardatatype/Adv4/Adv4.component';
|
||||
import { SupportComponent } from './BuilderComponents/angulardatatype/Support/Support.component';
|
||||
import { Adv3Component } from './BuilderComponents/angulardatatype/Adv3/Adv3.component';
|
||||
import { Dv2Component } from './BuilderComponents/angulardatatype/Dv2/Dv2.component';
|
||||
import { Adv1Component } from './BuilderComponents/angulardatatype/Adv1/Adv1.component';
|
||||
import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
|
||||
import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
|
||||
import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
|
||||
|
||||
|
||||
import { SequencegenaratorComponent } from './fnd/sequencegenarator/sequencegenarator.component';
|
||||
@@ -60,10 +38,7 @@ import { AccesstypeComponent } from './admin/accesstype/accesstype.component';
|
||||
import { ModulesComponent } from './admin/modules/modules.component';
|
||||
|
||||
import { SessionloggerComponent } from './admin/sessionlogger/sessionlogger.component';
|
||||
import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
|
||||
import { ReportrunnerallComponent } from './builder/report-runner/reportrunnerall/reportrunnerall.component';
|
||||
import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
|
||||
import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
|
||||
import { ReportBuildComponent } from './builder/report-build/report-build.component';
|
||||
import { ReportbuildallComponent } from './builder/report-build/reportbuildall/reportbuildall.component';
|
||||
import { ReportbuildaddComponent } from './builder/report-build/reportbuildadd/reportbuildadd.component';
|
||||
@@ -109,13 +84,6 @@ import { AllapiregisteryComponent } from './fnd/apiregistery/allapiregistery/all
|
||||
import { AddapiregisteryComponent } from './fnd/apiregistery/addapiregistery/addapiregistery.component';
|
||||
import { EditapiregisteryComponent } from './fnd/apiregistery/editapiregistery/editapiregistery.component';
|
||||
import { ApiregisterylineComponent } from './fnd/apiregistery/Apiregisteryline/Apiregisteryline.component';
|
||||
import { Customer_informationComponent } from './BuilderComponents/angulardatatype/Customer_information/Customer_information.component';
|
||||
import { Deployment_typeComponent } from './BuilderComponents/angulardatatype/Deployment_type/Deployment_type.component';
|
||||
import { ManufacturerComponent } from './BuilderComponents/angulardatatype/Manufacturer/Manufacturer.component';
|
||||
import { Order_summaryComponent } from './BuilderComponents/angulardatatype/Order_summary/Order_summary.component';
|
||||
import { ProductComponent } from './BuilderComponents/angulardatatype/Product/Product.component';
|
||||
import { TypesComponent } from './BuilderComponents/angulardatatype/Types/Types.component';
|
||||
import { Test2Component } from './BuilderComponents/testdata/Test2/Test2.component';
|
||||
import { Token_registeryComponent } from './fnd/Token_registery/Token_registery.component';
|
||||
import { MyworkspaceComponent } from './admin/myworkspace/myworkspace.component';
|
||||
import { ThemeCustomizationComponent } from './theme-customization/theme-customization.component';
|
||||
@@ -127,10 +95,14 @@ import { QueryComponent } from './superadmin/query/query.component';
|
||||
import { QueryaddComponent } from './superadmin/queryadd/queryadd.component';
|
||||
import { QueryeditComponent } from './superadmin/queryedit/queryedit.component';
|
||||
import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manager/chart-type-page.component';
|
||||
|
||||
|
||||
|
||||
|
||||
import { AddChartTypeComponent } from './builder/dashboardnew/chart-type-manager/add-chart-type.component';
|
||||
import { EditChartTypeComponent } from './builder/dashboardnew/chart-type-manager/edit-chart-type.component';
|
||||
import { ChartTypeUiComponentsComponent } from './builder/dashboardnew/chart-type-manager/chart-type-ui-components.component';
|
||||
import { ChartTypeTemplatesComponent } from './builder/dashboardnew/chart-type-manager/chart-type-templates.component';
|
||||
import { ChartTypeFieldsComponent } from './builder/dashboardnew/chart-type-manager/chart-type-fields.component';
|
||||
import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
|
||||
import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
|
||||
import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
|
||||
const routes: Routes = [
|
||||
//Important: The sequence of path is important as the router go over then in sequential manner
|
||||
{ path: '', redirectTo: '/cns-portal/dashboard', pathMatch: 'full' },
|
||||
@@ -224,6 +196,11 @@ const routes: Routes = [
|
||||
{ path: 'editdashn/:id', component: EditnewdashComponent },
|
||||
{ path: 'schedule/:id', component: ScheduleComponent },
|
||||
{ path: 'chart-types', component: ChartTypePageComponent },
|
||||
{ path: 'chart-types/add', component: AddChartTypeComponent },
|
||||
{ path: 'chart-types/edit/:id', component: EditChartTypeComponent },
|
||||
{ path: 'chart-types/:id/ui-components', component: ChartTypeUiComponentsComponent },
|
||||
{ path: 'chart-types/:id/templates', component: ChartTypeTemplatesComponent },
|
||||
{ path: 'chart-types/:id/fields', component: ChartTypeFieldsComponent },
|
||||
]
|
||||
},
|
||||
|
||||
@@ -331,178 +308,8 @@ const routes: Routes = [
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{ path: 'Country', component: CountryComponent },
|
||||
|
||||
|
||||
{ path: 'Adv3', component: Adv3Component },
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{ path: 'Ad10', component: Ad10Component },
|
||||
|
||||
|
||||
{ path: 'Childform', component: ChildformComponent },
|
||||
|
||||
|
||||
{ path: 'District', component: DistrictComponent },
|
||||
|
||||
|
||||
{ path: 'State', component: StateComponent },
|
||||
|
||||
|
||||
{ path: 'Country', component: CountryComponent },
|
||||
|
||||
|
||||
{ path: 'Ad9', component: Ad9Component },
|
||||
|
||||
|
||||
{ path: 'Ad8', component: Ad8Component },
|
||||
|
||||
|
||||
{ path: 'Ad7', component: Ad7Component },
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{ path: 'Ad6', component: Ad6Component },
|
||||
|
||||
|
||||
{ path: 'Adv5', component: Adv5Component },
|
||||
|
||||
|
||||
{ path: 'Support', component: SupportComponent },
|
||||
|
||||
|
||||
{ path: 'Adv3', component: Adv3Component },
|
||||
|
||||
|
||||
{ path: 'tokenregistery', component: Token_registeryComponent },
|
||||
|
||||
|
||||
{ path: 'Defatest', component: DefatestComponent },
|
||||
|
||||
|
||||
{ path: 'Country', component: CountryComponent },
|
||||
|
||||
|
||||
{ path: 'Defatest', component: DefatestComponent },
|
||||
|
||||
{ path: 'Test2', component: Test2Component },
|
||||
|
||||
|
||||
{ path: 'Country', component: CountryComponent },
|
||||
|
||||
|
||||
|
||||
{ path: 'Test2', component: Test2Component },
|
||||
|
||||
{ path: 'Childform', component: ChildformComponent },
|
||||
|
||||
|
||||
{ path: 'District', component: DistrictComponent },
|
||||
|
||||
|
||||
{ path: 'State', component: StateComponent },
|
||||
|
||||
|
||||
{ path: 'Country', component: CountryComponent },
|
||||
|
||||
|
||||
{ path: 'Ad9', component: Ad9Component },
|
||||
|
||||
|
||||
{ path: 'Ad8', component: Ad8Component },
|
||||
|
||||
|
||||
{ path: 'Ad7', component: Ad7Component },
|
||||
|
||||
|
||||
{ path: 'Ad6', component: Ad6Component },
|
||||
|
||||
|
||||
{ path: 'Adv5', component: Adv5Component },
|
||||
|
||||
|
||||
{ path: 'Adv4', component: Adv4Component },
|
||||
|
||||
|
||||
{ path: 'Support', component: SupportComponent },
|
||||
|
||||
|
||||
{ path: 'Adv3', component: Adv3Component },
|
||||
|
||||
|
||||
{ path: 'Dv2', component: Dv2Component },
|
||||
|
||||
|
||||
{ path: 'Adv1', component: Adv1Component },
|
||||
|
||||
|
||||
{ path: 'Basicp3', component: Basicp3Component },
|
||||
|
||||
|
||||
{ path: 'Basicp2', component: Basicp2Component },
|
||||
|
||||
|
||||
{ path: 'Basicp1', component: Basicp1Component },
|
||||
{ path: 'cust', component: Customer_informationComponent },
|
||||
|
||||
{ path: 'Order_summary', component: Order_summaryComponent },
|
||||
|
||||
|
||||
{ path: 'Types', component: TypesComponent },
|
||||
|
||||
|
||||
{ path: 'Product', component: ProductComponent },
|
||||
|
||||
|
||||
{ path: 'Manufacturer', component: ManufacturerComponent },
|
||||
|
||||
|
||||
{ path: 'Deployment_type', component: Deployment_typeComponent },
|
||||
|
||||
|
||||
|
||||
|
||||
{ path: 'Stepper_workflow', component: Stepper_workflowComponent },
|
||||
|
||||
|
||||
|
||||
@@ -1,25 +1,3 @@
|
||||
import { Ad10Component } from './BuilderComponents/angulardatatype/Ad10/Ad10.component';
|
||||
|
||||
import { DefatestComponent } from './BuilderComponents/defu/Defatest/Defatest.component';
|
||||
|
||||
import { ChildformComponent } from './BuilderComponents/stpkg/Childform/Childform.component';
|
||||
import { DistrictComponent } from './BuilderComponents/testdata/District/District.component';
|
||||
import { StateComponent } from './BuilderComponents/testdata/State/State.component';
|
||||
import { CountryComponent } from './BuilderComponents/testdata/Country/Country.component';
|
||||
import { Ad9Component } from './BuilderComponents/angulardatatype/Ad9/Ad9.component';
|
||||
import { Ad8Component } from './BuilderComponents/angulardatatype/Ad8/Ad8.component';
|
||||
import { Ad7Component } from './BuilderComponents/angulardatatype/Ad7/Ad7.component';
|
||||
import { Ad6Component } from './BuilderComponents/angulardatatype/Ad6/Ad6.component';
|
||||
import { Adv5Component } from './BuilderComponents/angulardatatype/Adv5/Adv5.component';
|
||||
import { Adv4Component } from './BuilderComponents/angulardatatype/Adv4/Adv4.component';
|
||||
import { SupportComponent } from './BuilderComponents/angulardatatype/Support/Support.component';
|
||||
import { Adv3Component } from './BuilderComponents/angulardatatype/Adv3/Adv3.component';
|
||||
import { Dv2Component } from './BuilderComponents/angulardatatype/Dv2/Dv2.component';
|
||||
import { Adv1Component } from './BuilderComponents/angulardatatype/Adv1/Adv1.component';
|
||||
import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
|
||||
import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
|
||||
import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
|
||||
|
||||
|
||||
|
||||
import { CommonModule } from '@angular/common';
|
||||
@@ -75,9 +53,6 @@ import { ReportbuildeditComponent } from './builder/report-build/reportbuildedit
|
||||
import { ReportbuildqueryComponent } from './builder/report-build/reportbuildquery/reportbuildquery.component';
|
||||
import { ReportBuild2Component } from './builder/report-build2/report-build2.component';
|
||||
import { ReportBuild2editComponent } from './builder/report-build2/report-build2edit/report-build2edit.component';
|
||||
import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
|
||||
import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
|
||||
import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
|
||||
|
||||
|
||||
import { DashboardnewComponent } from './builder/dashboardnew/dashboardnew.component';
|
||||
@@ -138,13 +113,7 @@ import { AllapiregisteryComponent } from './fnd/apiregistery/allapiregistery/all
|
||||
import { AddapiregisteryComponent } from './fnd/apiregistery/addapiregistery/addapiregistery.component';
|
||||
import { EditapiregisteryComponent } from './fnd/apiregistery/editapiregistery/editapiregistery.component';
|
||||
import { ApiregisterylineComponent } from './fnd/apiregistery/Apiregisteryline/Apiregisteryline.component';
|
||||
import { Customer_informationComponent } from './BuilderComponents/angulardatatype/Customer_information/Customer_information.component';
|
||||
import { Deployment_typeComponent } from './BuilderComponents/angulardatatype/Deployment_type/Deployment_type.component';
|
||||
import { ManufacturerComponent } from './BuilderComponents/angulardatatype/Manufacturer/Manufacturer.component';
|
||||
import { Order_summaryComponent } from './BuilderComponents/angulardatatype/Order_summary/Order_summary.component';
|
||||
import { ProductComponent } from './BuilderComponents/angulardatatype/Product/Product.component';
|
||||
import { TypesComponent } from './BuilderComponents/angulardatatype/Types/Types.component';
|
||||
import { Test2Component } from './BuilderComponents/testdata/Test2/Test2.component';
|
||||
|
||||
import { Token_registeryComponent } from './fnd/Token_registery/Token_registery.component';
|
||||
import { MyworkspaceComponent } from './admin/myworkspace/myworkspace.component';
|
||||
import { ThemeCustomizationComponent } from './theme-customization/theme-customization.component';
|
||||
@@ -165,11 +134,34 @@ import { ShieldDashboardModule } from './builder/dashboardnew/gadgets/shield-das
|
||||
// Import UnifiedChartComponent
|
||||
import { UnifiedChartComponent } from './builder/dashboardnew/gadgets/unified-chart/unified-chart.component';
|
||||
// Import ChartConfigManagerComponent
|
||||
import { ChartConfigManagerComponent } from './builder/dashboardnew/chart-config-manager/chart-config-manager.component';
|
||||
import { ChartConfigManagerComponent } from './builder/dashboardnew/chart-config/chart-config-manager.component';
|
||||
// Import ChartTypeManagerComponent
|
||||
import { ChartTypeManagerComponent } from './builder/dashboardnew/chart-type-manager/chart-type-manager.component';
|
||||
// Import ChartTypePageComponent
|
||||
import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manager/chart-type-page.component';
|
||||
// Import AddChartTypeComponent
|
||||
import { AddChartTypeComponent } from './builder/dashboardnew/chart-type-manager/add-chart-type.component';
|
||||
// Import EditChartTypeComponent
|
||||
import { EditChartTypeComponent } from './builder/dashboardnew/chart-type-manager/edit-chart-type.component';
|
||||
// Import ChartTypeUiComponentsComponent
|
||||
import { ChartTypeUiComponentsComponent } from './builder/dashboardnew/chart-type-manager/chart-type-ui-components.component';
|
||||
// Import ChartTypeTemplatesComponent
|
||||
import { ChartTypeTemplatesComponent } from './builder/dashboardnew/chart-type-manager/chart-type-templates.component';
|
||||
// Import ChartTypeFieldsComponent
|
||||
import { ChartTypeFieldsComponent } from './builder/dashboardnew/chart-type-manager/chart-type-fields.component';
|
||||
// Import new form components
|
||||
import { ChartTypeFormComponent } from './builder/dashboardnew/chart-config/forms/chart-type-form.component';
|
||||
import { UiComponentFormComponent } from './builder/dashboardnew/chart-config/forms/ui-component-form.component';
|
||||
import { ComponentPropertyFormComponent } from './builder/dashboardnew/chart-config/forms/component-property-form.component';
|
||||
import { ChartTemplateFormComponent } from './builder/dashboardnew/chart-config/forms/chart-template-form.component';
|
||||
import { DynamicFieldFormComponent } from './builder/dashboardnew/chart-config/forms/dynamic-field-form.component';
|
||||
// Import ChartConfigModalComponent
|
||||
import { ChartConfigModalComponent } from './builder/dashboardnew/editnewdash/chart-config-modal.component';
|
||||
// Import DynamicChartLoaderService
|
||||
import { DynamicChartLoaderService } from './builder/dashboardnew/chart-config/dynamic-chart-loader.service';
|
||||
import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
|
||||
import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
|
||||
import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@@ -189,6 +181,27 @@ import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manage
|
||||
ChartTypeManagerComponent,
|
||||
// Add ChartTypePageComponent to declarations
|
||||
ChartTypePageComponent,
|
||||
// Add AddChartTypeComponent to declarations
|
||||
AddChartTypeComponent,
|
||||
// Add EditChartTypeComponent to declarations
|
||||
EditChartTypeComponent,
|
||||
// Add ChartTypeUiComponentsComponent to declarations
|
||||
ChartTypeUiComponentsComponent,
|
||||
// Add ChartTypeTemplatesComponent to declarations
|
||||
ChartTypeTemplatesComponent,
|
||||
// Add ChartTypeFieldsComponent to declarations
|
||||
ChartTypeFieldsComponent,
|
||||
// Add new form components to declarations
|
||||
ChartTypeFormComponent,
|
||||
UiComponentFormComponent,
|
||||
ComponentPropertyFormComponent,
|
||||
ChartTemplateFormComponent,
|
||||
DynamicFieldFormComponent,
|
||||
// Add ChartConfigModalComponent to declarations
|
||||
ChartConfigModalComponent,
|
||||
// Add ChartTypeDisplayComponent to declarations
|
||||
|
||||
|
||||
DashrunnerlineComponent, BarRunnerComponent, LineRunnerComponent, DoughnutRunnerComponent, GridRunnerComponent, PieRunnerComponent, PolarRunnerComponent, RadarRunnerComponent, ScatterRunnerComponent, TodoRunnerComponent, BubbleRunnerComponent,
|
||||
// Add CompactFilterRunnerComponent to declarations
|
||||
CompactFilterRunnerComponent,
|
||||
@@ -201,7 +214,7 @@ import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manage
|
||||
ApiregisterylineComponent,
|
||||
DatamanagementComponent, DatamananementworkflowComponent, BulkimportComponent, BulkimportallComponent, BulkimportaddComponent, BulkimporteditComponent, BulkimportlineComponent, BulkimporteditlineComponent, MappingruleComponent, MappingruleallComponent,
|
||||
MappingruleaddComponent,
|
||||
MappingruleeditComponent, Stepper_workflowComponent, Customer_informationComponent,
|
||||
MappingruleeditComponent, Stepper_workflowComponent,
|
||||
Data_lakeComponent,
|
||||
SureconnectComponent,
|
||||
EditsureconnectComponent,
|
||||
@@ -214,32 +227,8 @@ import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manage
|
||||
|
||||
|
||||
ThemeCustomizationComponent,
|
||||
Ad10Component,
|
||||
|
||||
Token_registeryComponent,
|
||||
DefatestComponent,
|
||||
Test2Component,
|
||||
Order_summaryComponent,
|
||||
TypesComponent,
|
||||
ProductComponent,
|
||||
ManufacturerComponent,
|
||||
Deployment_typeComponent,
|
||||
ChildformComponent,
|
||||
DistrictComponent,
|
||||
StateComponent,
|
||||
CountryComponent,
|
||||
Ad9Component,
|
||||
Ad8Component,
|
||||
Ad7Component,
|
||||
Ad6Component,
|
||||
Adv5Component,
|
||||
Adv4Component,
|
||||
SupportComponent,
|
||||
Adv3Component,
|
||||
Dv2Component,
|
||||
Adv1Component,
|
||||
Basicp3Component,
|
||||
Basicp2Component,
|
||||
Basicp1Component,
|
||||
],
|
||||
imports: [
|
||||
QRCodeModule,
|
||||
@@ -266,8 +255,10 @@ import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manage
|
||||
providers: [
|
||||
CookieService,
|
||||
WireframeService,
|
||||
|
||||
|
||||
DynamicChartLoaderService
|
||||
],
|
||||
exports: [
|
||||
ChartConfigManagerComponent
|
||||
],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
})
|
||||
|
||||
@@ -1,252 +0,0 @@
|
||||
import { Ad10Component } from './BuilderComponents/angulardatatype/Ad10/Ad10.component';
|
||||
|
||||
import { DefatestComponent } from './BuilderComponents/defu/Defatest/Defatest.component';
|
||||
|
||||
import { ChildformComponent } from './BuilderComponents/stpkg/Childform/Childform.component';
|
||||
import { DistrictComponent } from './BuilderComponents/testdata/District/District.component';
|
||||
import { StateComponent } from './BuilderComponents/testdata/State/State.component';
|
||||
import { CountryComponent } from './BuilderComponents/testdata/Country/Country.component';
|
||||
import { Ad9Component } from './BuilderComponents/angulardatatype/Ad9/Ad9.component';
|
||||
import { Ad8Component } from './BuilderComponents/angulardatatype/Ad8/Ad8.component';
|
||||
import { Ad7Component } from './BuilderComponents/angulardatatype/Ad7/Ad7.component';
|
||||
import { Ad6Component } from './BuilderComponents/angulardatatype/Ad6/Ad6.component';
|
||||
import { Adv5Component } from './BuilderComponents/angulardatatype/Adv5/Adv5.component';
|
||||
import { Adv4Component } from './BuilderComponents/angulardatatype/Adv4/Adv4.component';
|
||||
import { SupportComponent } from './BuilderComponents/angulardatatype/Support/Support.component';
|
||||
import { Adv3Component } from './BuilderComponents/angulardatatype/Adv3/Adv3.component';
|
||||
import { Dv2Component } from './BuilderComponents/angulardatatype/Dv2/Dv2.component';
|
||||
import { Adv1Component } from './BuilderComponents/angulardatatype/Adv1/Adv1.component';
|
||||
import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
|
||||
import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
|
||||
import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
|
||||
|
||||
|
||||
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { ClarityModule } from '@clr/angular';
|
||||
|
||||
import { MainPageComponent } from '../main/fnd/main-page/main-page.component';
|
||||
import { MainRoutingModule } from './main-routing.module';
|
||||
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
|
||||
// import { AboutComponent } from '../main/admin/about/about.component';
|
||||
// import { LayoutComponent } from './layout/layout.component';
|
||||
import { HelperModule } from 'src/app/pipes/helpers.module';
|
||||
import { PasswordResetComponent } from '../main/admin/password-reset/password-reset.component';
|
||||
import { UserComponent } from '../main/admin/user/user.component';
|
||||
|
||||
|
||||
import { AllMenuGroupComponent } from '../main/admin/menu-group/all/all-menu-group.component';
|
||||
import { EditMenuGroupComponent } from '../main/admin/menu-group/edit/edit-menu-group.component';
|
||||
import { MenuGroupComponent } from '../main/admin/menu-group/menu-group.component';
|
||||
import { ReadOnlyMenuGroupComponent } from '../main/admin/menu-group/read-only/readonly-menu-group.component';
|
||||
import { AddMenurComponent } from '../main/admin/menu-register/add-menur/add-menur.component';
|
||||
import { AllMenurComponent } from '../main/admin/menu-register/all-menur/all-menur.component';
|
||||
import { EditMenurComponent } from '../main/admin/menu-register/edit-menur/edit-menur.component';
|
||||
import { MenuRegisterComponent } from '../main/admin/menu-register/menu-register.component';
|
||||
import { ReadonlyMenurComponent } from '../main/admin/menu-register/readonly-menur/readonly-menur.component';
|
||||
import { ProfileSettingComponent } from '../main/admin/profile-setting/profile-setting.component';
|
||||
import { UsermaintanceaddComponent } from '../main/admin/usermaintanceadd/usermaintanceadd.component';
|
||||
import { UsermaintanceeditComponent } from '../main/admin/usermaintanceedit/usermaintanceedit.component';
|
||||
|
||||
import { DragDropModule } from '@angular/cdk/drag-drop';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { CodemirrorModule } from "@ctrl/ngx-codemirror";
|
||||
import { NgxChartsModule } from '@swimlane/ngx-charts';
|
||||
import { GridsterModule } from 'angular-gridster2';
|
||||
import { DynamicModule } from 'ng-dynamic-component';
|
||||
import { NgChartsModule } from 'ng2-charts';
|
||||
import { CKEditorModule } from 'ng2-ckeditor';
|
||||
|
||||
import { UserRegistrationComponent } from '../main/admin/user-registration/user-registration.component';
|
||||
|
||||
import { QRCodeModule } from 'angularx-qrcode';
|
||||
import { TagInputModule } from 'ngx-chips';
|
||||
import { CookieService } from 'ngx-cookie-service';
|
||||
import { ImageCropperModule } from 'ngx-image-cropper';
|
||||
import { ModulesComponent } from './admin/modules/modules.component';
|
||||
import { SessionloggerComponent } from './admin/sessionlogger/sessionlogger.component';
|
||||
import { SubmenuComponent } from './admin/submenu/submenu.component';
|
||||
|
||||
import { WireframeService } from 'src/app/services/builder/wireframe.service';
|
||||
import { ReportBuildComponent } from './builder/report-build/report-build.component';
|
||||
import { ReportbuildeditComponent } from './builder/report-build/reportbuildedit/reportbuildedit.component';
|
||||
import { ReportbuildqueryComponent } from './builder/report-build/reportbuildquery/reportbuildquery.component';
|
||||
import { ReportBuild2Component } from './builder/report-build2/report-build2.component';
|
||||
import { ReportBuild2editComponent } from './builder/report-build2/report-build2edit/report-build2edit.component';
|
||||
import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
|
||||
import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
|
||||
import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
|
||||
|
||||
|
||||
import { DashboardnewComponent } from './builder/dashboardnew/dashboardnew.component';
|
||||
import { EditformnewdashComponent } from './builder/dashboardnew/editformnewdash/editformnewdash.component';
|
||||
import { EditnewdashComponent } from './builder/dashboardnew/editnewdash/editnewdash.component';
|
||||
import { BarChartComponent } from './builder/dashboardnew/gadgets/bar-chart/bar-chart.component';
|
||||
import { BubbleChartComponent } from './builder/dashboardnew/gadgets/bubble-chart/bubble-chart.component';
|
||||
import { DoughnutChartComponent } from './builder/dashboardnew/gadgets/doughnut-chart/doughnut-chart.component';
|
||||
import { DynamicChartComponent } from './builder/dashboardnew/gadgets/dynamic-chart/dynamic-chart.component';
|
||||
import { FinancialChartComponent } from './builder/dashboardnew/gadgets/financial-chart/financial-chart.component';
|
||||
import { GridViewComponent } from './builder/dashboardnew/gadgets/grid-view/grid-view.component';
|
||||
import { LineChartComponent } from './builder/dashboardnew/gadgets/line-chart/line-chart.component';
|
||||
import { PieChartComponent } from './builder/dashboardnew/gadgets/pie-chart/pie-chart.component';
|
||||
import { PolarChartComponent } from './builder/dashboardnew/gadgets/polar-chart/polar-chart.component';
|
||||
import { RadarChartComponent } from './builder/dashboardnew/gadgets/radar-chart/radar-chart.component';
|
||||
import { ScatterChartComponent } from './builder/dashboardnew/gadgets/scatter-chart/scatter-chart.component';
|
||||
import { ToDoChartComponent } from './builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component';
|
||||
import { ScheduleComponent } from './builder/dashboardnew/schedule/schedule.component';
|
||||
import { CommonFilterComponent } from './builder/dashboardnew/common-filter/common-filter.component';
|
||||
import { ChartWrapperComponent } from './builder/dashboardnew/common-filter/chart-wrapper.component';
|
||||
import { AddextensionComponent } from './fnd/extension/addextension/addextension.component';
|
||||
import { AllextensionComponent } from './fnd/extension/allextension/allextension.component';
|
||||
import { EditextensionComponent } from './fnd/extension/editextension/editextension.component';
|
||||
import { ExtensionComponent } from './fnd/extension/extension.component';
|
||||
|
||||
import { BarRunnerComponent } from './builder/dashboardrunner/dashrunnerline/bar-runner/bar-runner.component';
|
||||
import { BubbleRunnerComponent } from './builder/dashboardrunner/dashrunnerline/bubble-runner/bubble-runner.component';
|
||||
import { DashrunnerlineComponent } from './builder/dashboardrunner/dashrunnerline/dashrunnerline.component';
|
||||
import { DoughnutRunnerComponent } from './builder/dashboardrunner/dashrunnerline/doughnut-runner/doughnut-runner.component';
|
||||
import { GridRunnerComponent } from './builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component';
|
||||
import { LineRunnerComponent } from './builder/dashboardrunner/dashrunnerline/line-runner/line-runner.component';
|
||||
import { PieRunnerComponent } from './builder/dashboardrunner/dashrunnerline/pie-runner/pie-runner.component';
|
||||
import { PolarRunnerComponent } from './builder/dashboardrunner/dashrunnerline/polar-runner/polar-runner.component';
|
||||
import { RadarRunnerComponent } from './builder/dashboardrunner/dashrunnerline/radar-runner/radar-runner.component';
|
||||
import { ScatterRunnerComponent } from './builder/dashboardrunner/dashrunnerline/scatter-runner/scatter-runner.component';
|
||||
import { TodoRunnerComponent } from './builder/dashboardrunner/dashrunnerline/todo-runner/todo-runner.component';
|
||||
|
||||
import { ApiregisteryComponent } from './fnd/apiregistery/apiregistery.component';
|
||||
|
||||
import { BulkimportComponent } from './datamanagement/bulkimport/bulkimport.component';
|
||||
import { BulkimportaddComponent } from './datamanagement/bulkimport/bulkimportadd/bulkimportadd.component';
|
||||
import { BulkimportallComponent } from './datamanagement/bulkimport/bulkimportall/bulkimportall.component';
|
||||
import { BulkimporteditComponent } from './datamanagement/bulkimport/bulkimportedit/bulkimportedit.component';
|
||||
import { BulkimporteditlineComponent } from './datamanagement/bulkimport/bulkimporteditline/bulkimporteditline.component';
|
||||
import { BulkimportlineComponent } from './datamanagement/bulkimport/bulkimportline/bulkimportline.component';
|
||||
import { DatamanagementComponent } from './datamanagement/datamanagement/datamanagement.component';
|
||||
import { DatamananementworkflowComponent } from './datamanagement/datamananementworkflow/datamananementworkflow.component';
|
||||
import { MappingruleComponent } from './datamanagement/mappingrule/mappingrule.component';
|
||||
import { MappingruleaddComponent } from './datamanagement/mappingrule/mappingruleadd/mappingruleadd.component';
|
||||
import { MappingruleallComponent } from './datamanagement/mappingrule/mappingruleall/mappingruleall.component';
|
||||
import { MappingruleeditComponent } from './datamanagement/mappingrule/mappingruleedit/mappingruleedit.component';
|
||||
import { Stepper_workflowComponent } from './BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component';
|
||||
import { AllapiregisteryComponent } from './fnd/apiregistery/allapiregistery/allapiregistery.component';
|
||||
import { AddapiregisteryComponent } from './fnd/apiregistery/addapiregistery/addapiregistery.component';
|
||||
import { EditapiregisteryComponent } from './fnd/apiregistery/editapiregistery/editapiregistery.component';
|
||||
import { ApiregisterylineComponent } from './fnd/apiregistery/Apiregisteryline/Apiregisteryline.component';
|
||||
import { Customer_informationComponent } from './BuilderComponents/angulardatatype/Customer_information/Customer_information.component';
|
||||
import { Deployment_typeComponent } from './BuilderComponents/angulardatatype/Deployment_type/Deployment_type.component';
|
||||
import { ManufacturerComponent } from './BuilderComponents/angulardatatype/Manufacturer/Manufacturer.component';
|
||||
import { Order_summaryComponent } from './BuilderComponents/angulardatatype/Order_summary/Order_summary.component';
|
||||
import { ProductComponent } from './BuilderComponents/angulardatatype/Product/Product.component';
|
||||
import { TypesComponent } from './BuilderComponents/angulardatatype/Types/Types.component';
|
||||
import { Test2Component } from './BuilderComponents/testdata/Test2/Test2.component';
|
||||
import { Token_registeryComponent } from './fnd/Token_registery/Token_registery.component';
|
||||
import { MyworkspaceComponent } from './admin/myworkspace/myworkspace.component';
|
||||
import { ThemeCustomizationComponent } from './theme-customization/theme-customization.component';
|
||||
// import { QueryComponent } from './superadmin/query/query.component';
|
||||
// import { QueryaddComponent } from './superadmin/queryadd/queryadd.component';
|
||||
// import { QueryeditComponent } from './superadmin/queryedit/queryedit.component';
|
||||
|
||||
import { FieldTypesModule } from '../../shared/components/field-types/field-types.module';
|
||||
import { SharedModule } from '../../shared/shared.module';
|
||||
import { Data_lakeComponent } from './builder/dashboardnew/Data_lake/Data_lake.component';
|
||||
import { CronJobBuilderComponent } from './builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component';
|
||||
import { SureconnectComponent } from './builder/dashboardnew/sureconnect/sureconnect.component';
|
||||
import { EditsureconnectComponent } from './builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component';
|
||||
import { OauthComponent } from './builder/dashboardnew/sureconnect/oauth/oauth.component';
|
||||
|
||||
// Import Shield Dashboard Module
|
||||
import { ShieldDashboardModule } from './builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.module';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
MainPageComponent, PageNotFoundComponent, UserComponent, PasswordResetComponent,
|
||||
MyworkspaceComponent,
|
||||
ReportRunnerComponent, ReportrunnereditComponent, Reportrunneredit2Component, MenuGroupComponent, AllMenuGroupComponent, EditMenuGroupComponent, ReadOnlyMenuGroupComponent, UserRegistrationComponent,
|
||||
MenuRegisterComponent, AddMenurComponent, EditMenurComponent, AllMenurComponent, ReadonlyMenurComponent, ProfileSettingComponent,
|
||||
UsermaintanceaddComponent, UsermaintanceeditComponent,
|
||||
SubmenuComponent, ModulesComponent, SessionloggerComponent,
|
||||
DashboardnewComponent, EditformnewdashComponent, EditnewdashComponent, ScheduleComponent,
|
||||
CommonFilterComponent, ChartWrapperComponent, DoughnutChartComponent, LineChartComponent, RadarChartComponent, BarChartComponent, BubbleChartComponent, DynamicChartComponent, ScatterChartComponent, PolarChartComponent, PieChartComponent, FinancialChartComponent, ToDoChartComponent, GridViewComponent,
|
||||
DashrunnerlineComponent, BarRunnerComponent, LineRunnerComponent, DoughnutRunnerComponent, GridRunnerComponent, PieRunnerComponent, PolarRunnerComponent, RadarRunnerComponent, ScatterRunnerComponent, TodoRunnerComponent, BubbleRunnerComponent,
|
||||
ReportBuildComponent, ReportbuildeditComponent, ReportbuildqueryComponent, ReportBuild2Component, ReportBuild2editComponent,
|
||||
// QueryComponent, QueryaddComponent, QueryeditComponent,
|
||||
ExtensionComponent,
|
||||
AllextensionComponent,
|
||||
AddextensionComponent, EditextensionComponent, ApiregisteryComponent, AllapiregisteryComponent, AddapiregisteryComponent, EditapiregisteryComponent,
|
||||
|
||||
ApiregisterylineComponent,
|
||||
DatamanagementComponent, DatamananementworkflowComponent, BulkimportComponent, BulkimportallComponent, BulkimportaddComponent, BulkimporteditComponent, BulkimportlineComponent, BulkimporteditlineComponent, MappingruleComponent, MappingruleallComponent,
|
||||
MappingruleaddComponent,
|
||||
MappingruleeditComponent, Stepper_workflowComponent, Customer_informationComponent,
|
||||
Data_lakeComponent,
|
||||
SureconnectComponent,
|
||||
EditsureconnectComponent,
|
||||
OauthComponent,
|
||||
CronJobBuilderComponent,
|
||||
// FileUploadListComponent,
|
||||
|
||||
|
||||
// buildercomponents
|
||||
|
||||
|
||||
ThemeCustomizationComponent,
|
||||
Ad10Component,
|
||||
Token_registeryComponent,
|
||||
DefatestComponent,
|
||||
Test2Component,
|
||||
Order_summaryComponent,
|
||||
TypesComponent,
|
||||
ProductComponent,
|
||||
ManufacturerComponent,
|
||||
Deployment_typeComponent,
|
||||
ChildformComponent,
|
||||
DistrictComponent,
|
||||
StateComponent,
|
||||
CountryComponent,
|
||||
Ad9Component,
|
||||
Ad8Component,
|
||||
Ad7Component,
|
||||
Ad6Component,
|
||||
Adv5Component,
|
||||
Adv4Component,
|
||||
SupportComponent,
|
||||
Adv3Component,
|
||||
Dv2Component,
|
||||
Adv1Component,
|
||||
Basicp3Component,
|
||||
Basicp2Component,
|
||||
Basicp1Component,
|
||||
],
|
||||
imports: [
|
||||
QRCodeModule,
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
ClarityModule,
|
||||
HelperModule,
|
||||
MainRoutingModule,
|
||||
DragDropModule,
|
||||
HttpClientModule,
|
||||
ImageCropperModule,
|
||||
TagInputModule,
|
||||
CodemirrorModule,
|
||||
CKEditorModule,
|
||||
GridsterModule,
|
||||
NgChartsModule,
|
||||
NgxChartsModule,
|
||||
DynamicModule,
|
||||
FieldTypesModule,
|
||||
SharedModule,
|
||||
ShieldDashboardModule,
|
||||
],
|
||||
providers: [
|
||||
CookieService,
|
||||
WireframeService,
|
||||
|
||||
|
||||
],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
})
|
||||
export class MainModule { }
|
||||
@@ -1,280 +0,0 @@
|
||||
<!-- Theme Customization Screen -->
|
||||
<div class="theme-customization-screen">
|
||||
<!-- Header -->
|
||||
<div class="theme-header">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<h1 class="page-title">
|
||||
<clr-icon shape="palette"></clr-icon>
|
||||
Theme Customization
|
||||
</h1>
|
||||
<p class="page-subtitle">Customize your application's appearance with colors, fonts, and styles</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="modern-btn btn-outline" (click)="resetToDefault()">
|
||||
<clr-icon shape="refresh"></clr-icon>
|
||||
Reset to Default
|
||||
</button>
|
||||
<button class="modern-btn btn-primary" (click)="exportTheme()">
|
||||
<clr-icon shape="download"></clr-icon>
|
||||
Export Theme
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="theme-content">
|
||||
<div class="theme-layout">
|
||||
<!-- Left Sidebar - Theme Selection -->
|
||||
<div class="theme-sidebar">
|
||||
<div class="sidebar-section">
|
||||
<h3 class="section-title">Predefined Themes</h3>
|
||||
<div class="theme-grid">
|
||||
<div *ngFor="let theme of themes" class="theme-card"
|
||||
[class.active]="currentTheme?.id === theme.id" (click)="selectTheme(theme.id)">
|
||||
<div class="theme-preview" [style.background]="theme.colors.background">
|
||||
<div class="preview-header" [style.background]="theme.colors.primary"></div>
|
||||
<div class="preview-content">
|
||||
<div class="preview-card" [style.background]="theme.colors.surface"
|
||||
[style.border-radius]="theme.borderRadius">
|
||||
<div class="preview-text" [style.color]="theme.colors.text">Sample Text</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-info">
|
||||
<h4 class="theme-name">{{ theme.name }}</h4>
|
||||
<div class="theme-colors">
|
||||
<div class="color-dot" [style.background]="theme.colors.primary"></div>
|
||||
<div class="color-dot" [style.background]="theme.colors.secondary"></div>
|
||||
<div class="color-dot" [style.background]="theme.colors.accent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<button class="modern-btn btn-primary btn-block" (click)="startCustomizing()"
|
||||
[disabled]="isCustomizing">
|
||||
<clr-icon shape="cog"></clr-icon>
|
||||
Customize Theme
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Content - Customization Panel -->
|
||||
<div class="theme-main">
|
||||
<div *ngIf="!isCustomizing" class="welcome-state">
|
||||
<div class="welcome-content">
|
||||
<div class="welcome-icon">
|
||||
<clr-icon shape="palette" size="48"></clr-icon>
|
||||
</div>
|
||||
<h2>Choose a Theme</h2>
|
||||
<p>Select from our predefined themes or create your own custom theme to match your brand and
|
||||
preferences.</p>
|
||||
<div class="current-theme-info" *ngIf="currentTheme">
|
||||
<h3>Current Theme: {{ currentTheme.name }}</h3>
|
||||
<div class="theme-preview-large" [style.background]="currentTheme.colors.background">
|
||||
<div class="preview-header" [style.background]="currentTheme.colors.primary"></div>
|
||||
<div class="preview-content">
|
||||
<div class="preview-card" [style.background]="currentTheme.colors.surface"
|
||||
[style.border-radius]="currentTheme.borderRadius">
|
||||
<div class="preview-text" [style.color]="currentTheme.colors.text">Sample Text
|
||||
</div>
|
||||
<div class="preview-text-secondary"
|
||||
[style.color]="currentTheme.colors.textSecondary">Secondary Text</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="isCustomizing" class="customization-panel">
|
||||
<!-- Customization Header -->
|
||||
<div class="customization-header">
|
||||
<h2>Customize Your Theme</h2>
|
||||
<div class="header-actions">
|
||||
<button class="modern-btn btn-outline" (click)="cancelCustomizing()">
|
||||
<clr-icon shape="times"></clr-icon>
|
||||
Cancel
|
||||
</button>
|
||||
<button class="modern-btn btn-primary" (click)="applyCustomTheme()">
|
||||
<clr-icon shape="check"></clr-icon>
|
||||
Apply Theme
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Color Customization -->
|
||||
<div class="customization-section">
|
||||
<h3 class="section-title">
|
||||
<clr-icon shape="color-palette"></clr-icon>
|
||||
Colors
|
||||
</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-group">
|
||||
<label class="color-label">Primary Color</label>
|
||||
<div class="color-input-group">
|
||||
<input type="color" class="color-picker" [value]="getColorValue('primary')"
|
||||
(input)="onColorChange('primary', $event.target.value); previewTheme()">
|
||||
<input type="text" class="color-text" [value]="getColorValue('primary')"
|
||||
(input)="onColorChange('primary', $event.target.value); previewTheme()">
|
||||
</div>
|
||||
<div class="color-presets">
|
||||
<div *ngFor="let preset of colorPresets" class="preset-color"
|
||||
[style.background]="preset.value" [title]="preset.name"
|
||||
(click)="onColorChange('primary', preset.value); previewTheme()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<label class="color-label">Secondary Color</label>
|
||||
<div class="color-input-group">
|
||||
<input type="color" class="color-picker" [value]="getColorValue('secondary')"
|
||||
(input)="onColorChange('secondary', $event.target.value); previewTheme()">
|
||||
<input type="text" class="color-text" [value]="getColorValue('secondary')"
|
||||
(input)="onColorChange('secondary', $event.target.value); previewTheme()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<label class="color-label">Accent Color</label>
|
||||
<div class="color-input-group">
|
||||
<input type="color" class="color-picker" [value]="getColorValue('accent')"
|
||||
(input)="onColorChange('accent', $event.target.value); previewTheme()">
|
||||
<input type="text" class="color-text" [value]="getColorValue('accent')"
|
||||
(input)="onColorChange('accent', $event.target.value); previewTheme()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<label class="color-label">Background Color</label>
|
||||
<div class="color-input-group">
|
||||
<input type="color" class="color-picker" [value]="getColorValue('background')"
|
||||
(input)="onColorChange('background', $event.target.value); previewTheme()">
|
||||
<input type="text" class="color-text" [value]="getColorValue('background')"
|
||||
(input)="onColorChange('background', $event.target.value); previewTheme()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<label class="color-label">Surface Color</label>
|
||||
<div class="color-input-group">
|
||||
<input type="color" class="color-picker" [value]="getColorValue('surface')"
|
||||
(input)="onColorChange('surface', $event.target.value); previewTheme()">
|
||||
<input type="text" class="color-text" [value]="getColorValue('surface')"
|
||||
(input)="onColorChange('surface', $event.target.value); previewTheme()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<label class="color-label">Text Color</label>
|
||||
<div class="color-input-group">
|
||||
<input type="color" class="color-picker" [value]="getColorValue('text')"
|
||||
(input)="onColorChange('text', $event.target.value); previewTheme()">
|
||||
<input type="text" class="color-text" [value]="getColorValue('text')"
|
||||
(input)="onColorChange('text', $event.target.value); previewTheme()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Font Customization -->
|
||||
<div class="customization-section">
|
||||
<h3 class="section-title">
|
||||
<clr-icon shape="text"></clr-icon>
|
||||
Typography
|
||||
</h3>
|
||||
<div class="font-grid">
|
||||
<div class="font-group">
|
||||
<label class="font-label">Primary Font</label>
|
||||
<select class="font-select" [value]="getFontValue('primary')"
|
||||
(change)="onFontChange('primary', $event.target.value); previewTheme()">
|
||||
<option *ngFor="let font of fontOptions" [value]="font.value">{{ font.name }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="font-preview" [style.font-family]="getFontValue('primary')">
|
||||
The quick brown fox jumps over the lazy dog
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="font-group">
|
||||
<label class="font-label">Secondary Font</label>
|
||||
<select class="font-select" [value]="getFontValue('secondary')"
|
||||
(change)="onFontChange('secondary', $event.target.value); previewTheme()">
|
||||
<option *ngFor="let font of fontOptions" [value]="font.value">{{ font.name }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="font-preview" [style.font-family]="getFontValue('secondary')">
|
||||
The quick brown fox jumps over the lazy dog
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="font-group">
|
||||
<label class="font-label">Monospace Font</label>
|
||||
<select class="font-select" [value]="getFontValue('mono')"
|
||||
(change)="onFontChange('mono', $event.target.value); previewTheme()">
|
||||
<option *ngFor="let font of fontOptions" [value]="font.value">{{ font.name }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="font-preview" [style.font-family]="getFontValue('mono')">
|
||||
The quick brown fox jumps over the lazy dog
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advanced Settings -->
|
||||
<div class="customization-section">
|
||||
<h3 class="section-title">
|
||||
<clr-icon shape="cog"></clr-icon>
|
||||
Advanced Settings
|
||||
</h3>
|
||||
<div class="advanced-grid">
|
||||
<div class="advanced-group">
|
||||
<label class="advanced-label">Border Radius</label>
|
||||
<div class="range-input-group">
|
||||
<input type="range" class="range-slider" min="0" max="2" step="0.25"
|
||||
[value]="getBorderRadiusValue().replace('rem', '')"
|
||||
(input)="onBorderRadiusChange($event.target.value + 'rem'); previewTheme()">
|
||||
<span class="range-value">{{ getBorderRadiusValue() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="advanced-group">
|
||||
<label class="advanced-label">Shadow Intensity</label>
|
||||
<div class="range-input-group">
|
||||
<input type="range" class="range-slider" min="0" max="50" step="5"
|
||||
[value]="getShadowValueNumber()"
|
||||
(input)="onShadowChange('0 ' + $event.target.value + 'px 15px -3px rgba(0, 0, 0, 0.1)'); previewTheme()">
|
||||
<span class="range-value">{{ getShadowValueNumber() }}px</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Import/Export -->
|
||||
<div class="customization-section">
|
||||
<h3 class="section-title">
|
||||
<clr-icon shape="import"></clr-icon>
|
||||
Import/Export
|
||||
</h3>
|
||||
<div class="import-export-grid">
|
||||
<div class="import-group">
|
||||
<label class="import-label">Import Theme</label>
|
||||
<input type="file" class="file-input" accept=".json" (change)="importTheme($event)">
|
||||
<button class="modern-btn btn-outline">
|
||||
<clr-icon shape="upload"></clr-icon>
|
||||
Choose File
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,622 +0,0 @@
|
||||
// ========================================
|
||||
// THEME CUSTOMIZATION COMPONENT STYLES
|
||||
// ========================================
|
||||
@import '../../../../styles/design-tokens';
|
||||
|
||||
// Main Container
|
||||
// ========================================
|
||||
|
||||
.theme-customization-screen {
|
||||
min-height: 100vh;
|
||||
background: var(--theme-background, $gray-50);
|
||||
padding: $space-6;
|
||||
}
|
||||
|
||||
// Header
|
||||
// ========================================
|
||||
|
||||
.theme-header {
|
||||
background: var(--theme-surface, $white);
|
||||
border-radius: $radius-2xl;
|
||||
box-shadow: var(--theme-shadow, $shadow-lg);
|
||||
margin-bottom: $space-8;
|
||||
padding: $space-6;
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $space-4;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.header-left {
|
||||
.page-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-3;
|
||||
font-size: $text-3xl;
|
||||
font-weight: $font-bold;
|
||||
color: var(--theme-text, $gray-900);
|
||||
margin-bottom: $space-2;
|
||||
|
||||
clr-icon {
|
||||
color: var(--theme-primary, $primary-500);
|
||||
}
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: $text-lg;
|
||||
color: var(--theme-text-secondary, $gray-600);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: $space-3;
|
||||
flex-shrink: 0;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
width: 100%;
|
||||
justify-content: stretch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Main Content
|
||||
// ========================================
|
||||
|
||||
.theme-content {
|
||||
.theme-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 350px 1fr;
|
||||
gap: $space-8;
|
||||
min-height: 600px;
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: $space-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar
|
||||
// ========================================
|
||||
|
||||
.theme-sidebar {
|
||||
background: var(--theme-surface, $white);
|
||||
border-radius: $radius-2xl;
|
||||
box-shadow: var(--theme-shadow, $shadow-lg);
|
||||
padding: $space-6;
|
||||
height: fit-content;
|
||||
|
||||
.sidebar-section {
|
||||
margin-bottom: $space-6;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: $text-lg;
|
||||
font-weight: $font-semibold;
|
||||
color: var(--theme-text, $gray-900);
|
||||
margin-bottom: $space-4;
|
||||
}
|
||||
|
||||
.theme-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: $space-4;
|
||||
}
|
||||
|
||||
.theme-card {
|
||||
border: 2px solid transparent;
|
||||
border-radius: $radius-xl;
|
||||
padding: $space-4;
|
||||
cursor: pointer;
|
||||
transition: all $duration-200 $ease-out;
|
||||
background: var(--theme-surface, $white);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--theme-primary, $primary-200);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--theme-shadow, $shadow-lg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: var(--theme-primary, $primary-500);
|
||||
box-shadow: 0 0 0 3px rgba(var(--theme-primary, $primary-500), 0.1);
|
||||
}
|
||||
|
||||
.theme-preview {
|
||||
height: 80px;
|
||||
border-radius: $radius-lg;
|
||||
overflow: hidden;
|
||||
margin-bottom: $space-3;
|
||||
position: relative;
|
||||
|
||||
.preview-header {
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
padding: $space-3;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.preview-card {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.preview-text {
|
||||
font-size: $text-xs;
|
||||
font-weight: $font-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-info {
|
||||
.theme-name {
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-semibold;
|
||||
color: var(--theme-text, $gray-900);
|
||||
margin-bottom: $space-2;
|
||||
}
|
||||
|
||||
.theme-colors {
|
||||
display: flex;
|
||||
gap: $space-2;
|
||||
|
||||
.color-dot {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--theme-surface, $white);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Main Panel
|
||||
// ========================================
|
||||
|
||||
.theme-main {
|
||||
background: var(--theme-surface, $white);
|
||||
border-radius: $radius-2xl;
|
||||
box-shadow: var(--theme-shadow, $shadow-lg);
|
||||
padding: $space-6;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
// Welcome State
|
||||
// ========================================
|
||||
|
||||
.welcome-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
|
||||
.welcome-content {
|
||||
text-align: center;
|
||||
max-width: 500px;
|
||||
|
||||
.welcome-icon {
|
||||
margin-bottom: $space-6;
|
||||
|
||||
clr-icon {
|
||||
color: var(--theme-primary, $primary-500);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $text-2xl;
|
||||
font-weight: $font-bold;
|
||||
color: var(--theme-text, $gray-900);
|
||||
margin-bottom: $space-4;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $text-lg;
|
||||
color: var(--theme-text-secondary, $gray-600);
|
||||
margin-bottom: $space-8;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.current-theme-info {
|
||||
h3 {
|
||||
font-size: $text-xl;
|
||||
font-weight: $font-semibold;
|
||||
color: var(--theme-text, $gray-900);
|
||||
margin-bottom: $space-4;
|
||||
}
|
||||
|
||||
.theme-preview-large {
|
||||
height: 120px;
|
||||
border-radius: $radius-xl;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: var(--theme-shadow, $shadow-lg);
|
||||
|
||||
.preview-header {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
padding: $space-4;
|
||||
height: 90px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.preview-card {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.preview-text {
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-semibold;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.preview-text-secondary {
|
||||
font-size: $text-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Customization Panel
|
||||
// ========================================
|
||||
|
||||
.customization-panel {
|
||||
.customization-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $space-8;
|
||||
padding-bottom: $space-4;
|
||||
border-bottom: 1px solid var(--theme-text-secondary, $gray-200);
|
||||
|
||||
h2 {
|
||||
font-size: $text-2xl;
|
||||
font-weight: $font-bold;
|
||||
color: var(--theme-text, $gray-900);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: $space-3;
|
||||
}
|
||||
}
|
||||
|
||||
.customization-section {
|
||||
margin-bottom: $space-8;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-2;
|
||||
font-size: $text-lg;
|
||||
font-weight: $font-semibold;
|
||||
color: var(--theme-text, $gray-900);
|
||||
margin-bottom: $space-4;
|
||||
|
||||
clr-icon {
|
||||
color: var(--theme-primary, $primary-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Color Customization
|
||||
// ========================================
|
||||
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: $space-6;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.color-group {
|
||||
.color-label {
|
||||
display: block;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
color: var(--theme-text, $gray-700);
|
||||
margin-bottom: $space-2;
|
||||
}
|
||||
|
||||
.color-input-group {
|
||||
display: flex;
|
||||
gap: $space-2;
|
||||
margin-bottom: $space-3;
|
||||
|
||||
.color-picker {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: $radius-lg;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: $radius-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.color-text {
|
||||
flex: 1;
|
||||
padding: $space-2 $space-3;
|
||||
border: 1px solid var(--theme-text-secondary, $gray-300);
|
||||
border-radius: $radius-lg;
|
||||
font-size: $text-sm;
|
||||
color: var(--theme-text, $gray-900);
|
||||
background: var(--theme-surface, $white);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--theme-primary, $primary-500);
|
||||
box-shadow: 0 0 0 3px rgba(var(--theme-primary, $primary-500), 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-presets {
|
||||
display: flex;
|
||||
gap: $space-2;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.preset-color {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
border: 2px solid var(--theme-surface, $white);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: transform $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Font Customization
|
||||
// ========================================
|
||||
|
||||
.font-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: $space-6;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.font-group {
|
||||
.font-label {
|
||||
display: block;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
color: var(--theme-text, $gray-700);
|
||||
margin-bottom: $space-2;
|
||||
}
|
||||
|
||||
.font-select {
|
||||
width: 100%;
|
||||
padding: $space-2 $space-3;
|
||||
border: 1px solid var(--theme-text-secondary, $gray-300);
|
||||
border-radius: $radius-lg;
|
||||
font-size: $text-sm;
|
||||
color: var(--theme-text, $gray-900);
|
||||
background: var(--theme-surface, $white);
|
||||
margin-bottom: $space-3;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--theme-primary, $primary-500);
|
||||
box-shadow: 0 0 0 3px rgba(var(--theme-primary, $primary-500), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.font-preview {
|
||||
padding: $space-3;
|
||||
background: var(--theme-background, $gray-50);
|
||||
border-radius: $radius-lg;
|
||||
font-size: $text-sm;
|
||||
color: var(--theme-text, $gray-700);
|
||||
border: 1px solid var(--theme-text-secondary, $gray-200);
|
||||
}
|
||||
}
|
||||
|
||||
// Advanced Settings
|
||||
// ========================================
|
||||
|
||||
.advanced-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: $space-6;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.advanced-group {
|
||||
.advanced-label {
|
||||
display: block;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
color: var(--theme-text, $gray-700);
|
||||
margin-bottom: $space-2;
|
||||
}
|
||||
|
||||
.range-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-3;
|
||||
|
||||
.range-slider {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: var(--theme-text-secondary, $gray-300);
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--theme-primary, $primary-500);
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--theme-primary, $primary-500);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.range-value {
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
color: var(--theme-text, $gray-700);
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Import/Export
|
||||
// ========================================
|
||||
|
||||
.import-export-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: $space-6;
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.import-group {
|
||||
.import-label {
|
||||
display: block;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
color: var(--theme-text, $gray-700);
|
||||
margin-bottom: $space-2;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive Design
|
||||
// ========================================
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
.theme-customization-screen {
|
||||
padding: $space-4;
|
||||
}
|
||||
|
||||
.theme-header {
|
||||
padding: $space-4;
|
||||
}
|
||||
|
||||
.theme-sidebar,
|
||||
.theme-main {
|
||||
padding: $space-4;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
.theme-customization-screen {
|
||||
padding: $space-3;
|
||||
}
|
||||
|
||||
.theme-header {
|
||||
padding: $space-3;
|
||||
}
|
||||
|
||||
.theme-sidebar,
|
||||
.theme-main {
|
||||
padding: $space-3;
|
||||
}
|
||||
|
||||
.color-grid,
|
||||
.font-grid,
|
||||
.advanced-grid,
|
||||
.import-export-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
.theme-customization-screen {
|
||||
padding: $space-2;
|
||||
}
|
||||
|
||||
.theme-header {
|
||||
padding: $space-3;
|
||||
}
|
||||
|
||||
.theme-sidebar,
|
||||
.theme-main {
|
||||
padding: $space-3;
|
||||
}
|
||||
}
|
||||
@@ -1,246 +0,0 @@
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { ThemeService, Theme } from '../../../services/theme.service';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-theme-customization',
|
||||
templateUrl: './theme-customization.component.html',
|
||||
styleUrls: ['./theme-customization.component.scss']
|
||||
})
|
||||
export class ThemeCustomizationComponent implements OnInit, OnDestroy {
|
||||
themes: Theme[] = [];
|
||||
currentTheme: Theme | null = null;
|
||||
customTheme: Partial<Theme> = {
|
||||
colors: {
|
||||
primary: '#0ea5e9',
|
||||
secondary: '#64748b',
|
||||
accent: '#8b5cf6',
|
||||
background: '#f8fafc',
|
||||
surface: '#ffffff',
|
||||
text: '#111827',
|
||||
textSecondary: '#6b7280'
|
||||
},
|
||||
fonts: {
|
||||
primary: 'Inter',
|
||||
secondary: 'Poppins',
|
||||
mono: 'JetBrains Mono'
|
||||
},
|
||||
borderRadius: '0.75rem',
|
||||
shadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
|
||||
};
|
||||
isCustomizing = false;
|
||||
showAdvanced = false;
|
||||
|
||||
private themeSubscription: Subscription = new Subscription();
|
||||
|
||||
// Color presets and font options from service
|
||||
colorPresets = this.themeService.getColorPresets();
|
||||
fontOptions = this.themeService.getFontOptions();
|
||||
|
||||
constructor(private themeService: ThemeService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.themes = this.themeService.getThemes();
|
||||
this.currentTheme = this.themeService.getCurrentTheme();
|
||||
|
||||
this.themeSubscription = this.themeService.currentTheme$.subscribe(theme => {
|
||||
this.currentTheme = theme;
|
||||
});
|
||||
|
||||
this.initializeCustomTheme();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.themeSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
selectTheme(themeId: string): void {
|
||||
this.themeService.selectTheme(themeId);
|
||||
this.isCustomizing = false;
|
||||
}
|
||||
|
||||
startCustomizing(): void {
|
||||
this.isCustomizing = true;
|
||||
this.initializeCustomTheme();
|
||||
}
|
||||
|
||||
cancelCustomizing(): void {
|
||||
this.isCustomizing = false;
|
||||
this.initializeCustomTheme();
|
||||
}
|
||||
|
||||
applyCustomTheme(): void {
|
||||
if (this.customTheme.colors && this.customTheme.fonts) {
|
||||
const customTheme: Theme = {
|
||||
id: 'custom',
|
||||
name: 'Custom Theme',
|
||||
colors: this.customTheme.colors,
|
||||
fonts: this.customTheme.fonts,
|
||||
borderRadius: this.customTheme.borderRadius || '0.5rem',
|
||||
shadow: this.customTheme.shadow || '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
|
||||
};
|
||||
this.themeService.applyTheme(customTheme);
|
||||
}
|
||||
this.isCustomizing = false;
|
||||
}
|
||||
|
||||
resetToDefault(): void {
|
||||
this.themeService.resetToDefault();
|
||||
}
|
||||
|
||||
exportTheme(): void {
|
||||
const themeJson = this.themeService.exportTheme();
|
||||
this.downloadFile(themeJson, 'theme.json', 'application/json');
|
||||
}
|
||||
|
||||
importTheme(event: any): void {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const content = e.target?.result as string;
|
||||
if (this.themeService.importTheme(content)) {
|
||||
alert('Theme imported successfully!');
|
||||
} else {
|
||||
alert('Failed to import theme. Please check the file format.');
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
}
|
||||
|
||||
private initializeCustomTheme(): void {
|
||||
if (this.currentTheme) {
|
||||
this.customTheme = {
|
||||
colors: {
|
||||
primary: this.currentTheme.colors.primary,
|
||||
secondary: this.currentTheme.colors.secondary,
|
||||
accent: this.currentTheme.colors.accent,
|
||||
background: this.currentTheme.colors.background,
|
||||
surface: this.currentTheme.colors.surface,
|
||||
text: this.currentTheme.colors.text,
|
||||
textSecondary: this.currentTheme.colors.textSecondary
|
||||
},
|
||||
fonts: {
|
||||
primary: this.currentTheme.fonts.primary,
|
||||
secondary: this.currentTheme.fonts.secondary,
|
||||
mono: this.currentTheme.fonts.mono
|
||||
},
|
||||
borderRadius: this.currentTheme.borderRadius,
|
||||
shadow: this.currentTheme.shadow
|
||||
};
|
||||
} else {
|
||||
// Default values if no current theme
|
||||
this.customTheme = {
|
||||
colors: {
|
||||
primary: '#0ea5e9',
|
||||
secondary: '#64748b',
|
||||
accent: '#8b5cf6',
|
||||
background: '#f8fafc',
|
||||
surface: '#ffffff',
|
||||
text: '#111827',
|
||||
textSecondary: '#6b7280'
|
||||
},
|
||||
fonts: {
|
||||
primary: 'Inter',
|
||||
secondary: 'Poppins',
|
||||
mono: 'JetBrains Mono'
|
||||
},
|
||||
borderRadius: '0.75rem',
|
||||
shadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
private downloadFile(content: string, filename: string, contentType: string): void {
|
||||
const blob = new Blob([content], { type: contentType });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
link.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
// Color picker methods
|
||||
onColorChange(colorType: string, value: string): void {
|
||||
if (!this.customTheme.colors) {
|
||||
this.customTheme.colors = {
|
||||
primary: '#0ea5e9',
|
||||
secondary: '#64748b',
|
||||
accent: '#8b5cf6',
|
||||
background: '#f8fafc',
|
||||
surface: '#ffffff',
|
||||
text: '#111827',
|
||||
textSecondary: '#6b7280'
|
||||
};
|
||||
}
|
||||
(this.customTheme.colors as any)[colorType] = value;
|
||||
}
|
||||
|
||||
// Font picker methods
|
||||
onFontChange(fontType: string, value: string): void {
|
||||
if (!this.customTheme.fonts) {
|
||||
this.customTheme.fonts = {
|
||||
primary: 'Inter',
|
||||
secondary: 'Poppins',
|
||||
mono: 'JetBrains Mono'
|
||||
};
|
||||
}
|
||||
(this.customTheme.fonts as any)[fontType] = value;
|
||||
}
|
||||
|
||||
// Border radius methods
|
||||
onBorderRadiusChange(value: string): void {
|
||||
this.customTheme.borderRadius = value;
|
||||
}
|
||||
|
||||
// Shadow methods
|
||||
onShadowChange(value: string): void {
|
||||
this.customTheme.shadow = value;
|
||||
}
|
||||
|
||||
// Preview methods
|
||||
previewTheme(): void {
|
||||
if (this.isCustomizing && this.customTheme.colors && this.customTheme.fonts) {
|
||||
const previewTheme: Theme = {
|
||||
id: 'preview',
|
||||
name: 'Preview Theme',
|
||||
colors: this.customTheme.colors,
|
||||
fonts: this.customTheme.fonts,
|
||||
borderRadius: this.customTheme.borderRadius || '0.5rem',
|
||||
shadow: this.customTheme.shadow || '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
|
||||
};
|
||||
this.themeService.applyTheme(previewTheme);
|
||||
}
|
||||
}
|
||||
|
||||
// Utility methods
|
||||
getColorValue(colorType: string): string {
|
||||
if (this.customTheme.colors) {
|
||||
return (this.customTheme.colors as any)[colorType] || '#0ea5e9';
|
||||
}
|
||||
return '#0ea5e9';
|
||||
}
|
||||
|
||||
getFontValue(fontType: string): string {
|
||||
if (this.customTheme.fonts) {
|
||||
return (this.customTheme.fonts as any)[fontType] || 'Inter';
|
||||
}
|
||||
return 'Inter';
|
||||
}
|
||||
|
||||
getBorderRadiusValue(): string {
|
||||
return this.customTheme.borderRadius || '0.75rem';
|
||||
}
|
||||
|
||||
getShadowValue(): string {
|
||||
return this.customTheme.shadow || '0 10px 15px -3px rgba(0, 0, 0, 0.1)';
|
||||
}
|
||||
|
||||
getShadowValueNumber(): string {
|
||||
const shadowValue = this.getShadowValue();
|
||||
const match = shadowValue.match(/\d+/);
|
||||
return match ? match[0] : '10';
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { Observable, BehaviorSubject, Subject } from 'rxjs';
|
||||
import { Observable, BehaviorSubject } from 'rxjs';
|
||||
import { UserInfoService, LoginInfoInStorage} from '../user-info.service';
|
||||
import { ApiRequestService } from './api-request.service';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
@@ -43,15 +43,12 @@ export class LoginService {
|
||||
|
||||
*/
|
||||
|
||||
// let loginDataSubject:BehaviorSubject<any> = new BehaviorSubject<any>([]); // Will use this BehaviorSubject to emit data that we want after ajax login attempt
|
||||
let loginDataSubject: Subject<any> = new Subject<any>();
|
||||
|
||||
let loginDataSubject:BehaviorSubject<any> = new BehaviorSubject<any>([]); // Will use this BehaviorSubject to emit data that we want after ajax login attempt
|
||||
let loginInfoReturn:LoginInfoInStorage; // Object that we want to send back to Login Page
|
||||
|
||||
this.apiRequest.loginAuthentication('token/session', bodyData)
|
||||
.subscribe({
|
||||
next: (jsonResp) => {
|
||||
console.log('login response in service : ', jsonResp);
|
||||
.subscribe(jsonResp => {
|
||||
console.log('login response: ', jsonResp);
|
||||
if (jsonResp.operationMessage=='Login Failed') {
|
||||
this.toastr.warning('Not Login Getting Error check your Username and password');
|
||||
}
|
||||
@@ -81,17 +78,16 @@ export class LoginService {
|
||||
this.userInfoService.storeUserInfo(JSON.stringify(loginInfoReturn.user));
|
||||
}
|
||||
else {
|
||||
//Create a failure object that we want to send back to login page
|
||||
//Create a faliure object that we want to send back to login page
|
||||
loginInfoReturn = {
|
||||
"success":false,
|
||||
"message":jsonResp.operationMessage,
|
||||
"message":jsonResp.msgDesc,
|
||||
"landingPage":"/login"
|
||||
};
|
||||
}
|
||||
loginDataSubject.next(loginInfoReturn);
|
||||
loginDataSubject.complete(); // Complete the subject
|
||||
},
|
||||
error: (err) => {
|
||||
err => {
|
||||
console.log('login error ', err);
|
||||
loginInfoReturn = {
|
||||
"success": false,
|
||||
@@ -101,9 +97,6 @@ export class LoginService {
|
||||
if (err) {
|
||||
this.toastr.error('Getting Server Error');
|
||||
}
|
||||
loginDataSubject.next(loginInfoReturn); // Send the error response
|
||||
loginDataSubject.complete(); // Complete the subject
|
||||
}
|
||||
});
|
||||
|
||||
return loginDataSubject;
|
||||
|
||||
@@ -8,10 +8,8 @@ import { Observable } from 'rxjs';
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AdditionalcontainerService {
|
||||
// baseurl = environment.sureops;
|
||||
baseurl = environment.backendUrl;
|
||||
|
||||
private baseURL = "Gaurav_testing/Gaurav_testing";
|
||||
baseurl = environment.sureops;
|
||||
private baseURL = "Gaurav_testing/Gaurav_testing" ;
|
||||
constructor(private apiRequest: ApiRequestService,
|
||||
private _http: HttpClient,) { }
|
||||
|
||||
@@ -46,7 +44,7 @@ export class AdditionalcontainerService {
|
||||
const url = `${this.baseurl}/sureops/Additional_container/copt_to_deployment/${projId}/${profileId}/${service}`;
|
||||
return this._http.get(url);
|
||||
}
|
||||
// get all by project id and profile id
|
||||
// get all by project id and profile id
|
||||
getAllContainers(projId: number, profileId: number): Observable<any> {
|
||||
const url = `${this.baseurl}/sureops/Additional_container/copt_to_deployment/${projId}/${profileId}`;
|
||||
return this._http.get(url);
|
||||
@@ -54,24 +52,24 @@ export class AdditionalcontainerService {
|
||||
|
||||
|
||||
|
||||
/////////////////////////////////////
|
||||
/////////////////////////////////////
|
||||
|
||||
getAll(page?: number, size?: number): Observable<any> {
|
||||
getAll(page?: number, size?: number): Observable<any> {
|
||||
return this.apiRequest.get(this.baseURL);
|
||||
}
|
||||
getById(id: number): Observable<any> {
|
||||
}
|
||||
getById(id: number): Observable<any> {
|
||||
const _http = this.baseURL + "/" + id;
|
||||
return this.apiRequest.get(_http);
|
||||
}
|
||||
create(data: any): Observable<any> {
|
||||
}
|
||||
create(data: any): Observable<any> {
|
||||
return this.apiRequest.post(this.baseURL, data);
|
||||
}
|
||||
updategaurav(id: number, data: any): Observable<any> {
|
||||
}
|
||||
updategaurav(id: number, data: any): Observable<any> {
|
||||
const _http = this.baseURL + "/" + id;
|
||||
return this.apiRequest.put(_http, data);
|
||||
}
|
||||
delete(id: number): Observable<any> {
|
||||
}
|
||||
delete(id: number): Observable<any> {
|
||||
const _http = this.baseURL + "/" + id;
|
||||
return this.apiRequest.delete(_http);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@ export class Dashboard3Service {
|
||||
private updateURL = 'update_Dashbord1_Lineby_id';
|
||||
constructor(private _http: HttpClient,
|
||||
private apiRequest: ApiRequestService) { }
|
||||
getAll(module_id: number, page?: number, size?: number): Observable<any> {
|
||||
getAll(module_id: number,page?: number, size?: number): Observable<any> {
|
||||
// create Request URL params
|
||||
let me = this;
|
||||
let params: HttpParams = new HttpParams();
|
||||
@@ -30,41 +30,44 @@ export class Dashboard3Service {
|
||||
return this.apiRequest.get(this.getAllURL, params);
|
||||
}
|
||||
|
||||
create(data: any): Observable<any> {
|
||||
create(data:any): Observable<any> {
|
||||
return this.apiRequest.post(this.addDataURl, data);
|
||||
}
|
||||
|
||||
deleteField(id: number) {
|
||||
deleteField(id:number){
|
||||
let _http = this.deleteFieldURL + "/" + id;
|
||||
return this.apiRequest.delete(_http);
|
||||
}
|
||||
|
||||
getById(id: number) {
|
||||
getById(id:number)
|
||||
{
|
||||
let _http = this.getbyidURL + "/" + id;
|
||||
return this.apiRequest.get(_http);
|
||||
}
|
||||
|
||||
addToDB(line: any): Observable<any> {
|
||||
return this.apiRequest.put(this.editURL, line);
|
||||
addToDB(line:any):Observable<any>
|
||||
{
|
||||
return this.apiRequest.put(this.editURL,line);
|
||||
}
|
||||
UpdateLineData(id: number, line: any) {
|
||||
UpdateLineData(id:number, line:any)
|
||||
{
|
||||
// line = {
|
||||
// headers: new HttpHeaders({
|
||||
// 'Content-Type': 'application/json'
|
||||
// })
|
||||
// };
|
||||
let _http = this.updateURL + "/" + id;
|
||||
return this.apiRequest.put(_http, line);
|
||||
return this.apiRequest.put(_http,line);
|
||||
}
|
||||
getcount(moduleId: number): Observable<any> {
|
||||
getcount(moduleId: number):Observable<any>{
|
||||
return this.apiRequest.get(`get_dashboard/${moduleId}`);
|
||||
}
|
||||
}
|
||||
|
||||
updateDash(dashboardHeader: any): Observable<any> {
|
||||
updateDash(dashboardHeader: any): Observable<any> {
|
||||
return this.apiRequest.put('update_dashboard_header', dashboardHeader);
|
||||
}
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
resetConditions() {
|
||||
}
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
resetConditions() {
|
||||
this.ids = []; // Reset the ids array to an empty array
|
||||
this.numberIds = [];
|
||||
this.passwordIds = [];
|
||||
@@ -80,154 +83,154 @@ export class Dashboard3Service {
|
||||
this.decimalIds = [];
|
||||
this.percentageIds = [];
|
||||
this.buttonIds = [];
|
||||
}
|
||||
}
|
||||
|
||||
//////////// Text
|
||||
ids: any[] = [];
|
||||
setCondition(condition: any) {
|
||||
//////////// Text
|
||||
ids: any[] = [];
|
||||
setCondition(condition: any) {
|
||||
this.ids.push(condition);
|
||||
}
|
||||
}
|
||||
|
||||
getConditions(): any[] {
|
||||
getConditions(): any[] {
|
||||
return this.ids;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
////////// Number
|
||||
numberIds: any[] = [];
|
||||
setnumber(id: any) {
|
||||
////////// Number
|
||||
numberIds: any[] = [];
|
||||
setnumber(id: any) {
|
||||
this.numberIds.push(id);
|
||||
}
|
||||
}
|
||||
|
||||
getnumber(): any[] {
|
||||
getnumber(): any[] {
|
||||
return this.numberIds;
|
||||
}
|
||||
////////////// password
|
||||
passwordIds: any[] = [];
|
||||
setpassword(id: any) {
|
||||
}
|
||||
////////////// password
|
||||
passwordIds: any[] = [];
|
||||
setpassword(id: any) {
|
||||
this.passwordIds.push(id);
|
||||
}
|
||||
}
|
||||
|
||||
getpassword(): any[] {
|
||||
getpassword(): any[] {
|
||||
return this.passwordIds;
|
||||
}
|
||||
}
|
||||
|
||||
////////////// Textarea
|
||||
textareaIds: any[] = [];
|
||||
setTextarea(id: any) {
|
||||
////////////// Textarea
|
||||
textareaIds: any[] = [];
|
||||
setTextarea(id: any) {
|
||||
this.textareaIds.push(id);
|
||||
}
|
||||
}
|
||||
|
||||
getTextarea(): any[] {
|
||||
getTextarea(): any[] {
|
||||
return this.textareaIds;
|
||||
}
|
||||
}
|
||||
|
||||
////////////// Date
|
||||
dateIds: any[] = [];
|
||||
setDate(id: any) {
|
||||
////////////// Date
|
||||
dateIds: any[] = [];
|
||||
setDate(id: any) {
|
||||
this.dateIds.push(id);
|
||||
}
|
||||
}
|
||||
|
||||
getDate(): any[] {
|
||||
getDate(): any[] {
|
||||
return this.dateIds;
|
||||
}
|
||||
}
|
||||
|
||||
////////////// Datetime
|
||||
datetimeIds: any[] = [];
|
||||
setDatetime(id: any) {
|
||||
////////////// Datetime
|
||||
datetimeIds: any[] = [];
|
||||
setDatetime(id: any) {
|
||||
this.datetimeIds.push(id);
|
||||
}
|
||||
}
|
||||
|
||||
getDatetime(): any[] {
|
||||
getDatetime(): any[] {
|
||||
return this.datetimeIds;
|
||||
}
|
||||
}
|
||||
|
||||
////////////// Email
|
||||
emailIds: any[] = [];
|
||||
setEmail(id: any) {
|
||||
////////////// Email
|
||||
emailIds: any[] = [];
|
||||
setEmail(id: any) {
|
||||
this.emailIds.push(id);
|
||||
}
|
||||
}
|
||||
|
||||
getEmail(): any[] {
|
||||
getEmail(): any[] {
|
||||
return this.emailIds;
|
||||
}
|
||||
}
|
||||
|
||||
////////////// Select
|
||||
selectIds: any[] = [];
|
||||
setSelect(id: any) {
|
||||
////////////// Select
|
||||
selectIds: any[] = [];
|
||||
setSelect(id: any) {
|
||||
this.selectIds.push(id);
|
||||
}
|
||||
}
|
||||
|
||||
getSelect(): any[] {
|
||||
getSelect(): any[] {
|
||||
return this.selectIds;
|
||||
}
|
||||
}
|
||||
|
||||
////////////// Radio
|
||||
radioIds: any[] = [];
|
||||
setRadio(id: any) {
|
||||
////////////// Radio
|
||||
radioIds: any[] = [];
|
||||
setRadio(id: any) {
|
||||
this.radioIds.push(id);
|
||||
}
|
||||
}
|
||||
|
||||
getRadio(): any[] {
|
||||
getRadio(): any[] {
|
||||
return this.radioIds;
|
||||
}
|
||||
}
|
||||
|
||||
////////////// Checkbox
|
||||
checkboxIds: any[] = [];
|
||||
setCheckbox(id: any) {
|
||||
////////////// Checkbox
|
||||
checkboxIds: any[] = [];
|
||||
setCheckbox(id: any) {
|
||||
this.checkboxIds.push(id);
|
||||
}
|
||||
}
|
||||
|
||||
getCheckbox(): any[] {
|
||||
getCheckbox(): any[] {
|
||||
return this.checkboxIds;
|
||||
}
|
||||
}
|
||||
|
||||
////////////// fileupload
|
||||
fileuloadIds: any[] = [];
|
||||
setFileUpload(id: any) {
|
||||
////////////// fileupload
|
||||
fileuloadIds: any[] = [];
|
||||
setFileUpload(id: any) {
|
||||
this.fileuloadIds.push(id);
|
||||
}
|
||||
}
|
||||
|
||||
getFileupload(): any[] {
|
||||
getFileupload(): any[] {
|
||||
return this.fileuloadIds;
|
||||
}
|
||||
}
|
||||
|
||||
////////////// Url
|
||||
urlIds: any[] = [];
|
||||
setUrl(id: any) {
|
||||
////////////// Url
|
||||
urlIds: any[] = [];
|
||||
setUrl(id: any) {
|
||||
this.urlIds.push(id);
|
||||
}
|
||||
}
|
||||
|
||||
getUrl(): any[] {
|
||||
getUrl(): any[] {
|
||||
return this.urlIds;
|
||||
}
|
||||
////////////// Decimal
|
||||
decimalIds: any[] = [];
|
||||
setDecimal(id: any) {
|
||||
}
|
||||
////////////// Decimal
|
||||
decimalIds: any[] = [];
|
||||
setDecimal(id: any) {
|
||||
this.decimalIds.push(id);
|
||||
}
|
||||
}
|
||||
|
||||
getDecimal(): any[] {
|
||||
getDecimal(): any[] {
|
||||
return this.decimalIds;
|
||||
}
|
||||
////////////// Percentage
|
||||
percentageIds: any[] = [];
|
||||
setPercentage(id: any) {
|
||||
}
|
||||
////////////// Percentage
|
||||
percentageIds: any[] = [];
|
||||
setPercentage(id: any) {
|
||||
this.percentageIds.push(id);
|
||||
}
|
||||
}
|
||||
|
||||
getPercentage(): any[] {
|
||||
getPercentage(): any[] {
|
||||
return this.percentageIds;
|
||||
}
|
||||
////////////// Button
|
||||
buttonIds: any[] = [];
|
||||
setButton(id: any) {
|
||||
}
|
||||
////////////// Button
|
||||
buttonIds: any[] = [];
|
||||
setButton(id: any) {
|
||||
this.buttonIds.push(id);
|
||||
}
|
||||
}
|
||||
|
||||
getButton(): any[] {
|
||||
getButton(): any[] {
|
||||
return this.buttonIds;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -237,12 +240,12 @@ export class Dashboard3Service {
|
||||
|
||||
|
||||
|
||||
getAllDash(): Observable<any> {
|
||||
getAllDash(): Observable<any> {
|
||||
// create Request URL params
|
||||
return this.apiRequest.get(`get_Dashboard_header`);
|
||||
}
|
||||
|
||||
getAllByModuleId(module_id: number, page?: number, size?: number): Observable<any> {
|
||||
getAllByModuleId(module_id: number,page?: number, size?: number): Observable<any> {
|
||||
// create Request URL params
|
||||
let me = this;
|
||||
let params: HttpParams = new HttpParams();
|
||||
@@ -253,86 +256,53 @@ export class Dashboard3Service {
|
||||
return this.apiRequest.get(this.getAllURL, params);
|
||||
}
|
||||
|
||||
///////schedule
|
||||
public saveData(data: any): Observable<any> {
|
||||
///////schedule
|
||||
public saveData(data: any): Observable<any> {
|
||||
return this.apiRequest.post(`DashboardSchedule/DashboardSchedule`, data);
|
||||
}
|
||||
|
||||
public getDetails(): Observable<any> {
|
||||
return this.apiRequest.get(`DashboardSchedule/DashboardSchedule`);
|
||||
}
|
||||
|
||||
public getDetailsById(id: number): Observable<any> {
|
||||
return this.apiRequest.get(`DashboardSchedule/DashboardSchedule/${id}`);
|
||||
}
|
||||
|
||||
public deleteById(id: number): Observable<any> {
|
||||
return this.apiRequest.delete(`DashboardSchedule/DashboardSchedule/${id}`);
|
||||
}
|
||||
|
||||
public updateData(data: any, id: number): Observable<any> {
|
||||
return this.apiRequest.put(`DashboardSchedule/DashboardSchedule/${id}`, data);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
|
||||
public getDynamicDashDetails(): Observable<any> {
|
||||
return this.apiRequest.get(`Dashboard/Dashboard`);
|
||||
}
|
||||
|
||||
public getChartData(tableName: string, jobType: string, xAxis?: any, yAxes?: any, sureId?: number, parameter?: string, parameterValue?: string, filters?: string): Observable<any> {
|
||||
let url = `${baseUrl}/chart/getdashjson/${jobType}?tableName=${tableName}&xAxis=${xAxis}&yAxes=${yAxes}`;
|
||||
if (sureId) {
|
||||
url += `&sureId=${sureId}`;
|
||||
}
|
||||
if (parameter) {
|
||||
url += `¶meter=${encodeURIComponent(parameter)}`;
|
||||
}
|
||||
if (parameterValue) {
|
||||
url += `¶meterValue=${encodeURIComponent(parameterValue)}`;
|
||||
}
|
||||
|
||||
console.log('=== DASHBOARD SERVICE DEBUG INFO ===');
|
||||
console.log('Base URL:', url);
|
||||
console.log('Filters parameter:', filters);
|
||||
|
||||
// Parse filters JSON and add as a single "filters" parameter
|
||||
if (filters) {
|
||||
try {
|
||||
const filterObj = JSON.parse(filters);
|
||||
console.log('Parsed filter object:', filterObj);
|
||||
|
||||
// Add all filters as a single "filters" parameter with JSON object
|
||||
url += `&filters=${encodeURIComponent(JSON.stringify(filterObj))}`;
|
||||
console.log('Added filters parameter:', JSON.stringify(filterObj));
|
||||
} catch (e) {
|
||||
console.warn('Failed to parse filter parameters:', e);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Final constructed URL:', url);
|
||||
console.log('=== END DASHBOARD SERVICE DEBUG ===');
|
||||
return this._http.get(url);
|
||||
}
|
||||
|
||||
public getUrlChartData(tableName: string, jobType: string, xAxis: any, yAxes: any, store: any, chartUrl: any, sureId?: number): Observable<any> {
|
||||
let url = `${baseUrl}/chart/getdashjson/${jobType}?tableName=${tableName}&url=${chartUrl}&xAxis=${xAxis}&yAxes=${yAxes}&datastore_name=${store}`;
|
||||
if (sureId) {
|
||||
url += `&sureId=${sureId}`;
|
||||
}
|
||||
return this._http.get(url);
|
||||
}
|
||||
|
||||
featchDynamicUrlDetails(url): Observable<any> {
|
||||
return this._http.get(`${url}`);
|
||||
}
|
||||
|
||||
|
||||
private filteredDataSubject = new BehaviorSubject<any[]>([]);
|
||||
filteredData$ = this.filteredDataSubject.asObservable();
|
||||
|
||||
updateFilteredData(filteredData: any[]) {
|
||||
this.filteredDataSubject.next(filteredData);
|
||||
}
|
||||
}
|
||||
|
||||
public getDetails(): Observable<any> {
|
||||
return this.apiRequest.get(`DashboardSchedule/DashboardSchedule`);
|
||||
}
|
||||
|
||||
public getDetailsById(id: number): Observable<any> {
|
||||
return this.apiRequest.get(`DashboardSchedule/DashboardSchedule/${id}`);
|
||||
}
|
||||
|
||||
public deleteById(id: number): Observable<any> {
|
||||
return this.apiRequest.delete(`DashboardSchedule/DashboardSchedule/${id}`);
|
||||
}
|
||||
|
||||
public updateData(data: any, id: number): Observable<any> {
|
||||
return this.apiRequest.put(`DashboardSchedule/DashboardSchedule/${id}`, data);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
|
||||
public getDynamicDashDetails(): Observable<any> {
|
||||
return this.apiRequest.get(`Dashboard/Dashboard`);
|
||||
}
|
||||
|
||||
public getChartData(tableName: string, jobType: string, xAxis?:any,yAxes?:any ): Observable<any> {
|
||||
const url = `${baseUrl}/chart/getdashjson/${jobType}?tableName=${tableName}&xAxis=${xAxis}&yAxes=${yAxes}`;
|
||||
return this._http.get(url);
|
||||
}
|
||||
|
||||
public getUrlChartData(tableName: string, jobType: string, xAxis:any,yAxes:any,store:any,chartUrl:any): Observable<any> {
|
||||
const url = `${baseUrl}/chart/getdashjson/${jobType}?tableName=${tableName}&url=${chartUrl}&xAxis=${xAxis}&yAxes=${yAxes}&datastore_name=${store}`;
|
||||
return this._http.get(url);
|
||||
}
|
||||
|
||||
featchDynamicUrlDetails(url): Observable<any> {
|
||||
return this._http.get(`${url}`);
|
||||
}
|
||||
|
||||
|
||||
private filteredDataSubject = new BehaviorSubject<any[]>([]);
|
||||
filteredData$ = this.filteredDataSubject.asObservable();
|
||||
|
||||
updateFilteredData(filteredData: any[]) {
|
||||
this.filteredDataSubject.next(filteredData);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,20 +62,7 @@ export class AlertsService {
|
||||
return this.apiRequest.get(`AlertRules/columnlist/${id}/${tableName}`);
|
||||
}
|
||||
|
||||
public getColumnfromurl(url: any, sureId?: number): Observable<any> {
|
||||
let apiUrl = `chart/getAllKeys?apiUrl=${url}`;
|
||||
if (sureId) {
|
||||
apiUrl += `&sureId=${sureId}`;
|
||||
}
|
||||
return this.apiRequest.get(apiUrl);
|
||||
}
|
||||
|
||||
// Get values for a specific key from API
|
||||
public getValuesFromUrl(url: string, sureId: number | undefined, key: string): Observable<any> {
|
||||
let apiUrl = `chart/getValue?apiUrl=${url}&key=${key}`;
|
||||
if (sureId) {
|
||||
apiUrl += `&sureId=${sureId}`;
|
||||
}
|
||||
return this.apiRequest.get(apiUrl);
|
||||
public getColumnfromurl(url: any): Observable<any> {
|
||||
return this.apiRequest.get(`chart/getAllKeys?apiUrl=${url}`);
|
||||
}
|
||||
}
|
||||
@@ -1,326 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
|
||||
export interface ThemeColors {
|
||||
primary: string;
|
||||
secondary: string;
|
||||
accent: string;
|
||||
background: string;
|
||||
surface: string;
|
||||
text: string;
|
||||
textSecondary: string;
|
||||
}
|
||||
|
||||
export interface Theme {
|
||||
id: string;
|
||||
name: string;
|
||||
colors: ThemeColors;
|
||||
borderRadius: string;
|
||||
shadow: string;
|
||||
fonts: {
|
||||
primary: string;
|
||||
secondary: string;
|
||||
mono: string;
|
||||
};
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ThemeService {
|
||||
private currentThemeSubject = new BehaviorSubject<Theme>(this.getDefaultTheme());
|
||||
public currentTheme$ = this.currentThemeSubject.asObservable();
|
||||
|
||||
private readonly STORAGE_KEY = 'cloudnsure-theme';
|
||||
|
||||
constructor() {
|
||||
this.loadThemeFromStorage();
|
||||
}
|
||||
|
||||
// Default theme
|
||||
private getDefaultTheme(): Theme {
|
||||
return {
|
||||
id: 'default',
|
||||
name: 'Default Blue',
|
||||
colors: {
|
||||
primary: '#0ea5e9',
|
||||
secondary: '#64748b',
|
||||
accent: '#8b5cf6',
|
||||
background: '#f8fafc',
|
||||
surface: '#ffffff',
|
||||
text: '#1f2937',
|
||||
textSecondary: '#6b7280'
|
||||
},
|
||||
borderRadius: '0.5rem',
|
||||
shadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
|
||||
fonts: {
|
||||
primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
secondary: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
mono: 'JetBrains Mono, "Fira Code", Consolas, monospace'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Predefined themes
|
||||
getThemes(): Theme[] {
|
||||
return [
|
||||
this.getDefaultTheme(),
|
||||
{
|
||||
id: 'purple',
|
||||
name: 'Purple Dream',
|
||||
colors: {
|
||||
primary: '#8b5cf6',
|
||||
secondary: '#64748b',
|
||||
accent: '#ec4899',
|
||||
background: '#faf5ff',
|
||||
surface: '#ffffff',
|
||||
text: '#1f2937',
|
||||
textSecondary: '#6b7280'
|
||||
},
|
||||
borderRadius: '0.75rem',
|
||||
shadow: '0 10px 15px -3px rgba(139, 92, 246, 0.1)',
|
||||
fonts: {
|
||||
primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
secondary: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
mono: 'JetBrains Mono, "Fira Code", Consolas, monospace'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'green',
|
||||
name: 'Forest Green',
|
||||
colors: {
|
||||
primary: '#10b981',
|
||||
secondary: '#64748b',
|
||||
accent: '#f59e0b',
|
||||
background: '#f0fdf4',
|
||||
surface: '#ffffff',
|
||||
text: '#1f2937',
|
||||
textSecondary: '#6b7280'
|
||||
},
|
||||
borderRadius: '0.375rem',
|
||||
shadow: '0 10px 15px -3px rgba(16, 185, 129, 0.1)',
|
||||
fonts: {
|
||||
primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
secondary: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
mono: 'JetBrains Mono, "Fira Code", Consolas, monospace'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'orange',
|
||||
name: 'Sunset Orange',
|
||||
colors: {
|
||||
primary: '#f59e0b',
|
||||
secondary: '#64748b',
|
||||
accent: '#ef4444',
|
||||
background: '#fffbeb',
|
||||
surface: '#ffffff',
|
||||
text: '#1f2937',
|
||||
textSecondary: '#6b7280'
|
||||
},
|
||||
borderRadius: '1rem',
|
||||
shadow: '0 10px 15px -3px rgba(245, 158, 11, 0.1)',
|
||||
fonts: {
|
||||
primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
secondary: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
mono: 'JetBrains Mono, "Fira Code", Consolas, monospace'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'dark',
|
||||
name: 'Dark Mode',
|
||||
colors: {
|
||||
primary: '#3b82f6',
|
||||
secondary: '#9ca3af',
|
||||
accent: '#8b5cf6',
|
||||
background: '#111827',
|
||||
surface: '#1f2937',
|
||||
text: '#f9fafb',
|
||||
textSecondary: '#d1d5db'
|
||||
},
|
||||
borderRadius: '0.5rem',
|
||||
shadow: '0 10px 15px -3px rgba(0, 0, 0, 0.3)',
|
||||
fonts: {
|
||||
primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
secondary: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
mono: 'JetBrains Mono, "Fira Code", Consolas, monospace'
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
// Get current theme
|
||||
getCurrentTheme(): Theme {
|
||||
return this.currentThemeSubject.value;
|
||||
}
|
||||
|
||||
// Apply theme
|
||||
applyTheme(theme: Theme): void {
|
||||
this.currentThemeSubject.next(theme);
|
||||
this.saveThemeToStorage(theme);
|
||||
this.updateCSSVariables(theme);
|
||||
}
|
||||
|
||||
// Select theme by ID
|
||||
selectTheme(themeId: string): void {
|
||||
const theme = this.getThemes().find(t => t.id === themeId);
|
||||
if (theme) {
|
||||
this.applyTheme(theme);
|
||||
}
|
||||
}
|
||||
|
||||
// Update theme colors
|
||||
updateThemeColors(colors: Partial<ThemeColors>): void {
|
||||
const currentTheme = this.getCurrentTheme();
|
||||
const updatedTheme = {
|
||||
...currentTheme,
|
||||
colors: { ...currentTheme.colors, ...colors }
|
||||
};
|
||||
this.applyTheme(updatedTheme);
|
||||
}
|
||||
|
||||
// Update theme fonts
|
||||
updateThemeFonts(fonts: Partial<Theme['fonts']>): void {
|
||||
const currentTheme = this.getCurrentTheme();
|
||||
const updatedTheme = {
|
||||
...currentTheme,
|
||||
fonts: { ...currentTheme.fonts, ...fonts }
|
||||
};
|
||||
this.applyTheme(updatedTheme);
|
||||
}
|
||||
|
||||
// Update theme properties
|
||||
updateThemeProperty(property: keyof Theme, value: any): void {
|
||||
const currentTheme = this.getCurrentTheme();
|
||||
const updatedTheme = {
|
||||
...currentTheme,
|
||||
[property]: value
|
||||
};
|
||||
this.applyTheme(updatedTheme);
|
||||
}
|
||||
|
||||
// Reset to default theme
|
||||
resetToDefault(): void {
|
||||
this.applyTheme(this.getDefaultTheme());
|
||||
}
|
||||
|
||||
// Export theme
|
||||
exportTheme(): string {
|
||||
return JSON.stringify(this.getCurrentTheme(), null, 2);
|
||||
}
|
||||
|
||||
// Import theme
|
||||
importTheme(themeJson: string): boolean {
|
||||
try {
|
||||
const theme = JSON.parse(themeJson) as Theme;
|
||||
if (this.validateTheme(theme)) {
|
||||
this.applyTheme(theme);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.error('Invalid theme JSON:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Validate theme structure
|
||||
private validateTheme(theme: any): theme is Theme {
|
||||
return (
|
||||
theme &&
|
||||
typeof theme.id === 'string' &&
|
||||
typeof theme.name === 'string' &&
|
||||
theme.colors &&
|
||||
typeof theme.colors.primary === 'string' &&
|
||||
typeof theme.colors.secondary === 'string' &&
|
||||
typeof theme.colors.accent === 'string' &&
|
||||
typeof theme.colors.background === 'string' &&
|
||||
typeof theme.colors.surface === 'string' &&
|
||||
typeof theme.colors.text === 'string' &&
|
||||
typeof theme.colors.textSecondary === 'string'
|
||||
);
|
||||
}
|
||||
|
||||
// Update CSS custom properties
|
||||
private updateCSSVariables(theme: Theme): void {
|
||||
const root = document.documentElement;
|
||||
|
||||
// Update color variables
|
||||
root.style.setProperty('--theme-primary', theme.colors.primary);
|
||||
root.style.setProperty('--theme-secondary', theme.colors.secondary);
|
||||
root.style.setProperty('--theme-accent', theme.colors.accent);
|
||||
root.style.setProperty('--theme-background', theme.colors.background);
|
||||
root.style.setProperty('--theme-surface', theme.colors.surface);
|
||||
root.style.setProperty('--theme-text', theme.colors.text);
|
||||
root.style.setProperty('--theme-text-secondary', theme.colors.textSecondary);
|
||||
|
||||
// Update other properties
|
||||
root.style.setProperty('--theme-border-radius', theme.borderRadius);
|
||||
root.style.setProperty('--theme-shadow', theme.shadow);
|
||||
root.style.setProperty('--theme-font-primary', theme.fonts.primary);
|
||||
root.style.setProperty('--theme-font-secondary', theme.fonts.secondary);
|
||||
root.style.setProperty('--theme-font-mono', theme.fonts.mono);
|
||||
|
||||
// Update body class for theme-specific styling
|
||||
document.body.className = document.body.className.replace(/theme-\w+/g, '');
|
||||
document.body.classList.add(`theme-${theme.id}`);
|
||||
}
|
||||
|
||||
// Load theme from localStorage
|
||||
private loadThemeFromStorage(): void {
|
||||
try {
|
||||
const stored = localStorage.getItem(this.STORAGE_KEY);
|
||||
if (stored) {
|
||||
const theme = JSON.parse(stored) as Theme;
|
||||
if (this.validateTheme(theme)) {
|
||||
this.currentThemeSubject.next(theme);
|
||||
this.updateCSSVariables(theme);
|
||||
}
|
||||
} else {
|
||||
// Apply default theme on first load
|
||||
this.updateCSSVariables(this.getDefaultTheme());
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading theme from storage:', error);
|
||||
this.updateCSSVariables(this.getDefaultTheme());
|
||||
}
|
||||
}
|
||||
|
||||
// Save theme to localStorage
|
||||
private saveThemeToStorage(theme: Theme): void {
|
||||
try {
|
||||
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(theme));
|
||||
} catch (error) {
|
||||
console.error('Error saving theme to storage:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Get color presets for color picker
|
||||
getColorPresets(): { name: string; value: string }[] {
|
||||
return [
|
||||
{ name: 'Blue', value: '#0ea5e9' },
|
||||
{ name: 'Purple', value: '#8b5cf6' },
|
||||
{ name: 'Green', value: '#10b981' },
|
||||
{ name: 'Orange', value: '#f59e0b' },
|
||||
{ name: 'Red', value: '#ef4444' },
|
||||
{ name: 'Pink', value: '#ec4899' },
|
||||
{ name: 'Indigo', value: '#6366f1' },
|
||||
{ name: 'Teal', value: '#14b8a6' },
|
||||
{ name: 'Yellow', value: '#eab308' },
|
||||
{ name: 'Gray', value: '#64748b' }
|
||||
];
|
||||
}
|
||||
|
||||
// Get font options
|
||||
getFontOptions(): { name: string; value: string }[] {
|
||||
return [
|
||||
{ name: 'Inter', value: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
|
||||
{ name: 'Poppins', value: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
|
||||
{ name: 'Roboto', value: 'Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif' },
|
||||
{ name: 'Open Sans', value: '"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
|
||||
{ name: 'Lato', value: 'Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
|
||||
{ name: 'Montserrat', value: 'Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
|
||||
{ name: 'Source Sans Pro', value: '"Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
|
||||
{ name: 'Nunito', value: 'Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
import { Component, Input, Output, EventEmitter, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
|
||||
import { FieldConfig } from '../field-types/base-field.component';
|
||||
import { FieldFactoryService } from '../field-types/field-factory.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dynamic-form',
|
||||
template: `
|
||||
<form [class]="formClass" (ngSubmit)="onSubmit()">
|
||||
<div class="clr-row">
|
||||
<div
|
||||
*ngFor="let field of fields"
|
||||
[class]="'clr-col-' + (field.colSpan || 12) + ' clr-col-sm-12'"
|
||||
>
|
||||
<ng-container #fieldContainer></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sq-form-actions" *ngIf="showActions">
|
||||
<button
|
||||
type="button"
|
||||
class="sq-btn sq-btn-outline"
|
||||
(click)="onCancel()"
|
||||
[disabled]="isSubmitting"
|
||||
>
|
||||
<clr-icon shape="times"></clr-icon>
|
||||
<span>{{ cancelText }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="sq-btn sq-btn-primary"
|
||||
[disabled]="isSubmitting"
|
||||
>
|
||||
<clr-icon [attr.shape]="submitIcon"></clr-icon>
|
||||
<span>{{ submitText }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
`
|
||||
})
|
||||
export class DynamicFormComponent {
|
||||
@Input() fields: FieldConfig[] = [];
|
||||
@Input() formData: any = {};
|
||||
@Input() formClass: string = 'sq-form';
|
||||
@Input() showActions: boolean = true;
|
||||
@Input() submitText: string = 'Submit';
|
||||
@Input() cancelText: string = 'Cancel';
|
||||
@Input() submitIcon: string = 'check';
|
||||
|
||||
@Output() formSubmit = new EventEmitter<any>();
|
||||
@Output() formCancel = new EventEmitter<void>();
|
||||
|
||||
@ViewChild('fieldContainer', { read: ViewContainerRef }) fieldContainer: ViewContainerRef;
|
||||
|
||||
isSubmitting = false;
|
||||
|
||||
constructor(
|
||||
private fieldFactory: FieldFactoryService,
|
||||
private componentFactoryResolver: ComponentFactoryResolver
|
||||
) {}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.renderFields();
|
||||
}
|
||||
|
||||
renderFields() {
|
||||
this.fieldContainer.clear();
|
||||
|
||||
this.fields.forEach(field => {
|
||||
this.fieldFactory.createField(
|
||||
this.fieldContainer,
|
||||
field.type,
|
||||
field,
|
||||
this.formData[field.name],
|
||||
(value) => {
|
||||
this.formData[field.name] = value;
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
this.isSubmitting = true;
|
||||
this.formSubmit.emit(this.formData);
|
||||
}
|
||||
|
||||
onCancel() {
|
||||
this.formCancel.emit();
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
export interface FieldConfig {
|
||||
name: string;
|
||||
label: string;
|
||||
type: string;
|
||||
required?: boolean;
|
||||
placeholder?: string;
|
||||
validators?: any[];
|
||||
options?: any[];
|
||||
[key: string]: any; // For additional properties
|
||||
}
|
||||
|
||||
@Component({
|
||||
template: ''
|
||||
})
|
||||
export class BaseFieldComponent {
|
||||
@Input() field: FieldConfig;
|
||||
@Input() value: any;
|
||||
@Output() valueChange = new EventEmitter<any>();
|
||||
|
||||
onChange(value: any) {
|
||||
this.valueChange.emit(value);
|
||||
}
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import { Injectable, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
|
||||
import { TextFieldComponent } from './text-field.component';
|
||||
import { NumberFieldComponent } from './number-field.component';
|
||||
import { PhoneFieldComponent } from './phone-field.component';
|
||||
import { ParagraphFieldComponent } from './paragraph-field.component';
|
||||
import { PasswordFieldComponent } from './password-field.component';
|
||||
import { TextareaFieldComponent } from './textarea-field.component';
|
||||
import { BaseFieldComponent } from './base-field.component';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FieldFactoryService {
|
||||
private componentMap: any = {
|
||||
'text': TextFieldComponent,
|
||||
'number': NumberFieldComponent,
|
||||
'phone': PhoneFieldComponent,
|
||||
'paragraph': ParagraphFieldComponent,
|
||||
'password': PasswordFieldComponent,
|
||||
'textarea': TextareaFieldComponent
|
||||
};
|
||||
|
||||
constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
|
||||
|
||||
createField(
|
||||
container: ViewContainerRef,
|
||||
fieldType: string,
|
||||
fieldConfig: any,
|
||||
value: any,
|
||||
valueChangeCallback: (value: any) => void
|
||||
): any {
|
||||
const component = this.componentMap[fieldType];
|
||||
if (!component) {
|
||||
throw new Error(`Unsupported field type: ${fieldType}`);
|
||||
}
|
||||
|
||||
const factory = this.componentFactoryResolver.resolveComponentFactory(component);
|
||||
const componentRef = container.createComponent(factory);
|
||||
|
||||
// Cast to BaseFieldComponent to access properties safely
|
||||
const instance = componentRef.instance as BaseFieldComponent;
|
||||
(instance as any).field = fieldConfig;
|
||||
(instance as any).value = value;
|
||||
|
||||
// Subscribe to value changes
|
||||
if ((instance as any).valueChange && typeof (instance as any).valueChange.subscribe === 'function') {
|
||||
(instance as any).valueChange.subscribe(valueChangeCallback);
|
||||
}
|
||||
|
||||
return componentRef;
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { ClarityModule } from '@clr/angular';
|
||||
|
||||
import { BaseFieldComponent } from './base-field.component';
|
||||
import { TextFieldComponent } from './text-field.component';
|
||||
import { NumberFieldComponent } from './number-field.component';
|
||||
import { PhoneFieldComponent } from './phone-field.component';
|
||||
import { ParagraphFieldComponent } from './paragraph-field.component';
|
||||
import { PasswordFieldComponent } from './password-field.component';
|
||||
import { TextareaFieldComponent } from './textarea-field.component';
|
||||
import { DynamicFormComponent } from '../dynamic-form/dynamic-form.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
BaseFieldComponent,
|
||||
TextFieldComponent,
|
||||
NumberFieldComponent,
|
||||
PhoneFieldComponent,
|
||||
ParagraphFieldComponent,
|
||||
PasswordFieldComponent,
|
||||
TextareaFieldComponent,
|
||||
DynamicFormComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
ClarityModule
|
||||
],
|
||||
exports: [
|
||||
BaseFieldComponent,
|
||||
TextFieldComponent,
|
||||
NumberFieldComponent,
|
||||
PhoneFieldComponent,
|
||||
ParagraphFieldComponent,
|
||||
PasswordFieldComponent,
|
||||
TextareaFieldComponent,
|
||||
DynamicFormComponent
|
||||
],
|
||||
providers: []
|
||||
})
|
||||
export class FieldTypesModule { }
|
||||
@@ -1,364 +0,0 @@
|
||||
// Shared field styles with modern UI enhancements following UI rules
|
||||
.field-container {
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
animation: fadeInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.sq-form-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-text);
|
||||
margin-bottom: 8px;
|
||||
font-family: var(--theme-font-primary);
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
.label-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.required-indicator {
|
||||
color: var(--theme-error, #ef4444);
|
||||
margin-left: 6px;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.sq-form-input,
|
||||
.sq-form-textarea {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
color: var(--theme-text);
|
||||
background: var(--theme-surface);
|
||||
border: 2px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 12px;
|
||||
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
margin-bottom: 0;
|
||||
font-family: var(--theme-font-primary);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
background: var(--theme-surface);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: var(--theme-background);
|
||||
color: var(--theme-text-secondary);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: var(--theme-error, #ef4444);
|
||||
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
|
||||
animation: shake 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--theme-text-secondary);
|
||||
font-style: italic;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled):not(:focus) {
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-5px); }
|
||||
75% { transform: translateX(5px); }
|
||||
}
|
||||
|
||||
.sq-form-textarea {
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.field-description {
|
||||
color: var(--theme-text-secondary);
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
font-style: italic;
|
||||
line-height: 1.4;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
&::before {
|
||||
content: "ℹ";
|
||||
margin-right: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.sq-error-message {
|
||||
color: var(--theme-error, #ef4444);
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
background: rgba(239, 68, 68, 0.05);
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid var(--theme-error, #ef4444);
|
||||
|
||||
&::before {
|
||||
content: "⚠";
|
||||
margin-right: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// Phone field specific styles
|
||||
.phone-input-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.phone-input {
|
||||
flex: 1;
|
||||
border-radius: 12px;
|
||||
padding-left: 100px;
|
||||
}
|
||||
|
||||
.country-code-selector {
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
background: var(--theme-background);
|
||||
border-radius: 10px 0 0 10px;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.08);
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-surface);
|
||||
}
|
||||
|
||||
.country-flag {
|
||||
margin-right: 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.country-code {
|
||||
font-weight: 500;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
margin-left: 6px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.country-code-btn {
|
||||
margin-left: 8px;
|
||||
min-width: 80px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Password field specific styles with modern enhancements
|
||||
.password-input-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
.password-input {
|
||||
flex: 1;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.password-toggle {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: none;
|
||||
height: 48px;
|
||||
background: var(--theme-background);
|
||||
border: 2px solid rgba(0, 0, 0, 0.08);
|
||||
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: var(--theme-text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
clr-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.password-strength {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
padding: 12px;
|
||||
background: var(--theme-background);
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.weak {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
&.medium {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
border: 1px solid rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
&.strong {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.strength-meter {
|
||||
flex: 1;
|
||||
height: 10px;
|
||||
background-color: #e5e7eb;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
margin-right: 16px;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.strength-bar {
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&.weak {
|
||||
background: linear-gradient(90deg, #ef4444 0%, #ef4444 100%);
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
background: linear-gradient(90deg, #ef4444 0%, #f59e0b 100%);
|
||||
width: 66%;
|
||||
}
|
||||
|
||||
&.strong {
|
||||
background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.strength-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-text-secondary);
|
||||
min-width: 100px;
|
||||
text-align: right;
|
||||
|
||||
&.weak {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
&.strong {
|
||||
color: #10b981;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Character count for text areas with modern styling
|
||||
.character-count {
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
color: var(--theme-text-secondary);
|
||||
margin-top: 8px;
|
||||
font-weight: 500;
|
||||
padding: 6px 12px;
|
||||
background: var(--theme-background);
|
||||
border-radius: 20px;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.warning {
|
||||
color: #f59e0b;
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
}
|
||||
|
||||
&.error {
|
||||
color: #ef4444;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Enhanced input group for better visual hierarchy
|
||||
.input-group {
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.input-group-prepend,
|
||||
.input-group-append {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
color: var(--theme-text-secondary);
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.input-group-prepend {
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.input-group-append {
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.input-with-addon {
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
export * from './base-field.component';
|
||||
export * from './text-field.component';
|
||||
export * from './number-field.component';
|
||||
export * from './phone-field.component';
|
||||
export * from './paragraph-field.component';
|
||||
export * from './password-field.component';
|
||||
export * from './textarea-field.component';
|
||||
export * from './field-factory.service';
|
||||
@@ -1,38 +0,0 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { BaseFieldComponent, FieldConfig } from './base-field.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-number-field',
|
||||
template: `
|
||||
<div class="field-container">
|
||||
<label [for]="field.name" class="sq-form-label">
|
||||
<span class="label-text">{{ field.label }}</span>
|
||||
<span *ngIf="field.required" class="required-indicator">*</span>
|
||||
</label>
|
||||
<input
|
||||
[id]="field.name"
|
||||
type="number"
|
||||
class="sq-form-input"
|
||||
[placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
|
||||
[value]="value"
|
||||
(input)="onChange($event.target.value)"
|
||||
[required]="field.required"
|
||||
[min]="field.min"
|
||||
[max]="field.max"
|
||||
[step]="field.step || 1"
|
||||
[readonly]="field.readonly"
|
||||
[disabled]="field.disabled"
|
||||
/>
|
||||
<div *ngIf="field.description" class="field-description">
|
||||
{{ field.description }}
|
||||
</div>
|
||||
<div *ngIf="field.errorMessage" class="sq-error-message">
|
||||
{{ field.errorMessage }}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class NumberFieldComponent extends BaseFieldComponent {
|
||||
@Input() field: FieldConfig;
|
||||
@Input() value: number;
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { BaseFieldComponent, FieldConfig } from './base-field.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-paragraph-field',
|
||||
template: `
|
||||
<div class="field-container">
|
||||
<label [for]="field.name" class="sq-form-label">
|
||||
<span class="label-text">{{ field.label }}</span>
|
||||
<span *ngIf="field.required" class="required-indicator">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
[id]="field.name"
|
||||
class="sq-form-textarea"
|
||||
[placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
|
||||
[value]="value"
|
||||
(input)="onChange($event.target.value)"
|
||||
[required]="field.required"
|
||||
[rows]="field.rows || 4"
|
||||
[cols]="field.cols || 50"
|
||||
[attr.maxlength]="field.maxLength"
|
||||
[readonly]="field.readonly"
|
||||
[disabled]="field.disabled"
|
||||
></textarea>
|
||||
<div class="character-count" *ngIf="field.showCharacterCount && field.maxLength" [ngClass]="{
|
||||
'warning': value?.length > field.maxLength * 0.8,
|
||||
'error': value?.length >= field.maxLength
|
||||
}">
|
||||
{{ value?.length || 0 }}/{{ field.maxLength }}
|
||||
</div>
|
||||
<div *ngIf="field.description" class="field-description">
|
||||
{{ field.description }}
|
||||
</div>
|
||||
<div *ngIf="field.errorMessage" class="sq-error-message">
|
||||
{{ field.errorMessage }}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class ParagraphFieldComponent extends BaseFieldComponent {
|
||||
@Input() field: FieldConfig;
|
||||
@Input() value: string;
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { BaseFieldComponent, FieldConfig } from './base-field.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-password-field',
|
||||
template: `
|
||||
<div class="field-container">
|
||||
<label [for]="field.name" class="sq-form-label">
|
||||
<span class="label-text">{{ field.label }}</span>
|
||||
<span *ngIf="field.required" class="required-indicator">*</span>
|
||||
</label>
|
||||
<div class="password-input-container">
|
||||
<input
|
||||
[id]="field.name"
|
||||
[type]="isPasswordVisible ? 'text' : 'password'"
|
||||
class="sq-form-input password-input"
|
||||
[placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
|
||||
[value]="value"
|
||||
(input)="onChange($event.target.value)"
|
||||
[required]="field.required"
|
||||
[attr.minlength]="field.minLength"
|
||||
[attr.maxlength]="field.maxLength"
|
||||
[readonly]="field.readonly"
|
||||
[disabled]="field.disabled"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="password-toggle"
|
||||
(click)="togglePasswordVisibility()"
|
||||
[attr.aria-label]="isPasswordVisible ? 'Hide password' : 'Show password'"
|
||||
[title]="isPasswordVisible ? 'Hide password' : 'Show password'"
|
||||
>
|
||||
<clr-icon [attr.shape]="isPasswordVisible ? 'eye-hide' : 'eye'"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="password-strength" *ngIf="field.showStrengthIndicator && value" [ngClass]="getPasswordStrengthClass()">
|
||||
<div class="strength-meter">
|
||||
<div class="strength-bar" [ngClass]="getPasswordStrengthClass()"></div>
|
||||
</div>
|
||||
<span class="strength-label" [ngClass]="getPasswordStrengthClass()">{{ passwordStrengthLabel }}</span>
|
||||
</div>
|
||||
<div *ngIf="field.description" class="field-description">
|
||||
{{ field.description }}
|
||||
</div>
|
||||
<div *ngIf="field.errorMessage" class="sq-error-message">
|
||||
{{ field.errorMessage }}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class PasswordFieldComponent extends BaseFieldComponent {
|
||||
@Input() field: FieldConfig;
|
||||
@Input() value: string;
|
||||
|
||||
isPasswordVisible = false;
|
||||
|
||||
get passwordStrength(): number {
|
||||
if (!this.value) return 0;
|
||||
|
||||
let strength = 0;
|
||||
if (this.value.length >= 8) strength += 25;
|
||||
if (/[A-Z]/.test(this.value)) strength += 25;
|
||||
if (/[0-9]/.test(this.value)) strength += 25;
|
||||
if (/[^A-Za-z0-9]/.test(this.value)) strength += 25;
|
||||
|
||||
return strength;
|
||||
}
|
||||
|
||||
get passwordStrengthLabel(): string {
|
||||
const strength = this.passwordStrength;
|
||||
if (strength < 25) return 'Very Weak';
|
||||
if (strength < 50) return 'Weak';
|
||||
if (strength < 75) return 'Medium';
|
||||
if (strength < 100) return 'Strong';
|
||||
return 'Very Strong';
|
||||
}
|
||||
|
||||
getPasswordStrengthClass(): string {
|
||||
const strength = this.passwordStrength;
|
||||
if (strength < 25) return 'weak';
|
||||
if (strength < 50) return 'weak';
|
||||
if (strength < 75) return 'medium';
|
||||
return 'strong';
|
||||
}
|
||||
|
||||
togglePasswordVisibility() {
|
||||
this.isPasswordVisible = !this.isPasswordVisible;
|
||||
}
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { BaseFieldComponent, FieldConfig } from './base-field.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-phone-field',
|
||||
template: `
|
||||
<div class="field-container">
|
||||
<label [for]="field.name" class="sq-form-label">
|
||||
<span class="label-text">{{ field.label }}</span>
|
||||
<span *ngIf="field.required" class="required-indicator">*</span>
|
||||
</label>
|
||||
<div class="phone-input-container">
|
||||
<div class="country-code-selector" (click)="toggleCountryCodeSelector()" *ngIf="field.showCountryCodeSelector">
|
||||
<span class="country-flag">🇺🇸</span>
|
||||
<span class="country-code">{{ selectedCountryCode }}</span>
|
||||
<span class="dropdown-icon">▼</span>
|
||||
</div>
|
||||
<input
|
||||
[id]="field.name"
|
||||
type="tel"
|
||||
class="sq-form-input phone-input"
|
||||
[placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
|
||||
[value]="value"
|
||||
(input)="onPhoneChange($event.target.value)"
|
||||
[required]="field.required"
|
||||
[pattern]="field.pattern || '.*'"
|
||||
[readonly]="field.readonly"
|
||||
[disabled]="field.disabled"
|
||||
/>
|
||||
<button
|
||||
*ngIf="field.showCountryCodeSelector"
|
||||
class="sq-btn sq-btn-outline sq-btn-sm country-code-btn"
|
||||
type="button"
|
||||
(click)="toggleCountryCodeSelector()"
|
||||
>
|
||||
{{ selectedCountryCode }}
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="errorMessage" class="sq-error-message">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
<div *ngIf="field.description" class="field-description">
|
||||
{{ field.description }}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class PhoneFieldComponent extends BaseFieldComponent {
|
||||
@Input() field: FieldConfig;
|
||||
@Input() value: string;
|
||||
|
||||
selectedCountryCode = '+91';
|
||||
errorMessage = '';
|
||||
|
||||
onPhoneChange(value: string) {
|
||||
// Validate phone number format
|
||||
if (this.field.pattern) {
|
||||
const regex = new RegExp(this.field.pattern);
|
||||
if (!regex.test(value)) {
|
||||
this.errorMessage = this.field.errorMessage || 'Please enter a valid phone number';
|
||||
} else {
|
||||
this.errorMessage = '';
|
||||
}
|
||||
}
|
||||
this.onChange(value);
|
||||
}
|
||||
|
||||
toggleCountryCodeSelector() {
|
||||
// Implementation for country code selector
|
||||
// This would typically open a modal or dropdown
|
||||
}
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { BaseFieldComponent, FieldConfig } from './base-field.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-text-field',
|
||||
template: `
|
||||
<div class="field-container">
|
||||
<label [for]="field.name" class="sq-form-label">
|
||||
<span class="label-text">{{ field.label }}</span>
|
||||
<span *ngIf="field.required" class="required-indicator">*</span>
|
||||
</label>
|
||||
<input
|
||||
[id]="field.name"
|
||||
type="text"
|
||||
class="sq-form-input"
|
||||
[placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
|
||||
[value]="value"
|
||||
(input)="onChange($event.target.value)"
|
||||
[required]="field.required"
|
||||
[attr.maxlength]="field.maxLength"
|
||||
[attr.minlength]="field.minLength"
|
||||
[readonly]="field.readonly"
|
||||
[disabled]="field.disabled"
|
||||
/>
|
||||
<div *ngIf="field.description" class="field-description">
|
||||
{{ field.description }}
|
||||
</div>
|
||||
<div class="character-count" *ngIf="field.showCharacterCount && value" [ngClass]="{
|
||||
'warning': field.maxLength && value?.length > field.maxLength * 0.8,
|
||||
'error': field.maxLength && value?.length >= field.maxLength
|
||||
}">
|
||||
{{ value?.length || 0 }}{{ field.maxLength ? '/' + field.maxLength : '' }}
|
||||
</div>
|
||||
<div *ngIf="field.errorMessage" class="sq-error-message">
|
||||
{{ field.errorMessage }}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class TextFieldComponent extends BaseFieldComponent {
|
||||
@Input() field: FieldConfig;
|
||||
@Input() value: string;
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { BaseFieldComponent, FieldConfig } from './base-field.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-textarea-field',
|
||||
template: `
|
||||
<div class="field-container">
|
||||
<label [for]="field.name" class="sq-form-label">
|
||||
<span class="label-text">{{ field.label }}</span>
|
||||
<span *ngIf="field.required" class="required-indicator">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
[id]="field.name"
|
||||
class="sq-form-textarea"
|
||||
[placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
|
||||
[value]="value"
|
||||
(input)="onChange($event.target.value)"
|
||||
[required]="field.required"
|
||||
[rows]="field.rows || 4"
|
||||
[cols]="field.cols || 50"
|
||||
[attr.maxlength]="field.maxLength"
|
||||
[readonly]="field.readonly"
|
||||
[disabled]="field.disabled"
|
||||
></textarea>
|
||||
<div class="character-count" *ngIf="field.showCharacterCount && field.maxLength" [ngClass]="{
|
||||
'warning': value?.length > field.maxLength * 0.8,
|
||||
'error': value?.length >= field.maxLength
|
||||
}">
|
||||
{{ value?.length || 0 }}/{{ field.maxLength }}
|
||||
</div>
|
||||
<div *ngIf="field.description" class="field-description">
|
||||
{{ field.description }}
|
||||
</div>
|
||||
<div *ngIf="field.errorMessage" class="sq-error-message">
|
||||
{{ field.errorMessage }}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class TextareaFieldComponent extends BaseFieldComponent {
|
||||
@Input() field: FieldConfig;
|
||||
@Input() value: string;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FieldTypesModule } from './components/field-types/field-types.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FieldTypesModule
|
||||
],
|
||||
exports: [
|
||||
FieldTypesModule
|
||||
]
|
||||
})
|
||||
export class SharedModule { }
|
||||
@@ -343,7 +343,6 @@
|
||||
"Email_Field2": "Email_Field2",
|
||||
"Static": "Static",
|
||||
"District": "District",
|
||||
"Ad10": "Ad10",
|
||||
"about_yourself": "about_yourself",
|
||||
"datagrid_Field2": "datagrid_Field2",
|
||||
"Toggle_Switch2": "Toggle_Switch2",
|
||||
@@ -372,9 +371,5 @@
|
||||
"select_Field2": "select_Field2",
|
||||
"Password_Field": "Password_Field",
|
||||
"age": "age",
|
||||
"Button_Field": "Button_Field",
|
||||
"API_REGISTERY": "API Registry",
|
||||
"API_REGISTERY_DESCRIPTION": "API Registry Description",
|
||||
"TOKEN_REGISTERY": "Token Registry",
|
||||
"TOKEN_REGISTERY_DESCRIPTION": "Token Registry Description"
|
||||
"Button_Field": "Button_Field"
|
||||
}
|
||||
@@ -105,8 +105,6 @@
|
||||
"REPORT_DESCRIPTION": "रिपोर्ट विवरण",
|
||||
"API_REGISTERY": "एपीआई रजिस्ट्री",
|
||||
"API_REGISTERY_DESCRIPTION": "एपीआई रजिस्ट्री विवरण",
|
||||
"TOKEN_REGISTERY": "टोकन रजिस्ट्री",
|
||||
"TOKEN_REGISTERY_DESCRIPTION": "टोकन रजिस्ट्री विवरण",
|
||||
"ACTIVE": "सक्रिय",
|
||||
"FOLDER_NAME": "फ़ोल्डर नाम",
|
||||
"ACTION": "क्रिया",
|
||||
|
||||
@@ -1,19 +1,7 @@
|
||||
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
|
||||
@import '~@clr/icons/clr-icons.min.css';
|
||||
|
||||
// Modern Design System Imports
|
||||
@import './styles/design-tokens';
|
||||
@import './styles/theme-variables';
|
||||
@import './styles/base';
|
||||
@import './styles/components';
|
||||
@import './styles/animations';
|
||||
|
||||
// Google Fonts - Modern Typography
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap');
|
||||
|
||||
/* Legacy font set ==================== */
|
||||
/* font set ==================== */
|
||||
@import url(https://fonts.googleapis.com/css?family=Athiti|Bai+Jamjuree|Chakra+Petch|Charmonman|Chonburi|Fahkwang|Itim|K2D|Kanit|KoHo|Kodchasan|Krub|Maitree|Mali|Mitr|Niramit|Pattaya|Pridi|Prompt|Sriracha|Srisakdi|Taviraj|Trirong);
|
||||
|
||||
.font-athiti { font-family: 'Athiti', sans-serif; }
|
||||
@@ -208,78 +196,3 @@ margin-right: 0;
|
||||
.float-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
// Global styles for enhanced components
|
||||
.btn {
|
||||
@extend .modern-btn;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
@extend .modern-modal;
|
||||
|
||||
.modal-header {
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: $white;
|
||||
border-radius: $radius-2xl $radius-2xl 0 0;
|
||||
|
||||
.modal-title {
|
||||
color: $white;
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: $white;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: $space-6;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: $space-5 $space-6;
|
||||
background: $gray-50;
|
||||
border-radius: 0 0 $radius-2xl $radius-2xl;
|
||||
}
|
||||
}
|
||||
|
||||
.datagrid {
|
||||
@extend .modern-table;
|
||||
}
|
||||
|
||||
.badge {
|
||||
@extend .modern-badge;
|
||||
}
|
||||
|
||||
.alert {
|
||||
@extend .modern-alert;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
@extend .modern-spinner;
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
@extend .modern-skeleton;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@extend .modern-form-group;
|
||||
|
||||
.form-label {
|
||||
@extend .form-label;
|
||||
}
|
||||
|
||||
.form-input, .form-select {
|
||||
@extend .form-input;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
@extend .form-error;
|
||||
}
|
||||
}
|
||||
@@ -1,602 +0,0 @@
|
||||
// ========================================
|
||||
// ANIMATIONS - Smooth & Modern Transitions
|
||||
// ========================================
|
||||
|
||||
@import './design-tokens';
|
||||
|
||||
// Fade Animations
|
||||
// ========================================
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Scale Animations
|
||||
// ========================================
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleUp {
|
||||
from {
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleDown {
|
||||
from {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Slide Animations
|
||||
// ========================================
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInDown {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutUp {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutDown {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutLeft {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutRight {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
// Rotation Animations
|
||||
// ========================================
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinReverse {
|
||||
from {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 53%, 80%, 100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
40%, 43% {
|
||||
transform: translate3d(0, -8px, 0);
|
||||
}
|
||||
70% {
|
||||
transform: translate3d(0, -4px, 0);
|
||||
}
|
||||
90% {
|
||||
transform: translate3d(0, -2px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%, 100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
10%, 30%, 50%, 70%, 90% {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
20%, 40%, 60%, 80% {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wiggle {
|
||||
0%, 7% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
15% {
|
||||
transform: rotateZ(-15deg);
|
||||
}
|
||||
20% {
|
||||
transform: rotateZ(10deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotateZ(-10deg);
|
||||
}
|
||||
30% {
|
||||
transform: rotateZ(6deg);
|
||||
}
|
||||
35% {
|
||||
transform: rotateZ(-4deg);
|
||||
}
|
||||
40%, 100% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Loading Animations
|
||||
// ========================================
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer2 {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dots {
|
||||
0%, 20% {
|
||||
color: transparent;
|
||||
text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent;
|
||||
}
|
||||
40% {
|
||||
color: currentColor;
|
||||
text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent;
|
||||
}
|
||||
60% {
|
||||
text-shadow: 0.25em 0 0 currentColor, 0.5em 0 0 transparent;
|
||||
}
|
||||
80%, 100% {
|
||||
text-shadow: 0.25em 0 0 currentColor, 0.5em 0 0 currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
0%, 60%, 100% {
|
||||
transform: initial;
|
||||
}
|
||||
30% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
// Hover Animations
|
||||
// ========================================
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0% {
|
||||
box-shadow: 0 0 5px rgba($primary-500, 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba($primary-500, 0.8), 0 0 30px rgba($primary-500, 0.6);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 5px rgba($primary-500, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Animation Classes
|
||||
// ========================================
|
||||
|
||||
// Fade Classes
|
||||
.animate-fade-in {
|
||||
animation: fadeIn $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
.animate-fade-out {
|
||||
animation: fadeOut $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp $duration-500 $ease-out;
|
||||
}
|
||||
|
||||
.animate-fade-in-down {
|
||||
animation: fadeInDown $duration-500 $ease-out;
|
||||
}
|
||||
|
||||
.animate-fade-in-left {
|
||||
animation: fadeInLeft $duration-500 $ease-out;
|
||||
}
|
||||
|
||||
.animate-fade-in-right {
|
||||
animation: fadeInRight $duration-500 $ease-out;
|
||||
}
|
||||
|
||||
// Scale Classes
|
||||
.animate-scale-in {
|
||||
animation: scaleIn $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
.animate-scale-out {
|
||||
animation: scaleOut $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
.animate-scale-up {
|
||||
animation: scaleUp $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
.animate-scale-down {
|
||||
animation: scaleDown $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
// Slide Classes
|
||||
.animate-slide-in-up {
|
||||
animation: slideInUp $duration-500 $ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-in-down {
|
||||
animation: slideInDown $duration-500 $ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-in-left {
|
||||
animation: slideInLeft $duration-500 $ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-in-right {
|
||||
animation: slideInRight $duration-500 $ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-out-up {
|
||||
animation: slideOutUp $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-out-down {
|
||||
animation: slideOutDown $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-out-left {
|
||||
animation: slideOutLeft $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-out-right {
|
||||
animation: slideOutRight $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
// Rotation Classes
|
||||
.animate-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.animate-spin-reverse {
|
||||
animation: spinReverse 1s linear infinite;
|
||||
}
|
||||
|
||||
.animate-bounce {
|
||||
animation: bounce 1s infinite;
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
.animate-shake {
|
||||
animation: shake 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-wiggle {
|
||||
animation: wiggle 1s ease-in-out;
|
||||
}
|
||||
|
||||
// Loading Classes
|
||||
.animate-shimmer {
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
.animate-shimmer2 {
|
||||
animation: shimmer2 1.5s infinite;
|
||||
}
|
||||
|
||||
.animate-dots {
|
||||
animation: dots 1.4s infinite;
|
||||
}
|
||||
|
||||
.animate-wave {
|
||||
animation: wave 1.4s infinite;
|
||||
}
|
||||
|
||||
// Hover Classes
|
||||
.animate-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-glow {
|
||||
animation: glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-ripple {
|
||||
animation: ripple 0.6s linear;
|
||||
}
|
||||
|
||||
// Transition Classes
|
||||
// ========================================
|
||||
|
||||
.transition-all {
|
||||
transition: all $duration-300 $ease-out;
|
||||
}
|
||||
|
||||
.transition-colors {
|
||||
transition: color $duration-200 $ease-out, background-color $duration-200 $ease-out, border-color $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
.transition-opacity {
|
||||
transition: opacity $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
.transition-transform {
|
||||
transition: transform $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
.transition-shadow {
|
||||
transition: box-shadow $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
// Hover Effects
|
||||
// ========================================
|
||||
|
||||
.hover-lift {
|
||||
transition: transform $duration-200 $ease-out, box-shadow $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-glow {
|
||||
transition: box-shadow $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 20px rgba($primary-500, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.hover-scale {
|
||||
transition: transform $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.hover-rotate {
|
||||
transition: transform $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
}
|
||||
|
||||
.hover-bounce {
|
||||
transition: transform $duration-200 $ease-bounce;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
// Staggered Animations
|
||||
// ========================================
|
||||
|
||||
.stagger-1 { animation-delay: 0.1s; }
|
||||
.stagger-2 { animation-delay: 0.2s; }
|
||||
.stagger-3 { animation-delay: 0.3s; }
|
||||
.stagger-4 { animation-delay: 0.4s; }
|
||||
.stagger-5 { animation-delay: 0.5s; }
|
||||
.stagger-6 { animation-delay: 0.6s; }
|
||||
.stagger-7 { animation-delay: 0.7s; }
|
||||
.stagger-8 { animation-delay: 0.8s; }
|
||||
|
||||
// Animation States
|
||||
// ========================================
|
||||
|
||||
.animation-paused {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.animation-running {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
// Reduced Motion Support
|
||||
// ========================================
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
.animate-spin,
|
||||
.animate-pulse,
|
||||
.animate-bounce,
|
||||
.animate-float,
|
||||
.animate-glow {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@@ -1,411 +0,0 @@
|
||||
// ========================================
|
||||
// BASE STYLES - Modern UI Foundation
|
||||
// ========================================
|
||||
|
||||
@import './design-tokens';
|
||||
|
||||
|
||||
// CSS Reset & Base Styles
|
||||
// ========================================
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $font-primary;
|
||||
font-size: $text-base;
|
||||
font-weight: $font-normal;
|
||||
line-height: $leading-normal;
|
||||
color: $gray-900;
|
||||
background: linear-gradient(135deg, $gray-50 0%, $gray-100 100%);
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// Typography
|
||||
// ========================================
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $font-secondary;
|
||||
font-weight: $font-semibold;
|
||||
line-height: $leading-tight;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 { font-size: $text-4xl; }
|
||||
h2 { font-size: $text-3xl; }
|
||||
h3 { font-size: $text-2xl; }
|
||||
h4 { font-size: $text-xl; }
|
||||
h5 { font-size: $text-lg; }
|
||||
h6 { font-size: $text-base; }
|
||||
|
||||
p {
|
||||
margin: 0 0 $space-4 0;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary-600;
|
||||
text-decoration: none;
|
||||
transition: color $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
color: $primary-700;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid $primary-500;
|
||||
outline-offset: 2px;
|
||||
border-radius: $radius-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Lists
|
||||
ul, ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Images
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Form Elements
|
||||
// ========================================
|
||||
|
||||
input, textarea, select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
// Focus Styles
|
||||
// ========================================
|
||||
|
||||
:focus {
|
||||
outline: 2px solid $primary-500;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid $primary-500;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
// Selection Styles
|
||||
// ========================================
|
||||
|
||||
::selection {
|
||||
background-color: $primary-100;
|
||||
color: $primary-900;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: $primary-100;
|
||||
color: $primary-900;
|
||||
}
|
||||
|
||||
// Scrollbar Styles
|
||||
// ========================================
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $gray-100;
|
||||
border-radius: $radius-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: $gray-300;
|
||||
border-radius: $radius-full;
|
||||
transition: background-color $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: $gray-400;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: $gray-100;
|
||||
}
|
||||
|
||||
// Utility Classes
|
||||
// ========================================
|
||||
|
||||
// Display
|
||||
.d-block { display: block; }
|
||||
.d-inline { display: inline; }
|
||||
.d-inline-block { display: inline-block; }
|
||||
.d-flex { display: flex; }
|
||||
.d-inline-flex { display: inline-flex; }
|
||||
.d-grid { display: grid; }
|
||||
.d-none { display: none; }
|
||||
|
||||
// Flexbox
|
||||
.flex-row { flex-direction: row; }
|
||||
.flex-col { flex-direction: column; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.flex-nowrap { flex-wrap: nowrap; }
|
||||
|
||||
.justify-start { justify-content: flex-start; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-end { justify-content: flex-end; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.justify-around { justify-content: space-around; }
|
||||
|
||||
.items-start { align-items: flex-start; }
|
||||
.items-center { align-items: center; }
|
||||
.items-end { align-items: flex-end; }
|
||||
.items-stretch { align-items: stretch; }
|
||||
|
||||
.flex-1 { flex: 1 1 0%; }
|
||||
.flex-auto { flex: 1 1 auto; }
|
||||
.flex-initial { flex: 0 1 auto; }
|
||||
.flex-none { flex: none; }
|
||||
|
||||
// Spacing
|
||||
.m-0 { margin: 0; }
|
||||
.m-1 { margin: $space-1; }
|
||||
.m-2 { margin: $space-2; }
|
||||
.m-3 { margin: $space-3; }
|
||||
.m-4 { margin: $space-4; }
|
||||
.m-5 { margin: $space-5; }
|
||||
.m-6 { margin: $space-6; }
|
||||
.m-8 { margin: $space-8; }
|
||||
|
||||
.mt-0 { margin-top: 0; }
|
||||
.mt-1 { margin-top: $space-1; }
|
||||
.mt-2 { margin-top: $space-2; }
|
||||
.mt-3 { margin-top: $space-3; }
|
||||
.mt-4 { margin-top: $space-4; }
|
||||
.mt-5 { margin-top: $space-5; }
|
||||
.mt-6 { margin-top: $space-6; }
|
||||
.mt-8 { margin-top: $space-8; }
|
||||
|
||||
.mb-0 { margin-bottom: 0; }
|
||||
.mb-1 { margin-bottom: $space-1; }
|
||||
.mb-2 { margin-bottom: $space-2; }
|
||||
.mb-3 { margin-bottom: $space-3; }
|
||||
.mb-4 { margin-bottom: $space-4; }
|
||||
.mb-5 { margin-bottom: $space-5; }
|
||||
.mb-6 { margin-bottom: $space-6; }
|
||||
.mb-8 { margin-bottom: $space-8; }
|
||||
|
||||
.ml-0 { margin-left: 0; }
|
||||
.ml-1 { margin-left: $space-1; }
|
||||
.ml-2 { margin-left: $space-2; }
|
||||
.ml-3 { margin-left: $space-3; }
|
||||
.ml-4 { margin-left: $space-4; }
|
||||
.ml-5 { margin-left: $space-5; }
|
||||
.ml-6 { margin-left: $space-6; }
|
||||
.ml-8 { margin-left: $space-8; }
|
||||
|
||||
.mr-0 { margin-right: 0; }
|
||||
.mr-1 { margin-right: $space-1; }
|
||||
.mr-2 { margin-right: $space-2; }
|
||||
.mr-3 { margin-right: $space-3; }
|
||||
.mr-4 { margin-right: $space-4; }
|
||||
.mr-5 { margin-right: $space-5; }
|
||||
.mr-6 { margin-right: $space-6; }
|
||||
.mr-8 { margin-right: $space-8; }
|
||||
|
||||
.p-0 { padding: 0; }
|
||||
.p-1 { padding: $space-1; }
|
||||
.p-2 { padding: $space-2; }
|
||||
.p-3 { padding: $space-3; }
|
||||
.p-4 { padding: $space-4; }
|
||||
.p-5 { padding: $space-5; }
|
||||
.p-6 { padding: $space-6; }
|
||||
.p-8 { padding: $space-8; }
|
||||
|
||||
.pt-0 { padding-top: 0; }
|
||||
.pt-1 { padding-top: $space-1; }
|
||||
.pt-2 { padding-top: $space-2; }
|
||||
.pt-3 { padding-top: $space-3; }
|
||||
.pt-4 { padding-top: $space-4; }
|
||||
.pt-5 { padding-top: $space-5; }
|
||||
.pt-6 { padding-top: $space-6; }
|
||||
.pt-8 { padding-top: $space-8; }
|
||||
|
||||
.pb-0 { padding-bottom: 0; }
|
||||
.pb-1 { padding-bottom: $space-1; }
|
||||
.pb-2 { padding-bottom: $space-2; }
|
||||
.pb-3 { padding-bottom: $space-3; }
|
||||
.pb-4 { padding-bottom: $space-4; }
|
||||
.pb-5 { padding-bottom: $space-5; }
|
||||
.pb-6 { padding-bottom: $space-6; }
|
||||
.pb-8 { padding-bottom: $space-8; }
|
||||
|
||||
.pl-0 { padding-left: 0; }
|
||||
.pl-1 { padding-left: $space-1; }
|
||||
.pl-2 { padding-left: $space-2; }
|
||||
.pl-3 { padding-left: $space-3; }
|
||||
.pl-4 { padding-left: $space-4; }
|
||||
.pl-5 { padding-left: $space-5; }
|
||||
.pl-6 { padding-left: $space-6; }
|
||||
.pl-8 { padding-left: $space-8; }
|
||||
|
||||
.pr-0 { padding-right: 0; }
|
||||
.pr-1 { padding-right: $space-1; }
|
||||
.pr-2 { padding-right: $space-2; }
|
||||
.pr-3 { padding-right: $space-3; }
|
||||
.pr-4 { padding-right: $space-4; }
|
||||
.pr-5 { padding-right: $space-5; }
|
||||
.pr-6 { padding-right: $space-6; }
|
||||
.pr-8 { padding-right: $space-8; }
|
||||
|
||||
// Text
|
||||
.text-xs { font-size: $text-xs; }
|
||||
.text-sm { font-size: $text-sm; }
|
||||
.text-base { font-size: $text-base; }
|
||||
.text-lg { font-size: $text-lg; }
|
||||
.text-xl { font-size: $text-xl; }
|
||||
.text-2xl { font-size: $text-2xl; }
|
||||
.text-3xl { font-size: $text-3xl; }
|
||||
.text-4xl { font-size: $text-4xl; }
|
||||
|
||||
.font-thin { font-weight: $font-thin; }
|
||||
.font-light { font-weight: $font-light; }
|
||||
.font-normal { font-weight: $font-normal; }
|
||||
.font-medium { font-weight: $font-medium; }
|
||||
.font-semibold { font-weight: $font-semibold; }
|
||||
.font-bold { font-weight: $font-bold; }
|
||||
.font-extrabold { font-weight: $font-extrabold; }
|
||||
.font-black { font-weight: $font-black; }
|
||||
|
||||
.text-left { text-align: left; }
|
||||
.text-center { text-align: center; }
|
||||
.text-right { text-align: right; }
|
||||
.text-justify { text-align: justify; }
|
||||
|
||||
.text-primary { color: $primary-600; }
|
||||
.text-secondary { color: $secondary-600; }
|
||||
.text-success { color: $success; }
|
||||
.text-warning { color: $warning; }
|
||||
.text-error { color: $error; }
|
||||
.text-gray-500 { color: $gray-500; }
|
||||
.text-gray-600 { color: $gray-600; }
|
||||
.text-gray-700 { color: $gray-700; }
|
||||
.text-gray-900 { color: $gray-900; }
|
||||
|
||||
// Border Radius
|
||||
.rounded-none { border-radius: $radius-none; }
|
||||
.rounded-sm { border-radius: $radius-sm; }
|
||||
.rounded { border-radius: $radius-base; }
|
||||
.rounded-md { border-radius: $radius-md; }
|
||||
.rounded-lg { border-radius: $radius-lg; }
|
||||
.rounded-xl { border-radius: $radius-xl; }
|
||||
.rounded-2xl { border-radius: $radius-2xl; }
|
||||
.rounded-3xl { border-radius: $radius-3xl; }
|
||||
.rounded-full { border-radius: $radius-full; }
|
||||
|
||||
// Shadows
|
||||
.shadow-sm { box-shadow: $shadow-sm; }
|
||||
.shadow { box-shadow: $shadow-base; }
|
||||
.shadow-md { box-shadow: $shadow-md; }
|
||||
.shadow-lg { box-shadow: $shadow-lg; }
|
||||
.shadow-xl { box-shadow: $shadow-xl; }
|
||||
.shadow-2xl { box-shadow: $shadow-2xl; }
|
||||
.shadow-inner { box-shadow: $shadow-inner; }
|
||||
|
||||
// Transitions
|
||||
.transition { transition: all $duration-200 $ease-out; }
|
||||
.transition-fast { transition: all $duration-150 $ease-out; }
|
||||
.transition-slow { transition: all $duration-300 $ease-out; }
|
||||
|
||||
// Responsive Utilities
|
||||
// ========================================
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
.sm\:hidden { display: none; }
|
||||
.sm\:block { display: block; }
|
||||
.sm\:flex { display: flex; }
|
||||
.sm\:text-sm { font-size: $text-sm; }
|
||||
.sm\:text-base { font-size: $text-base; }
|
||||
.sm\:p-2 { padding: $space-2; }
|
||||
.sm\:p-4 { padding: $space-4; }
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
.md\:hidden { display: none; }
|
||||
.md\:block { display: block; }
|
||||
.md\:flex { display: flex; }
|
||||
.md\:text-sm { font-size: $text-sm; }
|
||||
.md\:text-base { font-size: $text-base; }
|
||||
.md\:p-2 { padding: $space-2; }
|
||||
.md\:p-4 { padding: $space-4; }
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
.lg\:hidden { display: none; }
|
||||
.lg\:block { display: block; }
|
||||
.lg\:flex { display: flex; }
|
||||
.lg\:text-sm { font-size: $text-sm; }
|
||||
.lg\:text-base { font-size: $text-base; }
|
||||
.lg\:p-2 { padding: $space-2; }
|
||||
.lg\:p-4 { padding: $space-4; }
|
||||
}
|
||||
|
||||
// Accessibility
|
||||
// ========================================
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Reduced Motion
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
@@ -1,709 +0,0 @@
|
||||
// ========================================
|
||||
// COMPONENT STYLES - Modern UI Components
|
||||
// ========================================
|
||||
|
||||
|
||||
@import './design-tokens';
|
||||
|
||||
// Card Components
|
||||
// ========================================
|
||||
|
||||
.modern-card {
|
||||
background: $card-bg;
|
||||
backdrop-filter: $backdrop-blur-md;
|
||||
border: 1px solid $card-border;
|
||||
border-radius: $radius-xl;
|
||||
box-shadow: $card-shadow;
|
||||
padding: $space-6;
|
||||
transition: all $duration-300 $ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: $glass-gradient;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-xl;
|
||||
border-color: rgba($primary-500, 0.2);
|
||||
}
|
||||
|
||||
&.glassmorphism {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: $backdrop-blur-lg;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&.gradient {
|
||||
background: $gradient-primary;
|
||||
color: $white;
|
||||
border: none;
|
||||
|
||||
&::before {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $space-4;
|
||||
padding-bottom: $space-4;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
||||
.card-title {
|
||||
font-size: $text-xl;
|
||||
font-weight: $font-semibold;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: $space-2;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
color: $gray-700;
|
||||
line-height: $leading-relaxed;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
margin-top: $space-4;
|
||||
padding-top: $space-4;
|
||||
border-top: 1px solid $gray-200;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: $space-3;
|
||||
}
|
||||
|
||||
// Button Components
|
||||
// ========================================
|
||||
|
||||
.modern-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $space-2;
|
||||
padding: $space-3 $space-6;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
line-height: 1;
|
||||
border-radius: $radius-lg;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all $duration-200 $ease-out;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid $primary-500;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.btn-sm {
|
||||
padding: $space-2 $space-4;
|
||||
font-size: $text-xs;
|
||||
height: $btn-height-sm;
|
||||
}
|
||||
|
||||
&.btn-md {
|
||||
padding: $space-3 $space-6;
|
||||
font-size: $text-sm;
|
||||
height: $btn-height-md;
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
padding: $space-4 $space-8;
|
||||
font-size: $text-base;
|
||||
height: $btn-height-lg;
|
||||
}
|
||||
|
||||
// Variants
|
||||
&.btn-primary {
|
||||
background: $gradient-primary;
|
||||
color: $white;
|
||||
border-color: $primary-600;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, $primary-600 0%, $primary-800 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: $shadow-lg;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
background: $white;
|
||||
color: $gray-700;
|
||||
border-color: $gray-300;
|
||||
|
||||
&:hover {
|
||||
background: $gray-50;
|
||||
border-color: $gray-400;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-outline {
|
||||
background: transparent;
|
||||
color: $primary-600;
|
||||
border-color: $primary-600;
|
||||
|
||||
&:hover {
|
||||
background: $primary-50;
|
||||
border-color: $primary-700;
|
||||
color: $primary-700;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-ghost {
|
||||
background: transparent;
|
||||
color: $gray-600;
|
||||
border-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background: $gray-100;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-success {
|
||||
background: $gradient-success;
|
||||
color: $white;
|
||||
border-color: $accent-green;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #059669 0%, #047857 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: $shadow-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-warning {
|
||||
background: $gradient-warning;
|
||||
color: $white;
|
||||
border-color: $accent-orange;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: $shadow-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-error {
|
||||
background: $gradient-error;
|
||||
color: $white;
|
||||
border-color: $accent-red;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: $shadow-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Loading state
|
||||
&.loading {
|
||||
position: relative;
|
||||
color: transparent;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid transparent;
|
||||
border-top: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Form Components
|
||||
// ========================================
|
||||
|
||||
.modern-form-group {
|
||||
margin-bottom: $space-6;
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-medium;
|
||||
color: $gray-700;
|
||||
margin-bottom: $space-2;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: $space-3 $space-4;
|
||||
font-size: $text-sm;
|
||||
line-height: $leading-normal;
|
||||
color: $gray-900;
|
||||
background: $white;
|
||||
border: 1px solid $input-border;
|
||||
border-radius: $radius-lg;
|
||||
transition: all $duration-200 $ease-out;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $input-border-focus;
|
||||
box-shadow: 0 0 0 3px rgba($primary-500, 0.1);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: $gray-100;
|
||||
color: $gray-500;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: $input-border-error;
|
||||
box-shadow: 0 0 0 3px rgba($error, 0.1);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
@extend .form-input;
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
@extend .form-input;
|
||||
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 $space-3 center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px 12px;
|
||||
padding-right: $space-10;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
margin-top: $space-1;
|
||||
font-size: $text-xs;
|
||||
color: $error;
|
||||
}
|
||||
|
||||
.form-help {
|
||||
margin-top: $space-1;
|
||||
font-size: $text-xs;
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
// Input Group
|
||||
.input-group {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
.input-group-prepend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $space-3 $space-4;
|
||||
background: $gray-100;
|
||||
border: 1px solid $gray-300;
|
||||
border-right: none;
|
||||
border-radius: $radius-lg 0 0 $radius-lg;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.input-group-append {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $space-3 $space-4;
|
||||
background: $gray-100;
|
||||
border: 1px solid $gray-300;
|
||||
border-left: none;
|
||||
border-radius: 0 $radius-lg $radius-lg 0;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
border-radius: 0;
|
||||
|
||||
&:first-child {
|
||||
border-radius: $radius-lg 0 0 $radius-lg;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 $radius-lg $radius-lg 0;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-radius: $radius-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Table Components
|
||||
// ========================================
|
||||
|
||||
.modern-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: $white;
|
||||
border-radius: $radius-xl;
|
||||
overflow: hidden;
|
||||
box-shadow: $shadow-lg;
|
||||
|
||||
thead {
|
||||
background: $gray-50;
|
||||
|
||||
th {
|
||||
padding: $space-4 $space-6;
|
||||
text-align: left;
|
||||
font-size: $text-xs;
|
||||
font-weight: $font-semibold;
|
||||
color: $gray-600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
||||
&:first-child {
|
||||
padding-left: $space-8;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: $space-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
transition: background-color $duration-150 $ease-out;
|
||||
|
||||
&:hover {
|
||||
background: $gray-50;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: $space-4 $space-6;
|
||||
font-size: $text-sm;
|
||||
color: $gray-700;
|
||||
|
||||
&:first-child {
|
||||
padding-left: $space-8;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: $space-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Badge Components
|
||||
// ========================================
|
||||
|
||||
.modern-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: $space-1 $space-3;
|
||||
font-size: $text-xs;
|
||||
font-weight: $font-medium;
|
||||
border-radius: $radius-full;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
&.badge-primary {
|
||||
background: $primary-100;
|
||||
color: $primary-800;
|
||||
}
|
||||
|
||||
&.badge-secondary {
|
||||
background: $secondary-100;
|
||||
color: $secondary-800;
|
||||
}
|
||||
|
||||
&.badge-success {
|
||||
background: rgba($accent-green, 0.1);
|
||||
color: $accent-green;
|
||||
}
|
||||
|
||||
&.badge-warning {
|
||||
background: rgba($accent-orange, 0.1);
|
||||
color: $accent-orange;
|
||||
}
|
||||
|
||||
&.badge-error {
|
||||
background: rgba($accent-red, 0.1);
|
||||
color: $accent-red;
|
||||
}
|
||||
|
||||
&.badge-gray {
|
||||
background: $gray-100;
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
// Alert Components
|
||||
// ========================================
|
||||
|
||||
.modern-alert {
|
||||
padding: $space-4 $space-6;
|
||||
border-radius: $radius-lg;
|
||||
border: 1px solid;
|
||||
margin-bottom: $space-4;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $space-3;
|
||||
|
||||
.alert-icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.alert-content {
|
||||
flex: 1;
|
||||
|
||||
.alert-title {
|
||||
font-weight: $font-semibold;
|
||||
margin-bottom: $space-1;
|
||||
}
|
||||
|
||||
.alert-message {
|
||||
font-size: $text-sm;
|
||||
line-height: $leading-relaxed;
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-info {
|
||||
background: rgba($primary-500, 0.05);
|
||||
border-color: rgba($primary-500, 0.2);
|
||||
color: $primary-800;
|
||||
|
||||
.alert-icon {
|
||||
color: $primary-600;
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-success {
|
||||
background: rgba($accent-green, 0.05);
|
||||
border-color: rgba($accent-green, 0.2);
|
||||
color: #065f46;
|
||||
|
||||
.alert-icon {
|
||||
color: $accent-green;
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-warning {
|
||||
background: rgba($accent-orange, 0.05);
|
||||
border-color: rgba($accent-orange, 0.2);
|
||||
color: #92400e;
|
||||
|
||||
.alert-icon {
|
||||
color: $accent-orange;
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-error {
|
||||
background: rgba($accent-red, 0.05);
|
||||
border-color: rgba($accent-red, 0.2);
|
||||
color: #991b1b;
|
||||
|
||||
.alert-icon {
|
||||
color: $accent-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modal Components
|
||||
// ========================================
|
||||
|
||||
.modern-modal {
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba($black, 0.5);
|
||||
backdrop-filter: $backdrop-blur-sm;
|
||||
z-index: $z-modal-backdrop;
|
||||
animation: fadeIn $duration-200 $ease-out;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: $white;
|
||||
border-radius: $radius-2xl;
|
||||
box-shadow: $shadow-2xl;
|
||||
z-index: $z-modal;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
animation: slideIn $duration-300 $ease-out;
|
||||
|
||||
.modal-header {
|
||||
padding: $space-6 $space-8;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.modal-title {
|
||||
font-size: $text-xl;
|
||||
font-weight: $font-semibold;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: $gray-400;
|
||||
cursor: pointer;
|
||||
padding: $space-2;
|
||||
border-radius: $radius-md;
|
||||
transition: all $duration-200 $ease-out;
|
||||
|
||||
&:hover {
|
||||
background: $gray-100;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: $space-6 $space-8;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: $space-6 $space-8;
|
||||
border-top: 1px solid $gray-200;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: $space-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -60%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Loading Components
|
||||
// ========================================
|
||||
|
||||
.modern-spinner {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid $gray-200;
|
||||
border-top: 2px solid $primary-500;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
|
||||
&.spinner-sm {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-width: 1.5px;
|
||||
}
|
||||
|
||||
&.spinner-lg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.modern-skeleton {
|
||||
background: linear-gradient(90deg, $gray-200 25%, $gray-100 50%, $gray-200 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
border-radius: $radius-md;
|
||||
|
||||
&.skeleton-text {
|
||||
height: 1em;
|
||||
margin-bottom: $space-2;
|
||||
}
|
||||
|
||||
&.skeleton-title {
|
||||
height: 1.5em;
|
||||
margin-bottom: $space-4;
|
||||
}
|
||||
|
||||
&.skeleton-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.skeleton-button {
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
@@ -1,258 +0,0 @@
|
||||
// ========================================
|
||||
// DESIGN TOKENS - Modern UI Design System
|
||||
// ========================================
|
||||
|
||||
// Dynamic Theme Variables (CSS Custom Properties)
|
||||
// ========================================
|
||||
:root {
|
||||
// Default theme colors (fallback)
|
||||
--theme-primary: #0ea5e9;
|
||||
--theme-secondary: #64748b;
|
||||
--theme-accent: #8b5cf6;
|
||||
--theme-error: #ef4444;
|
||||
--theme-error-dark: #dc2626;
|
||||
--theme-background: #f8fafc;
|
||||
--theme-surface: #ffffff;
|
||||
--theme-text: #1f2937;
|
||||
--theme-text-secondary: #6b7280;
|
||||
--theme-border-radius: 0.5rem;
|
||||
--theme-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
--theme-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--theme-font-secondary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--theme-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
|
||||
}
|
||||
|
||||
// Color Palette
|
||||
// ========================================
|
||||
|
||||
// Primary Colors (with theme support)
|
||||
$primary-50: #f0f9ff;
|
||||
$primary-100: #e0f2fe;
|
||||
$primary-200: #bae6fd;
|
||||
$primary-300: #7dd3fc;
|
||||
$primary-400: #38bdf8;
|
||||
$primary-500: var(--theme-primary, #0ea5e9); // Dynamic primary
|
||||
$primary-600: #0284c7;
|
||||
$primary-700: #0369a1;
|
||||
$primary-800: #075985;
|
||||
$primary-900: #0c4a6e;
|
||||
|
||||
// Secondary Colors (with theme support)
|
||||
$secondary-50: #f8fafc;
|
||||
$secondary-100: #f1f5f9;
|
||||
$secondary-200: #e2e8f0;
|
||||
$secondary-300: #cbd5e1;
|
||||
$secondary-400: #94a3b8;
|
||||
$secondary-500: var(--theme-secondary, #64748b); // Dynamic secondary
|
||||
$secondary-600: #475569;
|
||||
$secondary-700: #334155;
|
||||
$secondary-800: #1e293b;
|
||||
$secondary-900: #0f172a;
|
||||
|
||||
// Accent Colors (with theme support)
|
||||
$accent-purple: var(--theme-accent, #8b5cf6);
|
||||
$accent-green: #10b981;
|
||||
$accent-orange: #f59e0b;
|
||||
$accent-red: #ef4444;
|
||||
$accent-pink: #ec4899;
|
||||
|
||||
// Neutral Colors (with theme support)
|
||||
$white: #ffffff;
|
||||
$gray-50: #f9fafb;
|
||||
$gray-100: #f3f4f6;
|
||||
$gray-200: #e5e7eb;
|
||||
$gray-300: #d1d5db;
|
||||
$gray-400: #9ca3af;
|
||||
$gray-500: #6b7280;
|
||||
$gray-600: #4b5563;
|
||||
$gray-700: #374151;
|
||||
$gray-800: #1f2937;
|
||||
$gray-900: var(--theme-text, #111827); // Dynamic text color
|
||||
$black: #000000;
|
||||
|
||||
// Theme-aware colors
|
||||
$theme-background: var(--theme-background, #f8fafc);
|
||||
$theme-surface: var(--theme-surface, #ffffff);
|
||||
$theme-text: var(--theme-text, #1f2937);
|
||||
$theme-text-secondary: var(--theme-text-secondary, #6b7280);
|
||||
|
||||
// Semantic Colors
|
||||
$success: $accent-green;
|
||||
$warning: $accent-orange;
|
||||
$error: $accent-red;
|
||||
$info: $primary-500;
|
||||
|
||||
// Typography
|
||||
// ========================================
|
||||
|
||||
// Font Families (with theme support)
|
||||
$font-primary: var(--theme-font-primary, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
|
||||
$font-secondary: var(--theme-font-secondary, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
|
||||
$font-mono: var(--theme-font-mono, 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace);
|
||||
|
||||
// Font Sizes
|
||||
$text-xs: 0.75rem; // 12px
|
||||
$text-sm: 0.875rem; // 14px
|
||||
$text-base: 1rem; // 16px
|
||||
$text-lg: 1.125rem; // 18px
|
||||
$text-xl: 1.25rem; // 20px
|
||||
$text-2xl: 1.5rem; // 24px
|
||||
$text-3xl: 1.875rem; // 30px
|
||||
$text-4xl: 2.25rem; // 36px
|
||||
$text-5xl: 3rem; // 48px
|
||||
$text-6xl: 3.75rem; // 60px
|
||||
|
||||
// Font Weights
|
||||
$font-thin: 100;
|
||||
$font-light: 300;
|
||||
$font-normal: 400;
|
||||
$font-medium: 500;
|
||||
$font-semibold: 600;
|
||||
$font-bold: 700;
|
||||
$font-extrabold: 800;
|
||||
$font-black: 900;
|
||||
|
||||
// Line Heights
|
||||
$leading-none: 1;
|
||||
$leading-tight: 1.25;
|
||||
$leading-snug: 1.375;
|
||||
$leading-normal: 1.5;
|
||||
$leading-relaxed: 1.625;
|
||||
$leading-loose: 2;
|
||||
|
||||
// Spacing System
|
||||
// ========================================
|
||||
|
||||
$space-0: 0;
|
||||
$space-1: 0.25rem; // 4px
|
||||
$space-2: 0.5rem; // 8px
|
||||
$space-3: 0.75rem; // 12px
|
||||
$space-4: 1rem; // 16px
|
||||
$space-5: 1.25rem; // 20px
|
||||
$space-6: 1.5rem; // 24px
|
||||
$space-8: 2rem; // 32px
|
||||
$space-10: 2.5rem; // 40px
|
||||
$space-12: 3rem; // 48px
|
||||
$space-16: 4rem; // 64px
|
||||
$space-20: 5rem; // 80px
|
||||
$space-24: 6rem; // 96px
|
||||
$space-32: 8rem; // 128px
|
||||
|
||||
// Border Radius (with theme support)
|
||||
// ========================================
|
||||
|
||||
$radius-none: 0;
|
||||
$radius-sm: 0.125rem; // 2px
|
||||
$radius-base: 0.25rem; // 4px
|
||||
$radius-md: 0.375rem; // 6px
|
||||
$radius-lg: var(--theme-border-radius, 0.5rem); // Dynamic border radius
|
||||
$radius-xl: 0.75rem; // 12px
|
||||
$radius-2xl: 1rem; // 16px
|
||||
$radius-3xl: 1.5rem; // 24px
|
||||
$radius-full: 9999px;
|
||||
|
||||
// Shadows (with theme support)
|
||||
// ========================================
|
||||
|
||||
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
$shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
$shadow-lg: var(--theme-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)); // Dynamic shadow
|
||||
$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
$shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
|
||||
|
||||
// Glassmorphism Shadows
|
||||
$glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
$glass-shadow-lg: 0 20px 40px 0 rgba(31, 38, 135, 0.4);
|
||||
|
||||
// Animation
|
||||
// ========================================
|
||||
|
||||
// Timing Functions
|
||||
$ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
$ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
$ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
$ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
|
||||
// Duration
|
||||
$duration-75: 75ms;
|
||||
$duration-100: 100ms;
|
||||
$duration-150: 150ms;
|
||||
$duration-200: 200ms;
|
||||
$duration-300: 300ms;
|
||||
$duration-500: 500ms;
|
||||
$duration-700: 700ms;
|
||||
$duration-1000: 1000ms;
|
||||
|
||||
// Responsive Breakpoints
|
||||
// ========================================
|
||||
|
||||
$breakpoint-sm: 640px; // Small devices
|
||||
$breakpoint-md: 768px; // Medium devices
|
||||
$breakpoint-lg: 1024px; // Large devices
|
||||
$breakpoint-xl: 1280px; // Extra large devices
|
||||
$breakpoint-2xl: 1536px; // 2X large devices
|
||||
|
||||
// Z-Index Scale
|
||||
// ========================================
|
||||
|
||||
$z-dropdown: 1000;
|
||||
$z-sticky: 1020;
|
||||
$z-fixed: 1030;
|
||||
$z-modal-backdrop: 1040;
|
||||
$z-modal: 1050;
|
||||
$z-popover: 1060;
|
||||
$z-tooltip: 1070;
|
||||
$z-toast: 1080;
|
||||
|
||||
// Component Specific Variables
|
||||
// ========================================
|
||||
|
||||
// Header
|
||||
$header-height: 4rem; // 64px
|
||||
$header-bg: rgba(255, 255, 255, 0.95);
|
||||
$header-border: rgba(0, 0, 0, 0.1);
|
||||
|
||||
// Sidebar
|
||||
$sidebar-width: 16rem; // 256px
|
||||
$sidebar-width-collapsed: 4rem; // 64px
|
||||
$sidebar-bg: rgba(255, 255, 255, 0.98);
|
||||
$sidebar-border: rgba(0, 0, 0, 0.05);
|
||||
|
||||
// Cards
|
||||
$card-bg: rgba(255, 255, 255, 0.9);
|
||||
$card-border: rgba(0, 0, 0, 0.05);
|
||||
$card-shadow: $shadow-lg;
|
||||
|
||||
// Buttons
|
||||
$btn-height-sm: 2rem; // 32px
|
||||
$btn-height-md: 2.5rem; // 40px
|
||||
$btn-height-lg: 3rem; // 48px
|
||||
|
||||
// Form Elements
|
||||
$input-height: 2.5rem; // 40px
|
||||
$input-border: rgba(0, 0, 0, 0.1);
|
||||
$input-border-focus: $primary-500;
|
||||
$input-border-error: $error;
|
||||
|
||||
// Gradients
|
||||
// ========================================
|
||||
|
||||
$gradient-primary: linear-gradient(135deg, $primary-500 0%, $primary-700 100%);
|
||||
$gradient-secondary: linear-gradient(135deg, $secondary-500 0%, $secondary-700 100%);
|
||||
$gradient-accent: linear-gradient(135deg, $accent-purple 0%, $accent-pink 100%);
|
||||
$gradient-success: linear-gradient(135deg, $accent-green 0%, #059669 100%);
|
||||
$gradient-warning: linear-gradient(135deg, $accent-orange 0%, #d97706 100%);
|
||||
$gradient-error: linear-gradient(135deg, $accent-red 0%, #dc2626 100%);
|
||||
|
||||
// Glassmorphism Gradients
|
||||
$glass-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
|
||||
$glass-gradient-dark: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
|
||||
|
||||
// Backdrop Blur
|
||||
$backdrop-blur-sm: blur(4px);
|
||||
$backdrop-blur-md: blur(8px);
|
||||
$backdrop-blur-lg: blur(16px);
|
||||
$backdrop-blur-xl: blur(24px);
|
||||
@@ -1,367 +0,0 @@
|
||||
// ========================================
|
||||
// DYNAMIC THEME VARIABLES
|
||||
// ========================================
|
||||
@import './design-tokens';
|
||||
// CSS Custom Properties for Dynamic Theming
|
||||
// These variables will be set by the ThemeService at runtime
|
||||
|
||||
:root {
|
||||
// Default theme variables (fallback values)
|
||||
--theme-primary: #0ea5e9;
|
||||
--theme-secondary: #64748b;
|
||||
--theme-accent: #8b5cf6;
|
||||
--theme-background: #f8fafc;
|
||||
--theme-surface: #ffffff;
|
||||
--theme-text: #111827;
|
||||
--theme-text-secondary: #6b7280;
|
||||
|
||||
// Font variables
|
||||
--theme-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--theme-font-secondary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--theme-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
|
||||
|
||||
// Other theme properties
|
||||
--theme-border-radius: 0.75rem;
|
||||
--theme-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
|
||||
// Derived colors for better theme integration
|
||||
--theme-primary-50: #{rgba(#0ea5e9, 0.05)};
|
||||
--theme-primary-100: #{rgba(#0ea5e9, 0.1)};
|
||||
--theme-primary-200: #{rgba(#0ea5e9, 0.2)};
|
||||
--theme-primary-300: #{rgba(#0ea5e9, 0.3)};
|
||||
--theme-primary-500: #0ea5e9;
|
||||
--theme-primary-600: #{darken(#0ea5e9, 10%)};
|
||||
--theme-primary-700: #{darken(#0ea5e9, 20%)};
|
||||
--theme-primary-800: #{darken(#0ea5e9, 30%)};
|
||||
--theme-primary-900: #{darken(#0ea5e9, 40%)};
|
||||
|
||||
// Gradient definitions using theme colors
|
||||
--theme-gradient-primary: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-700) 100%);
|
||||
--theme-gradient-secondary: linear-gradient(135deg, var(--theme-secondary) 0%, #{darken(#64748b, 20%)} 100%);
|
||||
--theme-gradient-accent: linear-gradient(135deg, var(--theme-accent) 0%, #{darken(#8b5cf6, 20%)} 100%);
|
||||
|
||||
// Glassmorphism effects
|
||||
--theme-glass-bg: rgba(255, 255, 255, 0.1);
|
||||
--theme-glass-border: rgba(255, 255, 255, 0.2);
|
||||
--theme-glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
}
|
||||
|
||||
// Dark theme overrides
|
||||
[data-theme="dark"] {
|
||||
--theme-background: #111827;
|
||||
--theme-surface: #1f2937;
|
||||
--theme-text: #f9fafb;
|
||||
--theme-text-secondary: #d1d5db;
|
||||
--theme-glass-bg: rgba(0, 0, 0, 0.1);
|
||||
--theme-glass-border: rgba(255, 255, 255, 0.1);
|
||||
--theme-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
// Theme-aware utility classes
|
||||
// ========================================
|
||||
|
||||
// Background colors
|
||||
.bg-theme-primary { background-color: var(--theme-primary) !important; }
|
||||
.bg-theme-secondary { background-color: var(--theme-secondary) !important; }
|
||||
.bg-theme-accent { background-color: var(--theme-accent) !important; }
|
||||
.bg-theme-background { background-color: var(--theme-background) !important; }
|
||||
.bg-theme-surface { background-color: var(--theme-surface) !important; }
|
||||
|
||||
// Text colors
|
||||
.text-theme-primary { color: var(--theme-primary) !important; }
|
||||
.text-theme-secondary { color: var(--theme-secondary) !important; }
|
||||
.text-theme-accent { color: var(--theme-accent) !important; }
|
||||
.text-theme-text { color: var(--theme-text) !important; }
|
||||
.text-theme-text-secondary { color: var(--theme-text-secondary) !important; }
|
||||
|
||||
// Border colors
|
||||
.border-theme-primary { border-color: var(--theme-primary) !important; }
|
||||
.border-theme-secondary { border-color: var(--theme-secondary) !important; }
|
||||
.border-theme-accent { border-color: var(--theme-accent) !important; }
|
||||
|
||||
// Gradients
|
||||
.bg-gradient-theme-primary { background: var(--theme-gradient-primary) !important; }
|
||||
.bg-gradient-theme-secondary { background: var(--theme-gradient-secondary) !important; }
|
||||
.bg-gradient-theme-accent { background: var(--theme-gradient-accent) !important; }
|
||||
|
||||
// Font families
|
||||
.font-theme-primary { font-family: var(--theme-font-primary) !important; }
|
||||
.font-theme-secondary { font-family: var(--theme-font-secondary) !important; }
|
||||
.font-theme-mono { font-family: var(--theme-font-mono) !important; }
|
||||
|
||||
// Border radius
|
||||
.rounded-theme { border-radius: var(--theme-border-radius) !important; }
|
||||
|
||||
// Shadows
|
||||
.shadow-theme { box-shadow: var(--theme-shadow) !important; }
|
||||
|
||||
// Glassmorphism effects
|
||||
.glass-theme {
|
||||
background: var(--theme-glass-bg) !important;
|
||||
backdrop-filter: blur(16px) !important;
|
||||
border: 1px solid var(--theme-glass-border) !important;
|
||||
box-shadow: var(--theme-glass-shadow) !important;
|
||||
}
|
||||
|
||||
// Theme-aware component overrides
|
||||
// ========================================
|
||||
|
||||
// Update existing component styles to use theme variables
|
||||
.modern-card {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border: 1px solid rgba(var(--theme-text-secondary), 0.1);
|
||||
box-shadow: var(--theme-shadow);
|
||||
}
|
||||
|
||||
.modern-btn {
|
||||
&.btn-primary {
|
||||
background: var(--theme-gradient-primary);
|
||||
color: white;
|
||||
border-color: var(--theme-primary-600);
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border-color: rgba(var(--theme-text-secondary), 0.2);
|
||||
}
|
||||
|
||||
&.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--theme-primary);
|
||||
border-color: var(--theme-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.modern-form-group {
|
||||
.form-label {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.form-input {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border-color: rgba(var(--theme-text-secondary), 0.2);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px var(--theme-primary-100);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modern-table {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
|
||||
thead {
|
||||
background: var(--theme-background);
|
||||
|
||||
th {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modern-alert {
|
||||
&.alert-info {
|
||||
background: var(--theme-primary-100);
|
||||
border-color: var(--theme-primary-200);
|
||||
color: var(--theme-primary-800);
|
||||
}
|
||||
|
||||
&.alert-success {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
border-color: rgba(16, 185, 129, 0.2);
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
&.alert-warning {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
border-color: rgba(245, 158, 11, 0.2);
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
&.alert-error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-color: rgba(239, 68, 68, 0.2);
|
||||
color: #991b1b;
|
||||
}
|
||||
}
|
||||
|
||||
// Layout component theme integration
|
||||
// ========================================
|
||||
|
||||
.modern-layout {
|
||||
background: var(--theme-background);
|
||||
}
|
||||
|
||||
.modern-header {
|
||||
background: rgba(var(--theme-surface), 0.95);
|
||||
border-bottom: 1px solid rgba(var(--theme-text-secondary), 0.1);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.modern-branding {
|
||||
.company-title {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.company-subtitle {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.modern-sidebar {
|
||||
background: rgba(var(--theme-surface), 0.98);
|
||||
border-right: 1px solid rgba(var(--theme-text-secondary), 0.05);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.modern-nav-link,
|
||||
.modern-nav-link-single {
|
||||
color: var(--theme-text-secondary);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-primary-100);
|
||||
color: var(--theme-primary-700);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--theme-primary-100);
|
||||
color: var(--theme-primary-800);
|
||||
}
|
||||
}
|
||||
|
||||
.modern-user-button {
|
||||
background: transparent;
|
||||
color: var(--theme-text);
|
||||
border-color: rgba(var(--theme-text-secondary), 0.2);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
border-color: rgba(var(--theme-text-secondary), 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.modern-dropdown-menu {
|
||||
background: var(--theme-surface);
|
||||
border-color: rgba(var(--theme-text-secondary), 0.2);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.modern-dropdown-item {
|
||||
color: var(--theme-text);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
|
||||
// Dashboard theme integration
|
||||
// ========================================
|
||||
|
||||
.modern-dashboard {
|
||||
background: var(--theme-background);
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
background: var(--theme-gradient-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border: 1px solid rgba(var(--theme-text-secondary), 0.1);
|
||||
|
||||
.stats-value {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.action-card {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border-color: rgba(var(--theme-text-secondary), 0.2);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--theme-primary-300);
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.activity-card {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
|
||||
.activity-item {
|
||||
border-bottom-color: rgba(var(--theme-text-secondary), 0.1);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
}
|
||||
|
||||
.activity-title {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive theme adjustments
|
||||
// ========================================
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme]) {
|
||||
--theme-background: #111827;
|
||||
--theme-surface: #1f2937;
|
||||
--theme-text: #f9fafb;
|
||||
--theme-text-secondary: #d1d5db;
|
||||
}
|
||||
}
|
||||
|
||||
// Print styles
|
||||
// ========================================
|
||||
|
||||
@media print {
|
||||
:root {
|
||||
--theme-background: white;
|
||||
--theme-surface: white;
|
||||
--theme-text: black;
|
||||
--theme-text-secondary: #666;
|
||||
--theme-shadow: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user