@cavulsqa/create 2.9.2 → 2.10.0

package/templates/m3e-app/src/modules/demo/views/OrderDetailView.vue

@@ -0,0 +1,136 @@
+<template>
+  <AppPage :title="order?.reference ?? t('demo.order')" :subtitle="order?.customerName" back>
+    <template v-if="order" #actions>
+      <M3IconButton :label="t('demo.delete')" @click="confirmDelete">
+        <i-ms-delete-outline-rounded />
+      </M3IconButton>
+    </template>
+
+    <template v-if="order">
+      <section class="mx-4 mt-2 flex items-center gap-4 rounded-xl bg-surface-container-low p-5">
+        <M3ShapeMorph :shape="look.shape" class="size-16 transition-colors" :class="look.fill">
+          <component :is="look.icon" class="size-7" :class="look.ink" />
+        </M3ShapeMorph>
+        <div class="flex min-w-0 flex-1 flex-col">
+          <span class="type-label-large text-on-surface-variant"
+            >{{ t(look.labelKey) }} · {{ order.city }}</span
+          >
+          <span class="type-headline-medium-emphasized font-rounded tabular-nums">{{
+            formatMoney(order.totalCents)
+          }}</span>
+        </div>
+      </section>
+
+      <div v-if="order.tags.length" class="flex flex-wrap gap-2 px-4 pt-3">
+        <M3Chip v-for="tag in order.tags" :key="tag" :label="tag" />
+      </div>
+
+      <SectionHeader :title="t('demo.lineItems')" />
+      <M3List variant="segmented" inset>
+        <M3ListItem
+          v-for="line in order.lines"
+          :key="line.id"
+          :headline="line.productName"
+          :supporting="`${line.quantity} × ${formatMoney(line.unitPriceCents)}`"
+          :trailing-text="formatMoney(line.lineTotalCents)"
+        />
+      </M3List>
+      <div class="h-16" aria-hidden="true" />
+    </template>
+
+    <EmptyState v-else shape="ghostish" :headline="t('demo.order')" :text="t('demo.orderGone')" />
+
+    <template v-if="order" #fixed>
+      <M3DockedToolbar class="app-detail-toolbar" :label="t('demo.status')">
+        <M3ButtonGroup variant="connected" size="s" :label="t('demo.status')">
+          <M3Button
+            v-for="status in ORDER_STATUSES"
+            :key="status"
+            variant="tonal"
+            toggle
+            :selected="order.status === status"
+            @update:selected="apply(status)"
+          >
+            {{ t(STATUS_LOOK[status].labelKey) }}
+          </M3Button>
+        </M3ButtonGroup>
+      </M3DockedToolbar>
+    </template>
+  </AppPage>
+</template>
+
+<script setup lang="ts">
+import type { Router } from "framework7/types";
+import {
+  deleteOrder,
+  loadOrderDetail,
+  setOrderStatus,
+  type OrderDetail,
+} from "@/domains/sales/sales.repository";
+import {
+  ORDER_STATUSES,
+  STATUS_LOOK,
+  formatMoney,
+  statusLook,
+  type OrderStatus,
+} from "@/modules/demo/composables/useOrderStatus";
+import { getDatabase, rdb } from "@/shared/database/database";
+import { useReactiveQuery } from "@/shared/database/queries";
+
+const { t } = useI18n();
+const props = defineProps<{ f7route: Router.Route; f7router: Router.Router }>();
+const dialog = useDialog();
+const snackbar = useSnackbar();
+
+const orderId = Number(props.f7route.params.id ?? 0);
+
+/**
+ * Reads five tables, so any write in that set refreshes this page - including the status changes
+ * made from the toolbar below, which is why nothing here calls refetch by hand.
+ */
+const query = useReactiveQuery(() => loadOrderDetail(getDatabase().db, orderId), {
+  tables: ["sales_order", "order_line", "customer", "product", "customer_tag"],
+  queryKey: ["demo:order", orderId],
+});
+
+const order = computed<OrderDetail | null>(() => query.data.value ?? null);
+const look = computed(() => statusLook(order.value?.status ?? "draft"));
+
+async function apply(status: OrderStatus) {
+  if (!order.value || order.value.status === status) return;
+  try {
+    await setOrderStatus(rdb, orderId, status);
+  } catch (error) {
+    console.error("[demo] status change failed", error);
+    void snackbar.show({ message: t("demo.actionFailed"), duration: "long" });
+  }
+}
+
+async function confirmDelete() {
+  const confirmed = await dialog.confirm({
+    headline: t("demo.delete"),
+    text: t("demo.deleteConfirm"),
+    confirmLabel: t("demo.delete"),
+    dismissLabel: t("demo.cancel"),
+    destructive: true,
+  });
+  if (!confirmed || !order.value) return;
+  const reference = order.value.reference;
+  try {
+    await deleteOrder(rdb, orderId);
+    props.f7router.back();
+    void snackbar.show(t("demo.deleted", { reference }));
+  } catch (error) {
+    console.error("[demo] delete failed", error);
+    void snackbar.show({ message: t("demo.actionFailed"), duration: "long" });
+  }
+}
+</script>
+
+<style scoped>
+.app-detail-toolbar {
+  position: absolute;
+  inset: auto 0 0;
+  z-index: 10;
+}
+</style>

package/templates/m3e-app/src/modules/demo/views/OrderSearchView.vue

@@ -0,0 +1,74 @@
+<template>
+  <AppPage :title="t('demo.searchTitle')" back>
+    <div class="sticky top-[calc(64px+env(safe-area-inset-top))] z-[2] bg-surface px-4 pt-1 pb-3">
+      <M3SearchBar
+        v-model="term"
+        :placeholder="t('demo.searchPlaceholder')"
+        :clear-label="t('gallery.inputs.clear')"
+        :autofocus="!term"
+      />
+    </div>
+
+    <SectionHeader
+      :title="
+        term ? t('demo.matches', { count: results.length }, results.length) : t('demo.allOrders')
+      "
+    />
+
+    <M3List v-if="results.length" variant="segmented" inset>
+      <M3ListItem
+        v-for="order in results"
+        :key="order.id"
+        clickable
+        :headline="order.reference"
+        :supporting="`${order.customerName} · ${order.city}`"
+        :trailing-text="formatMoney(order.totalCents)"
+        @click="open(f7router, $event, `/demo/order/${String(order.id)}/`)"
+      >
+        <template #leading>
+          <M3Shape
+            :shape="statusLook(order.status).shape"
+            class="size-10"
+            :class="statusLook(order.status).classes"
+          >
+            <component :is="statusLook(order.status).icon" class="size-5" />
+          </M3Shape>
+        </template>
+      </M3ListItem>
+    </M3List>
+
+    <EmptyState
+      v-else
+      shape="sunny"
+      :headline="term ? t('demo.noMatchesTitle') : t('demo.emptyTitle')"
+      :text="term ? t('demo.noMatches') : t('demo.empty')"
+    >
+      <template #icon><i-ms-search-rounded class="size-10" /></template>
+    </EmptyState>
+  </AppPage>
+</template>
+
+<script setup lang="ts">
+import type { Router } from "framework7/types";
+import { searchOrders, type OrderRow } from "@/domains/sales/sales.repository";
+import { formatMoney, statusLook } from "@/modules/demo/composables/useOrderStatus";
+import { getDatabase } from "@/shared/database/database";
+import { useReactiveQuery } from "@/shared/database/queries";
+
+const props = defineProps<{ f7route: Router.Route; f7router: Router.Router }>();
+const { t } = useI18n();
+const { open } = useContainerTransform();
+const term = ref(typeof props.f7route.query.q === "string" ? props.f7route.query.q : "");
+
+/**
+ * Populated before anything is typed - an empty search screen gives no sense of what is
+ * searchable. The term is in the key, so typing re-runs the query through its own debounce.
+ */
+const query = useReactiveQuery(() => searchOrders(getDatabase().db, term.value), {
+  tables: ["sales_order", "order_line", "customer"],
+  queryKey: ["demo:search", term],
+  debounce: 200,
+});
+
+const results = computed<OrderRow[]>(() => query.data.value ?? []);
+</script>

package/templates/m3e-app/src/modules/gallery/components/GalleryBlock.vue

@@ -0,0 +1,16 @@
+<template>
+  <section class="mx-4 mt-3 flex flex-col gap-4 rounded-lg bg-surface-container-low p-4 first:mt-1">
+    <header class="flex flex-col gap-0.5">
+      <h3 class="type-title-small-emphasized m-0 text-on-surface">{{ props.title }}</h3>
+      <p v-if="props.note" class="type-body-small m-0 text-on-surface-variant">{{ props.note }}</p>
+    </header>
+    <div :class="props.stack ? 'flex flex-col gap-4' : 'flex flex-wrap items-center gap-3'">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+/** One demonstrated variant family: a title, the spec point it shows, and the live components. */
+const props = defineProps<{ title: string; note?: string; stack?: boolean }>();
+</script>

package/templates/m3e-app/src/modules/gallery/components/GalleryCarouselTile.vue

@@ -0,0 +1,71 @@
+<template>
+  <button
+    type="button"
+    class="gallery-tile relative block size-full overflow-hidden text-start"
+    :style="{
+      background: `linear-gradient(135deg, var(--md-sys-color-${props.from}), var(--md-sys-color-${props.to}))`,
+    }"
+    :aria-label="props.title"
+    @click="emit('select')"
+  >
+    <M3ShapeMorph
+      :shape="props.shape"
+      class="gallery-tile__shape absolute size-56 opacity-50"
+      :style="{ color: `var(--md-sys-color-${props.to})` }"
+    />
+    <component
+      :is="props.icon"
+      class="gallery-tile__icon absolute left-1/2 top-1/2 size-16"
+      :style="{ color: `var(--md-sys-color-on-${props.from})` }"
+    />
+    <span
+      class="gallery-tile__label type-title-medium-emphasized absolute bottom-4 whitespace-nowrap"
+      :style="{ color: `var(--md-sys-color-on-${props.from})` }"
+      >{{ props.title }}</span
+    >
+  </button>
+</template>
+
+<script setup lang="ts">
+import type { MaterialShapeName } from "@cavulsqa/m3e";
+import type { Component } from "vue";
+
+/**
+ * A carousel tile drawn from the theme: a tonal gradient, a shape and an icon centred on the full
+ * item so they parallax under the mask, and a label that slides with the mask's start edge and
+ * fades as the item compresses - Compose's FadingMultiBrowse sample.
+ */
+const props = defineProps<{
+  title: string;
+  icon: Component;
+  shape: MaterialShapeName;
+  from: string;
+  to: string;
+}>();
+
+const emit = defineEmits<{ select: [] }>();
+</script>
+
+<style scoped>
+.gallery-tile {
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+.gallery-tile__shape {
+  right: -48px;
+  top: -40px;
+}
+
+.gallery-tile__icon {
+  translate: -50% -50%;
+  opacity: 0.85;
+}
+
+.gallery-tile__label {
+  left: 0;
+  transform: translateX(calc(var(--m3-carousel-mask-start, 0px) + 16px));
+  opacity: clamp(0, calc((var(--m3-carousel-item-progress, 1) - 0.55) * 3), 1);
+}
+</style>

package/templates/m3e-app/src/modules/gallery/components/GalleryCustomerForm.vue

@@ -0,0 +1,76 @@
+<template>
+  <M3FullScreenDialog
+    v-model:open="open"
+    :title="t('gallery.overlays.newCustomer')"
+    :confirm-label="t('gallery.overlays.save')"
+    :confirm-disabled="!form.name.trim()"
+    :close-label="t('shell.dismiss')"
+    :dismissible="!dirty"
+    @confirm="save"
+    @close="confirmDiscard"
+  >
+    <div class="flex flex-col gap-4">
+      <p v-if="restored" class="type-body-small m-0 text-on-surface-variant">
+        {{ t("gallery.overlays.draftRestored") }}
+      </p>
+      <M3TextField
+        v-model="form.name"
+        :label="t('gallery.overlays.customerName')"
+        autocomplete="organization"
+      />
+      <M3TextField
+        v-model="form.phone"
+        :label="t('gallery.overlays.phone')"
+        type="tel"
+        inputmode="tel"
+        autocomplete="tel"
+      />
+      <M3ExposedDropdown
+        v-model="form.wilaya"
+        editable
+        :label="t('gallery.inputs.wilaya')"
+        :options="WILAYA_OPTIONS"
+        :no-results-text="t('gallery.inputs.noMatches')"
+      />
+      <M3TextField v-model="form.note" :label="t('gallery.overlays.note')" multiline :rows="4" />
+    </div>
+  </M3FullScreenDialog>
+</template>
+
+<script setup lang="ts">
+import { useFormDraft } from "@cavulsqa/m3e-vue";
+import { WILAYA_OPTIONS } from "@/modules/gallery/composables/wilayas";
+
+const open = defineModel<boolean>("open", { default: false });
+const emit = defineEmits<{ saved: [name: string] }>();
+const { t } = useI18n();
+const dialog = useDialog();
+
+const blank = () => ({ name: "", phone: "", wilaya: null as number | null, note: "" });
+const form = reactive(blank());
+const dirty = computed(() => Boolean(form.name || form.phone || form.note) || form.wilaya !== null);
+
+const { restored, clear } = useFormDraft("gallery.customer", form);
+
+function save() {
+  emit("saved", form.name.trim());
+  Object.assign(form, blank());
+  void clear();
+  open.value = false;
+}
+
+async function confirmDiscard() {
+  if (!dirty.value) return;
+  const discard = await dialog.confirm({
+    headline: t("gallery.overlays.discardTitle"),
+    text: t("gallery.overlays.discardText"),
+    confirmLabel: t("gallery.overlays.discard"),
+    dismissLabel: t("gallery.overlays.keepEditing"),
+    destructive: true,
+  });
+  if (!discard) return;
+  Object.assign(form, blank());
+  void clear();
+  open.value = false;
+}
+</script>

package/templates/m3e-app/src/modules/gallery/components/GalleryProofOfDelivery.vue

@@ -0,0 +1,69 @@
+<template>
+  <GalleryBlock
+    :title="t('gallery.inputs.signature')"
+    :note="t('gallery.inputs.signatureNote')"
+    stack
+  >
+    <M3SignaturePad
+      ref="pad"
+      v-model:strokes="proof.strokes"
+      :label="t('gallery.inputs.signatureLabel')"
+      :placeholder="t('gallery.inputs.signHere')"
+      :height="180"
+    />
+    <div class="flex flex-wrap gap-2">
+      <M3Button variant="text" size="s" :disabled="!proof.strokes.length" @click="pad?.undo()">
+        {{ t("gallery.inputs.undo") }}
+      </M3Button>
+      <M3Button variant="text" size="s" :disabled="!proof.strokes.length" @click="pad?.clear()">
+        {{ t("gallery.inputs.clearSignature") }}
+      </M3Button>
+    </div>
+    <M3TextField
+      v-model="proof.name"
+      :label="t('gallery.inputs.receivedBy')"
+      :supporting="t('gallery.inputs.receivedByNote')"
+      autocomplete="name"
+    />
+    <M3Button :disabled="!ready" @click="confirm">{{
+      t("gallery.inputs.confirmDelivery")
+    }}</M3Button>
+    <img
+      v-if="exported"
+      :src="exported"
+      :alt="t('gallery.inputs.exported')"
+      class="w-full rounded-lg border border-outline-variant"
+    />
+  </GalleryBlock>
+</template>
+
+<script setup lang="ts">
+import { useFormDraft, type SignatureStroke } from "@cavulsqa/m3e-vue";
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+
+interface SignaturePad {
+  undo: () => void;
+  clear: () => void;
+  toDataURL: (type?: string, background?: string) => string;
+}
+
+const { t } = useI18n();
+const snackbar = useSnackbar();
+const pad = useTemplateRef<SignaturePad>("pad");
+const proof = reactive({ strokes: [] as SignatureStroke[], name: "" });
+const exported = ref("");
+const { clear: clearDraft } = useFormDraft("gallery.proof", proof);
+
+const ready = computed(() => proof.strokes.length > 0 && proof.name.trim().length > 0);
+
+function confirm() {
+  const surface = getComputedStyle(document.documentElement).getPropertyValue(
+    "--md-sys-color-surface",
+  );
+  exported.value = pad.value?.toDataURL("image/png", surface.trim() || "#ffffff") ?? "";
+  void snackbar.show(t("gallery.inputs.delivered", { name: proof.name.trim() }));
+  proof.strokes = [];
+  proof.name = "";
+  void clearDraft();
+}
+</script>

package/templates/m3e-app/src/modules/gallery/components/agenda/AgendaDay.vue

@@ -0,0 +1,106 @@
+<template>
+  <div ref="swipe" class="agenda-day">
+    <h2 class="type-title-medium m-0 px-6 pt-4 text-on-surface">{{ heading }}</h2>
+    <M3DayTimeline
+      ref="timeline"
+      :events="events"
+      :start-hour="7"
+      :end-hour="19"
+      :hour-height="72"
+      :locale="locale"
+      :current="day === today"
+      :label="heading"
+      :event-label="eventLabel"
+      @select="announce"
+    >
+      <template #event="{ event, start, end, compact }">
+        <span class="type-title-small truncate">{{ event.visit.customer }}</span>
+        <span class="type-body-small truncate opacity-80">
+          {{ compact ? start : `${start} – ${end} · ${event.visit.city}` }}
+        </span>
+      </template>
+    </M3DayTimeline>
+    <EmptyState
+      v-if="!events.length"
+      shape="sunny"
+      :headline="t('gallery.agenda.weekend')"
+      :text="t('gallery.agenda.weekendText')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  formatMinutes,
+  minutesOfDay,
+  useSnackbar,
+  useSwipeStep,
+  type TimelineEvent,
+  type TimelineTone,
+} from "@cavulsqa/m3e-vue";
+import type { Visit, VisitState } from "@/modules/gallery/composables/routePlan";
+
+interface VisitEvent extends TimelineEvent {
+  visit: Visit;
+}
+
+const emit = defineEmits<{ step: [days: 1 | -1] }>();
+
+const props = defineProps<{
+  day: string;
+  today: string;
+  heading: string;
+  visits: readonly Visit[];
+}>();
+
+const TONE: Record<VisitState, TimelineTone> = {
+  done: "surface",
+  next: "tertiary",
+  planned: "primary",
+};
+
+const { t, locale } = useI18n();
+const snackbar = useSnackbar();
+const swipe = useTemplateRef<HTMLElement>("swipe");
+
+useSwipeStep({ target: swipe, onStep: (step) => emit("step", step) });
+const timeline = useTemplateRef<{
+  scrollToMinute: (minute: number, behavior?: ScrollBehavior) => void;
+}>("timeline");
+
+const events = computed<VisitEvent[]>(() =>
+  props.visits.map((visit) => ({
+    id: visit.id,
+    start: visit.start,
+    end: visit.end,
+    tone: TONE[visit.state],
+    visit,
+  })),
+);
+
+function eventLabel(event: VisitEvent) {
+  const { visit } = event;
+  return `${visit.customer}, ${visit.city}, ${formatMinutes(visit.start, locale.value)} – ${formatMinutes(visit.end, locale.value)}, ${t(`gallery.agenda.states.${visit.state}`)}`;
+}
+
+function announce(event: VisitEvent) {
+  void snackbar.show(eventLabel(event));
+}
+
+function focusMinute(): number {
+  if (props.day === props.today) return minutesOfDay();
+  return props.visits[0]?.start ?? 8 * 60;
+}
+
+onMounted(() => nextTick(() => timeline.value?.scrollToMinute(focusMinute(), "auto")));
+watch(
+  () => props.day,
+  () => nextTick(() => timeline.value?.scrollToMinute(focusMinute())),
+);
+</script>
+
+<style scoped>
+.agenda-day {
+  touch-action: pan-y;
+}
+</style>

package/templates/m3e-app/src/modules/gallery/components/agenda/AgendaMonth.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <M3Card variant="filled" class="mx-4 mt-2 overflow-hidden py-2">
+      <M3Calendar
+        :value="day"
+        @update:value="choose"
+        :locale="locale"
+        :marks="marks"
+        :mark-label="markLabel"
+        :previous-label="t('gallery.agenda.previousMonth')"
+        :next-label="t('gallery.agenda.nextMonth')"
+        :year-label="t('gallery.agenda.chooseYear')"
+        @month="emit('month', $event)"
+      />
+    </M3Card>
+    <AgendaVisitList :heading="heading" :visits="visits" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { YearMonth } from "@cavulsqa/m3e-vue";
+import AgendaVisitList from "@/modules/gallery/components/agenda/AgendaVisitList.vue";
+import type { Visit } from "@/modules/gallery/composables/routePlan";
+
+defineProps<{
+  heading: string;
+  visits: readonly Visit[];
+  marks: Readonly<Record<string, number>>;
+  markLabel: (count: number) => string;
+}>();
+
+const day = defineModel<string>({ required: true });
+const emit = defineEmits<{ month: [month: YearMonth] }>();
+
+const { t, locale } = useI18n();
+
+function choose(next: string | null) {
+  if (next) day.value = next;
+}
+</script>

package/templates/m3e-app/src/modules/gallery/components/agenda/AgendaVisitList.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <h2 class="type-title-medium m-0 px-6 pb-2 pt-4 text-on-surface">{{ heading }}</h2>
+    <M3List v-if="visits.length" variant="segmented" inset>
+      <M3ListItem
+        v-for="visit in visits"
+        :key="visit.id"
+        :headline="visit.customer"
+        :supporting="visit.city"
+        :overline="visit.time"
+      >
+        <template #leading>
+          <i-ms-check-circle-rounded v-if="visit.state === 'done'" class="text-primary" />
+          <i-ms-near-me-rounded v-else-if="visit.state === 'next'" class="text-tertiary" />
+          <i-ms-schedule-outline-rounded v-else class="text-on-surface-variant" />
+        </template>
+        <template #trailing>
+          <span class="type-label-medium" :class="STATE_TONE[visit.state]">
+            {{ t(`gallery.agenda.states.${visit.state}`) }}
+          </span>
+        </template>
+      </M3ListItem>
+    </M3List>
+    <EmptyState
+      v-else
+      shape="sunny"
+      :headline="t('gallery.agenda.weekend')"
+      :text="t('gallery.agenda.weekendText')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Visit, VisitState } from "@/modules/gallery/composables/routePlan";
+
+defineProps<{ heading: string; visits: readonly Visit[] }>();
+
+const STATE_TONE: Record<VisitState, string> = {
+  done: "text-on-surface-variant",
+  next: "text-tertiary",
+  planned: "text-on-surface-variant",
+};
+
+const { t } = useI18n();
+</script>