Enable readonly Index.vue (#4)

Co-authored-by: jlnascimento <[email protected]>
pdmfc · May 12, 2020 · eeb49d3 · eeb49d3
1 parent c768866
commit eeb49d3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/components/IndexField.vue b/resources/js/components/IndexField.vue
@@ -9,25 +9,26 @@
       :placeholder="field.name"
       v-model="value"
       v-on="listener"
+      :disabled="field.readonly"
     />
     <span v-else class="whitespace-no-wrap">{{ field.value }}</span>
   </div>
 </template>
 
 <script>
-import { FormField, HandlesValidationErrors } from "laravel-nova";
+import { FormField, HandlesValidationErrors } from 'laravel-nova';
 
 export default {
   mixins: [FormField, HandlesValidationErrors],
 
-  props: ["resourceName", "field"],
+  props: ['resourceName', 'field'],
 
   methods: {
     submit() {
       let formData = new FormData();
 
       formData.append(this.field.attribute, this.value);
-      formData.append("_method", "PUT");
+      formData.append('_method', 'PUT');
 
       return Nova.request()
         .post(
@@ -37,12 +38,12 @@ export default {
         .then(
           () => {
             this.$toasted.show(`${this.field.name} updated`, {
-              type: "success"
+              type: 'success',
             });
 
             this.refreshTable();
           },
-          response => this.$toasted.show(response, { type: "error" })
+          (response) => this.$toasted.show(response, { type: 'error' })
         );
     },
 
@@ -54,7 +55,7 @@ export default {
 
     capitalize(string) {
       return string.charAt(0).toUpperCase() + string.substr(1);
-    }
+    },
   },
 
   computed: {
@@ -71,24 +72,24 @@ export default {
     },
 
     listener() {
-      const event = this.field.event.split(".");
+      const event = this.field.event.split('.');
       const name = event[0];
       const modifier = event[1] ? this.capitalize(event[1]) : null;
 
       return {
-        [name]: e => {
+        [name]: (e) => {
           if (this.valueWasNotChanged) return;
 
           if (modifier && modifier === e.key) this.submit();
 
           if (!modifier) this.submit();
-        }
+        },
       };
     },
 
     valueWasNotChanged() {
       return this.value === this.field.value;
-    }
-  }
+    },
+  },
 };
 </script>