webdoorcreator/WebDoorCreator.UI/Components/FilesMan/CompoCompare.razor

<div class="d-flex justify-content-between my-2">
    <div class="col-5 text-center fw-bold border-bottom border-secondary fs-3">
        <div class="row">
            <div class="col-3">
                @if (showBtnNew)
                {
                    <button class="btn btn-primary w-100" @onclick="()=>doScan(false, true)">Scan NEW <i class="fa-solid fa-arrows-rotate"></i></button>
                }
            </div>
            <div class="col-6">
                New Data
            </div>
            <div class="col-3">
                @if (showBtnNew)
                {
                    <button class="btn btn-dark w-100" @onclick="()=>doScan(true, true)">ALL <i class="fa-solid fa-arrows-rotate"></i></button>
                }
            </div>
        </div>
    </div>
    <div class="col-2 text-center">
        @* <button class="btn btn-dark" @onclick="()=>doScan()">Scan Dir New</button> *@

    </div>
    <div class="col-5 text-center fw-bold border-bottom border-secondary fs-3">
        <div class="row">
            <div class="col-3">
                @if (showBtnCur)
                {
                    <button class="btn btn-dark w-100" @onclick="()=>doScan(true, true)">ALL <i class="fa-solid fa-arrows-rotate"></i></button>
                }
            </div>
            <div class="col-6">
                Current Data
            </div>
            <div class="col-3">
                @if (showBtnCur)
                {
                    <button class="btn btn-primary w-100" @onclick="()=>doScan(true, false)">Scan Current <i class="fa-solid fa-arrows-rotate"></i></button>
                }
            </div>
        </div>
    </div>
</div>
<div class="d-flex justify-content-between my-2">
    <div class="col-4 text-center">
        <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">SELECT COMPO TYPE</span>
            @if (ListType != null)
            {
                <select @bind="@TypeSel" class="form-select">
                    <option value="*">-- All Types --</option>
                    @foreach (var item in ListType.OrderBy(x => x))
                    {
                        <option value="@item">@item</option>
                    }
                </select>
            }
        </div>
    </div>
    <div class="col-4 text-center">
        @if (files2Chk != null && files2Chk.Count() > 0)
        {
            @if (files2Chk.Where(x => x.Value.action).ToList().Count > 0)
            {
                <div class="w-100 text-center">
                    <button @onclick="()=>doSave()" class="btn btn-success btn-lg px-3">Apply Changes</button>
                </div>
            }
        }
    </div>
    <div class="col-4 text-end">
        <div class="d-flex justify-content-between">
            <div>
                @if (numTplMissing > 0)
                {
                    <button type="button" class="btn btn-sm btn-success" @onclick="()=>fixMissing()" title="Fix missing components template file">FIX @tplMissing missing</button>
                }
                else
                {
                    <button type="button" class="btn btn-sm btn-outline-success" @onclick="()=>updateNumMissing()" title="Check missing template">@tplMissing missing</button>
                }
            </div>
            @if (searchRecords != null && searchRecords.Count() > 0 && !isLoading)
            {
                <div class="text-nowrap btn-group w-75" role="group">
                    <button type="button" class="btn btn-sm col-3 btn-outline-dark" disabled>Show:</button>
                    <button type="button" class="btn btn-sm col-3 @filtBtnCssAdd" @onclick="()=>filtBtnToggle(Core.Enum.fileStatus.add)">Add</button>
                    <button type="button" class="btn btn-sm col-3 @filtBtnCssUpd" @onclick="()=>filtBtnToggle(Core.Enum.fileStatus.mod)">Update</button>
                    <button type="button" class="btn btn-sm col-3 @filtBtnCssRem" @onclick="()=>filtBtnToggle(Core.Enum.fileStatus.rem)">Delete</button>
                </div>
            }
        </div>
    </div>

</div>
@if (isLoading)
{
    <ProgressDisplay Title="@titleMsg" CurrVal="@sendDataVal" MaxVal="@sendDataMaxVal" ExpTimeMSec="8000"></ProgressDisplay>
}
else if (files2Chk != null && files2Chk.Count() > 0)
{
    <table class="table table-striped">
        <thead>
            <tr class="row">
                <th class="col-1">Type</th>
                <th class="col-3 text-end">Folder/File</th>
                <th class="col-1 text-end">Size</th>
                <th class="col-2 text-center">
                    <input class="form-check-input mt-0" type="checkbox" value="" id="selUns" aria-label="Select or Unselect all" @bind="@selUns">
                    <label for="#selUns">Select/Unselect all</label>
                </th>
                <th class="col-1">Type</th>
                <th class="col-3 text-end">Folder/File</th>
                <th class="col-1 text-end">Size</th>
            </tr>
        </thead>
        <tbody>
            @if (isDrawing)
            {
                <LoadingData></LoadingData>
            }
            else
            {
                @foreach (var item in files2Chk)
                {
                    <tr class="row" style="cursor: pointer;">
                        @if (item.Value.status == Core.Enum.fileStatus.add || item.Value.status == Core.Enum.fileStatus.mod)
                        {
                            <td class="col-1" data-bs-toggle="modal" data-bs-target="#fileDiffModal" @onclick="()=>showDiff(item, item.Value.status)">
                                <h5><b>@item.Key.Split("\\")[0]</b></h5>
                            </td>
                            <td class="col-3 text-end" data-bs-toggle="modal" data-bs-target="#fileDiffModal" @onclick="()=>showDiff(item, item.Value.status)">
                                <b>@item.Key.Split("\\")[1]</b>
                                <div class="small">
                                    @item.Value.FileRelPath
                                    @* @item.Key.Split("\\")[2] *@
                                </div>
                            </td>
                            <td class="col-1 text-end" data-bs-toggle="modal" data-bs-target="#fileDiffModal" @onclick="()=>showDiff(item, item.Value.status)">
                                @($"{item.Value.FileDim / 1024} kb")
                            </td>
                        }
                        else
                        {
                            <td class="col-5" colspan="4" data-bs-toggle="modal" data-bs-target="#fileDiffModal" @onclick="()=>showDiff(item, item.Value.status)"></td>
                        }
                        <td class="col-2 text-center">
                            <button class="btn @btnCssClass(item.Value.status, item.Value.action)" @onclick="()=>changeDoAct(item)">@btnTxt(item.Value.status) &nbsp; <i class="@btnIcon(item.Value.status)"></i></button>
                            @* <button class="btn @btnCssClass(item.Value.status, item.Value.action)" @onclick="()=>changeDoAct(item)" disabled="@(item.Value.status== Core.Enum.fileStatus.rem)">@btnTxt(item.Value.status) &nbsp; <i class="@btnIcon(item.Value.status)"></i></button> *@
                        </td>
                        @if (item.Value.status == Core.Enum.fileStatus.rem || item.Value.status == Core.Enum.fileStatus.mod)
                        {
                            <td class="col-1" data-bs-toggle="modal" data-bs-target="#fileDiffModal" @onclick="()=>showDiff(item, item.Value.status)">
                                <h5><b>@item.Key.Split("\\")[0]</b></h5>
                            </td>
                            <td class="col-3 text-end" data-bs-toggle="modal" data-bs-target="#fileDiffModal" @onclick="()=>showDiff(item, item.Value.status)">
                                <b>@item.Key.Split("\\")[1]</b>
                                <div class="small">
                                    @item.Value.FileRelPath
                                    @* @item.Key.Split("\\")[2] *@
                                </div>
                            </td>
                            <td class="col-1 text-end" data-bs-toggle="modal" data-bs-target="#fileDiffModal" @onclick="()=>showDiff(item, item.Value.status)">
                                @($"{item.Value.FileDim / 1024} kb")
                            </td>
                        }
                        else
                        {
                            <td class="col-5" colspan="4" data-bs-toggle="modal" data-bs-target="#fileDiffModal" @onclick="()=>showDiff(item, item.Value.status)"></td>
                        }
                    </tr>
                }
            }
        </tbody>
    </table>


}
else if (files2Chk == null || files2Chk.Count() == 0)
{
    <div class="alert alert-info text-dark">
        <div class="w-100 text-center fs-4">
            @scanMsg
        </div>
        <div class="w-100 text-center fs-4">
            <i class="fa-solid fa-arrow-down"></i>
        </div>
        <div class="w-100 text-center fs-4">
            <button class="btn btn-dark btn-lg" @onclick="()=>doScan(true, true)">Scan Data</button>
        </div>
    </div>
}

<!-- Modal -->
<div class="modal fade" id="fileDiffModal" tabindex="-1" aria-labelledby="fileDiffModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="min-width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="fileDiffModalLabel">Component Comparer</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <DiffView oldText="@txtSx" newText="@txtDx"></DiffView>
            </div>
            <div class="modal-footer">
                @if (actFile.Key != null)
                {
                    <button class="btn @btnCssClass(actFile.Value.status, actFile.Value.action)" @onclick="()=>changeDoAct(actFile)" title="Accept New Data">@btnTxt(actFile.Value.status) &nbsp; <i class="@btnIcon(actFile.Value.status)"></i></button>
                }
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" title="Modal Close">Close</button>
            </div>
        </div>
    </div>
</div>