WIP

src/app/app.module.ts

@@ -21,6 +21,8 @@ import { EditConfigurationComponent } from './components/edit-configuration/edit
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatSelectModule } from '@angular/material/select';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatMenuModule } from '@angular/material/menu';
+
 
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { QuestionsetEditorComponent } from './components/questionset-editor/questionset-editor.component';
@@ -70,7 +72,8 @@ import { LoaderComponent } from './components/loader/loader.component';
     ReactiveFormsModule,
     BrowserAnimationsModule,
     CollectionEditorLibraryModule,
-    AppRoutingModule
+    AppRoutingModule,
+    MatMenuModule
   ],
   providers: [
     {

src/app/components/questionset-list/questionset-list.component.html

@@ -1,6 +1,84 @@
 <div class="px-30 mt-20" *ngIf="showLoader">
   <app-loader></app-loader>
 </div>
+<div class="d-flex dc-space-evenly mt-20 filter-panel">
+  <div>
+    <button mat-button [matMenuTriggerFor]="menu1">Show Filters: <mat-icon>keyboard_arrow_down</mat-icon>
+    </button>
+    <mat-menu #menu1="matMenu">
+      <mat-grid-list cols="4" rowHeight="2:1">
+        <mat-grid-tile>
+          <mat-form-field appearance="fill">
+            <mat-label>Board</mat-label>
+            <mat-select>
+              <mat-option value="one">CBSE</mat-option>
+              <mat-option value="two">ICSE</mat-option>
+            </mat-select>
+          </mat-form-field>
+        </mat-grid-tile>
+    <mat-grid-tile>
+      <mat-form-field appearance="fill">
+        <mat-label>Medium</mat-label>
+        <mat-select>
+          <mat-option value="one">English</mat-option>
+          <mat-option value="two">Hindi</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <mat-form-field appearance="fill">
+        <mat-label>Grade</mat-label>
+        <mat-select>
+          <mat-option value="one">1st</mat-option>
+          <mat-option value="two">2nd</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <mat-form-field appearance="fill">
+        <mat-label>Subject</mat-label>
+        <mat-select>
+          <mat-option value="one">Hindi</mat-option>
+          <mat-option value="two">Sanskrit</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <mat-form-field appearance="fill">
+        <mat-label>Status</mat-label>
+        <mat-select>
+          <mat-option value="one">Live Draft</mat-option>
+          <mat-option value="two">Sanskrit</mat-option>
+        </mat-select>
+      </mat-form-field>
+      </mat-grid-tile>
+      <mat-grid-tile>
+        <mat-form-field appearance="fill">
+          <mat-label>Content Type</mat-label>
+          <mat-select>
+            <mat-option value="one">Course</mat-option>
+            <mat-option value="two">E-textbook</mat-option>
+          </mat-select>
+        </mat-form-field>
+        </mat-grid-tile> 
+        <button mat-button color="Basic">Reset</button>
+        <button mat-button color="primary">Apply</button>
+
+    </mat-grid-list>
+
+    </mat-menu>
+  </div>
+  <div>
+    <button mat-button [matMenuTriggerFor]="menu">Sort by: <mat-icon>keyboard_arrow_down</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item>Modified On</button>
+      <button mat-menu-item>Created On</button>
+    </mat-menu>
+  </div>
+
+</div>
+
 <div class="px-30 mt-20" *ngIf="!showLoader">
   <div class="sb-table-container" *ngIf="questionsetList?.length">
     <table class="sb-table sb-table-hover">

src/styles.scss

@@ -38,3 +38,21 @@ body {
     height: 50% !important;
   }
 }
+.filter-panel.d-flex{
+  display: flex;
+}
+.filter-panel.dc-space-evenly{
+  justify-content: space-evenly;
+}
+#mat-menu-panel-0.mat-menu-panel{
+  min-width: inherit !important;
+  max-width: inherit !important;
+  height: inherit !important;
+  width: 1055px;
+}
+.mat-form-field-wrapper{
+  margin: 5px;
+}
+.mat-button-base:hover{
+  background: none !important;
+}