From c2001efb6e34b3763ba2d5807b3b281a64ed6d98 Mon Sep 17 00:00:00 2001
From: Stuart Clark <stuart@realityloop.com>
Date: Wed, 4 Aug 2021 16:46:22 +1000
Subject: [PATCH] [#5] feat: add Teaser and inline edit.

---
 nuxt/components/app/FormInput.vue             | 31 +++++++++++++++++++
 .../druxt/entity/node/article/Default.vue     | 28 +++++++++++++++++
 .../druxt/entity/node/article/Teaser.vue      | 12 ++++---
 nuxt/mixins/edit-inline.js                    | 15 +++++++++
 4 files changed, 81 insertions(+), 5 deletions(-)
 create mode 100644 nuxt/components/app/FormInput.vue
 create mode 100644 nuxt/components/druxt/entity/node/article/Default.vue
 create mode 100644 nuxt/mixins/edit-inline.js

diff --git a/nuxt/components/app/FormInput.vue b/nuxt/components/app/FormInput.vue
new file mode 100644
index 0000000..dc5aeaa
--- /dev/null
+++ b/nuxt/components/app/FormInput.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="form-control">
+    <input
+      v-model="model"
+      class="input input-bordered"
+      type="text"
+      v-bind="$attrs"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      required: true,
+    }
+  },
+
+  data: ({ value }) => ({
+    model: value,
+  }),
+
+  watch: {
+    model() {
+      this.$emit('input', this.model)
+    }
+  }
+}
+</script>
diff --git a/nuxt/components/druxt/entity/node/article/Default.vue b/nuxt/components/druxt/entity/node/article/Default.vue
new file mode 100644
index 0000000..b325950
--- /dev/null
+++ b/nuxt/components/druxt/entity/node/article/Default.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="flex">
+    <div class="flex-auto mr-10">
+      <h1 class="mb-5 text-5xl">{{ entity.attributes.title }}</h1>
+      <slot />
+    </div>
+
+    <div>
+      <div class="bordered card">
+        <div class="card-body">
+          <div class="avatar placeholder">
+            <div class="bg-neutral-focus text-neutral-content rounded-full h-16 w-16">
+              <span class="text-xl"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DruxtEntityMixin } from 'druxt-entity'
+
+export default {
+  mixins: [DruxtEntityMixin],
+}
+</script>
diff --git a/nuxt/components/druxt/entity/node/article/Teaser.vue b/nuxt/components/druxt/entity/node/article/Teaser.vue
index 055c40d..afe7276 100644
--- a/nuxt/components/druxt/entity/node/article/Teaser.vue
+++ b/nuxt/components/druxt/entity/node/article/Teaser.vue
@@ -1,19 +1,20 @@
 <template>
-  <div class="card bordered hover:shadow mb-5">
+  <div class="card bordered hover:shadow mb-5" @dblclick="toggleInlineEdit">
     <!-- <figure>
       <img src="https://picsum.photos/id/1005/60/40" class="w-full" />
     </figure> -->
     <div class="card-body">
       <!-- Title -->
-      <NuxtLink class="card-title" :to="url" v-text="entity.attributes.title" />
+      <NuxtLink v-if="!inline.edit" class="card-title" :to="url" v-text="entity.attributes.title" />
+      <AppFormInput v-else v-model="entity.attributes.title" />
 
       <!-- Tags -->
       <div v-if="tags" class="mb-5">
-        <slot name="field_tags" />
+        <slot name="field_tags" :inline-edit="inline.edit" />
       </div>
 
       <!-- Body -->
-      <slot name="body" />
+      <slot name="body" :inline-edit="inline.edit" />
 
       <div class="card-actions">
         <NuxtLink class="btn btn-primary" :to="url">Read more</NuxtLink>
@@ -24,9 +25,10 @@
 
 <script>
 import { DruxtEntityMixin } from 'druxt-entity'
+import { MixinEditInline } from '~/mixins/edit-inline'
 
 export default {
-  mixins: [DruxtEntityMixin],
+  mixins: [DruxtEntityMixin, MixinEditInline],
 
   computed: {
     tags: ({ model }) =>
diff --git a/nuxt/mixins/edit-inline.js b/nuxt/mixins/edit-inline.js
new file mode 100644
index 0000000..71ddab5
--- /dev/null
+++ b/nuxt/mixins/edit-inline.js
@@ -0,0 +1,15 @@
+const MixinEditInline = {
+  data: () => ({
+    inline: {
+      edit: false,
+    }
+  }),
+
+  methods: {
+    toggleInlineEdit() {
+      this.inline.edit = !this.inline.edit
+    }
+  }
+}
+
+export { MixinEditInline }