Create New Action's Modal

Issue-ID: CCSDK-2356

Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Change-Id: Ib40220b793a08c2740e114946a42fb7d04edbcb6

2 files changed, 536 insertions, 3 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
index 6c7e1efc6..9e1c9b709 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
@@ -107,9 +107,542 @@
                             </div>
                         </div>
                         <div class="col-2 package-view-button pt-3">
-                            <button class="btn btn-sm btn-primary mb-2" (click)="goToDesignerMode()">Designer
+                            <!-- <button class="btn btn-sm btn-primary mb-2" (click)="goToDesignerMode()">Designer
                                 Mode
+                            </button> -->
+                            <!-- Button trigger modal - 1st Action -->
+                            <button type="button" class="btn btn-sm btn-primary mb-2" data-toggle="modal"
+                                data-target="#exampleModalLong">
+                                Designer Mode
                             </button>
+                            <!-- Modal -->
+                            <div class="modal fade createActionModal" id="exampleModalLong" tabindex="-1" role="dialog"
+                                aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+                                <div class="modal-dialog" role="document">
+                                    <div class="modal-content">
+                                        <div class="modal-content">
+                                            <div class="modal-header">
+                                                <h5 class="modal-title" id="exampleModalLongTitle"></h5>
+                                                <button type="button" class="close" data-dismiss="modal"
+                                                    aria-label="Close" title="Close">
+                                                    <i class="icon-action-close"></i>
+                                                </button>
+                                            </div>
+                                            <div class="modal-body">
+                                                <div id="carouselExampleIndicators" class="carousel slide"
+                                                    data-ride="carousel" data-interval="false">
+                                                    <div class="carousel-inner" style="height: 450px">
+                                                        <!--OPTIONS SLIDE-->
+                                                        <div class="carousel-item active">
+                                                            <h1>Let’s create the 1st Action</h1>
+                                                            <div class="row">
+                                                                <!--Custom Action-->
+                                                                <div class="col-3 d-flex">
+                                                                    <a class="d-flex" data-target="#carouselExampleIndicators"
+                                                                        data-slide-to="1">
+                                                                        <div class="card actionType custom">
+                                                                            <div class="card-body">
+                                                                                <h3>Custom</h3>
+                                                                                <p>Start with your own settings</p>
+                                                                                <button
+                                                                                    data-target="#carouselExampleIndicators"
+                                                                                    data-slide-to="1" class="btn">
+                                                                                    Create
+                                                                                </button>
+                                                                            </div>
+                                                                        </div>
+                                                                    </a>
+                                                                </div>
+                                                                <!--Default Action-->
+                                                                <div class="col-3 d-flex">
+                                                                    <a class="d-flex" data-target="#carouselExampleIndicators"
+                                                                        data-slide-to="2">
+                                                                        <div class="card actionType default">
+                                                                            <div class="card-body">
+                                                                                <h3>Default</h3>
+                                                                                <p>Explore preset actions from CDS
+                                                                                    Action Catalog</p>
+                                                                                <button
+                                                                                    data-target="#carouselExampleIndicators"
+                                                                                    data-slide-to="2" class="btn">
+                                                                                    Select
+                                                                                </button>
+                                                                            </div>
+                                                                        </div>
+                                                                    </a>
+                                                                </div>
+                                                                <!--Recent Action-->
+                                                                <div class="col-3 d-flex">
+                                                                    <a class="d-flex" data-target="#carouselExampleIndicators"
+                                                                        data-slide-to="3">
+                                                                        <div class="card actionType recent">
+                                                                            <div class="card-body">
+                                                                                <h3>Recent</h3>
+                                                                                <p>Re-use recent actions of your
+                                                                                    recent
+                                                                                    packages</p>
+                                                                                <button
+                                                                                    data-target="#carouselExampleIndicators"
+                                                                                    data-slide-to="3" class="btn">
+                                                                                    Select
+                                                                                </button>
+                                                                            </div>
+                                                                        </div>
+                                                                    </a>
+                                                                </div>
+                                                                <!--Import Action-->
+                                                                <div class="col-3 d-flex">
+                                                                    <a class="d-flex" data-target="#carouselExampleIndicators"
+                                                                        data-slide-to="4">
+                                                                        <div class="card actionType import">
+                                                                            <div class="card-body">
+                                                                                <h3>Import</h3>
+                                                                                <p>Import your own action files</p>
+                                                                                <button
+                                                                                    data-target="#carouselExampleIndicators"
+                                                                                    data-slide-to="4" class="btn">
+                                                                                    Browse</button>
+                                                                            </div>
+                                                                        </div>
+                                                                    </a>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <!--Custom Action Form-->
+                                                        <div class="carousel-item">
+                                                            <button data-target="#carouselExampleIndicators"
+                                                                data-slide-to="0" title="Back" class="btn back"><i
+                                                                    class="icon-action-back"></i></button>
+                                                            <h1>Create Custom Action</h1>
+                                                            <div class="form-group text-center">
+                                                                <input type="text" class="form-control customAction"
+                                                                    placeholder="Type Action Name" autofocus>
+                                                                <button type="button" class="btn submit">Start</button>
+                                                            </div>
+
+                                                        </div>
+                                                        <!--Default Actions Form-->
+                                                        <div class="carousel-item">
+                                                            <button data-target="#carouselExampleIndicators"
+                                                                data-slide-to="0" title="Back" class="btn back"><i
+                                                                    class="icon-action-back"></i></button>
+                                                            <h1>Choose Action(s) from CDS Default Package </h1>
+                                                            <div class="actionFormWrapper">
+                                                                <div class="row mb-3">
+                                                                    <div class="col sort-packages">
+                                                                        <label class="actionlabel">Version</label>
+                                                                        <div class="dropdown" style="width: 90px">
+                                                                            <input class="dropdown-toggle" type="text">
+                                                                            <div class="dropdown-text">1.6.2</div>
+                                                                            <ul class="dropdown-content">
+                                                                                <li>
+                                                                                    <a>1.1.8</a>
+                                                                                </li>
+                                                                                <li>
+                                                                                    <a>2.1.8</a>
+                                                                                </li>
+                                                                            </ul>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col">
+                                                                        <input type="text"
+                                                                            class="form-control searchInput"
+                                                                            placeholder="Search">
+                                                                    </div>
+                                                                </div>
+                                                                <div class="row actionsListScroll">
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation1"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation1">config-assign</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation2"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation2">config-assign-test</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation3"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation3">config-deploy</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation4"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation4">config-modify</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation5"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation5">config-assign1</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation5"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation5">config-assign1</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation5"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation5">config-assign1</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation5"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation5">config-assign1</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation5"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation5">config-assign1</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation5"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation5">config-assign1</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation5"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation5">config-assign1</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="row">
+                                                                    <div class="col text-center">
+                                                                        <p class="selectedActions">0 selected</p>
+                                                                        <button type="button"
+                                                                            class="btn submit">Start</button>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <!--Recent Actions Form-->
+                                                        <div class="carousel-item">
+                                                            <button data-target="#carouselExampleIndicators"
+                                                                data-slide-to="0" title="Back" class="btn back"><i
+                                                                    class="icon-action-back"></i></button>
+                                                            <h1>Choose Action(s) from Recent Packages</h1>
+                                                            <div class="actionFormWrapper">
+                                                                <div class="row mb-3">
+                                                                    <div class="col sort-packages">
+                                                                        <label class="actionlabel">Package
+                                                                            Name</label>
+                                                                        <div class="dropdown">
+                                                                            <input class="dropdown-toggle" type="text">
+                                                                            <div class="dropdown-text">CDS (v 1.0.0)
+                                                                            </div>
+                                                                            <ul class="dropdown-content">
+                                                                                <li>
+                                                                                    <a>Test Package (v 1.1.8)</a>
+                                                                                </li>
+                                                                                <li>
+                                                                                    <a>Test Package (v 1.1.8)</a>
+                                                                                </li>
+                                                                                <li>
+                                                                                    <a>Test Package (v 1.1.8)</a>
+                                                                                </li>
+                                                                                <li>
+                                                                                    <a>Test Package (v 1.1.8)</a>
+                                                                                </li>
+                                                                            </ul>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col">
+                                                                        <input type="text"
+                                                                            class="form-control searchInput"
+                                                                            placeholder="Search">
+                                                                    </div>
+                                                                </div>
+                                                                <div class="row actionsListScroll">
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation1"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation1">config-assign</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation2"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation2">config-assign-test</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation3"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation3">config-deploy</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation4"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation4">config-modify</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation5"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation5">config-assign1</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation5"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation5">config-assign1</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation5"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation5">config-assign1</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation5"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation5">config-assign1</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation5"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation5">config-assign1</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation5"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation5">config-assign1</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="col-6">
+                                                                        <div class="actionName">
+                                                                            <div class="custom-control custom-checkbox">
+                                                                                <input type="checkbox"
+                                                                                    class="custom-control-input"
+                                                                                    id="customControlValidation5"
+                                                                                    required>
+                                                                                <label class="custom-control-label"
+                                                                                    for="customControlValidation5">config-assign1</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="row">
+                                                                    <div class="col text-center">
+                                                                        <p class="selectedActions">0 selected</p>
+                                                                        <button type="button"
+                                                                            class="btn submit">Start</button>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <!--Import Actions Form-->
+                                                        <div class="carousel-item">
+                                                            <button data-target="#carouselExampleIndicators"
+                                                                data-slide-to="0" title="Back" class="btn back"><i
+                                                                    class="icon-action-back"></i></button>
+                                                            <h1>Import Action(s)</h1>
+                                                            <div class="actionFormWrapper">
+                                                                <div class="row">
+                                                                    <div class="col">
+                                                                        <ngx-file-drop accept=".json"
+                                                                            dropZoneLabel="Drop files here"
+                                                                            (onFileDrop)="dropped($event)"
+                                                                            (onFileOver)="fileOver($event)"
+                                                                            (onFileLeave)="fileLeave($event)">
+                                                                            <ng-template ngx-file-drop-content-tmp
+                                                                                let-openFileSelector="openFileSelector">
+                                                                                <div class="folder-upload">
+                                                                                    <img
+                                                                                        src="assets/img/folder-upload.svg" />
+                                                                                </div>
+                                                                                <div class="folder-upload-text">
+                                                                                    Drag & Drop file
+                                                                                </div>
+                                                                                <div class="folder-upload-text">or
+                                                                                    <button type="button"
+                                                                                        class="btn btn-sm btn-primary"
+                                                                                        (click)="openFileSelector()">Browse
+                                                                                        Files
+                                                                                    </button>
+                                                                                </div>
+                                                                                <div class="folder-upload-type">
+                                                                                    Allowed file
+                                                                                    type: json</div>
+                                                                            </ng-template>
+                                                                        </ngx-file-drop>
+                                                                        <div class="upload-table">
+                                                                            <table class="table">
+                                                                                <thead>
+                                                                                    <tr
+                                                                                        *ngFor="let item of uploadedFiles; let i=index">
+                                                                                        <th width="40"><img
+                                                                                                src="assets/img/icon-file-code.svg" />
+                                                                                        </th>
+                                                                                        <th>{{ item.name }}</th>
+                                                                                        <th width="40"
+                                                                                            class="text-right">
+                                                                                            <img
+                                                                                                src="assets/img/icon-remove-file.svg" />
+                                                                                        </th>
+                                                                                    </tr>
+                                                                                </thead>
+                                                                            </table>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="row">
+                                                                    <div class="col text-center">
+                                                                        <button type="button"
+                                                                            class="btn submit mt-4">Import</button>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                             <button class="btn btn-sm btn-outline-secondary" (click)="deployCurrentPackage()"><i
                                     class="fa fa-play-circle"></i> Deploy
                             </button>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
index 9db3ce110..c2bfd9779 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
@@ -3,7 +3,7 @@
         <!--Add Package Card-->
         <div class="card addPaackage-card">
             <div class="card-body text-center">
-                <img src="/assets/img/icon-addPackage.svg" width="40%">
+                <img src="/assets/img/icon-addPackage.svg" width="30%">
             </div>
             <div class="card-footer row">
                 <div class="col text-center">
@@ -12,7 +12,7 @@
                         Package
                     </a>
                     <br />
-                    <a href="#" role="button" aria-pressed="true" class="btn-import-package float mb-3"><i
+                    <a href="#" role="button" aria-pressed="true" class="btn-import-package float"><i
                             class="icon-import-blue" aria-hidden="true"></i>Import Package
                     </a>
                 </div>