Skip to content

Commit

Permalink
add validation to json
Browse files Browse the repository at this point in the history 
style updates for nav
  • Loading branch information
@dshomoye
dshomoye committed Jan 20, 2021
1 parent dcf31f4 commit b6f1c3c
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 100 deletions.
6 changes: 6 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,12 @@
"path": "./syntaxes/splunk.tmLanguage.json"
}
],
"jsonValidation": [
{
"fileMatch": "globalConfig.json",
"url": "https://raw.githubusercontent.com/splunk/addonfactory-ucc-generator/master/splunk_add_on_ucc_framework/UCC-UI-lib/schema/schema.json"
}
],
"configuration": {
"title": "Splunk",
"properties": {
Expand Down
208 changes: 108 additions & 100 deletions resources/templates/globalConfig.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,114 +13,111 @@

<body style="font-size: 0.7rem;" x-data="data()" x-init="listen()"
@update-slim-select.window="$nextTick(() => { initMultiSelect() });">
<div>
<nav class="navbar navbar-expand-lg bg-success">
<main class="container m-1 mt-2 shadow rounded">
<nav class="navbar navbar-expand-lg bg-success shadow">
<div class="container" id="main-nav">
<template x-for="page in pages" :key="page">
<a class="nav-link text-white" href="#" x-text="page" @click="updatePage(page)"></a>
<a :class="activePage===page ? styles.mainNav.active : styles.mainNav.inActive" href="#" x-text="page" @click="updatePage(page)"></a>
</template>
</div>
</nav>
</div>
<hr>
<div class="mb-5">
<p>Tabs: </p>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container">
<template x-for="tab in tabs">
<a class="nav-link text-dark" href="#" x-text="tab.title" @click="updateEntities(tab.name)"></a>
</template>
</div>
</nav>
</div>
<hr />
<div class="mb-5">
<p>Table:</p>
<table class="table">
<thead>
<th>Auth</th>
<th>Auth Type</th>
</thead>
<tbody>
<td>Sample</td>
<td>Sample</td>
</tbody>
</table>
</div>
<p>Form Fields:</p>
<div id="form-container">
<form>
<template x-for="entity in entities">
<div>
<template x-if="entity.type === 'text' ">
<div class="mb-3">
<label class="form-label" x-text="entity.label"></label>
<input type="text" class="form-control form-control-sm">
</div>
<div class="mb-2 shadow-sm">
<nav class="navbar navbar-expand-lg bg-light">
<div class="container">
<template x-for="tab in tabs">
<a :class="activeForm===tab.name ? styles.subNav.active : styles.subNav.inActive" href="#" x-text="tab.title" @click="updateEntities(tab.name)"></a>
</template>
<template x-if="entity.type === 'checkbox' ">
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" value="entity.field">
<label class="form-check-label" for="exampleCheck1" x-text="entity.label"></label>
</div>
</template>
<template x-if="entity.type === 'radio' ">
<div class="mb-3">
<p x-text="entity.label"></p>
<template x-for="option in entity.options.items">
<div class="form-check">
<input class="form-check-input" type="radio" :name="entity.field" :id="option.value"
:value="option.value">
<label class="form-check-label" :for="option.value" x-text="option.label">
</label>
</div>
</nav>
</div>
<div class="p-5">
<div class="mb-5">
<p>Table:</p>
<table class="table">
<thead>
<th>Auth</th>
<th>Auth Type</th>
</thead>
<tbody>
<td>Sample</td>
<td>Sample</td>
</tbody>
</table>
</div>
<p>Form Fields:</p>
<div id="form-container">
<form>
<template x-for="entity in entities">
<div>
<template x-if="entity.type === 'text' ">
<div class="mb-3">
<label class="form-label" x-text="entity.label"></label>
<input type="text" class="form-control form-control-sm">
</div>
</template>
</div>
</template>
<template x-if="entity.type === 'singleSelect' ">
<div class="mb-3">
<p x-text="entity.label"></p>
<template x-if="entity.options && entity.options.autoCompleteFields">
<select :id="entity.field" :aria-label="entity.label">
<template x-for="opt in entity.singleOptions" :key="opt.value">
<option :value="opt.value" x-text="opt.label"></option>
<template x-if="entity.type === 'checkbox' ">
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1"
value="entity.field">
<label class="form-check-label" for="exampleCheck1" x-text="entity.label"></label>
</div>
</template>
<template x-if="entity.type === 'radio' ">
<div class="mb-3">
<p x-text="entity.label"></p>
<template x-for="option in entity.options.items">
<div class="form-check">
<input class="form-check-input" type="radio" :name="entity.field"
:id="option.value" :value="option.value">
<label class="form-check-label" :for="option.value" x-text="option.label">
</label>
</div>
</template>
<template x-for="group in entity.optionGroups">
<optgroup :label="group.label">
<template x-for="opt in group.options">
<option x-text="opt.label" :value="opt.value"></option>
</div>
</template>
<template x-if="entity.type === 'singleSelect' ">
<div class="mb-3">
<p x-text="entity.label"></p>
<template x-if="entity.options && entity.options.autoCompleteFields">
<select :id="entity.field" :aria-label="entity.label">
<template x-for="opt in entity.singleOptions" :key="opt.value">
<option :value="opt.value" x-text="opt.label"></option>
</template>
</optgroup>
<template x-for="group in entity.optionGroups">
<optgroup :label="group.label">
<template x-for="opt in group.options">
<option x-text="opt.label" :value="opt.value"></option>
</template>
</optgroup>
</template>
</select>
</template>
<template x-if="entity.options.endpointUrl">
<select :id="entity.field" :aria-label="entity.label">
<option x-text="'Options will populate from ' + entity.options.endpointUrl"
:value="entity.options.endpointUrl"></option>
</select>
</template>
</select>
</div>
</template>
<template x-if="entity.options.endpointUrl">
<select :id="entity.field" :aria-label="entity.label">
<option x-text="'Options will populate from ' + entity.options.endpointUrl"
:value="entity.options.endpointUrl"></option>
</select>
<template x-if="entity.type === 'multipleSelect'">
<div class="mb-3">
<p x-text="entity.label"></p>
<select multiple :id="entity.field" aria-label="entity.label">
<template x-if="entity.options && entity.options.items">
<template x-for="option in entity.options.items">
<option :value="option.value" x-text="option.label"></option>
</template>
</template>
</select>
</div>
</template>
</div>
</template>
<template x-if="entity.type === 'multipleSelect'">
<div class="mb-3">
<p x-text="entity.label"></p>
<select multiple :id="entity.field" aria-label="entity.label">
<template x-if="entity.options && entity.options.items">
<template x-for="option in entity.options.items">
<option :value="option.value" x-text="option.label"></option>
</template>
</template>
</select>
</div>
</template>
</div>
</template>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
</form>
</div>
</div>
</main>
<script>
const unwrap = data => JSON.parse(JSON.stringify(data))

Expand All @@ -140,6 +137,7 @@
if (message.action === "config-data") {
this.globalConfig = message.data
this.pages = Object.keys(message.data.pages).map(p => this.globalConfig.pages[p].title)
this.updatePage(this.activePage, this.activeForm)
this.updateEntities(this.activeForm);
}
})
Expand All @@ -153,20 +151,20 @@
this.entities = form.entity.map(entity => {
// normalizing single and optiongroups here because alpine.js
// doesn't support x-if inside x-fors that will allow matching both of these in the template
if(entity.type === 'singleSelect') {
if (entity.type === 'singleSelect') {
const singleOptions = []
const optionGroups = []
entity.options?.autoCompleteFields?.forEach((opt) => {
if(opt.value) {
if (opt.value) {
singleOptions.push(opt)
} else if(opt.children) {
} else if (opt.children) {
optionGroups.push({
label: opt.label,
options: opt.children
})
}
})
return {...entity, optionGroups, singleOptions }
return { ...entity, optionGroups, singleOptions }
} else {
return entity
}
Expand All @@ -176,12 +174,12 @@
}
window.dispatchEvent(new CustomEvent('update-slim-select'));
},
updatePage(page) {
updatePage(page, form = '') {
this.activePage = page;
this.updateEntities('');
this.updateEntities(form);
if (page === 'Configuration') {
this.tabs = this.globalConfig.pages.configuration.tabs
} else {
} else if (page === 'Inputs') {
this.tabs = this.globalConfig.pages.inputs.services
}
},
Expand All @@ -191,6 +189,16 @@
this.slimSelects.push(new SlimSelect({ select: `#${entity.field}` }))
}
})
},
styles: {
mainNav: {
inActive: 'nav-link text-white',
active: 'nav-link text-dark bg-light rounded'
},
subNav: {
inActive: 'nav-link text-dark',
active: 'nav-link text-white bg-dark rounded'
}
}
}
}
Expand Down

0 comments on commit b6f1c3c

Please sign in to comment.