feat(smart-playlist): add empty rule by default

koel · Oct 11, 2021 · b4a157a · b4a157a
1 parent 55ed32b
commit b4a157a
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 8 deletions.
diff --git a/js/components/playlist/smart-playlist/create-form.vue b/js/components/playlist/smart-playlist/create-form.vue
@@ -54,7 +54,7 @@ export default Vue.extend({
 
   data: () => ({
     name: '',
-    ruleGroups: [] as SmartPlaylistRuleGroup[],
+    ruleGroups: [playlistStore.createEmptySmartPlaylistRuleGroup()] as SmartPlaylistRuleGroup[],
     meta: {
       loading: false
     }

diff --git a/js/components/playlist/smart-playlist/form-base.vue b/js/components/playlist/smart-playlist/form-base.vue
@@ -17,8 +17,9 @@ form {
 
 .rules {
   background: rgba(0, 0, 0, .1);
-  padding: 12px;
-  border-radius: 5px;
+  border: 1px solid rgba(255, 255, 255, .1);
+  padding: .75rem;
+  border-radius: .3rem;
 
   input[type=text], input[type=number], input[type=datetime] {
     display: inline-block;

diff --git a/js/components/playlist/smart-playlist/rule-group.vue b/js/components/playlist/smart-playlist/rule-group.vue
@@ -76,7 +76,7 @@ export default Vue.extend({
 .rule-group {
   margin-bottom: 1rem;
   padding-bottom: .5rem;
-  border-bottom: 1px solid rgba(0, 0, 0, .15);
+  border-bottom: 1px solid rgba(255, 255, 255, .1);
 
   > * + * {
     margin-bottom: .5rem;

diff --git a/js/stores/playlist.ts b/js/stores/playlist.ts
@@ -160,10 +160,12 @@ export const playlistStore = {
     value: ['']
   }),
 
-  createEmptySmartPlaylistRuleGroup: (): SmartPlaylistRuleGroup => ({
-    id: (new Date()).getTime(),
-    rules: []
-  }),
+  createEmptySmartPlaylistRuleGroup (): SmartPlaylistRuleGroup {
+    return {
+      id: (new Date()).getTime(),
+      rules: [this.createEmptySmartPlaylistRule()]
+    }
+  },
 
   /**
    * Serialize the rule (groups) to be ready for database.