Add addon ember-royal-table
This commit is contained in:
Stanislav Romanov
parent
a88d88308b
commit
c4aedf8139
5 changed files with 107 additions and 72 deletions
|
|
@ -6,3 +6,42 @@
|
|||
.md-icon {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.royal-table {
|
||||
@apply border border-light text-left mb-4;
|
||||
|
||||
thead {
|
||||
@apply bg-light;
|
||||
|
||||
tr {
|
||||
@apply border-b border-light;
|
||||
|
||||
th {
|
||||
@apply px-4 py-4 text-dark font-normal whitespace-nowrap;
|
||||
|
||||
&[type="button"] {
|
||||
@apply cursor-pointer select-none;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
bottom: .1em;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:nth-child(even) {
|
||||
@apply bg-light;
|
||||
}
|
||||
|
||||
td {
|
||||
@apply px-4 py-2 text-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,63 +1,47 @@
|
|||
{{page-title "Settings"}}
|
||||
|
||||
{{#let (hash td="px-4 py-2 text-left whitespace-nowrap") as |classes|}}
|
||||
<label class="mb-2">Attributes</label>
|
||||
<table class="mb-4 table-auto">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class={{classes.td}}>#</th>
|
||||
<th class={{classes.td}}>Displayed</th>
|
||||
<th class={{classes.td}}>Filterable</th>
|
||||
<th class={{classes.td}}>Searchable</th>
|
||||
<th class={{classes.td}}>Sortable</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each @model.attributes as |attribute|}}
|
||||
<tr>
|
||||
<td class={{classes.td}}>{{attribute.name}}</td>
|
||||
<td class={{classes.td}}>
|
||||
<InputCheckbox
|
||||
@checked={{attribute.displayed}}
|
||||
@onChange={{set attribute 'displayed'}}
|
||||
/>
|
||||
</td>
|
||||
<td class={{classes.td}}>
|
||||
<InputCheckbox
|
||||
@checked={{attribute.filterable}}
|
||||
@onChange={{set attribute 'filterable'}}
|
||||
/>
|
||||
</td>
|
||||
<td class={{classes.td}}>
|
||||
<InputCheckbox
|
||||
@checked={{attribute.searchable}}
|
||||
@onChange={{set attribute 'searchable'}}
|
||||
/>
|
||||
</td>
|
||||
<td class={{classes.td}}>
|
||||
<InputCheckbox
|
||||
@checked={{attribute.sortable}}
|
||||
@onChange={{set attribute 'sortable'}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
{{/let}}
|
||||
|
||||
{{page-title 'Settings'}}
|
||||
<label class="mb-2">
|
||||
Attributes
|
||||
</label>
|
||||
<RoyalTable @data={{@model.attributes}} as |Column dataRow|>
|
||||
<Column @prop="name" />
|
||||
<Column @name="Displayed">
|
||||
<InputCheckbox
|
||||
@checked={{dataRow.displayed}}
|
||||
@onChange={{set dataRow 'displayed'}}
|
||||
/>
|
||||
</Column>
|
||||
<Column @name="Filterable">
|
||||
<InputCheckbox
|
||||
@checked={{dataRow.filterable}}
|
||||
@onChange={{set dataRow 'filterable'}}
|
||||
/>
|
||||
</Column>
|
||||
<Column @name="Searchable">
|
||||
<InputCheckbox
|
||||
@checked={{dataRow.searchable}}
|
||||
@onChange={{set dataRow 'searchable'}}
|
||||
/>
|
||||
</Column>
|
||||
<Column @name="Sortable">
|
||||
<InputCheckbox
|
||||
@checked={{dataRow.sortable}}
|
||||
@onChange={{set dataRow 'sortable'}}
|
||||
/>
|
||||
</Column>
|
||||
</RoyalTable>
|
||||
<InputSelect
|
||||
@label="Distinct attribute"
|
||||
@options={{keys @model.stats.fieldDistribution}}
|
||||
@selected={{@model.settings.distinctAttribute}}
|
||||
@onChange={{set @model.settings 'distinctAttribute'}}
|
||||
@allowClear={{true}}
|
||||
as |option|>
|
||||
@allowClear={{true}} as |option|
|
||||
>
|
||||
{{option}}
|
||||
</InputSelect>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="mb-2">Ranking rules</label>
|
||||
<label class="mb-2">
|
||||
Ranking rules
|
||||
</label>
|
||||
<SortableObjects
|
||||
@sortableObjectList={{@model.settings.rankingRules}}
|
||||
@sortingScope="a"
|
||||
|
|
@ -71,7 +55,7 @@
|
|||
class="flex items-center px-4 py-2 mb-2 border max-w-md"
|
||||
@dragHandle=".md-icon"
|
||||
>
|
||||
<MdIcon @icon="drag-vertical" class="mr-2 -ml-2 cursor-move"/>
|
||||
<MdIcon @icon="drag-vertical" class="mr-2 -ml-2 cursor-move" />
|
||||
{{item}}
|
||||
<MdIcon
|
||||
@icon="close-thick"
|
||||
|
|
@ -86,37 +70,32 @@
|
|||
<InputSelect
|
||||
@options={{this.rankingRulesFields}}
|
||||
@onChange={{this.selectNewRankingRule}}
|
||||
@placeholder="Add field"
|
||||
as |option|>
|
||||
@placeholder="Add field" as |option|
|
||||
>
|
||||
{{option}}
|
||||
</InputSelect>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<InputTextarea
|
||||
@label="Stop-words"
|
||||
@value={{json-stringify @model.settings.stopWords}}
|
||||
@onChange={{fn this.saveStrToJSON 'stopWords' (array)}}
|
||||
@helper='JSON format'
|
||||
@helper="JSON format"
|
||||
/>
|
||||
|
||||
<InputTextarea
|
||||
@label="Synonyms"
|
||||
@value={{json-stringify @model.settings.synonyms}}
|
||||
@onChange={{fn this.saveStrToJSON 'synonyms' this.emptyObj}}
|
||||
@helper='JSON format'
|
||||
@helper="JSON format"
|
||||
/>
|
||||
|
||||
<Button
|
||||
@text="Save"
|
||||
@pendingText="Saving"
|
||||
@fulfilledText="Done"
|
||||
@rejectedText="Error"
|
||||
|
||||
@icon="database-arrow-up-outline"
|
||||
@pendingIcon="clock-outline"
|
||||
@fulfilledIcon="check"
|
||||
@rejectedIcon="alert-circle-outline"
|
||||
|
||||
@onClick={{this.save}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -13,16 +13,9 @@ module.exports = function (defaults) {
|
|||
compile: {
|
||||
cacheInclude: [/.*\.(css|scss|hbs)$/, /.*tailwind.config.js$/],
|
||||
plugins: [
|
||||
{
|
||||
module: autoprefixer,
|
||||
options: {},
|
||||
},
|
||||
{
|
||||
module: tailwind,
|
||||
options: {
|
||||
config: './config/tailwind.config.js',
|
||||
},
|
||||
},
|
||||
require('tailwindcss/nesting'),
|
||||
require('tailwindcss')('./config/tailwind.config.js'),
|
||||
require('autoprefixer'),
|
||||
],
|
||||
},
|
||||
},
|
||||
|
|
|
|||
23
package-lock.json
generated
23
package-lock.json
generated
|
|
@ -55,6 +55,7 @@
|
|||
"ember-qunit": "^5.1.5",
|
||||
"ember-resolver": "^8.0.3",
|
||||
"ember-resources": "^4.4.0",
|
||||
"ember-royal-table": "github:kaermorchen/ember-royal-table#master",
|
||||
"ember-set-helper": "^2.0.1",
|
||||
"ember-source": "~4.2.0",
|
||||
"ember-template-lint": "^4.2.0",
|
||||
|
|
@ -14538,6 +14539,19 @@
|
|||
"node": "8.* || 10.* || >= 12"
|
||||
}
|
||||
},
|
||||
"node_modules/ember-royal-table": {
|
||||
"version": "0.0.0",
|
||||
"resolved": "git+ssh://git@github.com/kaermorchen/ember-royal-table.git#211c5411cc9f5aee3ed90f5b4cc9a71edbc2f422",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ember-cli-babel": "^7.26.11",
|
||||
"ember-cli-htmlbars": "^6.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "12.* || 14.* || >= 16"
|
||||
}
|
||||
},
|
||||
"node_modules/ember-set-helper": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ember-set-helper/-/ember-set-helper-2.0.1.tgz",
|
||||
|
|
@ -37771,6 +37785,15 @@
|
|||
"recast": "^0.18.1"
|
||||
}
|
||||
},
|
||||
"ember-royal-table": {
|
||||
"version": "git+ssh://git@github.com/kaermorchen/ember-royal-table.git#211c5411cc9f5aee3ed90f5b4cc9a71edbc2f422",
|
||||
"dev": true,
|
||||
"from": "ember-royal-table@kaermorchen/ember-royal-table#master",
|
||||
"requires": {
|
||||
"ember-cli-babel": "^7.26.11",
|
||||
"ember-cli-htmlbars": "^6.0.1"
|
||||
}
|
||||
},
|
||||
"ember-set-helper": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ember-set-helper/-/ember-set-helper-2.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@
|
|||
"ember-qunit": "^5.1.5",
|
||||
"ember-resolver": "^8.0.3",
|
||||
"ember-resources": "^4.4.0",
|
||||
"ember-royal-table": "github:kaermorchen/ember-royal-table#master",
|
||||
"ember-set-helper": "^2.0.1",
|
||||
"ember-source": "~4.2.0",
|
||||
"ember-template-lint": "^4.2.0",
|
||||
|
|
|
|||
Loading…
Reference in a new issue