{"id":15994275,"url":"https://github.com/pixelhandler/ember-jsonapi-resources-list","last_synced_at":"2025-04-05T00:15:49.748Z","repository":{"id":42409486,"uuid":"62029012","full_name":"pixelhandler/ember-jsonapi-resources-list","owner":"pixelhandler","description":"Ember Addon for JSON API list support, search, filter, sort, etc.","archived":false,"fork":false,"pushed_at":"2016-09-03T05:34:47.000Z","size":27,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-11T16:44:57.927Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pixelhandler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-27T05:55:29.000Z","updated_at":"2016-09-14T22:46:40.000Z","dependencies_parsed_at":"2022-09-01T01:01:46.127Z","dependency_job_id":null,"html_url":"https://github.com/pixelhandler/ember-jsonapi-resources-list","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelhandler%2Fember-jsonapi-resources-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelhandler%2Fember-jsonapi-resources-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelhandler%2Fember-jsonapi-resources-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelhandler%2Fember-jsonapi-resources-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixelhandler","download_url":"https://codeload.github.com/pixelhandler/ember-jsonapi-resources-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247266570,"owners_count":20910837,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-08T07:08:03.427Z","updated_at":"2025-04-05T00:15:49.722Z","avatar_url":"https://github.com/pixelhandler.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ember JSONAPI Resources List Addon\n\nEmber Addon that provides mixins for use with controllers and routes that need\nto display a list of resources that follow the JSON API 1.0 specification.\n\n- Use with the [ember-jsonapi-resources] addon\n\n[ember-jsonapi-resources]: http://ember-jsonapi-resources.com\n\n[![Build Status](https://travis-ci.org/pixelhandler/ember-jsonapi-resources-list.svg?branch=master)](https://travis-ci.org/pixelhandler/ember-jsonapi-resources-list)\n\n## Example Use\n\nIn the router a list route is defined at the path '/' under the 'products' route.\n\n```js\nRouter.map(function() {\n  this.route('products', { path: '/' }, function () {\n    this.route('list', { path: '/' });\n  });\n});\n```\n\n*List Route:*\n\n```js\nimport Ember from 'ember';\nimport ListRouteMixin from 'ember-jsonapi-resources-list/mixins/routes/jsonapi-list';\n\nexport default Ember.Route.extend(ListRouteMixin, {\n  /**\n    The name of the model type, used with store service\n\n    @property resourceName\n    @type String\n    @required\n  */\n  resourceName: 'products',\n\n  /**\n    The parent or route name\n\n    @property routeParent\n    @type String\n    @required\n  */\n  routeParent: 'products'\n});\n```\n\n*List Controller*\n\nUse query params on the products list page which represent the request parameters\nused with the API server.\n\nThis example includes a filter for a `facet`. Perhaps the actual implementation\nwill use `color` or `size`, or both (facets).\n\n```js\nimport Ember from 'ember';\nimport ListControllerMixin from 'ember-jsonapi-resources-list/mixins/controllers/jsonapi-list';\nimport facetTransform from '../transforms/facet';\n\nexport default Ember.Controller.extend(ListControllerMixin, {\n  queryParams: [\n    { searchQuery: 'search' },\n    { sortParamName: 'sort' },\n    { sortingDirection: 'order'},\n    { facetParam: 'facet' }\n  ],\n\n  /**\n    Value use with `filter[facet]` param in API requests\n\n    @property facetParam\n    @type String\n  */\n  facetParam: '',\n\n  /**\n    @property facetFilter\n    @type String\n  */\n  facetFilter: Ember.computed('facets', 'facetParam', {\n    get() {\n      if (!this.get('facetParam')) {\n        this.set('facetParam', this.get('facets')[0]);\n      }\n      return this.get('facetParam');\n    },\n    set(key, value) {\n      return this.set('facetParam', value);\n    },\n  }),\n\n  /**\n    @property facets\n    @type {Array}\n  */\n  facets: Ember.computed(function() {\n    let facets = facetTransform.values.map(function(i){ return i; });\n    facets.unshift('All'); // Allow \"All\" as an option\n    return facets;\n  }),\n\n  actions: {\n    /**\n      Set the filtering params to pass into the route and display into the URL\n\n      @method filtering\n      @param {String} key\n      @param {String} value\n    */\n    filtering(key, value) {\n      if (key === 'facet') {\n        this.set('facetFilter', value);\n      }\n      this.get('target').send('filtering', {\n        facet: this.get('facetParam')\n      });\n    }\n  }\n});\n```\n\n*List Template*\n\n```hbs\n{{input value=searchQuery placeholder=\"Search…\" enter=\"search\" class=\"search\"}}\n\n\u003cdiv class=\"resource-filters row\"\u003e\n  \u003csection class=\"one column\"\u003e\n    \u003cp class=\"resource-filters-title\"\u003eFilters\u003c/p\u003e\n  \u003c/section\u003e\n  \u003csection class=\"resource-filters-item eleven columns icons\"\u003e\n    \u003cem\u003eFacet\u003c/em\u003e\n    {{#each facets as |filter|}}\n      {{#selectable-button value=filter selectedValue=facetFilter action=\"filtering\" attrName=\"facet\"}}\n        {{filter}}\n      {{/selectable-button}}\n    {{/each}}\n  \u003c/section\u003e\n\u003c/div\u003e\n\n\u003ctable class=\"Product-list resource-list u-full-width\"\u003e\n  \u003cthead\u003e\n    \u003ctr class=\"u-small-text u-short-header\"\u003e\n      {{#jsonapi-list-heading\n        on-sort=(action \"sorting\") field=\"facet\"\n        order=sortingDirection\n        activeHeader=sortParamName}}Facet{{/jsonapi-list-heading}}\n      {{#jsonapi-list-heading\n        on-sort=(action \"sorting\") field=\"name\"\n        order=sortingDirection\n        activeHeader=sortParamName}}Product{{/jsonapi-list-heading}}\n      {{#jsonapi-list-heading\n        on-sort=(action \"sorting\") field=\"updated-at\"\n        order=sortingDirection\n        activeHeader=sortParamName}}Updated{{/jsonapi-list-heading}}\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    {{#each model key=\"id\" as |resource|}}\n      \u003ctr {{action \"detail\" resource}}\u003e\n        \u003ctd\u003e{{icon-for value=resource.facet}}\u003c/td\u003e\n        \u003ctd\u003e{{resource.display-name}}\u003c/td\u003e\n        \u003ctd\u003e{{moment-format resource.updated-at \"ll\"}}\u003c/td\u003e\n      \u003c/tr\u003e\n    {{/each}}\n  \u003c/tbody\u003e\n  \u003ctfoot\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"4\" class=\"u-align-center\"\u003e\n        {{jsonapi-list-loader hasMore=hasMore loadingMore=loadingMore action=\"more\"}}\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tfoot\u003e\n\u003c/table\u003e\n\n{{outlet}}\n```\n\n## Installation\n\nIn the consuming application…\n\n    ember install ember-jsonapi-resources-list\n\n## Development\n\nInstall dependencies…\n\n* `git clone` this repository\n* `npm install`\n* `bower install`\n\n## Running Tests\n\n* `npm test` (Runs `ember try:testall` to test your addon against multiple Ember versions)\n* `ember test`\n* `ember test --server`\n\nFor more information on using ember-cli, visit [http://ember-cli.com/](http://ember-cli.com/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelhandler%2Fember-jsonapi-resources-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixelhandler%2Fember-jsonapi-resources-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelhandler%2Fember-jsonapi-resources-list/lists"}