diff --git a/app/components/badge.hbs b/app/components/badge.hbs new file mode 100644 index 0000000..30924b8 --- /dev/null +++ b/app/components/badge.hbs @@ -0,0 +1,13 @@ +{{#let + 'inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-light text-gray-dark' + (hash + success='bg-green-light text-green-dark' + ) as |commonClasses variableClasses| +}} + + {{#if @icon}} + <@icon class="mr-1" @size={{16}} /> + {{/if}} + {{@label}} + +{{/let}} diff --git a/app/controllers/admin/indexes/item/settings.js b/app/controllers/admin/indexes/item/settings.js index 7f48fb3..7081c46 100644 --- a/app/controllers/admin/indexes/item/settings.js +++ b/app/controllers/admin/indexes/item/settings.js @@ -1,11 +1,13 @@ import Controller from '@ember/controller'; import { action, get, set } from '@ember/object'; import arrayEquals from 'meilisearch-admin/utils/array-equals'; -import { ContentSaveOutline } from 'ember-mdi/icons'; +import { ContentSaveOutline, Check, CircleMedium } from 'ember-mdi/icons'; export default class AdminIndexesItemSettingsController extends Controller { emptyObj = {}; ContentSaveOutline = ContentSaveOutline; + Check = Check; + CircleMedium = CircleMedium; get rankingRulesFields() { const arr = []; @@ -65,4 +67,17 @@ export default class AdminIndexesItemSettingsController extends Controller { reorderItems(itemModels) { set(this.model.settings, 'rankingRules', itemModels); } + + @action + setAttributeValue(arr, item) { + if (arr.length === 0 && arr[0] === '*') { + arr = []; + } + + if (arr.includes(item)) { + arr = arr.filter((i) => i !== item); + } else { + arr.push(item); + } + } } diff --git a/app/models/index.js b/app/models/index.js index 231d9f6..b560ff0 100644 --- a/app/models/index.js +++ b/app/models/index.js @@ -1,7 +1,13 @@ import query from '../utils/query'; import { TrackedArray } from 'tracked-built-ins'; +import { trackedFunction } from 'ember-resources/util/function'; export default class Index { + stats = trackedFunction(this, () => query(`${this.indexPath}/stats`)); + displayedAttributes = trackedFunction(this, () => + query(`${this.indexPath}/settings/displayed-attributes`) + ); + constructor(data) { for (const key in data) { this[key] = data[key]; @@ -12,6 +18,14 @@ export default class Index { return `indexes/${this.uid}`; } + get allAttributesAreDisplayed() { + return ( + this.displayedAttributes.value && + this.displayedAttributes.value.length === 1 && + this.displayedAttributes.value[0] === '*' + ); + } + getSortableAttributes() { return query(`${this.indexPath}/settings/sortable-attributes`).then( (result) => new TrackedArray(result) @@ -34,4 +48,10 @@ export default class Index { body: JSON.stringify(options), }); } + + get fields() { + return this.stats.value + ? Object.keys(this.stats.value.fieldDistribution) + : []; + } } diff --git a/app/routes/admin/indexes/item/settings.js b/app/routes/admin/indexes/item/settings.js index 28e8ea3..1b9c6fd 100644 --- a/app/routes/admin/indexes/item/settings.js +++ b/app/routes/admin/indexes/item/settings.js @@ -37,25 +37,26 @@ class IndexAttribute { export default class AdminIndexesItemSettingsRoute extends Route { async model() { const index = this.modelFor('admin.indexes.item'); - const settings = index.getSettings(); - const stats = index.getStats(); + // const settings = index.getSettings(); + const stats = index.stats; - return hash({ index, settings, stats }).then((result) => { - // Some settings properties may to be ["*"] (all attributes) - // this convert it to [attr1, attr2, ...] - ['displayedAttributes', 'searchableAttributes'].forEach((prop) => { - if ( - result.settings[prop].length === 1 && - result.settings[prop][0] === '*' - ) { - result.settings[prop] = Object.keys(result.stats.fieldDistribution); - } - }); - result.attributes = Object.keys(result.stats.fieldDistribution).map( - (name) => new IndexAttribute(name, result.settings) - ); + return hash({ index, stats }); + // .then((result) => { + // // Some settings properties may to be ["*"] (all attributes) + // // this convert it to [attr1, attr2, ...] + // ['displayedAttributes', 'searchableAttributes'].forEach((prop) => { + // if ( + // result.settings[prop].length === 1 && + // result.settings[prop][0] === '*' + // ) { + // result.settings[prop] = Object.keys(result.stats.fieldDistribution); + // } + // }); + // result.attributes = Object.keys(result.stats.fieldDistribution).map( + // (name) => new IndexAttribute(name, result.settings) + // ); - return result; - }); + // return result; + // }); } } diff --git a/app/templates/admin/indexes/item/settings.hbs b/app/templates/admin/indexes/item/settings.hbs index c1ba7b4..b759d67 100644 --- a/app/templates/admin/indexes/item/settings.hbs +++ b/app/templates/admin/indexes/item/settings.hbs @@ -1,7 +1,31 @@ {{page-title 'Settings'}} - - Attributes + + Displayed attributes + + {{#each @model.index.fields as |item|}} + {{#let + (or + @model.index.allAttributesAreDisplayed + (includes item @model.index.displayedAttributes.value) + ) as |checked| + }} + + {{/let}} + {{/each}} + +{{!-- @@ -56,7 +80,6 @@ @size="16" class="ml-auto cursor-pointer" {{on 'click' (fn this.removeRankingRule item)}} - {{!-- {{sortable-handle}} --}} /> {{/each}} @@ -90,4 +113,4 @@ @rejectedText="Error" @icon={{this.ContentSaveOutline}} @onClick={{this.save}} -/> +/> --}} diff --git a/config/tailwind.config.js b/config/tailwind.config.js index 3c8063d..dbdc066 100644 --- a/config/tailwind.config.js +++ b/config/tailwind.config.js @@ -1,3 +1,5 @@ +const colors = require('tailwindcss/colors'); + const light = '#FAFAFA'; // const gray = '#EEEDEF'; // const dark = '#55585D'; @@ -18,10 +20,21 @@ module.exports = { extend: { colors: { light, - gray, + // gray, dark, text, primary, + + gray: { + light: colors.gray['100'], + DEFAULT: colors.gray['500'], + dark: colors.gray['800'], + }, + green: { + light: colors.emerald['100'], + DEFAULT: colors.emerald['500'], + dark: colors.emerald['800'], + }, }, }, // borderColor: gray, diff --git a/package-lock.json b/package-lock.json index badc78b..094bd45 100644 --- a/package-lock.json +++ b/package-lock.json @@ -56,7 +56,7 @@ "ember-power-select": "^5.0.4", "ember-qunit": "^5.1.5", "ember-resolver": "^8.0.3", - "ember-resources": "^4.4.0", + "ember-resources": "^4.7.1", "ember-set-helper": "^2.0.1", "ember-sortable": "^3.0.1", "ember-source": "~4.2.0", @@ -16453,17 +16453,28 @@ } }, "node_modules/ember-resources": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/ember-resources/-/ember-resources-4.4.0.tgz", - "integrity": "sha512-bMk3qdD7sgG33VY3Znri6z2p/XneITuT02zgFROS9flvUE124rnW/m9ND/fySt5EOE8URhS3IZ6MImIgI1dyCg==", + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/ember-resources/-/ember-resources-4.7.1.tgz", + "integrity": "sha512-5qU9yKXbwOnGaEpJFW+v/NFjXQHLjX8otQGWl9DWvW7qKLICcaDQyNeCiFl06qux3Zfnf2RqVl9Hz8DM0Q9xGw==", "dev": true, "dependencies": { - "@ember/test-waiters": "^3.0.0", + "@babel/runtime": "^7.17.8", "@embroider/addon-shim": "^1.2.0", "@embroider/macros": "^1.2.0" }, - "engines": { - "node": ">=12.2.0 < 13 || >= 14" + "peerDependencies": { + "@ember/test-waiters": "^3.0.0", + "@glimmer/tracking": "^1.0.0", + "ember-concurrency": "^1.0.0 || ^2.0.0", + "ember-source": ">= 3.25.0" + }, + "peerDependenciesMeta": { + "@ember/test-waiters": { + "optional": true + }, + "ember-concurrency": { + "optional": true + } } }, "node_modules/ember-rfc176-data": { @@ -43005,12 +43016,12 @@ } }, "ember-resources": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/ember-resources/-/ember-resources-4.4.0.tgz", - "integrity": "sha512-bMk3qdD7sgG33VY3Znri6z2p/XneITuT02zgFROS9flvUE124rnW/m9ND/fySt5EOE8URhS3IZ6MImIgI1dyCg==", + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/ember-resources/-/ember-resources-4.7.1.tgz", + "integrity": "sha512-5qU9yKXbwOnGaEpJFW+v/NFjXQHLjX8otQGWl9DWvW7qKLICcaDQyNeCiFl06qux3Zfnf2RqVl9Hz8DM0Q9xGw==", "dev": true, "requires": { - "@ember/test-waiters": "^3.0.0", + "@babel/runtime": "^7.17.8", "@embroider/addon-shim": "^1.2.0", "@embroider/macros": "^1.2.0" } diff --git a/package.json b/package.json index a09b5c4..0d8318c 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ "ember-power-select": "^5.0.4", "ember-qunit": "^5.1.5", "ember-resolver": "^8.0.3", - "ember-resources": "^4.4.0", + "ember-resources": "^4.7.1", "ember-set-helper": "^2.0.1", "ember-sortable": "^3.0.1", "ember-source": "~4.2.0", diff --git a/tests/integration/components/badge-test.js b/tests/integration/components/badge-test.js new file mode 100644 index 0000000..0e3a3dd --- /dev/null +++ b/tests/integration/components/badge-test.js @@ -0,0 +1,26 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | badge', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs``); + + assert.dom(this.element).hasText(''); + + // Template block usage: + await render(hbs` + + template block text + + `); + + assert.dom(this.element).hasText('template block text'); + }); +});