Ignore:
Timestamp:
09/01/26 06:11:34 (4 weeks ago)
Author:
mmilevski <markomilevski3@…>
Branches:
main
Children:
d2eccb3
Parents:
08aefc6
Message:

Added major improvements.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • KernelRecordsMVC.Web/Views/Admin/EditProduct.cshtml

    r08aefc6 rfa0fbaf  
    11@model KernelRecordsMVC.Application.ViewModels.EditProductViewModel
    22
    3 <h1>Modify Product</h1>
    4 
    5 <div class="card mb-4">
    6 
    7     <div class="card-body">
    8 
    9         <h4>@Model.ReleaseTitle</h4>
    10 
    11         <p class="text-muted mb-0">
    12 
    13             Format:
    14 
    15             <strong>
    16                 @Model.Format
    17             </strong>
    18 
    19         </p>
     3@{
     4    ViewData["Title"] = "Modify Product";
     5}
     6
     7<div class="admin-page admin-form-page">
     8
     9    <!-- HEADER -->
     10
     11    <div class="admin-header">
     12
     13        <div>
     14
     15            <a asp-action="Products"
     16               class="admin-back-link">
     17
     18                ← Products
     19
     20            </a>
     21
     22            <span class="admin-eyebrow">
     23                PRODUCT MANAGEMENT
     24            </span>
     25
     26            <h1>Modify Product</h1>
     27
     28            <p>
     29                Update inventory information or apply a discount.
     30            </p>
     31
     32        </div>
    2033
    2134    </div>
    2235
     36
     37    <!-- PRODUCT SUMMARY -->
     38
     39    <div class="admin-product-summary">
     40
     41        <div>
     42
     43            <span class="admin-eyebrow">
     44                SELECTED PRODUCT
     45            </span>
     46
     47            <h2>
     48                @Model.ReleaseTitle
     49            </h2>
     50
     51        </div>
     52
     53        <div class="admin-product-summary-meta">
     54
     55            <div>
     56
     57                <span>FORMAT</span>
     58
     59                <strong>
     60                    @Model.Format
     61                </strong>
     62
     63            </div>
     64
     65            <div>
     66
     67                <span>CURRENT PRICE</span>
     68
     69                <strong>
     70                    @Model.Price.ToString("C")
     71                </strong>
     72
     73            </div>
     74
     75            <div>
     76
     77                <span>STOCK</span>
     78
     79                <strong>
     80                    @Model.Stock
     81                </strong>
     82
     83            </div>
     84
     85        </div>
     86
     87    </div>
     88
     89
     90    <section class="admin-form-card admin-edit-card">
     91
     92        <form asp-action="EditProduct"
     93              method="post"
     94              id="productEditForm">
     95
     96            @Html.AntiForgeryToken()
     97
     98            <input type="hidden"
     99                   asp-for="ProductId" />
     100
     101
     102            <div asp-validation-summary="ModelOnly"
     103                 class="admin-validation">
     104            </div>
     105
     106
     107            <!-- =================================================
     108                 MODIFICATION TYPE
     109                 ================================================= -->
     110
     111            <div class="admin-form-field">
     112
     113                <label asp-for="ModificationType">
     114                    What do you want to do?
     115                </label>
     116
     117                <div class="admin-modification-options">
     118
     119                    <label class="admin-modification-option">
     120
     121                        <input type="radio"
     122                               asp-for="ModificationType"
     123                               value="UPDATE"
     124                               id="updateOption" />
     125
     126                        <span>
     127
     128                            <strong>
     129                                Update Product
     130                            </strong>
     131
     132                            <small>
     133                                Change price, description or stock.
     134                            </small>
     135
     136                        </span>
     137
     138                    </label>
     139
     140
     141                    <label class="admin-modification-option">
     142
     143                        <input type="radio"
     144                               asp-for="ModificationType"
     145                               value="DISCOUNT"
     146                               id="discountOption" />
     147
     148                        <span>
     149
     150                            <strong>
     151                                Apply Discount
     152                            </strong>
     153
     154                            <small>
     155                                Reduce the current selling price.
     156                            </small>
     157
     158                        </span>
     159
     160                    </label>
     161
     162                </div>
     163
     164                <span asp-validation-for="ModificationType"
     165                      class="admin-field-error">
     166                </span>
     167
     168            </div>
     169
     170
     171            <!-- =================================================
     172                 UPDATE FIELDS
     173                 ================================================= -->
     174
     175            <div id="updateFields"
     176                 class="admin-edit-section">
     177
     178                <div class="admin-edit-section-heading">
     179
     180                    <span class="admin-eyebrow">
     181                        PRODUCT UPDATE
     182                    </span>
     183
     184                    <h3>Product Information</h3>
     185
     186                </div>
     187
     188
     189                <div class="admin-form-row">
     190
     191                    <!-- PRICE -->
     192
     193                    <div class="admin-form-field">
     194
     195                        <label asp-for="Price">
     196                            Price
     197                        </label>
     198
     199                        <div class="admin-input-prefix">
     200
     201                            <span>$</span>
     202
     203                            <input asp-for="Price"
     204                                   type="number"
     205                                   min="0"
     206                                   step="0.01" />
     207
     208                        </div>
     209
     210                        <span asp-validation-for="Price"
     211                              class="admin-field-error">
     212                        </span>
     213
     214                    </div>
     215
     216
     217                    <!-- STOCK -->
     218
     219                    <div class="admin-form-field">
     220
     221                        <label asp-for="Stock">
     222                            Stock
     223                        </label>
     224
     225                        <input asp-for="Stock"
     226                               type="number"
     227                               min="0" />
     228
     229                        <span asp-validation-for="Stock"
     230                              class="admin-field-error">
     231                        </span>
     232
     233                    </div>
     234
     235                </div>
     236
     237
     238                <div class="admin-form-field">
     239
     240                    <label asp-for="ProductDescription">
     241                        Description
     242                    </label>
     243
     244                    <textarea asp-for="ProductDescription"
     245                              rows="5"></textarea>
     246
     247                    <span asp-validation-for="ProductDescription"
     248                          class="admin-field-error">
     249                    </span>
     250
     251                </div>
     252
     253            </div>
     254
     255
     256            <!-- =================================================
     257                 DISCOUNT
     258                 ================================================= -->
     259
     260            <div id="discountFields"
     261                 class="admin-edit-section">
     262
     263                <div class="admin-edit-section-heading">
     264
     265                    <span class="admin-eyebrow">
     266                        PROMOTION
     267                    </span>
     268
     269                    <h3>Apply Discount</h3>
     270
     271                    <p>
     272                        The percentage will be deducted
     273                        from the product's current price.
     274                    </p>
     275
     276                </div>
     277
     278
     279                <div class="admin-form-field">
     280
     281                    <label asp-for="Discount">
     282                        Discount Percentage
     283                    </label>
     284
     285                    <div class="admin-input-suffix">
     286
     287                        <input asp-for="Discount"
     288                               type="number"
     289                               min="0.01"
     290                               max="99.99"
     291                               step="0.01"
     292                               placeholder="10" />
     293
     294                        <span>%</span>
     295
     296                    </div>
     297
     298                    <span asp-validation-for="Discount"
     299                          class="admin-field-error">
     300                    </span>
     301
     302                </div>
     303
     304
     305                <div class="admin-discount-preview">
     306
     307                    <span>
     308                        CURRENT PRICE
     309                    </span>
     310
     311                    <strong id="currentPrice"
     312                            data-price="@Model.Price">
     313                        @Model.Price.ToString("C")
     314                    </strong>
     315
     316
     317                    <span>
     318                        NEW PRICE
     319                    </span>
     320
     321                    <strong id="discountedPrice">
     322                        —
     323                    </strong>
     324
     325                </div>
     326
     327            </div>
     328
     329
     330            <!-- ACTIONS -->
     331
     332            <div class="admin-form-actions">
     333
     334                <button type="submit"
     335                        class="admin-button primary">
     336
     337                    Save Changes
     338
     339                </button>
     340
     341                <a asp-action="Products"
     342                   class="admin-button secondary">
     343
     344                    Cancel
     345
     346                </a>
     347
     348            </div>
     349
     350        </form>
     351
     352    </section>
     353
    23354</div>
    24355
    25 
    26 <form asp-action="EditProduct"
    27       method="post">
    28 
    29     @Html.AntiForgeryToken()
    30 
    31     <input type="hidden"
    32            asp-for="ProductId" />
    33 
    34     <div asp-validation-summary="ModelOnly"
    35          class="text-danger mb-3">
    36     </div>
    37 
    38 
    39     <!-- MODIFICATION TYPE -->
    40 
    41     <div class="mb-3">
    42 
    43         <label asp-for="ModificationType"
    44                class="form-label">
    45 
    46             Modification Type
    47 
    48         </label>
    49 
    50         <select asp-for="ModificationType"
    51                 class="form-select">
    52 
    53             <option value="UPDATE">
    54                 Update Product
    55             </option>
    56 
    57             <option value="DISCOUNT">
    58                 Apply Discount
    59             </option>
    60 
    61         </select>
    62 
    63         <span asp-validation-for="ModificationType"
    64               class="text-danger">
    65         </span>
    66 
    67     </div>
    68 
    69 
    70     <!-- PRICE -->
    71 
    72     <div class="mb-3">
    73 
    74         <label asp-for="Price"
    75                class="form-label">
    76 
    77             Price
    78 
    79         </label>
    80 
    81         <div class="input-group">
    82 
    83             <span class="input-group-text">
    84                 $
    85             </span>
    86 
    87             <input asp-for="Price"
    88                    class="form-control"
    89                    step="0.01" />
    90 
    91         </div>
    92 
    93         <span asp-validation-for="Price"
    94               class="text-danger">
    95         </span>
    96 
    97     </div>
    98 
    99 
    100     <!-- DISCOUNT -->
    101 
    102     <div class="mb-3">
    103 
    104         <label asp-for="Discount"
    105                class="form-label">
    106 
    107             Discount Percentage
    108 
    109         </label>
    110 
    111         <div class="input-group">
    112 
    113             <input asp-for="Discount"
    114                    class="form-control"
    115                    type="number"
    116                    min="0"
    117                    max="100"
    118                    step="0.01" />
    119 
    120             <span class="input-group-text">
    121                 %
    122             </span>
    123 
    124         </div>
    125 
    126         <small class="text-muted">
    127             Only used when "Apply Discount" is selected.
    128         </small>
    129 
    130         <span asp-validation-for="Discount"
    131               class="text-danger">
    132         </span>
    133 
    134     </div>
    135 
    136 
    137     <!-- DESCRIPTION -->
    138 
    139     <div class="mb-3">
    140 
    141         <label asp-for="ProductDescription"
    142                class="form-label">
    143 
    144             Description
    145 
    146         </label>
    147 
    148         <textarea asp-for="ProductDescription"
    149                   class="form-control"
    150                   rows="4">
    151         </textarea>
    152 
    153         <span asp-validation-for="ProductDescription"
    154               class="text-danger">
    155         </span>
    156 
    157     </div>
    158 
    159 
    160     <!-- STOCK -->
    161 
    162     <div class="mb-3">
    163 
    164         <label asp-for="Stock"
    165                class="form-label">
    166 
    167             Stock
    168 
    169         </label>
    170 
    171         <input asp-for="Stock"
    172                class="form-control"
    173                type="number"
    174                min="0" />
    175 
    176         <span asp-validation-for="Stock"
    177               class="text-danger">
    178         </span>
    179 
    180     </div>
    181 
    182 
    183     <div class="d-flex gap-2">
    184 
    185         <button type="submit"
    186                 class="btn btn-success">
    187 
    188             Save Changes
    189 
    190         </button>
    191 
    192         <a asp-action="Index"
    193            class="btn btn-secondary">
    194 
    195             Cancel
    196 
    197         </a>
    198 
    199     </div>
    200 
    201 </form>
    202356
    203357@section Scripts
    204358{
    205     <partial name="_ValidationScriptsPartial"/>
     359    <partial name="_ValidationScriptsPartial" />
     360
     361    <script>
     362
     363        document.addEventListener("DOMContentLoaded", function ()
     364        {
     365            const updateOption =
     366                document.getElementById("updateOption");
     367
     368            const discountOption =
     369                document.getElementById("discountOption");
     370
     371            const updateFields =
     372                document.getElementById("updateFields");
     373
     374            const discountFields =
     375                document.getElementById("discountFields");
     376
     377            const discountInput =
     378                document.getElementById("Discount");
     379
     380            const currentPriceElement =
     381                document.getElementById("currentPrice");
     382
     383            const discountedPriceElement =
     384                document.getElementById("discountedPrice");
     385
     386
     387            function updateMode()
     388            {
     389                const isDiscount =
     390                    discountOption.checked;
     391
     392                updateFields.style.display =
     393                    isDiscount ? "none" : "block";
     394
     395                discountFields.style.display =
     396                    isDiscount ? "block" : "none";
     397            }
     398
     399
     400            function updateDiscountPreview()
     401            {
     402                const currentPrice =
     403                    parseFloat(
     404                        currentPriceElement.dataset.price);
     405
     406                const discount =
     407                    parseFloat(discountInput.value);
     408
     409
     410                if (isNaN(discount) ||
     411                    discount <= 0 ||
     412                    discount >= 100)
     413                {
     414                    discountedPriceElement.textContent =
     415                        "—";
     416
     417                    return;
     418                }
     419
     420
     421                const newPrice =
     422                    currentPrice *
     423                    (1 - discount / 100);
     424
     425
     426                discountedPriceElement.textContent =
     427                    "$" + newPrice.toFixed(2);
     428            }
     429
     430
     431            updateOption.addEventListener(
     432                "change",
     433                updateMode);
     434
     435            discountOption.addEventListener(
     436                "change",
     437                updateMode);
     438
     439            discountInput.addEventListener(
     440                "input",
     441                updateDiscountPreview);
     442
     443
     444            updateMode();
     445            updateDiscountPreview();
     446        });
     447
     448    </script>
    206449}
Note: See TracChangeset for help on using the changeset viewer.