add context menu and sketch creation to homepage (#3237)

* Initial Vue3/Vuetify3 scaffold * Cleanup * Scaffold update * add user avatar to app bar * migrate home page * remove yarn.lock * Remove Overview * Remove yarn lock from frontend-ng * Remove package.json --------- Co-authored-by: Johan Berggren <[email protected]>
google · Dec 9, 2024 · 383856d · 383856d
1 parent 12f441f
commit 383856d
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 7 deletions.
diff --git a/timesketch/frontend-v3/src/layouts/AppBar.vue b/timesketch/frontend-v3/src/layouts/AppBar.vue
@@ -33,6 +33,33 @@ limitations under the License.
       <v-avatar color="grey lighten-1" size="25" class="ml-3">
         <span class="white--text">{{ $filters.initialLetter(currentUser) }}</span>
       </v-avatar>
+      <v-menu offset-y>
+        <template v-slot:activator="{ props }">
+          <v-btn small icon v-bind="props">
+            <v-icon title="Timesketch Options">mdi-dots-vertical</v-icon>
+          </v-btn>
+        </template>
+          <v-list>
+            <v-list-item
+              prepend-icon="mdi-brightness-6"
+              v-on:click="toggleTheme"
+            >
+              <v-list-item-title>Toggle theme</v-list-item-title>
+            </v-list-item>
+            <v-list-item
+              href="/legacy/"
+              prepend-icon="mdi-view-dashboard-outline"
+            >
+              <v-list-item-title>Use the old UI</v-list-item-title>
+            </v-list-item>
+            <v-list-item
+              href="/logout/"
+              prepend-icon="mdi-logout"
+            >
+              <v-list-item-title>Logout</v-list-item-title>
+            </v-list-item>
+          </v-list>
+      </v-menu>
     </template>
   </v-toolbar>
   <v-divider></v-divider>
@@ -47,7 +74,12 @@ export default {
     };
   },
   computed: {},
-  methods: {},
+  methods: {
+    toggleTheme: function () {
+      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
+      localStorage.setItem('isDarkTheme', this.$vuetify.theme.dark.toString())
+    },
+  },
   created: function () {
     ApiClient.getLoggedInUser().then((response) => {
       let currentUser = response.data.objects[0].username;

diff --git a/timesketch/frontend-v3/src/layouts/View.vue b/timesketch/frontend-v3/src/layouts/View.vue
@@ -15,8 +15,6 @@ limitations under the License.
 -->
 <template>
   <v-main>
-    <v-container fluid class="px-5">
-      <router-view />
-    </v-container>
+    <router-view />
   </v-main>
 </template>
diff --git a/timesketch/frontend-v3/src/views/Home.vue b/timesketch/frontend-v3/src/views/Home.vue
@@ -14,14 +14,56 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <template>
-  <v-container fluid>
-    <ts-sketch-list />
+  <v-container fluid class="pa-0">
+    <v-sheet class="pa-5" :color="$vuetify.theme.dark ? 'grey-darken-4' : 'grey-lighten-3'" min-height="200">
+      <h2>Start new investigation</h2>
+      <v-row no-gutters class="mt-5">
+        <v-dialog v-model="createSketchDialog" width="500">
+          <template v-slot:activator="{ props }">
+            <v-btn variant="flat" size="small" class="mr-5" color="primary" v-bind="props"> Blank sketch </v-btn>
+          </template>
+          <v-card class="pa-4">
+            <h3>New sketch</h3>
+            <br />
+            <v-form @submit.prevent="createSketch()">
+              <v-text-field
+                v-model="sketchForm.name"
+                variant="outlined"
+                density="compact"
+                placeholder="Name your sketch"
+                autofocus
+                clearable
+                :rules="sketchNameRules"
+              >
+              </v-text-field>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn text @click="createSketchDialog = false"> Cancel </v-btn>
+                <v-btn
+                  :disabled="!sketchForm.name || sketchForm.name.length > 255"
+                  @click="createSketch()"
+                  color="primary"
+                  text
+                >
+                  Create
+                </v-btn>
+              </v-card-actions>
+            </v-form>
+          </v-card>
+        </v-dialog>
+      </v-row>
+    </v-sheet>
+    <div class="pa-5">
+      <h2>Your recent work</h2>
+      <ts-sketch-list></ts-sketch-list>
+    </div>
     {{ testAppStore }}
   </v-container>
 </template>
 
 <script>
 import TsSketchList from "@/components/SketchList.vue";
+import ApiClient from '../utils/RestApiClient.js'
 import { useAppStore } from "@/stores/app";
 
 export default {
@@ -30,14 +72,36 @@ export default {
   },
   data() {
     return {
+      sketchForm: {
+        name: '',
+      },
       appStore: useAppStore(),
+      createSketchDialog: false,
+      sketchNameRules: [
+        (v) => !!v || 'Sketch name is required.',
+        (v) => (v && v.length <= 255) || 'Sketch name is too long.',
+      ],
     };
   },
   computed: {
     testAppStore() {
       return this.appStore.testAppStore;
     },
   },
-  methods: {},
+  methods: {
+    clearFormData: function () {
+      this.sketchForm.name = ''
+    },
+    createSketch: function () {
+      ApiClient.createSketch(this.sketchForm)
+        .then((response) => {
+          let newSketchId = response.data.objects[0].id
+          this.clearFormData()
+          this.$router.push({ name: 'overview', params: { sketchId: newSketchId } })
+        })
+        .catch((e) => {})
+    },
+
+  },
 };
 </script>