gerrit.onap Code Review - ccsdk/cds.git/blob

   1 <ng-sidebar [(opened)]="actionAttributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
   2     [position]="'right'" #sidebarRight1>
   3     <div class="container-fluid0">
   4         <div class="row m-0">
   5             <div class="col attributesContainer">
   6                 <div class="row m-0 attributesContainertTitle">
   7                     <div class="col-2 pl-0">
   8                         <button (click)="sidebarRight1.close()" class="closeBar" tooltip="Close" placement="bottom"><i
   9                                 class="icon-close" type="button" aria-hidden="true"></i></button>
  10                     </div>
  11                     <h6 class="col pl-0">Action Attributes</h6>
  12                     <div class="col-3 pl-0">
  13                         <div class="btn-group" role="group" aria-label="Basic example">
  14                             <button type="button" class="btn view-source" tooltip="View Action Source"
  15                                 placement="bottom"><i class="icon-source"></i></button>
  16                                 <button type="button" data-toggle="modal" data-target="#exampleModalScrollable1"
  17                                 class="btn trash-item" tooltip="Delete Action" placement="bottom"><i
  18                                     class="icon-delete-sm" aria-hidden="true"></i></button>
  19                         </div>
  20                     </div>
  21                 </div>
  22                 <div class="scrollWrapper">
  23                     <div class="row m-0">
  24                         <div class="col">
  25                             <div class="form-group">
  26                                 <label for="exampleInputEmail1">Action Name</label>
  27                                 <input type="text" class="form-control" placeholder="Action Name"
  28                                     value="resource-assignment">
  29                             </div>
  30                         </div>
  31                     </div>
  32                     <!--Add Attribute-->
  33                     <div class="row m-b add-attribute">
  34                         <div class="col">
  35                             <h5>Add Attribute</h5>
  36                             <div class="row">
  37                                 <div class="col pr-0 text-center">
  38                                     <button type="button" data-toggle="modal" data-target="#exampleModalScrollable"
  39                                         class="btn btn-secondary"><i class="icon-custom-attribute" type="button"
  40                                             aria-hidden="true"></i></button>
  41                                     <span>Custom Attribute</span>
  42
  43
  44                                 </div>
  45                                 <div class="col text-center">
  46                                     <button type="button" class="btn btn-secondary"><i class="icon-function-attribute"
  47                                             type="button" aria-hidden="true"></i></button>
  48                                     <span>Function Attribute</span>
  49                                 </div>
  50                             </div>
  51                         </div>
  52                     </div>
  53                     <!--INPUTS-->
  54                     <div class="accordion" id="accordionExample">
  55                         <div class="card">
  56                             <div class="card-header row" id="headingOne">
  57                                 <button class="btn btn-link" type="button" data-toggle="collapse"
  58                                     data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  59                                     Inputs
  60                                 </button>
  61                             </div>
  62                             <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
  63                                 data-parent="#accordionExample">
  64                                 <div class="card-body action-attributes">
  65                                     <div class="row">
  66                                         <div class="col">
  67                                             <div class="form-group" *ngFor="let input of inputs">
  68                                                 <label for="exampleFormControlTextarea1">{{input.name}}
  69                                                     <i [hidden]="!input.required" class="icon-required-star"
  70                                                         type="button" aria-hidden="true"></i>
  71                                                     <i [hidden]="input.required" type="button" aria-hidden="true"></i>
  72                                                 </label>
  73                                                 <div class="attributeOptions">
  74                                                     <a data-toggle="modal" data-target="#exampleModalScrollable2"
  75                                                         class="accordion-delete editAttribute"
  76                                                         tooltip="Edit Attribute" placement="bottom"><i
  77                                                             class="icon-edit"></i></a>
  78                                                     <a class="accordion-delete deleteAttribute"
  79                                                         tooltip="Delete Attribute" placement="bottom"><i
  80                                                             class="icon-delete-sm"></i></a>
  81                                                 </div>
  82                                             </div>
  83                                         </div>
  84                                     </div>
  85                                 </div>
  86                             </div>
  87                         </div>
  88                     </div>
  89                     <!--OUTPUTS-->
  90                     <div class="accordion" id="accordionExample1">
  91                         <div class="card">
  92                             <div class="card-header row" id="headingOne">
  93                                 <button class="btn btn-link" type="button" data-toggle="collapse"
  94                                     data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
  95                                     Outputs
  96                                 </button>
  97                             </div>
  98
  99                             <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne"
 100                                 data-parent="#accordionExample1">
 101                                 <div class="card-body">
 102                                     <div class="row">
 103                                         <div class="col">
 104                                             <div class="form-group" *ngFor="let output of outputs">
 105                                                 <label for="exampleFormControlTextarea1">{{output.name}}
 106                                                     <i [hidden]="output.required"
 107                                                         class="icon-required-star optional-attribute" type="button"
 108                                                         aria-hidden="true"></i>
 109                                                     <i [hidden]="output.required" class="optional-attribute"
 110                                                         type="button" aria-hidden="true"></i>
 111                                                 </label>
 112                                             </div>
 113                                         </div>
 114                                     </div>
 115                                 </div>
 116                             </div>
 117                         </div>
 118                     </div>
 119                 </div>
 120             </div>
 121         </div>
 122     </div>
 123 </ng-sidebar>
 124
 125 <!--Action - Add Custom Attribute - Modal-->
 126 <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
 127     aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
 128     <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
 129         <div class="modal-content">
 130             <div class="modal-header">
 131                 <h5 class="modal-title" id="exampleModalScrollableTitle">
 132                     Add Custom Attributes</h5>
 133                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 134                     <img src="assets/img/icon-close.svg" />
 135                 </button>
 136             </div>
 137             <div class="modal-body createAttributeTabs">
 138                 <!--Action - Inputs & Outputs Attribute-->
 139                 <ul class="nav nav-tabs" id="myTab" role="tablist">
 140                     <li class="nav-item">
 141                         <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
 142                             aria-controls="home" aria-selected="true">Inputs</a>
 143                     </li>
 144                     <li class="nav-item">
 145                         <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
 146                             aria-controls="profile" aria-selected="false">Outputs</a>
 147                     </li>
 148                 </ul>
 149                 <div class="tab-content" id="myTabContent">
 150                     <!--INPUTS Tab-->
 151                     <div class="tab-pane fade show active create-form" id="home" role="tabpanel"
 152                         aria-labelledby="home-tab">
 153                         <div class="form-group row">
 154                             <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
 155                             <div class="col-sm-9">
 156                                 <input type="email" class="form-control" id="inputEmail3" placeholder="Attribute name">
 157                             </div>
 158                         </div>
 159                         <div class="form-group row">
 160                             <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
 161                             <div class="col-sm-9">
 162                                 <input type="text" class="form-control" id="inputPassword3"
 163                                     placeholder="Add some description">
 164                             </div>
 165                         </div>
 166                         <div class="form-group row">
 167                             <label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label>
 168                             <div class="col-sm-9">
 169                                 <div class="list-group list-group-horizontal">
 170                                     <button type="button"
 171                                         class="list-group-item list-group-item-action active">String</button>
 172                                     <button type="button"
 173                                         class="list-group-item list-group-item-action">Integer</button>
 174                                     <button type="button"
 175                                         class="list-group-item list-group-item-action">Boolean</button>
 176                                     <button type="button" class="list-group-item list-group-item-action">List</button>
 177                                     <button type="button" class="list-group-item list-group-item-action">Other</button>
 178
 179                                 </div>
 180                             </div>
 181                         </div>
 182                         <div class="form-group row">
 183                             <label class="col-form-label col-sm-3 pt-0">Required <span>*</span></label>
 184                             <div class="col-sm-9">
 185                                 <div class="custom-control custom-radio custom-control-inline">
 186                                     <input type="radio" id="customRadioInline1" name="customRadioInline1"
 187                                         class="custom-control-input">
 188                                     <label class="custom-control-label" for="customRadioInline1">True</label>
 189                                 </div>
 190                                 <div class="custom-control custom-radio custom-control-inline">
 191                                     <input type="radio" id="customRadioInline2" name="customRadioInline1"
 192                                         class="custom-control-input">
 193                                     <label class="custom-control-label" for="customRadioInline2">False</label>
 194                                 </div>
 195                             </div>
 196                         </div>
 197                     </div>
 198                     <!--OUTPUTS Tab-->
 199                     <div class="tab-pane fade create-form" id="profile" role="tabpanel" aria-labelledby="profile-tab">
 200                         <div class="form-group row">
 201                             <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
 202                             <div class="col-sm-9">
 203                                 <input type="email" class="form-control" id="inputEmail3" placeholder="Attribute name">
 204                             </div>
 205                         </div>
 206                         <div class="form-group row">
 207                             <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
 208                             <div class="col-sm-9">
 209                                 <input type="text" class="form-control" id="inputPassword3"
 210                                     placeholder="Add some description">
 211                             </div>
 212                         </div>
 213                         <div class="form-group row">
 214                             <label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label>
 215                             <div class="col-sm-9">
 216                                 <div class="list-group list-group-horizontal">
 217                                     <button type="button" class="list-group-item list-group-item-action">String</button>
 218                                     <button type="button"
 219                                         class="list-group-item list-group-item-action">Integer</button>
 220                                     <button type="button"
 221                                         class="list-group-item list-group-item-action">Boolean</button>
 222                                     <button type="button" class="list-group-item list-group-item-action">List</button>
 223                                     <button type="button"
 224                                         class="list-group-item list-group-item-action active">Other</button>
 225                                 </div>
 226                                 <input type="text" class="form-control mt-2 mb-2" id="inputPassword3"
 227                                     placeholder="Add Other type name">
 228                             </div>
 229                         </div>
 230                         <div class="form-group row">
 231                             <label class="col-form-label col-sm-3 pt-0">Required <span>*</span></label>
 232                             <div class="col-sm-9">
 233                                 <div class="custom-control custom-radio custom-control-inline">
 234                                     <input type="radio" id="customRadioInline1" name="customRadioInline1"
 235                                         class="custom-control-input">
 236                                     <label class="custom-control-label" for="customRadioInline1">True</label>
 237                                 </div>
 238                                 <div class="custom-control custom-radio custom-control-inline">
 239                                     <input type="radio" id="customRadioInline2" name="customRadioInline1"
 240                                         class="custom-control-input">
 241                                     <label class="custom-control-label" for="customRadioInline2">False</label>
 242                                 </div>
 243                             </div>
 244                         </div>
 245                     </div>
 246                 </div>
 247             </div>
 248             <div class="modal-footer">
 249                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
 250                 <button type="button" class="btn btn-primary">Submit Attributes</button>
 251             </div>
 252         </div>
 253     </div>
 254 </div>
 255 <!--Delete Action - Modal-->
 256 <div class="modal fade" id="exampleModalScrollable1" tabindex="-1" role="dialog"
 257     aria-labelledby="exampleModalScrollableTitle1" aria-hidden="true">
 258     <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
 259         <div class="modal-content">
 260             <div class="modal-header">
 261                 <h5 class="modal-title" id="exampleModalScrollableTitle1">
 262                     Delete Action</h5>
 263                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 264                     <img src="assets/img/icon-close.svg" />
 265                 </button>
 266             </div>
 267             <div class="modal-body">
 268                 Are you sure you want to delete <b>resource-assignment</b> action?
 269             </div>
 270             <div class="modal-footer">
 271                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
 272                 <button type="button" class="btn btn-primary">Delete</button>
 273             </div>
 274         </div>
 275     </div>
 276 </div>
 277 <!--Action - Edit Custom Attribute - Modal-->
 278 <div class="modal fade" id="exampleModalScrollable2" tabindex="-1" role="dialog"
 279     aria-labelledby="exampleModalScrollableTitle2" aria-hidden="true">
 280     <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
 281         <div class="modal-content">
 282             <div class="modal-header">
 283                 <h5 class="modal-title" id="exampleModalScrollableTitle2">
 284                     Edit Custom Attributes</h5>
 285                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 286                     <img src="assets/img/icon-close.svg" />
 287                 </button>
 288             </div>
 289             <div class="modal-body createAttributeTabs">
 290                 <div class="create-form">
 291                     <div class="form-group row">
 292                         <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
 293                         <div class="col-sm-9">
 294                             <input type="email" class="form-control" id="inputEmail3" placeholder="Attribute name" value="resource-assignment-properties">
 295                         </div>
 296                     </div>
 297                     <div class="form-group row">
 298                         <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
 299                         <div class="col-sm-9">
 300                             <input type="text" class="form-control" id="inputPassword3"
 301                                 placeholder="Add some description" value="Dynamic PropertyDefinition for workflow(resource-assignment).">
 302                         </div>
 303                     </div>
 304                     <div class="form-group row">
 305                         <label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label>
 306                         <div class="col-sm-9">
 307                             <div class="list-group list-group-horizontal">
 308                                 <button type="button"
 309                                     class="list-group-item list-group-item-action">String</button>
 310                                 <button type="button" class="list-group-item list-group-item-action">Integer</button>
 311                                 <button type="button" class="list-group-item list-group-item-action">Boolean</button>
 312                                 <button type="button" class="list-group-item list-group-item-action">List</button>
 313                                 <button type="button" class="list-group-item list-group-item-action active">Other</button>
 314                             </div>
 315                             <input type="text" class="form-control mt-2 mb-2" id="inputPassword3"
 316                                     placeholder="Add Other type name" value="dt-resource-assignment-properties">
 317                         </div>
 318                     </div>
 319                     <div class="form-group row">
 320                         <label class="col-form-label col-sm-3 pt-0">Required <span>*</span></label>
 321                         <div class="col-sm-9">
 322                             <div class="custom-control custom-radio custom-control-inline">
 323                                 <input type="radio" id="customRadioInline1" name="customRadioInline1"
 324                                     class="custom-control-input" checked>
 325                                 <label class="custom-control-label" for="customRadioInline1">True</label>
 326                             </div>
 327                             <div class="custom-control custom-radio custom-control-inline">
 328                                 <input type="radio" id="customRadioInline2" name="customRadioInline1"
 329                                     class="custom-control-input">
 330                                 <label class="custom-control-label" for="customRadioInline2">False</label>
 331                             </div>
 332                         </div>
 333                     </div>
 334                 </div>
 335                 <div class="modal-footer">
 336                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
 337                     <button type="button" class="btn btn-primary">Save</button>
 338                 </div>
 339             </div>
 340         </div>
 341     </div>
 342 </div>