Added option for horizontal table of contents

[KashishMistry]

Related Item(s)

ramp4-pcar4/story-ramp#402 (not in this repo)

Changes

• Added option for user to select between horizontal and vertical table of contents
• The default option is a vertical table of contents

Notes

Option in the metadata panel:

Tested in editor preview by creating a local story-ramp package:

Testing

Steps:

1. Open Project Metadata editor. Choose between horizontal or vertical table of contents.

This has been tested in the editor preview using by creating a local story-ramp package based on the adjacent PR.

There isn't a way to test whether the functionality works because there is another PR open in the story-ramp repo that is meant to implement the functionality. If there are any other methods to test, that would be appreciated, thanks!

---

This change is 

[github-actions]

Your demo site is ready! 🚀 Visit it here: https://ramp4-pcar4.github.io/storylines-editor/horizontal_tabs/#/en/editor

[RyanCoulsonCA]

Reviewable status: 0 of 4 files reviewed, 2 unresolved discussions (waiting on @KashishMistry)

---

src/components/editor/helpers/metadata-content.vue line 75 at r1 (raw file):

        <br />
        <label class="mr-15">{{ $t('editor.tocOrientation') }}:</label>
        <select class="border-solid border border-black p-1" name="toc" id="toc" @change="metadataChanged">

Tested this by running the server locally and checking the config manually after saving. Found a couple of things:

1. It doesn't seem like the orientation is being saved to the file. Changing the name attribute to tocOrientation should fix this.

2. The dropdown also doesn't default to the correct value. Try adding v-model="metadata.tocOrientation" here and add tocOrientation to the metadata prop (see other comment) and see if this works!

---

src/components/editor/helpers/metadata-content.vue line 95 at r1 (raw file):

export default class MetadataEditorV extends Vue {
    @Prop() metadata!: {

Add tocOrientation here

[KashishMistry]

Reviewable status: 0 of 4 files reviewed, 2 unresolved discussions (waiting on @RyanCoulsonCA)

---

src/components/editor/helpers/metadata-content.vue line 75 at r1 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

Tested this by running the server locally and checking the config manually after saving. Found a couple of things:

1. It doesn't seem like the orientation is being saved to the file. Changing the name attribute to tocOrientation should fix this.

2. The dropdown also doesn't default to the correct value. Try adding v-model="metadata.tocOrientation" here and add tocOrientation to the metadata prop (see other comment) and see if this works!

Donethanks.

---

src/components/editor/helpers/metadata-content.vue line 95 at r1 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

Add tocOrientation here

Donethanks.

[RyanCoulsonCA]

Reviewable status: 0 of 4 files reviewed, 1 unresolved discussion (waiting on @KashishMistry)

---

src/components/editor/helpers/metadata-content.vue line 75 at r1 (raw file):

Previously, KashishMistry (Kashish Mistry) wrote…

Donethanks.

Looks good! If you load an existing product that doesn't have tocOrientation in the config the dropdown is blank, but I'm not sure that this is a huge deal as long as we display the vertical table of contents by default.

[yileifeng]

Reviewed 3 of 4 files at r1, 1 of 1 files at r2, 1 of 1 files at r3, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @KashishMistry)

[KashishMistry]

Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @RyanCoulsonCA)

---

src/components/editor/helpers/metadata-content.vue line 75 at r1 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

Looks good! If you load an existing product that doesn't have tocOrientation in the config the dropdown is blank, but I'm not sure that this is a huge deal as long as we display the vertical table of contents by default.

Yes, it should default to vertical if there is no tocOrientation specified

[yileifeng]

Reviewed 5 of 5 files at r4, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @RyanCoulsonCA)

[szczz]

Reviewed 3 of 4 files at r1, 1 of 1 files at r2, 1 of 1 files at r3, 5 of 5 files at r4, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @RyanCoulsonCA)

[RyanCoulsonCA]

Reviewed 3 of 4 files at r1, 1 of 1 files at r2, 1 of 1 files at r3, 3 of 5 files at r4, 2 of 2 files at r5, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @KashishMistry)

[yileifeng]

Reviewed 2 of 2 files at r5, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @KashishMistry)