@arudovwen/react-form-builder/lib/form-elements/azure-file-settings.js

A complete form builder for react.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = AzureFileSettings;
var _react = _interopRequireWildcard(require("react"));
var _axios = _interopRequireDefault(require("axios"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const token = window?.localStorage.getItem('token') || '';
function AzureFileSettings({
  detail = {},
  onValueChange = () => {},
  apiUrl
}) {
  const api = _axios.default.create({
    baseURL: `${apiUrl}/workflows/api/v1`,
    headers: {
      Authorization: `Bearer ${token}`
    }
  });
  const [loading, setLoading] = (0, _react.useState)(false);
  const [settings, setSettings] = (0, _react.useState)([]);
  const [containers, setContainers] = (0, _react.useState)([]);
  const [folders, setFolders] = (0, _react.useState)([]);

  // -----------------------
  // Uncontrolled internal state
  // -----------------------
  const [storageSettingId, setStorageSettingId] = (0, _react.useState)(detail.storageSettingId || '');
  const [containerName, setContainerName] = (0, _react.useState)(detail.containerName || '');
  const [folderName, setFolderName] = (0, _react.useState)(detail.folderName || '');

  // -----------------------
  // Fetch: Settings
  // -----------------------
  const fetchSettings = async () => {
    try {
      setLoading(true);
      const {
        data
      } = await api.get('/Settings/get-all?activitySettingType=azure');
      setSettings(data?.results || []);
    } finally {
      setLoading(false);
    }
  };

  // -----------------------
  // Fetch: Containers
  // -----------------------
  const fetchContainers = async id => {
    if (!id) return;
    try {
      setLoading(true);
      const {
        data
      } = await api.get(`/Azure/get-containers/${id}`);
      setContainers(data?.data || []);
    } finally {
      setLoading(false);
    }
  };

  // -----------------------
  // Fetch: Folders
  // -----------------------
  const fetchFolders = async (id, container) => {
    if (!id || !container) return;
    try {
      setLoading(true);
      const {
        data
      } = await api.get(`/Azure/get-folders/${id}/${container}`);
      setFolders(data?.data || []);
    } finally {
      setLoading(false);
    }
  };

  // Load settings on mount
  (0, _react.useEffect)(() => {
    fetchSettings();
  }, []);

  // When storage setting changes
  (0, _react.useEffect)(() => {
    setContainers([]);
    setFolders([]);
    if (storageSettingId) fetchContainers(storageSettingId);
    onValueChange({
      storageSettingId,
      containerName: '',
      folderName: ''
    });
  }, [storageSettingId]);

  // When container changes
  (0, _react.useEffect)(() => {
    setFolders([]);
    if (storageSettingId && containerName) {
      fetchFolders(storageSettingId, containerName);
    }
    onValueChange({
      storageSettingId,
      containerName,
      folderName: ''
    });
  }, [containerName]);

  // When folder changes
  (0, _react.useEffect)(() => {
    onValueChange({
      storageSettingId,
      containerName,
      folderName
    });
  }, [folderName]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "max-w-[500px] py-4 space-y-5"
  }, /*#__PURE__*/_react.default.createElement("h2", {
    className: "text-lg font-semibold"
  }, "Azure File Settings"), /*#__PURE__*/_react.default.createElement("div", {
    className: "space-y-1"
  }, /*#__PURE__*/_react.default.createElement("label", {
    className: "text-sm"
  }, "Storage Setting"), /*#__PURE__*/_react.default.createElement("select", {
    className: "w-full p-2 border rounded",
    value: storageSettingId,
    onChange: e => {
      setStorageSettingId(e.target.value);
      setContainerName('');
      setFolderName('');
    }
  }, /*#__PURE__*/_react.default.createElement("option", {
    value: ""
  }, "Select storage setting"), settings.map(s => /*#__PURE__*/_react.default.createElement("option", {
    key: s.id,
    value: s.id
  }, s.name)))), storageSettingId && /*#__PURE__*/_react.default.createElement("div", {
    className: "space-y-1"
  }, /*#__PURE__*/_react.default.createElement("label", {
    className: "text-sm"
  }, "Container"), /*#__PURE__*/_react.default.createElement("select", {
    className: "w-full p-2 border rounded",
    value: containerName,
    onChange: e => {
      setContainerName(e.target.value);
      setFolderName('');
    }
  }, /*#__PURE__*/_react.default.createElement("option", {
    value: ""
  }, "Select a container"), containers.map(c => /*#__PURE__*/_react.default.createElement("option", {
    key: c.text,
    value: c.value
  }, c.text)))), containerName && /*#__PURE__*/_react.default.createElement("div", {
    className: "space-y-1"
  }, /*#__PURE__*/_react.default.createElement("label", {
    className: "text-sm"
  }, "Folder"), /*#__PURE__*/_react.default.createElement("select", {
    className: "w-full p-2 border rounded",
    value: folderName,
    onChange: e => setFolderName(e.target.value)
  }, /*#__PURE__*/_react.default.createElement("option", {
    value: ""
  }, "Select a folder"), folders.map(f => /*#__PURE__*/_react.default.createElement("option", {
    key: f.text,
    value: f.value
  }, f.text)))), loading && /*#__PURE__*/_react.default.createElement("div", {
    className: "text-sm text-gray-500"
  }, "Loading..."), /*#__PURE__*/_react.default.createElement("div", {
    className: "p-3 mt-4 space-y-1 text-sm border rounded bg-gray-50"
  }, /*#__PURE__*/_react.default.createElement("div", null, "Setting: ", storageSettingId), /*#__PURE__*/_react.default.createElement("div", null, "Container: ", containerName), /*#__PURE__*/_react.default.createElement("div", null, "Folder: ", folderName)));
}