chore: split app to commons and web (squash commit)

packages/hoppscotch-common/src/components/teams/Add.vue

@@ -0,0 +1,93 @@
+<template>
+  <SmartModal v-if="show" dialog :title="t('team.new')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col">
+        <input
+          id="selectLabelTeamAdd"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          autocomplete="off"
+          @keyup.enter="addNewTeam"
+        />
+        <label for="selectLabelTeamAdd">
+          {{ t("action.label") }}
+        </label>
+      </div>
+    </template>
+    <template #footer>
+      <span class="flex space-x-2">
+        <ButtonPrimary
+          :label="t('action.save')"
+          :loading="isLoading"
+          outline
+          @click="addNewTeam"
+        />
+        <ButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { pipe } from "fp-ts/function"
+import * as TE from "fp-ts/TaskEither"
+import { createTeam } from "~/helpers/backend/mutations/Team"
+import { TeamNameCodec } from "~/helpers/backend/types/TeamName"
+import { useI18n } from "@composables/i18n"
+import { useToast } from "@composables/toast"
+
+const t = useI18n()
+
+const toast = useToast()
+
+defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const name = ref<string | null>(null)
+
+const isLoading = ref(false)
+
+const addNewTeam = async () => {
+  isLoading.value = true
+  await pipe(
+    TeamNameCodec.decode(name.value),
+    TE.fromEither,
+    TE.mapLeft(() => "invalid_name" as const),
+    TE.chainW(createTeam),
+    TE.match(
+      (err) => {
+        // err is of type "invalid_name" | GQLError<Err>
+        if (err === "invalid_name") {
+          toast.error(`${t("team.name_length_insufficient")}`)
+        } else {
+          // Handle GQL errors (use err obj)
+        }
+      },
+      () => {
+        toast.success(`${t("team.new_created")}`)
+        hideModal()
+      }
+    )
+  )()
+  isLoading.value = false
+}
+
+const hideModal = () => {
+  name.value = null
+  emit("hide-modal")
+}
+</script>