Search mat card display

Create blueprint search from db matcard
Change-Id: I411035385930f5637c84426c7b32c20c219aab73
Issue-ID: CCSDK-1275
Signed-off-by: Ezhilarasi <ezhrajam@in.ibm.com>

4 files changed, 85 insertions, 31 deletions

diff --git a/cds-ui/client/src/app/common/shared/components/home/home.component.scss b/cds-ui/client/src/app/common/shared/components/home/home.component.scss
index be21b750c..20ef5c20a 100644
--- a/cds-ui/client/src/app/common/shared/components/home/home.component.scss
+++ b/cds-ui/client/src/app/common/shared/components/home/home.component.scss
@@ -19,19 +19,21 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-// .example-container {
-//     // position: absolute;
-//     top: 0;
-//     bottom: 0;
-//     left: 0;
-//     right: 0;
-//   }
-//   .example-events {
-//     width: 300px;
-//     height: 200px;
-//     overflow: auto;
-//     border: 1px solid #555;
-//   }
+.example-container {
+    // position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.example-events {
+    width: 300px;
+    height: 200px;
+    overflow: auto;
+    border: 1px solid #555;
+}
+
 .mat-sidenav-container {
     height: 652px;
 }
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.html b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.html
index 11c2ff0b6..a3c287254 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.html
@@ -21,11 +21,26 @@ limitations under the License.
 <form class="search-form" [formGroup]="myControl">
     <mat-form-field class="search-full-width">
         <input #resourceSelect type="text" [(ngModel)]="searchText" placeholder="Search Resources" matInput [matAutocomplete]="auto" formControlName="search_input">
-        <button matSuffix mat-icon-button (click)="fetchResourceByName()"><mat-icon>search</mat-icon></button>
-        <mat-autocomplete #auto="matAutocomplete">
-            <mat-option (click)="selected(option)" *ngFor="let option of options" [value]="option.tags">
-                {{option.tags}}
-            </mat-option>
-        </mat-autocomplete>
+        <button matSuffix mat-icon-button (click)="fetchResourceByName()">
+      <mat-icon>search</mat-icon>
+    </button>
+        <!-- <mat-autocomplete #auto="matAutocomplete">
+      <mat-option (click)="selected(option)" *ngFor="let option of options" [value]="option.tags">
+        {{option.tags}}
+      </mat-option>
+    </mat-autocomplete> -->
     </mat-form-field>
-</form>
\ No newline at end of file
+</form>
+<mat-grid-list cols="8">
+    <mat-grid-tile *ngFor="let option of options">
+        <mat-card class="example-card">
+            <mat-card-content class="card-content">
+                {{option}}
+            </mat-card-content>
+            <mat-card-actions>
+                <button mat-menu-item>Edit</button>
+                <button mat-menu-item>Info</button>
+            </mat-card-actions>
+        </mat-card>
+    </mat-grid-tile>
+</mat-grid-list>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.scss
index 93f5c9dea..6692764ae 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.scss
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.scss
@@ -17,4 +17,40 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
-*/
\ No newline at end of file
+*/
+
+.example-card {
+    min-width: 150px;
+    max-height: 150px;
+    background-color: #ebebeb;
+}
+
+button.mat-menu-item {
+    width: auto;
+    float: left;
+    // margin-top: 10px;
+    // margin-bottom: 5px;
+    border-radius: 4px;
+    // min-width: 6em;
+    background-color: #3f51b5;
+    margin: 1px;
+    // padding: 1px;
+    cursor: pointer;
+    color: white;
+}
+
+.card-deck-container {
+    position: relative;
+    border-radius: 1px;
+    padding: 2px;
+    margin: 2px;
+    // background-color: #f5f5f5;
+}
+
+.grid-container {
+    margin: 20px;
+}
+
+.card-content {
+    text-align: center;
+}
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.ts
index a14508670..5ae1850cc 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.ts
@@ -50,16 +50,17 @@ export class SearchFromDatabaseComponent implements OnInit {
    }
 
    fetchResourceByName() {
-      this.existingModelService.searchByTags("/searchByTags/",this.searchText)
-      .subscribe(data=>{
-          console.log(data);
-          data.forEach(element => {
-            this.options.push(element)
-          });          
-        this.resourceSelect.openPanel();
-      }, error=>{
-        window.alert('error' + error);
-      })
+      // this.existingModelService.searchByTags("/searchByTags/",this.searchText)
+      // .subscribe(data=>{
+      //     console.log(data);
+      //     data.forEach(element => {
+      //       this.options.push(element)
+      //     });          
+      //   this.resourceSelect.openPanel();
+      // }, error=>{
+      //   window.alert('error' + error);
+      // })
+      this.options=['test','vns','capability','hello','hi','hoi','dfagfagshdgfashdf','adsfhksd'];
    }
 
 }