A well-designed admin panel isn’t just about managing data — it’s about making that data easier to understand and interact with. By customizing how each field is displayed, you can turn raw database values into meaningful, user-friendly interfaces that save time and reduce errors.
`;
+ // JSON5-formatted default params
public defaultParams = {
Boolean:
-`// Display "Yes/No" buttons and specify "allow_null" in field structure:
-// Use "false" to require that one of the buttons is selected;
-// Use "true" if the field might be left unspecified.
+`// Display "Yes/No" buttons with configurable options:
+// - allow_null: Use "false" to require selection, "true" if field can be left unspecified
+// - invert_colors: Swap the color scheme (typically green=Yes, red=No becomes red=Yes, green=No)
{
- "structure": {
- "allow_null": false
- }
-}`,
+ "allow_null": false,
+ "invert_colors": false
+}
+`,
Code:
`// provide language of code to highlight: 'html', 'css', 'typescript', 'yaml', 'markdown'
// example:
@@ -167,10 +168,13 @@ export class DbTableWidgetsComponent implements OnInit {
"allow_negative": true
}
`,
- Number: `// Configure number display with unit conversion
+ Number: `// Configure number display with unit conversion and threshold validation
// Example units: "bytes", "meters", "seconds", "grams"
+// threshold_min/threshold_max: Values outside these limits will be highlighted in red
{
- "unit": null
+ "unit": null,
+ "threshold_min": null,
+ "threshold_max": null
}`,
Password:
`// provide algorithm to encrypt your password, one of:
@@ -224,7 +228,19 @@ export class DbTableWidgetsComponent implements OnInit {
}
]
}`,
- String: `// No settings required`,
+ String: `// Optional validation for string values
+// validate: Any validator.js method (e.g., "isEmail", "isURL", "isUUID", "isJSON", "isAlpha", "isNumeric")
+// Full list: isEmail, isURL, isMACAddress, isIP, isIPRange, isFQDN, isBoolean, isIBAN, isBIC,
+// isAlpha, isAlphanumeric, isNumeric, isPort, isLowercase, isUppercase, isAscii, isBase64,
+// isHexadecimal, isHexColor, isRgbColor, isHSL, isMD5, isHash, isJWT, isJSON, isUUID,
+// isMongoId, isCreditCard, isISBN, isISSN, isMobilePhone, isPostalCode, isEthereumAddress,
+// isCurrency, isBtcAddress, isISO8601, isISO31661Alpha2, isISO31661Alpha3, isISO4217,
+// isDataURI, isMagnetURI, isMimeType, isLatLong, isSlug, isStrongPassword, isTaxID, isVAT
+// OR use "regex" with a regex parameter for custom pattern matching
+{
+ "validate": null,
+ "regex": null
+}`,
Textarea: `// provide number of strings to show.
{
"rows": 5
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.css
index 8f7c02808..4ceacd56f 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.css
@@ -11,10 +11,6 @@
padding: 8px 4px;
}
-/* .widget-type__docs-link {
- color: var(--color-accentedDarkPalette-500);
-} */
-
.code-editor-box {
display: block;
border: 1px solid rgba(0, 0, 0, 0.38);
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css
index 86d585cf0..4e50b5293 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css
@@ -11,13 +11,29 @@
}
.saved-filters-list__first-time-button {
- background: var(--color-accentedPalette-50);
- border: 1px dashed var(--color-accentedPalette-300);
transition: background 0.3s ease;
}
-.saved-filters-list__first-time-button:hover {
- background: var(--color-accentedPalette-100) !important;
+@media (prefers-color-scheme: light) {
+ .saved-filters-list__first-time-button {
+ background: var(--color-accentedPalette-50);
+ border: 1px dashed var(--color-accentedPalette-300);
+ }
+
+ .saved-filters-list__first-time-button:hover {
+ background: var(--color-accentedPalette-100) !important;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ .saved-filters-list__first-time-button {
+ background: var(--color-accentedPalette-900);
+ border: 1px dashed var(--color-accentedPalette-600);
+ }
+
+ .saved-filters-list__first-time-button:hover {
+ background: var(--color-accentedPalette-800) !important;
+ }
}
/* .saved-filters-tabs {
diff --git a/frontend/src/app/components/ui-components/filter-fields/boolean/boolean.component.ts b/frontend/src/app/components/ui-components/filter-fields/boolean/boolean.component.ts
index dba00a20a..ca4e4e400 100644
--- a/frontend/src/app/components/ui-components/filter-fields/boolean/boolean.component.ts
+++ b/frontend/src/app/components/ui-components/filter-fields/boolean/boolean.component.ts
@@ -30,7 +30,17 @@ export class BooleanFilterComponent extends BaseFilterFieldComponent {
super.ngOnInit();
this.connectionType = this._connections.currentConnection.type;
this.setBooleanValue();
- this.isRadiogroup = (this.structure?.allow_null) || !!(this.widgetStructure?.widget_params?.structure?.allow_null);
+
+ // Parse widget parameters if available
+ let parsedParams = null;
+ if (this.widgetStructure?.widget_params) {
+ parsedParams = typeof this.widgetStructure.widget_params === 'string'
+ ? JSON.parse(this.widgetStructure.widget_params)
+ : this.widgetStructure.widget_params;
+ }
+
+ // Check allow_null from either structure or widget params
+ this.isRadiogroup = (this.structure?.allow_null) || !!(parsedParams?.allow_null);
}
setBooleanValue() {
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.ts b/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.ts
index bdd457ef6..e2ec84d8a 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.ts
+++ b/frontend/src/app/components/ui-components/record-edit-fields/boolean/boolean.component.ts
@@ -39,7 +39,16 @@ export class BooleanEditComponent extends BaseEditFieldComponent {
this.onFieldChange.emit(this.value);
- this.isRadiogroup = (this.structure?.allow_null) || !!(this.widgetStructure?.widget_params?.structure?.allow_null);
+ // Parse widget parameters if available
+ let parsedParams = null;
+ if (this.widgetStructure?.widget_params) {
+ parsedParams = typeof this.widgetStructure.widget_params === 'string'
+ ? JSON.parse(this.widgetStructure.widget_params)
+ : this.widgetStructure.widget_params;
+ }
+
+ // Check allow_null from either structure or widget params
+ this.isRadiogroup = (this.structure?.allow_null) || !!(parsedParams?.allow_null);
}
onToggleChange(optionValue: boolean): void {
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.css b/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.css
index 1d5734f00..c07e4f255 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.css
+++ b/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.css
@@ -1,3 +1,16 @@
.form-field {
+ position: relative;
width: 100%;
+}
+
+.long-textarea {
+ margin-bottom: 20px;
+}
+
+.counter {
+ position: absolute;
+ bottom: 8px;
+ font-size: 12px;
+ width: 90%;
+ background: #fff;
}
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html b/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html
index 626b813c2..5992b3971 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.html
@@ -1,9 +1,19 @@
{{normalizedLabel}}
+
{{value.length}} / {{maxLength}}
+ This field is required.
+ Maximum length is {{maxLength}} characters.
+ {{getValidationErrorMessage()}}
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.ts b/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.ts
index c7ebb0558..2e69cf0ee 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.ts
+++ b/frontend/src/app/components/ui-components/record-edit-fields/long-text/long-text.component.ts
@@ -1,29 +1,78 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
import { BaseEditFieldComponent } from '../base-row-field/base-row-field.component';
+import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
+import { TextValidatorDirective } from 'src/app/directives/text-validator.directive';
@Component({
selector: 'app-edit-long-text',
templateUrl: './long-text.component.html',
styleUrls: ['./long-text.component.css'],
- imports: [MatFormFieldModule, MatInputModule, FormsModule]
+ imports: [CommonModule, MatFormFieldModule, MatInputModule, FormsModule, TextValidatorDirective]
})
-export class LongTextEditComponent extends BaseEditFieldComponent {
+export class LongTextEditComponent extends BaseEditFieldComponent implements OnInit {
@Input() value: string;
static type = 'text';
public rowsCount: string;
+ maxLength: number | null = null;
+ validateType: string | null = null;
+ regexPattern: string | null = null;
- ngOnInit(): void {
+ override ngOnInit(): void {
super.ngOnInit();
+
+ // Use character_maximum_length from the field structure if available
+ if (this.structure && this.structure.character_maximum_length) {
+ this.maxLength = this.structure.character_maximum_length;
+ }
+
+ // Parse widget parameters
if (this.widgetStructure && this.widgetStructure.widget_params) {
- this.rowsCount = this.widgetStructure.widget_params.rows
+ const params = typeof this.widgetStructure.widget_params === 'string'
+ ? JSON.parse(this.widgetStructure.widget_params)
+ : this.widgetStructure.widget_params;
+
+ this.rowsCount = params.rows || '4';
+ this.validateType = params.validate || null;
+ this.regexPattern = params.regex || null;
} else {
- this.rowsCount = '4'
- };
+ this.rowsCount = '4';
+ }
}
+ getValidationErrorMessage(): string {
+ if (!this.validateType) {
+ return '';
+ }
+
+ if (this.validateType === 'regex') {
+ return 'Value doesn\'t match the required pattern';
+ }
+
+ // Create user-friendly messages for common validators
+ const messages = {
+ isEmail: 'Invalid email address',
+ isURL: 'Invalid URL',
+ isIP: 'Invalid IP address',
+ isUUID: 'Invalid UUID',
+ isJSON: 'Invalid JSON',
+ isCreditCard: 'Invalid credit card number',
+ isISBN: 'Invalid ISBN',
+ isAlpha: 'Should contain only letters',
+ isNumeric: 'Should contain only numbers',
+ isAlphanumeric: 'Should contain only letters and numbers',
+ isHexColor: 'Invalid hex color',
+ isBase64: 'Invalid Base64 string',
+ isMobilePhone: 'Invalid mobile phone number',
+ isMACAddress: 'Invalid MAC address',
+ isPostalCode: 'Invalid postal code',
+ isCurrency: 'Invalid currency format'
+ };
+
+ return messages[this.validateType] || `Invalid ${this.validateType}`;
+ }
}
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.css b/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.css
index d1e2ca29c..f8e826b53 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.css
+++ b/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.css
@@ -1,3 +1,7 @@
.text-form-field {
width: 100%;
+}
+
+.counter {
+ margin-right: 16px;
}
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html b/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html
index 6ca6f5f34..49c432cb0 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/text/text.component.html
@@ -1,7 +1,16 @@
{{normalizedLabel}}
+