update component path

2025-03-30 19:56:21 +00:00 · 2021-10-07 21:08:21 +03:00 · 2021-10-07 21:08:21 +03:00 · 7aca1f699c
commit 7aca1f699c
parent cbc822ce65
4 changed files with 8 additions and 8 deletions
--- a/src/components/dashboard/users/UserCardBox.tsx
+++ b/src/components/dashboard/users/UserCardBox.tsx
@ -0,0 +1,100 @@
+import React, { FunctionComponent } from 'react';
+import { formatDistanceToNow } from 'date-fns';
+import { localeWithSuffix } from '../../../scripts/dfnshelper';
+import globalize from '../../../scripts/globalize';
+import cardBuilder from '../../cardbuilder/cardBuilder';
+
+const createLinkElement = ({ user, renderImgUrl }) => ({
+    __html: `<a
+        is="emby-linkbutton"
+        class="cardContent"
+        href="#!/useredit.html?userId=${user.Id}"
+        >
+        ${renderImgUrl}
+    </a>`
+});
+
+const createButtonElement = () => ({
+    __html: `<button
+        is="paper-icon-button-light"
+        type="button"
+        class="btnUserMenu flex-shrink-zero"
+        >
+        <span class="material-icons more_vert"></span>
+    </button>`
+});
+
+type IProps = {
+    user?: Record<string, any>;
+}
+
+const getLastSeenText = (lastActivityDate) => {
+    if (lastActivityDate) {
+        return globalize.translate('LastSeen', formatDistanceToNow(Date.parse(lastActivityDate), localeWithSuffix));
+    }
+
+    return '';
+};
+
+const UserCardBox: FunctionComponent<IProps> = ({ user = [] }: IProps) => {
+    let cssClass = 'card squareCard scalableCard squareCard-scalable';
+
+    if (user.Policy.IsDisabled) {
+        cssClass += ' grayscale';
+    }
+
+    let imgUrl;
+
+    if (user.PrimaryImageTag) {
+        imgUrl = window.ApiClient.getUserImageUrl(user.Id, {
+            width: 300,
+            tag: user.PrimaryImageTag,
+            type: 'Primary'
+        });
+    }
+
+    let imageClass = 'cardImage';
+
+    if (user.Policy.IsDisabled) {
+        imageClass += ' disabledUser';
+    }
+
+    const lastSeen = getLastSeenText(user.LastActivityDate);
+
+    const renderImgUrl = imgUrl ?
+        `<div class='${imageClass}' style='background-image:url(${imgUrl})'></div>` :
+        `<div class='${imageClass} ${cardBuilder.getDefaultBackgroundClass(user.Name)} flex align-items-center justify-content-center'>
+            <span class='material-icons cardImageIcon person'></span>
+        </div>`;
+
+    return (
+        <div data-userid={user.Id} className={cssClass}>
+            <div className='cardBox visualCardBox'>
+                <div className='cardScalable visualCardBox-cardScalable'>
+                    <div className='cardPadder cardPadder-square'></div>
+                    <div
+                        dangerouslySetInnerHTML={createLinkElement({
+                            user: user,
+                            renderImgUrl: renderImgUrl
+                        })}
+                    />
+                </div>
+                <div className='cardFooter visualCardBox-cardFooter'>
+                    <div className='cardText flex align-items-center'>
+                        <div className='flex-grow' style={{overflow: 'hidden', textOverflow: 'ellipsis'}}>
+                            {user.Name}
+                        </div>
+                        <div
+                            dangerouslySetInnerHTML={createButtonElement()}
+                        />
+                    </div>
+                    <div className='cardText cardText-secondary'>
+                        {lastSeen != '' ? lastSeen : ''}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default UserCardBox;