Search code examples
ember.jsember-power-select

Build Ember Power-Select component

Wondering if Ember power-select can be used as follows.

I have a model that has related records. I'm trying to use PS to pick from one of that list in order to set another related record. To explain more fully, here is the final end state. (This is for a singing competition, models Capitalized):

  • each Contestant sings multiple Songs
  • each Song has one Chart
  • each Contestant submits multiple Submissions (in advance) for pre-clearance
  • each Submission has one Chart

i'm trying to use power-select to pick the Chart for each Song, from the pre-cleared Submission list specific to each contestant.

I can get parts of things working, but can't get the whole thing together because (i think) i'm trying to line up Submissions and Charts, which are related but different items.

so, on a page that represents a Contestant model, i'm trying to do:

{{power-select options=model.submissions onchange=(action pseudo-code: save selected submission.chart to model.chart.)}}

I know this is a difficult question for the format, but i'm hopelessly stuck

UPDATE: I still think i'm missing something. Here is the schema that shows all the models and their relations. schema

In this context, the main 'page' (ie, the 'model') is the Performance. Each performance has multiple songs (two, to be precise), which for UI purposes I'd prefer to show simultaneously. So I am using an {{#each model.songs as |song|}} in this context to pick the chart. Each song has one parent chart. As a further complication, the chart for a given song does not necessarily have to be present on the submission table; but in most cases that's how the chart list will be restricted.

So ultimately what i'm trying to do is have a filtered list of chart objects, according to what has been submitted via the submission table (which is essentially a many-to-many pass through. Ultimately i'm looking to save the chart field on the song model, so that means two power-select components on the performance page.

pretty complicated question, i know. but with any luck the i've conveyed the problem accurately... thanks

Solution

  • If I got the idea, you just want to set a belongsTo relationship when the user choose an option.

    {{#power-select 
  options=model.submissions
  selected=model.chart
  onchange=(action (mut model.chart) value="chart") as |submission|}}

  {{submission.name}}

{{/power-select}}

    When a submission is chosen, it will just call model.set('chart', submission.chart)