@updevs/components 1.0.0-alpha.1 → 1.0.0-alpha.3

package/form-controls/time-picker/src/time-selector/time-selector.component.html

@@ -0,0 +1,44 @@
+<div class="d-flex">
+    <div class="time-items-list">
+        <ul class="list">
+            <li *ngFor="let h of hoursList">
+                <div class="cell">{{h.toString().padStart(2, '0')}}</div>
+            </li>
+        </ul>
+    </div>
+    <div class="time-dots-separator">
+        <span>:</span>
+    </div>
+    <div class="time-items-list">
+        <ul class="list">
+            <li *ngFor="let m of minutesList">
+                <div class="cell">{{m.toString().padStart(2, '0')}}</div>
+            </li>
+        </ul>
+    </div>
+    <ng-container *ngIf="shouldSelectSeconds">
+        <div class="time-dots-separator">
+            <span>:</span>
+        </div>
+        <div class="time-items-list">
+            <ul class="list">
+                <li *ngFor="let s of secondsList">
+                    <div class="cell">{{s.toString().padStart(2, '0')}}</div>
+                </li>
+            </ul>
+        </div>
+    </ng-container>
+    <ng-container *ngIf="!shouldUse24hFormat">
+        <div class="time-items-list">
+            <ul class="list">
+                <li>
+                    <div class="cell">{{'AM' | transloco}}</div>
+                    <div class="cell">{{'PM' | transloco}}</div>
+                </li>
+            </ul>
+        </div>
+    </ng-container>
+</div>
+<div>
+    <upd-button>{{'Select' | transloco}}</upd-button>
+</div>

package/form-controls/time-picker/src/time-selector/time-selector.component.scss

@@ -0,0 +1,47 @@
+.time-dots-separator {
+    display: flex;
+    align-items: center;
+}
+
+.time-items-list {
+    padding-left: 15px;
+    padding-right: 15px;
+    display: flex;
+    justify-items: center;
+    flex: auto;
+    height: 240px;
+
+    .list {
+        position: relative;
+        flex: 1 0 auto;
+        margin: 0;
+        padding: 0;
+        overflow-y: auto;
+        text-align: center;
+        list-style: none;
+
+
+        li {
+            margin-top: 0;
+            display: block;
+            height: 40px;
+            cursor: pointer;
+
+            .-item {
+                display: block;
+                cursor: pointer;
+                transition: color .3s;
+            }
+        }
+    }
+}
+
+.list {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.list::-webkit-scrollbar {
+    display: none;
+}

package/form-controls/time-picker/src/time-selector/time-selector.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TimeSelectorComponent } from './time-selector.component';
+
+describe('TimeSelectorComponent', () => {
+  let component: TimeSelectorComponent;
+  let fixture: ComponentFixture<TimeSelectorComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TimeSelectorComponent]
+    });
+    fixture = TestBed.createComponent(TimeSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/form-controls/time-picker/src/time-selector/time-selector.component.ts

@@ -0,0 +1,107 @@
+import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+
+@Component({
+    selector: 'upd-time-selector',
+    templateUrl: './time-selector.component.html',
+    styleUrls: ['./time-selector.component.scss']
+})
+export class TimeSelectorComponent implements OnInit, OnChanges {
+    /**
+     * Whether seconds should be selectable.
+     */
+    @Input() shouldSelectSeconds = false;
+    /**
+     * Whether the 24-hour format will be used or the 12-hour one (AM/PM)
+     */
+    @Input() shouldUse24hFormat = true;
+    /**
+     * Hour from which where the list will begin.
+     */
+    @Input() startingHour = 0;
+    /**
+     * Hour from which where the list will end.
+     */
+    @Input() endingHour = 23;
+    /**
+     * Interval between hours displayed.
+     */
+    @Input() hourInterval = 1;
+    /**
+     * Minute from which where the list will begin.
+     */
+    @Input() startingMinute = 0;
+    /**
+     * Minute from which where the list will end.
+     */
+    @Input() endingMinute = 59;
+    /**
+     * Interval between minutes displayed.
+     */
+    @Input() minuteInterval = 5;
+    /**
+     * Second from which where the list will begin.
+     */
+    @Input() startingSecond = 0;
+    /**
+     * Second from which where the list will end.
+     */
+    @Input() endingSecond = 59;
+    /**
+     * Interval between seconds displayed.
+     */
+    @Input() secondInterval = 10;
+    /**
+     * Custom list of hours to be displayed for selection.
+     */
+    @Input() customHours?: number[];
+    /**
+     * Custom list of minutes to be displayed for selection.
+     */
+    @Input() customMinutes?: number[];
+    /**
+     * Custom list of seconds to be displayed for selection.
+     */
+    @Input() customSeconds?: number[];
+
+    hoursList: number[] = [];
+    minutesList: number[] = [];
+    secondsList: number[] = [];
+
+    ngOnInit(): void {
+        this.setupTimeLists();
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        this.setupTimeLists();
+    }
+
+    private setupTimeLists(): void {
+        this.hoursList = [];
+        this.minutesList = [];
+        this.secondsList = [];
+
+        if (!!this.customHours) {
+            this.hoursList = this.customHours;
+        } else {
+            this.setupTimeList(this.hoursList, this.startingHour, this.endingHour, this.hourInterval);
+        }
+
+        if (!!this.customMinutes) {
+            this.minutesList = this.customMinutes;
+        } else {
+            this.setupTimeList(this.minutesList, this.startingMinute, this.endingMinute, this.minuteInterval);
+        }
+
+        if (!!this.customSeconds) {
+            this.secondsList = this.customSeconds;
+        } else {
+            this.setupTimeList(this.secondsList, this.startingSecond, this.endingSecond, this.secondInterval);
+        }
+    }
+
+    private setupTimeList(list: number[], start: number, end: number, interval: number): void {
+        for (let i = start; i <= end; i += interval) {
+            list.push(i);
+        }
+    }
+}

package/form-controls/time-picker/src/upd-time-picker.module.ts

@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslocoService, TranslocoModule } from '@ngneat/transloco';
+import { UpdInputModule } from '@updevs/components/form-controls/input';
+import { UpdIconsModule } from '@updevs/icons';
+import { UpdButtonModule } from '@updevs/components/button';
+import { UpdListModule } from '@updevs/components/list';
+import { UpdDropdownModule } from '@updevs/components/dropdown';
+
+import * as en from './assets/i18n/en.json';
+import * as pt from './assets/i18n/pt.json';
+import { TimePickerComponent } from './time-picker.component';
+import { TimeSelectorComponent } from './time-selector/time-selector.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TranslocoModule,
+        UpdInputModule,
+        UpdIconsModule,
+        UpdButtonModule,
+        UpdListModule,
+        UpdDropdownModule
+    ],
+    declarations: [
+        TimePickerComponent,
+        TimeSelectorComponent
+    ],
+    exports: [
+        TimePickerComponent,
+        TimeSelectorComponent
+    ]
+})
+export class UpdTimePickerModule {
+    constructor(translocoService: TranslocoService) {
+        translocoService.setTranslation(en, 'en');
+        translocoService.setTranslation(pt, 'pt');
+    }
+}

package/layout/ng-package.json

@@ -0,0 +1,7 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../../../node_modules/@updevs/components/layout",
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

package/layout/src/abstractions/base-page.component.ts

@@ -0,0 +1,21 @@
+import { OnDestroy, Directive, inject } from '@angular/core';
+import { BaseComponent, LayoutService } from '@updevs/sdk/layout';
+
+/**
+ * Basic page structure.
+ */
+@Directive({})
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export abstract class BasePageComponent extends BaseComponent implements OnDestroy {
+    protected _layoutService: LayoutService;
+
+    protected constructor() {
+        super();
+        this._layoutService = inject(LayoutService);
+    }
+
+    override ngOnDestroy(): void {
+        super.ngOnDestroy();
+        // TODO: clear subheader.
+    }
+}

package/layout/src/abstractions/public-api.ts

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

package/layout/src/assets/i18n/en.json

@@ -0,0 +1,5 @@
+{
+    "Footer": {
+        "AllRightsReserved": "All rights reserved."
+    }
+}

package/layout/src/assets/i18n/pt.json

@@ -0,0 +1,5 @@
+{
+    "Footer": {
+        "AllRightsReserved": "Todos os direitos reservados."
+    }
+}

package/layout/src/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/layout/src/layouts/blank-layout/blank-layout.component.html

@@ -0,0 +1 @@
+<p>blank-layout works!</p>

package/layout/src/layouts/blank-layout/blank-layout.component.spec.ts

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

package/layout/src/layouts/blank-layout/blank-layout.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'upd-blank-layout',
+    templateUrl: './blank-layout.component.html',
+    styleUrls: ['./blank-layout.component.scss']
+})
+export class BlankLayoutComponent {
+
+}

package/layout/src/layouts/blank-layout/blank-layout.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { BlankLayoutComponent } from './blank-layout.component';
+
+@NgModule({
+    imports: [
+        CommonModule
+    ],
+    declarations: [
+        BlankLayoutComponent
+    ],
+    exports: [
+        BlankLayoutComponent
+    ]
+})
+export class BlankLayoutModule {}

package/layout/src/layouts/public-api.ts

@@ -0,0 +1,4 @@
+export * from './blank-layout/blank-layout.module';
+export * from './blank-layout/blank-layout.component';
+export * from './vertical-sidebar-layout/vertical-sidebar-layout.module';
+export * from './vertical-sidebar-layout/vertical-sidebar-layout.component';

package/layout/src/layouts/vertical-sidebar-layout/vertical-sidebar-layout.component.html

@@ -0,0 +1,14 @@
+<div class="page">
+    <upd-sidebar></upd-sidebar>
+    <upd-header></upd-header>
+
+    <div class="page-wrapper">
+        <upd-page-header *ngIf="showPageHeader" [model]="pageHeader!"></upd-page-header>
+        <div class="page-body">
+            <div class="container-xl">
+                <router-outlet></router-outlet>
+            </div>
+        </div>
+        <upd-footer></upd-footer>
+    </div>
+</div>

package/layout/src/layouts/vertical-sidebar-layout/vertical-sidebar-layout.component.spec.ts

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

package/layout/src/layouts/vertical-sidebar-layout/vertical-sidebar-layout.component.ts

@@ -0,0 +1,31 @@
+import { Component, ViewEncapsulation, OnInit, ChangeDetectorRef } from '@angular/core';
+import { BaseComponent, LayoutService, PageHeaderModel } from '@updevs/sdk/layout';
+
+@Component({
+    selector: 'upd-vertical-sidebar-layout',
+    templateUrl: './vertical-sidebar-layout.component.html',
+    styleUrls: ['./vertical-sidebar-layout.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class VerticalSidebarLayoutComponent extends BaseComponent implements OnInit {
+    showPageHeader = false;
+    pageHeader?: PageHeaderModel;
+
+    constructor(
+        private changeDetectorRef: ChangeDetectorRef,
+        private layoutService: LayoutService
+    ) {
+        super();
+    }
+
+    ngOnInit(): void {
+        const pHeaderSub = this.layoutService.onPageHeaderChange.subscribe(ph => {
+            this.showPageHeader = !!ph;
+            this.pageHeader = ph;
+
+            this.changeDetectorRef.detectChanges();
+        });
+
+        this.addSubscriptions(pHeaderSub);
+    }
+}

package/layout/src/layouts/vertical-sidebar-layout/vertical-sidebar-layout.module.ts

@@ -0,0 +1,52 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { UpdIconsModule } from '@updevs/icons';
+import { UpdButtonModule } from '@updevs/components/button';
+import { UpdLinkModule } from '@updevs/components/link';
+import { UpdCoreLayoutModule } from '@updevs/sdk/layout';
+import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
+
+import * as en from '../../assets/i18n/en.json';
+import * as pt from '../../assets/i18n/pt.json';
+import { VerticalSidebarLayoutComponent } from './vertical-sidebar-layout.component';
+import { FooterComponent } from '../../partials/footer/footer.component';
+import { HeaderComponent } from '../../partials/header/header.component';
+import { FooterCopyrightDirective } from '../../partials/footer/footer-copyright.directive';
+import { SidebarComponent } from '../../partials/sidebar/sidebar.component';
+import { PageHeaderComponent } from '../../partials/page-header/page-header.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        RouterModule,
+        TranslocoModule,
+        UpdIconsModule,
+        UpdCoreLayoutModule,
+        UpdButtonModule,
+        UpdLinkModule
+    ],
+    declarations: [
+        VerticalSidebarLayoutComponent,
+        FooterComponent,
+        HeaderComponent,
+        SidebarComponent,
+        PageHeaderComponent
+    ],
+    exports: [
+        VerticalSidebarLayoutComponent,
+        FooterComponent,
+        HeaderComponent,
+        SidebarComponent,
+        PageHeaderComponent
+    ],
+    providers: [
+        FooterCopyrightDirective
+    ]
+})
+export class VerticalSidebarLayoutModule {
+    constructor(translocoService: TranslocoService) {
+        translocoService.setTranslation(en, 'en');
+        translocoService.setTranslation(pt, 'pt');
+    }
+}

package/layout/src/models/public-api.ts

@@ -0,0 +1 @@
+export * from './upd-layout.config';

package/layout/src/models/upd-layout-config.model.ts

@@ -0,0 +1,71 @@
+import { UpdLayoutConfig } from './upd-layout.config';
+
+/**
+ * Layout configuration.
+ */
+export class UpdLayoutConfigModel implements UpdLayoutConfig {
+    /**
+     * Main menu title.
+     */
+    menuTitle?: string;
+    /**
+     * Whether the menu should start expanded.
+     */
+    shouldMenuStartExpanded?: boolean;
+    /**
+     * Main application logo.
+     */
+    mainLogo?: string;
+    /**
+     * Small application logo.
+     */
+    smallLogo?: string;
+    /**
+     * Background image for the logged out page.
+     */
+    loggedOutBackground?: string;
+    /**
+     * Whether the default notifications button should be displayed.
+     */
+    showNotificationsButton?: boolean;
+    /**
+     * Whether the report error button should be displayed when an exception is thrown by the server.
+     */
+    displayReportErrorButton?: boolean;
+    /**
+     * Whether the logged user's menu should be displayed.
+     */
+    showUserMenu?: boolean;
+
+    constructor(init?: UpdLayoutConfig) {
+        Object.assign(this, init);
+
+        if (this.mainLogo === undefined) {
+            // this.mainLogo = LogoConstants.defaultLogo; // TODO: add images
+        }
+
+        if (this.smallLogo === undefined) {
+            // this.smallLogo = LogoConstants.smallLogo;
+        }
+
+        if (this.loggedOutBackground === undefined) {
+            // this.loggedOutBackground = ImageConstants.loggedOutBackground;
+        }
+
+        if (this.menuTitle === undefined) {
+            this.menuTitle = 'UpDevs';
+        }
+
+        if (this.showNotificationsButton === undefined) {
+            this.showNotificationsButton = true;
+        }
+
+        if (this.showUserMenu === undefined) {
+            this.showUserMenu = true;
+        }
+
+        if (this.displayReportErrorButton === undefined) {
+            this.displayReportErrorButton = false;
+        }
+    }
+}

package/layout/src/models/upd-layout.config.ts

@@ -0,0 +1,37 @@
+/**
+ * Layout configuration.
+ */
+export interface UpdLayoutConfig {
+    /**
+     * Main menu title.
+     */
+    menuTitle?: string;
+    /**
+     * Whether the menu should start expanded.
+     */
+    shouldMenuStartExpanded?: boolean;
+    /**
+     * Main application logo.
+     */
+    mainLogo?: string;
+    /**
+     * Small application logo.
+     */
+    smallLogo?: string;
+    /**
+     * Background image for the logged out page.
+     */
+    loggedOutBackground?: string;
+    /**
+     * Whether the default notifications button should be displayed.
+     */
+    showNotificationsButton?: boolean;
+    /**
+     * Whether the report error button should be displayed when an exception is thrown by the server.
+     */
+    displayReportErrorButton?: boolean;
+    /**
+     * Whether the logged user's menu should be displayed.
+     */
+    showUserMenu?: boolean;
+}

package/layout/src/pages/auth-flow/auth-flow-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { OauthCallbackComponent } from './oauth-callback/oauth-callback.component';
+import { LoggedOutComponent } from './logged-out/logged-out.component';
+import { LoginComponent } from './login/login.component';
+
+/**
+ * Auth flow routes.
+ */
+export const routes: Routes = [
+    { path: 'oauth/callback', component: OauthCallbackComponent },
+    { path: 'logged-out', component: LoggedOutComponent },
+    { path: 'login', component: LoginComponent }
+];
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes, { useHash: true })],
+    exports: [RouterModule]
+})
+export class AuthFlowRoutingModule {}

package/layout/src/pages/auth-flow/auth-flow.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UpdButtonModule } from '@updevs/components/button';
+
+import { LoginComponent } from './login/login.component';
+import { OauthCallbackComponent } from './oauth-callback/oauth-callback.component';
+import { LoggedOutComponent } from './logged-out/logged-out.component';
+import { AuthFlowRoutingModule } from './auth-flow-routing.module';
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        AuthFlowRoutingModule,
+        UpdButtonModule,
+        FormsModule
+    ],
+    declarations: [
+        LoginComponent,
+        OauthCallbackComponent,
+        LoggedOutComponent
+    ],
+    exports: [
+        LoginComponent,
+        OauthCallbackComponent,
+        LoggedOutComponent
+    ]
+})
+export class AuthFlowModule {}

package/layout/src/pages/auth-flow/logged-out/logged-out.component.html

@@ -0,0 +1 @@
+<p>logged-out works!</p>