From 03cbab52678665a6e194d914c255b4b77a7c9177 Mon Sep 17 00:00:00 2001
From: venashial <venashial.levo@aleeas.com>
Date: Thu, 27 May 2021 21:00:44 -0700
Subject: [PATCH] Checkboxes: use v-model value prop instead of "checked" prop
 (#227)

* Use v-model value prop instead of "checked" prop

* Scope CSS & Rename component

* Mod settings: Update prop & make Owner check all
---
 components/ui/Checkbox.vue | 25 ++++++++++--------------
 pages/mod/_id/settings.vue | 40 ++++++++++++++++++++++++++++++--------
 2 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/components/ui/Checkbox.vue b/components/ui/Checkbox.vue
index 86aa6736..bac60853 100644
--- a/components/ui/Checkbox.vue
+++ b/components/ui/Checkbox.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="checkbox-outer" :class="{ disabled }" @click="toggle">
     <button class="checkbox" :disabled="disabled" :class="{ border }">
-      <CheckIcon v-if="checked" />
+      <CheckIcon v-if="value" />
     </button>
     <p>{{ label }}</p>
   </div>
@@ -11,7 +11,7 @@
 import CheckIcon from '~/assets/images/utils/check.svg?inline'
 
 export default {
-  name: 'SearchCheckbox',
+  name: 'Checkbox',
   components: {
     CheckIcon,
   },
@@ -28,31 +28,26 @@ export default {
       type: Boolean,
       default: true,
     },
-  },
-  data() {
-    return {
-      checked: false,
-    }
+    value: Boolean,
   },
   methods: {
     toggle() {
       if (!this.disabled) {
-        this.checked = !this.checked
-        this.$emit('input', this.checked)
+        this.$emit('input', !this.value)
       }
     },
   },
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .checkbox-outer {
   display: flex;
   align-items: center;
   cursor: pointer;
 
   &.disabled {
-    opacity: 0.5;
+    opacity: 0.6;
     cursor: not-allowed;
 
     button {
@@ -65,11 +60,11 @@ export default {
       }
     }
   }
-}
 
-p {
-  padding: 0.2rem 0rem;
-  margin: 0 0 0 0.5rem;
+  p {
+    padding: 0.2rem 0rem;
+    margin: 0 0 0 0.5rem;
+  }
 }
 
 .checkbox {
diff --git a/pages/mod/_id/settings.vue b/pages/mod/_id/settings.vue
index d2e956e4..7421486b 100644
--- a/pages/mod/_id/settings.vue
+++ b/pages/mod/_id/settings.vue
@@ -105,7 +105,10 @@
         <h3>Permissions</h3>
         <div class="permissions">
           <Checkbox
-            :checked="(member.permissions & UPLOAD_VERSION) === UPLOAD_VERSION"
+            :value="
+              (member.permissions & UPLOAD_VERSION) === UPLOAD_VERSION ||
+              member.role === 'Owner'
+            "
             :disabled="
               member.role === 'Owner' ||
               (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
@@ -115,7 +118,10 @@
             @input="members[index].permissions ^= UPLOAD_VERSION"
           />
           <Checkbox
-            :checked="(member.permissions & DELETE_VERSION) === DELETE_VERSION"
+            :value="
+              (member.permissions & DELETE_VERSION) === DELETE_VERSION ||
+              member.role === 'Owner'
+            "
             :disabled="
               member.role === 'Owner' ||
               (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
@@ -125,7 +131,10 @@
             @input="members[index].permissions ^= DELETE_VERSION"
           />
           <Checkbox
-            :checked="(member.permissions & EDIT_DETAILS) === EDIT_DETAILS"
+            :value="
+              (member.permissions & EDIT_DETAILS) === EDIT_DETAILS ||
+              member.role === 'Owner'
+            "
             :disabled="
               member.role === 'Owner' ||
               (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
@@ -135,7 +144,10 @@
             @input="members[index].permissions ^= EDIT_DETAILS"
           />
           <Checkbox
-            :checked="(member.permissions & EDIT_BODY) === EDIT_BODY"
+            :value="
+              (member.permissions & EDIT_BODY) === EDIT_BODY ||
+              member.role === 'Owner'
+            "
             :disabled="
               member.role === 'Owner' ||
               (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
@@ -145,7 +157,10 @@
             @input="members[index].permissions ^= EDIT_BODY"
           />
           <Checkbox
-            :checked="(member.permissions & MANAGE_INVITES) === MANAGE_INVITES"
+            :value="
+              (member.permissions & MANAGE_INVITES) === MANAGE_INVITES ||
+              member.role === 'Owner'
+            "
             :disabled="
               member.role === 'Owner' ||
               (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
@@ -155,7 +170,10 @@
             @input="members[index].permissions ^= MANAGE_INVITES"
           />
           <Checkbox
-            :checked="(member.permissions & REMOVE_MEMBER) === REMOVE_MEMBER"
+            :value="
+              (member.permissions & REMOVE_MEMBER) === REMOVE_MEMBER ||
+              member.role === 'Owner'
+            "
             :disabled="
               member.role === 'Owner' ||
               (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
@@ -165,7 +183,10 @@
             @input="members[index].permissions ^= REMOVE_MEMBER"
           />
           <Checkbox
-            :checked="(member.permissions & EDIT_MEMBER) === EDIT_MEMBER"
+            :value="
+              (member.permissions & EDIT_MEMBER) === EDIT_MEMBER ||
+              member.role === 'Owner'
+            "
             :disabled="
               member.role === 'Owner' ||
               (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER
@@ -174,7 +195,10 @@
             @input="members[index].permissions ^= EDIT_MEMBER"
           />
           <Checkbox
-            :checked="(member.permissions & DELETE_MOD) === DELETE_MOD"
+            :value="
+              (member.permissions & DELETE_MOD) === DELETE_MOD ||
+              member.role === 'Owner'
+            "
             :disabled="
               member.role === 'Owner' ||
               (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||