From 08993330a55fea7c5a2a1bf19151fed8ea31da8f Mon Sep 17 00:00:00 2001
From: Stuart Clark <stu@rtclark.net>
Date: Wed, 31 Aug 2022 16:46:23 +1000
Subject: [PATCH] chore(#568): added initial entity-form update poc

---
 .../components/druxt/entity/node/Default.vue  |  3 --
 .../components/druxt/views/filter/Default.vue | 32 -------------
 examples/entity-form/components/app/Card.vue  | 26 +++++++++++
 .../components/druxt/view/Content.vue         | 39 ++++++++++++++++
 .../components/druxt/views/filter/Default.vue | 32 +++++++++++++
 examples/entity-form/nuxt.config.js           |  8 +++-
 examples/entity-form/package.json             |  3 +-
 examples/entity-form/pages/index.vue          | 45 ++++++++++---------
 examples/entity-form/store/index.js           | 13 ++++++
 examples/entity-form/yarn.lock                | 13 ++++--
 package.json                                  |  1 +
 11 files changed, 154 insertions(+), 61 deletions(-)
 delete mode 100644 examples/druxt-site/components/druxt/entity/node/Default.vue
 delete mode 100644 examples/druxt-site/components/druxt/views/filter/Default.vue
 create mode 100644 examples/entity-form/components/app/Card.vue
 create mode 100644 examples/entity-form/components/druxt/view/Content.vue
 create mode 100644 examples/entity-form/components/druxt/views/filter/Default.vue
 create mode 100644 examples/entity-form/store/index.js

diff --git a/examples/druxt-site/components/druxt/entity/node/Default.vue b/examples/druxt-site/components/druxt/entity/node/Default.vue
deleted file mode 100644
index 7b8b46cb0..000000000
--- a/examples/druxt-site/components/druxt/entity/node/Default.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div></div>
-</template>
diff --git a/examples/druxt-site/components/druxt/views/filter/Default.vue b/examples/druxt-site/components/druxt/views/filter/Default.vue
deleted file mode 100644
index d171bec13..000000000
--- a/examples/druxt-site/components/druxt/views/filter/Default.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div>
-    {{ filter.expose.label }}
-    <input v-if="filter.plugin_id === 'string'" v-model="model" />
-    <select v-else />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    filter: {
-      type: Object,
-      required: true
-    },
-    value: {
-      type: String,
-      default: '',
-    }
-  },
-
-  data: ({ value }) => ({
-    model: value
-  }),
-
-  watch: {
-    model() {
-      this.$emit('input', this.model)
-    }
-  }
-}
-</script>
diff --git a/examples/entity-form/components/app/Card.vue b/examples/entity-form/components/app/Card.vue
new file mode 100644
index 000000000..bf4dca5b9
--- /dev/null
+++ b/examples/entity-form/components/app/Card.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="card">
+    <h2 v-text="title" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card {
+  cursor: pointer;
+  display: block;
+  border: 1px solid lightgray;
+  padding: 1rem;
+  margin: 1rem 0;
+}
+</style>
diff --git a/examples/entity-form/components/druxt/view/Content.vue b/examples/entity-form/components/druxt/view/Content.vue
new file mode 100644
index 000000000..626b0a1bf
--- /dev/null
+++ b/examples/entity-form/components/druxt/view/Content.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <slot name="filters" />
+    <div class="items">
+      <DruxtEntity
+        v-for="result of results"
+        :key="result.id"
+        :uuid="result.id"
+        :type="result.type"
+        mode="card"
+      >
+        <template #default="{ entity }">
+          <AppCard :title="entity.attributes.title" @click.native="setEntity(entity)" />
+        </template>
+      </DruxtEntity>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DruxtViewsViewMixin } from 'druxt-views'
+import { mapMutations } from 'vuex'
+
+export default {
+  mixins: [DruxtViewsViewMixin],
+
+  methods: {
+    ...mapMutations(['setEntity']),
+  }
+}
+</script>
+
+<style scoped>
+.items {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  column-gap: 4rem;
+}
+</style>
diff --git a/examples/entity-form/components/druxt/views/filter/Default.vue b/examples/entity-form/components/druxt/views/filter/Default.vue
new file mode 100644
index 000000000..e9699a02a
--- /dev/null
+++ b/examples/entity-form/components/druxt/views/filter/Default.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <label :for="filter.id">{{ filter.expose.label }}:</label>
+
+    <!-- Basic string field based filter. -->
+    <input
+      v-if="filter.plugin_id === 'string'"
+      :id="filter.id"
+      v-model="model"
+    />
+
+    <!-- Select list based filter. -->
+    <select v-else :id="filter.id">
+      <option v-for="option of options" :key="option">{{ option }}</option>
+    </select>
+  </div>
+</template>
+
+<script>
+import { DruxtViewsFilterMixin } from 'druxt-views'
+
+export default {
+  mixins: [DruxtViewsFilterMixin],
+
+  computed: {
+    // @TODO - build available filter options based on configuration.
+    options: () => {
+      return []
+    }
+  }
+}
+</script>
diff --git a/examples/entity-form/nuxt.config.js b/examples/entity-form/nuxt.config.js
index f95f3f222..a3b6762c3 100644
--- a/examples/entity-form/nuxt.config.js
+++ b/examples/entity-form/nuxt.config.js
@@ -3,5 +3,11 @@ const baseUrl = process.env.GITPOD_WORKSPACE_ID
   : process.env.BASE_URL || 'http://drupal-9.ddev.site'
 
 export default {
-  buildModules: [['druxt-entity', { baseUrl }]]
+  buildModules: [
+    'druxt-entity',
+    'druxt-views'
+  ],
+  druxt: {
+    baseUrl
+  }
 }
diff --git a/examples/entity-form/package.json b/examples/entity-form/package.json
index 236ae7f86..d4f8e721e 100644
--- a/examples/entity-form/package.json
+++ b/examples/entity-form/package.json
@@ -6,7 +6,8 @@
     "dev": "nuxt"
   },
   "dependencies": {
-    "druxt-site": "link:../../../packages/druxt-entity",
+    "druxt-entity": "link:../../../packages/entity",
+    "druxt-views": "link:../../../packages/views",
     "nuxt": "latest"
   }
 }
diff --git a/examples/entity-form/pages/index.vue b/examples/entity-form/pages/index.vue
index f009744f2..11593fe69 100644
--- a/examples/entity-form/pages/index.vue
+++ b/examples/entity-form/pages/index.vue
@@ -1,31 +1,34 @@
 <template>
-  <div>
-    <h1>DruxtEntityForm example:</h1>
-
-    <h2>Contact form - Basic</h2>
-    <pre><code>&lt;DruxtEntityForm type="contact_message--feedback" /&gt;</code></pre>
+  <!-- If user is not logged in, present login form -->
+  <div v-if="!isLoggedIn">
+    @TODO - Login UI
+  </div>
 
-    <pre v-if="response">
-      <code>{{ JSON.stringify(response, null, '  ') }}</code>
-    </pre>
+  <!-- If logged in, but no entity is set, render the Content view -->
+  <div v-else-if="!entity">
+    <DruxtView view-id="content" />
+  </div>
 
-    <DruxtEntityForm
-      type="contact_message--feedback"
-      @error="setResponse"
-      @submit="setResponse"
-    />
+  <div v-else>
+    <button @click="clearEntity">Close</button>
+    <DruxtEntityForm :uuid="entity.id" :type="entity.type" />
   </div>
 </template>
 
 <script>
+import { mapState, mapMutations } from 'vuex'
+
 export default {
-  data: () => ({
-    response: null,
-  }),
-  methods: {
-    setResponse(response) {
-      this.response = response;
-    },
+  computed: {
+    isLoggedIn: () => true,
+
+    ...mapState({
+      entity: state => state.entity
+    })
   },
-};
+
+  methods: {
+    ...mapMutations(['clearEntity'])
+  }
+}
 </script>
diff --git a/examples/entity-form/store/index.js b/examples/entity-form/store/index.js
new file mode 100644
index 000000000..eec9db258
--- /dev/null
+++ b/examples/entity-form/store/index.js
@@ -0,0 +1,13 @@
+export const state = () => ({
+  entity: undefined,
+})
+
+export const mutations = {
+  clearEntity(state) {
+    state.entity = undefined
+  },
+
+  setEntity(state, entity) {
+    state.entity = entity
+  }
+}
diff --git a/examples/entity-form/yarn.lock b/examples/entity-form/yarn.lock
index d808eb6a7..2074a930e 100644
--- a/examples/entity-form/yarn.lock
+++ b/examples/entity-form/yarn.lock
@@ -4239,9 +4239,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"druxt-site@link:../../../packages/druxt-entity::locator=entity-form%40workspace%3A.":
+"druxt-entity@link:../../../packages/entity::locator=entity-form%40workspace%3A.":
   version: 0.0.0-use.local
-  resolution: "druxt-site@link:../../../packages/druxt-entity::locator=entity-form%40workspace%3A."
+  resolution: "druxt-entity@link:../../../packages/entity::locator=entity-form%40workspace%3A."
+  languageName: node
+  linkType: soft
+
+"druxt-views@link:../../../packages/views::locator=entity-form%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "druxt-views@link:../../../packages/views::locator=entity-form%40workspace%3A."
   languageName: node
   linkType: soft
 
@@ -4354,7 +4360,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "entity-form@workspace:."
   dependencies:
-    druxt-site: "link:../../../packages/druxt-entity"
+    druxt-entity: "link:../../../packages/entity"
+    druxt-views: "link:../../../packages/views"
     nuxt: latest
   languageName: unknown
   linkType: soft
diff --git a/package.json b/package.json
index 00b3491b4..a9928a07c 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "example:druxt-site:storybook:test:open": "start-server-and-test 'yarn example:druxt-site:storybook --port 3000' http://localhost:3000 'npx cypress open --project examples/druxt-site/test'",
     "example:druxt-site:test": "start-server-and-test 'yarn example:druxt-site' http://localhost:3000 'npx cypress run --project examples/druxt-site/test --spec examples/druxt-site/test/cypress/e2e/umami-*.cy.js'",
     "example:druxt-site:test:open": "start-server-and-test 'yarn example:druxt-site' http://localhost:3000 'npx cypress open --project examples/druxt-site/test'",
+    "example:entity-form": "cd examples/entity-form && yarn && yarn dev",
     "lint": "eslint --ext .js,.vue packages/*/src",
     "lint:commit": "commitlint",
     "lint:renovate": "renovate-config-validator",