@diasro/ucsd-its-frontend 0.0.2

package/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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

package/src/lib/templates/router/routes.ts

@@ -0,0 +1,49 @@
+import type {RouteRecordRaw} from "vue-router";
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/admin',
+    name: 'Admin',
+    component: () => import( '../pages/admin/AdminPage.vue'),
+    meta: { requiresAuth: true, roles: ['admin'] }
+  },
+  {
+    path: '/',
+    name: 'Home',
+    component: () => import( '../pages/Home.vue'),
+    meta: { /* pageHeader and pageSubHeader is optional */
+      pageHeader: 'Main Header'
+    },
+  },
+  {
+    path: '/dashboard',
+    name: 'Dashboard',
+    component: () => import( '../pages/DashBoard.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/customer/home',
+    name: 'CustomerHome',
+    component: () => import( '../pages/customer/CustomerHome.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/customer/search',
+    name: 'CustomerSearch',
+    component: () => import( '../pages/customer/CustomerSearch.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/customer/create',
+    name: 'CustomerCreate',
+    component: () => import( '../pages/customer/SimpleForm.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/invoices/home',
+    name: 'InvoiceHome',
+    component: () => import( '../pages/invoices/InvoiceHome.vue'),
+    meta: { requiresAuth: true }
+  }
+];
+export default routes;

package/src/lib/templates/stores/app.ts

@@ -0,0 +1,74 @@
+import {defineStore} from 'pinia'
+import {ref} from 'vue'
+import type {Audit, AuditDetail} from "ucsd-its-frontend";
+import {useUcsdAppUtils} from "ucsd-its-frontend";
+import axios from "axios";
+import {useItsAuthStore} from "ucsd-its-frontend";
+import type {LoginUser} from "ucsd-its-frontend";
+
+
+export const useAppStore = defineStore('app', () => {
+    const appUtils = useUcsdAppUtils();
+    const authStore = useItsAuthStore();
+    const invoiceCount = ref('10');
+
+    const initializeStore = () => {
+        console.log('Initializing store')
+    }
+
+    const fetchRoles = async () : Promise<{user:LoginUser,path:string}>  => {
+        try {
+           const response = await axios.get(import.meta.env.VITE_USER_ROLES_API_URL, {
+                headers: {
+                    Authorization: `Bearer ${authStore.decryptedToken()}`
+                }
+            })
+            const apiData = response.data[0];
+            const loginUser = {
+                id: apiData.PERSON_ID,
+                email: apiData.EMAIL_ADDRESS,
+                firstName: '',
+                lastName: '',
+                roles: apiData.OFC_ROLES.split(','),
+                departmentName: apiData.DEPARTMENT_NAME,
+                businessUnitName: apiData.BUSINESS_UNIT_NAME,
+                system18Id: apiData.SYSTEM18_ID
+            } as LoginUser
+            return new Promise((resolve) => {
+                resolve({user: loginUser,path:'/'})
+            })
+        } catch (error) {
+            throw error
+        }
+    }
+
+    const auditRecord = { // default audit record. Change this based on your domain
+        auditId: 0,
+        event: 'Update',
+        eventIcon: '',
+        nameSpace: 'edu.ucsd.its.fis.ciperb',
+        auditConstituent : {
+          constituentCode: 'Financial Information Systems',
+        },
+        details: [
+            {
+                detailKey: "0",
+                detailValue: '',
+            } as AuditDetail
+        ]
+    } as Audit;
+
+
+    const getAuditRecord = () : Audit => {
+        return <Audit>appUtils.deepClone(auditRecord)
+    }
+
+
+    return {
+        invoiceCount,
+        getAuditRecord,
+        initializeStore,
+        fetchRoles
+    }
+
+})

package/src/lib/templates/stores/index.ts

@@ -0,0 +1,9 @@
+// Utilities
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+
+
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate);
+export default pinia;
+

package/src/lib/templates/styles/README.md

@@ -0,0 +1,3 @@
+# Styles
+
+This directory is for configuring the styles of the application.

package/src/lib/templates/styles/settings.scss

@@ -0,0 +1,10 @@
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
+
+// https://vuetifyjs.com/features/sass-variables/`
+// @use 'vuetify/settings' with (
+//   $color-pack: false
+// );

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

@@ -0,0 +1,75 @@
+import {defineConfig, loadEnv} from 'vite'
+import vuetify, {transformAssetUrls} from "vite-plugin-vuetify";
+import dts from "vite-plugin-dts";
+import Vue from "@vitejs/plugin-vue";
+import Vuetify from "vite-plugin-vuetify";
+import path from 'path';
+
+export default defineConfig(({command, mode}) => {
+  const env = loadEnv(mode, process.cwd(), '')
+  const VITE_BASE_URL = env.VITE_BASE_URL || '';
+  console.log('Asset URL: ' + VITE_BASE_URL);
+  console.log('Mode:' + mode)
+  console.log('Command:' + command)
+  if (command === 'serve') {
+    return {  // dev specific config
+      server: {
+        proxy: {
+          '/api': {
+            target: 'http://localhost:8080',
+            changeOrigin: true,
+            rewrite: (path) => {
+              const newPath = path.replace(/^\//, '');
+              console.log("Rewritten API URL: ", newPath);
+              return newPath;
+            }
+          }
+        }
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, './src'),
+        },
+      },
+      plugins: [
+        Vue({
+          template: { transformAssetUrls: transformAssetUrls },
+        }),
+        Vuetify({
+          autoImport: true,
+          styles: {
+            configFile: 'src/styles/settings.scss',
+          },
+        }),
+      ],
+    }
+  } else {     // command === 'build'
+    return {
+      plugins: [ Vue({
+            isProduction: true,
+            template: { transformAssetUrls },
+            features: { propsDestructure : true}
+          }
+      ), vuetify({ styles: 'none' }),
+        dts({exclude: ['node_modules','dist','.storybook']})],
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, './src'),
+        },
+      },
+      build: {
+        assetsInlineLimit: 0, // Prevent inlining images as Base64
+        minify: true,
+        emptyOutDir: true,
+        target: 'esnext',
+        modulePreload: {polyfill: false},
+        rollupOptions: {
+          output: {
+            assetFileNames: 'assets/[name].[hash][extname]'
+          },
+        },
+      },
+      base: `${VITE_BASE_URL}`
+    }
+  }
+})