Merge pull request #9 from oslabs-beta/shanon

Fix multiselect imports in component tab components; FUNCTIONAL codes…

Author: lamerson28

package-lock.json

@@ -28,6 +28,7 @@
     "lodash.throttle": "^4.1.1",
     "mousetrap": "^1.6.5",
     "node-gyp": "^8.4.1",
+    "prismjs": "^1.25.0",
     "quasar": "^2.0.0",
     "quasar-dotenv": "^1.0.5",
     "vue-draggable-resizable": "^2.3.0",

package.json

@@ -131,12 +131,14 @@ function setOauthListener() {
   // logEverywhere(`process.env.SLACK_CLIENT_ID in electron-main:  ${process.env.SLACK_CLIENT_ID}`);
   // logEverywhere(`process.env.SLACK_CLIENT_SECRET in electron-main:  ${process.env.SLACK_CLIENT_SECRET}`);
 
-  return deeplink.on("received", link => {
-    // logEverywhere(`auth worked here link: ${link}`);
-    // Extracts Slack authorization code from deep link
-    authCode = link.split("=")[1];
-    sendTokenRequest();
-  });
+  if (process.env.PROD) {
+    return deeplink.on("received", link => {
+      // logEverywhere(`auth worked here link: ${link}`);
+      // Extracts Slack authorization code from deep link
+      authCode = link.split("=")[1];
+      sendTokenRequest();
+    });
+  }
 }
 
 function createWindow () {

src-electron/electron-main.js

@@ -14,18 +14,25 @@ Description:
     <div v-else>{{ `${this.activeComponent}.vue` }}</div>
     <prism-editor
       v-model="code"
-      language="js"
-      :line-numbers="lineNumbers"
-      class="code-editor fill"
-      :readonly="true"
+      :highlight="highlighter"
+      line-numbers
+      class="my-editor"
+      readonly
     />
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
+
 import { PrismEditor }from 'vue-prism-editor';
 import 'vue-prism-editor/dist/prismeditor.min.css';
+import { highlight, languages } from 'prismjs/components/prism-core';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/themes/prism-tomorrow.css'; // import syntax highlighting styles
+
+
 
 // import 'prismjs'
 // import 'prismjs/themes/prism-okaidia.css'
@@ -57,6 +64,9 @@ export default {
     }
   },
   methods: {
+    highlighter(myCode) {
+      return highlight(myCode, languages.js)
+    },
     getWindowHeight (e) {
       let minHeight =
         window.outerHeight < 900 ? 22 : window.outerHeight < 1035 ? 24 : 27.5
@@ -281,7 +291,7 @@ export default {
   // },
   beforeDestroy () {
     window.removeEventListener('resize', this.getWindowHeight)
-  }
+  },
   // watch: {
   //   activeComponent: {
   //     handler () {
@@ -310,17 +320,33 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+// Had scoped before, but could not get rid of outline with scoped style
+
+
 // resize handled by vue lifecycle methods
-.code-editor {
+.my-editor {
   font-size: 12px;
+  background: #2d2d2d;
+  color: #ccc;
+  /* you must provide font-family font-size line-height. Example: */
+  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
+  line-height: 1.5;
+  padding: 5px;
 }
 
 .codesnippet-container {
     margin-bottom: 1rem;
 }
 
-::-webkit-scrollbar {
-    display: none;
+.prism-editor__textarea:focus {
+  outline: none; 
 }
+
+</style>
+
+<style lang="scss" scoped>
+  ::-webkit-scrollbar {
+    display: none;
+  }
 </style>

src/components/dashboard_items/CodeSnippet.vue

@@ -16,7 +16,7 @@
     </q-input>
 
     <div id="props-select">
-      <!-- <multiselect
+      <VueMultiselect
         v-model="selectProps"
         class="multiselect"
         placeholder="Select Props for Component"
@@ -30,7 +30,7 @@
         @search-change="stopDelete($event)"
       >
         <span slot="noResult">No props found.</span>
-      </multiselect> -->
+      </VueMultiselect>
     </div>
     <br/>
     <div>
@@ -48,12 +48,12 @@
 
 <script>
 import { mapState, mapActions } from 'vuex'
-// import Multiselect from 'vue-multiselect'
+import VueMultiselect from 'vue-multiselect'
 
 export default {
   name: 'addProps',
   components: {
-    // Multiselect
+    VueMultiselect
   },
   data () {
     return {

src/components/home_sidebar_items/ComponentTab/AddProps.vue

@@ -9,7 +9,7 @@
 <template>
   <div>
     <div id="action-select">
-      <!-- <multiselect
+      <VueMultiselect
         v-model="selectAction"
         class="multiselect"
         placeholder="Select Action for Component"
@@ -23,7 +23,7 @@
         @search-change="stopDelete($event)"
       >
         <span slot="noResult">No actions found.</span>
-      </multiselect> -->
+      </VueMultiselect>
       <br/>
       <q-btn
           v-if="selectAction.length"
@@ -61,12 +61,12 @@
 
 <script>
 import { mapState, mapActions } from "vuex";
-// import Multiselect from 'vue-multiselect';
+import VueMultiselect from 'vue-multiselect';
 
 export default {
   name: "ComponentActions",
   components: {
-    // Multiselect
+    VueMultiselect
   },
   computed: {
     ...mapState([

src/components/home_sidebar_items/ComponentTab/ComponentActions.vue

@@ -9,7 +9,7 @@
 <template>
   <div>
     <div id="state-select">
-      <multiselect
+      <VueMultiselect
         v-model="selectState"
         class="multiselect"
         placeholder="Select State for Component"
@@ -23,7 +23,7 @@
         @search-change="stopDelete($event)"
       >
         <span slot="noResult">No state found.</span>
-      </multiselect>
+      </VueMultiselect>
       <br/>
       <q-btn
           v-if="selectState.length"
@@ -62,11 +62,13 @@
 <script>
 import { mapState, mapActions } from "vuex";
 // import Multiselect from 'vue-multiselect';
+import VueMultiselect from 'vue-multiselect'
 
 export default {
   name: "ComponentState",
   components: {
     // Multiselect
+    VueMultiselect
   },
   computed: {
     ...mapState([

src/components/home_sidebar_items/ComponentTab/ComponentState.vue

@@ -33,7 +33,7 @@ Description:
 
       </q-input>
       <!-- for the icon list -->
-      <!-- <multiselect
+      <VueMultiselect
         v-model="testModel"
         placeholder="Add/Remove Children"
         :multiple="true"
@@ -43,7 +43,7 @@ Description:
         :max-height="90"
         :option-height="20"
         :searchable="false"
-      /> -->
+      />
 
 
       <q-list
@@ -122,7 +122,7 @@ Description:
         indicator-color="secondary"
       >
       <q-expansion-item group="accordion" label="Select another Component">
-        <!-- <multiselect
+        <VueMultiselect
         class="multiselect"
         v-model="value"
         :options="options"
@@ -134,7 +134,7 @@ Description:
         placeholder="Select/Search component"
       >
       <span slot="noResult">No components found.</span>
-      </multiselect> -->
+      </VueMultiselect>
       </q-expansion-item>
  </q-list>
     </div>
@@ -143,7 +143,7 @@ Description:
 
 <script>
 import { mapState, mapActions } from "vuex";
-// import Multiselect from "vue-multiselect";
+import VueMultiselect from "vue-multiselect";
 // import { ToggleButton } from "vue-js-toggle-button";
 import HTMLQueue from "../../dashboard_items/HTMLQueue.vue";
 import Icons from "../Icons.vue";
@@ -165,7 +165,7 @@ export default {
     };
   },
   components: {
-    // Multiselect,
+    VueMultiselect,
     // ToggleButton,
     HTMLQueue,
     Icons,