Commit 6c305bb6 by Ooh-Ao

model datasource

parent 84f2e6fa
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Observable, Subject, from, mergeMap, of, switchMap, takeUntil, tap } from 'rxjs';
import { ComponentHostDirective } from '../directives/component-host.directive';
......@@ -13,7 +13,8 @@ import { Service, ServiceTypes } from '../components';
styleUrls: ['./services.component.scss'],
})
export class ServicesComponent implements OnInit {
@Input() id?: number;
@Output() valueChange: EventEmitter<Service> = new EventEmitter<Service>();
componentList: Service[] = [{
id: 0,
title: "11111",
......@@ -43,14 +44,36 @@ export class ServicesComponent implements OnInit {
destroy: Subject<void> = new Subject<void>();
ngOnInit(): void { // subscribing to the stream when component has been created
// this.getOne(this.id!).subscribe(result => {
// this.loadComponent(result)
// })
this.route.params
.pipe(
mergeMap(({ id }: Params) => this.getOne(id)),
mergeMap(({ id }: Params) => this.getOne(id! ? id : this.id)),
tap((service: Service) => this.loadComponent(service)),
takeUntil(this.destroy.asObservable()),
)
.subscribe();
}
ngOnChanges(changes: SimpleChanges): void {
console.log(changes)
if (changes) {
this.id = changes['id'].currentValue
this.getOne(this.id!).subscribe(result => {
this.loadComponent(result)
})
}
//Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
//Add '${implements OnChanges}' to the class.
}
loadComponent(service: Service): void {
......@@ -61,7 +84,9 @@ export class ServicesComponent implements OnInit {
const { instance } = viewContainerRef.createComponent<ServiceComponentType>(
servicesComponentFactory[service.id as ServiceTypes]
);
instance.model = service.title;
instance.model = service.dataModel;
this.valueChange.emit(service);
}
ngOnDestroy(): void {
......
<div id="loginform">
<div id="loginform" style="background-color: gray;">
<div class="position-relative overflow-hidden radial-gradient min-vh-100 w-100">
<div class="position-relative z-index-5" style="z-index: 5 !important;">
<div class="row">
<div class="col-xl-7 col-xxl-8" style="background-color: black;">
<!-- <a href="../main/index.html" class="text-nowrap logo-img d-block px-4 py-9 w-100">
<img src="assets/images/mylearn-logo.png" width="150px" class="dark-logo" alt="Logo-Dark">
<img src="assets/images/mylearn-logo.png" width="150px" class="light-logo" alt="Logo-light" style="display: none;">
</a> -->
<div class="d-none d-xl-flex align-items-center justify-content-center" style="height: calc(100vh - 80px);">
<!-- <img src="assets/images/background/login-register.jpg" alt="" class="img-fluid" width="100%"> -->
<div class="row justify-content-center align-items-center ">
<div class="col-xl-7 col-xxl-8">
<div class="card">
<app-services [id]="widjetId" (valueChange)="onValueChange($event)"></app-services>
</div>
</div>
<div class="col-xl-5 col-xxl-4">
......@@ -21,7 +17,7 @@
<form class="needs-validation" novalidate>
<div class="mb-3 position-relative">
<label for="exampleInputEmail1" class="form-label">เลือก Widget</label>
<input name="username" type="text" class="form-control" id="exampleInputEmail1"
<input [(ngModel)]="widjetId" name="username" type="text" class="form-control"
aria-describedby="emailHelp" required>
<div class="invalid-feedback">
Please enter a Username
......@@ -30,13 +26,13 @@
</div>
<div class="mb-4 position-relative">
<label for="exampleInputPassword1" class="form-label">Datasource</label>
<input name="username" type="text" class="form-control" id="exampleInputEmail1"
<input [(ngModel)]="dataSoure" name="datasource" type="text" class="form-control"
aria-describedby="emailHelp" required>
<div class="invalid-feedback">
Please enter a Username
</div>
</div>
<div class="alert alert-danger" style="word-break: break-all;">Model</div>
<div class="alert alert-danger" style="word-break: break-all;">{{model?.dataModel}}</div>
<button type="submit" class="btn btn-primary w-100 py-8 mb-4 rounded-2">Save</button>
<button type="submit" class="btn btn-success w-100 py-8 mb-4 rounded-2">Preview</button>
</form>
......
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { ServicesComponent } from '../services/services.component';
import { FormsModule } from '@angular/forms';
import { Service } from '../components';
@Component({
selector: 'app-setting-widget',
standalone: true,
imports: [CommonModule],
imports: [CommonModule, ServicesComponent, FormsModule],
templateUrl: './setting-widget.component.html',
styleUrls: ['./setting-widget.component.css']
})
export class SettingWidgetComponent implements OnInit {
model = {
username : "",
password : ""
}
model?: Service
widjetId = 0
dataSoure: string = "";
constructor() { }
ngOnInit() {
}
onValueChange(value: Service) {
console.log("value",value)
this.model = value
this.dataSoure = this.model.dataSoure
}
}
......@@ -88,7 +88,3 @@ $success: #7952b3;
//
// Custom styles
//
body {
padding: 1.5rem;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment