Rewrite pills and pill usage to actually hold selected status (74e6f9a2) · Commits · Fachschaft / Portal

portal/static/js/components/pieces/Agenda.mjs

+1 −1

+13 −9

Changes for portal/static/js/components/pieces/Pill.mjs: 13 added lines, 9 removed lines.
Original line number	Diff line number	Diff line
		/**
		* Pill UI component (has multiple items, <=1 can be active).
		*
		* Initialize as:
		* Has two attributes, a list of `items` and a `model`:
		*
		* m(Pill, { items: [...] })
		* An item has the following properties:
		*
		* An item can have the following optional properties:
		*
		* - `label`: used in the DOM (otherwise, the item itself is used)
		* - `label`: displayed in the DOM
		* - `class`: added to the CSS classes of the item
		* - `title`: appears on hover
		* - `id`
		* - `id`: identifies the item
		*
		* The model has the following properties:
		*
		* - `active`: holds the id of the item which is currently selected
		*/
		export const Pill = {
		view(vnode) {
		const model = vnode.attrs.model

		return m(
		"ul.pill",
		vnode.attrs.items.map(it =>
		@@ -21,15 +25,15 @@ export const Pill = {
		"li",
		{
		onclick: () => {
		this.active = it.id \|\| it
		model.active = it.id
		},
		class:
		(this.active === (it.id \|\| it) ? "active" : "") +
		(model.active === it.id ? "active" : "") +
		" " +
		(it.class \|\| ""),
		title: it.title,
		},
		it.label \|\| it,
		it.label,
		),
		),
		)

+22 −9

Changes for portal/static/js/components/pieces/StatusPill.mjs: 22 added lines, 9 removed lines.
Original line number	Diff line number	Diff line
		import { Pill } from "./Pill.mjs"

		export const StatusPill = {
		view() {
		view(vnode) {
		const agendaItem = vnode.attrs.item

		return m(Pill, {
		items: [
		{
		id: "next-meeting",
		id: 42,
		class: "next-meeting",
		label: m("i.fa-solid.fa-users"),
		title: "Nächste Fachschaftssitzung",
		},
		{
		id: "to-do",
		id: 41,
		class: "to-do",
		label: m("i.fa-solid.fa-list-check"),
		title: "To Do",
		},
		{
		id: "in-progress",
		id: 36,
		class: "in-progress",
		label: m("i.fa-solid.fa-arrows-rotate"),
		title: "In Arbeit",
		},
		{
		id: "done",
		id: 38,
		class: "done",
		label: m("i.fa-solid.fa-check"),
		title: "Erledigt",
		},
		{
		id: "discarded",
		id: 39,
		class: "discarded",
		label: m("i.fa-regular.fa-trash-can"),
		title: "Verworfen",
		},
		].map(it => {
		return { ...it, class: it.id }
		}),
		],
		model: {
		get active() {
		return agendaItem.taiga.status
		},
		set active(id) {
		agendaItem.taiga.status = id
		},
		},
		})
		},
		}