@inriver/inri 1.0.0

package/src/init/initInriFramework.ts

@@ -0,0 +1,25 @@
+import '../styles/main.scss'
+import 'windi.css'
+import { App } from 'vue'
+import { Quasar } from 'quasar'
+import quasarUserOptions from '../plugins/quasar-user-options'
+import { registerComponents } from '../plugins/library'
+import { registerAppConfigurations } from '../plugins/globalAppConfig'
+import { i18n } from '../plugins/i18n'
+import logger from '../plugins/errors/logger'
+import { VueErrorHandler } from '../plugins/errors/vueErrorHandler'
+import '../plugins/errors/globalErrorHandler'
+
+export const initInriFramework = (Vue: App): void => {
+  // Register C-components
+  registerComponents(Vue)
+
+  // Register global application configurations
+  registerAppConfigurations(Vue)
+
+  Vue.use(Quasar, quasarUserOptions)
+  Vue.use(i18n)
+  Vue.use(VueErrorHandler)
+
+  logger.init()
+}

package/src/init/useInriApp.ts

@@ -0,0 +1,55 @@
+import { initInriIcons } from '../plugins/inriIcons'
+import { useRouter, RouteLocationNormalized } from 'vue-router'
+import { watch } from 'vue'
+import { getRouteTitle } from '../utils/routeUtils'
+import { useMeta } from 'quasar'
+import { useInriStore } from '../stores/inriStore'
+
+export default function useInriApp () {
+  const router = useRouter()
+  const inriStore = useInriStore()
+
+  initInriIcons()
+
+  router.beforeResolve((to) => {
+    setPageTitle(to)
+    setRouteTheme(to)
+  })
+
+  watch(inriStore.isAnyDirty, (value) => (
+    setDirtyPageTitle(value)
+  ))
+
+  // Methods
+  function setPageTitle (to: RouteLocationNormalized) {
+    let pageTitle = ''
+
+    if (to.meta.title) {
+      pageTitle = getRouteTitle(to)
+    } else if (to.matched[0]) {
+      pageTitle = getRouteTitle(to.matched[0])
+    } else {
+      pageTitle = ''
+    }
+
+    document.title = pageTitle.length ? `inriver - ${pageTitle}` : 'inriver'
+  }
+
+  function setDirtyPageTitle (isDirty) {
+    if (isDirty) {
+      document.title = `* ${document.title}`
+    } else {
+      document.title = document.title.replace('* ', '')
+    }
+  }
+
+  function setRouteTheme (to) {
+    // This will create something like <body theme="route-demo-theme">
+    // It can then be used as a CSS selector for overriding colors
+    useMeta({
+      bodyAttr: {
+        theme: to.meta?.theme ? to.meta.theme : '',
+      },
+    })
+  }
+}

package/src/layouts/CLayoutBlank.vue

@@ -0,0 +1,7 @@
+<template>
+  <c-page-blank>
+    <c-page-main-content class="px-15">
+      <slot />
+    </c-page-main-content>
+  </c-page-blank>
+</template>

package/src/layouts/CLayoutWithBackButton.vue

@@ -0,0 +1,50 @@
+<template>
+  <c-page-blank class="border-t">
+    <c-page-flex-col>
+      <div
+        v-if="!hideTitle"
+        class="flex"
+      >
+        <c-page-back-button />
+        <c-page-title :title="title" />
+      </div>
+
+      <c-page-outer-wrapper>
+        <c-page-left-sidebar :style="{ width: leftSidebarWidth + 'px' }">
+          <slot name="left-sidebar" />
+        </c-page-left-sidebar>
+
+        <c-page-flex-col>
+          <c-page-auto-breadcrumbs v-if="showBreadcrumbs" />
+
+          <c-page-main-content>
+            <slot />
+          </c-page-main-content>
+        </c-page-flex-col>
+      </c-page-outer-wrapper>
+    </c-page-flex-col>
+
+    <c-page-right-sidebar :style="{ width: rightSidebarWidth + 'px' }">
+      <slot name="right-sidebar" />
+    </c-page-right-sidebar>
+  </c-page-blank>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String,
+    default: undefined,
+  },
+  showBreadcrumbs: Boolean,
+  hideTitle: Boolean,
+  leftSidebarWidth: {
+    type: [String, Number],
+    default: '60',
+  },
+  rightSidebarWidth: {
+    type: [String, Number],
+    default: '60',
+  },
+})
+</script>

package/src/layouts/CLayoutWithSidebars.vue

@@ -0,0 +1,46 @@
+<template>
+  <c-page-blank class="border-t">
+    <c-page-flex-col>
+      <c-page-outer-wrapper>
+        <c-page-left-sidebar :style="{ width: leftSidebarWidth + 'px' }">
+          <slot name="left-sidebar" />
+        </c-page-left-sidebar>
+
+        <c-page-flex-col>
+          <div v-if="!hideTitle">
+            <c-page-title :title="title" />
+          </div>
+
+          <c-page-auto-breadcrumbs v-if="showBreadcrumbs" />
+
+          <c-page-main-content>
+            <slot />
+          </c-page-main-content>
+        </c-page-flex-col>
+      </c-page-outer-wrapper>
+    </c-page-flex-col>
+
+    <c-page-right-sidebar :style="{ width: rightSidebarWidth + 'px' }">
+      <slot name="right-sidebar" />
+    </c-page-right-sidebar>
+  </c-page-blank>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String,
+    default: undefined,
+  },
+  showBreadcrumbs: Boolean,
+  hideTitle: Boolean,
+  leftSidebarWidth: {
+    type: [String, Number],
+    default: '60',
+  },
+  rightSidebarWidth: {
+    type: [String, Number],
+    default: '60',
+  },
+})
+</script>

package/src/layouts/layout-fragments/CPageAutoBreadcrumbs.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <c-auto-breadcrumbs class="px-6 h-12 flex content-center" />
+    <q-separator />
+  </div>
+</template>

package/src/layouts/layout-fragments/CPageBackButton.vue

@@ -0,0 +1,18 @@
+<template>
+  <c-tile-btn
+    v-if="parentRoute"
+    data-id="page-back-btn"
+    icon="inri-arrow"
+    class="rotate-180"
+    :tooltip-right="$t('inri.navigate_back')"
+    :to="{ name: parentRoute }"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const parentRoute = computed(() => route.meta?.parent)
+</script>

package/src/layouts/layout-fragments/CPageBlank.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="c-page">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'CFragmentPage',
+}
+</script>
+
+<style scoped>
+.c-page {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+</style>

package/src/layouts/layout-fragments/CPageFlexCol.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex-1 flex flex-col h-full overflow-hidden flex-nowrap">
+    <slot />
+  </div>
+</template>

package/src/layouts/layout-fragments/CPageLeftSidebar.vue

@@ -0,0 +1,5 @@
+<template>
+  <aside class="min-w-15 border-r overflow-y-overlay overflow-x-hidden h-full">
+    <slot />
+  </aside>
+</template>

package/src/layouts/layout-fragments/CPageMainContent.vue

@@ -0,0 +1,5 @@
+<template>
+  <section class="h-full overflow-y-overlay flex-1 flex flex-col no-wrap">
+    <slot />
+  </section>
+</template>

package/src/layouts/layout-fragments/CPageOuterWrapper.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex overflow-hidden h-full">
+    <slot />
+  </div>
+</template>

package/src/layouts/layout-fragments/CPageRightSidebar.vue

@@ -0,0 +1,5 @@
+<template>
+  <aside class="min-w-15 border-l overflow-y-overlay overflow-x-hidden h-full">
+    <slot />
+  </aside>
+</template>

package/src/layouts/layout-fragments/CPageTitle.vue

@@ -0,0 +1,34 @@
+<template>
+  <div
+    class="flex-1 flex h-15 items-center overflow-hidden px-6"
+    :class="noBorder || 'border-b'"
+  >
+    <h1
+      data-id="page-title"
+      class="truncate flex-1"
+    >
+      {{ title || routeTitle }}
+    </h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getRouteTitle } from '../../utils/routeUtils'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+defineProps({
+  title: {
+    type: String,
+    default: undefined,
+  },
+  noBorder: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const routeTitle = computed(() => getRouteTitle(route))
+</script>

package/src/plugins/dialog.ts

@@ -0,0 +1,45 @@
+import { Dialog } from 'quasar'
+import ConfirmDialog from '../components/internal-components/ConfirmDialog.vue'
+import { i18n } from './i18n'
+
+const t = i18n.global.t
+
+interface ConfirmDialogProps {
+  title?: string,
+  text: string,
+  confirmButtonText?: string,
+  cancelButtonText?: string,
+  confirmButtonColor?: string,
+}
+
+export default {
+  confirm: (props: ConfirmDialogProps) => {
+    return Dialog.create({
+      component: ConfirmDialog,
+      componentProps: {
+        ...props,
+      },
+    })
+  },
+  info: (props: ConfirmDialogProps) => {
+    return Dialog.create({
+      component: ConfirmDialog,
+      componentProps: {
+        ...props,
+        confirmButtonText: props.confirmButtonText || t('inri.common.ok'),
+        hideCancelButton: true,
+      },
+    })
+  },
+  delete: (props: ConfirmDialogProps) => {
+    return Dialog.create({
+      component: ConfirmDialog,
+      componentProps: {
+        ...props,
+        title: props.title || t('inri.dialog.confirm_delete_title'),
+        confirmButtonText: props.confirmButtonText || t('inri.common.delete'),
+        confirmButtonColor: 'negative',
+      },
+    })
+  },
+}

package/src/plugins/errors/ErrorFactories.ts

@@ -0,0 +1,59 @@
+import {
+  BaseError,
+  BaseErrorArguments,
+  GenericError,
+  AxiosError,
+  UnauthorizedError,
+  NotFoundError,
+  FolderNotFoundError,
+  ServiceUnavailableError,
+} from './Errors'
+import axios from 'axios'
+
+export class ErrorFactory {
+  static createHelpfulError (args: BaseErrorArguments): BaseError {
+    if (axios.isAxiosError(args.err)) {
+      return args.err.response
+        ? this.createHelpfulErrorResponse(args.err.response.status, args)
+        : new AxiosError(args)
+    }
+
+    return new GenericError(args)
+  }
+
+  static createHelpfulErrorResponse (errorCode: number, args: BaseErrorArguments): AxiosError {
+    switch (errorCode) {
+      case 401:
+        return new UnauthorizedError(args)
+      case 404:
+        return new NotFoundError(args)
+      case 408:
+      case 503:
+      case 504:
+        return new ServiceUnavailableError(args)
+      default:
+        return new AxiosError(args)
+    }
+  }
+}
+
+export class FolderErrorFactory extends ErrorFactory {
+  static createHelpfulError (args: BaseErrorArguments) {
+    return super.createHelpfulError(args)
+  }
+
+  static createHelpfulErrorResponse (errorCode: number, args: BaseErrorArguments): AxiosError {
+    switch (errorCode) {
+      case 401:
+        return new UnauthorizedError(args)
+      case 404:
+        return new FolderNotFoundError(args)
+      case 408:
+      case 503:
+      case 504:
+        return new ServiceUnavailableError(args)
+      default:
+        return new AxiosError(args)
+    }
+  }
+}

package/src/plugins/errors/Errors.ts

@@ -0,0 +1,156 @@
+import { i18n } from '../i18n'
+
+const $t = i18n.global.t
+const $te = i18n.global.te
+
+// ---------
+// Interfaces
+// ---------
+export interface BaseError {
+  title: string,
+  msg: string,
+  err: any,
+  isAxiosError: boolean,
+  status?: number
+}
+
+export interface BaseErrorArguments {
+  defaultTitle?: string,
+  defaultMsg?: string,
+  title?: string,
+  msg?: string,
+  err: any
+}
+
+// ---------
+// Implementations
+// ---------
+export class GenericError implements BaseError {
+  title: string
+  msg: string
+  err: any
+  isAxiosError = false
+
+  constructor (
+    public args: BaseErrorArguments,
+    private defaultTitle = $t('inri.error.error'),
+    private defaultMsg = $t('inri.error.error_occurred'),
+  ) {
+    this.defaultTitle = args?.defaultTitle || this.defaultTitle
+    this.defaultMsg = args?.defaultMsg || this.defaultMsg
+    this.title = args?.title ?? this.defaultTitle
+    this.msg = args?.msg ?? this.defaultMsg
+    this.err = args.err
+
+    this.processError()
+  }
+
+  private processError () {
+    let errorMessage
+
+    if (this.err.type === 'unhandledrejection') {
+      errorMessage = this.err.reason?.toString() || $t('inri.error.unknown_error')
+    } else {
+      errorMessage = this.err.msg || this.err.toString()
+    }
+
+    if (this.msg === this.defaultMsg) {
+      this.msg = errorMessage
+    }
+  }
+}
+
+export class AxiosError implements BaseError {
+  title: string
+  msg: string
+  err: any
+  isAxiosError = true
+  status = -1
+
+  constructor (
+    public args: BaseErrorArguments,
+    private defaultTitle = $t('inri.error.network_error'),
+    private defaultMsg = $t('inri.error.error_occurred'),
+  ) {
+    this.title = args?.title ?? this.defaultTitle
+    this.msg = args?.msg ?? this.defaultMsg
+    this.err = args.err
+
+    this.processError()
+  }
+
+  private processError () {
+    let errorMessage
+
+    if (this.err.response) {
+      // The request was made and the server responded with a status code
+      // that falls out of the range of 2xx
+
+      this.status = this.err.response.status
+      errorMessage = $te(`inri.error.${this.err.response.data?.errorDescription}`)
+        ? $t(`inri.error.${this.err.response.data?.errorDescription}`)
+        : null
+    } else if (this.err.request) {
+      // The request was made but no response was received
+      // `this.err.request` is an instance of XMLHttpRequest in the browser and an instance of
+      // http.ClientRequest in node.js
+
+      this.status = this.err.request.status
+      errorMessage = this.err.request.statusText
+    } else {
+      // Something happened in setting up the request that triggered an Error
+
+      errorMessage = this.err.message
+    }
+
+    if (errorMessage && this.msg === this.defaultMsg) {
+      this.msg = errorMessage
+    }
+  }
+}
+
+// ---------
+// Extensions
+// ---------
+export class UnauthorizedError extends AxiosError {
+  constructor (public args: BaseErrorArguments) {
+    super(
+      args,
+      $t('inri.error.unauthorized'),
+      $t('inri.error.session_expired'),
+    )
+  }
+}
+
+export class NotFoundError extends AxiosError {
+  constructor (public args: BaseErrorArguments) {
+    super(
+      args,
+      $t('inri.error.not_found'),
+      $t('inri.error.requested_asset_not_found'),
+    )
+  }
+}
+
+export class ServiceUnavailableError extends AxiosError {
+  constructor (public args: BaseErrorArguments) {
+    super(
+      args,
+      $t('inri.error.service_unavailable'),
+      $t('inri.error.service_unavailable_try_again'),
+    )
+  }
+}
+
+// ---------
+// Specific error subtypes
+// ---------
+export class FolderNotFoundError extends AxiosError {
+  constructor (public args: BaseErrorArguments) {
+    super(
+      args,
+      $t('inri.error.not_found'),
+      $t('inri.error.could_not_retrieve_assets'),
+    )
+  }
+}

package/src/plugins/errors/Exception.ts

@@ -0,0 +1,6 @@
+export class Exception {
+  constructor (public msg: string, public error) {
+    this.msg = msg
+    this.error = error
+  }
+}

package/src/plugins/errors/globalErrorHandler.ts

@@ -0,0 +1,21 @@
+import handleError from './handleError'
+
+// Handle errors outside of components
+window.addEventListener('error', (event) => {
+  handleError(
+    {
+      err: event,
+      caughtBy: 'window eventListener on error',
+    },
+  )
+})
+
+// Handle rejected promises outside components
+window.addEventListener('unhandledrejection', (event) => {
+  handleError(
+    {
+      err: event,
+      caughtBy: 'window eventListener on unhandledrejection',
+    },
+  )
+})

package/src/plugins/errors/handleError.ts

@@ -0,0 +1,34 @@
+import { Exception } from './Exception'
+import { ErrorFactory } from './ErrorFactories'
+import logger from './logger'
+import notify from '../notify'
+import dialog from '../dialog'
+
+export default function handleError (errInfoObj, vueInfoObj?) {
+  const err = errInfoObj.err
+
+  if (err instanceof Exception) {
+    const parsedError = ErrorFactory.createHelpfulError({
+      defaultMsg: err.msg,
+      err: err.error,
+    })
+
+    dialog.info({
+      title: parsedError.title,
+      text: parsedError.msg,
+    })
+
+    errInfoObj.handledBy = 'handleError'
+    logger.logTrace(errInfoObj, vueInfoObj)
+  } else if (err) {
+    const parsedError = ErrorFactory.createHelpfulError({ err })
+    notify.error(parsedError.msg)
+
+    if (err.type === 'unhandledrejection') {
+      errInfoObj.handledBy = '-'
+      logger.logTrace(errInfoObj, vueInfoObj)
+    } else {
+      logger.logException(err)
+    }
+  }
+}

package/src/plugins/errors/logger.ts

@@ -0,0 +1,16 @@
+export default {
+  init () {
+    // TODO: Init logger
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  logTrace (errInfoObj, vueInfoObj?) {
+    console.log('LOGGING TRACE')
+    console.log(errInfoObj)
+    // TODO: Log something
+  },
+  logException (error) {
+    console.log('LOGGING EXCEPTION')
+    console.log(error)
+    // TODO: Log something
+  },
+}

package/src/plugins/errors/vueErrorHandler.ts

@@ -0,0 +1,26 @@
+import handleError from './handleError'
+import { Exception } from './Exception'
+import { ComponentPublicInstance } from 'vue'
+
+export function VueErrorHandler (app) {
+  // Exception handling within Vue components
+  app.config.errorHandler = (err, vm: ComponentPublicInstance | null, info: string) => {
+    let exception
+
+    if (err instanceof Exception) {
+      exception = err
+    } else {
+      exception = new Exception(err.message, err)
+    }
+
+    handleError(
+      {
+        err: exception,
+        caughtBy: 'app.config.errorHandler',
+      },
+      {
+        info: info,
+      },
+    )
+  }
+}