From 55bc28e20cd9ff1519aa45a36656362d39cd5d6e Mon Sep 17 00:00:00 2001
From: DallinFromEarth <112426674+DallinFromEarth@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:33:54 -0700
Subject: [PATCH 1/5] refactor most config into separate components

---
 .../components/config/BannerConfigEditor.vue  |  68 ++++
 .../src/components/config/ConfigSection.vue   |  40 +++
 .../config/CourseIdConfigEditor.vue           | 146 ++++++++
 .../config/LivePhaseConfigEditor.vue          |  51 +++
 .../src/views/AdminView/ConfigView.vue        | 311 +++---------------
 5 files changed, 346 insertions(+), 270 deletions(-)
 create mode 100644 src/main/resources/frontend/src/components/config/BannerConfigEditor.vue
 create mode 100644 src/main/resources/frontend/src/components/config/ConfigSection.vue
 create mode 100644 src/main/resources/frontend/src/components/config/CourseIdConfigEditor.vue
 create mode 100644 src/main/resources/frontend/src/components/config/LivePhaseConfigEditor.vue

diff --git a/src/main/resources/frontend/src/components/config/BannerConfigEditor.vue b/src/main/resources/frontend/src/components/config/BannerConfigEditor.vue
new file mode 100644
index 00000000..bf431353
--- /dev/null
+++ b/src/main/resources/frontend/src/components/config/BannerConfigEditor.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useAppConfigStore } from '@/stores/appConfig'
+import { setBanner } from '@/services/configService'
+
+const appConfigStore = useAppConfigStore();
+
+const bannerMessageToSubmit = ref<string>(appConfigStore.bannerMessage)
+const bannerColorToSubmit = ref<string>(appConfigStore.bannerColor)
+const bannerLinkToSubmit = ref<string>(appConfigStore.bannerLink)
+const bannerWillExpire = ref<boolean>(false)
+const bannerExpirationDate = ref<string>("")
+const bannerExpirationTime = ref<string>("")
+const clearBannerMessage = () => {
+  bannerMessageToSubmit.value = ""
+  bannerLinkToSubmit.value = ""
+  bannerColorToSubmit.value = ""
+  bannerColorToSubmit.value = ""
+  bannerWillExpire.value = false
+}
+const submitBanner = async () => {
+  let combinedDateTime;
+  if (bannerWillExpire.value) {
+    combinedDateTime = `${bannerExpirationDate.value}T${bannerExpirationTime.value ? bannerExpirationTime.value : "23:59"}:59`;
+  } else {
+    combinedDateTime = ""
+  }
+  try {
+    await setBanner(bannerMessageToSubmit.value, bannerLinkToSubmit.value, bannerColorToSubmit.value, combinedDateTime)
+  } catch (e) {
+    alert("There was a problem in saving the updated banner message:\n" + e)
+  }
+  //openBannerMessage.value = false
+}
+</script>
+
+<template>
+  <p>Set a message for students to see from the Autograder</p>
+  <input v-model="bannerMessageToSubmit" type="text" placeholder="No Banner Message"/>
+  <p>Set a url that the user will be taken to if they click on the banner</p>
+  <input v-model="bannerLinkToSubmit" type="text" placeholder="No Destination URL"/>
+  <p>Choose a background color</p>
+  <select id="bannerColorSelect" v-model="bannerColorToSubmit">
+    <option selected value="">Default</option>
+    <option value="#d62b18">Red</option>
+    <option value="#eb700c">Orange</option>
+    <option value="#ded77a">Yellow</option>
+    <option value="#0cab11">Green</option>
+    <option value="#002E5D">BYU Blue</option>
+    <option value="#5e12b5">Purple</option>
+    <option value="#424142">Gray</option>
+    <option value="#000000">Black</option>
+  </select>
+  <p>Message Expires: <input type="checkbox" v-model="bannerWillExpire"/></p>
+  <div v-if="bannerWillExpire">
+    <input type="date" v-model="bannerExpirationDate"/><input type="time" v-model="bannerExpirationTime"/>
+    <p><em>If no time is selected, it will expire at the end of the day (Utah Time)</em></p>
+  </div>
+
+  <div>
+    <button class="small" @click="submitBanner" :disabled="bannerWillExpire && (bannerExpirationDate.length == 0)">Save</button>
+    <button class="small" @click="clearBannerMessage">Clear</button>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/main/resources/frontend/src/components/config/ConfigSection.vue b/src/main/resources/frontend/src/components/config/ConfigSection.vue
new file mode 100644
index 00000000..006d748d
--- /dev/null
+++ b/src/main/resources/frontend/src/components/config/ConfigSection.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import PopUp from '@/components/PopUp.vue'
+import { useAppConfigStore } from '@/stores/appConfig'
+
+defineProps<{
+  title: string
+  description: string
+}>()
+
+const editorPopup = ref<boolean>(false);
+
+const openEditor = () => {
+  useAppConfigStore().updateConfig()
+  editorPopup.value = true
+}
+</script>
+
+<template>
+  <section class="config-section">
+    <h3 @click="openEditor" style="cursor: pointer">{{ title }} <i class="fa-solid fa-pen-to-square"/></h3>
+    <p>{{ description }}</p>
+    <slot name="current"/>
+    <PopUp
+      v-if="editorPopup"
+      @closePopUp="editorPopup = false">
+      <h3>Edit {{ title }}</h3>
+      <slot name="editor"/>
+    </PopUp>
+  </section>
+</template>
+
+<style scoped>
+.config-section {
+  padding: 1rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.5rem;
+  background-color: white;
+}
+</style>
diff --git a/src/main/resources/frontend/src/components/config/CourseIdConfigEditor.vue b/src/main/resources/frontend/src/components/config/CourseIdConfigEditor.vue
new file mode 100644
index 00000000..a878402a
--- /dev/null
+++ b/src/main/resources/frontend/src/components/config/CourseIdConfigEditor.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { listOfPhases, Phase, type RubricInfo, type RubricType } from '@/types/types'
+import {
+  convertPhaseStringToEnum,
+  convertRubricTypeToHumanReadable,
+  getRubricTypes,
+  isPhaseGraded
+} from '@/utils/utils'
+import { computed, type WritableComputedRef } from 'vue'
+import { setCanvasCourseIds, setCourseIds } from '@/services/configService'
+import { useAppConfigStore } from '@/stores/appConfig'
+
+const appConfigStore = useAppConfigStore();
+
+const getUpdatedConfig = async () => {
+  await appConfigStore.updateConfig();
+}
+
+const assignmentIdProxy = (phase: Phase): WritableComputedRef<number> => computed({
+  get: (): number => appConfigStore.assignmentIds.get(phase) || -1,
+  set: (value: number) => appConfigStore.assignmentIds.set(phase, value)
+})
+
+const rubricIdInfoProxy = (phase: Phase, rubricType: RubricType): WritableComputedRef<string> => {
+  return getProxy(
+    phase,
+    rubricType,
+    (rubricInfo) => rubricInfo.id,
+    (rubricInfo, value) => rubricInfo.id = value,
+    "No Rubric ID found"
+  );
+}
+
+const rubricPointsInfoProxy = (phase: Phase, rubricType: RubricType): WritableComputedRef<number> => {
+  return getProxy(
+    phase,
+    rubricType,
+    (rubricInfo) => rubricInfo.points,
+    (rubricInfo, value) => rubricInfo.points = value,
+    -1
+  );
+}
+
+const getProxy = <T>(
+  phase: Phase,
+  rubricType: RubricType,
+  getFunc: (rubricInfo: RubricInfo) => T,
+  setFunc: (rubricInfo: RubricInfo, value: T) => void,
+  defaultValue: T,
+): WritableComputedRef<T> => computed({
+  get: (): T => {
+    const rubricIdMap = appConfigStore.rubricInfo.get(phase);
+    if (!rubricIdMap) return defaultValue;
+    const rubricInfo = rubricIdMap.get(rubricType);
+    if (!rubricInfo) return defaultValue;
+    return getFunc(rubricInfo);
+  },
+  set: (value: T) => {
+    const rubricTypeMap = appConfigStore.rubricInfo.get(phase);
+    if (!rubricTypeMap) return;
+    const rubricInfo = rubricTypeMap.get(rubricType);
+    if (!rubricInfo) return;
+    setFunc(rubricInfo, value);
+  }
+});
+
+const submitManuelCourseIds = async () => {
+  const userConfirmed = window.confirm("Are you sure you want to manually override?");
+  if (userConfirmed) {
+    try {
+      await setCourseIds(appConfigStore.courseNumber, appConfigStore.assignmentIds, appConfigStore.rubricInfo);
+      //openManuelCourseIds.value = false;
+    } catch (e) {
+      alert("There was problem manually setting the course-related IDs: " + (e as Error).message);
+    }
+  }
+}
+
+const submitCanvasCourseIds = async () => {
+  try {
+    await setCanvasCourseIds();
+  } catch (e) {
+    alert("There was problem getting and setting the course-related IDs using Canvas: " + (e as Error).message);
+  }
+}
+
+</script>
+
+<template>
+  <p>
+    <i class="fa-solid fa-triangle-exclamation" style="color: orangered"/>
+    Note: All the default input values are the values that are currently being used.
+  </p>
+
+  <br>
+  <h4>Course Number</h4>
+  <label for="courseIdInput">Course Number: </label>
+  <input id="courseIdInput" type="number" v-model.number="appConfigStore.courseNumber" placeholder="Course Number">
+  <br><br>
+  <h4>Assignment and Rubric IDs/Points</h4>
+  <div v-for="(phase, phaseIndex) in listOfPhases()" :key="phaseIndex">
+    <div v-if="isPhaseGraded(phase)">
+      <h4>{{ phase }}:</h4>
+      <label :for="'assignmentIdInput' + phaseIndex">Assignment ID: </label>
+      <input
+        :id="'assignmentIdInput' + phaseIndex"
+        type="number"
+        v-model.number="assignmentIdProxy(phase).value"
+        placeholder="Assignment ID"
+      >
+      <br>
+
+      <ol>
+        <li v-for="(rubricType, rubricIndex) in getRubricTypes(convertPhaseStringToEnum(phase as unknown as string))" :key="rubricIndex">
+          <u>{{ convertRubricTypeToHumanReadable(rubricType) }}</u>:
+          <div class="inline-container">
+            <label :for="'rubricIdInput' + phaseIndex + rubricIndex">Rubric&nbsp;ID: </label>
+            <input
+              :id="'rubricIdInput' + phaseIndex + rubricIndex"
+              type="text"
+              v-model="rubricIdInfoProxy(phase, rubricType).value"
+              placeholder="Rubric ID"
+            >
+          </div>
+          <div class="inline-container">
+            <label :for="'rubricPointsInput' + phaseIndex + rubricIndex">Rubric Points: </label>
+            <input
+              :id="'rubricPointsInput' + phaseIndex + rubricIndex"
+              type="number"
+              v-model.number="rubricPointsInfoProxy(phase, rubricType).value"
+              placeholder="Points"
+            >
+          </div>
+        </li>
+      </ol>
+    </div>
+  </div>
+
+  <br>
+  <button @click="submitManuelCourseIds">Submit</button>
+  <button @click="submitCanvasCourseIds">Reset IDs Via Canvas</button>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/main/resources/frontend/src/components/config/LivePhaseConfigEditor.vue b/src/main/resources/frontend/src/components/config/LivePhaseConfigEditor.vue
new file mode 100644
index 00000000..62bcd717
--- /dev/null
+++ b/src/main/resources/frontend/src/components/config/LivePhaseConfigEditor.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { listOfPhases, Phase } from '@/types/types'
+import { useAppConfigStore } from '@/stores/appConfig'
+import { setLivePhases } from '@/services/configService'
+
+const appConfigStore = useAppConfigStore();
+
+const setAllPhases = (setting: boolean) => {
+  for (const phase of listOfPhases() as Phase[]) {
+    appConfigStore.phaseActivationList[phase] = setting
+  }
+}
+const submitLivePhases = async () => {
+  let livePhases: Phase[] = []
+  for (const phase of listOfPhases() as Phase[]) {
+    if (useAppConfigStore().phaseActivationList[phase]) {
+      livePhases.push(phase);
+    }
+  }
+
+  try {
+    await setLivePhases(livePhases)
+  } catch (e) {
+    alert("There was a problem in saving live phases")
+  }
+}
+</script>
+
+<template>
+  <div class="checkboxes">
+    <label v-for="(phase, index) in listOfPhases()" :key="index">
+      <span><input type="checkbox" v-model="appConfigStore.phaseActivationList[phase]"> {{ phase }}</span>
+    </label>
+  </div>
+
+  <div class="submitChanges">
+    <p><em>This will not effect admin submissions</em></p>
+    <div>
+      <button @click="setAllPhases(true)" class="small">Enable all</button>
+      <button @click="setAllPhases(false)" class="small">Disable all</button>
+    </div>
+    <button @click="submitLivePhases">Submit Changes</button>
+  </div>
+</template>
+
+<style scoped>
+.checkboxes {
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/src/main/resources/frontend/src/views/AdminView/ConfigView.vue b/src/main/resources/frontend/src/views/AdminView/ConfigView.vue
index 50efa303..62f44579 100644
--- a/src/main/resources/frontend/src/views/AdminView/ConfigView.vue
+++ b/src/main/resources/frontend/src/views/AdminView/ConfigView.vue
@@ -1,243 +1,72 @@
 <script setup lang="ts">
-import {computed, ref, type WritableComputedRef} from 'vue'
+import { onMounted, ref } from 'vue'
 import PopUp from '@/components/PopUp.vue'
-import {listOfPhases, Phase, type RubricInfo, type RubricType} from '@/types/types'
-import {setBanner, setLivePhases, setCanvasCourseIds, setCourseIds} from '@/services/configService'
+import { listOfPhases } from '@/types/types'
 import { useAppConfigStore } from '@/stores/appConfig'
-import {
-  convertPhaseStringToEnum,
-  convertRubricTypeToHumanReadable,
-  getRubricTypes,
-  isPhaseGraded, readableTimestamp
-} from '@/utils/utils'
+import { generateClickableLink, readableTimestamp } from '@/utils/utils'
+import ConfigSection from '@/components/config/ConfigSection.vue'
+import BannerConfigEditor from '@/components/config/BannerConfigEditor.vue'
+import LivePhaseConfigEditor from '@/components/config/LivePhaseConfigEditor.vue'
+import CourseIdConfigEditor from '@/components/config/CourseIdConfigEditor.vue'
 
 const appConfigStore = useAppConfigStore();
 
 // PopUp Control
 const openLivePhases = ref<boolean>(false);
-const openBannerMessage = ref<boolean>(false);
 const openCanvasCourseIds = ref<boolean>(false);
 const openManuelCourseIds = ref<boolean>(false);
 
 // =========================
-
-// Banner Message Setting
-const bannerMessageToSubmit = ref<string>(appConfigStore.bannerMessage)
-const bannerColorToSubmit = ref<string>("")
-const bannerLinkToSubmit = ref<string>("")
-const bannerWillExpire = ref<boolean>(false)
-const bannerExpirationDate = ref<string>("")
-const bannerExpirationTime = ref<string>("")
-const clearBannerMessage = () => {
-  bannerMessageToSubmit.value = ""
-  bannerLinkToSubmit.value = ""
-  bannerColorToSubmit.value = ""
-  bannerColorToSubmit.value = ""
-  bannerWillExpire.value = false
-}
-const submitBanner = async () => {
-  let combinedDateTime;
-  if (bannerWillExpire.value) {
-    combinedDateTime = `${bannerExpirationDate.value}T${bannerExpirationTime.value ? bannerExpirationTime.value : "23:59"}:59`;
-  } else {
-    combinedDateTime = ""
-  }
-  try {
-    await setBanner(bannerMessageToSubmit.value, bannerLinkToSubmit.value, bannerColorToSubmit.value, combinedDateTime)
-  } catch (e) {
-    alert("There was a problem in saving the updated banner message:\n" + e)
-  }
-  openBannerMessage.value = false
-}
-// =========================
-
-// Live Phase Setting
-const setAllPhases = (setting: boolean) => {
-  for (const phase of listOfPhases() as Phase[]) {
-    appConfigStore.phaseActivationList[phase] = setting
-  }
-}
-const submitLivePhases = async () => {
-  let livePhases: Phase[] = []
-  for (const phase of listOfPhases() as Phase[]) {
-    if (useAppConfigStore().phaseActivationList[phase]) {
-      livePhases.push(phase);
-    }
-  }
-
-  try {
-    await setLivePhases(livePhases)
-  } catch (e) {
-    alert("There was a problem in saving live phases")
-  }
-  openLivePhases.value = false
-}
-// =========================
-
-// Course ID Setting
-
-const getUpdatedConfig = async () => {
-  await appConfigStore.updateConfig();
-  openManuelCourseIds.value = true;
-}
-
-const assignmentIdProxy = (phase: Phase): WritableComputedRef<number> => computed({
-  get: (): number => appConfigStore.assignmentIds.get(phase) || -1,
-  set: (value: number) => appConfigStore.assignmentIds.set(phase, value)
+onMounted( async () => {
+  await useAppConfigStore().updateConfig();
 })
 
-const rubricIdInfoProxy = (phase: Phase, rubricType: RubricType): WritableComputedRef<string> => {
-  return getProxy(
-      phase,
-      rubricType,
-      (rubricInfo) => rubricInfo.id,
-      (rubricInfo, value) => rubricInfo.id = value,
-      "No Rubric ID found"
-  );
-}
-
-const rubricPointsInfoProxy = (phase: Phase, rubricType: RubricType): WritableComputedRef<number> => {
-  return getProxy(
-      phase,
-      rubricType,
-      (rubricInfo) => rubricInfo.points,
-      (rubricInfo, value) => rubricInfo.points = value,
-      -1
-  );
-}
-
-const getProxy = <T>(
-    phase: Phase,
-    rubricType: RubricType,
-    getFunc: (rubricInfo: RubricInfo) => T,
-    setFunc: (rubricInfo: RubricInfo, value: T) => void,
-    defaultValue: T,
-): WritableComputedRef<T> => computed({
-  get: (): T => {
-    const rubricIdMap = appConfigStore.rubricInfo.get(phase);
-    if (!rubricIdMap) return defaultValue;
-    const rubricInfo = rubricIdMap.get(rubricType);
-    if (!rubricInfo) return defaultValue;
-    return getFunc(rubricInfo);
-  },
-  set: (value: T) => {
-    const rubricTypeMap = appConfigStore.rubricInfo.get(phase);
-    if (!rubricTypeMap) return;
-    const rubricInfo = rubricTypeMap.get(rubricType);
-    if (!rubricInfo) return;
-    setFunc(rubricInfo, value);
-  }
-});
-
-const submitManuelCourseIds = async () => {
-  const userConfirmed = window.confirm("Are you sure you want to manually override?");
-  if (userConfirmed) {
-    try {
-      await setCourseIds(appConfigStore.courseNumber, appConfigStore.assignmentIds, appConfigStore.rubricInfo);
-      openManuelCourseIds.value = false;
-    } catch (e) {
-      alert("There was problem manually setting the course-related IDs: " + (e as Error).message);
-    }
-  }
-}
-
-const submitCanvasCourseIds = async () => {
-  try {
-    await setCanvasCourseIds();
-    openCanvasCourseIds.value = false;
-  } catch (e) {
-    alert("There was problem getting and setting the course-related IDs using Canvas: " + (e as Error).message);
-  }
-}
-
-// =========================
-
 </script>
 
 <template>
   <div id="configContainer">
-    <div class="configCategory">
-      <h3>Live Phases</h3>
-      <p>These are the phases are live and open for students to submit to</p>
-      <div v-for="phase in listOfPhases()">
-        <p>
-          <i v-if="appConfigStore.phaseActivationList[phase]" class="fa-solid fa-circle-check" style="color: green"/>
-          <i v-else class="fa-solid fa-x" style="color: red"/>
-          {{phase}}</p>
-      </div>
-      <button @click="openLivePhases = true">Update</button>
-    </div>
-
-    <div class="configCategory">
-      <h3>Banner message</h3>
+    <ConfigSection title="Banner Message" description="A dynamic message displayed across the top of the Autograder">
+      <template v-slot:editor>
+        <BannerConfigEditor/>
+      </template>
+      <template v-slot:current>
       <span v-if="appConfigStore.bannerMessage">
         <p><span class="infoDescription">Current Message: </span><span v-text="appConfigStore.bannerMessage"/></p>
-        <p><span class="infoDescription">Current Link: </span><span v-text="appConfigStore.bannerLink"/></p>
+        <p><span class="infoDescription">Current Link: </span><span v-html="generateClickableLink(appConfigStore.bannerLink)"/></p>
         <p><span class="infoDescription">Expires: </span><span v-text="readableTimestamp(appConfigStore.bannerExpiration)"/></p>
       </span>
-      <p v-else>There is currently no banner message</p>
-      <button @click="openBannerMessage = true">Set</button>
-    </div>
-
-    <div class="configCategory">
-      <h3>Course Related IDs</h3>
-      <button @click="openCanvasCourseIds = true">Update using Canvas</button>
-      <button @click="getUpdatedConfig">Update Manually</button>
-    </div>
+        <p v-else>There is currently no banner message</p>
+      </template>
+    </ConfigSection>
+
+    <ConfigSection title="Live Phases" description="These are the phases are live and open for students to submit to">
+      <template v-slot:editor>
+        <LivePhaseConfigEditor/>
+      </template>
+      <template v-slot:current>
+        <div v-for="phase in listOfPhases()">
+          <p>
+            <i v-if="appConfigStore.phaseActivationList[phase]" class="fa-solid fa-circle-check" style="color: green"/>
+            <i v-else class="fa-solid fa-x" style="color: red"/>
+            {{phase}}</p>
+        </div>
+      </template>
+    </ConfigSection>
+
+    <ConfigSection title="Course IDs" description="Phase assignment ID numbers, rubric IDs, rubric points, ">
+      <template v-slot:editor>
+        <CourseIdConfigEditor/>
+      </template>
+      <template v-slot:current>
+        <p><b>Course ID:</b> {{appConfigStore.courseNumber}}</p>
+      </template>
+    </ConfigSection>
   </div>
 
   <PopUp
     v-if="openLivePhases"
     @closePopUp="openLivePhases = false; appConfigStore.updateConfig()">
-    <h3>Live Phases</h3>
-    <p>Enable student submissions for the following phases:</p>
-
-    <div class="checkboxes">
-      <label v-for="(phase, index) in listOfPhases()" :key="index">
-        <span><input type="checkbox" v-model="appConfigStore.phaseActivationList[phase]"> {{ phase }}</span>
-      </label>
-    </div>
 
-    <div class="submitChanges">
-      <p><em>This will not effect admin submissions</em></p>
-      <div>
-        <button @click="setAllPhases(true)" class="small">Enable all</button>
-        <button @click="setAllPhases(false)" class="small">Disable all</button>
-      </div>
-      <button @click="submitLivePhases">Submit Changes</button>
-    </div>
-  </PopUp>
-
-  <PopUp
-    v-if="openBannerMessage"
-    @closePopUp="openBannerMessage = false">
-    <h3>Banner Message</h3>
-    <p>Set a message for students to see from the Autograder</p>
-    <input v-model="bannerMessageToSubmit" type="text" placeholder="No Banner Message"/>
-    <p>Set a url that the user will be taken to if they click on the banner</p>
-    <input v-model="bannerLinkToSubmit" type="text" placeholder="No Destination URL"/>
-    <p>Choose a background color</p>
-    <select id="bannerColorSelect" v-model="bannerColorToSubmit">
-      <option selected value="">Default</option>
-      <option value="#d62b18">Red</option>
-      <option value="#eb700c">Orange</option>
-      <option value="#ded77a">Yellow</option>
-      <option value="#0cab11">Green</option>
-      <option value="#002E5D">BYU Blue</option>
-      <option value="#5e12b5">Purple</option>
-      <option value="#424142">Gray</option>
-      <option value="#000000">Black</option>
-    </select>
-    <p>Message Expires: <input type="checkbox" v-model="bannerWillExpire"/></p>
-    <div v-if="bannerWillExpire">
-      <input type="date" v-model="bannerExpirationDate"/><input type="time" v-model="bannerExpirationTime"/>
-      <p><em>If no time is selected, it will expire at the end of the day (Utah Time)</em></p>
-    </div>
-
-    <div>
-      <button class="small" @click="submitBanner" :disabled="bannerWillExpire && (bannerExpirationDate.length == 0)">Save</button>
-      <button class="small" @click="clearBannerMessage">Clear</button>
-    </div>
   </PopUp>
 
   <PopUp
@@ -260,59 +89,6 @@ const submitCanvasCourseIds = async () => {
     v-if="openManuelCourseIds"
     @closePopUp="openManuelCourseIds = false">
     <h3>Course Related IDs</h3>
-    <p>
-      <i class="fa-solid fa-triangle-exclamation" style="color: orangered"/>
-      Note: All the default input values are the values that are currently being used.
-    </p>
-
-    <br>
-    <h4>Course Number</h4>
-    <label for="courseIdInput">Course Number: </label>
-    <input id="courseIdInput" type="number" v-model.number="appConfigStore.courseNumber" placeholder="Course Number">
-    <br><br>
-    <h4>Assignment and Rubric IDs/Points</h4>
-    <div v-for="(phase, phaseIndex) in listOfPhases()" :key="phaseIndex">
-      <div v-if="isPhaseGraded(phase)">
-        <h4>{{ phase }}:</h4>
-        <label :for="'assignmentIdInput' + phaseIndex">Assignment ID: </label>
-        <input
-            :id="'assignmentIdInput' + phaseIndex"
-            type="number"
-            v-model.number="assignmentIdProxy(phase).value"
-            placeholder="Assignment ID"
-        >
-        <br>
-
-        <ol>
-          <li v-for="(rubricType, rubricIndex) in getRubricTypes(convertPhaseStringToEnum(phase as unknown as string))" :key="rubricIndex">
-            <u>{{ convertRubricTypeToHumanReadable(rubricType) }}</u>:
-            <div class="inline-container">
-              <label :for="'rubricIdInput' + phaseIndex + rubricIndex">Rubric&nbsp;ID: </label>
-              <input
-                  :id="'rubricIdInput' + phaseIndex + rubricIndex"
-                  type="text"
-                  v-model="rubricIdInfoProxy(phase, rubricType).value"
-                  placeholder="Rubric ID"
-              >
-            </div>
-            <div class="inline-container">
-              <label :for="'rubricPointsInput' + phaseIndex + rubricIndex">Rubric Points: </label>
-              <input
-                  :id="'rubricPointsInput' + phaseIndex + rubricIndex"
-                  type="number"
-                  v-model.number="rubricPointsInfoProxy(phase, rubricType).value"
-                  placeholder="Points"
-              >
-            </div>
-          </li>
-        </ol>
-      </div>
-    </div>
-
-    <br>
-    <button @click="submitManuelCourseIds">Submit</button>
-    <button @click="getUpdatedConfig">Reset Values</button>
-    <button @click="openManuelCourseIds = false">Close</button>
   </PopUp>
 
 </template>
@@ -347,11 +123,6 @@ input[type="text"]{
   width: 100%;
 }
 
-.checkboxes {
-  display: flex;
-  flex-direction: column;
-}
-
 .center-buttons {
   display: flex;
   justify-content: center;

From d7dcf3eb5ded3a301768c4b00ff66638fea46f99 Mon Sep 17 00:00:00 2001
From: DallinFromEarth <112426674+DallinFromEarth@users.noreply.github.com>
Date: Thu, 7 Nov 2024 19:32:57 -0700
Subject: [PATCH 2/5] allow editor components to close popup

---
 .../components/config/BannerConfigEditor.vue  |  6 ++-
 .../src/components/config/ConfigSection.vue   |  6 ++-
 .../config/CourseIdConfigEditor.vue           | 17 ++++--
 .../config/LivePhaseConfigEditor.vue          | 13 +++++
 .../src/views/AdminView/ConfigView.vue        | 52 +++++++------------
 5 files changed, 55 insertions(+), 39 deletions(-)

diff --git a/src/main/resources/frontend/src/components/config/BannerConfigEditor.vue b/src/main/resources/frontend/src/components/config/BannerConfigEditor.vue
index bf431353..b6898bf0 100644
--- a/src/main/resources/frontend/src/components/config/BannerConfigEditor.vue
+++ b/src/main/resources/frontend/src/components/config/BannerConfigEditor.vue
@@ -3,6 +3,10 @@ import { ref } from 'vue'
 import { useAppConfigStore } from '@/stores/appConfig'
 import { setBanner } from '@/services/configService'
 
+const { closeEditor } = defineProps<{
+  closeEditor: () => void
+}>();
+
 const appConfigStore = useAppConfigStore();
 
 const bannerMessageToSubmit = ref<string>(appConfigStore.bannerMessage)
@@ -30,7 +34,7 @@ const submitBanner = async () => {
   } catch (e) {
     alert("There was a problem in saving the updated banner message:\n" + e)
   }
-  //openBannerMessage.value = false
+  closeEditor()
 }
 </script>
 
diff --git a/src/main/resources/frontend/src/components/config/ConfigSection.vue b/src/main/resources/frontend/src/components/config/ConfigSection.vue
index 006d748d..950805de 100644
--- a/src/main/resources/frontend/src/components/config/ConfigSection.vue
+++ b/src/main/resources/frontend/src/components/config/ConfigSection.vue
@@ -14,6 +14,10 @@ const openEditor = () => {
   useAppConfigStore().updateConfig()
   editorPopup.value = true
 }
+
+const closeEditor = () => {
+  editorPopup.value = false;
+}
 </script>
 
 <template>
@@ -25,7 +29,7 @@ const openEditor = () => {
       v-if="editorPopup"
       @closePopUp="editorPopup = false">
       <h3>Edit {{ title }}</h3>
-      <slot name="editor"/>
+      <slot name="editor" :closeEditor="closeEditor"/>
     </PopUp>
   </section>
 </template>
diff --git a/src/main/resources/frontend/src/components/config/CourseIdConfigEditor.vue b/src/main/resources/frontend/src/components/config/CourseIdConfigEditor.vue
index a878402a..09cd273c 100644
--- a/src/main/resources/frontend/src/components/config/CourseIdConfigEditor.vue
+++ b/src/main/resources/frontend/src/components/config/CourseIdConfigEditor.vue
@@ -12,9 +12,9 @@ import { useAppConfigStore } from '@/stores/appConfig'
 
 const appConfigStore = useAppConfigStore();
 
-const getUpdatedConfig = async () => {
-  await appConfigStore.updateConfig();
-}
+const { closeEditor } = defineProps<{
+  closeEditor: () => void
+}>();
 
 const assignmentIdProxy = (phase: Phase): WritableComputedRef<number> => computed({
   get: (): number => appConfigStore.assignmentIds.get(phase) || -1,
@@ -74,6 +74,7 @@ const submitManuelCourseIds = async () => {
       alert("There was problem manually setting the course-related IDs: " + (e as Error).message);
     }
   }
+  closeEditor()
 }
 
 const submitCanvasCourseIds = async () => {
@@ -82,6 +83,7 @@ const submitCanvasCourseIds = async () => {
   } catch (e) {
     alert("There was problem getting and setting the course-related IDs using Canvas: " + (e as Error).message);
   }
+  closeEditor()
 }
 
 </script>
@@ -142,5 +144,14 @@ const submitCanvasCourseIds = async () => {
 </template>
 
 <style scoped>
+.inline-container {
+  display: flex;
+  align-items: center;
+  margin-right: 10px; /* Optional: Adjust spacing between elements */
+  margin-left: 10px;
+}
 
+.inline-container label {
+  margin-right: 5px; /* Optional: Adjust spacing between label and input */
+}
 </style>
diff --git a/src/main/resources/frontend/src/components/config/LivePhaseConfigEditor.vue b/src/main/resources/frontend/src/components/config/LivePhaseConfigEditor.vue
index 62bcd717..de746ea9 100644
--- a/src/main/resources/frontend/src/components/config/LivePhaseConfigEditor.vue
+++ b/src/main/resources/frontend/src/components/config/LivePhaseConfigEditor.vue
@@ -5,6 +5,10 @@ import { setLivePhases } from '@/services/configService'
 
 const appConfigStore = useAppConfigStore();
 
+const { closeEditor } = defineProps<{
+  closeEditor: () => void
+}>();
+
 const setAllPhases = (setting: boolean) => {
   for (const phase of listOfPhases() as Phase[]) {
     appConfigStore.phaseActivationList[phase] = setting
@@ -23,6 +27,7 @@ const submitLivePhases = async () => {
   } catch (e) {
     alert("There was a problem in saving live phases")
   }
+  closeEditor()
 }
 </script>
 
@@ -48,4 +53,12 @@ const submitLivePhases = async () => {
   display: flex;
   flex-direction: column;
 }
+.submitChanges {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.submitChanges >* {
+  margin: 5px;
+}
 </style>
diff --git a/src/main/resources/frontend/src/views/AdminView/ConfigView.vue b/src/main/resources/frontend/src/views/AdminView/ConfigView.vue
index 62f44579..736ba902 100644
--- a/src/main/resources/frontend/src/views/AdminView/ConfigView.vue
+++ b/src/main/resources/frontend/src/views/AdminView/ConfigView.vue
@@ -26,24 +26,24 @@ onMounted( async () => {
 <template>
   <div id="configContainer">
     <ConfigSection title="Banner Message" description="A dynamic message displayed across the top of the Autograder">
-      <template v-slot:editor>
-        <BannerConfigEditor/>
+      <template #editor="{ closeEditor }">
+        <BannerConfigEditor :closeEditor="closeEditor"/>
       </template>
-      <template v-slot:current>
-      <span v-if="appConfigStore.bannerMessage">
+      <template #current>
+      <div v-if="appConfigStore.bannerMessage">
         <p><span class="infoDescription">Current Message: </span><span v-text="appConfigStore.bannerMessage"/></p>
         <p><span class="infoDescription">Current Link: </span><span v-html="generateClickableLink(appConfigStore.bannerLink)"/></p>
         <p><span class="infoDescription">Expires: </span><span v-text="readableTimestamp(appConfigStore.bannerExpiration)"/></p>
-      </span>
+      </div>
         <p v-else>There is currently no banner message</p>
       </template>
     </ConfigSection>
 
-    <ConfigSection title="Live Phases" description="These are the phases are live and open for students to submit to">
-      <template v-slot:editor>
-        <LivePhaseConfigEditor/>
+    <ConfigSection title="Live Phases" description="These phases are live and open for students to submit to">
+      <template #editor="{ closeEditor }">
+        <LivePhaseConfigEditor :closeEditor="closeEditor"/>
       </template>
-      <template v-slot:current>
+      <template #current>
         <div v-for="phase in listOfPhases()">
           <p>
             <i v-if="appConfigStore.phaseActivationList[phase]" class="fa-solid fa-circle-check" style="color: green"/>
@@ -54,10 +54,10 @@ onMounted( async () => {
     </ConfigSection>
 
     <ConfigSection title="Course IDs" description="Phase assignment ID numbers, rubric IDs, rubric points, ">
-      <template v-slot:editor>
-        <CourseIdConfigEditor/>
+      <template #editor="{ closeEditor }">
+        <CourseIdConfigEditor :closeEditor="closeEditor"/>
       </template>
-      <template v-slot:current>
+      <template #current>
         <p><b>Course ID:</b> {{appConfigStore.courseNumber}}</p>
       </template>
     </ConfigSection>
@@ -94,14 +94,13 @@ onMounted( async () => {
 </template>
 
 <style scoped>
-.submitChanges {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.submitChanges >* {
-  margin: 5px;
+:deep(input[type="text"]) {
+  border: 1px solid #ccc;
+  padding: 8px;
+  border-radius: 4px;
+  width: 100%;
 }
+
 .infoDescription {
   font-weight: bold;
 }
@@ -128,19 +127,4 @@ input[type="text"]{
   justify-content: center;
   align-items: center;
 }
-
-
-
-.inline-container {
-  display: flex;
-  align-items: center;
-  margin-right: 10px; /* Optional: Adjust spacing between elements */
-  margin-left: 10px;
-}
-
-.inline-container label {
-  margin-right: 5px; /* Optional: Adjust spacing between label and input */
-}
-
-
 </style>

From 6afab22d4b17d4bd5fac672b89295042feb653fe Mon Sep 17 00:00:00 2001
From: DallinFromEarth <112426674+DallinFromEarth@users.noreply.github.com>
Date: Fri, 8 Nov 2024 09:23:55 -0700
Subject: [PATCH 3/5] clean up code

---
 .../frontend/src/components/BannerMessage.vue |  2 +-
 .../components/config/BannerConfigEditor.vue  |  5 +-
 .../src/components/config/ConfigSection.vue   |  1 +
 .../config/CourseIdConfigEditor.vue           | 18 +++---
 .../src/views/AdminView/ConfigView.vue        | 63 +++----------------
 5 files changed, 26 insertions(+), 63 deletions(-)

diff --git a/src/main/resources/frontend/src/components/BannerMessage.vue b/src/main/resources/frontend/src/components/BannerMessage.vue
index 2a8afb81..edaf106f 100644
--- a/src/main/resources/frontend/src/components/BannerMessage.vue
+++ b/src/main/resources/frontend/src/components/BannerMessage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, onMounted, ref } from 'vue'
+import { computed } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import { useAppConfigStore } from '@/stores/appConfig'
 
diff --git a/src/main/resources/frontend/src/components/config/BannerConfigEditor.vue b/src/main/resources/frontend/src/components/config/BannerConfigEditor.vue
index b6898bf0..f6729e96 100644
--- a/src/main/resources/frontend/src/components/config/BannerConfigEditor.vue
+++ b/src/main/resources/frontend/src/components/config/BannerConfigEditor.vue
@@ -44,7 +44,10 @@ const submitBanner = async () => {
   <p>Set a url that the user will be taken to if they click on the banner</p>
   <input v-model="bannerLinkToSubmit" type="text" placeholder="No Destination URL"/>
   <p>Choose a background color</p>
-  <select id="bannerColorSelect" v-model="bannerColorToSubmit">
+  <select id="bannerColorSelect" v-model="bannerColorToSubmit" :style="{
+      backgroundColor: bannerColorToSubmit,
+      color: (bannerColorToSubmit ? '#ffffff' : '#000000')
+    }">
     <option selected value="">Default</option>
     <option value="#d62b18">Red</option>
     <option value="#eb700c">Orange</option>
diff --git a/src/main/resources/frontend/src/components/config/ConfigSection.vue b/src/main/resources/frontend/src/components/config/ConfigSection.vue
index 950805de..45eae105 100644
--- a/src/main/resources/frontend/src/components/config/ConfigSection.vue
+++ b/src/main/resources/frontend/src/components/config/ConfigSection.vue
@@ -17,6 +17,7 @@ const openEditor = () => {
 
 const closeEditor = () => {
   editorPopup.value = false;
+  useAppConfigStore().updateConfig()
 }
 </script>
 
diff --git a/src/main/resources/frontend/src/components/config/CourseIdConfigEditor.vue b/src/main/resources/frontend/src/components/config/CourseIdConfigEditor.vue
index 09cd273c..c01e60c7 100644
--- a/src/main/resources/frontend/src/components/config/CourseIdConfigEditor.vue
+++ b/src/main/resources/frontend/src/components/config/CourseIdConfigEditor.vue
@@ -65,25 +65,27 @@ const getProxy = <T>(
 });
 
 const submitManuelCourseIds = async () => {
-  const userConfirmed = window.confirm("Are you sure you want to manually override?");
+  const userConfirmed = window.confirm("Are you sure you want to manually override? \n\nIf you changed the course ID incorrectly, it won't be able to reset properly.");
   if (userConfirmed) {
     try {
       await setCourseIds(appConfigStore.courseNumber, appConfigStore.assignmentIds, appConfigStore.rubricInfo);
-      //openManuelCourseIds.value = false;
+      closeEditor()
     } catch (e) {
       alert("There was problem manually setting the course-related IDs: " + (e as Error).message);
     }
   }
-  closeEditor()
 }
 
 const submitCanvasCourseIds = async () => {
-  try {
-    await setCanvasCourseIds();
-  } catch (e) {
-    alert("There was problem getting and setting the course-related IDs using Canvas: " + (e as Error).message);
+  const userConfirmed = window.confirm("Are you sure you want to use Canvas to reset ID values? \n\nNote: This will fail if the currently saved Course ID is incorrect.")
+  if (userConfirmed) {
+    try {
+      await setCanvasCourseIds();
+    } catch (e) {
+      alert("There was problem getting and setting the course-related IDs using Canvas: " + (e as Error).message);
+    }
+    closeEditor()
   }
-  closeEditor()
 }
 
 </script>
diff --git a/src/main/resources/frontend/src/views/AdminView/ConfigView.vue b/src/main/resources/frontend/src/views/AdminView/ConfigView.vue
index 736ba902..0538c35a 100644
--- a/src/main/resources/frontend/src/views/AdminView/ConfigView.vue
+++ b/src/main/resources/frontend/src/views/AdminView/ConfigView.vue
@@ -11,12 +11,6 @@ import CourseIdConfigEditor from '@/components/config/CourseIdConfigEditor.vue'
 
 const appConfigStore = useAppConfigStore();
 
-// PopUp Control
-const openLivePhases = ref<boolean>(false);
-const openCanvasCourseIds = ref<boolean>(false);
-const openManuelCourseIds = ref<boolean>(false);
-
-// =========================
 onMounted( async () => {
   await useAppConfigStore().updateConfig();
 })
@@ -31,9 +25,9 @@ onMounted( async () => {
       </template>
       <template #current>
       <div v-if="appConfigStore.bannerMessage">
-        <p><span class="infoDescription">Current Message: </span><span v-text="appConfigStore.bannerMessage"/></p>
-        <p><span class="infoDescription">Current Link: </span><span v-html="generateClickableLink(appConfigStore.bannerLink)"/></p>
-        <p><span class="infoDescription">Expires: </span><span v-text="readableTimestamp(appConfigStore.bannerExpiration)"/></p>
+        <p><span class="infoLabel">Current Message: </span><span v-text="appConfigStore.bannerMessage"/></p>
+        <p><span class="infoLabel">Current Link: </span><span v-html="generateClickableLink(appConfigStore.bannerLink)"/></p>
+        <p><span class="infoLabel">Expires: </span><span v-text="readableTimestamp(appConfigStore.bannerExpiration)"/></p>
       </div>
         <p v-else>There is currently no banner message</p>
       </template>
@@ -53,55 +47,29 @@ onMounted( async () => {
       </template>
     </ConfigSection>
 
-    <ConfigSection title="Course IDs" description="Phase assignment ID numbers, rubric IDs, rubric points, ">
+    <ConfigSection title="Course IDs" description="Phase assignment ID numbers, rubric IDs, and rubric points">
       <template #editor="{ closeEditor }">
         <CourseIdConfigEditor :closeEditor="closeEditor"/>
       </template>
       <template #current>
-        <p><b>Course ID:</b> {{appConfigStore.courseNumber}}</p>
+        <p><span class="infoLabel">Course ID:</span> {{appConfigStore.courseNumber}}</p>
+        <p><em>Open editor to see the rest of the values</em></p>
       </template>
     </ConfigSection>
   </div>
-
-  <PopUp
-    v-if="openLivePhases"
-    @closePopUp="openLivePhases = false; appConfigStore.updateConfig()">
-
-  </PopUp>
-
-  <PopUp
-    v-if="openCanvasCourseIds"
-    @closePopUp="openCanvasCourseIds = false">
-
-    <h3 style="text-align: center">Course Related IDs</h3>
-    <p style="text-align: center">
-      Are you sure you want to use Canvas for retrieving assignment IDs, rubric IDs, and rubric points?<br />
-      This will overwrite the preexisting values and cannot be restored.
-    </p>
-
-    <span class="center-buttons">
-      <button @click="submitCanvasCourseIds">Yes</button>
-      <button @click="openCanvasCourseIds = false">Go Back</button>
-    </span>
-  </PopUp>
-
-  <PopUp
-    v-if="openManuelCourseIds"
-    @closePopUp="openManuelCourseIds = false">
-    <h3>Course Related IDs</h3>
-  </PopUp>
-
 </template>
 
 <style scoped>
-:deep(input[type="text"]) {
+:deep(input) {
   border: 1px solid #ccc;
   padding: 8px;
   border-radius: 4px;
+}
+:deep(input[type="text"]) {
   width: 100%;
 }
 
-.infoDescription {
+.infoLabel {
   font-weight: bold;
 }
 
@@ -112,19 +80,8 @@ onMounted( async () => {
   margin: 10px;
 }
 
-button {
-  margin-right: 5px;
-  margin-top: 5px;
-}
-
 input[type="text"]{
   padding: 5px;
   width: 100%;
 }
-
-.center-buttons {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
 </style>

From b19b6c49977d8c4613d338fa4f73f70fc7cfa02d Mon Sep 17 00:00:00 2001
From: DallinFromEarth <112426674+DallinFromEarth@users.noreply.github.com>
Date: Fri, 8 Nov 2024 09:31:25 -0700
Subject: [PATCH 4/5] lazy load Editor components

---
 .../frontend/src/views/AdminView/ConfigView.vue       | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/main/resources/frontend/src/views/AdminView/ConfigView.vue b/src/main/resources/frontend/src/views/AdminView/ConfigView.vue
index 0538c35a..5252c1d2 100644
--- a/src/main/resources/frontend/src/views/AdminView/ConfigView.vue
+++ b/src/main/resources/frontend/src/views/AdminView/ConfigView.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import PopUp from '@/components/PopUp.vue'
+import { defineAsyncComponent, onMounted, ref } from 'vue'
 import { listOfPhases } from '@/types/types'
 import { useAppConfigStore } from '@/stores/appConfig'
 import { generateClickableLink, readableTimestamp } from '@/utils/utils'
 import ConfigSection from '@/components/config/ConfigSection.vue'
-import BannerConfigEditor from '@/components/config/BannerConfigEditor.vue'
-import LivePhaseConfigEditor from '@/components/config/LivePhaseConfigEditor.vue'
-import CourseIdConfigEditor from '@/components/config/CourseIdConfigEditor.vue'
+
+// Lazy Load Editor Components
+const BannerConfigEditor = defineAsyncComponent(() => import('@/components/config/BannerConfigEditor.vue'))
+const LivePhaseConfigEditor = defineAsyncComponent(() => import('@/components/config/LivePhaseConfigEditor.vue'))
+const CourseIdConfigEditor = defineAsyncComponent(() => import('@/components/config/CourseIdConfigEditor.vue'))
 
 const appConfigStore = useAppConfigStore();
 

From ee788d4138e7a749914b5200b841854100fe34ea Mon Sep 17 00:00:00 2001
From: DallinFromEarth <112426674+DallinFromEarth@users.noreply.github.com>
Date: Fri, 8 Nov 2024 09:44:28 -0700
Subject: [PATCH 5/5] add some documentation

---
 .../src/components/config/ConfigSection.vue   | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/main/resources/frontend/src/components/config/ConfigSection.vue b/src/main/resources/frontend/src/components/config/ConfigSection.vue
index 45eae105..a35d2e74 100644
--- a/src/main/resources/frontend/src/components/config/ConfigSection.vue
+++ b/src/main/resources/frontend/src/components/config/ConfigSection.vue
@@ -1,4 +1,31 @@
 <script setup lang="ts">
+/**
+ * A reusable wrapper component that provides a consistent interface for editable configuration sections.
+ * Each section includes a title, description, current value display, and an editable popup interface.
+ *
+ * All editors should take a function as a prop for closing the editor popup. The function is provided by
+ * the ConfigSection component by decomposition.
+ *
+ * <template #editor="{ closeEditor }"> gives any element inside the template tag access to the `closeEditor()`
+ * function, which will close the editor popup.
+ *
+ * ConfigSection will automatically reload the config from the server each time an editor is opened, to ensure
+ * the admin has the most upto date config
+ *
+ * @example
+ * <ConfigSection
+ *   title="Banner Message"
+ *   description="A dynamic message displayed across the top of the Autograder"
+ * >
+ *   <template #current>
+ *     <p>Current message: {{ currentMessage }}</p>
+ *   </template>
+ *   <template #editor="{ closeEditor }">
+ *     <BannerConfigEditor :closeEditor="closeEditor"/>
+ *   </template>
+ * </ConfigSection>
+ */
+
 import { ref } from 'vue'
 import PopUp from '@/components/PopUp.vue'
 import { useAppConfigStore } from '@/stores/appConfig'