marco.pms.web/src/components/master/CreateRole.jsx

import React, { useEffect, useState, useRef } from "react";
import { useFeatures } from "../../hooks/useMasterRole";

import { useForm } from 'react-hook-form';
import { set, z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { MasterRespository } from "../../repositories/MastersRepository";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
import showToast from "../../services/toastService";






const schema = z.object({
  role: z.string().min(1, { message: "Role is required" }),
  description: z.string().min(1, { message: "Description is required" })
    .max(255, { message: "Description cannot exceed 255 characters" }),

  selectedPermissions: z
    .array(z.string())
    .min(1, { message: "Please select at least one permission" }),
});




const CreateRole = ({ modalType, onClose }) => {

  const [isLoading, setIsLoading] = useState(false)

  const popoverRefs = useRef([]);
  const { masterFeatures } = useFeatures()

  const {
    register,
    handleSubmit,
    formState: { errors },

  } = useForm({
    resolver: zodResolver(schema),
    defaultValues: {
      role: "",
      description: "",
      selectedPermissions: [],
    },
  });

  const onSubmit = (values) => {
    setIsLoading(true)
    const result = {

      role: values.role,
      description: values.description,
      featuresPermission: values.selectedPermissions.map((id) => ({
        id,
        isEnabled: true,
      })),
    };

    MasterRespository.createRole(result).then((resp) => {
      setIsLoading(false)
      const cachedData = getCachedData("Application Role");
      const updatedData = [...cachedData, resp.data];
      cacheData("Application Role", updatedData);
      showToast("Application Role Added successfully.", "success");
      onClose()
    }).catch((err) => {

      showToast(err?.response?.data?.message, "error");
      setIsLoading(false)
      onClose()
    })


  };
  const [descriptionLength, setDescriptionLength] = useState(0);
  const maxDescriptionLength = 255;
  useEffect(() => {
    setDescriptionLength(0);
  }, []);
  useEffect(() => {
    popoverRefs.current.forEach((el) => {
      if (el) {
        new bootstrap.Popover(el, {
          trigger: "focus",
          placement: "right",
          html: true,
          content: el.getAttribute("data-bs-content"), // use inline content from attribute
        });
      }
    });
  }, [masterFeatures]);

  return (

    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>

      <div className="col-12 col-md-12">
        <label className="form-label">Role</label>
        <input type="text"
          {...register("role")}
          className={`form-control ${errors.role ? 'is-invalids' : ''}`}
        />
        {errors.role && <p className="text-danger">{errors.role.message}</p>}
      </div>


      <div className="col-12 col-md-12">
        <label className="form-label" htmlFor="description">Description</label>
        <textarea
          rows="3"
          {...register("description")}
          className={`form-control ${errors.description ? 'is-invalids' : ''}`}
          onChange={(e) => {
            setDescriptionLength(e.target.value.length);
            // Also update react-hook-form's value
            register("description").onChange(e);
          }}
        ></textarea>
        <div className="text-end small text-muted">
          {maxDescriptionLength - descriptionLength} characters left
        </div>

        {errors.description && (
          <p className="text-danger">{errors.description.message}</p>
        )}
      </div>


      <div className="col-12 col-md-12  border">


        {masterFeatures.map((feature, featureIndex) => (

          <React.Fragment key={feature.id}>
            <div className="row my-1" key={feature.id} style={{ marginLeft: "0px" }}>


              <div className="col-12 col-md-3 d-flex text-start align-items-start" style={{ wordWrap: 'break-word' }}>
                <span className="fs">{feature.name}</span>
              </div>

              <div className="col-12 col-md-1"></div>


              <div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
                {feature.featurePermissions.map((perm, permIndex) => {
                  const refIndex = (featureIndex * 10) + permIndex;
                  return (
                    <div className="d-flex me-3 mb-2" key={perm.id}>
                      <label className="form-check-label" htmlFor={perm.id}>
                        <input
                          type="checkbox"
                          className="form-check-input mx-2"
                          id={perm.id}
                          value={perm.id}
                          {...register("selectedPermissions")}
                        />
                        {perm.name}
                      </label>
                      <div style={{ display: 'flex', alignItems: 'center' }}>
                        <div
                          key={refIndex}
                          ref={(el) =>
                            (popoverRefs.current[refIndex] = el)
                          }
                          tabIndex="0"
                          className="d-flex align-items-center avatar-group justify-content-center"
                          data-bs-toggle="popover" refIndex
                          data-bs-trigger="focus"
                          data-bs-placement="right"
                          data-bs-html="true"
                          data-bs-content={`
                                      <div class="border border-secondary rounded custom-popover p-2 px-3">
                                        ${perm.description}
                                      </div>
                                    `}
                        >
                          &nbsp;

                          <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" className="bi bi-info-circle" viewBox="0 0 16 16">
                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                            <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
                          </svg>
                        </div>
                      </div>
                    </div>

                  )
                })}
              </div>

            </div>
            <hr className="hr my-1 py-1" />
          </React.Fragment>

        ))}
        {errors.selectedPermissions && (
          <p className="text-danger">{errors.selectedPermissions.message}</p>
        )}
        {!masterFeatures && <p>Loading...</p>}
      </div>


      {
        masterFeatures && (

          <div className="col-12 text-center">
            <button type="submit" className="btn btn-sm btn-primary me-3">
              {isLoading ? "Please Wait..." : "Submit"}
            </button>
            <button
              type="reset"
              className="btn btn-sm btn-label-secondary"
              data-bs-dismiss="modal"
              aria-label="Close"
            >
              Cancel
            </button>
          </div>
        )
      }

    </form>
  );
};

export default CreateRole;