I'm trying to create a drop down control, where the user of the control knows the shape of the options/selected item and can display/style them appropraitely. I have some code that looks something like the following:
interface DropDownVM {
selected?: object;
options: object[];
}
interface MyPageVM {
animal: DropDownVM;
}
interface Animal {
name: string;
age: number;
species: string;
}
#customElement('drop-down')
export class DropDown extends LitElement {
#property() public vm: DropDownVM;
render() {
return html`<slot name="selected-template"></slot><slot name="options-template"></slot>`;
}
}
#customElement('my-page')
export class MyPage extends LitElement {
#property() public vm: MyPageVM;
render() {
return html`
<drop-down .vm=${this.animal}>
<!-- Something needs to go in here -->
</drop-down>
`;
}
}
Notes:
I cannot make the above interface generic.
I've only put in the code that I believe is relevant, I've cut out
all of the functionality from DropDown.
So my question is, how can I style and layout the selected and options without DropDown knowing the shape of Animal or whatever other model I use for DropDown in future. In addition, I don't want to map over options, I simply want to provide a template for laying out one option and DropDown do the rest. MyPage knows that its Animal so it makes sense for the layout/styling to be in there.
I have a feeling I should be using a <template> but I can't quite see the end target with the lit html templates involved.
Related
I have UpdateUserDto:
export class UpdateUserDto extends PartialType(CreateUserDto) {
}
CreateUserDto:
export class CreateUserDto {
#ValidateNested({ each: true })
#IsOptional()
Point: CreateUserPointDto;
}
CreateUserPointDto:
export class CreateUserPointDto{
#IsString()
name: string
#IsString()
color: string
}
Now partial type makes all properties of CreateUserDto optional, the problem is, it doesn't create all properties of Point that is inside CreateUserDto optional.
How do I go about solving this issue?
Also another unrelated problem, any validation to Point in UpdateUser only works with { PartialType } from '#nestjs/mapped-types'
If I use import { PartialType } from '#nestjs/swagger', For the same code it says Point.property name/color should not exist.
I'm sure you may have moved on from this, but here's something that may resolve the issue in case you come around in the future.
You need to use #Type from class-transformers to ensure you get the types for the nested Point attribute.
Sample code
import { Type } from 'class-transformer';
export class CreateUserDto {
#ValidateNested({ each: true })
#IsOptional()
#Type(() => CreateUserPointDto) // -> this line
Point: CreateUserPointDto;
}
I have an enum EEndpoints that maps to string addresses of local nodes. I want to create an interface/hard-coded object based off of this enum. This is my idea:
export enum EEndpoints
{
MY_REMOTE_NODE = "MY_REMOTE_NODE",
}
export interface EndpointAddresses
{
PublisherAddress: string,
RequestAddress: string,
}
export interface EndpointAddressList
{
for (key in EEndpoints)
{
[key] = EndpointAddresses;
}
}
In my code I would then be required to define a constant that implements EndpointAddressList:
const RemoteNodeEndpoints: EndpointAddressList =
{
MY_REMOTE_NODE: {
PublisherAddress: "tcp://127.0.0.1:3000",
RequestAddress: "tcp://127.0.0.1:3001",
},
}
Alternatively, it would also be nice to define an interface that itself implements EndpointAddressList, i.e:
interface ImplementedEndpointAddressList
{
MY_REMOTE_NODE: {
PublisherAddress: "tcp://127.0.0.1:3000",
RequestAddress: "tcp://127.0.0.1:3001",
},
}
I'm also open to feedback if using an enum as the basis for properties in an interface is an anti-pattern. However, it does seem like a useful tool for me to centrally define a set of hard-coded endpoints and then have compile time checks that I have configured the sub-properties of those endpoints.
let say there are different entity User, Role, Task
All these entities have createdBy, updatedBy, createdOn, updatedOn in common.
I want to know how can I create a base entity such that all entity extends base class in nest js using Typeform.
This is the place where should you use inheritance.
Basically, the idea is to have a base class/entity that gathers common logic or structure where many other classes/entities share that common logic.
For example:
Cat, Dog, Elephant are all having similar characterizations, so we might want to gather all these similar characterizations at a single place in order to avoid duplication of logic and code.
So let's see the simplest example only for basic understanding.
export class Animal {
protected numberOfLegs: number;
protected sound(): void;
}
export class Dog extends Animal {
constructor() {
super();
this.numberOfLegs = 4;
}
sound(): void {
console.log('BARK');
}
}
For your needs:
Export a base entity.
import { Entity, Column } from 'typeorm';
export class BaseEntity {
#Column()
createdBy: string;
#Column()
updatedBy: string;
#Column()
createdOn: Date;
#Column()
updatedOn: Date;
}
And then inherit it from derived entities.
import { Entity, Column } from 'typeorm';
import {BaseEntity} from './base-entity';
export class DerivedEntity extends BaseEntity {
#Column()
id: string;
...
}
Please read about inheritance which is a basic and very important principle in programming and OOP.
When generating an Entity (Configuration) containing an enumeration (Status), the Angular model looks like this :
const enum Status {
'DRAFT',
'DONE',
'ARCHIVED'
}
export class Configuration implements BaseEntity {
constructor(
public id?: number,
public json?: string,
public status?: EventConfigurationStatus,
) {
}
}
The problem is that the enum is not exported. Because I want to use the enum on its own, I add the export keyword. This is hard-coded in _entity.model.ts at line 86
Won't you think that having export by default would be better ?
Yes it makes sense.
Beside you use case, it would be also required for JHipster entity generator in order to generate compiling code if you had a Customer entity with a relationship with Configuration and using "otherEntityField": "status".
I tried one of the example given on the MaskedTextBox component page but while assigning the mask or rules on ngOnInit, it gives error :
Expression has changed after it was checked. Previous value:
'undefined'. Current value: '__ ___'
How to achieve changing mask property on the fly?
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template:
<kendo-maskedtextbox
name="value1"
[(ngModel)]="value"
[mask]="mask"></kendo-maskedtextbox>
})
export class AppComponent {
public value: string;
public mask: string;
public maskValidation: boolean = true;
ngOnInit(){
this.mask = "99 999";
}
}
Attached plunker:
Kendo Masked Text Box
This seems like a bug to me. You should definitely open an issue in the GitHub repository.