Implemented Vue.js in the editShow.mako template. #3849
Conversation
* Created select-list vue component * Created anidbReleaseGroupUi vue component. * Created dedicated css files for the vue components in css/vue * Added aliases setter to series class. * Added series aliases to apiv2.
|
@OmgImAlexis let's try to use this setup for components for now. |
| @@ -0,0 +1,52 @@ | |||
| <script type="text/x-template" id="anidb-release-group-ui"> | |||
| <div id="anidb_release_group_ui_wrapper" class="top-10"> | |||
| <link rel="stylesheet" type="text/css" href="css/vue/anidbreleasegroupui.css?${sbPID}" /> | |||
There was a problem hiding this comment.
Wouldn't it make more sense to inline the CSS since we want a single vue file later on?
| <div class="col-sm-4 left-whitelist" > | ||
| <span>Whitelist</span> | ||
| <ul> | ||
| <li v-for="item in releaseWhitelist">{{ item }}</li> |
There was a problem hiding this comment.
We should be using properly named vars for in loops.
e.g. release in releaseWhitelist
| data() { | ||
| return { | ||
| // JS only | ||
| defSeries: '12345', |
There was a problem hiding this comment.
Default values should be DEFAULTS not placeholders. Set this to 0 if you want it to be a Number field with no value.
There was a problem hiding this comment.
No, I don't need the series id here. so it's still a left-over. I'll remove it.
| }, | ||
| methods: { | ||
| sendValues: function() { | ||
| this.$emit('change', this.editItems); |
There was a problem hiding this comment.
Where is this.editItems?
There was a problem hiding this comment.
Has been refactored in the mean time. Please have another look.
| @@ -0,0 +1,64 @@ | |||
| <script type="text/x-template" id="select-list"> | |||
| <div class="select-list"> | |||
| <link rel="stylesheet" type="text/css" href="css/vue/selectlistui.css?${sbPID}" /> | |||
| return items; | ||
| } | ||
| }, | ||
| transformToIndexedObject: arrayOfStrings => { |
There was a problem hiding this comment.
I'd suggest switching this to a map function.
There was a problem hiding this comment.
didn't know you could also inject the index into the map callback. Will do!
themes/dark/templates/editShow.mako
Outdated
| indexerName: $('#indexer-name').attr('value'), | ||
| config: MEDUSA.config, | ||
| exceptions: exceptions, | ||
| seriesObj: { |
There was a problem hiding this comment.
Please switch this to series. No need to describe the type in the name.
themes/dark/templates/editShow.mako
Outdated
| scene: false, | ||
| sports: false, | ||
| paused: false, | ||
| location: "", |
themes/dark/templates/editShow.mako
Outdated
| }, | ||
| saveSeries: async function(subject) { | ||
| if (['seriesObj', 'all'].includes(subject)) { | ||
| const data = { |
There was a problem hiding this comment.
Switch this to using deconstructing like I showed in slack.
There was a problem hiding this comment.
okay, still need to do this one
themes/dark/templates/editShow.mako
Outdated
| }; | ||
| }, | ||
| onChangeIgnoredWords: function(items) { | ||
| console.log('Event from child component emitted', items); |
There was a problem hiding this comment.
Either remove or switch all of the console.log to console.debug.
themes/dark/templates/editShow.mako
Outdated
| }, | ||
| onChangeAliases: function(items) { | ||
| console.log('Event from child component emitted', items); | ||
| this.seriesObj.config.aliases = items.map(item => item.value); |
There was a problem hiding this comment.
These should all be setup using a watcher on the local data instead of an event handler.
There was a problem hiding this comment.
How do I create a watcher for this? What's the item I need to watch here?
themes/dark/templates/editShow.mako
Outdated
| } | ||
| } | ||
| }); | ||
| $('[v-cloak]').removeAttr('v-cloak'); |
There was a problem hiding this comment.
Don't need this if you mount the main vue instance to vue-wrap.
* Changed anidbReleaseGroupUi.mako component, to accept a list of object. * Added saving the black/white lists. * Added getters/setters to the Series class for blacklist / whitelist.
* Enabled dogpile for caching the short_group_names() function.
| this.releaseGroups = this.allGroups; | ||
| this.createIndexedObjects(this.blacklist, 'blacklist'); | ||
| this.createIndexedObjects(this.whitelist, 'whitelist'); | ||
| this.createIndexedObjects(this.allGroups, 'releasegroups'); |
There was a problem hiding this comment.
Why not allow passing an array?
anidbReleaseGroupUi: * added the removal of release groups * prevent adding groups to white/black list, if there already there. * selectListUi: Replaced the loop with a map. * added eventBus to be able to use the file browser together with Vue. * Replaced console.log with console.debug. * Renamed seriesObj to series.
medusa/black_and_white_list.py
Outdated
| else: | ||
| short_group_list = groups | ||
| return short_group_list | ||
| # |
There was a problem hiding this comment.
TODO: need to remove this
| @@ -0,0 +1,177 @@ | |||
| <style scoped> | |||
There was a problem hiding this comment.
Used scoped, don't know if thats a problem
There was a problem hiding this comment.
No browser actually supports that according to https://caniuse.com/#feat=style-scoped
Correction, FF supports that, but not by default.
vue-loader supports that but it's not in here?
|
|
||
| // We need this hack, to send the location back to the vue model. | ||
| // As no event is triggered, Vue doesn't know to update it's value. | ||
| $.eventBus.$emit('locationEvt', currentBrowserPath); |
There was a problem hiding this comment.
@OmgImAlexis the eventBus i was talking about.
…nvert-editshow-to-vue # Conflicts: # themes-default/slim/views/editShow.mako # themes/dark/templates/editShow.mako # themes/light/templates/editShow.mako Added app-link and file-browser components to editShow.
| <input type="text" name="location" id="location" value="${show._location}" class="form-control form-control-inline input-sm input350"/> | ||
| <input type="hidden" name="indexername" id="form-indexername" :value="indexerName" /> | ||
| <input type="hidden" name="seriesid" id="form-seriesid" :value="seriesId" /> | ||
| <file-browser name="location" ref="locationBtn" id="location" v-model="location" class="form-control form-control-inline input-sm input350"></file-browser> |
There was a problem hiding this comment.
@OmgImAlexis I've tried implementing it. But it's showing the part of the div out of place:
Any idea?
There was a problem hiding this comment.
I'll have to check but I think I added classes to the input so you don't need them on the <file-browser>. Check the component file.
* Reverted back to <a> on the vue-components/file-browser.mako.
…nvert-editshow-to-vue # Conflicts: # medusa/helpers/__init__.py # themes-default/slim/static/js/edit-show.js # themes-default/slim/views/editShow.mako # themes/dark/assets/js/browser.js.map # themes/dark/assets/js/core.js.map # themes/dark/assets/js/edit-show.js # themes/dark/assets/js/edit-show.js.map # themes/dark/templates/editShow.mako # themes/light/assets/js/browser.js.map # themes/light/assets/js/core.js.map # themes/light/assets/js/edit-show.js # themes/light/assets/js/edit-show.js.map # themes/light/templates/editShow.mako
Getting it up2date.
| @@ -13,7 +13,7 @@ | |||
| @click="fileClicked(file)" | |||
| > | |||
| <span :class="'ui-icon ' + (file.isFile ? 'ui-icon-blank' : 'ui-icon-folder-collapsed')"></span> {{file.name}} | |||
| </app-link> | |||
| </a> | |||
There was a problem hiding this comment.
I believe you meant to change the opening tag to a as well.
…nvert-editshow-to-vue # Conflicts: # themes-default/slim/views/addShows_newShow.mako # themes-default/slim/views/layouts/main.mako # themes-default/slim/views/vue-components/saved-message.mako # themes/dark/templates/addShows_newShow.mako # themes/dark/templates/layouts/main.mako # themes/dark/templates/vue-components/saved-message.mako # themes/light/templates/addShows_newShow.mako # themes/light/templates/layouts/main.mako # themes/light/templates/vue-components/saved-message.mako
…x-template' into feature/convert-editshow-to-vue # Conflicts: # themes-default/slim/views/editShow.mako # themes-default/slim/views/vue-components/quality-chooser.mako # themes/dark/templates/editShow.mako # themes/dark/templates/vue-components/quality-chooser.mako # themes/light/templates/editShow.mako # themes/light/templates/vue-components/quality-chooser.mako
For not it's saving as a combined allowed/preferred quality. But the api has been prepared to save them independent.
|
Need to update the api tests. |
medusa/indexers/indexer_config.py
Outdated
| 'apiParams': { | ||
| 'language': indexer['api_params']['language'], | ||
| 'useZip': indexer['api_params']['use_zip'], | ||
| 'session': '', |
There was a problem hiding this comment.
Is session needed if it's always empty?
There was a problem hiding this comment.
no we can remove that
| @@ -0,0 +1,21 @@ | |||
| window.vueSubmitForm = async function(formId) { | |||
There was a problem hiding this comment.
I would suggest renaming so we don't get it mixed up with Vue plugins which are also mounted on window and start with "vue".
There was a problem hiding this comment.
Did I change this? Can't remember doing anything with vue-submit-form.js?
There was a problem hiding this comment.
@sharkykh did you add it somewhere? Then maybe I rebased it into here?
There was a problem hiding this comment.
This is from the quality PR
It was there when I rebased
edit: 2fb1227
There was a problem hiding this comment.
Let's keep the mess to a minimum. we can fix these in #3818. And then i'll merge it back into this one.
| @@ -77,7 +77,7 @@ Set checked shows/episodes to <select name="newStatus" class="form-control form- | |||
| <% series_id = str(cur_series[0]) + '-' + str(cur_series[1]) %> | |||
| <tr id="${series_id}"> | |||
| <th><input type="checkbox" class="allCheck" data-indexer-id="${cur_series[0]}" data-series-id="${cur_series[1]}" id="allCheck-${series_id}" name="${series_id}-all" checked="checked" /></th> | |||
| <th colspan="2" style="width: 100%; text-align: left;"><app-link indexer-id="${cur_series[0]}" class="whitelink" href="home/displayShow?indexername=indexer-to-name&seriesid=${cur_series[1]}">${show_names[(cur_series[0], cur_series[1])]}</app-link> (${ep_counts[(cur_series[0], cur_series[1])]}) | |||
| <th colspan="2" style="width: 100%; text-align: left;"><app-link data-indexer-to-name="${cur_series[0]}" class="whitelink" href="home/displayShow?indexername=indexer-to-name&seriesid=${cur_series[1]}">${show_names[(cur_series[0], cur_series[1])]}</app-link> (${ep_counts[(cur_series[0], cur_series[1])]}) | |||
There was a problem hiding this comment.
Can this be switched to using the app-link placeholder.
There was a problem hiding this comment.
Let's keep the mess to a minimum. we can fix these in #3818. And then i'll merge it back into this one.
There was a problem hiding this comment.
I spoke too soon. Apparently it's changed in this branch, because of all the rebases.
Needed after changes to the api.
…pymedusa/Medusa into feature/convert-editshow-to-vue
|
I'm doing one more rebase. But then we need to get this merged asap. |
…nvert-editshow-to-vue # Conflicts: # themes-default/slim/static/js/add-show-options.js # themes-default/slim/views/editShow.mako # themes/dark/assets/js/add-show-options.js # themes/dark/assets/js/add-show-options.js.map # themes/dark/templates/editShow.mako # themes/light/assets/js/add-show-options.js # themes/light/assets/js/add-show-options.js.map # themes/light/templates/editShow.mako
…nvert-editshow-to-vue # Conflicts: # themes-default/slim/views/addShows_newShow.mako # themes-default/slim/views/editShow.mako # themes-default/slim/views/inc_addShowOptions.mako # themes-default/slim/views/layouts/main.mako # themes-default/slim/views/manage_massEdit.mako # themes-default/slim/views/vue-components/quality-chooser.mako # themes/dark/templates/addShows_newShow.mako # themes/dark/templates/editShow.mako # themes/dark/templates/inc_addShowOptions.mako # themes/dark/templates/layouts/main.mako # themes/dark/templates/manage_massEdit.mako # themes/dark/templates/vue-components/quality-chooser.mako # themes/light/templates/addShows_newShow.mako # themes/light/templates/inc_addShowOptions.mako # themes/light/templates/layouts/main.mako # themes/light/templates/manage_massEdit.mako # themes/light/templates/vue-components/quality-chooser.mako
| @@ -228,7 +221,7 @@ const startVue = () => { | |||
| <span class="component-title">Preferred Quality</span> | |||
| <!-- TODO: replace these with a vue component --> | |||
| <span class="component-desc"> | |||
| <quality-chooser @update="saveQualities"></quality-chooser> | |||
| <quality-chooser @update:quality:allowed="series.config.qualities.allowed = $event" @update:quality:preferred="series.config.qualities.preferred = $event"></quality-chooser> | |||
Todo:
Need to update the flatten_folders part:
Known bugs: