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" (click)="clearFormInputs()"><i class="icon-custom-attribute"
  18                             type="button" aria-hidden="true"></i></button>
  19                     <span>Create Custom</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>Import From Function</span>
  26                 </div>
  27             </div>
  28         </div>
  29     </div>
  30     <!--INPUTS-->
  31     <div class="accordion action-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 class="tooltipHTML">{{input.name}}
  47                                     <span class="tooltiptext">
  48                                         <h5>integer</h5>
  49                                         <h6>Value:</h6>
  50                                         <span>function_name</span>
  51                                         <span>attribute_name</span>
  52                                         <span>artifact_name</span>
  53                                         <span>parameter_name</span>
  54                                     </span>
  55                                     <i [hidden]="!input.required" class="icon-required-star" type="button"
  56                                        aria-hidden="true"></i>
  57                                     <i [hidden]="input.required" class="icon-required-star optional-attribute"
  58                                        type="button" aria-hidden="true"></i>
  59                                 </label>
  60                                 <div class="attributeOptions">
  61                                     <a data-toggle="modal" data-target="#exampleModalScrollable2"
  62                                        class="accordion-delete editAttribute" tooltip="Edit Attribute"
  63                                        placement="bottom" (click)="editAttribute(input)"><i class="icon-edit"></i></a>
  64                                     <a class="accordion-delete deleteAttribute" tooltip="Delete Attribute"
  65                                        placement="bottom"><i class="icon-delete-sm"></i></a>
  66                                 </div>
  67                             </div>
  68                         </div>
  69                     </div>
  70                 </div>
  71             </div>
  72         </div>
  73     </div>
  74     <!--OUTPUTS-->
  75     <div class="accordion action-accordion" id="accordionExample1">
  76         <div class="card">
  77             <div class="card-header" id="headingOne">
  78                 <h2 class="mb-0">
  79                     <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"
  80                             aria-expanded="true" aria-controls="collapseTwo">
  81                         Outputs
  82                     </button>
  83                 </h2>
  84             </div>
  85
  86             <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample1">
  87                 <div class="card-body">
  88                     <div class="row">
  89                         <div class="col">
  90                             <div class="form-group" *ngFor="let output of outputs">
  91                                 <label class="tooltipHTML">{{output.name}}
  92                                     <span class="tooltiptext">
  93                                         <h5>integer</h5>
  94                                         <h6>Value:</h6>
  95                                         <span>function_name</span>
  96                                         <span>attribute_name</span>
  97                                         <span>artifact_name</span>
  98                                         <span>parameter_name</span>
  99                                     </span>
 100                                     <i [hidden]="!output.required" class="icon-required-star" type="button"
 101                                        aria-hidden="true"></i>
 102                                     <i [hidden]="output.required" class="icon-required-star optional-attribute"
 103                                        type="button" aria-hidden="true"></i>
 104
 105                                 </label>
 106                                 <div class="attributeOptions">
 107                                     <a data-toggle="modal" data-target="#exampleModalScrollable2"
 108                                        class="accordion-delete editAttribute" tooltip="Edit Attribute"
 109                                        placement="bottom" (click)="editAttribute(output)"><i class="icon-edit"></i></a>
 110                                     <a class="accordion-delete deleteAttribute" tooltip="Delete Attribute"
 111                                        placement="bottom"><i class="icon-delete-sm"></i></a>
 112                                 </div>
 113                             </div>
 114                         </div>
 115                     </div>
 116                 </div>
 117             </div>
 118         </div>
 119     </div>
 120 </div>
 121 <!--Action - Add Custom Attribute - Modal-->
 122 <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
 123      aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
 124     <div class="modal-dialog  modal-dialog-scrollable" role="document">
 125         <div class="modal-content">
 126             <div class="modal-header">
 127                 <h5 class="modal-title" id="exampleModalScrollableTitle">
 128                     Add Custom Attributes</h5>
 129                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 130                     <img src="assets/img/icon-close.svg"/>
 131                 </button>
 132             </div>
 133             <div class="modal-body createAttributeTabs">
 134                 <!--Action - Inputs & Outputs Attribute-->
 135                 <ul class="nav nav-tabs" id="myTab" role="tablist">
 136                     <li class="nav-item">
 137                         <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
 138                            aria-controls="home" aria-selected="true">Inputs</a>
 139                     </li>
 140                     <li class="nav-item">
 141                         <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
 142                            aria-controls="profile" aria-selected="false">Outputs</a>
 143                     </li>
 144                 </ul>
 145                 <div class="tab-content" id="myTabContent">
 146                     <!--INPUTS Tab-->
 147                     <div class="tab-pane fade show active create-form" id="home" role="tabpanel"
 148                          aria-labelledby="home-tab">
 149                         <div class="form-group row">
 150                             <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
 151                             <div class="col-sm-9">
 152                                 <input [(ngModel)]="inputActionAttribute.name" type="email" class="form-control"
 153                                        id="inputEmail3" placeholder="Attribute name">
 154                             </div>
 155                         </div>
 156                         <div class="form-group row">
 157                             <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
 158                             <div class="col-sm-9">
 159                                 <input [(ngModel)]="inputActionAttribute.description" type="text" class="form-control"
 160                                        id="inputPassword3" placeholder="Add some description">
 161                             </div>
 162                         </div>
 163                         <div class="form-group row">
 164                             <label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label>
 165                             <div class="col-sm-9">
 166                                 <div class="list-group list-group-horizontal">
 167                                     <button type="button" class="list-group-item list-group-item-action"
 168                                             (click)="setInputType('string')">
 169                                         String
 170                                     </button>
 171                                     <button type="button" class="list-group-item list-group-item-action"
 172                                             (click)="setInputType('integer')">Integer
 173                                     </button>
 174                                     <button type="button" class="list-group-item list-group-item-action"
 175                                             (click)="setInputType('boolean')">Boolean
 176                                     </button>
 177                                     <button type="button" class="list-group-item list-group-item-action"
 178                                             (click)="setInputType('list')">List
 179                                     </button>
 180                                     <button type="button" class="list-group-item list-group-item-action"
 181                                             (click)="setInputType('Other')">Other
 182                                     </button>
 183                                 </div>
 184                                 <input [hidden]="!isInputOtherType" type="text" class="form-control mt-2 mb-2"
 185                                        id="inputPassword4" placeholder="Add Other type name"
 186                                        [(ngModel)]="inputOtherType"
 187                                        (change)="setInputType(inputOtherType)">
 188
 189                             </div>
 190                         </div>
 191                         <div class="form-group row">
 192                             <label class="col-form-label col-sm-3 pt-0">Required <span>*</span></label>
 193                             <div class="col-sm-9">
 194                                 <div class="custom-control custom-radio custom-control-inline">
 195                                     <input type="radio" id="customRadioInline1" name="customRadioInline1"
 196                                            class="custom-control-input" (click)="setInputRequired(true)">
 197                                     <label class="custom-control-label" for="customRadioInline1">True</label>
 198                                 </div>
 199                                 <div class="custom-control custom-radio custom-control-inline">
 200                                     <input type="radio" id="customRadioInline2" name="customRadioInline1"
 201                                            class="custom-control-input" (click)="setInputRequired(false)">
 202                                     <label class="custom-control-label" for="customRadioInline2">False</label>
 203                                 </div>
 204                             </div>
 205                         </div>
 206                     </div>
 207                     <!--OUTPUTS Tab-->
 208                     <div class="tab-pane fade create-form" id="profile" role="tabpanel" aria-labelledby="profile-tab">
 209                         <div class="form-group row">
 210                             <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
 211                             <div class="col-sm-9">
 212                                 <input [(ngModel)]="outputActionAttribute.name" type="email" class="form-control"
 213                                        id="inputEmail3" placeholder="Attribute name">
 214                             </div>
 215                         </div>
 216                         <div class="form-group row">
 217                             <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
 218                             <div class="col-sm-9">
 219                                 <input [(ngModel)]="outputActionAttribute.description" type="text" class="form-control"
 220                                        id="inputPassword3" placeholder="Add some description">
 221                             </div>
 222                         </div>
 223                         <div class="form-group row">
 224                             <label class="col-form-label col-sm-3 pt-0">Required <span>*</span></label>
 225                             <div class="col-sm-9">
 226                                 <div class="custom-control custom-radio custom-control-inline">
 227                                     <input type="radio" id="customRadioInline3" name="customRadioInline3"
 228                                            class="custom-control-input" (click)="setOutputRequired(true)">
 229                                     <label class="custom-control-label" for="customRadioInline3">True</label>
 230                                 </div>
 231                                 <div class="custom-control custom-radio custom-control-inline">
 232                                     <input type="radio" id="customRadioInline4" name="customRadioInline3"
 233                                            class="custom-control-input">
 234                                     <label class="custom-control-label" for="customRadioInline4"
 235                                            (click)="setOutputRequired(false)">False</label>
 236                                 </div>
 237                             </div>
 238                         </div>
 239                         <div class="form-group row">
 240                             <label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label>
 241                             <div class="col-sm-9">
 242                                 <div class="list-group list-group-horizontal">
 243                                     <button type="button" class="list-group-item list-group-item-action"
 244                                             (click)="setOutputType('string')">String
 245                                     </button>
 246                                     <button type="button" class="list-group-item list-group-item-action"
 247                                             (click)="setOutputType('integer')">
 248                                         Integer
 249                                     </button>
 250                                     <button type="button" class="list-group-item list-group-item-action"
 251                                             (click)="setOutputType('boolean')">
 252                                         Boolean
 253                                     </button>
 254                                     <button type="button" class="list-group-item list-group-item-action"
 255                                             (click)="setOutputType('list')">
 256                                         List
 257                                     </button>
 258                                     <button type="button" class="list-group-item list-group-item-action"
 259                                             (click)="setOutputType('Other')">
 260                                         Other
 261                                     </button>
 262                                 </div>
 263                                 <input [hidden]="!isOutputOtherType" type="text" class="form-control mt-2 mb-2"
 264                                        id="inputPassword3" placeholder="Add Other type name"
 265                                        [(ngModel)]="outputOtherType"
 266                                        (change)="setOutputType(outputOtherType)">
 267                             </div>
 268                         </div>
 269                         <!--Get Attribute Value-->
 270                         <div class="form-group row mb-0">
 271                             <label class="col-form-label col pt-0">
 272                                 Value <span class="notation">(get_attribute)</span>
 273                             </label>
 274                         </div>
 275                         <div class="form-group row">
 276                             <div class="col">
 277                                 <input type="email" class="form-control" id="inputEmail3" placeholder="Attributes">
 278                                 <div class="container p-0">
 279                                     <!-- <div *ngFor="let tempInput of steps" class="selectedWrapper">{{tempInput}}</div> -->
 280                                 </div>
 281                             </div>
 282                         </div>
 283
 284
 285                         <section class="carousel" aria-label="Gallery">
 286
 287                             <ol class="carousel__viewport">
 288                                 <!--Function-->
 289                                 <li id="carousel__slide1" tabindex="0" class="carousel__slide">
 290                                     <b class="listBoxTitle">1. Choose Function Name</b>
 291                                     <div class="list-group addedFunctionsList" id="list-tab" role="tablist">
 292                                         <input type="text" class="form-control input-search-controller"
 293                                                placeholder="Functions">
 294                                         <div class="scrollWrapper" *ngFor="let step of steps">
 295                                             <a class="list-group-item list-group-item-action active" id="list-home-list"
 296                                                data-toggle="list" href="#list-home" role="tab" aria-controls="home">
 297                                                 <i class="icon-resource_resolution mr-1" aria-hidden="true"></i>
 298                                                 {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="getAttributesAndOutputs(
 299                                                                     this.designerState.template.workflows[actionName]['steps'][step]['target']
 300                                                                     )"></i></a>
 301                                         </div>
 302                                     </div>
 303                                 </li>
 304                                 <!--Attribute-->
 305                                 <li id="carousel__slide2" tabindex="1" class="carousel__slide">
 306                                     <b class="listBoxTitle">2. Choose Attribute Name</b>
 307                                     <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent">
 308                                         <input type="text" class="form-control input-search-controller"
 309                                                placeholder="Attributes">
 310                                         <div class="tab-pane fade show active" id="list-home" role="tabpanel"
 311                                              aria-labelledby="list-home-list">
 312                                             <div class="scrollWrapper">
 313                                                 <div *ngIf="suggestedAttributes.length>0"
 314                                                     class="btn-group btn-group-toggle" data-toggle="buttons">
 315                                                     <label class="btn tooltipHTML tooltipGetAtt"
 316                                                         *ngFor="let suggestedAttribute of suggestedAttributes"
 317                                                         [id]="suggestedAttribute"
 318                                                         (click)="addTempOutputAttr(suggestedAttribute)">
 319                                                         <span class="tooltiptext">
 320                                                             <h5>integer</h5>
 321                                                         </span>
 322                                                         <input type="radio" name="options"
 323                                                                [id]="suggestedAttribute+'.,.'"
 324                                                                autocomplete="off" [checked]="suggestedAttributes[0].includes(suggestedAttribute)">
 325                                                         {{suggestedAttribute}}
 326                                                         <i class="icon-required-star" type="button"
 327                                                             aria-hidden="true"></i>
 328                                                     </label>
 329
 330                                                 </div>
 331                                                 <div *ngIf="suggestedAttributes.length == 0">
 332                                                     <p class="noAttributes">No Attributes Available</p>
 333                                                 </div>
 334                                             </div>
 335                                         </div>
 336                                     </div>
 337                                 </li>
 338                                 <!--Artifact-->
 339                                 <li id="carousel__slide3" [hidden]="isNotComponentResourceResolution" tabindex="2"
 340                                     class="carousel__slide">
 341                                     <b class="listBoxTitle">3. Choose Artifact Name</b>
 342                                     <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent">
 343                                         <input type="text" class="form-control input-search-controller"
 344                                                placeholder="Attributes">
 345                                         <div class="tab-pane fade show active" id="list-home" role="tabpanel"
 346                                              aria-labelledby="list-home-list">
 347                                             <div class="scrollWrapper">
 348                                                 <div *ngIf="currentArtifacts.length>0"
 349                                                      class="btn-group btn-group-toggle" data-toggle="buttons">
 350                                                     <label class="btn btn-secondary"
 351                                                            *ngFor="let suggestedArtifact of currentArtifacts"
 352                                                            (click)="addArtifactFile(suggestedArtifact)">
 353                                                         <input type="radio" name="options" [id]="suggestedArtifact"
 354                                                                autocomplete="off"
 355                                                                (click)="addArtifactFile(suggestedArtifact)"
 356                                                                [checked]="currentArtifacts[0].includes(suggestedArtifact)"
 357                                                         >
 358                                                         {{suggestedArtifact}}
 359                                                     </label>
 360
 361                                                 </div>
 362                                                 <div *ngIf="currentArtifacts.length == 0">
 363                                                     <p class="noAttributes">No Artifacts Available</p>
 364                                                 </div>
 365                                             </div>
 366                                         </div>
 367                                     </div>
 368                                 </li>
 369                                 <!--Parameter-->
 370                                 <li id="carousel__slide4"
 371                                     [hidden]="isParametersHidden" tabindex="3"
 372                                     class="carousel__slide">
 373                                     <b class="listBoxTitle">4. Choose Parameter Name</b>
 374                                     <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent">
 375                                         <input type="text" class="form-control input-search-controller"
 376                                                placeholder="Attributes">
 377                                         <div class="tab-pane fade show active" id="list-home" role="tabpanel"
 378                                              aria-labelledby="list-home-list">
 379                                             <div class="scrollWrapper">
 380                                                 <div *ngIf="suggestedMappingParameters.length>0"
 381                                                      class="btn-group btn-group-toggle" data-toggle="buttons">
 382                                                     <label class="btn btn-secondary"
 383                                                            *ngFor="let suggestedMappingParameter of suggestedMappingParameters"
 384                                                            (click)="addSuggestedMappingParameter(suggestedMappingParameter)">
 385                                                            <!--[class]="suggestedMappingParameters[0].includes(suggestedMappingParameter)?'btn btn-secondary active':'btn btn-secondary'">
 386                                                        --> <input type="radio" name="options" [id]="suggestedMappingParameter"
 387                                                                autocomplete="off"
 388                                                                (click)="addSuggestedMappingParameter(suggestedMappingParameter)"
 389                                                                [checked]="suggestedMappingParameters[0].includes(suggestedMappingParameter)"
 390
 391                                                         >
 392                                                         {{suggestedMappingParameter}}
 393                                                     </label>
 394
 395                                                 </div>
 396                                                 <div *ngIf="suggestedMappingParameters.length == 0">
 397                                                     <p class="noAttributes">No Attributes Available</p>
 398                                                 </div>
 399                                             </div>
 400                                         </div>
 401                                     </div>
 402                                 </li>
 403                             </ol>
 404                             <aside class="carousel__navigation">
 405                                 <ol class="carousel__navigation-list">
 406                                     <li class="carousel__navigation-item">
 407                                         <a href="#carousel__slide1" class="carousel__navigation-button">Functions</a>
 408                                     </li>
 409                                     <li class="carousel__navigation-item">
 410                                         <a href="#carousel__slide2" class="carousel__navigation-button">Attributes</a>
 411                                     </li>
 412                                     <li class="carousel__navigation-item" [hidden]="isNotComponentResourceResolution">
 413                                         <a href="#carousel__slide3" class="carousel__navigation-button">Artifacts</a>
 414                                     </li>
 415                                     <li class="carousel__navigation-item"
 416                                         [hidden]="isParametersHidden">
 417                                         <a href="#carousel__slide4"
 418                                            class="carousel__navigation-button">Parameters</a>
 419                                     </li>
 420                                 </ol>
 421                             </aside>
 422                         </section>
 423                     </div>
 424                 </div>
 425             </div>
 426             <div class="modal-footer">
 427                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
 428                 <button type="button" class="btn btn-primary" (click)="submitAttributes()">Submit Attributes</button>
 429             </div>
 430         </div>
 431     </div>
 432 </div>
 433
 434 <!--Action - Add Attribute From Function - Modal-->
 435 <div class="modal fade" id="exampleModalScrollable3" tabindex="-1" role="dialog"
 436      aria-labelledby="exampleModalScrollableTitle3" aria-hidden="true">
 437     <div class="modal-dialog  modal-dialog-scrollable" role="document">
 438         <div class="modal-content">
 439             <div class="modal-header">
 440                 <h5 class="modal-title" id="exampleModalScrollableTitle3">
 441                     Add Attributes from Function</h5>
 442                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 443                     <img src="assets/img/icon-close.svg"/>
 444                 </button>
 445             </div>
 446             <div class="modal-body createAttributeTabs">
 447                 <!--Action - Inputs & Outputs Attribute-->
 448                 <ul class="nav nav-tabs" id="myTab" role="tablist">
 449                     <li class="nav-item">
 450                         <a class="nav-link active" id="home-tab" data-toggle="tab" href="#input" role="tab"
 451                            aria-controls="home" aria-selected="true" >Inputs</a>
 452                     </li>
 453                     <li class="nav-item">
 454                         <a class="nav-link" id="profile-tab" data-toggle="tab" href="#output" role="tab"
 455                            aria-controls="profile" aria-selected="false" >Outputs</a>
 456                     </li>
 457                 </ul>
 458                 <div class="tab-content border-0" id="myTabContent">
 459                     <!--INPUTS Tab-->
 460                     <div class="tab-pane fade show active create-form" id="input" role="tabpanel"
 461                          aria-labelledby="input-tab">
 462                         <div class="form-group row">
 463                             <div class="col">
 464 <!--<input type="email" class="form-control" id="inputEmail3" placeholder="Attributes">-->
 465                                 <div class="container p-0">
 466                                     <label>Selected Attributes</label>
 467                                     <div *ngFor="let tempInput of tempInputs" class="selectedWrapper">{{tempInput}}
 468                                     </div>
 469                                 </div>
 470                             </div>
 471                         </div>
 472
 473                         <div class="row">
 474                             <div class="col-6">
 475                                 <b class="listBoxTitle">1. Choose Function Name</b>
 476                                 <div class="list-group addedFunctionsList" id="list-tab" role="tablist">
 477                                     <input type="text" class="form-control input-search-controller"
 478                                            placeholder="Functions">
 479                                     <div class="scrollWrapper" *ngFor="let step of steps">
 480                                         <a class="list-group-item list-group-item-action active" id="list-home-list"
 481                                            data-toggle="list" href="#list-home" role="tab" aria-controls="home"><i
 482                                                 class="icon-resource_resolution mr-1" aria-hidden="true"></i>
 483                                             {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="setInputAndOutputs(
 484                                             this.designerState.template.workflows[actionName]['steps'][step]['target']
 485                                             )"></i></a>
 486                                     </div>
 487                                 </div>
 488                             </div>
 489                             <div class="col-6">
 490                                 <b class="listBoxTitle">2. Choose Input Attribute Name</b>
 491                                 <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent">
 492                                     <input type="text" class="form-control input-search-controller"
 493                                            placeholder="Attributes">
 494                                     <div class="tab-pane fade show active" id="list-home" role="tabpanel"
 495                                          aria-labelledby="list-home-list">
 496                                         <div class="scrollWrapper">
 497                                             <div *ngIf="suggestedInputs.length>0" class="btn-group btn-group-toggle"
 498                                                 data-toggle="buttons">
 499                                                 <label class="btn tooltipHTML tooltipGetAtt active"
 500                                                     *ngFor="let suggestedInput of suggestedInputs"
 501                                                     (click)="addTempInput(suggestedInput)">
 502                                                     <span class="tooltiptext">
 503                                                         <h5>integer</h5>
 504                                                     </span>
 505                                                     <input type="radio" name="options" [id]="suggestedInput"
 506                                                            autocomplete="off" (click)="addTempInput(suggestedInput)">
 507                                                     {{suggestedInput}}
 508                                                     <i class="icon-required-star" type="button"
 509                                                         aria-hidden="true"></i>
 510                                                 </label>
 511                                             </div>
 512                                             <div *ngIf="suggestedInputs.length == 0">
 513                                                 <p class="noAttributes">No Attributes Available</p>
 514                                             </div>
 515                                         </div>
 516                                     </div>
 517                                 </div>
 518                             </div>
 519                         </div>
 520                     </div>
 521                     <!--OUTPUTS Tab-->
 522                     <div class="tab-pane fade create-form" id="output" role="tabpanel" aria-labelledby="output-tab">
 523                         <div class="form-group row">
 524                             <div class="col">
 525                                 <input type="email" class="form-control" id="inputEmail3" placeholder="Attributes">
 526                                 <div class="container p-0">
 527                                     <div *ngFor="let tempOutput of tempOutputs" class="selectedWrapper">{{tempOutput}}
 528                                     </div>
 529                                 </div>
 530                             </div>
 531                         </div>
 532
 533                         <div class="row">
 534                             <div class="col-6">
 535                                 <b class="listBoxTitle">1. Choose Function Name</b>
 536                                 <div class="list-group addedFunctionsList" id="list-tab" role="tablist">
 537                                     <input type="text" class="form-control input-search-controller"
 538                                            placeholder="Functions">
 539                                     <div class="scrollWrapper" *ngFor="let step of steps">
 540                                         <a class="list-group-item list-group-item-action active" id="list-home-list"
 541                                            data-toggle="list" href="#list-home" role="tab" aria-controls="home"><i
 542                                                 class="icon-resource_resolution mr-1" aria-hidden="true"></i>
 543                                             {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="setInputAndOutputs(
 544                                             this.designerState.template.workflows[actionName]['steps'][step]['target']
 545                                             )"></i></a>
 546                                     </div>
 547                                 </div>
 548                             </div>
 549                             <div class="col-6">
 550                                 <b class="listBoxTitle">2. Choose output Attribute Name</b>
 551                                 <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent">
 552                                     <input type="text" class="form-control input-search-controller"
 553                                            placeholder="Attributes">
 554                                     <div class="tab-pane fade show active" id="list-home" role="tabpanel"
 555                                          aria-labelledby="list-home-list">
 556                                         <div class="scrollWrapper">
 557                                             <div *ngIf="suggestedOutputs.length > 0" class="btn-group btn-group-toggle"
 558                                                 data-toggle="buttons">
 559                                                 <label class="btn tooltipHTML tooltipGetAtt active"
 560                                                     *ngFor="let suggestedOutput of suggestedOutputs">
 561                                                     <span class="tooltiptext">
 562                                                         <h5>integer</h5>
 563                                                     </span>
 564                                                     <input type="radio" name="options" [id]="suggestedOutput"
 565                                                            autocomplete="off"
 566                                                            (dblclick)="addTempOutput(suggestedOutput)">
 567                                                     {{suggestedOutput}}
 568                                                     <i class="icon-required-star" type="button"
 569                                                         aria-hidden="true"></i>
 570                                                 </label>
 571
 572                                             </div>
 573                                             <div *ngIf="suggestedOutputs.length == 0">
 574                                                 <p class="noAttributes">No Attributes Available</p>
 575                                             </div>
 576                                         </div>
 577                                     </div>
 578                                 </div>
 579                             </div>
 580                         </div>
 581                     </div>
 582                 </div>
 583             </div>
 584             <div class="modal-footer">
 585                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
 586                 <button type="button" class="btn btn-primary" (click)="submitTempAttributes()">Submit
 587                     Attributes
 588                 </button>
 589             </div>
 590         </div>
 591     </div>
 592 </div>
 593
 594 <!--Delete Action - Modal-->
 595 <div class="modal fade" id="exampleModalScrollable1" tabindex="-1" role="dialog"
 596      aria-labelledby="exampleModalScrollableTitle1" aria-hidden="true">
 597     <div class="modal-dialog modal-dialog-scrollable" role="document">
 598         <div class="modal-content">
 599             <div class="modal-header">
 600                 <h5 class="modal-title" id="exampleModalScrollableTitle1">
 601                     Delete Action</h5>
 602                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 603                     <img src="assets/img/icon-close.svg"/>
 604                 </button>
 605             </div>
 606             <div class="modal-body">
 607                 Are you sure you want to delete <b>resource-assignment</b> action?
 608             </div>
 609             <div class="modal-footer">
 610                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
 611                 <button type="button" class="btn btn-primary">Delete</button>
 612             </div>
 613         </div>
 614     </div>
 615 </div>
 616 <!--Action - Edit Custom Attribute - Modal-->
 617 <div class="modal fade" id="exampleModalScrollable2" tabindex="-1" role="dialog"
 618      aria-labelledby="exampleModalScrollableTitle2" aria-hidden="true">
 619     <div class="modal-dialog modal-dialog-scrollable" role="document">
 620         <div class="modal-content">
 621             <div class="modal-header">
 622                 <h5 class="modal-title" id="exampleModalScrollableTitle2">
 623                     Edit Custom Attributes</h5>
 624                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 625                     <img src="assets/img/icon-close.svg"/>
 626                 </button>
 627             </div>
 628             <div class="modal-body createAttributeTabs">
 629                 <div class="create-form">
 630                     <div class="form-group row">
 631                         <label for="inputEmail3" class="col-sm-3 col-form-label">Name <span>*</span></label>
 632                         <div class="col-sm-9">
 633                             <input type="email" class="form-control" id="inputEmail3" placeholder="Attribute name"
 634                                    value="resource-assignment-properties">
 635                         </div>
 636                     </div>
 637                     <div class="form-group row">
 638                         <label for="inputPassword3" class="col-sm-3 col-form-label">Description</label>
 639                         <div class="col-sm-9">
 640                             <input type="text" class="form-control" id="inputPassword3"
 641                                    placeholder="Add some description"
 642                                    value="Dynamic PropertyDefinition for workflow(resource-assignment).">
 643                         </div>
 644                     </div>
 645                     <div class="form-group row">
 646                         <label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label>
 647                         <div class="col-sm-9">
 648                             <div class="list-group list-group-horizontal">
 649                                 <button type="button" class="list-group-item list-group-item-action">String
 650                                 </button>
 651                                 <button type="button" class="list-group-item list-group-item-action">Integer</button>
 652                                 <button type="button" class="list-group-item list-group-item-action">Boolean</button>
 653                                 <button type="button" class="list-group-item list-group-item-action">List</button>
 654                                 <button type="button" class="list-group-item list-group-item-action active">Other
 655                                 </button>
 656                             </div>
 657                             <input type="text" class="form-control mt-2 mb-2" id="inputPassword3"
 658                                    placeholder="Add Other type name" value="dt-resource-assignment-properties">
 659                         </div>
 660                     </div>
 661                     <div class="form-group row">
 662                         <label class="col-form-label col-sm-3 pt-0">Required <span>*</span></label>
 663                         <div class="col-sm-9">
 664                             <div class="custom-control custom-radio custom-control-inline">
 665                                 <input type="radio" id="customRadioInline1" name="customRadioInline1"
 666                                        class="custom-control-input" checked>
 667                                 <label class="custom-control-label" for="customRadioInline1">True</label>
 668                             </div>
 669                             <div class="custom-control custom-radio custom-control-inline">
 670                                 <input type="radio" id="customRadioInline2" name="customRadioInline1"
 671                                        class="custom-control-input">
 672                                 <label class="custom-control-label" for="customRadioInline2">False</label>
 673                             </div>
 674                         </div>
 675                     </div>
 676                 </div>
 677                 <div class="modal-footer">
 678                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
 679                     <button type="button" class="btn btn-primary">Save</button>
 680                 </div>
 681             </div>
 682         </div>
 683     </div>
 684 </div>