Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Impler's VueJS SDK #723

Open
chavda-bhavik opened this issue Jul 31, 2024 · 2 comments
Open

Impler's VueJS SDK #723

chavda-bhavik opened this issue Jul 31, 2024 · 2 comments
Assignees
@manya706
Labels
good first issue Good for newcomers help wanted Extra attention is needed up-for-grabs

Comments

@chavda-bhavik
Copy link
Member

Is your feature request related to a problem? Please describe.
Create SDK to integrate Impler's Import Widget in VueJS Application

Describe the solution you'd like
The SDK would be headless, like calling a function. Headless SDK doesn't come into the way of the developer way and just does its work.
The SDK would behave the same as the react implementation at, https://github.com/implerhq/impler.io/blob/next/packages/react/src/hooks/useImpler.ts

Additional context
Here is the Pure HTML & JS Implementation of Logic in Angular SDK,

  <body>
    <button class="btn btn-primary" disabled id="btnOpenImpler">
      Import
    </button>

    <script
      type="text/javascript"
      src="https://embed.impler.io/embed.umd.min.js"
      async
    ></script>
    <script type="text/javascript">
      function generateUuid() {
        return window.crypto.getRandomValues(new Uint32Array(1))[0];
      }

      let uuid = generateUuid();
      let isImplerInitialized = false;
      const EleBtnOpenImpler = document.getElementById("btnOpenImpler");

      window.onload = (e) => {
        if (window.impler) {
          window.impler.init(uuid);

          const readyCheckInterval = setInterval(() => {
            if (window.impler.isReady()) {
              clearInterval(readyCheckInterval);
              EleBtnOpenImpler.removeAttribute("disabled");
            }
          }, 1000);

          EleBtnOpenImpler.addEventListener("click", (e) => {
            window.impler.show({
              uuid,
              projectId: "",
              templateId: "",
              accessToken: "",
              // Get these credentials from https://web.impler.io, (create import, add columns, got to "snippet", open "Add Import Button" to find credentials)
              // find out about more options here: https://docs.impler.io/widget/react-embed#props
            });
          });

          const closeWidget = () => {
            if (window.impler) {
              window.impler.close();
            }
          };

          window.impler.on('message', (eventData) => {
            switch (eventData.type) {
              case "WIDGET_READY":
                console.log("Widget is ready");
                break;
              case "CLOSE_WIDGET":
                console.log("Widget is closed");
                break;
              case "UPLOAD_STARTED":
                console.log("Upload started", eventData.value);
                break;
              case "UPLOAD_TERMINATED":
                console.log("Upload skipped in middle", eventData.value);
                break;
              case "UPLOAD_COMPLETED":
                console.log("Upload completed", eventData.value);
                break;
              case "DATA_IMPORTED":
                console.log("Data imported", eventData.value);
                break;
              default:
                break;
            }
          }, uuid);
        }
      };
    </script>
  </body>

Here we will allow the developer to provide following things,

  projectId,
  primaryColor,
  templateId,
  accessToken,
  authHeaderValue,
  title,
  extra,
  onUploadComplete,
  onWidgetClose,
  onUploadStart,
  onDataImported,
  onUploadTerminate,

Logic will export isImplerInitiated, showWidget, and closeWidget .
@chavda-bhavik chavda-bhavik added good first issue Good for newcomers help wanted Extra attention is needed up-for-grabs labels Jul 31, 2024
@chavda-bhavik chavda-bhavik moved this to Roadmap in Roadmap Jul 31, 2024
@manya706
Copy link

manya706 commented Oct 1, 2024

Hi! can you assign this to me?

@chavda-bhavik
Copy link
Member Author

@manya706 You can refer to https://github.com/implerhq/impler.io/tree/next/packages for more information. You can join discord for a quick discussion.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@manya706 manya706

Labels
good first issue Good for newcomers help wanted Extra attention is needed up-for-grabs
Projects
Roadmap
Status: Roadmap
Milestone
No milestone
Development

No branches or pull requests
2 participants
@chavda-bhavik @manya706