feat: Add description to classes (#419)

IntelliTect · Aug 14, 2024 · f0df633 · f0df633
1 parent b0a5dbe
commit f0df633
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 2 deletions.
diff --git a/docs/modeling/model-components/attributes.md b/docs/modeling/model-components/attributes.md
@@ -20,6 +20,9 @@ The displayed name and description of a property, as well as the order in which
 
 The displayed name of a property can also be set via the `[DisplayName]` attribute.
 
+### [Description]
+The description of a type or member, such as a class, property, method, or parameter.
+
 ### [Required]
 
 Properties with `[Required]` will generate [client validation](/modeling/model-components/attributes/client-validation.md) and [server validation](/topics/security.md#server-side-data-validation) rules.

diff --git a/playground/Coalesce.Domain/Product.cs b/playground/Coalesce.Domain/Product.cs
@@ -1,4 +1,5 @@
 using System;
+using System.ComponentModel;
 using System.ComponentModel.DataAnnotations;
 using System.ComponentModel.DataAnnotations.Schema;
 using IntelliTect.Coalesce.DataAnnotations;
@@ -10,6 +11,7 @@ namespace Coalesce.Domain
     [Table("Product")]
     [Create(Roles = "Admin")]
     [Edit(Roles = "Admin")]
+    [Description("A product that can be purchased.")]
     public class Product
     {
         public int ProductId { get; set; }

diff --git a/playground/Coalesce.Web.Vue3/src/metadata.g.ts b/playground/Coalesce.Web.Vue3/src/metadata.g.ts
diff --git a/src/IntelliTect.Coalesce.CodeGeneration.Vue/Generators/Scripts/TsMetadata.cs b/src/IntelliTect.Coalesce.CodeGeneration.Vue/Generators/Scripts/TsMetadata.cs
@@ -102,6 +102,15 @@ private void WriteCommonClassMetadata(TypeScriptCodeBuilder b, ClassViewModel mo
         {
             b.StringProp("name", model.ClientTypeName);
             b.StringProp("displayName", model.DisplayName);
+
+            var description = model.GetAttributeValue<DescriptionAttribute>(a => a.Description)
+                ?? model.GetAttributeValue<DisplayAttribute>(a => a.Description);
+
+            if (!string.IsNullOrWhiteSpace(description))
+            {
+                b.StringProp("description", description);
+            }
+
             if (model.ListTextProperty != null)
             {
                 // This might not be defined for external types, because sometimes it just doesn't make sense. We'll accommodate on the client.

diff --git a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-editor.vue b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-editor.vue
@@ -54,6 +54,11 @@
       </v-btn>
     </v-toolbar>
 
+    <div v-if="metadata.description" class="c-admin-page--description">
+      <i class="fa fa-info-circle"></i>
+      {{ metadata.displayName }}: {{ metadata.description }}
+    </div>
+
     <v-card-text class="pt-2">
       <c-loader-status
         :loaders="{

diff --git a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table-toolbar.vue b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table-toolbar.vue
@@ -4,6 +4,7 @@
     class="c-admin-table-toolbar"
     density="comfortable"
     :color="color"
+    elevation="4"
   >
     <v-toolbar-title class="c-admin-table-toolbar--model-name hidden-xs-only">
       {{ metadata.displayName }}

diff --git a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table.vue b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table.vue
@@ -6,9 +6,13 @@
       @update:editable="editable = $event"
       :editable="canEdit ? editable : undefined"
       :color="color"
-      elevation="4"
     />
 
+    <div v-if="metadata.description" class="c-admin-page--description">
+      <i class="fa fa-info-circle"></i>
+      {{ metadata.displayName }}: {{ metadata.description }}
+    </div>
+
     <v-card-text>
       <c-table
         admin

diff --git a/src/coalesce-vue-vuetify3/src/shared.scss b/src/coalesce-vue-vuetify3/src/shared.scss
@@ -58,6 +58,12 @@
   margin-right: 0.3ex;
 }
 
+.c-admin-page--description {
+  font-size: 12px;
+  margin: 4px 16px;
+  opacity: 0.9;
+}
+
 .v-text-field input[type="color"] {
   // These two swatch styles are crafted to make Chrome and FF look the same.
 

diff --git a/src/coalesce-vue/src/metadata.ts b/src/coalesce-vue/src/metadata.ts
@@ -94,7 +94,10 @@ export interface Metadata {
 export interface CustomReferenceTypeBase extends Metadata {
   readonly type: ClassTypeDiscriminator;
 
-  /** The properties of a the represented type */
+  /** The description of the type itself. */
+  readonly description?: string;
+
+  /** The properties of the represented type */
   readonly props: { [propName in string]: Property };
 
   /**
@@ -148,6 +151,7 @@ export interface ModelType extends CustomReferenceTypeBase, ApiRoutedType {
 export interface DataSourceType extends Metadata {
   readonly type: "dataSource";
   readonly isDefault?: true;
+  readonly description?: string;
 
   /** The parameters of the data source.
    * Stored as `props` so it can be treated like a ModelType/ObjectType in many cases.