Merge branch 'listView'

CHANGELOG.md

+# 0.1.11
+
+_10th April 2020_
+
+### Added
+
+- You can now switch between spatial view (organise) and list view (bucket mode).
+
+### Fixed
+
+- Typo in CHANGELOG.md
+
 # 0.1.10
 
 _7th April 2020_
@@ -12,7 +24,7 @@ _7th April 2020_
 
 ### Fixed
 
-- Create/ Join a new microcosm now reloads URL dependant on whether in development or prodction enviroment
+- Create/ Join a new microcosm now reloads URL dependant on whether in development or production environment.
 
 # 0.1.9
 

app/package.json

 {
   "name": "nodenogg.in",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

app/src/components/ControlsLayer.vue

 <template>
   <div class="controls">
     <div class="btn-row">
-      <BaseButton buttonClass="action" @click="addNode()"
-        >Create Node</BaseButton
-      >
-      <BaseButton buttonClass="action" @click="removeLocal()"
-        >Join another microcosm</BaseButton
-      >
+      <BaseButton buttonClass="action" @click="addNode()">Create Node</BaseButton>
+      <BaseButton buttonClass="action" @click="listView()">Switch View</BaseButton>
+      <BaseButton buttonClass="action" @click="removeLocal()">Join another microcosm</BaseButton>
       <!-- <BaseButton @click="exportStorage()">Export my contributions</BaseButton>
     <BaseButton buttonClass="danger" v-on:click="deleteClient">
       Delete my contributions (inc. attachments) permanently
@@ -49,6 +46,10 @@ export default {
     addNode() {
       this.$store.dispatch('addNode')
     },
+    listView() {
+      // FIXME: add action here to toggle visiblity
+      this.$emit('listView')
+    },
     exportStorage: function() {
       // Save local indexeddb document-store to JSON file
       // or export state.notes to JSON file

app/src/components/ListLayer.vue

+<template>
+  <div class="list">
+    <ul v-for="value in myNodes" v-bind:key="value.node_id">
+      <li
+        class="dataeach"
+        v-if="nodeid == value.node_id"
+        :inner-html.prop="value.node_text | marked"
+      ></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import marked from 'marked'
+
+export default {
+  name: 'ListLayer',
+  props: {
+    nodeid: String,
+    nodetext: String
+  },
+
+  computed: mapState({
+    myNodes: state => state.myNodes
+  }),
+
+  filters: {
+    // need to write a reverse data filter I suspect here so new data is at the top of list
+    marked: marked
+  }
+}
+</script>
+
+<style lang="css" scoped>
+li {
+  margin-bottom: -15px;
+}
+</style>
\ No newline at end of file

app/src/components/NodesLayer.vue

@@ -35,6 +35,7 @@
               ></textarea>
             </div>
           </div>
+          <!-- FIXME: What is this doing below now ? Looks old -->
           <div v-else>
             <p :id="nodeid" :inner-html.prop="nodetext | marked">{{ nodeid }}</p>
           </div>

app/src/components/OtherListlayer.vue

+<template>
+  <div class="otherlist">
+    <ul v-for="value in otherNodes" v-bind:key="value.node_id">
+      <li
+        class="dataeach"
+        v-if="nodeid == value.node_id"
+        :inner-html.prop="value.node_text | marked"
+      >{{ nodeid }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import marked from 'marked'
+
+export default {
+  name: 'OtherListlayer',
+  props: {
+    nodeid: String,
+    nodetext: String
+  },
+
+  computed: mapState({
+    otherNodes: state => state.otherNodes
+  }),
+
+  filters: {
+    // need to write a reverse data filter I suspect here so new data is at the top of list
+    marked: marked
+  }
+}
+</script>
+
+<style lang="css" scoped>
+li {
+  margin-bottom: -15px;
+}
+</style>
\ No newline at end of file

app/src/views/Home.vue

 <template>
   <div class="home">
     <div v-if="clientset">
-      <OtherNodeslayer
-        v-for="value in otherNodes"
-        v-bind:key="value.node_id"
-        v-bind:nodeid="value.node_id"
-        v-bind:nodetext="value.node_text"
-      />
+      <div v-if="listview">
+        <ListLayer
+          v-for="value in myNodes"
+          v-bind:key="value.node_id"
+          v-bind:nodeid="value.node_id"
+          v-bind:nodetext="value.node_text"
+        />
 
-      <NodesLayer
-        @editTrue="e => editTrue(e)"
-        v-for="value in myNodes"
-        v-bind:key="value.node_id"
-        v-bind:nodeid="value.node_id"
-        v-bind:nodetext="value.node_text"
-      />
+        <OtherListlayer
+          v-for="value in otherNodes"
+          v-bind:key="value.node_id"
+          v-bind:nodeid="value.node_id"
+          v-bind:nodetext="value.node_text"
+        />
+      </div>
+      <div v-else>
+        <OtherNodeslayer
+          v-for="value in otherNodes"
+          v-bind:key="value.node_id"
+          v-bind:nodeid="value.node_id"
+          v-bind:nodetext="value.node_text"
+        />
 
-      <ControlsLayer />
+        <NodesLayer
+          @editTrue="e => editTrue(e)"
+          v-for="value in myNodes"
+          v-bind:key="value.node_id"
+          v-bind:nodeid="value.node_id"
+          v-bind:nodetext="value.node_text"
+        />
+      </div>
+      <ControlsLayer @listView="listView()" />
     </div>
     <OnBoard v-else @clientAdded="clientAdded()" />
   </div>
@@ -27,6 +43,8 @@
 import OnBoard from '@/components/OnBoard.vue'
 import NodesLayer from '@/components/NodesLayer.vue'
 import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
+import ListLayer from '@/components/ListLayer.vue'
+import OtherListlayer from '@/components/OtherListlayer.vue'
 import ControlsLayer from '@/components/ControlsLayer.vue'
 
 import { mapState } from 'vuex'
@@ -57,6 +75,7 @@ export default {
   data: function() {
     return {
       clientset: false,
+      listview: false,
       offline: false
     }
   },
@@ -65,6 +84,8 @@ export default {
     OnBoard,
     NodesLayer,
     OtherNodeslayer,
+    ListLayer,
+    OtherListlayer,
     ControlsLayer
   },
   computed: mapState({
@@ -86,6 +107,14 @@ export default {
       this.$store.dispatch('addNode')
     },
 
+    listView() {
+      if (this.listview == false) {
+        this.listview = true
+      } else {
+        this.listview = false
+      }
+    },
+
     offlineTriggered() {
       this.offline = true
     },

app/src/views/NotFound.vue

@@ -2,6 +2,8 @@
   <div>
     <h1>This is a Custom 404</h1>
     <p>Delightful one coming soon</p>
+
+    <!-- FIXME: Put stuffed Monkey here -->
   </div>
 </template>