vueless 0.0.1

package/service.api/index.js

@@ -0,0 +1,275 @@
+import axios from "axios";
+import JwtServiceDefault from "vueless/service.jwt";
+import NotifyServiceDefault from "vueless/service.notify";
+import I18nServiceDefault from "vueless/service.i18n";
+
+export default class ApiServiceDefault {
+  #notify = new NotifyServiceDefault();
+
+  constructor() {
+    this.pendingRequests = [];
+  }
+
+  addPendingRequest(request) {
+    this.pendingRequests.push(request);
+  }
+
+  removePendingRequest(request) {
+    const index = this.pendingRequests.indexOf(request);
+
+    if (index !== -1) {
+      this.pendingRequests.splice(index, 1);
+    }
+  }
+
+  cancelPendingRequests() {
+    this.pendingRequests.forEach((request) => {
+      request.cancel();
+    });
+    this.pendingRequests = [];
+  }
+
+  /**
+   * Inits axios
+   */
+  init() {
+    const restApiPrefix = import.meta.env.VITE_REST_API_PREFIX;
+    let apiBaseUrl = import.meta.env.VITE_API_DOMAIN;
+
+    axios.defaults.baseURL = apiBaseUrl + restApiPrefix;
+
+    this.setAxiosInterceptors(axios);
+  }
+
+  /**
+   * Set axios interceptors
+   * @param { Object } $axios
+   */
+  setAxiosInterceptors($axios) {
+    $axios.interceptors.response.use(
+      (response) => {
+        this.loader("off", response.config.url);
+
+        return response;
+      },
+      (error) => {
+        const { config, response, message } = error;
+        const apiMessage = this.getResponseMessage(response);
+
+        this.loader("off", error.config.url);
+
+        // show error notification if it isn't disabled in partiular api request
+        if (!config?.disableErrorNotify) {
+          if (message === "Network Error") {
+            this.#notify.error("networkError");
+          } else {
+            Array.isArray(apiMessage) && apiMessage.length
+              ? apiMessage.forEach((code) => this.#notify.error(code))
+              : this.#notify.error(apiMessage);
+          }
+        }
+
+        return Promise.reject(error);
+      },
+    );
+  }
+
+  /**
+   * Set the default HTTP request headers
+   */
+  setHeaders(withLanguage = true) {
+    const authToken = new JwtServiceDefault().getAuthToken();
+    const activeLanguage = new I18nServiceDefault().getActiveLanguage();
+
+    axios.defaults.headers.common["Authorization"] = `Bearer ${authToken}`;
+
+    if (withLanguage) axios.defaults.headers.common["Language"] = activeLanguage;
+  }
+
+  /**
+   * Get message code for global notification
+   * @param { Object } response
+   * @returns String
+   */
+  getResponseMessage(response) {
+    return response?.data?.message;
+  }
+
+  /**
+   * Show success notify or set type and message in local storage for display with delay
+   * @param { String } message
+   * @param { Boolean } withDelay
+   */
+  showSuccessNotify(message, withDelay) {
+    const type = "success";
+
+    withDelay ? this.#notify.setDelayed(type, message) : this.#notify.success(message);
+  }
+
+  /**
+   * Change loaders state (on | off): redeclare this method
+   * @param { String } state
+   * @param { String } resource
+   */
+  loader(state, resource) {
+    // eslint-disable-next-line no-console
+    if (state === "on") console.log(state, resource);
+    // eslint-disable-next-line no-console
+    if (state === "off") console.log(state, resource);
+  }
+
+  /**
+   * Get axios request config (method for redeclaration)
+   * @param { Object } settings
+   * @returns { Object }
+   */
+  getRequestConfig(settings) {
+    const { allowMultipleRequests = false, disableErrorNotify = false } = settings;
+
+    const config = {};
+
+    if (allowMultipleRequests) {
+      config.allowMultipleRequests = allowMultipleRequests;
+    }
+
+    if (disableErrorNotify) {
+      config.disableErrorNotify = disableErrorNotify;
+    }
+
+    return config;
+  }
+
+  /**
+   * Send the GET HTTP request
+   * @param { String } resource
+   * @param { Object } settings
+   * @returns { IDBRequest<IDBValidKey> | Promise<void> }
+   */
+  get(resource, settings = {}) {
+    const config = this.getRequestConfig(settings);
+    const { withLoader = true, withNotify = false, delaySuccessNotify = false } = settings;
+
+    if (withLoader) {
+      this.loader("on", resource);
+    }
+
+    config.cancelToken = new axios.CancelToken((cancel) => {
+      this.addPendingRequest({ cancel });
+    });
+
+    return axios.get(resource, config).then((response) => {
+      this.removePendingRequest(config.cancelToken);
+
+      if (withNotify) {
+        const message = this.getResponseMessage(response);
+
+        this.showSuccessNotify(message, delaySuccessNotify);
+      }
+
+      return response;
+    });
+  }
+
+  /**
+   * Set the POST HTTP request
+   * @param { String } resource
+   * @param params
+   * @param { Object } settings
+   * @returns { IDBRequest<IDBValidKey> | Promise<void> }
+   */
+  post(resource, params = null, settings = {}) {
+    const config = this.getRequestConfig(settings);
+    const { withLoader = true, withNotify = false, delaySuccessNotify = false } = settings;
+
+    if (withLoader) {
+      this.loader("on", resource);
+    }
+
+    return axios.post(resource, params, config).then((response) => {
+      if (withNotify) {
+        const message = this.getResponseMessage(response);
+
+        this.showSuccessNotify(message, delaySuccessNotify);
+      }
+
+      return response;
+    });
+  }
+
+  /**
+   * Send the PUT HTTP request
+   * @param { String } resource
+   * @param params
+   * @param { Object } settings
+   * @returns {IDBRequest<IDBValidKey> | Promise<void>}
+   */
+  put(resource, params = null, settings = {}) {
+    const config = this.getRequestConfig(settings);
+    const { withLoader = true, withNotify = false, delaySuccessNotify = false } = settings;
+
+    if (withLoader) {
+      this.loader("on", resource);
+    }
+
+    return axios.put(resource, params, config).then((response) => {
+      if (withNotify) {
+        const message = this.getResponseMessage(response);
+
+        this.showSuccessNotify(message, delaySuccessNotify);
+      }
+
+      return response;
+    });
+  }
+
+  /**
+   * Send the PATCH HTTP request
+   * @param { String } resource
+   * @param params
+   * @param { Object } settings
+   * @returns { IDBRequest<IDBValidKey> | Promise<void> }
+   */
+  patch(resource, params = null, settings = {}) {
+    const config = this.getRequestConfig(settings);
+    const { withLoader = true, withNotify = false, delaySuccessNotify = false } = settings;
+
+    if (withLoader) {
+      this.loader("on", resource);
+    }
+
+    return axios.patch(resource, params, config).then((response) => {
+      if (withNotify) {
+        const message = this.getResponseMessage(response);
+
+        this.showSuccessNotify(message, delaySuccessNotify);
+      }
+
+      return response;
+    });
+  }
+
+  /**
+   * Send the DELETE HTTP request
+   * @param { String } resource
+   * @param { Object } settings
+   * @returns { IDBRequest<IDBValidKey> | Promise<void> }
+   */
+  delete(resource, settings = {}) {
+    const config = this.getRequestConfig(settings);
+    const { withLoader = true, withNotify = false, delaySuccessNotify = false } = settings;
+
+    if (withLoader) {
+      this.loader("on", resource);
+    }
+
+    return axios.delete(resource, config).then((response) => {
+      if (withNotify) {
+        const message = this.getResponseMessage(response);
+
+        this.showSuccessNotify(message, delaySuccessNotify);
+      }
+
+      return response;
+    });
+  }
+}

package/service.data/index.js

@@ -0,0 +1,75 @@
+import { isProxy, isReactive, isRef, toRaw } from "vue";
+
+export default class DataServiceDefault {
+  compareValues(key, order = "asc") {
+    return function innerSort(a, b) {
+      const isPropExistInObjA = Object.prototype.hasOwnProperty.call(a, key);
+      const isPropExistInObjB = Object.prototype.hasOwnProperty.call(b, key);
+
+      if (!isPropExistInObjA || !isPropExistInObjB) {
+        return 0;
+      }
+
+      const varA = typeof a[key] === "string" ? a[key].toUpperCase() : a[key];
+      const varB = typeof b[key] === "string" ? b[key].toUpperCase() : b[key];
+      let comparison = 0;
+
+      if (!varA) return 1;
+
+      if (!varB) return -1;
+
+      if (varA > varB) {
+        comparison = 1;
+      }
+
+      if (varA < varB) {
+        comparison = -1;
+      }
+
+      return order === "desc" ? comparison * -1 : comparison;
+    };
+  }
+
+  createFormData(form = {}) {
+    const formData = new FormData();
+
+    for (let key in form) {
+      if (Array.isArray(form[key])) {
+        form[key].forEach((item, index) => formData.append(`${key}[${index}]`, item));
+      } else if (typeof form[key] === "boolean") {
+        formData.append(key, Number(form[key]));
+      } else {
+        formData.append(key, form[key]);
+      }
+    }
+
+    return formData;
+  }
+
+  updateArray(oldArray, newArray) {
+    newArray = new Map(newArray.map((item) => [item.id, item]));
+
+    const updatedArray = oldArray.map((item) => {
+      if (newArray.has(item.id)) {
+        item = newArray.get(item.id);
+        newArray.delete(item.id);
+      }
+
+      return item;
+    });
+
+    return [...updatedArray, ...newArray.values()];
+  }
+
+  getRawValue = (value) => {
+    if (Array.isArray(value)) {
+      return value.map((item) => this.getRawValue(item));
+    }
+
+    if (isRef(value) || isReactive(value) || isProxy(value)) {
+      return this.getRawValue(toRaw(value));
+    }
+
+    return value;
+  };
+}

package/service.date/index.js

@@ -0,0 +1,222 @@
+import I18nServiceDefault from "vueless/service.i18n";
+import { enGB, ru, uk } from "date-fns/locale";
+import {
+  addDays,
+  addMonths,
+  endOfDay,
+  endOfMonth,
+  endOfTomorrow,
+  format,
+  getUnixTime,
+  isToday,
+  isTomorrow,
+  isYesterday,
+  minutesToSeconds,
+  startOfDay,
+  subMonths,
+  startOfYear,
+  endOfYear,
+  startOfMonth,
+  subDays,
+  secondsToMilliseconds,
+  getDaysInMonth,
+} from "date-fns";
+import { zonedTimeToUtc } from "date-fns-tz";
+import { format as TimeagoFormat, register as TimeagoRegister } from "timeago.js";
+import { uk as locale_UA, ru as locale_RU } from "timeago.js/lib/lang";
+
+const { getActiveLanguage } = new I18nServiceDefault();
+
+export default class DateServiceDefault {
+  #languages = {
+    en: enGB,
+    ru: ru,
+    ua: uk,
+  };
+
+  #settings = {
+    yearFormat: "y",
+    monthFormat: "MMMM",
+    dayFormat: "EEEE",
+    dateNumberFormat: "dd",
+    hourFormat: "HH",
+    minuteFormat: "mm",
+    secondFormat: "ss",
+  };
+
+  TOMORROW_TIMESTAMP = getUnixTime(endOfTomorrow());
+
+  constructor(languages = null) {
+    this.#languages = languages || this.#languages;
+  }
+
+  getDifferenceBetweenTimeZone(date) {
+    const diffInMinutesFrom = Math.abs(startOfDay(Number(date?.from)).getTimezoneOffset());
+    const diffInMinutesTo = Math.abs(endOfDay(Number(date?.to)).getTimezoneOffset());
+
+    return {
+      from: minutesToSeconds(diffInMinutesFrom),
+      to: minutesToSeconds(diffInMinutesTo),
+    };
+  }
+
+  formatDate(date, settings) {
+    const mergedSettings = {
+      ...this.#settings,
+      ...settings,
+    };
+    const {
+      dayFormat,
+      monthFormat,
+      yearFormat,
+      dateNumberFormat,
+      hourFormat,
+      minuteFormat,
+      i18n,
+      withTime,
+    } = mergedSettings;
+    const locale = this.#languages[getActiveLanguage()];
+
+    const day = format(date, dayFormat, { locale });
+    const month = format(date, monthFormat, { locale }).split(".").join(""); //Removes dot from Ukr and Rus localization;
+    const year = format(date, yearFormat);
+    const dateNumber = format(date, dateNumberFormat);
+    const hours = format(date, hourFormat);
+    const minutes = format(date, minuteFormat);
+
+    let formattedDate = `${day}, ${dateNumber} ${month} ${year}`;
+
+    if (isYesterday(date)) {
+      formattedDate = `${i18n.yesterday}, ${dateNumber} ${month} ${year}`;
+    }
+
+    if (isToday(date)) {
+      formattedDate = `${i18n.today}, ${dateNumber} ${month} ${year}`;
+    }
+
+    if (isTomorrow(date)) {
+      formattedDate = `${i18n.tomorrow}, ${dateNumber} ${month} ${year}`;
+    }
+
+    if (withTime) {
+      formattedDate = `${formattedDate} – ${hours}:${minutes}`;
+    }
+
+    return formattedDate;
+  }
+
+  dateConverter(timestamp, type = "date") {
+    const locale = this.#languages[getActiveLanguage()];
+    const date = new Date(timestamp * 1000);
+    let options = "";
+
+    if (type.includes("date")) {
+      options = "dd.MM.yyyy";
+    }
+
+    if (type.includes("time")) {
+      options = "HH:mm:ss";
+    }
+
+    if (type.includes("datetime")) {
+      options = "HH:mm dd.MM.yyyy";
+    }
+
+    if (type.includes("dateWithFullMonth")) {
+      options = "dd MMMM yyyy";
+    }
+
+    if (type.includes("dateWithFullMonthAndTime")) {
+      options = "dd MMMM yyyy HH:mm";
+    }
+
+    return format(date, options, { locale });
+  }
+
+  thirtyDaysAgo() {
+    const date = new Date();
+    const thirtyDaysAgo = subDays(date, getDaysInMonth(date));
+    const diffInSeconds = this.getDifferenceBetweenTimeZone({ from: startOfDay(thirtyDaysAgo) });
+
+    return getUnixTime(startOfDay(thirtyDaysAgo)) + diffInSeconds.from;
+  }
+
+  nextTwoWeek() {
+    const date = new Date();
+    const nextTwoWeek = addDays(date, 14);
+    const diffInSeconds = this.getDifferenceBetweenTimeZone({ to: nextTwoWeek });
+
+    return getUnixTime(endOfDay(nextTwoWeek)) + diffInSeconds.to;
+  }
+
+  sixMonthsAgo() {
+    const currentDate = new Date();
+    const startOfFiveMonthsAgoInSeconds = getUnixTime(startOfMonth(subMonths(currentDate, 5)));
+    const endOfCurrentMonthInSeconds = getUnixTime(endOfMonth(currentDate));
+    const diffInSeconds = this.getDifferenceBetweenTimeZone({
+      from: startOfMonth(subMonths(currentDate, 5)),
+      to: endOfMonth(currentDate),
+    });
+
+    return {
+      from: startOfFiveMonthsAgoInSeconds + diffInSeconds.from,
+      to: endOfCurrentMonthInSeconds + diffInSeconds.to,
+    };
+  }
+
+  currentMonth() {
+    const currentDate = new Date();
+    const startOfMonthInSeconds = getUnixTime(startOfMonth(currentDate));
+    const endOfMonthInSeconds = getUnixTime(endOfMonth(currentDate));
+    const diffInSeconds = this.getDifferenceBetweenTimeZone({
+      from: startOfMonth(currentDate),
+      to: endOfMonth(currentDate),
+    });
+
+    return {
+      from: startOfMonthInSeconds + diffInSeconds.from,
+      to: endOfMonthInSeconds + diffInSeconds.to,
+    };
+  }
+
+  currentYear() {
+    const currentDate = new Date();
+    const startOfYearInSeconds = getUnixTime(startOfYear(currentDate));
+    const endOfYearInSeconds = getUnixTime(endOfYear(currentDate));
+    const diffInSeconds = this.getDifferenceBetweenTimeZone({
+      from: startOfYear(currentDate),
+      to: endOfYear(currentDate),
+    });
+
+    return {
+      from: startOfYearInSeconds + diffInSeconds.from,
+      to: endOfYearInSeconds + diffInSeconds.to,
+    };
+  }
+
+  nextMonth() {
+    const nextMonth = addMonths(new Date(), 1);
+
+    const firstDayOfMonth = getUnixTime(startOfMonth(nextMonth));
+    const lastDayOfMonth = getUnixTime(endOfMonth(nextMonth));
+
+    return { firstDayOfMonth, lastDayOfMonth };
+  }
+
+  startOfSelectedDay(timestamp) {
+    const localTimeZone = "Etc/GMT";
+
+    const localStartOfDay = zonedTimeToUtc(startOfDay(timestamp), localTimeZone);
+
+    return getUnixTime(localStartOfDay);
+  }
+
+  getTimeAgo(date) {
+    TimeagoRegister("ua", locale_UA);
+    TimeagoRegister("ru", locale_RU);
+
+    const activeLanguage = getActiveLanguage();
+
+    return TimeagoFormat(secondsToMilliseconds(date), activeLanguage);
+  }
+}

package/service.i18n/index.js

@@ -0,0 +1,145 @@
+import { getCurrentInstance } from "vue";
+import { createI18n, useI18n } from "vue-i18n";
+import merge from "lodash.merge";
+import { fallbackLocale } from "vueless/service.ui";
+
+export default class I18nServiceDefault {
+  static FALLBACK_LOCALE = "en";
+  static LOCALE_KEY = "language";
+
+  #globalMessages = {};
+  #moduleMessages = {};
+
+  constructor() {
+    this._fallbackLocale = fallbackLocale || I18nServiceDefault.FALLBACK_LOCALE;
+
+    this.createI18nInstance();
+  }
+
+  createI18nInstance() {
+    this.i18nInstance = createI18n({
+      legacy: false,
+      messages: {},
+      locale: this.getActiveLanguage(),
+      fallbackLocale: this._fallbackLocale,
+      missing: this.missing,
+      warnHtmlMessage: false, // TODO: Think how to manage this later
+      pluralRules: {
+        ru: this.pluralizationRules,
+        ua: this.pluralizationRules,
+      },
+    });
+  }
+
+  async init() {
+    // Auto import global translations.
+    const global = import.meta.glob("@/i18n/**/*.yaml");
+
+    for (const path in global) {
+      const locales = await global[path]();
+      const lang = path.split(".").shift().split("/").pop();
+
+      this.#globalMessages[lang] = locales.default;
+    }
+
+    // Auto import translations from the modules.
+    const modules = import.meta.glob("@/modules/**/*.yaml");
+
+    for (const path in modules) {
+      const locales = await modules[path]();
+      const lang = path.split(".").shift().split("/").pop();
+      const module = path.split("modules").pop().split("/").at(1);
+
+      this.#moduleMessages[lang] = {
+        ...this.#moduleMessages[lang],
+        [module]: locales.default,
+      };
+    }
+
+    this.setMessages();
+  }
+
+  setMessages(module) {
+    const lang = this.getActiveLanguage();
+
+    const messages = this.#moduleMessages[lang]
+      ? merge(this.#moduleMessages[lang][module], this.#globalMessages[lang])
+      : this.#globalMessages[lang];
+
+    this.i18nInstance.global.setLocaleMessage(lang, messages);
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  missing(locale, key) {
+    // Handle issues here by Honeybadger.io or similar error tracking app.
+  }
+
+  pluralizationRules(value, plurals) {
+    let pluralIndex = 0;
+
+    if (value) {
+      const remainder = value % 10;
+      const teen = value > 10 && value < 20;
+      const endsWithOne = remainder === 1;
+
+      if (plurals < 4) {
+        pluralIndex = !teen && endsWithOne ? 1 : 2;
+      } else {
+        pluralIndex = 3;
+        if (!teen && endsWithOne) pluralIndex = 1;
+        if (!teen && remainder >= 2 && remainder <= 4) pluralIndex = 2;
+      }
+    }
+
+    return pluralIndex;
+  }
+
+  /**
+   * Get translation from global or local scopes
+   * @param localPath {string}
+   * @param params {$ObjMap}
+   * @returns {string}
+   */
+  getTranslation(localPath, params = {}) {
+    const { t, tm } = useI18n({ useScope: "local" });
+    const { t: tGlobal, tm: tmGlobal, te: teGlobal } = useI18n({ useScope: "global" });
+
+    const componentName = getCurrentInstance().type.name;
+    const globalPath = `${componentName}.${localPath}`;
+
+    let translation;
+
+    if (!localPath || !componentName) {
+      translation = "";
+    } else if (params?.isNested) {
+      translation = teGlobal(globalPath) ? tmGlobal(globalPath) : tm(localPath);
+    } else {
+      translation = teGlobal(globalPath) ? tGlobal(globalPath) : t(localPath);
+    }
+
+    return translation;
+  }
+
+  /**
+   * Save the active language to the localStorage
+   * @param lang
+   */
+  setActiveLanguage = (lang) => {
+    const localeKey = I18nServiceDefault.LOCALE_KEY;
+
+    this.i18nInstance.global.locale.value = lang;
+    localStorage.setItem(localeKey, lang);
+
+    this.setMessages();
+  };
+
+  /**
+   * Get the current active language from localStorage or set default if non exist
+   * @returns {string | string}
+   */
+  getActiveLanguage = () => {
+    const localeKey = I18nServiceDefault.LOCALE_KEY;
+
+    return localStorage.getItem(localeKey) || this._fallbackLocale;
+  };
+}