spiderly 0.0.8 → 19.0.1

package/src/lib/services/helper-functions.ts

@@ -0,0 +1,288 @@
+import { Action, Column } from "../components/spiderly-data-table/spiderly-data-table.component";
+import { HttpResponse } from "@angular/common/http";
+import { BaseEntity } from "../entities/base-entity";
+import { SpiderlyFormGroup } from "../components/spiderly-form-control/spiderly-form-control";
+import { map, Observable } from 'rxjs';
+import * as FileSaver from 'file-saver';
+import { TableFilter } from "../entities/table-filter";
+import { Namebook } from "../entities/namebook";
+import { Codebook } from "../entities/codebook";
+import { PrimengOption } from "../entities/primeng-option";
+import { SpiderlyTab } from "../components/spiderly-panels/panel-header/panel-header.component";
+
+// Helper function for PrecisionScale validation (to be added in the TypeScript output):
+export function validatePrecisionScale(value: any, precision: number, scale: number, ignoreTrailingZeros: boolean): boolean {
+    if (typeof value !== 'number') return false;
+    const [integerPart, decimalPart] = value.toString().split('.');
+    if (integerPart.length > precision - scale) return false;
+    if (decimalPart && decimalPart.length > scale) return false;
+    if (!ignoreTrailingZeros && decimalPart && decimalPart.replace(/0+$/, '').length > scale) return false;
+    return true;
+}
+
+export function getMimeTypeForFileName(fileName: string): string {
+    const mimeTypes: { [key: string]: string } = {
+        '.jpg': 'image/jpeg',
+        '.jpeg': 'image/jpeg',
+        '.png': 'image/png',
+        '.webp': 'image/webp',
+        '.gif': 'image/gif',
+        '.pdf': 'application/pdf',
+        '.txt': 'text/plain',
+        '.html': 'text/html',
+        '.css': 'text/css',
+        '.js': 'application/javascript',
+        '.json': 'application/json',
+        '.csv': 'text/csv',
+        '.xml': 'application/xml',
+        '.zip': 'application/zip',
+        '.mp4': 'video/mp4',
+        '.mp3': 'audio/mpeg',
+        '.wav': 'audio/wav',
+        '.avi': 'video/x-msvideo',
+        '.doc': 'application/msword',
+        '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        '.xls': 'application/vnd.ms-excel',
+        '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        // Add more as needed
+    };
+
+    const extension = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
+    return mimeTypes[extension] || 'application/octet-stream'; // 'application/octet-stream' is a generic binary type
+}
+
+export function adjustColor(color: string, percent: number): string {
+    if (!/^#([0-9A-F]{3}){1,2}$/i.test(color)) {
+        console.error('Invalid hex color format');
+    }
+
+    let r: number, g: number, b: number;
+    if (color.length === 7) {
+        r = parseInt(color.slice(1, 3), 16);
+        g = parseInt(color.slice(3, 5), 16);
+        b = parseInt(color.slice(5, 7), 16);
+    } else {
+        r = parseInt(color[1] + color[1], 16);
+        g = parseInt(color[2] + color[2], 16);
+        b = parseInt(color[3] + color[3], 16);
+    }
+
+    const adjust = (value: number, percent: number): number => {
+        const amount = (percent / 100) * 255;
+        const newValue = Math.min(Math.max(value + amount, 0), 255);
+        return Math.round(newValue);
+    };
+
+    r = adjust(r, percent);
+    g = adjust(g, percent);
+    b = adjust(b, percent);
+
+    const toHex = (value: number): string => {
+        const hex = value.toString(16).padStart(2, '0');
+        return hex;
+    };
+
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+export function getHtmlImgDisplayString64(base64String: string){
+    if (base64String == null)
+        return null;
+
+    const [header, base64Content] = base64String.split(';base64,');
+    const fileName = header.split('=')[1];
+    const mimeType = getMimeTypeForFileName(fileName);
+    return `data:${mimeType};base64, ${base64Content}`;
+}
+
+export function nameof<TObject>(obj: TObject, key: keyof TObject): string;
+export function nameof<TObject>(key: keyof TObject): string;
+export function nameof(key1: any, key2?: any): any {
+  return key2 ?? key1;
+}
+export function nameOf<TObject extends {name:S}, S extends string>(funcOrClass: TObject): S {
+    return funcOrClass.name;
+}
+
+export function getParentUrl(currentUrl: string){
+    const urlSegments = currentUrl.split('/');
+    urlSegments.pop();
+    const parentUrl = urlSegments.join('/');
+    return parentUrl;
+}
+
+export function capitalizeFirstLetter(inputString: string): string {
+    return inputString.charAt(0).toUpperCase() + inputString.slice(1);
+  }
+
+  // export function getMonth(number: number): string {
+  //   const months: string[] = [
+  //     "January", "February", "March", "April", "May", "June",
+  //     "July", "August", "September", "October", "November", "December"
+  //   ];
+    
+  //   if (number < 1 || number > 12) {
+  //     throw new Error("Invalid month number. It should be between 1 and 12.");
+  //   }
+    
+  //   return months[number - 1];
+  // }
+
+  export function getMonth(numberOfTheMonth: number): string {
+    const meseci: string[] = [
+      "Januar", "Februar", "Mart", "April", "Maj", "Jun",
+      "Jul", "Avgust", "Septembar", "Oktobar", "Novembar", "Decembar"
+    ];
+    
+    if (numberOfTheMonth < 1 || numberOfTheMonth > 12) {
+      console.error("Nevažeći broj meseca. Broj treba biti između 1 i 12.");
+    }
+    
+    return meseci[numberOfTheMonth - 1];
+  }
+
+  export function singleOrDefault <T>(array: T[], predicate: (item: T) => boolean): T | undefined {
+    const filtered = array.filter(predicate);
+    if (filtered.length > 1) {
+      throw new Error("Sequence contains more than one matching element.");
+    }
+    return filtered[0];
+  };
+
+  export function pushAction(cols: Column[], action: Action){
+    const actionsColumn = singleOrDefault(cols, x => x.actions != null);
+    if (actionsColumn) {
+        actionsColumn.actions = [...actionsColumn.actions, action];
+    }
+  }
+
+  export function deleteAction(cols: Column[], actionField: string): void {
+    const actionsColumn = singleOrDefault(cols, x => x.actions != null);
+
+    if (actionsColumn && actionsColumn.actions) {
+      const index = actionsColumn.actions.findIndex(a => a.field === actionField);
+      if (index !== -1) {
+        actionsColumn.actions.splice(index, 1);
+      }
+    }
+  }
+
+  export function getFileNameFromContentDisposition(
+    resp: HttpResponse<Blob>,
+    defaultName: string
+  ): string {
+    let fileName;
+    if (resp && resp.headers && resp.headers.get('Content-Disposition')) {
+      let val = resp.headers.get('Content-Disposition');
+      let start = val.indexOf('filename=');
+      if (start != -1) {
+        let end = val.indexOf(';', start);
+        fileName =
+          end != -1 ? val.substring(start + 9, end) : val.substring(start + 9);
+        fileName = fileName.split('"').join('');
+      }
+    }
+    return fileName ?? defaultName;
+  }
+
+  export const getControl = <T extends BaseEntity>(formControlName: string & keyof T, formGroup: SpiderlyFormGroup<T>) => {
+      if (formGroup == null)
+        return null; // FT: When we initialized form group again this will happen
+  
+      if(formGroup.controlNamesFromHtml.findIndex(x => x === formControlName) === -1)
+        formGroup.controlNamesFromHtml.push(formControlName);
+  
+      let formControl = formGroup.controls[formControlName];
+      if (formControl == null) {
+        console.error(`FT: The property ${formControlName} in the form group ${formGroup.getRawValue().typeName} doesn't exist`);
+        return null;
+      }
+    
+      return formControl;
+  }
+
+  export function toCommaSeparatedString<T>(input: T[]): string {
+    const stringList = input.map(item => (item?.toString() ?? ''));
+
+    if (stringList.length > 1) {
+        return `${stringList.slice(0, -1).join(', ')} and ${stringList[stringList.length - 1]}`;
+    } else {
+        return stringList[0] ?? '';
+    }
+  }
+
+  export function isImageFileType(mimeType: string): boolean {
+    if (mimeType.startsWith('image/')) {
+        return true;
+    }
+
+    return false;
+  }
+
+  export function isExcelFileType(mimeType: string): boolean {
+      if (mimeType === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+          mimeType === 'application/vnd.ms-excel'
+      ) {
+          return true;
+      }
+
+      return false;
+  }
+
+  export function exportListToExcel(exportTableDataToExcelObservableMethod: (tableFilter: TableFilter) => Observable<any>, tableFilter: TableFilter) {
+    exportTableDataToExcelObservableMethod(tableFilter).subscribe(res => {
+        let fileName = getFileNameFromContentDisposition(res, "ExcelExport.xlsx");
+        FileSaver.saveAs(res.body, decodeURIComponent(fileName));
+    });
+  }
+
+  export function getPrimengDropdownNamebookOptions(getDropdownListObservable: (parentEntityId?: number) => Observable<Namebook[]>, parentEntityId?: number): Observable<PrimengOption[]>{
+      return getDropdownListObservable(parentEntityId ?? 0).pipe(
+          map(res => {
+              return res.map(x => ({ label: x.displayName, code: x.id }));
+          })
+      );
+  }
+
+  export function getPrimengDropdownCodebookOptions(getDropdownListObservable: () => Observable<Codebook[]>): Observable<PrimengOption[]>{
+      return getDropdownListObservable().pipe(
+          map(res => {
+              return res.map(x => ({ label: x.displayName, code: x.code }));
+          })
+      );
+  }
+
+  export function getPrimengAutocompleteNamebookOptions(getAutocompleteListObservable: (limit: number, query: string, parentEntityId?: number) => Observable<Namebook[]>, limit: number, query: string, parentEntityId?: number): Observable<PrimengOption[]>{
+      return getAutocompleteListObservable(limit, query, parentEntityId ?? 0).pipe(
+          map(res => {
+              return res.map(x => ({ label: x.displayName, code: x.id }));
+          })
+      );
+  }
+
+  export function getPrimengAutocompleteCodebookOptions(getAutocompleteListObservable: (limit: number, query: string) => Observable<Codebook[]>, limit: number, query: string): Observable<PrimengOption[]>{
+      return getAutocompleteListObservable(limit, query).pipe(
+          map(res => {
+              return res.map(x => ({ label: x.displayName, code: x.code }));
+          })
+      );
+  }
+
+  export const isNullOrEmpty = (input: string) => {
+    if(input == null || input === ''){
+      return true;
+    }
+    
+    return false;
+  }
+
+  export const selectedTab = (tabs: SpiderlyTab[]): number => {
+    const tab = singleOrDefault(tabs, x => x.isSelected);
+
+    if (tab) {
+      return tab.id;
+    }
+    else{
+      return null;
+    }
+  }

package/src/lib/services/spiderly-message.service.ts

@@ -0,0 +1,66 @@
+import { TranslocoService } from '@jsverse/transloco';
+import { Injectable, NgZone } from '@angular/core';
+import { MessageService } from 'primeng/api';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SpiderlyMessageService { // TODO FT: nece da prikaze poruku ako je neki angular error koji se dogodi tek nakon api poziva
+  constructor(
+    private messageService: MessageService, 
+    private translocoService: TranslocoService,
+    private ngZone: NgZone
+  ) {
+    
+  }
+
+  successMessage(detail: string, title: string = this.translocoService.translate('SuccessfulAction')) {
+    this.messageService.add({
+      severity: 'success',
+      summary: title,
+      detail: detail,
+      life: 10000,
+    });
+  }
+
+  warningMessage(detail: string, title?: string, sticky?: boolean){
+    this.messageService.add({
+      severity: 'warn',
+      summary: title ?? this.translocoService.translate('Warning'),
+      detail: detail,
+      life: 10000,
+      sticky: sticky
+    });
+  }
+
+  warningMessageWithTimeout(detail: string, title: string = this.translocoService.translate('Warning')){
+    setTimeout(() => {
+      this.messageService.add({
+        severity: 'warn',
+        summary: title,
+        detail: detail,
+        life: 10000,
+      });
+    }, 100);
+  }
+
+  errorMessage(detail: string, title: string = this.translocoService.translate('Error')){
+    this.messageService.add({
+      severity: 'error',
+      summary: title,
+      detail: detail,
+      life: 10000,
+    });
+  }
+
+  infoMessage(detail: string, title?: string, sticky?: boolean){
+    this.messageService.add({
+      severity: 'info',
+      summary: title ?? this.translocoService.translate('Info'),
+      detail: detail,
+      life: 10000,
+      sticky: sticky,
+    });
+  }
+  
+}

package/src/lib/services/spiderly-transloco-loader.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { TranslocoLoader } from '@jsverse/transloco';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({ 
+  providedIn: 'root' 
+})
+export class SpiderlyTranslocoLoader implements TranslocoLoader {
+  constructor(private http: HttpClient) {}
+
+  getTranslation(lang: string) {
+    return this.http.get(`./assets/i18n/${lang}.json`);
+  }
+
+}

package/src/lib/services/translate-labels-abstract.service.ts

@@ -0,0 +1,13 @@
+import { Injectable } from "@angular/core";
+
+@Injectable({
+    providedIn: 'root',
+})
+export abstract class TranslateLabelsAbstractService {
+
+    constructor(
+    ) {
+    }
+
+    abstract translate (name: string): string;
+}

package/src/lib/services/validator-abstract.service.ts

@@ -0,0 +1,63 @@
+import { TranslocoService } from '@jsverse/transloco';
+import { Injectable } from "@angular/core";
+import { SpiderlyFormArray, SpiderlyFormControl, SpiderlyValidatorFn } from "../components/spiderly-form-control/spiderly-form-control";
+import { ValidationErrors } from "@angular/forms";
+
+@Injectable({
+    providedIn: 'root',
+})
+export abstract class ValidatorAbstractService {
+
+    constructor(
+        protected translocoService: TranslocoService
+    ) {
+    }
+
+    abstract setValidator (formControl: SpiderlyFormControl, className: string): SpiderlyValidatorFn;
+
+    isArrayEmpty = (control: SpiderlyFormControl): SpiderlyValidatorFn => {
+        const validator: SpiderlyValidatorFn = (): ValidationErrors | null => {
+            const value = control.value;
+    
+            const notEmptyRule = typeof value !== 'undefined' && value !== null && value.length !== 0;
+    
+            const arrayValid = notEmptyRule;
+    
+            return arrayValid ? null : { _ : this.translocoService.translate('NotEmpty')};
+        };
+        validator.hasNotEmptyRule = true;
+        control.required = true;
+        return validator;
+    }
+
+    notEmpty = (control: SpiderlyFormControl): void => {
+        const validator: SpiderlyValidatorFn = (): ValidationErrors | null => {
+            const value = control.value;
+    
+            const notEmptyRule = typeof value !== 'undefined' && value !== null && value !== '';
+    
+            const arrayValid = notEmptyRule;
+    
+            return arrayValid ? null : { _ : this.translocoService.translate('NotEmpty')};
+        };
+        validator.hasNotEmptyRule = true;
+        control.required = true;
+        control.validator = validator;
+        control.updateValueAndValidity();
+    }
+    
+    isFormArrayEmpty = (control: SpiderlyFormArray): SpiderlyValidatorFn => {
+        const validator: SpiderlyValidatorFn = (): ValidationErrors | null => {
+            const value = control;
+    
+            const notEmptyRule = typeof value !== 'undefined' && value !== null && value.length !== 0;
+    
+            const arrayValid = notEmptyRule;
+    
+            return arrayValid ? null : { _ : this.translocoService.translate('NotEmpty')};
+        };
+        validator.hasNotEmptyRule = true;
+        control.required = true;
+        return validator;
+    }
+}

package/{styles → src/lib}/styles/layout/_config.scss

@@ -4,8 +4,8 @@
     width: 3rem;
     height: 3rem;
     line-height: 3rem;
-    background: var(--primary-color);
-    color: var(--primary-color-text);
+    background: var(--p-primary-color);
+    color: var(--p-primary-color-text);
     text-align: center;
     top: 50%;
     right: 0;

package/{styles → src/lib}/styles/layout/_content.scss

@@ -1,3 +1,5 @@
+@use './_variables' as *;
+
 .layout-main-container {
     display: flex;
     flex-direction: column;

package/{styles → src/lib}/styles/layout/_footer.scss

@@ -1,3 +1,5 @@
+@use './_variables' as *;
+
 .layout-footer {
     transition: margin-left $transitionDuration;
     display: flex;

package/{styles → src/lib}/styles/layout/_main.scss

@@ -1,3 +1,5 @@
+@use './_variables' as *;
+
 * {
     box-sizing: border-box;
 }
@@ -5,12 +7,13 @@
 html {
     height: 100%;
     font-size: $scale;
+    scroll-behavior: smooth;
 }
 
 body {
     font-family: var(--font-family);
-    color: var(--text-color);
-    background-color: var(--surface-ground);
+    color: var(--p-text-color);
+    background-color: var(--p-surface-50);
     margin: 0;
     padding: 0;
     min-height: 100%;
@@ -20,7 +23,7 @@ body {
 
 a {
     text-decoration: none;
-    color: var(--primary-color);
+    color: var(--p-primary-color);
 }
 
 .layout-wrapper {

package/{styles → src/lib}/styles/layout/_menu.scss

@@ -1,3 +1,6 @@
+@use './_variables' as *;
+@use './_mixins' as *;
+
 .layout-sidebar {
     position: fixed;
     width: 300px;
@@ -8,8 +11,8 @@
     top: 7rem;
     left: 2rem;
     transition: transform $transitionDuration, left $transitionDuration;
-    background-color: var(--surface-overlay);
-    border-radius: $borderRadius;
+    background-color: var(--p-content-background);
+    border-radius: var(--p-content-border-radius);
     padding: 0.5rem 1.5rem;
     box-shadow: 0px 3px 5px rgba(0, 0, 0, .02), 0px 0px 2px rgba(0, 0, 0, .05), 0px 1px 4px rgba(0, 0, 0, .08);
 }
@@ -61,10 +64,10 @@
             align-items: center;
             position: relative;
             outline: 0 none;
-            color: var(--text-color);
+            color: var(--p-text-color);
             cursor: pointer;
             padding: .75rem 1rem;
-            border-radius: $borderRadius;
+            border-radius: var(--p-content-border-radius);
             transition: background-color $transitionDuration, box-shadow $transitionDuration;
 
             .layout-menuitem-icon {
@@ -79,11 +82,11 @@
 
             &.active-route {
                 font-weight: 700;
-                color: var(--primary-color);
+                color: var(--p-primary-color);
             }
 
             &:hover {
-                background-color: var(--surface-hover);
+                background-color: var(--p-surface-100);
             }
 
             &:focus {
@@ -93,7 +96,7 @@
 
         ul {
             overflow: hidden;
-            border-radius: $borderRadius;
+            border-radius: var(--p-content-border-radius);
 
             li {
                 a {

package/{styles → src/lib}/styles/layout/_mixins.scss

@@ -2,12 +2,12 @@
     outline: 0 none;
     outline-offset: 0;
     transition: box-shadow .2s;
-    box-shadow: 0 0 0 0.2rem var(--primary-light-color);
+    box-shadow: 0 0 0 0.2rem var(--p-primary-400);
 }
 
 @mixin focused-inset() {
     outline: 0 none;
     outline-offset: 0;
     transition: box-shadow .2s;
-    box-shadow: inset 0 0 0 0.2rem var(--primary-light-color);
+    box-shadow: inset 0 0 0 0.2rem var(--p-primary-400);
 }

package/{styles → src/lib}/styles/layout/_preloading.scss

@@ -17,7 +17,7 @@
 
 .preloader-content:before, .preloader-content:after{
     content: '';
-    border: 1em solid var(--primary-color);
+    border: 1em solid var(--p-primary-color);
     border-radius: 50%;
     width: inherit;
     height: inherit;

package/{styles → src/lib}/styles/layout/_responsive.scss

@@ -1,3 +1,5 @@
+@use './_variables' as *;
+
 @media screen and (min-width: 1960px) {
     .layout-main, .landing-wrapper {
         width: 1504px;

package/{styles → src/lib}/styles/layout/_spiderly-controls.scss

@@ -1,3 +1,5 @@
+@use './_variables' as *;
+
 .spiderly-tooltip-invalid.p-tooltip .p-tooltip-text {
   background-color: $errorColorLight !important;
   color: $errorColor !important;

package/{styles → src/lib}/styles/layout/_topbar.scss

@@ -1,3 +1,6 @@
+@use './_variables' as *;
+@use './_mixins' as *;
+
 .layout-topbar {
     position: fixed;
     height: 5rem;
@@ -20,7 +23,7 @@
       font-size: 1.5rem;
       font-weight: 500;
       width: 300px;
-      border-radius: 12px;
+      border-radius: var(--p-content-border-radius);
   
       img {
         height: 2.5rem;
@@ -37,7 +40,9 @@
       justify-content: center;
       align-items: center;
       position: relative;
-      color: var(--text-color-secondary);
+      color: var(--p-text-color-secondary);
+      background-color: transparent;
+      border-color: transparent;
       // border-radius: 50%;
       // width: 3rem;
       // height: 3rem;
@@ -45,8 +50,8 @@
       transition: background-color $transitionDuration;
   
       &:hover {
-        color: var(--text-color);
-        background-color: var(--surface-hover);
+        color: var(--p-text-color);
+        background-color: var(--p-surface-100);
       }
   
       &:focus {
@@ -125,7 +130,7 @@
         background-color: var(--surface-overlay);
         box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02),
           0px 0px 2px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.08);
-        border-radius: 12px;
+        border-radius: var(--p-content-border-radius);
         padding: 1rem;
         right: 2rem;
         top: 5rem;
@@ -144,7 +149,7 @@
           width: 100%;
           height: auto;
           justify-content: flex-start;
-          border-radius: 12px;
+          border-radius: var(--p-content-border-radius);
           padding: 1rem;
   
           i {
@@ -168,7 +173,7 @@
     background-color: var(--surface-overlay);
     box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05),
       0px 1px 4px rgba(0, 0, 0, 0.08);
-    border-radius: 12px;
+    border-radius: var(--p-content-border-radius);
     padding: 1rem;
     right: 2rem;
     top: 5rem;
@@ -194,18 +199,18 @@
       display: flex;
       align-items: center;
       position: relative;
-      color: var(--text-color-secondary);
+      color: var(--p-text-color-secondary);
       width: 100%;
       height: auto;
       justify-content: flex-start;
-      border-radius: 12px;
+      border-radius: var(--p-content-border-radius);
       padding: 1rem;
       cursor: pointer;
       transition: background-color $transitionDuration;
   
       &:hover {
-        color: var(--text-color);
-        background-color: var(--surface-hover);
+        color: var(--p-text-color);
+        background-color: var(--p-surface-100);
       }
   
       &:focus {