mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-07-22 14:49:38 +02:00
Add Transaction Merchant management (#686)
* Add basid crud for merchant management * Tweak UI and add localization * Fix lint * Add filtering by merchant * Add tests * Add stimulus controller to update avatar in merchant form * Add line between merchant rows * Change default merchant color * Cleanup
This commit is contained in:
parent
7f491f5064
commit
9549182462
27 changed files with 363 additions and 18 deletions
32
app/javascript/controllers/merchant_avatar_controller.js
Normal file
32
app/javascript/controllers/merchant_avatar_controller.js
Normal file
|
@ -0,0 +1,32 @@
|
|||
import {Controller} from "@hotwired/stimulus";
|
||||
|
||||
// Connects to data-controller="merchant-avatar"
|
||||
// Used by the transaction merchant form to show a preview of what the avatar will look like
|
||||
export default class extends Controller {
|
||||
static targets = [
|
||||
"name",
|
||||
"color",
|
||||
"avatar"
|
||||
];
|
||||
|
||||
connect() {
|
||||
this.nameTarget.addEventListener("input", this.handleNameChange);
|
||||
this.colorTarget.addEventListener("input", this.handleColorChange);
|
||||
}
|
||||
|
||||
disconnect() {
|
||||
this.nameTarget.removeEventListener("input", this.handleNameChange);
|
||||
this.colorTarget.removeEventListener("input", this.handleColorChange);
|
||||
}
|
||||
|
||||
handleNameChange = (e) => {
|
||||
this.avatarTarget.textContent = (e.currentTarget.value?.[0] || "?").toUpperCase();
|
||||
}
|
||||
|
||||
handleColorChange = (e) => {
|
||||
const color = e.currentTarget.value;
|
||||
this.avatarTarget.style.backgroundColor = `color-mix(in srgb, ${color} 5%, white)`;
|
||||
this.avatarTarget.style.borderColor = `color-mix(in srgb, ${color} 10%, white)`;
|
||||
this.avatarTarget.style.color = color;
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue