From f24477e7b4bfcb245376eb1044157e2c97476724 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Wed, 5 Feb 2020 09:20:04 +0530
Subject: [PATCH] :tada: Initial formdata support and UI tweaks

---
 assets/css/styles.scss           | 21 +++++-----
 components/collections/index.vue |  5 ++-
 lang/en-US.js                    |  1 -
 pages/index.vue                  | 68 +++++++++++++++++++++++---------
 4 files changed, 63 insertions(+), 32 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 902ec8af5..ef0fda730 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -558,7 +558,6 @@ code {
   transition: all 0.2s ease-in-out;
   user-select: text;
   width: calc(100% - 8px);
-  min-width: 128px;
   resize: vertical;
   text-overflow: ellipsis;
 
@@ -570,6 +569,17 @@ code {
   }
 }
 
+.method {
+  cursor: pointer;
+
+  &:hover,
+  &:active,
+  &:focus {
+    box-shadow: inset 0 0 0 2px var(--fg-light-color);
+    transition: all 0.2s ease-in-out;
+  }
+}
+
 pre {
   display: grid;
 }
@@ -783,21 +793,12 @@ ol li {
 }
 
 #send {
-  // #hidden-message {
-  //   display: none;
-  // }
-
   &.show {
     display: flex;
     position: fixed;
     top: 12px;
     right: 12px;
     z-index: 2;
-
-    // #hidden-message {
-    //   display: block;
-    //   margin-left: 4px;
-    // }
   }
 }
 
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 4d7b51072..d7ff71c60 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -4,7 +4,7 @@ TODO:
 -->
 
 <template>
-  <div class="collections-wrapper">
+  <pw-section class="yellow" :label="$t('collections')" ref="collections">
     <addCollection :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
     <editCollection
       :show="showModalEdit"
@@ -92,7 +92,7 @@ TODO:
         <span>{{ $t("generate_docs") }}</span>
       </button>
     </nuxt-link>
-  </div>
+  </pw-section>
 </template>
 
 <style scoped lang="scss">
@@ -113,6 +113,7 @@ import { fb } from "../../functions/fb";
 export default {
   components: {
     collection,
+    "pw-section": () => import("../section"),
     addCollection: () => import("./addCollection"),
     addFolder: () => import("./addFolder"),
     editCollection: () => import("./editCollection"),
diff --git a/lang/en-US.js b/lang/en-US.js
index 0847e18f6..4d5aa13f9 100644
--- a/lang/en-US.js
+++ b/lang/en-US.js
@@ -27,7 +27,6 @@ export default {
   method: "Method",
   path: "Path",
   label: "Label",
-  again: "Again",
   content_type: "Content Type",
   raw_input: "Raw input",
   parameter_list: "Parameter List",
diff --git a/pages/index.vue b/pages/index.vue
index b6f087d48..ccee5660a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -219,7 +219,6 @@
                 ref="sendButton"
               >
                 {{ $t("send") }}
-                <!-- <span id="hidden-message">{{ $t("again") }}</span> -->
                 <span>
                   <i class="material-icons">send</i>
                 </span>
@@ -252,13 +251,29 @@
                     </pw-toggle>
                   </span>
                   <div>
+                    <label for="attachment">
+                      <button
+                        class="icon"
+                        @click="$refs.attachment.click()"
+                        v-tooltip="$t('upload_file')"
+                      >
+                        <i class="material-icons">attach_file</i>
+                        <span>{{ file_choosen || "No file choosen" }}</span>
+                      </button>
+                    </label>
+                    <input
+                      ref="attachment"
+                      name="attachment"
+                      type="file"
+                      @change="uploadAttachment"
+                    />
                     <label for="payload">
                       <button
                         class="icon"
                         @click="$refs.payload.click()"
-                        v-tooltip="$t('upload_file')"
+                        v-tooltip="$t('import_json')"
                       >
-                        <i class="material-icons">attach_file</i>
+                        <i class="material-icons">post_add</i>
                       </button>
                     </label>
                     <input
@@ -381,10 +396,10 @@
                   content: isHidden ? $t('show_code') : $t('hide_code')
                 }"
               >
-                <i class="material-icons">flash_on</i>
+                <i class="material-icons">code</i>
               </button>
               <button
-                :class="'icon' + (showPreRequestScript ? ' info-response' : '')"
+                class="icon"
                 id="preRequestScriptButton"
                 v-tooltip.bottom="{
                   content: !showPreRequestScript
@@ -397,14 +412,15 @@
                   class="material-icons"
                   :class="showPreRequestScript"
                   v-if="!showPreRequestScript"
-                  >code</i
-                >
-                <i class="material-icons" :class="showPreRequestScript" v-else
-                  >close</i
                 >
+                  playlist_add
+                </i>
+                <i class="material-icons" :class="showPreRequestScript" v-else>
+                  close
+                </i>
               </button>
               <button
-                :class="'icon' + (testsEnabled ? ' info-response' : '')"
+                class="icon"
                 id="preRequestScriptButto"
                 v-tooltip.bottom="{
                   content: !testsEnabled ? 'Enable Tests' : 'Disable Tests'
@@ -416,7 +432,7 @@
                   :class="testsEnabled"
                   v-if="!testsEnabled"
                 >
-                  assignment_turned_in
+                  playlist_add_check
                 </i>
                 <i class="material-icons" :class="testsEnabled" v-else>close</i>
               </button>
@@ -1044,13 +1060,7 @@
           <input id="collection-tab" type="radio" name="side" />
           <label for="collection-tab">{{ $t("collections") }}</label>
           <div class="tab">
-            <pw-section
-              class="yellow"
-              :label="$t('collections')"
-              ref="collections"
-            >
-              <collections />
-            </pw-section>
+            <collections />
           </div>
           <input id="sync-tab" type="radio" name="side" />
           <label for="sync-tab">{{ $t("notes") }}</label>
@@ -1606,7 +1616,8 @@ export default {
       responseBodyMaxLines: 16,
       activeSidebar: true,
       fb,
-      customMethod: false
+      customMethod: false,
+      file_choosen: null
     };
   },
   watch: {
@@ -2797,6 +2808,25 @@ export default {
       }
       this.setRouteQueryState();
     },
+    uploadAttachment() {
+      const file = this.$refs.attachment.files[0];
+      if (file !== undefined && file !== null) {
+        const reader = new FileReader();
+        reader.onload = ({ target }) => {
+          console.log(target);
+          this.file_choosen = file.name;
+          console.log(target.result);
+        };
+        reader.readAsText(file);
+        this.$toast.info(this.$t("file_imported"), {
+          icon: "attach_file"
+        });
+      } else {
+        this.$toast.error(this.$t("choose_file"), {
+          icon: "attach_file"
+        });
+      }
+    },
     uploadPayload() {
       this.rawInput = true;
       const file = this.$refs.payload.files[0];