@nvent-addon/app 0.5.15 → 1.0.0-alpha.10

package/dist/runtime/app/pages/triggers/[name]/edit.vue

@@ -1,429 +0,0 @@
-<template>
-  <ClientOnly>
-    <template #fallback>
-      <div class="h-full flex items-center justify-center">
-        <div class="text-center">
-          <UIcon
-            name="i-lucide-loader-2"
-            class="w-8 h-8 animate-spin mx-auto mb-3 text-gray-400"
-          />
-          <p class="text-sm text-gray-500 dark:text-gray-400">
-            Loading...
-          </p>
-        </div>
-      </div>
-    </template>
-    <div class="h-full flex flex-col overflow-hidden bg-gray-50 dark:bg-gray-950">
-      <!-- Header -->
-      <NventTriggerEditHeader
-        :is-saving="isSaving"
-        :has-changes="hasChanges"
-        @back="goBack"
-        @cancel="goBack"
-        @save="handleSave"
-      />
-
-      <!-- Loading State -->
-      <div
-        v-if="status === 'pending' && !trigger"
-        class="flex-1 flex items-center justify-center"
-      >
-        <div class="text-center">
-          <UIcon
-            name="i-lucide-loader-2"
-            class="w-8 h-8 animate-spin mx-auto mb-3 text-gray-400"
-          />
-          <p class="text-sm text-gray-500 dark:text-gray-400">
-            Loading trigger...
-          </p>
-        </div>
-      </div>
-
-      <!-- Error State -->
-      <div
-        v-else-if="!trigger"
-        class="flex-1 flex items-center justify-center"
-      >
-        <div class="text-center">
-          <UIcon
-            name="i-lucide-alert-circle"
-            class="w-12 h-12 mx-auto mb-3 text-red-400"
-          />
-          <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">
-            Trigger not found
-          </h2>
-          <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
-            The trigger you're looking for doesn't exist.
-          </p>
-          <UButton
-            color="neutral"
-            @click="goBack"
-          >
-            Go Back
-          </UButton>
-        </div>
-      </div>
-
-      <!-- Main Content -->
-      <div
-        v-else
-        class="flex-1 overflow-y-auto p-6"
-      >
-        <div class="max-w-4xl mx-auto">
-          <!-- Error Alert -->
-          <UAlert
-            v-if="saveError"
-            color="error"
-            variant="subtle"
-            :title="saveError"
-            :close-button="{ icon: 'i-lucide-x' }"
-            @close="saveError = null"
-          />
-
-          <!-- Success Alert -->
-          <UAlert
-            v-if="saveSuccess"
-            color="success"
-            variant="subtle"
-            title="Trigger updated successfully"
-            :close-button="{ icon: 'i-lucide-x' }"
-            @close="saveSuccess = false"
-          />
-
-          <!-- Main Form -->
-          <UForm
-            ref="form"
-            :schema="currentSchema"
-            :state="formState"
-            class="space-y-6"
-            @submit="onSubmit"
-            @error="onError"
-          >
-            <!-- Basic Information -->
-            <NventTriggerBasicInfoCard
-              v-model="formState"
-              is-edit
-            />
-
-            <!-- Status Control -->
-            <NventTriggerStatusConfig
-              v-model="formState.status"
-              nested
-            />
-
-            <!-- Type-Specific Configuration -->
-            <NventTriggerWebhookConfig
-              v-if="formState.type === 'webhook'"
-              v-model="formState.webhook"
-              name="webhook"
-            />
-
-            <NventTriggerScheduleConfig
-              v-if="formState.type === 'schedule'"
-              v-model="formState.schedule"
-              name="schedule"
-            />
-
-            <NventTriggerEventConfig
-              v-if="formState.type === 'event'"
-              v-model="formState.config"
-              name="config"
-            />
-
-            <!-- Flow Subscriptions -->
-            <NventTriggerFlowSubscriptions
-              :subscriptions="formState.subscriptions"
-              :flows="flows"
-              @toggle="toggleFlowSubscription"
-            />
-          </UForm>
-
-          <!-- Danger Zone -->
-          <NventTriggerDangerZone
-            class="mt-6"
-            :is-deleting="isDeleting"
-            @delete="handleDelete"
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- Delete Confirmation Dialog -->
-    <ConfirmDialog
-      v-model:open="showDeleteDialog"
-      title="Delete Trigger"
-      :description="`Are you sure you want to delete the trigger '${trigger?.displayName || trigger?.name}'?`"
-      :items="[
-  'All subscriptions will be removed',
-  'Event history will be preserved',
-  'This action cannot be undone'
-]"
-      warning="This is a permanent action."
-      confirm-label="Delete Trigger"
-      confirm-color="error"
-      icon="i-lucide-alert-triangle"
-      icon-color="error"
-      :loading="isDeleting"
-      @confirm="confirmDelete"
-      @cancel="showDeleteDialog = false"
-    />
-  </ClientOnly>
-</template>
-
-<script setup>
-import { ref, computed, watch, useToast } from "#imports";
-import { useTrigger } from "../../../composables/useTrigger";
-import { useAnalyzedFlows } from "../../../composables/useAnalyzedFlows";
-import { useComponentRouter } from "../../../composables/useComponentRouter";
-import ConfirmDialog from "../../../components/ConfirmDialog.vue";
-import { z } from "zod";
-const router = useComponentRouter();
-const toast = useToast();
-const route = computed(() => {
-  if (!router.route?.value?.path) return null;
-  const path = router.route.value.path;
-  const match = path.match(/\/triggers\/([^/]+)\/edit/);
-  return match && match[1] ? decodeURIComponent(match[1]) : null;
-});
-const triggerName = computed(() => route.value);
-const { trigger, status, refresh } = useTrigger(triggerName);
-const flows = useAnalyzedFlows();
-const baseSchema = z.object({
-  name: z.string().min(1, "Name is required"),
-  displayName: z.string().min(1, "Display name is required"),
-  description: z.string(),
-  type: z.enum(["event", "webhook", "schedule", "manual"]),
-  scope: z.enum(["flow", "run"]),
-  subscriptions: z.array(z.string())
-});
-const webhookSchema = baseSchema.extend({
-  webhook: z.object({
-    path: z.string().min(1, "Webhook path is required"),
-    method: z.enum(["GET", "POST", "PUT", "PATCH", "DELETE"]),
-    requireAuth: z.boolean(),
-    authHeader: z.string().min(1, "Auth header is required").optional()
-  })
-});
-const scheduleSchema = baseSchema.extend({
-  schedule: z.object({
-    cron: z.string().optional(),
-    interval: z.number().min(1, "Interval must be at least 1 second").optional(),
-    timezone: z.string().min(1, "Timezone is required"),
-    enabled: z.boolean()
-  }).refine(
-    (data) => data.cron || data.interval,
-    { message: "Either cron expression or interval is required", path: ["cron"] }
-  )
-});
-const eventSchema = baseSchema.extend({
-  config: z.object({
-    event: z.string().min(1, "Event name is required"),
-    filter: z.string().optional()
-  })
-});
-const manualSchema = baseSchema;
-const currentSchema = computed(() => {
-  switch (formState.value.type) {
-    case "webhook":
-      return webhookSchema;
-    case "schedule":
-      return scheduleSchema;
-    case "event":
-      return eventSchema;
-    default:
-      return manualSchema;
-  }
-});
-const formState = ref({
-  name: "",
-  displayName: "",
-  description: "",
-  type: "event",
-  scope: "flow",
-  status: "active",
-  webhook: {
-    path: "",
-    method: "POST",
-    requireAuth: false,
-    authHeader: "X-API-Key"
-  },
-  schedule: {
-    cron: "",
-    interval: void 0,
-    timezone: "UTC",
-    enabled: true
-  },
-  config: {
-    event: "",
-    filter: ""
-  },
-  subscriptions: []
-});
-const form = ref();
-const isSaving = ref(false);
-watch(trigger, (newTrigger) => {
-  if (newTrigger && !isSaving.value) {
-    formState.value.name = newTrigger.name;
-    formState.value.displayName = newTrigger.displayName || newTrigger.name;
-    formState.value.description = newTrigger.description || "";
-    formState.value.type = newTrigger.type;
-    formState.value.scope = newTrigger.scope;
-    formState.value.status = newTrigger.status || "active";
-    if (newTrigger.webhook) {
-      formState.value.webhook = {
-        path: newTrigger.webhook.path || "",
-        method: newTrigger.webhook.method || "POST",
-        requireAuth: !!newTrigger.webhook.auth,
-        authHeader: newTrigger.webhook.auth?.header || "X-API-Key"
-      };
-    }
-    if (newTrigger.schedule) {
-      formState.value.schedule = {
-        cron: newTrigger.schedule.cron || "",
-        interval: newTrigger.schedule.interval,
-        timezone: newTrigger.schedule.timezone || "UTC",
-        enabled: newTrigger.schedule.enabled ?? true
-      };
-    }
-    if (newTrigger.config) {
-      formState.value.config = {
-        event: newTrigger.config.event || "",
-        filter: newTrigger.config.filter ? JSON.stringify(newTrigger.config.filter, null, 2) : ""
-      };
-    }
-    formState.value.subscriptions = Array.from(new Set(newTrigger.subscribedFlows || []));
-  }
-}, { immediate: true });
-const toggleFlowSubscription = (flowName) => {
-  const index = formState.value.subscriptions.indexOf(flowName);
-  if (index === -1) {
-    formState.value.subscriptions.push(flowName);
-  } else {
-    formState.value.subscriptions.splice(index, 1);
-  }
-};
-const manualDirty = ref(false);
-watch(() => formState.value.subscriptions, () => {
-  manualDirty.value = true;
-}, { deep: true });
-const hasChanges = computed(() => {
-  if (form.value?.dirty || manualDirty.value) return true;
-  if (!trigger.value) return false;
-  return formState.value.displayName !== (trigger.value.displayName || trigger.value.name) || formState.value.description !== (trigger.value.description || "") || formState.value.status !== (trigger.value.status || "active") || JSON.stringify([...formState.value.subscriptions].sort()) !== JSON.stringify([...trigger.value.subscribedFlows || []].sort()) || trigger.value.type === "webhook" && (formState.value.webhook.path !== (trigger.value.webhook?.path || "") || formState.value.webhook.method !== (trigger.value.webhook?.method || "POST")) || trigger.value.type === "schedule" && (formState.value.schedule.cron !== (trigger.value.schedule?.cron || "") || formState.value.schedule.interval !== trigger.value.schedule?.interval || formState.value.schedule.timezone !== (trigger.value.schedule?.timezone || "UTC") || formState.value.schedule.enabled !== (trigger.value.schedule?.enabled ?? true)) || trigger.value.type === "event" && (formState.value.config.event !== (trigger.value.config?.event || "") || formState.value.config.filter !== (trigger.value.config?.filter ? JSON.stringify(trigger.value.config.filter, null, 2) : ""));
-});
-const saveError = ref(null);
-const saveSuccess = ref(false);
-const onSubmit = async (event) => {
-  if (!trigger.value || isSaving.value) return;
-  isSaving.value = true;
-  saveError.value = null;
-  saveSuccess.value = false;
-  try {
-    const data = event.data;
-    const payload = {
-      displayName: data.displayName,
-      description: data.description,
-      status: formState.value.status,
-      subscriptions: formState.value.subscriptions
-      // Use formState directly for subscriptions
-    };
-    if (formState.value.type === "webhook") {
-      payload.config = {
-        path: formState.value.webhook.path,
-        method: formState.value.webhook.method,
-        requireAuth: formState.value.webhook.requireAuth,
-        authHeader: formState.value.webhook.authHeader
-      };
-    } else if (formState.value.type === "schedule") {
-      payload.config = {
-        cron: formState.value.schedule.cron || void 0,
-        interval: formState.value.schedule.interval,
-        timezone: formState.value.schedule.timezone,
-        enabled: formState.value.schedule.enabled
-      };
-    } else if (formState.value.type === "event") {
-      payload.config = {
-        event: formState.value.config.event,
-        filter: formState.value.config.filter || void 0
-      };
-    }
-    const response = await $fetch(`/api/_triggers/${encodeURIComponent(trigger.value.name)}`, {
-      method: "PATCH",
-      body: payload
-    });
-    if (response.error) {
-      saveError.value = response.error;
-      toast.add({ title: "Error", description: response.error, color: "error" });
-    } else {
-      saveSuccess.value = true;
-      toast.add({ title: "Success", description: "Trigger updated successfully", color: "success" });
-      await new Promise((resolve) => setTimeout(resolve, 300));
-      isSaving.value = false;
-      await refresh();
-      manualDirty.value = false;
-      if (form.value) {
-        form.value.clear();
-      }
-      setTimeout(() => {
-        saveSuccess.value = false;
-      }, 3e3);
-    }
-  } catch (err) {
-    const message = err instanceof Error ? err.message : "Failed to update trigger";
-    saveError.value = message;
-    toast.add({ title: "Error", description: message, color: "error" });
-    isSaving.value = false;
-  }
-};
-const onError = (event) => {
-  if (event?.errors?.[0]) {
-    const error = event.errors[0];
-    toast.add({
-      title: "Validation Error",
-      description: error.message || "Please check your form inputs",
-      color: "error"
-    });
-    if (error.id) {
-      const element = document.getElementById(error.id);
-      element?.focus();
-      element?.scrollIntoView({ behavior: "smooth", block: "center" });
-    }
-  }
-};
-const handleSave = () => {
-  form.value?.submit();
-};
-const isDeleting = ref(false);
-const showDeleteDialog = ref(false);
-const handleDelete = () => {
-  showDeleteDialog.value = true;
-};
-const confirmDelete = async () => {
-  if (!trigger.value) return;
-  isDeleting.value = true;
-  saveError.value = null;
-  try {
-    const response = await $fetch(`/api/_triggers/${encodeURIComponent(trigger.value.name)}`, {
-      method: "DELETE"
-    });
-    if (response.error) {
-      saveError.value = response.error;
-      showDeleteDialog.value = false;
-    } else {
-      toast.add({ title: "Success", description: "Trigger deleted successfully", color: "success" });
-      showDeleteDialog.value = false;
-      setTimeout(() => {
-        router.push("/triggers");
-      }, 500);
-    }
-  } catch (err) {
-    saveError.value = err instanceof Error ? err.message : "Failed to delete trigger";
-    showDeleteDialog.value = false;
-  } finally {
-    isDeleting.value = false;
-  }
-};
-const goBack = () => {
-  router.push(`/triggers/${encodeURIComponent(trigger.value?.name || "")}`);
-};
-</script>

package/dist/runtime/app/pages/triggers/[name]/edit.vue.d.ts

@@ -1,3 +0,0 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/app/pages/triggers/[name].d.vue.ts

@@ -1,3 +0,0 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;