As a Storylines Editor, I need to initiate a new product and populate the UUID, Title, Graphic, Context link, etc.

Dependant on #27.

Create the basic web form that will ingest the following fields

• UUID
• Title
• Graphic
• Context link
• Context link label

Using these fields, instantiate a new "empty" Storylines product. IMPORTANT: This should ALSO generate a French equivalent file, which the user will be able to edit later. However, if the user has started the session in French, then they should be starting with a French Storylines product, and the English one should be generated with the same metadata.

In-flight Figma mockups (still in progress by UX Team as of this writing): https://www.figma.com/file/uFHBYxq5t3zg3Vv3lIxfok/Ramp-Storylines-Editor

The purpose of this issue is to get the ball rolling on creating new products, and setting up their intro slide + footer context link.

Whenever I try to save an image (drag and drop into browser), I receive the following error in the server console:
Validation of assets/en/NPRIpictogramme-2016data-EN.jpg failed. Deleting.

• Ensure content loads correctly when the "load" function is used.

Related #8 and #69 (nice)

It would be very useful to an editor to be able to copy their English slide to French (or vice versa) for modification, instead of creating it again from scratch. This task is to facilitate the copying of slides between the two language configs and folders.

After ramp4-pcar4/story-ramp#259 is merged, add functionality to reorder image gallery in preview mode for editor.

Adjust CSS for Highcharts editor to prevent header icons/labels to be cut-off.

As of this writing, the architecture of the Editor while running the Express server is difficult to work with. When creating/editing a Storylines product, the user should be able to see immediate results. The location of the server should not matter: It could be co-located with the Editor, or on an entirely different server.

The Upload Server should also be bundled with the Editor. The Editor can't do anything without it.

Related #54

Create a basic webpage for the Editor landing page, as a sub-folder of the existing Storylines build

• Use the Canada.ca template
• Ensure language switching works
• Include a basic form with buttons and text field to load a UUID

In-flight Figma mockups (still in progress by UX Team as of this writing): https://www.figma.com/file/uFHBYxq5t3zg3Vv3lIxfok/Ramp-Storylines-Editor

Add support for saving user-created image files created through the editor and add them to the final ZIP folder to be exported.

As a Storylines Editor, it would be nice to jump between slides, for example, work on slide 2 and then jump straight to slide 12.

Implement something similar to the existing ToC navigator for Storylines viewer to jump between editor slides. Should be saving existing work before jumping to a new slide.

In-flight Figma mockups (still in progress by UX Team as of this writing):
https://www.figma.com/file/uFHBYxq5t3zg3Vv3lIxfok/Ramp-Storylines-Editor

Create a diagram showing how the pieces work together:

• Loading an existing product
• Saving a new product
• Output JSON
• Image dumps, chart configs, map configs
• Probably other things not yet considered

Will be useful for driving future discussions, as well as providing for various documentation.

Related to #56, add a landing page for user to choose between editing an existing product or creating a new product. The edit existing product page should rework the current landing page we have to autofill metadata content on successful config load, rather than load immediately into the editor IMO. Create a second option to continue onto the editor once metadata contents have been verified by the user as well as a back option to return to new landing page.

On the other hand, selecting the option to create a new product should direct the user to a similar metadata page (minus the load from UUID - another question is how the ID should be generated for new config products) with empty fields and require user to input metadata content themselves before continuing onto the editor with an empty config.

There is a TESTING CONFIG option that we currently use as a fast track method to load into the editor with basic metadata content but this is mainly for debugging purposes and will/can be removed after this is complete.

Should also add some type of alert to warn user of this. This also happens when changing between panel type without saving. Maybe when the file saving normalization is done from #60 this becomes a non-issue.

As a Storylines Editor, I want to have the ability to create a panel or slide that allows me to create and view rich text.

@RyanCoulsonCA suggested a Markdown editor https://code-farmer-i.github.io/vue-markdown-editor/examples/base-editor.html that can potentially be leveraged.

Setup a test page for integrating this editor and ensuring it can output markdown correctly. Ideally, outputting markdown into the JSON structures that we're already using in the Storylines schema.

It would be nice if the user had a pre-generated UUID populating the UUID field for a new Storylines product. I've used this site in the past: https://www.uuidgenerator.net/, and Google even seems to generate one for you as well if you google "generate uuid". I would imagine there are countless libraries out there that can accomplish this.

Add support for saving user-created RAMP config files through the editor and add them to the final ZIP folder to be exported.

• Select (via dropdown?) an existing slide
• Clone the configuration into a new slide in the main JSON structure
• Also clone the RAMP/Highcharts configs as necessary
• (Optional?) Pull from existing product in another folder

• Ensure content loads correctly when the "load" function is used.

• Ensure content loads correctly when the "load" function is used.
• Related: #19

• Ensure content loads correctly when the "load" function is used.

As a Storylines Editor, I need to be able to seamlessly switch between editing the French or English equivalent slide that I'm working on.

Dependant on #27 and #28.

Add a tab to the editor that allows a user to flip between English and French products.

• When creating a new Storylines product, export the basic structure of a JSON into a new folder:
• Create files/folders:
  • {UUID}
    • assets
      • en
      • fr
    • charts
      • en
      • fr
    • ramp-config
      • en
      • fr
    • {UUID}_en.json
    • {UUID}_fr.json
• Will we need fancy permissions to accomplish this?

As a Storylines Editor, I need to be able to create an image slide, or image gallery.

Build basic functionality to upload an image file with support for uploading multiple images in a gallery slideshow. Provide options to add a caption, alt text, etc. A nice to have would be a preview of the content since this will be available when creating charts/maps panels. Output into current JSON Storylines schema structure.

See pending UX team design editor mockups for reference: https://www.figma.com/file/uFHBYxq5t3zg3Vv3lIxfok/Ramp-Storylines-Editor?node-id=0%3A1

• Confirm with the user "Are you absolutely sure, this cannot be undone!"
• Include "trashcan" icon in the ToC.

As of this writing, we don't have any way to switch to the French Storylines file for modifying or creating new products. Bear in mind, some of our Francophone users may want to start with French before editing in English as well. The current situation is that only English content is being created. Enable a dropdown or other selector at the creating/loading phase where the user can choose the language they wish to edit.

The user should be able to select a logo image from their computer, and it gets dumped in the assets folder (en or fr), and referenced in the first slide of the product.

As a Storylines Editor, I want to create a new 2-panel side, or choose a full slide option.

Implement base functionality to create a new slide for a Storylines product, with ability to specify a full slide option. Should also have the option to select a content type for second panel (if needed): image, chart, map with additional option to specify slideshow/gallery for images/charts.

See pending UX team design editor mockups for reference: https://www.figma.com/file/uFHBYxq5t3zg3Vv3lIxfok/Ramp-Storylines-Editor?node-id=0%3A1

As a Storylines Editor, I need to be able to create an interactive map.

Assess and leverage the RAMP Editor/FGPA: https://environmental-maps.dev.ec.gc.ca/ramp-storylines/editor_ramp/samples/fgpv-author.html tool into the Storylines editor page to add support creating a new map slide. Output RAMP JSON structure that can be saved and used for a Storylines config.

See pending UX team design editor mockups for reference: https://www.figma.com/file/uFHBYxq5t3zg3Vv3lIxfok/Ramp-Storylines-Editor?node-id=0%3A1

Currently (as of #74 being merged) only logos that are saved locally will load properly. Add additional functionality to support external URLs (like what the 00000000-0000-0000-0000-000000000000 product uses for its logo).

Clicking most buttons does not seem to do anything at the moment. However, buttons that do work, e.g. clicking "Save" does actually attempt to save the Storylines product to the server, but there is no feedback for the user to know that anything has happened.

The map editor currently has a little save button at the top that needs to be pressed in order to save the map config. I think it's a little hard to see and may be missed by users, which will result in them losing all of their data. This button should be put elsewhere (maybe under the Summary section beside the Preview button?) where it will be more obvious the the user.

A popup also appears after pressing that button that asks for the file name, but this can be removed since it's not being used by us.

Current location (beside the Template dropdown):

Adjust styling for all buttons (only default styles applied) and ToC for editor (add borders, svg icons, text font weight, etc).

Look into deploying PR demo pages on Github Pages for testing purposes. Apply changes to story-ramp repo if successful.

As a Storylines Editor, I need to be able to create an interactive chart, or chart gallery.

Assess and leverage the Highcharts-editor: https://github.com/highcharts/highcharts-editor tool into the Storylines editor to add support creating a new chart panel/carousel. Output configured Highcharts JSON structure that can be saved and used inside a Storylines config.

See pending UX team design editor mockups for reference: https://www.figma.com/file/uFHBYxq5t3zg3Vv3lIxfok/Ramp-Storylines-Editor?node-id=0%3A1

(

Related to #16 (wait for merge), loading in existing chart configs in the editor gallery works but opening up the modal editor to make additional changes fails to display existing properties. Assumed defaultChartOptions would be the solution here from the documentation but doesn't seem to do the job.

• In the ToC, allow the option to drag and drop slides in order to reorder them.
  • Alternatively, include "up and down" arrows to re-order slides one click at a time.
• This should be reflected in the main JSON project for the Storylines product.

Add support for saving user-created highcharts json files created through the editor and add them to the final ZIP folder to be exported.

We discussed this in the last meeting, but I didn't take great notes -- what exactly is involved with this?

As a Storylines Editor, I need to be able to load and manage existing Storylines products.

Dependant on #27.

Provide two methods to load a Storylines product

• via URL (appending the UUID to the end of the RESPECT editor URL
• through a load button on the landing page

For now, just a proof of concept display the Title, graphic, context link, etc is needed.

In-flight Figma mockups (still in progress by UX Team as of this writing): https://www.figma.com/file/uFHBYxq5t3zg3Vv3lIxfok/Ramp-Storylines-Editor

• This should probably be on the left hand side (ToC) at the bottom?
• Simply opens the newly created/edited Storylines product in a new tab
  • https://{current domain}/#/en/00000000-0000-0000-0000-000000000000
  • https://{current domain}/#/fr/00000000-0000-0000-0000-000000000000

We spoke about this a bit in a previous meeting, but I think this is going to be crucial to the longterm function of this application.

We need to be able to load and edit existing apps. As of this writing, you can save once and that's it. That isn't how anyone is going to use this application - most users will start with something barebones, save it, and go back to edit it multiple times. Some users will want to edit older Storylines products.

One idea (maybe it's bad), pull the Storylines_ID and scrape its main JSON file for slide details, URLs, etc. Maybe this all needs to be pulled locally for editing and then pushed back to the server (overwriting what's already there).

Similar problem to #31 where switching right panel type does not update the contents of the slide properly without refreshing (by switching to left then back to right panel).

The main issue here seems to stem from no reactivity when assigning a new object to the current slide panel property (this.currentSlide.panel[idx] in slide-editor.vue). One potential idea is to use Object.assign() to create an entirely new object for this.currentSlide.panel as I believe something similar was used to solve object reactivity issues for Vue 2 in the past.

If you click on a slide and switch to edit the right panel and then use the table of contents to switch to another slide of the same type, the contents of the page are not updated properly.

This is an issue we had with dynamic panels in the main Storylines app too, has something to do with Vue not re-rendering everything.

Steps to Reproduce:

1. Click on the Oil sands extraction slide and switch to the right panel.
2. Click on the In-situ extraction slide.
3. Notice that the image displayed is still for Oil Sands Extraction.

Demo

There is currently no editor option for dynamic panels. It must include the following:

• must be able to add panels of any type (excluding other dynamic panels).
• the text editor on the left side needs to support panel switching. The dynamic panel looks for a panel attribute on an anchor tag to switch the panel, for example <a panel='panel-id'>Click to switch panels</a>. This can just be typed in to the text editor manually, however it will not be clear to people who are unfamiliar with the editor. Maybe a button that adds the anchor tag after asking for the panel id would work?

Follow-up to #22

As a Storylines Editor, I need to be able to create an interactive chart, or chart gallery.

Add support for how user can create a chart gallery using integrated chart-editor (currently only adds a single chart for demo purposes).

Wait on pending UX team design editor mockups: https://www.figma.com/file/uFHBYxq5t3zg3Vv3lIxfok/Ramp-Storylines-Editor?node-id=0%3A1

These buttons do not seem to do anything yet. They should, as one might assume, help the user jump to the previous or next slides.

This button currently does not do anything. It should pop us back to the intro slide where we can tweak things like Context links, logos, title, etc. We can lock Storylines ID, this should probably not be edited.

When you upload an image to a newly created image slide in the editor, it doesn't get displayed in the preview section. The image is properly added and will be displayed if you switch off that slide editor and back, but it should appear immediately after adding it too.

If you load a non-existing product (is it referencing the server identified in editor.vue? Or the editor public folder?), the UI vanishes and is replaced by a spinner. We should clean this up with a "not found" error that allows the user to continue to use the app without refreshing.

• Piling onto the existing documentation (Last updated March 2022)
• Create a guide for clients on how to utilize the RESPECT editor
• Include architecture diagram (#231)
• Describe workflow and "coming soon" section