unictive-angular 1.0.28 → 1.0.29

package/bin/utils/resource/src/app/core/models/entities/screen.entity.spec.ts

@@ -0,0 +1,41 @@
+import { RepoScreen } from '@core/respository/screen_repo/screen.repo';
+import { ScreenEntity, Screen_m } from './screen.entity';
+import { provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+
+describe('ScreenEntity', () => {
+    let repo: RepoScreen;
+
+    const mockScreen: Screen_m = {
+        timestamp: Date.now(),
+        type: 'test',
+        id: 123,
+        name: 'Mock Screen',
+        mode: 'demo',
+        time: 60000
+
+    };
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [HttpClientTestingModule],
+            providers: [provideZonelessChangeDetection()]
+        }).compileComponents();
+
+        repo = TestBed.inject(RepoScreen);
+    });
+
+    it('should set and get screen', () => {
+        repo.setData(mockScreen);
+        expect(repo.getData.value).toEqual(mockScreen);
+    });
+
+    it('should update state when entity is set again', () => {
+        const newMock: Screen_m = { ...mockScreen, id: 456, name: 'New Mock' };
+        repo.setData(newMock);
+        expect(repo.getData.value?.id).toBe(456);
+        expect(repo.getData.value?.name).toBe('New Mock');
+    });
+});

package/bin/utils/resource/src/app/core/models/entities/screen.entity.ts

@@ -0,0 +1,16 @@
+// import { entityStoreFactory } from "@core/config/entity-store";
+import { singleStoreFactory } from "@core/config/single-store";
+
+
+
+export interface Screen_m {
+    timestamp: number;
+    type: string;
+    id: number;
+    name: string;
+    mode: string;
+    time: number;
+}
+
+
+export const ScreenEntity = singleStoreFactory<Screen_m>();

package/bin/utils/resource/src/app/core/respositories/screen_repo/screen.repo.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { ScreenEntity } from '@core/models/entities/screen.entity';
+import { logger } from '@shared/utils/logger';
+
+@Injectable({ providedIn: 'root' })
+export class RepoScreen {
+
+
+    constructor() { }
+
+    setData(screen: any) {
+        ScreenEntity.set(screen);
+    }
+
+    get getData() {
+        return ScreenEntity.state();
+    }
+}

package/bin/utils/resource/src/app/core/services/helper.service.ts

@@ -0,0 +1,238 @@
+import { computed, Injectable, signal } from '@angular/core';
+import { StorageMap } from '@ngx-pwa/local-storage';
+import { ListenerService } from './listener.service';
+import { lastValueFrom } from 'rxjs';
+import { Router } from '@angular/router';
+import Swal from 'sweetalert2';
+import { ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';
+
+export interface Popup_m {
+  type:
+  | 'delete'
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'confirm'
+  | 'suspend'
+  | 'change'
+  | 'send'
+  | 'restore';
+  icon?: string;
+  title: string;
+  message: string;
+  button: string;
+  button_cancel?: string;
+  showCancel?: boolean;
+}
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HelperService {
+
+  private width = signal(window.innerWidth);
+  screenWidth = this.width.asReadonly();
+
+  constructor(
+    private storage: StorageMap,
+    private listener: ListenerService,
+    private router: Router
+  ) {
+    window.addEventListener('resize', () => {
+      this.width.set(window.innerWidth);
+    });
+  }
+
+  screenSize = computed<'mobile' | 'tablet' | 'desktop'>(() => {
+    const w = this.width();
+    if (w < 768) return 'mobile';
+    if (w < 1024) return 'tablet';
+    return 'desktop';
+  });
+
+
+  getTimeInZone(timeZone: any) {
+    const options: any = {
+      timeZone: timeZone,
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false,
+    };
+    const date = new Date();
+    const formatter = new Intl.DateTimeFormat('en-US', options);
+    const parts = formatter.formatToParts(date);
+    const dateParts: any = {};
+    parts.forEach((part) => {
+      if (part.type !== 'literal') {
+        dateParts[part.type] = part.value;
+      }
+    });
+
+    return `${dateParts.year}-${dateParts.month}-${dateParts.day} ${dateParts.hour}:${dateParts.minute}:${dateParts.second}`;
+  }
+
+  //Fix time global
+  getTimeNow() {
+    // Waktu di zona waktu Indonesia Barat (WIB)
+    const waktuWIB = this.getTimeInZone('Asia/Jakarta');
+
+    //console.log(waktuWIB);
+
+    // Waktu di zona waktu Indonesia Tengah (WITA)
+    const waktuWITA = this.getTimeInZone('Asia/Makassar');
+    //console.log('Waktu WITA (Asia/Makassar):', waktuWITA);
+
+    // Waktu di zona waktu Indonesia Timur (WIT)
+    const waktuWIT = this.getTimeInZone('Asia/Jayapura');
+    //console.log('Waktu WIT (Asia/Jayapura):', waktuWIT);
+
+    return new Date(waktuWIB);
+  }
+
+  /**
+   * Realtime screen size detection
+   * cara menggunakan isMobile(), isTablet(), isDesktop()
+   */
+  isMobile = computed(() => this.screenSize() === 'mobile');
+  isTablet = computed(() => this.screenSize() === 'tablet');
+  isDesktop = computed(() => this.screenSize() === 'desktop');
+
+  /**
+   * Download file from Blob data.
+   * @param data - Blob data of the file.
+   * @param filename - Name of the file to be downloaded.
+   */
+  //MARK: DOWNLOAD FILE
+  downloadFile(data: any, filename: string) {
+    const url = window.URL.createObjectURL(data);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    window.URL.revokeObjectURL(url);
+  }
+
+  //MARK: STORAGE
+  setStorage(key: string, value: any) {
+    return lastValueFrom(this.storage.set(key, value));
+  }
+
+  getStorage(key: string) {
+    return lastValueFrom(this.storage.get(key));
+  }
+
+  removeStorage(key: string) {
+    return lastValueFrom(this.storage.delete(key));
+  }
+
+  /**
+ * Menampilkan file dalam tab baru atau sebagai iframe.
+ * @param file - File atau URL string yang akan ditampilkan.
+ */
+  //MARK: SHOW FILE
+  showFile(file: File | string) {
+    if (typeof file === 'string') {
+      const newTab = window.open(file, '_blank');
+      if (!newTab) {
+        this.showPopup('error', 'Maaf', 'Unable to open file.');
+      }
+    } else {
+      let reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = (e) => {
+        if (e.target?.result) {
+          const newTab = window.open();
+          if (newTab) {
+            newTab.document.body.innerHTML = `<iframe src="${e.target.result}" style="width:100%; height:100%;" frameborder="0"></iframe>`;
+          }
+        }
+      };
+    }
+  }
+
+  async showLoading(message?: any) {
+    return await this.listener.$loading.set({ load: true, message: message });
+  }
+
+  dismissLoading() {
+    this.listener.$loading.set({ load: false, message: null });
+  }
+
+  routerLink(link: string) {
+    this.router.navigateByUrl(link);
+  }
+
+  //--------------------------- POP UP-------------------------//
+  showPopup(icon: any, title: any, msg: any, timer: boolean = false) {
+    Swal.fire({
+      title: title,
+      html: msg,
+      timer: timer ? 3000 : 0,
+      icon: icon,
+      allowOutsideClick: false,
+      heightAuto: false,
+      allowEscapeKey: false,
+    });
+  }
+
+  dismissPopup() {
+    Swal.close();
+  }
+
+  async confirmationAlert(data: Popup_m): Promise<boolean> {
+    switch (data.type) {
+      case 'delete':
+        data.icon = 'icon-delete.svg';
+        break;
+      case 'success':
+        data.icon = 'icon-success.svg';
+        break;
+      case 'confirm':
+        data.icon = 'icon-confirm.svg';
+        break;
+      case 'suspend':
+        data.icon = 'icon-suspend.svg';
+        break;
+      case 'change':
+        data.icon = 'icon-edit.svg';
+        break;
+      case 'send':
+        data.icon = 'icon-send.png';
+        break;
+      case 'restore':
+        data.icon = 'icon-restore.png';
+        break;
+      default:
+        break;
+    }
+
+    return Swal.fire({
+      html: `
+      <h4 class="text-[18px] lg:text-[24px] mb-[16px] text-[#272727]">${data.title}</h4>
+      <div class="!text-[#272727] text-[16px] leading-[1.2]">${data.message}</div>
+    `,
+
+      showCancelButton: data?.showCancel ?? true,
+      confirmButtonText: data.button,
+      cancelButtonText: data?.button_cancel ? data.button_cancel : 'Batal',
+      reverseButtons: true,
+      confirmButtonColor: data.type == 'delete' ? '#D12114' : '#0072B9',
+      customClass: {
+        cancelButton: 'custom-cancel-button',
+      },
+    }).then((result) => result.isConfirmed);
+  }
+
+
+
+
+
+
+
+}

package/bin/utils/resource/src/app/core/services/listener.service.ts

@@ -0,0 +1,15 @@
+import { Injectable, signal } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ListenerService {
+
+  $loading: any = signal<{ load: boolean; message?: any }>({
+    load: false,
+    message: null,
+  });
+
+  constructor() { }
+
+}

package/bin/utils/resource/src/app/shared/libs/library.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { InputTextComponent } from '@shared/ui/input-text/input-text.component';
+
+@NgModule({
+  imports: [
+    ReactiveFormsModule,
+    FormsModule,
+    InputTextComponent
+  ],
+  exports: [ReactiveFormsModule, FormsModule, InputTextComponent],
+})
+export class LibraryModule { }

package/bin/utils/resource/src/app/shared/ui/input-text/input-text.component.ts

@@ -0,0 +1,64 @@
+import { Component, forwardRef, input, Input, OnInit } from '@angular/core';
+import { ControlValueAccessor, FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { AlertErrorInputComponent } from '@shared/widgets/alert-error-input/alert-error-input.component';
+
+@Component({
+  selector: 'input-text',
+  styleUrls: ['./input-text.component.scss'],
+  standalone: true,
+  imports: [ReactiveFormsModule, FormsModule, AlertErrorInputComponent],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => InputTextComponent),
+      multi: true,
+    },
+  ],
+  template: `
+  <input (ngModelChange)="onValueChange($event)" [(ngModel)]="value" type="email"
+          class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          [placeholder]="placeholder()" />
+          <alert-error [control]="control" [label]="label()"></alert-error>
+          `
+})
+export class InputTextComponent implements ControlValueAccessor, OnInit {
+
+  @Input() control!: FormControl | any;
+  placeholder = input('Enter your email'); //default
+  label = input('label'); //default
+
+  value: any;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  writeValue(value: any): void {
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  hasError(error: string): boolean | null {
+    // console.log(this.control.errors);
+    return (
+      this.control?.hasError(error) &&
+      (this.control?.touched || this.control?.dirty)
+    );
+  }
+
+  onValueChange(value: any) {
+    this.onChange(value);
+  }
+
+  // Fungsi yang akan dipanggil ketika nilai diubah
+  onChange: (date: any) => void = () => { };
+  onTouched: () => void = () => { };
+
+}

package/bin/utils/resource/src/app/shared/utils/validator_pattern.ts

@@ -0,0 +1,25 @@
+import { ValidatorFn, AbstractControl, ValidationErrors } from "@angular/forms";
+
+function emailPatternValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+        const value = control.value;
+        if (!value) return null;
+
+        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+        return emailRegex.test(value) ? null : { invalidEmailPattern: true };
+    };
+}
+
+function linkPatternValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+        const value = control.value;
+        if (!value) return null;
+
+        const regex =
+            /^https:\/\/([\da-z.-]+)\.([a-z.]{2,6})([\/\w .-]*)*\/?(\?.*)?$/;
+        return regex.test(value) ? null : { invalidLinkPattern: true };
+    };
+}
+
+export { emailPatternValidator, linkPatternValidator };
+

package/bin/utils/resource/src/app/shared/widgets/alert-error-input/alert-error-input.component.html

@@ -0,0 +1,94 @@
+@if (hasError('required')) {
+<small class="text-[#EB5757]">
+  <div class="w-full my-2 bg-red-100 rounded-[4px] px-[12px] py-[4px]">
+    {{label}} diperlukan
+  </div>
+</small>
+}
+
+@if (hasError('invalidLinkPattern')) {
+<small class="text-[#eb5757]">
+  Format {{label}} salah!, Contoh: https://gmeet.google.com/
+</small>
+}
+
+@if (hasError('invalidEmailPattern')) {
+<small class="text-[#eb5757]">
+  Format {{label}} salah!
+</small>
+}
+
+
+@if (hasError('dateRange')) {
+<small class="text-[#eb5757]">
+  {{control?.errors['dateRange']}}
+</small>
+}
+
+@if (hasError('totalPriceExceed')) {
+<small class="text-[#eb5757]">
+  Total tidak boleh lebih besar dari Total Negosiasi
+</small>
+}
+
+@if (hasError('minlength')) {
+<small class="text-[#eb5757]">
+  {{label}} Minimal {{ control?.errors?.minlength?.requiredLength }}
+  Error
+</small>
+}
+
+@if (hasError('maxlength')) {
+<small class="text-[#eb5757]">
+  <div class="w-full my-2 bg-red-100 rounded-[4px] px-[12px] py-[4px]">
+    {{label}} Maksimal {{ control?.errors?.maxlength?.requiredLength }}
+    Karakter
+  </div>
+</small>
+}
+
+@if (hasError('min')) {
+<small class="text-[#eb5757]">
+  <div class="w-full my-2 bg-red-100 rounded-[4px] px-[12px] py-[4px]">
+    {{label}} Minimal {{ control?.errors?.min?.min }}
+  </div>
+</small>
+}
+
+@if (hasError('max')) {
+<small class="text-[#eb5757]">
+  <div class="w-full my-2 bg-red-100 rounded-[4px] px-[12px] py-[4px]">
+    {{label}} Maksimal {{ control?.errors?.max?.max }}
+  </div>
+</small>
+}
+
+@if (hasError('mismatch')) {
+<small class="text-[#eb5757]">
+  tidak sama
+</small>
+}
+
+@if (hasError('passwordSameAsCurrent')) {
+<small class="text-[#eb5757]">
+  <div class="w-full my-2 bg-red-100 rounded-[4px] px-[12px] py-[4px]">
+    Password baru tidak boleh sama dengan password lama
+  </div>
+</small>
+}
+
+@if (hasError('passwordMismatch')) {
+<small class="text-[#eb5757]">
+  <div class="w-full my-2 bg-red-100 rounded-[4px] px-[12px] py-[4px]">
+    Password baru dan konfirmasi password baru tidak sama
+  </div>
+</small>
+}
+
+@if (hasError('strongPassword')) {
+<small class="text-[#eb5757]">
+  <div class="w-full my-2 bg-red-100 rounded-[4px] px-[12px] py-[4px]">
+    Password harus mengandung minimal 8 karakter, huruf besar, huruf kecil, angka, dan karakter spesial.
+  </div>
+</small>
+}

package/bin/utils/resource/src/app/shared/widgets/alert-error-input/alert-error-input.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'alert-error',
+  templateUrl: './alert-error-input.component.html',
+  standalone: true,
+})
+export class AlertErrorInputComponent implements OnInit {
+  @Input() control!: FormControl | any;
+  @Input() label!: string;
+  @Input() secondLabel!: string;
+  constructor() { }
+
+  ngOnInit() { }
+
+  hasError(error: string): boolean {
+    //console.log(error, this.control.errors);
+    return (
+      this.control?.hasError(error) &&
+      (this.control?.touched || this.control?.dirty)
+    );
+  }
+}

package/bin/utils/resource/src/app/shared/widgets/widget_game/widget_game.component.html

@@ -0,0 +1,20 @@
+<div class="fixed inset-0 bgs z-50 flex items-center justify-center">
+  <div class="absolute transition-all duration-100 ease-in-out transform hover:scale-110"
+    style="padding: 50px; box-sizing: content-box;"
+    [ngStyle]="{ top: boxPosition.top, left: boxPosition.left, position: 'absolute' }" (mouseenter)="onMouseEnterBox()">
+
+    <div (click)="onLogout()"
+      class=" w-40 h-20 bg-black text-white flex items-center text-center justify-center cursor-pointer rounded-xl  shadow-lg">
+      Tangkap
+    </div>
+  </div>
+
+  <div class="absolute top-5 right-5 text-white text-xl space-y-2 text-right bg-amber-900 p-2 rounded-2xl">
+    <div>Waktu: {{ timer }} detik</div>
+    <div>Skor: {{ score }}</div>
+  </div>
+
+  <div *ngIf="gameEnded" class="absolute bottom-10 text-white text-2xl font-bold">
+    Permainan Selesai! Skor akhir: {{ score }}
+  </div>
+</div>

package/bin/utils/resource/src/app/shared/widgets/widget_game/widget_game.component.ts

@@ -0,0 +1,65 @@
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-widget_game',
+  templateUrl: './widget_game.component.html',
+  styleUrls: ['./widget_game.component.scss'],
+  standalone: false
+})
+export class Widget_gameComponent implements OnInit {
+
+  boxPosition = { top: '50%', left: '50%' };
+  gameStarted = false;
+  gameEnded = false;
+  timer = 60;
+  score = 0;
+  intervalId: any;
+  constructor(
+    private cdr: ChangeDetectorRef
+  ) { }
+
+  ngOnInit() {
+    this.startGame();
+  }
+  startGame() {
+    this.gameStarted = true;
+    this.timer = 60;
+    this.score = 0;
+    this.gameEnded = false;
+    this.moveBoxRandomly();
+
+    this.intervalId = setInterval(() => {
+      this.timer--;
+      if (this.timer <= 0) {
+        clearInterval(this.intervalId);
+        this.gameEnded = true;
+      }
+      this.cdr.detectChanges();
+    }, 1000);
+  }
+
+  onMouseEnterBox() {
+    if (!this.gameEnded) {
+      this.score++;
+      this.moveBoxRandomly();
+      // this.cdr.detectChanges();
+
+    }
+  }
+
+  moveBoxRandomly() {
+    const top = Math.random() * 90;
+    const left = Math.random() * 90;
+    this.boxPosition = {
+      top: `${top}%`,
+      left: `${left}%`,
+    };
+    this.cdr.detectChanges();
+
+  }
+
+  onLogout() {
+    // this.auth.onLogout();
+  }
+
+}

package/bin/utils/resource/src/app/shared/widgets/widget_game/widget_game.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Widget_gameComponent } from './widget_game.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  exports: [Widget_gameComponent],
+  declarations: [Widget_gameComponent]
+})
+export class Widget_gameModule { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unictive-angular",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "CLI untuk membuat project Angular dengan struktur kustom (Modules, Core, API, Shared).",
   "scripts": {
     "build": "npm version patch && npm publish --access public"