@diasro/ucsd-its-frontend 0.0.2

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@diasro/ucsd-its-frontend",
+  "private": false,
+  "version": "0.0.2",
+  "type": "module",
+  "author": "Robert Dias <rdias@ucsd.edu>",
+  "description": "A UCSD shared component library for Vue 3. For UCSD use only",
+  "main": "./dist/ucsd-its-frontend.umd.cjs",
+  "module": "./dist/ucsd-its-frontend.js",
+  "types": "dist/index.d.ts",
+  "style": "./dist/main.css",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "src/lib/public/assets/",
+    "src/lib/templates/"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ucsd-its-frontend.js",
+      "require": "./dist/ucsd-its-frontend.umd.cjs"
+    },
+    "./style.css": "./dist/main.css"
+  },
+  "scripts": {
+    "prebuild": "sh ./cleanJS.sh",
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build --mode nolib",
+    "build-lib": "vue-tsc -p tsconfig.lib.json && vite build --mode lib",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build --output-dir ./dist/vue"
+  },
+  "peerDependencies": {
+    "@primevue/themes": "^4.2.3",
+    "axios": "^1.7.9",
+    "core-js": "^3.37.1",
+    "pinia": "^2.1.7",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.2.3",
+    "sjcl": "^1.0.8",
+    "vue": "^3.5.13",
+    "vue-router": "^4.4.0",
+    "vue-toast-notification": "^3.1.3",
+    "vuetify": "^3.7.4"
+  },
+  "dependencies": {
+    "@primevue/themes": "^4.2.3",
+    "axios": "^1.7.9",
+    "core-js": "^3.37.1",
+    "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^4.1.3",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.2.3",
+    "sjcl": "^1.0.8",
+    "vite-plugin-static-copy": "^2.2.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.4.0",
+    "vue-toast-notification": "^3.1.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.10",
+    "@babel/types": "^7.24.7",
+    "@chromatic-com/storybook": "^3.2.2",
+    "@eslint/js": "^9.15.0",
+    "@fortawesome/fontawesome-free": "^6.2.1",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
+    "@mdi/font": "^7.1.96",
+    "@storybook/addon-docs": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/manager-api": "^8.5.1",
+    "@storybook/test": "^8.4.7",
+    "@storybook/theming": "^8.5.1",
+    "@storybook/vue3": "^8.4.7",
+    "@storybook/vue3-vite": "^8.4.7",
+    "@types/sjcl": "^1.0.34",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^8.57.1",
+    "eslint-plugin-vue": "^9.32.0",
+    "globals": "^15.12.0",
+    "roboto-fontface": "*",
+    "sass": "1.77.6",
+    "storybook": "^8.4.7",
+    "storybook-vue3-router": "^5.0.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.16.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^2.3.0",
+    "vite-plugin-vuetify": "^2.0.4",
+    "vue-tsc": "^2.2.0",
+    "vuetify": "^3.7.4"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

package/src/lib/templates/.env

@@ -0,0 +1,9 @@
+VITE_APP_VERSION=1.0.0
+VITE_APP_TITLE='UCSD Vue App'
+VITE_DEFAULT_HEADER='My Application Header'
+VITE_DEFAULT_SUB_HEADER='My Sub Header'
+VITE_CLIENT_ID='From API manager'
+VITE_CLIENT_SECRET='From API manager'
+VITE_AUTH_URL='https://api-qa.ucsd.edu/oauth2/authorize'
+VITE_ACCESS_TOKEN_URL='https://api-qa.ucsd.edu/oauth2/token'
+VITE_USER_ROLES_API_URL='https://api-qa.ucsd.edu:8243/OFC-PPM-Data-DEV5/v1/login-user'

package/src/lib/templates/App.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import {AppLayout} from "ucsd-its-frontend";
+import {useItsAppStore} from "ucsd-its-frontend";
+import {ProgressDialog} from "ucsd-its-frontend";
+const itsAppStore = useItsAppStore();
+</script>
+
+<template>
+  <v-app id="app" :theme="itsAppStore.currentTheme">
+    <ProgressDialog />
+    <AppLayout />
+  </v-app>
+</template>
+
+<style scoped>
+
+</style>

package/src/lib/templates/config/ucsd.config.ts

@@ -0,0 +1,105 @@
+import type {TileRecord} from "ucsd-its-frontend";
+import {useAppStore} from "../stores/app";
+import type {UcsdConfig} from "ucsd-its-frontend";
+/**
+ * Configuration object for the UCSD Application.
+ *
+ * Provides details related to the application layout, menus, themes, and default settings.
+ * Supports nested menu structures and dynamic behaviors.
+ *
+ * @type {object}
+ * @property {string} defaultLayout - The default layout type for the application. Possible values include 'Floating' or other layout types defined in the application.
+ * @property {string} defaultPageHdr - The default page header text for the application.
+ * @property {string} defaultSubHdr - The default sub-header text for the application.
+ * @property {string} defaultTheme - The default theme for the application, e.g., 'dark'.
+ * @property {TileRecord} rootMenu - The root-level menu configuration, containing metadata such as label, value, icon, etc.
+ * @property {Array.<TileRecord>} menus - A list of menu items and their hierarchies. Each menu item can have nested children, actions, links, icons, and dynamic behaviors.
+ */
+export const ucsdAppConfig : UcsdConfig = {
+    defaultLayout: 'Fixed',
+    defaultPageHdr: 'Main Title',
+    defaultSubHdr: 'Sub Title',
+    initCallback : () => useAppStore().initializeStore(),
+    loginCallback: () => useAppStore().fetchRoles(),
+    defaultTheme: 'dark',
+    rootMenu : {
+        label: 'Home',
+        key : '0-0',
+        icon : 'mdi-home',
+        disabled: false,
+        buttonColor: 'purple',
+        link: '/',
+        active: true,
+        children: []
+    } as TileRecord,
+    menus:  [
+        {
+            label: 'Customer',
+            key : '0-1',
+            icon : 'mdi-account',
+            disabled: false,
+            buttonColor: 'purple',
+            link: '/customer/home',
+            active: false,
+            children: [
+                {
+                    label: 'Search Customer',
+                    key : '0-1-0',
+                    icon : 'mdi-magnify',
+                    disabled: false,
+                    buttonColor: 'purple',
+                    link: '/customer/search',
+                    active: false,
+                },
+                {
+                    label: 'Manage Customer',
+                    key : '0-1-1',
+                    icon : 'mdi-folder-account-outline',
+                    disabled: false,
+                    buttonColor: 'purple',
+                    active: false,
+                    children : [
+                        {
+                            label: 'Create Customer',
+                            key : '0-1-1-0',
+                            icon : 'mdi-account-plus',
+                            disabled: false,
+                            buttonColor: 'purple',
+                            link: '/customer/create',
+                            active: false,
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Invoices',
+            key : '0-2',
+            icon : 'mdi-text-box',
+            disabled: false,
+            buttonColor: 'purple',
+            link: '/invoices/home',
+            badgeContent: () => {return useAppStore().invoiceCount},
+            active: false,
+        },
+        {
+            label: 'Admin',
+            key : '0-3',
+            icon : 'mdi-shield-account',
+            disabled: false,
+            buttonColor: 'purple',
+            link: '/admin',
+            active: false,
+        },
+        {
+            label: 'Help',
+            key : '0-4',
+            icon: 'mdi-help',
+            buttonColor: 'purple',
+            disabled: false,
+            link: 'https://blink.ucsd.edu/finance/billing/get-started/training/ciperb/index.html',
+            active: false,
+        }
+    ] as Array<TileRecord>
+}
+

package/src/lib/templates/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-toast-notification@3.1.3/dist/theme-bootstrap.min.css">
+      <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.7.6/dist/vuetify.min.css">
+      <style data-primevue-style-id="dock-variables">:root{--p-dock-background:rgba(255,255,255,0.1);--p-dock-border-color:rgba(255,255,255,0.2);--p-dock-padding:0.5rem;--p-dock-border-radius:var(--p-border-radius-xl);--p-dock-item-border-radius:var(--p-content-border-radius);--p-dock-item-padding:0.5rem;--p-dock-item-size:3rem;--p-dock-item-focus-ring-width:var(--p-focus-ring-width);--p-dock-item-focus-ring-style:var(--p-focus-ring-style);--p-dock-item-focus-ring-color:var(--p-focus-ring-color);--p-dock-item-focus-ring-offset:var(--p-focus-ring-offset);--p-dock-item-focus-ring-shadow:var(--p-focus-ring-shadow);}</style>
+    <title>I am client</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/src/lib/templates/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import {registerPlugins} from "./plugins";
+const app = createApp(App)
+registerPlugins(app)
+app.mount('#app')

package/src/lib/templates/pages/DashBoard.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-row justify="center" class="ma-2">
+    <v-col cols="auto">
+      <v-card class="pa-2"
+              variant="outlined"
+              flat
+      >
+        <v-card-title class="text-center">Home Page</v-card-title>
+        <v-card-text> Remove this welcome card and add your own content.</v-card-text>
+      </v-card>
+    </v-col>
+    <v-col cols="auto">
+      <v-card class="pa-2"
+              variant="elevated"
+              flat
+      >
+        <v-card-title class="text-center">Dashboard</v-card-title>
+        <v-card-text> Remove this welcome card and add your own content.</v-card-text>
+        <v-card-actions><v-btn variant="elevated" color="info">Submit</v-btn></v-card-actions>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<style scoped>
+
+</style>
+<script setup lang="ts">
+</script>

package/src/lib/templates/pages/Home.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-row justify="center" class="ma-2">
+    <v-col cols="auto">
+      <v-card class="pa-2"
+              variant="elevated"
+              flat
+      >
+        <v-card-title class="text-center">Home Page</v-card-title>
+        <v-card-text> Remove this welcome card and add your own content.</v-card-text>
+        <v-card-actions><v-btn variant="elevated" color="info">Submit</v-btn></v-card-actions>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<style scoped>
+
+</style>
+<script setup lang="ts">
+</script>

package/src/lib/templates/pages/admin/AdminPage.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-row justify="center" class="ma-2">
+    <v-col cols="auto">
+      <v-card class="pa-2"
+              variant="outlined"
+              flat
+      >
+        <v-card-title class="text-center">Admin page</v-card-title>
+        <v-card-text>Protected by role</v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<style scoped>
+
+</style>
+<script setup lang="ts">
+</script>

package/src/lib/templates/pages/customer/CustomerHome.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-row justify="center" class="ma-2">
+    <v-col cols="auto">
+      <v-card class="pa-2"
+              variant="outlined"
+              flat
+      >
+        <v-card-title class="text-center">Customer Home Page</v-card-title>
+        <v-card-text> Remove this welcome card and add your own content.</v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<style scoped>
+
+</style>
+<script setup lang="ts">
+</script>

package/src/lib/templates/pages/customer/CustomerSearch.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-container fluid>
+  <v-row justify="center" class="ma-2">
+    <v-col cols="auto">
+      <v-card class="pa-2"
+              variant="outlined"
+              flat
+      >
+        <v-card-title class="text-center">Customer Search Page</v-card-title>
+        <v-card-text> Remove this welcome card and add your own content.</v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+  </v-container>
+</template>
+
+<style scoped>
+
+</style>
+<script setup lang="ts">
+</script>