wip add groups to user form

2021-04-16 16:15:02 -04:00 · 2021-04-16 16:15:02 -04:00 · 10b3619ae9
commit 10b3619ae9
parent 62b21dbfe1
4 changed files with 216 additions and 31 deletions
--- a/src/user/JoinGroupDialog.tsx
+++ b/src/user/JoinGroupDialog.tsx
@ -31,8 +31,9 @@ export type JoinGroupDialogProps = {
  open: boolean;
  toggleDialog: () => void;
  onClose: () => void;
-  username: string;
+  username?: string;
  onConfirm: (newGroups: Group[]) => void;
+  chips?: any;
 };

 type Group = GroupRepresentation & {
@ -45,6 +46,7 @@ export const JoinGroupDialog = ({
  toggleDialog,
  onConfirm,
  username,
+  chips,
 }: JoinGroupDialogProps) => {
  const { t } = useTranslation("roles");
  const adminClient = useAdminClient();
@ -61,41 +63,67 @@ export const JoinGroupDialog = ({

  const { id } = useParams<{ id: string }>();

-  useEffect(
-    () =>
-      asyncStateFetch(
-        async () => {
-          const existingUserGroups = await adminClient.users.listGroups({ id });
-          const allGroups = await adminClient.groups.find();
+  if (id) {
+    useEffect(
+      () =>
+        asyncStateFetch(
+          async () => {
+            const existingUserGroups = await adminClient.users.listGroups({
+              id,
+            });
+            const allGroups = await adminClient.groups.find();

-          if (groupId) {
-            const group = await adminClient.groups.findOne({ id: groupId });
-            return { group, groups: group.subGroups! };
-          } else {
-            return {
-              groups: _.differenceBy(allGroups, existingUserGroups, "id"),
-            };
-          }
-        },
-        async ({ group: selectedGroup, groups }) => {
-          if (selectedGroup) {
-            setNavigation([...navigation, selectedGroup]);
-          }
+            if (groupId) {
+              const group = await adminClient.groups.findOne({ id: groupId });
+              return { group, groups: group.subGroups! };
+            } else {
+              return {
+                groups: _.differenceBy(allGroups, existingUserGroups, "id"),
+              };
+            }
+          },
+          async ({ group: selectedGroup, groups }) => {
+            if (selectedGroup) {
+              setNavigation([...navigation, selectedGroup]);
+            }

-          groups.forEach((group: Group) => {
-            group.checked = !!selectedRows.find((r) => r.id === group.id);
-          });
-          setGroups(groups);
-        },
-        errorHandler
-      ),
-    [groupId]
-  );
+            groups.forEach((group: Group) => {
+              group.checked = !!selectedRows.find((r) => r.id === group.id);
+            });
+            setGroups(groups);
+          },
+          errorHandler
+        ),
+      [groupId]
+    );
+  }
+
+  else if (!id) {
+  useEffect(() => {
+    return asyncStateFetch(
+      () => {
+        // adminClient.groups.find();
+        return Promise.resolve(adminClient.groups.find());
+      },
+      (groups) => {
+        console.log(groups);
+        console.log("potato", chips)
+        // setGroups(groups.filter((item) => item.name !== chips));
+        setGroups([...groups.filter((row) => !chips.includes(row.name))]);
+
+        // setupForm(realm);
+      },
+      errorHandler
+    );
+  }, []);
+}

  return (
    <Modal
      variant={ModalVariant.small}
-      title={`Join groups for user ${username}`}
+      title={
+        username ? `Join groups for user ${username}` : "Select groups to join"
+      }
      isOpen={open}
      onClose={onClose}
      actions={[
--- a/src/user/UserForm.tsx
+++ b/src/user/UserForm.tsx
@ -2,10 +2,14 @@ import React, { useEffect, useState } from "react";
 import {
  ActionGroup,
  Button,
+  Chip,
+  ChipGroup,
  FormGroup,
+  InputGroup,
  Select,
  SelectOption,
  Switch,
+  TextArea,
  TextInput,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
@ -18,6 +22,8 @@ import { useRealm } from "../context/realm-context/RealmContext";
 import { asyncStateFetch, useAdminClient } from "../context/auth/AdminClient";
 import { useErrorHandler } from "react-error-boundary";
 import moment from "moment";
+import { JoinGroupDialog } from "./JoinGroupDialog";
+import GroupRepresentation from "keycloak-admin/lib/defs/groupRepresentation";

 export type UserFormProps = {
  form: UseFormMethods<UserRepresentation>;
@ -45,6 +51,10 @@ export const UserForm = ({

  const watchUsernameInput = watch("username");
  const [timestamp, setTimestamp] = useState(null);
+  const [chips, setChips] = useState<(string | undefined)[]>([]);
+
+  const [list, setList] = useState(false);
+  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (editMode) {
@ -56,7 +66,7 @@ export const UserForm = ({
        handleError
      );
    }
-  }, []);
+  }, [chips]);

  const setupForm = (user: UserRepresentation) => {
    reset();
@ -90,6 +100,82 @@ export const UserForm = ({
    setRequiredUserActionsDropdownOpen(false);
  };

+  const deleteItem = (id: string) => {
+    const copyOfChips = chips;
+    console.log("care", id);
+
+    setChips(copyOfChips.filter((item) => item !== id));
+
+    // const index = copyOfChips.indexOf(id);
+    // if (index !== -1) {
+    //   copyOfChips.splice(index, 1);
+    //   setChips(copyOfChips);
+    // }
+  };
+
+  const deleteCategory = () => {
+    setChips([]);
+  };
+
+  const addChips = async (groups: GroupRepresentation[]): Promise<void> => {
+    const newGroups = groups;
+
+    const newGroupNames: (string | undefined)[] = newGroups!.map(
+      (item) => item.name
+    );
+    console.log(newGroupNames);
+    setChips([...chips!, ...newGroupNames]);
+
+    console.log("newGroups", newGroups)
+
+    newGroups.forEach(async (group) => {
+      // try {
+        await adminClient.users.addToGroup({
+          id: id,
+          groupId: group.id!,
+        });
+        // refresh();
+        // addAlert(t("users:addedGroupMembership"), AlertVariant.success);
+      // } catch (error) {
+      //   // addAlert(
+      //   //   t("users:addedGroupMembershipError", { error }),
+      //   //   AlertVariant.danger
+      //   // );
+      // }
+    });
+
+    console.log("beep beep", adminClient.users.listGroups())
+
+  };
+
+  console.log(watchUsernameInput)
+
+
+  const addGroups = async (groups: GroupRepresentation[]): Promise<void> => {
+    const newGroups = groups;
+
+    newGroups.forEach(async (group) => {
+      try {
+        await adminClient.users.addToGroup({
+          id: id,
+          groupId: group.id!,
+        });
+        setList(true);
+        // refresh();
+        // addAlert(t("users:addedGroupMembership"), AlertVariant.success);
+      } catch (error) {
+        // addAlert(
+        //   t("users:addedGroupMembershipError", { error }),
+        //   AlertVariant.danger
+        // );
+      }
+    });
+  };
+
+  const toggleModal = () => {
+    setOpen(!open);
+  };
+
  return (
    <FormAccess
      isHorizontal
@ -97,6 +183,15 @@ export const UserForm = ({
      role="manage-users"
      className="pf-u-mt-lg"
    >
+      {open && (
+        <JoinGroupDialog
+          open={open}
+          onClose={() => setOpen(!open)}
+          onConfirm={editMode ? addGroups : addChips}
+          toggleDialog={() => toggleModal()}
+          chips={chips}
+        />
+      )}
      {editMode ? (
        <>
          <FormGroup
@ -295,6 +390,53 @@ export const UserForm = ({
          )}
        />
      </FormGroup>
+      {!editMode && (
+        <FormGroup
+          label={t("common:groups")}
+          fieldId="kc-groups"
+          validated={errors.requiredActions ? "error" : "default"}
+          helperTextInvalid={t("common:required")}
+          labelIcon={
+            <HelpItem
+              helpText={t("requiredUserActionsHelpText")}
+              forLabel={t("requiredUserActions")}
+              forID="required-user-actions-label"
+            />
+          }
+        >
+          <Controller
+            name="groups"
+            defaultValue={[]}
+            typeAheadAriaLabel="Select an action"
+            control={control}
+            render={() => (
+              <>
+                <InputGroup>
+                  <ChipGroup categoryName={" "} onClick={deleteCategory}>
+                    {chips.map((currentChip) => (
+                      <Chip
+                        key={currentChip}
+                        onClick={() => deleteItem(currentChip!)}
+                      >
+                        {currentChip}
+                      </Chip>
+                    ))}
+                  </ChipGroup>
+                  <Button
+                    id="kc-join-groups-button"
+                    onClick={toggleModal}
+                    variant="secondary"
+                    // isDisabled={!watchUsernameInput}
+                  >
+                    {t("users:joinGroups")}
+                  </Button>
+                </InputGroup>
+              </>
+            )}
+          />
+        </FormGroup>
+      )}
+
      <ActionGroup>
        <Button
          data-testid={!editMode ? "create-user" : "save-user"}
--- a/src/user/messages.json
+++ b/src/user/messages.json
@ -10,6 +10,7 @@
    "noGroups": "No groups",
    "noGroupsText": "You haven't added this user to any groups. Join a group to get started.",
    "joinGroup": "Join Group",
+    "joinGroups": "Join Groups",
    "searchForGroups": "Search for groups",
    "leave": "Leave",
    "leaveGroup": "Leave group {{name}}?",
--- a/src/user/user-section.css
+++ b/src/user/user-section.css
@ -6,3 +6,17 @@ button.pf-c-button.pf-m-primary.kc-join-group-button {
  margin-left: var(--pf-global--spacer--md);
  margin-right: var(--pf-global--spacer--xl);
 }
+
+.pf-c-chip-group,
+.pf-c-chip-group__list {
+  width: 100%;
+}
+
+button#kc-join-groups-button {
+  height: min-content;
+}
+
+.pf-c-chip-group.pf-m-category {
+  margin-right: var(--pf-global--spacer--md);
+  padding: var(--pf-global--spacer--xs);
+}