OliveTin/frontend/resources/vue/views/ActionExecConditionsView.vue

<template>
  <Section
    :title="'Execution conditions: ' + actionTitle"
    :icon="TimeScheduleIcon"
    :padding="false"
  >
    <template #toolbar>
      <router-link
        :to="{ name: 'ActionDetails', params: { actionId: route.params.actionId } }"
        class="button neutral"
      >
        Back to action details
      </router-link>
    </template>

    <div
      v-if="action"
      class="padding content"
    >
      <p>
        These entries mirror the automatic triggers from your OliveTin configuration for this action.
        You can always run the action manually as well.
      </p>

      <h3 class="exec-type-heading">
        On click
        <a
          class="doc-link"
          :href="execConditionDocs.onDemand"
          target="_blank"
          rel="noopener noreferrer"
        >Documentation</a>
      </h3>
      <p>
        Manual execution from the web UI (dashboard or action details), or via the API (for example StartAction),
        is always available when your user is allowed to execute the action.
      </p>

      <template v-if="action.execOnStartup">
        <h3 class="exec-type-heading">
          <code>execOnStartup</code>
          <a
            class="doc-link"
            :href="execConditionDocs.startup"
            target="_blank"
            rel="noopener noreferrer"
          >Documentation</a>
        </h3>
        <p>Runs once when OliveTin starts.</p>
      </template>

      <template v-if="nonEmptyList(action.execOnCron)">
        <h3 class="exec-type-heading">
          <code>execOnCron</code>
          <a
            class="doc-link"
            :href="execConditionDocs.cron"
            target="_blank"
            rel="noopener noreferrer"
          >Documentation</a>
        </h3>
        <ul>
          <li
            v-for="(line, idx) in action.execOnCron"
            :key="'cron-' + idx"
          >
            <code>{{ line }}</code>
          </li>
        </ul>
      </template>

      <template v-if="nonEmptyList(action.execOnFileCreatedInDir)">
        <h3 class="exec-type-heading">
          <code>execOnFileCreatedInDir</code>
          <a
            class="doc-link"
            :href="execConditionDocs.fileCreated"
            target="_blank"
            rel="noopener noreferrer"
          >Documentation</a>
        </h3>
        <ul>
          <li
            v-for="(dir, idx) in action.execOnFileCreatedInDir"
            :key="'created-' + idx"
          >
            <code>{{ dir }}</code>
          </li>
        </ul>
      </template>

      <template v-if="nonEmptyList(action.execOnFileChangedInDir)">
        <h3 class="exec-type-heading">
          <code>execOnFileChangedInDir</code>
          <a
            class="doc-link"
            :href="execConditionDocs.fileChanged"
            target="_blank"
            rel="noopener noreferrer"
          >Documentation</a>
        </h3>
        <ul>
          <li
            v-for="(dir, idx) in action.execOnFileChangedInDir"
            :key="'changed-' + idx"
          >
            <code>{{ dir }}</code>
          </li>
        </ul>
      </template>

      <template v-if="action.execOnCalendarFile">
        <h3 class="exec-type-heading">
          <code>execOnCalendarFile</code>
          <a
            class="doc-link"
            :href="execConditionDocs.calendar"
            target="_blank"
            rel="noopener noreferrer"
          >Documentation</a>
        </h3>
        <p><code>{{ action.execOnCalendarFile }}</code></p>
      </template>

      <template v-if="nonEmptyList(action.execOnWebhooks)">
        <h3 class="exec-type-heading">
          <code>execOnWebhook</code>
          <a
            class="doc-link"
            :href="execConditionDocs.webhook"
            target="_blank"
            rel="noopener noreferrer"
          >Documentation</a>
        </h3>
        <ul class="webhook-list">
          <li
            v-for="(wh, idx) in action.execOnWebhooks"
            :key="'wh-' + idx"
          >
            <span v-if="wh.template">template: <code>{{ wh.template }}</code></span>
            <span v-if="wh.matchPath"> · matchPath: <code>{{ wh.matchPath }}</code></span>
            <span v-if="nonEmptyObject(wh.matchHeaders)"> · matchHeaders: <code>{{ wh.matchHeaders }}</code></span>
            <span v-if="nonEmptyObject(wh.matchQuery)"> · matchQuery: <code>{{ wh.matchQuery }}</code></span>
            <span v-if="!webhookHasCondition(wh)">Webhook trigger (no conditions in response)</span>
          </li>
        </ul>
      </template>

      <p
        v-if="!hasConfiguredTriggers"
        class="muted"
      >
        This action has no automatic triggers in configuration besides on-demand execution.
      </p>
    </div>

    <div
      v-else-if="!loading"
      class="padding empty-state"
    >
      <p>Could not load this action.</p>
      <router-link :to="{ name: 'Actions' }">
        Return to index
      </router-link>
    </div>
  </Section>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { TimeScheduleIcon } from '@hugeicons/core-free-icons'
import Section from 'picocrank/vue/components/Section.vue'

const route = useRoute()
const action = ref(null)
const actionTitle = ref('Action')
const loading = ref(true)

const execConditionDocs = {
  onDemand: 'https://docs.olivetin.app/action_execution/ondemand.html',
  startup: 'https://docs.olivetin.app/action_execution/onstartup.html',
  cron: 'https://docs.olivetin.app/action_execution/oncron.html',
  fileCreated: 'https://docs.olivetin.app/action_execution/onfilecreated.html',
  fileChanged: 'https://docs.olivetin.app/action_execution/onfilechanged.html',
  calendar: 'https://docs.olivetin.app/action_execution/oncalendar.html',
  webhook: 'https://docs.olivetin.app/action_execution/onwebhook.html'
}

function nonEmptyList (list) {
  return Array.isArray(list) && list.length > 0
}

function nonEmptyObject (object) {
  return object && Object.keys(object).length > 0
}

function webhookHasCondition (webhook) {
  return webhook.template || webhook.matchPath || nonEmptyObject(webhook.matchHeaders) || nonEmptyObject(webhook.matchQuery)
}

const hasConfiguredTriggers = computed(() => {
  const a = action.value
  if (!a) {
    return false
  }
  if (a.execOnStartup) {
    return true
  }
  if (nonEmptyList(a.execOnCron) || nonEmptyList(a.execOnFileCreatedInDir) || nonEmptyList(a.execOnFileChangedInDir)) {
    return true
  }
  if (a.execOnCalendarFile) {
    return true
  }
  if (nonEmptyList(a.execOnWebhooks)) {
    return true
  }
  return false
})

async function fetchAction () {
  loading.value = true
  try {
    const actionId = route.params.actionId
    const response = await window.client.getActionBinding({ bindingId: actionId })
    action.value = response.action
    actionTitle.value = response.action?.title || 'Action'
  } catch (err) {
    console.error('Failed to fetch action:', err)
    window.showBigError('fetch-action-exec-conditions', 'getting action', err, false)
    action.value = null
  } finally {
    loading.value = false
  }
}

onMounted(fetchAction)

watch(
  () => route.params.actionId,
  () => {
    action.value = null
    actionTitle.value = 'Action'
    fetchAction()
  }
)
</script>

<style scoped>
.content h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.35rem;
  font-size: 1rem;
}

.exec-type-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
}

.exec-type-heading .doc-link {
  font-size: 0.85rem;
  font-weight: normal;
}

.content p,
.content ul {
  margin: 0.35rem 0 0;
}

.webhook-list li {
  margin-bottom: 0.35rem;
}

.muted {
  color: var(--text-secondary);
  margin-top: 1.5rem;
}

.empty-state {
  text-align: center;
  color: var(--text-secondary);
}

.padding {
  padding: 1rem;
}
</style>