Skip to content

M
Meu-Template-Angular-CSR
Commit 8e94c634 authored by vtduong0912's avatar vtduong0912
Browse files
Options

tinyMCE added

parent 9fd6656f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 173 additions and 357 deletions
angular.json
View file @ 8e94c634
......@@ -25,6 +25,7 @@
"inlineStyleLanguage": "scss",
"assets": [
"src/assets",
{ "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" },
{
"glob": "**/*",
"input": "src/assets/",
......@@ -38,7 +39,9 @@
}
],
"styles": ["src/styles.scss"],
"scripts": []
"scripts": [
"node_modules/tinymce/tinymce.min.js"
]
},
"configurations": {
"production": {
......
package-lock.json
View file @ 8e94c634
This diff is collapsed.
src/app/+admin/management/job/feature/job-form.component.ts
View file @ 8e94c634
......@@ -8,16 +8,21 @@ import { JobApi } from '../data-access/model/job-manager.model';
import { NzNotificationService } from 'ng-zorro-antd/notification'
import { catchError, of, tap } from 'rxjs';
import { NzFormModule } from 'ng-zorro-antd/form';
import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular'
import { CommonModule } from '@angular/common';
@Component({
selector: 'job-form',
standalone: true,
imports: [
CommonModule,
NzButtonModule,
NzModalModule,
ReactiveFormsModule,
NzFormModule
NzFormModule,
EditorComponent,
],
providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }],
template: `
<div class="tw-w-full tw-grid tw-justify-items-end">
<button nz-button nzType="primary" (click)="isCreate = true">Create new job</button>
......@@ -29,8 +34,7 @@ import { NzFormModule } from 'ng-zorro-antd/form';
<div>
<label>Type</label>
<select class="tw-border tw-rounded-lg tw-w-full tw-h-8" formControlName="type">
<option value="Full Time">Full Time</option>
<option value="Part Time">Part Time</option>
<option *ngFor="let item of jobTypeItems" (value)="item"> {{ item }} </option>
</select>
</div>
<div class="tw-col-span-2">
......@@ -78,7 +82,7 @@ import { NzFormModule } from 'ng-zorro-antd/form';
<nz-form-item>
<nz-form-control nzErrorTip="Please enter description!">
<nz-input-group>
<textarea class="tw-border tw-rounded-lg tw-w-full tw-h-40" type="text" formControlName="description"></textarea>
<editor apiKey="4nrurq8srrs4laamy5l9tbrd2je0huj4bu3z3mweu864gkfj" [init]="init" formControlName="description"></editor>
</nz-input-group>
</nz-form-control>
</nz-form-item>
......@@ -122,9 +126,9 @@ import { NzFormModule } from 'ng-zorro-antd/form';
export class JobFormComponent {
@Output() ReloadData = new EventEmitter();
isCreate: boolean = false;
jobCreatingFormGroup: FormGroup;
jobTypeItems = ['Full Time', 'Part Time'];
constructor(private _fb: FormBuilder,
private _service: JobManagerService,
......@@ -142,6 +146,10 @@ export class JobFormComponent {
});
}
init: EditorComponent['init'] = {
plugins: 'lists link image table code help wordcount'
};
createNotification(type: string, title: string, message: string): void {
this._notification.create(
type,
......
src/app/+admin/management/job/feature/job-list.component.ts
View file @ 8e94c634
......@@ -3,7 +3,7 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout';
import { NzTableModule } from 'ng-zorro-antd/table';
import { CommonModule } from '@angular/common';
import { JobManagerService } from '../data-access/service/job-manager.service';
import { Observable, Observer, catchError, of, tap } from 'rxjs';
import { catchError, of, tap } from 'rxjs';
import { ResponseResult, Rows } from '../../../../shared/data-access/interface/response.type';
import { JobApi } from '../data-access/model/job-manager.model';
import { NzButtonModule } from 'ng-zorro-antd/button';
......@@ -13,7 +13,8 @@ import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators }
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzNotificationService } from 'ng-zorro-antd/notification';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzUploadFile, NzUploadModule } from 'ng-zorro-antd/upload';
import { NzUploadModule } from 'ng-zorro-antd/upload';
import { EditorComponent } from '@tinymce/tinymce-angular';
@Component({
selector: 'job-list',
......@@ -30,6 +31,7 @@ import { NzUploadFile, NzUploadModule } from 'ng-zorro-antd/upload';
NzIconModule,
FormsModule,
NzUploadModule,
EditorComponent,
],
styles: `
nz-table[_ngcontent-jjj-c198] nz-pagination[_ngcontent-jjj-c198] {
......@@ -49,8 +51,7 @@ import { NzUploadFile, NzUploadModule } from 'ng-zorro-antd/upload';
<div>
<label>Type</label>
<select class="tw-border tw-rounded-lg tw-w-full tw-h-8" formControlName="type">
<option value="Full Time">Full Time</option>
<option value="Part Time">Part Time</option>
<option *ngFor="let item of jobTypeItems" (value)="item">{{ item }}</option>
</select>
</div>
<div class="tw-col-span-2">
......@@ -98,7 +99,7 @@ import { NzUploadFile, NzUploadModule } from 'ng-zorro-antd/upload';
<nz-form-item>
<nz-form-control nzErrorTip="Please enter description!">
<nz-input-group>
<textarea id=myTextarea class="tw-border tw-rounded-lg tw-w-full tw-h-40" type="text" formControlName="description"></textarea>
<editor apiKey="4nrurq8srrs4laamy5l9tbrd2je0huj4bu3z3mweu864gkfj" [init]="init" formControlName="description"></editor>
</nz-input-group>
</nz-form-control>
</nz-form-item>
......@@ -249,6 +250,10 @@ export class JobListComponent implements OnInit {
}
init: EditorComponent['init'] = {
plugins: 'lists link image table code help wordcount'
};
createNotification(type: string, title: string, message: string) {
this._notification.create(
type,
......
src/app/+shell/ui/components/footer/feature/footer.component.html
View file @ 8e94c634
......@@ -2,27 +2,15 @@
<div class="tw-w-full tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3">
<div>
<p class="tw-text-lg tw-font-semibold">Text</p>
<p>Text text text</p>
<p>Text text text</p>
<p>Text text text</p>
<p>Text text text</p>
<p>Text text text</p>
<p *ngFor="let item of [0, 1, 2, 3, 4, 5]">Text text text</p>
</div>
<div>
<p class="tw-text-lg tw-font-semibold">Text</p>
<p>Text text text</p>
<p>Text text text</p>
<p>Text text text</p>
<p>Text text text</p>
<p>Text text text</p>
<p *ngFor="let item of [0, 1, 2, 3, 4, 5, 6]">Text text text</p>
</div>
<div>
<p class="tw-text-lg tw-font-semibold">Text</p>
<p>Text text text</p>
<p>Text text text</p>
<p>Text text text</p>
<p>Text text text</p>
<p>Text text text</p>
<p *ngFor="let item of [0, 1, 2, 3, 4, 5]">Text text text</p>
</div>
<div class="tw-col-span-full tw-text-center tw-pt-6">
<p class="tw-opacity-50">2024 Copyright ... Angular</p>
......
yarn.lock
View file @ 8e94c634
This diff is collapsed.
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