raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11568 from jibees/11069-buu-fully-update-the-details-of-my-products-and-variants-1

Browse Source 
🚧 [BUU] Add `Edit` link into a small menu on the last Actions column to the right of the table
This commit is contained in:
Rachel Arnould
2023-09-22 10:30:01 +02:00
committed by GitHub
parent b620e413f4 b9cd8ee462
commit a3ca7e9032
8 changed files with 182 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/views/admin/products_v3/_table.html.haml
View File

@@ -21,6 +21,7 @@
%col{ width:"10%" }
%col{ width:"5%" }
%col{ width:"5%", style: "max-width:5em" }
%col{ width:"5%", style: "max-width:5em" }
%thead
%tr
%th.align-left.with-input= t('admin.products_page.columns.name')
@@ -32,6 +33,7 @@
%th.align-left= t('admin.products_page.columns.category')
%th.align-left= t('admin.products_page.columns.tax_category')
%th.align-left= t('admin.products_page.columns.inherits_properties')
%th.align-right= t('admin.products_page.columns.actions')
- products.each do |product|
= form.fields_for("products", product, index: nil) do |product_form|
%tbody.relaxed{ 'data-record-id': product_form.object.id }
@@ -58,6 +60,8 @@
%td.align-left
%td.align-left
.line-clamp-1= product.inherits_properties ? 'YES' : 'NO' #TODO: consider using https://github.com/RST-J/human_attribute_values, else use I18n.t (also below)
%td.align-right
= render partial: 'admin/products_v3/components/product_actions', locals: { product: product }
- product.variants.each do |variant|
- prefix = "[products][][variants_attributes][]" # Couldn't convince the formbuilder to generate this for me, so for now we manually add the prefix
= form.fields_for(variant) do |variant_form|
@@ -81,3 +85,5 @@
.line-clamp-1= variant.tax_category&.name || "None" # TODO: convert to dropdown, else translate hardcoded string.
%td.align-left
-# empty
%td.align-right
= render partial: 'admin/products_v3/components/product_actions', locals: { product: product, variant: variant }

7
app/views/admin/products_v3/components/_product_actions.html.haml Normal file
View File

@@ -0,0 +1,7 @@
.vertical-ellipsis-menu{ "data-controller": "vertical-ellipsis-menu" }
%i.fa.fa-ellipsis-v{ "data-action": "click->vertical-ellipsis-menu#toggle" }
.vertical-ellipsis-menu-content{ "data-vertical-ellipsis-menu-target": "content" }
- if defined?(variant)
= link_to t('admin.products_page.actions.edit'), edit_admin_product_variant_path(product, variant), class: "vertical-ellipsis-menu-content-item"
- else
= link_to t('admin.products_page.actions.edit'), edit_admin_product_path(product), class: "vertical-ellipsis-menu-content-item"

25
app/webpacker/controllers/vertical_ellipsis_menu_controller.js Normal file
View File

@@ -0,0 +1,25 @@
import { Controller } from "stimulus";
export default class extends Controller {
static targets = ["content"];
connect() {
super.connect();
window.addEventListener("click", this.#hideIfClickedOutside);
}
toggle() {
this.contentTarget.classList.toggle("show");
}
#hideIfClickedOutside = (event) => {
if (this.element.contains(event.target)) {
return;
}
this.#hide();
};
#hide() {
this.contentTarget.classList.remove("show");
}
}

1
app/webpacker/css/admin_v3/all.scss
View File

@@ -113,6 +113,7 @@
@import "../admin/reports";
@import "components/select2"; // admin_v3
@import "components/sidebar-item"; // admin_v3
@import "components/vertical_ellipsis_menu"; // admin_v3 and only V3
@import "../admin/side_menu";
@import "../admin/tables";
@import "../admin/tag_rules";

62
app/webpacker/css/admin_v3/components/vertical_ellipsis_menu.scss Normal file
View File

@@ -0,0 +1,62 @@
.vertical-ellipsis-menu {
position: relative;
width: $btn-relaxed-height;
i.fa-ellipsis-v {
cursor: pointer;
display: block;
height: $btn-relaxed-height;
width: $btn-relaxed-height;
line-height: $btn-relaxed-height;
text-align: center;
border-radius: 3px;
background-color: white;
}
.vertical-ellipsis-menu-content {
position: absolute;
top: 0;
right: 0;
padding-top: 5px;
padding-bottom: 5px;
background-color: white;
@include defaultBoxShadow;
border-radius: 3px;
min-width: 80px;
display: none;
z-index: 100;
&.show {
display: block;
}
.vertical-ellipsis-menu-content-item {
display: block;
padding: 5px 10px;
cursor: pointer;
text-align: left;
border-left: 3px solid white;
color: $near-black;
text-decoration: none;
border-bottom: none;
&:hover {
background-color: $light-grey;
border-left: 3px solid $spree-blue;
}
&.delete {
color: $red;
&:hover {
border-left: 3px solid $red;
background-color: $fair-pink;
}
}
}
}
}
table.products td .vertical-ellipsis-menu {
float: right;
}

3
config/locales/en.yml
View File

@@ -550,6 +550,7 @@ en:
tax_category: "Tax Category"
inherits_properties: "Inherits Properties?"
import_date: "Import Date"
actions: Actions
columns_selector:
unit: Unit
price: Price
@@ -561,6 +562,8 @@ en:
tax_category: "Tax Category"
inherits_properties: "Inherits Properties?"
import_date: "Import Date"
actions:
edit: Edit
adjustments:
skipped_changing_canceled_order: "You can't change a cancelled order."
# Common properties / models

48
spec/javascripts/stimulus/vertical_ellipsis_menu_controller_test.js Normal file
View File

@@ -0,0 +1,48 @@
/**
* @jest-environment jsdom
*/
import { Application } from "stimulus";
import vertical_ellipsis_menu_controller from "../../../app/webpacker/controllers/vertical_ellipsis_menu_controller";
describe("VerticalEllipsisMenuController test", () => {
beforeAll(() => {
const application = Application.start();
application.register("vertical-ellipsis-menu", vertical_ellipsis_menu_controller);
});
beforeEach(() => {
document.body.innerHTML = `
<div data-controller="vertical-ellipsis-menu" id="root">
<div data-action="click->vertical-ellipsis-menu#toggle" id="button">...</div>
<div data-vertical-ellipsis-menu-target="content" id="content">
</div>
</div>
`;
const button = document.getElementById("button");
const content = document.getElementById("content");
});
it("add show class to content when toggle is called", () => {
expect(content.classList.contains("show")).toBe(false);
button.click();
expect(content.classList.contains("show")).toBe(true);
});
it("remove show class from content when clicking button", () => {
button.click();
expect(content.classList.contains("show")).toBe(true);
button.click();
expect(content.classList.contains("show")).toBe(false);
});
it("remove show class from content when clicking outside", () => {
button.click();
expect(content.classList.contains("show")).toBe(true);
document.body.click();
expect(content.classList.contains("show")).toBe(false);
});
});

30
spec/system/admin/products_v3/products_spec.rb
View File

@@ -157,6 +157,36 @@ describe 'As an admin, I can see the new product page' do
end
end
describe "Actions columns (edit)" do
let!(:variant_a1) {
create(:variant,
product: product_a,
display_name: "Medium box",
sku: "APL-01",
price: 5.25)
}
let!(:product_a) { create(:simple_product, name: "Apples", sku: "APL-00") }
before do
visit admin_products_v3_index_url
end
it "shows an actions memu with an edit link when clicking on icon for product" do
within row_containing_name("Apples") do
page.find(".vertical-ellipsis-menu").click
expect(page).to have_link "Edit", href: spree.edit_admin_product_path(product_a)
end
end
it "shows an actions memu with an edit link when clicking on icon for variant" do
within row_containing_name("Medium box") do
page.find(".vertical-ellipsis-menu").click
expect(page).to have_link "Edit",
href: spree.edit_admin_product_variant_path(product_a, variant_a1)
end
end
end
describe "updating" do
let!(:variant_a1) {
create(:variant,