瀏覽代碼

modal pain!

master
Daniel 2 年之前
父節點
當前提交
70c2679a23
共有 6 個檔案被更改,包括 44 行新增11 行删除
  1. +1
    -1
      matsen-tool/src/app/_components/modal/modal.component.html
  2. +19
    -7
      matsen-tool/src/app/_components/modal/modal.component.ts
  3. +3
    -0
      matsen-tool/src/app/_interfaces/modalContent.ts
  4. +1
    -0
      matsen-tool/src/app/contacts/new-contact/new-contact.component.html
  5. +17
    -3
      matsen-tool/src/app/contacts/new-contact/new-contact.component.ts
  6. +3
    -0
      matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts

+ 1
- 1
matsen-tool/src/app/_components/modal/modal.component.html 查看文件

@@ -3,7 +3,7 @@
<button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"></button> <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<ng-container *ngComponentOutlet="dynamicComponent"></ng-container>
<ng-container *ngComponentOutlet="dynamicComponent; inputs: inputData"></ng-container>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button> <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>

+ 19
- 7
matsen-tool/src/app/_components/modal/modal.component.ts 查看文件

@@ -1,14 +1,26 @@
import {Component, Input} from '@angular/core';
import {Component, Input, OnInit} from '@angular/core';
import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap"; import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
import {ModalContent} from "@app/_interfaces/modalContent";


@Component({ @Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrl: './modal.component.scss'
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrl: './modal.component.scss',
}) })
export class ModalComponent {
@Input() dynamicComponent: any;
export class ModalComponent implements OnInit {
@Input() dynamicComponent: any;
@Input() inputData: any;


constructor(public activeModal: NgbActiveModal) { }
constructor(public activeModal: NgbActiveModal) {

}

ngOnInit(): void {

}

public static createInputData(inputData: any) {
return { 'inputData': inputData }
}


} }

+ 3
- 0
matsen-tool/src/app/_interfaces/modalContent.ts 查看文件

@@ -0,0 +1,3 @@
export interface ModalContent {
inputData: any;
}

+ 1
- 0
matsen-tool/src/app/contacts/new-contact/new-contact.component.html 查看文件

@@ -48,3 +48,4 @@
<button type="submit" class="btn btn-primary" [disabled]="contactForm.invalid">Abschicken</button> <button type="submit" class="btn btn-primary" [disabled]="contactForm.invalid">Abschicken</button>
</form> </form>
</div> </div>


+ 17
- 3
matsen-tool/src/app/contacts/new-contact/new-contact.component.ts 查看文件

@@ -1,21 +1,26 @@
import {Component} from '@angular/core';
import {Component, Input, OnInit} from '@angular/core';
import {FormGroup} from "@angular/forms"; import {FormGroup} from "@angular/forms";
import {contactForm} from "@app/_forms/apiForms"; import {contactForm} from "@app/_forms/apiForms";
import {ContactJsonld, ContactService} from "@app/core/api/v1"; import {ContactJsonld, ContactService} from "@app/core/api/v1";
import {Subscription} from "rxjs"; import {Subscription} from "rxjs";
import {ModalContent} from "@app/_interfaces/modalContent";



@Component({ @Component({
selector: 'app-new-contact', selector: 'app-new-contact',
templateUrl: './new-contact.component.html', templateUrl: './new-contact.component.html',
styleUrl: './new-contact.component.scss' styleUrl: './new-contact.component.scss'
}) })
export class NewContactComponent {
export class NewContactComponent implements ModalContent, OnInit {

@Input() public inputData: any;

protected contactForm: FormGroup; protected contactForm: FormGroup;
protected selectedImage: File | null; protected selectedImage: File | null;
protected contactSub: Subscription; protected contactSub: Subscription;


constructor( constructor(
private contactService: ContactService
private contactService: ContactService,
) { ) {
this.contactForm = contactForm; this.contactForm = contactForm;
this.selectedImage = null; this.selectedImage = null;
@@ -23,12 +28,21 @@ export class NewContactComponent {
this.contactSub = new Subscription(); this.contactSub = new Subscription();
} }


ngOnInit(): void {
console.log(this.inputData);
}


onSubmit() { onSubmit() {
//console.log(this.partnerId);
if (this.contactForm.valid) { if (this.contactForm.valid) {
// Hier können Sie die Daten senden oder weitere Aktionen durchführen // Hier können Sie die Daten senden oder weitere Aktionen durchführen
console.log(this.selectedImage); console.log(this.selectedImage);
console.log('Formular wurde gesendet:', this.contactForm.value); console.log('Formular wurde gesendet:', this.contactForm.value);


let newContact: ContactJsonld = this.contactForm.value as ContactJsonld;
newContact.postings = [];

this.contactSub = this.contactService.contactsPost( this.contactSub = this.contactService.contactsPost(
this.contactForm.value as ContactJsonld this.contactForm.value as ContactJsonld
).subscribe( ).subscribe(


+ 3
- 0
matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts 查看文件

@@ -11,6 +11,7 @@ import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/pagin
import {MatTableDataSource} from "@angular/material/table"; import {MatTableDataSource} from "@angular/material/table";
import {NewPostingComponent} from "@app/postings/new-posting/new-posting.component"; import {NewPostingComponent} from "@app/postings/new-posting/new-posting.component";
import {NewTaskComponent} from "@app/tasks/new-task/new-task.component"; import {NewTaskComponent} from "@app/tasks/new-task/new-task.component";
import {NewPartnerComponent} from "@app/partners/new-partner/new-partner.component";


@Component({ @Component({
selector: 'app-partners-detail', selector: 'app-partners-detail',
@@ -96,11 +97,13 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
openModalNewContact() { openModalNewContact() {
const modalRef = this.modalService.open(ModalComponent); const modalRef = this.modalService.open(ModalComponent);
modalRef.componentInstance.dynamicComponent = NewContactComponent; modalRef.componentInstance.dynamicComponent = NewContactComponent;
modalRef.componentInstance.inputData = ModalComponent.createInputData(this.partner.id);
} }


openModalNewPosting() { openModalNewPosting() {
const modalRef = this.modalService.open(ModalComponent); const modalRef = this.modalService.open(ModalComponent);
modalRef.componentInstance.dynamicComponent = NewPostingComponent; modalRef.componentInstance.dynamicComponent = NewPostingComponent;

} }


openModalNewTask() { openModalNewTask() {


Loading…
取消
儲存