TileConfigureDialog.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import type { TileInstance } from '../types/dashboard'
import { getTileDefinition } from '../tiles/registry'
import {
  CHART_TILE_TYPE_TO_KIND,
  isChartTileType,
  type ApiMarkdownTileConfig,
  type ApiTileConfig,
  type ChartTileConfig,
  type MetricTileConfig,
  type TextTileConfig,
} from '../tiles/tileConfigs'
import { useDashboardState } from '../dashboard/useDashboardState'

const props = defineProps<{
  tile: TileInstance | null
}>()

const dash = useDashboardState()

const textTitle = ref('')
const textBody = ref('')
const apiTitle = ref('')
const apiUrl = ref('')
const apiMethod = ref<ApiTileConfig['method']>('GET')
const apiHeaders = ref('')
const apiBody = ref('')
const apiPoll = ref(0)
const apiSchema = ref('')
const apiDisplayPaths = ref('')

const apiMdTitle = ref('')
const apiMdUrl = ref('')
const apiMdMethod = ref<ApiMarkdownTileConfig['method']>('GET')
const apiMdHeaders = ref('')
const apiMdBody = ref('')
const apiMdPoll = ref(0)
const apiMdSchema = ref('')
const apiMdTemplate = ref('')

const metricTitle = ref('')
const metricUrl = ref('')
const metricMethod = ref<MetricTileConfig['method']>('GET')
const metricHeaders = ref('')
const metricBody = ref('')
const metricPoll = ref(0)
const metricPointer = ref('')
const metricValueTitle = ref('')

const chartTitle = ref('')
const chartDataUrl = ref('')
const chartMethod = ref<ChartTileConfig['method']>('GET')
const chartHeaders = ref('')
const chartBody = ref('')
const chartPoll = ref(0)
const chartDataJson = ref('')
const chartOptionsJson = ref('')

watch(
  () => props.tile,
  (t) => {
    if (!t) return
    if (t.type === 'text') {
      const c = t.config as unknown as TextTileConfig
      textTitle.value = c.title ?? ''
      textBody.value = c.body ?? ''
    } else if (t.type === 'api') {
      const c = t.config as unknown as ApiTileConfig
      apiTitle.value = c.title ?? ''
      apiUrl.value = c.url ?? ''
      apiMethod.value = (c.method as ApiTileConfig['method']) || 'GET'
      apiHeaders.value = c.headersText ?? '{}'
      apiBody.value = c.bodyText ?? ''
      apiPoll.value = Number(c.pollIntervalSec) || 0
      apiSchema.value = c.responseSchemaText ?? ''
      apiDisplayPaths.value = c.displayPathsText ?? ''
    } else if (t.type === 'apiMarkdown') {
      const c = t.config as unknown as ApiMarkdownTileConfig
      apiMdTitle.value = c.title ?? ''
      apiMdUrl.value = c.url ?? ''
      apiMdMethod.value = (c.method as ApiMarkdownTileConfig['method']) || 'GET'
      apiMdHeaders.value = c.headersText ?? '{}'
      apiMdBody.value = c.bodyText ?? ''
      apiMdPoll.value = Number(c.pollIntervalSec) || 0
      apiMdSchema.value = c.responseSchemaText ?? ''
      apiMdTemplate.value = c.markdownTemplate ?? ''
    } else if (t.type === 'metric') {
      const c = t.config as unknown as MetricTileConfig
      metricTitle.value = c.title ?? ''
      metricUrl.value = c.url ?? ''
      metricMethod.value = (c.method as MetricTileConfig['method']) || 'GET'
      metricHeaders.value = c.headersText ?? '{}'
      metricBody.value = c.bodyText ?? ''
      metricPoll.value = Number(c.pollIntervalSec) || 0
      metricPointer.value = c.valuePointer ?? ''
      metricValueTitle.value = c.valueTitle ?? ''
    } else if (isChartTileType(t.type)) {
      const c = t.config as unknown as ChartTileConfig
      chartTitle.value = c.title ?? ''
      chartDataUrl.value = c.chartDataUrl ?? ''
      chartMethod.value = (c.method as ChartTileConfig['method']) || 'GET'
      chartHeaders.value = c.headersText ?? '{}'
      chartBody.value = c.bodyText ?? ''
      chartPoll.value = Number(c.pollIntervalSec) || 0
      chartDataJson.value = c.chartDataJson ?? '{}'
      chartOptionsJson.value = c.chartOptionsJson ?? '{}'
    }
  },
  { immediate: true },
)

const heading = computed(() => {
  if (!props.tile) return 'Configure'
  return getTileDefinition(props.tile.type).label
})

function save() {
  if (!props.tile) return
  if (props.tile.type === 'text') {
    dash.updateTileConfig(props.tile.id, {
      title: textTitle.value,
      body: textBody.value,
    })
  } else if (props.tile.type === 'api') {
    dash.updateTileConfig(props.tile.id, {
      title: apiTitle.value,
      url: apiUrl.value,
      method: apiMethod.value,
      headersText: apiHeaders.value,
      bodyText: apiBody.value,
      pollIntervalSec: apiPoll.value,
      responseSchemaText: apiSchema.value,
      displayPathsText: apiDisplayPaths.value,
    })
  } else if (props.tile.type === 'apiMarkdown') {
    dash.updateTileConfig(props.tile.id, {
      title: apiMdTitle.value,
      url: apiMdUrl.value,
      method: apiMdMethod.value,
      headersText: apiMdHeaders.value,
      bodyText: apiMdBody.value,
      pollIntervalSec: apiMdPoll.value,
      responseSchemaText: apiMdSchema.value,
      markdownTemplate: apiMdTemplate.value,
    })
  } else if (props.tile.type === 'metric') {
    dash.updateTileConfig(props.tile.id, {
      title: metricTitle.value,
      url: metricUrl.value,
      method: metricMethod.value,
      headersText: metricHeaders.value,
      bodyText: metricBody.value,
      pollIntervalSec: metricPoll.value,
      valuePointer: metricPointer.value,
      valueTitle: metricValueTitle.value,
    })
  } else if (isChartTileType(props.tile.type)) {
    dash.updateTileConfig(props.tile.id, {
      title: chartTitle.value,
      chartKind: CHART_TILE_TYPE_TO_KIND[props.tile.type],
      chartDataUrl: chartDataUrl.value,
      method: chartMethod.value,
      headersText: chartHeaders.value,
      bodyText: chartBody.value,
      pollIntervalSec: chartPoll.value,
      chartDataJson: chartDataJson.value,
      chartOptionsJson: chartOptionsJson.value,
    })
  }
  dash.closeConfigure()
}

function close() {
  dash.closeConfigure()
}
</script>

<template>
  <Teleport to="body">
    <div v-if="tile" class="backdrop" @click.self="close">
      <div class="dialog" :class="{ wide: isChartTileType(tile.type) }" role="dialog" aria-modal="true">
        <h2>{{ heading }}</h2>

        <template v-if="tile.type === 'text'">
          <label class="field">
            <span>Title</span>
            <input v-model="textTitle" type="text" autocomplete="off" />
          </label>
          <label class="field">
            <span>Body</span>
            <textarea v-model="textBody" rows="6"></textarea>
          </label>
        </template>

        <template v-else-if="tile.type === 'api'">
          <label class="field">
            <span>Tile title</span>
            <input v-model="apiTitle" type="text" autocomplete="off" />
          </label>
          <label class="field">
            <span>URL</span>
            <input v-model="apiUrl" type="url" autocomplete="off" />
          </label>
          <label class="field">
            <span>Method</span>
            <select v-model="apiMethod">
              <option value="GET">GET</option>
              <option value="POST">POST</option>
              <option value="PUT">PUT</option>
              <option value="PATCH">PATCH</option>
              <option value="DELETE">DELETE</option>
            </select>
          </label>
          <label class="field">
            <span>Headers (JSON object)</span>
            <textarea v-model="apiHeaders" rows="3" spellcheck="false"></textarea>
          </label>
          <label class="field">
            <span>Body (for POST/PUT/PATCH)</span>
            <textarea v-model="apiBody" rows="4" spellcheck="false"></textarea>
          </label>
          <label class="field">
            <span>Poll interval (seconds, 0 = off)</span>
            <input v-model.number="apiPoll" type="number" min="0" step="1" />
          </label>
          <label class="field">
            <span>Show properties (JSON Pointer per line, RFC 6901). Leave empty for full JSON.</span>
            <textarea
              v-model="apiDisplayPaths"
              rows="5"
              spellcheck="false"
              class="mono"
              placeholder="/id&#10;/title&#10;/nested/key&#10;# lines starting with # are ignored"
            ></textarea>
          </label>
          <label class="field">
            <span>Response JSON Schema (AJV draft-2020-12)</span>
            <textarea v-model="apiSchema" rows="10" spellcheck="false" class="mono"></textarea>
          </label>
        </template>

        <template v-else-if="tile.type === 'apiMarkdown'">
          <label class="field">
            <span>Tile title</span>
            <input v-model="apiMdTitle" type="text" autocomplete="off" />
          </label>
          <label class="field">
            <span>URL</span>
            <input v-model="apiMdUrl" type="url" autocomplete="off" />
          </label>
          <label class="field">
            <span>Method</span>
            <select v-model="apiMdMethod">
              <option value="GET">GET</option>
              <option value="POST">POST</option>
              <option value="PUT">PUT</option>
              <option value="PATCH">PATCH</option>
              <option value="DELETE">DELETE</option>
            </select>
          </label>
          <label class="field">
            <span>Headers (JSON object)</span>
            <textarea v-model="apiMdHeaders" rows="3" spellcheck="false"></textarea>
          </label>
          <label class="field">
            <span>Body (for POST/PUT/PATCH)</span>
            <textarea v-model="apiMdBody" rows="4" spellcheck="false"></textarea>
          </label>
          <label class="field">
            <span>Poll interval (seconds, 0 = off)</span>
            <input v-model.number="apiMdPoll" type="number" min="0" step="1" />
          </label>
          <label class="field">
            <span v-pre
              >Markdown template — rendered with Nunjucks (`json` is the full response; top-level object keys are
              available directly). Legacy JSON Pointer placeholders are still supported as `{{/field}}`. Date helpers:
              `dateISO`, `dateFormat`, `fromUnix`.</span
            >
            <textarea v-model="apiMdTemplate" rows="10" spellcheck="false" class="mono"></textarea>
          </label>
          <label class="field">
            <span>Response JSON Schema (AJV draft-2020-12)</span>
            <textarea v-model="apiMdSchema" rows="10" spellcheck="false" class="mono"></textarea>
          </label>
        </template>

        <template v-else-if="tile.type === 'metric'">
          <label class="field">
            <span>Tile title (chrome)</span>
            <input v-model="metricTitle" type="text" autocomplete="off" />
          </label>
          <label class="field">
            <span>URL</span>
            <input v-model="metricUrl" type="url" autocomplete="off" />
          </label>
          <label class="field">
            <span>Method</span>
            <select v-model="metricMethod">
              <option value="GET">GET</option>
              <option value="POST">POST</option>
              <option value="PUT">PUT</option>
              <option value="PATCH">PATCH</option>
              <option value="DELETE">DELETE</option>
            </select>
          </label>
          <label class="field">
            <span>Headers (JSON object)</span>
            <textarea v-model="metricHeaders" rows="3" spellcheck="false"></textarea>
          </label>
          <label class="field">
            <span>Body (for POST/PUT/PATCH)</span>
            <textarea v-model="metricBody" rows="4" spellcheck="false"></textarea>
          </label>
          <label class="field">
            <span>Poll interval (seconds, 0 = off)</span>
            <input v-model.number="metricPoll" type="number" min="0" step="1" />
          </label>
          <label class="field">
            <span>Label above number (optional)</span>
            <input v-model="metricValueTitle" type="text" autocomplete="off" placeholder="e.g. Active users" />
          </label>
          <label class="field">
            <span>Value JSON Pointer (RFC 6901), e.g. /id — leave empty if the response body is only a number</span>
            <input v-model="metricPointer" type="text" spellcheck="false" class="mono" placeholder="/numericField" />
          </label>
        </template>

        <template v-else-if="isChartTileType(tile.type)">
          <label class="field">
            <span>Tile title</span>
            <input v-model="chartTitle" type="text" autocomplete="off" />
          </label>
          <p class="hint">
            Chart type is fixed by the tile you added. When using a URL, the HTTP JSON body must be an object with
            <strong>labels</strong> and <strong>datasets</strong> arrays —
            <a href="https://www.chartjs.org/docs/latest/general/data-structures.html" target="_blank" rel="noopener noreferrer"
              >Chart.js data structure</a
            >.
          </p>
          <label class="field">
            <span>Data URL (optional)</span>
            <input v-model="chartDataUrl" type="url" autocomplete="off" placeholder="Leave empty to use static JSON below" />
          </label>
          <template v-if="chartDataUrl.trim()">
            <label class="field">
              <span>Method</span>
              <select v-model="chartMethod">
                <option value="GET">GET</option>
                <option value="POST">POST</option>
                <option value="PUT">PUT</option>
                <option value="PATCH">PATCH</option>
                <option value="DELETE">DELETE</option>
              </select>
            </label>
            <label class="field">
              <span>Headers (JSON object)</span>
              <textarea v-model="chartHeaders" rows="3" spellcheck="false"></textarea>
            </label>
            <label class="field">
              <span>Body (for POST/PUT/PATCH)</span>
              <textarea v-model="chartBody" rows="4" spellcheck="false"></textarea>
            </label>
            <label class="field">
              <span>Poll interval (seconds, 0 = only on load / Refresh)</span>
              <input v-model.number="chartPoll" type="number" min="0" step="1" />
            </label>
          </template>
          <label class="field">
            <span>Chart data (JSON — static fallback when URL is empty)</span>
            <textarea v-model="chartDataJson" rows="14" spellcheck="false" class="mono"></textarea>
          </label>
          <label class="field">
            <span>Chart options (JSON, optional)</span>
            <textarea v-model="chartOptionsJson" rows="6" spellcheck="false" class="mono"></textarea>
          </label>
          <p class="hint muted-hint">Options merge over defaults (responsive, maintainAspectRatio: false) for both static and fetched data.</p>
        </template>

        <footer class="footer">
          <button type="button" class="btn secondary" @click="close">Cancel</button>
          <button type="button" class="btn primary" @click="save">Save</button>
        </footer>
      </div>
    </div>
  </Teleport>
</template>

<style scoped>
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 25, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

.dialog {
  background: var(--dash-surface);
  color: var(--dash-text);
  border-radius: 12px;
  padding: 20px 22px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--dash-border);
}

.dialog.wide {
  max-width: 720px;
}

.hint {
  margin: -6px 0 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--dash-muted);
}

.hint a {
  color: var(--dash-primary);
}

.muted-hint {
  margin-top: -8px;
}

h2 {
  margin: 0 0 16px;
  font-size: 1.1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13px;
}

.field span {
  font-weight: 500;
  color: var(--dash-muted);
}

input,
select,
textarea {
  font: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--dash-border);
  background: var(--dash-bg);
  color: var(--dash-text);
}

textarea.mono {
  font-family: ui-monospace, monospace;
  font-size: 12px;
}

input.mono {
  font-family: ui-monospace, monospace;
  font-size: 12px;
}

.footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.btn {
  font: inherit;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--dash-border);
  background: var(--dash-bg);
}

.btn.primary {
  background: var(--dash-primary);
  color: #fff;
  border-color: var(--dash-primary);
}

.btn.primary:hover {
  background: var(--dash-primary-hover);
  border-color: var(--dash-primary-hover);
}

.btn.secondary {
  background: transparent;
  color: var(--dash-secondary);
  border-color: var(--dash-secondary-border);
}

.btn.secondary:hover {
  background: var(--dash-secondary-soft);
  border-color: var(--dash-secondary);
}
</style>