move quality-chooser to vue #3818

OmgImAlexis · 2018-02-28T21:19:28Z

@p0psicles I still need to fix the forms on the pages that use this but it should be fine to test.

~~MAKE SURE NOT TO SAVE SHOWS WITH THIS IT WILL 100% KILL THE SHOW QUALITY~~

Edit: This should be working on both the edit and new show page. Please let me know if there's any issues.

p0psicles · 2018-02-28T21:47:43Z

Looks nice. But because you replace the mako, it has to be implemented in a big bang right? Can't we create new mako vue import files. And them implement the components one page at a time?

OmgImAlexis · 2018-02-28T22:04:19Z

I'm good with that. I still need to fix the forms but I could rename this and copy the old file back in?

Which page would we use first? Edit or new show?

codecov-io · 2018-03-01T04:10:11Z

Codecov Report

Merging #3818 into develop will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##           develop    #3818   +/-   ##
========================================
  Coverage    29.26%   29.26%           
========================================
  Files          276      276           
  Lines        35411    35411           
========================================
  Hits         10363    10363           
  Misses       25048    25048

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8eaaa1a...86da320. Read the comment docs.

p0psicles · 2018-03-01T07:41:33Z

Else you start on the new show. Then I'll finish editShow

OmgImAlexis · 2018-03-01T22:41:44Z

I think the only issue I found was on the edit page it would show blank instead of the quality you have it set as so I need to fix that.

p0psicles · 2018-03-14T06:35:23Z

themes-default/slim/views/inc_qualityChooser.mako

@@ -1,5 +1,54 @@
+<script type="text/x-template" id="quality-chooser-template">


This file needs to be in themes-default/slim/views/vue-components/qualityChooser.mako

Did you want me to replace this file with the old content and just move the new code to a new file?

p0psicles · 2018-03-17T10:32:29Z

@OmgImAlexis as discussed we should remove all direct python calls / mako vars. And pass those along through props. This will result in a clean set of components, that we can move to .Vue files in the end.

p0psicles · 2018-03-17T10:33:47Z

themes-default/slim/views/vue-components/qualityChooser.mako

+            <div id="archive" v-if="archive">
+                <h5>
+                    <b>
+                        Archive downloaded episodes that are not currently in <a target="_blank" href="manage/backlogOverview/"><font color="blue"><u>backlog</u>.</font></a>


This is not showing anything when changing to a lower quality. I suspect you wanted to subsittute the .

p0psicles · 2018-03-17T10:34:31Z

themes-default/slim/views/editShow.mako

@@ -18,6 +18,20 @@
 % if show.is_anime:
    <script type="text/javascript" src="js/blackwhite.js?${sbPID}"></script>
 % endif
+<script src="js/lib/vue.js"></script>
+<script src="js/lib/[email protected]"></script>
+<%include file="/vue-components/inc_qualityChooser.mako"/>


Still including the old file.

p0psicles · 2018-04-06T10:45:13Z

themes-default/slim/views/vue-components/qualityChooser.mako

+    data() {
+        return {
+            // Python convertions
+            allowedQualities: ${convert(allowed_qualities)},


Can we change this so it's using props/events and not directly the python vars?

For now let's leave this here since otherwise each file that uses this will need that python code which will just duplicate it.

We should wait util those vars can be returned by the API.

In this case I don't fully agree. But it's up to you. And what works best for you. So i'm fine with it.
Besides this, you think it's ready to merge? Needs some more reviewing? When this is ready I can merge it into my editShow pr.

Also it'l need a rebase.

I think after a rebase it'll still need a little bit of testing as I believe it still has the issue of getting the wrong quality when you first open the edit show page.

OK I'll merge it into my branch. Let's test there.

sharkykh · 2018-04-16T02:55:17Z

+ a few changes in add-show-options I needed to make the save defaults button work better

quality-chooser.mako add-show-options.js vue-submit-form.js

- Fix Backlog warning missing word and link. - Fix archive episodes button, html and function.

p0psicles · 2018-04-17T16:29:56Z

@OmgImAlexis @sharkykh i'm a bit confused. There aren't any child -> parent event's defined nor methods to patch the quality settings for a show directly? How should we update selected quality settings?

sharkykh · 2018-04-17T17:29:01Z

@p0psicles If I understand your question,
then I think this is what is needed for massEdit, since you have to "pass" the quality to the component when/after you use <quality-chooser></quality-chooser>, so it displays the correct one.

Currently this is working off of this:

Medusa/themes-default/slim/views/vue-components/quality-chooser.mako

Lines 55 to 61 in 134097a

    
           if not show is UNDEFINED: 
        
               __quality = int(show.quality) 
        
           else: 
        
               __quality = int(app.QUALITY_DEFAULT) 
        
           allowed_qualities, preferred_qualities = Quality.split_quality(__quality) 
        
           overall_quality = Quality.combine_qualities(allowed_qualities, preferred_qualities) 
        
           selected = None

(BTW, line 61 is not needed?)

p0psicles · 2018-04-17T20:09:43Z

Yeah have been talking with @medariox about it. And imo we should split quality into allowed and preferred. So we can cleanly pass them as properties but also store them independently.

Else we would have so always store the combined quality. But then you keep glaring to combine them in frontend.

OmgImAlexis · 2018-04-17T22:24:27Z

The quality-chooser should pass a value to the main page using the @change event.

I'd prefer if the quality was saved separately and if we didn't use bitwise operators everywhere to compare quality. It'd make working with the quality settings on the frontend a lot easier.

OmgImAlexis · 2018-04-17T23:03:58Z

Fix addShows_addExistingShow.mako - remove JS import, add component import.

@sharkykh can you check my last commit fixed this?

sharkykh · 2018-04-17T23:17:48Z

@OmgImAlexis
Fixed the quality chooser. Save Defaults not working:

2018-04-18 02:15:27 ERROR    Thread_1 :: [6d54662] Exception generated: saveAddShowDefaults() takes at least 4 arguments (7 given)
Traceback (most recent call last):
  File "C:\Medusa\medusa\server\web\core\base.py", line 285, in async_call
    result = function(**kwargs)
TypeError: saveAddShowDefaults() takes at least 4 arguments (7 given)

The call is:
/config/general/saveAddShowDefaults?defaultStatus=7&allowed_qualities=&preferred_qualities=&subtitles=true&anime=false&scene=false&defaultStatusAfter=3

And I selected "SD" preset.

Edit: Fixed by #4027.

**Always render** the allowed/preferred qualities select elements, so jQuery could pull data from them to send to Python. Signed-off-by: sharkykh <[email protected]>

it was probably re-added in the rebase by mistake Signed-off-by: sharkykh <[email protected]>

p0psicles · 2018-04-18T18:04:35Z

Also emits an event when one of the qualities (allowed/preferred) changes.
Can be used in the parent like:
<quality-chooser @update="saveQualities"></quality-chooser>

And:

            saveQualities: function(qualities) {
                this.series.config.qualities.preferred = qualities.preferred;
                this.series.config.qualities.allowed = qualities.allowed;
            },

p0psicles · 2018-04-18T18:04:46Z

What else do we need to do for this?

and some finishing touches

sharkykh · 2018-04-19T21:02:29Z

With the latest commit:

Mass Edit quality chooser is working.
< Keep > option will show up when editing two or more shows and at least one quality setting is different from the others.
Props added to the component:
overallQuality [Number] - combined quality (allowed+preferred) to set in the quality chooser on load.
Defaults to the converted Python var: show.quality if a show object is detected, app.QUALITY_DEFAULT otherwise.
keep [Boolean] - This is used to mark the component for massEdit - for the added feature of the Keep option for the preset selector. Defaults to false.
Data:
Now using allowedQualities, preferredQualities instead of selectedAllowed, selectedPreferred
Change in events:
The qualities are now $emit()-ing individually, as:
update:quality:allowed for allowed qualities
update:quality:preferred for preferred qualities

Notes:

Recalculating the backlogged episodes after archiving is not working. This is a small visual bug.
Marked it as @FIXME for the sake of merging faster.

when changing from a preset to custom quality + Fix indentation in Vue code

OmgImAlexis requested a review from p0psicles February 28, 2018 21:19

OmgImAlexis added Enhancement In progress Needs review Needs testing Requires testing to make sure it's working as intended labels Feb 28, 2018

OmgImAlexis added Concluded and removed In progress labels Mar 1, 2018

OmgImAlexis requested a review from medariox March 1, 2018 04:01

p0psicles requested changes Mar 14, 2018

View reviewed changes

p0psicles requested changes Mar 17, 2018

View reviewed changes

p0psicles requested changes Apr 6, 2018

View reviewed changes

OmgImAlexis force-pushed the feature/quality-chooser-x-template branch from 897128f to 3a1f847 Compare April 16, 2018 02:16

medariox mentioned this pull request Apr 16, 2018

Fix exception when trying to save default show settings. Fixes #4002 #4027

Merged

3 tasks

OmgImAlexis and others added 9 commits April 16, 2018 13:37

move quality-chooser to vue

d0c5a5a

add js libs

2fb1227

fix form submitting

6d47906

move new vue component to vue-components dir

3a9468f

rename qualityChooser file

d2a8944

Rename "preffered" to preferred

0025309

Fix quality chooser (tested only on add new show page)

f922905

+ a few changes in add-show-options I needed to make the save defaults button work better

Remove imports of quality-chooser.js, remove map files

e3f42b6

Update files in the other themes

a991017

quality-chooser.mako add-show-options.js vue-submit-form.js

More fixes

134097a

- Fix Backlog warning missing word and link. - Fix archive episodes button, html and function.

OmgImAlexis force-pushed the feature/quality-chooser-x-template branch from 3a1f847 to 134097a Compare April 16, 2018 10:48

remove old js tag and move component import to main.mako

880bfba

sharkykh and others added 4 commits April 18, 2018 15:40

Merge branch 'develop' into feature/quality-chooser-x-template

659a30d

Fix quality chooser for add-show-options

13a3477

**Always render** the allowed/preferred qualities select elements, so jQuery could pull data from them to send to Python. Signed-off-by: sharkykh <[email protected]>

Remove quality-chooser.js again

cbb37c6

it was probably re-added in the rebase by mistake Signed-off-by: sharkykh <[email protected]>

Add watches to emit event when qualities change.

9b3aec1

p0psicles mentioned this pull request Apr 19, 2018

Implemented Vue.js in the editShow.mako template. #3849

Merged

8 tasks

p0psicles previously approved these changes Apr 19, 2018

View reviewed changes

sharkykh added 2 commits April 19, 2018 23:33

Update component to support massEdit

11bf0c3

and some finishing touches

gulp

c6bfe1f

sharkykh dismissed p0psicles’s stale review via 8c3e385 April 19, 2018 20:39

sharkykh force-pushed the feature/quality-chooser-x-template branch from 8c3e385 to c6bfe1f Compare April 19, 2018 20:40

Fix Add Show 'Step 3' section height not expanding

86da320

when changing from a preset to custom quality + Fix indentation in Vue code

p0psicles approved these changes Apr 20, 2018

View reviewed changes

OmgImAlexis mentioned this pull request Apr 20, 2018

update vue to v2.5.16 #4054

Merged

p0psicles merged commit 6b67a67 into develop Apr 20, 2018

p0psicles deleted the feature/quality-chooser-x-template branch April 20, 2018 05:53

OmgImAlexis mentioned this pull request Apr 20, 2018

Vueify #4058

Open

p0psicles added this to the 0.2.2 milestone Apr 21, 2018

OmgImAlexis removed the Needs review label Apr 29, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

move quality-chooser to vue #3818

move quality-chooser to vue #3818

OmgImAlexis commented Feb 28, 2018 •

edited

Loading

p0psicles commented Feb 28, 2018

OmgImAlexis commented Feb 28, 2018

codecov-io commented Mar 1, 2018 •

edited

Loading

p0psicles commented Mar 1, 2018

OmgImAlexis commented Mar 1, 2018

p0psicles Mar 14, 2018

OmgImAlexis Mar 17, 2018

p0psicles commented Mar 17, 2018

p0psicles Mar 17, 2018

p0psicles Mar 17, 2018

p0psicles Apr 6, 2018

OmgImAlexis Apr 7, 2018 •

edited

Loading

p0psicles Apr 9, 2018

p0psicles Apr 9, 2018

OmgImAlexis Apr 10, 2018

p0psicles Apr 10, 2018

sharkykh commented Apr 16, 2018 •

edited

Loading

p0psicles commented Apr 17, 2018

sharkykh commented Apr 17, 2018 •

edited

Loading

p0psicles commented Apr 17, 2018

OmgImAlexis commented Apr 17, 2018

OmgImAlexis commented Apr 17, 2018

sharkykh commented Apr 17, 2018 •

edited

Loading

p0psicles commented Apr 18, 2018 •

edited

Loading

p0psicles commented Apr 18, 2018

sharkykh commented Apr 19, 2018 •

edited

Loading

		@@ -1,5 +1,54 @@
		<script type="text/x-template" id="quality-chooser-template">

move quality-chooser to vue #3818

move quality-chooser to vue #3818

Conversation

OmgImAlexis commented Feb 28, 2018 • edited Loading

p0psicles commented Feb 28, 2018

OmgImAlexis commented Feb 28, 2018

codecov-io commented Mar 1, 2018 • edited Loading

Codecov Report

p0psicles commented Mar 1, 2018

OmgImAlexis commented Mar 1, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

p0psicles commented Mar 17, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

OmgImAlexis Apr 7, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sharkykh commented Apr 16, 2018 • edited Loading

p0psicles commented Apr 17, 2018

sharkykh commented Apr 17, 2018 • edited Loading

p0psicles commented Apr 17, 2018

OmgImAlexis commented Apr 17, 2018

OmgImAlexis commented Apr 17, 2018

sharkykh commented Apr 17, 2018 • edited Loading

p0psicles commented Apr 18, 2018 • edited Loading

p0psicles commented Apr 18, 2018

sharkykh commented Apr 19, 2018 • edited Loading

OmgImAlexis commented Feb 28, 2018 •

edited

Loading

codecov-io commented Mar 1, 2018 •

edited

Loading

OmgImAlexis Apr 7, 2018 •

edited

Loading

sharkykh commented Apr 16, 2018 •

edited

Loading

sharkykh commented Apr 17, 2018 •

edited

Loading

sharkykh commented Apr 17, 2018 •

edited

Loading

p0psicles commented Apr 18, 2018 •

edited

Loading

sharkykh commented Apr 19, 2018 •

edited

Loading