jellyfin-web/src/controllers/dashboard/users/userprofilespage.js

define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-button-light', 'cardStyle', 'emby-button', 'indicators', 'flexStyles'], function (loading, dom, globalize, datefns, dfnshelper) {
    'use strict';

    function deleteUser(page, id) {
        var msg = globalize.translate('DeleteUserConfirmation');

        require(['confirm'], function (confirm) {
            confirm.default({
                title: globalize.translate('DeleteUser'),
                text: msg,
                confirmText: globalize.translate('ButtonDelete'),
                primary: 'delete'
            }).then(function () {
                loading.show();
                ApiClient.deleteUser(id).then(function () {
                    loadData(page);
                });
            });
        });
    }

    function showUserMenu(elem) {
        var card = dom.parentWithClass(elem, 'card');
        var page = dom.parentWithClass(card, 'page');
        var userId = card.getAttribute('data-userid');
        var menuItems = [];
        menuItems.push({
            name: globalize.translate('ButtonOpen'),
            id: 'open',
            icon: 'mode_edit'
        });
        menuItems.push({
            name: globalize.translate('ButtonLibraryAccess'),
            id: 'access',
            icon: 'lock'
        });
        menuItems.push({
            name: globalize.translate('ButtonParentalControl'),
            id: 'parentalcontrol',
            icon: 'person'
        });
        menuItems.push({
            name: globalize.translate('ButtonDelete'),
            id: 'delete',
            icon: 'delete'
        });

        require(['actionsheet'], function (actionsheet) {
            actionsheet.show({
                items: menuItems,
                positionTo: card,
                callback: function (id) {
                    switch (id) {
                        case 'open':
                            Dashboard.navigate('useredit.html?userId=' + userId);
                            break;

                        case 'access':
                            Dashboard.navigate('userlibraryaccess.html?userId=' + userId);
                            break;

                        case 'parentalcontrol':
                            Dashboard.navigate('userparentalcontrol.html?userId=' + userId);
                            break;

                        case 'delete':
                            deleteUser(page, userId);
                    }
                }
            });
        });
    }

    function getUserHtml(user, addConnectIndicator) {
        var html = '';
        var cssClass = 'card squareCard scalableCard squareCard-scalable';

        if (user.Policy.IsDisabled) {
            cssClass += ' grayscale';
        }

        html += "<div data-userid='" + user.Id + "' class='" + cssClass + "'>";
        html += '<div class="cardBox visualCardBox">';
        html += '<div class="cardScalable visualCardBox-cardScalable">';
        html += '<div class="cardPadder cardPadder-square"></div>';
        html += '<a is="emby-linkbutton" class="cardContent" href="useredit.html?userId=' + user.Id + '">';
        var imgUrl;

        if (user.PrimaryImageTag) {
            imgUrl = ApiClient.getUserImageUrl(user.Id, {
                width: 300,
                tag: user.PrimaryImageTag,
                type: 'Primary'
            });
        }

        var imageClass = 'cardImage';

        if (user.Policy.IsDisabled) {
            imageClass += ' disabledUser';
        }

        if (imgUrl) {
            html += '<div class="' + imageClass + '" style="background-image:url(\'' + imgUrl + "');\">";
        } else {
            html += '<div class="' + imageClass + ' flex align-items-center justify-content-center">';
            html += '<span class="material-icons cardImageIcon person"></span>';
        }

        html += '</div>';
        html += '</a>';
        html += '</div>';
        html += '<div class="cardFooter visualCardBox-cardFooter">';
        html += '<div class="cardText flex align-items-center">';
        html += '<div class="flex-grow" style="overflow:hidden;text-overflow:ellipsis;">';
        html += user.Name;
        html += '</div>';
        html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu flex-shrink-zero"><span class="material-icons more_vert"></span></button>';
        html += '</div>';
        html += '<div class="cardText cardText-secondary">';
        var lastSeen = getLastSeenText(user.LastActivityDate);
        html += '' != lastSeen ? lastSeen : '&nbsp;';
        html += '</div>';
        html += '</div>';
        html += '</div>';
        return html + '</div>';
    }
    // FIXME: It seems that, sometimes, server sends date in the future, so date-fns displays messages like 'in less than a minute'. We should fix
    // how dates are returned by the server when the session is active and show something like 'Active now', instead of past/future sentences
    function getLastSeenText(lastActivityDate) {
        if (lastActivityDate) {
            return globalize.translate('LastSeen', datefns.formatDistanceToNow(Date.parse(lastActivityDate), dfnshelper.localeWithSuffix));
        }

        return '';
    }

    function getUserSectionHtml(users, addConnectIndicator) {
        return users.map(function (u__q) {
            return getUserHtml(u__q, addConnectIndicator);
        }).join('');
    }

    function renderUsers(page, users) {
        page.querySelector('.localUsers').innerHTML = getUserSectionHtml(users, true);
    }

    function showPendingUserMenu(elem) {
        var menuItems = [];
        menuItems.push({
            name: globalize.translate('ButtonCancel'),
            id: 'delete',
            icon: 'delete'
        });

        require(['actionsheet'], function (actionsheet) {
            var card = dom.parentWithClass(elem, 'card');
            var page = dom.parentWithClass(card, 'page');
            var id = card.getAttribute('data-id');
            actionsheet.show({
                items: menuItems,
                positionTo: card,
                callback: function (menuItemId) {
                    switch (menuItemId) {
                        case 'delete':
                            cancelAuthorization(page, id);
                    }
                }
            });
        });
    }

    function getPendingUserHtml(user) {
        var html = '';
        html += "<div data-id='" + user.Id + "' class='card squareCard scalableCard squareCard-scalable'>";
        html += '<div class="cardBox cardBox-bottompadded visualCardBox">';
        html += '<div class="cardScalable visualCardBox-cardScalable">';
        html += '<div class="cardPadder cardPadder-square"></div>';
        html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="#">';

        if (user.ImageUrl) {
            html += '<div class="cardImage" style="background-image:url(\'' + user.ImageUrl + "');\">";
            html += '</div>';
        } else {
            html += '<span class="cardImageIcon material-icons person"></span>';
        }

        html += '</a>';
        html += '</div>';
        html += '<div class="cardFooter visualCardBox-cardFooter">';
        html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
        html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu"><span class="material-icons more_vert"></span></button>';
        html += '</div>';
        html += '<div class="cardText" style="padding-top:10px;padding-bottom:10px;">';
        html += user.UserName;
        html += '</div>';
        html += '</div>';
        html += '</div>';
        return html + '</div>';
    }

    function renderPendingGuests(page, users) {
        if (users.length) {
            page.querySelector('.sectionPendingGuests').classList.remove('hide');
        } else {
            page.querySelector('.sectionPendingGuests').classList.add('hide');
        }

        page.querySelector('.pending').innerHTML = users.map(getPendingUserHtml).join('');
    }

    // TODO cvium: maybe reuse for invitation system
    function cancelAuthorization(page, id) {
        loading.show();
        ApiClient.ajax({
            type: 'DELETE',
            url: ApiClient.getUrl('Connect/Pending', {
                Id: id
            })
        }).then(function () {
            loadData(page);
        });
    }

    function loadData(page) {
        loading.show();
        ApiClient.getUsers().then(function (users) {
            renderUsers(page, users);
            loading.hide();
        });
        // TODO cvium
        renderPendingGuests(page, []);
        // ApiClient.getJSON(ApiClient.getUrl("Connect/Pending")).then(function (pending) {
        //
        // });
    }

    function showInvitePopup(page) {
        require(['components/guestinviter/guestinviter'], function (guestinviter) {
            guestinviter.show().then(function () {
                loadData(page);
            });
        });
    }

    pageIdOn('pageinit', 'userProfilesPage', function () {
        var page = this;
        page.querySelector('.btnAddUser').addEventListener('click', function() {
            Dashboard.navigate('usernew.html');
        });
        page.querySelector('.localUsers').addEventListener('click', function (e__e) {
            var btnUserMenu = dom.parentWithClass(e__e.target, 'btnUserMenu');

            if (btnUserMenu) {
                showUserMenu(btnUserMenu);
            }
        });
        page.querySelector('.pending').addEventListener('click', function (e__r) {
            var btnUserMenu = dom.parentWithClass(e__r.target, 'btnUserMenu');

            if (btnUserMenu) {
                showPendingUserMenu(btnUserMenu);
            }
        });
    });
    pageIdOn('pagebeforeshow', 'userProfilesPage', function () {
        loadData(this);
    });
});