Autorisations

Utilisez les indicateurs globaux pour les capacités et les prédicats de ligne pour les règles propres à chaque fiche. Appliquez ces mêmes règles dans les actions backend.

Exemple de configuration

Partez du démarrage React ou du démarrage Vue. Le fichier suivant complète leur catalogue de produits. Passez cette configuration via getTableConfig en React ou config en Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const permissionsConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    allowEdit: true,
    allowDelete: false,
    allowDuplicate: false,
    enableRowSelection: true,
    canEditRow: (row) => row.status !== "archived",
    canSelectRow: (row) => row.status !== "archived",
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const permissionsConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    allowEdit: true,
    allowDelete: false,
    allowDuplicate: false,
    enableRowSelection: true,
    canEditRow: (row) => row.status !== "archived",
    canSelectRow: (row) => row.status !== "archived",
  },
});

Trois niveaux

Les indicateurs du tableau déterminent les fonctionnalités proposées, et une fonctionnalité n’est proposée que si son action existe : Créer requiert actions.create, Modifier actions.update, Supprimer actions.delete et Dupliquer actions.duplicate. Sans aucune action de ligne, la colonne d’actions est omise. Les gardes de ligne (canEditRow, canDeleteRow, canDuplicateRow, canSelectRow) affinent la décision par fiche. Les champs peuvent être masqués ou désactivés selon leur contexte. Aucun contrôle client ne remplace authentification, appartenance à une organisation ou vérification des champs lors de l’écriture.

Actions groupées et exports

Autorisez chaque identifiant sélectionné, y compris ceux d’une autre page. Renvoyez des failedIds précis en cas d’échec partiel. Excluez les données non autorisées avant les totaux et exports. Une vue partagée est limitée à l’organisation ; un favori reste personnel.

Créer un écran de revue en lecture seule

Déclarez explicitement les capacités de l’interface. Le point d’accès list doit aussi vérifier les droits et le périmètre de l’organisation.

Copiez cette configuration complète à côté de product-config.ts. Utilisez () => exampleConfig pour getTableConfig en React, ou :config="exampleConfig" en Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    allowCreate: false,
    allowEdit: false,
    allowInlineEdit: false,
    allowDelete: false,
    allowDuplicate: false,
    allowBulkEdit: false,
    allowBulkDelete: false,
    enableRowSelection: false,
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    allowCreate: false,
    allowEdit: false,
    allowInlineEdit: false,
    allowDelete: false,
    allowDuplicate: false,
    allowBulkEdit: false,
    allowBulkDelete: false,
    enableRowSelection: false,
  },
});

Sélectionner seulement les lignes modifiables

Combinez les prédicats de sélection et d’édition pour exclure les produits archivés des changements groupés. Revérifiez chaque cible côté serveur, y compris les sélections anciennes.

Copiez cette configuration complète à côté de product-config.ts. Utilisez () => exampleConfig pour getTableConfig en React, ou :config="exampleConfig" en Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    enableRowSelection: true,
    enableMultiRowSelection: true,
    allowEdit: true,
    allowBulkEdit: true,
    canEditRow: (row) => row.status !== "archived",
    canSelectRow: (row) => row.status !== "archived",
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    enableRowSelection: true,
    enableMultiRowSelection: true,
    allowEdit: true,
    allowBulkEdit: true,
    canEditRow: (row) => row.status !== "archived",
    canSelectRow: (row) => row.status !== "archived",
  },
});