@sneat/components 0.1.0

package/src/index.ts

@@ -0,0 +1,14 @@
+export * from './lib/app-version';
+export * from './lib/pipes';
+export * from './lib/virtual-slider/virtual-slider';
+export * from './lib/card-list';
+export * from './lib/error-card';
+export * from './lib/country-selector';
+export * from './lib/filter-item';
+export * from './lib/copyright';
+export * from './lib/dialog-header';
+export * from './lib/country-input';
+export * from './lib/save-event';
+export * from './lib/date-input/date-input.component';
+export * from './lib/user-country/user-country.component';
+export * from './lib/card-list/sneat-card-list.component';

package/src/lib/app-version/app-version.component.html

@@ -0,0 +1,15 @@
+<ion-item-divider color="light">
+  <ion-label>App version</ion-label>
+</ion-item-divider>
+<ion-item>
+  <ion-input
+    label="Build:"
+    color="medium"
+    readonly="true"
+    disabled="true"
+    [value]="
+      buildInfo.gitHash.substring(0, 7) + ' @ ' + buildInfo.buildTimestamp
+    "
+    [title]="buildInfo.gitHash"
+  />
+</ion-item>

package/src/lib/app-version/app-version.component.spec.ts

@@ -0,0 +1,25 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { AppVersionComponent } from './app-version.component';
+
+describe('AppVersionComponent', () => {
+  let component: AppVersionComponent;
+  let fixture: ComponentFixture<AppVersionComponent>;
+
+  beforeEach(waitForAsync(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppVersionComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+      .overrideComponent(AppVersionComponent, {
+        set: { imports: [], schemas: [CUSTOM_ELEMENTS_SCHEMA] },
+      })
+      .compileComponents();
+    fixture = TestBed.createComponent(AppVersionComponent);
+    component = fixture.componentInstance;
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/app-version/app-version.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import {
+  IonInput,
+  IonItem,
+  IonItemDivider,
+  IonLabel,
+} from '@ionic/angular/standalone';
+import { buildInfo } from './build-info';
+
+@Component({
+  selector: 'sneat-app-version',
+  templateUrl: 'app-version.component.html',
+  imports: [IonItemDivider, IonLabel, IonItem, IonInput],
+})
+export class AppVersionComponent {
+  protected readonly buildInfo = buildInfo;
+}

package/src/lib/app-version/build-info.ts

@@ -0,0 +1,8 @@
+export const buildInfo: {
+  // TODO: Needs pre-commit hook to check gitHash and buildTimestamp are NOT changed.
+  readonly gitHash: string;
+  readonly buildTimestamp: string;
+} = {
+  gitHash: 'gitHash t0be$et',
+  buildTimestamp: 'timestamp t0be$et',
+};

package/src/lib/app-version/index.ts

@@ -0,0 +1,2 @@
+export * from './app-version.component';
+export * from './build-info';

package/src/lib/card-list/index.ts

@@ -0,0 +1 @@
+export * from './sneat-card-list.component';

package/src/lib/card-list/sneat-card-list.component.html

@@ -0,0 +1,108 @@
+<ion-card>
+  @if (title) {
+    <ion-item (click)="cardTitleClick.emit()" tappable>
+      @if (itemIcon && !isLoading && !items?.length) {
+        <ion-icon [name]="itemIcon" slot="start" />
+      }
+      <ion-label style="font-weight: bold">{{ title }}</ion-label>
+      @if (isFilterable) {
+        <ion-input [(ngModel)]="filter" placeholder="(type to filter)" />
+      }
+      <ion-buttons slot="end">
+        @if (filter) {
+          <ion-button (click)="filter = ''" title="Clear filter">
+            <ion-icon name="close-outline" color="medium" />
+          </ion-button>
+        }
+        @if (mode !== "add" && create) {
+          <ion-button (click)="showAddForm($event)">
+            <ion-icon color="primary" slot="start" name="add" />
+            <ion-label color="medium">Add</ion-label>
+          </ion-button>
+        }
+      </ion-buttons>
+    </ion-item>
+  }
+  @if (tabs) {
+    <ion-segment [(ngModel)]="tab" (ionChange)="tabChanged.emit(tab || '')">
+      @for (tab of tabs; track tab.id) {
+        <ion-segment-button [value]="tab.id">
+          <ion-label>{{ tab.title }}</ion-label>
+        </ion-segment-button>
+      }
+    </ion-segment>
+    <ion-buttons>
+      @if (mode !== "add" && create) {
+        <ion-button (click)="showAddForm($event)">
+          <ion-icon color="primary" slot="start" name="add" />
+          <ion-label color="medium">Add</ion-label>
+        </ion-button>
+      }
+    </ion-buttons>
+  }
+  @if (isLoading) {
+    <ion-card-content>
+      <ion-skeleton-text animated="" style="width: 100%" />
+    </ion-card-content>
+  } @else {
+    <ion-list>
+      @for (item of items; track item.id) {
+        <ion-item
+          tappable
+          (click)="itemClick && click($event, item)"
+          [routerLink]="getRouterLink(item)"
+        >
+          @if (itemIcon) {
+            <ion-icon [name]="itemIcon" slot="start" />
+          }
+          <ion-label>{{ item.title || item.id }}</ion-label>
+        </ion-item>
+      }
+      @if (mode === "add") {
+        <ion-item>
+          <ion-icon name="earth-outline" slot="start" color="medium" />
+          <ion-input
+            [(ngModel)]="name"
+            placeholder="Name"
+            [disabled]="!!isAdding"
+          />
+          <ion-buttons slot="end">
+            <ion-button
+              fill="solid"
+              color="primary"
+              [disabled]="isAdding || !name.trim()"
+              (click)="tryCreate()"
+            >
+              Create
+            </ion-button>
+            <ion-button
+              (click)="mode = 'list'"
+              color="medium"
+              title="Cancel"
+              [disabled]="isAdding"
+            >
+              <ion-icon name="close-outline" />
+            </ion-button>
+          </ion-buttons>
+        </ion-item>
+      }
+    </ion-list>
+    @if (!items?.length && mode !== "add") {
+      <ion-card-content>
+        @if (!noItemsText) {
+          <p>
+            {{ noItemsText }}
+          </p>
+        } @else {
+          <p>
+            Not defined for this project yet. Click the
+            <span style="background-color: whitesmoke; padding: 4px 8px"
+              >+ Add</span
+            >
+            button above in the header of this card to create a first one.
+          </p>
+        }
+      </ion-card-content>
+    }
+  }
+</ion-card>

package/src/lib/card-list/sneat-card-list.component.spec.ts

@@ -0,0 +1,131 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { SneatCardListComponent } from './sneat-card-list.component';
+import { ErrorLogger } from '@sneat/core';
+import { of, throwError } from 'rxjs';
+
+describe('SneatCardListComponent', () => {
+  let component: SneatCardListComponent;
+  let fixture: ComponentFixture<SneatCardListComponent>;
+  let errorLogger: { logError: ReturnType<typeof vi.fn> };
+
+  beforeEach(waitForAsync(async () => {
+    errorLogger = {
+      logError: vi.fn(),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [SneatCardListComponent],
+      providers: [
+        {
+          provide: ErrorLogger,
+          useValue: errorLogger,
+        },
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+      .overrideComponent(SneatCardListComponent, {
+        set: {
+          imports: [],
+          schemas: [CUSTOM_ELEMENTS_SCHEMA],
+          template: '',
+        },
+      })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(SneatCardListComponent);
+    component = fixture.componentInstance;
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should emit itemClick when click is called', () => {
+    const itemClickSpy = vi.fn();
+    component.itemClick.subscribe(itemClickSpy);
+
+    const mockEvent = {
+      preventDefault: vi.fn(),
+      stopPropagation: vi.fn(),
+    } as unknown as Event;
+
+    const mockItem = { id: 1, title: 'Test Item' };
+
+    component['click'](mockEvent, mockItem);
+
+    expect(mockEvent.preventDefault).toHaveBeenCalled();
+    expect(mockEvent.stopPropagation).toHaveBeenCalled();
+    expect(itemClickSpy).toHaveBeenCalledWith(mockItem);
+  });
+
+  it('should change mode to add when showAddForm is called', () => {
+    const mockEvent = {
+      preventDefault: vi.fn(),
+      stopPropagation: vi.fn(),
+    } as unknown as Event;
+
+    component['showAddForm'](mockEvent);
+
+    expect(mockEvent.preventDefault).toHaveBeenCalled();
+    expect(mockEvent.stopPropagation).toHaveBeenCalled();
+    expect(component['mode']).toBe('add');
+  });
+
+  it('should successfully create item when tryCreate is called', () => {
+    const mockItem = { id: '123', title: 'New Item' };
+    component.items = [];
+    component.create = vi.fn().mockReturnValue(of(mockItem));
+    component['name'] = 'New Item';
+
+    component['tryCreate']();
+
+    expect(component.create).toHaveBeenCalledWith('New Item');
+    expect(component.items).toContain(mockItem);
+    expect(component['mode']).toBe('list');
+    expect(component['name']).toBe('');
+    expect(component['isAdding']).toBe(false);
+  });
+
+  it('should handle error when tryCreate fails', () => {
+    const mockError = new Error('Creation failed');
+    component.create = vi.fn().mockReturnValue(throwError(() => mockError));
+    component['name'] = 'New Item';
+
+    component['tryCreate']();
+
+    expect(component.create).toHaveBeenCalledWith('New Item');
+    expect(errorLogger.logError).toHaveBeenCalledWith(
+      mockError,
+      'Failed to create new item',
+    );
+    expect(component['isAdding']).toBe(false);
+  });
+
+  it('should not add item if create is not defined', () => {
+    component.create = undefined;
+    component['name'] = 'New Item';
+
+    component['tryCreate']();
+
+    expect(component['isAdding']).toBe(true);
+  });
+
+  it('should trim name before creating', () => {
+    const mockItem = { id: '123', title: 'Trimmed' };
+    component.items = [];
+    component.create = vi.fn().mockReturnValue(of(mockItem));
+    component['name'] = '  Trimmed  ';
+
+    component['tryCreate']();
+
+    expect(component.create).toHaveBeenCalledWith('Trimmed');
+  });
+
+  it('should initialize with default values', () => {
+    expect(component.filter).toBe('');
+    expect(component['mode']).toBe('list');
+    expect(component['name']).toBe('');
+    expect(component['isAdding']).toBeUndefined();
+  });
+});

package/src/lib/card-list/sneat-card-list.component.ts

@@ -0,0 +1,125 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  inject,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import {
+  IonButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonSegment,
+  IonSegmentButton,
+  IonSkeletonText,
+} from '@ionic/angular/standalone';
+import { IRecord } from '@sneat/data';
+import { ErrorLogger, IErrorLogger } from '@sneat/core';
+import { Observable } from 'rxjs';
+
+export interface ICardTab {
+  id: string;
+  title: string;
+}
+
+interface IOptionallyTitled {
+  id?: string;
+  title?: string;
+}
+
+@Component({
+  selector: 'sneat-card-list',
+  templateUrl: './sneat-card-list.component.html',
+  imports: [
+    RouterModule,
+    IonCard,
+    IonItem,
+    IonIcon,
+    IonLabel,
+    IonInput,
+    IonButtons,
+    IonButton,
+    IonSegment,
+    IonSegmentButton,
+    FormsModule,
+    IonCardContent,
+    IonSkeletonText,
+    IonList,
+  ],
+})
+export class SneatCardListComponent {
+  private readonly errorLogger = inject<IErrorLogger>(ErrorLogger);
+
+  @Input() title?: string;
+  @Input() isFilterable?: boolean;
+  @Input() isLoading?: boolean;
+  @Input() items?: { id?: unknown; title?: string }[];
+  @Input() create?: (name: string) => Observable<IRecord<IOptionallyTitled>>;
+  @Input() itemIcon?: string;
+  @Input() tab?: string;
+  @Input() tabs?: ICardTab[];
+  @Input() noItemsText?: string;
+  @Input() getRouterLink: (item: unknown) => string = () =>
+    undefined as unknown as string;
+
+  @Output() readonly cardTitleClick = new EventEmitter<void>();
+  @Output() readonly itemClick = new EventEmitter<unknown>();
+  @Output() readonly tabChanged = new EventEmitter<string>();
+
+  @ViewChild(IonInput, { static: false }) addInput?: IonInput;
+
+  filter = '';
+
+  protected mode: 'list' | 'add' = 'list';
+  protected name = '';
+  protected isAdding?: boolean;
+
+  protected click(event: Event, item: unknown): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.itemClick.emit(item);
+  }
+
+  protected showAddForm(event: Event): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.mode = 'add';
+    setTimeout(() => {
+      // console.log(this.addInput);
+      if (this.addInput) {
+        this.addInput
+          ?.setFocus()
+          .catch((err) =>
+            this.errorLogger.logError(err, 'Failed to set focus'),
+          );
+      }
+    }, 200);
+  }
+
+  protected tryCreate(): void {
+    this.isAdding = true;
+    if (this.create) {
+      this.create(this.name.trim()).subscribe({
+        next: (item) => {
+          this.items?.push(item);
+          this.isAdding = false;
+          this.mode = 'list';
+          this.name = '';
+        },
+        error: (err) => {
+          this.errorLogger.logError(err, 'Failed to create new item');
+          this.isAdding = false;
+        },
+      });
+    }
+  }
+}

package/src/lib/copyright/copyright.component.html

@@ -0,0 +1 @@
+<p>2020 &copy; Sneat.team</p>

package/src/lib/copyright/copyright.component.spec.ts

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

package/src/lib/copyright/copyright.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sneat-copyright',
+  templateUrl: './copyright.component.html',
+})
+export class CopyrightComponent {}

package/src/lib/copyright/index.ts

@@ -0,0 +1 @@
+export * from './copyright.component';

package/src/lib/country-input/country-input.component.html

@@ -0,0 +1,33 @@
+<ion-item class="sneat-tiny-end-padding" lines="none">
+  <ion-select
+    interface="popover"
+    [label]="label"
+    [(ngModel)]="countryID"
+    (ionChange)="onCountryChanged()"
+  >
+    <ion-select-option value="">All</ion-select-option>
+    @for (c of countries(); track c.id) {
+      <ion-select-option [value]="c.id">
+        {{ c.title }} {{ c.emoji }}
+      </ion-select-option>
+    }
+  </ion-select>
+  @if (countryID && canReset) {
+    <ion-buttons slot="end">
+      <ion-button color="medium" (click)="reset($event)">
+        <ion-icon name="close-outline" />
+      </ion-button>
+    </ion-buttons>
+  }
+  <!-- disable for now as select is showing incorrectyl and lookup us not linked-->
+  <!--	<ion-buttons slot="end" class="ion-no-margin ion-no-padding">-->
+  <!--		<ion-button *ngIf="canReset && countryID"-->
+  <!--								color="medium"-->
+  <!--								(click)="reset($event)" [disabled]="!canReset || !countryID">-->
+  <!--			<ion-icon name="close-outline"></ion-icon>-->
+  <!--		</ion-button>-->
+  <!--		<ion-button (click)="openCountrySelector($event)">-->
+  <!--			<ion-label>...</ion-label>-->
+  <!--		</ion-button>-->
+  <!--	</ion-buttons>-->
+</ion-item>

package/src/lib/country-input/country-input.component.spec.ts

@@ -0,0 +1,84 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { CountryInputComponent } from './country-input.component';
+import { CountriesLoaderService } from '../country-selector';
+
+describe('CountryInputComponent', () => {
+  let component: CountryInputComponent;
+  let fixture: ComponentFixture<CountryInputComponent>;
+  let countriesLoader: { getCountries: ReturnType<typeof vi.fn> };
+
+  const mockCountries = [
+    { id: 'US', emoji: '🇺🇸', title: 'United States' },
+    { id: 'UA', emoji: '🇺🇦', title: 'Ukraine' },
+  ];
+
+  beforeEach(waitForAsync(async () => {
+    countriesLoader = {
+      getCountries: vi.fn().mockResolvedValue(mockCountries),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [CountryInputComponent],
+      providers: [
+        {
+          provide: CountriesLoaderService,
+          useValue: countriesLoader,
+        },
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+      .overrideComponent(CountryInputComponent, {
+        set: { imports: [], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: '' },
+      })
+      .compileComponents();
+    fixture = TestBed.createComponent(CountryInputComponent);
+    component = fixture.componentInstance;
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should initialize with default values', () => {
+    expect(component.canReset).toBe(true);
+    expect(component.label).toBe('Country');
+    expect(component.countryID).toBe('');
+  });
+
+  it('should load countries on init', async () => {
+    await component.ngOnInit();
+    expect(countriesLoader.getCountries).toHaveBeenCalled();
+    // Wait for promise to resolve
+    await Promise.resolve();
+    expect(component.countries()).toEqual(mockCountries);
+  });
+
+  it('should emit countryIDChange when onCountryChanged is called', () => {
+    const emitSpy = vi.fn();
+    component.countryIDChange.subscribe(emitSpy);
+    component.countryID = 'US';
+
+    component.onCountryChanged();
+
+    expect(emitSpy).toHaveBeenCalledWith('US');
+  });
+
+  it('should reset countryID and emit when reset is called', () => {
+    const emitSpy = vi.fn();
+    component.countryIDChange.subscribe(emitSpy);
+    component.countryID = 'US';
+
+    const mockEvent = {
+      preventDefault: vi.fn(),
+      stopPropagation: vi.fn(),
+    } as unknown as Event;
+
+    component.reset(mockEvent);
+
+    expect(mockEvent.preventDefault).toHaveBeenCalled();
+    expect(mockEvent.stopPropagation).toHaveBeenCalled();
+    expect(component.countryID).toBe('');
+    expect(emitSpy).toHaveBeenCalledWith('');
+  });
+});