V3 sketch list (#3240)

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

Hide file tree

Showing 6 changed files with 132 additions and 15 deletions.
diff --git a/timesketch/frontend-v3/src/components/SketchList.vue b/timesketch/frontend-v3/src/components/SketchList.vue
@@ -14,7 +14,56 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <template>
-  <v-data-table :loading="loading" :items="sketches"></v-data-table>
+  <div>
+    <v-row no-gutters class="mt-5">
+      <v-col cols="9">
+        <v-btn-toggle dense group v-model="toggleStateButton">
+          <v-btn style="border-radius: 6px" @click="switchScope('recent')"> Recent </v-btn>
+          <v-btn style="border-radius: 6px" @click="switchScope('user')"> My sketches </v-btn>
+          <v-btn style="border-radius: 6px" @click="switchScope('shared')"> Shared with me </v-btn>
+          <v-btn style="border-radius: 6px" @click="switchScope('archived')"> Archived </v-btn>
+        </v-btn-toggle>
+      </v-col>
+      <v-col cols="3">
+        <v-text-field
+          variant="outlined"
+          density="compact"
+          hide-details
+          single-line
+          label="Search"
+          prepend-inner-icon="mdi-magnify"
+          @change="search"
+        ></v-text-field>
+      </v-col>
+    </v-row>
+
+    <br />
+    <v-data-table
+      :headers="headers"
+      :items="sketches"
+      :items-per-page="15"
+      :server-items-length="numSketches"
+      :footer-props="{
+        'items-per-page-options': [15, 30, 40, 50, 100],
+      }"
+       @update:options="options = $event"
+      disable-filtering
+      disable-sort
+      :loading="loading"
+    >
+      <template v-slot:item.name="{ item }">
+        <router-link style="text-decoration: none" :to="{ name: 'home' }">{{
+          item.name
+        }}</router-link>
+      </template>
+      <template v-slot:item.created_at="{ item }">
+        {{ $filters.shortDateTime(item.created_at)}} <small>({{ $filters.timeSince(item.created_at) }})</small>
+      </template>
+      <template v-slot:item.last_activity="{ item }">
+        {{ $filters.timeSince(item.last_activity) }}
+      </template>
+    </v-data-table>
+  </div>
 </template>
 
 <script>
@@ -23,22 +72,56 @@ import ApiClient from "@/utils/RestApiClient";
 export default {
   data() {
     return {
+      headers: [
+        {
+          title: 'Name',
+          align: 'start',
+          value: 'name',
+        },
+        { title: 'Creator', value: 'user' },
+        { title: 'Created at', value: 'created_at' },
+        { title: 'Last active', value: 'last_activity' },
+      ],
       sketches: [],
+      numSketches: 0,
+      options: {},
       loading: false,
-    };
+      toggleStateButton: 0,
+      scope: 'recent',
+      searchQuery: null,
+    }
+  },
+  watch: {
+    options: {
+      handler() {
+        this.getSketches()
+      },
+      deep: true,
+    },
   },
   methods: {
+    search: function (event) {
+      this.scope = 'search'
+      this.searchQuery = event.target.value
+      this.getSketches()
+    },
+    switchScope: function (newScope) {
+      this.scope = newScope
+      this.getSketches()
+    },
     getSketches: function () {
-      this.loading = true;
-      ApiClient.getSketchList("user", 1, 10)
+      this.loading = true
+      ApiClient.getSketchList(this.scope, this.options.page, this.options.itemsPerPage, this.searchQuery)
         .then((response) => {
-          this.sketches = response.data.objects;
-          this.loading = false;
+          console.log('setsketches', this.sketches)
+          this.sketches = response.data.objects
+          this.numSketches = response.data.meta.total_items
+          this.loading = false
         })
         .catch((e) => {
-          this.loading = false;
-          console.error(e);
-        });
+          this.loading = false
+          console.error(e)
+        })
     },
   },
   mounted() {

diff --git a/timesketch/frontend-v3/src/filters.js b/timesketch/frontend-v3/src/filters.js
@@ -13,10 +13,23 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+import dayjs from '@/plugins/dayjs'
 
 export const initialLetter = (input) => {
   if (!input) return '';
   input = input.toString();
   return input.charAt(0).toUpperCase();
 };
 
+
+export const shortDateTime = (date) => {
+    return dayjs.utc(date).format('YYYY-MM-DD HH:mm')
+};
+
+export const timeSince = (date) => {
+  if (!date) {
+    return ''
+  }
+  return dayjs.utc(date).fromNow()
+}
+
diff --git a/timesketch/frontend-v3/src/layouts/AppBar.vue b/timesketch/frontend-v3/src/layouts/AppBar.vue
@@ -67,7 +67,13 @@ limitations under the License.
 
 <script>
 import ApiClient from '../utils/RestApiClient.js'
+import { useTheme } from 'vuetify'
+
 export default {
+  setup() {
+    const theme = useTheme();
+    return { theme };
+  },
   data() {
     return {
       currentUser: '',
@@ -76,8 +82,7 @@ export default {
   computed: {},
   methods: {
     toggleTheme: function () {
-      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
-      localStorage.setItem('isDarkTheme', this.$vuetify.theme.dark.toString())
+      this.theme.global.name.value = this.theme.global.current.value.dark ? 'light' : 'dark';
     },
   },
   created: function () {

diff --git a/timesketch/frontend-v3/src/main.js b/timesketch/frontend-v3/src/main.js
@@ -9,8 +9,7 @@ import { registerPlugins } from "@/plugins";
 
 // Components
 import App from "./App.vue";
-
-import {initialLetter} from "./filters.js";
+import {initialLetter, shortDateTime, timeSince} from "./filters.js";
 
 // Composables
 import { createApp } from "vue";
@@ -22,5 +21,7 @@ registerPlugins(app);
 app.mount("#app");
 
 app.config.globalProperties.$filters = {
-  initialLetter
+  initialLetter,
+  shortDateTime,
+  timeSince,
 }
diff --git a/timesketch/frontend-v3/src/plugins/dayjs.js b/timesketch/frontend-v3/src/plugins/dayjs.js
@@ -0,0 +1,10 @@
+import dayjs from 'dayjs'
+
+// Add plugins
+import utc from 'dayjs/plugin/utc'
+import relativeTime from 'dayjs/plugin/relativeTime'
+
+dayjs.extend(utc)
+dayjs.extend(relativeTime)
+
+export default dayjs
diff --git a/timesketch/frontend-v3/src/views/Home.vue b/timesketch/frontend-v3/src/views/Home.vue
@@ -15,7 +15,7 @@ limitations under the License.
 -->
 <template>
   <v-container fluid class="pa-0">
-    <v-sheet class="pa-5" :color="$vuetify.theme.dark ? 'grey-darken-4' : 'grey-lighten-3'" min-height="200">
+    <v-sheet class="pa-5" :color="theme.global.current.value.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">
@@ -65,11 +65,16 @@ limitations under the License.
 import TsSketchList from "@/components/SketchList.vue";
 import ApiClient from '../utils/RestApiClient.js'
 import { useAppStore } from "@/stores/app";
+import { useTheme } from 'vuetify'
 
 export default {
   components: {
     TsSketchList,
   },
+  setup() {
+    const theme = useTheme();
+    return { theme };
+  },
   data() {
     return {
       sketchForm: {