[4.x] Asset field now supports mixed permissions (#9156)

* nothing is disabled

* only show Browse button if you have `view` permission

* Update resources/js/components/fieldtypes/assets/AssetsFieldtype.vue

Co-authored-by: Duncan McClean <19637309+duncanmcclean@users.noreply.github.com>

* Check permissions for upload button too

* disable drag-and-drop uploader when user is missing upload permissions

* unrelated but we don't need this

there's no starting tag

* hide browse/upload picker when user is missing both permissions

---------

Co-authored-by: Duncan McClean <19637309+duncanmcclean@users.noreply.github.com>
Co-authored-by: Duncan McClean <duncan@duncanmcclean.com>

resources/js/components/fieldtypes/assets/AssetsFieldtype.vue

@@ -4,7 +4,7 @@
         <uploader
             ref="uploader"
             :container="container"
-            :enabled="config.allow_uploads"
+            :enabled="canUpload"
             :path="folder"
             @updated="uploadsUpdated"
             @upload-complete="uploadComplete"
@@ -27,6 +27,7 @@
                 >
 
                     <button
+                        v-if="canBrowse"
                         :class="{'opacity-0': dragging }"
                         type="button"
                         class="btn btn-with-icon"
@@ -37,7 +38,7 @@
                         {{ __('Browse') }}
                     </button>
 
-                    <p class="asset-upload-control" v-if="config.allow_uploads">
+                    <p class="asset-upload-control" v-if="canUpload">
                         <button type="button" class="upload-text-button" @click.prevent="uploadFile">
                             {{ __('Upload file') }}
                         </button>
@@ -128,7 +129,6 @@
             </selector>
         </stack>
     </div>
-    </element-container>
 </template>
 
 
@@ -344,6 +344,8 @@ export default {
         },
 
         showPicker() {
+            if (! this.canBrowse && ! this.canUpload) return false
+
             if (this.maxFilesReached && ! this.isFullWidth) return false
 
             if (this.maxFilesReached && (this.isInGridField || this.isInLinkField)) return false
@@ -359,6 +361,14 @@ export default {
             return this.config.show_set_alt && ! this.isReadOnly;
         },
 
+        canBrowse() {
+            return this.can('configure asset containers') || this.can('view '+ this.container +' assets')
+        },
+
+        canUpload() {
+            return this.config.allow_uploads && (this.can('configure asset containers') || this.can('upload '+ this.container +' assets'))
+        },
+
     },
 
     events: {

resources/js/components/roles/PermissionTree.vue

@@ -6,14 +6,12 @@
                 class="flex items-center justify-between py-2 pr-4 border-b group hover:bg-gray-100"
                 :style="{ paddingLeft: `${16*depth}px` }"
             >
-                <div class="flex" :class="{ 'text-gray-500': disabled, 'cursor-not-allowed': disabled }">
+                <div class="flex">
                     <div class="leading-normal">
                         <input type="checkbox"
                             v-model="permission.checked"
                             :value="permission.value"
-                            :disabled="disabled"
                             name="permissions[]"
-                            :class="{ 'cursor-not-allowed': disabled }"
                         />
                     </div>
                     <div class="pl-2">
@@ -27,7 +25,6 @@
                 v-if="permission.children.length"
                 :depth="depth+1"
                 :initial-permissions="permission.children"
-                :disabled="!permission.checked"
             />
         </div>
     </div>
@@ -39,24 +36,13 @@ export default {
 
     props: {
         initialPermissions: Array,
-        disabled: Boolean,
         depth: Number
     },
 
     data() {
         return {
             permissions: this.initialPermissions
         }
-    },
-
-    watch: {
-
-        disabled(disabled) {
-            if (disabled) {
-                this.permissions.map(permission => permission.checked = false);
-            }
-        }
-
     }
 
 }