multiple plans is multiple planning??

src/components/Modals/AddPlanModal.vue

@@ -5,7 +5,7 @@
     left-button-text="Create Blank"
     right-button-text="Make a Copy"
     @modal-closed="closeCurrentModal"
-    @left-button-clicked="closeCurrentModal"
+    @left-button-clicked="blankPlan"
     @right-button-clicked="copyPlan"
     :isPlanModal="true"
   >
@@ -42,6 +42,9 @@ export default defineComponent({
   methods: {
     closeCurrentModal() {
       this.$emit('close-plan-modal');
+    },
+    blankPlan() {
+      this.$emit('close-plan-modal');
       this.$emit('add-plan', this.placeholder_name);
     },
     copyPlan() {

src/components/Modals/CopyPlanModal.vue

@@ -16,7 +16,7 @@
             class="multiplePlansModal-dropdown-placeholder wrapper"
             @click="closeDropdownIfOpen()"
           >
-            <div class="multiplePlansModal-dropdown-placeholder plan">{{ currPlan }}</div>
+            <div class="multiplePlansModal-dropdown-placeholder plan">{{ selectedPlan }}</div>
             <img
               class="multiplePlansModal-dropdown-placeholder up-arrow"
               v-if="shown"
@@ -58,9 +58,10 @@ export default defineComponent({
     'close-copy-modal': () => true,
     'open-plan-modal': () => true,
     'open-name-modal': () => true,
+    'copy-plan': (selectedPlan: string) => typeof selectedPlan === 'string',
   },
   data() {
-    return { isDisabled: false, shown: false };
+    return { isDisabled: false, shown: false, selectedPlan: store.state.currentPlan.name };
   },
   methods: {
     closeCurrentModal() {
@@ -70,28 +71,26 @@ export default defineComponent({
       this.shown = !this.shown;
     },
     planClicked(plan: string) {
-      if (this.plans.length !== 1) this.currPlan = plan;
+      if (this.plans.length !== 1) this.selectedPlan = plan;
     },
     backAddPlan() {
       this.$emit('open-plan-modal');
       this.$emit('close-copy-modal');
     },
     namePlan() {
       this.$emit('open-name-modal');
+      this.$emit('copy-plan', this.selectedPlan);
       this.$emit('close-copy-modal');
     },
   },
   computed: {
     otherPlans() {
-      const filtered = this.plans.filter(plan => plan !== this.currPlan);
+      const filtered = this.plans.filter(plan => plan !== this.selectedPlan);
       return filtered.length === 0 ? ['No additional plans yet'] : filtered;
     },
     plans() {
       return store.state.plans.map(plan => plan.name);
     },
-    currPlan() {
-      return store.state.currentPlan.name;
-    },
   },
 });
 </script>

src/components/Modals/EditPlanModal.vue

@@ -6,11 +6,12 @@
     right-button-text="Save Changes"
     @modal-closed="closeCurrentModal"
     @left-button-clicked="closeCurrentModal"
-    @right-button-clicked="addPlan"
+    @right-button-clicked="saveChanges"
+    @plan-name="setPlanName"
     :isPlanModal="true"
     label="Name"
   >
-    <button class="editPlan-delete">DELETE PLAN</button>
+    <button class="editPlan-delete" @click="deletePlan">DELETE PLAN</button>
   </text-input-modal>
 </template>
 
@@ -27,27 +28,32 @@ export default defineComponent({
   emits: {
     'close-edit-modal': () => true,
     'open-copy-modal': () => true,
+    'delete-plan': (name: string) => typeof name === 'string',
+    'edit-plan': (name: string, oldname: string) =>
+      typeof name === 'string' && typeof oldname === 'string',
   },
   data() {
-    return { isDisabled: false, shown: false };
+    return { isDisabled: false, shown: false, planName: '' };
   },
   methods: {
     closeCurrentModal() {
       this.$emit('close-edit-modal');
     },
-    closeDropdownIfOpen() {
-      this.shown = !this.shown;
-    },
-    planClicked(plan: string) {
-      if (this.plans.length !== 1) this.currPlan = plan;
-    },
     backCopyPlan() {
       this.$emit('open-copy-modal');
       this.$emit('close-edit-modal');
     },
-    addPlan() {
+    saveChanges() {
+      this.$emit('edit-plan', this.planName, this.currPlan);
       this.$emit('close-edit-modal');
     },
+    deletePlan() {
+      this.$emit('delete-plan', this.currPlan);
+      this.$emit('close-edit-modal');
+    },
+    setPlanName(planName: string) {
+      this.planName = planName;
+    },
   },
   computed: {
     otherPlans() {

src/components/Modals/NamePlanModal.vue

@@ -5,6 +5,7 @@
     left-button-text="Back"
     right-button-text="Add Plan"
     label="Name"
+    @plan-name="copyPlanName"
     @modal-closed="closeCurrentModal"
     @left-button-clicked="backCopyPlan"
     @right-button-clicked="addPlan"
@@ -20,14 +21,17 @@ import TextInputModal from './TextInputModal.vue';
 export default defineComponent({
   props: {
     plan: { type: String, default: 'No additional plans yet' },
+    selectedPlanCopy: { type: String, default: '' },
   },
   components: { TextInputModal },
   emits: {
     'close-name-modal': () => true,
     'open-copy-modal': () => true,
+    'add-plan': (name: string, copysem: string) =>
+      typeof name === 'string' && typeof copysem === 'string',
   },
   data() {
-    return { isDisabled: false, shown: false };
+    return { isDisabled: false, shown: false, planName: '' };
   },
   methods: {
     closeCurrentModal() {
@@ -44,8 +48,12 @@ export default defineComponent({
       this.$emit('close-name-modal');
     },
     addPlan() {
+      this.$emit('add-plan', this.planName, this.selectedPlanCopy);
       this.$emit('close-name-modal');
     },
+    copyPlanName(planName: string) {
+      this.planName = planName;
+    },
   },
   computed: {
     otherPlans() {

src/components/Modals/TeleportModal.vue

@@ -55,83 +55,67 @@
     </div>
   </Teleport>
 </template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue';
+<script lang="ts">
+import { defineComponent, ref, PropType } from 'vue';
 import store from '@/store';
 
-type Props = {
-  title?: string;
-  contentClass: string;
-  leftButtonText?: string;
-  rightButtonText?: string;
-  rightButtonImage?: string;
-  rightButtonAlt?: string;
-  rightButtonIsDisabled?: boolean;
-  rightButtonIsHighlighted?: boolean;
-  /** `true` if the modal will set its own styling for its position */
-  isSimpleModal?: boolean;
-  /** `true` for modals without the gray overlay behind them */
-  hasNoBackground?: boolean;
-  /** modals without a gray overlay behind them AND clicking on the background closes the modal */
-  hasClickableTransparentBackground?: boolean;
-  /** `true` if you want to set custom position for modal */
-  hasCustomPosition?: boolean;
-  /** custom position (hasCustomPosition must be true) */
-  position?: { x: number; y: number };
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  title: '',
-  leftButtonText: '',
-  rightButtonText: '',
-  rightButtonImage: '',
-  rightButtonAlt: '',
-  rightButtonIsDisabled: false,
-  rightButtonIsHighlighted: false,
-  isSimpleModal: false,
-  hasNoBackground: false,
-  hasClickableTransparentBackground: false,
-  hasCustomPosition: false,
-  position: () => ({ x: 0, y: 0 }),
-});
-
-type Emits = {
-  (e: 'left-button-clicked'): void;
-  (e: 'right-button-clicked'): void;
-  (e: 'modal-closed', closed: boolean): void;
-};
-
-const emit = defineEmits<Emits>();
-
-const close = () => {
-  store.commit('setIsTeleportModalOpen', false);
-  emit('modal-closed', true);
-};
-
-const modalBackground = ref<HTMLDivElement | null>(null);
-
-const closeOnClickOutside = (e: MouseEvent) => {
-  if (e.target === modalBackground.value) close();
-};
-
-const leftButtonClicked = () => {
-  emit('left-button-clicked');
-};
-
-const rightButtonClicked = () => {
-  emit('right-button-clicked');
-};
-
-const customPosition = computed(() => {
-  const {
-    hasCustomPosition,
-    position: { x, y },
-  } = props;
-  return hasCustomPosition ? { left: `${x}px`, top: `${y}px` } : {};
+export default defineComponent({
+  props: {
+    title: { type: String, default: '' },
+    contentClass: { type: String, required: true },
+    leftButtonText: { type: String, default: '' },
+    rightButtonText: { type: String, default: '' },
+    rightButtonImage: { type: String, default: '' },
+    rightButtonAlt: { type: String, default: '' },
+    rightButtonIsDisabled: { type: Boolean, default: false },
+    rightButtonIsHighlighted: { type: Boolean, default: false },
+    isSimpleModal: { type: Boolean, default: false }, // true if the modal will set its own styling for its position
+    hasNoBackground: { type: Boolean, default: false }, // true for modals without the gray overlay behind them
+    hasClickableTransparentBackground: { type: Boolean, default: false }, // modals without a gray overlay behind them AND clicking on the background closes the modal
+    hasCustomPosition: { type: Boolean, default: false }, // true if you want to set custom position for modal
+    isPlanModal: { type: Boolean, default: false },
+    position: {
+      type: Object as PropType<{ x: number; y: number }>,
+      default: () => ({ x: 0, y: 0 }),
+    }, // custom position (hasCustomPosition must be true)
+  },
+  data() {
+    const customPosition = this.hasCustomPosition
+      ? {
+          left: `${this.position.x}px`,
+          top: `${this.position.y}px`,
+        }
+      : {};
+    return {
+      customPosition,
+    };
+  },
+  emits: ['left-button-clicked', 'right-button-clicked', 'modal-closed'],
+  setup(props, { emit }) {
+    const modalBackground = ref((null as unknown) as HTMLDivElement);
+
+    const close = () => {
+      store.commit('setIsTeleportModalOpen', false);
+      emit('modal-closed', true);
+    };
+
+    const closeOnClickOutside = (e: MouseEvent) => {
+      if (e.target === modalBackground.value) close();
+    };
+
+    const leftButtonClicked = () => {
+      emit('left-button-clicked');
+    };
+
+    const rightButtonClicked = () => {
+      emit('right-button-clicked');
+    };
+
+    store.commit('setIsTeleportModalOpen', true);
+
+    return { close, closeOnClickOutside, leftButtonClicked, rightButtonClicked, modalBackground };
+  },
 });
-
-store.commit('setIsTeleportModalOpen', true);
 </script>
 
 <style scoped lang="scss">

src/components/Modals/TextInputModal.vue

@@ -6,7 +6,7 @@
         <input
           class="textInput-userinput"
           maxlength="charLimit"
-          :value="planName"
+          v-model="planName"
           @input="rightPlanClicked"
         />
       </div>
@@ -23,17 +23,18 @@ export default defineComponent({
   props: {
     charLimit: { type: Number, default: 100 },
     label: { type: String, default: '' },
-    planName: { type: String, default: 'Plan Name' },
   },
   components: { TeleportModal },
-  emits: ['update:planName'],
+  emits: {
+    'plan-name': (planName: string) => typeof planName === 'string',
+  },
   methods: {
     rightPlanClicked(): void {
-      this.$emit('update:planName');
+      this.$emit('plan-name', this.planName);
     },
   },
   data() {
-    return { isDisabled: false, shown: false };
+    return { isDisabled: false, shown: false, planName: '' };
   },
 });
 </script>

src/components/Requirements/RequirementSideBar.vue

@@ -49,16 +49,21 @@
               @open-plan-modal="toggleAddPlan"
               @close-copy-modal="toggleCopyPlan"
               @open-name-modal="toggleNamePlan"
+              @copy-plan="copyPlan"
             />
             <name-plan-modal
               v-if="isNamePlanOpen"
               @open-copy-modal="toggleCopyPlan"
               @close-name-modal="toggleNamePlan"
+              @add-plan="addPlan"
+              :selectedPlanCopy="selectedPlanCopy"
             />
             <edit-plan-modal
               v-if="isEditPlanOpen"
               @close-edit-modal="toggleEditPlan"
               @close-name-modal="toggleNamePlan"
+              @edit-plan="editPlan"
+              @delete-plan="deletePlan"
             />
             <button class="add-plan-button" @click="toggleAddPlan()">+ Add Plan</button>
             <div class="multiple-plans-dropdown">
@@ -206,6 +211,7 @@ type Data = {
   isCopyPlanOpen: boolean;
   isNamePlanOpen: boolean;
   isEditPlanOpen: boolean;
+  selectedPlanCopy: string;
 };
 
 // This section will be revisited when we try to make first-time tooltips
@@ -255,6 +261,7 @@ export default defineComponent({
       isCopyPlanOpen: false,
       isNamePlanOpen: false,
       isEditPlanOpen: false,
+      selectedPlanCopy: '',
     };
   },
   watch: {
@@ -348,6 +355,13 @@ export default defineComponent({
       if (toEdit !== undefined) {
         editPlan(oldname, updater);
       }
+      store.commit(
+        'setCurrentPlan',
+        store.state.plans.find(plan => plan.name === name)
+      );
+    },
+    copyPlan(selectedPlan: string) {
+      this.selectedPlanCopy = selectedPlan;
     },
 
     // TODO CHANGE FOR MULTIPLE COLLEGES & GRAD PROGRAMS