@open-commune/web 0.2.0 → 0.2.2

package/components/data/display/row/data-display-badge-publish-status.vue

@@ -4,15 +4,7 @@
 
 <script setup>
 import badge from '~/components/elements/badges/badge'
-
-// Prepare constants
-const PUBLICATION_STATUSES = [
-  { label: 'Brouillon', color: '#e5e7eb', option: 'draft' },
-  { label: 'A valider', color: '#facc15', option: 'waiting' },
-  { label: 'Prêt', color: '#60a5fa', option: 'ready' },
-  { label: 'Programmé', option: 'scheduled' },
-  { label: 'Publié', color: '#34d399', option: 'published' }
-]
+import { STATUSES } from '~/constants/statuses'
 
 // Prepare props
 const $props = defineProps({
@@ -23,7 +15,7 @@ const $props = defineProps({
 })
 
 // Prepare computed
-const correspondingStatus = computed(() => PUBLICATION_STATUSES.find(({ option }) => option === $props.status))
+const correspondingStatus = computed(() => STATUSES.find(({ value }) => value === $props.status))
 const badgeTitle = computed(() => correspondingStatus.value?.label)
 const badgeColor = computed(() => correspondingStatus.value?.color)
 </script>

package/components/forms/inputs/input-filter-status.vue

@@ -0,0 +1,70 @@
+<template>
+  <input-filter label="Statut" :value="`${modelValue.length}/${STATUSES.length}`">
+    <template #leading>
+      <span v-if="selected.length" class="mr-1.5 flex items-center -space-x-1">
+        <span
+          v-for="status in selected"
+          :key="status.value"
+          class="size-2.5 rounded-full ring-2 ring-[var(--ui-bg-elevated)]"
+          :style="`background-color: ${status.color}`"
+        />
+      </span>
+    </template>
+
+    <div class="w-56 p-1.5">
+      <button
+        v-for="status in STATUSES"
+        :key="status.value"
+        type="button"
+        class="flex w-full cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-left text-sm hover:bg-muted"
+        @click="_toggle(status.value)"
+      >
+        <span
+          class="flex size-5 shrink-0 items-center justify-center rounded-[6px] border"
+          :class="modelValue.includes(status.value)
+            ? 'border-inverted bg-inverted text-inverted'
+            : 'border-default bg-elevated'"
+        >
+          <UIcon v-if="modelValue.includes(status.value)" name="i-lucide-check" class="size-3.5" />
+        </span>
+        <span class="size-2.5 shrink-0 rounded-full" :style="`background-color: ${status.color}`" />
+        <span class="text-default">{{ status.label }}</span>
+      </button>
+    </div>
+  </input-filter>
+</template>
+
+<script setup>
+/**
+ * The publication statuses a listing keeps. It owns nothing but the choice —
+ * the screen holds them and decides what to do with them.
+ */
+import inputFilter from '~/components/forms/inputs/input-filter'
+import { ALL_STATUSES, STATUSES } from '~/constants/statuses'
+
+// Prepare props
+const $props = defineProps({
+  modelValue: { type: Array, default: () => ALL_STATUSES },
+})
+
+// Prepare emitters
+const $emitters = defineEmits(['update:modelValue'])
+
+// Prepare computed
+const selected = computed(
+  () => STATUSES.filter(({ value }) => $props.modelValue.includes(value))
+)
+
+// Prepare methods
+// Rebuilt in declared order, so the dots read the same whatever order the
+// boxes were ticked in.
+const _toggle = (value) => {
+  const kept = $props.modelValue.includes(value)
+    ? $props.modelValue.filter(status => status !== value)
+    : STATUSES
+      .filter(({ value: candidate }) => $props.modelValue.includes(candidate) || candidate === value)
+      .map(({ value: candidate }) => candidate)
+
+  $emitters('update:modelValue', kept)
+}
+</script>

package/components/forms/inputs/input-filter.vue

@@ -0,0 +1,55 @@
+<template>
+  <!-- Locked: an applied filter nobody can lift from here. The default
+       `disabled` opacity is neutralised — the value is the only information the
+       chip carries, and it faded to pale grey. -->
+  <UButton
+    v-if="disabled"
+    color="neutral"
+    variant="ghost"
+    disabled
+    class="h-9 rounded-md border border-default bg-accented px-3 disabled:cursor-default disabled:opacity-100"
+  >
+    {{ label }}
+    <span v-if="value" class="rounded-md bg-elevated px-2 py-0.5 text-[13px] text-highlighted">
+      {{ value }}
+    </span>
+  </UButton>
+
+  <UPopover v-else v-model:open="open" :ui="{ content: 'bg-elevated !rounded-lg' }">
+    <UButton
+      color="neutral"
+      variant="ghost"
+      class="h-9 rounded-md border border-default bg-transparent px-3 hover:bg-accented data-[state=open]:bg-accented"
+    >
+      <slot name="leading" />
+      {{ label }}
+      <span v-if="value" class="ml-1.5 text-[13px] text-dimmed">{{ value }}</span>
+      <template #trailing>
+        <UIcon
+          :name="open ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+          class="size-4 text-dimmed"
+        />
+      </template>
+    </UButton>
+    <template #content>
+      <slot />
+    </template>
+  </UPopover>
+</template>
+
+<script setup>
+/**
+ * The shell a listing filter wears: a button, a value, a popover. It holds no
+ * filtering logic — what is filtered belongs to whoever fills it — so that a
+ * locked filter and an open one stay the same object in two states.
+ */
+defineProps({
+  label: { type: String, required: true },
+  /** What the filter currently reads as: a count, a name. */
+  value: { type: String, default: '' },
+  /** Applied and unliftable: no popover, the value shown as a pill. */
+  disabled: { type: Boolean, default: false },
+})
+
+const open = ref(false)
+</script>

package/components/forms/inputs/input-search.vue

@@ -0,0 +1,58 @@
+<template>
+  <!-- The open state is a variable, not `hover:` / `focus-within:`: an
+       `<input>` has an intrinsic width that utility classes do not override,
+       and the box stayed at 48px instead of 36. -->
+  <div
+    class="transition-[width] duration-200"
+    :class="expanded ? 'w-64' : 'w-9'"
+    @mouseenter="hovered = true"
+    @mouseleave="hovered = false"
+  >
+    <UInput
+      v-model="term"
+      :placeholder="placeholder"
+      icon="i-lucide-search"
+      class="w-full"
+      :ui="{
+        base: 'h-9 w-full rounded-md border border-default bg-transparent hover:bg-elevated focus-within:bg-elevated focus:outline-none focus-visible:outline-none ring-0 focus:ring-0 focus-visible:ring-0',
+        // Collapsed, the icon fills the box to centre itself, so it must be
+        // transparent to clicks or it intercepts the one that opens the field.
+        leading: expanded ? 'ps-2.5' : 'inset-0 justify-center ps-0 pointer-events-none',
+        leadingIcon: 'size-4 text-dimmed',
+      }"
+      :class="expanded ? '' : '[&_input]:px-0 [&_input]:placeholder:text-transparent'"
+      @focus="focused = true"
+      @blur="focused = false"
+    />
+  </div>
+</template>
+
+<script setup>
+import { refDebounced } from '@vueuse/core'
+
+// Prepare props
+const $props = defineProps({
+  modelValue: { type: String, default: '' },
+  placeholder: { type: String, default: 'Rechercher' },
+})
+
+// Prepare emitters
+const $emitters = defineEmits(['update:modelValue'])
+
+// Prepare reactive
+const term = ref($props.modelValue)
+const hovered = ref(false)
+const focused = ref(false)
+
+// A keystroke must not fire a request.
+const debounced = refDebounced(term, 350)
+
+// Prepare computed
+const expanded = computed(() => hovered.value || focused.value || Boolean(term.value))
+
+// Prepare watchers
+watch(debounced, value => $emitters('update:modelValue', value.trim()))
+watch(() => $props.modelValue, (value) => {
+  if (value !== term.value.trim()) term.value = value
+})
+</script>

package/models/record.js

@@ -63,6 +63,16 @@ const _recordModel = class Record extends Model {
 // à 500 (select-record) : on pagine pour honorer la limite demandée.
 const PAGE_MAX = 100;
 
+/**
+ * Narrowing sent to the server, shared by the listing and its count so the two
+ * can never disagree. Empty criteria are dropped rather than sent: `status: []`
+ * would read as "no status at all".
+ */
+const narrowingOf = (queryParams = {}) => ({
+  ...(queryParams.search?.trim() ? { search: queryParams.search.trim() } : {}),
+  ...(queryParams.status?.length ? { status: queryParams.status } : {}),
+});
+
 const _recordAPI = class RecordAPI extends ModelAPI {
   /**
    * record aplati → payload entries.* : seuls les champs DÉFINIS par la
@@ -112,11 +122,14 @@ const _recordAPI = class RecordAPI extends ModelAPI {
 
     const skip = Number(queryParams.skip ?? 0);
     const wanted = Number(queryParams.limit ?? 20);
+    const narrowing = narrowingOf(queryParams);
+
     const entries = [];
     while (entries.length < wanted) {
       const size = Math.min(wanted - entries.length, PAGE_MAX);
       const page = await this.trpc.collections.entries.list.query({
         collectionId: definition.id,
+        ...narrowing,
         skip: skip + entries.length,
         limit: size,
       });
@@ -160,6 +173,16 @@ const _recordAPI = class RecordAPI extends ModelAPI {
     await this.trpc.collections.entries.remove.mutate({ id: _id });
     return this.repo.destroy(_id);
   }
+
+  /** The total a loaded listing is a window onto, under the same narrowing. */
+  async count(collection, queryParams = {}) {
+    const definition = await getDefinition(this.trpc, collection).catch(() => null);
+    if (!definition) return 0;
+    return this.trpc.collections.entries.count.query({
+      collectionId: definition.id,
+      ...narrowingOf(queryParams),
+    });
+  }
 };
 
 export default { model: _recordModel, api: _recordAPI };

package/package.json

@@ -40,7 +40,7 @@
   },
   "description": "The Open Commune application: the admin interface and the server, on a single origin.",
   "license": "AGPL-3.0-or-later",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [

package/pages/[collection]/index.vue

@@ -1,23 +1,53 @@
 <template>
   <section class="w-full">
+    <!-- Both controls narrow on the SERVER: a collection of several hundred
+         entries does not fit in the browser, and narrowing what is loaded only
+         ever finds what is already visible. -->
+    <div v-if="!$route.params.event" class="mb-4 flex flex-wrap items-center gap-2">
+      <input-filter
+        v-if="collectionRecord?.name"
+        label="Collection"
+        :value="collectionRecord.name"
+        disabled
+      />
+      <input-filter-status v-model="statuses" />
+      <input-search v-model="search" class="ml-auto" />
+    </div>
+
     <default-table
-      v-if="!$route.params.event"
+      v-if="!$route.params.event && records.length"
+      :key="narrowingKey"
       :headers="headers"
-      :filters="filters"
       :items="records"
       :actions="abilities"
       :pagination-size="limit"
-      display-search-bar
       paginated-content
       @fetch-more="_fetchMoreRecords"
       @update="_updateRecord"
       @remove="_removeRecord"
     />
+
+    <UEmpty
+      v-else-if="!$route.params.event"
+      icon="i-lucide-inbox"
+      :title="narrowed ? 'Aucun résultat' : 'Aucune entrée'"
+      :description="narrowed
+        ? 'Aucune entrée ne correspond à cette recherche ou à ces statuts.'
+        : 'Cette collection est vide pour le moment.'"
+    />
+
+    <p v-if="!$route.params.event && records.length" class="mt-6 text-center text-sm text-dimmed">
+      {{ records.length }} affichée{{ records.length > 1 ? 's' : '' }} sur {{ total }}
+    </p>
   </section>
 </template>
 
 <script setup>
 import defaultTable from '~/components/data/lists/data-lists-table'
+import inputFilter from '~/components/forms/inputs/input-filter'
+import inputFilterStatus from '~/components/forms/inputs/input-filter-status'
+import inputSearch from '~/components/forms/inputs/input-search'
+import { ALL_STATUSES } from '~/constants/statuses'
 
 // Prepare composable
 const { Collection, Record } = useModels()
@@ -32,17 +62,47 @@ definePageMeta({
 
 // Prepare reactive data
 const limit = ref(25)
+const search = ref('')
+const statuses = ref([...ALL_STATUSES])
+const total = ref(0)
 
 // Prepare computed
 const collectionRecord = computed(() => Collection.repo.where('slug', $route.params.collection).first())
 const records = computed(() => Record.repo.where('relatedCollection', $route.params.collection).get().map(Record.onRetrieve))
-const headers = computed(() => collectionRecord.value.display?.headers || [])
-const filters = computed(() => [])
+const headers = computed(() => collectionRecord.value?.display?.headers || [])
 const abilities = computed(() => ['update', 'remove'])
 
+const narrowing = computed(() => ({
+  search: search.value,
+  // Keeping every status is not a filter: send nothing rather than all five.
+  status: statuses.value.length === ALL_STATUSES.length ? undefined : statuses.value
+}))
+
+const narrowed = computed(
+  () => Boolean(search.value) || statuses.value.length !== ALL_STATUSES.length
+)
+
+/**
+ * Remounts the table when the narrowing changes: it counts its pages
+ * internally, and a page 3 kept over a one-page result shows nothing.
+ */
+const narrowingKey = computed(() => `${search.value}|${statuses.value.join(',')}`)
+
 // Prepare methods
+const _load = async (skip = 0) => {
+  await Record.list($route.params.collection, undefined, {
+    skip,
+    limit: limit.value,
+    ...narrowing.value
+  })
+}
+
+const _refreshTotal = async () => {
+  total.value = await Record.count($route.params.collection, narrowing.value)
+}
+
 const _fetchMoreRecords = async (skip = 0) => {
-  await Record.list($route.params.collection, undefined, { skip, limit: limit.value })
+  await _load(skip)
 }
 
 const _updateRecord = (item) => {
@@ -51,5 +111,14 @@ const _updateRecord = (item) => {
 
 const _removeRecord = async (item) => {
   await Record.remove(item._id, $route.params.collection)
+  await _refreshTotal()
 }
+
+// Prepare watchers
+watch(narrowing, async () => {
+  await _load(0)
+  await _refreshTotal()
+}, { deep: true })
+
+onMounted(_refreshTotal)
 </script>