From c06baab8ab2faffc605f3165c6deac83d6d9ab0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Fri, 20 May 2022 13:55:00 +0200
Subject: [PATCH] Web: extract notification list into its own component

The footer popover is going to contain the task logs as well, so the
notifications are now their own component to be able to show/hide them.
---
 web/app/src/components/footer/FooterPopup.vue | 58 +----------------
 .../components/footer/NotificationList.vue    | 62 +++++++++++++++++++
 2 files changed, 64 insertions(+), 56 deletions(-)
 create mode 100644 web/app/src/components/footer/NotificationList.vue

diff --git a/web/app/src/components/footer/FooterPopup.vue b/web/app/src/components/footer/FooterPopup.vue
index eff9ffb9..3cb3d19f 100644
--- a/web/app/src/components/footer/FooterPopup.vue
+++ b/web/app/src/components/footer/FooterPopup.vue
@@ -1,62 +1,8 @@
 <script setup>
-import { onMounted } from 'vue'
-import { TabulatorFull as Tabulator } from 'tabulator-tables';
-import { useNotifs } from '@/stores/notifications'
-import * as datetime from "@/datetime";
+import NotificationList from './NotificationList.vue'
 import ConnectionStatus from '@/components/ConnectionStatus.vue'
 
-const notifs = useNotifs();
 const emit = defineEmits(['clickClose'])
-
-const tabOptions = {
-  columns: [
-    {
-      title: 'Time', field: 'time',
-      sorter: 'alphanum', sorterParams: { alignEmptyValues: "top" },
-      formatter(cell) {
-        const cellValue = cell.getData().time;
-        return datetime.shortened(cellValue);
-      },
-      widthGrow: 1,
-      resizable: true,
-    },
-    {
-      title: 'Message',
-      field: 'msg',
-      sorter: 'string',
-      widthGrow: 100,
-      resizable: true,
-    },
-  ],
-  initialSort: [
-    { column: "time", dir: "asc" },
-  ],
-  headerVisible: false,
-  layout: "fitDataStretch",
-  resizableColumnFit: true,
-  height: "calc(20vh - 3rem)", // Must be set in order for the virtual DOM to function correctly.
-  data: notifs.history,
-  placeholder: "Notification history will appear here",
-  selectable: false,
-};
-
-let tabulator = null;
-onMounted(() => {
-  tabulator = new Tabulator('#notification_list', tabOptions);
-  tabulator.on("tableBuilt", _scrollToBottom);
-  tabulator.on("tableBuilt", _subscribeToPinia);
-});
-
-function _scrollToBottom() {
-  if (notifs.empty) return;
-  tabulator.scrollToRow(notifs.lastID, "bottom", false);
-}
-function _subscribeToPinia() {
-  notifs.$subscribe(() => {
-    tabulator.setData(notifs.history)
-      .then(_scrollToBottom)
-  })
-}
 </script>
 
 <template>
@@ -66,6 +12,6 @@ function _subscribeToPinia() {
       <connection-status />
       <button class='close' @click="emit('clickClose')">X</button>
     </header>
-    <div id="notification_list"></div>
+    <notification-list />
   </section>
 </template>
diff --git a/web/app/src/components/footer/NotificationList.vue b/web/app/src/components/footer/NotificationList.vue
new file mode 100644
index 00000000..63dabaf6
--- /dev/null
+++ b/web/app/src/components/footer/NotificationList.vue
@@ -0,0 +1,62 @@
+<script setup>
+import { onMounted } from 'vue'
+import { TabulatorFull as Tabulator } from 'tabulator-tables';
+import { useNotifs } from '@/stores/notifications'
+import * as datetime from "@/datetime";
+
+const notifs = useNotifs();
+
+const tabOptions = {
+  columns: [
+    {
+      title: 'Time', field: 'time',
+      sorter: 'alphanum', sorterParams: { alignEmptyValues: "top" },
+      formatter(cell) {
+        const cellValue = cell.getData().time;
+        return datetime.shortened(cellValue);
+      },
+      widthGrow: 1,
+      resizable: true,
+    },
+    {
+      title: 'Message',
+      field: 'msg',
+      sorter: 'string',
+      widthGrow: 100,
+      resizable: true,
+    },
+  ],
+  initialSort: [
+    { column: "time", dir: "asc" },
+  ],
+  headerVisible: false,
+  layout: "fitDataStretch",
+  resizableColumnFit: true,
+  height: "calc(20vh - 3rem)", // Must be set in order for the virtual DOM to function correctly.
+  data: notifs.history,
+  placeholder: "Notification history will appear here",
+  selectable: false,
+};
+
+let tabulator = null;
+onMounted(() => {
+  tabulator = new Tabulator('#notification_list', tabOptions);
+  tabulator.on("tableBuilt", _scrollToBottom);
+  tabulator.on("tableBuilt", _subscribeToPinia);
+});
+
+function _scrollToBottom() {
+  if (notifs.empty) return;
+  tabulator.scrollToRow(notifs.lastID, "bottom", false);
+}
+function _subscribeToPinia() {
+  notifs.$subscribe(() => {
+    tabulator.setData(notifs.history)
+      .then(_scrollToBottom)
+  })
+}
+</script>
+
+<template>
+    <div id="notification_list"></div>
+</template>