Skip to content
This repository has been archived by the owner on Oct 11, 2024. It is now read-only.

Commit

Permalink
Config-editor-ui: Adding in middle of tab-array + fix overflow bug in…
Browse files Browse the repository at this point in the history 
… textarea + small … (#250)

* Adding in middle of tab-array + fix overflow bug in textarea + small lint config change
  • Loading branch information
Celie Valentiny authored and GitHub Enterprise committed Apr 23, 2021
1 parent 254c740 commit 695d9f3
Show file tree
Hide file tree
Showing 17 changed files with 475 additions and 419 deletions.
1 change: 1 addition & 0 deletions config-editor/config-editor-ui/.eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"env": {
"jasmine": true
},
"ignorePatterns": ["src/testing/*"],
"overrides": [
{
"files": ["*.ts"],
Expand Down
8 changes: 1 addition & 7 deletions config-editor/config-editor-ui/eslint-common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,12 @@
"eslint:recommended",
"plugin:prettier/recommended"
],
"plugins": [
"sort-keys-fix"
],
"rules": {
"@angular-eslint/component-selector": [
"error",
{ "type": "element", "prefix": "re", "style": "kebab-case" }
{ "type": "element", "prefix": ["re", "formly"], "style": "kebab-case" }
],
"no-prototype-builtins": "off",
"sort-keys-fix/sort-keys-fix": "warn",
"arrow-parens": [
"error",
"as-needed"
Expand Down Expand Up @@ -50,9 +46,7 @@
"no-return-await": "error",
"no-shadow": "off",
"no-underscore-dangle": "off",
"no-useless-constructor": "off",
"prefer-arrow/prefer-arrow-functions": "off",
"sort-keys": "error",
"@angular-eslint/prefer-output-readonly": "error",
"@angular-eslint/use-component-view-encapsulation": "error",
"@typescript-eslint/array-type": [
Expand Down
2 changes: 1 addition & 1 deletion config-editor/config-editor-ui/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "rule-editor.ui",
"version": "2.0.24",
"version": "2.0.25",
"license": "MIT",
"scripts": {
"ng": "ng",
Expand Down
66 changes: 37 additions & 29 deletions config-editor/config-editor-ui/src/app/ngx-formly/admin-tabs.type.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,37 @@
import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';

@Component({
// tslint:disable-next-line:component-selector
selector: 'formly-admintab-type',
template: `
<mat-tab-group class="admin-tabs" animationDuration="0ms">
<mat-tab [label]="'General Properties'">
<ng-container *ngFor="let f of field.fieldGroup">
<formly-field *ngIf="!tabTypes.includes(f.type) || f.templateOptions.genericSettingTab" [field]="f"></formly-field>
</ng-container>
</mat-tab>
<ng-container *ngFor="let tab of field.fieldGroup">
<mat-tab *ngIf="tabTypes.includes(tab.type) && !tab.templateOptions.genericSettingTab" [label]="tab?.templateOptions?.label">
<formly-field [field]="tab"></formly-field>
</mat-tab>
</ng-container>
</mat-tab-group>
`,
styles: [`
::ng-deep .admin-tabs .mat-tab-body-wrapper {
top: 8px !important;
}
`]
})
export class AdminTabTypeComponent extends FieldType {
tabTypes = ['array', 'object', 'rawobject'];
}
import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';

@Component({
// tslint:disable-next-line:component-selector
selector: 'formly-admintab-type',
template: `
<mat-tab-group class="admin-tabs" animationDuration="0ms">
<mat-tab [label]="'General Properties'">
<ng-container *ngFor="let f of field.fieldGroup">
<formly-field
*ngIf="!tabTypes.includes(f.type) || f.templateOptions.genericSettingTab"
[field]="f"
></formly-field>
</ng-container>
</mat-tab>
<ng-container *ngFor="let tab of field.fieldGroup">
<mat-tab
*ngIf="tabTypes.includes(tab.type) && !tab.templateOptions.genericSettingTab"
[label]="tab?.templateOptions?.label"
>
<formly-field [field]="tab"></formly-field>
</mat-tab>
</ng-container>
</mat-tab-group>
`,
styles: [
`
::ng-deep .admin-tabs .mat-tab-body-wrapper {
top: 8px !important;
}
`,
],
})
export class AdminTabTypeComponent extends FieldType {
tabTypes = ['array', 'object', 'rawobject'];
}
139 changes: 76 additions & 63 deletions config-editor/config-editor-ui/src/app/ngx-formly/array.type.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

import { Component } from '@angular/core';
import { FieldArrayType } from '@ngx-formly/core';

Expand All @@ -7,128 +6,142 @@ import { FieldArrayType } from '@ngx-formly/core';
selector: 'formly-array-type',
template: `
<legend *ngIf="to.label">{{ to.label }}</legend>
<p class="description" *ngIf="to.description">{{ to.description }}
<ng-container matSuffix *ngIf="to.suffix">
<ng-container *ngTemplateOutlet="to.suffix"></ng-container>
</ng-container>
<p class="description" *ngIf="to.description">
{{ to.description }}
<ng-container matSuffix *ngIf="to.suffix">
<ng-container *ngTemplateOutlet="to.suffix"></ng-container>
</ng-container>
</p>
<div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
<formly-validation-message [field]="field"></formly-validation-message>
</div>
<div *ngFor="let f of field.fieldGroup; let i = index;" class="row">
<div *ngFor="let f of field.fieldGroup; let i = index" class="row">
<formly-field class="array-item" [field]="f"></formly-field>
<div class="column">
<a (click)="moveUp(i)">
<mat-icon class="move-arrow" [class.greyed-out]="i <= 0">arrow_drop_up</mat-icon>
</a>
<a (click)="moveDown(i)">
<mat-icon class="move-arrow" [class.greyed-out]="i >= field.fieldGroup.length -1">arrow_drop_down</mat-icon>
</a>
</div>
<svg *ngIf="showRemoveButton"
xmlns="http://www.w3.org/2000/svg"
height="18" width="18" viewBox="0 0 24 24"
class="close-button"
(click)="remove(i)">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
</svg>
<div class="column">
<a (click)="moveUp(i)">
<mat-icon class="move-arrow" [class.greyed-out]="i <= 0">arrow_drop_up</mat-icon>
</a>
<a (click)="moveDown(i)">
<mat-icon class="move-arrow" [class.greyed-out]="i >= field.fieldGroup.length - 1">arrow_drop_down</mat-icon>
</a>
</div>
<svg
*ngIf="showRemoveButton"
xmlns="http://www.w3.org/2000/svg"
height="18"
width="18"
viewBox="0 0 24 24"
class="close-button"
(click)="remove(i)"
>
<path
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
/>
</svg>
</div>
<div class="row">
<div class="add-button" *ngIf="to.maxItems ? field.fieldGroup.length < to.maxItems : true">
<button mat-raised-button color="primary" (click)="add()">Add to {{to.label}}</button>
<button mat-raised-button color="primary" (click)="add()">Add to {{ to.label }}</button>
</div>
<div>
<div></div>
</div>
`,
styles: [`
legend {
styles: [
`
legend {
font-weight: 400;
margin: 5px;
font-size: 1.3em;
}
}
.description {
.description {
padding: 0 10px 10px 15px;
font-size: 0.9em;
color: rgba(255, 255, 255, 0.7);
display: flex;
justify-content: space-between;
}
}
.row {
.row {
display: flex;
padding-top: 5px;
}
}
.rhs {
.rhs {
margin: 5px auto 5px 0;
}
}
.close-button {
.close-button {
cursor: pointer;
top: 6px;
right: 6px;
fill: orange;
z-index: 500;
}
}
.add-button {
.add-button {
margin: 5px 0 5px 0;
}
}
.column {
.column {
display: block;
width: 16px;
}
}
.move-arrow {
.move-arrow {
width: 14px;
height: 14px;
font-size: 18px;
cursor: pointer;
}
}
.greyed-out {
.greyed-out {
width: 14px;
height: 14px;
font-size: 18px;
color: #707070;
cursor: default;
}
}
.blank-icon {
.blank-icon {
width: 14px;
height: 14px;
opacity: 0;
cursor: default;
}
}
.close-button:hover { background: rgba(255,255,255,0.2); }
.array-item:hover > .close-button { visibility: visible }
.array-item {
.close-button:hover {
background: rgba(255, 255, 255, 0.2);
}
.array-item:hover > .close-button {
visibility: visible;
}
.array-item {
flex: 9;
position: relative;
transition: all 0.2s ease-in-out;
}
`],
}
`,
],
})
export class ArrayTypeComponent extends FieldArrayType {
public showRemoveButton = true;
public showRemoveButton = true;

moveUp (index: number) {
if (index > 0) {
this.reorder(index, index - 1);
}
moveUp(index: number) {
if (index > 0) {
this.reorder(index, index - 1);
}
}

moveDown (index: number) {
if (index < this.field.fieldGroup.length - 1) {
this.reorder(index, index + 1);
}
moveDown(index: number) {
if (index < this.field.fieldGroup.length - 1) {
this.reorder(index, index + 1);
}
}

reorder (oldIndex: number, newIndex: number) {
const temp = this.model[oldIndex];
this.remove(oldIndex);
this.add(newIndex, temp);
}
reorder(oldIndex: number, newIndex: number) {
const temp = this.model[oldIndex];
this.remove(oldIndex);
this.add(newIndex, temp);
}
}
10 changes: 4 additions & 6 deletions config-editor/config-editor-ui/src/app/ngx-formly/expansion-panel-wrapper.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

import { Component } from '@angular/core';
import { FieldWrapper } from '@ngx-formly/core';

Expand All @@ -9,15 +8,14 @@ import { FieldWrapper } from '@ngx-formly/core';
<mat-expansion-panel [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
{{ to.label }}
{{ to.label }}
</mat-panel-title>
<mat-panel-description>
{{ to.description }}
{{ to.description }}
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent #fieldComponent></ng-template>
<ng-template matExpansionPanelContent #fieldComponent></ng-template>
</mat-expansion-panel>
`,
})
export class ExpansionPanelWrapperComponent extends FieldWrapper {
}
export class ExpansionPanelWrapperComponent extends FieldWrapper {}
Loading

0 comments on commit 695d9f3

Please sign in to comment.