Make ColumnMenu component generic

Author: sha4be

libs/schematic/generators/ng-generate/components/card/index.ts

@@ -51,12 +51,9 @@ export function generateCard(cardSchema: Schema): Rule {
     insertVersionIntoPathRule(),
     setTemplateOptionValuesRule(),
     ...generateGeneralFilesRules(),
-    ...cardSpecificGeneration(),
+    generateCardComponent(options),
+    generateExportCardDialog(options),
     ...addAndUpdateConfigurationFilesRule(),
     formatAllFilesRule(),
   ]);
 }
-
-function cardSpecificGeneration(): Array<Rule> {
-  return [generateCardComponent(options), generateExportCardDialog(options)];
-}

libs/schematic/generators/ng-generate/components/shared/generators/components/command-bar/files/__name@dasherize__-command-bar.component.scss.template

@@ -8,6 +8,10 @@
     overflow: hidden;
   }
 
+  .mat-mdc-menu-panel {
+    max-width: max-content !important;
+  }
+
   .mat-mdc-form-field {
     padding-top: 20px;
     margin-right: 8px;
@@ -29,4 +33,70 @@
   .padding-40 {
     padding:40px;
   }
+
+  .filter-options-container {
+    overflow-y: auto;
+    min-height: 100px;
+    max-height: 200px;
+  }
+
+  .filter-actions-container {
+    text-align: right;
+    padding: 6px;
+
+    .filter-apply-btn {
+      margin-left: 10px;
+    }
+  }
+
+  ::ng-deep {
+    .advanced-search-option-description {
+      position: relative;
+      float: left;
+      font-size: 10px;
+      line-height: 1;
+      top: -12px;
+      white-space: break-spaces;
+    }
+
+    & .resizing {
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      cursor: e-resize;
+    }
+
+    & .handle {
+      width: 15px;
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+      cursor: col-resize;
+      opacity: 0;
+      transition: all 0.2s ease-in;
+
+      &:after {
+        content: '';
+        display: block;
+        width: 1px;
+        height: 100%;
+        z-index: 1;
+        background: linear-gradient(0, rgba(255, 255, 255, 1) 0%, rgba(157, 157, 157, 1) 49%, rgba(255, 255, 255, 1) 100%);
+        transition: all 0.5ms ease-in;
+      }
+    }
+
+    .mat-mdc-menu-panel {
+      max-width: max-content !important;
+    }
+
+    .mat-list-item-content {
+      flex-direction: row !important;
+    }
+
+    .mat-pseudo-checkbox {
+      margin-right: 10px;
+    }
+  }
 }

libs/schematic/generators/ng-generate/components/shared/generators/styles/general/files/__name@dasherize__.component.scss.template

@@ -1,93 +1,3 @@
 /** <%= options.generationDisclaimerText %> **/
 
-::ng-deep {
-  .advanced-search-option-description {
-    position: relative;
-    float: left;
-    font-size: 10px;
-    line-height: 1;
-    top: -12px;
-    white-space: break-spaces;
-  }
-
-  & .resizing {
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: e-resize;
-  }
-
-  & .handle {
-    width: 15px;
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 100%;
-    cursor: col-resize;
-    opacity: 0;
-    transition: all 0.2s ease-in;
-
-    &:after {
-      content: '';
-      display: block;
-      width: 1px;
-      height: 100%;
-      z-index: 1;
-      background: linear-gradient(0, rgba(255, 255, 255, 1) 0%, rgba(157, 157, 157, 1) 49%, rgba(255, 255, 255, 1) 100%);
-      transition: all 0.5ms ease-in;
-    }
-  }
-
-  .mat-mdc-menu-panel {
-    max-width: max-content !important;
-  }
-
-  .mat-list-item-content {
-    flex-direction: row !important;
-  }
-
-  .mat-pseudo-checkbox {
-    margin-right: 10px;
-  }
-}
-
-.spacer {
-  flex: 1 1 auto;
-}
-
-.selection-title {
-  padding: 8px 0 16px 16px;
-  margin: 0;
-}
-
-.list-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-left: 8px;
-}
-
-.bg-transparent {
-  background: initial;
-}
-
-.filter-options-container {
-  overflow-y: auto;
-  min-height: 100px;
-  max-height: 200px;
-}
-
-.filter-actions-container {
-  text-align: right;
-  padding: 6px;
-
-  .filter-apply-btn {
-    margin-left: 10px;
-  }
-}
-
-.mat-mdc-menu-panel {
-  max-width: max-content !important;
-}
-
 <%= customStyleImports %>

libs/schematic/generators/ng-generate/components/shared/index.ts

@@ -233,7 +233,7 @@ export function setTemplateOptionValuesRule(): Rule {
 export function generateGeneralFilesRules(): Array<Rule> {
   return [
     generateFilterService(options),
-    generateGeneralStyle(options),
+    // TODO remove the method call generateGeneralStyle(options),
     generateTranslationFiles(options, false),
     wrapBuildComponentExecution(options),
     generateCustomService(options),

libs/schematic/generators/ng-generate/components/shared/methods/generation/extended-table.html.template

@@ -149,7 +149,7 @@
                         class="mat-table-menu-button"
                         [matMenuTriggerFor]="columnMenu"
                         [matTooltip]="'tableActions.openColumnsMenu' | transloco"
-                        (menuOpened)="initOpenedColumnMenuDialog()">
+                        >
                             <mat-icon data-test="mat-table-menu-icon" class="material-icons">settings</mat-icon>
                     </button>
                 </th>
@@ -164,12 +164,12 @@
         </table>
 
         <mat-menu data-test="column-menu" #columnMenu="matMenu" class="column-menu">
-            <<%= dasherize(name) %>-column-menu (columnsChangedEvent)="setDisplayedColumns($event)"></<%= dasherize(name) %>-column-menu>
+            <esmf-column-menu [defaultColumns]="customizableColumns" [columns]="columns" (columnsChangedEvent)="setDisplayedColumns($event)"></esmf-column-menu>
         </mat-menu>
 
         <% if (options.hasSearchBar) { %>
            <mat-menu data-test="column-menu" class="column-menu">
-               <<%= dasherize(name) %>-config-menu (configChangedEvent)="setConfiguration($event)"></<%= dasherize(name) %>-config-menu>
+               <esmf-config-menu (configChangedEvent)="setConfiguration($event)"></esmf-config-menu>
            </mat-menu>
         <% } %>
 

libs/schematic/generators/ng-generate/components/table/generators/components/column-menu/files/__name@dasherize__-column-menu.component.html.template

@@ -130,4 +130,8 @@ $gray-300: #e0e0e0;
       display: block;
     }
   }
+
+  .bg-transparent {
+    background: initial;
+  }
 }