@antelopejs/dms 0.5.6 → 0.6.1

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/RolePermissionTree.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { EYEBROW_CLASS } from "#dms-ui/app/build/utils/eyebrow";
+import RolePermissionArea from "./RolePermissionArea.vue";
+import RolePermissionBranch from "./RolePermissionBranch.vue";
+import RolePermissionGroup from "./RolePermissionGroup.vue";
+import RolePermissionLeaf from "./RolePermissionLeaf.vue";
+import {
+  checkboxState,
+  countSelected,
+  type PermissionArea,
+  type PermissionChange,
+  type PermissionIndex,
+  type PermissionRowContext,
+  type PermissionSearchHit,
+  type SelectionState,
+} from "./role-permissions";
+import type { RolePermissionNode } from "./role-types";
+
+interface RolePermissionTreeProps {
+  areas: PermissionArea[];
+  index: PermissionIndex;
+  selection: Set<string>;
+  saved: Set<string>;
+  autoAdded: Map<string, string[]>;
+  expanded: Set<string>;
+  /** Hits of the current search; `null` when not searching. */
+  hits: PermissionSearchHit[] | null;
+  query: string;
+  canGrant: (permissionId: string) => boolean;
+  readonly: boolean;
+}
+
+const props = defineProps<RolePermissionTreeProps>();
+const emit = defineEmits<{
+  toggle: [id: string, checked: boolean];
+  "toggle-area": [id: string];
+}>();
+
+const { t } = useI18n();
+const { processI18n } = useTranslation();
+
+function stateOf(node: RolePermissionNode): SelectionState {
+  return checkboxState(props.index, node.id, props.selection);
+}
+
+function changeOf(id: string): PermissionChange {
+  const isSelected = props.selection.has(id);
+  if (isSelected === props.saved.has(id)) return null;
+  return isSelected ? "added" : "removed";
+}
+
+function requiresOf(node: RolePermissionNode): string[] {
+  return (node.dependencies ?? [])
+    .map((id) => props.index.nodes.get(id)?.label)
+    .filter((label): label is string => Boolean(label))
+    .map((label) => processI18n(label));
+}
+
+function autoAddedHintOf(id: string): string | undefined {
+  const added = props.autoAdded.get(id) ?? [];
+  const [first] = added;
+  if (!first) return undefined;
+  if (added.length > 1) {
+    return t("page.settings.roles.editor.auto_added_many", added.length);
+  }
+  const label = processI18n(props.index.nodes.get(first)?.label ?? first);
+  return t("page.settings.roles.editor.auto_added", { name: label });
+}
+
+function isDisabled(node: RolePermissionNode): boolean {
+  if (props.readonly) return true;
+  return stateOf(node) === false && !props.canGrant(node.id);
+}
+
+function isNewHeading(position: number): boolean {
+  const hits = props.hits ?? [];
+  const heading = hits[position]?.heading;
+  if (!heading) return false;
+  return position === 0 || hits[position - 1]?.heading !== heading;
+}
+
+// Handed down the nested branches as one object instead of a dozen props.
+const rowContext = computed<PermissionRowContext>(() => ({
+  index: props.index,
+  selection: props.selection,
+  expanded: props.expanded,
+  stateOf,
+  changeOf,
+  requiresOf,
+  autoAddedHintOf,
+  isDisabled,
+  disabledHint: t("page.settings.roles.editor.not_grantable"),
+  toggle: (id, checked) => emit("toggle", id, checked),
+  toggleExpanded: (id) => emit("toggle-area", id),
+}));
+
+function toggleSection(area: PermissionArea, checked: boolean): void {
+  if (area.sectionNode) emit("toggle", area.sectionNode.id, checked);
+}
+
+/** Whether an area is the first of its section, under the section heading. */
+function opensSection(position: number): boolean {
+  const section = props.areas[position]?.sectionNode;
+  if (!section) return false;
+  return props.areas[position - 1]?.sectionNode?.id !== section.id;
+}
+</script>
+
+<template>
+  <!-- v2 .cs-ptree -->
+  <div
+    class="px-2 pt-1.5 pb-2.5"
+    role="tree"
+    :aria-label="t('page.settings.roles.editor.tree_label')"
+  >
+    <template v-if="props.hits">
+      <template v-for="(hit, position) in props.hits" :key="hit.node.id">
+        <div
+          v-if="isNewHeading(position)"
+          :class="[EYEBROW_CLASS, 'text-dimmed flex h-8 items-center px-2']"
+        >
+          {{ hit.heading }}
+        </div>
+        <RolePermissionLeaf
+          :node="hit.node"
+          :state="stateOf(hit.node)"
+          :change="changeOf(hit.node.id)"
+          :requires="requiresOf(hit.node)"
+          :auto-added-hint="autoAddedHintOf(hit.node.id)"
+          :disabled="isDisabled(hit.node)"
+          :disabled-hint="t('page.settings.roles.editor.not_grantable')"
+          :query="props.query"
+          @toggle="(checked) => emit('toggle', hit.node.id, checked)"
+        />
+      </template>
+      <p
+        v-if="props.hits.length === 0"
+        class="text-muted px-2 py-8 text-center text-[13px]"
+      >
+        {{
+          t("page.settings.roles.editor.search_empty", { query: props.query })
+        }}
+      </p>
+    </template>
+    <template v-else>
+      <template v-for="(area, position) in props.areas" :key="area.node.id">
+        <RolePermissionGroup
+          v-if="area.sectionNode && opensSection(position)"
+          :path="[area.sectionNode.label]"
+          :permission-id="area.sectionNode.id"
+          :count="
+            countSelected(props.index, area.sectionNode.id, props.selection)
+          "
+          :state="stateOf(area.sectionNode)"
+          :disabled="isDisabled(area.sectionNode)"
+          :class="position > 0 && 'mt-3'"
+          @toggle="(checked) => toggleSection(area, checked)"
+        />
+        <RolePermissionArea
+          :area="area"
+          :count="countSelected(props.index, area.node.id, props.selection)"
+          :state="stateOf(area.node)"
+          :is-expanded="props.expanded.has(area.node.id)"
+          :disabled="isDisabled(area.node)"
+          @toggle="(checked) => emit('toggle', area.node.id, checked)"
+          @toggle-expanded="emit('toggle-area', area.node.id)"
+        >
+          <RolePermissionBranch
+            :nodes="area.node.children ?? []"
+            :level="2"
+            :context="rowContext"
+          />
+        </RolePermissionArea>
+      </template>
+      <p
+        v-if="props.areas.length === 0"
+        class="text-muted px-2 py-8 text-center text-[13px]"
+      >
+        {{ t("page.settings.roles.editor.no_permissions") }}
+      </p>
+    </template>
+  </div>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/RolesList.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { TEXT_LINK_CLASS } from "#dms-ui/app/build/utils/textLink";
+import DmsCard from "#dms-ui/app/components/card/Card.vue";
+import DmsEyebrow from "#dms-ui/app/components/section-header/Eyebrow.vue";
+import RoleMemberAvatars from "./RoleMemberAvatars.vue";
+import RolesListItem from "./RolesListItem.vue";
+import {
+  NEW_ROLE_ENTRY_ID,
+  OWNER_ENTRY_ID,
+  type RoleOwnersSummary,
+  type RoleSummary,
+} from "./role-types";
+import DmsSearchInput from "#dms-ui/app/build/components/form/SearchInput.vue";
+
+interface RolesListProps {
+  roles: RoleSummary[];
+  owners: RoleOwnersSummary;
+  totalPermissions: number;
+  selectedId: string;
+  /** Name typed for the role being created, shown as an unsaved entry. */
+  draftName: string | null;
+}
+
+const props = defineProps<RolesListProps>();
+const emit = defineEmits<{ select: [id: string] }>();
+
+const { t } = useI18n();
+const query = ref("");
+
+const PERCENT = 100;
+
+const visibleRoles = computed(() => {
+  const normalized = query.value.trim().toLowerCase();
+  if (!normalized) return props.roles;
+  return props.roles.filter((role) =>
+    `${role.name} ${role.description}`.toLowerCase().includes(normalized),
+  );
+});
+
+function coverage(count: number): number {
+  if (props.totalPermissions === 0) return 0;
+  return Math.min(PERCENT, (count / props.totalPermissions) * PERCENT);
+}
+</script>
+
+<template>
+  <!-- v2 .cs-rlist: a card of roles, each with its members and a coverage bar;
+       it sticks beside the editor while the permission tree scrolls. -->
+  <DmsCard
+    as="aside"
+    :padded="false"
+    class="@3xl:sticky @3xl:top-6"
+    :aria-label="t('page.settings.roles.editor.list_title')"
+  >
+    <!-- The members column's label stays on the title's line: as an action
+         it would drop under it in this narrow column. -->
+    <template #header>
+      <DmsEyebrow
+        as="span"
+        tone="muted"
+        :label="t('page.settings.roles.editor.list_title')"
+      />
+      <UBadge
+        :label="String(props.roles.length + 1)"
+        color="neutral"
+        size="sm"
+        square
+        class="font-mono"
+      />
+      <span class="text-dimmed ms-auto font-mono text-[10.5px] font-medium">
+        {{ t("page.settings.roles.editor.list_members") }}
+      </span>
+    </template>
+    <div class="border-muted border-b px-3 py-2">
+      <DmsSearchInput
+        v-model="query"
+        size="sm"
+        variant="none"
+        class="w-full"
+        :placeholder="t('page.settings.roles.editor.search_roles')"
+      />
+    </div>
+    <div
+      role="listbox"
+      :aria-label="t('page.settings.roles.editor.list_title')"
+    >
+      <RolesListItem
+        :name="t('page.settings.roles.editor.owner')"
+        :is-active="props.selectedId === OWNER_ENTRY_ID"
+        is-locked
+        :member-count="props.owners.memberCount"
+        :coverage="100"
+        :summary="
+          t('page.settings.roles.editor.owner_summary', {
+            total: props.totalPermissions,
+          })
+        "
+        @select="emit('select', OWNER_ENTRY_ID)"
+      >
+        <template #avatars>
+          <RoleMemberAvatars :members="props.owners.members" />
+        </template>
+      </RolesListItem>
+      <RolesListItem
+        v-for="role in visibleRoles"
+        :key="role._id"
+        :name="role.name"
+        :is-active="props.selectedId === role._id"
+        :member-count="role.memberCount"
+        :invite-count="role.inviteCount"
+        :coverage="coverage(role.permissionCount)"
+        :summary="
+          t('page.settings.roles.editor.permission_summary', {
+            count: role.permissionCount,
+            total: props.totalPermissions,
+          })
+        "
+        @select="emit('select', role._id)"
+      >
+        <template #avatars>
+          <RoleMemberAvatars
+            :members="role.members"
+            :ring-class="
+              props.selectedId === role._id
+                ? 'ring-(--ui-bg-elevated)'
+                : 'ring-(--ui-bg)'
+            "
+          />
+        </template>
+      </RolesListItem>
+      <RolesListItem
+        v-if="props.draftName !== null"
+        :name="props.draftName || t('page.settings.roles.editor.untitled')"
+        :is-active="props.selectedId === NEW_ROLE_ENTRY_ID"
+        is-draft
+        :member-count="0"
+        :coverage="0"
+        :summary="t('page.settings.roles.editor.unsaved')"
+        @select="emit('select', NEW_ROLE_ENTRY_ID)"
+      />
+      <p
+        v-if="query && visibleRoles.length === 0"
+        class="border-muted text-muted border-t px-4 py-3 text-[12.5px]"
+      >
+        {{ t("page.settings.roles.editor.no_role_match") }}
+      </p>
+    </div>
+    <template #footer>
+      <UIcon name="i-ph-info" class="text-dimmed size-4 shrink-0" />
+      <span class="text-muted text-[12.5px]">
+        {{ t("page.settings.roles.editor.foot_prefix") }}
+        <DmsLink to="/settings/workspace/members" :class="TEXT_LINK_CLASS">
+          {{ t("page.settings.roles.editor.foot_link") }}
+        </DmsLink>
+      </span>
+    </template>
+  </DmsCard>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/RolesListItem.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { tv } from "tailwind-variants";
+
+interface RolesListItemProps {
+  name: string;
+  isActive: boolean;
+  memberCount: number;
+  /** Share of the permission tree the role grants, in percent. */
+  coverage: number;
+  summary: string;
+  inviteCount?: number;
+  /** The Owner entry: every permission, not editable. */
+  isLocked?: boolean;
+  /** A role being created, not saved yet. */
+  isDraft?: boolean;
+}
+
+const props = withDefaults(defineProps<RolesListItemProps>(), {
+  inviteCount: 0,
+  isLocked: false,
+  isDraft: false,
+});
+
+const emit = defineEmits<{ select: [] }>();
+const { t } = useI18n();
+
+// v2 .cs-ritem: name and members on one line, the coverage bar below; the
+// active role gets the accent tint and a 2px accent edge.
+const theme = tv({
+  slots: {
+    root: "grid w-full cursor-pointer grid-cols-[minmax(0,1fr)_auto] gap-x-2.5 gap-y-1.5 border-t border-muted py-3 ps-4 pe-3.5 text-start transition-colors first:border-t-0 hover:bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--dms-accent-line)",
+    name: "flex min-w-0 items-center gap-[7px] text-[13px] font-semibold text-highlighted",
+    members:
+      "flex items-center gap-1.5 font-mono text-[11px] font-medium text-muted",
+    sum: "col-span-full flex items-center gap-2 font-mono text-[11px] font-medium text-dimmed",
+  },
+  variants: {
+    isActive: {
+      true: {
+        root: "bg-(--dms-accent-tint) shadow-[inset_2px_0_0_var(--dms-accent)] hover:bg-(--dms-accent-tint)",
+      },
+    },
+    isEmpty: { true: { members: "text-dimmed" } },
+    isDraft: { true: { name: "italic text-muted" } },
+  },
+});
+
+const ui = computed(() =>
+  theme({
+    isActive: props.isActive,
+    isEmpty: props.memberCount === 0,
+    isDraft: props.isDraft,
+  }),
+);
+</script>
+
+<template>
+  <button
+    type="button"
+    role="option"
+    :aria-selected="props.isActive"
+    :class="ui.root()"
+    @click="emit('select')"
+  >
+    <span :class="ui.name()">
+      <span class="truncate">{{ props.name }}</span>
+      <UIcon
+        v-if="props.isLocked"
+        name="i-ph-lock-simple"
+        class="text-dimmed size-3.5 shrink-0"
+      />
+      <UBadge
+        v-if="props.inviteCount > 0"
+        size="sm"
+        color="neutral"
+        variant="subtle"
+        :label="t('page.settings.roles.editor.invites', props.inviteCount)"
+      />
+    </span>
+    <span v-if="!props.isDraft" :class="ui.members()">
+      <slot name="avatars" />
+      {{ props.memberCount }}
+    </span>
+    <span :class="ui.sum()">
+      <DmsMeter
+        as="span"
+        size="xs"
+        class="flex-1"
+        :value="props.coverage"
+        :tone="props.isLocked ? 'soft' : 'primary'"
+      />
+      {{ props.summary }}
+    </span>
+  </button>
+</template>