chore(#568): added initial entity-form update poc

examples/druxt-site/nuxt.config.js

@@ -68,7 +68,7 @@ export default {
     // DruxtSite module settings; https://druxtjs.org/modules/site
     site: {
       // Disable the DruxtSite default layout.
-      layout: false,
+      // layout: false,
 
       // Set the backend theme for DruxtBlock layouts.
       theme: 'umami'

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>

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>

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>

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
+  }
 }

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"
   }
 }

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>

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
+  }
+}

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

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",