path: root/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html

<app-header></app-header>

<div class="new-wrapper">
    <header class="page-title">
        <div class="row">
            <h2 class="col m-0">CBA Packages
                <span>({{numberOfPackages}} packages)</span>
            </h2>
            <div class="col">
            </div>
        </div>
    </header>

    <div class="main-container">

        <div class="container-fluid body-container creat-container-all">

            <div class="creat-container">
                <div class="creat-action-container">
                    <a href="#" class="action-button">
                        <i class="icon-clone" aria-hidden="true"></i>
                        <span>Clone</span>
                    </a>

                    <a href="#" class="action-button">
                        <i class="icon-archive" aria-hidden="true"></i>
                        <span>Archive</span>
                    </a>

                    <a href="#" class="action-button">
                        <i class="icon-delete" aria-hidden="true"></i>
                        <span>Delete</span>
                    </a>
                </div>
                <nav class="row">
                    <div class="col pr-0">
                        <button class="float btn btn-sm btn-primary">Save</button>
                        <button class="float btn btn-sm btn-outline-secondary" disabled>Cancel</button>
                    </div>
                </nav>
                <nav class="row">
                    <!--Nav Tabs-->
                    <div class="col pr-0">
                        <div class="nav nav-tabs " id="nav-tab" role="tablist">
                            <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab"
                               href="#nav-metadata"
                               role="tab" aria-controls="nav-metadata"
                               aria-selected="true">METADATA</a>
                            <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
                               role="tab" aria-controls="nav-imports"
                               aria-selected="false">IMPORTS</a>
                            <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
                               href="#nav-authentication"
                               role="tab" aria-controls="nav-authentication"
                               aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
                            <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
                               role="tab" aria-controls="nav-template"
                               aria-selected="false">TEMPLATE & MAPPING</a>
                            <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
                               role="tab" aria-controls="nav-scripts"
                               aria-selected="false">SCRIPTS</a>
                        </div>
                    </div>

                </nav>
                <div class="row mt-4">
                    <div class="col">
                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
                                 aria-labelledby="nav-metadata-tab">
                                <div class="card creat-card">
                                    <div class="single-line">
                                        <label class="label-name">Mode</label>
                                        <label name="trst" *ngFor="let mode of modes; let i = index">
                                            <input class="form-check-input" [(ngModel)]="metaDataTab.mode" type="radio"
                                                   name="exampleRadios" id="exampleRadios1" value={{mode}}>

                                            <span>
                                            <i [className]="mode.style" aria-hidden="true"></i>
                                                <!-- <i class="mode-icon green icon-scripting-mode" aria-hidden="true"></i> -->
                                                {{mode.name}}
                                            </span>
                                        </label>
                                    </div>
                                  <!--  <div class="single-line">
                                        <label class="label-name">Dictionary Library Instances</label>
                                        <div class="label-input">
                                            <select name="cars">
                                                <option class="select-placeholder">Select library</option>
                                                <option value="audi"
                                                        *ngFor="let dictionaryLibraryInstance of dictionaryLibraryInstances; let i = index">{{dictionaryLibraryInstance}}</option>
                                            </select>
                                        </div>
                                    </div>-->

                                </div>
                                <div class="card creat-card">
                                    <div class="single-line">
                                        <label class="label-name">Name</label>
                                        <div class="label-input">
                                            <input type="input" (input)="searchPackages($event)"
                                                   [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS">
                                        </div>
                                    </div>
                                    <hr/>
                                    <div class="single-line">
                                        <label class="label-name">Description</label>
                                        <div class="label-input">
                                            <input type="input" placeholder="Descripe the package">
                                        </div>
                                    </div>
                                    <hr/>
                                    <div class="single-line">
                                        <label class="label-name">Version</label>
                                        <div class="label-input">
                                            <input type="input" placeholder="Example: 1.0.0">
                                        </div>
                                    </div>
                                    <hr/>
                                    <div class="single-line">
                                        <label class="label-name">tags</label>
                                        <div class="label-input">
                                            <input type="input" placeholder="Ex., vDNS-CDS">
                                        </div>
                                    </div>
                                </div>
                                <div id="container">
                                    <div id="target">
                                        <div class="card creat-card">
                                            <div class="single-line">
                                                <h5 class="label-name">
                                                    Custom key <a class="delete-key" (click)="deleteCustomKey($event)" >Delete</a>
                                                </h5>

                                            </div>
                                            <div class="single-line">
                                                <label class="label-name">Name</label>
                                                <div class="label-input">
                                                    <input type="input" placeholder="Enter Name">
                                                </div>
                                            </div>
                                            <hr/>
                                            <div class="single-line">
                                                <label class="label-name">Value</label>
                                                <div class="label-input">
                                                    <input type="input" placeholder="Enter Value">
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="card creat-card">
                                    <div class="single-line">
                                        <div name="custom key">
                                            <button class="custom-key" (click)="createAnotherCustomKeyDiv()"><i
                                                    class="fa fa-plus" aria-hidden="true"></i> Add a custom key
                                            </button>


                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="tab-pane fade" id="nav-imports" role="tabpanel"
                                 aria-labelledby="nav-imports-tab">
                                <div class="import-container-all">
                                    <div class="import-container">
                                        <div class="import-container-input">
                                            <input placeholder="Enter file URL" type="input"
                                                   class="ng-pristine ng-valid ng-touched">
                                            <a class="enter-link" href="#"><i class="icon-enter"></i></a>
                                        </div>
                                        <span class="import-container-span">Or you can also <a href="#"
                                                                                               data-toggle="modal"
                                                                                               data-target="#exampleModal">Import File</a></span>

                                    </div>

                                    <div class="accordion">
                                        <div class="card creat-card">
                                            <div class="single-line">
                                                <label class="label-name">File</label>
                                            </div>
                                        </div>
                                        <div id="accordion">
                                            <div class="card">
                                                <div class="card-header" id="headingOne">
                                                    <h5 class="mb-0 d-flex justify-content-between">
                                                        <button class="btn btn-link" data-toggle="collapse"
                                                                data-target="#collapseOne" aria-expanded="true"
                                                                aria-controls="collapseOne">
                                                            <i class="icon-file-code"></i> Definitions/data_types.json
                                                        </button>
                                                        <a class="accordion-delete" href="#"><i class="icon-delete"></i></a>
                                                    </h5>
                                                </div>

                                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                                     data-parent="#accordion">
                                                    <div class="card-body">
                                                        Anim pariatur cliche reprehenderit, enim eiusmod high life
                                                        accusamus terry richardson ad squid. 3 wolf moon officia aute,
                                                        non cupidatat skateboard dolor brunch. Food truck quinoa
                                                        nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
                                                        put a bird on it squid single-origin coffee nulla assumenda
                                                        shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                                                        wes anderson cred nesciunt sapiente ea proident. Ad vegan
                                                        excepteur butcher vice lomo. Leggings occaecat craft beer
                                                        farm-to-table, raw denim aesthetic synth nesciunt you probably
                                                        haven't heard of them accusamus labore sustainable VHS.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div class="card-header" id="headingTwo">
                                                    <h5 class="mb-0">
                                                        <button class="btn btn-link collapsed" data-toggle="collapse"
                                                                data-target="#collapseTwo" aria-expanded="false"
                                                                aria-controls="collapseTwo">
                                                            Definitions/relationship_types.json
                                                        </button>
                                                    </h5>
                                                </div>
                                                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                                     data-parent="#accordion">
                                                    <div class="card-body">
                                                        Anim pariatur cliche reprehenderit, enim eiusmod high life
                                                        accusamus terry richardson ad squid. 3 wolf moon officia aute,
                                                        non cupidatat skateboard dolor brunch. Food truck quinoa
                                                        nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
                                                        put a bird on it squid single-origin coffee nulla assumenda
                                                        shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                                                        wes anderson cred nesciunt sapiente ea proident. Ad vegan
                                                        excepteur butcher vice lomo. Leggings occaecat craft beer
                                                        farm-to-table, raw denim aesthetic synth nesciunt you probably
                                                        haven't heard of them accusamus labore sustainable VHS.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div class="card-header" id="headingThree">
                                                    <h5 class="mb-0">
                                                        <button class="btn btn-link collapsed" data-toggle="collapse"
                                                                data-target="#collapseThree" aria-expanded="false"
                                                                aria-controls="collapseThree">
                                                            Definitions/artifact_types.json
                                                        </button>
                                                    </h5>
                                                </div>
                                                <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                                                     data-parent="#accordion">
                                                    <div class="card-body">
                                                        Anim pariatur cliche reprehenderit, enim eiusmod high life
                                                        accusamus terry richardson ad squid. 3 wolf moon officia aute,
                                                        non cupidatat skateboard dolor brunch. Food truck quinoa
                                                        nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
                                                        put a bird on it squid single-origin coffee nulla assumenda
                                                        shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                                                        wes anderson cred nesciunt sapiente ea proident. Ad vegan
                                                        excepteur butcher vice lomo. Leggings occaecat craft beer
                                                        farm-to-table, raw denim aesthetic synth nesciunt you probably
                                                        haven't heard of them accusamus labore sustainable VHS.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
                                 aria-labelledby="nav-authentication-tab">...
                            </div>
                            <div class="tab-pane fade" id="nav-template" role="tabpanel"
                                 aria-labelledby="nav-template-tab">...
                            </div>
                            <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
                                 aria-labelledby="nav-scripts-tab">...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Import File</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Import</button>
            </div>
        </div>
    </div>
</div>