@diasro/ucsd-its-frontend 0.0.2

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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>

package/dist/templates/pages/customer/SimpleForm.vue

@@ -0,0 +1,299 @@
+<script setup lang="ts">
+import {onMounted, ref, useTemplateRef} from "vue";
+import {useAuditLog} from "ucsd-its-frontend";
+import {useAppStore} from "../../stores/app";
+import {Audit} from "ucsd-its-frontend";
+import {useToast} from 'vue-toast-notification';
+import {useTheme} from "vuetify";
+import {useUcsdAppUtils} from "ucsd-its-frontend";
+import 'vue-toast-notification/dist/theme-bootstrap.css';
+import {ChangeHistory} from "ucsd-its-frontend";
+import {useItsAppStore} from "ucsd-its-frontend";
+import {AuditTimeLine} from "ucsd-its-frontend";
+import {useItsAuthStore} from "ucsd-its-frontend";
+
+const auditLog = useAuditLog()
+const appStore = useAppStore()
+const $toast = useToast()
+const theme = useTheme()
+const appUtils = useUcsdAppUtils()
+const itsAppStore = useItsAppStore()
+const itsAuthStore = useItsAuthStore()
+
+interface SimpleFormData {
+  id: number,
+  name: string,
+  item: string | null,
+  paid: boolean,
+}
+
+let auditTimeLine = [] as AuditTimeLine[]
+const loadingTimeLine = ref(true)
+const formDataList = ref([] as SimpleFormData[]);
+const formData = ref({} as SimpleFormData)
+const items = ref(['Item 1', 'Item 2', 'Item 3', 'Item 4'])
+const loading = ref(false)
+const formRef = useTemplateRef('form')
+const nameRules = [
+  (v: any) => !!v || 'Name is required',
+  (v: any) => (v && v.length <= 10) || 'Name must be 10 characters or less',
+]
+
+const showAuditTimeline = () => {
+  loadingTimeLine.value = true;
+  let detailKey = 'simple-form-' + formData.value.id;
+  const audits = itsAppStore.getAuditQueue(detailKey);
+  auditTimeLine = auditLog.mapAuditToTimeLine(audits);
+  loadingTimeLine.value = false;
+}
+
+const userAudit = () => {
+  loadingTimeLine.value = true;
+  const audits = itsAppStore.getAuditQueue(undefined, itsAuthStore.getUserEmail());
+  auditTimeLine = auditLog.mapAuditToTimeLine(audits);
+  loadingTimeLine.value = false;
+}
+
+onMounted(() => {
+  //You can await here if data is loaded via API
+  itsAppStore.resetAuditQueue()
+  auditLog.trackChanges(formData.value, false)
+})
+
+const updateExample = () => {
+  const auditRecord: Audit = appStore.getAuditRecord(); //Audit application source identifier
+  auditRecord.event = 'Existing Record Updated';
+  auditRecord.eventIcon = 'mdi-account-edit-outline'; //Change the icon based on description
+  auditLog.commitChanges(formData.value, auditRecord, 'simple-form-' + formData.value.id, 'update', []);
+}
+
+const newExample = () => {
+  const auditRecord: Audit = appStore.getAuditRecord(); //Audit application source identifier
+  auditRecord.event = 'New Record created';
+  auditRecord.eventIcon = 'mdi-account-plus-outline'; //Change the icon based on description
+  auditRecord.eventColor = 'success'
+  auditLog.commitChanges(formData.value, auditRecord, 'simple-form-' + formData.value.id, 'new', ['id', 'name']);
+}
+
+const deleteExample = () => {
+  const auditRecord: Audit = appStore.getAuditRecord(); //Audit application source identifier
+  auditRecord.event = 'Record deleted';
+  auditRecord.eventIcon = 'mdi-account-minus-outline'; //Change the icon based on description
+  auditRecord.eventColor = 'error'
+  auditLog.commitChanges(formData.value, auditRecord, 'simple-form-' + formData.value.id, 'delete', []);
+}
+
+const addRecord = () => {
+  const data = appUtils.deepClone(formData.value) as SimpleFormData;
+  data.id = formDataList.value.length + 1;
+  data.paid = !(data.paid === null || !data.paid);
+  formData.value.id = data.id;
+  formDataList.value.push(data)
+  newExample();
+}
+
+const updateRecord = () => {
+  const data = appUtils.deepClone(formData.value) as SimpleFormData;
+  formDataList.value.forEach((item, index) => {
+    if (item.id === data.id) {
+      formDataList.value[index] = data;
+    }
+  })
+  updateExample();
+}
+
+const deleteRecord = () => {
+  formDataList.value = formDataList.value.filter(item => item.id !== formData.value.id)
+  deleteExample();
+  formData.value = {
+    id: 0,
+    name: '',
+    item: null,
+    paid: false,
+  }
+  resetValidation();
+  $toast.success('Record deleted successfully')
+}
+
+
+const validate = async () => {
+  // @ts-ignore
+  const {valid} = await formRef.value?.validate()
+  if (valid) {
+    loading.value = true;
+    await appStore.simulateAxiosCall({message: 'Success'}, 1000, false).then(response => {
+      if (formData.value.id > 0) {
+        updateRecord()
+      } else {
+        addRecord()
+      }
+      $toast.success('Data saved successfully', {position: 'top-right'})
+    }).catch(error => {
+      $toast.error('Failed to save data ' + error.message, {position: 'top-right'})
+    })
+    loading.value = false;
+  }
+}
+
+const reset = () => {
+  // @ts-ignore
+  formRef.value?.reset()
+  formData.value = {
+    id: 0,
+    name: '',
+    item: null,
+    paid: false,
+  }
+}
+
+
+const resetValidation = () => {
+  // @ts-ignore
+  formRef.value?.resetValidation()
+}
+
+
+</script>
+
+<template>
+  <v-container>
+    <v-row justify="center" class="ma-2">
+      <v-col cols="auto">
+        <v-card class="rounded-xl pa-4"
+                :class="`bg-grey-${theme.current.value.dark ? 'darken' : 'lighten'}-4`">
+          <v-card-title>
+            <v-row>
+              <v-col cols="2">
+                <v-btn class="text-none" variant="plain" size="large" prepend-icon="mdi-history"
+                       @click.stop="showAuditTimeline">
+                  <change-history :loading-history="loadingTimeLine" :audit-time-line="auditTimeLine"/>
+                </v-btn>
+              </v-col>
+              <v-col cols="8"><h3 class="text-center">Simple Form</h3></v-col>
+              <v-col cols="2" class="text-right text-body-1">
+                ID: {{ formData.id }}
+              </v-col>
+            </v-row>
+          </v-card-title>
+          <v-card-item>
+            <v-form ref="form">
+              <v-text-field
+                  v-model="formData.name"
+                  :counter="10"
+                  label="Name"
+                  required
+                  :rules="nameRules"
+              />
+
+              <v-select
+                  v-model="formData.item"
+                  :items="items"
+                  label="Item"
+                  required
+                  :rules="[v => !!v || 'Item is required']"
+              />
+
+              <v-checkbox
+                  hide-details
+                  v-model="formData.paid"
+                  label="Paid?"
+              />
+
+              <v-progress-linear
+                  v-if="loading"
+                  class="mb-4"
+                  color="light-green-darken-4"
+                  height="10"
+                  indeterminate
+                  striped
+              ></v-progress-linear>
+
+              <div class="d-flex flex-column mx-auto" style="width: 70%">
+                <v-btn
+                    block
+                    class="mt-4"
+                    color="success"
+                    @click="validate"
+                >
+                  Validate and Save
+                </v-btn>
+
+                <v-btn
+                    block
+                    class="mt-4"
+                    color="error"
+                    @click="reset"
+                >
+                  Reset Form
+                </v-btn>
+
+                <v-btn
+                    block
+                    class="mt-4"
+                    color="success"
+                    @click="reset"
+                >
+                  New Record
+                </v-btn>
+
+                <v-btn v-if="formData.id > 0"
+                       block
+                       class="mt-4"
+                       color="secondary"
+                       @click="deleteRecord"
+                >
+                  Delete
+                </v-btn>
+                <v-btn class="mt-4" color="secondary" prepend-icon="mdi-history" @click.stop="userAudit" block> User
+                  Audit
+                  <change-history :loading-history="loadingTimeLine" :audit-time-line="auditTimeLine"/>
+                </v-btn>
+              </div>
+
+            </v-form>
+          </v-card-item>
+        </v-card>
+      </v-col>
+      <v-col cols="auto">
+        <v-table
+            class="mt-10"
+            height="300px"
+            fixed-header
+        >
+          <thead>
+          <tr>
+            <th class="text-left">
+              ID
+            </th>
+            <th class="text-left">
+              Name
+            </th>
+            <th class="text-left">
+              Item
+            </th>
+            <th class="text-left">
+              Paid
+            </th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr
+              v-for="item in formDataList"
+              :key="item.id"
+              class="cursor-pointer"
+              @click="formData = item"
+          >
+            <td>{{ item.id }}</td>
+            <td>{{ item.name }}</td>
+            <td>{{ item.item }}</td>
+            <td>{{ item.paid }}</td>
+          </tr>
+          </tbody>
+        </v-table>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+<style scoped>
+
+</style>

package/dist/templates/pages/invoices/InvoiceHome.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">Invoice 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/dist/templates/plugins/index.ts

@@ -0,0 +1,43 @@
+import {Button, Tree} from 'primevue'
+import vuetify from './vuetify'
+import pinia from '../stores'
+import router from '../router'
+import PrimeVue from 'primevue/config'
+import 'primeicons/primeicons.css'
+import Aura from '@primevue/themes/aura'
+import 'ucsd-its-frontend/style.css'
+
+import type {App} from 'vue'
+import {UcsdPlugin} from "ucsd-its-frontend";
+import {ucsdAppConfig} from "../config/ucsd.config";
+
+import {library} from '@fortawesome/fontawesome-svg-core'
+import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
+import {fas} from '@fortawesome/free-solid-svg-icons'
+import {far} from '@fortawesome/free-regular-svg-icons'
+import ToastPlugin from 'vue-toast-notification';
+
+import 'vue-toast-notification/dist/theme-bootstrap.css';
+
+
+export function registerPlugins(app: App) {
+    library.add(fas) // Include needed solid icons
+    library.add(far) // Include needed regular icons
+    app
+        .use(vuetify)
+        .use(router)
+        .use(pinia)
+        .use(PrimeVue, {
+            theme: {
+                preset: Aura,
+                options: {
+                    darkModeSelector: '.my-app-dark',
+                },
+            },
+        })
+        .use(ToastPlugin)
+        .use(UcsdPlugin, {ucsdAppConfig})
+        .component('Button', Button)
+        .component('Tree', Tree)
+        .component('font-awesome-icon', FontAwesomeIcon)
+}

package/dist/templates/plugins/vuetify.ts

@@ -0,0 +1,9 @@
+import '@mdi/font/css/materialdesignicons.css'
+import '@fortawesome/fontawesome-free/css/all.css'
+import 'vuetify/styles/main.css'
+import { createVuetify } from 'vuetify'
+export default createVuetify({
+    theme: {
+        defaultTheme: 'dark',
+    }
+})

package/dist/templates/router/index.ts

@@ -0,0 +1,17 @@
+import routes from "./routes";
+import {createRouter, createWebHistory} from "vue-router";
+import {CommonRoutes, registerGlobalGuards} from "ucsd-its-frontend";
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+})
+
+//Client app begin
+CommonRoutes.forEach((route) => {
+  router.addRoute(route);
+});
+registerGlobalGuards(router);
+//Client app end
+
+export default router