shopdb-flask/frontend/src/views/settings/ServiceNowSettings.vue

<template>
  <div>
    <div class="page-header">
      <h2>Integrations</h2>
      <p class="header-description">Configure external service connections and APIs</p>
    </div>

    <div class="integration-tabs">
      <router-link
        :to="{ name: 'servicenow-settings' }"
        class="integration-tab"
        :class="{ active: $route.name === 'servicenow-settings' }"
      >
        ServiceNow
      </router-link>
      <router-link
        :to="{ name: 'zabbix-settings' }"
        class="integration-tab"
        :class="{ active: $route.name === 'zabbix-settings' }"
      >
        Zabbix Supplies
      </router-link>
      <router-link
        :to="{ name: 'dell-warranty-settings' }"
        class="integration-tab"
        :class="{ active: $route.name === 'dell-warranty-settings' }"
      >
        Dell Warranty
      </router-link>
    </div>

    <div class="section-card">
      <div class="setting-group">
        <p class="setting-description">
          Wire global search and ticket links to your ServiceNow instance. When
          enabled, matching ticket numbers become clickable links and can trigger
          a smart-redirect from global search. Defaults ship for GE; change them
          for your site.
        </p>

        <div class="setting-row">
          <label class="toggle-label">
            <span>Enable ServiceNow</span>
            <button
              class="toggle-btn"
              :class="{ active: settings.servicenow_enabled }"
              @click="toggleSetting('servicenow_enabled')"
              :disabled="saving"
            >
              <span class="toggle-slider"></span>
            </button>
          </label>
        </div>

        <template v-if="settings.servicenow_enabled">
          <div class="setting-row">
            <label>
              <span>Search URL</span>
              <input
                type="url"
                v-model="settings.servicenow_search_url"
                placeholder="https://yourtenant.service-now.com/now/nav/ui/search/.../{ticket}/..."
                @blur="saveSetting('servicenow_search_url', settings.servicenow_search_url)"
                :disabled="saving"
              >
              <small class="input-hint">Global-search redirect target. Use {ticket} where the ticket number goes.</small>
            </label>
          </div>

          <div class="setting-row">
            <label>
              <span>Ticket Prefixes</span>
              <input
                type="text"
                v-model="settings.servicenow_ticket_prefixes"
                placeholder="GEINC,GECHG,GERIT,GESCT"
                @blur="saveSetting('servicenow_ticket_prefixes', settings.servicenow_ticket_prefixes)"
                :disabled="saving"
              >
              <small class="input-hint">Comma-separated ticket-number prefixes that this site recognizes.</small>
            </label>
          </div>

          <div class="setting-row">
            <label>
              <span>Incident URL</span>
              <input
                type="url"
                v-model="settings.servicenow_incident_url"
                placeholder="(blank = plain text; use {ticket} in a URL template)"
                @blur="saveSetting('servicenow_incident_url', settings.servicenow_incident_url)"
                :disabled="saving"
              >
              <small class="input-hint">Link template for incident tickets. Use {ticket} where the ticket number goes.</small>
            </label>
          </div>

          <div class="setting-row">
            <label>
              <span>Change URL</span>
              <input
                type="url"
                v-model="settings.servicenow_change_url"
                placeholder="(blank = plain text; use {ticket} in a URL template)"
                @blur="saveSetting('servicenow_change_url', settings.servicenow_change_url)"
                :disabled="saving"
              >
              <small class="input-hint">Link template for change tickets. Use {ticket} where the ticket number goes.</small>
            </label>
          </div>
        </template>
      </div>
    </div>

    <div v-if="error" class="error-message">{{ error }}</div>
    <div v-if="success" class="settings-success">{{ success }}</div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useSystemSettings } from '../../composables/systemSettings'

const {
  settings, saving, error, success,
  loadSettings, saveSetting, toggleSetting,
} = useSystemSettings()

onMounted(loadSettings)
</script>

<style scoped>
.header-description {
  margin: 0.5rem 0 0;
  color: var(--text-light);
  font-size: 0.95rem;
}

.integration-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  margin: 2rem 0;
}

.integration-tab {
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  color: var(--text-light);
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  font-weight: 500;
  font-size: 0.95rem;
}

.integration-tab:hover {
  color: var(--text);
  background: var(--hover-bg);
}

.integration-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
</style>