mirror of
				https://github.com/TeamPiped/Piped.git
				synced 2024-08-14 23:57:27 +00:00 
			
		
		
		
	Simplify checkboxes and fix disappearing of channel groups
This commit is contained in:
		
							parent
							
								
									c217d5e4e3
								
							
						
					
					
						commit
						4343c5f9bc
					
				
					 3 changed files with 12 additions and 31 deletions
				
			
		| 
						 | 
					@ -1,22 +0,0 @@
 | 
				
			||||||
// Wrapper around v-model to allow default values without requiring to use a v-model inside the calling component
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
    props: {
 | 
					 | 
				
			||||||
        defaultValue: Boolean,
 | 
					 | 
				
			||||||
        callback: Function,
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    data() {
 | 
					 | 
				
			||||||
        return {
 | 
					 | 
				
			||||||
            value: false,
 | 
					 | 
				
			||||||
        };
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    mounted() {
 | 
					 | 
				
			||||||
        this.value = this.defaultValue;
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<template>
 | 
					 | 
				
			||||||
    <input type="checkbox" class="checkbox" v-model="value" @change="callback()" />
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
| 
						 | 
					@ -95,10 +95,11 @@ export default {
 | 
				
			||||||
            const cursor = e.target.result;
 | 
					            const cursor = e.target.result;
 | 
				
			||||||
            if (cursor) {
 | 
					            if (cursor) {
 | 
				
			||||||
                const group = cursor.value;
 | 
					                const group = cursor.value;
 | 
				
			||||||
                this.channelGroups = this.channelGroups.concat({
 | 
					                this.channelGroups.push({
 | 
				
			||||||
                    groupName: group.groupName,
 | 
					                    groupName: group.groupName,
 | 
				
			||||||
                    channels: JSON.parse(group.channels),
 | 
					                    channels: JSON.parse(group.channels),
 | 
				
			||||||
                });
 | 
					                });
 | 
				
			||||||
 | 
					                cursor.continue();
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
        };
 | 
					        };
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -71,9 +71,11 @@
 | 
				
			||||||
            <div v-for="subscription in subscriptions" :key="subscription.name">
 | 
					            <div v-for="subscription in subscriptions" :key="subscription.name">
 | 
				
			||||||
                <div class="flex justify-between">
 | 
					                <div class="flex justify-between">
 | 
				
			||||||
                    <span>{{ subscription.name }}</span>
 | 
					                    <span>{{ subscription.name }}</span>
 | 
				
			||||||
                    <DefaultValueCheckbox
 | 
					                    <input
 | 
				
			||||||
                        :default-value="selectedGroup.channels.includes(subscription.url.substr(-11))"
 | 
					                        type="checkbox"
 | 
				
			||||||
                        :callback="() => checkedChange(subscription)"
 | 
					                        class="checkbox"
 | 
				
			||||||
 | 
					                        :checked="selectedGroup.channels.includes(subscription.url.substr(-11))"
 | 
				
			||||||
 | 
					                        @change="checkedChange(subscription)"
 | 
				
			||||||
                    />
 | 
					                    />
 | 
				
			||||||
                </div>
 | 
					                </div>
 | 
				
			||||||
                <hr />
 | 
					                <hr />
 | 
				
			||||||
| 
						 | 
					@ -83,7 +85,6 @@
 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<script>
 | 
					<script>
 | 
				
			||||||
import DefaultValueCheckbox from "./DefaultValueCheckbox.vue";
 | 
					 | 
				
			||||||
import ModalComponent from "./ModalComponent.vue";
 | 
					import ModalComponent from "./ModalComponent.vue";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default {
 | 
					export default {
 | 
				
			||||||
| 
						 | 
					@ -106,7 +107,7 @@ export default {
 | 
				
			||||||
            this.subscriptions.forEach(subscription => (subscription.subscribed = true));
 | 
					            this.subscriptions.forEach(subscription => (subscription.subscribed = true));
 | 
				
			||||||
        });
 | 
					        });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        this.channelGroups = this.channelGroups.concat(this.selectedGroup);
 | 
					        this.channelGroups.push(this.selectedGroup);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        if (!window.db) return;
 | 
					        if (!window.db) return;
 | 
				
			||||||
        const cursor = this.getChannelGroupsCursor();
 | 
					        const cursor = this.getChannelGroupsCursor();
 | 
				
			||||||
| 
						 | 
					@ -114,10 +115,11 @@ export default {
 | 
				
			||||||
            const cursor = e.target.result;
 | 
					            const cursor = e.target.result;
 | 
				
			||||||
            if (cursor) {
 | 
					            if (cursor) {
 | 
				
			||||||
                const group = cursor.value;
 | 
					                const group = cursor.value;
 | 
				
			||||||
                this.channelGroups = this.channelGroups.concat({
 | 
					                this.channelGroups.push({
 | 
				
			||||||
                    groupName: group.groupName,
 | 
					                    groupName: group.groupName,
 | 
				
			||||||
                    channels: JSON.parse(group.channels),
 | 
					                    channels: JSON.parse(group.channels),
 | 
				
			||||||
                });
 | 
					                });
 | 
				
			||||||
 | 
					                cursor.continue();
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
        };
 | 
					        };
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
| 
						 | 
					@ -179,7 +181,7 @@ export default {
 | 
				
			||||||
                groupName: this.newGroupName,
 | 
					                groupName: this.newGroupName,
 | 
				
			||||||
                channels: [],
 | 
					                channels: [],
 | 
				
			||||||
            };
 | 
					            };
 | 
				
			||||||
            this.channelGroups = this.channelGroups.concat(newGroup);
 | 
					            this.channelGroups.push(newGroup);
 | 
				
			||||||
            this.createOrUpdateChannelGroup(newGroup);
 | 
					            this.createOrUpdateChannelGroup(newGroup);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            this.newGroupName = "";
 | 
					            this.newGroupName = "";
 | 
				
			||||||
| 
						 | 
					@ -206,7 +208,7 @@ export default {
 | 
				
			||||||
                : _this.subscriptions.filter(channel => _this.selectedGroup.channels.includes(channel.url.substr(-11)));
 | 
					                : _this.subscriptions.filter(channel => _this.selectedGroup.channels.includes(channel.url.substr(-11)));
 | 
				
			||||||
        },
 | 
					        },
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    components: { ModalComponent, DefaultValueCheckbox },
 | 
					    components: { ModalComponent },
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue