();
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/binary-data-caption/binary-data-caption.component.html b/frontend/src/app/components/ui-components/table-display-fields/binary-data-caption/binary-data-caption.component.html
new file mode 100644
index 000000000..ea5a639c0
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/binary-data-caption/binary-data-caption.component.html
@@ -0,0 +1,3 @@
+
+ {{value || 'โ'}}
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/binary-data-caption/binary-data-caption.component.ts b/frontend/src/app/components/ui-components/table-display-fields/binary-data-caption/binary-data-caption.component.ts
new file mode 100644
index 000000000..86073def1
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/binary-data-caption/binary-data-caption.component.ts
@@ -0,0 +1,15 @@
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+ selector: 'app-binary-data-caption-display',
+ templateUrl: './binary-data-caption.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './binary-data-caption.component.css'],
+ imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule]
+})
+export class BinaryDataCaptionDisplayComponent extends BaseTableDisplayFieldComponent {
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.css b/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.css
new file mode 100644
index 000000000..603046a74
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.css
@@ -0,0 +1,27 @@
+.boolean-icon {
+ transform: scale(0.85);
+}
+
+@media (prefers-color-scheme: light) {
+ .boolean-icon-true {
+ color: #1B5E20;
+ }
+
+ .boolean-icon-false {
+ color: #B71C1C;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ .boolean-icon-true {
+ color: #4CAF50;
+ }
+
+ .boolean-icon-false {
+ color: #E53935;
+ }
+}
+
+
+
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.html b/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.html
new file mode 100644
index 000000000..a83870454
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.html
@@ -0,0 +1,7 @@
+
+
+ check_small
+ close_small
+ โ
+
+
+ {{value || 'โ'}}
+
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/code/code.component.ts b/frontend/src/app/components/ui-components/table-display-fields/code/code.component.ts
new file mode 100644
index 000000000..85a949984
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/code/code.component.ts
@@ -0,0 +1,15 @@
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+ selector: 'app-code-display',
+ templateUrl: './code.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './code.component.css'],
+ imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
+})
+export class CodeDisplayComponent extends BaseTableDisplayFieldComponent {
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/country/country.component.css b/frontend/src/app/components/ui-components/table-display-fields/country/country.component.css
new file mode 100644
index 000000000..b3e456f15
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/country/country.component.css
@@ -0,0 +1,27 @@
+.field-wrapper {
+ display: flex;
+ align-items: center;
+}
+
+.value-wrapper {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 300px;
+ display: flex;
+ align-items: center;
+}
+
+.country-flag {
+ margin-right: 6px;
+ font-size: 1.2em;
+}
+
+.copy-button {
+ visibility: hidden;
+ margin-left: 4px;
+}
+
+.field-wrapper:hover .copy-button {
+ visibility: visible;
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/country/country.component.html b/frontend/src/app/components/ui-components/table-display-fields/country/country.component.html
new file mode 100644
index 000000000..8acfa685c
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/country/country.component.html
@@ -0,0 +1,14 @@
+
+
+
+ {{ countryName }}
+
+
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/country/country.component.ts b/frontend/src/app/components/ui-components/table-display-fields/country/country.component.ts
new file mode 100644
index 000000000..ab2d4f131
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/country/country.component.ts
@@ -0,0 +1,33 @@
+import { COUNTRIES, getCountryFlag } from '../../../../consts/countries';
+import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+ selector: 'app-country-display',
+ templateUrl: './country.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './country.component.css'],
+ imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule, CommonModule]
+})
+export class CountryDisplayComponent extends BaseTableDisplayFieldComponent implements OnInit {
+ static type = 'country';
+
+ public countryName: string = '';
+ public countryFlag: string = '';
+
+ ngOnInit(): void {
+ if (this.value) {
+ const country = COUNTRIES.find(c => c.code === this.value);
+ this.countryName = country ? country.name : this.value;
+ this.countryFlag = getCountryFlag(this.value);
+ } else {
+ this.countryName = 'โ';
+ this.countryFlag = '';
+ }
+ }
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/date-time/date-time.component.css b/frontend/src/app/components/ui-components/table-display-fields/date-time/date-time.component.css
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/date-time/date-time.component.css
@@ -0,0 +1 @@
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/date-time/date-time.component.html b/frontend/src/app/components/ui-components/table-display-fields/date-time/date-time.component.html
new file mode 100644
index 000000000..43432b87e
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/date-time/date-time.component.html
@@ -0,0 +1,11 @@
+
+ {{formattedDateTime || 'โ'}}
+
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/date-time/date-time.component.ts b/frontend/src/app/components/ui-components/table-display-fields/date-time/date-time.component.ts
new file mode 100644
index 000000000..08a32c1d2
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/date-time/date-time.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { format } from 'date-fns';
+
+@Component({
+ selector: 'app-date-time-display',
+ templateUrl: './date-time.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './date-time.component.css'],
+ imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
+})
+export class DateTimeDisplayComponent extends BaseTableDisplayFieldComponent implements OnInit {
+ static type = 'datetime';
+
+ public formattedDateTime: string;
+
+ ngOnInit(): void {
+ if (this.value) {
+ try {
+ const date = new Date(this.value);
+ if (!isNaN(date.getTime())) {
+ this.formattedDateTime = format(date, "P p");
+ } else {
+ this.formattedDateTime = this.value;
+ }
+ } catch (error) {
+ this.formattedDateTime = this.value;
+ }
+ }
+ }
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/date/date.component.css b/frontend/src/app/components/ui-components/table-display-fields/date/date.component.css
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/date/date.component.css
@@ -0,0 +1 @@
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/date/date.component.html b/frontend/src/app/components/ui-components/table-display-fields/date/date.component.html
new file mode 100644
index 000000000..36172b273
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/date/date.component.html
@@ -0,0 +1,11 @@
+
+ {{formattedDate || 'โ'}}
+
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/date/date.component.ts b/frontend/src/app/components/ui-components/table-display-fields/date/date.component.ts
new file mode 100644
index 000000000..28eaabab7
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/date/date.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { format, parseISO } from 'date-fns';
+
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+ selector: 'app-date-display',
+ templateUrl: './date.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './date.component.css'],
+ imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
+})
+export class DateDisplayComponent extends BaseTableDisplayFieldComponent implements OnInit {
+ static type = 'date';
+
+ public formattedDate: string;
+
+ ngOnInit(): void {
+ if (this.value) {
+ try {
+ const date = new Date(this.value);
+ if (!isNaN(date.getTime())) {
+ this.formattedDate = format(date, "P");
+ } else {
+ this.formattedDate = this.value;
+ }
+ } catch (error) {
+ this.formattedDate = this.value;
+ }
+ }
+ }
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/file/file.component.css b/frontend/src/app/components/ui-components/table-display-fields/file/file.component.css
new file mode 100644
index 000000000..7f667e698
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/file/file.component.css
@@ -0,0 +1,4 @@
+.field-value {
+ font-style: italic;
+ color: #666;
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/file/file.component.html b/frontend/src/app/components/ui-components/table-display-fields/file/file.component.html
new file mode 100644
index 000000000..e490bcd7b
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/file/file.component.html
@@ -0,0 +1,3 @@
+
+ {{displayText}}
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/file/file.component.ts b/frontend/src/app/components/ui-components/table-display-fields/file/file.component.ts
new file mode 100644
index 000000000..ee2aec579
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/file/file.component.ts
@@ -0,0 +1,33 @@
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+interface Blob {
+ type: string;
+ data: any[];
+}
+
+@Component({
+ selector: 'app-file-display',
+ templateUrl: './file.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './file.component.css'],
+ imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule, CommonModule]
+})
+export class FileDisplayComponent extends BaseTableDisplayFieldComponent {
+ get isBlob(): boolean {
+ return typeof this.value === 'object' && this.value !== null && 'type' in this.value && 'data' in this.value;
+ }
+
+ get displayText(): string {
+ if (this.isBlob) {
+ return 'Binary Data';
+ } else if (typeof this.value === 'string' && this.value.length > 20) {
+ return 'Binary Data';
+ }
+ return this.value ? String(this.value) : 'โ';
+ }
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css b/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css
new file mode 100644
index 000000000..e818ae5cc
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.css
@@ -0,0 +1,27 @@
+.foreign-key-button {
+ background: transparent;
+ border: 1px solid transparent;
+ border-radius: 12px;
+ color: var(--color-accentedPalette-500);
+ cursor: pointer;
+ font-size: inherit;
+ padding: 2px 8px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-align: left;
+ max-width: 100%;
+ transition: background 100ms, border-color 100ms;
+}
+
+.foreign-key-button:hover{
+ background-color: var(--color-accentedPalette-100);
+ border: 1px solid var(--color-accentedPalette-300);
+}
+
+.foreign-key-button_selected {
+ background-color: var(--color-accentedPalette-100);
+ border-radius: 12px;
+ border: 1px solid var(--color-accentedPalette-300);
+}
+
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.html b/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.html
new file mode 100644
index 000000000..c4e04ce2f
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/foreign-key/foreign-key.component.html
@@ -0,0 +1,21 @@
+
+
+
+ {{ value || 'โ' }}
+
+
+
+ {{value || 'โ'}}
+
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/id/id.component.ts b/frontend/src/app/components/ui-components/table-display-fields/id/id.component.ts
new file mode 100644
index 000000000..e219738b4
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/id/id.component.ts
@@ -0,0 +1,17 @@
+import { Component, Injectable } from '@angular/core';
+
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Injectable()
+@Component({
+ selector: 'app-display-id',
+ templateUrl: './id.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './id.component.css'],
+ imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
+})
+export class IdDisplayComponent extends BaseTableDisplayFieldComponent {
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/image/image.component.css b/frontend/src/app/components/ui-components/table-display-fields/image/image.component.css
new file mode 100644
index 000000000..fad6ddbcf
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/image/image.component.css
@@ -0,0 +1,10 @@
+.field-value {
+ font-style: italic;
+ color: #666;
+}
+
+.image-thumbnail {
+ display: block;
+ height: var(--height);
+ margin: 12px 0;
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/image/image.component.html b/frontend/src/app/components/ui-components/table-display-fields/image/image.component.html
new file mode 100644
index 000000000..dd64c06b4
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/image/image.component.html
@@ -0,0 +1,15 @@
+
+
[Image URL]
+
![Image]()
+
+
+
{{ formattedJson }}
+
+
+ {{value || 'โ'}}
+
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/long-text/long-text.component.ts b/frontend/src/app/components/ui-components/table-display-fields/long-text/long-text.component.ts
new file mode 100644
index 000000000..b472abc3b
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/long-text/long-text.component.ts
@@ -0,0 +1,19 @@
+import { Component, Injectable } from '@angular/core';
+
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Injectable()
+@Component({
+ selector: 'app-display-long-text',
+ templateUrl: './long-text.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './long-text.component.css'],
+ imports: [CommonModule, ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
+})
+export class LongTextDisplayComponent extends BaseTableDisplayFieldComponent {
+
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/money/money.component.css b/frontend/src/app/components/ui-components/table-display-fields/money/money.component.css
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/money/money.component.css
@@ -0,0 +1 @@
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/money/money.component.html b/frontend/src/app/components/ui-components/table-display-fields/money/money.component.html
new file mode 100644
index 000000000..202929d6b
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/money/money.component.html
@@ -0,0 +1,13 @@
+
+
+ {{formattedValue || 'โ'}}
+
+
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/money/money.component.ts b/frontend/src/app/components/ui-components/table-display-fields/money/money.component.ts
new file mode 100644
index 000000000..1ac819480
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/money/money.component.ts
@@ -0,0 +1,61 @@
+import { Component, OnInit } from '@angular/core';
+
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { getCurrencyByCode } from 'src/app/consts/currencies';
+
+@Component({
+ selector: 'app-money-display',
+ templateUrl: './money.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './money.component.css'],
+ imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule, CommonModule]
+})
+export class MoneyDisplayComponent extends BaseTableDisplayFieldComponent implements OnInit {
+ public displayCurrency: string = '';
+ public currencySymbol: string = '';
+
+ ngOnInit(): void {
+ // Get currency from widget params
+ this.displayCurrency = '';
+ if (this.widgetStructure && this.widgetStructure.widget_params && this.widgetStructure.widget_params.default_currency) {
+ this.displayCurrency = this.widgetStructure.widget_params.default_currency;
+ const currency = getCurrencyByCode(this.displayCurrency);
+ this.currencySymbol = currency ? currency.symbol : '';
+ }
+ }
+
+ get formattedValue(): string {
+ if (!this.value) {
+ return '';
+ }
+
+ let amount: number | string;
+ let currency: string = this.displayCurrency;
+
+ if (typeof this.value === 'object' && this.value.amount !== undefined) {
+ amount = this.value.amount;
+ if (this.value.currency) {
+ currency = this.value.currency;
+ const currencyObj = getCurrencyByCode(currency);
+ this.currencySymbol = currencyObj ? currencyObj.symbol : '';
+ }
+ } else {
+ amount = this.value;
+ }
+
+ if (typeof amount === 'string') {
+ amount = parseFloat(amount);
+ }
+
+ if (isNaN(amount as number)) {
+ return '';
+ }
+
+ const decimalPlaces = this.widgetStructure?.widget_params?.decimal_places ?? 2;
+ return `${this.currencySymbol}${(amount as number).toFixed(decimalPlaces)}`;
+ }
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.css
@@ -0,0 +1 @@
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.html b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.html
new file mode 100644
index 000000000..acf48b2d5
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.html
@@ -0,0 +1,11 @@
+
+ {{value || 'โ'}}
+
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts
new file mode 100644
index 000000000..6e30e6636
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts
@@ -0,0 +1,15 @@
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+ selector: 'app-display-number',
+ templateUrl: './number.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './number.component.css'],
+ imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
+})
+export class NumberDisplayComponent extends BaseTableDisplayFieldComponent {
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/password/password.component.css b/frontend/src/app/components/ui-components/table-display-fields/password/password.component.css
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/password/password.component.css
@@ -0,0 +1 @@
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/password/password.component.html b/frontend/src/app/components/ui-components/table-display-fields/password/password.component.html
new file mode 100644
index 000000000..bc4098081
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/password/password.component.html
@@ -0,0 +1,3 @@
+
+ โขโขโขโขโขโขโขโข
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/password/password.component.ts b/frontend/src/app/components/ui-components/table-display-fields/password/password.component.ts
new file mode 100644
index 000000000..e852fcf5f
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/password/password.component.ts
@@ -0,0 +1,15 @@
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+ selector: 'app-password-display',
+ templateUrl: './password.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './password.component.css'],
+ imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
+})
+export class PasswordDisplayComponent extends BaseTableDisplayFieldComponent {
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.css b/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.css
new file mode 100644
index 000000000..9b60ac1dd
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.css
@@ -0,0 +1,8 @@
+.field-display {
+ padding-right: 24px;
+}
+
+.phone-link {
+ text-decoration: none;
+ color: var(--primary-color);
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.html b/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.html
new file mode 100644
index 000000000..1cddbab78
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.html
@@ -0,0 +1,12 @@
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.ts b/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.ts
new file mode 100644
index 000000000..0edb98236
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/phone/phone.component.ts
@@ -0,0 +1,16 @@
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+ selector: 'app-phone-display',
+ templateUrl: './phone.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './phone.component.css'],
+ imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule, CommonModule]
+})
+export class PhoneDisplayComponent extends BaseTableDisplayFieldComponent {
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/point/point.component.css b/frontend/src/app/components/ui-components/table-display-fields/point/point.component.css
new file mode 100644
index 000000000..1296352f2
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/point/point.component.css
@@ -0,0 +1,21 @@
+.field-wrapper {
+ display: flex;
+ align-items: center;
+}
+
+.value-wrapper {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 300px;
+ font-family: monospace;
+}
+
+.copy-button {
+ visibility: hidden;
+ margin-left: 4px;
+}
+
+.field-wrapper:hover .copy-button {
+ visibility: visible;
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/point/point.component.html b/frontend/src/app/components/ui-components/table-display-fields/point/point.component.html
new file mode 100644
index 000000000..2e30aeeca
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/point/point.component.html
@@ -0,0 +1,11 @@
+
+ {{ formattedPoint }}
+
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/point/point.component.ts b/frontend/src/app/components/ui-components/table-display-fields/point/point.component.ts
new file mode 100644
index 000000000..ad8bd883c
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/point/point.component.ts
@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+ selector: 'app-point-display',
+ templateUrl: './point.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './point.component.css'],
+ imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule, CommonModule]
+})
+export class PointDisplayComponent extends BaseTableDisplayFieldComponent implements OnInit {
+ static type = 'point';
+
+ formattedPoint: string;
+
+ ngOnInit() {
+ this.formatPoint();
+ }
+
+ private formatPoint() {
+ if (!this.value) {
+ this.formattedPoint = '';
+ return;
+ }
+
+ try {
+ if (typeof this.value === 'string') {
+ // Handle string format like "(x,y)" or "x,y"
+ const pointStr = this.value.trim().replace(/[()]/g, '');
+ const [x, y] = pointStr.split(',').map(coord => parseFloat(coord.trim()));
+ this.formattedPoint = `(${x}, ${y})`;
+ } else if (typeof this.value === 'object') {
+ // Handle object format like {x: 1, y: 2}
+ const x = this.value.x || this.value[0];
+ const y = this.value.y || this.value[1];
+ this.formattedPoint = `(${x}, ${y})`;
+ }
+ } catch (e) {
+ this.formattedPoint = String(this.value);
+ }
+ }
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/select/select.component.css b/frontend/src/app/components/ui-components/table-display-fields/select/select.component.css
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/select/select.component.css
@@ -0,0 +1 @@
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/select/select.component.html b/frontend/src/app/components/ui-components/table-display-fields/select/select.component.html
new file mode 100644
index 000000000..58124cc57
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/select/select.component.html
@@ -0,0 +1,11 @@
+
+ {{displayValue}}
+
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/select/select.component.ts b/frontend/src/app/components/ui-components/table-display-fields/select/select.component.ts
new file mode 100644
index 000000000..ef98d4e69
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/select/select.component.ts
@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+ selector: 'app-select-display',
+ templateUrl: './select.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './select.component.css'],
+ imports: [CommonModule, ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
+})
+export class SelectDisplayComponent extends BaseTableDisplayFieldComponent implements OnInit {
+ public displayValue: string;
+
+ ngOnInit(): void {
+ this.setDisplayValue();
+ }
+
+ private setDisplayValue(): void {
+ if (!this.value) {
+ this.displayValue = 'โ';
+ return;
+ }
+
+ if (this.widgetStructure?.widget_params?.options) {
+ // Find the matching option based on value and use its label
+ const option = this.widgetStructure.widget_params.options.find(
+ (opt: { value: any, label: string }) => opt.value === this.value
+ );
+ this.displayValue = option ? option.label : this.value;
+ } else if (this.structure?.data_type_params) {
+ // If no widget structure but we have data_type_params, just use the value
+ this.displayValue = this.value;
+ } else {
+ this.displayValue = this.value;
+ }
+ }
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/static-text/static-text.component.css b/frontend/src/app/components/ui-components/table-display-fields/static-text/static-text.component.css
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/static-text/static-text.component.css
@@ -0,0 +1 @@
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/static-text/static-text.component.html b/frontend/src/app/components/ui-components/table-display-fields/static-text/static-text.component.html
new file mode 100644
index 000000000..acf48b2d5
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/static-text/static-text.component.html
@@ -0,0 +1,11 @@
+
+ {{value || 'โ'}}
+
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/static-text/static-text.component.ts b/frontend/src/app/components/ui-components/table-display-fields/static-text/static-text.component.ts
new file mode 100644
index 000000000..a3fc1e86c
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/static-text/static-text.component.ts
@@ -0,0 +1,16 @@
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+ selector: 'app-display-static-text',
+ templateUrl: './static-text.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './static-text.component.css'],
+ imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
+})
+export class StaticTextDisplayComponent extends BaseTableDisplayFieldComponent {
+ static type = 'static-text';
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/text/text.component.css b/frontend/src/app/components/ui-components/table-display-fields/text/text.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-display-fields/text/text.component.html b/frontend/src/app/components/ui-components/table-display-fields/text/text.component.html
new file mode 100644
index 000000000..acf48b2d5
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/text/text.component.html
@@ -0,0 +1,11 @@
+
+ {{value || 'โ'}}
+
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/text/text.component.ts b/frontend/src/app/components/ui-components/table-display-fields/text/text.component.ts
new file mode 100644
index 000000000..42a66f0a6
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/text/text.component.ts
@@ -0,0 +1,17 @@
+import { Component, Injectable } from '@angular/core';
+
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Injectable()
+@Component({
+ selector: 'app-display-text',
+ templateUrl: './text.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './text.component.css'],
+ imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
+})
+export class TextDisplayComponent extends BaseTableDisplayFieldComponent {
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/time-interval/time-interval.component.css b/frontend/src/app/components/ui-components/table-display-fields/time-interval/time-interval.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-display-fields/time-interval/time-interval.component.html b/frontend/src/app/components/ui-components/table-display-fields/time-interval/time-interval.component.html
new file mode 100644
index 000000000..7a7b4e451
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/time-interval/time-interval.component.html
@@ -0,0 +1,11 @@
+
+ {{ formattedInterval }}
+
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/time-interval/time-interval.component.ts b/frontend/src/app/components/ui-components/table-display-fields/time-interval/time-interval.component.ts
new file mode 100644
index 000000000..f6e00acd1
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/time-interval/time-interval.component.ts
@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+ selector: 'app-time-interval-display',
+ templateUrl: './time-interval.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './time-interval.component.css'],
+ imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule, CommonModule]
+})
+export class TimeIntervalDisplayComponent extends BaseTableDisplayFieldComponent implements OnInit {
+
+ formattedInterval: string;
+
+ ngOnInit() {
+ if (!this.value) {
+ this.formattedInterval = 'โ';
+ return;
+ }
+
+ try {
+ const interval = typeof this.value === 'string' ? JSON.parse(this.value) : this.value;
+ let parts = [];
+
+ if (interval.days) parts.push(`${interval.days}d`);
+ if (interval.hours) parts.push(`${interval.hours}h`);
+ if (interval.minutes) parts.push(`${interval.minutes}m`);
+ if (interval.seconds) parts.push(`${interval.seconds}s`);
+ if (interval.milliseconds) parts.push(`${interval.milliseconds}ms`);
+
+ this.formattedInterval = parts.length > 0 ? parts.join(' ') : '0';
+ } catch (e) {
+ this.formattedInterval = String(this.value);
+ }
+ }
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/time/time.component.css b/frontend/src/app/components/ui-components/table-display-fields/time/time.component.css
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/time/time.component.css
@@ -0,0 +1 @@
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/time/time.component.html b/frontend/src/app/components/ui-components/table-display-fields/time/time.component.html
new file mode 100644
index 000000000..6a8efae37
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/time/time.component.html
@@ -0,0 +1,11 @@
+
+ {{formattedTime || 'โ'}}
+
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/time/time.component.ts b/frontend/src/app/components/ui-components/table-display-fields/time/time.component.ts
new file mode 100644
index 000000000..b56192780
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/time/time.component.ts
@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { format } from 'date-fns';
+
+@Component({
+ selector: 'app-time-display',
+ templateUrl: './time.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './time.component.css'],
+ imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
+})
+export class TimeDisplayComponent extends BaseTableDisplayFieldComponent implements OnInit {
+ static type = 'time';
+
+ public formattedTime: string;
+
+ ngOnInit(): void {
+ if (this.value) {
+ try {
+ if (this.value.includes(':')) {
+ // Handle time string format
+ this.formattedTime = this.value;
+ } else {
+ const date = new Date(this.value);
+ if (!isNaN(date.getTime())) {
+ this.formattedTime = format(date, 'HH:mm:ss');
+ } else {
+ this.formattedTime = this.value;
+ }
+ }
+ } catch (error) {
+ this.formattedTime = this.value;
+ }
+ }
+ }
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/url/url.component.css b/frontend/src/app/components/ui-components/table-display-fields/url/url.component.css
new file mode 100644
index 000000000..78c2d730a
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/url/url.component.css
@@ -0,0 +1,14 @@
+.url-link {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ color: var(--color-primaryPalette-500);
+}
+
+.url-link__icon {
+ flex-shrink: 0;
+ margin-bottom: -2px;
+ width: 16px;
+ height: 16px;
+ font-size: 16px;
+}
diff --git a/frontend/src/app/components/ui-components/table-display-fields/url/url.component.html b/frontend/src/app/components/ui-components/table-display-fields/url/url.component.html
new file mode 100644
index 000000000..f2f92fa5d
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/url/url.component.html
@@ -0,0 +1,20 @@
+
diff --git a/frontend/src/app/components/ui-components/table-display-fields/url/url.component.ts b/frontend/src/app/components/ui-components/table-display-fields/url/url.component.ts
new file mode 100644
index 000000000..730d43e06
--- /dev/null
+++ b/frontend/src/app/components/ui-components/table-display-fields/url/url.component.ts
@@ -0,0 +1,27 @@
+import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+ selector: 'app-url-display',
+ templateUrl: './url.component.html',
+ styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './url.component.css'],
+ imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule, CommonModule]
+})
+export class UrlDisplayComponent extends BaseTableDisplayFieldComponent {
+ static type = 'url';
+
+ get isValidUrl(): boolean {
+ if (!this.value) return false;
+ try {
+ new URL(this.value);
+ return true;
+ } catch {
+ return false;
+ }
+ }
+}
diff --git a/frontend/src/app/components/ui-components/table-fields-display/base-table-field-display/base-table-field-display.component.css b/frontend/src/app/components/ui-components/table-fields-display/base-table-field-display/base-table-field-display.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-fields-display/base-table-field-display/base-table-field-display.component.html b/frontend/src/app/components/ui-components/table-fields-display/base-table-field-display/base-table-field-display.component.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-fields-display/base-table-field-display/base-table-field-display.component.ts b/frontend/src/app/components/ui-components/table-fields-display/base-table-field-display/base-table-field-display.component.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-fields-display/boolean/boolean.component.css b/frontend/src/app/components/ui-components/table-fields-display/boolean/boolean.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-fields-display/boolean/boolean.component.html b/frontend/src/app/components/ui-components/table-fields-display/boolean/boolean.component.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-fields-display/boolean/boolean.component.ts b/frontend/src/app/components/ui-components/table-fields-display/boolean/boolean.component.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-fields-display/foreign-key/foreign-key.component.css b/frontend/src/app/components/ui-components/table-fields-display/foreign-key/foreign-key.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-fields-display/foreign-key/foreign-key.component.html b/frontend/src/app/components/ui-components/table-fields-display/foreign-key/foreign-key.component.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-fields-display/foreign-key/foreign-key.component.ts b/frontend/src/app/components/ui-components/table-fields-display/foreign-key/foreign-key.component.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-fields-display/id/id.component.css b/frontend/src/app/components/ui-components/table-fields-display/id/id.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-fields-display/id/id.component.html b/frontend/src/app/components/ui-components/table-fields-display/id/id.component.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-fields-display/id/id.component.ts b/frontend/src/app/components/ui-components/table-fields-display/id/id.component.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-fields-display/index.ts b/frontend/src/app/components/ui-components/table-fields-display/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-fields-display/long-text/long-text.component.css b/frontend/src/app/components/ui-components/table-fields-display/long-text/long-text.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-fields-display/long-text/long-text.component.html b/frontend/src/app/components/ui-components/table-fields-display/long-text/long-text.component.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-fields-display/long-text/long-text.component.ts b/frontend/src/app/components/ui-components/table-fields-display/long-text/long-text.component.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-fields-display/text/text.component.css b/frontend/src/app/components/ui-components/table-fields-display/text/text.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-fields-display/text/text.component.html b/frontend/src/app/components/ui-components/table-fields-display/text/text.component.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/ui-components/table-fields-display/text/text.component.ts b/frontend/src/app/components/ui-components/table-fields-display/text/text.component.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/consts/currencies.ts b/frontend/src/app/consts/currencies.ts
new file mode 100644
index 000000000..5b48192f2
--- /dev/null
+++ b/frontend/src/app/consts/currencies.ts
@@ -0,0 +1,56 @@
+export interface Money {
+ code: string;
+ name: string;
+ symbol: string;
+ flag?: string;
+}
+
+export interface MoneyValue {
+ amount: number | string;
+ currency: string;
+}
+
+export const CURRENCIES: Money[] = [
+ { code: 'USD', name: 'US Dollar', symbol: '$', flag: '๐บ๐ธ' },
+ { code: 'EUR', name: 'Euro', symbol: 'โฌ', flag: '๐ช๐บ' },
+ { code: 'GBP', name: 'British Pound', symbol: 'ยฃ', flag: '๐ฌ๐ง' },
+ { code: 'JPY', name: 'Japanese Yen', symbol: 'ยฅ', flag: '๐ฏ๐ต' },
+ { code: 'CHF', name: 'Swiss Franc', symbol: 'CHF', flag: '๐จ๐ญ' },
+ { code: 'CAD', name: 'Canadian Dollar', symbol: 'C$', flag: '๐จ๐ฆ' },
+ { code: 'AUD', name: 'Australian Dollar', symbol: 'A$', flag: '๐ฆ๐บ' },
+ { code: 'CNY', name: 'Chinese Yuan', symbol: 'ยฅ', flag: '๐จ๐ณ' },
+ { code: 'INR', name: 'Indian Rupee', symbol: 'โน', flag: '๐ฎ๐ณ' },
+ { code: 'KRW', name: 'South Korean Won', symbol: 'โฉ', flag: '๐ฐ๐ท' },
+ { code: 'SGD', name: 'Singapore Dollar', symbol: 'S$', flag: '๐ธ๐ฌ' },
+ { code: 'HKD', name: 'Hong Kong Dollar', symbol: 'HK$', flag: '๐ญ๐ฐ' },
+ { code: 'NOK', name: 'Norwegian Krone', symbol: 'kr', flag: '๐ณ๐ด' },
+ { code: 'SEK', name: 'Swedish Krona', symbol: 'kr', flag: '๐ธ๐ช' },
+ { code: 'DKK', name: 'Danish Krone', symbol: 'kr', flag: '๐ฉ๐ฐ' },
+ { code: 'PLN', name: 'Polish Zloty', symbol: 'zล', flag: '๐ต๐ฑ' },
+ { code: 'CZK', name: 'Czech Koruna', symbol: 'Kฤ', flag: '๐จ๐ฟ' },
+ { code: 'HUF', name: 'Hungarian Forint', symbol: 'Ft', flag: '๐ญ๐บ' },
+ { code: 'RUB', name: 'Russian Ruble', symbol: 'โฝ', flag: '๐ท๐บ' },
+ { code: 'BRL', name: 'Brazilian Real', symbol: 'R$', flag: '๐ง๐ท' },
+ { code: 'MXN', name: 'Mexican Peso', symbol: '$', flag: '๐ฒ๐ฝ' },
+ { code: 'ZAR', name: 'South African Rand', symbol: 'R', flag: '๐ฟ๐ฆ' },
+ { code: 'TRY', name: 'Turkish Lira', symbol: 'โบ', flag: '๐น๐ท' },
+ { code: 'AED', name: 'UAE Dirham', symbol: 'ุฏ.ุฅ', flag: '๐ฆ๐ช' },
+ { code: 'SAR', name: 'Saudi Riyal', symbol: '๏ทผ', flag: '๐ธ๐ฆ' },
+ { code: 'ILS', name: 'Israeli Shekel', symbol: 'โช', flag: '๐ฎ๐ฑ' },
+ { code: 'EGP', name: 'Egyptian Pound', symbol: 'ยฃ', flag: '๐ช๐ฌ' },
+ { code: 'THB', name: 'Thai Baht', symbol: 'เธฟ', flag: '๐น๐ญ' },
+ { code: 'MYR', name: 'Malaysian Ringgit', symbol: 'RM', flag: '๐ฒ๐พ' },
+ { code: 'IDR', name: 'Indonesian Rupiah', symbol: 'Rp', flag: '๐ฎ๐ฉ' },
+ { code: 'PHP', name: 'Philippine Peso', symbol: 'โฑ', flag: '๐ต๐ญ' },
+ { code: 'VND', name: 'Vietnamese Dong', symbol: 'โซ', flag: '๐ป๐ณ' },
+ { code: 'UAH', name: 'Ukrainian Hryvnia', symbol: 'โด', flag: '๐บ๐ฆ' }
+];
+
+export function getCurrencyByCode(code: string): Money | undefined {
+ return CURRENCIES.find(currency => currency.code === code);
+}
+
+export function getCurrencySymbol(code: string): string {
+ const currency = getCurrencyByCode(code);
+ return currency ? currency.symbol : '';
+}
diff --git a/frontend/src/app/consts/field-types.ts b/frontend/src/app/consts/field-types.ts
deleted file mode 100644
index 2964547fb..000000000
--- a/frontend/src/app/consts/field-types.ts
+++ /dev/null
@@ -1,276 +0,0 @@
-import { BinaryDataCaptionRowComponent } from '../components/ui-components/row-fields/binary-data-caption/binary-data-caption.component';
-import { BooleanRowComponent } from 'src/app/components/ui-components/row-fields/boolean/boolean.component'
-import { CodeRowComponent } from '../components/ui-components/row-fields/code/code.component';
-import { CountryRowComponent } from '../components/ui-components/row-fields/country/country.component';
-import { DateRowComponent } from '../components/ui-components/row-fields/date/date.component';
-import { DateTimeRowComponent } from '../components/ui-components/row-fields/date-time/date-time.component';
-import { FileRowComponent } from '../components/ui-components/row-fields/file/file.component';
-import { ForeignKeyRowComponent } from '../components/ui-components/row-fields/foreign-key/foreign-key.component';
-import { IdRowComponent } from '../components/ui-components/row-fields/id/id.component';
-import { ImageRowComponent } from '../components/ui-components/row-fields/image/image.component';
-import { JsonEditorRowComponent } from '../components/ui-components/row-fields/json-editor/json-editor.component';
-import { LongTextRowComponent } from 'src/app/components/ui-components/row-fields/long-text/long-text.component'
-import { MoneyRowComponent } from '../components/ui-components/row-fields/money/money.component';
-import { NumberRowComponent } from 'src/app/components/ui-components/row-fields/number/number.component';
-import { PasswordRowComponent } from '../components/ui-components/row-fields/password/password.component';
-import { PhoneRowComponent } from '../components/ui-components/row-fields/phone/phone.component';
-import { PointRowComponent } from 'src/app/components/ui-components/row-fields/point/point.component';
-import { SelectRowComponent } from '../components/ui-components/row-fields/select/select.component';
-import { StaticTextRowComponent } from '../components/ui-components/row-fields/static-text/static-text.component';
-import { TextRowComponent } from 'src/app/components/ui-components/row-fields/text/text.component';
-import { TimeIntervalRowComponent } from '../components/ui-components/row-fields/time-interval/time-interval.component';
-import { TimeRowComponent } from '../components/ui-components/row-fields/time/time.component';
-import { UrlRowComponent } from '../components/ui-components/row-fields/url/url.component';
-
-export const timestampTypes = ['timestamp without time zone', 'timestamp with time zone', 'timestamp', 'date', 'time without time zone', 'time with time zone' , 'time', 'datetime', 'date time', 'datetime2', 'datetimeoffset', 'curdate', 'curtime', 'now', 'localtime', 'localtimestamp'];
-export const defaultTimestampValues = {
- postgres: ['current_date', 'current_time', 'current_timestamp', 'localtime', 'localtimestamp', 'now'],
- mysql: ['curdate', 'curtime', 'now'],
-}
-
-export const UIwidgets = {
- Default: '',
- Boolean: BooleanRowComponent,
- Date: DateRowComponent,
- Time: TimeRowComponent,
- DateTime: DateTimeRowComponent,
- JSON: JsonEditorRowComponent,
- Textarea: LongTextRowComponent,
- String: TextRowComponent,
- Readonly: StaticTextRowComponent,
- Number: NumberRowComponent,
- Select: SelectRowComponent,
- Password: PasswordRowComponent,
- File: FileRowComponent,
- Code: CodeRowComponent,
- Image: ImageRowComponent,
- URL: UrlRowComponent,
- Country: CountryRowComponent,
- Phone: PhoneRowComponent,
- Money: MoneyRowComponent,
- Foreign_key: ForeignKeyRowComponent,
-}
-
-export const fieldTypes = {
- postgres: {
- // numbers (number)
- real: NumberRowComponent,
- "double precision": NumberRowComponent,
- smallint: NumberRowComponent,
- integer: NumberRowComponent,
- bigint: NumberRowComponent,
- numeric: NumberRowComponent,
-
- //boolean (checkbox)
- boolean: BooleanRowComponent,
-
- //datetime (datepicker)
- "timestamp without time zone": DateTimeRowComponent,
- "timestamp with time zone": DateTimeRowComponent,
- "time without time zone": TimeRowComponent,
- "time with time zone": TimeRowComponent,
- date: DateRowComponent,
- abstime: DateTimeRowComponent,
- realtime: DateTimeRowComponent,
- interval: TimeIntervalRowComponent, // number + select(seconds, days, weeks, years)
-
- // short text (text)
- "character varying": TextRowComponent,
- macaddr: TextRowComponent, //to do regexp
- macaddr8: TextRowComponent, //to do regexp
- cidr: TextRowComponent, //to do regexp
- inet: TextRowComponent, //to do regexp
- uuid: TextRowComponent, //to do regexp
-
- //long text (textarea)
- text: LongTextRowComponent,
- xml: LongTextRowComponent,
-
- //select (select)
- enum: SelectRowComponent,
-
- // json-editor
- json: JsonEditorRowComponent, //json-editor
- jsonb: JsonEditorRowComponent, //json-editor
- ARRAY: JsonEditorRowComponent,
-
- //file
- bytea: FileRowComponent,
-
- //etc
- money: MoneyRowComponent,
-
- //mess (math)
- point: PointRowComponent,
- line: TextRowComponent,
- circle: TextRowComponent,
- path: TextRowComponent,
- box: TextRowComponent,
- lseg: TextRowComponent,
-
- "foreign key": ForeignKeyRowComponent
- },
-
- mysql: {
- // numbers (number)
- tinyint: NumberRowComponent,
- smallint: NumberRowComponent,
- mediumint: NumberRowComponent,
- int: NumberRowComponent,
- bigint: NumberRowComponent,
- decimal: NumberRowComponent,
- float: NumberRowComponent,
- double: NumberRowComponent,
- year: NumberRowComponent,
-
- //boolean (radiogroup)
- boolean: BooleanRowComponent,
-
- //datetime (datepicker)
- date: DateRowComponent,
- time: TimeRowComponent,
- datetime: DateTimeRowComponent,
- timestamp: DateTimeRowComponent,
-
- // short text (text)
- char: TextRowComponent,
- varchar: TextRowComponent,
-
- //long text (textarea)
- text: LongTextRowComponent,
- tinytext: LongTextRowComponent,
- mediumtext: LongTextRowComponent,
- longtext: LongTextRowComponent,
-
- json: JsonEditorRowComponent, //json-editor
-
- //select (select)
- enum: SelectRowComponent,
-
- //file
- binary: FileRowComponent,
- varbinary: FileRowComponent,
- blob: FileRowComponent,
- tinyblob: FileRowComponent,
- mediumblob: FileRowComponent,
- longblob: FileRowComponent,
-
- //etc
- set: TextRowComponent, //(text)
-
- "foreign key": ForeignKeyRowComponent
- },
-
- oracledb: {
- // numbers (number)
- NUMBER: NumberRowComponent,
- FLOAT: NumberRowComponent,
- BINARY_FLOAT: NumberRowComponent,
- BINARY_DOUBLE: NumberRowComponent,
- "INTERVAL YEAR": NumberRowComponent,
- "INTERVAL DAY": NumberRowComponent,
-
- //datetime (datepicker)
- DATE: DateRowComponent,
- TIMESTAMP: DateTimeRowComponent,
-
- // short text (text)
- CHAR: TextRowComponent,
- NCHAR: TextRowComponent,
- CLOB: TextRowComponent,
- NCLOB: TextRowComponent,
- VARCHAR2: TextRowComponent,
- VARCHAR: TextRowComponent,
- NVARCHAR2: TextRowComponent,
-
- //file
- BLOB: FileRowComponent,
- BFILE: FileRowComponent,
- RAW: FileRowComponent,
- "LONG RAW" : FileRowComponent,
- LONG : FileRowComponent,
-
- "foreign key": ForeignKeyRowComponent
- },
-
- mssql: {
- // numbers (number)
- bigint: NumberRowComponent,
- int: NumberRowComponent,
- smallint: NumberRowComponent,
- tinyint: NumberRowComponent,
- decimal: NumberRowComponent,
- bitdecimal: NumberRowComponent,
- numeric: NumberRowComponent,
- real: NumberRowComponent,
-
- // short text (text)
- uniqueidentifier: IdRowComponent,
- char: TextRowComponent,
- varchar: TextRowComponent,
-
- //long text (textarea)
- text: LongTextRowComponent,
- nchar: LongTextRowComponent,
- nvarchar: LongTextRowComponent,
- ntext: LongTextRowComponent,
-
- //datetime (datepicker)
- date: DateRowComponent,
- datetime: DateTimeRowComponent,
- smalldatetime: DateTimeRowComponent,
- timestamp: DateTimeRowComponent,
-
- //file
- binary: FileRowComponent,
- varbinary: FileRowComponent,
- image: FileRowComponent,
-
- // etc
- money: MoneyRowComponent,
- smallmoney: MoneyRowComponent,
-
- "foreign key": ForeignKeyRowComponent
- },
- mongodb: {
- // numbers (number)
- number: NumberRowComponent,
- double: NumberRowComponent,
- int32: NumberRowComponent,
- long: NumberRowComponent,
- decimal128: NumberRowComponent,
-
- //boolean (radiogroup)
- boolean: BooleanRowComponent,
-
- //datetime (datepicker)
- date: DateRowComponent,
- timestamp: DateTimeRowComponent,
-
- // short text (text)
- string: TextRowComponent,
- regexp: TextRowComponent,
- objectid: TextRowComponent,
-
- //file
- binary: FileRowComponent,
-
- //json
- object: JsonEditorRowComponent,
- array: JsonEditorRowComponent,
-
- //etc
- unknown: TextRowComponent,
-
- "foreign key": ForeignKeyRowComponent
- },
- dynamodb: {
- string: TextRowComponent,
- number: NumberRowComponent,
- boolean: BooleanRowComponent,
- null: StaticTextRowComponent,
- array: JsonEditorRowComponent,
- json: JsonEditorRowComponent,
- binary: FileRowComponent,
- }
-}
\ No newline at end of file
diff --git a/frontend/src/app/consts/record-edit-types.ts b/frontend/src/app/consts/record-edit-types.ts
new file mode 100644
index 000000000..eb0295eed
--- /dev/null
+++ b/frontend/src/app/consts/record-edit-types.ts
@@ -0,0 +1,276 @@
+import { BinaryDataCaptionEditComponent } from '../components/ui-components/record-edit-fields/binary-data-caption/binary-data-caption.component';
+import { BooleanEditComponent } from 'src/app/components/ui-components/record-edit-fields/boolean/boolean.component'
+import { CodeEditComponent } from '../components/ui-components/record-edit-fields/code/code.component';
+import { CountryEditComponent } from '../components/ui-components/record-edit-fields/country/country.component';
+import { DateEditComponent } from '../components/ui-components/record-edit-fields/date/date.component';
+import { DateTimeEditComponent } from '../components/ui-components/record-edit-fields/date-time/date-time.component';
+import { FileEditComponent } from '../components/ui-components/record-edit-fields/file/file.component';
+import { ForeignKeyEditComponent } from '../components/ui-components/record-edit-fields/foreign-key/foreign-key.component';
+import { IdEditComponent } from '../components/ui-components/record-edit-fields/id/id.component';
+import { ImageEditComponent } from '../components/ui-components/record-edit-fields/image/image.component';
+import { JsonEditorEditComponent } from '../components/ui-components/record-edit-fields/json-editor/json-editor.component';
+import { LongTextEditComponent } from 'src/app/components/ui-components/record-edit-fields/long-text/long-text.component'
+import { MoneyEditComponent } from '../components/ui-components/record-edit-fields/money/money.component';
+import { NumberEditComponent } from 'src/app/components/ui-components/record-edit-fields/number/number.component';
+import { PasswordEditComponent } from '../components/ui-components/record-edit-fields/password/password.component';
+import { PhoneEditComponent } from '../components/ui-components/record-edit-fields/phone/phone.component';
+import { PointEditComponent } from 'src/app/components/ui-components/record-edit-fields/point/point.component';
+import { SelectEditComponent } from '../components/ui-components/record-edit-fields/select/select.component';
+import { StaticTextEditComponent } from '../components/ui-components/record-edit-fields/static-text/static-text.component';
+import { TextEditComponent } from 'src/app/components/ui-components/record-edit-fields/text/text.component';
+import { TimeEditComponent } from '../components/ui-components/record-edit-fields/time/time.component';
+import { TimeIntervalEditComponent } from '../components/ui-components/record-edit-fields/time-interval/time-interval.component';
+import { UrlEditComponent } from '../components/ui-components/record-edit-fields/url/url.component';
+
+export const timestampTypes = ['timestamp without time zone', 'timestamp with time zone', 'timestamp', 'date', 'time without time zone', 'time with time zone' , 'time', 'datetime', 'date time', 'datetime2', 'datetimeoffset', 'curdate', 'curtime', 'now', 'localtime', 'localtimestamp'];
+export const defaultTimestampValues = {
+ postgres: ['current_date', 'current_time', 'current_timestamp', 'localtime', 'localtimestamp', 'now'],
+ mysql: ['curdate', 'curtime', 'now'],
+}
+
+export const UIwidgets = {
+ Default: '',
+ Boolean: BooleanEditComponent,
+ Date: DateEditComponent,
+ Time: TimeEditComponent,
+ DateTime: DateTimeEditComponent,
+ JSON: JsonEditorEditComponent,
+ Textarea: LongTextEditComponent,
+ String: TextEditComponent,
+ Readonly: StaticTextEditComponent,
+ Number: NumberEditComponent,
+ Select: SelectEditComponent,
+ Password: PasswordEditComponent,
+ File: FileEditComponent,
+ Code: CodeEditComponent,
+ Image: ImageEditComponent,
+ URL: UrlEditComponent,
+ Country: CountryEditComponent,
+ Phone: PhoneEditComponent,
+ Money: MoneyEditComponent,
+ Foreign_key: ForeignKeyEditComponent,
+}
+
+export const recordEditTypes = {
+ postgres: {
+ // numbers (number)
+ real: NumberEditComponent,
+ "double precision": NumberEditComponent,
+ smallint: NumberEditComponent,
+ integer: NumberEditComponent,
+ bigint: NumberEditComponent,
+ numeric: NumberEditComponent,
+
+ //boolean (checkbox)
+ boolean: BooleanEditComponent,
+
+ //datetime (datepicker)
+ "timestamp without time zone": DateTimeEditComponent,
+ "timestamp with time zone": DateTimeEditComponent,
+ "time without time zone": TimeEditComponent,
+ "time with time zone": TimeEditComponent,
+ date: DateEditComponent,
+ abstime: DateTimeEditComponent,
+ realtime: DateTimeEditComponent,
+ interval: TimeIntervalEditComponent, // number + select(seconds, days, weeks, years)
+
+ // short text (text)
+ "character varying": TextEditComponent,
+ macaddr: TextEditComponent, //to do regexp
+ macaddr8: TextEditComponent, //to do regexp
+ cidr: TextEditComponent, //to do regexp
+ inet: TextEditComponent, //to do regexp
+ uuid: TextEditComponent, //to do regexp
+
+ //long text (textarea)
+ text: LongTextEditComponent,
+ xml: LongTextEditComponent,
+
+ //select (select)
+ enum: SelectEditComponent,
+
+ // json-editor
+ json: JsonEditorEditComponent, //json-editor
+ jsonb: JsonEditorEditComponent, //json-editor
+ ARRAY: JsonEditorEditComponent,
+
+ //file
+ bytea: FileEditComponent,
+
+ //etc
+ money: MoneyEditComponent,
+
+ //mess (math)
+ point: PointEditComponent,
+ line: TextEditComponent,
+ circle: TextEditComponent,
+ path: TextEditComponent,
+ box: TextEditComponent,
+ lseg: TextEditComponent,
+
+ "foreign key": ForeignKeyEditComponent
+ },
+
+ mysql: {
+ // numbers (number)
+ tinyint: NumberEditComponent,
+ smallint: NumberEditComponent,
+ mediumint: NumberEditComponent,
+ int: NumberEditComponent,
+ bigint: NumberEditComponent,
+ decimal: NumberEditComponent,
+ float: NumberEditComponent,
+ double: NumberEditComponent,
+ year: NumberEditComponent,
+
+ //boolean (radiogroup)
+ boolean: BooleanEditComponent,
+
+ //datetime (datepicker)
+ date: DateEditComponent,
+ time: TimeEditComponent,
+ datetime: DateTimeEditComponent,
+ timestamp: DateTimeEditComponent,
+
+ // short text (text)
+ char: TextEditComponent,
+ varchar: TextEditComponent,
+
+ //long text (textarea)
+ text: LongTextEditComponent,
+ tinytext: LongTextEditComponent,
+ mediumtext: LongTextEditComponent,
+ longtext: LongTextEditComponent,
+
+ json: JsonEditorEditComponent, //json-editor
+
+ //select (select)
+ enum: SelectEditComponent,
+
+ //file
+ binary: FileEditComponent,
+ varbinary: FileEditComponent,
+ blob: FileEditComponent,
+ tinyblob: FileEditComponent,
+ mediumblob: FileEditComponent,
+ longblob: FileEditComponent,
+
+ //etc
+ set: TextEditComponent, //(text)
+
+ "foreign key": ForeignKeyEditComponent
+ },
+
+ oracledb: {
+ // numbers (number)
+ NUMBER: NumberEditComponent,
+ FLOAT: NumberEditComponent,
+ BINARY_FLOAT: NumberEditComponent,
+ BINARY_DOUBLE: NumberEditComponent,
+ "INTERVAL YEAR": NumberEditComponent,
+ "INTERVAL DAY": NumberEditComponent,
+
+ //datetime (datepicker)
+ DATE: DateEditComponent,
+ TIMESTAMP: DateTimeEditComponent,
+
+ // short text (text)
+ CHAR: TextEditComponent,
+ NCHAR: TextEditComponent,
+ CLOB: TextEditComponent,
+ NCLOB: TextEditComponent,
+ VARCHAR2: TextEditComponent,
+ VARCHAR: TextEditComponent,
+ NVARCHAR2: TextEditComponent,
+
+ //file
+ BLOB: FileEditComponent,
+ BFILE: FileEditComponent,
+ RAW: FileEditComponent,
+ "LONG RAW" : FileEditComponent,
+ LONG : FileEditComponent,
+
+ "foreign key": ForeignKeyEditComponent
+ },
+
+ mssql: {
+ // numbers (number)
+ bigint: NumberEditComponent,
+ int: NumberEditComponent,
+ smallint: NumberEditComponent,
+ tinyint: NumberEditComponent,
+ decimal: NumberEditComponent,
+ bitdecimal: NumberEditComponent,
+ numeric: NumberEditComponent,
+ real: NumberEditComponent,
+
+ // short text (text)
+ uniqueidentifier: IdEditComponent,
+ char: TextEditComponent,
+ varchar: TextEditComponent,
+
+ //long text (textarea)
+ text: LongTextEditComponent,
+ nchar: LongTextEditComponent,
+ nvarchar: LongTextEditComponent,
+ ntext: LongTextEditComponent,
+
+ //datetime (datepicker)
+ date: DateEditComponent,
+ datetime: DateTimeEditComponent,
+ smalldatetime: DateTimeEditComponent,
+ timestamp: DateTimeEditComponent,
+
+ //file
+ binary: FileEditComponent,
+ varbinary: FileEditComponent,
+ image: FileEditComponent,
+
+ // etc
+ money: MoneyEditComponent,
+ smallmoney: MoneyEditComponent,
+
+ "foreign key": ForeignKeyEditComponent
+ },
+ mongodb: {
+ // numbers (number)
+ number: NumberEditComponent,
+ double: NumberEditComponent,
+ int32: NumberEditComponent,
+ long: NumberEditComponent,
+ decimal128: NumberEditComponent,
+
+ //boolean (radiogroup)
+ boolean: BooleanEditComponent,
+
+ //datetime (datepicker)
+ date: DateEditComponent,
+ timestamp: DateTimeEditComponent,
+
+ // short text (text)
+ string: TextEditComponent,
+ regexp: TextEditComponent,
+ objectid: TextEditComponent,
+
+ //file
+ binary: FileEditComponent,
+
+ //json
+ object: JsonEditorEditComponent,
+ array: JsonEditorEditComponent,
+
+ //etc
+ unknown: TextEditComponent,
+
+ "foreign key": ForeignKeyEditComponent
+ },
+ dynamodb: {
+ string: TextEditComponent,
+ number: NumberEditComponent,
+ boolean: BooleanEditComponent,
+ null: StaticTextEditComponent,
+ array: JsonEditorEditComponent,
+ json: JsonEditorEditComponent,
+ binary: FileEditComponent,
+ }
+}
diff --git a/frontend/src/app/consts/record-view-types.ts b/frontend/src/app/consts/record-view-types.ts
new file mode 100644
index 000000000..6323d1595
--- /dev/null
+++ b/frontend/src/app/consts/record-view-types.ts
@@ -0,0 +1,270 @@
+import { BinaryDataCaptionViewComponent } from '../components/ui-components/record-view-fields/binary-data-caption/binary-data-caption.component';
+import { BooleanViewComponent } from 'src/app/components/ui-components/record-view-fields/boolean/boolean.component'
+import { CodeViewComponent } from '../components/ui-components/record-view-fields/code/code.component';
+import { CountryViewComponent } from '../components/ui-components/record-view-fields/country/country.component';
+import { DateTimeViewComponent } from '../components/ui-components/record-view-fields/date-time/date-time.component';
+import { DateViewComponent } from '../components/ui-components/record-view-fields/date/date.component';
+import { FileViewComponent } from '../components/ui-components/record-view-fields/file/file.component';
+import { ForeignKeyViewComponent } from '../components/ui-components/record-view-fields/foreign-key/foreign-key.component';
+import { IdViewComponent } from '../components/ui-components/record-view-fields/id/id.component';
+import { ImageViewComponent } from '../components/ui-components/record-view-fields/image/image.component';
+import { JsonEditorViewComponent } from '../components/ui-components/record-view-fields/json-editor/json-editor.component';
+import { LongTextViewComponent } from 'src/app/components/ui-components/record-view-fields/long-text/long-text.component'
+import { MoneyViewComponent } from '../components/ui-components/record-view-fields/money/money.component';
+import { NumberViewComponent } from 'src/app/components/ui-components/record-view-fields/number/number.component';
+import { PasswordViewComponent } from '../components/ui-components/record-view-fields/password/password.component';
+import { PhoneViewComponent } from '../components/ui-components/record-view-fields/phone/phone.component';
+import { PointViewComponent } from 'src/app/components/ui-components/record-view-fields/point/point.component';
+import { SelectViewComponent } from '../components/ui-components/record-view-fields/select/select.component';
+import { StaticTextViewComponent } from '../components/ui-components/record-view-fields/static-text/static-text.component';
+import { TextViewComponent } from 'src/app/components/ui-components/record-view-fields/text/text.component';
+import { TimeIntervalViewComponent } from '../components/ui-components/record-view-fields/time-interval/time-interval.component';
+import { TimeViewComponent } from '../components/ui-components/record-view-fields/time/time.component';
+import { UrlViewComponent } from '../components/ui-components/record-view-fields/url/url.component';
+
+export const UIwidgets = {
+ Default: '',
+ Boolean: BooleanViewComponent,
+ Date: DateViewComponent,
+ Time: TimeViewComponent,
+ DateTime: DateTimeViewComponent,
+ JSON: JsonEditorViewComponent,
+ Textarea: LongTextViewComponent,
+ String: TextViewComponent,
+ Readonly: StaticTextViewComponent,
+ Number: NumberViewComponent,
+ Select: SelectViewComponent,
+ Password: PasswordViewComponent,
+ File: FileViewComponent,
+ Code: CodeViewComponent,
+ Image: ImageViewComponent,
+ URL: UrlViewComponent,
+ Country: CountryViewComponent,
+ Phone: PhoneViewComponent,
+ Money: MoneyViewComponent,
+ Foreign_key: ForeignKeyViewComponent,
+}
+
+export const recordViewTypes = {
+ postgres: {
+ // numbers (number)
+ real: NumberViewComponent,
+ "double precision": NumberViewComponent,
+ smallint: NumberViewComponent,
+ integer: NumberViewComponent,
+ bigint: NumberViewComponent,
+ numeric: NumberViewComponent,
+
+ //boolean (checkbox)
+ boolean: BooleanViewComponent,
+
+ //datetime (datepicker)
+ "timestamp without time zone": DateTimeViewComponent,
+ "timestamp with time zone": DateTimeViewComponent,
+ "time without time zone": TimeViewComponent,
+ "time with time zone": TimeViewComponent,
+ date: DateViewComponent,
+ abstime: DateTimeViewComponent,
+ realtime: DateTimeViewComponent,
+ interval: TimeIntervalViewComponent,
+
+ // short text (text)
+ "character varying": TextViewComponent,
+ macaddr: TextViewComponent,
+ macaddr8: TextViewComponent,
+ cidr: TextViewComponent,
+ inet: TextViewComponent,
+ uuid: TextViewComponent,
+
+ //long text (textarea)
+ text: LongTextViewComponent,
+ xml: LongTextViewComponent,
+
+ //select (select)
+ enum: SelectViewComponent,
+
+ // json-editor
+ json: JsonEditorViewComponent,
+ jsonb: JsonEditorViewComponent,
+ ARRAY: JsonEditorViewComponent,
+
+ //file
+ bytea: FileViewComponent,
+
+ //etc
+ money: MoneyViewComponent,
+
+ //mess (math)
+ point: PointViewComponent,
+ line: TextViewComponent,
+ circle: TextViewComponent,
+ path: TextViewComponent,
+ box: TextViewComponent,
+ lseg: TextViewComponent,
+
+ "foreign key": ForeignKeyViewComponent
+ },
+
+ mysql: {
+ // numbers (number)
+ tinyint: NumberViewComponent,
+ smallint: NumberViewComponent,
+ mediumint: NumberViewComponent,
+ int: NumberViewComponent,
+ bigint: NumberViewComponent,
+ decimal: NumberViewComponent,
+ float: NumberViewComponent,
+ double: NumberViewComponent,
+ year: NumberViewComponent,
+
+ //boolean (radiogroup)
+ boolean: BooleanViewComponent,
+
+ //datetime (datepicker)
+ date: DateViewComponent,
+ time: TimeViewComponent,
+ datetime: DateTimeViewComponent,
+ timestamp: DateTimeViewComponent,
+
+ // short text (text)
+ char: TextViewComponent,
+ varchar: TextViewComponent,
+
+ //long text (textarea)
+ text: LongTextViewComponent,
+ tinytext: LongTextViewComponent,
+ mediumtext: LongTextViewComponent,
+ longtext: LongTextViewComponent,
+
+ json: JsonEditorViewComponent, //json-editor
+
+ //select (select)
+ enum: SelectViewComponent,
+
+ //file
+ binary: FileViewComponent,
+ varbinary: FileViewComponent,
+ blob: FileViewComponent,
+ tinyblob: FileViewComponent,
+ mediumblob: FileViewComponent,
+ longblob: FileViewComponent,
+
+ //etc
+ set: TextViewComponent,
+
+ "foreign key": ForeignKeyViewComponent
+ },
+
+ oracledb: {
+ // numbers (number)
+ NUMBER: NumberViewComponent,
+ FLOAT: NumberViewComponent,
+ BINARY_FLOAT: NumberViewComponent,
+ BINARY_DOUBLE: NumberViewComponent,
+ "INTERVAL YEAR": NumberViewComponent,
+ "INTERVAL DAY": NumberViewComponent,
+
+ //datetime (datepicker)
+ DATE: DateViewComponent,
+ TIMESTAMP: DateTimeViewComponent,
+
+ // short text (text)
+ CHAR: TextViewComponent,
+ NCHAR: TextViewComponent,
+ CLOB: TextViewComponent,
+ NCLOB: TextViewComponent,
+ VARCHAR2: TextViewComponent,
+ VARCHAR: TextViewComponent,
+ NVARCHAR2: TextViewComponent,
+
+ //file
+ BLOB: FileViewComponent,
+ BFILE: FileViewComponent,
+ RAW: FileViewComponent,
+ "LONG RAW": FileViewComponent,
+ LONG: FileViewComponent,
+
+ "foreign key": ForeignKeyViewComponent
+ },
+
+ mssql: {
+ // numbers (number)
+ bigint: NumberViewComponent,
+ int: NumberViewComponent,
+ smallint: NumberViewComponent,
+ tinyint: NumberViewComponent,
+ decimal: NumberViewComponent,
+ bitdecimal: NumberViewComponent,
+ numeric: NumberViewComponent,
+ real: NumberViewComponent,
+
+ // short text (text)
+ uniqueidentifier: IdViewComponent,
+ char: TextViewComponent,
+ varchar: TextViewComponent,
+
+ //long text (textarea)
+ text: LongTextViewComponent,
+ nchar: LongTextViewComponent,
+ nvarchar: LongTextViewComponent,
+ ntext: LongTextViewComponent,
+
+ //datetime (datepicker)
+ date: DateViewComponent,
+ datetime: DateTimeViewComponent,
+ smalldatetime: DateTimeViewComponent,
+ timestamp: DateTimeViewComponent,
+
+ //file
+ binary: FileViewComponent,
+ varbinary: FileViewComponent,
+ image: ImageViewComponent,
+
+ // etc
+ money: MoneyViewComponent,
+ smallmoney: MoneyViewComponent,
+
+ "foreign key": ForeignKeyViewComponent
+ },
+ mongodb: {
+ // numbers (number)
+ number: NumberViewComponent,
+ double: NumberViewComponent,
+ int32: NumberViewComponent,
+ long: NumberViewComponent,
+ decimal128: NumberViewComponent,
+
+ //boolean (radiogroup)
+ boolean: BooleanViewComponent,
+
+ //datetime (datepicker)
+ date: DateViewComponent,
+ timestamp: DateTimeViewComponent,
+
+ // short text (text)
+ string: TextViewComponent,
+ regexp: TextViewComponent,
+ objectid: TextViewComponent,
+
+ //file
+ binary: FileViewComponent,
+
+ //json
+ object: JsonEditorViewComponent,
+ array: JsonEditorViewComponent,
+
+ //etc
+ unknown: TextViewComponent,
+
+ "foreign key": ForeignKeyViewComponent
+ },
+ dynamodb: {
+ string: TextViewComponent,
+ number: NumberViewComponent,
+ boolean: BooleanViewComponent,
+ null: StaticTextViewComponent,
+ array: JsonEditorViewComponent,
+ json: JsonEditorViewComponent,
+ binary: FileViewComponent,
+ }
+}
diff --git a/frontend/src/app/consts/table-display-types.ts b/frontend/src/app/consts/table-display-types.ts
new file mode 100644
index 000000000..9513fefb3
--- /dev/null
+++ b/frontend/src/app/consts/table-display-types.ts
@@ -0,0 +1,269 @@
+import { BooleanDisplayComponent } from 'src/app/components/ui-components/table-display-fields/boolean/boolean.component';
+import { CodeDisplayComponent } from '../components/ui-components/table-display-fields/code/code.component';
+import { CountryDisplayComponent } from '../components/ui-components/table-display-fields/country/country.component';
+import { DateDisplayComponent } from '../components/ui-components/table-display-fields/date/date.component';
+import { DateTimeDisplayComponent } from '../components/ui-components/table-display-fields/date-time/date-time.component';
+import { FileDisplayComponent } from '../components/ui-components/table-display-fields/file/file.component';
+import { ForeignKeyDisplayComponent } from '../components/ui-components/table-display-fields/foreign-key/foreign-key.component';
+import { IdDisplayComponent } from '../components/ui-components/table-display-fields/id/id.component';
+import { ImageDisplayComponent } from '../components/ui-components/table-display-fields/image/image.component';
+import { JsonEditorDisplayComponent } from '../components/ui-components/table-display-fields/json-editor/json-editor.component';
+import { LongTextDisplayComponent } from 'src/app/components/ui-components/table-display-fields/long-text/long-text.component';
+import { MoneyDisplayComponent } from '../components/ui-components/table-display-fields/money/money.component';
+import { NumberDisplayComponent } from '../components/ui-components/table-display-fields/number/number.component';
+import { PasswordDisplayComponent } from '../components/ui-components/table-display-fields/password/password.component';
+import { PhoneDisplayComponent } from '../components/ui-components/table-display-fields/phone/phone.component';
+import { PointDisplayComponent } from '../components/ui-components/table-display-fields/point/point.component';
+import { SelectDisplayComponent } from '../components/ui-components/table-display-fields/select/select.component';
+import { StaticTextDisplayComponent } from '../components/ui-components/table-display-fields/static-text/static-text.component';
+import { TextDisplayComponent } from 'src/app/components/ui-components/table-display-fields/text/text.component';
+import { TimeDisplayComponent } from '../components/ui-components/table-display-fields/time/time.component';
+import { TimeIntervalDisplayComponent } from '../components/ui-components/table-display-fields/time-interval/time-interval.component';
+import { UrlDisplayComponent } from '../components/ui-components/table-display-fields/url/url.component';
+
+export const UIwidgets = {
+ Default: '',
+ Boolean: BooleanDisplayComponent,
+ Date: DateDisplayComponent,
+ Time: TimeDisplayComponent,
+ DateTime: DateTimeDisplayComponent,
+ JSON: JsonEditorDisplayComponent,
+ Textarea: LongTextDisplayComponent,
+ String: TextDisplayComponent,
+ Readonly: StaticTextDisplayComponent,
+ Number: NumberDisplayComponent,
+ Select: SelectDisplayComponent,
+ Password: PasswordDisplayComponent,
+ File: FileDisplayComponent,
+ Code: CodeDisplayComponent,
+ Image: ImageDisplayComponent,
+ URL: UrlDisplayComponent,
+ Country: CountryDisplayComponent,
+ Phone: PhoneDisplayComponent,
+ Money: MoneyDisplayComponent,
+ Foreign_key: ForeignKeyDisplayComponent,
+}
+
+export const tableDisplayTypes = {
+ postgres: {
+ // numbers (number)
+ real: NumberDisplayComponent,
+ "double precision": NumberDisplayComponent,
+ smallint: NumberDisplayComponent,
+ integer: NumberDisplayComponent,
+ bigint: NumberDisplayComponent,
+ numeric: NumberDisplayComponent,
+
+ //boolean (checkbox)
+ boolean: BooleanDisplayComponent,
+
+ //datetime (datepicker)
+ "timestamp without time zone": DateTimeDisplayComponent,
+ "timestamp with time zone": DateTimeDisplayComponent,
+ "time without time zone": TimeDisplayComponent,
+ "time with time zone": TimeDisplayComponent,
+ date: DateDisplayComponent,
+ abstime: DateTimeDisplayComponent,
+ realtime: DateTimeDisplayComponent,
+ interval: TimeIntervalDisplayComponent,
+
+ // short text (text)
+ "character varying": TextDisplayComponent,
+ macaddr: TextDisplayComponent,
+ macaddr8: TextDisplayComponent,
+ cidr: TextDisplayComponent,
+ inet: TextDisplayComponent,
+ uuid: TextDisplayComponent,
+
+ //long text (textarea)
+ text: LongTextDisplayComponent,
+ xml: LongTextDisplayComponent,
+
+ //select (select)
+ enum: SelectDisplayComponent,
+
+ // json-editor
+ json: JsonEditorDisplayComponent,
+ jsonb: JsonEditorDisplayComponent,
+ ARRAY: JsonEditorDisplayComponent,
+
+ //file
+ bytea: FileDisplayComponent,
+
+ //etc
+ money: MoneyDisplayComponent,
+
+ //mess (math)
+ point: PointDisplayComponent,
+ line: TextDisplayComponent,
+ circle: TextDisplayComponent,
+ path: TextDisplayComponent,
+ box: TextDisplayComponent,
+ lseg: TextDisplayComponent,
+
+ "foreign key": ForeignKeyDisplayComponent
+ },
+
+ mysql: {
+ // numbers (number)
+ tinyint: NumberDisplayComponent,
+ smallint: NumberDisplayComponent,
+ mediumint: NumberDisplayComponent,
+ int: NumberDisplayComponent,
+ bigint: NumberDisplayComponent,
+ decimal: NumberDisplayComponent,
+ float: NumberDisplayComponent,
+ double: NumberDisplayComponent,
+ year: NumberDisplayComponent,
+
+ //boolean (radiogroup)
+ boolean: BooleanDisplayComponent,
+
+ //datetime (datepicker)
+ date: DateDisplayComponent,
+ time: TimeDisplayComponent,
+ datetime: DateTimeDisplayComponent,
+ timestamp: DateTimeDisplayComponent,
+
+ // short text (text)
+ char: TextDisplayComponent,
+ varchar: TextDisplayComponent,
+
+ //long text (textarea)
+ text: LongTextDisplayComponent,
+ tinytext: LongTextDisplayComponent,
+ mediumtext: LongTextDisplayComponent,
+ longtext: LongTextDisplayComponent,
+
+ json: JsonEditorDisplayComponent, //json-editor
+
+ //select (select)
+ enum: SelectDisplayComponent,
+
+ //file
+ binary: FileDisplayComponent,
+ varbinary: FileDisplayComponent,
+ blob: FileDisplayComponent,
+ tinyblob: FileDisplayComponent,
+ mediumblob: FileDisplayComponent,
+ longblob: FileDisplayComponent,
+
+ //etc
+ set: TextDisplayComponent,
+
+ "foreign key": ForeignKeyDisplayComponent
+ },
+
+ oracledb: {
+ // numbers (number)
+ NUMBER: NumberDisplayComponent,
+ FLOAT: NumberDisplayComponent,
+ BINARY_FLOAT: NumberDisplayComponent,
+ BINARY_DOUBLE: NumberDisplayComponent,
+ "INTERVAL YEAR": NumberDisplayComponent,
+ "INTERVAL DAY": NumberDisplayComponent,
+
+ //datetime (datepicker)
+ DATE: DateDisplayComponent,
+ TIMESTAMP: DateTimeDisplayComponent,
+
+ // short text (text)
+ CHAR: TextDisplayComponent,
+ NCHAR: TextDisplayComponent,
+ CLOB: TextDisplayComponent,
+ NCLOB: TextDisplayComponent,
+ VARCHAR2: TextDisplayComponent,
+ VARCHAR: TextDisplayComponent,
+ NVARCHAR2: TextDisplayComponent,
+
+ //file
+ BLOB: FileDisplayComponent,
+ BFILE: FileDisplayComponent,
+ RAW: FileDisplayComponent,
+ "LONG RAW": FileDisplayComponent,
+ LONG: FileDisplayComponent,
+
+ "foreign key": ForeignKeyDisplayComponent
+ },
+
+ mssql: {
+ // numbers (number)
+ bigint: NumberDisplayComponent,
+ int: NumberDisplayComponent,
+ smallint: NumberDisplayComponent,
+ tinyint: NumberDisplayComponent,
+ decimal: NumberDisplayComponent,
+ bitdecimal: NumberDisplayComponent,
+ numeric: NumberDisplayComponent,
+ real: NumberDisplayComponent,
+
+ // short text (text)
+ uniqueidentifier: IdDisplayComponent,
+ char: TextDisplayComponent,
+ varchar: TextDisplayComponent,
+
+ //long text (textarea)
+ text: LongTextDisplayComponent,
+ nchar: LongTextDisplayComponent,
+ nvarchar: LongTextDisplayComponent,
+ ntext: LongTextDisplayComponent,
+
+ //datetime (datepicker)
+ date: DateDisplayComponent,
+ datetime: DateTimeDisplayComponent,
+ smalldatetime: DateTimeDisplayComponent,
+ timestamp: DateTimeDisplayComponent,
+
+ //file
+ binary: FileDisplayComponent,
+ varbinary: FileDisplayComponent,
+ image: ImageDisplayComponent,
+
+ // etc
+ money: MoneyDisplayComponent,
+ smallmoney: MoneyDisplayComponent,
+
+ "foreign key": ForeignKeyDisplayComponent
+ },
+ mongodb: {
+ // numbers (number)
+ number: NumberDisplayComponent,
+ double: NumberDisplayComponent,
+ int32: NumberDisplayComponent,
+ long: NumberDisplayComponent,
+ decimal128: NumberDisplayComponent,
+
+ //boolean (radiogroup)
+ boolean: BooleanDisplayComponent,
+
+ //datetime (datepicker)
+ date: DateDisplayComponent,
+ timestamp: DateTimeDisplayComponent,
+
+ // short text (text)
+ string: TextDisplayComponent,
+ regexp: TextDisplayComponent,
+ objectid: TextDisplayComponent,
+
+ //file
+ binary: FileDisplayComponent,
+
+ //json
+ object: JsonEditorDisplayComponent,
+ array: JsonEditorDisplayComponent,
+
+ //etc
+ unknown: TextDisplayComponent,
+
+ "foreign key": ForeignKeyDisplayComponent
+ },
+ dynamodb: {
+ string: TextDisplayComponent,
+ number: NumberDisplayComponent,
+ boolean: BooleanDisplayComponent,
+ null: StaticTextDisplayComponent,
+ array: JsonEditorDisplayComponent,
+ json: JsonEditorDisplayComponent,
+ binary: FileDisplayComponent,
+ }
+}
diff --git a/frontend/src/app/lib/format-field-value.ts b/frontend/src/app/lib/format-field-value.ts
index 068ef15d5..0d652b513 100644
--- a/frontend/src/app/lib/format-field-value.ts
+++ b/frontend/src/app/lib/format-field-value.ts
@@ -19,8 +19,8 @@ export function formatFieldValue(value, type) {
const datetimeValue = new Date(value);
return format(datetimeValue, "P p")
} else if (type === 'boolean') {
- if (value || value === 1) return 'โ'
- else if (value === false || value === 0) return 'โ'
+ if (value || value === 1) return true
+ else if (value === false || value === 0) return false
else return 'โ'
} else if (type === 'json' || type === 'jsonb' || type === 'object' || type === 'array' || type === 'interval') {
return JSON.stringify(value)
diff --git a/frontend/src/app/lib/setup-table-row-structure.ts b/frontend/src/app/lib/setup-table-row-structure.ts
index f9fd5c291..860817ffb 100644
--- a/frontend/src/app/lib/setup-table-row-structure.ts
+++ b/frontend/src/app/lib/setup-table-row-structure.ts
@@ -1,7 +1,10 @@
import { TableField } from '../models/table';
export function getTableTypes(structure: TableField[], foreignKeysList: string[]) {
- console.log(foreignKeysList);
+ if (!structure || !Array.isArray(structure) || structure.length === 0) {
+ return {};
+ }
+
const tableTypes = Object.assign({}, ...structure.map((field: TableField) => {
if (field.data_type === 'tinyint' && field.character_maximum_length === 1 )
return {[field.column_name]: 'boolean'}