This PR makes a number of changes to consolidate the personal vocab list detail view with the regular vocab list detail view. The goal is to use the same Vue component, regardless of what kind of vocab list is being displayed.
To that end, the following changes have been made:
Django:
Add an API endpoint at api/v1/vocab_lists/<int:pk> to get details for a given vocab list
Add a POST method to the vocab list entries endpoint at api/v1/vocab_lists/<int:pk>/entries/ to allow creating a new vocabulary list entry
Direct both the PersonalVocabListDetailView and the VocabularyListDetailView to use the same vocab_list/detail.html template to render vocab list details
Modify the vocab_list/detail.html template to only display relevant controls for the kind of vocab list displayed, and pass along enough information for the Vue template to render the PersonalVocab.vue template.
Make the data output by personal vocab list entries and vocab list entries consistent so they can both be consumed by the same front-end.
Vue
Update constants, actions, mutations, and api calls to support create, update, and delete operations on individual vocab entries
Mutations on any kind of vocab list in a detail view should update the vocabList variable in state.
Modify PersonalVocab.vue with conditional logic based on the kind of vocab list being displayed, based on the personalVocab variable passed to the div that creates the view.
Familiarity interface elements should only be displayed for personal vocab lists
Update QuickAddVocabForm.vue to work with regular vocab lists as well as personal vocab lists. This includes hiding familiarity rating when adding a new entry.
Update tests to pass with the new changes.
Note that after review, I'll move the contents of PersonalVocab.vue into Vocab.vue, update the necessary references, and remove PersonalVocab.vue. I've left the changes on PersonalVocab.vue since that is the template that is being applied to regular vocab lists, so it's easier to look at this way.
This PR makes a number of changes to consolidate the personal vocab list detail view with the regular vocab list detail view. The goal is to use the same Vue component, regardless of what kind of vocab list is being displayed.
To that end, the following changes have been made:
api/v1/vocab_lists/<int:pk>to get details for a given vocab listapi/v1/vocab_lists/<int:pk>/entries/to allow creating a new vocabulary list entryPersonalVocabListDetailViewand theVocabularyListDetailViewto use the samevocab_list/detail.htmltemplate to render vocab list detailsvocab_list/detail.htmltemplate to only display relevant controls for the kind of vocab list displayed, and pass along enough information for the Vue template to render thePersonalVocab.vuetemplate.vocabListvariable in state.PersonalVocab.vuewith conditional logic based on the kind of vocab list being displayed, based on thepersonalVocabvariable passed to the div that creates the view.QuickAddVocabForm.vueto work with regular vocab lists as well as personal vocab lists. This includes hiding familiarity rating when adding a new entry.Note that after review, I'll move the contents of
PersonalVocab.vueintoVocab.vue, update the necessary references, and removePersonalVocab.vue. I've left the changes onPersonalVocab.vuesince that is the template that is being applied to regular vocab lists, so it's easier to look at this way.