diff options
author | 2019-07-25 12:19:31 +0530 | |
---|---|---|
committer | 2019-07-25 12:19:41 +0530 | |
commit | d55025cb2f8c06c08676719b67a53fa48442d1e9 (patch) | |
tree | 5789414b23a30ce31d91dea3ab03231c73cd8a76 /cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template | |
parent | bc30889259ef5469140e032535331eec3c3d242b (diff) |
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>
Diffstat (limited to 'cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template')
3 files changed, 70 insertions, 18 deletions
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']; } } |