fuzi_fauzia/hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

penambahan list icon

Browse Source
This commit is contained in:
Fuzi_fauzia
2024-06-21 14:25:14 +07:00
parent b9012f5544
commit 1ebe1acc12
15 changed files with 1456 additions and 775 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1432
src/app/_layout/settings/menu-settings.config.ts
View File

File diff suppressed because it is too large Load Diff

4
src/app/content/hemat-app/component/select-icon/select-icon.component.css Normal file
View File

@@ -0,0 +1,4 @@
:host ::ng-deep .ng-select .ng-select-container {
color: #ffffff !important;
background-color: #252525 !important;
}

11
src/app/content/hemat-app/component/select-icon/select-icon.component.html Normal file
View File

@@ -0,0 +1,11 @@
<ng-select
[items]="icons"
bindLabel="name"
(change)="onSelect($event)"
bindValue="icon"
placeholder="Select an icon"
>
<ng-template ng-option-tmp let-item="item">
<i [ngClass]="item.icon"></i> {{ item.name }}
</ng-template>
</ng-select>

23
src/app/content/hemat-app/component/select-icon/select-icon.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SelectIconComponent } from './select-icon.component';
describe('SelectIconComponent', () => {
let component: SelectIconComponent;
let fixture: ComponentFixture<SelectIconComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ SelectIconComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(SelectIconComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

25
src/app/content/hemat-app/component/select-icon/select-icon.component.ts Normal file
View File

@@ -0,0 +1,25 @@
import { Component, EventEmitter, Output } from "@angular/core";
import { MasterService } from "../../service/master-api.service";
interface Icon {
name: string;
icon: string;
}
@Component({
selector: "app-select-icon",
templateUrl: "./select-icon.component.html",
styleUrls: ["./select-icon.component.css"],
})
export class SelectIconComponent {
@Output() iconSelected: EventEmitter<string> = new EventEmitter<string>();
icons: any[] = [];
constructor(private masterService: MasterService) {}
ngOnInit(): void {
this.masterService.getIconData().subscribe((res) => {
this.icons = res.rows;
});
}
onSelect(icon: Icon): void {
this.iconSelected.emit(icon.icon);
}
}

15
src/app/content/hemat-app/component/select-icon/select-icon.module.ts Normal file
View File

@@ -0,0 +1,15 @@
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { SelectIconComponent } from "./select-icon.component";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { NgSelectModule } from "@ng-select/ng-select";
import { FormsModule } from "@angular/forms";
@NgModule({
declarations: [SelectIconComponent],
imports: [CommonModule, NgbModule, NgSelectModule, FormsModule],
exports: [
SelectIconComponent
]
})
export class SelectIconModule {}

2
src/app/content/hemat-app/device/device-control/device-control.component.html
View File

@@ -112,7 +112,7 @@
"
>
<i
class="icon-bulb font-large-1 blue-grey d-block"
class="ri-lightbulb-flash-fill font-large-1 blue-grey d-block"
style="color: #bef264 !important"
></i>
</div>

5
src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html
View File

@@ -16,6 +16,11 @@
formControlName="name"
/>
</div>
<div class="form-group col-md-6">
<label for="status" style="color: #ffffff">Icon:</label>
<app-select-icon (iconSelected)="onIconSelected($event)"></app-select-icon>
</div>
<div class="form-group col-md-6">
<label for="status" style="color: #ffffff">Status:</label>
<select

6
src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.ts
View File

@@ -14,6 +14,7 @@ export class AddEditMasterComponent implements OnInit {
@Input() mode: any;
myForm: FormGroup;
dataMasterStatus: any;
selectedIcon: string = '';
constructor(
public activeModal: NgbActiveModal,
@@ -67,4 +68,9 @@ export class AddEditMasterComponent implements OnInit {
alert(`Department ${newDept} added! (simulated)`);
}
}
onIconSelected(icon: string): void {
this.selectedIcon = icon;
this.myForm.get('selectedIcon').setValue(icon); // Set nilai selectedIcon ke dalam form
}
}

114
src/app/content/hemat-app/master/master.module.ts
View File

@@ -1,34 +1,34 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MasterCategoryComponent } from './master-category/master-category.component';
import { MasterTypeComponent } from './master-type/master-type.component';
import { RouterModule } from '@angular/router';
import { ChartistModule } from 'ng-chartist';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgChartsModule } from 'ng2-charts';
import { BlockUIModule } from 'ng-block-ui';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component';
import { CardModule } from '../../partials/general/card/card.module';
import { MatchHeightModule } from '../../partials/general/match-height/match-height.module';
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
import { MasterStatusComponent } from './master-status/master-status.component';
import { MasterDurationUseComponent } from './master-duration-use/master-duration-use.component';
import { MasterUserComponent } from './master-user/master-user.component';
import { MasterRoleComponent } from './master-role/master-role.component';
import { AddEditMasterComponent } from './add-edit-master/add-edit-master.component';
import { MasterVoltageComponent } from './master-voltage/master-voltage.component';
import { MasterFloorComponent } from './master-floor/master-floor.component';
import { MasterRoomComponent } from './master-room/master-room.component';
import { MasterBuildingComponent } from './master-building/master-building.component';
import { AddEditMasterBuildingComponent } from './master-building/add-edit-master-building/add-edit-master-building.component';
import { AddEditMasterRoomComponent } from './master-room/add-edit-master-room/add-edit-master-room.component';
import { ToastrModule } from 'ngx-toastr';
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { MasterCategoryComponent } from "./master-category/master-category.component";
import { MasterTypeComponent } from "./master-type/master-type.component";
import { RouterModule } from "@angular/router";
import { ChartistModule } from "ng-chartist";
import { NgxDatatableModule } from "@swimlane/ngx-datatable";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { NgChartsModule } from "ng2-charts";
import { BlockUIModule } from "ng-block-ui";
import { PerfectScrollbarModule } from "ngx-perfect-scrollbar";
import { BlockTemplateComponent } from "src/app/_layout/blockui/block-template.component";
import { CardModule } from "../../partials/general/card/card.module";
import { MatchHeightModule } from "../../partials/general/match-height/match-height.module";
import { BreadcrumbModule } from "src/app/_layout/breadcrumb/breadcrumb.module";
import { MasterStatusComponent } from "./master-status/master-status.component";
import { MasterDurationUseComponent } from "./master-duration-use/master-duration-use.component";
import { MasterUserComponent } from "./master-user/master-user.component";
import { MasterRoleComponent } from "./master-role/master-role.component";
import { AddEditMasterComponent } from "./add-edit-master/add-edit-master.component";
import { MasterVoltageComponent } from "./master-voltage/master-voltage.component";
import { MasterFloorComponent } from "./master-floor/master-floor.component";
import { MasterRoomComponent } from "./master-room/master-room.component";
import { MasterBuildingComponent } from "./master-building/master-building.component";
import { AddEditMasterBuildingComponent } from "./master-building/add-edit-master-building/add-edit-master-building.component";
import { AddEditMasterRoomComponent } from "./master-room/add-edit-master-room/add-edit-master-room.component";
import { ToastrModule } from "ngx-toastr";
import { SelectIconModule } from "../component/select-icon/select-icon.module";
import { NgSelectModule } from "@ng-select/ng-select";
@NgModule({
declarations: [
@@ -44,7 +44,7 @@ import { ToastrModule } from 'ngx-toastr';
MasterRoomComponent,
MasterBuildingComponent,
AddEditMasterBuildingComponent,
AddEditMasterRoomComponent
AddEditMasterRoomComponent,
],
imports: [
CommonModule,
@@ -57,53 +57,55 @@ import { ToastrModule } from 'ngx-toastr';
PerfectScrollbarModule,
BreadcrumbModule,
ReactiveFormsModule,
SelectIconModule,
NgSelectModule,
ToastrModule.forRoot(),
NgbModule,
BlockUIModule.forRoot({
template: BlockTemplateComponent
template: BlockTemplateComponent,
}),
RouterModule.forChild([
{
path: 'master-category',
component: MasterCategoryComponent
path: "master-category",
component: MasterCategoryComponent,
},
{
path: 'master-floor',
component: MasterFloorComponent
path: "master-floor",
component: MasterFloorComponent,
},
{
path: 'master-voltage',
component: MasterVoltageComponent
path: "master-voltage",
component: MasterVoltageComponent,
},
{
path: 'master-type',
component: MasterTypeComponent
path: "master-type",
component: MasterTypeComponent,
},
{
path: 'master-status',
component: MasterStatusComponent
path: "master-status",
component: MasterStatusComponent,
},
{
path: 'master-duration-use',
component: MasterDurationUseComponent
path: "master-duration-use",
component: MasterDurationUseComponent,
},
{
path: 'master-user',
component: MasterUserComponent
path: "master-user",
component: MasterUserComponent,
},
{
path: 'master-role',
component: MasterRoleComponent
path: "master-role",
component: MasterRoleComponent,
},
{
path: 'master-room',
component: MasterRoomComponent
path: "master-room",
component: MasterRoomComponent,
},
{
path: 'master-building',
component: MasterBuildingComponent
}
])
]
path: "master-building",
component: MasterBuildingComponent,
},
]),
],
})
export class MasterModule { }
export class MasterModule {}

14
src/app/content/hemat-app/service/master-api.service.ts
View File

@@ -1,12 +1,18 @@
import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from "rxjs";
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@Injectable({
providedIn: "root",
})
export class MasterService {
constructor(private http: HttpClient) {}
loadDataIcon = null;
apiBaseURL = 'assets/data';
constructor(private http: HttpClient) {
this.loadDataIcon = `${this.apiBaseURL}/hemat/remixicons.json`;
}
getMasterListData(): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/header-param/list`;
@@ -132,4 +138,8 @@ export class MasterService {
});
return this.http.get<any>(url, { headers });
}
getIconData(): Observable<any> {
return this.http.get(this.loadDataIcon, httpOptions);
}
}