@salesforcedevs/arch-components 1.20.17-alpha8 → 1.25.0

package/src/modules/arch/explorer/explorer.html

@@ -0,0 +1,418 @@
+<template>
+    <div class="filter-header">
+        <div>
+            <h2 class="filter-title">Search for Patterns & Anti-Patterns</h2>
+            <arch-button onclick={handleResetFiltersClick}>
+                Clear filters
+            </arch-button>
+        </div>
+        <div class="filter-header">
+            <arch-button class="filter-title" onclick={handleFeedbackClick}>
+                Submit feedback
+            </arch-button>
+            <arch-social-share
+                title="Pattern &amp; Anti-Pattern Explorer"
+                url={shareUrl}
+            ></arch-social-share>
+        </div>
+    </div>
+
+    <div class="filter-form">
+        <arch-select
+            id="Trusted"
+            label="Trusted"
+            value={_selectedTrusted}
+            onchange={filterChange}
+        >
+            <option value="-1">Select a Dimension</option>
+            <template for:each={trustedArr} for:item="behavior">
+                <optgroup label={behavior.Name} key={behavior.Name}>
+                    <template
+                        for:each={behavior.Dimensions}
+                        for:item="dimension"
+                    >
+                        <template if:false={dimension.isDisabled}>
+                            <option key={dimension.Name} value={dimension.Name}>
+                                {dimension.Name}
+                            </option>
+                        </template>
+                        <template if:true={dimension.isDisabled}>
+                            <option
+                                key={dimension.Name}
+                                value={dimension.Name}
+                                disabled
+                            >
+                                {dimension.Name}
+                            </option>
+                        </template>
+                    </template>
+                </optgroup>
+            </template>
+        </arch-select>
+
+        <arch-select
+            id="Easy"
+            label="Easy"
+            value={_selectedEasy}
+            onchange={filterChange}
+        >
+            <option value="-1">Select a Dimension</option>
+            <template for:each={easyArr} for:item="behavior">
+                <optgroup label={behavior.Name} key={behavior.Name}>
+                    <template
+                        for:each={behavior.Dimensions}
+                        for:item="dimension"
+                    >
+                        <template if:false={dimension.isDisabled}>
+                            <option key={dimension.Name} value={dimension.Name}>
+                                {dimension.Name}
+                            </option>
+                        </template>
+                        <template if:true={dimension.isDisabled}>
+                            <option
+                                key={dimension.Name}
+                                value={dimension.Name}
+                                disabled
+                            >
+                                {dimension.Name}
+                            </option>
+                        </template>
+                    </template>
+                </optgroup>
+            </template>
+        </arch-select>
+
+        <arch-select
+            id="Adaptable"
+            label="Adaptable"
+            value={_selectedAdaptable}
+            onchange={filterChange}
+        >
+            <option value="-1">Select a Dimension</option>
+            <template for:each={adaptableArr} for:item="behavior">
+                <optgroup label={behavior.Name} key={behavior.Name}>
+                    <template
+                        for:each={behavior.Dimensions}
+                        for:item="dimension"
+                    >
+                        <template if:false={dimension.isDisabled}>
+                            <option key={dimension.Name} value={dimension.Name}>
+                                {dimension.Name}
+                            </option>
+                        </template>
+                        <template if:true={dimension.isDisabled}>
+                            <option
+                                key={dimension.Name}
+                                value={dimension.Name}
+                                disabled
+                            >
+                                {dimension.Name}
+                            </option>
+                        </template>
+                    </template>
+                </optgroup>
+            </template>
+        </arch-select>
+        <arch-select
+            id="ProductArea"
+            label="Product Area"
+            value={_selectedProductArea}
+            onchange={filterChange}
+        >
+            <option value="-1">Select a Product Area</option>
+            <template for:each={productAreasArr} for:item="productArea">
+                <template if:false={productArea.isDisabled}>
+                    <option key={productArea.Name} value={productArea.Name}>
+                        {productArea.Name}
+                    </option>
+                </template>
+                <template if:true={productArea.isDisabled}>
+                    <option
+                        key={productArea.Name}
+                        value={productArea.Name}
+                        disabled
+                    >
+                        {productArea.Name}
+                    </option>
+                </template>
+            </template>
+        </arch-select>
+        <arch-select
+            id="Location"
+            label="Location"
+            value={_selectedLocation}
+            onchange={filterChange}
+        >
+            <option value="-1">Select a Location</option>
+            <template for:each={locationsArr} for:item="location">
+                <template if:false={location.isDisabled}>
+                    <option key={location.Name} value={location.Name}>
+                        {location.Name}
+                    </option>
+                </template>
+                <template if:true={location.isDisabled}>
+                    <option key={location.Name} value={location.Name} disabled>
+                        {location.Name}
+                    </option>
+                </template>
+            </template>
+        </arch-select>
+
+        <div class="search-input">
+            <label class="search-input-label" for="search">Search</label>
+            <div class="search-input-wrapper">
+                <arch-icon
+                    class="search-input-icon"
+                    size="small"
+                    symbol="search"
+                ></arch-icon>
+                <input
+                    id="search"
+                    name="search"
+                    class="search-input-input"
+                    placeholder="Search..."
+                    icon-symbol="search"
+                    aria-label="Search..."
+                    value={_keywordFilter}
+                    oninput={keywordFilterChange}
+                />
+            </div>
+        </div>
+
+        <div class="selected-pills">
+            <template for:each={selectedFilters} for:item="selection">
+                <div key={selection.Name} style="max-width: 200px">
+                    <arch-pill id={selection.Name} onremove={removeFilter}>
+                        {selection.Name}
+                    </arch-pill>
+                </div>
+            </template>
+        </div>
+    </div>
+
+    <div class="table-summary">
+        <div class="page-size-controls">
+            <div>Items per page</div>
+            <arch-select value={pageSize} onchange={handlePageSizeChange}>
+                <option value="10">10</option>
+                <option value="25">25</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+                <option value="200">200</option>
+            </arch-select>
+        </div>
+        <template if:false={isLoading}>
+            <div>
+                <div class="filter-stats">{filterStatsLabel}</div>
+                <div class="pagination-controls pagination-controls-top">
+                    <arch-button
+                        onclick={handlePreviousPageClick}
+                        disabled={isFirstPage}
+                    >
+                        &lt; Previous
+                    </arch-button>
+                    <arch-button
+                        onclick={handleNextPageClick}
+                        disabled={isLastPage}
+                    >
+                        Next &gt;
+                    </arch-button>
+                </div>
+            </div>
+            <div class="export-buttons">
+                <div class="export-label">Export current view:</div>
+                <arch-button onclick={handlePdfClick}>
+                    <arch-icon symbol="download"></arch-icon>
+                    &nbsp;&nbsp;PDF
+                </arch-button>
+                <arch-button onclick={handleCsvClick}>
+                    <arch-icon symbol="download"></arch-icon>
+                    &nbsp;&nbsp;CSV
+                </arch-button>
+            </div>
+        </template>
+    </div>
+
+    <arch-tabset active-tab-value="pattern">
+        <arch-tab label="Patterns" value="pattern" title="Patterns">
+            <div class="table-wrapper" id="pattern-table">
+                <table>
+                    <thead>
+                        <tr class="row-title">
+                            <th width="50%">
+                                What Good Looks Like
+                                <p>Pattern</p>
+                            </th>
+                            <th width="20%">
+                                Where to Look
+                                <p>Product Area | Location</p>
+                            </th>
+                            <th width="30%">
+                                Learn More
+                                <p>Dimension | Consideration</p>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- Table data is loaded -->
+                        <template if:false={isLoading}>
+                            <template
+                                for:each={currentPagePatterns}
+                                for:item="pattern"
+                            >
+                                <tr key={pattern.Id} class="row-pattern">
+                                    <td>
+                                        <p>{pattern.Name}</p>
+                                        <p>{pattern.Description}</p>
+                                    </td>
+                                    <td>
+                                        <p>
+                                            {pattern.ProductArea} | In your
+                                            {pattern.Location}
+                                        </p>
+                                    </td>
+                                    <td>
+                                        <p>
+                                            <a
+                                                href={pattern.DimensionURL}
+                                                target="_blank"
+                                                rel="noopener"
+                                            >
+                                                {pattern.Dimension}
+                                            </a>
+                                            &nbsp;|&nbsp;
+                                            <a
+                                                href={pattern.ConsiderationURL}
+                                                target="_blank"
+                                                rel="noopener"
+                                            >
+                                                {pattern.Consideration}
+                                            </a>
+                                        </p>
+                                    </td>
+                                </tr>
+                            </template>
+
+                            <template if:false={hasPatterns}>
+                                <tr>
+                                    <td colspan="3">
+                                        There are no matching patterns for the
+                                        selected dimensions...
+                                    </td>
+                                </tr>
+                            </template>
+                        </template>
+
+                        <!-- Table data is still loading -->
+                        <template if:true={isLoading}>
+                            <tr>
+                                <td colspan="3">
+                                    Select a dimension to get started...
+                                </td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
+            </div>
+        </arch-tab>
+        <arch-tab
+            label="Anti-Patterns"
+            value="anti-pattern"
+            title="Anti-Patterns"
+        >
+            <div class="table-wrapper" id="anti-pattern-table">
+                <table>
+                    <thead>
+                        <tr class="row-title">
+                            <th width="50%">
+                                What to Avoid
+                                <p>Anti-Pattern</p>
+                            </th>
+                            <th width="20%">
+                                Where to Look
+                                <p>Product Area | Location</p>
+                            </th>
+                            <th width="30%">
+                                Learn More
+                                <p>Dimension | Consideration</p>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- Table data is loaded -->
+                        <template if:false={isLoading}>
+                            <template
+                                for:each={currentPageAntiPatterns}
+                                for:item="pattern"
+                            >
+                                <tr key={pattern.Id} class="row-pattern">
+                                    <td>
+                                        <p>{pattern.Name}</p>
+                                        <p>{pattern.Description}</p>
+                                    </td>
+                                    <td>
+                                        <p>
+                                            {pattern.ProductArea} | In your
+                                            {pattern.Location}
+                                        </p>
+                                    </td>
+                                    <td>
+                                        <p>
+                                            <a
+                                                href={pattern.DimensionURL}
+                                                target="_blank"
+                                                rel="noopener"
+                                            >
+                                                {pattern.Dimension}
+                                            </a>
+                                            &nbsp;|&nbsp;
+                                            <a
+                                                href={pattern.ConsiderationURL}
+                                                target="_blank"
+                                                rel="noopener"
+                                            >
+                                                {pattern.Consideration}
+                                            </a>
+                                        </p>
+                                    </td>
+                                </tr>
+                            </template>
+
+                            <template if:false={hasAntiPatterns}>
+                                <tr>
+                                    <td colspan="3">
+                                        There are no matching anti-patterns for
+                                        the selected dimensions...
+                                    </td>
+                                </tr>
+                            </template>
+                        </template>
+
+                        <!-- Table data is still loading -->
+                        <template if:true={isLoading}>
+                            <tr>
+                                <td colspan="3">
+                                    Select a dimension to get started...
+                                </td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
+            </div>
+        </arch-tab>
+    </arch-tabset>
+
+    <template if:false={isLoading}>
+        <div class="pagination-controls">
+            <arch-button
+                onclick={handlePreviousPageClick}
+                disabled={isFirstPage}
+            >
+                &lt; Previous
+            </arch-button>
+            <arch-button onclick={handleNextPageClick} disabled={isLastPage}>
+                Next &gt;
+            </arch-button>
+        </div>
+    </template>
+</template>