Merge branch 'jigar-pinia' into pinia

Author: jigarxp

src/components/nav-buttons/ExportMenu.vue

@@ -413,25 +413,22 @@ const writeTemplate = (componentName, children, routes) => {
       ? componentName
       : componentMap.value[componentName].htmlAttributes.class;
 
+    const arrOfChildComp = componentMap.value[componentName].children;
+    arrOfChildComp.forEach((childName) => {
+      let childNameClass = componentMap.value[childName].htmlAttributes.class;
+      let childNameClassFullStr =
+        childNameClass === "" ? "" : ` class = '${childNameClass}'`;
+      routeStr += `    <${childName}${childNameClassFullStr}></${childName}>`;
+    });
     if (compClass !== "" && compID !== "") {
       return `<template>\n  <div id = "${compID}" class = "${compClass}">\n${templateTagStr}${routeStr}  \n\t</div>\n</template>`;
     } else if (compClass !== "" && compID === "") {
       return `<template>\n  <div class = "${compClass}">\n${templateTagStr}${routeStr}  \n\t</div>\n</template>`;
     } else if (compClass === "" && compID !== "") {
       return `<template>\n  <div id = "${compID}">\n${templateTagStr}${routeStr}  </div>\n</template>`;
     } else {
-      const arrOfChildComp = componentMap.value[componentName].children;
-      arrOfChildComp.forEach((childName) => {
-        let childNameClass = componentMap.value[childName].htmlAttributes.class;
-        let childNameClassFullStr =
-          childNameClass === "" ? "" : ` class = '${childNameClass}'`;
-        routeStr += `    <${childName}${childNameClassFullStr}></${childName}>\n`;
-      });
-
       return `<template>\n  <div>\n${str}${templateTagStr}${routeStr}  </div>\n</template>`;
     }
-  } else {
-    return `<template>\n\t${str}${templateTagStr}${routeStr}\t</div>\n</template>`;
   }
 };
 

src/components/nav-buttons/SaveProject.vue

@@ -32,7 +32,7 @@ const store = useStore();
 
 const projects = computed(() => store.projects);
 const activeTab = computed(() => store.activeTab);
-const stateComputed = computed(() => store.state);
+const stateComputed = computed(() => store);
 const routes = computed(() => store.routes);
 
 const addProject = (payload) => store.addProject(payload);

src/components/right-sidebar/CodeSnippet.vue

@@ -88,35 +88,35 @@ const createCodeSnippet = (componentName, children) => {
 // Creates beginner boilerplate
 const createTemplate = (componentName) => {
   let templateTagStr = writeTemplateTag(componentName, activeComponent.value); // testing 2nd arg
+  let routeStr = "";
+  const arrOfChildComp = componentMap.value[componentName].children;
+  arrOfChildComp.forEach((childName) => {
+    let childNameClass = componentMap.value[childName].htmlAttributes.class;
+    let childNameClassFullStr =
+      childNameClass === "" ? "" : ` class = '${childNameClass}'`;
+    routeStr += `    <${childName}${childNameClassFullStr}></${childName}>\n`;
+  });
   if (activeComponentObj.value.htmlAttributes) {
     //if/else statement to determine if there are class and id attributes present in the html element
     if (
       activeComponentObj.value.htmlAttributes.class !== "" &&
       activeComponentObj.value.htmlAttributes.id !== ""
     ) {
-      return `<template>\n  <div id = "${activeComponentObj.value.htmlAttributes.id}" class = "${activeComponentObj.value.htmlAttributes.class}">\n${templateTagStr}  </div>\n</template>`;
+      return `<template>\n  <div id = "${activeComponentObj.value.htmlAttributes.id}" class = "${activeComponentObj.value.htmlAttributes.class}">\n${templateTagStr}${routeStr}  </div>\n</template>`;
     } else if (
       activeComponentObj.value.htmlAttributes.class !== "" &&
       activeComponentObj.value.htmlAttributes.id === ""
     ) {
-      return `<template>\n  <div class = "${activeComponentObj.value.htmlAttributes.class}">\n${templateTagStr}  </div>\n</template>`;
+      return `<template>\n  <div class = "${activeComponentObj.value.htmlAttributes.class}">\n${templateTagStr}${routeStr}  </div>\n</template>`;
     } else if (
       activeComponentObj.value.htmlAttributes.class === "" &&
       activeComponentObj.value.htmlAttributes.id !== ""
     )
-      return `<template>\n  <div id = "${activeComponentObj.value.htmlAttributes.id}">\n${templateTagStr}  </div>\n</template>`;
+      return `<template>\n  <div id = "${activeComponentObj.value.htmlAttributes.id}">\n${templateTagStr}${routeStr}  </div>\n</template>`;
     else {
-      let routeStr = "";
-      const arrOfChildComp = componentMap.value[componentName].children;
-      arrOfChildComp.forEach((childName) => {
-        let childNameClass = componentMap.value[childName].htmlAttributes.class;
-        let childNameClassFullStr =
-          childNameClass === "" ? "" : ` class = '${childNameClass}'`;
-        routeStr += `    <${childName}${childNameClassFullStr}></${childName}>\n`;
-      });
       return `<template>\n  <div>\n${templateTagStr}${routeStr}  </div>\n</template>`;
     }
-  } else return `<template>\n  <div>\n${templateTagStr}  </div>\n</template>`;
+  }
 };
 
 // Creates <template> boilerplate
@@ -401,9 +401,9 @@ const createBoiler = (componentName, children) => {
   let styleString = "";
 
   if (activeComponentObj.value.htmlAttributes.class !== "") {
-    styleString += `.${activeComponentObj.value.htmlAttributes.class} { \n background-color: ${activeComponentObj.value.color};
-grid-area: ${activeComponentObj.value.htmlAttributes.gridArea[0]} / ${activeComponentObj.value.htmlAttributes.gridArea[1]} / ${activeComponentObj.value.htmlAttributes.gridArea[2]} / ${activeComponentObj.value.htmlAttributes.gridArea[3]};
-z-index: ${activeComponentObj.value.z};
+    styleString += `.${activeComponentObj.value.htmlAttributes.class} { \n\tbackground-color: ${activeComponentObj.value.color};
+\tgrid-area: ${activeComponentObj.value.htmlAttributes.gridArea[0]} / ${activeComponentObj.value.htmlAttributes.gridArea[1]} / ${activeComponentObj.value.htmlAttributes.gridArea[2]} / ${activeComponentObj.value.htmlAttributes.gridArea[3]};
+\tz-index: ${activeComponentObj.value.z};
 } \n`;
   }