Skip to content

Commit

Permalink
Merge pull request #56 from casejs/feature/improvements
Browse files Browse the repository at this point in the history
Improvements before launch
  • Loading branch information
SebConejo committed Aug 10, 2023
2 parents 3e2af2a + 96ded8d commit 0b028ff
Show file tree
Hide file tree
Showing 27 changed files with 227 additions and 35 deletions.
11 changes: 6 additions & 5 deletions docs/properties.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,12 @@ You can pass arguments to the `@Prop()` decorator:

Some types have a specific set of options. Nevertheless, the following options are applicable to all properties in the `options` object parameter.

| Option | Default | Type | Description |
| -------------------- | ------- | ------- | ------------------------------------------------------------------------------------------- |
| **filter** | `false` | boolean | Adds a filter in lists (currently only for [Relation PropType](property-types.md#relation)) |
| **isHiddenInList** | `false` | boolean | Hides the column in the list. |
| **isHiddenInDetail** | `false` | boolean | Hides this property in the detail view. |
| Option | Default | Type | Description |
| ------------------------ | ------- | ------- | ------------------------------------------------------------------------------------------- |
| **filter** | `false` | boolean | Adds a filter in lists (currently only for [Relation PropType](property-types.md#relation)) |
| **isHiddenInList** | `false` | boolean | Hides the column in the list |
| **isHiddenInDetail** | `false` | boolean | Hides this property in the detail view |
| **isHiddenInCreateEdit** | `false` | boolean | Hides this property input in create and edit views |

Example:

Expand Down
11 changes: 11 additions & 0 deletions docs/property-types.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,17 @@ A numerical value.
</div>
</div>

#### Link

An URL that links to an external page.

```js
@Prop({
type: PropType.Link
})
website: string
```

#### Currency

Choose from any currency.
Expand Down
3 changes: 3 additions & 0 deletions docs/vercel.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component } from '@angular/core'
import { Component, ElementRef, HostListener } from '@angular/core'

import { AuthService } from '../../auth/auth.service'
import { User } from '../../interfaces/user.interface'
Expand All @@ -12,11 +12,21 @@ export class UserMenuItemComponent {
currentUser: User
showUserMenu = false

constructor(private authService: AuthService) {}
constructor(
private authService: AuthService,
private elementRef: ElementRef
) {}

ngOnInit() {
this.authService.currentUser.subscribe((user: User) => {
this.currentUser = user
})
}

@HostListener('document:click', ['$event.target'])
onClick(target: any) {
if (!this.elementRef.nativeElement.contains(target)) {
this.showUserMenu = false
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,15 @@ <h1 class="title is-2 has-text-weight-light">
<div class="right-part">
<button
class="button is-link is-hidden-touch"
[ngClass]="{ 'is-loading': loading }"
type="submit"
(click)="submit()"
>
Submit
</button>
<button
class="button is-link is-hidden-desktop is-circle"
[ngClass]="{ 'is-loading': loading }"
type="submit"
(click)="submit()"
>
Expand All @@ -34,10 +36,7 @@ <h1 class="title is-2 has-text-weight-light">
class="column is-6-desktop is-offset-3-desktop is-4-fullhd is-offset-4-fullhd"
>
<div class="form-group">
<div
class="field mt-2 mb-4"
*ngFor="let prop of entityMeta.props"
>
<div class="field mt-2 mb-4" *ngFor="let prop of props">
<div class="control">
<app-input
[prop]="prop"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { Component } from '@angular/core'
import { FormBuilder, FormControl, FormGroup } from '@angular/forms'
import { ActivatedRoute, Data, Params, Router } from '@angular/router'
import { combineLatest, of } from 'rxjs'
import { combineLatest } from 'rxjs'
import { PropType } from '~shared/enums/prop-type.enum'
import { EntityMeta } from '~shared/interfaces/entity-meta.interface'

import { PropertyDescription } from '../../../../../../shared/interfaces/property-description.interface'
import { BreadcrumbService } from '../../../services/breadcrumb.service'
import { FlashMessageService } from '../../../services/flash-message.service'
import { DynamicEntityService } from '../../dynamic-entity.service'
Expand All @@ -16,12 +17,12 @@ import { DynamicEntityService } from '../../dynamic-entity.service'
})
export class DynamicEntityCreateEditComponent {
item: any

entityMeta: EntityMeta
props: PropertyDescription[]

form: FormGroup = this.formBuilder.group({})
edit: boolean

loading: boolean
PropType = PropType

constructor(
Expand Down Expand Up @@ -55,6 +56,10 @@ export class DynamicEntityCreateEditComponent {
this.router.navigate(['/404'])
}

this.props = this.entityMeta.props.filter(
(prop) => !prop.options.isHiddenInCreateEdit
)

if (this.edit) {
this.item = await this.dynamicEntityService.show(
this.entityMeta.definition.slug,
Expand Down Expand Up @@ -101,28 +106,43 @@ export class DynamicEntityCreateEditComponent {
}

submit(): void {
this.loading = true
if (this.edit) {
this.dynamicEntityService
.update(this.entityMeta.definition.slug, this.item.id, this.form.value)
.then(() => {
this.loading = false
this.flashMessageService.success(
`The ${this.entityMeta.definition.nameSingular} has been updated`
)
this.router.navigate(['/dynamic', this.entityMeta.definition.slug])
})
.catch(() => {
this.loading = false
this.flashMessageService.error(
`The ${this.entityMeta.definition.nameSingular} could not be updated`
)
})
} else {
this.dynamicEntityService
.create(this.entityMeta.definition.slug, this.form.value)
.then((res: { identifiers: { id: number }[] }) => {
this.loading = false
this.flashMessageService.success(
`The ${this.entityMeta.definition.nameSingular} has been created`
`Error: the ${this.entityMeta.definition.nameSingular} has been created`
)
this.router.navigate([
'/dynamic',
this.entityMeta.definition.slug,
res.identifiers[0].id
])
})
.catch(() => {
this.loading = false
this.flashMessageService.error(
`Error: the ${this.entityMeta.definition.nameSingular} could not be created`
)
})
}
}
}
8 changes: 8 additions & 0 deletions packages/case/client/src/app/inputs/input.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { PasswordInputComponent } from './password-input/password-input.componen
import { SelectInputComponent } from './select-input/select-input.component'
import { TextInputComponent } from './text-input/text-input.component'
import { TextareaInputComponent } from './textarea-input/textarea-input.component'
import { UrlInputComponent } from './url-input/url-input.component'

@Component({
selector: 'app-input',
Expand All @@ -25,6 +26,7 @@ import { TextareaInputComponent } from './textarea-input/textarea-input.componen
CurrencyInputComponent,
DateInputComponent,
EmailInputComponent,
UrlInputComponent,
MultiSelectInputComponent,
NumberInputComponent,
PasswordInputComponent,
Expand All @@ -47,6 +49,12 @@ import { TextareaInputComponent } from './textarea-input/textarea-input.componen
(valueChanged)="onChange($event)"
*ngIf="prop.type === PropType.Text"
></app-text-input>
<app-url-input
[prop]="prop"
[value]="value"
(valueChanged)="onChange($event)"
*ngIf="prop.type === PropType.Link"
></app-url-input>
<app-textarea-input
[prop]="prop"
[value]="value"
Expand Down
Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { UrlInputComponent } from './url-input.component';

describe('UrlInputComponent', () => {
let component: UrlInputComponent;
let fixture: ComponentFixture<UrlInputComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ UrlInputComponent ]
})
.compileComponents();

fixture = TestBed.createComponent(UrlInputComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import {
Component,
ElementRef,
EventEmitter,
Input,
OnInit,
Output,
ViewChild
} from '@angular/core'

import { PropertyDescription } from '../../../../../shared/interfaces/property-description.interface'

@Component({
selector: 'app-url-input',
standalone: true,
template: `<label [for]="prop.propName">{{ prop.label }}</label>
<input
class="input form-control"
type="url"
placeholder="https://example.com"
(change)="onChange($event)"
#input
/>`,
styleUrls: ['./url-input.component.scss']
})
export class UrlInputComponent implements OnInit {
@Input() prop: PropertyDescription
@Input() value: string

@Output() valueChanged: EventEmitter<number> = new EventEmitter()

@ViewChild('input', { static: true }) input: ElementRef

ngOnInit(): void {
if (this.value !== undefined) {
this.input.nativeElement.value = this.value
}
}
onChange(event: any) {
this.valueChanged.emit(event.target.value)
}
}
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { CommonModule } from '@angular/common'
import { CurrencyPipe, NgIf } from '@angular/common'
import { Component, Input } from '@angular/core'
import { CurrencyOptions } from '~shared/interfaces/property-options/currency-options.interface'

@Component({
selector: 'app-currency-yield',
standalone: true,
imports: [CommonModule],
imports: [NgIf, CurrencyPipe],
template: `<span class="is-nowrap" *ngIf="value">
{{ value | currency : options.currency }}</span
>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { CommonModule } from '@angular/common'
import { Component, Input } from '@angular/core'

import { environment } from '../../../environments/environment'

@Component({
Expand All @@ -16,7 +15,8 @@ import { environment } from '../../../environments/environment'
[attr.data-tooltip]="'Download file'"
*ngIf="value"
>
<i class="icon icon-download"></i>
<i *ngIf="compact" class="icon icon-download"></i>
<span *ngIf="!compact">{{ value }} </span>
</a>
<a disabled *ngIf="!value">
<i class="icon icon-download"></i>
Expand All @@ -26,6 +26,6 @@ import { environment } from '../../../environments/environment'
})
export class FileYieldComponent {
@Input() value: string

@Input() compact: boolean = true
storagePath: string = environment.storagePath
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
img {
height: 36px;
width: 36px;
&:not(.is-large) {
height: 36px;
width: 36px;
}
&.is-large {
width: 800px;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ import { environment } from '../../../environments/environment'
[src]="
storagePath + value + (compact ? '-thumbnail.jpg' : '-large.jpg')
"
[ngClass]="{ 'is-rounded': compact }"
[ngClass]="{ 'is-rounded': compact, 'is-large': !compact }"
*ngIf="value"
/>
<img
*ngIf="!value"
src="/assets/images/image-default.svg"
[ngClass]="{ 'is-rounded': compact }"
[ngClass]="{ 'is-rounded': compact, 'is-large': !compact }"
/>
</figure>
`,
Expand Down
Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { LinkYieldComponent } from './link-yield.component';

describe('LinkYieldComponent', () => {
let component: LinkYieldComponent;
let fixture: ComponentFixture<LinkYieldComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ LinkYieldComponent ]
})
.compileComponents();

fixture = TestBed.createComponent(LinkYieldComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { NgIf } from '@angular/common'
import { Component, Input } from '@angular/core'
import { TruncatePipe } from '../../pipes/truncate.pipe'

@Component({
selector: 'app-link-yield',
standalone: true,
imports: [NgIf, TruncatePipe],
template: ` <a [href]="value" target="_blank">
<i class="icon icon-external-link mr-1"></i>
<span *ngIf="compact">{{ value | truncate : 44 }}</span>
<span *ngIf="!compact">{{ value }}</span>
</a>
<span class="is-nowrap" *ngIf="!value"> - </span>`,
styleUrls: ['./link-yield.component.scss']
})
export class LinkYieldComponent {
@Input() value: string
@Input() compact: boolean = true
}
Loading

0 comments on commit 0b028ff

Please sign in to comment.