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

   1 <div class="scrollWrapper">
   2     <div class="row m-0">
   3         <div class="col">
   4             <div class="form-group">
   5                 <label for="exampleInputEmail1">Action Name</label>
   6                 <input type="text" class="form-control" placeholder="Action Name" readonly [value]="actionName">
   7             </div>
   8         </div>
   9     </div>
  10     <!--Add Attribute-->
  11     <div class="row m-b add-attribute">
  12         <div class="col">
  13             <h5>Add Attribute</h5>
  14             <div class="row">
  15                 <div class="col pr-0 text-center">
  16                     <button type="button" data-toggle="modal" data-target="#exampleModalScrollable"
  17                             class="btn btn-secondary"><i class="icon-custom-attribute" type="button"
  18                                                          aria-hidden="true"></i></button>
  19                     <span>Custom Attribute</span>
  20                 </div>
  21                 <div class="col text-center">
  22                     <button (click)="printSomethings()" [disabled]="!isFunctionAttributeActive" type="button"
  23                             data-toggle="modal" data-target="#exampleModalScrollable3" class="btn btn-secondary"><i
  24                             class="icon-function-attribute" type="button" aria-hidden="true"></i></button>
  25                     <span>Function Attribute</span>
  26                 </div>
  27             </div>
  28         </div>
  29     </div>
  30     <!--INPUTS-->
  31     <div class="accordion" id="accordionExample">
  32         <div class="card">
  33             <div class="card-header" id="headingOne">
  34                 <h2 class="mb-0">
  35                     <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
  36                             aria-expanded="true" aria-controls="collapseOne">
  37                         Inputs
  38                     </button>
  39                 </h2>
  40             </div>
  41             <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
  42                 <div class="card-body action-attributes">
  43                     <div class="row">
  44                         <div class="col">
  45                             <div class="form-group" *ngFor="let input of inputs">
  46                                 <label for="exampleFormControlTextarea1">{{input.name}}
  47                                     <i [hidden]="!input.required" class="icon-required-star" type="button"
  48                                        aria-hidden="true"></i>
  49                                     <i [hidden]="input.required" class="icon-required-star optional-attribute"
  50                                        type="button" aria-hidden="true"></i>
  51                                 </label>
  52                                 <div class="attributeOptions">
  53                                     <a data-toggle="modal" data-target="#exampleModalScrollable2"
  54                                        class="accordion-delete editAttribute" tooltip="Edit Attribute"
  55                                        placement="bottom"><i class="icon-edit"></i></a>
  56                                     <a class="accordion-delete deleteAttribute" tooltip="Delete Attribute"
  57                                        placement="bottom"><i class="icon-delete-sm"></i></a>
  58                                 </div>
  59                             </div>
  60                         </div>
  61                     </div>
  62                 </div>
  63             </div>
  64         </div>
  65     </div>
  66     <!--OUTPUTS-->
  67     <div class="accordion" id="accordionExample1">
  68         <div class="card">
  69             <div class="card-header" id="headingOne">
  70                 <h2 class="mb-0">
  71                     <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"
  72                             aria-expanded="true" aria-controls="collapseTwo">
  73                         Outputs
  74                     </button>
  75                 </h2>
  76             </div>
  77
  78             <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample1">
  79                 <div class="card-body">
  80                     <div class="row">
  81                         <div class="col">
  82                             <div class="form-group" *ngFor="let output of outputs">
  83                                 <label for="exampleFormControlTextarea1">{{output.name}}
  84                                     <i [hidden]="!output.required" class="icon-required-star" type="button"
  85                                        aria-hidden="true"></i>
  86                                     <i [hidden]="output.required" class="icon-required-star optional-attribute"
  87                                        type="button" aria-hidden="true"></i>
  88
  89                                 </label>
  90                             </div>
  91                         </div>
  92                     </div>
  93                 </div>
  94             </div>
  95         </div>
  96     </div>
  97 </div>
  98 <!--Action - Add Custom Attribute - Modal-->
  99 <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
 100      aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
 101     <div class="modal-dialog  modal-dialog-scrollable" role="document">
 102         <div class="modal-content">
 103             <div class="modal-header">
 104                 <h5 class="modal-title" id="exampleModalScrollableTitle">
 105                     Add Custom Attributes</h5>
 106                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 107                     <img src="assets/img/icon-close.svg"/>
 108                 </button>
 109             </div>
 110             <div class="modal-body createAttributeTabs">
 111                 <!--Action - Inputs & Outputs Attribute-->
 112                 <ul class="nav nav-tabs" id="myTab" role="tablist">
 113                     <li class="nav-item">
 114                         <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
 115                            aria-controls="home" aria-selected="true">Inputs</a>
 116                     </li>
 117                     <li class="nav-item">
 118                         <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
 119                            aria-controls="profile" aria-selected="false">Outputs</a>
 120                     </li>
 121                 </ul>
 122                 <div class="tab-content" id="myTabContent">
 123                     <!--INPUTS Tab-->
 124                     <div class="tab-pane fade show active create-form" id="home" role="tabpanel"
 125                          aria-labelledby="home-tab">
 126                         <div class="form-group row">
 127                             <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
 128                             <div class="col-sm-9">
 129                                 <input [(ngModel)]="inputActionAttribute.name" type="email" class="form-control"
 130                                        id="inputEmail3" placeholder="Attribute name">
 131                             </div>
 132                         </div>
 133                         <div class="form-group row">
 134                             <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
 135                             <div class="col-sm-9">
 136                                 <input [(ngModel)]="inputActionAttribute.description" type="text" class="form-control"
 137                                        id="inputPassword3" placeholder="Add some description">
 138                             </div>
 139                         </div>
 140                         <div class="form-group row">
 141                             <label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label>
 142                             <div class="col-sm-9">
 143                                 <div class="list-group list-group-horizontal">
 144                                     <button type="button" class="list-group-item list-group-item-action"
 145                                             (click)="setInputType('String')">
 146                                         String
 147                                     </button>
 148                                     <button type="button" class="list-group-item list-group-item-action"
 149                                             (click)="setInputType('Integer')">Integer
 150                                     </button>
 151                                     <button type="button" class="list-group-item list-group-item-action"
 152                                             (click)="setInputType('Boolean')">Boolean
 153                                     </button>
 154                                     <button type="button" class="list-group-item list-group-item-action"
 155                                             (click)="setInputType('List')">List
 156                                     </button>
 157                                     <button type="button" class="list-group-item list-group-item-action"
 158                                             (click)="setInputType('Other')">Other
 159                                     </button>
 160                                 </div>
 161                                 <input [hidden]="!isInputOtherType" type="text" class="form-control mt-2 mb-2"
 162                                        id="inputPassword4" placeholder="Add Other type name"
 163                                        [(ngModel)]="inputOtherType"
 164                                        (change)="setInputType(inputOtherType)">
 165
 166                             </div>
 167                         </div>
 168                         <div class="form-group row">
 169                             <label class="col-form-label col-sm-3 pt-0">Required <span>*</span></label>
 170                             <div class="col-sm-9">
 171                                 <div class="custom-control custom-radio custom-control-inline">
 172                                     <input type="radio" id="customRadioInline1" name="customRadioInline1"
 173                                            class="custom-control-input" (click)="setInputRequired(true)">
 174                                     <label class="custom-control-label" for="customRadioInline1">True</label>
 175                                 </div>
 176                                 <div class="custom-control custom-radio custom-control-inline">
 177                                     <input type="radio" id="customRadioInline2" name="customRadioInline1"
 178                                            class="custom-control-input" (click)="setInputRequired(false)">
 179                                     <label class="custom-control-label" for="customRadioInline2">False</label>
 180                                 </div>
 181                             </div>
 182                         </div>
 183                     </div>
 184                     <!--OUTPUTS Tab-->
 185                     <div class="tab-pane fade create-form" id="profile" role="tabpanel" aria-labelledby="profile-tab">
 186                         <div class="form-group row">
 187                             <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
 188                             <div class="col-sm-9">
 189                                 <input [(ngModel)]="outputActionAttribute.name" type="email" class="form-control"
 190                                        id="inputEmail3" placeholder="Attribute name">
 191                             </div>
 192                         </div>
 193                         <div class="form-group row">
 194                             <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
 195                             <div class="col-sm-9">
 196                                 <input [(ngModel)]="outputActionAttribute.description" type="text" class="form-control"
 197                                        id="inputPassword3" placeholder="Add some description">
 198                             </div>
 199                         </div>
 200                         <div class="form-group row">
 201                             <label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label>
 202                             <div class="col-sm-9">
 203                                 <div class="list-group list-group-horizontal">
 204                                     <button type="button" class="list-group-item list-group-item-action"
 205                                             (click)="setOutputType('String')">String
 206                                     </button>
 207                                     <button type="button" class="list-group-item list-group-item-action"
 208                                             (click)="setOutputType('Integer')">
 209                                         Integer
 210                                     </button>
 211                                     <button type="button" class="list-group-item list-group-item-action"
 212                                             (click)="setOutputType('Boolean')">
 213                                         Boolean
 214                                     </button>
 215                                     <button type="button" class="list-group-item list-group-item-action"
 216                                             (click)="setOutputType('List')">
 217                                         List
 218                                     </button>
 219                                     <button type="button" class="list-group-item list-group-item-action"
 220                                             (click)="setOutputType('Other')">
 221                                         Other
 222                                     </button>
 223                                 </div>
 224                                 <input [hidden]="!isOutputOtherType" type="text" class="form-control mt-2 mb-2"
 225                                        id="inputPassword3" placeholder="Add Other type name"
 226                                        [(ngModel)]="outputOtherType"
 227                                        (change)="setOutputType(outputOtherType)">
 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="customRadioInline3" name="customRadioInline3"
 235                                            class="custom-control-input" (click)="setOutputRequired(true)">
 236                                     <label class="custom-control-label" for="customRadioInline3">True</label>
 237                                 </div>
 238                                 <div class="custom-control custom-radio custom-control-inline">
 239                                     <input type="radio" id="customRadioInline4" name="customRadioInline3"
 240                                            class="custom-control-input">
 241                                     <label class="custom-control-label" for="customRadioInline4"
 242                                            (click)="setOutputRequired(false)">False</label>
 243                                 </div>
 244                             </div>
 245                         </div>
 246                     </div>
 247                 </div>
 248             </div>
 249             <div class="modal-footer">
 250                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
 251                 <button type="button" class="btn btn-primary" (click)="submitAttributes()">Submit Attributes</button>
 252             </div>
 253         </div>
 254     </div>
 255 </div>
 256
 257 <!--Action - Add Attribute From Function - Modal-->
 258 <div class="modal fade" id="exampleModalScrollable3" tabindex="-1" role="dialog"
 259      aria-labelledby="exampleModalScrollableTitle3" aria-hidden="true">
 260     <div class="modal-dialog  modal-dialog-scrollable" role="document">
 261         <div class="modal-content">
 262             <div class="modal-header">
 263                 <h5 class="modal-title" id="exampleModalScrollableTitle3">
 264                     Add Attributes from Function</h5>
 265                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 266                     <img src="assets/img/icon-close.svg"/>
 267                 </button>
 268             </div>
 269             <div class="modal-body createAttributeTabs">
 270                 <!--Action - Inputs & Outputs Attribute-->
 271                 <ul class="nav nav-tabs" id="myTab" role="tablist">
 272                     <li class="nav-item">
 273                         <a class="nav-link active" id="home-tab" data-toggle="tab" href="#input" role="tab"
 274                            aria-controls="home" aria-selected="true">Inputs</a>
 275                     </li>
 276                     <li class="nav-item">
 277                         <a class="nav-link" id="profile-tab" data-toggle="tab" href="#output" role="tab"
 278                            aria-controls="profile" aria-selected="false">Outputs</a>
 279                     </li>
 280                 </ul>
 281                 <div class="tab-content border-0 mt-2" id="myTabContent">
 282                     <!--INPUTS Tab-->
 283                     <div class="tab-pane fade show active create-form" id="input" role="tabpanel"
 284                          aria-labelledby="input-tab">
 285                         <div class="form-group row">
 286                             <div class="col">
 287                                 <input type="email" class="form-control" id="inputEmail3" placeholder="Attributes">
 288                                 <div class="container">
 289                                     <div *ngFor="let tempInput of tempInputs">{{tempInput}}</div>
 290                                 </div>
 291                             </div>
 292                         </div>
 293
 294                         <div class="row">
 295                             <div class="col-6">
 296                                 <b class="listBoxTitle">1. Choose Function Name</b>
 297                                 <div class="list-group addedFunctionsList" id="list-tab" role="tablist">
 298                                     <input type="text" class="form-control input-search-controller"
 299                                            placeholder="Functions">
 300                                     <div class="scrollWrapper" *ngFor="let step of steps">
 301                                         <a class="list-group-item list-group-item-action active" id="list-home-list"
 302                                            data-toggle="list" href="#list-home" role="tab" aria-controls="home"><i
 303                                                 class="icon-resource_resolution mr-1" aria-hidden="true"></i>
 304                                             {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="setInputAndOutputs(
 305                                             this.designerState.template.workflows[actionName]['steps'][step]['target']
 306                                             )"></i></a>
 307                                     </div>
 308                                 </div>
 309                             </div>
 310                             <div class="col-6">
 311                                 <b class="listBoxTitle">2. Choose Input Attribute Name</b>
 312                                 <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent">
 313                                     <input type="text" class="form-control input-search-controller"
 314                                            placeholder="Attributes">
 315                                     <div class="tab-pane fade show active" id="list-home" role="tabpanel"
 316                                          aria-labelledby="list-home-list">
 317                                         <div class="scrollWrapper">
 318                                             <div *ngIf="suggestedInputs.length>0" class="btn-group btn-group-toggle"
 319                                                  data-toggle="buttons">
 320                                                 <label class="btn btn-secondary active"
 321                                                        *ngFor="let suggestedInput of suggestedInputs" (click)="addTempInput(suggestedInput)">
 322                                                     <input type="radio" name="options" [id]="suggestedInput"
 323                                                            autocomplete="off"
 324                                                            (click)="addTempInput(suggestedInput)"> {{suggestedInput}}
 325                                                 </label>
 326                                             </div>
 327                                             <div *ngIf="suggestedInputs.length == 0">you don't have data</div>
 328                                         </div>
 329                                     </div>
 330                                 </div>
 331                             </div>
 332                         </div>
 333                     </div>
 334                     <!--OUTPUTS Tab-->
 335                     <div class="tab-pane fade create-form" id="output" role="tabpanel" aria-labelledby="output-tab">
 336                         <div class="form-group row">
 337                             <div class="col">
 338                                 <input type="email" class="form-control" id="inputEmail3" placeholder="Attributes">
 339                                 <div class="container">
 340                                     <div *ngFor="let tempOutput of tempOutputs">{{tempOutput}}</div>
 341                                 </div>
 342                             </div>
 343                         </div>
 344
 345                         <div class="row">
 346                             <div class="col-6">
 347                                 <b class="listBoxTitle">1. Choose Function Name</b>
 348                                 <div class="list-group addedFunctionsList" id="list-tab" role="tablist">
 349                                     <input type="text" class="form-control input-search-controller"
 350                                            placeholder="Functions">
 351                                     <div class="scrollWrapper" *ngFor="let step of steps">
 352                                         <a class="list-group-item list-group-item-action active" id="list-home-list"
 353                                            data-toggle="list" href="#list-home" role="tab" aria-controls="home"><i
 354                                                 class="icon-resource_resolution mr-1" aria-hidden="true"></i>
 355                                             {{step}} <i class="icon-next_arrow" aria-hidden="true"
 356                                                         (click)="setInputAndOutputs(
 357                                             this.designerState.template.workflows[actionName]['steps'][step]['target']
 358                                             )"></i></a>
 359                                     </div>
 360                                 </div>
 361                             </div>
 362                             <div class="col-6">
 363                                 <b class="listBoxTitle">2. Choose output Attribute Name</b>
 364                                 <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent">
 365                                     <input type="text" class="form-control input-search-controller"
 366                                            placeholder="Attributes">
 367                                     <div class="tab-pane fade show active" id="list-home" role="tabpanel"
 368                                          aria-labelledby="list-home-list">
 369                                         <div class="scrollWrapper">
 370                                             <div *ngIf="suggestedOutputs.length > 0" class="btn-group btn-group-toggle"
 371                                                  data-toggle="buttons">
 372                                                 <label class="btn btn-secondary active"
 373                                                        *ngFor="let suggestedOutput of suggestedOutputs">
 374                                                     <input type="radio" name="options" [id]="suggestedOutput"
 375                                                            autocomplete="off"
 376                                                            (dblclick)="addTempOutput(suggestedOutput)"> {{suggestedOutput}}
 377                                                 </label>
 378
 379                                             </div>
 380                                             <div *ngIf="suggestedOutputs.length == 0">you don't have data</div>
 381                                         </div>
 382                                     </div>
 383                                 </div>
 384                             </div>
 385                         </div>
 386                     </div>
 387                 </div>
 388             </div>
 389             <div class="modal-footer">
 390                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
 391                 <button type="button" class="btn btn-primary" (click)="submitTempAttributes()">Submit Attributes</button>
 392             </div>
 393         </div>
 394     </div>
 395 </div>
 396
 397 <!--Delete Action - Modal-->
 398 <div class="modal fade" id="exampleModalScrollable1" tabindex="-1" role="dialog"
 399      aria-labelledby="exampleModalScrollableTitle1" aria-hidden="true">
 400     <div class="modal-dialog modal-dialog-scrollable" role="document">
 401         <div class="modal-content">
 402             <div class="modal-header">
 403                 <h5 class="modal-title" id="exampleModalScrollableTitle1">
 404                     Delete Action</h5>
 405                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 406                     <img src="assets/img/icon-close.svg"/>
 407                 </button>
 408             </div>
 409             <div class="modal-body">
 410                 Are you sure you want to delete <b>resource-assignment</b> action?
 411             </div>
 412             <div class="modal-footer">
 413                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
 414                 <button type="button" class="btn btn-primary">Delete</button>
 415             </div>
 416         </div>
 417     </div>
 418 </div>
 419 <!--Action - Edit Custom Attribute - Modal-->
 420 <div class="modal fade" id="exampleModalScrollable2" tabindex="-1" role="dialog"
 421      aria-labelledby="exampleModalScrollableTitle2" aria-hidden="true">
 422     <div class="modal-dialog modal-dialog-scrollable" role="document">
 423         <div class="modal-content">
 424             <div class="modal-header">
 425                 <h5 class="modal-title" id="exampleModalScrollableTitle2">
 426                     Edit Custom Attributes</h5>
 427                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 428                     <img src="assets/img/icon-close.svg"/>
 429                 </button>
 430             </div>
 431             <div class="modal-body createAttributeTabs">
 432                 <div class="create-form">
 433                     <div class="form-group row">
 434                         <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
 435                         <div class="col-sm-9">
 436                             <input type="email" class="form-control" id="inputEmail3" placeholder="Attribute name"
 437                                    value="resource-assignment-properties">
 438                         </div>
 439                     </div>
 440                     <div class="form-group row">
 441                         <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
 442                         <div class="col-sm-9">
 443                             <input type="text" class="form-control" id="inputPassword3"
 444                                    placeholder="Add some description"
 445                                    value="Dynamic PropertyDefinition for workflow(resource-assignment).">
 446                         </div>
 447                     </div>
 448                     <div class="form-group row">
 449                         <label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label>
 450                         <div class="col-sm-9">
 451                             <div class="list-group list-group-horizontal">
 452                                 <button type="button" class="list-group-item list-group-item-action">String
 453                                 </button>
 454                                 <button type="button" class="list-group-item list-group-item-action">Integer</button>
 455                                 <button type="button" class="list-group-item list-group-item-action">Boolean</button>
 456                                 <button type="button" class="list-group-item list-group-item-action">List</button>
 457                                 <button type="button" class="list-group-item list-group-item-action active">Other
 458                                 </button>
 459                             </div>
 460                             <input type="text" class="form-control mt-2 mb-2" id="inputPassword3"
 461                                    placeholder="Add Other type name" value="dt-resource-assignment-properties">
 462                         </div>
 463                     </div>
 464                     <div class="form-group row">
 465                         <label class="col-form-label col-sm-3 pt-0">Required <span>*</span></label>
 466                         <div class="col-sm-9">
 467                             <div class="custom-control custom-radio custom-control-inline">
 468                                 <input type="radio" id="customRadioInline1" name="customRadioInline1"
 469                                        class="custom-control-input" checked>
 470                                 <label class="custom-control-label" for="customRadioInline1">True</label>
 471                             </div>
 472                             <div class="custom-control custom-radio custom-control-inline">
 473                                 <input type="radio" id="customRadioInline2" name="customRadioInline1"
 474                                        class="custom-control-input">
 475                                 <label class="custom-control-label" for="customRadioInline2">False</label>
 476                             </div>
 477                         </div>
 478                     </div>
 479                 </div>
 480                 <div class="modal-footer">
 481                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
 482                     <button type="button" class="btn btn-primary">Save</button>
 483                 </div>
 484             </div>
 485         </div>
 486     </div>
 487 </div>