Merge pull request #31 from oslabs-beta/jaime/organization

Organize code structure of all files in left-sidebar/ComponentTab, remove...

Author: GomDave

src/components/left-sidebar/ComponentTab/ActionsSubMenu.vue

@@ -1,9 +1,10 @@
-<!-- this will display the active/selected component's state. Functionality will include being able to add more state and delete state -->
-<!-- Functions:
-- display all the component's state as a list
-  - maybe with a delete button similar to props right now
-- dropdown to add more state to component (multiselect)
-- submit button (like props)
+<!-- 
+  LOCATION IN APP:
+  [left sidebar] COMPONENT > Update Component > Actions
+
+  FUNCTIONALITY:
+  - Displays dropdown selection of actions added to store
+  - Allows user to select actions and map them to current active component
 -->
 
 <template>
@@ -12,7 +13,7 @@
       <VueMultiselect
         v-model="selectAction"
         class="multiselect"
-        placeholder="Select Action for Component"
+        placeholder="Select action for component"
         :multiple="true"
         :close-on-select="false"
         :max-height="180"
@@ -23,7 +24,6 @@
         @search-change="stopDelete($event)"
       >
       </VueMultiselect>
-      <br />
       <q-btn
         v-if="selectAction.length"
         id="add-actions-btn"
@@ -33,11 +33,7 @@
         @click="addActionToComp"
       />
     </div>
-    <p v-if="!(componentMap[activeComponent] as Component).actions.length">
-      No actions in component
-    </p>
     <a
-      v-else
       v-for="action in (componentMap[activeComponent] as Component).actions"
       :key="action"
     >
@@ -59,32 +55,22 @@
         </q-item>
       </q-list>
     </a>
-    <br />
   </div>
 </template>
 
 <script setup lang="ts">
-// new script for Composition API
-
+/* IMPORTS */
 import { computed } from "vue";
+import VueMultiselect from "vue-multiselect";
 import { useStore } from "../../../store/main.js";
 import { Component } from "../../../../types";
-import VueMultiselect from "vue-multiselect";
 
+/* COMPUTED VALUES */
 const store = useStore();
-
-const selectedActions = computed(() => store.selectedActions);
-const userActions = computed(() => store.userActions);
 const componentMap = computed(() => store.componentMap);
 const activeComponent = computed(() => store.activeComponent);
-
-//getters
-
-const actionOptions = userActions;
-//  actionOptions() {
-//       return this.userActions;
-//     },
-
+const selectedActions = computed(() => store.selectedActions);
+const userActions = computed(() => store.userActions);
 const selectAction = computed({
   get() {
     return [...selectedActions.value];
@@ -94,8 +80,7 @@ const selectAction = computed({
   },
 });
 
-// Methods
-
+/* STORE ACTIONS */
 const addActionSelected: typeof store.addActionSelected = (payload) =>
   store.addActionSelected(payload);
 const addActionToComponent: typeof store.addActionToComponent = (payload) =>
@@ -104,64 +89,20 @@ const deleteActionFromComponent: typeof store.deleteActionFromComponent = (
   payload
 ) => store.deleteActionFromComponent(payload);
 
+/* COMPONENT METHODS */
 const stopDelete = (e: KeyboardEvent) => {
   if (e.code === "Backspace") e.stopPropagation();
 };
+
 const addActionToComp = () => {
   addActionToComponent([...selectedActions.value]);
 };
+
 const deleteAction = (action: string) => {
   deleteActionFromComponent(action);
 };
 </script>
 
-<!-- <script>
-import { mapState, mapActions } from "vuex";
-import VueMultiselect from "vue-multiselect";
-
-export default {
-  name: "ActionsSubMenu",
-  components: {
-    VueMultiselect,
-  },
-  computed: {
-    ...mapState(["selectedActions", "userActions", "componentMap", "activeComponent",]),
-    actionOptions() {
-      return this.userActions;
-    },
-    selectAction: {
-      get() {
-        console.log("Inside get!", this.selectedActions);
-        return this.selectedActions;
-      },
-      set(value) {
-        console.log("What is value?", value)
-        this.addActionSelected(value);
-      },
-    },
-  },
-  methods: {
-    ...mapActions([
-      "addActionSelected",
-      "addActionToComponent",
-      "deleteActionFromComponent",
-    ]),
-    // Prevent Delete on changes to searchable multiselect
-    stopDelete(e) {
-      if (e.code === "Backspace") e.stopPropogation();
-    },
-    // adds an action to the currently selected component
-    addActionToComp() {
-      this.addActionToComponent(this.selectedActions);
-    },
-    // delete selected action from active component
-    deleteAction(action) {
-      this.deleteActionFromComponent(action);
-    },
-  },
-};
-</script> -->
-
 <style lang="scss" scoped>
 .selection-container {
   padding: 30px 0;