Export template source from 4c88728f144add3457b4273d4b9a04ee53c53be3:quixos-instance/packages/project-react-runtime
This commit is contained in:
Quixos Template Publisher
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
declare module "*?browser-source" {
|
||||
const source: string;
|
||||
export default source;
|
||||
}
|
||||
declare module "*.css";
|
||||
@@ -0,0 +1,26 @@
|
||||
// @generated by camino-codegen-ts-runtime. Do not edit.
|
||||
import {
|
||||
createWebStudioComponent,
|
||||
type ReactComponentHostProps,
|
||||
type ObjectRef,
|
||||
} from "@quixos/web-studio-react-runtime";
|
||||
|
||||
export type ProjectReactComponentRenderProps = {
|
||||
"compact"?: boolean;
|
||||
};
|
||||
|
||||
export type Empty = {
|
||||
|
||||
};
|
||||
|
||||
export type ProjectComponentProps = {
|
||||
forObject: ObjectRef<"atom:project">;
|
||||
} & ProjectReactComponentRenderProps & ReactComponentHostProps<Record<string, never>>;
|
||||
|
||||
export const ProjectComponent = createWebStudioComponent<
|
||||
ObjectRef<"atom:project">,
|
||||
ProjectReactComponentRenderProps,
|
||||
Record<string, never>
|
||||
>({
|
||||
expectedAtomId: "atom:project",
|
||||
});
|
||||
@@ -0,0 +1,29 @@
|
||||
// @generated by camino-codegen-ts-runtime. Do not edit.
|
||||
import {
|
||||
createWebStudioComponent,
|
||||
type ReactComponentHostProps,
|
||||
type ObjectRef,
|
||||
} from "@quixos/web-studio-react-runtime";
|
||||
|
||||
export type TodoReactComponentRenderProps = {
|
||||
"selected"?: boolean;
|
||||
"compact"?: boolean;
|
||||
};
|
||||
|
||||
export type TodoReactComponentAction = {
|
||||
"type"?: TodoReactComponentActionType;
|
||||
};
|
||||
|
||||
export type TodoReactComponentActionType = "TODO_REACT_COMPONENT_ACTION_TYPE_UNSPECIFIED" | "SELECT";
|
||||
|
||||
export type TodoComponentProps = {
|
||||
forObject: ObjectRef<"atom:task">;
|
||||
} & TodoReactComponentRenderProps & ReactComponentHostProps<TodoReactComponentAction>;
|
||||
|
||||
export const TodoComponent = createWebStudioComponent<
|
||||
ObjectRef<"atom:task">,
|
||||
TodoReactComponentRenderProps,
|
||||
TodoReactComponentAction
|
||||
>({
|
||||
expectedAtomId: "atom:task",
|
||||
});
|
||||
+1186
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+59
@@ -0,0 +1,59 @@
|
||||
// Generated by the Quixos React platform contract. Do not edit.
|
||||
declare module "@quixos/web-studio-react-runtime" {
|
||||
import type * as React from "react";
|
||||
export function useComponentOverlayContainer(): HTMLElement;
|
||||
export function useComponentStyleRoot(): ShadowRoot;
|
||||
export type ObjectRef<AtomId extends string> = string & {
|
||||
readonly $quixosAtom: AtomId;
|
||||
};
|
||||
export type FieldCapability = {objectId: string; interfaceRevisionId: string; getOperationId: string; watchOperationId?: string; setOperationId?: string; inputKind?: "fields" | "value"};
|
||||
export type ReadableField<T> = {readonly value?: T; readonly capability: FieldCapability};
|
||||
/** set(T) uses the resolved capability: native CRDT fields send incremental edits;
|
||||
* custom/manual setters receive semantic values. Storage provenance grants no authority. */
|
||||
export type WritableField<T> = ReadableField<T> & {readonly $writeType?: (value: T) => T; readonly writable: true; readonly capability: FieldCapability & {setOperationId: string}};
|
||||
export type LiveFieldProp<T> = ReadableField<T>;
|
||||
export type InterfaceReference<I extends string, Fields> = {readonly $quixosRef: string; readonly interfaceRevisionId: I; readonly fields: Fields};
|
||||
export type ReactInterfaceContract<View> = {readonly interfaceRevisionId: string; readonly $viewType?: (view: View) => View};
|
||||
export function defineReactInterfaceContract<View>(interfaceRevisionId: string, interfaces: unknown): ReactInterfaceContract<View>;
|
||||
export function tryConform<View>(object: string | {readonly $quixosRef: string}, contract: ReactInterfaceContract<View>, options?: {signal?: AbortSignal}): Promise<View | undefined>;
|
||||
export type ConformanceResult<View> = {status: "loading"} | {status: "absent"} | {status: "available"; view: View} | {status: "error"; error: Error};
|
||||
export function useTryConform<View>(object: string | {readonly $quixosRef: string}, contract: ReactInterfaceContract<View>): ConformanceResult<View>;
|
||||
export type QueryValueType = {kind: "builtin" | "scalar"; name: string} | {kind: "record"; fields: Record<string, QueryValueType>} | {kind: "optional" | "list"; value: QueryValueType} | {kind: "object-ref"; expectation: {kind: "atom"; atomId: string} | {kind: "interface"; interfaceRevisionId: string}};
|
||||
export type QueryReference<Contract extends string = string> = {readonly $quixosRef: string; readonly queryContract: Contract};
|
||||
export interface QueryDescriptor<Variables, Result> {readonly id: string; readonly definitionDigest: string; readonly rootInterfaceRevisionId: string; readonly variables: QueryValueType; readonly output: QueryValueType; readonly watch: boolean; readonly $types?: (variables: Variables, result: Result) => [Variables, Result]}
|
||||
export type QueryPartial<T> = T extends QueryReference ? T : T extends readonly (infer Item)[] ? QueryPartial<Item>[] : T extends object ? {[Key in keyof T]?: QueryPartial<T[Key]>} : T;
|
||||
export type QueryFieldState = {path: readonly (string | number)[]; status: "pending" | "error"; error?: string};
|
||||
export type QueryState<T> = {refreshing: boolean; fields: QueryFieldState[]; runId?: string; sequence?: bigint; consistency?: string} & ({status: "loading"; data?: undefined; error?: undefined} | {status: "ready"; data: T; error?: undefined} | {status: "partial"; data: QueryPartial<T>; error?: undefined} | {status: "error"; data?: T | QueryPartial<T>; error: Error});
|
||||
export function useQuery<Variables, Result>(descriptor: QueryDescriptor<Variables, Result>, options: {root: string | {readonly $quixosRef: string}; variables: Variables}): QueryState<Result> & {refresh(): void};
|
||||
export interface QueryConnection<Row> {entries: {key: string; node: Row; cursor?: string | null}[]; pageInfo: {hasNextPage: boolean; endCursor?: string | null}}
|
||||
export function CollectionView<Result, Row>(props: {result: QueryState<Result> & {refresh(): void}; connection(data: QueryPartial<Result>): QueryPartial<QueryConnection<Row>> | undefined; renderItem(row: QueryPartial<Row>, entryKey: string): React.ReactNode; onCreate?: () => void; onLoadMore?: (cursor: string | null) => void; onReset?: () => void; loadingMore?: boolean; empty?: React.ReactNode; prefetch?: boolean}): React.ReactElement;
|
||||
export type ReactComponentHostProps<Action> = {
|
||||
onAction?: (action: Action) => void;
|
||||
fallback?: React.ReactNode;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
/** Optional extra action. The host still displays and reports errors by default. */
|
||||
extraErrorAction?: (error: Error) => void;
|
||||
};
|
||||
export type ReactComponentImplementationProps<CaminoProps, RenderProps, Action> = {
|
||||
camino: CaminoProps;
|
||||
render: RenderProps;
|
||||
dispatch: (action: Action) => void;
|
||||
};
|
||||
export const createWebStudioComponent: <
|
||||
ForObject extends ObjectRef<string>, RenderProps extends object, Action,
|
||||
>(config: { expectedAtomId: string }) => (props: {
|
||||
forObject: ForObject;
|
||||
} & RenderProps & ReactComponentHostProps<Action>) => any;
|
||||
export const invokeCapability: <Result = unknown>(
|
||||
objectId: string,
|
||||
interfaceRevisionId: string,
|
||||
operationId: string,
|
||||
value?: unknown,
|
||||
options?: {clientMutationId?: string; signal?: AbortSignal},
|
||||
) => Promise<Result>;
|
||||
export const h: typeof React.createElement;
|
||||
export function useLiveField<T>(field: ReadableField<T>, options: {write: (value: T) => Promise<void>}): readonly [T, (value: T) => Promise<void>];
|
||||
export function useLiveField<T>(field: WritableField<T>): readonly [T, (value: T) => Promise<void>];
|
||||
export function useLiveField<T>(field: ReadableField<T>): readonly [T];
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
// This adapter keeps the implementation file hand-authored.
|
||||
export { createComponent as handler } from "../project-react.impl.js";
|
||||
@@ -0,0 +1,2 @@
|
||||
// This adapter keeps the implementation file hand-authored.
|
||||
export { props as handler } from "../project-react.impl.js";
|
||||
@@ -0,0 +1,2 @@
|
||||
// This adapter keeps the implementation file hand-authored.
|
||||
export { props as handler } from "../project-react.impl.js";
|
||||
@@ -0,0 +1,2 @@
|
||||
// This adapter keeps the implementation file hand-authored.
|
||||
export { stopWatch as handler } from "../project-react.impl.js";
|
||||
@@ -0,0 +1,2 @@
|
||||
// This adapter keeps the implementation file hand-authored.
|
||||
export { source as handler } from "../project-react.impl.js";
|
||||
@@ -0,0 +1,3 @@
|
||||
// Generated by qx-scaffold-v1
|
||||
import { serveMigration } from "@quixos/camino-package-runtime";
|
||||
await serveMigration({});
|
||||
@@ -0,0 +1,358 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
createWebStudioComponent,
|
||||
tryConform,
|
||||
useLiveField,
|
||||
useQuery,
|
||||
type ObjectRef,
|
||||
type QueryState,
|
||||
type ReactComponentImplementationProps,
|
||||
} from "@quixos/web-studio-react-runtime";
|
||||
import {
|
||||
queries,
|
||||
reactInterfaces,
|
||||
type QueryResults,
|
||||
type QueryVariables,
|
||||
type ReactResults,
|
||||
} from "./gen/react-props.gen.js";
|
||||
import "./tracker.css";
|
||||
|
||||
type Tag = QueryResults["Catalog"]["root"]["tags"]["entries"][number]["node"];
|
||||
type TagChoice = { id: string; name: string; color: string };
|
||||
const TaskEditor = createWebStudioComponent<ObjectRef<"atom:task">, { tagChoices: TagChoice[] }, never>({
|
||||
expectedAtomId: "atom:task",
|
||||
});
|
||||
type Props = ReactComponentImplementationProps<ReactResults["propsGet"], { compact?: boolean }, never>;
|
||||
type ListProps = {
|
||||
root: string;
|
||||
variables: QueryVariables["Tasks"];
|
||||
selected: string | null;
|
||||
select(id: string): void;
|
||||
next(cursor: string | null): void;
|
||||
reset(): void;
|
||||
};
|
||||
function Rows({ result, selected, select, next, reset }: ListProps & { result: QueryState<QueryResults["Tasks"]> }) {
|
||||
if (result.status === "error")
|
||||
return (
|
||||
<div role="alert" className="tt-notice">
|
||||
{result.error.message}
|
||||
<button onClick={reset}>Return to first page</button>
|
||||
</div>
|
||||
);
|
||||
if (result.status !== "ready") return <p className="tt-notice">Loading tasks…</p>;
|
||||
const page = result.data.root.tasks;
|
||||
return (
|
||||
<>
|
||||
<div className="tt-rows" aria-label="Tasks">
|
||||
{page.entries.length === 0 && <p className="tt-notice">No tasks match this view.</p>}
|
||||
{page.entries.map(({ key, node: task }) => (
|
||||
<button
|
||||
className={"tt-row" + (selected === task._qx.ref.$quixosRef ? " is-selected" : "")}
|
||||
aria-pressed={selected === task._qx.ref.$quixosRef}
|
||||
key={key}
|
||||
onClick={() => select(task._qx.ref.$quixosRef)}
|
||||
>
|
||||
<span className={"tt-status status-" + task.status.toLowerCase()}>
|
||||
{task.status === "DONE" ? "✓" : task.status === "ARCHIVED" ? "—" : "○"}
|
||||
</span>
|
||||
<span className="tt-row-body">
|
||||
<strong>{task.title}</strong>
|
||||
<span className="tt-row-meta">
|
||||
{task.dueDate || "No due date"}
|
||||
{task.repeatDays > 0 ? ` · Every ${task.repeatDays}d` : ""}
|
||||
{task.estimatedHours > 0 ? ` · ${task.estimatedHours}h` : ""}
|
||||
{task.priority === "HIGH" ? " · High priority" : ""}
|
||||
</span>
|
||||
<span className="tt-tag-line">
|
||||
{task.tags.entries.map(({ node: tag }) => (
|
||||
<span className="tt-tag" key={tag._qx.ref.$quixosRef}>
|
||||
<i style={{ background: tag.color }} />
|
||||
{tag.name}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
{task._qx.relations.completions.aggregate.count > 0n && (
|
||||
<span className="tt-row-meta">
|
||||
{String(task._qx.relations.completions.aggregate.count)} completions
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="tt-page">
|
||||
<button onClick={reset}>First page</button>
|
||||
{page.pageInfo.hasNextPage && <button onClick={() => next(page.pageInfo.endCursor)}>Next 50 tasks →</button>}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
function AllRows(props: ListProps) {
|
||||
return <Rows {...props} result={useQuery(queries.Tasks, { root: props.root, variables: props.variables })} />;
|
||||
}
|
||||
function UntaggedRows(props: ListProps) {
|
||||
return <Rows {...props} result={useQuery(queries.UntaggedTasks, { root: props.root, variables: props.variables })} />;
|
||||
}
|
||||
function TaggedRows(props: ListProps & { tags: Tag["_qx"]["ref"][] }) {
|
||||
return (
|
||||
<Rows
|
||||
{...props}
|
||||
result={useQuery(queries.TaggedTasks, { root: props.root, variables: { ...props.variables, tags: props.tags } })}
|
||||
/>
|
||||
);
|
||||
}
|
||||
export default function ProjectComponent({ camino }: Props) {
|
||||
const [name, setName] = useLiveField(camino.named.fields.name);
|
||||
const root = camino.tasks.$quixosRef;
|
||||
const catalog = useQuery(queries.Catalog, { root, variables: {} });
|
||||
const summary = useQuery(queries.Summary, { root, variables: {} });
|
||||
const [selected, setSelected] = useState<string | null>(null);
|
||||
const [status, setStatus] = useState("OPEN");
|
||||
const [tagIds, setTagIds] = useState<string[]>([]);
|
||||
const [untagged, setUntagged] = useState(false);
|
||||
const [after, setAfter] = useState<string | null>(null);
|
||||
const [newTitle, setNewTitle] = useState("");
|
||||
const [newTag, setNewTag] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const tags = catalog.status === "ready" ? catalog.data.root.tags.entries.map((e) => e.node) : [];
|
||||
const run = async (action: () => Promise<unknown>) => {
|
||||
if (busy) return;
|
||||
setBusy(true);
|
||||
setError("");
|
||||
try {
|
||||
await action();
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : String(e));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
const actions = async () => {
|
||||
const view = await tryConform(root, reactInterfaces.ProjectActions);
|
||||
if (!view) throw new Error("This project no longer supports task actions");
|
||||
return view.call;
|
||||
};
|
||||
const addTask = () =>
|
||||
run(async () => {
|
||||
if (!newTitle.trim()) return;
|
||||
const task = await (await actions())["addTask.call"](newTitle.trim());
|
||||
setNewTitle("");
|
||||
setAfter(null);
|
||||
setStatus("OPEN");
|
||||
setTagIds([]);
|
||||
setUntagged(false);
|
||||
setSelected(task);
|
||||
});
|
||||
const editTag = (tag: Tag, field: "name" | "color", value: string) =>
|
||||
run(async () => {
|
||||
if (!value.trim()) throw new Error("A tag needs a name");
|
||||
const view = await tryConform(tag._qx.ref, reactInterfaces.TagData);
|
||||
if (!view) throw new Error("Tag is no longer available");
|
||||
await view.call[field === "name" ? "name.set" : "color.set"](value);
|
||||
});
|
||||
const choices = tags.map((tag) => ({ id: tag._qx.ref.$quixosRef, name: tag.name, color: tag.color }));
|
||||
const totals = summary.status === "ready" ? summary.data.root._qx.relations.tasks : undefined;
|
||||
const list: ListProps = {
|
||||
root,
|
||||
variables: { first: 50, after, statuses: status === "ALL" ? ["OPEN", "DONE", "ARCHIVED"] : [status] },
|
||||
selected,
|
||||
select: setSelected,
|
||||
next: setAfter,
|
||||
reset: () => {
|
||||
setAfter(null);
|
||||
},
|
||||
};
|
||||
const activeTags = tags.filter((t) => tagIds.includes(t._qx.ref.$quixosRef));
|
||||
return (
|
||||
<section className="tt-board">
|
||||
<header className="tt-header">
|
||||
<input
|
||||
aria-label="Project name"
|
||||
value={name}
|
||||
onChange={(e) => {
|
||||
void setName(e.target.value).catch((err) => setError(String(err)));
|
||||
}}
|
||||
/>
|
||||
<span>{totals ? `${String(totals.aggregate.count)} tasks` : "Task tracker"}</span>
|
||||
</header>
|
||||
{error && (
|
||||
<div role="alert" className="tt-error">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<form
|
||||
className="tt-add"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
void addTask();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
aria-label="New task title"
|
||||
placeholder="Add a task"
|
||||
value={newTitle}
|
||||
onChange={(e) => setNewTitle(e.target.value)}
|
||||
disabled={busy}
|
||||
/>
|
||||
<button disabled={busy || !newTitle.trim()} type="submit">
|
||||
Add task
|
||||
</button>
|
||||
</form>
|
||||
<nav className="tt-filters" aria-label="Task filters">
|
||||
<select
|
||||
aria-label="Task status"
|
||||
value={status}
|
||||
onChange={(e) => {
|
||||
setStatus(e.target.value);
|
||||
setAfter(null);
|
||||
}}
|
||||
>
|
||||
<option value="OPEN">Open</option>
|
||||
<option value="DONE">Done</option>
|
||||
<option value="ARCHIVED">Archived</option>
|
||||
<option value="ALL">All statuses</option>
|
||||
</select>
|
||||
<button
|
||||
aria-pressed={!untagged && tagIds.length === 0}
|
||||
onClick={() => {
|
||||
setTagIds([]);
|
||||
setUntagged(false);
|
||||
setAfter(null);
|
||||
}}
|
||||
>
|
||||
All tags
|
||||
</button>
|
||||
<button
|
||||
aria-pressed={untagged}
|
||||
onClick={() => {
|
||||
setTagIds([]);
|
||||
setUntagged(true);
|
||||
setAfter(null);
|
||||
}}
|
||||
>
|
||||
Untagged
|
||||
</button>
|
||||
{tags.map((tag) => (
|
||||
<button
|
||||
key={tag._qx.ref.$quixosRef}
|
||||
aria-pressed={tagIds.includes(tag._qx.ref.$quixosRef)}
|
||||
onClick={() => {
|
||||
setUntagged(false);
|
||||
setAfter(null);
|
||||
setTagIds((ids) =>
|
||||
ids.includes(tag._qx.ref.$quixosRef)
|
||||
? ids.filter((id) => id !== tag._qx.ref.$quixosRef)
|
||||
: [...ids, tag._qx.ref.$quixosRef],
|
||||
);
|
||||
}}
|
||||
>
|
||||
<i style={{ background: tag.color }} />
|
||||
{tag.name}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
{tagIds.length > 1 && <p className="tt-filter-note">Matching any selected tag</p>}
|
||||
{catalog.status === "error" && (
|
||||
<p role="alert" className="tt-error">
|
||||
Tags: {catalog.error.message}
|
||||
</p>
|
||||
)}
|
||||
<main className={"tt-body" + (selected ? " has-detail" : "")}>
|
||||
<section className="tt-list">
|
||||
{untagged ? (
|
||||
<UntaggedRows {...list} />
|
||||
) : activeTags.length ? (
|
||||
<TaggedRows {...list} tags={activeTags.map((t) => t._qx.ref)} />
|
||||
) : (
|
||||
<AllRows {...list} />
|
||||
)}
|
||||
</section>
|
||||
<section className="tt-detail">
|
||||
{selected ? (
|
||||
<>
|
||||
<div className="tt-detail-bar">
|
||||
<button onClick={() => setSelected(null)}>← Task list</button>
|
||||
<a href={`/entity/${encodeURIComponent(selected)}`}>Open separately ↗</a>
|
||||
</div>
|
||||
{/* The queried relation explicitly targets atom Task; query refs carry its TaskData view. */}
|
||||
<TaskEditor
|
||||
forObject={selected as ObjectRef<"atom:task">}
|
||||
tagChoices={choices}
|
||||
style={{ flex: 1, minHeight: 0, height: "100%" }}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<div className="tt-empty">Select a task to edit it or view completion history.</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
<details className="tt-manage">
|
||||
<summary>Tags & project totals</summary>
|
||||
<div className="tt-management">
|
||||
<section>
|
||||
<h3>Tags</h3>
|
||||
{tags.map((tag) => (
|
||||
<div className="tt-tag-edit" key={tag._qx.ref.$quixosRef}>
|
||||
<input
|
||||
aria-label={`Color for ${tag.name}`}
|
||||
type="color"
|
||||
value={/^#[0-9a-f]{6}$/i.test(tag.color) ? tag.color : "#557a68"}
|
||||
disabled={busy}
|
||||
onChange={(e) => {
|
||||
void editTag(tag, "color", e.target.value);
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
aria-label={`Rename ${tag.name}`}
|
||||
defaultValue={tag.name}
|
||||
key={tag.name}
|
||||
disabled={busy}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value !== tag.name) void editTag(tag, "name", e.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<form
|
||||
className="tt-add"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
void run(async () => {
|
||||
await (await actions())["addTag.call"](newTag);
|
||||
setNewTag("");
|
||||
});
|
||||
}}
|
||||
>
|
||||
<input
|
||||
aria-label="New tag name"
|
||||
placeholder="New tag"
|
||||
value={newTag}
|
||||
onChange={(e) => setNewTag(e.target.value)}
|
||||
/>
|
||||
<button disabled={busy || !newTag.trim()}>Add tag</button>
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Project totals</h3>
|
||||
{summary.status === "error" && <p role="alert">{summary.error.message}</p>}
|
||||
{totals?.groups.entries.map((row) => (
|
||||
<p key={row.group.status}>
|
||||
{row.group.status.toLowerCase()}: <strong>{String(row.aggregate.count)}</strong> ·{" "}
|
||||
{row.aggregate.sum.estimatedHours ?? 0}h estimated
|
||||
</p>
|
||||
))}
|
||||
<h4>Open tasks by tag</h4>
|
||||
{totals?.filter.expand.tags.groups.entries.map((row) => (
|
||||
<p key={row.group.target._qx.ref.$quixosRef}>
|
||||
<i style={{ background: row.group.target.color }} />
|
||||
{row.group.target.name}: {String(row.aggregate.count)} · {row.aggregate.sum.source.estimatedHours ?? 0}h
|
||||
</p>
|
||||
))}
|
||||
<small>A task can contribute to more than one tag. Project totals count each task once.</small>
|
||||
</section>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import componentSource from "./project-component.js?browser-source";
|
||||
import type { Contexts, Results } from "./gen/qx.js";
|
||||
|
||||
export const source = () => componentSource;
|
||||
export const createComponent = ({ objectId }: Contexts["createComponent"]) => objectId;
|
||||
export const props = {
|
||||
kind: "derived" as const,
|
||||
get: async ({ ports }: Contexts["propsGet"]): Promise<Results["propsGet"]> => ({
|
||||
named: ports.named.objectId,
|
||||
tasks: ports.tasks.objectId,
|
||||
}),
|
||||
};
|
||||
export const stopWatch = () => null;
|
||||
@@ -0,0 +1,17 @@
|
||||
// Generated by qx-scaffold-v1
|
||||
import { servePackageRuntime } from "@quixos/camino-package-runtime";
|
||||
import { createRuntime } from "./gen/qx.js";
|
||||
import { handler as impl0 } from "./impl/createComponent.js";
|
||||
import { handler as impl1 } from "./impl/sourceGet.js";
|
||||
import { handler as impl2 } from "./impl/propsGet.js";
|
||||
import { handler as impl3 } from "./impl/propsWatch.js";
|
||||
import { handler as impl4 } from "./impl/propsWatchStop.js";
|
||||
servePackageRuntime(
|
||||
createRuntime({
|
||||
createComponent: impl0,
|
||||
sourceGet: impl1,
|
||||
propsGet: impl2,
|
||||
propsWatch: impl3,
|
||||
propsWatchStop: impl4,
|
||||
}),
|
||||
);
|
||||
+276
@@ -0,0 +1,276 @@
|
||||
.tt-board {
|
||||
height: 100%;
|
||||
min-height: 360px;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: #fcfcf8;
|
||||
color: #27372d;
|
||||
font:
|
||||
14px/1.45 system-ui,
|
||||
sans-serif;
|
||||
container-type: inline-size;
|
||||
}
|
||||
.tt-board * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tt-board button,
|
||||
.tt-board input,
|
||||
.tt-board select {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
border: 1px solid #ced8cb;
|
||||
border-radius: 7px;
|
||||
background: #fff;
|
||||
padding: 8px 11px;
|
||||
min-width: 0;
|
||||
}
|
||||
.tt-board button {
|
||||
cursor: pointer;
|
||||
}
|
||||
.tt-board button:hover {
|
||||
background: #eef3e9;
|
||||
}
|
||||
.tt-board button:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: wait;
|
||||
}
|
||||
.tt-board button[aria-pressed="true"] {
|
||||
background: #e2eedb;
|
||||
border-color: #789569;
|
||||
}
|
||||
.tt-board :focus-visible {
|
||||
outline: 2px solid #42765a;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.tt-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 18px 20px 8px;
|
||||
}
|
||||
.tt-header input {
|
||||
font-size: 22px;
|
||||
font-weight: 650;
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
flex: 1;
|
||||
}
|
||||
.tt-header span,
|
||||
.tt-row-meta,
|
||||
.tt-filter-note,
|
||||
.tt-management small {
|
||||
color: #647064;
|
||||
font-size: 12px;
|
||||
}
|
||||
.tt-add {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.tt-add input {
|
||||
flex: 1;
|
||||
}
|
||||
.tt-filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
padding: 8px 20px 14px;
|
||||
border-bottom: 1px solid #dce2d7;
|
||||
max-height: 160px;
|
||||
overflow: auto;
|
||||
}
|
||||
.tt-filters button {
|
||||
font-size: 12px;
|
||||
padding: 5px 9px;
|
||||
}
|
||||
.tt-board i {
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
flex: none;
|
||||
}
|
||||
.tt-filter-note {
|
||||
margin: 5px 20px;
|
||||
}
|
||||
.tt-body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 2fr) minmax(280px, 3fr);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tt-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
border-right: 1px solid #dce2d7;
|
||||
}
|
||||
.tt-rows {
|
||||
overflow: auto;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.tt-board .tt-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
text-align: left;
|
||||
flex: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e4e9df;
|
||||
border-radius: 0;
|
||||
padding: 14px 18px;
|
||||
background: transparent;
|
||||
}
|
||||
.tt-board .tt-row.is-selected {
|
||||
background: #eaf1e4;
|
||||
box-shadow: inset 3px 0 #557a46;
|
||||
}
|
||||
.tt-row-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.tt-row strong {
|
||||
overflow-wrap: anywhere;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tt-status {
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
color: #62804f;
|
||||
}
|
||||
.tt-tag-line {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tt-tag {
|
||||
background: #f1f3ed;
|
||||
border: 1px solid #dce3d4;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
.tt-page,
|
||||
.tt-detail-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
flex: none;
|
||||
border-top: 1px solid #dce2d7;
|
||||
font-size: 12px;
|
||||
}
|
||||
.tt-detail-bar {
|
||||
border-top: 0;
|
||||
border-bottom: 1px solid #dce2d7;
|
||||
align-items: center;
|
||||
}
|
||||
.tt-detail-bar a {
|
||||
color: #42694b;
|
||||
}
|
||||
.tt-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
}
|
||||
.tt-empty,
|
||||
.tt-notice {
|
||||
padding: 24px;
|
||||
color: #697568;
|
||||
}
|
||||
.tt-empty {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
max-width: 300px;
|
||||
}
|
||||
.tt-error {
|
||||
padding: 10px 20px;
|
||||
background: #fff1ec;
|
||||
color: #933d2f;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.tt-manage {
|
||||
border-top: 1px solid #dce2d7;
|
||||
flex: none;
|
||||
max-height: 40%;
|
||||
overflow: auto;
|
||||
background: #f6f8f1;
|
||||
}
|
||||
.tt-manage summary {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tt-management {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
padding: 0 20px 18px;
|
||||
}
|
||||
.tt-management h3 {
|
||||
font-size: 14px;
|
||||
}
|
||||
.tt-management h4 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.tt-management p {
|
||||
margin: 5px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.tt-management .tt-add {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.tt-tag-edit {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 6px 0;
|
||||
}
|
||||
.tt-tag-edit input[type="color"] {
|
||||
width: 40px;
|
||||
padding: 3px;
|
||||
height: 35px;
|
||||
}
|
||||
.tt-tag-edit input:not([type="color"]) {
|
||||
flex: 1;
|
||||
}
|
||||
@container (max-width:650px) {
|
||||
.tt-body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.tt-body:not(.has-detail) .tt-detail,
|
||||
.tt-body.has-detail .tt-list {
|
||||
display: none;
|
||||
}
|
||||
.tt-management {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.tt-header {
|
||||
padding: 10px;
|
||||
}
|
||||
.tt-header span {
|
||||
display: none;
|
||||
}
|
||||
.tt-add,
|
||||
.tt-filters {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user