{"id":15994255,"url":"https://github.com/pixelhandler/ember-jsonapi-resources-form","last_synced_at":"2025-06-27T02:33:52.029Z","repository":{"id":42410385,"uuid":"62064291","full_name":"pixelhandler/ember-jsonapi-resources-form","owner":"pixelhandler","description":"Ember Addon: JSON API Resource form components","archived":false,"fork":false,"pushed_at":"2016-09-03T05:47:21.000Z","size":27,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-06T23:36:38.291Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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-27T14:55:25.000Z","updated_at":"2016-06-27T15:09:10.000Z","dependencies_parsed_at":"2022-09-01T01:11:16.841Z","dependency_job_id":null,"html_url":"https://github.com/pixelhandler/ember-jsonapi-resources-form","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/pixelhandler/ember-jsonapi-resources-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelhandler%2Fember-jsonapi-resources-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelhandler%2Fember-jsonapi-resources-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelhandler%2Fember-jsonapi-resources-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelhandler%2Fember-jsonapi-resources-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixelhandler","download_url":"https://codeload.github.com/pixelhandler/ember-jsonapi-resources-form/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelhandler%2Fember-jsonapi-resources-form/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262178053,"owners_count":23270984,"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:07:53.717Z","updated_at":"2025-06-27T02:33:51.989Z","avatar_url":"https://github.com/pixelhandler.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ember-jsonapi-resources-form\n\nEmber Addon that provides components for use with forms to edit a resource\nthat follows 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-form.svg?branch=master)](https://travis-ci.org/pixelhandler/ember-jsonapi-resources-form)\n\n\n## Example Use\n\nFor a simple example see the `address-form` component usage in the `dummy` app.\n\nThe `resource-form` is an abstract component for CRUD operations on a Resource\ninstance (model).\n\nTo trigger actions include the form controls component in the template for your\ncomponent that extends `resource-form`, and set the target…\n\nExample template for a form component that extends the `resource-form`:\n\n```hbs\n{{form-controls target=this isEditing=isEditing isNew=isNew isAdmin=isAdmin}}\n{{text-input value=resource.name\n  name=\"name\" action=\"performUpdate\" target=this\n  requireInput=isEditing disabled=notEditing}}\n{{number-input value=resource.total min=\"0\" step=\"1\"\n  name=\"total\" action=\"applyChange\" target=this\n  requireInput=isEditing disabled=notEditing}}\n```\n\nActions that interact with the various presentation modes of the form,\ninclude: `toPreview` (new resource), `toDetail` / `toEdit` (persisted resource),\n`cancel`, `save`, and `destroy`.\n\nA few examples using a (concrete) component which extends `resource-form`…\n\nFor an \"editing\" route or 'editing' state of the form:\n\n```hbs\n{{catalog-form model=model isNew=model.isNew isEditing=true\n  on-update=(route-action 'update')\n  on-toDetail=(route-action 'toDetail')\n}}\n```\n\nFor a \"Detail\" route or \"Preview\" state of the form:\n\n```hbs\n{{catalog-form model=model isNew=model.isNew isEditing=false\n  on-edit=(route-action 'toEdit')\n  on-destroy=(route-action 'destroy')\n}}\n```\n\nFor a \"New\" route / state of the form:\n\n```hbs\n{{catalog-form model=model isNew=model.isNew isEditing=false\n  on-save=(route-action 'save')\n  on-cancel=(route-action 'cancel')\n}}\n```\n\nA example form that adds behavior to edit relationships…\n\n*Form component*\n\n```js\nimport Ember from 'ember';\nimport ResourceFormComponent from 'core-form/components/resource-form';\n\nconst { get, set, inject, computed } = Ember;\n\nexport default ResourceFormComponent.extend({\n  products: inject.service(),\n  resourceName: 'catalog',\n\n  /**\n    Handles selected relation for new Resource\n\n    @method relationSelected\n    @param {ProductResource} relation\n  */\n  relationSelected(relation) {\n    let model = get(this, 'model');\n    model.addRelationship(get(relation, 'type'), get(relation, 'id'));\n  },\n\n  /**\n    @method unsetRelation\n    @param {ProductResource} relation\n  */\n  unsetRelation(relation) {\n    let model = get(this, 'model');\n    model.removeRelationship(get(relation, 'type'), get(relation, 'id'));\n  },\n\n  /**\n    @method addRelationship\n    @param String resourceName\n    @param String id\n  */\n  addRelationship(resourceName, id){\n    let model = get(this, 'model');\n    model.addRelationship(resourceName, id);\n    get(this, get('resourceName')).patchRelationship(model, resourceName, id);\n  },\n\n  /**\n    @method removeRelationship\n    @param  {String} resourceName\n    @param  {String} id\n  */\n  removeRelationship(resourceName, id){\n    let model = get(this, 'model');\n    model.removeRelationship(resourceName, id);\n    get(this, get('resourceName')).destroyRelationship(model, resourceName, id);\n  }\n});\n```\n\n*Form template*\n\n```hbs\n{{form-controls target=this isEditing=isEditing isNew=isNew inFlight=inFlight}}\n\u003cfieldset\u003e\n  \u003clegend\u003eCatalog Info\u003c/legend\u003e\n  {{#input-row label=\"Region\" name=\"region\"}}\n    {{! text-input is bound to a value, use action to apply changes and persist}}\n    {{text-input\n      value=resource.region\n      name=\"region\"\n      requireInput=isEditing\n      disabled=notEditing\n      action=\"performUpdate\" target=this\n    }}\n  {{/input-row}}\n\n  {{#input-row label=\"Total\" name=\"total\"}}\n  {{! number-input doesn't bind to the value need, use action to set changes}}\n  {{number-input min=\"0\" step=\"15\"\n    value=resource.total\n    name=\"total\"\n    requireInput=isEditing\n    disabled=notEditing\n    action=\"applyChange\" target=this\n  }}\n  {{/input-row}}\n\n  {{#input-row label=\"Product\" name=\"product\"}}\n    {{#power-select\n      placeholder=\"Choose a Product\"\n      disabled=notEditing\n      selected=resource.product\n      onchange=(action \"selected\")\n      search=(action \"search\") as |product|}}\n      {{product.name}}\n    {{/power-select}}\n  {{/input-row}}\n\u003c/fieldset\u003e\n{{yield}}\n```\n\n## Installation\n\nIn the consuming application…\n\n    ember install ember-jsonapi-resources-form\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-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixelhandler%2Fember-jsonapi-resources-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelhandler%2Fember-jsonapi-resources-form/lists"}