Merge pull request #1172 from rocket-admin/url-widget-table-view

Url widget table view

Author: lyubov-voloshko

frontend/src/app/components/dashboard/db-table-actions/db-table-actions.component.css

@@ -308,7 +308,7 @@
     display: flex;
     align-items: center;
     background-color: rgba(0,0,0,0.04);
-    color: rgba(0,0,0,0.87);
+    color: rgba(0,0,0,0.64);
     padding: 8px 16px;
 }
 

frontend/src/app/components/dashboard/db-table-actions/db-table-actions.component.html

@@ -12,13 +12,7 @@ <h1 class="mat-h1">Rules</h1>
             </button>
         </div>
         <div class="no-actions" *ngIf="rulesData && rules && rules.length === 0 && !newRule">
-            <button mat-stroked-button color="primary" type="button"
-                angulartics2On="click"
-                angularticsAction="Actions: add action is clicked"
-                (click)="addNewRule()">
-                <mat-icon>add</mat-icon>
-                Add first rule
-            </button>
+            <span>No added rules</span>
         </div>
         <mat-action-list *ngIf="rulesData && rules && rules.length">
             <button mat-list-item *ngFor="let rule of rules; let i = index"
@@ -198,6 +192,12 @@ <h1 class="mat-h1">Rules</h1>
                 <strong class="actions-hint__title">Configure custom triggers and actions for database records</strong>
                 <span class="actions-hint__text">React to standard operations like create, update, delete, or define your own.</span>
             </p>
+            <button mat-flat-button color="accent"
+                angulartics2On="click"
+                angularticsAction="Actions: add first action is clicked"
+                (click)="addNewRule()">
+                Add first rule
+            </button>
             <div class="rules-examples">
                 <div class="rule-example">
                     <div class="rule-example__row">

frontend/src/app/components/dashboard/db-table/db-table.component.css

@@ -468,9 +468,24 @@ th.mat-header-cell, td.mat-cell {
     margin: 12px 0;
 }
 
+.field-link {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--color-primaryPalette-500);
+}
+
+.field-link__icon {
+    flex-shrink: 0;
+    margin-bottom: -2px;
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+}
+
 .field-value-copy-button {
     position: absolute;
-    right: 0;
+    right: -6px;
     top: 50%;
     display: none;
     transform: translate(0, -50%) scale(0.85);

frontend/src/app/components/dashboard/db-table/db-table.component.html

@@ -238,7 +238,17 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                                     [style.--height.px]="tableData.widgets[column].widget_params.height"
                                     class="field-image">
 
-                                <span>{{ getWidgetValue(column, element[column]) }}</span>
+                                <a *ngIf="tableData.widgets[column].widget_type === 'URL' && element[column]"
+                                    target="_blank"
+                                    [href]="element[column]"
+                                    class="field-link"
+                                    (click)="$event.stopPropagation()"
+                                    >
+                                    <mat-icon class="field-link__icon" fontSet="material-icons-outlined">link</mat-icon>
+                                    <span>{{element[column]}}</span>
+                                </a>
+
+                                <span *ngIf="tableData.widgets[column].widget_type !== 'URL'">{{ getWidgetValue(column, element[column]) }}</span>
 
                                 <button type="button" mat-icon-button
                                     class="field-value-copy-button"