@unicef-polymer/etools-unicef
Version:
eTools UNICEF library of reusable components
578 lines (553 loc) • 23.9 kB
JavaScript
import { __decorate } from "tslib";
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { adminIcon, apdIcon, dashIcon, externalIcon, famIcon, fmIcon, pmpIcon, gPDIcon, pseaIcon, tpmIcon, tripsIcon, unppIcon, ampIcon, menuIcon, storageIcon } from './app-selector-icons';
import '../etools-icon-button/etools-icon-button';
import './selector-confirm';
import { getTranslation } from './utils/translate';
import { openDialog } from '../utils/utils';
export var Applications;
(function (Applications) {
Applications["PMP"] = "pmp";
Applications["EPD"] = "epd";
Applications["T2F"] = "t2f";
Applications["TPM"] = "tpm";
Applications["AP"] = "ap";
Applications["PSEA"] = "psea";
Applications["FM"] = "fm";
Applications["LM"] = "lastmile";
Applications["APD"] = "apd";
Applications["DASH"] = "dash";
Applications["ADMIN"] = "admin";
Applications["AMP"] = "amp";
Applications["MENU"] = "menu";
Applications["GPD"] = "government";
})(Applications || (Applications = {}));
export var GROUPS;
(function (GROUPS) {
GROUPS["TPM"] = "Third Party Monitor";
GROUPS["USER"] = "UNICEF User";
GROUPS["AUDITOR"] = "Auditor";
GROUPS["CO_ADMINISTRATOR"] = "Country Office Administrator";
})(GROUPS || (GROUPS = {}));
let AppSelector = class AppSelector extends LitElement {
constructor() {
super(...arguments);
this.language = window.EtoolsLanguage || 'en';
this.iconTitle = 'APP_SELECTOR';
this.baseSite = window.location.origin;
this.allowedAps = [];
this.hiddenApps = [Applications.PSEA];
this.opened = false;
this.appPermissionsByGroup = new Map([
[Applications.DASH, [GROUPS.USER]],
[Applications.PMP, [GROUPS.USER]],
[Applications.T2F, [GROUPS.USER]],
[Applications.TPM, [GROUPS.USER, GROUPS.TPM]],
[Applications.AP, [GROUPS.USER, GROUPS.AUDITOR]],
[Applications.APD, [GROUPS.USER]],
[Applications.FM, [GROUPS.USER, GROUPS.TPM]]
]);
}
set user(user) {
this.setPermissions(user);
}
render() {
return html `
<style>
etools-icon-button.apps-button {
display: flex;
flex-direction: row;
--etools-icon-font-size: var(--etools-font-size-24, 24px);
padding: var(--app-selector-button-padding, 10px 16px 10px 16px);
color: var(--header-secondary-text-color, rgba(255, 255, 255, 1));
z-index: 100;
box-sizing: content-box !important;
}
etools-icon-button.icon-opened {
background: #ffffff;
color: var(--dark-primary-text-color, rgba(0, 0, 0, 0.87));
}
</style>
<etools-icon-button
.label="${this.iconTitle === 'APP_SELECTOR' ? getTranslation(this.language, 'APP_SELECTOR') : this.iconTitle}"
.title="${this.iconTitle === 'APP_SELECTOR' ? getTranslation(this.language, 'APP_SELECTOR') : this.iconTitle}"
="${this.toggleMenu}"
class="apps-button ${this.opened ? 'icon-opened' : ''}"
name="apps"
></etools-icon-button>
<div class="dropdown">
${this.opened
? html `
<div class="etools-apps">
<span class="module-group-title">${getTranslation(this.language, 'PROGRAMME_MANAGEMENT')}</span>
<div class="module-group">
<a
class="content-wrapper"
rel="external"
="${this.goToPage}"
href="https://www.unpartnerportal.org/login"
target="_blank"
>
${unppIcon}
<div class="app-title">${getTranslation(this.language, 'UN_PARTNER_PORTAL')}</div>
${externalIcon}
</a>
${this.checkAllowedApps([Applications.PMP])
? html `
<a
class="content-wrapper"
rel="external"
="${this.goToPage}"
href="${this.baseSite}/${Applications.PMP}/"
>
${pmpIcon}
<div class="app-title">
${getTranslation(this.language, 'PARTNERSHIP_MANAGEMENT')}
</div>
</a>
`
: ''}
${this.checkAllowedApps([Applications.EPD])
? html `
<a
class="content-wrapper"
rel="external"
="${this.goToPage}"
href="${this.baseSite}/${Applications.EPD}/"
>
${pmpIcon}
<div class="app-title">${getTranslation(this.language, 'EPD')}</div>
</a>
`
: ''}
${this.checkAllowedApps([Applications.GPD])
? html `
<a
class="content-wrapper"
rel="external"
="${this.goToPage}"
href="${this.baseSite}/${Applications.GPD}/"
>
${gPDIcon}
<div class="app-title">${getTranslation(this.language, 'GPD')}</div>
</a>
`
: ''}
</div>
${this.checkAllowedApps([
Applications.T2F,
Applications.AP,
Applications.TPM,
Applications.PSEA
])
? html `
<span class="module-group-title"
>${getTranslation(this.language, 'MONITORING_ASSURANCE')}</span
>
<div class="module-group">
${this.checkAllowedApps([Applications.T2F])
? html `
<a
class="content-wrapper"
rel="external"
="${this.goToPageWithConfirm}"
href="${this.baseSite}/${Applications.T2F}/"
>
${tripsIcon}
<div class="app-title">
${getTranslation(this.language, 'TRIP_MANAGEMENT')}
</div>
</a>
`
: ''}
${this.checkAllowedApps([Applications.TPM])
? html `
<a
class="content-wrapper"
rel="external"
="${this.goToPage}"
href="${this.baseSite}/${Applications.TPM}/"
>
${tpmIcon}
<div class="app-title">
${getTranslation(this.language, 'THIRD_PARTY_MONITORING')}
</div>
</a>
`
: ''}
${this.checkAllowedApps([Applications.AP])
? html `
<a
class="content-wrapper"
rel="external"
="${this.goToPage}"
href="${this.baseSite}/${Applications.AP}/"
>
${famIcon}
<div class="app-title">
${getTranslation(this.language, 'FINANCIAL_ASSURANCE')}
</div>
</a>
`
: ''}
${this.checkAllowedApps([Applications.PSEA])
? html `
<a
class="content-wrapper"
rel="external"
="${this.goToPage}"
href="${this.baseSite}/${Applications.PSEA}/"
>
${pseaIcon}
<div class="app-title">
${getTranslation(this.language, 'PSEA_ASSURANCE')}
</div>
</a>
`
: ''}
${this.checkAllowedApps([Applications.FM])
? html `
<a
class="content-wrapper"
rel="external"
="${this.goToPage}"
href="${this.baseSite}/${Applications.FM}/"
>
${fmIcon}
<div class="app-title">
${getTranslation(this.language, 'FIELD_MONITORING')}
</div>
</a>
`
: ''}
</div>
`
: ''}
<span class="module-group-title">${getTranslation(this.language, 'DASHBOARDS_ANALYTICS')}</span>
<div class="module-group">
${this.checkAllowedApps([Applications.APD])
? html `
<a
class="content-wrapper"
rel="external"
="${this.goToPage}"
href="${this.baseSite}/${Applications.APD}/"
>
${apdIcon}
<div class="app-title">${getTranslation(this.language, 'ACTION_POINTS')}</div>
</a>
`
: ''}
${this.checkAllowedApps([Applications.DASH])
? html `
<a
class="content-wrapper"
rel="external"
="${this.goToPage}"
href="${this.baseSite}/${Applications.DASH}/"
>
${dashIcon}
<div class="app-title">${getTranslation(this.language, 'DASHBOARDS')}</div>
</a>
`
: ''}
<a class="datamart content-wrapper" rel="external" href="https://datamart.unicef.io"
target="_blank">
${storageIcon}
<div class="app-title">${getTranslation(this.language, 'DATAMART')}</div>
${externalIcon}
</a>
</div>
</div>
${this.checkAllowedApps([Applications.AMP])
? html `
<span class="module-group-title"
>${getTranslation(this.language, 'ADMINISTRATION')}</span
>
<div class="module-group">
<a
class="content-wrapper"
rel="external"
="${this.goToPage}"
href="${this.baseSite}/${Applications.AMP}/"
>
${ampIcon}
<div class="app-title">${getTranslation(this.language, 'AMP')}</div>
</a>
<div class="content-wrapper empty-wrapper"></div>
</div>
`
: ''}
<div class="module-group gray">
${this.checkAllowedApps([Applications.ADMIN])
? html `
<a class="admin" rel="external" href="${this.baseSite}/${Applications.ADMIN}/">
${adminIcon}
<div class="app-title">${getTranslation(this.language, 'ADMIN')}</div>
</a>
`
: ''}
<a class="admin" rel="external" href="${this.baseSite}/${Applications.MENU}/">
${menuIcon}
<div class="app-title">${getTranslation(this.language, 'MENU')}</div>
</a>
</div>
</div>
`
: ''}
</div>
`;
}
connectedCallback() {
super.connectedCallback();
document.addEventListener('click', () => {
this.opened = false;
});
document.addEventListener('language-changed', this.handleLanguageChange.bind(this));
document.addEventListener('keydown', this.handleKeyDown.bind(this));
this.addEventListener('click', (e) => e.stopPropagation());
}
disconnectedCallback() {
super.disconnectedCallback();
document.removeEventListener('language-changed', this.handleLanguageChange.bind(this));
document.removeEventListener('keydown', this.handleKeyDown.bind(this));
}
handleLanguageChange(e) {
this.language = e.detail.language;
}
handleKeyDown(e) {
var _a;
if (e.key === 'Escape') {
this.opened = false;
const button = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('etools-icon-button');
if (button) {
button.focus();
}
}
}
/**
* Toggles the menu opened and closed
*
*/
toggleMenu() {
this.opened = !this.opened;
}
checkAllowedApps(applications) {
if (applications.every((application) => this.hiddenApps.includes(application))) {
return false;
}
return applications.some((application) => this.allowedAps.includes(application));
}
// [ch14186], https://github.com/unicef-polymer/etools-app-selector/pull/54/files
goToPage(e) {
var _a;
const path = ((_a = e.target.closest('a')) === null || _a === void 0 ? void 0 : _a.getAttribute('href')) || '';
if (!e.ctrlKey && !e.metaKey) {
window.location.href = path;
}
}
goToPageWithConfirm(e) {
var _a;
const path = ((_a = e.target.closest('a')) === null || _a === void 0 ? void 0 : _a.getAttribute('href')) || '';
e.preventDefault();
e.stopImmediatePropagation();
openDialog({
dialog: 'selector-confirm',
dialogData: {}
}).then(({ confirmed }) => {
if (confirmed) {
if (e.ctrlKey || e.metaKey) {
window.open(path, '_blank').focus();
}
else {
window.location.href = path;
}
}
});
}
getPresetAllowedApps(user) {
// show AMP app for all users
const allowedApplications = [Applications.AMP];
// check admin app
const isAdmin = Boolean(Boolean(user.is_superuser) || (user.groups || []).find(({ name }) => name === GROUPS.CO_ADMINISTRATOR));
if (isAdmin) {
allowedApplications.push(Applications.ADMIN);
}
// check psea app
const isTPM = (user.groups || []).some(({ name }) => name === GROUPS.TPM);
const isAuditor = (user.groups || []).some(({ name }) => name === GROUPS.AUDITOR);
if (!isTPM) {
allowedApplications.push(Applications.PSEA);
}
if (!user.is_unicef_user && !isTPM && !isAuditor) {
allowedApplications.push(Applications.EPD);
}
if (!user.is_unicef_user && user.show_gpd && user.organization.is_government) {
allowedApplications.push(Applications.GPD);
}
return allowedApplications;
}
setPermissions(user) {
if (!user) {
this.allowedAps = [];
return;
}
const allowedApplications = this.getPresetAllowedApps(user);
// check apps permissions
for (const [application, groups] of this.appPermissionsByGroup) {
const appAllowed = (user.groups || []).some(({ name }) => groups.includes(name));
if (appAllowed) {
allowedApplications.push(application);
}
}
this.allowedAps = allowedApplications;
}
};
// language=css
AppSelector.styles = css `
:host {
display: flex;
flex-direction: column;
position: relative;
width: 73px;
height: 60px;
align-items: center;
justify-content: center;
border-inline-end: 1px solid var(--light-divider-color, rgba(255, 255, 255, 0.12));
}
:host([opened]) {
background: #ffffff;
}
apps-button {
color: var(--header-secondary-text-color, rgba(255, 255, 255, 1));
}
.dropdown {
position: absolute;
inset-inline-start: 0;
top: 60px;
box-shadow:
0 16px 24px 2px rgba(0, 0, 0, 0.14),
0 6px 30px 5px rgba(0, 0, 0, 0.12),
0 8px 10px -5px rgba(0, 0, 0, 0.4);
background-color: #ffffff;
transition: 0.3s;
transform-origin: top;
transform: scaleY(0);
z-index: 90;
}
:host([opened]) .dropdown {
transform: scaleY(1);
}
.apps-select {
position: absolute;
background: var(--primary-element-background, #ffffff);
top: 60px;
z-index: 100;
padding: 0;
}
.content-wrapper {
display: flex;
align-items: stretch;
flex-direction: row;
padding: 5px;
box-sizing: border-box;
font-size: var(--etools-font-size-14, 14px);
white-space: nowrap;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
border-left: 1px solid rgba(0, 0, 0, 0.12);
width: 179px;
align-items: center;
}
.content-wrapper:hover {
background: var(--app-selector-item-hover-color, #eeeeee);
}
.empty-wrapper {
border-left: none;
}
.empty-wrapper:hover {
background: transparent;
}
.app-title {
font-size: var(--etools-font-size-13, 13px);
font-weight: 500;
padding-left: 6px;
padding-right: 6px;
line-height: 1.2;
cursor: pointer;
white-space: normal;
display: block;
justify-content: center;
max-width: 116px;
}
.etools-apps {
width: 360px;
}
svg #adminIcon path.option,
svg #externalIcon path.option {
fill: var(--dark-icon-color, #cccccc);
}
#externalIcon {
min-width: 16px;
}
.admin {
display: flex;
align-items: center;
padding-left: 4px;
width: 50%;
box-sizing: border-box;
}
.gray {
background: #eeeeee;
}
a,
a:link,
a:visited,
a:hover,
a:active {
color: var(--app-selector-text-color, rgba(0, 0, 0, 0.87));
text-decoration: none;
}
.module-group {
border-right: 1px solid rgba(0, 0, 0, 0.12);
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.module-group-title {
text-transform: capitalize;
font-weight: 450;
padding: 6px;
background: #eeeeee;
font-size: var(--etools-font-size-12, 12px);
border-right: 1px solid var(--divider-color);
border-left: 1px solid var(--divider-color);
display: flex;
color: #444444;
}
.datamart #storageIcon path {
fill: var(--light-theme-secondary-color, rgba(0, 0, 0, 0.54));
}
`;
__decorate([
property({ type: String, attribute: 'language' })
], AppSelector.prototype, "language", void 0);
__decorate([
property({ type: String })
], AppSelector.prototype, "iconTitle", void 0);
__decorate([
property({ type: String })
], AppSelector.prototype, "baseSite", void 0);
__decorate([
property({ type: Array })
], AppSelector.prototype, "allowedAps", void 0);
__decorate([
property({ type: Array })
], AppSelector.prototype, "hiddenApps", void 0);
__decorate([
property({ type: Boolean, attribute: 'opened', reflect: true })
], AppSelector.prototype, "opened", void 0);
AppSelector = __decorate([
customElement('etools-app-selector')
], AppSelector);
export { AppSelector };