Skip to content

Instantly share code, notes, and snippets.

@scneptune
Last active October 6, 2017 23:38
Show Gist options
  • Save scneptune/d92dc3f30ea30acf4c552c08ca0f9f44 to your computer and use it in GitHub Desktop.
Save scneptune/d92dc3f30ea30acf4c552c08ca0f9f44 to your computer and use it in GitHub Desktop.

This will be considered done when:

  • In the "Screening Rooms" tab of the admin section of the Catalogue, there exists a dropdown to filter which type(s) of screening rooms are shown.
    • Drop-down options are: All, Full, Basic
    • If All is selected, then each screening room should have a label above the name of the screening room to indicate the type of screening room: Basic or Full
  • In the "Screening Rooms" tab of the admin section of the Catalogue, the search feature interacts with this screening room type drop-down menu (so I can search and filter simultaneously).
  • For basic screening rooms, admin users can do the following
    • Edit an existing screening room
    • Edit the name of the screening room
    • Edit the carousel order of videos in the screening room
    • Remove videos from the screening room
    • Add/remove users to/from an existing screening room (see CC-147 TO DO for requirements)
    • Duplicating an existing screening room (the duplication will also be a "Basic" screening room)
    • Deleting an existing screening room

The feature matches the spec (see attached mock below, and InVision Prototype here: https://projects.invisionapp.com/d/#/console/10463333/245526839/preview)

Ch-ch-changes

turn and face the strange - David Bowie

On Media Api:

Need to write a migration to define a types field for a Collection model.

Update the CollectionsController#index route to handle search like we've done with the Users#index route, which includes coming up with a route param to pass for filtering on Collection type.

On Content Catalogue

First we need to add /src/app/views/partials/screening-room-table.hbs filtering markup to a new partial which we will call within /src/app/views/partials/screening-room-list.hbs. An example of how this should be reformatted would be /src/app/views/partials/user-dashboard.hbs, where a filters are called in a partial on line 19. We also need to create a unique id for the div element that will be wrapped around this filter partial, ( We'll use this id later for the rendering of the filtering system within src/javascripts/screening-room.js)

Speaking of which...

Within /src/javascripts/screening-room.js, we will need to separate out the collectionsParser(L38-L56) handling within the resultModalRender(L19-L57) function. We are doing this because we need to move this searching function outside of the main redux store subscription function, this is a similar path I've taken with the user search.

We will need to declare our id we set in the /src/app/views/partials/user-dashboard.hbs filters partials refactor. An example of how this is done can be found on L20-L24 of /src/javascripts/screening-room.js. This is done so we can use the templateLoader to render the handlebar templates inside a mounted DOM element. We will use it in the new function that includes the collectionsParser code from the previous step.

Inside of that new function, we will declare a new templateLoader.render which will be passed in with our filters partial. a good example of what we are trying to achieve here can be found in /src/javascripts/usermanagement.js:L41-L61 in the resultRender function, basically we take data from both the redux store and the results from the collectionsParser's request and pass them into the templateLoader.render callbacks, where the compiledTemplates will replace the html of the id's we set to wrap around the partials, like we declared at the beginning of this task.

This should give us a scenario when if we were to call this function after updating the redux store, we would be able to have both the screening room table update and the filters section update.

So event handling... Currently in /src/javascripts/screening-room.js:L65-L73 aka the key up handling and /src/javascripts/screening-room.js:L75-L85 and change of input filter boxes, we have an event fires, then we dispatch to the screeningRoomStore a redux action, which is automatically handled by the screeningRoomStore.subscribe(/src/javascripts/screening-room.js:L59) callback, where then we call our handlebars rendering to handle the updated data. We need to slightly decouple this process, as research with the users-dashboard search stuff has taught me, the subscription of this store can be costly to the user search experience. Instead we are going to preserve the dispatch to the screeningRoomStore, but as we have done in the previous step, call that new function that makes the collectionsParser call after the dispatch has been made. See /src/javascripts/usermanagement.js:L76-L88 to get an idea of what this looks like for a users search.

After this is done, we need to create a new action within the redux reducer to storing the collection type, that reducer is found in /src/app/reducers/screening-room-reducer.js. We should also update the default reducer here with a value for the collection filter type. This will be a string value in the param passed CollectionsController#index in media-api.

We also need to now modify our collectionsParser to use that collection type as a parameter when requesting. The actual parser itself lives in /src/adapters/apiparser.js:L145-L156, we should add a new param in here for collection type and probably set a default for it, if it hasn't been passed.

From here we test to see where we're at, hopefully the desired result will be that you are able to utilize the filter, make searches and have handlebars re-render results into areas defined on the page. Assuming not much else has changed in the previous handling of the other functionality, we should be able to also complete the other requirements for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment