Table - Column Reorder without Dynamic column

UI Components for Angular
Post Reply
RahulPandey
Posts: 1
Joined: 15 May 2020, 11:24

15 May 2020, 12:05

I'm creating a table in which I need to reorder the column. We have all the columns in template file which is not the requirement as per Documentation. But my HTML file is very complex and cannot be defined in component file..so how i can achieve reordering..any help?? code for html file is below

Code: Select all


<div class="adhoc_table_wrap">
    <p-table
        #dt
        [value]="adhocTasks"
        [columns]="cols"
        [rows]="50"
        (onPage)="onPage($event)"
        [paginator]="true"
        [pageLinks]="3"
        [totalRecords]="totalRecords"
        [rowsPerPageOptions]="[20, 50, 100]"
        scrollable="true"
        scrollHeight="500"
        scrollWidth="1200"
        [reorderableColumns]="true"
        [lazy]="true"
        [responsive]="false"
        (onFilter)="onFiltering($event, dt)"
        selectionMode="single"
        [(selection)]="selectedRow"
        (onSort)="buildSort($event)"
        [contextMenu]="cm"
    >
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th style="width: 150px">Team</th>
                <th style="width: 200px">Ticker</th>
                <th *ngIf="!isHidden('industry')" style="width: 150px" pReorderableColumn>
                    Industry
                </th>
                <th *ngIf="!isHidden('sector')" style="width: 120px" pReorderableColumn>Sector</th>
                <th style="width: 150px">Stage</th>
                <th pSortableColumn="priority" style="width: 100px">
                    Priority
                    <p-sortIcon field="priority"></p-sortIcon>
                </th>
                <th style="width: 200px">
                    Processor
                    <a
                        class="assigneeOption assigned"
                        (click)="
                            assigneeFilterClick('assigned');
                            dt.filter('assigned', 'assigneeOption');
                            buildFilter($event, 'assigneeOption')
                        "
                    >
                        <i
                            class="fa fa-user"
                            aria-hidden="true"
                            title="Assigned"
                        >
                        </i>
                    </a>
                    <a
                        class="assigneeOption unassigned"
                        (click)="
                            assigneeFilterClick('unassigned');
                            dt.filter('unassigned', 'assigneeOption');
                            buildFilter($event, 'assigneeOption')
                        "
                    >
                        <i
                            class="fa fa-user-times"
                            aria-hidden="true"
                            title="Unassigned"
                        >
                        </i>
                    </a>
                    <a
                        class="assigneeOption all"
                        (click)="
                            assigneeFilterClick('all');
                            dt.filter('all', 'assigneeOption');
                            buildFilter($event, 'assigneeOption')
                        "
                    >
                        <i class="fa fa-users" aria-hidden="true" title="All">
                        </i>
                    </a>
                </th>
                <th style="width: 200px">
                    Reviewer
                    <a
                        class="reviewerOption reviewed"
                        (click)="
                            reviewerFilterClick('reviewed');
                            dt.filter('reviewed', 'reviewerOption');
                            buildFilter($event, 'reviewerOption')
                        "
                    >
                        <i
                            class="fa fa-user"
                            aria-hidden="true"
                            title="Assigned"
                        >
                        </i>
                    </a>
                    <a
                        class="reviewerOption unreviewed"
                        (click)="
                            reviewerFilterClick('unreviewed');
                            dt.filter('unreviewed', 'reviewerOption');
                            buildFilter($event, 'reviewerOption')
                        "
                    >
                        <i
                            class="fa fa-user-times"
                            aria-hidden="true"
                            title="Unassigned"
                        >
                        </i>
                    </a>
                    <a
                        class="reviewerOption all"
                        (click)="
                            reviewerFilterClick('all');
                            dt.filter('all', 'reviewerOption');
                            buildFilter($event, 'reviewerOption')
                        "
                    >
                        <i class="fa fa-users" aria-hidden="true" title="All">
                        </i>
                    </a>
                </th>
                <th style="width: 120px">
                    Est. Start Date
                    <a
                        class="assigneeOption"
                        (click)="
                            estStartDateClear();
                            dt.filter('', 'estimatedStartDate');
                            buildFilter($event, 'estimatedStartDate')
                        "
                    >
                        <i
                            class="fa fa-close"
                            aria-hidden="true"
                            title="Clear Filter"
                        >
                        </i>
                    </a>
                </th>
                <th style="width: 150px">
                    Est. End Date
                    <a
                        class="assigneeOption"
                        (click)="
                            estEndDateClear();
                            dt.filter('', 'estimatedEndDate');
                            buildFilter($event, 'estimatedEndDate')
                        "
                    >
                        <i
                            class="fa fa-close"
                            aria-hidden="true"
                            title="Clear Filter"
                        >
                        </i>
                    </a>
                </th>
                <th *ngIf="!isHidden('startDate')" style="width: 120px">
                    Start Date
                    <a
                        class="assigneeOption"
                        (click)="
                            startDateClear();
                            dt.filter('', 'startDate');
                            buildFilter($event, 'startDate')
                        "
                    >
                        <i
                            class="fa fa-close"
                            aria-hidden="true"
                            title="Clear Filter"
                        >
                        </i>
                    </a>
                </th>
                <th style="width: 120px">End Date</th>
                <th style="width: 100px">Capturing Effort</th>
                <th style="width: 100px">Reviewing Effort</th>
                <th *ngIf="!isHidden('totalEffort')" style="width: 100px">
                    Estimated Effort
                </th>
                <th *ngIf="!isHidden('IssueId')" style="width: 150px">
                    Issue Id
                    <a
                        class="assigneeOption assigned issueType acq"
                        [ngClass]="{ actived: activeTab === 'acq_tab' }"
                        (click)="
                            acq_click('acq_tab');
                            issueTypeFilterClick('acq');
                            dt.filter('ACQ', 'issue_type');
                            buildFilter($event, 'issue_type')
                        "
                    >
                        <i
                            class="fa fa-font"
                            aria-hidden="true"
                            title="ACQ Issues"
                        >
                        </i>
                    </a>
                    <a
                        class="assigneeOption unassigned issueType prod"
                        [ngClass]="{ actived: activeTab === 'prod_tab' }"
                        (click)="
                            acq_click('prod_tab');
                            issueTypeFilterClick('prod');
                            dt.filter('PROD', 'issue_type');
                            buildFilter($event, 'issue_type')
                        "
                    >
                        <i
                            class="fa fa-product-hunt"
                            aria-hidden="true"
                            title="PROD Issues"
                        >
                        </i>
                    </a>
                    <a
                        class="assigneeOption issueType all"
                        [ngClass]="{ actived: activeTab === 'all_tab' }"
                        (click)="
                            acq_click('all_tab');
                            issueTypeFilterClick('all');
                            dt.filter('ALL', 'issue_type');
                            buildFilter($event, 'issue_type')
                        "
                    >
                        <i
                            class="fa fa-close"
                            aria-hidden="true"
                            title="All Issues"
                        >
                        </i>
                    </a>
                </th>
                <th *ngIf="!isHidden('country')" style="width: 150px">
                    Country
                </th>
                <th *ngIf="!isHidden('region')" style="width: 150px">Region</th>
            </tr>
            <tr>
                <th style="width: 150px">
                    <p-multiSelect
                        class="team-multiselect"
                        [maxSelectedLabels]="1"
                        [options]="team_list"
                        [(ngModel)]="adhocFilters.team_filter"
                        (onPanelShow)="teamFilterOpen()"
                        (onPanelHide)="
                            dt.filter(adhocFilters.team_filter, 'team_filter');
                            teamFilterClosed()
                        "
                    ></p-multiSelect>
                </th>
                <th style="width: 200px">
                    <div style="width:100%;">
                        <span style="width:77%; float: left">
                            <p-autoComplete
                                [suggestions]="filteredTickers"
                                field="displayticker"
                                dataKey="companyid"
                                appendTo="body"
                                [style]="{ width: '100%' }"
                                [(ngModel)]="adhocFilters.ticker"
                                [inputStyle]="{ width: '100%' }"
                                (completeMethod)="
                                    get_pattern_match_ticker($event)
                                "
                                [minLength]="1"
                                (onSelect)="
                                    dt.filter($event.companyid, 'ticker');
                                    buildFilter($event, 'ticker')
                                "
                                (onClear)="
                                    dt.filter($event.company_id, 'ticker');
                                    buildFilter($event, 'ticker')
                                "
                            >
                            </p-autoComplete>
                        </span>
                        <span
                            style="float:right; font-size: 12px; margin-left:0px"
                        >
                            <p-checkbox
                                [(ngModel)]="selectAll"
                                binary="true"
                                (onChange)="selectAllClicked($event)"
                                [(ngClass)]="showDelete"
                                name="selectAll"
                                *ngIf="show == true"
                            >
                            </p-checkbox>
                        </span>
                        <span
                            class="add-query-container del"
                            *ngIf="selectedForDelete.length != 0"
                        >
                            <i
                                class="fa fa-trash"
                                aria-hidden="true"
                                title="Delete adhoc task"
                                (click)="showDeleteConfirmation()"
                                label="Show"
                            >
                            </i>
                        </span>
                    </div>
                </th>
                <th *ngIf="!isHidden('industry')" style="width: 150px" pReorderableColumn>
                    <p-autoComplete
                        [suggestions]="filteredIndustry"
                        field="name"
                        dataKey="industryid"
                        [style]="{ width: '100%' }"
                        [inputStyle]="{ width: '100%' }"
                        (completeMethod)="getPatternMatchIndustry($event)"
                        [minLength]="2"
                        (onSelect)="
                            dt.filter($event.industryid, 'industry');
                            buildFilter($event, 'industry')
                        "
                        [(ngModel)]="adhocFilters.industry"
                        (onClear)="
                            dt.filter($event.industryid, 'industry');
                            buildFilter($event, 'industry')
                        "
                    >
                    </p-autoComplete>
                </th>
                <th *ngIf="!isHidden('sector')" style="width: 120px" pReorderableColumn>
                    <p-autoComplete
                        [suggestions]="filteredSector"
                        field="name"
                        dataKey="sectorid"
                        [style]="{ width: '100%' }"
                        [inputStyle]="{ width: '100%' }"
                        (completeMethod)="getPatternMatchSector($event)"
                        [minLength]="0"
                        (onSelect)="
                            dt.filter($event.sectorid, 'sector');
                            buildFilter($event, 'sector')
                        "
                        [(ngModel)]="adhocFilters.sector"
                        (onClear)="
                            dt.filter($event.sectorid, 'sector');
                            buildFilter($event, 'sector')
                        "
                    >
                    </p-autoComplete>
                </th>
                <th style="width: 150px">
                    <p-multiSelect
                        class="stage-multiselect"
                        [maxSelectedLabels]="1"
                        [options]="stage_list"
                        (onChange)="stageFilterClicked($event)"
                        [(ngModel)]="adhocFilters.stageId"
                        (onPanelShow)="stageFilterOpen()"
                        (onPanelHide)="
                            dt.filter(adhocFilters.stageId, 'stageId');
                            stageFilterClosed()
                        "
                    ></p-multiSelect>
                </th>
                <th style="width: 100px">
                    <p-multiSelect
                        class="priority-multiselect"
                        [maxSelectedLabels]="1"
                        [options]="priority_list"
                        (onChange)="priorityFilterClicked($event)"
                        [(ngModel)]="adhocFilters.priority"
                        (onPanelShow)="priorityFilterOpen()"
                        (onPanelHide)="
                            dt.filter(adhocFilters.priority, 'priority');
                            priorityFilterClosed()
                        "
                    ></p-multiSelect>
                </th>
                <th style="width: 200px">
                    <p-autoComplete
                        [suggestions]="patternMatchAnalystList"
                        field="fullname"
                        dataKey="capuserid"
                        appendTo="body"
                        [inputStyle]="{ width: '100%' }"
                        (completeMethod)="getPatternMatchAnalyst($event)"
                        [minLength]="1"
                        (onSelect)="
                            dt.filter($event.capuserid, 'captureUser');
                            buildFilter($event, 'captureUser')
                        "
                        [(ngModel)]="adhocFilters.captureUser"
                        (onClear)="
                            dt.filter($event.capuserid, 'captureUser');
                            buildFilter($event, 'captureUser')
                        "
                    >
                    </p-autoComplete>
                </th>
                <th style="width: 200px">
                    <p-autoComplete
                        [suggestions]="patternMatchAnalystList"
                        field="fullname"
                        dataKey="capuserid"
                        appendTo="body"
                        [style]="{ width: '100%' }"
                        [inputStyle]="{ width: '100%' }"
                        (completeMethod)="getPatternMatchAnalyst($event)"
                        [minLength]="1"
                        (onSelect)="
                            dt.filter($event.capuserid, 'reviewUser');
                            buildFilter($event, 'reviewUser')
                        "
                        [(ngModel)]="adhocFilters.reviewUser"
                        (onClear)="
                            dt.filter($event.capuserid, 'reviewUser');
                            buildFilter($event, 'reviewUser')
                        "
                    >
                    </p-autoComplete>
                </th>
                <th style="width: 120px">
                    <p-multiSelect
                        id="editingColumn"
                        [options]="columnOptions"
                        [filter]="false"
                        [showToggleAll]="false"
                        [(ngModel)]="cols"
                        style=""
                        defaultLabel="Columns"
                        (onChange)="onSelectPopulateColumndata($event)"
                        [panelStyle]="{ minWidth: '12em' }"
                    ></p-multiSelect>
                    <input
                        *ngIf="!estStartFilterBoolean"
                        (mousedown)="
                            dateFilterClicked(
                                'estStartFilterBoolean',
                                'showEstStartFilter'
                            )
                        "
                        type="text"
                    />
                    <input
                        id="showEstStartFilter"
                        *ngIf="estStartFilterBoolean"
                        type="text"
                        iname="daterangeInput"
                        daterangepicker
                        [(ngModel)]="estStartDateFilter"
                        [options]="{
                            locale: { format: 'DD MMM YYYY' },
                            maxDate: '2024-01-01',
                            startDate: '2018-05-31'
                        }"
                        (selected)="
                            dt.filter($event, 'estimatedStartDate');
                            buildFilter($event, 'estimatedStartDate')
                        "
                    />
                </th>
                <th style="width: 150px">
                    <input
                        *ngIf="!estEndFilterBoolean"
                        (mousedown)="
                            dateFilterClicked(
                                'estEndFilterBoolean',
                                'showEstEndFilter'
                            )
                        "
                        type="text"
                    />
                    <input
                        id="showEstEndFilter"
                        *ngIf="estEndFilterBoolean"
                        type="text"
                        iname="daterangeInput"
                        daterangepicker
                        [(ngModel)]="estEndDateFilter"
                        [options]="{
                            locale: { format: 'DD MMM YYYY' },
                            startDate: '2018-05-31',
                            maxDate: '2024-01-01',
                            timePicker: 'false'
                        }"
                        (selected)="
                            dt.filter($event, 'estimatedEndDate');
                            buildFilter($event, 'estimatedEndDate')
                        "
                    />
                </th>
                <th *ngIf="!isHidden('startDate')" style="width: 120px">
                    <input
                        *ngIf="!startFilterBoolean"
                        (mousedown)="
                            dateFilterClicked(
                                'startFilterBoolean',
                                'showStartFilter'
                            )
                        "
                        type="text"
                    />
                    <input
                        id="showStartFilter"
                        *ngIf="startFilterBoolean"
                        type="text"
                        iname="daterangeInput"
                        daterangepicker
                        [(ngModel)]="startDateFilter"
                        [options]="{
                            locale: { format: 'DD MMM YYYY' },
                            startDate: '2018-05-31'
                        }"
                        (selected)="
                            dt.filter($event, 'startDate');
                            buildFilter($event, 'startDate')
                        "
                    />
                </th>
                <th style="width: 120px"></th>
                <th style="width: 100px"></th>
                <th style="width: 100px"></th>
                <th *ngIf="!isHidden('totalEffort')" style="width: 100px"></th>
                <th *ngIf="!isHidden('IssueId')" style="width: 150px">
                    <p-autoComplete
                        [suggestions]="issue_keys"
                        dataKey="issueid"
                        appendTo="body"
                        [style]="{ width: '100%' }"
                        [inputStyle]="{ width: '100%' }"
                        (completeMethod)="get_pattern_match_issues($event)"
                        [(ngModel)]="adhocFilters.issue_adhoctaskids"
                        [minLength]="3"
                        (onSelect)="
                            dt.filter(
                                issues
                                    ? issues[adhocFilters.issue_adhoctaskids]
                                    : '',
                                'issue_adhoctaskids'
                            );
                            buildFilter($event, 'issue_adhoctaskids')
                        "
                        (onClear)="
                            dt.filter(
                                issues
                                    ? issues[adhocFilters.issue_adhoctaskids]
                                    : '',
                                'issue_adhoctaskids'
                            );
                            buildFilter($event, 'issue_adhoctaskids')
                        "
                    >
                    </p-autoComplete>
                </th>
                <th *ngIf="!isHidden('country')" style="width: 150px">
                    <p-autoComplete
                        [suggestions]="filteredCountry"
                        field="name"
                        dataKey="countryid"
                        appendTo="body"
                        [style]="{ width: '100%' }"
                        [(ngModel)]="adhocFilters.country"
                        [inputStyle]="{ width: '100%' }"
                        (completeMethod)="search_country_pattern($event)"
                        [minLength]="1"
                        (onSelect)="
                            dt.filter($event.countryid, 'country');
                            buildFilter($event, 'country')
                        "
                        (onClear)="
                            dt.filter($event.countryid, 'ticker');
                            buildFilter($event, 'country')
                        "
                    >
                    </p-autoComplete>
                </th>
                <th *ngIf="!isHidden('region')" style="width: 150px">
                    <p-multiSelect
                        class="region-multiselect"
                        [maxSelectedLabels]="1"
                        [options]="region_list"
                        [(ngModel)]="adhocFilters.region_filter"
                        (onPanelShow)="regionFilterOpen()"
                        (onChange)="regionFilterClicked($event)"
                        (onPanelHide)="
                            dt.filter(
                                adhocFilters.region_filter,
                                'region_filter'
                            );
                            regionFilterClosed()
                        "
                    ></p-multiSelect>
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr [pSelectableRow]="rowData">
                <td style="width: 150px">
                    {{
                        tickerTeamMap
                            ? tickerTeamMap[rowData.company_id]
                            : "----"
                    }}
                </td>
                <td style="width: 200px">
                    <div style="width:100%;">
                        <span>{{
                            tickerMap ? tickerMap[rowData.company_id] : "----"
                        }}</span>
                        <span style="font-size: 12px; float: right">
                            <p-checkbox
                                name="deleteTicker"
                                value="{{ rowData.adhocTaskId }}"
                                [(ngModel)]="selectedForDelete"
                                (onChange)="checkChanged($event)"
                                *ngIf="show == true"
                            >
                            </p-checkbox>
                        </span>
                    </div>
                </td>
                <td *ngIf="!isHidden('industry')" style="width: 150px">
                    {{ industryMap ? industryMap[rowData.company_id] : "" }}
                </td>
                <td *ngIf="!isHidden('sector')" style="width: 120px">
                    {{ sectorMap ? sectorMap[rowData.company_id] : "" }}
                </td>
                <td style="width: 150px">
                    <a
                        class="stageOption prev-stage"
                        (click)="changeStage('prev', rowData)"
                        *ngIf="
                            rowData.stageId &&
                            [2, 3].indexOf(rowData.stageId) > -1
                        "
                    >
                        <i
                            class="fa fa-chevron-circle-left"
                            aria-hidden="true"
                            title="Prev Stage"
                        >
                        </i>
                    </a>
                    <span>{{
                        stageIdMap ? stageIdMap[rowData.stageId] : ""
                    }}</span>
                    <a
                        class="stageOption next-stage"
                        *ngIf="
                            rowData.stageId &&
                            [1, 2, 3].indexOf(rowData.stageId) > -1
                        "
                        (click)="changeStage('next', rowData)"
                    >
                        <i
                            class="fa fa-chevron-circle-right"
                            aria-hidden="true"
                            title="Next Stage"
                        >
                        </i>
                    </a>
                </td>
                <td style="width: 100px">
                    <div
                        *ngIf="!rowData.editing"
                        (click)="editRow(rowData, 'priority')"
                    >
                        <span
                            [ngStyle]="{
                                color:
                                    rowData.priority === 1 ||
                                    rowData.priority === '1'
                                        ? 'red'
                                        : ''
                            }"
                        >
                            {{ rowData.priority }}
                        </span>
                        <span style="float: right"
                            ><i class="fa fa-edit"></i
                        ></span>
                    </div>
                    <p-dropdown
                        *ngIf="rowData.editing"
                        [options]="getConstants('priority')"
                        (onChange)="
                            updateAdhocTask($event, rowData, 'update_priority')
                        "
                    ></p-dropdown>
                </td>
                <td style="width: 200px">
                    <span class="assignee-span">{{
                        userMap ? userMap[rowData.captureUser] : ""
                    }}</span>
                    <p-autoComplete
                        class="assignee-autocomplete"
                        [suggestions]="patternMatchAnalystList"
                        field="fullname"
                        dataKey="capuserid"
                        appendTo="body"
                        [forceSelection]="true"
                        [inputStyle]="{ width: '100%' }"
                        (completeMethod)="getPatternMatchAnalyst($event)"
                        [minLength]="2"
                        (onSelect)="
                            updateAdhocTask($event, rowData, 'update_user', {
                                user_type: 1,
                                is_self_assign: false
                            })
                        "
                        placeholder="{{
                            userMap ? userMap[rowData.captureUser] : ''
                        }}"
                    >
                    </p-autoComplete>
                    <a
                        class="removeAssignee"
                        (click)="
                            updateAdhocTask($event, rowData, 'update_user', {
                                user_type: 1,
                                is_unassign: true
                            })
                        "
                        [hidden]="
                            !userMap ||
                            !rowData ||
                            !userMap[rowData.captureUser]
                        "
                    >
                        <i
                            class="fa fa-close"
                            aria-hidden="true"
                            title="Remove Assignee"
                        >
                        </i>
                    </a>
                    <a
                        class="actionIcon"
                        (click)="
                            updateAdhocTask($event, rowData, 'update_user', {
                                user_type: 1,
                                is_self_assign: true
                            })
                        "
                        [hidden]="
                            !userMap ||
                            userMap[rowData.captureUser] == user_name
                        "
                    >
                        <i
                            class="fa fa-user"
                            aria-hidden="true"
                            title="Self Assign"
                        >
                        </i>
                    </a>
                </td>
                <td style="width: 200px">
                    <span class="assignee-span">{{
                        userMap ? userMap[rowData.reviewUser] : ""
                    }}</span>
                    <p-autoComplete
                        class="assignee-autocomplete"
                        [suggestions]="patternMatchAnalystList"
                        field="fullname"
                        dataKey="capuserid"
                        appendTo="body"
                        [forceSelection]="true"
                        [inputStyle]="{ width: '100%' }"
                        (completeMethod)="getPatternMatchAnalyst($event)"
                        [minLength]="2"
                        (onSelect)="
                            updateAdhocTask($event, rowData, 'update_user', {
                                user_type: 2,
                                is_self_assign: false
                            })
                        "
                        placeholder="{{
                            userMap ? userMap[rowData.reviewUser] : ''
                        }}"
                    >
                    </p-autoComplete>
                    <a
                        class="removeAssignee"
                        (click)="
                            updateAdhocTask($event, rowData, 'update_user', {
                                user_type: 2,
                                is_unassign: true
                            })
                        "
                        [hidden]="
                            !userMap || !rowData || !userMap[rowData.reviewUser]
                        "
                    >
                        <i
                            class="fa fa-close"
                            aria-hidden="true"
                            title="Remove Assignee"
                        >
                        </i>
                    </a>
                    <a
                        class="actionIcon"
                        (click)="
                            updateAdhocTask($event, rowData, 'update_user', {
                                user_type: 2,
                                is_self_assign: true
                            })
                        "
                        [hidden]="
                            !userMap || userMap[rowData.reviewUser] == user_name
                        "
                    >
                        <i
                            class="fa fa-user"
                            aria-hidden="true"
                            title="Self Assign"
                        >
                        </i>
                    </a>
                </td>
                <td style="width: 120px">
                    <div
                        style="width: 100%; height: 20px"
                        (mouseover)="dateCellHover(rowData, $event)"
                    >
                        <span>{{ rowData.estimatedStartDate }}</span>
                        <a
                            style="float: right"
                            *ngIf="
                                rowData.estimatedStartDate &&
                                rowData.initializeDate
                            "
                            (click)="
                                updateAdhocTask(
                                    $event,
                                    rowData,
                                    'update_est_startdate',
                                    { clear: true }
                                )
                            "
                        >
                            <i class="fa fa-close"></i>
                        </a>
                        <a
                            *ngIf="rowData.initializeDate"
                            style="float: right"
                            iname="daterangeInput"
                            daterangepicker
                            timePicker="false"
                            [options]="{
                                singleDatePicker: true,
                                maxDate: '2024-01-01',
                                locale: { format: 'DD MMM YYYY' }
                            }"
                            (selected)="
                                updateAdhocTask(
                                    $event,
                                    rowData,
                                    'update_est_startdate'
                                )
                            "
                        >
                            <i class="fa fa-edit"></i>
                        </a>
                    </div>
                </td>
                <td style="width: 150px">
                    <div
                        style="width: 100%; height: 20px"
                        (mouseover)="dateCellHover(rowData, $event)"
                    >
                        <span>{{ rowData.estimatedEndDate }}</span>
                        <a
                            style="float: right"
                            *ngIf="rowData.initializeDate"
                            (click)="
                                updateAdhocTask(
                                    $event,
                                    rowData,
                                    'update_est_enddate',
                                    {
                                        type: 'next_month'
                                    }
                                )
                            "
                            pTooltip="Next Month"
                        >
                            <i class="fa fa-fast-forward"></i>
                        </a>
                        <a
                            style="float: right"
                            *ngIf="rowData.initializeDate"
                            (click)="
                                updateAdhocTask(
                                    $event,
                                    rowData,
                                    'update_est_enddate',
                                    {
                                        type: 'current_month'
                                    }
                                )
                            "
                            pTooltip="Current Month"
                        >
                            <i class="fa fa-play"></i>
                        </a>
                        <a
                            style="float: right"
                            *ngIf="
                                rowData.estimatedEndDate &&
                                rowData.initializeDate
                            "
                            (click)="
                                updateAdhocTask(
                                    $event,
                                    rowData,
                                    'update_est_enddate',
                                    {
                                        clear: true
                                    }
                                )
                            "
                        >
                            <i class="fa fa-close"></i>
                        </a>
                        <a
                            *ngIf="rowData.initializeDate"
                            style="float: right"
                            iname="daterangeInput"
                            daterangepicker
                            timePicker="false"
                            [options]="{
                                singleDatePicker: true,
                                locale: { format: 'DD MMM YYYY' },
                                maxDate: '2024-01-01'
                            }"
                            (selected)="
                                updateAdhocTask(
                                    $event,
                                    rowData,
                                    'update_est_enddate'
                                )
                            "
                        >
                            <i class="fa fa-edit"></i>
                        </a>
                    </div>
                </td>
                <td *ngIf="!isHidden('startDate')" style="width: 120px">
                    {{ rowData.startDate | date: "dd MMM yyyy" }}
                </td>
                <td style="width: 120px">
                    {{ rowData.endDate | date: "dd MMM yyyy" }}
                </td>
                <td style="width: 100px">
                    {{ rowData.captureEffort }}
                    <i
                        (mousedown)="editWorkLog(rowData, 1, $event, logPanel)"
                        class="fa fa-edit"
                    ></i>
                </td>
                <td style="width: 100px">
                    {{ rowData.reviewEffort }}
                    <i
                        (mousedown)="editWorkLog(rowData, 2, $event, logPanel)"
                        class="fa fa-edit"
                    ></i>
                </td>
                <td *ngIf="!isHidden('totalEffort')" style="width: 100px">
                    <input
                        class="effort-log"
                        type="number"
                        [(ngModel)]="rowData.totalEffort"
                        (keydown.enter)="
                            updateAdhocTask(
                                $event,
                                rowData,
                                'update_total_effort'
                            )
                        "
                        (blur)="
                            updateAdhocTask(
                                $event,
                                rowData,
                                'update_total_effort'
                            )
                        "
                    />
                </td>

                <td *ngIf="!isHidden('IssueId')" style="width: 150px">
                    <div [ngClass]="{ issueLoading: rowData.issueLoading }">
                        <img
                            *ngIf="rowData.issueLoading"
                            style="margin-right: 8px;"
                            src="../assets/Images/loader.gif"
                            alt=""
                        />
                        <tag-input
                            [allowDupes]="false"
                            [modelAsStrings]="true"
                            class="issue-token-container"
                            [(ngModel)]="issueLinks[rowData.adhocTaskId]"
                            (ngModelChange)="
                                issueLinks?.length &&
                                    (issueLinks[rowData.adhocTaskId] = $event)
                            "
                            (onAdd)="onIssueAdd($event, rowData)"
                            (onRemove)="onIssueRemove($event, rowData)"
                            (onSelect)="goToIssue($event)"
                            [onAdding]="onAdding"
                            [onRemoving]="onRemoving.bind(this)"
                            placeholder="Add Issue"
                            secondaryPlaceholder="Add Issue"
                        ></tag-input>
                        <span class="issue-link-container">
                            <a
                                *ngFor="
                                    let link of issueLinks[rowData.adhocTaskId]
                                "
                                (click)="goToIssue(link)"
                                class="issue-link"
                            >
                                {{ link }}
                            </a>
                        </span>
                    </div>
                </td>
                <td *ngIf="!isHidden('country')" style="width: 150px">
                    {{
                        countryRegionMap && countryRegionMap[rowData.company_id]
                            ? countryRegionMap[rowData.company_id].country
                            : ""
                    }}
                </td>
                <td *ngIf="!isHidden('region')" style="width: 150px">
                    <div
                        *ngIf="
                            countryRegionMap &&
                            countryRegionMap[rowData.company_id] &&
                            countryRegionMap[rowData.company_id].region
                        "
                    >
                        <span
                            *ngFor="
                                let region of countryRegionMap[
                                    rowData.company_id
                                ].region;
                                let i = index
                            "
                            >{{ masterRegionMap[region]
                            }}<span
                                *ngIf="
                                    i <
                                    countryRegionMap[rowData.company_id].region
                                        .length -
                                        1
                                "
                                >,
                            </span></span
                        >
                    </div>
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="emptymessage" let-columns>
            <tr *ngIf="emptyDataMessage">
                <td [attr.colspan]="columns.length">
                    {{ emptyDataMessage }}
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

<div class="adhoc_work_footer">
    <div class="select-tab">
        <p-dropdown
            [style]="{ width: '250px' }"
            [options]="typeListarray"
            [(ngModel)]="selectedTypes"
            (onChange)="onselectedType($event)"
        ></p-dropdown>
    </div>
    <div class="add-query-container" *ngIf="show == true">
        <i
            class="fa fa-plus-circle"
            aria-hidden="true"
            title="Add adhoc task"
            (click)="showDialog()"
            label="Show"
        >
        </i>
    </div>
</div>

<span class="total_record"> Total records: {{ totalRecords }} </span>



Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest