implement c-admin-audit-log-page for vue2

docs/stacks/vue/coalesce-vue-vuetify/components/c-admin-audit-log-page.md

@@ -4,13 +4,12 @@
 
 A full-featured page for interacting with Coalesce's [Audit Logging](/topics/audit-logging.md). Presents a view similar to [c-admin-table-page](/stacks/vue/coalesce-vue-vuetify/components/c-admin-table-page.md) with content optimized for viewing audit log records. Designed to be routed to directly with [vue-router](https://router.vuejs.org/).
 
-Currently only supports Vue3.
-
 <!-- MARKER:summary-end -->
 
 ## Examples
 
 ``` ts
+import { CAdminAuditLogPage } from 'coalesce-vue-vuetify3';
 const router = new Router({
   // ...
   routes: [

docs/topics/audit-logging.md

@@ -84,6 +84,20 @@ When you're inheriting from `DefaultObjectChange` for your `IObjectChange` imple
 
 The operation context class passed to `WithAugmentation` will be injected from the application service provider if available; otherwise, a new instance will be constructed using dependencies from the application service provider. To make an injected dependency optional, make the constructor parameter nullable with a default value of `null`, or create [alternate constructors](https://learn.microsoft.com/en-us/dotnet/core/extensions/dependency-injection#multiple-constructor-discovery-rules).
 
+### 4. Add the UI
+
+For Vue applications, the [c-admin-audit-log-page](/stacks/vue/coalesce-vue-vuetify/components/c-admin-audit-log-page.md) component provides an out-of-the-box user interface for browsing through audit logs. Simply define the following route in your application's router:
+
+``` ts
+import { CAdminAuditLogPage } from 'coalesce-vue-vuetify3';
+
+{
+  path: '/admin/audit-logs',
+  component: CAdminAuditLogPage,
+  props: { type: 'ObjectChange' }
+}
+```
+
 ## Configuration
 
 ### Suppression

playground/Coalesce.Domain/AppDbContext.cs

@@ -41,7 +41,10 @@ protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
                 .UseCoalesceAuditLogging<ObjectChange>(x => x
                     .WithAugmentation<OperationContext>()
                     .WithMergeWindow(TimeSpan.FromSeconds(15))
-                    // TODO: add nice spot here to setup Z EFPLUS config
+                    .ConfigureAudit(x => x
+                        // Just a random example of EFPlus config:
+                        .ExcludeProperty<Person>(p => p.ProfilePic)
+                    )
                 );
         }
 

playground/Coalesce.Domain/Coalesce.Domain.csproj

@@ -2,24 +2,14 @@
   <PropertyGroup>
     <!-- All these frameworks are included for testing code generation.
     Override the used framework by specifying (framework: "tfm") in coalesce.json. -->
-    <!--
-      IMPORTANT NOTE REGARDING ENTITYFRAMEWORK MIGRATIONS (Ctrl+f: EFCore, EF Core):
-      All EF commands need to be ran with - -framework net6.0. E.g.:
-      dotnet ef database update - -framework net6.0
-      (no space between the dashes; space is there because double dash is illegal in XML comments).
-    -->
     <TargetFrameworks>net6.0;net7.0;net8.0</TargetFrameworks>
     <IsPackable>false</IsPackable>
     <Nullable>enable</Nullable>
   </PropertyGroup>
 
   <ItemGroup>
-    <ProjectReference Include="..\..\src\IntelliTect.Coalesce\IntelliTect.Coalesce.csproj">
-      <SetTargetFramework>TargetFramework=$(TargetFramework)</SetTargetFramework>
-    </ProjectReference>
-    <ProjectReference Include="..\..\src\IntelliTect.Coalesce.AuditLogging\IntelliTect.Coalesce.AuditLogging.csproj">
-      <SetTargetFramework>TargetFramework=$(TargetFramework)</SetTargetFramework>
-    </ProjectReference>
+    <ProjectReference Include="..\..\src\IntelliTect.Coalesce\IntelliTect.Coalesce.csproj" />
+    <ProjectReference Include="..\..\src\IntelliTect.Coalesce.AuditLogging\IntelliTect.Coalesce.AuditLogging.csproj" />
   </ItemGroup>
 
   <ItemGroup Condition=" '$(TargetFramework)' == 'net6.0' ">

playground/Coalesce.Domain/Migrations/20231013200054_AddAuditLogging.cs → playground/Coalesce.Domain/Migrations/20231017172408_AddAuditLogging.cs

@@ -40,7 +40,10 @@ protected override void Up(MigrationBuilder migrationBuilder)
                     Type = table.Column<string>(type: "varchar(100)", maxLength: 100, nullable: false),
                     KeyValue = table.Column<string>(type: "nvarchar(450)", nullable: true),
                     State = table.Column<byte>(type: "tinyint", nullable: false),
-                    Date = table.Column<DateTimeOffset>(type: "datetimeoffset", nullable: false)
+                    Date = table.Column<DateTimeOffset>(type: "datetimeoffset", nullable: false),
+                    ClientIp = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    Referrer = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    Endpoint = table.Column<string>(type: "nvarchar(max)", nullable: true)
                 },
                 constraints: table =>
                 {

playground/Coalesce.Domain/Migrations/AppDbContextModelSnapshot.cs

@@ -188,15 +188,24 @@ protected override void BuildModel(ModelBuilder modelBuilder)
 
                     SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<long>("Id"), 1L, 1);
 
+                    b.Property<string>("ClientIp")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<DateTimeOffset>("Date")
                         .HasColumnType("datetimeoffset");
 
+                    b.Property<string>("Endpoint")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("KeyValue")
                         .HasColumnType("nvarchar(450)");
 
                     b.Property<string>("Message")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("Referrer")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<byte>("State")
                         .HasColumnType("tinyint");
 

playground/Coalesce.Web.Vue2/src/main.ts

@@ -24,7 +24,7 @@ import $metadata from '@/metadata.g';
 // viewmodels.g has sideeffects - it populates the global lookup on ViewModel and ListViewModel.
 import '@/viewmodels.g';
 
-import CoalesceVuetify, { CAdminTablePage, CAdminEditorPage } from 'coalesce-vue-vuetify';
+import CoalesceVuetify, { CAdminTablePage, CAdminEditorPage, CAdminAuditLogPage } from 'coalesce-vue-vuetify';
 Vue.use(CoalesceVuetify, {
   metadata: $metadata
 });
@@ -47,6 +47,7 @@ const router = new VueRouter({ mode: 'history', routes: [
     path: '/test',
     component: () => import("./components/test.vue"),  },
 
+  { path: '/audit-logs', component: CAdminAuditLogPage, props: {type: 'ObjectChange'} },
   { path: '/admin/:type', 
     name: 'coalesce-admin-list', 
     component: CAdminTablePage, 

playground/Coalesce.Web.Vue3/src/App.vue

@@ -1,44 +1,42 @@
 <template>
   <v-app>
-    <v-app-bar
-    >
-
+    <v-app-bar>
       <v-toolbar-title style="line-height: 1">
-        <router-link to="/" class="white--text" >
+        <router-link to="/" class="white--text">
           Coalesce Vue Demo
         </router-link>
       </v-toolbar-title>
 
       <!-- <div class="nav-items"> -->
-        <v-switch
-                    label="Dark Mode"
-                    v-model="darkMode"
-                    hide-details
-                    class="ml-2"
-                    density="compact"
-                  />
+      <v-switch
+        label="Dark Mode"
+        v-model="darkMode"
+        hide-details
+        class="ml-2"
+        density="compact"
+      />
 
-        <v-btn variant="text" to="/">Home</v-btn>
-        <v-btn variant="text" to="/test">Test</v-btn>
-        <v-btn variant="text" href="/coalesce-security">Security Overview</v-btn>
+      <v-btn variant="text" to="/">Home</v-btn>
+      <v-btn variant="text" to="/test">Test</v-btn>
+      <v-btn variant="text" href="/coalesce-security">Security Overview</v-btn>
 
-        <v-menu offset-y>
-          <template #activator="{props}">
-            <v-btn variant="text" v-bind="props">
-              Dropdown Menu
-              <i class="fa fa-caret-down pl-1"></i>
-            </v-btn>
-          </template>
-          <v-list>
-            <v-list-item to="/"><v-list-item-title>Home</v-list-item-title></v-list-item>
-          </v-list>
-        </v-menu>
+      <v-menu offset-y>
+        <template #activator="{ props }">
+          <v-btn variant="text" v-bind="props">
+            Dropdown Menu
+            <i class="fa fa-caret-down pl-1"></i>
+          </v-btn>
+        </template>
+        <v-list>
+          <v-list-item to="/" title="Home" />
+        </v-list>
+      </v-menu>
       <!-- </div> -->
     </v-app-bar>
 
     <v-main>
       <router-view v-slot="{ Component }">
-        <transition name="router-transition" mode="out-in"  appear>
+        <transition name="router-transition" mode="out-in" appear>
           <!-- https://stackoverflow.com/questions/52847979/what-is-router-view-key-route-fullpath -->
           <component ref="routerView" :is="Component" :key="$route.path" />
         </transition>
@@ -47,7 +45,7 @@
   </v-app>
 </template>
 
-<script setup lang=ts>
+<script setup lang="ts">
 import { computed } from "vue";
 import { useTheme } from "vuetify";
 
@@ -63,20 +61,18 @@ const darkMode = computed({
 });
 </script>
 
-
 <style lang="scss">
-  .router-transition-enter-active,
-  .router-transition-leave-active {
-    // transition: 0.2s cubic-bezier(0.25, 0.8, 0.5, 1);
-    transition: 0.1s ease-out;
-  }
-  .router-transition-move {
-    transition: transform 0.4s;
-  }
-  .router-transition-enter,
-  .router-transition-leave-to {
-    opacity: 0;
-    // transform: translateY(5px);
-  }
-
-</style>
+.router-transition-enter-active,
+.router-transition-leave-active {
+  // transition: 0.2s cubic-bezier(0.25, 0.8, 0.5, 1);
+  transition: 0.1s ease-out;
+}
+.router-transition-move {
+  transition: transform 0.4s;
+}
+.router-transition-enter,
+.router-transition-leave-to {
+  opacity: 0;
+  // transform: translateY(5px);
+}
+</style>

src/IntelliTect.Coalesce.AuditLogging/CoalesceAuditLoggingBuilder.cs

@@ -17,6 +17,13 @@ public CoalesceAuditLoggingBuilder(AuditOptions options)
         this.options = options;
     }
 
+    /// <summary>
+    /// Configures the operation context service that will be used to populate additional contextual
+    /// fields on audit log entries. The service will be injected from the application service 
+    /// provider if available; otherwise, a new instance will be constructed using dependencies 
+    /// from the application service provider. To make an injected dependency optional, make the
+    /// constructor parameter nullable with a default value of `null`, or create alternate constructors.
+    /// </summary>
     public CoalesceAuditLoggingBuilder<TObjectChange> WithAugmentation<T>()
         where T : IAuditOperationContext<TObjectChange>
     {