add basic services

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "rxjs": "^6.6.6",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^9.1.2"

src/components/List.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="list">
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class List extends Vue {
+  // @Prop() private msg!: string;
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+</style>

src/services/fetch.ts

@@ -0,0 +1,100 @@
+declare var window: any;
+const defaultBasePath = '';
+
+export function fetchAsync(method: 'GET' | 'POST' | 'DELETE' | 'PUT', url: string, body?: any) {
+    const headers = { 'Content-Type': 'application/json; charset=utf-8' };
+    // if (access_token) headers['Authorization'] = `Token ${access_token}`;
+    return window.fetch(`${defaultBasePath}${url}`, {
+        method,
+        headers,
+        body: body && JSON.stringify(body)
+    }).then((response: any) => {
+        if (response.status === 401) {
+            window.location.href = '/auth/login';
+            // throw new Error('401');
+        }
+        if (response.status === 403 && url === '/api/v1/organization/') {
+            // this indicates a user that is not supposed to be in bx-console
+            window.location.href = '/auth/logout';
+        }
+        const result = response.json();
+        if (!response.ok) throw result;
+        return result;
+    });
+}
+
+export function get<T>(url: string): Promise<T> {
+    return fetchAsync('GET', url);
+}
+
+export function post<T>(url: string, body?: any): Promise<T> {
+    return fetchAsync('POST', url, body);
+}
+
+export function postWithFile<T>(url: string, body?: any): Promise<T> {
+    return fetchWithFile('POST', url, body);
+}
+
+export function putWithFile<T>(url: string, body?: any): Promise<T> {
+    return fetchWithFile('PUT', url, body);
+}
+
+export function fetchWithFile<T>(method: string, url: string, body?: any): Promise<T> {
+    return window.fetch(`${defaultBasePath}${url}`, {
+        method: method,
+        body: body
+    }).then((response: any) => {
+        if (response.status === 401) {
+            window.location.href = '/auth/login';
+            // throw new Error('401');
+        }
+        const result = response.json();
+        if (!response.ok) throw result;
+        return result;
+    })
+}
+
+export function del(url: string) {
+    return fetchAsync('DELETE', url);
+}
+
+export function put(url: string, body?: any) {
+    return fetchAsync('PUT', url, body);
+}
+export function toQueryString(obj: any) {
+    const parts = [];
+    for (var i in obj) {
+        if (obj.hasOwnProperty(i)) {
+            parts.push(encodeURIComponent(i) + "=" + encodeURIComponent(obj[i]));
+        }
+    }
+    return parts.join("&");
+}
+
+export function serializeObject<T>(form: any) {
+    let obj: {[key: string]: any} = {};
+    if (typeof form == 'object' && form.nodeName == "FORM") {
+        for (let i = 0; i < form.elements.length; i++) {
+            const field = form.elements[i];
+            if (field.name
+                && field.type != 'file'
+                && field.type != 'reset'
+                && field.type != 'submit'
+                && field.type != 'button') {
+                if (field.type == 'select-multiple') {
+                    obj[field.name] = '';
+                    let tempvalue = '';
+                    for (let j = 0; j < form.elements[i].options.length; j++) {
+                        if (field.options[j].selected)
+                            tempvalue += field.options[j].value + ';';
+                    }
+                    if (tempvalue.charAt(tempvalue.length - 1) === ';') obj[field.name] = tempvalue.substring(0, tempvalue.length - 1);
+
+                } else if ((field.type != 'checkbox' && field.type != 'radio') || field.checked) {
+                    obj[field.name] = field.value;
+                }
+            }
+        }
+    }
+    return obj as T;
+}

src/services/observeService.ts

@@ -0,0 +1,19 @@
+import { Observable, Subject, merge } from 'rxjs';
+import { switchMap, shareReplay, debounceTime } from 'rxjs/operators';
+
+export class ObserveService<T> {
+    private updateStream: Subject<void>;
+    public value$: Observable<T>;
+
+    constructor(request: ()=>Observable<T>) {
+        this.updateStream = new Subject<void>();
+        const initialCurrentResponse$ = request();
+        const reload$ = this.updateStream.pipe(debounceTime(1000), switchMap(() => request()));
+        const final$ = merge(initialCurrentResponse$, reload$).pipe(shareReplay(1));
+        this.value$ = final$;
+    }
+
+    public next() {
+        this.updateStream.next();
+    }
+}

yarn.lock

@@ -7158,6 +7158,13 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
+rxjs@^6.6.6:
+  version "6.6.6"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.6.tgz#14d8417aa5a07c5e633995b525e1e3c0dec03b70"
+  integrity sha512-/oTwee4N4iWzAMAL9xdGKjkEHmIwupR3oXbQjCKywF1BeFohswF3vZdogbmEF6pZkOsXTzWkrZszrWpQTByYVg==
+  dependencies:
+    tslib "^1.9.0"
+
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"