Finishes Audit Log Interface

frontend/assets/css/overrides.css

@@ -1,21 +1,21 @@
 .h-0 {
-    height: 0;
+  height: 0;
 }
 
 .text-success {
-    color: #4a7747;
+  color: #4a7747;
 }
 
 div.p-toast {
-    opacity: 1;
+  opacity: 1;
 }
 
 .p-button.p-button-icon-only.p-button.p-button-xs,
 .p-button.p-button-xs {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.875rem;
-    font-weight: 600;
-    width: auto;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  width: auto;
 }
 
 .code, .code-block {
@@ -30,4 +30,27 @@ div.p-toast {
 
 .p-message-wrapper .p-message-icon, .p-message-wrapper .p-message-close {
   flex-shrink: 0;
-}
+}
+
+.p-inputwrapper-filled.p-inputwrapper.p-multiselect.p-multiselect-chip
+.p-multiselect-label {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .25rem;
+  padding: .25rem .5rem;
+}
+
+.p-inputwrapper-filled.p-inputwrapper.p-multiselect.p-multiselect-chip
+.p-multiselect-label
+.p-multiselect-token {
+  margin-right: 0;
+}
+
+div.p-chips .p-chips-multiple-container {
+  gap: .25rem;
+  padding: .25rem .5rem;
+}
+
+div.p-chips .p-chips-multiple-container .p-chips-token {
+  margin-right: 0;
+}

frontend/components/CalendarRangeWithISOModel.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+interface Props {
+  value: Array<string | undefined> | undefined
+}
+const props = defineProps<Props>()
+interface Emits {
+  (event: 'update:value', value: Array<string | undefined> | undefined): void
+}
+const emit = defineEmits<Emits>()
+
+const decode = (value: string | null | undefined): Date | null => {
+  if (value === null || value === undefined || value === '') {
+    return null
+  }
+  return new Date(value)
+}
+const encode = (value: Date | null | undefined): string => {
+  if (value === null || value === undefined) {
+    return ''
+  }
+  return value.toISOString()
+}
+const addDay = (date: Date | null): Date | null => {
+  if (date === null) {
+    return null
+  }
+  return new Date(date.getTime() + 24 * 60 * 60 * 1000)
+}
+const subDay = (date: Date | null): Date | null => {
+  if (date === null) {
+    return null
+  }
+  return new Date(date.getTime() - 24 * 60 * 60 * 1000)
+}
+
+// We use the addDay/subDay to make sure end-dates selected on the calendar are
+// included in the range for search. Otherwise, the filter will exclude the last day,
+// since the Calendar component selects the first millisecond of the date given.
+const model = computed<Array<Date | null>>({
+  get: () => props.value
+    ? [
+        decode(props.value[0]),
+        subDay(decode(props.value[1])),
+      ]
+    : [new Date(), new Date()],
+  set: (value: Array<Date | null>) => {
+    emit('update:value', [
+      encode(value[0]),
+      encode(addDay(value[1])),
+    ])
+  },
+})
+</script>
+
+<template>
+  <PVCalendar
+    v-model="model"
+    inline
+    selection-mode="range"
+    :manual-input="false"
+  />
+</template>

frontend/components/standard/FullWidth.vue

@@ -0,0 +1,21 @@
+<template>
+  <div
+    class="standard-full-width"
+  >
+    <slot />
+  </div>
+</template>
+
+<style lang="scss">
+.standard-full-width {
+  width: calc(100vw - 1rem);
+  margin: 0 calc(50% - 50vw + .5rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.standard-full-width > * {
+  width: 100%;
+}
+</style>

frontend/lang/en.json

@@ -426,7 +426,15 @@
     "Secondary Target": "Secondary Target",
     "Secondary Target ID": "Secondary Target ID",
     "Secondary Target Owner": "Secondary Target Owner",
-    "Secondary Target Type": "Secondary Target Type"
+    "Secondary Target Type": "Secondary Target Type",
+    "Filter To Specific Values": "Values To Include",
+    "Columns": "Columns",
+    "Column Selection": "Column Selection",
+    "Select or Remove Columns To Display": "Select or Remove Columns to Display",
+    "Reset":  "Reset",
+    "Done": "Done",
+    "DescriptionParagraph1": "RMI takes the security of your data with the utmost care. To that end, we have implemented a robust audit logging system that tracks all changes to your data, and who made those changes. This audit log is available to you at any time, and can be filtered by time, user, or action. Hopefully this will give you some peace of mind that your sensitive data is being appropriately handled.",
+    "DescriptionParagraph2": "If you have any questions about the audit log, or if you think that something is missing, or you would like to learn more, please contact us."
   },
   "pages/index": {
     "Heading": "PACTA for Investors",

frontend/lib/auditlogquery/index.ts

@@ -47,9 +47,9 @@ const encodeAuditLogQueryWheres = (wheres: AuditLogQueryWhere[]): string => {
     } else if (where.inTargetOwnerId) {
       components.push(`TargetOwnerId:${where.inTargetOwnerId.join('|')}`)
     } else if (where.minCreatedAt) {
-      components.push(`MinCreatedAt:${where.minCreatedAt}`)
+      components.push(`MinCreatedAt:${where.minCreatedAt.replaceAll(':', '_')}`)
     } else if (where.maxCreatedAt) {
-      components.push(`MaxCreatedAt:${where.maxCreatedAt}`)
+      components.push(`MaxCreatedAt:${where.maxCreatedAt.replaceAll(':', '_')}`)
     } else {
       console.warn(new Error(`Unknown where: ${JSON.stringify(where)}`))
     }
@@ -108,12 +108,12 @@ const decodeAudtLogQueryWheres = (wheres: string): AuditLogQueryWhere[] => {
         break
       case 'MinCreatedAt':
         result.push({
-          minCreatedAt: value,
+          minCreatedAt: value.replaceAll('_', ':'),
         })
         break
       case 'MaxCreatedAt':
         result.push({
-          maxCreatedAt: value,
+          maxCreatedAt: value.replaceAll('_', ':'),
         })
         break
       default:

frontend/package.json

@@ -44,7 +44,7 @@
     "jszip": "^3.10.1",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
-    "primevue": "^3.32.0",
+    "primevue": "^3.32.1",
     "serialize-error": "^11.0.3",
     "uuid": "^9.0.0",
     "vue-i18n": "^9.5.0"