@bit.rhplus/ui.antd.user-select 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export default UserSelect;
+declare function UserSelect({ users, isLoading, value, onChange, disabled, placeholder, style, ...rest }: {
+    [x: string]: any;
+    users?: any[];
+    isLoading?: boolean;
+    value: any;
+    onChange: any;
+    disabled: any;
+    placeholder?: string;
+    style: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable */
+import React, { useMemo, useState, useCallback } from 'react';
+import { Select } from 'antd';
+import Popover from 'antd/es/popover';
+import Avatar from '@bit.rhplus/ui.avatar';
+import useUserDetails from './useUserDetails';
+import './style.css';
+const fieldMap = {
+    userName: 'Uživatel',
+    firstName: 'Jméno',
+    lastName: 'Příjmení',
+    email: 'Email',
+    key: 'Klíč',
+};
+const getDisplayName = (user) => `${user.firstName || ''} ${user.lastName || ''}`.trim() || user.userName || user.name || '';
+const getAvatarUrl = (userKey) => userKey ? `/user_service_api/Users/Avatar?userKey=${userKey}` : null;
+const UserPopoverContent = ({ user, loading }) => {
+    if (loading)
+        return _jsx("div", { children: "Na\u010D\u00EDt\u00E1m..." });
+    if (!user)
+        return _jsx("div", { children: "U\u017Eivatel nenalezen" });
+    return (_jsx("div", { className: "user-select-popover", children: _jsx("table", { children: _jsx("tbody", { children: Object.entries(fieldMap).map(([field, label]) => (_jsxs("tr", { children: [_jsx("td", { children: _jsxs("b", { children: [label, ":"] }) }), _jsx("td", { children: user[field] || 'N/A' })] }, field))) }) }) }));
+};
+const OPTION_STYLE = { display: 'flex', alignItems: 'center', gap: 8 };
+const AVATAR_SIZE = 22;
+const UserSelect = ({ users = [], isLoading = false, value, onChange, disabled, placeholder = 'Vyberte uživatele', style, ...rest }) => {
+    const { user: userDetail, loading: detailLoading, hasFetched, fetchUser } = useUserDetails(value);
+    const [popoverOpen, setPopoverOpen] = useState(false);
+    const options = useMemo(() => users.map((u) => ({
+        value: u.key,
+        label: getDisplayName(u),
+        userKey: u.key,
+    })), [users]);
+    const handlePopoverOpenChange = useCallback((open) => {
+        if (!value)
+            return;
+        setPopoverOpen(open);
+        if (open && !hasFetched) {
+            fetchUser();
+        }
+    }, [value, hasFetched, fetchUser]);
+    const selectElement = (_jsx(Select, { ...rest, value: value, onChange: onChange, disabled: disabled, loading: isLoading, placeholder: placeholder, style: style, showSearch: true, autoComplete: "new-password", filterOption: (input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase()), labelRender: (option) => {
+            const selectedOption = options.find((opt) => opt.value === option.value);
+            if (!selectedOption)
+                return option.label;
+            return (_jsxs("div", { style: OPTION_STYLE, children: [_jsx(Avatar, { src: getAvatarUrl(selectedOption.userKey), name: selectedOption.label, size: AVATAR_SIZE, round: true }), _jsx("span", { children: selectedOption.label })] }));
+        }, optionRender: (option) => (_jsxs("div", { style: OPTION_STYLE, children: [_jsx(Avatar, { src: getAvatarUrl(option.data.userKey), name: option.data.label, size: AVATAR_SIZE, round: true }), _jsx("span", { children: option.data.label })] })), getPopupContainer: (trigger) => trigger.parentNode }));
+    if (!value)
+        return selectElement;
+    return (_jsx(Popover, { content: _jsx(UserPopoverContent, { user: userDetail, loading: detailLoading }), trigger: "hover", open: popoverOpen, onOpenChange: handlePopoverOpenChange, placement: "bottomLeft", mouseEnterDelay: 0.3, children: selectElement }));
+};
+export default UserSelect;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":"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"}

package/dist/preview-1774279607741.js

@@ -0,0 +1,7 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];
+
+export const compositions_metadata = {"compositions":[]};

package/dist/style.css

@@ -0,0 +1,11 @@
+.user-select-popover td {
+  white-space: nowrap;
+  padding: 2px 8px 2px 0;
+  vertical-align: top;
+}
+
+.user-select-popover td:first-child {
+  font-weight: 600;
+  color: #555;
+  padding-right: 12px;
+}

package/dist/useUserDetails.d.ts

@@ -0,0 +1,12 @@
+export default useUserDetails;
+/**
+ * Hook pro lazy fetch detailu uživatele (pro popover).
+ * fetchUser() se volá imperativně při hoveru, ne při mount.
+ * Sdílí cache s AG Grid tooltips (userCache).
+ */
+declare function useUserDetails(userKey: any): {
+    user: any;
+    loading: boolean;
+    hasFetched: any;
+    fetchUser: () => void;
+};

package/dist/useUserDetails.js

@@ -0,0 +1,46 @@
+import { useState, useCallback } from 'react';
+import { useOidcAccessToken } from '@axa-fr/react-oidc';
+import { fetchData } from '@bit.rhplus/data';
+import { getUserFromCache, setUserInCache, hasUserInCache } from '@bit.rhplus/ui.grid/tooltips/userCache';
+const permUsersApi = {
+    url: '/user_service_api/users/users',
+    methodType: 'POST',
+    version: '1.0',
+    compression: true,
+    withCredentials: true,
+};
+/**
+ * Hook pro lazy fetch detailu uživatele (pro popover).
+ * fetchUser() se volá imperativně při hoveru, ne při mount.
+ * Sdílí cache s AG Grid tooltips (userCache).
+ */
+const useUserDetails = (userKey) => {
+    const { accessToken } = useOidcAccessToken();
+    const [user, setUser] = useState(() => hasUserInCache(userKey) ? getUserFromCache(userKey) : null);
+    const [loading, setLoading] = useState(false);
+    const [hasFetched, setHasFetched] = useState(hasUserInCache(userKey));
+    const fetchUser = useCallback(() => {
+        if (!userKey || !accessToken)
+            return;
+        if (hasUserInCache(userKey)) {
+            setUser(getUserFromCache(userKey));
+            setHasFetched(true);
+            return;
+        }
+        setLoading(true);
+        fetchData(permUsersApi, { filters: [{ field: 'Key', condition: 1, value: userKey }], operator: 1 }, accessToken)
+            .then((response) => {
+            const found = response?.data?.records?.[0] ?? null;
+            setUserInCache(userKey, found);
+            setUser(found);
+        })
+            .catch(() => setUserInCache(userKey, null))
+            .finally(() => {
+            setLoading(false);
+            setHasFetched(true);
+        });
+    }, [userKey, accessToken]);
+    return { user, loading, hasFetched, fetchUser };
+};
+export default useUserDetails;
+//# sourceMappingURL=useUserDetails.js.map

package/dist/useUserDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUserDetails.js","sourceRoot":"","sources":["../useUserDetails.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAE1G,MAAM,YAAY,GAAG;IACnB,GAAG,EAAE,+BAA+B;IACpC,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,KAAK;IACd,WAAW,EAAE,IAAI;IACjB,eAAe,EAAE,IAAI;CACtB,CAAC;AAEF;;;;GAIG;AACH,MAAM,cAAc,GAAG,CAAC,OAAO,EAAE,EAAE;IACjC,MAAM,EAAE,WAAW,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAC7C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CACpC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAC3D,CAAC;IACF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAEtE,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,IAAI,CAAC,OAAO,IAAI,CAAC,WAAW;YAAE,OAAO;QAErC,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC;YAC5B,OAAO,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;YACnC,aAAa,CAAC,IAAI,CAAC,CAAC;YACpB,OAAO;QACT,CAAC;QAED,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,SAAS,CACP,YAAY,EACZ,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,EAC1E,WAAW,CACZ;aACE,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE;YACjB,MAAM,KAAK,GAAG,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;YACnD,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;YAC/B,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;aAC1C,OAAO,CAAC,GAAG,EAAE;YACZ,UAAU,CAAC,KAAK,CAAC,CAAC;YAClB,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3B,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC;AAClD,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/index.jsx

@@ -0,0 +1,129 @@
+/* eslint-disable */
+import React, { useMemo, useState, useCallback } from 'react';
+import { Select } from 'antd';
+import Popover from 'antd/es/popover';
+import Avatar from '@bit.rhplus/ui.avatar';
+import useUserDetails from './useUserDetails';
+import './style.css';
+
+const fieldMap = {
+  userName: 'Uživatel',
+  firstName: 'Jméno',
+  lastName: 'Příjmení',
+  email: 'Email',
+  key: 'Klíč',
+};
+
+const getDisplayName = (user) =>
+  `${user.firstName || ''} ${user.lastName || ''}`.trim() || user.userName || user.name || '';
+
+const getAvatarUrl = (userKey) =>
+  userKey ? `/user_service_api/Users/Avatar?userKey=${userKey}` : null;
+
+const UserPopoverContent = ({ user, loading }) => {
+  if (loading) return <div>Načítám...</div>;
+  if (!user) return <div>Uživatel nenalezen</div>;
+
+  return (
+    <div className="user-select-popover">
+      <table>
+        <tbody>
+          {Object.entries(fieldMap).map(([field, label]) => (
+            <tr key={field}>
+              <td><b>{label}:</b></td>
+              <td>{user[field] || 'N/A'}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+const OPTION_STYLE = { display: 'flex', alignItems: 'center', gap: 8 };
+const AVATAR_SIZE = 22;
+
+const UserSelect = ({ users = [], isLoading = false, value, onChange, disabled, placeholder = 'Vyberte uživatele', style, ...rest }) => {
+
+  const { user: userDetail, loading: detailLoading, hasFetched, fetchUser } = useUserDetails(value);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+
+  const options = useMemo(() =>
+    users.map((u) => ({
+      value: u.key,
+      label: getDisplayName(u),
+      userKey: u.key,
+    })),
+    [users]
+  );
+
+  const handlePopoverOpenChange = useCallback((open) => {
+    if (!value) return;
+    setPopoverOpen(open);
+    if (open && !hasFetched) {
+      fetchUser();
+    }
+  }, [value, hasFetched, fetchUser]);
+
+  const selectElement = (
+    <Select
+      {...rest}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      loading={isLoading}
+      placeholder={placeholder}
+      style={style}
+      showSearch
+      autoComplete="new-password"
+      filterOption={(input, option) =>
+        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+      }
+      labelRender={(option) => {
+        const selectedOption = options.find((opt) => opt.value === option.value);
+        if (!selectedOption) return option.label;
+
+        return (
+          <div style={OPTION_STYLE}>
+            <Avatar
+              src={getAvatarUrl(selectedOption.userKey)}
+              name={selectedOption.label}
+              size={AVATAR_SIZE}
+              round
+            />
+            <span>{selectedOption.label}</span>
+          </div>
+        );
+      }}
+      optionRender={(option) => (
+        <div style={OPTION_STYLE}>
+          <Avatar
+            src={getAvatarUrl(option.data.userKey)}
+            name={option.data.label}
+            size={AVATAR_SIZE}
+            round
+          />
+          <span>{option.data.label}</span>
+        </div>
+      )}
+      getPopupContainer={(trigger) => trigger.parentNode}
+    />
+  );
+
+  if (!value) return selectElement;
+
+  return (
+    <Popover
+      content={<UserPopoverContent user={userDetail} loading={detailLoading} />}
+      trigger="hover"
+      open={popoverOpen}
+      onOpenChange={handlePopoverOpenChange}
+      placement="bottomLeft"
+      mouseEnterDelay={0.3}
+    >
+      {selectElement}
+    </Popover>
+  );
+};
+
+export default UserSelect;

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@bit.rhplus/ui.antd.user-select",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "componentId": {
+    "name": "ui/antd/user-select",
+    "version": "0.0.1",
+    "scope": "remote-scope"
+  },
+  "dependencies": {
+    "antd": "^5.20.6",
+    "@axa-fr/react-oidc": "7.25.13",
+    "@bit.rhplus/ui.avatar": "0.0.19",
+    "@bit.rhplus/data": "0.0.89",
+    "@bit.rhplus/ui.grid": "0.0.136"
+  },
+  "devDependencies": {
+    "@bitdev/react.react-env": "5.0.5"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "license": "SEE LICENSE IN UNLICENSED",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "scope": "@bit.rhplus",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/style.css

@@ -0,0 +1,11 @@
+.user-select-popover td {
+  white-space: nowrap;
+  padding: 2px 8px 2px 0;
+  vertical-align: top;
+}
+
+.user-select-popover td:first-child {
+  font-weight: 600;
+  color: #555;
+  padding-right: 12px;
+}

package/types/asset.d.ts

@@ -0,0 +1,43 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<
+    SVGProps<SVGSVGElement> & { title?: string }
+  >;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}
+declare module '*.otf' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff2' {
+  const value: any;
+  export = value;
+}

package/types/env.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+export type ImportMetaEnv = Record<string, string>;
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      [key: string]: string;
+    }
+  }
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}

package/useUserDetails.js

@@ -0,0 +1,57 @@
+import { useState, useCallback } from 'react';
+import { useOidcAccessToken } from '@axa-fr/react-oidc';
+import { fetchData } from '@bit.rhplus/data';
+import { getUserFromCache, setUserInCache, hasUserInCache } from '@bit.rhplus/ui.grid/tooltips/userCache';
+
+const permUsersApi = {
+  url: '/user_service_api/users/users',
+  methodType: 'POST',
+  version: '1.0',
+  compression: true,
+  withCredentials: true,
+};
+
+/**
+ * Hook pro lazy fetch detailu uživatele (pro popover).
+ * fetchUser() se volá imperativně při hoveru, ne při mount.
+ * Sdílí cache s AG Grid tooltips (userCache).
+ */
+const useUserDetails = (userKey) => {
+  const { accessToken } = useOidcAccessToken();
+  const [user, setUser] = useState(() =>
+    hasUserInCache(userKey) ? getUserFromCache(userKey) : null
+  );
+  const [loading, setLoading] = useState(false);
+  const [hasFetched, setHasFetched] = useState(hasUserInCache(userKey));
+
+  const fetchUser = useCallback(() => {
+    if (!userKey || !accessToken) return;
+
+    if (hasUserInCache(userKey)) {
+      setUser(getUserFromCache(userKey));
+      setHasFetched(true);
+      return;
+    }
+
+    setLoading(true);
+    fetchData(
+      permUsersApi,
+      { filters: [{ field: 'Key', condition: 1, value: userKey }], operator: 1 },
+      accessToken
+    )
+      .then((response) => {
+        const found = response?.data?.records?.[0] ?? null;
+        setUserInCache(userKey, found);
+        setUser(found);
+      })
+      .catch(() => setUserInCache(userKey, null))
+      .finally(() => {
+        setLoading(false);
+        setHasFetched(true);
+      });
+  }, [userKey, accessToken]);
+
+  return { user, loading, hasFetched, fetchUser };
+};
+
+export default useUserDetails;