@inriver/inri 1.0.0

package/src/components/CTreeNode.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="flex flex-1 no-wrap items-center"
+    :title="text"
+  >
+    <span class="truncate flex-1">{{ text }}</span>
+    <span
+      v-if="showCount"
+      class="text-body2 font-bold bg-white rounded-full border border-green ml-1 px-2 h-6 min-w-6 flex items-center justify-center"
+    >
+      {{ count }}
+    </span>
+
+    <!-- Used for context menus -->
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: undefined,
+  },
+  count: {
+    type: [String, Number],
+    default: undefined,
+  },
+  hideZeroCount: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// If we want to hide the chip when the count is 0 then hide if null/undefined/0. Else only hide if null/undefined.
+const showCount = computed(() => props.hideZeroCount ? props.count : (props.count !== null && props.count !== undefined))
+</script>

package/src/components/cards/CBannerCard.vue

@@ -0,0 +1,103 @@
+<template>
+  <component
+    :is="to ? 'router-link' : 'div'"
+    :to="to"
+    class="block p-5 h-[220px] relative group cursor-pointer no-underline"
+    :class="[`bg-${color}`, specialModifierClasses.card]"
+  >
+    <c-slide-effect :parent-color="color" />
+
+    <c-context-menu
+      class="absolute right-2 top-3"
+      :class="specialModifierClasses.contextMenu"
+    >
+      <c-menu-item>
+        menu item
+      </c-menu-item>
+    </c-context-menu>
+
+    <div
+      class="relative"
+      :class="specialModifierClasses.text"
+    >
+      <div
+        class="mt-16 text-grey-darker"
+        :class="specialModifierClasses.text"
+      >
+        {{ title1 }}
+      </div>
+      <div class="text-h1 leading-none mb-4">
+        {{ title2 }}
+      </div>
+      <div class="line-clamp-2">
+        {{ description }}
+      </div>
+    </div>
+  </component>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { getRelatedColors } from '../../utils/colorUtils'
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'secondary',
+  },
+  title1: {
+    type: String,
+    default: '',
+  },
+  title2: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  to: {
+    type: [String, Object],
+    default: undefined,
+  },
+})
+
+const specialModifierClasses = computed(() => {
+  const color = props.color
+  const relatedColors = getRelatedColors(color)
+
+  if (color === 'primary' || color === 'secondary' || color === 'accent') {
+    return {
+      card: '',
+      contextMenu: 'text-' + relatedColors.onAltColor,
+      text: 'text-' + relatedColors.onColor,
+    }
+  } else if (color === 'surface') {
+    return {
+      card: 'border border-surface-border',
+      contextMenu: 'text-' + relatedColors.onColor,
+      text: 'text-' + relatedColors.onColor,
+    }
+  } else if (color === 'white') {
+    return {
+      card: 'border border-grey',
+      contextMenu: 'text-grey-darkest',
+      text: 'text-grey-darkest',
+    }
+  } else if (color === 'black') {
+    return {
+      card: '',
+      contextMenu: 'text-white',
+      text: 'text-white',
+    }
+  }
+
+  // Default for the rest
+  return {
+    card: '',
+    contextMenu: 'text-white',
+    text: 'text-grey-darkest',
+  }
+})
+</script>

package/src/components/cards/CSmallCard.vue

@@ -0,0 +1,149 @@
+<template>
+  <div
+    ref="card"
+    class="c-small-card"
+    @mouseover="isHoveredOver = true"
+    @mouseleave="isHoveredOver = false"
+    @click="$emit('click', $event)"
+  >
+    <div
+      class="content flex items-center justify-center"
+      :class="[
+        `bg-${backgroundColor}`,
+        selected ? 'is-selected' : ''
+      ]"
+    >
+      <img
+        v-if="imageSrc"
+        :src="imageSrc"
+        class="image"
+      >
+
+      <q-icon
+        v-else
+        :name="icon"
+        :style="`font-size: ${iconSize}px`"
+        :class="iconClass"
+      />
+
+      <transition name="fade">
+        <c-context-menu
+          v-if="$slots['context-menu-items']"
+          v-show="isHoveredOver"
+          class="absolute right-0 top-0"
+          @click.stop
+        >
+          <slot name="context-menu-items" />
+        </c-context-menu>
+      </transition>
+    </div>
+
+    <div
+      v-if="text"
+      class="text mt-8px line-clamp-2 break-words"
+      :class="{ 'font-semibold': selected }"
+      :title="text"
+    >
+      {{ text }}
+    </div>
+
+    <div
+      v-if="description"
+      class="description"
+    >
+      {{ description }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useDoubleClickListener } from '../../composables/useDoubleClickListener'
+
+const emit = defineEmits(['click', 'double-click'])
+const card = ref<HTMLDivElement>()
+
+const isHoveredOver = ref(false)
+
+useDoubleClickListener(card, () => {
+  emit('double-click')
+})
+
+defineProps({
+  imageSrc: {
+    type: String,
+    default: undefined,
+  },
+  text: {
+    type: String,
+    default: undefined,
+  },
+  description: {
+    type: String,
+    default: undefined,
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+  icon: {
+    type: String,
+    default: undefined,
+  },
+  iconClass: {
+    type: String,
+    default: undefined,
+  },
+  iconSize: {
+    type: [String, Number],
+    default: 18,
+  },
+  backgroundColor: {
+    type: String,
+    default: 'grey-lighter',
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.c-small-card {
+  width: var(--small-card-image-size);
+  min-height: 100px;
+
+  &:hover {
+    cursor: pointer;
+
+    .content {
+      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .content {
+    position: relative;
+    width: var(--small-card-image-size);
+    height: var(--small-card-image-size);
+    transition: box-shadow 0.2s ease-in-out;
+  }
+
+  .image {
+    width: var(--small-card-image-size);
+    height: var(--small-card-image-size);
+    object-fit: cover;
+  }
+}
+
+.is-selected {
+  outline: 2px solid var(--q-accent);
+  outline-offset: -2px;
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+
+  &::before {
+    content: "";
+    width: 100%;
+    height: 100%;
+    background: var(--q-accent);
+    opacity: 0.1;
+    position: absolute;
+  }
+}
+</style>

package/src/components/internal-components/ConfirmDialog.vue

@@ -0,0 +1,78 @@
+<template>
+  <q-dialog
+    ref="dialogRef"
+    class="c-dialog"
+    @hide="onDialogHide"
+  >
+    <q-card
+      data-id="confirm-dialog"
+      class="dialog-card"
+    >
+      <q-card-section class="px-5 pt-6 pb-4">
+        <h3
+          v-if="title"
+          data-id="confirm-dialog-title"
+        >
+          {{ title }}
+        </h3>
+        <div
+          data-id="confirm-dialog-description"
+          class="mt-2px"
+        >
+          {{ text }}
+        </div>
+      </q-card-section>
+
+      <div class="dialog-card-action-buttons px-5 pt-2 pb-10">
+        <c-btn
+          data-id="confirm-dialog-ok-button"
+          :label="confirmButtonText || $t('inri.common.confirm')"
+          :color="confirmButtonColor"
+          @click="onDialogOK"
+        />
+        <c-btn
+          v-if="!hideCancelButton"
+          data-id="confirm-dialog-cancel-button"
+          :label="cancelButtonText || $t('inri.common.cancel')"
+          color="surface"
+          @click="onDialogCancel"
+        />
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+// For further documentation regarding custom programmatic dialogs:
+// https://quasar.dev/quasar-plugins/dialog
+
+import { useDialogPluginComponent } from 'quasar'
+
+defineProps({
+  title: {
+    type: String,
+    default: undefined,
+  },
+  text: {
+    type: String,
+    default: undefined,
+  },
+  confirmButtonText: {
+    type: String,
+    default: undefined,
+  },
+  cancelButtonText: {
+    type: String,
+    default: undefined,
+  },
+  confirmButtonColor: {
+    type: String,
+    default: 'primary',
+  },
+  hideCancelButton: Boolean,
+})
+
+defineEmits([...useDialogPluginComponent.emits])
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
+</script>

package/src/composables/useDialog.ts

@@ -0,0 +1,47 @@
+import { getCurrentInstance, reactive, toRefs } from 'vue'
+import notify from '../plugins/notify'
+import { useDirtyCheck } from './useDirtyCheck'
+
+export function useDialog (data?: object, immediate = true) {
+  const { isDirty, freezeCleanData } = useDirtyCheck(data, immediate)
+  const { emit } = getCurrentInstance() as any
+
+  const state = reactive({
+    isLoading: false,
+    showDialog: true,
+  })
+
+  // Functions
+  function closeAfterTimeout () {
+    state.showDialog = false
+
+    // Let the q-dialog close transition finish before we tell our parent to close.
+    // This way we can use v-if on our parent to destroy the component but still have graceful transitions.
+    setTimeout(() => {
+      emit('update:show', false)
+    }, 500)
+  }
+
+  function cancel () {
+    closeAfterTimeout()
+    emit('after-cancel')
+  }
+
+  function confirmSuccess (msg: string | null | undefined, returnValue: any | undefined = undefined) {
+    closeAfterTimeout()
+    state.isLoading = false
+    emit('after-confirm', returnValue)
+
+    if (msg) {
+      notify.success(msg)
+    }
+  }
+
+  return {
+    ...toRefs(state),
+    cancel,
+    confirmSuccess,
+    isDirty,
+    freezeCleanData,
+  }
+}

package/src/composables/useDirtyCheck.ts

@@ -0,0 +1,25 @@
+import { computed, reactive, ref } from 'vue'
+
+export function useDirtyCheck (data?: object, immediate = true) {
+  const isEnabled = ref(immediate)
+  const reactiveData = reactive(data || {})
+  const initialData = ref(JSON.stringify(reactiveData))
+
+  const isDirty = computed(() => {
+    if (!data || !isEnabled.value) {
+      return false
+    }
+
+    return JSON.stringify(reactiveData) !== initialData.value
+  })
+
+  function freezeCleanData () {
+    isEnabled.value = true
+    initialData.value = JSON.stringify(reactiveData)
+  }
+
+  return {
+    isDirty,
+    freezeCleanData,
+  }
+}

package/src/composables/useDoubleClickListener.ts

@@ -0,0 +1,28 @@
+import { Ref } from 'vue'
+import { useEventListener } from '@vueuse/core'
+
+export function useDoubleClickListener (
+  target: Ref<HTMLElement | undefined> | HTMLElement,
+  callback: (e: Event) => any,
+) {
+  let clickCounter = 0
+  let clickTimer
+
+  function clickHandler (e) {
+    clickCounter++
+
+    if (clickCounter === 1) {
+      clickTimer = window.setTimeout(function () {
+        clickCounter = 0
+      }, 500)
+    }
+
+    if (clickCounter > 1) {
+      clearTimeout(clickTimer)
+      clickCounter = 0
+      callback(e)
+    }
+  }
+
+  useEventListener(target, 'click', clickHandler)
+}

package/src/composables/useSelectable.ts

@@ -0,0 +1,62 @@
+import { getCurrentInstance, computed, ref } from 'vue'
+
+export default function useSelectable (allItems, selectedItems) {
+  const { emit } = getCurrentInstance() as any
+
+  // This will convert a "reactive" array to "ref". "ref"s will still be a ref.
+  // This lets us use a reactive -or- ref array as a parameter.
+  const _allItems = ref(allItems)
+
+  const allSelectedStatus = computed(() => {
+    if (!selectedItems.value || !selectedItems.value.length) {
+      return false
+    } else if (_allItems.value.length === selectedItems.value.length) {
+      return true
+    }
+
+    return undefined
+  })
+
+  function toggleItem (evt, item = undefined) {
+    // If someone passes just one parameter we assume it's the item that we want to toggle instead of the event.
+    // The evt parameter is not actually used here, but is automatically passed along on a Q-Table row click.
+    const _item = item || evt
+    const existingItemIndex = selectedItems.value.findIndex(i => JSON.stringify(i) === JSON.stringify(_item))
+
+    if (existingItemIndex >= 0) {
+      // Remove item
+      selectedItems.value.splice(existingItemIndex, 1)
+    } else {
+      // Add item
+      selectedItems.value.push(_item)
+    }
+  }
+
+  function toggleAllItems () {
+    if (allSelectedStatus.value === false) {
+      selectedItems.value = [..._allItems.value]
+    } else {
+      selectedItems.value = []
+    }
+  }
+
+  function toggleAllItemsWithEmit (evt, emitString = 'update:modelValue') {
+    if (allSelectedStatus.value === false) {
+      emit(emitString, [..._allItems.value])
+    } else {
+      emit(emitString, [])
+    }
+  }
+
+  function isSelected (item) {
+    return selectedItems.value.includes(item)
+  }
+
+  return {
+    allSelectedStatus,
+    toggleItem,
+    toggleAllItems,
+    toggleAllItemsWithEmit,
+    isSelected,
+  }
+}

package/src/composables/useTruncateChips.ts

@@ -0,0 +1,46 @@
+import { nextTick } from 'vue'
+
+export function useTruncateChips () {
+  const chipsColumnHeaderSelector = '.js-chips-column-header'
+  const chipsWrapperSelector = '.truncated-chips'
+  const chipSelector = '.q-chip'
+  const truncatedChipClass = 'truncated-chip'
+  const arrowBtnOffset = 32
+
+  function onResize () {
+    truncateChips()
+  }
+
+  function truncateChips () {
+    nextTick(() => {
+      const chipsHeaderRect = document.querySelector(chipsColumnHeaderSelector)?.getBoundingClientRect() as DOMRect
+      const chipsWrappers = document.querySelectorAll(chipsWrapperSelector)
+
+      // There is one chips wrapper for every row in a table
+      chipsWrappers.forEach(wrapper => {
+        const renderedChips = Array.from(wrapper.querySelectorAll(chipSelector))
+
+        // Reset hidden
+        renderedChips.forEach(chip => chip.classList.remove(truncatedChipClass))
+
+        // Check coordinates
+        renderedChips.every((chip) => {
+          const chipRect = chip.getBoundingClientRect()
+
+          // As soon as you find a chip that goes outside the boundaries then hide it (and all the following chips in the list)
+          if (chipRect.right > (chipsHeaderRect.right - arrowBtnOffset)) {
+            chip.classList.add(truncatedChipClass)
+            return false
+          }
+
+          return true
+        })
+      })
+    })
+  }
+
+  return {
+    onResize,
+    truncateChips,
+  }
+}

package/src/i18n/de/index.ts

@@ -0,0 +1,17 @@
+export default {
+  inri: {
+    common: {
+      ok: 'OK',
+      save: 'Speichern',
+      cancel: 'Abbrechen',
+      confirm: 'Bestätigen',
+      yes: 'Ja',
+    },
+    languages: {
+      en: 'englisch',
+      de: 'deutsch',
+      fr: 'französisch',
+      es: 'spanisch',
+    },
+  },
+}

package/src/i18n/en/index.ts

@@ -0,0 +1,84 @@
+export default {
+  inri: {
+    validation: {
+      required: 'This field is required',
+      maxLength: 'This field can be no longer than {parsedLength} characters long',
+      minLength: 'This field must be at least {parsedLength} characters long',
+      email: 'This field must be a valid email address',
+      url: 'This field must be a valid URL',
+      https: 'This field must be a valid URL using https',
+      extension: 'Valid file extensions: {extensions}',
+      contains: 'This field is not valid. Must contain {match}',
+      notContains: 'This field is not valid. Must not contain {match}',
+      notBeginsWith: 'This field is not valid. Must not begin with {match}',
+      notEndsWith: 'This field is not valid. Must not end with {match}',
+      maxFileSize: 'Files can be no larger than {parsedFileSize}',
+      maxImageSize: 'Images can be no larger than {size}',
+      fileSizeTooBig: 'file size too big',
+      fileTypeInvalid: 'file type invalid',
+    },
+    error: {
+      unauthorized: 'Unauthorized',
+      session_expired: 'Your session has expired and you will be returned to login.',
+      internal_server_error: 'Internal server error',
+      unknown_error: 'Unknown error',
+      undefined_error: 'Undefined error',
+      file_error: 'Could not load file',
+      error: 'Error',
+      network_error: 'Network error',
+      error_occurred: 'An error occurred',
+      service_unavailable: 'Service unavailable',
+      service_unavailable_try_again: 'Request could not be handled. Please try again in a minute',
+      not_found: 'Not found',
+      requested_asset_not_found: 'The requested asset does not exist',
+      folder_does_not_exist: 'Folder does not exist',
+      could_not_retrieve_assets: 'Folder does not exist. Could not retrieve assets',
+      error_code: 'error code: {code}',
+      page_does_not_exist: 'Sorry! This page does not exist!',
+    },
+    common: {
+      ok: 'ok',
+      save: 'save',
+      cancel: 'cancel',
+      confirm: 'confirm',
+      yes: 'yes',
+      delete: 'delete',
+      close: 'close',
+      download: 'download',
+      more: 'more',
+    },
+    dialog: {
+      unsaved_changes_title: 'unsaved changes',
+      unsaved_changes_message: 'changes are not saved, do you want to continue?',
+      confirm_tooltip_invalid_fields: 'all required fields needs to have a valid value',
+      confirm_delete_title: 'are you sure you want to delete?',
+    },
+    toggle_actions: {
+      sidebar: 'toggle sidebar',
+      grid_view: 'grid view',
+      table_view: 'table view',
+    },
+    select: {
+      select_all: 'select all',
+      no_results: 'no results',
+    },
+    navigate_back: 'go back',
+    languages: {
+      en: 'english',
+      de: 'german',
+      fr: 'french',
+      es: 'spanish',
+    },
+    dropzone: {
+      hint: 'drop files to instantly add them to {0}',
+      hint_general: 'drop files to instantly add them here',
+      invalid_drop_items: 'Invalid item(s) dragged into the dropzone',
+    },
+    toggle_drawer: 'toggle drawer',
+    authentication: {
+      session_expired: 'your session has expired',
+      session_inactive: 'you have been inactive for too long, or you have been logged out of the main inriver portal.',
+      log_in: 'log in again',
+    },
+  },
+}

package/src/i18n/es/index.ts

@@ -0,0 +1,7 @@
+export default {
+  inri: {
+    common: {
+      yes: 'sí',
+    },
+  },
+}

package/src/i18n/fr/index.ts

@@ -0,0 +1,7 @@
+export default {
+  inri: {
+    common: {
+      yes: 'Oui',
+    },
+  },
+}