From 509b55901875825b48db6e2a89acee962d781876 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Fri, 17 May 2024 14:25:33 -0700
Subject: [PATCH 01/32] add task config form

---
 src/components/tasks/RegisterTask.vue | 79 +++++++++++++++++++--------
 1 file changed, 56 insertions(+), 23 deletions(-)

diff --git a/src/components/tasks/RegisterTask.vue b/src/components/tasks/RegisterTask.vue
index 4330db13e..09764c2a4 100644
--- a/src/components/tasks/RegisterTask.vue
+++ b/src/components/tasks/RegisterTask.vue
@@ -47,6 +47,20 @@
                 {{ t$.taskId.required.$message.replace('Value', 'Task ID') }}
               </small>
             </section>
+            <!-- Cover Image -->
+            <section class="form-section">
+              <div>
+                <label for="coverImage">Cover Image (URL)</label>
+                <PvInputText v-model="taskFields.coverImage" name="coverImage" />
+              </div>
+            </section>
+            <!--Description-->
+            <section class="form-section">
+              <div class="p-input-icon-right">
+                <label for="description">Description </label>
+                <PvInputText v-model="taskFields.description" name="description" />
+              </div>
+            </section>
             <!--Task URL-->
             <section class="form-section">
               <div v-if="isExternalTask">
@@ -67,37 +81,47 @@
                 </small>
               </div>
             </section>
-            <!-- Cover Image -->
-            <section class="form-section">
-              <div>
-                <label for="coverImage">Cover Image (URL)</label>
-                <PvInputText v-model="taskFields.coverImage" name="coverImage" />
-              </div>
-            </section>
-            <!--Description-->
-            <section class="form-section">
-              <div class="p-input-icon-right">
-                <label for="description">Description </label>
-                <PvInputText v-model="taskFields.description" name="description" />
-              </div>
-            </section>
           </div>
 
-          <h3 class="text-center">Parameters / Configuration</h3>
+          <div v-if="!isExternalTask">
+            <h3 class="text-center">Configure Task Parameters</h3>
+            <h4 class="text-center">Create the configurable parameters for variants of this task.</h4>
+            <div v-for="(param, index) in taskParams" :key="index">
+              <div class="flex gap-2 align-content-start flex-grow-0 params-container">
+                <PvInputText v-model="param.name" placeholder="Name" />
 
-          <div v-for="(param, index) in taskParams" :key="index">
-            <div class="flex gap-2 align-content-start flex-grow-0 params-container">
-              <PvInputText v-model="param.name" placeholder="Name" />
+                <PvDropdown v-model="param.type" :options="typeOptions" />
 
-              <PvDropdown v-model="param.type" :options="typeOptions" />
+                <PvInputText v-if="param.type === 'String'" v-model="param.value" placeholder="Value" />
 
-              <PvInputText v-if="param.type === 'String'" v-model="param.value" placeholder="Value" />
+                <PvDropdown v-else-if="param.type === 'Boolean'" v-model="param.value" :options="[true, false]" />
 
-              <PvDropdown v-else-if="param.type === 'Boolean'" v-model="param.value" :options="[true, false]" />
+                <PvInputNumber v-else-if="param.type === 'Number'" v-model="param.value" show-buttons />
 
-              <PvInputNumber v-else-if="param.type === 'Number'" v-model="param.value" show-buttons />
+                <PvButton icon="pi pi-trash" class="delete-btn" text @click="removeField(taskParams, index)" />
+              </div>
+            </div>
+          </div>
+
+          <div v-else>
+            <h3 class="text-center">Configure URL Parameters</h3>
+            <h4 class="text-center">
+              These parameters will be appended to the task URL to generate the variant URL for this task.
+            </h4>
+            <div v-for="(param, index) in taskParams" :key="index">
+              <div class="flex gap-2 align-content-start flex-grow-0 params-container">
+                <PvInputText v-model="param.name" placeholder="Name" />
+
+                <PvDropdown v-model="param.type" :options="typeOptions" />
+
+                <PvInputText v-if="param.type === 'String'" v-model="param.value" placeholder="Value" />
 
-              <PvButton icon="pi pi-trash" text class="delete-btn" @click="removeField(taskParams, index)" />
+                <PvDropdown v-else-if="param.type === 'Boolean'" v-model="param.value" :options="[true, false]" />
+
+                <PvInputNumber v-else-if="param.type === 'Number'" v-model="param.value" show-buttons />
+
+                <PvButton icon="pi pi-trash" text class="delete-btn" @click="removeField(taskParams, index)" />
+              </div>
             </div>
           </div>
 
@@ -305,6 +329,7 @@ const taskFields = reactive({
   taskId: '',
   coverImage: '',
   description: '',
+  configuration: {},
   // Based on type of account?
   external: true,
 });
@@ -313,8 +338,15 @@ const taskRules = {
   taskName: { required },
   taskURL: { required: requiredIf(isExternalTask.value), url },
   taskId: { required },
+  configuration: { required },
 };
 
+const taskConfig = ref({
+  name: '',
+  value: '',
+  type: 'String',
+});
+
 const taskParams = ref([
   {
     name: '',
@@ -380,6 +412,7 @@ const handleNewTaskSubmit = async (isFormValid) => {
     taskName: taskFields.taskName,
     taskDescription: taskFields.description,
     taskImage: taskFields.coverImage,
+    taskConfig: taskFields.configuration,
     variantParams: convertedParams,
     demoData: { task: isDemoData, variant: isDemoData },
     testData: { task: isTestData, variant: isTestData },

From b4d07729597c38ace22d16dc6a1ad844e3984dda Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Mon, 20 May 2024 10:28:40 -0700
Subject: [PATCH 02/32] format

---
 src/components/tasks/RegisterTask.vue | 40 +++++++++++++++++++--------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/components/tasks/RegisterTask.vue b/src/components/tasks/RegisterTask.vue
index 09764c2a4..fa7ab9972 100644
--- a/src/components/tasks/RegisterTask.vue
+++ b/src/components/tasks/RegisterTask.vue
@@ -84,9 +84,9 @@
           </div>
 
           <div v-if="!isExternalTask">
-            <h3 class="text-center">Configure Task Parameters</h3>
-            <h4 class="text-center">Create the configurable parameters for variants of this task.</h4>
-            <div v-for="(param, index) in taskParams" :key="index">
+            <h3 class="text-center">Configure Game Parameters</h3>
+            <h4 class="text-center">Create the configurable game parameters for variants of this task.</h4>
+            <div v-for="(param, index) in gameConfig" :key="index">
               <div class="flex gap-2 align-content-start flex-grow-0 params-container">
                 <PvInputText v-model="param.name" placeholder="Name" />
 
@@ -143,6 +143,10 @@
               <PvCheckbox v-model="taskCheckboxData" input-id="chbx-externalTask" value="isExternalTask" />
               <label class="ml-1 mr-3" for="chbx-externalTask">Mark as <b>External Task</b> </label>
             </div>
+            <div class="flex flex-row align-items-center">
+              <PvCheckbox v-model="taskCheckboxData" input-id="chbx-registeredTask" value="isRegisteredTask" />
+              <label class="ml-1 mr-3" for="chbx-externalTask">Mark as <b>Registered Task</b> </label>
+            </div>
           </div>
           <div class="form-submit">
             <PvButton type="submit" label="Submit" class="submit-button" severity="primary" />
@@ -271,6 +275,15 @@
                 value="isExternalVariant"
               />
               <label class="ml-1 mr-3" for="chbx-externalVariant">Mark as <b>External Variant</b></label>
+              <div class="flex flex-row align-items-center">
+                <PvCheckbox
+                  v-model="variantCheckboxData"
+                  input-id="chbx-registeredVariant"
+                  name="variantCheckboxData"
+                  value="isRegisteredVariant"
+                />
+                <label class="ml-1 mr-3" for="chbx-externalVariant">Mark as <b>Registered Variant</b></label>
+              </div>
             </div>
           </div>
           <div class="form-submit">
@@ -329,7 +342,7 @@ const taskFields = reactive({
   taskId: '',
   coverImage: '',
   description: '',
-  configuration: {},
+  gameConfig: {},
   // Based on type of account?
   external: true,
 });
@@ -341,7 +354,7 @@ const taskRules = {
   configuration: { required },
 };
 
-const taskConfig = ref({
+const gameConfig = ref({
   name: '',
   value: '',
   type: 'String',
@@ -400,22 +413,25 @@ const handleNewTaskSubmit = async (isFormValid) => {
   submitted.value = true;
   const isDemoData = !!taskCheckboxData.value?.find((item) => item === 'isDemoTask');
   const isTestData = !!taskCheckboxData.value?.find((item) => item === 'isTestTask');
+  const isRegisteredTask = !!taskCheckboxData.value?.find((item) => item === 'isRegisteredTask');
 
   if (!isFormValid) {
     return;
   }
 
-  const convertedParams = convertParamsToObj(taskParams);
+  const convertedTaskParams = convertParamsToObj(taskParams);
+  const convertedGameConfig = convertParamsToObj(gameConfig);
 
   let newTaskObject = reactive({
     taskId: taskFields.taskId,
     taskName: taskFields.taskName,
     taskDescription: taskFields.description,
     taskImage: taskFields.coverImage,
-    taskConfig: taskFields.configuration,
-    variantParams: convertedParams,
+    gameConfig: convertedGameConfig,
+    variantParams: convertedTaskParams,
     demoData: { task: isDemoData, variant: isDemoData },
     testData: { task: isTestData, variant: isTestData },
+    isRegisteredTask: isRegisteredTask,
   });
 
   if (isExternalTask.value) {
@@ -436,27 +452,29 @@ const handleVariantSubmit = async (isFormValid) => {
   const isDemoData = !!variantCheckboxData.value?.find((item) => item === 'isDemoVariant');
   const isTestData = !!variantCheckboxData.value?.find((item) => item === 'isTestVariant');
   const isExternalVariant = !!variantCheckboxData.value?.find((item) => item === 'isExternalVariant');
+  const isRegisteredVariant = !!variantCheckboxData.value?.find((item) => item === 'isRegisteredVariant');
 
   if (!isFormValid) {
     return;
   }
 
-  const convertedParams = convertParamsToObj(variantParams);
+  const convertedVariantParams = convertParamsToObj(variantParams);
 
   const newVariantObject = reactive({
     taskId: variantFields.selectedGame.id,
     taskDescription: variantFields.selectedGame.description,
     taskImage: variantFields.selectedGame.image,
     variantName: variantFields.variantName,
-    variantParams: convertedParams,
+    variantParams: convertedVariantParams,
     // TODO: Check if this is the valid way to see demo/test data values
     demoData: { task: !!variantFields.selectedGame?.demoData, variant: isDemoData },
     testData: { task: !!variantFields.selectedGame?.testData, variant: isTestData },
+    isRegisteredVariant: isRegisteredVariant,
   });
 
   if (isExternalVariant) {
     newVariantObject.variantParams = {
-      ...convertedParams,
+      ...convertedVariantParams,
       variantURL: buildTaskURL(variantFields.selectedGame?.taskURL || '', variantParams),
     };
   }

From 7cb4472d68a6d9454f50ac8dcead0d6ffb9dbbc3 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Mon, 20 May 2024 11:45:52 -0700
Subject: [PATCH 03/32] refactor test, demo, registered flags for tasks and
 variants

---
 src/components/tasks/RegisterTask.vue | 36 ++++++++++++++++-----------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/components/tasks/RegisterTask.vue b/src/components/tasks/RegisterTask.vue
index fa7ab9972..4b9db4715 100644
--- a/src/components/tasks/RegisterTask.vue
+++ b/src/components/tasks/RegisterTask.vue
@@ -98,7 +98,7 @@
 
                 <PvInputNumber v-else-if="param.type === 'Number'" v-model="param.value" show-buttons />
 
-                <PvButton icon="pi pi-trash" class="delete-btn" text @click="removeField(taskParams, index)" />
+                <PvButton icon="pi pi-trash" class="delete-btn" text @click="removeField(gameConfig, index)" />
               </div>
             </div>
           </div>
@@ -126,7 +126,10 @@
           </div>
 
           <div class="w-full flex justify-content-end">
-            <div class="w-2">
+            <div v-if="!isExternalTask" class="w-2">
+              <PvButton label="Add Field" text icon="pi pi-plus" @click="addField(gameConfig)" />
+            </div>
+            <div v-else class="w-2">
               <PvButton label="Add Field" text icon="pi pi-plus" @click="addField(taskParams)" />
             </div>
           </div>
@@ -312,6 +315,7 @@ const taskCheckboxData = ref();
 const variantCheckboxData = ref();
 const authStore = useAuthStore();
 const { roarfirekit } = storeToRefs(authStore);
+
 const isExternalTask = computed(() => !!taskCheckboxData.value?.find((item) => item === 'isExternalTask'));
 
 let unsubscribe;
@@ -344,21 +348,22 @@ const taskFields = reactive({
   description: '',
   gameConfig: {},
   // Based on type of account?
-  external: true,
+  external: isExternalTask,
 });
 
 const taskRules = {
   taskName: { required },
   taskURL: { required: requiredIf(isExternalTask.value), url },
   taskId: { required },
-  configuration: { required },
 };
 
-const gameConfig = ref({
-  name: '',
-  value: '',
-  type: 'String',
-});
+const gameConfig = ref([
+  {
+    name: '',
+    value: '',
+    type: 'String',
+  },
+]);
 
 const taskParams = ref([
   {
@@ -413,14 +418,15 @@ const handleNewTaskSubmit = async (isFormValid) => {
   submitted.value = true;
   const isDemoData = !!taskCheckboxData.value?.find((item) => item === 'isDemoTask');
   const isTestData = !!taskCheckboxData.value?.find((item) => item === 'isTestTask');
+  const isExternalTask = !!taskCheckboxData.value?.find((item) => item === 'isExternalTask');
   const isRegisteredTask = !!taskCheckboxData.value?.find((item) => item === 'isRegisteredTask');
 
   if (!isFormValid) {
     return;
   }
 
-  const convertedTaskParams = convertParamsToObj(taskParams);
   const convertedGameConfig = convertParamsToObj(gameConfig);
+  const convertedTaskParams = isExternalTask ? convertParamsToObj(taskParams) : null;
 
   let newTaskObject = reactive({
     taskId: taskFields.taskId,
@@ -428,10 +434,10 @@ const handleNewTaskSubmit = async (isFormValid) => {
     taskDescription: taskFields.description,
     taskImage: taskFields.coverImage,
     gameConfig: convertedGameConfig,
-    variantParams: convertedTaskParams,
-    demoData: { task: isDemoData, variant: isDemoData },
-    testData: { task: isTestData, variant: isTestData },
-    isRegisteredTask: isRegisteredTask,
+    taskParams: convertedTaskParams,
+    demoData: isDemoData,
+    testData: isTestData,
+    registered: isRegisteredTask,
   });
 
   if (isExternalTask.value) {
@@ -469,7 +475,7 @@ const handleVariantSubmit = async (isFormValid) => {
     // TODO: Check if this is the valid way to see demo/test data values
     demoData: { task: !!variantFields.selectedGame?.demoData, variant: isDemoData },
     testData: { task: !!variantFields.selectedGame?.testData, variant: isTestData },
-    isRegisteredVariant: isRegisteredVariant,
+    registered: isRegisteredVariant,
   });
 
   if (isExternalVariant) {

From 81322048d6e9f4056dba0d35a7de2806de239c9a Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Tue, 21 May 2024 13:42:01 -0700
Subject: [PATCH 04/32] build out initial components for managing tasks and
 variants through the dashboard

---
 .../{RegisterTask.vue => ManageTasks.vue}     | 217 +++++++++++++-----
 src/helpers/query/tasks.js                    |   2 +-
 .../{RegisterGame.vue => ManageTasks.vue}     |   6 +-
 src/router/index.js                           |   8 +-
 src/router/sidebarActions.js                  |   4 +-
 5 files changed, 170 insertions(+), 67 deletions(-)
 rename src/components/tasks/{RegisterTask.vue => ManageTasks.vue} (73%)
 rename src/pages/{RegisterGame.vue => ManageTasks.vue} (85%)

diff --git a/src/components/tasks/RegisterTask.vue b/src/components/tasks/ManageTasks.vue
similarity index 73%
rename from src/components/tasks/RegisterTask.vue
rename to src/components/tasks/ManageTasks.vue
index 4b9db4715..9a0f1c1e5 100644
--- a/src/components/tasks/RegisterTask.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -1,9 +1,9 @@
 <template>
   <PvToast />
   <PvTabView>
-    <PvTabPanel header="Register Task">
+    <PvTabPanel header="Create Task">
       <div v-if="!created" class="card px-3">
-        <h1 class="text-center font-bold">Register a New Task</h1>
+        <h1 class="text-center font-bold">Create a New Task</h1>
         <!-- <p class="login-title" align="left">Register for ROAR</p> -->
         <form class="p-fluid" @submit.prevent="handleNewTaskSubmit(!t$.$invalid)">
           <!-- Task name -->
@@ -92,11 +92,11 @@
 
                 <PvDropdown v-model="param.type" :options="typeOptions" />
 
-                <PvInputText v-if="param.type === 'String'" v-model="param.value" placeholder="Value" />
+                <PvInputText v-if="param.type === 'string'" v-model="param.value" placeholder="Value" />
 
-                <PvDropdown v-else-if="param.type === 'Boolean'" v-model="param.value" :options="[true, false]" />
+                <PvDropdown v-else-if="param.type === 'boolean'" v-model="param.value" :options="[true, false]" />
 
-                <PvInputNumber v-else-if="param.type === 'Number'" v-model="param.value" show-buttons />
+                <PvInputNumber v-else-if="param.type === 'number'" v-model="param.value" show-buttons />
 
                 <PvButton icon="pi pi-trash" class="delete-btn" text @click="removeField(gameConfig, index)" />
               </div>
@@ -114,11 +114,11 @@
 
                 <PvDropdown v-model="param.type" :options="typeOptions" />
 
-                <PvInputText v-if="param.type === 'String'" v-model="param.value" placeholder="Value" />
+                <PvInputText v-if="param.type === 'string'" v-model="param.value" placeholder="Value" />
 
-                <PvDropdown v-else-if="param.type === 'Boolean'" v-model="param.value" :options="[true, false]" />
+                <PvDropdown v-else-if="param.type === 'boolean'" v-model="param.value" :options="[true, false]" />
 
-                <PvInputNumber v-else-if="param.type === 'Number'" v-model="param.value" show-buttons />
+                <PvInputNumber v-else-if="param.type === 'number'" v-model="param.value" show-buttons />
 
                 <PvButton icon="pi pi-trash" text class="delete-btn" @click="removeField(taskParams, index)" />
               </div>
@@ -166,10 +166,12 @@
       </div>
     </PvTabPanel>
 
-    <PvTabPanel header="Register Variant">
+    <PvTabPanel header="Edit Task"> Coming soon </PvTabPanel>
+
+    <PvTabPanel header="Create Variant">
       <div class="card px-3">
         <form class="p-fluid" @submit.prevent="handleVariantSubmit(!v$.$invalid)">
-          <h1 class="text-center font-bold">Register a New Variant</h1>
+          <h1 class="text-center font-bold">Create a New Variant</h1>
 
           <div class="flex flex-column row-gap-3">
             <section class="form-section">
@@ -228,27 +230,70 @@
             </section>
           </div>
 
-          <h3 class="text-center">Parameters / Configuration</h3>
-
-          <div v-for="(param, index) in variantParams" :key="index">
-            <div class="flex gap-2 align-content-start flex-grow-0 params-container">
-              <PvInputText v-model="param.name" placeholder="Name" />
-
-              <PvDropdown v-model="param.type" :options="typeOptions" />
-
-              <PvInputText v-if="param.type === 'String'" v-model="param.value" placeholder="Value" />
-
-              <PvDropdown v-else-if="param.type === 'Boolean'" v-model="param.value" :options="[true, false]" />
+          <div class="flex flex-column align-items-center">
+            <h3 class="text-center">Configure Game Parameters</h3>
+            <h4 class="text-center">
+              Set the game parameters for a new variant of task <strong>{{ variantFields.selectedGame.id }}</strong>
+            </h4>
+            <div class="flex flex-column gap-4 mb-2">
+              <!--
+            Each param looks like this:
+            {"name": "someParam", "type": "string, boolean, or number", "value": "valueOfParam"}
+
+            We want to assign the value of param.name to the value of the equivalent key in variantParams
+
+            So if param.name is "someParam", then
+            variantParams[param.name] returns the value of variantParams.someParam,which is the value that we want to change for a new variant
+-->
+              <div
+                v-for="(param, index) in filteredMappedGameConfig"
+                :key="index"
+                class="flex align-items-center justify-content-center dynamic-param-container gap-4"
+              >
+                <div class="flex align-items-center">
+                  <label for="inputParamName">Parameter:</label>
+                  <div class="inputTextDisabledWrapper">
+                    <PvInputText id="inputParamName" v-model="variantParams[param.name]" :value="param.name" disabled />
+                  </div>
+                </div>
 
-              <PvInputNumber v-else-if="param.type === 'Number'" v-model="param.value" show-buttons />
+                <div class="flex align-items-center">
+                  <label for="inputParamType">Type:</label>
+                  <PvInputText id="inputParamType" v-model="param.type" :value="param.type" disabled />
+                </div>
 
-              <PvButton icon="pi pi-trash" class="delete-btn" text @click="removeField(variantParams, index)" />
-            </div>
-          </div>
+                <div class="flex align-items-center gap-2 flex-grow-1">
+                  <label for="inputParamValue">Value:</label>
+                  <PvInputText
+                    v-if="param.type === 'string'"
+                    id="inputParamValue"
+                    v-model="variantParams[param.name]"
+                    placeholder="Set game parameter to desired value"
+                  />
+                  <PvDropdown
+                    v-else-if="param.type === 'boolean'"
+                    id="inputParamValue"
+                    v-model="variantParams[param.name]"
+                    :options="booleanDropDownOptions"
+                    option-label="label"
+                    option-value="value"
+                    placeholder="Set game parameter to desired value"
+                  />
+                  <PvInputNumber
+                    v-else-if="param.type === 'number'"
+                    id="inputParamValue"
+                    v-model="variantParams[param.name]"
+                    placeholder="Set game parameter to desired value"
+                    button-layout="vertical"
+                    show-buttons
+                    style="width: 3em"
+                  />
+                </div>
 
-          <div class="w-full flex justify-content-end">
-            <div class="w-2">
-              <PvButton icon="pi pi-plus" label="Add Field" text @click="addField(variantParams)" />
+                <div>
+                  <button type="button" @click="deleteParam(param.name)">Delete</button>
+                </div>
+              </div>
             </div>
           </div>
           <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
@@ -271,13 +316,14 @@
               <label class="ml-1 mr-3" for="chbx-testVariant">Mark as <b>Test Variant</b></label>
             </div>
             <div class="flex flex-row align-items-center">
-              <PvCheckbox
-                v-model="variantCheckboxData"
-                input-id="chbx-externalVariant"
-                name="variantCheckboxData"
-                value="isExternalVariant"
-              />
-              <label class="ml-1 mr-3" for="chbx-externalVariant">Mark as <b>External Variant</b></label>
+              <!--              Not sure that we still have any need to mark a variant as external -->
+              <!--              <PvCheckbox-->
+              <!--                v-model="variantCheckboxData"-->
+              <!--                input-id="chbx-externalVariant"-->
+              <!--                name="variantCheckboxData"-->
+              <!--                value="isExternalVariant"-->
+              <!--              />-->
+              <!--              <label class="ml-1 mr-3" for="chbx-externalVariant">Mark as <b>External Variant</b></label>-->
               <div class="flex flex-row align-items-center">
                 <PvCheckbox
                   v-model="variantCheckboxData"
@@ -295,11 +341,13 @@
         </form>
       </div>
     </PvTabPanel>
+
+    <PvTabPanel header="Edit Variant"> Coming Soon </PvTabPanel>
   </PvTabView>
 </template>
 
 <script setup>
-import { reactive, ref, onMounted, computed } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
 import { required, requiredIf, url } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useAuthStore } from '@/store/auth';
@@ -387,13 +435,54 @@ const variantRules = {
   },
 };
 
-const variantParams = ref([
-  {
-    name: '',
-    value: '',
-    type: 'String',
-  },
-]);
+// Turn mappedGameConfig into an object {key: value, key: value...} which models gameConfig, filtered for deleted params
+// This builds the object of parameters that will be sent to the DB
+const variantParams = computed(() => {
+  const params = reactive({});
+
+  if (!mappedGameConfig.value) {
+    return params;
+  }
+
+  filteredMappedGameConfig.value.forEach((param) => {
+    params[param.name] = param.value;
+  });
+
+  return params;
+});
+
+// Turn the gameConfig object into an array of key/value pairs [{name: 'key', value: 'value', type: 'type'}...]
+// This allows simplified editing of the gameConfig object
+const mappedGameConfig = computed(() => {
+  // Prevent any errors if selectedGame is not set
+  if (!variantFields.selectedGame?.gameConfig) {
+    return [];
+  }
+
+  return Object.entries(variantFields.selectedGame.gameConfig).map(([key, value]) => ({
+    name: key,
+    type: typeof value,
+    value: value,
+  }));
+});
+
+// Filter out any deleted params
+const filteredMappedGameConfig = computed(() => {
+  if (!mappedGameConfig.value) {
+    return [];
+  }
+
+  return mappedGameConfig.value.filter((param) => !deletedParams.value.includes(param.name));
+});
+
+// Keep track of params that are not needed for the particular variant
+const deletedParams = ref([]);
+
+// Push the name of the param to the deletedParams array,
+// Triggering a computation of the filteredMappedGameConfig and variantParams
+const deleteParam = (param) => {
+  deletedParams.value.push(param);
+};
 
 function addField(type) {
   type.push({
@@ -407,7 +496,12 @@ function removeField(type, index) {
   type.splice(index, 1);
 }
 
-const typeOptions = ['String', 'Number', 'Boolean'];
+const typeOptions = ['string', 'number', 'boolean'];
+
+const booleanDropDownOptions = [
+  { label: 'true', value: true },
+  { label: 'false', value: false },
+];
 
 const t$ = useVuelidate(taskRules, taskFields);
 const v$ = useVuelidate(variantRules, variantFields);
@@ -457,33 +551,34 @@ const handleVariantSubmit = async (isFormValid) => {
   submitted.value = true;
   const isDemoData = !!variantCheckboxData.value?.find((item) => item === 'isDemoVariant');
   const isTestData = !!variantCheckboxData.value?.find((item) => item === 'isTestVariant');
-  const isExternalVariant = !!variantCheckboxData.value?.find((item) => item === 'isExternalVariant');
+  // const isExternalVariant = !!variantCheckboxData.value?.find((item) => item === 'isExternalVariant');
   const isRegisteredVariant = !!variantCheckboxData.value?.find((item) => item === 'isRegisteredVariant');
 
   if (!isFormValid) {
     return;
   }
 
-  const convertedVariantParams = convertParamsToObj(variantParams);
-
   const newVariantObject = reactive({
     taskId: variantFields.selectedGame.id,
     taskDescription: variantFields.selectedGame.description,
     taskImage: variantFields.selectedGame.image,
     variantName: variantFields.variantName,
-    variantParams: convertedVariantParams,
+    variantParams: variantParams,
     // TODO: Check if this is the valid way to see demo/test data values
     demoData: { task: !!variantFields.selectedGame?.demoData, variant: isDemoData },
     testData: { task: !!variantFields.selectedGame?.testData, variant: isTestData },
     registered: isRegisteredVariant,
   });
 
-  if (isExternalVariant) {
-    newVariantObject.variantParams = {
-      ...convertedVariantParams,
-      variantURL: buildTaskURL(variantFields.selectedGame?.taskURL || '', variantParams),
-    };
-  }
+  // I don't think that this is necessary for variants anymore, commenting out for now
+  // if (isExternalVariant) {
+  //   const mappedVariantParams = Object.entries(variantParams.value).map(([key, value]) => ({ key, value }));
+  //   console.log(mappedVariantParams.value)
+  //   newVariantObject.variantParams = {
+  //     ...variantParams,
+  //     variantURL: buildTaskURL(variantFields.selectedGame?.taskURL || '', mappedVariantParams),
+  //   };
+  // }
 
   // Write variant to Db
   try {
@@ -565,8 +660,16 @@ function resetVariantForm() {
   padding: 0.8rem;
 }
 
-.params-container {
-  display: flex;
-  margin-bottom: 1rem;
+.dynamic-param-container {
+}
+
+#inputParamName {
+  color: black;
+  font-weight: bold;
+}
+
+#inputParamType {
+  color: black;
+  font-weight: bold;
 }
 </style>
diff --git a/src/helpers/query/tasks.js b/src/helpers/query/tasks.js
index 6697f432a..23485524f 100644
--- a/src/helpers/query/tasks.js
+++ b/src/helpers/query/tasks.js
@@ -63,7 +63,7 @@ export const getTasksRequestBody = ({
   return requestBody;
 };
 
-export const taskFetcher = async (registered = true, select = ['name', 'testData', 'demoData']) => {
+export const taskFetcher = async (registered = true, select = ['name', 'gameConfig', 'testData', 'demoData']) => {
   const axiosInstance = getAxiosInstance('app');
   const requestBody = getTasksRequestBody({
     registered,
diff --git a/src/pages/RegisterGame.vue b/src/pages/ManageTasks.vue
similarity index 85%
rename from src/pages/RegisterGame.vue
rename to src/pages/ManageTasks.vue
index aa8569094..c33e83d1e 100644
--- a/src/pages/RegisterGame.vue
+++ b/src/pages/ManageTasks.vue
@@ -4,9 +4,9 @@
       <div class="flex flex-column mb-5">
         <div class="flex align-items-center flex-wrap gap-3 mb-2">
           <i class="pi pi-pencil text-gray-400 rounded" style="font-size: 1.6rem" />
-          <div class="admin-page-header">Register Task</div>
+          <div class="admin-page-header">Manage Tasks</div>
         </div>
-        <div class="text-md text-gray-500 ml-6">Register a new task or variant.</div>
+        <div class="text-md text-gray-500 ml-6">Manage tasks and variants.</div>
       </div>
       <div class="register-container mx-auto md:flex-none">
         <RegisterTask />
@@ -16,7 +16,7 @@
 </template>
 
 <script setup>
-import RegisterTask from '@/components/tasks/RegisterTask.vue';
+import RegisterTask from '@/components/tasks/ManageTasks.vue';
 </script>
 
 <style scoped>
diff --git a/src/router/index.js b/src/router/index.js
index ce0fa24cc..e1c8f1e05 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -187,10 +187,10 @@ const routes = [
     meta: { pageTitle: 'Crowding' },
   },
   {
-    path: '/register-game',
-    name: 'RegisterGame',
-    component: () => import('../pages/RegisterGame.vue'),
-    meta: { pageTitle: 'Register Game', requireAdmin: true, requireSuperAdmin: true },
+    path: '/manage-tasks',
+    name: 'ManageTasks',
+    component: () => import('../pages/ManageTasks.vue'),
+    meta: { pageTitle: 'Manage Tasks', requireAdmin: true, requireSuperAdmin: true },
   },
   {
     path: '/register',
diff --git a/src/router/sidebarActions.js b/src/router/sidebarActions.js
index e9fbff78a..df79f9bb4 100644
--- a/src/router/sidebarActions.js
+++ b/src/router/sidebarActions.js
@@ -62,9 +62,9 @@ const sidebarActionOptions = [
     category: 'Administrations',
   },
   {
-    title: 'Register Task',
+    title: 'Manage Tasks',
     icon: 'pi pi-pencil',
-    buttonLink: { name: 'RegisterGame' },
+    buttonLink: { name: 'ManageTasks' },
     requiresSuperAdmin: true,
     requiresAdmin: true,
     project: 'ALL',

From b6a4502a5c55eff2e01408dc45adac2d8f7b49b5 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Wed, 22 May 2024 10:12:53 -0700
Subject: [PATCH 05/32] create components to manage tasks and to manage
 variants separately

---
 src/components/tasks/ManageTasks.vue          | 176 --------
 src/components/tasks/ManageVariants.vue       | 423 ++++++++++++++++++
 ...anageTasks.vue => ManageTasksVariants.vue} |  14 +-
 src/router/index.js                           |   6 +-
 src/router/sidebarActions.js                  |   2 +-
 5 files changed, 439 insertions(+), 182 deletions(-)
 create mode 100644 src/components/tasks/ManageVariants.vue
 rename src/pages/{ManageTasks.vue => ManageTasksVariants.vue} (77%)

diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index 9a0f1c1e5..72e3e0a97 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -167,182 +167,6 @@
     </PvTabPanel>
 
     <PvTabPanel header="Edit Task"> Coming soon </PvTabPanel>
-
-    <PvTabPanel header="Create Variant">
-      <div class="card px-3">
-        <form class="p-fluid" @submit.prevent="handleVariantSubmit(!v$.$invalid)">
-          <h1 class="text-center font-bold">Create a New Variant</h1>
-
-          <div class="flex flex-column row-gap-3">
-            <section class="form-section">
-              <div class="flex justify-content-between align-items-center">
-                <label for="variant-fields">Select an Existing Task (Task ID) <span class="required">*</span></label>
-                <div class="flex flex-column gap-2 align-items-end">
-                  <div class="flex flex-row align-items-center justify-content-end gap-2 flex-order-1">
-                    <label class="ml-7" for="chbx-registeredTask">Search registered tasks only?</label>
-                    <PvCheckbox v-model="registeredTasksOnly" input-id="chbx-registeredTask" :binary="true" />
-                  </div>
-                </div>
-              </div>
-              <PvDropdown
-                v-model="v$.selectedGame.$model"
-                :options="tasks"
-                option-label="id"
-                placeholder="Select a Game"
-                :loading="isFetchingTasks"
-                :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
-                name="variant-fields"
-              ></PvDropdown>
-              <span v-if="v$.selectedGame.$error && submitted">
-                <span v-for="(error, index) of v$.selectedGame.$errors" :key="index">
-                  <small class="p-error">{{ error.$message }}</small>
-                </span>
-              </span>
-              <small
-                v-else-if="(v$.selectedGame.$invalid && submitted) || v$.selectedGame.$pending.$response"
-                class="p-error"
-              >
-                {{ v$.selectedGame.id.required.$message.replace('Value', 'Task selection') }}
-              </small>
-            </section>
-
-            <section class="form-section">
-              <div class="p-input-icon-right">
-                <label for="variantName">Variant Name <span class="required">*</span></label>
-                <PvInputText
-                  v-model="v$.variantName.$model"
-                  name="variantName"
-                  :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
-                  aria-describedby="activation-code-error"
-                />
-              </div>
-              <span v-if="v$.variantName.$error && submitted">
-                <span v-for="(error, index) of v$.variantName.$errors" :key="index">
-                  <small class="p-error">{{ error.$message }}</small>
-                </span>
-              </span>
-              <small
-                v-else-if="(v$.variantName.$invalid && submitted) || v$.variantName.$pending.$response"
-                class="p-error"
-              >
-                {{ v$.variantName.required.$message.replace('Value', 'Variant Name') }}
-              </small>
-            </section>
-          </div>
-
-          <div class="flex flex-column align-items-center">
-            <h3 class="text-center">Configure Game Parameters</h3>
-            <h4 class="text-center">
-              Set the game parameters for a new variant of task <strong>{{ variantFields.selectedGame.id }}</strong>
-            </h4>
-            <div class="flex flex-column gap-4 mb-2">
-              <!--
-            Each param looks like this:
-            {"name": "someParam", "type": "string, boolean, or number", "value": "valueOfParam"}
-
-            We want to assign the value of param.name to the value of the equivalent key in variantParams
-
-            So if param.name is "someParam", then
-            variantParams[param.name] returns the value of variantParams.someParam,which is the value that we want to change for a new variant
--->
-              <div
-                v-for="(param, index) in filteredMappedGameConfig"
-                :key="index"
-                class="flex align-items-center justify-content-center dynamic-param-container gap-4"
-              >
-                <div class="flex align-items-center">
-                  <label for="inputParamName">Parameter:</label>
-                  <div class="inputTextDisabledWrapper">
-                    <PvInputText id="inputParamName" v-model="variantParams[param.name]" :value="param.name" disabled />
-                  </div>
-                </div>
-
-                <div class="flex align-items-center">
-                  <label for="inputParamType">Type:</label>
-                  <PvInputText id="inputParamType" v-model="param.type" :value="param.type" disabled />
-                </div>
-
-                <div class="flex align-items-center gap-2 flex-grow-1">
-                  <label for="inputParamValue">Value:</label>
-                  <PvInputText
-                    v-if="param.type === 'string'"
-                    id="inputParamValue"
-                    v-model="variantParams[param.name]"
-                    placeholder="Set game parameter to desired value"
-                  />
-                  <PvDropdown
-                    v-else-if="param.type === 'boolean'"
-                    id="inputParamValue"
-                    v-model="variantParams[param.name]"
-                    :options="booleanDropDownOptions"
-                    option-label="label"
-                    option-value="value"
-                    placeholder="Set game parameter to desired value"
-                  />
-                  <PvInputNumber
-                    v-else-if="param.type === 'number'"
-                    id="inputParamValue"
-                    v-model="variantParams[param.name]"
-                    placeholder="Set game parameter to desired value"
-                    button-layout="vertical"
-                    show-buttons
-                    style="width: 3em"
-                  />
-                </div>
-
-                <div>
-                  <button type="button" @click="deleteParam(param.name)">Delete</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
-            <div class="flex flex-row align-items-center">
-              <PvCheckbox
-                v-model="variantCheckboxData"
-                input-id="chbx-demoVariant"
-                name="variantCheckboxData"
-                value="isDemoVariant"
-              />
-              <label class="ml-1 mr-3" for="chbx-demoVariant">Mark as <b>Demo Variant</b></label>
-            </div>
-            <div class="flex flex-row align-items-center">
-              <PvCheckbox
-                v-model="variantCheckboxData"
-                input-id="chbx-testVariant"
-                name="variantCheckboxData"
-                value="isTestVariant"
-              />
-              <label class="ml-1 mr-3" for="chbx-testVariant">Mark as <b>Test Variant</b></label>
-            </div>
-            <div class="flex flex-row align-items-center">
-              <!--              Not sure that we still have any need to mark a variant as external -->
-              <!--              <PvCheckbox-->
-              <!--                v-model="variantCheckboxData"-->
-              <!--                input-id="chbx-externalVariant"-->
-              <!--                name="variantCheckboxData"-->
-              <!--                value="isExternalVariant"-->
-              <!--              />-->
-              <!--              <label class="ml-1 mr-3" for="chbx-externalVariant">Mark as <b>External Variant</b></label>-->
-              <div class="flex flex-row align-items-center">
-                <PvCheckbox
-                  v-model="variantCheckboxData"
-                  input-id="chbx-registeredVariant"
-                  name="variantCheckboxData"
-                  value="isRegisteredVariant"
-                />
-                <label class="ml-1 mr-3" for="chbx-externalVariant">Mark as <b>Registered Variant</b></label>
-              </div>
-            </div>
-          </div>
-          <div class="form-submit">
-            <PvButton type="submit" label="Submit" class="submit-button" severity="primary" />
-          </div>
-        </form>
-      </div>
-    </PvTabPanel>
-
-    <PvTabPanel header="Edit Variant"> Coming Soon </PvTabPanel>
   </PvTabView>
 </template>
 
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
new file mode 100644
index 000000000..9ac31b620
--- /dev/null
+++ b/src/components/tasks/ManageVariants.vue
@@ -0,0 +1,423 @@
+<template>
+  <PvToast />
+  <PvTabView>
+    <PvTabPanel header="Create Variant">
+      <div class="card px-3">
+        <form class="p-fluid" @submit.prevent="handleVariantSubmit(!v$.$invalid)">
+          <h1 class="text-center font-bold">Create a New Variant</h1>
+
+          <div class="flex flex-column row-gap-3">
+            <section class="form-section">
+              <div class="flex justify-content-between align-items-center">
+                <label for="variant-fields">Select an Existing Task (Task ID) <span class="required">*</span></label>
+                <div class="flex flex-column gap-2 align-items-end">
+                  <div class="flex flex-row align-items-center justify-content-end gap-2 flex-order-1">
+                    <label class="ml-7" for="chbx-registeredTask">Search registered tasks only?</label>
+                    <PvCheckbox v-model="registeredTasksOnly" input-id="chbx-registeredTask" :binary="true" />
+                  </div>
+                </div>
+              </div>
+              <PvDropdown
+                v-model="v$.selectedGame.$model"
+                :options="tasks"
+                option-label="id"
+                placeholder="Select a Game"
+                :loading="isFetchingTasks"
+                :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
+                name="variant-fields"
+              ></PvDropdown>
+              <span v-if="v$.selectedGame.$error && submitted">
+                <span v-for="(error, index) of v$.selectedGame.$errors" :key="index">
+                  <small class="p-error">{{ error.$message }}</small>
+                </span>
+              </span>
+              <small
+                v-else-if="(v$.selectedGame.$invalid && submitted) || v$.selectedGame.$pending.$response"
+                class="p-error"
+              >
+                {{ v$.selectedGame.id.required.$message.replace('Value', 'Task selection') }}
+              </small>
+            </section>
+
+            <section class="form-section">
+              <div class="p-input-icon-right">
+                <label for="variantName">Variant Name <span class="required">*</span></label>
+                <PvInputText
+                  v-model="v$.variantName.$model"
+                  name="variantName"
+                  :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
+                  aria-describedby="activation-code-error"
+                />
+              </div>
+              <span v-if="v$.variantName.$error && submitted">
+                <span v-for="(error, index) of v$.variantName.$errors" :key="index">
+                  <small class="p-error">{{ error.$message }}</small>
+                </span>
+              </span>
+              <small
+                v-else-if="(v$.variantName.$invalid && submitted) || v$.variantName.$pending.$response"
+                class="p-error"
+              >
+                {{ v$.variantName.required.$message.replace('Value', 'Variant Name') }}
+              </small>
+            </section>
+          </div>
+
+          <div class="flex flex-column align-items-center">
+            <h3 class="text-center">Configure Game Parameters</h3>
+            <h4 class="text-center">
+              Set the game parameters for a new variant of task <strong>{{ variantFields.selectedGame.id }}</strong>
+            </h4>
+            <div class="flex flex-column gap-4 mb-2">
+              <!--
+            Each param looks like this:
+            {"name": "someParam", "type": "string, boolean, or number", "value": "valueOfParam"}
+
+            We want to assign the value of param.name to the value of the equivalent key in variantParams
+
+            So if param.name is "someParam", then
+            variantParams[param.name] returns the value of variantParams.someParam,which is the value that we want to change for a new variant
+-->
+              <div
+                v-for="(param, index) in filteredMappedGameConfig"
+                :key="index"
+                class="flex align-items-center justify-content-center dynamic-param-container gap-4"
+              >
+                <div class="flex align-items-center">
+                  <label for="inputParamName">Parameter:</label>
+                  <div class="inputTextDisabledWrapper">
+                    <PvInputText id="inputParamName" v-model="variantParams[param.name]" :value="param.name" disabled />
+                  </div>
+                </div>
+
+                <div class="flex align-items-center">
+                  <label for="inputParamType">Type:</label>
+                  <PvInputText id="inputParamType" v-model="param.type" :value="param.type" disabled />
+                </div>
+
+                <div class="flex align-items-center gap-2 flex-grow-1">
+                  <label for="inputParamValue">Value:</label>
+                  <PvInputText
+                    v-if="param.type === 'string'"
+                    id="inputParamValue"
+                    v-model="variantParams[param.name]"
+                    placeholder="Set game parameter to desired value"
+                  />
+                  <PvDropdown
+                    v-else-if="param.type === 'boolean'"
+                    id="inputParamValue"
+                    v-model="variantParams[param.name]"
+                    :options="booleanDropDownOptions"
+                    option-label="label"
+                    option-value="value"
+                    placeholder="Set game parameter to desired value"
+                  />
+                  <PvInputNumber
+                    v-else-if="param.type === 'number'"
+                    id="inputParamValue"
+                    v-model="variantParams[param.name]"
+                    placeholder="Set game parameter to desired value"
+                    button-layout="vertical"
+                    show-buttons
+                    style="width: 3em"
+                  />
+                </div>
+
+                <div>
+                  <button type="button" @click="deleteParam(param.name)">Delete</button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
+            <div class="flex flex-row align-items-center">
+              <PvCheckbox
+                v-model="variantCheckboxData"
+                input-id="chbx-demoVariant"
+                name="variantCheckboxData"
+                value="isDemoVariant"
+              />
+              <label class="ml-1 mr-3" for="chbx-demoVariant">Mark as <b>Demo Variant</b></label>
+            </div>
+            <div class="flex flex-row align-items-center">
+              <PvCheckbox
+                v-model="variantCheckboxData"
+                input-id="chbx-testVariant"
+                name="variantCheckboxData"
+                value="isTestVariant"
+              />
+              <label class="ml-1 mr-3" for="chbx-testVariant">Mark as <b>Test Variant</b></label>
+            </div>
+            <div class="flex flex-row align-items-center">
+              <!--              Not sure that we still have any need to mark a variant as external -->
+              <!--              <PvCheckbox-->
+              <!--                v-model="variantCheckboxData"-->
+              <!--                input-id="chbx-externalVariant"-->
+              <!--                name="variantCheckboxData"-->
+              <!--                value="isExternalVariant"-->
+              <!--              />-->
+              <!--              <label class="ml-1 mr-3" for="chbx-externalVariant">Mark as <b>External Variant</b></label>-->
+              <div class="flex flex-row align-items-center">
+                <PvCheckbox
+                  v-model="variantCheckboxData"
+                  input-id="chbx-registeredVariant"
+                  name="variantCheckboxData"
+                  value="isRegisteredVariant"
+                />
+                <label class="ml-1 mr-3" for="chbx-externalVariant">Mark as <b>Registered Variant</b></label>
+              </div>
+            </div>
+          </div>
+          <div class="form-submit">
+            <PvButton type="submit" label="Submit" class="submit-button" severity="primary" />
+          </div>
+        </form>
+      </div>
+    </PvTabPanel>
+
+    <PvTabPanel header="Edit Variant">
+      <form>
+        <PvDropdown v-model="selectedTask" :options="tasks" option-label="name" option-value="id" />
+      </form>
+    </PvTabPanel>
+  </PvTabView>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue';
+import { required, requiredIf, url } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { useAuthStore } from '@/store/auth';
+import { useQuery } from '@tanstack/vue-query';
+import { storeToRefs } from 'pinia';
+import { useToast } from 'primevue/usetoast';
+import { taskFetcher } from '@/helpers/query/tasks';
+import { variantsFetcher } from '../../helpers/query/tasks';
+
+const toast = useToast();
+const initialized = ref(false);
+const registeredTasksOnly = ref(true);
+const taskCheckboxData = ref();
+const variantCheckboxData = ref();
+const authStore = useAuthStore();
+const { roarfirekit } = storeToRefs(authStore);
+
+const selectedTask = ref(null);
+
+let unsubscribe;
+const init = () => {
+  if (unsubscribe) unsubscribe();
+  initialized.value = true;
+};
+
+unsubscribe = authStore.$subscribe(async (mutation, state) => {
+  if (state.roarfirekit.restConfig) init();
+});
+
+onMounted(() => {
+  if (roarfirekit.value.restConfig) init();
+});
+
+const { isFetching: isFetchingTasks, data: tasks } = useQuery({
+  queryKey: ['tasks', registeredTasksOnly],
+  queryFn: () => taskFetcher(registeredTasksOnly.value),
+  keepPreviousData: true,
+  enabled: initialized,
+  staleTime: 5 * 60 * 1000, // 5 minutes
+});
+
+const { data: allVariants } = useQuery({
+  queryKey: ['variants', 'all'],
+  queryFn: () => variantsFetcher(),
+  keepPreviousData: true,
+  enabled: initialized,
+  staleTime: 5 * 60 * 1000, // 5 minutes
+});
+
+const variantFields = reactive({
+  variantName: '',
+  selectedGame: {},
+  // Based on type of account?
+  external: true,
+});
+
+const variantRules = {
+  variantName: { required },
+  selectedGame: {
+    id: { required },
+  },
+};
+
+// Turn mappedGameConfig into an object {key: value, key: value...} which models gameConfig, filtered for deleted params
+// This builds the object of parameters that will be sent to the DB
+const variantParams = computed(() => {
+  const params = reactive({});
+
+  if (!mappedGameConfig.value) {
+    return params;
+  }
+
+  filteredMappedGameConfig.value.forEach((param) => {
+    params[param.name] = param.value;
+  });
+
+  return params;
+});
+
+// Turn the gameConfig object into an array of key/value pairs [{name: 'key', value: 'value', type: 'type'}...]
+// This allows simplified editing of the gameConfig object
+const mappedGameConfig = computed(() => {
+  // Prevent any errors if selectedGame is not set
+  if (!variantFields.selectedGame?.gameConfig) {
+    return [];
+  }
+
+  return Object.entries(variantFields.selectedGame.gameConfig).map(([key, value]) => ({
+    name: key,
+    type: typeof value,
+    value: value,
+  }));
+});
+
+// Filter out any deleted params
+const filteredMappedGameConfig = computed(() => {
+  if (!mappedGameConfig.value) {
+    return [];
+  }
+
+  return mappedGameConfig.value.filter((param) => !deletedParams.value.includes(param.name));
+});
+
+// Keep track of params that are not needed for the particular variant
+const deletedParams = ref([]);
+
+// Push the name of the param to the deletedParams array,
+// Triggering a computation of the filteredMappedGameConfig and variantParams
+const deleteParam = (param) => {
+  deletedParams.value.push(param);
+};
+
+const booleanDropDownOptions = [
+  { label: 'true', value: true },
+  { label: 'false', value: false },
+];
+
+const v$ = useVuelidate(variantRules, variantFields);
+const submitted = ref(false);
+
+const handleVariantSubmit = async (isFormValid) => {
+  submitted.value = true;
+  const isDemoData = !!variantCheckboxData.value?.find((item) => item === 'isDemoVariant');
+  const isTestData = !!variantCheckboxData.value?.find((item) => item === 'isTestVariant');
+  // const isExternalVariant = !!variantCheckboxData.value?.find((item) => item === 'isExternalVariant');
+  const isRegisteredVariant = !!variantCheckboxData.value?.find((item) => item === 'isRegisteredVariant');
+
+  if (!isFormValid) {
+    return;
+  }
+
+  const newVariantObject = reactive({
+    taskId: variantFields.selectedGame.id,
+    taskDescription: variantFields.selectedGame.description,
+    taskImage: variantFields.selectedGame.image,
+    variantName: variantFields.variantName,
+    variantParams: variantParams,
+    // TODO: Check if this is the valid way to see demo/test data values
+    demoData: { task: !!variantFields.selectedGame?.demoData, variant: isDemoData },
+    testData: { task: !!variantFields.selectedGame?.testData, variant: isTestData },
+    registered: isRegisteredVariant,
+  });
+
+  // I don't think that this is necessary for variants anymore, commenting out for now
+  // if (isExternalVariant) {
+  //   const mappedVariantParams = Object.entries(variantParams.value).map(([key, value]) => ({ key, value }));
+  //   console.log(mappedVariantParams.value)
+  //   newVariantObject.variantParams = {
+  //     ...variantParams,
+  //     variantURL: buildTaskURL(variantFields.selectedGame?.taskURL || '', mappedVariantParams),
+  //   };
+  // }
+
+  // Write variant to Db
+  try {
+    await authStore.roarfirekit.registerTaskVariant({ ...newVariantObject });
+
+    toast.add({ severity: 'success', summary: 'Hoorah!', detail: 'Variant successfully created.', life: 3000 });
+
+    submitted.value = false;
+
+    resetVariantForm();
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+function buildTaskURL(url, params) {
+  const baseURL = url;
+
+  let queryParams = url.includes('/?') ? '' : '/?';
+
+  params.value.forEach((param, i) => {
+    if (param.name) {
+      if (i === 0) {
+        queryParams += `${param.name}=${param.value}`;
+      } else {
+        queryParams += `&${param.name}=${param.value}`;
+      }
+    }
+  });
+
+  const completeURL = baseURL + queryParams;
+
+  return completeURL;
+}
+
+function resetVariantForm() {
+  Object.assign(variantFields, {
+    variantName: '',
+    selectedGame: {},
+    external: true,
+  });
+
+  variantParams.value = [
+    {
+      name: '',
+      value: '',
+      type: 'String',
+    },
+  ];
+}
+</script>
+
+<style>
+.submit-button {
+  margin: auto;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  display: flex;
+  border: none;
+  width: 11.75rem;
+}
+
+.submit-button:hover {
+  background-color: #2b8ecb;
+  color: black;
+}
+
+.delete-btn {
+  padding: 0.8rem;
+}
+
+.dynamic-param-container {
+}
+
+#inputParamName {
+  color: black;
+  font-weight: bold;
+}
+
+#inputParamType {
+  color: black;
+  font-weight: bold;
+}
+</style>
diff --git a/src/pages/ManageTasks.vue b/src/pages/ManageTasksVariants.vue
similarity index 77%
rename from src/pages/ManageTasks.vue
rename to src/pages/ManageTasksVariants.vue
index c33e83d1e..1ff4d37da 100644
--- a/src/pages/ManageTasks.vue
+++ b/src/pages/ManageTasksVariants.vue
@@ -9,14 +9,24 @@
         <div class="text-md text-gray-500 ml-6">Manage tasks and variants.</div>
       </div>
       <div class="register-container mx-auto md:flex-none">
-        <RegisterTask />
+        <PvTabView>
+          <PvTabPanel header="Tasks">
+            <ManageTasks />
+          </PvTabPanel>
+
+          <PvTabPanel header="Variants">
+            <ManageVariants />
+          </PvTabPanel>
+        </PvTabView>
       </div>
     </section>
   </main>
 </template>
 
 <script setup>
-import RegisterTask from '@/components/tasks/ManageTasks.vue';
+import ManageTasks from '@/components/tasks/ManageTasks.vue';
+import ManageVariants from '../components/tasks/ManageVariants.vue';
+import { ref } from 'vue';
 </script>
 
 <style scoped>
diff --git a/src/router/index.js b/src/router/index.js
index e1c8f1e05..67cd6d144 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -187,9 +187,9 @@ const routes = [
     meta: { pageTitle: 'Crowding' },
   },
   {
-    path: '/manage-tasks',
-    name: 'ManageTasks',
-    component: () => import('../pages/ManageTasks.vue'),
+    path: '/manage-tasks-variants',
+    name: 'ManageTasksVariants',
+    component: () => import('../pages/ManageTasksVariants.vue'),
     meta: { pageTitle: 'Manage Tasks', requireAdmin: true, requireSuperAdmin: true },
   },
   {
diff --git a/src/router/sidebarActions.js b/src/router/sidebarActions.js
index df79f9bb4..5a0386449 100644
--- a/src/router/sidebarActions.js
+++ b/src/router/sidebarActions.js
@@ -64,7 +64,7 @@ const sidebarActionOptions = [
   {
     title: 'Manage Tasks',
     icon: 'pi pi-pencil',
-    buttonLink: { name: 'ManageTasks' },
+    buttonLink: { name: 'ManageTasksVariants' },
     requiresSuperAdmin: true,
     requiresAdmin: true,
     project: 'ALL',

From 3b37ab567a3efdd02eef017c9970f19f6c630c0f Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Thu, 23 May 2024 11:51:13 -0700
Subject: [PATCH 06/32] build out form for editing variants

---
 src/components/tasks/ManageTasks.vue    |  13 --
 src/components/tasks/ManageVariants.vue | 265 +++++++++++++++++++++---
 2 files changed, 240 insertions(+), 38 deletions(-)

diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index 72e3e0a97..8a62d651a 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -483,17 +483,4 @@ function resetVariantForm() {
 .delete-btn {
   padding: 0.8rem;
 }
-
-.dynamic-param-container {
-}
-
-#inputParamName {
-  color: black;
-  font-weight: bold;
-}
-
-#inputParamType {
-  color: black;
-  font-weight: bold;
-}
 </style>
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index 9ac31b620..ce46d9d50 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -85,9 +85,8 @@
               >
                 <div class="flex align-items-center">
                   <label for="inputParamName">Parameter:</label>
-                  <div class="inputTextDisabledWrapper">
-                    <PvInputText id="inputParamName" v-model="variantParams[param.name]" :value="param.name" disabled />
-                  </div>
+
+                  <PvInputText id="inputParamName" v-model="variantParams[param.name]" :value="param.name" disabled />
                 </div>
 
                 <div class="flex align-items-center">
@@ -117,14 +116,11 @@
                     id="inputParamValue"
                     v-model="variantParams[param.name]"
                     placeholder="Set game parameter to desired value"
-                    button-layout="vertical"
-                    show-buttons
-                    style="width: 3em"
                   />
                 </div>
 
                 <div>
-                  <button type="button" @click="deleteParam(param.name)">Delete</button>
+                  <button type="button" @click="moveToDeletedParams(param.name)">Delete</button>
                 </div>
               </div>
             </div>
@@ -176,15 +172,169 @@
     </PvTabPanel>
 
     <PvTabPanel header="Edit Variant">
-      <form>
-        <PvDropdown v-model="selectedTask" :options="tasks" option-label="name" option-value="id" />
+      <form @submit.prevent="handleUpdateVariant">
+        <section class="flex gap-2 mb-4">
+          <PvDropdown
+            v-model="selectedTask"
+            :options="tasks"
+            option-label="name"
+            option-value="id"
+            placeholder="Select a Game"
+          />
+          <PvDropdown
+            v-model="selectedVariant"
+            :options="filteredVariants"
+            :option-label="(data) => (data.variant.name ? data.variant.name : data.variant.id)"
+            option-value="variant"
+            placeholder="Select a Variant"
+          />
+        </section>
+
+        <section v-if="selectedVariant" class="flex flex-column align-items-start gap-4">
+          <div class="flex flex-column">
+            <label for="fieldsOutput">
+              <strong>Fields</strong>
+            </label>
+            <div v-for="(value, key) in selectedVariant" id="fieldsOutput" :key="key" class="">
+              <div v-if="!ignoreFields.includes(key)">
+                <div
+                  v-if="updatedVariantData[key] !== undefined"
+                  class="flex align-items-center justify-content-between gap-2 mb-1"
+                >
+                  <label :for="key">
+                    <em>{{ key }}</em>
+                  </label>
+                  <PvInputText id="inputEditVariantType" :placeholder="typeof value" disabled class="flex-grow-1" />
+                  <PvInputText
+                    v-if="typeof value === 'string'"
+                    v-model="updatedVariantData[key]"
+                    :placeholder="value"
+                    class="flex-grow-1"
+                  />
+                  <PvInputNumber
+                    v-else-if="typeof value === 'number'"
+                    v-model="updatedVariantData[key]"
+                    class="flex-grow-1"
+                  />
+                  <PvDropdown
+                    v-else-if="typeof value === 'boolean'"
+                    v-model="updatedVariantData[key]"
+                    :options="booleanDropDownOptions"
+                    option-label="label"
+                    option-value="value"
+                    class="flex-grow-1"
+                  />
+                  <PvButton type="button" @click="deleteParam(key)">Delete</PvButton>
+                </div>
+              </div>
+            </div>
+            <div v-if="addedFields.length > 0">
+              <div v-for="(field, index) in addedFields" :key="index" class="flex align-items-center column-gap-2 mb-1">
+                <PvInputText v-model="field.name" placeholder="Field Name" />
+                <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
+
+                <PvInputText
+                  v-if="field.type === 'string'"
+                  v-model="field.value"
+                  placeholder="Field Value"
+                  class="flex-grow-1"
+                />
+                <PvInputNumber
+                  v-if="field.type === 'number'"
+                  v-model="field.value"
+                  placeholder="Field Value"
+                  class="flex-grow-1"
+                />
+                <PvDropdown
+                  v-if="field.type === 'boolean'"
+                  v-model="field.value"
+                  placeholder="Field Value"
+                  :options="booleanDropDownOptions"
+                  option-label="label"
+                  option-value="value"
+                  class="flex-grow-1"
+                />
+                <PvButton type="button" @click="removeField(field.name, addedFields)">Delete</PvButton>
+              </div>
+            </div>
+            <PvButton label="Add Field" text icon="pi pi-plus" @click="addField" />
+          </div>
+
+          <div class="flex flex-column">
+            <label for="paramsOutput">
+              <strong>Game Params</strong>
+            </label>
+            <div v-for="(param, paramName) in selectedVariant.params" id="paramsOutput" :key="paramName" class="mb-1">
+              <div
+                v-if="updatedVariantData.params[paramName] !== undefined"
+                class="flex align-items-center justify-content-end column-gap-2"
+              >
+                <label :for="paramName">
+                  <em>{{ paramName }} </em>
+                </label>
+                <PvInputText id="inputEditParamType" :placeholder="typeof param" class="flex-grow-1" disabled />
+                <PvInputText
+                  v-if="typeof param === 'string'"
+                  v-model="updatedVariantData.params[paramName]"
+                  :placeholder="param"
+                  class="flex-grow-1"
+                />
+                <PvInputNumber
+                  v-else-if="typeof param === 'number'"
+                  v-model="updatedVariantData.params[paramName]"
+                  class="flex-grow-1"
+                />
+                <PvDropdown
+                  v-else-if="typeof param === 'boolean'"
+                  v-model="updatedVariantData.params[paramName]"
+                  :options="booleanDropDownOptions"
+                  option-label="label"
+                  option-value="value"
+                  class="flex-grow-1"
+                />
+                <PvButton type="button" @click="deleteParam(paramName)">Delete</PvButton>
+              </div>
+            </div>
+            <div v-if="addedParams.length > 0">
+              <div v-for="(field, index) in addedParams" :key="index" class="flex align-items-center column-gap-2 mb-1">
+                <PvInputText v-model="field.name" placeholder="Field Name" />
+                <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
+                <PvInputText
+                  v-if="field.type === 'string'"
+                  v-model="field.value"
+                  placeholder="Field Value"
+                  class="flex-grow-1"
+                />
+                <PvInputNumber
+                  v-if="field.type === 'number'"
+                  v-model="field.value"
+                  placeholder="Field Value"
+                  class="flex-grow-1"
+                />
+                <PvDropdown
+                  v-if="field.type === 'boolean'"
+                  v-model="field.value"
+                  placeholder="Field Value"
+                  :options="booleanDropDownOptions"
+                  option-label="label"
+                  option-value="value"
+                  class="flex-grow-1"
+                />
+                <PvButton type="button" @click="removeField(field.name, addedParams)">Delete</PvButton>
+              </div>
+            </div>
+            <PvButton label="Add Param" text icon="pi pi-plus" @click="addParam" />
+          </div>
+        </section>
+
+        <PvButton type="submit" class="m-4">Update Variant</PvButton>
       </form>
     </PvTabPanel>
   </PvTabView>
 </template>
 
 <script setup>
-import { computed, onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { required, requiredIf, url } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useAuthStore } from '@/store/auth';
@@ -193,16 +343,24 @@ import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
 import { taskFetcher } from '@/helpers/query/tasks';
 import { variantsFetcher } from '../../helpers/query/tasks';
+import { cloneDeep } from 'lodash';
 
 const toast = useToast();
 const initialized = ref(false);
 const registeredTasksOnly = ref(true);
-const taskCheckboxData = ref();
 const variantCheckboxData = ref();
 const authStore = useAuthStore();
 const { roarfirekit } = storeToRefs(authStore);
 
 const selectedTask = ref(null);
+const selectedVariant = ref(null);
+let updatedVariantData = reactive(cloneDeep(selectedVariant.value));
+let addedFields = reactive([]);
+let addedParams = reactive([]);
+
+watch(selectedVariant, (newVal) => {
+  updatedVariantData = reactive(cloneDeep(newVal));
+});
 
 let unsubscribe;
 const init = () => {
@@ -234,6 +392,16 @@ const { data: allVariants } = useQuery({
   staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
+const ignoreFields = ['id', 'lastUpdated', 'params', 'parentDoc'];
+
+const filteredVariants = computed(() => {
+  if (!allVariants.value || !selectedTask.value) {
+    return [];
+  }
+
+  return allVariants.value.filter((variant) => variant.task.id === selectedTask.value);
+});
+
 const variantFields = reactive({
   variantName: '',
   selectedGame: {},
@@ -293,10 +461,17 @@ const deletedParams = ref([]);
 
 // Push the name of the param to the deletedParams array,
 // Triggering a computation of the filteredMappedGameConfig and variantParams
-const deleteParam = (param) => {
+const moveToDeletedParams = (param) => {
   deletedParams.value.push(param);
 };
 
+const deleteParam = (param) => {
+  if (updatedVariantData['params'][param] !== undefined) {
+    delete updatedVariantData['params'][param];
+  }
+  delete updatedVariantData[param];
+};
+
 const booleanDropDownOptions = [
   { label: 'true', value: true },
   { label: 'false', value: false },
@@ -305,6 +480,59 @@ const booleanDropDownOptions = [
 const v$ = useVuelidate(variantRules, variantFields);
 const submitted = ref(false);
 
+const addField = () => {
+  addedFields.push({ name: '', value: '', type: 'string' });
+};
+
+const removeField = (field, array) => {
+  const updatedFields = array.filter((item) => item.name !== field);
+  array.splice(0, array.length, ...updatedFields);
+};
+
+const addParam = () => {
+  addedParams.push({ name: '', value: '', type: 'string' });
+};
+
+const resetUpdateVariantForm = () => {
+  selectedTask.value = null;
+  selectedVariant.value = null;
+  updatedVariantData = {};
+  addedFields = reactive([{}]);
+  addedParams = reactive([{}]);
+};
+
+function convertParamsToObj(paramType) {
+  return paramType.reduce((acc, item) => {
+    if (item.name) {
+      // Check if name is not empty
+      acc[item.name] = item.value;
+    }
+    return acc;
+  }, {});
+}
+
+const handleUpdateVariant = async () => {
+  const convertedFields = convertParamsToObj(addedFields);
+  const convertedParams = convertParamsToObj(addedParams);
+  updatedVariantData = {
+    ...updatedVariantData,
+    ...convertedFields,
+    params: {
+      ...updatedVariantData.params,
+      ...convertedParams,
+    },
+  };
+
+  try {
+    authStore.roarfirekit.updateVariant(selectedTask.value, selectedVariant.value.id, updatedVariantData);
+    toast.add({ severity: 'success', summary: 'Hoorah!', detail: 'Variant successfully updated.', life: 3000 });
+
+    resetUpdateVariantForm();
+  } catch (error) {
+    console.error(error);
+  }
+};
+
 const handleVariantSubmit = async (isFormValid) => {
   submitted.value = true;
   const isDemoData = !!variantCheckboxData.value?.find((item) => item === 'isDemoVariant');
@@ -407,17 +635,4 @@ function resetVariantForm() {
 .delete-btn {
   padding: 0.8rem;
 }
-
-.dynamic-param-container {
-}
-
-#inputParamName {
-  color: black;
-  font-weight: bold;
-}
-
-#inputParamType {
-  color: black;
-  font-weight: bold;
-}
 </style>

From 9a429d98416811098a49114b3fa4298bef7a689d Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Thu, 23 May 2024 15:30:48 -0700
Subject: [PATCH 07/32] build out form for editing tasks

---
 src/components/tasks/ManageTasks.vue    | 411 ++++++++++++++++--------
 src/components/tasks/ManageVariants.vue | 202 +++++++-----
 src/helpers/query/tasks.js              |  14 +-
 src/pages/ManageTasksVariants.vue       |   1 -
 4 files changed, 399 insertions(+), 229 deletions(-)

diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index 8a62d651a..9b8b0d141 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -96,7 +96,7 @@
 
                 <PvDropdown v-else-if="param.type === 'boolean'" v-model="param.value" :options="[true, false]" />
 
-                <PvInputNumber v-else-if="param.type === 'number'" v-model="param.value" show-buttons />
+                <PvInputNumber v-else-if="param.type === 'number'" v-model="param.value" />
 
                 <PvButton icon="pi pi-trash" class="delete-btn" text @click="removeField(gameConfig, index)" />
               </div>
@@ -118,7 +118,7 @@
 
                 <PvDropdown v-else-if="param.type === 'boolean'" v-model="param.value" :options="[true, false]" />
 
-                <PvInputNumber v-else-if="param.type === 'number'" v-model="param.value" show-buttons />
+                <PvInputNumber v-else-if="param.type === 'number'" v-model="param.value" />
 
                 <PvButton icon="pi pi-trash" text class="delete-btn" @click="removeField(taskParams, index)" />
               </div>
@@ -166,12 +166,176 @@
       </div>
     </PvTabPanel>
 
-    <PvTabPanel header="Edit Task"> Coming soon </PvTabPanel>
+    <PvTabPanel header="Update Task">
+      <h1 class="text-center font-bold">Update a Task</h1>
+      <form @submit.prevent="handleUpdateTask">
+        <section class="flex flex-column gap-2 mb-4">
+          <label for="variant-fields" class="my-2">Select an Existing Task<span class="required">*</span></label>
+          <PvDropdown
+            v-model="selectedTask"
+            :options="tasks"
+            option-label="name"
+            option-value="id"
+            placeholder="Select a Task"
+          />
+        </section>
+
+        <section v-if="taskData" class="flex flex-column align-items-start mt-4">
+          <div class="flex flex-column w-8">
+            <label for="fieldsOutput">
+              <strong>Fields</strong>
+            </label>
+            <div v-for="(value, key) in taskData" :key="key">
+              <div v-if="!ignoreFields.includes(key)">
+                <div
+                  v-if="updatedTaskData[key] !== undefined"
+                  class="flex align-items-center justify-content-between gap-2 mb-1"
+                >
+                  <label :for="key" class="w-2">
+                    <em>{{ key }}</em>
+                  </label>
+                  <PvInputText :placeholder="typeof value" disabled class="w-2" />
+
+                  <PvInputText
+                    v-if="typeof value === 'string'"
+                    v-model="updatedTaskData[key]"
+                    :placeholder="value"
+                    class="flex-grow-1"
+                  />
+                  <PvInputNumber
+                    v-else-if="typeof value === 'number'"
+                    v-model="updatedTaskData[key]"
+                    class="flex-grow-1"
+                  />
+                  <PvDropdown
+                    v-else-if="typeof value === 'boolean'"
+                    v-model="updatedTaskData[key]"
+                    :options="booleanDropDownOptions"
+                    option-label="label"
+                    option-value="value"
+                    class="flex-grow-1"
+                  />
+                  <PvButton type="button" @click="deleteParam(key)">Delete</PvButton>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="newFields.length > 0">
+            <div v-for="(field, index) in newFields" :key="index" class="flex align-items-center column-gap-2 mb-1">
+              <PvInputText v-model="field.name" placeholder="Field Name" />
+              <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
+
+              <PvInputText
+                v-if="field.type === 'string'"
+                v-model="field.value"
+                placeholder="Field Value"
+                class="flex-grow-1"
+              />
+              <PvInputNumber
+                v-if="field.type === 'number'"
+                v-model="field.value"
+                placeholder="Field Value"
+                class="flex-grow-1"
+              />
+              <PvDropdown
+                v-if="field.type === 'boolean'"
+                v-model="field.value"
+                placeholder="Field Value"
+                :options="booleanDropDownOptions"
+                option-label="label"
+                option-value="value"
+                class="flex-grow-1"
+              />
+              <PvButton type="button" @click="removeNewField(field.name, newFields)">Delete</PvButton>
+            </div>
+          </div>
+          <PvButton label="Add Field" text icon="pi pi-plus" class="my-4" @click="newField" />
+
+          <div class="flex flex-column w-8">
+            <label for="gameConfigOutput">
+              <strong>Game Configuration</strong>
+            </label>
+            <div
+              v-for="(param, paramName) in updatedTaskData.gameConfig"
+              id="paramsOutput"
+              :key="paramName"
+              class="mb-1"
+            >
+              <div
+                v-if="updatedTaskData.gameConfig[paramName] !== undefined"
+                class="flex align-items-center justify-content-end column-gap-2"
+              >
+                <label :for="paramName" class="w-2">
+                  <em>{{ paramName }} </em>
+                </label>
+                <PvInputText id="inputEditParamType" :placeholder="typeof param" class="w-2" disabled />
+                <PvInputText
+                  v-if="typeof param === 'string'"
+                  v-model="updatedTaskData.gameConfig[paramName]"
+                  :placeholder="param"
+                  class="flex-grow-1"
+                />
+                <PvInputNumber
+                  v-else-if="typeof param === 'number'"
+                  v-model="updatedTaskData.gameConfig[paramName]"
+                  class="flex-grow-1"
+                />
+                <PvDropdown
+                  v-else-if="typeof param === 'boolean'"
+                  v-model="updatedTaskData.gameConfig[paramName]"
+                  :options="booleanDropDownOptions"
+                  option-label="label"
+                  option-value="value"
+                  class="flex-grow-1"
+                />
+                <PvButton type="button" @click="deleteParam(paramName)">Delete</PvButton>
+              </div>
+            </div>
+            <div v-if="addedGameConfig.length > 0">
+              <div
+                v-for="(field, index) in addedGameConfig"
+                :key="index"
+                class="flex align-items-center column-gap-2 mb-1"
+              >
+                <PvInputText v-model="field.name" placeholder="Field Name" />
+                <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
+                <PvInputText
+                  v-if="field.type === 'string'"
+                  v-model="field.value"
+                  placeholder="Field Value"
+                  class="flex-grow-1"
+                />
+                <PvInputNumber
+                  v-if="field.type === 'number'"
+                  v-model="field.value"
+                  placeholder="Field Value"
+                  class="flex-grow-1"
+                />
+                <PvDropdown
+                  v-if="field.type === 'boolean'"
+                  v-model="field.value"
+                  placeholder="Field Value"
+                  :options="booleanDropDownOptions"
+                  option-label="label"
+                  option-value="value"
+                  class="flex-grow-1"
+                />
+                <PvButton type="button" @click="removeNewField(field.name, addedGameConfig)">Delete</PvButton>
+              </div>
+            </div>
+          </div>
+          <PvButton label="Add Param" text icon="pi pi-plus" class="my-4" @click="addGameConfig" />
+        </section>
+
+        <PvButton type="submit" class="my-4">Update Task</PvButton>
+      </form>
+    </PvTabPanel>
   </PvTabView>
 </template>
 
 <script setup>
-import { computed, onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { required, requiredIf, url } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useAuthStore } from '@/store/auth';
@@ -179,16 +343,48 @@ import { useQuery } from '@tanstack/vue-query';
 import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
 import { taskFetcher } from '@/helpers/query/tasks';
+import { cloneDeep } from 'lodash';
 
 const toast = useToast();
 const initialized = ref(false);
 const registeredTasksOnly = ref(true);
 const taskCheckboxData = ref();
-const variantCheckboxData = ref();
 const authStore = useAuthStore();
 const { roarfirekit } = storeToRefs(authStore);
 
 const isExternalTask = computed(() => !!taskCheckboxData.value?.find((item) => item === 'isExternalTask'));
+const selectedTask = ref(null);
+let taskData = computed(() => {
+  if (!selectedTask.value) return null;
+
+  return tasks.value.find((task) => task.id === selectedTask.value);
+});
+
+// Reactive clone for holding changes made to taskData without affecting the original taskData and avoiding reactivity issues
+let updatedTaskData = reactive(cloneDeep(taskData.value));
+// Array of objects which models the new fields for the task object being updated
+// This array of objects is later converted back into an object and spread into the updatedTaskData object
+let newFields = reactive([]);
+// Array of objects which models the new fields for the gameConfig object being updated
+// This array of objects is later converted back into an object and spread into the updatedTaskData object
+let addedGameConfig = reactive([]);
+
+watch(taskData, (newVal) => {
+  updatedTaskData = reactive(cloneDeep(newVal));
+});
+
+// Ignore these fields when displaying the task data
+const ignoreFields = ['id', 'lastUpdated', 'gameConfig', 'parentDoc'];
+
+const typeOptions = ['string', 'number', 'boolean'];
+
+const booleanDropDownOptions = [
+  { label: 'true', value: true },
+  { label: 'false', value: false },
+];
+
+const submitted = ref(false);
+const created = ref(false);
 
 let unsubscribe;
 const init = () => {
@@ -204,14 +400,15 @@ onMounted(() => {
   if (roarfirekit.value.restConfig) init();
 });
 
-const { isFetching: isFetchingTasks, data: tasks } = useQuery({
+const { data: tasks } = useQuery({
   queryKey: ['tasks', registeredTasksOnly],
-  queryFn: () => taskFetcher(registeredTasksOnly.value),
+  queryFn: () => taskFetcher(registeredTasksOnly.value, true),
   keepPreviousData: true,
   enabled: initialized,
   staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
+// For modeling a task to submit to the DB
 const taskFields = reactive({
   taskName: '',
   taskURL: '',
@@ -223,12 +420,17 @@ const taskFields = reactive({
   external: isExternalTask,
 });
 
+// Validation rules for task fields
 const taskRules = {
   taskName: { required },
   taskURL: { required: requiredIf(isExternalTask.value), url },
   taskId: { required },
 };
 
+const t$ = useVuelidate(taskRules, taskFields);
+
+// Array of objects which models the game configuration fields
+// This array of objects is later converted back into an object and spread into the task object
 const gameConfig = ref([
   {
     name: '',
@@ -237,6 +439,7 @@ const gameConfig = ref([
   },
 ]);
 
+// Array of objects which models the task parameters and is used to build the task URL
 const taskParams = ref([
   {
     name: '',
@@ -245,69 +448,7 @@ const taskParams = ref([
   },
 ]);
 
-const variantFields = reactive({
-  variantName: '',
-  selectedGame: {},
-  // Based on type of account?
-  external: true,
-});
-
-const variantRules = {
-  variantName: { required },
-  selectedGame: {
-    id: { required },
-  },
-};
-
-// Turn mappedGameConfig into an object {key: value, key: value...} which models gameConfig, filtered for deleted params
-// This builds the object of parameters that will be sent to the DB
-const variantParams = computed(() => {
-  const params = reactive({});
-
-  if (!mappedGameConfig.value) {
-    return params;
-  }
-
-  filteredMappedGameConfig.value.forEach((param) => {
-    params[param.name] = param.value;
-  });
-
-  return params;
-});
-
-// Turn the gameConfig object into an array of key/value pairs [{name: 'key', value: 'value', type: 'type'}...]
-// This allows simplified editing of the gameConfig object
-const mappedGameConfig = computed(() => {
-  // Prevent any errors if selectedGame is not set
-  if (!variantFields.selectedGame?.gameConfig) {
-    return [];
-  }
-
-  return Object.entries(variantFields.selectedGame.gameConfig).map(([key, value]) => ({
-    name: key,
-    type: typeof value,
-    value: value,
-  }));
-});
-
-// Filter out any deleted params
-const filteredMappedGameConfig = computed(() => {
-  if (!mappedGameConfig.value) {
-    return [];
-  }
-
-  return mappedGameConfig.value.filter((param) => !deletedParams.value.includes(param.name));
-});
-
-// Keep track of params that are not needed for the particular variant
-const deletedParams = ref([]);
-
-// Push the name of the param to the deletedParams array,
-// Triggering a computation of the filteredMappedGameConfig and variantParams
-const deleteParam = (param) => {
-  deletedParams.value.push(param);
-};
-
+// For adding a new field to the new task document
 function addField(type) {
   type.push({
     name: '',
@@ -316,21 +457,56 @@ function addField(type) {
   });
 }
 
+// For removing a field from the task document
 function removeField(type, index) {
   type.splice(index, 1);
 }
 
-const typeOptions = ['string', 'number', 'boolean'];
+// Adds a new object to the newFields array, which models a new field for the task object being updated
+const newField = () => {
+  newFields.push({ name: '', value: '', type: 'string' });
+};
 
-const booleanDropDownOptions = [
-  { label: 'true', value: true },
-  { label: 'false', value: false },
-];
+// Removes a field from the newFields or addedGameConfig array
+const removeNewField = (field, array) => {
+  const updatedFields = array.filter((item) => item.name !== field);
+  array.splice(0, array.length, ...updatedFields);
+};
 
-const t$ = useVuelidate(taskRules, taskFields);
-const v$ = useVuelidate(variantRules, variantFields);
-const submitted = ref(false);
-const created = ref(false);
+// Deletes a parameter from the updatedTaskData object
+const deleteParam = (param) => {
+  if (updatedTaskData['gameConfig'][param] !== undefined) {
+    delete updatedTaskData['gameConfig'][param];
+  }
+  delete updatedTaskData[param];
+};
+
+// Adds a new object to the addedGameConfig array, which models a new field for the gameConfig object being updated
+const addGameConfig = () => {
+  addedGameConfig.push({ name: '', value: '', type: 'string' });
+};
+
+const handleUpdateTask = async () => {
+  const convertedFields = convertParamsToObj(newFields);
+  const convertedGameConfig = convertParamsToObj(addedGameConfig);
+  updatedTaskData = {
+    ...updatedTaskData,
+    ...convertedFields,
+    gameConfig: {
+      ...updatedTaskData.gameConfig,
+      ...convertedGameConfig,
+    },
+  };
+
+  try {
+    authStore.roarfirekit.updateTaskOrVariant({ taskId: selectedTask.value, taskData: updatedTaskData });
+    toast.add({ severity: 'success', summary: 'Hoorah!', detail: 'Variant successfully updated.', life: 3000 });
+
+    resetUpdateTaskForm();
+  } catch (error) {
+    console.error(error);
+  }
+};
 
 const handleNewTaskSubmit = async (isFormValid) => {
   submitted.value = true;
@@ -371,57 +547,13 @@ const handleNewTaskSubmit = async (isFormValid) => {
   }
 };
 
-const handleVariantSubmit = async (isFormValid) => {
-  submitted.value = true;
-  const isDemoData = !!variantCheckboxData.value?.find((item) => item === 'isDemoVariant');
-  const isTestData = !!variantCheckboxData.value?.find((item) => item === 'isTestVariant');
-  // const isExternalVariant = !!variantCheckboxData.value?.find((item) => item === 'isExternalVariant');
-  const isRegisteredVariant = !!variantCheckboxData.value?.find((item) => item === 'isRegisteredVariant');
-
-  if (!isFormValid) {
-    return;
-  }
-
-  const newVariantObject = reactive({
-    taskId: variantFields.selectedGame.id,
-    taskDescription: variantFields.selectedGame.description,
-    taskImage: variantFields.selectedGame.image,
-    variantName: variantFields.variantName,
-    variantParams: variantParams,
-    // TODO: Check if this is the valid way to see demo/test data values
-    demoData: { task: !!variantFields.selectedGame?.demoData, variant: isDemoData },
-    testData: { task: !!variantFields.selectedGame?.testData, variant: isTestData },
-    registered: isRegisteredVariant,
-  });
-
-  // I don't think that this is necessary for variants anymore, commenting out for now
-  // if (isExternalVariant) {
-  //   const mappedVariantParams = Object.entries(variantParams.value).map(([key, value]) => ({ key, value }));
-  //   console.log(mappedVariantParams.value)
-  //   newVariantObject.variantParams = {
-  //     ...variantParams,
-  //     variantURL: buildTaskURL(variantFields.selectedGame?.taskURL || '', mappedVariantParams),
-  //   };
-  // }
-
-  // Write variant to Db
-  try {
-    await authStore.roarfirekit.registerTaskVariant({ ...newVariantObject });
-
-    toast.add({ severity: 'success', summary: 'Hoorah!', detail: 'Variant successfully created.', life: 3000 });
-
-    submitted.value = false;
-
-    resetVariantForm();
-  } catch (error) {
-    console.error(error);
-  }
-};
-
 function convertParamsToObj(paramType) {
-  return paramType.value.reduce((acc, item) => {
+  // If the paramType is an array of objects with a key called "value", convert it to an object
+  // Otherwise, just use the paramType object
+  const target = paramType.value !== undefined ? paramType.value : paramType;
+
+  return target.reduce((acc, item) => {
     if (item.name) {
-      // Check if name is not empty
       acc[item.name] = item.value;
     }
     return acc;
@@ -448,21 +580,16 @@ function buildTaskURL(url, params) {
   return completeURL;
 }
 
-function resetVariantForm() {
-  Object.assign(variantFields, {
-    variantName: '',
-    selectedGame: {},
-    external: true,
-  });
+const resetUpdateTaskForm = () => {
+  selectedTask.value = null;
+  updatedTaskData = reactive(cloneDeep(taskData.value));
+  clearFieldConfigArrays();
+};
 
-  variantParams.value = [
-    {
-      name: '',
-      value: '',
-      type: 'String',
-    },
-  ];
-}
+const clearFieldConfigArrays = () => {
+  newFields = reactive([]);
+  addedGameConfig = reactive([]);
+};
 </script>
 
 <style>
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index ce46d9d50..652e0c9c5 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -12,8 +12,9 @@
                 <label for="variant-fields">Select an Existing Task (Task ID) <span class="required">*</span></label>
                 <div class="flex flex-column gap-2 align-items-end">
                   <div class="flex flex-row align-items-center justify-content-end gap-2 flex-order-1">
-                    <label class="ml-7" for="chbx-registeredTask">Search registered tasks only?</label>
-                    <PvCheckbox v-model="registeredTasksOnly" input-id="chbx-registeredTask" :binary="true" />
+                    <!--                    This does not seemt to function properly, comming it out for now.-->
+                    <!--                    <label class="ml-7" for="chbx-registeredTask">Search registered tasks only?</label>-->
+                    <!--                    <PvCheckbox v-model="registeredTasksOnly" input-id="chbx-registeredTask" :binary="true" />-->
                   </div>
                 </div>
               </div>
@@ -25,6 +26,7 @@
                 :loading="isFetchingTasks"
                 :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
                 name="variant-fields"
+                @click="clearFieldParamArrays()"
               ></PvDropdown>
               <span v-if="v$.selectedGame.$error && submitted">
                 <span v-for="(error, index) of v$.selectedGame.$errors" :key="index">
@@ -123,6 +125,41 @@
                   <button type="button" @click="moveToDeletedParams(param.name)">Delete</button>
                 </div>
               </div>
+
+              <div v-if="newParams.length > 0">
+                <div v-for="(field, index) in newParams" :key="index" class="flex align-items-center column-gap-2 mb-1">
+                  <PvInputText v-model="field.name" placeholder="Field Name" />
+                  <PvDropdown
+                    v-model="field.type"
+                    :options="['string', 'number', 'boolean']"
+                    placeholder="Field Type"
+                  />
+
+                  <PvInputText
+                    v-if="field.type === 'string'"
+                    v-model="field.value"
+                    placeholder="Field Value"
+                    class="flex-grow-1"
+                  />
+                  <PvInputNumber
+                    v-if="field.type === 'number'"
+                    v-model="field.value"
+                    placeholder="Field Value"
+                    class="flex-grow-1"
+                  />
+                  <PvDropdown
+                    v-if="field.type === 'boolean'"
+                    v-model="field.value"
+                    placeholder="Field Value"
+                    :options="booleanDropDownOptions"
+                    option-label="label"
+                    option-value="value"
+                    class="flex-grow-1"
+                  />
+                  <PvButton type="button" @click="removeField(field.name, newParams)">Delete</PvButton>
+                </div>
+              </div>
+              <PvButton label="Add Param" text icon="pi pi-plus" @click="newParam" />
             </div>
           </div>
           <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
@@ -145,14 +182,6 @@
               <label class="ml-1 mr-3" for="chbx-testVariant">Mark as <b>Test Variant</b></label>
             </div>
             <div class="flex flex-row align-items-center">
-              <!--              Not sure that we still have any need to mark a variant as external -->
-              <!--              <PvCheckbox-->
-              <!--                v-model="variantCheckboxData"-->
-              <!--                input-id="chbx-externalVariant"-->
-              <!--                name="variantCheckboxData"-->
-              <!--                value="isExternalVariant"-->
-              <!--              />-->
-              <!--              <label class="ml-1 mr-3" for="chbx-externalVariant">Mark as <b>External Variant</b></label>-->
               <div class="flex flex-row align-items-center">
                 <PvCheckbox
                   v-model="variantCheckboxData"
@@ -171,15 +200,20 @@
       </div>
     </PvTabPanel>
 
-    <PvTabPanel header="Edit Variant">
+    <PvTabPanel header="Update Variant">
+      <h1 class="text-center font-bold">Update a Variant</h1>
       <form @submit.prevent="handleUpdateVariant">
-        <section class="flex gap-2 mb-4">
+        <section class="flex flex-column gap-2 mb-4">
+          <label for="variant-fields" class="my-2"
+            >Select an Existing Task and Variant <span class="required">*</span></label
+          >
           <PvDropdown
             v-model="selectedTask"
             :options="tasks"
             option-label="name"
             option-value="id"
             placeholder="Select a Game"
+            @click="clearFieldParamArrays()"
           />
           <PvDropdown
             v-model="selectedVariant"
@@ -187,24 +221,25 @@
             :option-label="(data) => (data.variant.name ? data.variant.name : data.variant.id)"
             option-value="variant"
             placeholder="Select a Variant"
+            @click="clearFieldParamArrays()"
           />
         </section>
 
-        <section v-if="selectedVariant" class="flex flex-column align-items-start gap-4">
-          <div class="flex flex-column">
+        <section v-if="selectedVariant" class="flex flex-column align-items-start mt-4">
+          <div class="flex flex-column w-8">
             <label for="fieldsOutput">
               <strong>Fields</strong>
             </label>
-            <div v-for="(value, key) in selectedVariant" id="fieldsOutput" :key="key" class="">
+            <div v-for="(value, key) in selectedVariant" id="fieldsOutput" :key="key">
               <div v-if="!ignoreFields.includes(key)">
                 <div
                   v-if="updatedVariantData[key] !== undefined"
                   class="flex align-items-center justify-content-between gap-2 mb-1"
                 >
-                  <label :for="key">
+                  <label :for="key" class="w-2">
                     <em>{{ key }}</em>
                   </label>
-                  <PvInputText id="inputEditVariantType" :placeholder="typeof value" disabled class="flex-grow-1" />
+                  <PvInputText id="inputEditVariantType" :placeholder="typeof value" disabled class="w-2" />
                   <PvInputText
                     v-if="typeof value === 'string'"
                     v-model="updatedVariantData[key]"
@@ -257,10 +292,10 @@
                 <PvButton type="button" @click="removeField(field.name, addedFields)">Delete</PvButton>
               </div>
             </div>
-            <PvButton label="Add Field" text icon="pi pi-plus" @click="addField" />
           </div>
+          <PvButton label="Add Field" text icon="pi pi-plus" class="my-4" @click="addField" />
 
-          <div class="flex flex-column">
+          <div class="flex flex-column w-8">
             <label for="paramsOutput">
               <strong>Game Params</strong>
             </label>
@@ -269,10 +304,10 @@
                 v-if="updatedVariantData.params[paramName] !== undefined"
                 class="flex align-items-center justify-content-end column-gap-2"
               >
-                <label :for="paramName">
+                <label :for="paramName" class="w-2">
                   <em>{{ paramName }} </em>
                 </label>
-                <PvInputText id="inputEditParamType" :placeholder="typeof param" class="flex-grow-1" disabled />
+                <PvInputText id="inputEditParamType" :placeholder="typeof param" class="w-2" disabled />
                 <PvInputText
                   v-if="typeof param === 'string'"
                   v-model="updatedVariantData.params[paramName]"
@@ -323,11 +358,11 @@
                 <PvButton type="button" @click="removeField(field.name, addedParams)">Delete</PvButton>
               </div>
             </div>
-            <PvButton label="Add Param" text icon="pi pi-plus" @click="addParam" />
           </div>
+          <PvButton label="Add Param" text icon="pi pi-plus" class="my-4" @click="addParam" />
         </section>
 
-        <PvButton type="submit" class="m-4">Update Variant</PvButton>
+        <PvButton type="submit" class="my-4">Update Variant</PvButton>
       </form>
     </PvTabPanel>
   </PvTabView>
@@ -335,7 +370,7 @@
 
 <script setup>
 import { computed, onMounted, reactive, ref, watch } from 'vue';
-import { required, requiredIf, url } from '@vuelidate/validators';
+import { required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useAuthStore } from '@/store/auth';
 import { useQuery } from '@tanstack/vue-query';
@@ -354,9 +389,25 @@ const { roarfirekit } = storeToRefs(authStore);
 
 const selectedTask = ref(null);
 const selectedVariant = ref(null);
+// Reactive clone for holding changes made to variantData without affecting the original variantData and avoiding reactivity issues
 let updatedVariantData = reactive(cloneDeep(selectedVariant.value));
+// Array of objects which models the new fields added to the variant
+// This array of objects is later converted back into an object and spread into the updatedVariantData object
 let addedFields = reactive([]);
+// Array of objects which models the new params added to the variant
+// This array of objects is later converted back into an object and spread into the updatedVariantData object
 let addedParams = reactive([]);
+// Array of objects which models the new params added to the variant to be created
+// This array of objects is later converted back into an object and spread into the variantParams object
+let newParams = reactive([]);
+
+// Fields to ignore when displaying variant data
+const ignoreFields = ['id', 'lastUpdated', 'params', 'parentDoc'];
+
+const booleanDropDownOptions = [
+  { label: 'true', value: true },
+  { label: 'false', value: false },
+];
 
 watch(selectedVariant, (newVal) => {
   updatedVariantData = reactive(cloneDeep(newVal));
@@ -392,8 +443,7 @@ const { data: allVariants } = useQuery({
   staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
-const ignoreFields = ['id', 'lastUpdated', 'params', 'parentDoc'];
-
+// Filter variants based on selected task
 const filteredVariants = computed(() => {
   if (!allVariants.value || !selectedTask.value) {
     return [];
@@ -402,6 +452,7 @@ const filteredVariants = computed(() => {
   return allVariants.value.filter((variant) => variant.task.id === selectedTask.value);
 });
 
+// Fields for modeling  a new variant
 const variantFields = reactive({
   variantName: '',
   selectedGame: {},
@@ -409,12 +460,15 @@ const variantFields = reactive({
   external: true,
 });
 
+// Validation rules for variantFields
 const variantRules = {
   variantName: { required },
   selectedGame: {
     id: { required },
   },
 };
+const v$ = useVuelidate(variantRules, variantFields);
+const submitted = ref(false);
 
 // Turn mappedGameConfig into an object {key: value, key: value...} which models gameConfig, filtered for deleted params
 // This builds the object of parameters that will be sent to the DB
@@ -447,7 +501,7 @@ const mappedGameConfig = computed(() => {
   }));
 });
 
-// Filter out any deleted params
+// Filter out any deleted params when updating game configuration for the variant
 const filteredMappedGameConfig = computed(() => {
   if (!mappedGameConfig.value) {
     return [];
@@ -456,7 +510,7 @@ const filteredMappedGameConfig = computed(() => {
   return mappedGameConfig.value.filter((param) => !deletedParams.value.includes(param.name));
 });
 
-// Keep track of params that are not needed for the particular variant
+// Keep track of params that are not needed for the particular variant when creating a new variant
 const deletedParams = ref([]);
 
 // Push the name of the param to the deletedParams array,
@@ -465,6 +519,7 @@ const moveToDeletedParams = (param) => {
   deletedParams.value.push(param);
 };
 
+// Delete the param from the updatedVariantData object when updating a variant
 const deleteParam = (param) => {
   if (updatedVariantData['params'][param] !== undefined) {
     delete updatedVariantData['params'][param];
@@ -472,35 +527,28 @@ const deleteParam = (param) => {
   delete updatedVariantData[param];
 };
 
-const booleanDropDownOptions = [
-  { label: 'true', value: true },
-  { label: 'false', value: false },
-];
-
-const v$ = useVuelidate(variantRules, variantFields);
-const submitted = ref(false);
-
+// Add a new field to the updatedVariantData object when updating a variant
 const addField = () => {
   addedFields.push({ name: '', value: '', type: 'string' });
 };
 
+// Remove a field from the addedFields array when updating a variant
 const removeField = (field, array) => {
   const updatedFields = array.filter((item) => item.name !== field);
   array.splice(0, array.length, ...updatedFields);
 };
 
+// Add a new param to the updatedVariantData object when updating a variant
 const addParam = () => {
   addedParams.push({ name: '', value: '', type: 'string' });
 };
 
-const resetUpdateVariantForm = () => {
-  selectedTask.value = null;
-  selectedVariant.value = null;
-  updatedVariantData = {};
-  addedFields = reactive([{}]);
-  addedParams = reactive([{}]);
+// Add a new param to the newParams array when creating a new variant
+const newParam = () => {
+  newParams.push({ name: '', value: '', type: 'string' });
 };
 
+// Convert an array of paramType objects into a single object
 function convertParamsToObj(paramType) {
   return paramType.reduce((acc, item) => {
     if (item.name) {
@@ -524,7 +572,11 @@ const handleUpdateVariant = async () => {
   };
 
   try {
-    authStore.roarfirekit.updateVariant(selectedTask.value, selectedVariant.value.id, updatedVariantData);
+    authStore.roarfirekit.updateTaskOrVariant({
+      taskId: selectedTask.value,
+      variantId: selectedVariant.value.id,
+      variantData: updatedVariantData,
+    });
     toast.add({ severity: 'success', summary: 'Hoorah!', detail: 'Variant successfully updated.', life: 3000 });
 
     resetUpdateVariantForm();
@@ -544,29 +596,25 @@ const handleVariantSubmit = async (isFormValid) => {
     return;
   }
 
+  const convertedParams = convertParamsToObj(newParams);
+
+  const combinedParams = {
+    ...variantParams.value,
+    ...convertedParams,
+  };
+
   const newVariantObject = reactive({
     taskId: variantFields.selectedGame.id,
     taskDescription: variantFields.selectedGame.description,
     taskImage: variantFields.selectedGame.image,
     variantName: variantFields.variantName,
-    variantParams: variantParams,
+    variantParams: combinedParams,
     // TODO: Check if this is the valid way to see demo/test data values
     demoData: { task: !!variantFields.selectedGame?.demoData, variant: isDemoData },
     testData: { task: !!variantFields.selectedGame?.testData, variant: isTestData },
     registered: isRegisteredVariant,
   });
 
-  // I don't think that this is necessary for variants anymore, commenting out for now
-  // if (isExternalVariant) {
-  //   const mappedVariantParams = Object.entries(variantParams.value).map(([key, value]) => ({ key, value }));
-  //   console.log(mappedVariantParams.value)
-  //   newVariantObject.variantParams = {
-  //     ...variantParams,
-  //     variantURL: buildTaskURL(variantFields.selectedGame?.taskURL || '', mappedVariantParams),
-  //   };
-  // }
-
-  // Write variant to Db
   try {
     await authStore.roarfirekit.registerTaskVariant({ ...newVariantObject });
 
@@ -574,33 +622,13 @@ const handleVariantSubmit = async (isFormValid) => {
 
     submitted.value = false;
 
-    resetVariantForm();
+    resetCreateVariantForm();
   } catch (error) {
     console.error(error);
   }
 };
 
-function buildTaskURL(url, params) {
-  const baseURL = url;
-
-  let queryParams = url.includes('/?') ? '' : '/?';
-
-  params.value.forEach((param, i) => {
-    if (param.name) {
-      if (i === 0) {
-        queryParams += `${param.name}=${param.value}`;
-      } else {
-        queryParams += `&${param.name}=${param.value}`;
-      }
-    }
-  });
-
-  const completeURL = baseURL + queryParams;
-
-  return completeURL;
-}
-
-function resetVariantForm() {
+function resetCreateVariantForm() {
   Object.assign(variantFields, {
     variantName: '',
     selectedGame: {},
@@ -614,7 +642,23 @@ function resetVariantForm() {
       type: 'String',
     },
   ];
+
+  variantCheckboxData.value = [];
+  clearFieldParamArrays();
 }
+
+const resetUpdateVariantForm = () => {
+  selectedTask.value = null;
+  selectedVariant.value = null;
+  updatedVariantData = {};
+  clearFieldParamArrays();
+};
+
+const clearFieldParamArrays = () => {
+  addedFields = reactive([]);
+  addedParams = reactive([]);
+  newParams = reactive([]);
+};
 </script>
 
 <style>
@@ -631,8 +675,4 @@ function resetVariantForm() {
   background-color: #2b8ecb;
   color: black;
 }
-
-.delete-btn {
-  padding: 0.8rem;
-}
 </style>
diff --git a/src/helpers/query/tasks.js b/src/helpers/query/tasks.js
index 23485524f..66ac6fdf3 100644
--- a/src/helpers/query/tasks.js
+++ b/src/helpers/query/tasks.js
@@ -5,6 +5,7 @@ import { convertValues, getAxiosInstance, mapFields } from './utils';
 
 export const getTasksRequestBody = ({
   registered = true,
+  allData = false,
   orderBy,
   aggregationQuery,
   pageLimit,
@@ -24,9 +25,11 @@ export const getTasksRequestBody = ({
       requestBody.structuredQuery.offset = page * pageLimit;
     }
 
-    requestBody.structuredQuery.select = {
-      fields: select.map((field) => ({ fieldPath: field })),
-    };
+    if (!allData) {
+      requestBody.structuredQuery.select = {
+        fields: select.map((field) => ({ fieldPath: field })),
+      };
+    }
   }
 
   requestBody.structuredQuery.from = [
@@ -63,13 +66,14 @@ export const getTasksRequestBody = ({
   return requestBody;
 };
 
-export const taskFetcher = async (registered = true, select = ['name', 'gameConfig', 'testData', 'demoData']) => {
+export const taskFetcher = async (registered = true, allData = false, select = ['name', 'testData', 'demoData']) => {
   const axiosInstance = getAxiosInstance('app');
   const requestBody = getTasksRequestBody({
     registered,
+    allData,
     aggregationQuery: false,
     paginate: false,
-    select: select,
+    select: allData ? '' : select,
   });
 
   return axiosInstance.post(':runQuery', requestBody).then(({ data }) => mapFields(data));
diff --git a/src/pages/ManageTasksVariants.vue b/src/pages/ManageTasksVariants.vue
index 1ff4d37da..10e2b4c4d 100644
--- a/src/pages/ManageTasksVariants.vue
+++ b/src/pages/ManageTasksVariants.vue
@@ -26,7 +26,6 @@
 <script setup>
 import ManageTasks from '@/components/tasks/ManageTasks.vue';
 import ManageVariants from '../components/tasks/ManageVariants.vue';
-import { ref } from 'vue';
 </script>
 
 <style scoped>

From 803dbf33d9c12a453f9ea33a10b49249abcd9a57 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Thu, 23 May 2024 15:37:53 -0700
Subject: [PATCH 08/32] update toast message when updating a task

---
 src/components/tasks/ManageTasks.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index 9b8b0d141..25d71856f 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -500,7 +500,7 @@ const handleUpdateTask = async () => {
 
   try {
     authStore.roarfirekit.updateTaskOrVariant({ taskId: selectedTask.value, taskData: updatedTaskData });
-    toast.add({ severity: 'success', summary: 'Hoorah!', detail: 'Variant successfully updated.', life: 3000 });
+    toast.add({ severity: 'success', summary: 'Hoorah!', detail: 'Task successfully updated.', life: 3000 });
 
     resetUpdateTaskForm();
   } catch (error) {

From b9084af00aae8d69dade21ecf81ab09b176a97a5 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Thu, 23 May 2024 15:45:34 -0700
Subject: [PATCH 09/32] change button style

---
 src/components/tasks/ManageVariants.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index 652e0c9c5..3f9d28dce 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -122,7 +122,7 @@
                 </div>
 
                 <div>
-                  <button type="button" @click="moveToDeletedParams(param.name)">Delete</button>
+                  <PvButton type="button" @click="moveToDeletedParams(param.name)">Delete</PvButton>
                 </div>
               </div>
 

From 9d49a6afcf6f6869ad4d56ab6467c947ea11e839 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Thu, 23 May 2024 15:51:52 -0700
Subject: [PATCH 10/32] update button styling on forms

---
 src/components/tasks/ManageTasks.vue    | 6 +++---
 src/components/tasks/ManageVariants.vue | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index 25d71856f..8d0a0a326 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -125,12 +125,12 @@
             </div>
           </div>
 
-          <div class="w-full flex justify-content-end">
+          <div class="w-full flex justify-content-center">
             <div v-if="!isExternalTask" class="w-2">
-              <PvButton label="Add Field" text icon="pi pi-plus" @click="addField(gameConfig)" />
+              <PvButton label="Add Field" text icon="pi pi-plus" @click="addField(gameConfig)" class="my-4" />
             </div>
             <div v-else class="w-2">
-              <PvButton label="Add Field" text icon="pi pi-plus" @click="addField(taskParams)" />
+              <PvButton label="Add Field" text icon="pi pi-plus" @click="addField(taskParams)" class="my-4" />
             </div>
           </div>
           <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index 3f9d28dce..c398ab2b4 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -159,7 +159,7 @@
                   <PvButton type="button" @click="removeField(field.name, newParams)">Delete</PvButton>
                 </div>
               </div>
-              <PvButton label="Add Param" text icon="pi pi-plus" @click="newParam" />
+              <PvButton label="Add Param" text icon="pi pi-plus" @click="newParam" class="w-2 m-auto my-4" />
             </div>
           </div>
           <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">

From 1c1371d19ebe9ded59cbd55135eb10b5876c21b9 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Tue, 28 May 2024 16:05:34 -0700
Subject: [PATCH 11/32] remove w-2 class from add param button

---
 src/components/tasks/ManageVariants.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index c398ab2b4..97885a5ed 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -159,7 +159,7 @@
                   <PvButton type="button" @click="removeField(field.name, newParams)">Delete</PvButton>
                 </div>
               </div>
-              <PvButton label="Add Param" text icon="pi pi-plus" @click="newParam" class="w-2 m-auto my-4" />
+              <PvButton label="Add Param" text icon="pi pi-plus" class="m-auto my-4" @click="newParam" />
             </div>
           </div>
           <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">

From 166db98a663a2a918847ee4d451c765cb9050eb0 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Wed, 29 May 2024 09:53:32 -0700
Subject: [PATCH 12/32] Rebase onto main

---
 roar-firebase-functions | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/roar-firebase-functions b/roar-firebase-functions
index 120b579ec..3186f408d 160000
--- a/roar-firebase-functions
+++ b/roar-firebase-functions
@@ -1 +1 @@
-Subproject commit 120b579ecbb6badaee8ff09f34337ba20d35b070
+Subproject commit 3186f408dbba54d2558b9f4df2b4adbc5cf987fb

From 9664f32a51ff1ebedeeb4b78f2f7c158a1c74c11 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Wed, 29 May 2024 10:41:51 -0700
Subject: [PATCH 13/32] disable edit game params

---
 src/components/tasks/ManageVariants.vue | 134 ++++++++++++------------
 src/helpers/query/tasks.js              |   2 +-
 2 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index 97885a5ed..56b11b897 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -295,71 +295,71 @@
           </div>
           <PvButton label="Add Field" text icon="pi pi-plus" class="my-4" @click="addField" />
 
-          <div class="flex flex-column w-8">
-            <label for="paramsOutput">
-              <strong>Game Params</strong>
-            </label>
-            <div v-for="(param, paramName) in selectedVariant.params" id="paramsOutput" :key="paramName" class="mb-1">
-              <div
-                v-if="updatedVariantData.params[paramName] !== undefined"
-                class="flex align-items-center justify-content-end column-gap-2"
-              >
-                <label :for="paramName" class="w-2">
-                  <em>{{ paramName }} </em>
-                </label>
-                <PvInputText id="inputEditParamType" :placeholder="typeof param" class="w-2" disabled />
-                <PvInputText
-                  v-if="typeof param === 'string'"
-                  v-model="updatedVariantData.params[paramName]"
-                  :placeholder="param"
-                  class="flex-grow-1"
-                />
-                <PvInputNumber
-                  v-else-if="typeof param === 'number'"
-                  v-model="updatedVariantData.params[paramName]"
-                  class="flex-grow-1"
-                />
-                <PvDropdown
-                  v-else-if="typeof param === 'boolean'"
-                  v-model="updatedVariantData.params[paramName]"
-                  :options="booleanDropDownOptions"
-                  option-label="label"
-                  option-value="value"
-                  class="flex-grow-1"
-                />
-                <PvButton type="button" @click="deleteParam(paramName)">Delete</PvButton>
-              </div>
-            </div>
-            <div v-if="addedParams.length > 0">
-              <div v-for="(field, index) in addedParams" :key="index" class="flex align-items-center column-gap-2 mb-1">
-                <PvInputText v-model="field.name" placeholder="Field Name" />
-                <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
-                <PvInputText
-                  v-if="field.type === 'string'"
-                  v-model="field.value"
-                  placeholder="Field Value"
-                  class="flex-grow-1"
-                />
-                <PvInputNumber
-                  v-if="field.type === 'number'"
-                  v-model="field.value"
-                  placeholder="Field Value"
-                  class="flex-grow-1"
-                />
-                <PvDropdown
-                  v-if="field.type === 'boolean'"
-                  v-model="field.value"
-                  placeholder="Field Value"
-                  :options="booleanDropDownOptions"
-                  option-label="label"
-                  option-value="value"
-                  class="flex-grow-1"
-                />
-                <PvButton type="button" @click="removeField(field.name, addedParams)">Delete</PvButton>
-              </div>
-            </div>
-          </div>
-          <PvButton label="Add Param" text icon="pi pi-plus" class="my-4" @click="addParam" />
+          <!--          <div class="flex flex-column w-8">-->
+          <!--            <label for="paramsOutput">-->
+          <!--              <strong>Game Params</strong>-->
+          <!--            </label>-->
+          <!--            <div v-for="(param, paramName) in selectedVariant.params" id="paramsOutput" :key="paramName" class="mb-1">-->
+          <!--              <div-->
+          <!--                v-if="updatedVariantData.params[paramName] !== undefined"-->
+          <!--                class="flex align-items-center justify-content-end column-gap-2"-->
+          <!--              >-->
+          <!--                <label :for="paramName" class="w-2">-->
+          <!--                  <em>{{ paramName }} </em>-->
+          <!--                </label>-->
+          <!--                <PvInputText id="inputEditParamType" :placeholder="typeof param" class="w-2" disabled />-->
+          <!--                <PvInputText-->
+          <!--                  v-if="typeof param === 'string'"-->
+          <!--                  v-model="updatedVariantData.params[paramName]"-->
+          <!--                  :placeholder="param"-->
+          <!--                  class="flex-grow-1"-->
+          <!--                />-->
+          <!--                <PvInputNumber-->
+          <!--                  v-else-if="typeof param === 'number'"-->
+          <!--                  v-model="updatedVariantData.params[paramName]"-->
+          <!--                  class="flex-grow-1"-->
+          <!--                />-->
+          <!--                <PvDropdown-->
+          <!--                  v-else-if="typeof param === 'boolean'"-->
+          <!--                  v-model="updatedVariantData.params[paramName]"-->
+          <!--                  :options="booleanDropDownOptions"-->
+          <!--                  option-label="label"-->
+          <!--                  option-value="value"-->
+          <!--                  class="flex-grow-1"-->
+          <!--                />-->
+          <!--                <PvButton type="button" @click="deleteParam(paramName)">Delete</PvButton>-->
+          <!--              </div>-->
+          <!--            </div>-->
+          <!--            <div v-if="addedParams.length > 0">-->
+          <!--              <div v-for="(field, index) in addedParams" :key="index" class="flex align-items-center column-gap-2 mb-1">-->
+          <!--                <PvInputText v-model="field.name" placeholder="Field Name" />-->
+          <!--                <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />-->
+          <!--                <PvInputText-->
+          <!--                  v-if="field.type === 'string'"-->
+          <!--                  v-model="field.value"-->
+          <!--                  placeholder="Field Value"-->
+          <!--                  class="flex-grow-1"-->
+          <!--                />-->
+          <!--                <PvInputNumber-->
+          <!--                  v-if="field.type === 'number'"-->
+          <!--                  v-model="field.value"-->
+          <!--                  placeholder="Field Value"-->
+          <!--                  class="flex-grow-1"-->
+          <!--                />-->
+          <!--                <PvDropdown-->
+          <!--                  v-if="field.type === 'boolean'"-->
+          <!--                  v-model="field.value"-->
+          <!--                  placeholder="Field Value"-->
+          <!--                  :options="booleanDropDownOptions"-->
+          <!--                  option-label="label"-->
+          <!--                  option-value="value"-->
+          <!--                  class="flex-grow-1"-->
+          <!--                />-->
+          <!--                <PvButton type="button" @click="removeField(field.name, addedParams)">Delete</PvButton>-->
+          <!--              </div>-->
+          <!--            </div>-->
+          <!--          </div>-->
+          <!--          <PvButton label="Add Param" text icon="pi pi-plus" class="my-4" @click="addParam" />-->
         </section>
 
         <PvButton type="submit" class="my-4">Update Variant</PvButton>
@@ -561,13 +561,13 @@ function convertParamsToObj(paramType) {
 
 const handleUpdateVariant = async () => {
   const convertedFields = convertParamsToObj(addedFields);
-  const convertedParams = convertParamsToObj(addedParams);
+  // const convertedParams = convertParamsToObj(addedParams);
   updatedVariantData = {
     ...updatedVariantData,
     ...convertedFields,
     params: {
       ...updatedVariantData.params,
-      ...convertedParams,
+      // ...convertedParams,
     },
   };
 
diff --git a/src/helpers/query/tasks.js b/src/helpers/query/tasks.js
index 66ac6fdf3..bca58fa1e 100644
--- a/src/helpers/query/tasks.js
+++ b/src/helpers/query/tasks.js
@@ -134,7 +134,7 @@ export const variantsFetcher = async (registered = false) => {
   return axiosInstance.post(':runQuery', requestBody).then(async ({ data }) => {
     // Convert to regular object. Second arg is true to return parent doc ID as well.
     const variants = mapFields(data, true);
-
+    console.log('variants', variants);
     // Retrieve all paths to the parent task documents. Note that there will be
     // duplicates so we use _uniq. We also use _without to remove undefined
     // values. The undefined values come from continuation tokens when the query

From 5a88741ac9eba83649167983bcc6d459570a3de1 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Wed, 29 May 2024 12:30:50 -0700
Subject: [PATCH 14/32] update handleUpdateTask function to conform to type
 interface in Firekit

---
 src/components/tasks/ManageTasks.vue    | 17 +++++++------
 src/components/tasks/ManageVariants.vue | 32 +++++++++++++------------
 src/helpers/query/tasks.js              |  2 +-
 3 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index 8d0a0a326..9af482b07 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -489,17 +489,20 @@ const addGameConfig = () => {
 const handleUpdateTask = async () => {
   const convertedFields = convertParamsToObj(newFields);
   const convertedGameConfig = convertParamsToObj(addedGameConfig);
-  updatedTaskData = {
-    ...updatedTaskData,
-    ...convertedFields,
-    gameConfig: {
-      ...updatedTaskData.gameConfig,
-      ...convertedGameConfig,
+  const updateData = {
+    taskId: selectedTask.value,
+    data: {
+      ...updatedTaskData,
+      ...convertedFields,
+      gameConfig: {
+        ...updatedTaskData.gameConfig,
+        ...convertedGameConfig,
+      },
     },
   };
 
   try {
-    authStore.roarfirekit.updateTaskOrVariant({ taskId: selectedTask.value, taskData: updatedTaskData });
+    await authStore.roarfirekit.updateTaskOrVariant(updateData);
     toast.add({ severity: 'success', summary: 'Hoorah!', detail: 'Task successfully updated.', life: 3000 });
 
     resetUpdateTaskForm();
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index 56b11b897..4f37221cd 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -295,6 +295,8 @@
           </div>
           <PvButton label="Add Field" text icon="pi pi-plus" class="my-4" @click="addField" />
 
+          <!--          **** Disabling the function to edit game params for now ****-->
+
           <!--          <div class="flex flex-column w-8">-->
           <!--            <label for="paramsOutput">-->
           <!--              <strong>Game Params</strong>-->
@@ -396,7 +398,7 @@ let updatedVariantData = reactive(cloneDeep(selectedVariant.value));
 let addedFields = reactive([]);
 // Array of objects which models the new params added to the variant
 // This array of objects is later converted back into an object and spread into the updatedVariantData object
-let addedParams = reactive([]);
+// let addedParams = reactive([]);
 // Array of objects which models the new params added to the variant to be created
 // This array of objects is later converted back into an object and spread into the variantParams object
 let newParams = reactive([]);
@@ -539,9 +541,9 @@ const removeField = (field, array) => {
 };
 
 // Add a new param to the updatedVariantData object when updating a variant
-const addParam = () => {
-  addedParams.push({ name: '', value: '', type: 'string' });
-};
+// const addParam = () => {
+//   addedParams.push({ name: '', value: '', type: 'string' });
+// };
 
 // Add a new param to the newParams array when creating a new variant
 const newParam = () => {
@@ -562,21 +564,21 @@ function convertParamsToObj(paramType) {
 const handleUpdateVariant = async () => {
   const convertedFields = convertParamsToObj(addedFields);
   // const convertedParams = convertParamsToObj(addedParams);
-  updatedVariantData = {
-    ...updatedVariantData,
-    ...convertedFields,
-    params: {
-      ...updatedVariantData.params,
-      // ...convertedParams,
+  const updateData = {
+    taskId: selectedTask.value,
+    variantId: selectedVariant.value.id,
+    data: {
+      ...updatedVariantData,
+      ...convertedFields,
+      // params: {
+      //   ...updatedVariantData.params,
+      //   ...convertedParams,
+      // },
     },
   };
 
   try {
-    authStore.roarfirekit.updateTaskOrVariant({
-      taskId: selectedTask.value,
-      variantId: selectedVariant.value.id,
-      variantData: updatedVariantData,
-    });
+    await authStore.roarfirekit.updateTaskOrVariant(updateData);
     toast.add({ severity: 'success', summary: 'Hoorah!', detail: 'Variant successfully updated.', life: 3000 });
 
     resetUpdateVariantForm();
diff --git a/src/helpers/query/tasks.js b/src/helpers/query/tasks.js
index bca58fa1e..66ac6fdf3 100644
--- a/src/helpers/query/tasks.js
+++ b/src/helpers/query/tasks.js
@@ -134,7 +134,7 @@ export const variantsFetcher = async (registered = false) => {
   return axiosInstance.post(':runQuery', requestBody).then(async ({ data }) => {
     // Convert to regular object. Second arg is true to return parent doc ID as well.
     const variants = mapFields(data, true);
-    console.log('variants', variants);
+
     // Retrieve all paths to the parent task documents. Note that there will be
     // duplicates so we use _uniq. We also use _without to remove undefined
     // values. The undefined values come from continuation tokens when the query

From 691d6f39819a31cab49911301baa5077e38fade7 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Wed, 29 May 2024 13:20:05 -0700
Subject: [PATCH 15/32] style changes to various input fields

---
 src/components/tasks/ManageTasks.vue    | 17 +++++++++--------
 src/components/tasks/ManageVariants.vue |  9 +++++----
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index 9af482b07..a086d3728 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -127,10 +127,10 @@
 
           <div class="w-full flex justify-content-center">
             <div v-if="!isExternalTask" class="w-2">
-              <PvButton label="Add Field" text icon="pi pi-plus" @click="addField(gameConfig)" class="my-4" />
+              <PvButton label="Add Field" text icon="pi pi-plus" class="my-4" @click="addField(gameConfig)" />
             </div>
             <div v-else class="w-2">
-              <PvButton label="Add Field" text icon="pi pi-plus" @click="addField(taskParams)" class="my-4" />
+              <PvButton label="Add Field" text icon="pi pi-plus" class="my-4" @click="addField(taskParams)" />
             </div>
           </div>
           <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
@@ -181,7 +181,7 @@
         </section>
 
         <section v-if="taskData" class="flex flex-column align-items-start mt-4">
-          <div class="flex flex-column w-8">
+          <div class="flex flex-column w-full">
             <label for="fieldsOutput">
               <strong>Fields</strong>
             </label>
@@ -191,10 +191,10 @@
                   v-if="updatedTaskData[key] !== undefined"
                   class="flex align-items-center justify-content-between gap-2 mb-1"
                 >
-                  <label :for="key" class="w-2">
+                  <label :for="key" class="w-fit">
                     <em>{{ key }}</em>
                   </label>
-                  <PvInputText :placeholder="typeof value" disabled class="w-2" />
+                  <PvInputText :placeholder="typeof value" disabled class="w-2 text-center" />
 
                   <PvInputText
                     v-if="typeof value === 'string'"
@@ -221,8 +221,8 @@
             </div>
           </div>
 
-          <div v-if="newFields.length > 0">
-            <div v-for="(field, index) in newFields" :key="index" class="flex align-items-center column-gap-2 mb-1">
+          <div v-if="newFields.length > 0" class="w-full">
+            <div v-for="(field, index) in newFields" :key="index" class="flex align-items-center mb-1">
               <PvInputText v-model="field.name" placeholder="Field Name" />
               <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
 
@@ -402,7 +402,8 @@ onMounted(() => {
 
 const { data: tasks } = useQuery({
   queryKey: ['tasks', registeredTasksOnly],
-  queryFn: () => taskFetcher(registeredTasksOnly.value, true),
+  // non-registered tasks, all data
+  queryFn: () => taskFetcher(false, true),
   keepPreviousData: true,
   enabled: initialized,
   staleTime: 5 * 60 * 1000, // 5 minutes
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index 4f37221cd..62b257b60 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -226,7 +226,7 @@
         </section>
 
         <section v-if="selectedVariant" class="flex flex-column align-items-start mt-4">
-          <div class="flex flex-column w-8">
+          <div class="flex flex-column w-full">
             <label for="fieldsOutput">
               <strong>Fields</strong>
             </label>
@@ -236,10 +236,10 @@
                   v-if="updatedVariantData[key] !== undefined"
                   class="flex align-items-center justify-content-between gap-2 mb-1"
                 >
-                  <label :for="key" class="w-2">
+                  <label :for="key" class="w-fit">
                     <em>{{ key }}</em>
                   </label>
-                  <PvInputText id="inputEditVariantType" :placeholder="typeof value" disabled class="w-2" />
+                  <PvInputText id="inputEditVariantType" :placeholder="typeof value" disabled class="w-2 text-center" />
                   <PvInputText
                     v-if="typeof value === 'string'"
                     v-model="updatedVariantData[key]"
@@ -263,7 +263,8 @@
                 </div>
               </div>
             </div>
-            <div v-if="addedFields.length > 0">
+
+            <div v-if="addedFields.length > 0" class="w-full">
               <div v-for="(field, index) in addedFields" :key="index" class="flex align-items-center column-gap-2 mb-1">
                 <PvInputText v-model="field.name" placeholder="Field Name" />
                 <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />

From e5cadaa138a53cba73c7f83c37c0a15b43f8c2b3 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Wed, 29 May 2024 13:26:38 -0700
Subject: [PATCH 16/32] update comments

---
 src/components/tasks/ManageVariants.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index 62b257b60..064d52f57 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -397,11 +397,13 @@ let updatedVariantData = reactive(cloneDeep(selectedVariant.value));
 // Array of objects which models the new fields added to the variant
 // This array of objects is later converted back into an object and spread into the updatedVariantData object
 let addedFields = reactive([]);
+
 // Array of objects which models the new params added to the variant
 // This array of objects is later converted back into an object and spread into the updatedVariantData object
 // let addedParams = reactive([]);
 // Array of objects which models the new params added to the variant to be created
 // This array of objects is later converted back into an object and spread into the variantParams object
+
 let newParams = reactive([]);
 
 // Fields to ignore when displaying variant data

From c62a7eaae814face0ba5350035eb6b5c9988002e Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Wed, 29 May 2024 13:55:06 -0700
Subject: [PATCH 17/32] use task name when creating a new variant rather than
 task id

---
 src/components/tasks/ManageVariants.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index 064d52f57..b125973af 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -9,7 +9,7 @@
           <div class="flex flex-column row-gap-3">
             <section class="form-section">
               <div class="flex justify-content-between align-items-center">
-                <label for="variant-fields">Select an Existing Task (Task ID) <span class="required">*</span></label>
+                <label for="variant-fields">Select an Existing Task <span class="required">*</span></label>
                 <div class="flex flex-column gap-2 align-items-end">
                   <div class="flex flex-row align-items-center justify-content-end gap-2 flex-order-1">
                     <!--                    This does not seemt to function properly, comming it out for now.-->
@@ -21,7 +21,7 @@
               <PvDropdown
                 v-model="v$.selectedGame.$model"
                 :options="tasks"
-                option-label="id"
+                option-label="name"
                 placeholder="Select a Game"
                 :loading="isFetchingTasks"
                 :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
@@ -661,7 +661,7 @@ const resetUpdateVariantForm = () => {
 
 const clearFieldParamArrays = () => {
   addedFields = reactive([]);
-  addedParams = reactive([]);
+  // addedParams = reactive([]);
   newParams = reactive([]);
 };
 </script>

From 6d8026bb98fe5435056239749b21227ef4573c84 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Wed, 29 May 2024 14:07:27 -0700
Subject: [PATCH 18/32] button styling

---
 src/components/tasks/ManageTasks.vue    |  2 +-
 src/components/tasks/ManageVariants.vue | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index a086d3728..684050f3f 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -222,7 +222,7 @@
           </div>
 
           <div v-if="newFields.length > 0" class="w-full">
-            <div v-for="(field, index) in newFields" :key="index" class="flex align-items-center mb-1">
+            <div v-for="(field, index) in newFields" :key="index" class="flex align-items-center column-gap-2 mb-1">
               <PvInputText v-model="field.name" placeholder="Field Name" />
               <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
 
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index b125973af..14760fbe0 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -103,6 +103,7 @@
                     id="inputParamValue"
                     v-model="variantParams[param.name]"
                     placeholder="Set game parameter to desired value"
+                    class="flex-grow-1"
                   />
                   <PvDropdown
                     v-else-if="param.type === 'boolean'"
@@ -112,12 +113,14 @@
                     option-label="label"
                     option-value="value"
                     placeholder="Set game parameter to desired value"
+                    class="flex-grow-1"
                   />
                   <PvInputNumber
                     v-else-if="param.type === 'number'"
                     id="inputParamValue"
                     v-model="variantParams[param.name]"
                     placeholder="Set game parameter to desired value"
+                    class="flex-grow-1"
                   />
                 </div>
 
@@ -126,13 +129,14 @@
                 </div>
               </div>
 
-              <div v-if="newParams.length > 0">
+              <div v-if="newParams.length > 0" class="w-full">
                 <div v-for="(field, index) in newParams" :key="index" class="flex align-items-center column-gap-2 mb-1">
                   <PvInputText v-model="field.name" placeholder="Field Name" />
                   <PvDropdown
                     v-model="field.type"
                     :options="['string', 'number', 'boolean']"
                     placeholder="Field Type"
+                    class="flex-grow-1"
                   />
 
                   <PvInputText
@@ -156,10 +160,10 @@
                     option-value="value"
                     class="flex-grow-1"
                   />
-                  <PvButton type="button" @click="removeField(field.name, newParams)">Delete</PvButton>
+                  <PvButton type="button" class="w-2" @click="removeField(field.name, newParams)">Delete</PvButton>
                 </div>
               </div>
-              <PvButton label="Add Param" text icon="pi pi-plus" class="m-auto my-4" @click="newParam" />
+              <PvButton label="Add Param" text icon="pi pi-plus" class="m-auto my-4 w-2" @click="newParam" />
             </div>
           </div>
           <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">

From 6e6167e420f1f7fcc34b76928040f8602eb19755 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Wed, 29 May 2024 15:50:24 -0700
Subject: [PATCH 19/32] adjust width of param labels, right justify parm type
 text

---
 src/components/tasks/ManageTasks.vue    | 4 ++--
 src/components/tasks/ManageVariants.vue | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index 684050f3f..4c9a875da 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -191,10 +191,10 @@
                   v-if="updatedTaskData[key] !== undefined"
                   class="flex align-items-center justify-content-between gap-2 mb-1"
                 >
-                  <label :for="key" class="w-fit">
+                  <label :for="key" class="w-1">
                     <em>{{ key }}</em>
                   </label>
-                  <PvInputText :placeholder="typeof value" disabled class="w-2 text-center" />
+                  <PvInputText :placeholder="typeof value" class="text-right" disabled />
 
                   <PvInputText
                     v-if="typeof value === 'string'"
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index 14760fbe0..e28a9ba1d 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -163,7 +163,7 @@
                   <PvButton type="button" class="w-2" @click="removeField(field.name, newParams)">Delete</PvButton>
                 </div>
               </div>
-              <PvButton label="Add Param" text icon="pi pi-plus" class="m-auto my-4 w-2" @click="newParam" />
+              <PvButton label="Add Param" text icon="pi pi-plus" class="m-auto my-4" @click="newParam" />
             </div>
           </div>
           <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
@@ -240,10 +240,10 @@
                   v-if="updatedVariantData[key] !== undefined"
                   class="flex align-items-center justify-content-between gap-2 mb-1"
                 >
-                  <label :for="key" class="w-fit">
+                  <label :for="key" class="w-1">
                     <em>{{ key }}</em>
                   </label>
-                  <PvInputText id="inputEditVariantType" :placeholder="typeof value" disabled class="w-2 text-center" />
+                  <PvInputText id="inputEditVariantType" :placeholder="typeof value" disabled class="text-right" />
                   <PvInputText
                     v-if="typeof value === 'string'"
                     v-model="updatedVariantData[key]"

From 08ec636428a2429b12aa20ebeb7a0b8f94d3c422 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Wed, 29 May 2024 15:55:43 -0700
Subject: [PATCH 20/32] move add param button out of flex div and set w-2

---
 src/components/tasks/ManageVariants.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index e28a9ba1d..38c26192b 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -163,8 +163,8 @@
                   <PvButton type="button" class="w-2" @click="removeField(field.name, newParams)">Delete</PvButton>
                 </div>
               </div>
-              <PvButton label="Add Param" text icon="pi pi-plus" class="m-auto my-4" @click="newParam" />
             </div>
+            <PvButton label="Add Param" text icon="pi pi-plus" class="w-2 m-auto my-4" @click="newParam" />
           </div>
           <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
             <div class="flex flex-row align-items-center">

From 6598048e26285b74547ec3861fe9280b44efd886 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Fri, 7 Jun 2024 14:56:09 -0700
Subject: [PATCH 21/32] update error handling

---
 package-lock.json                       | 14 ++---
 package.json                            |  2 +-
 src/components/tasks/ManageTasks.vue    | 60 ++++++++++++++++++++-
 src/components/tasks/ManageVariants.vue | 72 +++++++++++++++++++++++--
 4 files changed, 135 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 83b09c7bf..c8683a92f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "2.7.3",
       "dependencies": {
         "@bdelab/roam-fluency": "1.11.21",
-        "@bdelab/roar-firekit": "^6.0.1",
+        "@bdelab/roar-firekit": "^6.1.2",
         "@bdelab/roar-letter": "^1.11.4",
         "@bdelab/roar-multichoice": "^1.11.3",
         "@bdelab/roar-pa": "2.2.4",
@@ -1692,9 +1692,9 @@
       }
     },
     "node_modules/@bdelab/roar-firekit": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@bdelab/roar-firekit/-/roar-firekit-6.0.1.tgz",
-      "integrity": "sha512-0NpIcMOoDt9dc7ElBAbbWast8BdKiwlvyQTvW4k3841R2tNl5ZR3BC7a9qNv8smc3h2qOpbonw/6fURxaaQS5Q==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@bdelab/roar-firekit/-/roar-firekit-6.1.2.tgz",
+      "integrity": "sha512-RWRDsw4C521Irj4iJrL/hOGthoXlbCHbT5CUGxWbPytTykbC3XCBynpWpErYItNOb4zRTuhAJBWUGvZZloUDvQ==",
       "dependencies": {
         "@bdelab/roar-firekit": "^4.1.1",
         "crc-32": "^1.2.2",
@@ -31742,9 +31742,9 @@
       }
     },
     "@bdelab/roar-firekit": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@bdelab/roar-firekit/-/roar-firekit-6.0.1.tgz",
-      "integrity": "sha512-0NpIcMOoDt9dc7ElBAbbWast8BdKiwlvyQTvW4k3841R2tNl5ZR3BC7a9qNv8smc3h2qOpbonw/6fURxaaQS5Q==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@bdelab/roar-firekit/-/roar-firekit-6.1.2.tgz",
+      "integrity": "sha512-RWRDsw4C521Irj4iJrL/hOGthoXlbCHbT5CUGxWbPytTykbC3XCBynpWpErYItNOb4zRTuhAJBWUGvZZloUDvQ==",
       "requires": {
         "@bdelab/roar-firekit": "^4.1.1",
         "crc-32": "^1.2.2",
diff --git a/package.json b/package.json
index 1afed4a7f..b93e8a4e5 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@bdelab/roam-fluency": "1.11.21",
-    "@bdelab/roar-firekit": "^6.0.1",
+    "@bdelab/roar-firekit": "^6.1.2",
     "@bdelab/roar-letter": "^1.11.4",
     "@bdelab/roar-multichoice": "^1.11.3",
     "@bdelab/roar-pa": "2.2.4",
diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index 4c9a875da..2395f6b00 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -168,12 +168,12 @@
 
     <PvTabPanel header="Update Task">
       <h1 class="text-center font-bold">Update a Task</h1>
-      <form @submit.prevent="handleUpdateTask">
+      <form @submit.prevent="handleUpdateTask()">
         <section class="flex flex-column gap-2 mb-4">
           <label for="variant-fields" class="my-2">Select an Existing Task<span class="required">*</span></label>
           <PvDropdown
             v-model="selectedTask"
-            :options="tasks"
+            :options="formattedTasks"
             option-label="name"
             option-value="id"
             placeholder="Select a Task"
@@ -409,6 +409,16 @@ const { data: tasks } = useQuery({
   staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
+const formattedTasks = computed(() => {
+  if (!tasks.value) return [];
+  return tasks.value.map((task) => {
+    return {
+      name: task.taskName ?? task.id,
+      ...task,
+    };
+  });
+});
+
 // For modeling a task to submit to the DB
 const taskFields = reactive({
   taskName: '',
@@ -487,7 +497,53 @@ const addGameConfig = () => {
   addedGameConfig.push({ name: '', value: '', type: 'string' });
 };
 
+const checkForDuplicates = (newItemsArray, currentDataObject) => {
+  const keys = Object.keys(currentDataObject);
+  for (const newItem of newItemsArray) {
+    if (keys.includes(newItem.name)) {
+      return { isDuplicate: true, duplicateField: newItem.name };
+    }
+  }
+  return { isDuplicate: false, duplicateField: '' };
+};
+
+const checkForErrors = () => {
+  console.log('Checking for errors...');
+  if (!selectedTask.value) {
+    toast.add({ severity: 'error', summary: 'Oops!', detail: 'Please select a task to update.', life: 3000 });
+    return true;
+  }
+
+  if (newFields.length > 0) {
+    const { isDuplicate, duplicateField } = checkForDuplicates(newFields, updatedTaskData);
+    if (isDuplicate) {
+      toast.add({
+        severity: 'error',
+        summary: 'Oops!',
+        detail: `Duplicate field name detected: ${duplicateField}.`,
+        life: 3000,
+      });
+      return true;
+    }
+  }
+
+  if (addedGameConfig.length > 0) {
+    const { isDuplicate, duplicateField } = checkForDuplicates(addedGameConfig, updatedTaskData.gameConfig);
+    if (isDuplicate) {
+      toast.add({
+        severity: 'error',
+        summary: 'Oops!',
+        detail: `Duplicate field name detected: ${duplicateField}.`,
+        life: 3000,
+      });
+      return true;
+    }
+  }
+};
+
 const handleUpdateTask = async () => {
+  if (checkForErrors()) return;
+
   const convertedFields = convertParamsToObj(newFields);
   const convertedGameConfig = convertParamsToObj(addedGameConfig);
   const updateData = {
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index 38c26192b..51ac24b18 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -20,7 +20,7 @@
               </div>
               <PvDropdown
                 v-model="v$.selectedGame.$model"
-                :options="tasks"
+                :options="formattedTasks"
                 option-label="name"
                 placeholder="Select a Game"
                 :loading="isFetchingTasks"
@@ -206,14 +206,14 @@
 
     <PvTabPanel header="Update Variant">
       <h1 class="text-center font-bold">Update a Variant</h1>
-      <form @submit.prevent="handleUpdateVariant">
+      <form @submit.prevent="handleUpdateVariant()">
         <section class="flex flex-column gap-2 mb-4">
           <label for="variant-fields" class="my-2"
             >Select an Existing Task and Variant <span class="required">*</span></label
           >
           <PvDropdown
             v-model="selectedTask"
-            :options="tasks"
+            :options="formattedTasks"
             option-label="name"
             option-value="id"
             placeholder="Select a Game"
@@ -452,6 +452,16 @@ const { data: allVariants } = useQuery({
   staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
+const formattedTasks = computed(() => {
+  if (!tasks.value) return [];
+  return tasks.value.map((task) => {
+    return {
+      name: task.taskName ?? task.id,
+      ...task,
+    };
+  });
+});
+
 // Filter variants based on selected task
 const filteredVariants = computed(() => {
   if (!allVariants.value || !selectedTask.value) {
@@ -568,7 +578,61 @@ function convertParamsToObj(paramType) {
   }, {});
 }
 
+const checkForDuplicates = (newItemsArray, currentDataObject) => {
+  const keys = Object.keys(currentDataObject);
+  for (const newItem of newItemsArray) {
+    if (keys.includes(newItem.name)) {
+      return { isDuplicate: true, duplicateField: newItem.name };
+    }
+  }
+  return { isDuplicate: false, duplicateField: '' };
+};
+
+const checkForErrors = () => {
+  console.log('Checking for errors...');
+
+  if (addedFields.length > 0) {
+    const { isDuplicate, duplicateField } = checkForDuplicates(addedFields, updatedVariantData);
+    if (isDuplicate) {
+      toast.add({
+        severity: 'error',
+        summary: 'Oops!',
+        detail: `Duplicate field name detected: ${duplicateField}.`,
+        life: 3000,
+      });
+      return true;
+    }
+  }
+
+  if (newParams.length > 0) {
+    const { isDuplicate, duplicateField } = checkForDuplicates(newParams, variantParams.value);
+    if (isDuplicate) {
+      toast.add({
+        severity: 'error',
+        summary: 'Oops!',
+        detail: `Duplicate field name detected: ${duplicateField}.`,
+        life: 3000,
+      });
+      return true;
+    }
+  }
+};
+
 const handleUpdateVariant = async () => {
+  if (checkForErrors()) return;
+
+  // Additional error checking; could be combined into checkForErrors()
+  // With some additional logic
+  if (!selectedTask.value) {
+    toast.add({ severity: 'error', summary: 'Invalid Form', detail: 'Please select a task.', life: 3000 });
+    return;
+  }
+
+  if (!selectedVariant.value) {
+    toast.add({ severity: 'error', summary: 'Invalid Form', detail: 'Please select a variant.', life: 3000 });
+    return;
+  }
+
   const convertedFields = convertParamsToObj(addedFields);
   // const convertedParams = convertParamsToObj(addedParams);
   const updateData = {
@@ -595,6 +659,8 @@ const handleUpdateVariant = async () => {
 };
 
 const handleVariantSubmit = async (isFormValid) => {
+  if (checkForErrors()) return;
+
   submitted.value = true;
   const isDemoData = !!variantCheckboxData.value?.find((item) => item === 'isDemoVariant');
   const isTestData = !!variantCheckboxData.value?.find((item) => item === 'isTestVariant');

From ca20c9424a4477cc8d88def39ba1f24892fa9b4c Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Fri, 7 Jun 2024 15:40:46 -0700
Subject: [PATCH 22/32] set form labels to small and bold text; width and text
 alignment styling on form fields

---
 src/components/tasks/ManageTasks.vue    | 36 ++++++++++++++++++-------
 src/components/tasks/ManageVariants.vue | 26 +++++++++++++-----
 src/pages/ManageTasksVariants.vue       |  2 +-
 3 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index 2395f6b00..7cf380caa 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -10,7 +10,10 @@
           <div class="flex flex-column row-gap-3">
             <section class="form-section">
               <div class="p-input-icon-right">
-                <label for="taskName">Task Name <span class="required">*</span></label>
+                <label for="taskName">
+                  <small class="text-gray-400 font-bold">Task Name </small>
+                  <span class="required">*</span></label
+                >
                 <PvInputText
                   v-model="t$.taskName.$model"
                   name="taskName"
@@ -30,7 +33,10 @@
             <!-- Task ID -->
             <section class="form-section">
               <div class="p-input-icon-right">
-                <label for="taskId">Task ID <span class="required">*</span></label>
+                <label for="taskId">
+                  <small class="text-gray-400 font-bold">Task ID </small>
+                  <span class="required">*</span></label
+                >
                 <PvInputText
                   v-model="t$.taskId.$model"
                   name="taskId"
@@ -50,21 +56,28 @@
             <!-- Cover Image -->
             <section class="form-section">
               <div>
-                <label for="coverImage">Cover Image (URL)</label>
+                <label for="coverImage">
+                  <small class="text-gray-400 font-bold">Cover Image (URL)</small>
+                </label>
                 <PvInputText v-model="taskFields.coverImage" name="coverImage" />
               </div>
             </section>
             <!--Description-->
             <section class="form-section">
               <div class="p-input-icon-right">
-                <label for="description">Description </label>
+                <label for="description">
+                  <small class="text-gray-400 font-bold">Description</small>
+                </label>
                 <PvInputText v-model="taskFields.description" name="description" />
               </div>
             </section>
             <!--Task URL-->
             <section class="form-section">
               <div v-if="isExternalTask">
-                <label for="taskURL">Task URL <span class="required">*</span></label>
+                <label for="taskURL">
+                  <small class="text-gray-400 font-bold">Task URL </small>
+                  <span class="required">*</span></label
+                >
                 <PvInputText
                   v-model="t$.taskURL.$model"
                   name="taskURL"
@@ -84,7 +97,9 @@
           </div>
 
           <div v-if="!isExternalTask">
-            <h3 class="text-center">Configure Game Parameters</h3>
+            <h3 class="text-center">
+              <strong>Configure Game Parameters</strong>
+            </h3>
             <h4 class="text-center">Create the configurable game parameters for variants of this task.</h4>
             <div v-for="(param, index) in gameConfig" :key="index">
               <div class="flex gap-2 align-content-start flex-grow-0 params-container">
@@ -170,7 +185,10 @@
       <h1 class="text-center font-bold">Update a Task</h1>
       <form @submit.prevent="handleUpdateTask()">
         <section class="flex flex-column gap-2 mb-4">
-          <label for="variant-fields" class="my-2">Select an Existing Task<span class="required">*</span></label>
+          <label for="variant-fields" class="my-2">
+            <small class="text-gray-400 font-bold">Select an Existing Task </small>
+            <span class="required">*</span></label
+          >
           <PvDropdown
             v-model="selectedTask"
             :options="formattedTasks"
@@ -194,7 +212,7 @@
                   <label :for="key" class="w-1">
                     <em>{{ key }}</em>
                   </label>
-                  <PvInputText :placeholder="typeof value" class="text-right" disabled />
+                  <PvInputText :placeholder="typeof value" class="w-2 text-center" disabled />
 
                   <PvInputText
                     v-if="typeof value === 'string'"
@@ -269,7 +287,7 @@
                 <label :for="paramName" class="w-2">
                   <em>{{ paramName }} </em>
                 </label>
-                <PvInputText id="inputEditParamType" :placeholder="typeof param" class="w-2" disabled />
+                <PvInputText id="inputEditParamType" :placeholder="typeof param" class="w-2 text-center" disabled />
                 <PvInputText
                   v-if="typeof param === 'string'"
                   v-model="updatedTaskData.gameConfig[paramName]"
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index 51ac24b18..f29b08cca 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -9,7 +9,10 @@
           <div class="flex flex-column row-gap-3">
             <section class="form-section">
               <div class="flex justify-content-between align-items-center">
-                <label for="variant-fields">Select an Existing Task <span class="required">*</span></label>
+                <label for="variant-fields">
+                  <small class="text-gray-400 font-bold">Select an Existing Task </small>
+                  <span class="required">*</span></label
+                >
                 <div class="flex flex-column gap-2 align-items-end">
                   <div class="flex flex-row align-items-center justify-content-end gap-2 flex-order-1">
                     <!--                    This does not seemt to function properly, comming it out for now.-->
@@ -43,7 +46,10 @@
 
             <section class="form-section">
               <div class="p-input-icon-right">
-                <label for="variantName">Variant Name <span class="required">*</span></label>
+                <label for="variantName">
+                  <small class="text-gray-400 font-bold">Variant Name </small>
+                  <span class="required">*</span></label
+                >
                 <PvInputText
                   v-model="v$.variantName.$model"
                   name="variantName"
@@ -66,7 +72,9 @@
           </div>
 
           <div class="flex flex-column align-items-center">
-            <h3 class="text-center">Configure Game Parameters</h3>
+            <h3 class="text-center">
+              <strong>Configure Game Parameters</strong>
+            </h3>
             <h4 class="text-center">
               Set the game parameters for a new variant of task <strong>{{ variantFields.selectedGame.id }}</strong>
             </h4>
@@ -208,8 +216,9 @@
       <h1 class="text-center font-bold">Update a Variant</h1>
       <form @submit.prevent="handleUpdateVariant()">
         <section class="flex flex-column gap-2 mb-4">
-          <label for="variant-fields" class="my-2"
-            >Select an Existing Task and Variant <span class="required">*</span></label
+          <label for="task-select" class="my-2">
+            <small class="text-gray-400 font-bold">Select an Existing Task </small>
+            <span class="required">*</span></label
           >
           <PvDropdown
             v-model="selectedTask"
@@ -219,6 +228,10 @@
             placeholder="Select a Game"
             @click="clearFieldParamArrays()"
           />
+          <label for="variant-select" class="my-2">
+            <small class="text-gray-400 font-bold">Select an Existing Variant </small>
+            <span class="required">*</span></label
+          >
           <PvDropdown
             v-model="selectedVariant"
             :options="filteredVariants"
@@ -243,7 +256,7 @@
                   <label :for="key" class="w-1">
                     <em>{{ key }}</em>
                   </label>
-                  <PvInputText id="inputEditVariantType" :placeholder="typeof value" disabled class="text-right" />
+                  <PvInputText id="inputEditVariantType" :placeholder="typeof value" disabled class="w-2 text-center" />
                   <PvInputText
                     v-if="typeof value === 'string'"
                     v-model="updatedVariantData[key]"
@@ -684,7 +697,6 @@ const handleVariantSubmit = async (isFormValid) => {
     taskImage: variantFields.selectedGame.image,
     variantName: variantFields.variantName,
     variantParams: combinedParams,
-    // TODO: Check if this is the valid way to see demo/test data values
     demoData: { task: !!variantFields.selectedGame?.demoData, variant: isDemoData },
     testData: { task: !!variantFields.selectedGame?.testData, variant: isTestData },
     registered: isRegisteredVariant,
diff --git a/src/pages/ManageTasksVariants.vue b/src/pages/ManageTasksVariants.vue
index 10e2b4c4d..d22c6968d 100644
--- a/src/pages/ManageTasksVariants.vue
+++ b/src/pages/ManageTasksVariants.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import ManageTasks from '@/components/tasks/ManageTasks.vue';
+import ManageTasks from '../components/tasks/ManageTasks.vue';
 import ManageVariants from '../components/tasks/ManageVariants.vue';
 </script>
 

From 2b2e04cbe3acb99b437600ffb1d4783df8484984 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Fri, 7 Jun 2024 15:47:17 -0700
Subject: [PATCH 23/32] add helpful comments for new functions

---
 src/components/tasks/ManageTasks.vue    | 6 ++++++
 src/components/tasks/ManageVariants.vue | 5 +++++
 2 files changed, 11 insertions(+)

diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index 7cf380caa..051f9e31f 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -515,6 +515,8 @@ const addGameConfig = () => {
   addedGameConfig.push({ name: '', value: '', type: 'string' });
 };
 
+// Takes the array of objects that will be added to the current data object in Firestore
+// and checks if any of the new fields are duplicates of existing fields to prevent overwriting data
 const checkForDuplicates = (newItemsArray, currentDataObject) => {
   const keys = Object.keys(currentDataObject);
   for (const newItem of newItemsArray) {
@@ -525,6 +527,8 @@ const checkForDuplicates = (newItemsArray, currentDataObject) => {
   return { isDuplicate: false, duplicateField: '' };
 };
 
+// Helper function to check for errors before updating a task
+// Returns true if there are errors, false if there are none
 const checkForErrors = () => {
   console.log('Checking for errors...');
   if (!selectedTask.value) {
@@ -557,9 +561,11 @@ const checkForErrors = () => {
       return true;
     }
   }
+  return false;
 };
 
 const handleUpdateTask = async () => {
+  // Check for errors before updating the task; end function if errors are found
   if (checkForErrors()) return;
 
   const convertedFields = convertParamsToObj(newFields);
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index f29b08cca..ee8d9f2db 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -591,6 +591,8 @@ function convertParamsToObj(paramType) {
   }, {});
 }
 
+// Takes the array of objects that will be added to the current data object in Firestore
+// and checks if any of the new fields are duplicates of existing fields to prevent overwriting data
 const checkForDuplicates = (newItemsArray, currentDataObject) => {
   const keys = Object.keys(currentDataObject);
   for (const newItem of newItemsArray) {
@@ -601,6 +603,8 @@ const checkForDuplicates = (newItemsArray, currentDataObject) => {
   return { isDuplicate: false, duplicateField: '' };
 };
 
+// Helper function to check for errors before updating a task
+// Returns true if there are errors, false if there are none
 const checkForErrors = () => {
   console.log('Checking for errors...');
 
@@ -632,6 +636,7 @@ const checkForErrors = () => {
 };
 
 const handleUpdateVariant = async () => {
+  // Check for errors before updating a variant; end function if errors are found
   if (checkForErrors()) return;
 
   // Additional error checking; could be combined into checkForErrors()

From 1b1f410cc14273e8a0caeec2884692bc114477a8 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Tue, 18 Jun 2024 12:48:43 -0700
Subject: [PATCH 24/32] handle the case where gameConfig is empty and is
 attempting to be updated.

---
 src/components/tasks/ManageTasks.vue    | 2 ++
 src/components/tasks/ManageVariants.vue | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index 051f9e31f..d803a9984 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -518,6 +518,8 @@ const addGameConfig = () => {
 // Takes the array of objects that will be added to the current data object in Firestore
 // and checks if any of the new fields are duplicates of existing fields to prevent overwriting data
 const checkForDuplicates = (newItemsArray, currentDataObject) => {
+  if (currentDataObject === undefined) return { isDuplicate: false, duplicateField: '' };
+
   const keys = Object.keys(currentDataObject);
   for (const newItem of newItemsArray) {
     if (keys.includes(newItem.name)) {
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index ee8d9f2db..66412baac 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -594,6 +594,8 @@ function convertParamsToObj(paramType) {
 // Takes the array of objects that will be added to the current data object in Firestore
 // and checks if any of the new fields are duplicates of existing fields to prevent overwriting data
 const checkForDuplicates = (newItemsArray, currentDataObject) => {
+  if (currentDataObject === undefined) return { isDuplicate: false, duplicateField: '' };
+
   const keys = Object.keys(currentDataObject);
   for (const newItem of newItemsArray) {
     if (keys.includes(newItem.name)) {

From 3881ea58943f20d6b565642e658e2e15991f1328 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Tue, 18 Jun 2024 14:54:39 -0700
Subject: [PATCH 25/32] prevent modified variant fields from being overwritten
 when deleting a parameter

---
 src/components/tasks/ManageVariants.vue | 36 ++++++++++++-------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index 66412baac..32d20b066 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -89,11 +89,11 @@
             variantParams[param.name] returns the value of variantParams.someParam,which is the value that we want to change for a new variant
 -->
               <div
-                v-for="(param, index) in filteredMappedGameConfig"
+                v-for="(param, index) in mappedGameConfig"
                 :key="index"
                 class="flex align-items-center justify-content-center dynamic-param-container gap-4"
               >
-                <div class="flex align-items-center">
+                <div v-if="!deletedParams.includes(param.name)" class="flex align-items-center">
                   <label for="inputParamName">Parameter:</label>
 
                   <PvInputText id="inputParamName" v-model="variantParams[param.name]" :value="param.name" disabled />
@@ -144,20 +144,20 @@
                     v-model="field.type"
                     :options="['string', 'number', 'boolean']"
                     placeholder="Field Type"
-                    class="flex-grow-1"
+                    class="w-fit"
                   />
 
                   <PvInputText
                     v-if="field.type === 'string'"
                     v-model="field.value"
                     placeholder="Field Value"
-                    class="flex-grow-1"
+                    class="w-full"
                   />
                   <PvInputNumber
                     v-if="field.type === 'number'"
                     v-model="field.value"
                     placeholder="Field Value"
-                    class="flex-grow-1"
+                    class="w-full"
                   />
                   <PvDropdown
                     v-if="field.type === 'boolean'"
@@ -166,7 +166,7 @@
                     :options="booleanDropDownOptions"
                     option-label="label"
                     option-value="value"
-                    class="flex-grow-1"
+                    class="w-full"
                   />
                   <PvButton type="button" class="w-2" @click="removeField(field.name, newParams)">Delete</PvButton>
                 </div>
@@ -511,7 +511,7 @@ const variantParams = computed(() => {
     return params;
   }
 
-  filteredMappedGameConfig.value.forEach((param) => {
+  mappedGameConfig.value.forEach((param) => {
     params[param.name] = param.value;
   });
 
@@ -533,21 +533,21 @@ const mappedGameConfig = computed(() => {
   }));
 });
 
-// Filter out any deleted params when updating game configuration for the variant
-const filteredMappedGameConfig = computed(() => {
-  if (!mappedGameConfig.value) {
-    return [];
-  }
-
-  return mappedGameConfig.value.filter((param) => !deletedParams.value.includes(param.name));
-});
-
 // Keep track of params that are not needed for the particular variant when creating a new variant
 const deletedParams = ref([]);
 
-// Push the name of the param to the deletedParams array,
-// Triggering a computation of the filteredMappedGameConfig and variantParams
+// Push the name of the param to the deletedParams array
+// Remove the param from the mappedGameConfig array
+// Remove the param from the variantParams object
 const moveToDeletedParams = (param) => {
+  for (const _param of mappedGameConfig.value) {
+    if (_param.name === param) {
+      console.log(mappedGameConfig.value.indexOf(_param));
+      const index = mappedGameConfig.value.indexOf(_param);
+      mappedGameConfig.value = mappedGameConfig.value.splice(index, 1);
+      delete variantParams.value[_param.name];
+    }
+  }
   deletedParams.value.push(param);
 };
 

From 452c4f39461160fa2e34dc009fb9cc749067a4c9 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Wed, 19 Jun 2024 11:26:51 -0700
Subject: [PATCH 26/32] Change delete buttons to trashcan icons

---
 roar-firebase-functions                 |  2 +-
 src/components/tasks/ManageTasks.vue    | 89 +++++++++++++++++++++----
 src/components/tasks/ManageVariants.vue | 58 +++++++++++++---
 3 files changed, 128 insertions(+), 21 deletions(-)

diff --git a/roar-firebase-functions b/roar-firebase-functions
index f5973ec0b..3186f408d 160000
--- a/roar-firebase-functions
+++ b/roar-firebase-functions
@@ -1 +1 @@
-Subproject commit f5973ec0b684610eedbbd1c339e6f914d6eba5c6
+Subproject commit 3186f408dbba54d2558b9f4df2b4adbc5cf987fb
diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index d803a9984..2fe9bb794 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -113,7 +113,12 @@
 
                 <PvInputNumber v-else-if="param.type === 'number'" v-model="param.value" />
 
-                <PvButton icon="pi pi-trash" class="delete-btn" text @click="removeField(gameConfig, index)" />
+                <PvButton
+                  icon="pi pi-trash"
+                  class="delete-btn my-1 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                  text
+                  @click="removeField(gameConfig, index)"
+                />
               </div>
             </div>
           </div>
@@ -135,17 +140,34 @@
 
                 <PvInputNumber v-else-if="param.type === 'number'" v-model="param.value" />
 
-                <PvButton icon="pi pi-trash" text class="delete-btn" @click="removeField(taskParams, index)" />
+                <PvButton
+                  icon="pi pi-trash"
+                  text
+                  class="delete-btn bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                  @click="removeField(taskParams, index)"
+                />
               </div>
             </div>
           </div>
 
           <div class="w-full flex justify-content-center">
             <div v-if="!isExternalTask" class="w-2">
-              <PvButton label="Add Field" text icon="pi pi-plus" class="my-4" @click="addField(gameConfig)" />
+              <PvButton
+                label="Add Field"
+                text
+                icon="pi pi-plus"
+                class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                @click="addField(gameConfig)"
+              />
             </div>
             <div v-else class="w-2">
-              <PvButton label="Add Field" text icon="pi pi-plus" class="my-4" @click="addField(taskParams)" />
+              <PvButton
+                label="Add Field"
+                text
+                icon="pi pi-plus"
+                class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                @click="addField(taskParams)"
+              />
             </div>
           </div>
           <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
@@ -167,7 +189,12 @@
             </div>
           </div>
           <div class="form-submit">
-            <PvButton type="submit" label="Submit" class="submit-button" severity="primary" />
+            <PvButton
+              type="submit"
+              label="Submit"
+              class="submit-button bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+              severity="primary"
+            />
           </div>
         </form>
       </div>
@@ -233,7 +260,13 @@
                     option-value="value"
                     class="flex-grow-1"
                   />
-                  <PvButton type="button" @click="deleteParam(key)">Delete</PvButton>
+                  <PvButton
+                    type="button"
+                    icon="pi pi-trash"
+                    class="bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                    text
+                    @click="deleteParam(key)"
+                  />
                 </div>
               </div>
             </div>
@@ -265,10 +298,22 @@
                 option-value="value"
                 class="flex-grow-1"
               />
-              <PvButton type="button" @click="removeNewField(field.name, newFields)">Delete</PvButton>
+              <PvButton
+                type="button"
+                icon="pi pi-trash"
+                class="bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                text
+                @click="removeNewField(field.name, newFields)"
+              />
             </div>
           </div>
-          <PvButton label="Add Field" text icon="pi pi-plus" class="my-4" @click="newField" />
+          <PvButton
+            label="Add Field"
+            text
+            icon="pi pi-plus"
+            class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+            @click="newField"
+          />
 
           <div class="flex flex-column w-8">
             <label for="gameConfigOutput">
@@ -307,7 +352,13 @@
                   option-value="value"
                   class="flex-grow-1"
                 />
-                <PvButton type="button" @click="deleteParam(paramName)">Delete</PvButton>
+                <PvButton
+                  type="button"
+                  icon="pi pi-trash"
+                  class="bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                  text
+                  @click="deleteParam(paramName)"
+                />
               </div>
             </div>
             <div v-if="addedGameConfig.length > 0">
@@ -339,14 +390,28 @@
                   option-value="value"
                   class="flex-grow-1"
                 />
-                <PvButton type="button" @click="removeNewField(field.name, addedGameConfig)">Delete</PvButton>
+                <PvButton
+                  type="button"
+                  icon="pi pi-trash"
+                  class="bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                  text
+                  @click="removeNewField(field.name, addedGameConfig)"
+                />
               </div>
             </div>
           </div>
-          <PvButton label="Add Param" text icon="pi pi-plus" class="my-4" @click="addGameConfig" />
+          <PvButton
+            label="Add Param"
+            text
+            icon="pi pi-plus"
+            class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+            @click="addGameConfig"
+          />
         </section>
 
-        <PvButton type="submit" class="my-4">Update Task</PvButton>
+        <PvButton type="submit" class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+          >Update Task</PvButton
+        >
       </form>
     </PvTabPanel>
   </PvTabView>
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index 32d20b066..bc028d0b8 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -133,7 +133,13 @@
                 </div>
 
                 <div>
-                  <PvButton type="button" @click="moveToDeletedParams(param.name)">Delete</PvButton>
+                  <PvButton
+                    type="button"
+                    icon="pi pi-trash"
+                    class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                    text
+                    @click="moveToDeletedParams(param.name)"
+                  />
                 </div>
               </div>
 
@@ -168,11 +174,23 @@
                     option-value="value"
                     class="w-full"
                   />
-                  <PvButton type="button" class="w-2" @click="removeField(field.name, newParams)">Delete</PvButton>
+                  <PvButton
+                    type="button"
+                    icon="pi pi-trash"
+                    class="w-4rem bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                    text
+                    @click="removeField(field.name, newParams)"
+                  />
                 </div>
               </div>
             </div>
-            <PvButton label="Add Param" text icon="pi pi-plus" class="w-2 m-auto my-4" @click="newParam" />
+            <PvButton
+              label="Add Param"
+              text
+              icon="pi pi-plus"
+              class="w-2 my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+              @click="newParam"
+            />
           </div>
           <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
             <div class="flex flex-row align-items-center">
@@ -206,7 +224,12 @@
             </div>
           </div>
           <div class="form-submit">
-            <PvButton type="submit" label="Submit" class="submit-button" severity="primary" />
+            <PvButton
+              type="submit"
+              label="Submit"
+              class="submit-button w-2 my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+              severity="primary"
+            />
           </div>
         </form>
       </div>
@@ -276,7 +299,13 @@
                     option-value="value"
                     class="flex-grow-1"
                   />
-                  <PvButton type="button" @click="deleteParam(key)">Delete</PvButton>
+                  <PvButton
+                    type="button"
+                    icon="pi pi-trash"
+                    class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                    text
+                    @click="deleteParam(key)"
+                  />
                 </div>
               </div>
             </div>
@@ -307,11 +336,22 @@
                   option-value="value"
                   class="flex-grow-1"
                 />
-                <PvButton type="button" @click="removeField(field.name, addedFields)">Delete</PvButton>
+                <PvButton
+                  type="button"
+                  icon="pi pi-trash"
+                  class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                  @click="removeField(field.name, addedFields)"
+                />
               </div>
             </div>
           </div>
-          <PvButton label="Add Field" text icon="pi pi-plus" class="my-4" @click="addField" />
+          <PvButton
+            label="Add Field"
+            text
+            icon="pi pi-plus"
+            class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+            @click="addField"
+          />
 
           <!--          **** Disabling the function to edit game params for now ****-->
 
@@ -382,7 +422,9 @@
           <!--          <PvButton label="Add Param" text icon="pi pi-plus" class="my-4" @click="addParam" />-->
         </section>
 
-        <PvButton type="submit" class="my-4">Update Variant</PvButton>
+        <PvButton type="submit" class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+          >Update Variant</PvButton
+        >
       </form>
     </PvTabPanel>
   </PvTabView>

From 7bcd2a0eb4e4312e41fec2b3c3657f002cade6b5 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Wed, 19 Jun 2024 11:56:41 -0700
Subject: [PATCH 27/32] change default testing adminstration, add commmand to
 click off of dropdown menu to prevent it from hiding other elements

---
 cypress.config.js                                               | 2 +-
 .../default-tests/testProgressReportFiltering.spec.cy.js        | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/cypress.config.js b/cypress.config.js
index 75f6adc78..8ac0452e0 100644
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -77,7 +77,7 @@ module.exports = defineConfig({
     stanfordUniversityAddress: '450 Jane Stanford Way, Stanford, CA 94305, USA',
     testTag: 'stanford university',
     cypressDownloads: 'cypress/downloads',
-    testRoarAppsAdministration: 'CypressTestRoarAppsAdministration',
+    testRoarAppsAdministration: 'Cypress Test Roar Apps Administration',
     testRoarAppsAdministrationId: 'K8UaI8p79Dntj5Z2CJk8',
     testOptionalRoarAppsAdministration: 'Cypress Test Optional Roar Apps Administration',
     testOptionalRoarAppsAdministrationId: '',
diff --git a/cypress/e2e/partner-admin/default-tests/testProgressReportFiltering.spec.cy.js b/cypress/e2e/partner-admin/default-tests/testProgressReportFiltering.spec.cy.js
index 3e98d574e..2d56f22fc 100644
--- a/cypress/e2e/partner-admin/default-tests/testProgressReportFiltering.spec.cy.js
+++ b/cypress/e2e/partner-admin/default-tests/testProgressReportFiltering.spec.cy.js
@@ -34,6 +34,7 @@ function setFilterBySchool(school) {
 function setFilterByGrade(grade) {
   cy.get('[data-cy="filter-by-grade"]', { timeout: timeout }).click();
   cy.get('ul > li', { timeout: timeout }).contains(grade).click();
+  cy.get('body').type('{esc}');
   cy.wait(0.05 * timeout);
 }
 
@@ -41,6 +42,7 @@ function setFilterByProgressCategory(header, category) {
   cy.contains('div.p-column-header-content', header).find('button').click();
   cy.get('[data-cy="progress-filter-dropdown"]', { timeout: timeout }).click();
   cy.get('ul>li').find('.p-tag-value', { timeout: timeout }).contains(category).click();
+  // Click off the dropdown to prevent it from hiding other elements
   cy.get('button').contains('Apply').click();
   cy.wait(0.05 * timeout);
 }

From a062996528a3ba177bafedf15bdb81d4b21c5dac Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Thu, 20 Jun 2024 09:27:42 -0700
Subject: [PATCH 28/32] firebase functions

---
 roar-firebase-functions | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/roar-firebase-functions b/roar-firebase-functions
index 3186f408d..6351b55f6 160000
--- a/roar-firebase-functions
+++ b/roar-firebase-functions
@@ -1 +1 @@
-Subproject commit 3186f408dbba54d2558b9f4df2b4adbc5cf987fb
+Subproject commit 6351b55f6c2b611aa621477c78b30108c6fc2950

From 3cf96698c6498566f2caa66d47a7c9a039f2aa7a Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Wed, 26 Jun 2024 11:03:53 -0700
Subject: [PATCH 29/32] fetch upstream

---
 roar-firebase-functions | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/roar-firebase-functions b/roar-firebase-functions
index 4e674824a..3186f408d 160000
--- a/roar-firebase-functions
+++ b/roar-firebase-functions
@@ -1 +1 @@
-Subproject commit 4e674824a7a8cfdf187763ecd37e8a35a7b5f498
+Subproject commit 3186f408dbba54d2558b9f4df2b4adbc5cf987fb

From 7ea21a143e1343a93ceff51fe08f9c2ab9cff4d7 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Tue, 2 Jul 2024 14:24:59 -0700
Subject: [PATCH 30/32] camelCase new parameters on submit, styling changes

---
 src/components/tasks/ManageTasks.vue    | 14 +++++++-------
 src/components/tasks/ManageVariants.vue | 14 +++++++-------
 src/router/index.js                     |  2 +-
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index 2fe9bb794..6169f246c 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -211,7 +211,7 @@
     <PvTabPanel header="Update Task">
       <h1 class="text-center font-bold">Update a Task</h1>
       <form @submit.prevent="handleUpdateTask()">
-        <section class="flex flex-column gap-2 mb-4">
+        <section class="flex flex-column gap-2 mb-4 p-4">
           <label for="variant-fields" class="my-2">
             <small class="text-gray-400 font-bold">Select an Existing Task </small>
             <span class="required">*</span></label
@@ -225,7 +225,7 @@
           />
         </section>
 
-        <section v-if="taskData" class="flex flex-column align-items-start mt-4">
+        <section v-if="taskData" class="flex flex-column align-items-start mt-4 p-4">
           <div class="flex flex-column w-full">
             <label for="fieldsOutput">
               <strong>Fields</strong>
@@ -315,9 +315,9 @@
             @click="newField"
           />
 
-          <div class="flex flex-column w-8">
+          <div class="flex flex-column w-full">
             <label for="gameConfigOutput">
-              <strong>Game Configuration</strong>
+              <strong>Game Parameters</strong>
             </label>
             <div
               v-for="(param, paramName) in updatedTaskData.gameConfig"
@@ -401,7 +401,7 @@
             </div>
           </div>
           <PvButton
-            label="Add Param"
+            label="Add Parameter"
             text
             icon="pi pi-plus"
             class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
@@ -426,7 +426,7 @@ import { useQuery } from '@tanstack/vue-query';
 import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
 import { taskFetcher } from '@/helpers/query/tasks';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, camelCase } from 'lodash';
 
 const toast = useToast();
 const initialized = ref(false);
@@ -705,7 +705,7 @@ function convertParamsToObj(paramType) {
 
   return target.reduce((acc, item) => {
     if (item.name) {
-      acc[item.name] = item.value;
+      acc[camelCase(item.name)] = item.value;
     }
     return acc;
   }, {});
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index bc028d0b8..69e465e9f 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -73,12 +73,12 @@
 
           <div class="flex flex-column align-items-center">
             <h3 class="text-center">
-              <strong>Configure Game Parameters</strong>
+              <strong>Configure Parameter Values</strong>
             </h3>
             <h4 class="text-center">
               Set the game parameters for a new variant of task <strong>{{ variantFields.selectedGame.id }}</strong>
             </h4>
-            <div class="flex flex-column gap-4 mb-2">
+            <div class="flex flex-column">
               <!--
             Each param looks like this:
             {"name": "someParam", "type": "string, boolean, or number", "value": "valueOfParam"}
@@ -185,7 +185,7 @@
               </div>
             </div>
             <PvButton
-              label="Add Param"
+              label="Add Parameter"
               text
               icon="pi pi-plus"
               class="w-2 my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
@@ -238,7 +238,7 @@
     <PvTabPanel header="Update Variant">
       <h1 class="text-center font-bold">Update a Variant</h1>
       <form @submit.prevent="handleUpdateVariant()">
-        <section class="flex flex-column gap-2 mb-4">
+        <section class="flex flex-column gap-2 mb-4 p-4">
           <label for="task-select" class="my-2">
             <small class="text-gray-400 font-bold">Select an Existing Task </small>
             <span class="required">*</span></label
@@ -265,7 +265,7 @@
           />
         </section>
 
-        <section v-if="selectedVariant" class="flex flex-column align-items-start mt-4">
+        <section v-if="selectedVariant" class="flex flex-column align-items-start mt-4 p-4">
           <div class="flex flex-column w-full">
             <label for="fieldsOutput">
               <strong>Fields</strong>
@@ -440,7 +440,7 @@ import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
 import { taskFetcher } from '@/helpers/query/tasks';
 import { variantsFetcher } from '../../helpers/query/tasks';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, camelCase } from 'lodash';
 
 const toast = useToast();
 const initialized = ref(false);
@@ -627,7 +627,7 @@ function convertParamsToObj(paramType) {
   return paramType.reduce((acc, item) => {
     if (item.name) {
       // Check if name is not empty
-      acc[item.name] = item.value;
+      acc[camelCase(item.name)] = item.value;
     }
     return acc;
   }, {});
diff --git a/src/router/index.js b/src/router/index.js
index d360b60f5..14cd77a00 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -419,7 +419,7 @@ router.beforeEach(async (to, from, next) => {
     'Register',
   ];
 
-  const inMaintenanceMode = true;
+  const inMaintenanceMode = false;
 
   if (inMaintenanceMode && to.name !== 'Maintenance') {
     next({ name: 'Maintenance' });

From 50854afc692a00ee9a9530df207cd26c8afd29f9 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Wed, 3 Jul 2024 09:33:18 -0700
Subject: [PATCH 31/32] change nested tabs to select buttons

---
 src/components/tasks/ManageTasks.vue    | 732 +++++++++++-----------
 src/components/tasks/ManageVariants.vue | 774 ++++++++++++------------
 2 files changed, 779 insertions(+), 727 deletions(-)

diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index 6169f246c..50ea9338b 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -1,282 +1,376 @@
 <template>
   <PvToast />
-  <PvTabView>
-    <PvTabPanel header="Create Task">
-      <div v-if="!created" class="card px-3">
-        <h1 class="text-center font-bold">Create a New Task</h1>
-        <!-- <p class="login-title" align="left">Register for ROAR</p> -->
-        <form class="p-fluid" @submit.prevent="handleNewTaskSubmit(!t$.$invalid)">
-          <!-- Task name -->
-          <div class="flex flex-column row-gap-3">
-            <section class="form-section">
-              <div class="p-input-icon-right">
-                <label for="taskName">
-                  <small class="text-gray-400 font-bold">Task Name </small>
-                  <span class="required">*</span></label
-                >
-                <PvInputText
-                  v-model="t$.taskName.$model"
-                  name="taskName"
-                  :class="{ 'p-invalid': t$.taskName.$invalid && submitted }"
-                  aria-describedby="activation-code-error"
-                />
-              </div>
-              <span v-if="t$.taskName.$error && submitted">
-                <span v-for="(error, index) of t$.taskName.$errors" :key="index">
-                  <small class="p-error">{{ error.$message }}</small>
-                </span>
+  <PvSelectButton
+    v-model="viewModel"
+    :options="modelViews"
+    option-label="label"
+    option-value="value"
+    class="flex my-2 select-button p-2"
+    @change="handleViewChange($event.value)"
+  />
+  <div v-show="viewModel.value === 'create'">
+    <div v-if="!created" class="card px-3">
+      <h1 class="text-center font-bold">Create a New Task</h1>
+      <!-- <p class="login-title" align="left">Register for ROAR</p> -->
+      <form class="p-fluid" @submit.prevent="handleNewTaskSubmit(!t$.$invalid)">
+        <!-- Task name -->
+        <div class="flex flex-column row-gap-3">
+          <section class="form-section">
+            <div class="p-input-icon-right">
+              <label for="taskName">
+                <small class="text-gray-400 font-bold">Task Name </small>
+                <span class="required">*</span></label
+              >
+              <PvInputText
+                v-model="t$.taskName.$model"
+                name="taskName"
+                :class="{ 'p-invalid': t$.taskName.$invalid && submitted }"
+                aria-describedby="activation-code-error"
+              />
+            </div>
+            <span v-if="t$.taskName.$error && submitted">
+              <span v-for="(error, index) of t$.taskName.$errors" :key="index">
+                <small class="p-error">{{ error.$message }}</small>
               </span>
-              <small v-if="(t$.taskName.$invalid && submitted) || t$.taskName.$pending.$response" class="p-error">
-                {{ t$.taskName.required.$message.replace('Value', 'Task Name') }}
-              </small>
-            </section>
-            <!-- Task ID -->
-            <section class="form-section">
-              <div class="p-input-icon-right">
-                <label for="taskId">
-                  <small class="text-gray-400 font-bold">Task ID </small>
-                  <span class="required">*</span></label
-                >
-                <PvInputText
-                  v-model="t$.taskId.$model"
-                  name="taskId"
-                  :class="{ 'p-invalid': t$.taskId.$invalid && submitted }"
-                  aria-describedby="activation-code-error"
-                />
-              </div>
-              <span v-if="t$.taskId.$error && submitted">
-                <span v-for="(error, index) of t$.taskId.$errors" :key="index">
+            </span>
+            <small v-if="(t$.taskName.$invalid && submitted) || t$.taskName.$pending.$response" class="p-error">
+              {{ t$.taskName.required.$message.replace('Value', 'Task Name') }}
+            </small>
+          </section>
+          <!-- Task ID -->
+          <section class="form-section">
+            <div class="p-input-icon-right">
+              <label for="taskId">
+                <small class="text-gray-400 font-bold">Task ID </small>
+                <span class="required">*</span></label
+              >
+              <PvInputText
+                v-model="t$.taskId.$model"
+                name="taskId"
+                :class="{ 'p-invalid': t$.taskId.$invalid && submitted }"
+                aria-describedby="activation-code-error"
+              />
+            </div>
+            <span v-if="t$.taskId.$error && submitted">
+              <span v-for="(error, index) of t$.taskId.$errors" :key="index">
+                <small class="p-error">{{ error.$message }}</small>
+              </span>
+            </span>
+            <small v-else-if="(t$.taskId.$invalid && submitted) || t$.taskId.$pending.$response" class="p-error">
+              {{ t$.taskId.required.$message.replace('Value', 'Task ID') }}
+            </small>
+          </section>
+          <!-- Cover Image -->
+          <section class="form-section">
+            <div>
+              <label for="coverImage">
+                <small class="text-gray-400 font-bold">Cover Image (URL)</small>
+              </label>
+              <PvInputText v-model="taskFields.coverImage" name="coverImage" />
+            </div>
+          </section>
+          <!--Description-->
+          <section class="form-section">
+            <div class="p-input-icon-right">
+              <label for="description">
+                <small class="text-gray-400 font-bold">Description</small>
+              </label>
+              <PvInputText v-model="taskFields.description" name="description" />
+            </div>
+          </section>
+          <!--Task URL-->
+          <section class="form-section">
+            <div v-if="isExternalTask">
+              <label for="taskURL">
+                <small class="text-gray-400 font-bold">Task URL </small>
+                <span class="required">*</span></label
+              >
+              <PvInputText
+                v-model="t$.taskURL.$model"
+                name="taskURL"
+                :class="{ 'p-invalid': t$.taskURL.$invalid && submitted }"
+                aria-describedby="first-name-error"
+              />
+              <span v-if="t$.taskURL.$error && submitted">
+                <span v-for="(error, index) of t$.taskURL.$errors" :key="index">
                   <small class="p-error">{{ error.$message }}</small>
                 </span>
               </span>
-              <small v-else-if="(t$.taskId.$invalid && submitted) || t$.taskId.$pending.$response" class="p-error">
-                {{ t$.taskId.required.$message.replace('Value', 'Task ID') }}
+              <small v-else-if="(t$.taskURL.$invalid && submitted) || t$.taskURL.$pending.$response" class="p-error">
+                {{ t$.taskURL.required.$message.replace('Value', 'Task URL') }}
               </small>
-            </section>
-            <!-- Cover Image -->
-            <section class="form-section">
-              <div>
-                <label for="coverImage">
-                  <small class="text-gray-400 font-bold">Cover Image (URL)</small>
-                </label>
-                <PvInputText v-model="taskFields.coverImage" name="coverImage" />
-              </div>
-            </section>
-            <!--Description-->
-            <section class="form-section">
-              <div class="p-input-icon-right">
-                <label for="description">
-                  <small class="text-gray-400 font-bold">Description</small>
-                </label>
-                <PvInputText v-model="taskFields.description" name="description" />
-              </div>
-            </section>
-            <!--Task URL-->
-            <section class="form-section">
-              <div v-if="isExternalTask">
-                <label for="taskURL">
-                  <small class="text-gray-400 font-bold">Task URL </small>
-                  <span class="required">*</span></label
-                >
-                <PvInputText
-                  v-model="t$.taskURL.$model"
-                  name="taskURL"
-                  :class="{ 'p-invalid': t$.taskURL.$invalid && submitted }"
-                  aria-describedby="first-name-error"
-                />
-                <span v-if="t$.taskURL.$error && submitted">
-                  <span v-for="(error, index) of t$.taskURL.$errors" :key="index">
-                    <small class="p-error">{{ error.$message }}</small>
-                  </span>
-                </span>
-                <small v-else-if="(t$.taskURL.$invalid && submitted) || t$.taskURL.$pending.$response" class="p-error">
-                  {{ t$.taskURL.required.$message.replace('Value', 'Task URL') }}
-                </small>
-              </div>
-            </section>
-          </div>
+            </div>
+          </section>
+        </div>
 
-          <div v-if="!isExternalTask">
-            <h3 class="text-center">
-              <strong>Configure Game Parameters</strong>
-            </h3>
-            <h4 class="text-center">Create the configurable game parameters for variants of this task.</h4>
-            <div v-for="(param, index) in gameConfig" :key="index">
-              <div class="flex gap-2 align-content-start flex-grow-0 params-container">
-                <PvInputText v-model="param.name" placeholder="Name" />
+        <div v-if="!isExternalTask">
+          <h3 class="text-center">
+            <strong>Configure Game Parameters</strong>
+          </h3>
+          <h4 class="text-center">Create the configurable game parameters for variants of this task.</h4>
+          <div v-for="(param, index) in gameConfig" :key="index">
+            <div class="flex gap-2 align-content-start flex-grow-0 params-container">
+              <PvInputText v-model="param.name" placeholder="Name" />
 
-                <PvDropdown v-model="param.type" :options="typeOptions" />
+              <PvDropdown v-model="param.type" :options="typeOptions" />
 
-                <PvInputText v-if="param.type === 'string'" v-model="param.value" placeholder="Value" />
+              <PvInputText v-if="param.type === 'string'" v-model="param.value" placeholder="Value" />
 
-                <PvDropdown v-else-if="param.type === 'boolean'" v-model="param.value" :options="[true, false]" />
+              <PvDropdown v-else-if="param.type === 'boolean'" v-model="param.value" :options="[true, false]" />
 
-                <PvInputNumber v-else-if="param.type === 'number'" v-model="param.value" />
+              <PvInputNumber v-else-if="param.type === 'number'" v-model="param.value" />
 
-                <PvButton
-                  icon="pi pi-trash"
-                  class="delete-btn my-1 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-                  text
-                  @click="removeField(gameConfig, index)"
-                />
-              </div>
+              <PvButton
+                icon="pi pi-trash"
+                class="delete-btn my-1 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                text
+                @click="removeField(gameConfig, index)"
+              />
             </div>
           </div>
+        </div>
 
-          <div v-else>
-            <h3 class="text-center">Configure URL Parameters</h3>
-            <h4 class="text-center">
-              These parameters will be appended to the task URL to generate the variant URL for this task.
-            </h4>
-            <div v-for="(param, index) in taskParams" :key="index">
-              <div class="flex gap-2 align-content-start flex-grow-0 params-container">
-                <PvInputText v-model="param.name" placeholder="Name" />
+        <div v-else>
+          <h3 class="text-center">Configure URL Parameters</h3>
+          <h4 class="text-center">
+            These parameters will be appended to the task URL to generate the variant URL for this task.
+          </h4>
+          <div v-for="(param, index) in taskParams" :key="index">
+            <div class="flex gap-2 align-content-start flex-grow-0 params-container">
+              <PvInputText v-model="param.name" placeholder="Name" />
 
-                <PvDropdown v-model="param.type" :options="typeOptions" />
+              <PvDropdown v-model="param.type" :options="typeOptions" />
 
-                <PvInputText v-if="param.type === 'string'" v-model="param.value" placeholder="Value" />
+              <PvInputText v-if="param.type === 'string'" v-model="param.value" placeholder="Value" />
 
-                <PvDropdown v-else-if="param.type === 'boolean'" v-model="param.value" :options="[true, false]" />
+              <PvDropdown v-else-if="param.type === 'boolean'" v-model="param.value" :options="[true, false]" />
 
-                <PvInputNumber v-else-if="param.type === 'number'" v-model="param.value" />
-
-                <PvButton
-                  icon="pi pi-trash"
-                  text
-                  class="delete-btn bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-                  @click="removeField(taskParams, index)"
-                />
-              </div>
-            </div>
-          </div>
+              <PvInputNumber v-else-if="param.type === 'number'" v-model="param.value" />
 
-          <div class="w-full flex justify-content-center">
-            <div v-if="!isExternalTask" class="w-2">
-              <PvButton
-                label="Add Field"
-                text
-                icon="pi pi-plus"
-                class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-                @click="addField(gameConfig)"
-              />
-            </div>
-            <div v-else class="w-2">
               <PvButton
-                label="Add Field"
+                icon="pi pi-trash"
                 text
-                icon="pi pi-plus"
-                class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-                @click="addField(taskParams)"
+                class="delete-btn bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                @click="removeField(taskParams, index)"
               />
             </div>
           </div>
-          <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
-            <div class="flex flex-row align-items-center">
-              <PvCheckbox v-model="taskCheckboxData" input-id="chbx-demoTask" value="isDemoTask" />
-              <label class="ml-1 mr-3" for="chbx-demoTask">Mark as <b>Demo Task</b></label>
-            </div>
-            <div class="flex flex-row align-items-center">
-              <PvCheckbox v-model="taskCheckboxData" input-id="chbx-testTask" value="isTestTask" />
-              <label class="ml-1 mr-3" for="chbx-testTask">Mark as <b>Test Task</b></label>
-            </div>
-            <div class="flex flex-row align-items-center">
-              <PvCheckbox v-model="taskCheckboxData" input-id="chbx-externalTask" value="isExternalTask" />
-              <label class="ml-1 mr-3" for="chbx-externalTask">Mark as <b>External Task</b> </label>
-            </div>
-            <div class="flex flex-row align-items-center">
-              <PvCheckbox v-model="taskCheckboxData" input-id="chbx-registeredTask" value="isRegisteredTask" />
-              <label class="ml-1 mr-3" for="chbx-externalTask">Mark as <b>Registered Task</b> </label>
-            </div>
+        </div>
+
+        <div class="w-full flex justify-content-center">
+          <div v-if="!isExternalTask" class="w-2">
+            <PvButton
+              label="Add Field"
+              text
+              icon="pi pi-plus"
+              class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+              @click="addField(gameConfig)"
+            />
           </div>
-          <div class="form-submit">
+          <div v-else class="w-2">
             <PvButton
-              type="submit"
-              label="Submit"
-              class="submit-button bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-              severity="primary"
+              label="Add Field"
+              text
+              icon="pi pi-plus"
+              class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+              @click="addField(taskParams)"
             />
           </div>
-        </form>
-      </div>
-
-      <div v-else>
-        <h2>Your task has been created!</h2>
-        <p>
-          Redirect to this URL upon task completion. ParticipantId can be any string, completed should be set to true.
-        </p>
-        <p>roar.education/?participantId=[$PARTICIPANT_ID]&completed=[$BOOLEAN]</p>
-      </div>
-    </PvTabPanel>
-
-    <PvTabPanel header="Update Task">
-      <h1 class="text-center font-bold">Update a Task</h1>
-      <form @submit.prevent="handleUpdateTask()">
-        <section class="flex flex-column gap-2 mb-4 p-4">
-          <label for="variant-fields" class="my-2">
-            <small class="text-gray-400 font-bold">Select an Existing Task </small>
-            <span class="required">*</span></label
-          >
-          <PvDropdown
-            v-model="selectedTask"
-            :options="formattedTasks"
-            option-label="name"
-            option-value="id"
-            placeholder="Select a Task"
+        </div>
+        <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
+          <div class="flex flex-row align-items-center">
+            <PvCheckbox v-model="taskCheckboxData" input-id="chbx-demoTask" value="isDemoTask" />
+            <label class="ml-1 mr-3" for="chbx-demoTask">Mark as <b>Demo Task</b></label>
+          </div>
+          <div class="flex flex-row align-items-center">
+            <PvCheckbox v-model="taskCheckboxData" input-id="chbx-testTask" value="isTestTask" />
+            <label class="ml-1 mr-3" for="chbx-testTask">Mark as <b>Test Task</b></label>
+          </div>
+          <div class="flex flex-row align-items-center">
+            <PvCheckbox v-model="taskCheckboxData" input-id="chbx-externalTask" value="isExternalTask" />
+            <label class="ml-1 mr-3" for="chbx-externalTask">Mark as <b>External Task</b> </label>
+          </div>
+          <div class="flex flex-row align-items-center">
+            <PvCheckbox v-model="taskCheckboxData" input-id="chbx-registeredTask" value="isRegisteredTask" />
+            <label class="ml-1 mr-3" for="chbx-externalTask">Mark as <b>Registered Task</b> </label>
+          </div>
+        </div>
+        <div class="form-submit">
+          <PvButton
+            type="submit"
+            label="Submit"
+            class="submit-button bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+            severity="primary"
           />
-        </section>
-
-        <section v-if="taskData" class="flex flex-column align-items-start mt-4 p-4">
-          <div class="flex flex-column w-full">
-            <label for="fieldsOutput">
-              <strong>Fields</strong>
-            </label>
-            <div v-for="(value, key) in taskData" :key="key">
-              <div v-if="!ignoreFields.includes(key)">
-                <div
-                  v-if="updatedTaskData[key] !== undefined"
-                  class="flex align-items-center justify-content-between gap-2 mb-1"
-                >
-                  <label :for="key" class="w-1">
-                    <em>{{ key }}</em>
-                  </label>
-                  <PvInputText :placeholder="typeof value" class="w-2 text-center" disabled />
-
-                  <PvInputText
-                    v-if="typeof value === 'string'"
-                    v-model="updatedTaskData[key]"
-                    :placeholder="value"
-                    class="flex-grow-1"
-                  />
-                  <PvInputNumber
-                    v-else-if="typeof value === 'number'"
-                    v-model="updatedTaskData[key]"
-                    class="flex-grow-1"
-                  />
-                  <PvDropdown
-                    v-else-if="typeof value === 'boolean'"
-                    v-model="updatedTaskData[key]"
-                    :options="booleanDropDownOptions"
-                    option-label="label"
-                    option-value="value"
-                    class="flex-grow-1"
-                  />
-                  <PvButton
-                    type="button"
-                    icon="pi pi-trash"
-                    class="bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-                    text
-                    @click="deleteParam(key)"
-                  />
-                </div>
+        </div>
+      </form>
+    </div>
+
+    <div v-else>
+      <h2>Your task has been created!</h2>
+      <p>
+        Redirect to this URL upon task completion. ParticipantId can be any string, completed should be set to true.
+      </p>
+      <p>roar.education/?participantId=[$PARTICIPANT_ID]&completed=[$BOOLEAN]</p>
+    </div>
+  </div>
+
+  <div v-show="viewModel.value === 'update'">
+    <h1 class="text-center font-bold">Update a Task</h1>
+    <form @submit.prevent="handleUpdateTask()">
+      <section class="flex flex-column gap-2 mb-4 p-4">
+        <label for="variant-fields" class="my-2">
+          <small class="text-gray-400 font-bold">Select an Existing Task </small>
+          <span class="required">*</span></label
+        >
+        <PvDropdown
+          v-model="selectedTask"
+          :options="formattedTasks"
+          option-label="name"
+          option-value="id"
+          placeholder="Select a Task"
+        />
+      </section>
+
+      <section v-if="taskData" class="flex flex-column align-items-start mt-4 p-4">
+        <div class="flex flex-column w-full">
+          <label for="fieldsOutput">
+            <strong>Fields</strong>
+          </label>
+          <div v-for="(value, key) in taskData" :key="key">
+            <div v-if="!ignoreFields.includes(key)">
+              <div
+                v-if="updatedTaskData[key] !== undefined"
+                class="flex align-items-center justify-content-between gap-2 mb-1"
+              >
+                <label :for="key" class="w-1">
+                  <em>{{ key }}</em>
+                </label>
+                <PvInputText :placeholder="typeof value" class="w-2 text-center" disabled />
+
+                <PvInputText
+                  v-if="typeof value === 'string'"
+                  v-model="updatedTaskData[key]"
+                  :placeholder="value"
+                  class="flex-grow-1"
+                />
+                <PvInputNumber
+                  v-else-if="typeof value === 'number'"
+                  v-model="updatedTaskData[key]"
+                  class="flex-grow-1"
+                />
+                <PvDropdown
+                  v-else-if="typeof value === 'boolean'"
+                  v-model="updatedTaskData[key]"
+                  :options="booleanDropDownOptions"
+                  option-label="label"
+                  option-value="value"
+                  class="flex-grow-1"
+                />
+                <PvButton
+                  type="button"
+                  icon="pi pi-trash"
+                  class="bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                  text
+                  @click="deleteParam(key)"
+                />
               </div>
             </div>
           </div>
-
-          <div v-if="newFields.length > 0" class="w-full">
-            <div v-for="(field, index) in newFields" :key="index" class="flex align-items-center column-gap-2 mb-1">
+        </div>
+
+        <div v-if="newFields.length > 0" class="w-full">
+          <div v-for="(field, index) in newFields" :key="index" class="flex align-items-center column-gap-2 mb-1">
+            <PvInputText v-model="field.name" placeholder="Field Name" />
+            <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
+
+            <PvInputText
+              v-if="field.type === 'string'"
+              v-model="field.value"
+              placeholder="Field Value"
+              class="flex-grow-1"
+            />
+            <PvInputNumber
+              v-if="field.type === 'number'"
+              v-model="field.value"
+              placeholder="Field Value"
+              class="flex-grow-1"
+            />
+            <PvDropdown
+              v-if="field.type === 'boolean'"
+              v-model="field.value"
+              placeholder="Field Value"
+              :options="booleanDropDownOptions"
+              option-label="label"
+              option-value="value"
+              class="flex-grow-1"
+            />
+            <PvButton
+              type="button"
+              icon="pi pi-trash"
+              class="bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+              text
+              @click="removeNewField(field.name, newFields)"
+            />
+          </div>
+        </div>
+        <PvButton
+          label="Add Field"
+          text
+          icon="pi pi-plus"
+          class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+          @click="newField"
+        />
+
+        <div class="flex flex-column w-full">
+          <label for="gameConfigOutput">
+            <strong>Game Parameters</strong>
+          </label>
+          <div v-for="(param, paramName) in updatedTaskData.gameConfig" id="paramsOutput" :key="paramName" class="mb-1">
+            <div
+              v-if="updatedTaskData.gameConfig[paramName] !== undefined"
+              class="flex align-items-center justify-content-end column-gap-2"
+            >
+              <label :for="paramName" class="w-2">
+                <em>{{ paramName }} </em>
+              </label>
+              <PvInputText id="inputEditParamType" :placeholder="typeof param" class="w-2 text-center" disabled />
+              <PvInputText
+                v-if="typeof param === 'string'"
+                v-model="updatedTaskData.gameConfig[paramName]"
+                :placeholder="param"
+                class="flex-grow-1"
+              />
+              <PvInputNumber
+                v-else-if="typeof param === 'number'"
+                v-model="updatedTaskData.gameConfig[paramName]"
+                class="flex-grow-1"
+              />
+              <PvDropdown
+                v-else-if="typeof param === 'boolean'"
+                v-model="updatedTaskData.gameConfig[paramName]"
+                :options="booleanDropDownOptions"
+                option-label="label"
+                option-value="value"
+                class="flex-grow-1"
+              />
+              <PvButton
+                type="button"
+                icon="pi pi-trash"
+                class="bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                text
+                @click="deleteParam(paramName)"
+              />
+            </div>
+          </div>
+          <div v-if="addedGameConfig.length > 0">
+            <div
+              v-for="(field, index) in addedGameConfig"
+              :key="index"
+              class="flex align-items-center column-gap-2 mb-1"
+            >
               <PvInputText v-model="field.name" placeholder="Field Name" />
               <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
-
               <PvInputText
                 v-if="field.type === 'string'"
                 v-model="field.value"
@@ -303,118 +397,25 @@
                 icon="pi pi-trash"
                 class="bg-primary text-white border-none border-round p-2 hover:bg-red-900"
                 text
-                @click="removeNewField(field.name, newFields)"
+                @click="removeNewField(field.name, addedGameConfig)"
               />
             </div>
           </div>
-          <PvButton
-            label="Add Field"
-            text
-            icon="pi pi-plus"
-            class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-            @click="newField"
-          />
-
-          <div class="flex flex-column w-full">
-            <label for="gameConfigOutput">
-              <strong>Game Parameters</strong>
-            </label>
-            <div
-              v-for="(param, paramName) in updatedTaskData.gameConfig"
-              id="paramsOutput"
-              :key="paramName"
-              class="mb-1"
-            >
-              <div
-                v-if="updatedTaskData.gameConfig[paramName] !== undefined"
-                class="flex align-items-center justify-content-end column-gap-2"
-              >
-                <label :for="paramName" class="w-2">
-                  <em>{{ paramName }} </em>
-                </label>
-                <PvInputText id="inputEditParamType" :placeholder="typeof param" class="w-2 text-center" disabled />
-                <PvInputText
-                  v-if="typeof param === 'string'"
-                  v-model="updatedTaskData.gameConfig[paramName]"
-                  :placeholder="param"
-                  class="flex-grow-1"
-                />
-                <PvInputNumber
-                  v-else-if="typeof param === 'number'"
-                  v-model="updatedTaskData.gameConfig[paramName]"
-                  class="flex-grow-1"
-                />
-                <PvDropdown
-                  v-else-if="typeof param === 'boolean'"
-                  v-model="updatedTaskData.gameConfig[paramName]"
-                  :options="booleanDropDownOptions"
-                  option-label="label"
-                  option-value="value"
-                  class="flex-grow-1"
-                />
-                <PvButton
-                  type="button"
-                  icon="pi pi-trash"
-                  class="bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-                  text
-                  @click="deleteParam(paramName)"
-                />
-              </div>
-            </div>
-            <div v-if="addedGameConfig.length > 0">
-              <div
-                v-for="(field, index) in addedGameConfig"
-                :key="index"
-                class="flex align-items-center column-gap-2 mb-1"
-              >
-                <PvInputText v-model="field.name" placeholder="Field Name" />
-                <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
-                <PvInputText
-                  v-if="field.type === 'string'"
-                  v-model="field.value"
-                  placeholder="Field Value"
-                  class="flex-grow-1"
-                />
-                <PvInputNumber
-                  v-if="field.type === 'number'"
-                  v-model="field.value"
-                  placeholder="Field Value"
-                  class="flex-grow-1"
-                />
-                <PvDropdown
-                  v-if="field.type === 'boolean'"
-                  v-model="field.value"
-                  placeholder="Field Value"
-                  :options="booleanDropDownOptions"
-                  option-label="label"
-                  option-value="value"
-                  class="flex-grow-1"
-                />
-                <PvButton
-                  type="button"
-                  icon="pi pi-trash"
-                  class="bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-                  text
-                  @click="removeNewField(field.name, addedGameConfig)"
-                />
-              </div>
-            </div>
-          </div>
-          <PvButton
-            label="Add Parameter"
-            text
-            icon="pi pi-plus"
-            class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-            @click="addGameConfig"
-          />
-        </section>
-
-        <PvButton type="submit" class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-          >Update Task</PvButton
-        >
-      </form>
-    </PvTabPanel>
-  </PvTabView>
+        </div>
+        <PvButton
+          label="Add Parameter"
+          text
+          icon="pi pi-plus"
+          class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+          @click="addGameConfig"
+        />
+      </section>
+
+      <PvButton type="submit" class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+        >Update Task</PvButton
+      >
+    </form>
+  </div>
 </template>
 
 <script setup>
@@ -452,6 +453,19 @@ let newFields = reactive([]);
 // This array of objects is later converted back into an object and spread into the updatedTaskData object
 let addedGameConfig = reactive([]);
 
+const viewModel = ref({ label: 'Create Task', value: 'create' });
+const modelViews = [
+  { label: 'Create Task', value: 'create' },
+  { label: 'Update Task', value: 'update' },
+];
+
+const handleViewChange = (value) => {
+  const selectedView = modelViews.find((view) => view.value === value);
+  if (selectedView) {
+    viewModel.value = selectedView;
+  }
+};
+
 watch(taskData, (newVal) => {
   updatedTaskData = reactive(cloneDeep(newVal));
 });
@@ -761,4 +775,18 @@ const clearFieldConfigArrays = () => {
 .delete-btn {
   padding: 0.8rem;
 }
+
+.select-button .p-button:last-of-type:not(:only-of-type) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 25rem;
+  border-bottom-right-radius: 25rem;
+}
+
+.select-button .p-button:first-of-type:not(:only-of-type) {
+  border-top-left-radius: 25rem;
+  border-bottom-left-radius: 25rem;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
 </style>
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index 69e465e9f..1b34b840b 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -1,85 +1,92 @@
 <template>
   <PvToast />
-  <PvTabView>
-    <PvTabPanel header="Create Variant">
-      <div class="card px-3">
-        <form class="p-fluid" @submit.prevent="handleVariantSubmit(!v$.$invalid)">
-          <h1 class="text-center font-bold">Create a New Variant</h1>
-
-          <div class="flex flex-column row-gap-3">
-            <section class="form-section">
-              <div class="flex justify-content-between align-items-center">
-                <label for="variant-fields">
-                  <small class="text-gray-400 font-bold">Select an Existing Task </small>
-                  <span class="required">*</span></label
-                >
-                <div class="flex flex-column gap-2 align-items-end">
-                  <div class="flex flex-row align-items-center justify-content-end gap-2 flex-order-1">
-                    <!--                    This does not seemt to function properly, comming it out for now.-->
-                    <!--                    <label class="ml-7" for="chbx-registeredTask">Search registered tasks only?</label>-->
-                    <!--                    <PvCheckbox v-model="registeredTasksOnly" input-id="chbx-registeredTask" :binary="true" />-->
-                  </div>
+  <PvSelectButton
+    v-model="viewModel"
+    :options="modelViews"
+    option-label="label"
+    option-value="value"
+    class="flex my-2 select-button p-2"
+    @change="handleViewChange($event.value)"
+  />
+  <div v-show="viewModel.value === 'create'">
+    <div class="card px-3">
+      <form class="p-fluid" @submit.prevent="handleVariantSubmit(!v$.$invalid)">
+        <h1 class="text-center font-bold">Create a New Variant</h1>
+
+        <div class="flex flex-column row-gap-3">
+          <section class="form-section">
+            <div class="flex justify-content-between align-items-center">
+              <label for="variant-fields">
+                <small class="text-gray-400 font-bold">Select an Existing Task </small>
+                <span class="required">*</span></label
+              >
+              <div class="flex flex-column gap-2 align-items-end">
+                <div class="flex flex-row align-items-center justify-content-end gap-2 flex-order-1">
+                  <!--                    This does not seemt to function properly, comming it out for now.-->
+                  <!--                    <label class="ml-7" for="chbx-registeredTask">Search registered tasks only?</label>-->
+                  <!--                    <PvCheckbox v-model="registeredTasksOnly" input-id="chbx-registeredTask" :binary="true" />-->
                 </div>
               </div>
-              <PvDropdown
-                v-model="v$.selectedGame.$model"
-                :options="formattedTasks"
-                option-label="name"
-                placeholder="Select a Game"
-                :loading="isFetchingTasks"
-                :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
-                name="variant-fields"
-                @click="clearFieldParamArrays()"
-              ></PvDropdown>
-              <span v-if="v$.selectedGame.$error && submitted">
-                <span v-for="(error, index) of v$.selectedGame.$errors" :key="index">
-                  <small class="p-error">{{ error.$message }}</small>
-                </span>
+            </div>
+            <PvDropdown
+              v-model="v$.selectedGame.$model"
+              :options="formattedTasks"
+              option-label="name"
+              placeholder="Select a Game"
+              :loading="isFetchingTasks"
+              :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
+              name="variant-fields"
+              @click="clearFieldParamArrays()"
+            ></PvDropdown>
+            <span v-if="v$.selectedGame.$error && submitted">
+              <span v-for="(error, index) of v$.selectedGame.$errors" :key="index">
+                <small class="p-error">{{ error.$message }}</small>
               </span>
-              <small
-                v-else-if="(v$.selectedGame.$invalid && submitted) || v$.selectedGame.$pending.$response"
-                class="p-error"
+            </span>
+            <small
+              v-else-if="(v$.selectedGame.$invalid && submitted) || v$.selectedGame.$pending.$response"
+              class="p-error"
+            >
+              {{ v$.selectedGame.id.required.$message.replace('Value', 'Task selection') }}
+            </small>
+          </section>
+
+          <section class="form-section">
+            <div class="p-input-icon-right">
+              <label for="variantName">
+                <small class="text-gray-400 font-bold">Variant Name </small>
+                <span class="required">*</span></label
               >
-                {{ v$.selectedGame.id.required.$message.replace('Value', 'Task selection') }}
-              </small>
-            </section>
-
-            <section class="form-section">
-              <div class="p-input-icon-right">
-                <label for="variantName">
-                  <small class="text-gray-400 font-bold">Variant Name </small>
-                  <span class="required">*</span></label
-                >
-                <PvInputText
-                  v-model="v$.variantName.$model"
-                  name="variantName"
-                  :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
-                  aria-describedby="activation-code-error"
-                />
-              </div>
-              <span v-if="v$.variantName.$error && submitted">
-                <span v-for="(error, index) of v$.variantName.$errors" :key="index">
-                  <small class="p-error">{{ error.$message }}</small>
-                </span>
+              <PvInputText
+                v-model="v$.variantName.$model"
+                name="variantName"
+                :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
+                aria-describedby="activation-code-error"
+              />
+            </div>
+            <span v-if="v$.variantName.$error && submitted">
+              <span v-for="(error, index) of v$.variantName.$errors" :key="index">
+                <small class="p-error">{{ error.$message }}</small>
               </span>
-              <small
-                v-else-if="(v$.variantName.$invalid && submitted) || v$.variantName.$pending.$response"
-                class="p-error"
-              >
-                {{ v$.variantName.required.$message.replace('Value', 'Variant Name') }}
-              </small>
-            </section>
-          </div>
-
-          <div class="flex flex-column align-items-center">
-            <h3 class="text-center">
-              <strong>Configure Parameter Values</strong>
-            </h3>
-            <h4 class="text-center">
-              Set the game parameters for a new variant of task <strong>{{ variantFields.selectedGame.id }}</strong>
-            </h4>
-            <div class="flex flex-column">
-              <!--
+            </span>
+            <small
+              v-else-if="(v$.variantName.$invalid && submitted) || v$.variantName.$pending.$response"
+              class="p-error"
+            >
+              {{ v$.variantName.required.$message.replace('Value', 'Variant Name') }}
+            </small>
+          </section>
+        </div>
+
+        <div class="flex flex-column align-items-center">
+          <h3 class="text-center">
+            <strong>Configure Parameter Values</strong>
+          </h3>
+          <h4 class="text-center">
+            Set the game parameters for a new variant of task <strong>{{ variantFields.selectedGame.id }}</strong>
+          </h4>
+          <div class="flex flex-column">
+            <!--
             Each param looks like this:
             {"name": "someParam", "type": "string, boolean, or number", "value": "valueOfParam"}
 
@@ -88,244 +95,82 @@
             So if param.name is "someParam", then
             variantParams[param.name] returns the value of variantParams.someParam,which is the value that we want to change for a new variant
 -->
-              <div
-                v-for="(param, index) in mappedGameConfig"
-                :key="index"
-                class="flex align-items-center justify-content-center dynamic-param-container gap-4"
-              >
-                <div v-if="!deletedParams.includes(param.name)" class="flex align-items-center">
-                  <label for="inputParamName">Parameter:</label>
-
-                  <PvInputText id="inputParamName" v-model="variantParams[param.name]" :value="param.name" disabled />
-                </div>
-
-                <div class="flex align-items-center">
-                  <label for="inputParamType">Type:</label>
-                  <PvInputText id="inputParamType" v-model="param.type" :value="param.type" disabled />
-                </div>
-
-                <div class="flex align-items-center gap-2 flex-grow-1">
-                  <label for="inputParamValue">Value:</label>
-                  <PvInputText
-                    v-if="param.type === 'string'"
-                    id="inputParamValue"
-                    v-model="variantParams[param.name]"
-                    placeholder="Set game parameter to desired value"
-                    class="flex-grow-1"
-                  />
-                  <PvDropdown
-                    v-else-if="param.type === 'boolean'"
-                    id="inputParamValue"
-                    v-model="variantParams[param.name]"
-                    :options="booleanDropDownOptions"
-                    option-label="label"
-                    option-value="value"
-                    placeholder="Set game parameter to desired value"
-                    class="flex-grow-1"
-                  />
-                  <PvInputNumber
-                    v-else-if="param.type === 'number'"
-                    id="inputParamValue"
-                    v-model="variantParams[param.name]"
-                    placeholder="Set game parameter to desired value"
-                    class="flex-grow-1"
-                  />
-                </div>
-
-                <div>
-                  <PvButton
-                    type="button"
-                    icon="pi pi-trash"
-                    class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-                    text
-                    @click="moveToDeletedParams(param.name)"
-                  />
-                </div>
+            <div
+              v-for="(param, index) in mappedGameConfig"
+              :key="index"
+              class="flex align-items-center justify-content-center dynamic-param-container gap-4"
+            >
+              <div v-if="!deletedParams.includes(param.name)" class="flex align-items-center">
+                <label for="inputParamName">Parameter:</label>
+
+                <PvInputText id="inputParamName" v-model="variantParams[param.name]" :value="param.name" disabled />
               </div>
 
-              <div v-if="newParams.length > 0" class="w-full">
-                <div v-for="(field, index) in newParams" :key="index" class="flex align-items-center column-gap-2 mb-1">
-                  <PvInputText v-model="field.name" placeholder="Field Name" />
-                  <PvDropdown
-                    v-model="field.type"
-                    :options="['string', 'number', 'boolean']"
-                    placeholder="Field Type"
-                    class="w-fit"
-                  />
-
-                  <PvInputText
-                    v-if="field.type === 'string'"
-                    v-model="field.value"
-                    placeholder="Field Value"
-                    class="w-full"
-                  />
-                  <PvInputNumber
-                    v-if="field.type === 'number'"
-                    v-model="field.value"
-                    placeholder="Field Value"
-                    class="w-full"
-                  />
-                  <PvDropdown
-                    v-if="field.type === 'boolean'"
-                    v-model="field.value"
-                    placeholder="Field Value"
-                    :options="booleanDropDownOptions"
-                    option-label="label"
-                    option-value="value"
-                    class="w-full"
-                  />
-                  <PvButton
-                    type="button"
-                    icon="pi pi-trash"
-                    class="w-4rem bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-                    text
-                    @click="removeField(field.name, newParams)"
-                  />
-                </div>
+              <div class="flex align-items-center">
+                <label for="inputParamType">Type:</label>
+                <PvInputText id="inputParamType" v-model="param.type" :value="param.type" disabled />
               </div>
-            </div>
-            <PvButton
-              label="Add Parameter"
-              text
-              icon="pi pi-plus"
-              class="w-2 my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-              @click="newParam"
-            />
-          </div>
-          <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
-            <div class="flex flex-row align-items-center">
-              <PvCheckbox
-                v-model="variantCheckboxData"
-                input-id="chbx-demoVariant"
-                name="variantCheckboxData"
-                value="isDemoVariant"
-              />
-              <label class="ml-1 mr-3" for="chbx-demoVariant">Mark as <b>Demo Variant</b></label>
-            </div>
-            <div class="flex flex-row align-items-center">
-              <PvCheckbox
-                v-model="variantCheckboxData"
-                input-id="chbx-testVariant"
-                name="variantCheckboxData"
-                value="isTestVariant"
-              />
-              <label class="ml-1 mr-3" for="chbx-testVariant">Mark as <b>Test Variant</b></label>
-            </div>
-            <div class="flex flex-row align-items-center">
-              <div class="flex flex-row align-items-center">
-                <PvCheckbox
-                  v-model="variantCheckboxData"
-                  input-id="chbx-registeredVariant"
-                  name="variantCheckboxData"
-                  value="isRegisteredVariant"
+
+              <div class="flex align-items-center gap-2 flex-grow-1">
+                <label for="inputParamValue">Value:</label>
+                <PvInputText
+                  v-if="param.type === 'string'"
+                  id="inputParamValue"
+                  v-model="variantParams[param.name]"
+                  placeholder="Set game parameter to desired value"
+                  class="flex-grow-1"
+                />
+                <PvDropdown
+                  v-else-if="param.type === 'boolean'"
+                  id="inputParamValue"
+                  v-model="variantParams[param.name]"
+                  :options="booleanDropDownOptions"
+                  option-label="label"
+                  option-value="value"
+                  placeholder="Set game parameter to desired value"
+                  class="flex-grow-1"
+                />
+                <PvInputNumber
+                  v-else-if="param.type === 'number'"
+                  id="inputParamValue"
+                  v-model="variantParams[param.name]"
+                  placeholder="Set game parameter to desired value"
+                  class="flex-grow-1"
                 />
-                <label class="ml-1 mr-3" for="chbx-externalVariant">Mark as <b>Registered Variant</b></label>
               </div>
-            </div>
-          </div>
-          <div class="form-submit">
-            <PvButton
-              type="submit"
-              label="Submit"
-              class="submit-button w-2 my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-              severity="primary"
-            />
-          </div>
-        </form>
-      </div>
-    </PvTabPanel>
-
-    <PvTabPanel header="Update Variant">
-      <h1 class="text-center font-bold">Update a Variant</h1>
-      <form @submit.prevent="handleUpdateVariant()">
-        <section class="flex flex-column gap-2 mb-4 p-4">
-          <label for="task-select" class="my-2">
-            <small class="text-gray-400 font-bold">Select an Existing Task </small>
-            <span class="required">*</span></label
-          >
-          <PvDropdown
-            v-model="selectedTask"
-            :options="formattedTasks"
-            option-label="name"
-            option-value="id"
-            placeholder="Select a Game"
-            @click="clearFieldParamArrays()"
-          />
-          <label for="variant-select" class="my-2">
-            <small class="text-gray-400 font-bold">Select an Existing Variant </small>
-            <span class="required">*</span></label
-          >
-          <PvDropdown
-            v-model="selectedVariant"
-            :options="filteredVariants"
-            :option-label="(data) => (data.variant.name ? data.variant.name : data.variant.id)"
-            option-value="variant"
-            placeholder="Select a Variant"
-            @click="clearFieldParamArrays()"
-          />
-        </section>
-
-        <section v-if="selectedVariant" class="flex flex-column align-items-start mt-4 p-4">
-          <div class="flex flex-column w-full">
-            <label for="fieldsOutput">
-              <strong>Fields</strong>
-            </label>
-            <div v-for="(value, key) in selectedVariant" id="fieldsOutput" :key="key">
-              <div v-if="!ignoreFields.includes(key)">
-                <div
-                  v-if="updatedVariantData[key] !== undefined"
-                  class="flex align-items-center justify-content-between gap-2 mb-1"
-                >
-                  <label :for="key" class="w-1">
-                    <em>{{ key }}</em>
-                  </label>
-                  <PvInputText id="inputEditVariantType" :placeholder="typeof value" disabled class="w-2 text-center" />
-                  <PvInputText
-                    v-if="typeof value === 'string'"
-                    v-model="updatedVariantData[key]"
-                    :placeholder="value"
-                    class="flex-grow-1"
-                  />
-                  <PvInputNumber
-                    v-else-if="typeof value === 'number'"
-                    v-model="updatedVariantData[key]"
-                    class="flex-grow-1"
-                  />
-                  <PvDropdown
-                    v-else-if="typeof value === 'boolean'"
-                    v-model="updatedVariantData[key]"
-                    :options="booleanDropDownOptions"
-                    option-label="label"
-                    option-value="value"
-                    class="flex-grow-1"
-                  />
-                  <PvButton
-                    type="button"
-                    icon="pi pi-trash"
-                    class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-                    text
-                    @click="deleteParam(key)"
-                  />
-                </div>
+
+              <div>
+                <PvButton
+                  type="button"
+                  icon="pi pi-trash"
+                  class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                  text
+                  @click="moveToDeletedParams(param.name)"
+                />
               </div>
             </div>
 
-            <div v-if="addedFields.length > 0" class="w-full">
-              <div v-for="(field, index) in addedFields" :key="index" class="flex align-items-center column-gap-2 mb-1">
+            <div v-if="newParams.length > 0" class="w-full">
+              <div v-for="(field, index) in newParams" :key="index" class="flex align-items-center column-gap-2 mb-1">
                 <PvInputText v-model="field.name" placeholder="Field Name" />
-                <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
+                <PvDropdown
+                  v-model="field.type"
+                  :options="['string', 'number', 'boolean']"
+                  placeholder="Field Type"
+                  class="w-fit"
+                />
 
                 <PvInputText
                   v-if="field.type === 'string'"
                   v-model="field.value"
                   placeholder="Field Value"
-                  class="flex-grow-1"
+                  class="w-full"
                 />
                 <PvInputNumber
                   v-if="field.type === 'number'"
                   v-model="field.value"
                   placeholder="Field Value"
-                  class="flex-grow-1"
+                  class="w-full"
                 />
                 <PvDropdown
                   v-if="field.type === 'boolean'"
@@ -334,100 +179,261 @@
                   :options="booleanDropDownOptions"
                   option-label="label"
                   option-value="value"
-                  class="flex-grow-1"
+                  class="w-full"
                 />
                 <PvButton
                   type="button"
                   icon="pi pi-trash"
-                  class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-                  @click="removeField(field.name, addedFields)"
+                  class="w-4rem bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                  text
+                  @click="removeField(field.name, newParams)"
                 />
               </div>
             </div>
           </div>
           <PvButton
-            label="Add Field"
+            label="Add Parameter"
             text
             icon="pi pi-plus"
-            class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-            @click="addField"
+            class="w-2 my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+            @click="newParam"
           />
-
-          <!--          **** Disabling the function to edit game params for now ****-->
-
-          <!--          <div class="flex flex-column w-8">-->
-          <!--            <label for="paramsOutput">-->
-          <!--              <strong>Game Params</strong>-->
-          <!--            </label>-->
-          <!--            <div v-for="(param, paramName) in selectedVariant.params" id="paramsOutput" :key="paramName" class="mb-1">-->
-          <!--              <div-->
-          <!--                v-if="updatedVariantData.params[paramName] !== undefined"-->
-          <!--                class="flex align-items-center justify-content-end column-gap-2"-->
-          <!--              >-->
-          <!--                <label :for="paramName" class="w-2">-->
-          <!--                  <em>{{ paramName }} </em>-->
-          <!--                </label>-->
-          <!--                <PvInputText id="inputEditParamType" :placeholder="typeof param" class="w-2" disabled />-->
-          <!--                <PvInputText-->
-          <!--                  v-if="typeof param === 'string'"-->
-          <!--                  v-model="updatedVariantData.params[paramName]"-->
-          <!--                  :placeholder="param"-->
-          <!--                  class="flex-grow-1"-->
-          <!--                />-->
-          <!--                <PvInputNumber-->
-          <!--                  v-else-if="typeof param === 'number'"-->
-          <!--                  v-model="updatedVariantData.params[paramName]"-->
-          <!--                  class="flex-grow-1"-->
-          <!--                />-->
-          <!--                <PvDropdown-->
-          <!--                  v-else-if="typeof param === 'boolean'"-->
-          <!--                  v-model="updatedVariantData.params[paramName]"-->
-          <!--                  :options="booleanDropDownOptions"-->
-          <!--                  option-label="label"-->
-          <!--                  option-value="value"-->
-          <!--                  class="flex-grow-1"-->
-          <!--                />-->
-          <!--                <PvButton type="button" @click="deleteParam(paramName)">Delete</PvButton>-->
-          <!--              </div>-->
-          <!--            </div>-->
-          <!--            <div v-if="addedParams.length > 0">-->
-          <!--              <div v-for="(field, index) in addedParams" :key="index" class="flex align-items-center column-gap-2 mb-1">-->
-          <!--                <PvInputText v-model="field.name" placeholder="Field Name" />-->
-          <!--                <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />-->
-          <!--                <PvInputText-->
-          <!--                  v-if="field.type === 'string'"-->
-          <!--                  v-model="field.value"-->
-          <!--                  placeholder="Field Value"-->
-          <!--                  class="flex-grow-1"-->
-          <!--                />-->
-          <!--                <PvInputNumber-->
-          <!--                  v-if="field.type === 'number'"-->
-          <!--                  v-model="field.value"-->
-          <!--                  placeholder="Field Value"-->
-          <!--                  class="flex-grow-1"-->
-          <!--                />-->
-          <!--                <PvDropdown-->
-          <!--                  v-if="field.type === 'boolean'"-->
-          <!--                  v-model="field.value"-->
-          <!--                  placeholder="Field Value"-->
-          <!--                  :options="booleanDropDownOptions"-->
-          <!--                  option-label="label"-->
-          <!--                  option-value="value"-->
-          <!--                  class="flex-grow-1"-->
-          <!--                />-->
-          <!--                <PvButton type="button" @click="removeField(field.name, addedParams)">Delete</PvButton>-->
-          <!--              </div>-->
-          <!--            </div>-->
-          <!--          </div>-->
-          <!--          <PvButton label="Add Param" text icon="pi pi-plus" class="my-4" @click="addParam" />-->
-        </section>
-
-        <PvButton type="submit" class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-          >Update Variant</PvButton
-        >
+        </div>
+        <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
+          <div class="flex flex-row align-items-center">
+            <PvCheckbox
+              v-model="variantCheckboxData"
+              input-id="chbx-demoVariant"
+              name="variantCheckboxData"
+              value="isDemoVariant"
+            />
+            <label class="ml-1 mr-3" for="chbx-demoVariant">Mark as <b>Demo Variant</b></label>
+          </div>
+          <div class="flex flex-row align-items-center">
+            <PvCheckbox
+              v-model="variantCheckboxData"
+              input-id="chbx-testVariant"
+              name="variantCheckboxData"
+              value="isTestVariant"
+            />
+            <label class="ml-1 mr-3" for="chbx-testVariant">Mark as <b>Test Variant</b></label>
+          </div>
+          <div class="flex flex-row align-items-center">
+            <div class="flex flex-row align-items-center">
+              <PvCheckbox
+                v-model="variantCheckboxData"
+                input-id="chbx-registeredVariant"
+                name="variantCheckboxData"
+                value="isRegisteredVariant"
+              />
+              <label class="ml-1 mr-3" for="chbx-externalVariant">Mark as <b>Registered Variant</b></label>
+            </div>
+          </div>
+        </div>
+        <div class="form-submit">
+          <PvButton
+            type="submit"
+            label="Submit"
+            class="submit-button w-2 my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+            severity="primary"
+          />
+        </div>
       </form>
-    </PvTabPanel>
-  </PvTabView>
+    </div>
+  </div>
+
+  <div v-show="viewModel.value === 'update'">
+    <h1 class="text-center font-bold">Update a Variant</h1>
+    <form @submit.prevent="handleUpdateVariant()">
+      <section class="flex flex-column gap-2 mb-4 p-4">
+        <label for="task-select" class="my-2">
+          <small class="text-gray-400 font-bold">Select an Existing Task </small>
+          <span class="required">*</span></label
+        >
+        <PvDropdown
+          v-model="selectedTask"
+          :options="formattedTasks"
+          option-label="name"
+          option-value="id"
+          placeholder="Select a Game"
+          @click="clearFieldParamArrays()"
+        />
+        <label for="variant-select" class="my-2">
+          <small class="text-gray-400 font-bold">Select an Existing Variant </small>
+          <span class="required">*</span></label
+        >
+        <PvDropdown
+          v-model="selectedVariant"
+          :options="filteredVariants"
+          :option-label="(data) => (data.variant.name ? data.variant.name : data.variant.id)"
+          option-value="variant"
+          placeholder="Select a Variant"
+          @click="clearFieldParamArrays()"
+        />
+      </section>
+
+      <section v-if="selectedVariant" class="flex flex-column align-items-start mt-4 p-4">
+        <div class="flex flex-column w-full">
+          <label for="fieldsOutput">
+            <strong>Fields</strong>
+          </label>
+          <div v-for="(value, key) in selectedVariant" id="fieldsOutput" :key="key">
+            <div v-if="!ignoreFields.includes(key)">
+              <div
+                v-if="updatedVariantData[key] !== undefined"
+                class="flex align-items-center justify-content-between gap-2 mb-1"
+              >
+                <label :for="key" class="w-1">
+                  <em>{{ key }}</em>
+                </label>
+                <PvInputText id="inputEditVariantType" :placeholder="typeof value" disabled class="w-2 text-center" />
+                <PvInputText
+                  v-if="typeof value === 'string'"
+                  v-model="updatedVariantData[key]"
+                  :placeholder="value"
+                  class="flex-grow-1"
+                />
+                <PvInputNumber
+                  v-else-if="typeof value === 'number'"
+                  v-model="updatedVariantData[key]"
+                  class="flex-grow-1"
+                />
+                <PvDropdown
+                  v-else-if="typeof value === 'boolean'"
+                  v-model="updatedVariantData[key]"
+                  :options="booleanDropDownOptions"
+                  option-label="label"
+                  option-value="value"
+                  class="flex-grow-1"
+                />
+                <PvButton
+                  type="button"
+                  icon="pi pi-trash"
+                  class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                  text
+                  @click="deleteParam(key)"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div v-if="addedFields.length > 0" class="w-full">
+            <div v-for="(field, index) in addedFields" :key="index" class="flex align-items-center column-gap-2 mb-1">
+              <PvInputText v-model="field.name" placeholder="Field Name" />
+              <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
+
+              <PvInputText
+                v-if="field.type === 'string'"
+                v-model="field.value"
+                placeholder="Field Value"
+                class="flex-grow-1"
+              />
+              <PvInputNumber
+                v-if="field.type === 'number'"
+                v-model="field.value"
+                placeholder="Field Value"
+                class="flex-grow-1"
+              />
+              <PvDropdown
+                v-if="field.type === 'boolean'"
+                v-model="field.value"
+                placeholder="Field Value"
+                :options="booleanDropDownOptions"
+                option-label="label"
+                option-value="value"
+                class="flex-grow-1"
+              />
+              <PvButton
+                type="button"
+                icon="pi pi-trash"
+                class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+                @click="removeField(field.name, addedFields)"
+              />
+            </div>
+          </div>
+        </div>
+        <PvButton
+          label="Add Field"
+          text
+          icon="pi pi-plus"
+          class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+          @click="addField"
+        />
+
+        <!--          **** Disabling the function to edit game params for now ****-->
+
+        <!--          <div class="flex flex-column w-8">-->
+        <!--            <label for="paramsOutput">-->
+        <!--              <strong>Game Params</strong>-->
+        <!--            </label>-->
+        <!--            <div v-for="(param, paramName) in selectedVariant.params" id="paramsOutput" :key="paramName" class="mb-1">-->
+        <!--              <div-->
+        <!--                v-if="updatedVariantData.params[paramName] !== undefined"-->
+        <!--                class="flex align-items-center justify-content-end column-gap-2"-->
+        <!--              >-->
+        <!--                <label :for="paramName" class="w-2">-->
+        <!--                  <em>{{ paramName }} </em>-->
+        <!--                </label>-->
+        <!--                <PvInputText id="inputEditParamType" :placeholder="typeof param" class="w-2" disabled />-->
+        <!--                <PvInputText-->
+        <!--                  v-if="typeof param === 'string'"-->
+        <!--                  v-model="updatedVariantData.params[paramName]"-->
+        <!--                  :placeholder="param"-->
+        <!--                  class="flex-grow-1"-->
+        <!--                />-->
+        <!--                <PvInputNumber-->
+        <!--                  v-else-if="typeof param === 'number'"-->
+        <!--                  v-model="updatedVariantData.params[paramName]"-->
+        <!--                  class="flex-grow-1"-->
+        <!--                />-->
+        <!--                <PvDropdown-->
+        <!--                  v-else-if="typeof param === 'boolean'"-->
+        <!--                  v-model="updatedVariantData.params[paramName]"-->
+        <!--                  :options="booleanDropDownOptions"-->
+        <!--                  option-label="label"-->
+        <!--                  option-value="value"-->
+        <!--                  class="flex-grow-1"-->
+        <!--                />-->
+        <!--                <PvButton type="button" @click="deleteParam(paramName)">Delete</PvButton>-->
+        <!--              </div>-->
+        <!--            </div>-->
+        <!--            <div v-if="addedParams.length > 0">-->
+        <!--              <div v-for="(field, index) in addedParams" :key="index" class="flex align-items-center column-gap-2 mb-1">-->
+        <!--                <PvInputText v-model="field.name" placeholder="Field Name" />-->
+        <!--                <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />-->
+        <!--                <PvInputText-->
+        <!--                  v-if="field.type === 'string'"-->
+        <!--                  v-model="field.value"-->
+        <!--                  placeholder="Field Value"-->
+        <!--                  class="flex-grow-1"-->
+        <!--                />-->
+        <!--                <PvInputNumber-->
+        <!--                  v-if="field.type === 'number'"-->
+        <!--                  v-model="field.value"-->
+        <!--                  placeholder="Field Value"-->
+        <!--                  class="flex-grow-1"-->
+        <!--                />-->
+        <!--                <PvDropdown-->
+        <!--                  v-if="field.type === 'boolean'"-->
+        <!--                  v-model="field.value"-->
+        <!--                  placeholder="Field Value"-->
+        <!--                  :options="booleanDropDownOptions"-->
+        <!--                  option-label="label"-->
+        <!--                  option-value="value"-->
+        <!--                  class="flex-grow-1"-->
+        <!--                />-->
+        <!--                <PvButton type="button" @click="removeField(field.name, addedParams)">Delete</PvButton>-->
+        <!--              </div>-->
+        <!--            </div>-->
+        <!--          </div>-->
+        <!--          <PvButton label="Add Param" text icon="pi pi-plus" class="my-4" @click="addParam" />-->
+      </section>
+
+      <PvButton type="submit" class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+        >Update Variant</PvButton
+      >
+    </form>
+  </div>
 </template>
 
 <script setup>
@@ -465,6 +471,19 @@ let addedFields = reactive([]);
 
 let newParams = reactive([]);
 
+const viewModel = ref({ label: 'Create Variant', value: 'create' });
+const modelViews = [
+  { label: 'Create Variant', value: 'create' },
+  { label: 'Update Variant', value: 'update' },
+];
+
+const handleViewChange = (value) => {
+  const selectedView = modelViews.find((view) => view.value === value);
+  if (selectedView) {
+    viewModel.value = selectedView;
+  }
+};
+
 // Fields to ignore when displaying variant data
 const ignoreFields = ['id', 'lastUpdated', 'params', 'parentDoc'];
 
@@ -811,4 +830,9 @@ const clearFieldParamArrays = () => {
   background-color: #2b8ecb;
   color: black;
 }
+
+.p-selectbutton.active-button {
+  border: 2px solid red;
+  color: black;
+}
 </style>

From c2c971c2c122df10053cfe5b3f2910037c5954a8 Mon Sep 17 00:00:00 2001
From: Kyle <ksmontville@gmail.com>
Date: Tue, 9 Jul 2024 11:20:32 -0700
Subject: [PATCH 32/32] select button styling and re-fetch all data on form
 submit

---
 src/components/tasks/ManageTasks.vue    | 29 +++++++++--------
 src/components/tasks/ManageVariants.vue | 41 ++++++++++++++++---------
 2 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index 50ea9338b..b390481aa 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -3,12 +3,10 @@
   <PvSelectButton
     v-model="viewModel"
     :options="modelViews"
-    option-label="label"
-    option-value="value"
     class="flex my-2 select-button p-2"
     @change="handleViewChange($event.value)"
   />
-  <div v-show="viewModel.value === 'create'">
+  <div v-show="viewModel === 'Create Task'">
     <div v-if="!created" class="card px-3">
       <h1 class="text-center font-bold">Create a New Task</h1>
       <!-- <p class="login-title" align="left">Register for ROAR</p> -->
@@ -212,10 +210,15 @@
         Redirect to this URL upon task completion. ParticipantId can be any string, completed should be set to true.
       </p>
       <p>roar.education/?participantId=[$PARTICIPANT_ID]&completed=[$BOOLEAN]</p>
+      <PvButton
+        label="Create Another Task"
+        class="submit-button bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+        @click="created = false"
+      />
     </div>
   </div>
 
-  <div v-show="viewModel.value === 'update'">
+  <div v-show="viewModel === 'Update Task'">
     <h1 class="text-center font-bold">Update a Task</h1>
     <form @submit.prevent="handleUpdateTask()">
       <section class="flex flex-column gap-2 mb-4 p-4">
@@ -423,7 +426,7 @@ import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { required, requiredIf, url } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useAuthStore } from '@/store/auth';
-import { useQuery } from '@tanstack/vue-query';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
 import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
 import { taskFetcher } from '@/helpers/query/tasks';
@@ -435,6 +438,7 @@ const registeredTasksOnly = ref(true);
 const taskCheckboxData = ref();
 const authStore = useAuthStore();
 const { roarfirekit } = storeToRefs(authStore);
+const queryClient = useQueryClient();
 
 const isExternalTask = computed(() => !!taskCheckboxData.value?.find((item) => item === 'isExternalTask'));
 const selectedTask = ref(null);
@@ -453,14 +457,11 @@ let newFields = reactive([]);
 // This array of objects is later converted back into an object and spread into the updatedTaskData object
 let addedGameConfig = reactive([]);
 
-const viewModel = ref({ label: 'Create Task', value: 'create' });
-const modelViews = [
-  { label: 'Create Task', value: 'create' },
-  { label: 'Update Task', value: 'update' },
-];
+const viewModel = ref('Create Task');
+const modelViews = ['Create Task', 'Update Task'];
 
 const handleViewChange = (value) => {
-  const selectedView = modelViews.find((view) => view.value === value);
+  const selectedView = modelViews.find((view) => view === value);
   if (selectedView) {
     viewModel.value = selectedView;
   }
@@ -667,7 +668,9 @@ const handleUpdateTask = async () => {
     await authStore.roarfirekit.updateTaskOrVariant(updateData);
     toast.add({ severity: 'success', summary: 'Hoorah!', detail: 'Task successfully updated.', life: 3000 });
 
+    // Reset the form and re-fetch the tasks
     resetUpdateTaskForm();
+    await queryClient.invalidateQueries(['tasks', registeredTasksOnly]);
   } catch (error) {
     console.error(error);
   }
@@ -684,7 +687,7 @@ const handleNewTaskSubmit = async (isFormValid) => {
     return;
   }
 
-  const convertedGameConfig = convertParamsToObj(gameConfig);
+  const convertedGameConfig = convertParamsToObj(gameConfig) ?? {};
   const convertedTaskParams = isExternalTask ? convertParamsToObj(taskParams) : null;
 
   let newTaskObject = reactive({
@@ -707,6 +710,8 @@ const handleNewTaskSubmit = async (isFormValid) => {
   try {
     await authStore.roarfirekit.registerTaskVariant({ ...newTaskObject });
     created.value = true;
+    // Re-fetch tasks
+    await queryClient.invalidateQueries(['tasks', registeredTasksOnly]);
   } catch (error) {
     console.error(error);
   }
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index 1b34b840b..e21467d7c 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -3,12 +3,10 @@
   <PvSelectButton
     v-model="viewModel"
     :options="modelViews"
-    option-label="label"
-    option-value="value"
     class="flex my-2 select-button p-2"
     @change="handleViewChange($event.value)"
   />
-  <div v-show="viewModel.value === 'create'">
+  <div v-show="viewModel === 'Create Variant'">
     <div class="card px-3">
       <form class="p-fluid" @submit.prevent="handleVariantSubmit(!v$.$invalid)">
         <h1 class="text-center font-bold">Create a New Variant</h1>
@@ -242,7 +240,7 @@
     </div>
   </div>
 
-  <div v-show="viewModel.value === 'update'">
+  <div v-show="viewModel === 'Update Variant'">
     <h1 class="text-center font-bold">Update a Variant</h1>
     <form @submit.prevent="handleUpdateVariant()">
       <section class="flex flex-column gap-2 mb-4 p-4">
@@ -441,7 +439,7 @@ import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useAuthStore } from '@/store/auth';
-import { useQuery } from '@tanstack/vue-query';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
 import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
 import { taskFetcher } from '@/helpers/query/tasks';
@@ -454,6 +452,7 @@ const registeredTasksOnly = ref(true);
 const variantCheckboxData = ref();
 const authStore = useAuthStore();
 const { roarfirekit } = storeToRefs(authStore);
+const queryClient = useQueryClient();
 
 const selectedTask = ref(null);
 const selectedVariant = ref(null);
@@ -471,14 +470,11 @@ let addedFields = reactive([]);
 
 let newParams = reactive([]);
 
-const viewModel = ref({ label: 'Create Variant', value: 'create' });
-const modelViews = [
-  { label: 'Create Variant', value: 'create' },
-  { label: 'Update Variant', value: 'update' },
-];
+const viewModel = ref('Create Variant');
+const modelViews = ['Create Variant', 'Update Variant'];
 
 const handleViewChange = (value) => {
-  const selectedView = modelViews.find((view) => view.value === value);
+  const selectedView = modelViews.find((view) => view === value);
   if (selectedView) {
     viewModel.value = selectedView;
   }
@@ -733,7 +729,10 @@ const handleUpdateVariant = async () => {
     await authStore.roarfirekit.updateTaskOrVariant(updateData);
     toast.add({ severity: 'success', summary: 'Hoorah!', detail: 'Variant successfully updated.', life: 3000 });
 
+    // Reset the form and re-fetch the data
     resetUpdateVariantForm();
+    await queryClient.invalidateQueries(['tasks', registeredTasksOnly]);
+    await queryClient.invalidateQueries(['variants', 'all']);
   } catch (error) {
     console.error(error);
   }
@@ -752,7 +751,7 @@ const handleVariantSubmit = async (isFormValid) => {
     return;
   }
 
-  const convertedParams = convertParamsToObj(newParams);
+  const convertedParams = convertParamsToObj(newParams) ?? {};
 
   const combinedParams = {
     ...variantParams.value,
@@ -777,7 +776,10 @@ const handleVariantSubmit = async (isFormValid) => {
 
     submitted.value = false;
 
+    // Reset the form and re-fetch the data
     resetCreateVariantForm();
+    await queryClient.invalidateQueries(['tasks', registeredTasksOnly]);
+    await queryClient.invalidateQueries(['variants', 'all']);
   } catch (error) {
     console.error(error);
   }
@@ -831,8 +833,17 @@ const clearFieldParamArrays = () => {
   color: black;
 }
 
-.p-selectbutton.active-button {
-  border: 2px solid red;
-  color: black;
+.select-button .p-button:last-of-type:not(:only-of-type) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 25rem;
+  border-bottom-right-radius: 25rem;
+}
+
+.select-button .p-button:first-of-type:not(:only-of-type) {
+  border-top-left-radius: 25rem;
+  border-bottom-left-radius: 25rem;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 </style>