From 5c10a2cc84ce9f8b0194e5693fcf7a2c1a9541b6 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 25 Jul 2024 11:51:04 -0500
Subject: [PATCH] Add "Create" new history button to histories grid

---
 client/src/components/Grid/GridHistory.vue    | 19 +++++++++++++++----
 client/src/components/Grid/GridPage.vue       |  3 ++-
 .../src/components/Grid/configs/histories.ts  | 11 ++++++++++-
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Grid/GridHistory.vue b/client/src/components/Grid/GridHistory.vue
index 76229f380ea8..8c2de2194a11 100644
--- a/client/src/components/Grid/GridHistory.vue
+++ b/client/src/components/Grid/GridHistory.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BNav, BNavItem } from "bootstrap-vue";
 
 import historiesGridConfig from "@/components/Grid/configs/histories";
 import historiesPublishedGridConfig from "@/components/Grid/configs/historiesPublished";
 import historiesSharedGridConfig from "@/components/Grid/configs/historiesShared";
+import { useHistoryStore } from "@/stores/historyStore";
 import { useUserStore } from "@/stores/userStore";
 
 import Heading from "@/components/Common/Heading.vue";
@@ -14,8 +16,9 @@ import GridList from "@/components/Grid/GridList.vue";
 import HistoryArchive from "@/components/History/Archiving/HistoryArchive.vue";
 
 const userStore = useUserStore();
+const historyStore = useHistoryStore();
 
-library.add(faPlus);
+library.add(faPlus, faUpload);
 
 interface Props {
     activeList?: "archived" | "my" | "shared" | "published";
@@ -33,13 +36,21 @@ const props = withDefaults(defineProps<Props>(), {
         <div class="d-flex">
             <Heading h1 separator inline size="xl" class="flex-grow-1 mb-2">Histories</Heading>
             <div v-if="!userStore.isAnonymous">
+                <BButton
+                    size="sm"
+                    variant="outline-primary"
+                    data-description="grid action create new history"
+                    @click="historyStore.createNewHistory()">
+                    <FontAwesomeIcon :icon="faPlus" />
+                    <span v-localize>Create</span>
+                </BButton>
                 <BButton
                     size="sm"
                     variant="outline-primary"
                     to="/histories/import"
                     data-description="grid action import new history">
-                    <Icon :icon="faPlus" />
-                    <span v-localize>Import History</span>
+                    <FontAwesomeIcon :icon="faUpload" />
+                    <span v-localize>Import</span>
                 </BButton>
             </div>
         </div>
diff --git a/client/src/components/Grid/GridPage.vue b/client/src/components/Grid/GridPage.vue
index 3508bba416ff..54b34acfd82f 100644
--- a/client/src/components/Grid/GridPage.vue
+++ b/client/src/components/Grid/GridPage.vue
@@ -22,6 +22,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
     activeList: "my",
+    username: undefined,
 });
 </script>
 
@@ -32,7 +33,7 @@ const props = withDefaults(defineProps<Props>(), {
             <div v-if="!userStore.isAnonymous">
                 <BButton id="page-create" size="sm" variant="outline-primary" to="/pages/create">
                     <Icon :icon="faPlus" />
-                    <span v-localize>Create Page</span>
+                    <span v-localize>Create</span>
                 </BButton>
             </div>
         </div>
diff --git a/client/src/components/Grid/configs/histories.ts b/client/src/components/Grid/configs/histories.ts
index 2c34d2b5a7e3..38d91185a78c 100644
--- a/client/src/components/Grid/configs/histories.ts
+++ b/client/src/components/Grid/configs/histories.ts
@@ -6,6 +6,7 @@ import {
     faSignature,
     faTrash,
     faTrashRestore,
+    faUpload,
     faUsers,
 } from "@fortawesome/free-solid-svg-icons";
 import { useEventBus } from "@vueuse/core";
@@ -52,8 +53,16 @@ async function getData(offset: number, limit: number, search: string, sort_by: s
  */
 const actions: ActionArray = [
     {
-        title: "Import New History",
+        title: "Create",
         icon: faPlus,
+        handler: () => {
+            const historyStore = useHistoryStore();
+            historyStore.createNewHistory();
+        },
+    },
+    {
+        title: "Import",
+        icon: faUpload,
         handler: () => {
             emit("/histories/import");
         },