Merge branch 'dev'

Author: Leonid Vakulenko

wa-apps/apiexplorer/client/README.md

@@ -5,6 +5,12 @@
 npm install
 ```
 
+### Environment variables
+Create `.env.development.local` (see `.env.development.local.example`) 
+Where
+- `VUE_APP_WA_DEV`: URL to the Webasyst framework root
+- `VUE_APP_BASE_URL`: Path to API Explorer backend from domain root
+
 ### Compiles and hot-reloads for development
 ```
 npm run serve

wa-apps/apiexplorer/client/package.json

@@ -21,8 +21,8 @@
     "swagger-client": "^3.18.1",
     "v-calendar": "^3.0.0-alpha.6",
     "vue": "^3.2.27",
-    "vue-i18n": "^9.2.0-beta.28",
-    "vue-router": "^4.0.12",
+    "vue-i18n": "^9.2.2",
+    "vue-router": "^4.1.5",
     "vuex": "^4.0.2"
   },
   "devDependencies": {

wa-apps/apiexplorer/client/public/index.html

@@ -19,7 +19,8 @@
           "rootUrl": "/",
           "user_id": "1",
           "development_mode": "1",
-          "locale": "<%= VUE_APP_I18N_LOCALE %>"
+          "locale": "<%= VUE_APP_I18N_LOCALE %>",
+          "centralUrl": "<%= VUE_APP_WA_CENTRAL %>"
         };
       </script>
     <% } %>

wa-apps/apiexplorer/client/src/components/CodeBlock.vue

@@ -0,0 +1,50 @@
+<template>
+<div :class="[ error && 'orange', 'highlighted', 'dark-mode-inverted', 'flexbox', 'full-width']">
+    <pre class="small custom-p-8 custom-m-0 wide" v-html="value_to_show"></pre>
+    <div v-if="just_copied" class="custom-my-4 custom-mx-8 large" style="color: var(--green);"><i class="fas fa-check" title="copied"></i></div>
+    <a v-else style="color: var(--gray);" title="Copy to clipboard" class="custom-my-4 custom-mx-8 large" href="javascript:void(0);" @click="copy()"><i class="far fa-copy"></i></a>
+</div>
+</template>
+
+<script>
+import { prettyPrintJson } from 'pretty-print-json';
+export default {
+    name: "CodeBlock",
+    props: {
+        value: [Object, String],
+        error: {
+            type: Boolean,
+            default: () => false
+        }
+    },
+    data() {
+        return {
+            just_copied: false
+        };
+    },
+    computed: {
+        value_to_show() {
+            if (typeof this.value === 'object') {
+                return prettyPrintJson.toHtml(this.value);
+            }
+            return this.value;
+        },
+        value_to_copy() {
+            if (typeof this.value === 'object') {
+                return JSON.stringify(this.value, null, '\t');
+            }
+            return this.value;
+        }
+    },
+    methods: {
+        copy() {
+            navigator.clipboard.writeText(this.value_to_copy).then(() => {
+                this.just_copied = true;
+                setTimeout(() => {
+                    this.just_copied = false;
+                }, 3000);
+            });
+        }
+    }
+}
+</script>

wa-apps/apiexplorer/client/src/components/SchemaInput.vue

@@ -20,6 +20,16 @@
         </span>
         <input v-else-if="schema.format === 'email'" :value="modelValue" @input="updateValue($event.target.value)" :id="name" type="email" />
         <input v-else-if="schema.format === 'password'" :value="modelValue" @input="updateValue($event.target.value)" :id="name" type="password" />
+        <div v-else-if="schema.format === 'binary'">
+            <div class="upload">
+                <label class="link">
+                    <i class="fas fa-file-upload"></i>
+                    <span v-if="filename" class="custom-mx-8">{{ filename }}</span>
+                    <span v-else class="custom-mx-8">{{ $t("Select file") }}</span>
+                    <input type="file" autocomplete="off" @change="readFile" :id="name" />
+                </label>
+            </div>
+        </div>
         <input v-else :value="modelValue" @input="updateValue($event.target.value)" :id="name" type="text" class="long" />
     </span>
     <input v-else-if="schema.type === 'integer'" :value="modelValue" @input="updateValue($event.target.value)" :id="name" type="number" />
@@ -132,7 +142,8 @@ export default {
     },
     data() {
         return {
-            l_value: {}
+            l_value: {},
+            filename: null
         };
     },
     created() {
@@ -167,6 +178,19 @@ export default {
         this.$emit('update:modelValue', val);
         this.$emit('updated');
       },
+      readFile: function (event) {
+        if (event.target.files.length == 0) {
+            return;
+        }
+        const file = event.target.files[0];
+        if (Object.prototype.toString.call(file) !== '[object File]') {
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = e => this.updateValue(e.target.result);
+        reader.readAsBinaryString(file);
+        this.filename = file.name;
+      },
       updateArrValue: function (val, index) {
         this.l_value[index] = val;
         this.$emit('update:modelValue', Object.values(this.l_value));

wa-apps/apiexplorer/client/src/i18n.js

@@ -1,5 +1,5 @@
 //import Vue from "vue";
-import { createI18n } from "vue-i18n";
+import { createI18n } from "vue-i18n/index";
 
 //Vue.use(VueI18n);
 

wa-apps/apiexplorer/client/src/locales/en.json

@@ -4,6 +4,7 @@
   "no-api-hint": "If you are a developer of this app, please refer to this guide on how to create <a href='https://developers.webasyst.com/features/apis/' target='_blank'>an API-enabled Webasyst app</a>.",
   "empty": "empty",
   "Request": "Request",
+  "Response": "Response",
   "Schema": "Schema",
   "Headers": "Headers",
   "Data": "Data",
@@ -38,5 +39,11 @@
   "Date & time": "Date & time",
   "Run API": "Run API",
   "Body": "Body",
-  "OpenAPI Document": "OpenAPI Document"
+  "OpenAPI Document": "OpenAPI Document",
+  "Query string parameters": "Query string parameters",
+  "Request body parameters": "Request body parameters",
+  "Select file": "Select file",
+  "Response data format": "Response data format",
+  "show": "show",
+  "hide": "hide"
 }

wa-apps/apiexplorer/client/src/locales/ru.json

@@ -28,6 +28,7 @@
   "Headers": "Заголовки",
   "Schema": "Схема",
   "Request": "Запрос",
+  "Response": "Ответ",
   "no-api-message": "Приложение «{0}» не предоставляет публичного API",
   "No API": "Нет API",
   "no-api-hint": "Если вы являетесь разработчиком данного приложения, ознакомьтесь с инструкцией по созданию <a href='https://developers.webasyst.ru/docs/features/apis/' target='_blank'>публичного API в приложениях Webasyst</a>.",
@@ -38,5 +39,11 @@
   "URL parameters": "Параметры строки запроса",
   "Run API": "Запустить API",
   "Body": "Содержимое",
-  "OpenAPI Document": "Описание OpenAPI"
+  "OpenAPI Document": "Описание OpenAPI",
+  "Query string parameters": "Параметры строки запроса",
+  "Request body parameters": "Параметры тела запроса",
+  "Select file": "Выберите файл",
+  "Response data format": "Формат ответа",
+  "show": "показать",
+  "hide": "скрыть"
 }

wa-apps/apiexplorer/client/src/views/About.vue

@@ -27,6 +27,7 @@ export default {
         const resp = await this.axios.get('?module=pages&action=about');
         this.page = resp.data;
         this.state.loading = false;
+        document.title = 'About — API Explorer';
     }
 }
 </script>

wa-apps/apiexplorer/client/src/views/Application.vue

@@ -37,6 +37,7 @@ export default {
   mounted() {
     this.app_id = this.$route.params.name;
     this.app = this.$store.getters.getApp(this.app_id);
+    document.title = this.app.name + ' — API Explorer';
   }
 }
 </script>