Simplify checkboxes and fix disappearing of channel groups

This commit is contained in:
Bnyro 2023-05-08 14:13:32 +02:00
parent c217d5e4e3
commit 4343c5f9bc
3 changed files with 12 additions and 31 deletions

View File

@ -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>

View File

@ -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();
} }
}; };
}, },

View File

@ -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>