@truedat/auth 8.14.1 → 8.14.2

package/src/groups/components/GroupMemberPicker.js

@@ -0,0 +1,364 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Button, Icon, Popup } from "semantic-ui-react";
+import { useQuery } from "@apollo/client";
+import { DOMAINS_QUERY } from "@truedat/core/api/queries";
+import { useRoles } from "../../hooks/useRoles";
+import { useFilteredGroupUsers } from "../hooks/useGroups";
+import GroupDropdown from "./GroupDropdown";
+
+const typeIcons = {
+  user: "user",
+  admin: "shield alternate",
+  service: "cogs",
+  agent: "microchip",
+};
+
+const GroupMemberPicker = ({
+  users,
+  options,
+  value,
+  onChange,
+  onBlur,
+  disabled,
+  showFilters = true,
+}) => {
+  const { formatMessage } = useIntl();
+  const message = (id, defaultMessage) => formatMessage({ id, defaultMessage });
+  const selectedListRef = useRef(null);
+  const [addedIds, setAddedIds] = useState([]);
+  const addedTimerRef = useRef(null);
+  useEffect(() => () => clearTimeout(addedTimerRef.current), []);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [type, setType] = useState("");
+  const [role, setRole] = useState("");
+  const [domains, setDomains] = useState([]);
+  const {
+    data: roles = [],
+    error: rolesError,
+    loading: rolesLoading,
+    retry: retryRoles,
+  } = useRoles(showFilters);
+  const {
+    data: domainData,
+    loading: domainsLoading,
+    error: domainsError,
+    refetch: retryDomains,
+  } = useQuery(DOMAINS_QUERY, {
+    variables: { action: "viewDomain" },
+    skip: !showFilters,
+  });
+  const domainOptions = useMemo(() => {
+    const domains = domainData?.domains || [];
+    const names = new Map(domains.map(({ id, name }) => [String(id), name]));
+    return domains
+      .map(({ id, name, parentId }) => ({
+        key: id,
+        value: String(id),
+        text: names.has(String(parentId))
+          ? `${names.get(String(parentId))} / ${name}`
+          : name,
+      }))
+      .sort((a, b) => a.text.localeCompare(b.text));
+  }, [domainData]);
+  const {
+    users: result,
+    error: searchError,
+    loading: searchLoading,
+    retry: retrySearch,
+  } = useFilteredGroupUsers(showFilters, role, domains);
+  const loading = rolesLoading || searchLoading;
+  const failed = Boolean(rolesError || searchError);
+  const usersById = useMemo(
+    () => new Map(users.map((user) => [user.id, user])),
+    [users],
+  );
+  const filteredOptions = useMemo(() => {
+    const selected = new Set(value);
+    const resultIds =
+      showFilters && result && new Set(result.map(({ id }) => String(id)));
+    const matches = new Set(
+      users
+        .filter(
+          (user) =>
+            (!resultIds || resultIds.has(String(user.id))) &&
+            (!showFilters || !type || user.role === type),
+        )
+        .map(({ id }) => id),
+    );
+    return options.filter(
+      ({ value: id }) => !selected.has(id) && matches.has(id),
+    );
+  }, [options, result, users, type, value, showFilters]);
+  const addUsers = (ids) => {
+    if (disabled || (showFilters && (loading || failed))) return;
+    const added = ids.filter((id) => !value.includes(id));
+    if (!added.length) return;
+    clearTimeout(addedTimerRef.current);
+    setAddedIds(added);
+    addedTimerRef.current = setTimeout(() => setAddedIds([]), 900);
+    onChange([...added, ...value]);
+    setSearchQuery("");
+    if (selectedListRef.current) selectedListRef.current.scrollTop = 0;
+  };
+  const canAddAll =
+    showFilters &&
+    Boolean(role || domains.length) &&
+    filteredOptions.length > 1;
+  return (
+    <div
+      className={`group-member-picker${showFilters ? "" : " group-member-picker--without-filters"}`}
+    >
+      {showFilters && (
+        <aside
+          className="group-member-filters"
+          aria-label={message("group.members.filters", "Filtros de miembros")}
+        >
+          <GroupDropdown
+            selection
+            placeholder={message("group.members.all", "Todos")}
+            label={message("group.members.type", "Tipo de usuario")}
+            aria-label={message("group.members.type", "Tipo de usuario")}
+            value={type}
+            disabled={disabled}
+            options={[
+              {
+                key: "all",
+                value: "",
+                text: message("group.members.all", "Todos"),
+              },
+              ...["user", "admin", "service", "agent"].map((item) => ({
+                key: item,
+                value: item,
+                text: message(
+                  item === "agent"
+                    ? "group.members.agent"
+                    : `user.type.${item}`,
+                  item === "agent" ? "Agente" : undefined,
+                ),
+              })),
+            ]}
+            onChange={(_event, { value }) => setType(value)}
+          />
+          <GroupDropdown
+            selection
+            search
+            placeholder={message("group.members.all", "Todos")}
+            label={message("group.members.role", "Rol")}
+            aria-label={message("group.members.role", "Rol")}
+            value={role}
+            disabled={disabled}
+            options={[
+              {
+                key: "all",
+                value: "",
+                text: message("group.members.all", "Todos"),
+              },
+              ...roles.map(({ id, name }) => ({
+                key: id,
+                value: String(id),
+                text: name,
+              })),
+            ]}
+            onChange={(_event, { value }) => setRole(value)}
+          />
+          <GroupDropdown
+            selection
+            search
+            multiple
+            label={message("group.members.domain", "Dominio")}
+            aria-label={message("group.members.domain", "Dominio")}
+            placeholder={message("domain.multiple.placeholder")}
+            value={domains}
+            options={domainOptions}
+            disabled={disabled || domainsLoading || Boolean(domainsError)}
+            loading={domainsLoading}
+            error={Boolean(domainsError)}
+            onChange={(_event, { value }) => setDomains(value)}
+          />
+          {domainsError && (
+            <div role="alert">
+              <p>
+                {message(
+                  "group.members.domainsError",
+                  "No se han podido cargar los dominios.",
+                )}
+              </p>
+              <Button
+                type="button"
+                size="small"
+                disabled={disabled || domainsLoading}
+                onClick={() => retryDomains().catch(() => {})}
+              >
+                {message("group.members.retry", "Reintentar")}
+              </Button>
+            </div>
+          )}
+        </aside>
+      )}
+      <div className="group-member-selection">
+        <div className="group-add-control">
+          <GroupDropdown
+            closeOnChange
+            selectOnBlur={false}
+            name="user_ids"
+            aria-label={message("group.members.add", "Añadir miembros")}
+            label={message("group.members.add", "Añadir miembros")}
+            search
+            selection
+            options={filteredOptions}
+            value=""
+            searchQuery={searchQuery}
+            onSearchChange={(_event, { searchQuery }) =>
+              setSearchQuery(searchQuery)
+            }
+            onBlur={onBlur}
+            disabled={disabled || (showFilters && (loading || failed))}
+            loading={showFilters && loading}
+            onChange={(_event, { value: id }) => addUsers([id])}
+            placeholder={message("group.form.users.placeholder")}
+          />
+          {canAddAll && (
+            <Button
+              type="button"
+              size="mini"
+              className="group-add-all"
+              disabled={disabled || loading || failed}
+              onClick={() =>
+                addUsers(filteredOptions.map(({ value: id }) => id))
+              }
+            >
+              {message("group.members.addAll", "Añadir todos")}
+            </Button>
+          )}
+        </div>
+        <section
+          className="group-selected-members"
+          aria-label={message(
+            "group.members.selected",
+            "Miembros seleccionados",
+          )}
+        >
+          <h4>
+            {message("group.members.selected", "Miembros seleccionados")}{" "}
+            <span>({value.length})</span>
+          </h4>
+          {value.length ? (
+            <ul ref={selectedListRef}>
+              {value.map((id) => {
+                const user = usersById.get(id);
+                const name = user?.full_name || user?.user_name || String(id);
+                const parts = name.trim().split(/\s+/);
+                const initials =
+                  (parts[0]?.[0] || "?") +
+                  (parts.length > 1 ? parts[parts.length - 1][0] : "");
+                const typeLabel = user?.role
+                  ? message(
+                      user.role === "agent"
+                        ? "group.members.agent"
+                        : `user.type.${user.role}`,
+                      user.role === "agent" ? "Agente" : undefined,
+                    )
+                  : null;
+                return (
+                  <li
+                    key={id}
+                    className={
+                      addedIds.includes(id) ? "group-member-added" : undefined
+                    }
+                  >
+                    <span className="group-member-identity">
+                      <span className="group-member-avatar" aria-hidden="true">
+                        {initials.toUpperCase()}
+                      </span>
+                      <span className="group-member-details">
+                        <span className="group-member-name">
+                          <strong>{name}</strong>
+                          {typeLabel && (
+                            <Popup
+                              inverted
+                              size="mini"
+                              content={typeLabel}
+                              on={["hover", "focus"]}
+                              position="top center"
+                              trigger={
+                                <span
+                                  className="group-member-type"
+                                  tabIndex={0}
+                                  aria-label={typeLabel}
+                                >
+                                  <Icon
+                                    name={typeIcons[user.role] || "user"}
+                                    aria-hidden="true"
+                                  />
+                                </span>
+                              }
+                            />
+                          )}
+                        </span>
+                        {user?.full_name && user?.user_name && (
+                          <small>{user.user_name}</small>
+                        )}
+                      </span>
+                    </span>
+                    <Button
+                      type="button"
+                      icon
+                      basic
+                      disabled={disabled}
+                      aria-label={formatMessage(
+                        {
+                          id: "group.members.remove",
+                          defaultMessage: "Eliminar a {name} del grupo",
+                        },
+                        { name },
+                      )}
+                      onClick={() =>
+                        onChange(value.filter((memberId) => memberId !== id))
+                      }
+                    >
+                      <Icon name="times" />
+                    </Button>
+                  </li>
+                );
+              })}
+            </ul>
+          ) : (
+            <p>
+              {message("group.members.empty", "No hay miembros seleccionados")}
+            </p>
+          )}
+        </section>
+        {showFilters && failed && (
+          <div role="alert">
+            <p>
+              {message(
+                "group.members.error",
+                "No se han podido cargar los usuarios.",
+              )}
+            </p>
+            <Button
+              type="button"
+              size="small"
+              disabled={disabled}
+              onClick={() => Promise.allSettled([retryRoles(), retrySearch()])}
+            >
+              {message("group.members.retry", "Reintentar")}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+GroupMemberPicker.propTypes = {
+  users: PropTypes.array.isRequired,
+  options: PropTypes.array.isRequired,
+  value: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onBlur: PropTypes.func,
+  disabled: PropTypes.bool,
+  showFilters: PropTypes.bool,
+};
+export default GroupMemberPicker;

package/src/groups/components/GroupRouteModal.js

@@ -0,0 +1,46 @@
+import PropTypes from "prop-types";
+import { useCallback, useEffect } from "react";
+import { useNavigate, useLocation, useParams } from "react-router";
+import { GROUPS } from "@truedat/core/routes";
+import GroupFormModal from "./GroupFormModal";
+import GroupInfoModal from "./GroupInfoModal";
+
+const GroupRouteModal = ({ mode }) => {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const { id } = useParams();
+  useEffect(() => {
+    const opener = document.activeElement;
+    return () => {
+      requestAnimationFrame(() => {
+        if (document.querySelector(".group-modal")) return;
+        if (opener?.isConnected && opener !== document.body) opener.focus();
+        else
+          document
+            .querySelector(`a[href="${pathname.replace(/\/edit$/, "")}"]`)
+            ?.focus();
+      });
+    };
+  }, [pathname]);
+  const onClose = useCallback(() => {
+    navigate(GROUPS);
+    requestAnimationFrame(() => {
+      document
+        .querySelector(`a[href="${pathname.replace(/\/edit$/, "")}"]`)
+        ?.focus();
+    });
+  }, [navigate, pathname]);
+  return mode === "info" ? (
+    <GroupInfoModal key={id} onClose={onClose} />
+  ) : (
+    <GroupFormModal
+      key={id || "new"}
+      editing={mode === "edit"}
+      onClose={onClose}
+    />
+  );
+};
+GroupRouteModal.propTypes = {
+  mode: PropTypes.oneOf(["new", "edit", "info"]).isRequired,
+};
+export default GroupRouteModal;

package/src/groups/components/GroupUsers.js

@@ -1,19 +1,38 @@
 import _ from "lodash/fp";
 import { useState } from "react";
-import PropTypes from "prop-types";
-import { Link } from "react-router";
-import { connect } from "react-redux";
+import { Link, useParams } from "react-router";
 import { Segment, Button, Divider } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import SearchInput from "@truedat/core/components/SearchInput";
 import { linkTo } from "@truedat/core/routes";
+import { useGroup, useGroupUsers } from "../hooks/useGroups";
 import GroupUsersTable from "./GroupUsersTable";
 
-export const GroupUsers = ({ group, groupLoading }) => {
+export const GroupUsers = () => {
+  const { id } = useParams();
+  const {
+    group,
+    members: groupUsers,
+    loading: groupLoading,
+    error,
+    retry,
+  } = useGroup(id);
   const [filter, setFilter] = useState("");
   const { formatMessage } = useIntl();
+  const { users: directoryUsers } = useGroupUsers();
 
-  return groupLoading || _.isEmpty(group) ? null : (
+  if (groupLoading) return <p role="status">Cargando grupo…</p>;
+  if (error || _.isEmpty(group)) {
+    return (
+      <div role="alert">
+        No se ha podido cargar el grupo.
+        <button type="button" onClick={() => retry().catch(() => {})}>
+          Reintentar
+        </button>
+      </div>
+    );
+  }
+  return (
     <Segment attached="bottom">
       <Button
         floated="right"
@@ -28,16 +47,14 @@ export const GroupUsers = ({ group, groupLoading }) => {
         value={filter}
       />
       <Divider hidden />
-      <GroupUsersTable filter={filter} />
+      <GroupUsersTable
+        filter={filter}
+        group={group}
+        groupUsers={groupUsers}
+        users={directoryUsers}
+      />
     </Segment>
   );
 };
 
-GroupUsers.propTypes = {
-  group: PropTypes.object,
-  groupLoading: PropTypes.bool,
-};
-
-const mapStateToProps = ({ group, groupLoading }) => ({ group, groupLoading });
-
-export default connect(mapStateToProps)(GroupUsers);
+export default GroupUsers;