more editable fields, created CheckboxEditable

src/components/editable/CheckboxEditable.vue

@@ -0,0 +1,64 @@
+<script>
+
+import REST from '@api/rest-axios'
+
+import { mapActions, mapState } from 'pinia'
+import { UserStore } from '@stores/user'
+
+
+export default {
+  props: {
+    label: String, 
+    data: Object
+  },
+  // emits: ['returned'],
+  data(){
+    return {
+      
+    }
+  },
+  computed: {
+    ...mapState(UserStore,['csrf_token']),
+  },
+  created () {
+    console.log('ContentEditable created');
+  },
+  mounted () {
+
+  },
+  methods: {
+    onInput(e){
+      // console.log('onInput checkbox e', e);
+      let checked  = e.target.checked;
+      // console.log('onInput checkbox checked', checked);
+      this.save(checked)
+    },
+    save(checked){
+      // console.log('save csrf_token', this.csrf_token);
+      const params = {
+        type: this.data.bundle,
+        nid: [{"value":this.data.nid}],
+        [this.data.field]: {value: checked}
+      };
+      const configs = {
+        headers: {'X-CSRF-Token': this.csrf_token}
+      };
+      REST.patch(`/node/${this.data.nid}?_format=json`, params, configs)
+        .then(({ data }) => {
+          console.log('user REST post node data', data)
+          // TODO if success update the data in pinia 
+        })
+        .catch(error => {
+          console.warn(`Issue with patch node ${this.data.bundle}`, error)
+          Promise.reject(error)
+        })
+    }
+  },
+}
+</script>
+
+<template>
+  <section class="editable">
+    <label><input type="checkbox" @input="onInput"> {{ label }}</label>
+  </section>
+</template>

src/components/editable/ContentEditable.vue

@@ -0,0 +1,84 @@
+<script>
+
+import REST from '@api/rest-axios'
+
+import { mapActions, mapState } from 'pinia'
+import { UserStore } from '@stores/user'
+
+
+export default {
+  props: {
+    tag: String, 
+    value: String, 
+    contenteditable : {
+      type : [Boolean, String],
+      default : true,
+    },
+    html : {
+      type : [Boolean, String],
+      default : false,
+    }, 
+    data: Object
+  },
+  // emits: ['returned'],
+  data(){
+    return {
+      
+    }
+  },
+  computed: {
+    ...mapState(UserStore,['csrf_token']),
+  },
+  created () {
+    console.log('ContentEditable created');
+  },
+  mounted () {
+
+  },
+  methods: {
+    onContentEditableFocusOut(e){
+      console.log('onContentEditableFocusOut', e);
+      // console.log('onContentEditableFocusOut data', this.data);
+      let new_field_content = this.html ? e.target.innerHTML : e.target.innerText;
+      // console.log('onContentEditableFocusOut', new_field_content);
+      this.save(new_field_content)
+    },
+    save(content){
+      // console.log('save csrf_token', this.csrf_token);
+      const params = {
+        type: this.data.bundle,
+        nid: [{"value":this.data.nid}],
+        [this.data.field]: {value: content}
+      };
+      const configs = {
+        headers: {'X-CSRF-Token': this.csrf_token}
+      };
+      REST.patch(`/node/${this.data.nid}?_format=json`, params, configs)
+        .then(({ data }) => {
+          console.log('user REST post node data', data)
+          // TODO if success update the data in pinia 
+        })
+        .catch(error => {
+          console.warn(`Issue with patch node ${this.data.bundle}`, error)
+          Promise.reject(error)
+        })
+    }
+  },
+}
+</script>
+
+<template>
+  <component
+    v-if="!html" 
+    :is="tag"
+    :contenteditable="contenteditable"
+    @focusout="onContentEditableFocusOut"
+  >{{ value }}</component>
+  <component
+    v-else
+    :is="tag"
+    v-html="value"
+    :contenteditable="contenteditable"
+    @focusout="onContentEditableFocusOut"
+  />
+</template>