From ad164bbeeec935f566b183bbfb77cec38aab677d Mon Sep 17 00:00:00 2001
From: Tan Chien Hao <tanchienhao@gmail.com>
Date: Fri, 1 Dec 2023 19:00:51 +0800
Subject: [PATCH] dont show buttons for non-owners + cannot edit if not owner,
 removed listview (reformatting)

---
 src/components/DataPanel.vue             | 16 ++++++++--
 src/components/DecoPanel.vue             |  8 +++--
 src/components/Navbar.vue                |  8 +++--
 src/components/ProjectList.vue           |  2 ++
 src/router/index.ts                      | 14 ++++++---
 src/views/{Graph.vue => GraphLayout.vue} | 27 ++--------------
 src/views/ListLayout.vue                 | 39 ++++++++++++++++++++++++
 7 files changed, 78 insertions(+), 36 deletions(-)
 rename src/views/{Graph.vue => GraphLayout.vue} (90%)
 create mode 100644 src/views/ListLayout.vue

diff --git a/src/components/DataPanel.vue b/src/components/DataPanel.vue
index 37e9d68..453b820 100644
--- a/src/components/DataPanel.vue
+++ b/src/components/DataPanel.vue
@@ -3,11 +3,13 @@
     <h1 class="title is-4">ID : {{ (data_panel.uid ? data_panel.uid : "Hover over a node") }}</h1>
     <div class="control">
       <input class="input is-hovered info-panel-item" type="text" placeholder="Name" :value="data_panel.name"
-        @focus="pauseKeyDown" @blur="handleBlur('name', $event)" />
+        @focus="pauseKeyDown" @blur="handleBlur('name', $event)" 
+        :disabled="this.$store.state.kratos_user_id == 'guest'"/>
     </div>
     <div class="control" :style="{marginBottom: '5px'}">
       <input class="input is-hovered info-panel-item" type="text" placeholder="URL" :value="data_panel.link"
-        @focus="pauseKeyDown" @blur="handleBlur('link', $event)" />
+        @focus="pauseKeyDown" @blur="handleBlur('link', $event)" 
+        :disabled="this.$store.state.kratos_user_id == 'guest'"/>
     </div>
     <div class="control">
       <a target="_blank" :href="data_panel.link">
@@ -19,7 +21,8 @@
     </div>
     <div class="control" :style="{marginTop: '10px'}" v-if="!hide_description">
       <textarea class="textarea" rows="5" cols="50" placeholder="Description" :value="data_panel.description"
-        @focus="pauseKeyDown" @blur="handleBlur('description', $event)"></textarea>
+        @focus="pauseKeyDown" @blur="handleBlur('description', $event)"
+        :disabled="this.$store.state.kratos_user_id == 'guest'"></textarea>
     </div>
   </div>
 </template>
@@ -131,6 +134,13 @@ export default defineComponent({
         setTimeout(() => {
           retrieval_status.value = ""
         }, 1000)
+      }).catch((err) => {
+        console.log(err);
+        retrieval_status.value = "Error!"
+        this.$emit('add_log', 'DataPanel', 'error')
+        setTimeout(() => {
+          retrieval_status.value = ""
+        }, 1000)
       });
     },
     onInputPropertyName: function () { },
diff --git a/src/components/DecoPanel.vue b/src/components/DecoPanel.vue
index 04fb043..d183170 100644
--- a/src/components/DecoPanel.vue
+++ b/src/components/DecoPanel.vue
@@ -40,7 +40,8 @@
                             Tag Name:
                             <input class="input is-hovered info-panel-item" type="text" placeholder="Tag Name"
                                 v-model="tag_name" @change="update_tag_name" @focus="pauseKeyDown" @blur="handleBlur()"
-                                autocomplete="on" list="autocomplete_tags" />
+                                autocomplete="on" list="autocomplete_tags" 
+                                :disabled="this.$store.state.kratos_user_id == 'guest'"/>
                         </div>
                         <datalist id="autocomplete_tags">
                             <option v-for="tag in tags_suggestions_list" :value="(tag as any).name">{{`uid: (${(tag as
@@ -49,7 +50,7 @@
                         <input class="button is-primary" type="button" value="Color Graph" @click="color_all_nodes" />
                         <input class="button is-primary" type="button" value="Plain Graph" @click="plain_graph" />
                         <input class="button is-primary" type="button" :value="add_tag_button" @click="batch_add_tag()"
-                            :disabled="disable_add" />
+                            :disabled="disable_add || this.$store.state.kratos_user_id == 'guest'" />
                         <input class="button is-primary" type="button" value="List ALL Tags in Project"
                             @click="list_all_tags(true)" />
                     </div>
@@ -60,7 +61,8 @@
                     Node Size:
                 </h1>
                 <div class="slider-demo-block">
-                    <el-slider style="width: 10rem" v-model="data_panel.size" @change="node_size_change"/>
+                    <el-slider style="width: 10rem" v-model="data_panel.size" @change="node_size_change"
+                    :disabled="this.$store.state.kratos_user_id == 'guest'"/>
                 </div>
             </div>
         </div>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 303f791..5032172 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -3,10 +3,14 @@
     <div class="navbar-brand">
       <a class="navbar-item" href="/"> TWIGSLOT </a>
 
-      <a class="navbar-item" :style="{ marginLeft: '10px' }" @click="toggleLayout">
+      <!-- <router-link :to="{ name: 'GraphLayout', id: }">
+        Graph
+      </router-link> -->
+      <!-- <a class="navbar-item" :style="{ marginLeft: '10px' }" @click="toggleLayout">
         <text v-if="this.$store.state.layout == 0"> Graph </text>
         <text v-if="this.$store.state.layout == 1"> List </text>
-      </a>
+
+      </a> -->
       <a class="navbar-item" :style="{ marginLeft: '10px' }" @click="toggleInfo"
          v-if="this.$store.state.mobileView && this.$store.state.layout == 0"
       >
diff --git a/src/components/ProjectList.vue b/src/components/ProjectList.vue
index d0c7002..f32b9b4 100644
--- a/src/components/ProjectList.vue
+++ b/src/components/ProjectList.vue
@@ -44,6 +44,7 @@
             type="primary"
             size="small"
             @click="edit_project(scope.$index, scope.row)"
+            v-if="scope.row.owner.kratos_user_id == this.$store.state.kratos_user_id"
             >Edit</el-button
           >
           <el-button
@@ -51,6 +52,7 @@
             type="danger"
             size="small"
             @click="delete_project(scope.$index, scope.row)"
+            v-if="scope.row.owner.kratos_user_id == this.$store.state.kratos_user_id"
             >Delete</el-button
           >
         </template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 3e94f25..56cd901 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Home from '../views/Home.vue'
-import Graph from '../views/Graph.vue'
+import GraphLayout from '../views/GraphLayout.vue'
+import ListLayout from '../views/ListLayout.vue'
 import Explore from '../views/Explore.vue'
 import Profile from '../views/Profile.vue'
 import EditProject from '../views/EditProject.vue'
@@ -14,12 +15,17 @@ const routes = [
     {
         path: '/project',
         name: "Graph",
-        component: Graph
+        component: GraphLayout
     },
     {
         path: '/project/:id',
-        name: "Graph",
-        component: Graph
+        name: "GraphLayout",
+        component: GraphLayout
+    },
+    {
+        path: '/project/:id/list',
+        name: "List",
+        component: ListLayout,
     },
     {
         path: '/project-edit',
diff --git a/src/views/Graph.vue b/src/views/GraphLayout.vue
similarity index 90%
rename from src/views/Graph.vue
rename to src/views/GraphLayout.vue
index f6969d5..e0def7a 100644
--- a/src/views/Graph.vue
+++ b/src/views/GraphLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="this.$store.state.layout == 0">
+  <div>
     <div id="graph" ref="div_ref">
       <v-network-graph ref="graph_ref" v-model:selected-nodes="graphData.selectedNodes"
                        v-model:selected-edges="graphData.selectedEdges" :nodes="graphData.nodes" :edges="graphData.edges"
@@ -15,29 +15,8 @@
                   :selected_nodes="graphData.selectedNodes"></DecoPanelVue>
     <GraphLogsVue ref="graph_logs_ref"></GraphLogsVue>
   </div>
-  <div v-if="this.$store.state.layout == 1" class="list-layout">
-    <ul>
-      <li v-for="rsc in graphData.nodes" class="list-item">
-        <div class="control">
-          <h1 class="title is-4">ID : {{ rsc.uid }}</h1>
-        </div>
-        <div class="control" :style="{marginTop: '10px', width: '90%' }">
-          <input class="input is-hovered info-panel-item" type="text" placeholder="Name" :value="rsc.name" />
-        </div>
-        <div class="control" :style="{marginTop: '10px', width: '90%' }">
-          <a target="_blank" :href="rsc.link">
-            <button class="button is-dark info-panel-item">Open</button>
-          </a>
-        </div>
-        <div class="control" :style="{marginTop: '10px', width: '90%' }">
-          <input class="input is-hovered info-panel-item" type="text" placeholder="URL" :value="rsc.link" />
-        </div>
-        <div class="control" :style="{marginTop: '10px', width: '90%' }">
-          <textarea class="textarea" rows="5" cols="50" placeholder="Description" :value="rsc.description"></textarea>
-        </div>
-      </li>
-    </ul>
-  </div>
+  <ListLayoutVue></ListLayoutVue>
+  
 </template>
 <script lang="ts">
 import axios from "axios";
diff --git a/src/views/ListLayout.vue b/src/views/ListLayout.vue
new file mode 100644
index 0000000..bc008bd
--- /dev/null
+++ b/src/views/ListLayout.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="list-layout">
+    <ul>
+      <li v-for="rsc in graphData.nodes" class="list-item">
+        <div class="control">
+          <h1 class="title is-4">ID : {{ rsc.uid }}</h1>
+        </div>
+        <div class="control" :style="{marginTop: '10px', width: '90%' }">
+          <input class="input is-hovered info-panel-item" type="text" placeholder="Name" :value="rsc.name" />
+        </div>
+        <div class="control" :style="{marginTop: '10px', width: '90%' }">
+          <a target="_blank" :href="rsc.link">
+            <button class="button is-dark info-panel-item">Open</button>
+          </a>
+        </div>
+        <div class="control" :style="{marginTop: '10px', width: '90%' }">
+          <input class="input is-hovered info-panel-item" type="text" placeholder="URL" :value="rsc.link" />
+        </div>
+        <div class="control" :style="{marginTop: '10px', width: '90%' }">
+          <textarea class="textarea" rows="5" cols="50" placeholder="Description" :value="rsc.description"></textarea>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts">
+import axios from "axios";
+import { defineComponent, ref } from "vue";
+import graphData from "../graphData";
+export default defineComponent({
+  name: "ListLayout",
+  data() {
+    return {
+      graphData,
+    };
+  },
+  methods: {},
+});
+</script>
\ No newline at end of file