@truedat/auth 8.14.1 → 8.14.2

package/src/groups/components/GroupForm.js

@@ -1,11 +1,12 @@
 import _ from "lodash/fp";
+import { useId, useMemo } from "react";
 import PropTypes from "prop-types";
 import { useForm, Controller } from "react-hook-form";
 import { useIntl } from "react-intl";
-import { connect } from "react-redux";
 import { Button, Form, Header } from "semantic-ui-react";
 import HistoryBackButton from "@truedat/core/components/HistoryBackButton";
 import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
+import GroupMemberPicker from "./GroupMemberPicker";
 
 const toOption = ({ id, full_name, user_name }) => ({
   key: id,
@@ -26,8 +27,12 @@ export const GroupForm = ({
   isSubmitting,
   users,
   onSubmit,
+  onCancel,
+  onDelete,
+  memberFilters = false,
 }) => {
   const { formatMessage } = useIntl();
+  const nameFieldId = useId();
   const { handleSubmit, control, formState } = useForm({
     mode: "all",
     defaultValues: {
@@ -38,96 +43,174 @@ export const GroupForm = ({
     },
   });
   const { errors, isDirty, isValid } = formState;
+  const DescriptionField = memberFilters ? Form.Input : Form.TextArea;
+  const options = useMemo(() => userOptions(users || []), [users]);
   return (
-    <Form onSubmit={handleSubmit(onSubmit)}>
-      <Controller
-        control={control}
-        name="name"
-        rules={{
-          required: formatMessage(
-            { id: "form.validation.required" },
-            { prop: formatMessage({ id: "group.props.name" }) },
-          ),
-        }}
-        render={({ field: { onBlur, onChange, value } }) => (
-          <Form.Input
-            autoComplete="off"
-            error={_.path(["name", "message"])(errors)}
-            label={formatMessage({ id: "group.props.name" })}
-            onBlur={onBlur}
-            onChange={(_e, { value }) => onChange(value)}
-            placeholder={formatMessage({
-              id: "group.form.name.placeholder",
-            })}
-            value={value || ""}
-            required
-          />
-        )}
-      />
-      <Controller
-        control={control}
-        name="description"
-        render={({ field: { onBlur, onChange, value } }) => (
-          <Form.Input
-            autoComplete="off"
-            label={formatMessage({ id: "group.props.description" })}
-            onBlur={onBlur}
-            onChange={(_e, { value }) => onChange(value)}
-            placeholder={formatMessage({
-              id: "group.form.description.placeholder",
-            })}
-            value={value || ""}
+    <Form
+      className="group-form"
+      onSubmit={handleSubmit((data) => !isSubmitting && onSubmit(data))}
+    >
+      <fieldset disabled={isSubmitting} className="group-form-fields">
+        <Controller
+          control={control}
+          name="name"
+          rules={{
+            required: formatMessage(
+              { id: "form.validation.required" },
+              { prop: formatMessage({ id: "group.props.name" }) },
+            ),
+          }}
+          render={({ field: { onBlur, onChange, value } }) => (
+            <Form.Input
+              id={nameFieldId}
+              className={
+                memberFilters
+                  ? `group-name-field${value ? " group-name-field--filled" : ""}`
+                  : undefined
+              }
+              autoComplete="off"
+              error={_.path(["name", "message"])(errors)}
+              label={formatMessage(
+                memberFilters
+                  ? {
+                      id: "group.form.name.label",
+                      defaultMessage: "Nombre del grupo",
+                    }
+                  : { id: "group.props.name" },
+              )}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              placeholder={formatMessage({
+                id: "group.form.name.placeholder",
+              })}
+              value={value || ""}
+              required
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="alias"
+          render={({ field: { onBlur, onChange, value } }) => (
+            <Form.Input
+              autoComplete="off"
+              label={formatMessage({ id: "group.props.alias" })}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              placeholder={formatMessage({
+                id: "group.form.alias.placeholder",
+              })}
+              value={value || ""}
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="description"
+          rules={
+            memberFilters
+              ? {
+                  maxLength: {
+                    value: 55,
+                    message: formatMessage({
+                      id: "group.description.maxLength",
+                      defaultMessage:
+                        "La descripción no puede superar los 55 caracteres.",
+                    }),
+                  },
+                }
+              : undefined
+          }
+          render={({ field: { onBlur, onChange, value } }) => (
+            <DescriptionField
+              className="group-form-description"
+              {...(memberFilters ? { maxLength: 55 } : { rows: 2 })}
+              error={errors.description?.message}
+              label={formatMessage({
+                id: memberFilters
+                  ? "group.description.short"
+                  : "group.props.description",
+                defaultMessage: memberFilters
+                  ? "Descripción breve"
+                  : "Descripción",
+              })}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              placeholder={formatMessage({
+                id: "group.form.description.placeholder",
+                defaultMessage: "Descripción del grupo",
+              })}
+              value={value || ""}
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="user_ids"
+          render={({ field: { onBlur, onChange, value } }) =>
+            memberFilters ? (
+              <GroupMemberPicker
+                showFilters={false}
+                users={users || []}
+                options={options}
+                value={value || []}
+                onChange={onChange}
+                onBlur={onBlur}
+                disabled={isSubmitting}
+              />
+            ) : (
+              <Form.Dropdown
+                disabled={isSubmitting}
+                name="user_ids"
+                label={formatMessage({ id: "group.props.users" })}
+                search
+                selection
+                clearable
+                multiple
+                options={options}
+                onBlur={onBlur}
+                onChange={(_e, { value }) => onChange(value)}
+                placeholder={formatMessage({
+                  id: "group.form.users.placeholder",
+                })}
+                value={value || []}
+              />
+            )
+          }
+        />
+      </fieldset>
+      <div className="actions">
+        {onDelete && (
+          <Button
+            type="button"
+            className="group-delete-action"
+            icon="trash alternate outline"
+            content={formatMessage({ id: "actions.delete" })}
+            disabled={isSubmitting}
+            onClick={onDelete}
           />
         )}
-      />
-      <Controller
-        control={control}
-        name="alias"
-        render={({ field: { onBlur, onChange, value } }) => (
-          <Form.Input
-            autoComplete="off"
-            label={formatMessage({ id: "group.props.alias" })}
-            onBlur={onBlur}
-            onChange={(_e, { value }) => onChange(value)}
-            placeholder={formatMessage({
-              id: "group.form.alias.placeholder",
-            })}
-            value={value || ""}
+        {onCancel ? (
+          <Button
+            type="button"
+            secondary
+            disabled={isSubmitting}
+            onClick={onCancel}
+            content={formatMessage({ id: "actions.cancel" })}
           />
-        )}
-      />
-      <Controller
-        control={control}
-        name="user_ids"
-        render={({ field: { onBlur, onChange, value } }) => (
-          <Form.Dropdown
-            name="user_ids"
-            label={formatMessage({ id: "group.props.users" })}
-            search
-            selection
-            clearable
-            multiple
-            options={userOptions(users)}
-            onBlur={onBlur}
-            onChange={(_e, { value }) => onChange(value)}
-            placeholder={formatMessage({ id: "group.form.users.placeholder" })}
-            value={value || []}
+        ) : (
+          <HistoryBackButton
+            content={formatMessage({ id: "actions.cancel" })}
+            disabled={isSubmitting}
           />
         )}
-      />
-      <div className="actions">
         <Button
-          floated="right"
           type="submit"
           primary
           loading={isSubmitting}
           disabled={isSubmitting || !isDirty || !isValid}
           content={formatMessage({ id: "actions.save" })}
         />
-        <HistoryBackButton
-          content={formatMessage({ id: "actions.cancel" })}
-          disabled={isSubmitting}
-        />
       </div>
     </Form>
   );
@@ -135,15 +218,13 @@ export const GroupForm = ({
 
 GroupForm.propTypes = {
   users: PropTypes.array,
+  memberFilters: PropTypes.bool,
   group: PropTypes.object,
   groupUsers: PropTypes.array,
   onSubmit: PropTypes.func,
   isSubmitting: PropTypes.bool,
+  onCancel: PropTypes.func,
+  onDelete: PropTypes.func,
 };
 
-const mapStateToProps = ({ groupCreating: isSubmitting, users }) => ({
-  isSubmitting,
-  users,
-});
-
-export default connect(mapStateToProps)(GroupForm);
+export default GroupForm;

package/src/groups/components/GroupFormModal.js

@@ -0,0 +1,137 @@
+import { useState } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { useParams } from "react-router";
+import { TrueModal } from "@truedat/core/components/TrueModal";
+import { useGroup, useGroupUsers } from "../hooks/useGroups";
+import { useGroupOperation } from "../hooks/useGroupOperation";
+import GroupForm from "./GroupForm";
+import GroupDeleteModal from "./GroupDeleteModal";
+
+const GroupFormModal = ({ editing = false, onClose }) => {
+  const [deleting, setDeleting] = useState(null);
+  const { formatMessage } = useIntl();
+  const { id } = useParams();
+  const {
+    group,
+    members: groupUsers,
+    hasData: hasGroup,
+    loading,
+    error,
+    retry,
+  } = useGroup(editing ? id : null);
+  const {
+    users,
+    hasData: hasUsers,
+    loading: usersLoading,
+    error: usersError,
+    retry: retryUsers,
+  } = useGroupUsers();
+  const { submit, pending, failed } = useGroupOperation(
+    editing ? "update" : "create",
+    id,
+    onClose,
+  );
+  const ready =
+    hasUsers &&
+    (!editing || (hasGroup && Boolean(group?.id) && String(group.id) === id));
+  return (
+    <>
+      <TrueModal
+        open
+        size="small"
+        className={`group-modal group-modal--form${editing ? " group-modal--edit" : " group-modal--new"}`}
+        title={
+          editing
+            ? formatMessage(
+                {
+                  id: "group.edit.title",
+                  defaultMessage: "Editar grupo {name}",
+                },
+                { name: group?.name || "" },
+              )
+            : formatMessage({ id: "groups.actions.create" })
+        }
+        icon="users"
+        onClose={() => !pending && !deleting && onClose()}
+        closeDisabled={pending || deleting}
+        closeOnEscape={!pending && !deleting}
+        closeOnDimmerClick={!pending && !deleting}
+        banner={
+          failed
+            ? formatMessage({
+                id: "group.operation.error",
+                defaultMessage:
+                  "No se ha podido completar la operación. Inténtalo de nuevo.",
+              })
+            : null
+        }
+        bannerType="danger"
+      >
+        {ready ? (
+          <GroupForm
+            key={editing ? group.id : "new"}
+            memberFilters
+            group={editing ? group : {}}
+            groupUsers={editing ? groupUsers : []}
+            users={users}
+            isSubmitting={pending || deleting}
+            onDelete={editing ? () => setDeleting(group) : undefined}
+            onCancel={onClose}
+            onSubmit={(values) =>
+              submit(editing ? { ...values, id: group.id } : values)
+            }
+          />
+        ) : (
+          <p role="status">
+            {formatMessage({
+              id:
+                loading || usersLoading ? "group.loading" : "group.unavailable",
+              defaultMessage:
+                loading || usersLoading
+                  ? "Cargando grupo…"
+                  : "El grupo no está disponible.",
+            })}
+          </p>
+        )}
+        {usersError && (
+          <div role="alert">
+            {formatMessage({
+              id: "group.members.error",
+              defaultMessage: "No se han podido cargar los usuarios.",
+            })}
+            <button type="button" onClick={() => retryUsers().catch(() => {})}>
+              {formatMessage({
+                id: "group.members.retry",
+                defaultMessage: "Reintentar",
+              })}
+            </button>
+          </div>
+        )}
+        {error && (
+          <div role="alert">
+            {formatMessage({ id: "group.unavailable" })}
+            <button type="button" onClick={() => retry().catch(() => {})}>
+              {formatMessage({
+                id: "group.members.retry",
+                defaultMessage: "Reintentar",
+              })}
+            </button>
+          </div>
+        )}
+      </TrueModal>
+      {deleting && (
+        <GroupDeleteModal
+          group={deleting}
+          onClose={() => setDeleting(false)}
+          onDeleted={onClose}
+        />
+      )}
+    </>
+  );
+};
+GroupFormModal.propTypes = {
+  editing: PropTypes.bool,
+  onClose: PropTypes.func.isRequired,
+};
+export default GroupFormModal;

package/src/groups/components/GroupInfoModal.js

@@ -0,0 +1,114 @@
+import { useState } from "react";
+import PropTypes from "prop-types";
+import { Link, useParams } from "react-router";
+import { useIntl } from "react-intl";
+import { TrueModal } from "@truedat/core/components/TrueModal";
+import { linkTo } from "@truedat/core/routes";
+import { Button, Icon } from "semantic-ui-react";
+import { useGroup, useGroupUsers } from "../hooks/useGroups";
+import GroupUsersTable from "./GroupUsersTable";
+
+const GroupInfoModal = ({ onClose }) => {
+  const { id } = useParams();
+  const { group, members: groupUsers, loading, error, retry } = useGroup(id);
+  const { users } = useGroupUsers();
+  const [filter, setFilter] = useState("");
+  const empty = Array.isArray(groupUsers) && groupUsers.length === 0;
+  const { formatMessage } = useIntl();
+  const ready = Boolean(group?.id) && String(group.id) === id;
+  return (
+    <TrueModal
+      open
+      centered={false}
+      dimmer={{ className: "group-info-dimmer" }}
+      size="large"
+      className="group-modal group-modal--info"
+      icon="users"
+      title={
+        ready
+          ? group.name
+          : formatMessage({
+              id: "group.loading",
+              defaultMessage: "Cargando grupo…",
+            })
+      }
+      subtitle={ready ? group.description || "" : ""}
+      onClose={onClose}
+      actions={[
+        {
+          key: "close",
+          secondary: true,
+          content: formatMessage({ id: "actions.close" }),
+          onClick: onClose,
+        },
+        ...(ready && !empty
+          ? [
+              {
+                key: "edit",
+                as: Link,
+                to: linkTo.GROUP_EDIT(group),
+                primary: true,
+                content: formatMessage({ id: "actions.edit" }),
+              },
+            ]
+          : []),
+      ]}
+    >
+      {error ? (
+        <div role="alert">
+          {formatMessage({ id: "group.unavailable" })}
+          <Button type="button" onClick={() => retry().catch(() => {})}>
+            {formatMessage({
+              id: "group.members.retry",
+              defaultMessage: "Reintentar",
+            })}
+          </Button>
+        </div>
+      ) : !ready ? (
+        <p role="status">
+          {formatMessage({
+            id: loading ? "group.loading" : "group.unavailable",
+            defaultMessage: loading
+              ? "Cargando grupo…"
+              : "El grupo no está disponible.",
+          })}
+        </p>
+      ) : empty ? (
+        <div className="group-members-empty">
+          <Icon name="users" aria-hidden="true" />
+          <h3>
+            {formatMessage({
+              id: "group.members.empty.title",
+              defaultMessage: "Este grupo no tiene miembros",
+            })}
+          </h3>
+          <p>
+            {formatMessage({
+              id: "group.members.empty.description",
+              defaultMessage: "Edita el grupo para añadir miembros.",
+            })}
+          </p>
+          <Button
+            as={Link}
+            to={linkTo.GROUP_EDIT(group)}
+            primary
+            content={formatMessage({ id: "actions.edit" })}
+          />
+        </div>
+      ) : (
+        <div className="group-members">
+          <GroupUsersTable
+            group={group}
+            groupUsers={groupUsers}
+            users={users}
+            readOnly
+            filter={filter}
+            onFilterChange={setFilter}
+          />
+        </div>
+      )}
+    </TrueModal>
+  );
+};
+GroupInfoModal.propTypes = { onClose: PropTypes.func.isRequired };
+export default GroupInfoModal;