task/DataDictionaryFrontend: Adding Test of spacing for subcomponents

NationalSecurityAgency · May 28, 2024 · 4bef40e · 4bef40e
1 parent c5981ab
commit 4bef40e
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 18 deletions.
diff --git a/service/src/main/frontend/.vscode/settings.json b/service/src/main/frontend/.vscode/settings.json
@@ -3,14 +3,8 @@
   "editor.guides.bracketPairs": true,
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.codeActionsOnSave": [
-    "source.fixAll.eslint"
-  ],
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "vue"
-  ],
-  "typescript.tsdk": "node_modules/typescript/lib"
-}
+  "editor.codeActionsOnSave": ["source.fixAll.eslint"],
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "git.ignoreLimitWarning": true
+}
diff --git a/service/src/main/frontend/src/pages/IndexPage.vue b/service/src/main/frontend/src/pages/IndexPage.vue
@@ -46,7 +46,7 @@
 
         <template v-slot:header="props">
           <q-tr :props="props">
-            <q-th auto-width />
+            <q-th />
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               {{ col.label }}
             </q-th>
@@ -55,7 +55,7 @@
 
         <template v-slot:body="props">
           <q-tr :props="props">
-            <q-td auto-width>
+            <q-td>
               <q-btn
                 size="sm"
                 color="accent"
@@ -76,9 +76,21 @@
                 v-for="vals in duplicateAry"
                 :key="vals.fieldName"
               >
-                <div v-if="vals.fieldName === props.row.fieldName">
-                  This is expand slot for row above:
-                  {{ vals.lastUpdated }}
+                <div v-if="vals.fieldName === props.row.fieldName" class="row">
+                  <div class="col">{{ vals.fieldName }}</div>
+                  <div class="col">
+                    {{ vals.internalFieldName }}
+                  </div>
+                  <div class="col">data {{ vals.dataType }}</div>
+                  <div class="col">index {{ vals.indexOnly }}</div>
+                  <div class="col">foward {{ vals.forwardIndexed }}</div>
+                  <div class="col">rev {{ vals.revereseIndexed }}</div>
+                  <div class="col">norm {{ vals.normalized }}</div>
+                  <div class="col">types {{ vals.types }}</div>
+                  <div class="col">token {{ vals.tokenized }}</div>
+                  <div class="col">desc {{ vals.Description }}</div>
+                  <div class="col">update {{ vals.lastUpdated }}</div>
+
                   <!--FIX THIS FOR EACH VAL-->
                 </div>
               </div>
@@ -193,6 +205,22 @@ const sortDupArr = () => {
   return newAry;
 };
 
+const maxSubstring = (str: any) => {
+  console.log('str' + str);
+  if (str == undefined) {
+    return;
+  } else if (str.length > 19) {
+    return str.substring(0, 17) + '...';
+  } else {
+    var whitespace = '';
+    var diff = 19 - str.length + 1;
+    for (var x = 0; x < diff; x++) {
+      whitespace = whitespace.concat('.');
+    }
+    return str + whitespace;
+  }
+};
+
 const table = ref();
 
 const columns: QTableProps['columns'] = [
@@ -202,13 +230,19 @@ const columns: QTableProps['columns'] = [
     field: 'fieldName',
     align: 'left',
     sortable: true,
+    format(val, row) {
+      return maxSubstring(val);
+    },
   },
   {
     label: 'Internal FieldName',
     name: 'internalFieldName',
     field: 'internalFieldName',
     align: 'left',
     sortable: true,
+    format(val, row) {
+      return maxSubstring(val);
+    },
   },
   {
     label: 'Data Type',
@@ -233,8 +267,8 @@ const columns: QTableProps['columns'] = [
   },
   {
     label: 'Reverse Index',
-    name: 'revereseIndexed',
-    field: 'fowardIndexed',
+    name: 'reverseIndexed',
+    field: 'reverseIndexed',
     align: 'left',
     sortable: true,
   },
@@ -265,6 +299,9 @@ const columns: QTableProps['columns'] = [
     field: 'Descriptions',
     align: 'left',
     sortable: true,
+    format(val, row) {
+      return maxSubstring(val);
+    },
   },
   {
     label: 'Last Updated',