Add branding assets for TIS tenant with logo and login image
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
@if (loading()) {
|
||||
<shared-page-loading />
|
||||
} @else if (items()) {
|
||||
<div class="h-full w-full max-w-6xl mx-auto flex flex-col items-center justify-center gap-10">
|
||||
<p-message severity="warn"> برای ادامه میبایست یکی از پایانههای زیر را انتخاب کنید. </p-message>
|
||||
<div class="grid grid-cols-2 gap-10 items-stretch w-full">
|
||||
@for (item of items(); track $index) {
|
||||
<p-card
|
||||
class="border border-surface-border bg-surface-card rounded-2xl cursor-pointer hover:bg-surface-50! transition-colors"
|
||||
(click)="selectPos(item)"
|
||||
>
|
||||
<div class="flex flex-col gap-2 items-center justify-between shrink-0">
|
||||
<i class="pi pi-select text-6xl! mb-3 text-surface-card" aria-hidden="true"></i>
|
||||
<span class="text-xl font-semibold mb-2 block"> {{ item.name }} </span>
|
||||
<span class="inline-block text-base">
|
||||
{{ item.complex.business_activity.name }} - {{ item.complex.name }}
|
||||
</span>
|
||||
<button pButton class="w-full max-w-xs mx-auto mt-4">انتخاب پایانه</button>
|
||||
</div>
|
||||
</p-card>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { Maybe } from '@/core';
|
||||
import { PageLoadingComponent } from '@/shared/components/page-loading.component';
|
||||
import { HttpErrorResponse } from '@angular/common/http';
|
||||
import { Component, EventEmitter, inject, Output, signal } from '@angular/core';
|
||||
import { CookieService } from 'ngx-cookie-service';
|
||||
import { ButtonDirective } from 'primeng/button';
|
||||
import { Card } from 'primeng/card';
|
||||
import { Message } from 'primeng/message';
|
||||
import { catchError, finalize } from 'rxjs';
|
||||
import { COOKIE_KEYS } from 'src/assets/constants';
|
||||
import { IPosAccessibleResponse } from '../../models/pos.io';
|
||||
import { PosService } from '../../modules/landing/services/main.service';
|
||||
|
||||
@Component({
|
||||
selector: 'pos-choose-cards',
|
||||
templateUrl: './choose-pos.component.html',
|
||||
imports: [PageLoadingComponent, Card, ButtonDirective, Message],
|
||||
})
|
||||
export class PosChooseCardsComponent {
|
||||
@Output() onChoose = new EventEmitter();
|
||||
|
||||
private readonly service = inject(PosService);
|
||||
private readonly cookieService = inject(CookieService);
|
||||
|
||||
loading = signal(true);
|
||||
items = signal<IPosAccessibleResponse[]>([]);
|
||||
error = signal<Maybe<HttpErrorResponse>>(null);
|
||||
|
||||
getData() {
|
||||
this.loading.set(true);
|
||||
this.service
|
||||
.getAccessible()
|
||||
.pipe(
|
||||
finalize(() => this.loading.set(false)),
|
||||
catchError((err) => {
|
||||
this.error.set(err);
|
||||
throw err;
|
||||
}),
|
||||
)
|
||||
.subscribe((res) => {
|
||||
this.items.set(res?.data || []);
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.getData();
|
||||
}
|
||||
|
||||
selectPos(pos: IPosAccessibleResponse) {
|
||||
this.cookieService.set(COOKIE_KEYS.POS_ID, pos.id, {
|
||||
sameSite: 'Lax', // or 'Strict' for same-site requests only
|
||||
secure: false,
|
||||
path: '/',
|
||||
domain: 'localhost',
|
||||
});
|
||||
|
||||
this.onChoose.emit();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
<ng-template #topbarStart>
|
||||
<p-button (click)="toggleMenu()" icon="pi pi-bars" outlined size="large" />
|
||||
</ng-template>
|
||||
|
||||
<ng-template #topbarCenter>
|
||||
@if (posInfo()) {
|
||||
<a [routerLink]="homeRouteLink" class="flex flex-col items-center justify-center gap-2">
|
||||
<div class="w-8 h-8">
|
||||
<img
|
||||
[src]="posInfo()?.partner?.logo_url ?? placeholderLogo"
|
||||
alt="Logo"
|
||||
class="w-full h-full object-cover rounded-md bg-surface-card"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-base font-semibold">{{ posInfo()?.partner?.name }}</span>
|
||||
</a>
|
||||
}
|
||||
</ng-template>
|
||||
|
||||
<ng-template #topbarEnd>
|
||||
<div class="">
|
||||
<p-menu #menu [model]="profileMenuItems" [popup]="true" />
|
||||
<p-button (click)="menu.toggle($event)" icon="pi pi-user" outlined size="large" />
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
@if (loading()) {
|
||||
<shared-page-loading />
|
||||
} @else {
|
||||
<!-- <div class="w-svw h-svh bg-surface-ground flex flex-col gap-4 p-4"> -->
|
||||
<!-- <div class="w-full flex items-center gap-4 shrink-0 justify-between">
|
||||
<div class="flex gap-2 items-center">
|
||||
@if (posInfo()) {
|
||||
<div class="w-10 h-10">
|
||||
<img [src]="placeholderLogo" alt="Logo" class="w-full h-full object-cover rounded-md bg-surface-card" />
|
||||
</div>
|
||||
<span class="text-lg font-bold">
|
||||
{{ posInfo()?.name }} ({{ posInfo()?.complex!.name }} - {{ posInfo()?.businessActivity!.name }})
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
<div class="flex gap-2 items-center">
|
||||
<div class="bg-surface-card px-3 rounded-md shadow-sm h-9 flex items-center">
|
||||
<span [jalaliDate]="now" jalaliFormat="dddd YYYY/MM/DD" class="text-base"></span>
|
||||
</div>
|
||||
<div class="">
|
||||
<p-menu #menu [model]="profileMenuItems" [popup]="true" />
|
||||
<button pButton (click)="menu.toggle($event)" icon="pi pi-user" severity="contrast">
|
||||
{{ posProfile()?.account?.username }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
@if (error()) {
|
||||
@switch (error()?.status) {
|
||||
@case (412) {
|
||||
<pos-choose-cards class="h-full" (onChoose)="onChoosePos()" />
|
||||
}
|
||||
@default {
|
||||
<div class="h-full w-full flex items-center justify-center">
|
||||
<p-card class="border border-surface-border">
|
||||
<div class="flex flex-col gap-2 items-center justify-between shrink-0">
|
||||
<i class="pi pi-exclamation-triangle text-6xl! mb-3 text-error" aria-hidden="true"></i>
|
||||
<span class="text-xl font-semibold mb-2 text-error block"> عدم دسترسی </span>
|
||||
<p class="inline-block text-base">متاسفانه امکان دسترسی برای کاربر شما فراهم نیست</p>
|
||||
<button pButton outlined severity="danger" class="mt-5 w-32" (click)="logout()">خروج</button>
|
||||
</div>
|
||||
</p-card>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
<pos-main-menu-sidebar [(visible)]="mainMenuVisible" />
|
||||
<router-outlet></router-outlet>
|
||||
}
|
||||
<!-- </div> -->
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
import { AuthService } from '@/core';
|
||||
import { LayoutService } from '@/layout/service/layout.service';
|
||||
import { PageLoadingComponent } from '@/shared/components/page-loading.component';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import {
|
||||
AfterViewInit,
|
||||
Component,
|
||||
TemplateRef,
|
||||
ViewChild,
|
||||
computed,
|
||||
inject,
|
||||
signal,
|
||||
} from '@angular/core';
|
||||
import { RouterLinkWithHref, RouterOutlet } from '@angular/router';
|
||||
import { MenuItem } from 'primeng/api';
|
||||
import { Button, ButtonDirective } from 'primeng/button';
|
||||
import { Card } from 'primeng/card';
|
||||
import { Menu } from 'primeng/menu';
|
||||
import images from 'src/assets/images';
|
||||
import { PosInfoStore, PosProfileStore } from '../../store';
|
||||
import { DeviceInfoStore } from '../../store/device.store';
|
||||
import { PosMainMenuSidebarComponent } from '../mainMenuSidebar/main-menu-sidebar.component';
|
||||
import { PosChooseCardsComponent } from './choose-pos.component';
|
||||
|
||||
@Component({
|
||||
selector: 'pos-pages-layout',
|
||||
templateUrl: './layout.component.html',
|
||||
imports: [
|
||||
PageLoadingComponent,
|
||||
ButtonDirective,
|
||||
Card,
|
||||
PosChooseCardsComponent,
|
||||
Button,
|
||||
PosMainMenuSidebarComponent,
|
||||
Menu,
|
||||
CommonModule,
|
||||
RouterLinkWithHref,
|
||||
RouterOutlet,
|
||||
],
|
||||
})
|
||||
export class PosPagesLayoutComponent implements AfterViewInit {
|
||||
constructor() {}
|
||||
|
||||
// private readonly nativeBridgeService = inject(NativeBridgeService);
|
||||
// private readonly toastService = inject(ToastService);
|
||||
|
||||
@ViewChild('topbarStart', { static: true }) topbarStart!: TemplateRef<any>;
|
||||
@ViewChild('topbarCenter', { static: true }) topbarCenter!: TemplateRef<any>;
|
||||
@ViewChild('topbarEnd', { static: true }) topbarEnd!: TemplateRef<any>;
|
||||
|
||||
private readonly posProfileStore = inject(PosProfileStore);
|
||||
private readonly posInfoStore = inject(PosInfoStore);
|
||||
private readonly deviceInfoStore = inject(DeviceInfoStore);
|
||||
private readonly authService = inject(AuthService);
|
||||
private readonly layoutService = inject(LayoutService);
|
||||
|
||||
mainMenuVisible = signal(false);
|
||||
|
||||
readonly posProfileLoading = computed(() => this.posProfileStore.loading());
|
||||
readonly posProfile = computed(() => this.posProfileStore.entity());
|
||||
readonly posProfileError = computed(() => this.posProfileStore.error());
|
||||
|
||||
readonly posInfoLoading = computed(() => this.posInfoStore.loading());
|
||||
readonly posInfo = computed(() => this.posInfoStore.entity());
|
||||
readonly posInfoError = computed(() => this.posInfoStore.error());
|
||||
|
||||
readonly loading = computed(() => this.posProfileLoading());
|
||||
readonly error = computed(() => this.posProfileError());
|
||||
|
||||
readonly deviceInfo = computed(() => this.deviceInfoStore.entity());
|
||||
|
||||
logout = () => {
|
||||
this.authService.logout();
|
||||
};
|
||||
|
||||
profileMenuItems: MenuItem[] = [
|
||||
{
|
||||
label: 'راهنمای سامانه',
|
||||
icon: 'pi pi-question-circle',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: 'خروج',
|
||||
icon: 'pi pi-sign-out',
|
||||
command: this.logout,
|
||||
},
|
||||
];
|
||||
|
||||
placeholderLogo = images.placeholders.logo;
|
||||
|
||||
now = new Date();
|
||||
|
||||
homeRouteLink = '/pos';
|
||||
|
||||
async getData() {
|
||||
// await this.layoutService.changeFullPageLoading(true);
|
||||
// await this.posProfileStore.getData().subscribe({
|
||||
// next: () => {
|
||||
// this.posInfoStore
|
||||
// .getData()
|
||||
// .pipe(
|
||||
// finalize(() => {
|
||||
// this.layoutService.changeFullPageLoading(false);
|
||||
// }),
|
||||
// )
|
||||
// .subscribe();
|
||||
// },
|
||||
// });
|
||||
}
|
||||
|
||||
toggleMenu() {
|
||||
this.mainMenuVisible.update((v) => !v);
|
||||
}
|
||||
|
||||
onChoosePos() {
|
||||
this.getData();
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.layoutService.setTopbarStartSlot(this.topbarStart);
|
||||
this.layoutService.setTopbarCenterSlot(this.topbarCenter);
|
||||
this.layoutService.setTopbarEndSlot(this.topbarEnd);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.layoutService.changeIsFullPage(false);
|
||||
this.layoutService.setTopbarStartSlot(null);
|
||||
this.layoutService.setTopbarCenterSlot(null);
|
||||
this.layoutService.setTopbarEndSlot(null);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user