spawntree
/
matsen-tool-fe
2
0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
ソースを参照

toggle

master
Florian Eisenmenger 1年前
親
42d874b46c
コミット
48c96d86db
10個のファイルの変更、229行の追加、145行の削除
分割表示
差分オプション
統計情報を表示 Patchファイルをダウンロード Diffファイルをダウンロード
  1. +24
    -4
      matsen-tool/package-lock.json
  2. +2
    -0
      matsen-tool/package.json
  3. +9
    -0
      matsen-tool/src/app/_components/toggle/toggle.component.html
  4. +0
    -0
      matsen-tool/src/app/_components/toggle/toggle.component.scss
  5. +23
    -0
      matsen-tool/src/app/_components/toggle/toggle.component.spec.ts
  6. +16
    -0
      matsen-tool/src/app/_components/toggle/toggle.component.ts
  7. +3
    -1
      matsen-tool/src/app/app.module.ts
  8. +144
    -140
      matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
  9. +4
    -0
      matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts
  10. +4
    -0
      matsen-tool/src/assets/scss/_basics.scss

+ 24
- 4
matsen-tool/package-lock.json ファイルの表示

@@ -27,6 +27,7 @@
"bootstrap-icons": "^1.11.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"uuid": "^9.0.1",
"zone.js": "~0.14.2"
},
"devDependencies": {
@@ -35,6 +36,7 @@
"@angular/compiler-cli": "^17.0.0",
"@openapitools/openapi-generator-cli": "^2.7.0",
"@types/jasmine": "~5.1.0",
"@types/uuid": "^9.0.8",
"@verizonconnect/ngx-form-generator": "^1.2.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
@@ -4829,6 +4831,12 @@
"@types/node": "*"
}
},
"node_modules/@types/uuid": {
"version": "9.0.8",
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
"integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
"dev": true
},
"node_modules/@types/ws": {
"version": "8.5.10",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
@@ -13036,6 +13044,15 @@
"websocket-driver": "^0.7.4"
}
},
"node_modules/sockjs/node_modules/uuid": {
"version": "8.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
"dev": true,
"bin": {
"uuid": "dist/bin/uuid"
}
},
"node_modules/socks": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz",
@@ -13919,10 +13936,13 @@
}
},
"node_modules/uuid": {
"version": "8.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
"dev": true,
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
"funding": [
"https://github.com/sponsors/broofa",
"https://github.com/sponsors/ctavan"
],
"bin": {
"uuid": "dist/bin/uuid"
}


+ 2
- 0
matsen-tool/package.json ファイルの表示

@@ -30,6 +30,7 @@
"bootstrap-icons": "^1.11.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"uuid": "^9.0.1",
"zone.js": "~0.14.2"
},
"devDependencies": {
@@ -38,6 +39,7 @@
"@angular/compiler-cli": "^17.0.0",
"@openapitools/openapi-generator-cli": "^2.7.0",
"@types/jasmine": "~5.1.0",
"@types/uuid": "^9.0.8",
"@verizonconnect/ngx-form-generator": "^1.2.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",


+ 9
- 0
matsen-tool/src/app/_components/toggle/toggle.component.html ファイルの表示

@@ -0,0 +1,9 @@
<div class="toggle-component">
<div class="toggle" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse-' + toggleId"
aria-expanded="false">
<h2>{{ headline }}</h2>
</div>
<div class="collapse" id="collapse-{{ toggleId }}">
<ng-content></ng-content>
</div>
</div>

+ 0
- 0
matsen-tool/src/app/_components/toggle/toggle.component.scss ファイルの表示


+ 23
- 0
matsen-tool/src/app/_components/toggle/toggle.component.spec.ts ファイルの表示

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { ToggleComponent } from './toggle.component';

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

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ToggleComponent]
})
.compileComponents();
fixture = TestBed.createComponent(ToggleComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});

+ 16
- 0
matsen-tool/src/app/_components/toggle/toggle.component.ts ファイルの表示

@@ -0,0 +1,16 @@
import {Component, Input} from '@angular/core';
import { v4 as uuidv4 } from 'uuid';
import {ContactJsonld} from "@app/core/api/v1";
@Component({
selector: 'app-toggle',
templateUrl: './toggle.component.html',
styleUrl: './toggle.component.scss'
})
export class ToggleComponent {
@Input() public headline!: string;

protected toggleId: string;
constructor() {
this.toggleId = uuidv4();
}
}

+ 3
- 1
matsen-tool/src/app/app.module.ts ファイルの表示

@@ -46,6 +46,7 @@ import { DocumentsDetailComponent } from './documents/documents-detail/documents
import { SalesComponent } from './sales/sales.component';
import { SalesDetailComponent } from './sales/sales-detail/sales-detail.component';
import { NewSaleComponent } from './sales/new-sale/new-sale.component';
import { ToggleComponent } from './_components/toggle/toggle.component';

export function apiConfigFactory(): Configuration {
const params: ConfigurationParameters = {
@@ -112,7 +113,8 @@ export function HttpLoaderFactory(http: HttpClient) {
DocumentsDetailComponent,
SalesComponent,
SalesDetailComponent,
NewSaleComponent
NewSaleComponent,
ToggleComponent
],
providers: [
{provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},


+ 144
- 140
matsen-tool/src/app/partners/partners-detail/partners-detail.component.html ファイルの表示

@@ -46,170 +46,174 @@
</div>
</div>
</div>
<div class="spt-container">
<div class="contacts">
<div class="d-flex justify-content-between align-items-start">
<h2>{{ 'basic.contacts' | translate }}</h2>
<button class="btn btn-primary" (click)="openModalNewContact()">{{ 'basic.new-contact' | translate }}
</button>
</div>
<div class="row">
<div class="col-4" *ngFor="let contact of contacts">
<div class="card">
<div class="card-body row">
<div class="col-8">
<h2>{{ contact.firstName }} {{ contact.lastName }}</h2>
<p><a href="mailto:{{contact.email}}">{{ contact.email }}</a><br/>
{{ contact.phone }}<br/>
{{ contact.position }}</p>
</div>
<div class="col-4">
<img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined"
ngSrc="{{contact.imageUrl}}" width="247" height="94"
alt="{{contact.firstName}} {{contact.lastName}}"
title="{{contact.firstName}} {{contact.lastName}}"/>
<app-toggle #toggleContacts [headline]="'basic.contacts' | translate">
<div class="spt-container">
<div class="contacts">
<div class="d-flex justify-content-end align-items-start mb-3 toggle-btn">
<button class="btn btn-primary" (click)="openModalNewContact()">{{ 'basic.new-contact' | translate }}
</button>
</div>
<div class="row">
<div class="col-4" *ngFor="let contact of contacts">
<div class="card">
<div class="card-body row">
<div class="col-8">
<h2>{{ contact.firstName }} {{ contact.lastName }}</h2>
<p><a href="mailto:{{contact.email}}">{{ contact.email }}</a><br/>
{{ contact.phone }}<br/>
{{ contact.position }}</p>
</div>
<div class="col-4">
<img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined"
ngSrc="{{contact.imageUrl}}" width="247" height="94"
alt="{{contact.firstName}} {{contact.lastName}}"
title="{{contact.firstName}} {{contact.lastName}}"/>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-end mt-1 mb-4">
<span role="button" (click)="navigateToContactDetails(contact)"
class="badge bg-secondary p-2">{{ 'basic.details' | translate }}</span>
<div class="d-flex justify-content-end mt-1 mb-4">
<span role="button" (click)="navigateToContactDetails(contact)"
class="badge bg-secondary p-2">{{ 'basic.details' | translate }}</span>
</div>
</div>
</div>
<mat-paginator *ngIf="contacts.length > 0" class="rounded-1"
[pageSizeOptions]="[6,12,18]"
[length]="contactsLength"
(page)="contactsHandlePageEvent($event)"
[pageSize]="contactsPageSize"
[pageIndex]="contactsPageIndex"
showFirstLastButtons>
</mat-paginator>
</div>
<mat-paginator *ngIf="contacts.length > 0" class="rounded-1"
[pageSizeOptions]="[6,12,18]"
[length]="contactsLength"
(page)="contactsHandlePageEvent($event)"
[pageSize]="contactsPageSize"
[pageIndex]="contactsPageIndex"
showFirstLastButtons>
</mat-paginator>
</div>
</div>
<div class="spt-container">
<div class="spt-accordion">
<div class="d-flex justify-content-between align-items-start">
<h2>{{ 'basic.tasks' | translate }}</h2>
<button class="btn btn-primary" (click)="openModalNewTask()">{{ 'basic.new-task' | translate }}</button>
</div>
<div class="tasks mb-3" *ngFor="let task of tasks">
<div class="card p-3">
<div class="position-relative" data-bs-toggle="collapse"
[attr.data-bs-target]="'#collapse-' + ApiConverter.extractId(task.id)"
aria-expanded="false"
aria-controls="collapseExample">
<h3 class="m-0">{{ task.partnerName }}</h3>
<span class="info d-flex position-absolute">
<span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
<span class="importance" [attr.data-importance]="task.prio"></span>
</span>
<h2 class="m-0">{{ task.headline }}</h2>
</div>
<div class="collapse" id="collapse-{{ApiConverter.extractId(task.id)}}">
<div class="pt-3 pe-5 position-relative">
<p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(task.description)"></p>
<p>Zugewiesen an: {{ task.assignedToName }}</p>
<span *ngIf="task.createdBy === user?.id" class="position-absolute bi bi-pencil p-2"
data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
</div>
</div>
</app-toggle>

<app-toggle #toggleTasks [headline]="'basic.tasks' | translate">
<div class="spt-container">
<div class="spt-accordion">
<div class="d-flex justify-content-end align-items-start mb-3 toggle-btn">
<button class="btn btn-primary" (click)="openModalNewTask()">{{ 'basic.new-task' | translate }}</button>
</div>
<div *ngIf="task.id && taskNotesVisibility.get(task.id)">
<div class="card ms-5" *ngFor="let taskNote of task.taskNotes">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>{{ taskNote.createdAt | date:'dd.MM.YYYY' }}</p>
<p>{{ taskNote.ownerName }}</p>
<div class="tasks mb-3" *ngFor="let task of tasks">
<div class="card p-3">
<div class="position-relative" data-bs-toggle="collapse"
[attr.data-bs-target]="'#collapse-' + ApiConverter.extractId(task.id)"
aria-expanded="false"
aria-controls="collapseExample">
<h3 class="m-0">{{ task.partnerName }}</h3>
<span class="info d-flex position-absolute">
<span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
<span class="importance" [attr.data-importance]="task.prio"></span>
</span>
<h2 class="m-0">{{ task.headline }}</h2>
</div>
<div class="collapse" id="collapse-{{ApiConverter.extractId(task.id)}}">
<div class="pt-3 pe-5 position-relative">
<p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(task.description)"></p>
<p>Zugewiesen an: {{ task.assignedToName }}</p>
<span *ngIf="task.createdBy === user?.id" class="position-absolute bi bi-pencil p-2"
data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
</div>
<div>
<p>{{ taskNote.message }}</p>
</div>
</div>
<div *ngIf="task.id && taskNotesVisibility.get(task.id)">
<div class="card ms-5" *ngFor="let taskNote of task.taskNotes">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>{{ taskNote.createdAt | date:'dd.MM.YYYY' }}</p>
<p>{{ taskNote.ownerName }}</p>
</div>
<div>
<p>{{ taskNote.message }}</p>
</div>
<span *ngIf="taskNote.owner === user?.id" class="position-absolute bi bi-pencil p-2"
data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span>
</div>
<span *ngIf="taskNote.owner === user?.id" class="position-absolute bi bi-pencil p-2"
data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span>
</div>
</div>
</div>

<div class="d-flex justify-content-end mt-1">
<span *ngIf="task.taskNotes?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
(click)="showTaskNotes(task)">
<ng-container
*ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
<ng-container
*ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}</ng-container>
</span>
<span role="button" class="badge bg-secondary p-2"
(click)="openModalNewTaskNote(task)">{{ 'basic.comment-it' | translate }}</span>
<div class="d-flex justify-content-end mt-1">
<span *ngIf="task.taskNotes?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
(click)="showTaskNotes(task)">
<ng-container
*ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
<ng-container
*ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}</ng-container>
</span>
<span role="button" class="badge bg-secondary p-2"
(click)="openModalNewTaskNote(task)">{{ 'basic.comment-it' | translate }}</span>
</div>
</div>
<mat-paginator *ngIf="tasks.length > 0" class="rounded-1"
[pageSizeOptions]="[10,20,30]"
[length]="tasksLength"
(page)="tasksHandlePageEvent($event)"
[pageSize]="tasksPageSize"
[pageIndex]="tasksPageIndex"
showFirstLastButtons>
</mat-paginator>
</div>
<mat-paginator *ngIf="tasks.length > 0" class="rounded-1"
[pageSizeOptions]="[10,20,30]"
[length]="tasksLength"
(page)="tasksHandlePageEvent($event)"
[pageSize]="tasksPageSize"
[pageIndex]="tasksPageIndex"
showFirstLastButtons>
</mat-paginator>
</div>
</div>
<div class="spt-container">
<div class="posts">
<div class="d-flex justify-content-between align-items-start">
<h2>{{ 'basic.posts' | translate }}</h2>
<button class="btn btn-primary" (click)="openModalNewPosting()">{{ 'basic.new-post' | translate }}</button>
</div>
<div class="post mb-3" *ngFor="let post of posts">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p>
<p>{{ post.ownerName }}</p>
</div>
<div>
<h3>{{ post.headline }}</h3>
<p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(post.message)"></p>
</div>
<span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2"
data-type="user-tool"
data-action="edit" (click)="openModalEditPosting(post)"></span>
</div>
</app-toggle>
<app-toggle #togglePosts [headline]="'basic.posts' | translate">
<div class="spt-container">
<div class="posts">
<div class="d-flex justify-content-end align-items-start mb-3 toggle-btn">
<button class="btn btn-primary" (click)="openModalNewPosting()">{{ 'basic.new-post' | translate }}</button>
</div>
<div *ngIf="post.id && commentsVisibility.get(post.id)">
<div class="card ms-5" *ngFor="let comment of post.comments">
<div class="post mb-3" *ngFor="let post of posts">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p>
<p>{{ comment.ownerName }}</p>
<p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p>
<p>{{ post.ownerName }}</p>
</div>
<div>
<p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(comment.message)"></p>
<h3>{{ post.headline }}</h3>
<p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(post.message)"></p>
</div>
<span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2"
data-type="user-tool"
data-action="edit" (click)="openModalEditPosting(post)"></span>
</div>
</div>
<div *ngIf="post.id && commentsVisibility.get(post.id)">
<div class="card ms-5" *ngFor="let comment of post.comments">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p>
<p>{{ comment.ownerName }}</p>
</div>
<div>
<p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(comment.message)"></p>
</div>
<span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2"
data-type="user-tool" data-action="edit" (click)="openModalEditComment(comment)"></span>
</div>
<span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2"
data-type="user-tool" data-action="edit" (click)="openModalEditComment(comment)"></span>
</div>
</div>
</div>

<div class="d-flex justify-content-end mt-1">
<span *ngIf="post.comments?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
(click)="showComments(post)">
<ng-container
*ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
<ng-container
*ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
</span>
<span role="button" class="badge bg-secondary p-2"
(click)="openModalNewComment(post)">{{ 'basic.comment-it' | translate }}</span>
<div class="d-flex justify-content-end mt-1">
<span *ngIf="post.comments?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
(click)="showComments(post)">
<ng-container
*ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
<ng-container
*ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
</span>
<span role="button" class="badge bg-secondary p-2"
(click)="openModalNewComment(post)">{{ 'basic.comment-it' | translate }}</span>
</div>
</div>
<mat-paginator *ngIf="posts.length > 0" class="rounded-1"
[pageSizeOptions]="[10,20,30]"
[length]="postsLength"
(page)="postsHandlePageEvent($event)"
[pageSize]="postsPageSize"
[pageIndex]="postsPageIndex"
showFirstLastButtons>
</mat-paginator>
</div>
<mat-paginator *ngIf="posts.length > 0" class="rounded-1"
[pageSizeOptions]="[10,20,30]"
[length]="postsLength"
(page)="postsHandlePageEvent($event)"
[pageSize]="postsPageSize"
[pageIndex]="postsPageIndex"
showFirstLastButtons>
</mat-paginator>
</div>
</div>
</app-toggle>

+ 4
- 0
matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts ファイルの表示

@@ -24,6 +24,7 @@ import {User} from "@app/_models";
import {NewCommentComponent} from "@app/postings/new-comment/new-comment.component";
import {NewPartnerComponent} from "@app/partners/new-partner/new-partner.component";
import {NewTaskNoteComponent} from "@app/tasks/new-task-note/new-task-note.component";
import {ToggleComponent} from "@app/_components/toggle/toggle.component";

@Component({
selector: 'app-partners-detail',
@@ -31,6 +32,9 @@ import {NewTaskNoteComponent} from "@app/tasks/new-task-note/new-task-note.compo
styleUrl: './partners-detail.component.scss'
})
export class PartnersDetailComponent implements OnInit, AfterViewInit {
@ViewChild("toggleContacts", { static: true }) toggleContacts: ToggleComponent = new ToggleComponent();
@ViewChild("toggleTasks", { static: true }) toggleTasks: ToggleComponent = new ToggleComponent();
@ViewChild("togglePosts", { static: true }) togglePosts: ToggleComponent = new ToggleComponent();
@ViewChild(MatPaginator) contactsPaginator: MatPaginator;
@ViewChild(MatPaginator) tasksPaginator: MatPaginator;
@ViewChild(MatPaginator) postsPaginator: MatPaginator;


+ 4
- 0
matsen-tool/src/assets/scss/_basics.scss ファイルの表示

@@ -56,4 +56,8 @@ img {
height: 120px;
width: 100%;
}
}

.toggle-btn {
margin-top: -3.25rem;
}

書き込み プレビュー
読み込み中…
キャンセル
保存