Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-25 08:09:38 +02:00
Code Issues Releases Activity Actions 2

Add Transaction Merchant management (#686)

Browse source 
* 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:
Jakub Kottnauer 2024-04-29 21:17:28 +02:00 • committed by GitHub
parent 7f491f5064
commit 9549182462
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
27 changed files with 363 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

32
app/javascript/controllers/merchant_avatar_controller.js Normal file
View 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;
}
}