initial commit

.github/.prettierrc

@@ -0,0 +1,3 @@
+{
+    "tabWidth": 2
+}

.github/workflows/publish.yaml

@@ -0,0 +1,20 @@
+name: Publish package
+on:
+  release:
+    types: [published]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          registry-url: 'https://registry.npmjs.org'
+          scope: '@rheas'
+      - run: npm install
+      - run: npm run build
+      - name: publish
+        working-directory: build
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npm publish --access public

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/lib

.prettierrc

@@ -0,0 +1,7 @@
+{
+    "semi": true,
+    "trailingComma": "all",
+    "singleQuote": true,
+    "printWidth": 100,
+    "tabWidth": 4
+}

build/README.md

@@ -0,0 +1,2 @@
+# vuer
+Vue helpers and boilerplate code for frontend development

build/classes/DataFetcher.d.ts

@@ -0,0 +1,68 @@
+import DataHandler from './DataHandler';
+import RequestCallback from '../ts/RequestCallback';
+export default class DataFetcher extends DataHandler {
+    /**
+     * Url from where the data has to be fetched.
+     */
+    data_fetch_url: string | undefined;
+    /**
+     * Indicater to show on frontend if the data is
+     * being fetched or not.
+     */
+    fetching: boolean;
+    /**
+     * Creates a new DataFetcher handler.
+     *
+     * @param url Optional url field.
+     */
+    constructor(url?: string);
+    /**
+     * Fetches the api data. This method updates the errors and
+     * fetching variables which could come handy with DOM rendering.
+     *
+     * @param url
+     * @param onSuccess
+     * @param onError
+     */
+    fetchData(url: string, onSuccess?: RequestCallback, onError?: RequestCallback): void;
+    /**
+     * Responsible for handling the network communication via axios.
+     * Function can be used if all the DataFetcher functionality like
+     * initFetch, onCompleted has to be avoided.
+     *
+     * This function allows for independant data fetch without affecting
+     * the DOM elements (fetching and errors variable remain untouched).
+     *
+     * Returns a Promise, so can have custom onSuccess and onError
+     * functionality.
+     *
+     * @param url The url from which data has to be fetched.
+     * @param header
+     */
+    private api_get;
+    /**
+     * Initiates a new data fetch. Errors are reset and the
+     * fetching status is activated.
+     */
+    protected initFetch(): void;
+    /**
+     * Calls the onSuccess callback. Sends the data send by the server to
+     * the success callback.
+     *
+     * @param response
+     * @param onSuccess
+     */
+    protected onFetchSuccess(response: any, onSuccess?: RequestCallback): void;
+    /**
+     * Calls the onError callback. Sends the complete "error" response
+     * object to the onError callback (not just error.data)
+     *
+     * @param error
+     * @param onError
+     */
+    protected onFetchError(error: any, onError?: RequestCallback): void;
+    /**
+     * Deactivates the fetch status, on fetch completes.
+     */
+    protected onCompleted(): void;
+}

build/classes/DataFetcher.js

@@ -0,0 +1,141 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var DataHandler_1 = __importDefault(require("./DataHandler"));
+var axios_1 = __importDefault(require("axios"));
+var DataFetcher = /** @class */ (function (_super) {
+    __extends(DataFetcher, _super);
+    /**
+     * Creates a new DataFetcher handler.
+     *
+     * @param url Optional url field.
+     */
+    function DataFetcher(url) {
+        var _this = _super.call(this) || this;
+        /**
+         * Indicater to show on frontend if the data is
+         * being fetched or not.
+         */
+        _this.fetching = false;
+        _this.data_fetch_url = url;
+        return _this;
+    }
+    /**
+     * Fetches the api data. This method updates the errors and
+     * fetching variables which could come handy with DOM rendering.
+     *
+     * @param url
+     * @param onSuccess
+     * @param onError
+     */
+    DataFetcher.prototype.fetchData = function (url, onSuccess, onError) {
+        var _this = this;
+        this.initFetch();
+        this.api_get(url || this.data_fetch_url)
+            .then(function (response) {
+            _this.onFetchSuccess(response, onSuccess);
+            _this.onCompleted();
+        })
+            .catch(function (error) {
+            _this.onFetchError(error, onError);
+            _this.onCompleted();
+        });
+    };
+    /**
+     * Responsible for handling the network communication via axios.
+     * Function can be used if all the DataFetcher functionality like
+     * initFetch, onCompleted has to be avoided.
+     *
+     * This function allows for independant data fetch without affecting
+     * the DOM elements (fetching and errors variable remain untouched).
+     *
+     * Returns a Promise, so can have custom onSuccess and onError
+     * functionality.
+     *
+     * @param url The url from which data has to be fetched.
+     * @param header
+     */
+    DataFetcher.prototype.api_get = function (url, header) {
+        header = header || {};
+        return axios_1.default({
+            method: 'get',
+            url: url,
+            headers: __assign({ 'Cache-Control': 'no-cache' }, header),
+        });
+    };
+    /**
+     * Initiates a new data fetch. Errors are reset and the
+     * fetching status is activated.
+     */
+    DataFetcher.prototype.initFetch = function () {
+        this.reset();
+        this.fetching = true;
+    };
+    /**
+     * Calls the onSuccess callback. Sends the data send by the server to
+     * the success callback.
+     *
+     * @param response
+     * @param onSuccess
+     */
+    DataFetcher.prototype.onFetchSuccess = function (response, onSuccess) {
+        try {
+            if (typeof onSuccess === 'function') {
+                onSuccess(response.data);
+            }
+        }
+        catch (e) { }
+    };
+    /**
+     * Calls the onError callback. Sends the complete "error" response
+     * object to the onError callback (not just error.data)
+     *
+     * @param error
+     * @param onError
+     */
+    DataFetcher.prototype.onFetchError = function (error, onError) {
+        try {
+            this.setError(error);
+            if (typeof onError === 'function') {
+                onError(error);
+            }
+        }
+        catch (e) { }
+    };
+    /**
+     * Deactivates the fetch status, on fetch completes.
+     */
+    DataFetcher.prototype.onCompleted = function () {
+        this.fetching = false;
+    };
+    return DataFetcher;
+}(DataHandler_1.default));
+exports.default = DataFetcher;

build/classes/DataHandler.d.ts

@@ -0,0 +1,25 @@
+import { AxiosError } from "axios";
+export default class DataHandler {
+    errors: Object;
+    /**
+     * Set the data handler error response. The error response
+     * are based on the Laravel error response format. A response
+     * of 401 reloads the page (which should take the user to login page).
+     *
+     * If there is an error response (error.response.data is not null),
+     * then appropriate error message is shown to the user.
+     *
+     * @param errors Axios error response
+     */
+    setError(errors: AxiosError): object | void;
+    /**
+     * Checks whether the data handler has any errors.
+     *
+     * @return boolean
+     */
+    hasErrors(): boolean;
+    /**
+     * Resets the data handler errors.
+     */
+    reset(): void;
+}

build/classes/DataHandler.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var DataHandler = /** @class */ (function () {
+    function DataHandler() {
+        this.errors = {};
+    }
+    /**
+     * Set the data handler error response. The error response
+     * are based on the Laravel error response format. A response
+     * of 401 reloads the page (which should take the user to login page).
+     *
+     * If there is an error response (error.response.data is not null),
+     * then appropriate error message is shown to the user.
+     *
+     * @param errors Axios error response
+     */
+    DataHandler.prototype.setError = function (errors) {
+        // Error will have 401 response when the user is 
+        // unauthorized. Reload the page, so that the user 
+        // will be taken to redirect page to signin
+        if (errors.response && errors.response.status === 401) {
+            return window.location.reload();
+        }
+        if (errors.response && errors.response.data) {
+            // Laravel sends an errors field and 422 status when
+            // the form validation fails. We will set this.errors
+            // to the one send by backend and display the errors on
+            // frontend.
+            if (errors.response.data.hasOwnProperty('errors')) {
+                return this.errors = errors.response.data['errors'];
+            }
+            // Laravel sends a "message" field when there is any 
+            // server error. We will use the same for all applications
+            // to keep consistency.
+            if (errors.response.data.hasOwnProperty('message')) {
+                return this.errors = {
+                    server_error: errors.response.data['message']
+                };
+            }
+        }
+    };
+    /**
+     * Checks whether the data handler has any errors.
+     *
+     * @return boolean
+     */
+    DataHandler.prototype.hasErrors = function () {
+        return this.errors && Object.keys(this.errors).length > 0;
+    };
+    /**
+     * Resets the data handler errors.
+     */
+    DataHandler.prototype.reset = function () {
+        this.errors = {};
+    };
+    return DataHandler;
+}());
+exports.default = DataHandler;

build/classes/DataPoster.d.ts

@@ -0,0 +1,55 @@
+import DataHandler from "./DataHandler";
+import { AxiosPromise } from "axios";
+import RequestCallback from "../ts/RequestCallback";
+export default class DataPoster extends DataHandler {
+    submitted: boolean;
+    /**
+     * Posts data to the url. This method touches the submitted
+     * and errors fields, which enables dynamic DOM manipulations.
+     * Use this if automatic DOM rendering is required. For eg, in
+     * cases where <div v-if="submitted">Loading...</div>
+     *
+     * @param url Post url
+     * @param form_data Post data
+     * @param onSuccess Success callback
+     * @param onError Error callback
+     * @param onStarted Started callback
+     * @param onEnded Ended callback
+     */
+    formPost(url: string, form_data: object, onSuccess?: RequestCallback, onError?: RequestCallback): void;
+    /**
+     * Makes an Axios post request. The function can be used alone
+     * to not touch the errors and submitted variables.
+     *
+     * @param url Axios POST url
+     * @param data Post data
+     * @param headers Axios request configurations like headers.
+     */
+    api_post(url: string, data: object | string, config?: object): AxiosPromise;
+    /**
+     * Resets the errors and initiates the data post
+     * request. Varibale submitted is activated so that indication
+     * can be shown on the DOM.
+     */
+    protected initSubmit(): void;
+    /**
+     * Calls the onSuccess callback. Sends the data send by the server to
+     * the success callback.
+     *
+     * @param response
+     * @param onSuccess
+     */
+    protected onPostSuccess(response: any, onSuccess?: RequestCallback): void;
+    /**
+     * Calls the onError callback. Sends the complete "error" response
+     * object to the onError callback (not just error.data)
+     *
+     * @param error
+     * @param onError
+     */
+    protected onPostError(error: any, onError?: RequestCallback): void;
+    /**
+     * Deactivates the submitted status, on post completes.
+     */
+    protected onCompleted(): void;
+}