Componente User Info

Documentação para adicionar o componente User Info ao seu projeto, caso tenha sido criado antes da versão 2 do Teknisa CLI.

Dica

Caso seu projeto tenha sido criado a partir da versão 2 do Teknisa CLI, será necessário realizar apenas os passos do Backend

Backend

Atenção

A dependência teknisa/libraries-next deve estar, no mínimo, na versão 2.2.* em seu produto

• Adicione o parâmetro fileServerFilesUrl para fornecer a URL de acesso aos arquivos da aplicação File Server, caso seu produto ainda não possua.

Exemplo com o valor para desenvolvimento:

<parameter key="fileServerFilesUrl">http://midiatest.teknisa.com/files/</parameter>

Frontend

• Adicione o componente ZdAvatar como dependência do seu projeto. Consulte sua documentação aqui (opens new window).

• Adicione o código abaixo na propriedade rightSlot, que fica na propriedade header do arquivo App.vue.

{
    name: 'userInfo',
    component: 'TekUserInfo',
    minWidth: '280px',
    showProfileChange: true,
    user: '{{AppController.userName}}',
    userImage: '',
    aboutImage: '{{AppController.logo}}',
    avatarProps: {
        name: 'tekUserInfoAvatarProps',
        component: 'ZdAvatar',
        color: 'primary',
        avatarSlot: [
            {
                name: 'tekUserInfoAvatarPropsTextSlot',
                component: 'ZdText',
                cssClass: 'white--text',
                tag: 'h2',
                text: '{{AppController.nameInitialLetter}}'
            }
        ]
    },
    topSlot: [
        {
            name: 'userInfoTopSlotList',
            component: 'ZdList',
            items: [
                {
                    name: 'item1',
                    component: 'ZdListItem',
                    title: 'Exemplo 1',
                    prependIcon: 'mdi-account-convert',
                    cssClass: 'zd-px-2',
                },
                {
                    name: 'item2',
                    component: 'ZdListItem',
                    title: 'Exemplo 2',
                    prependIcon: 'mdi-application-cog',
                    cssClass: 'zd-px-2'
                },
            ],
        },
        {
            name: 'userInfoTopSlotDivider',
            component: 'ZdDivider'
        },
        {
            name: 'tekUserInfoList',
            component: 'TekUserInfoList',
            parentName: 'userInfo',
        },
    ],
    bottomSlot: [],
    events: {
        onCreated: '{{AppController.userInfoOnCreatedted}}',
        onLogoutClick: '{{AppController.userInfoOnLogoutClick}}'
    }
}

• O Controller que gerencia esse componente é o AppController. Ele já deve existir na sua aplicação, portanto você deve apenas adicionar os métodos necessários.

Exemplo de AppController completo abaixo. Modifique ou adicione os métodos de acordo com sua necessidade.

import { Http, IEventParam, Metadata, Singleton } from '@zeedhi/core';
import { Menu, MenuButton } from '@zeedhi/common';
import { TekLibAuth } from '@zeedhi/tek-lib';
import { TekUserInfo } from '@zeedhi/teknisa-components-common';

@Singleton
export class AppController {
	public hasImage: boolean = false;

	get notHasImage(): boolean {
		return !this.hasImage;
	}

	public imagePath: string = '';

	public toggleMenu({ component }: IEventParam<MenuButton>) {
		const menu = Metadata.getInstance<Menu>(component.menuName);
		menu.toggleMenu();
		if (menu.drawer && !menu.miniState) {
			if (menu.showSearch) {
				setTimeout(() => {
					const searchInput = document.querySelector('.zd-menu-search-input input');
					if (searchInput) (searchInput as HTMLElement).focus();
				}, 100);
			} else {
				const firstMenuItem = document.querySelector('.zd-menu-link, .zd-menu-group > div');
				if (firstMenuItem) (firstMenuItem as HTMLElement).focus();
			}
		}
	}

	get userName() {
		const username = localStorage.getItem('LOGIN_USER_NAME') || '';
		return this.getFormattedName(username);
	}

	get nameInitialLetter() {
		const name = this.userName;
		return name.slice(0, 1);
	}

	get logo() {
		return '/assets/logo.png';
	}

	public showMessageExpiredMenu() {
		TekLibAuth.showMessageExpiredMenu();
	}

	public async userInfoOnCreatedted() {
		const userInfoComponent = Metadata.getInstance<TekUserInfo>('userInfo');
		const currentModule = this.getCurrentModule();

		const { data } = await Http.get('/lib_generalInfo', { params: { currentModule } });
		userInfoComponent.versionInfo = data.versionInfo;

		if (data.userInfo.IMAGE) {
			this.hasImage = true;
			this.imagePath = data.userInfo.IMAGE;
		} else {
			this.hasImage = false;
		}
	}

	public userInfoOnLogoutClick() {
		TekLibAuth.logoutConfirm();
	}

	private getFormattedName(username: string): string {
		const usernameLowerCase = username.toLowerCase();
		const name = usernameLowerCase.replace(/(^\w{1})|(\s+\w{1})/g, (letter: string) => letter.toUpperCase());
		const splitName = name.split(' ');
		if (splitName.length > 1) {
			const firstName = splitName.shift();
			const lastName = splitName.pop();
			let middleName = '';

			splitName.forEach((item) => {
				middleName += ` ${item.slice(0, 1)}. `;
			});

			return `${firstName} ${middleName} ${lastName}`;
		}
		return name;
	}

	private getCurrentModule(): string {
		const { href } = window.location;
		let currentModule = 'product';
		if (href.includes('/modules/')) {
			let auxHref = href.split('modules/');
			auxHref = auxHref[1].split('/');
			[currentModule] = auxHref;
		}

		return currentModule;
	}
}

Dica

O projeto do Zmart Next (opens new window) já utiliza esse componente e pode ser utilizado como consulta.