summaryrefslogtreecommitdiffstats
path: root/cds-ui/client/src/app
diff options
context:
space:
mode:
authorEzhilarasi <ezhrajam@in.ibm.com>2019-07-25 12:19:31 +0530
committerEzhilarasi <ezhrajam@in.ibm.com>2019-07-25 12:19:41 +0530
commitd55025cb2f8c06c08676719b67a53fa48442d1e9 (patch)
tree5789414b23a30ce31d91dea3ab03231c73cd8a76 /cds-ui/client/src/app
parentbc30889259ef5469140e032535331eec3c3d242b (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')
-rw-r--r--cds-ui/client/src/app/common/shared/components/home/home.component.scss28
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.html29
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.scss38
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.ts21
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'];
}
}