Datamängdredigerare

Komponent: FCrudDataset
Status: Produktionsklar

Innehåll

Interaktiv tabell med redigering
Förpopulera objekt
Anpassade texter
Datatabell med lägg till-knapp
Interaktiv tabell med knapp
Lista med redigering
Sorterbar lista
API

Datamändgredigeraren används för att erbjuda användare funktionerna "lägg till", "ändra" och "ta bort" i en datamängd. Komponenten ansvarar inte för hur datamängden och åtgärderna "lägg till", "ändra" och "ta bort" presenteras. Vanligtvis används lista eller tabell för presentation men kan även vara egenutvecklad.

Interaktiv tabell med redigering

<template>
    <f-crud-dataset v-model="fruits" @created="saveModel" @updated="saveModel" @deleted="saveModel">
        <template #default>
            <f-interactive-table :rows="fruits" key-attribute="id">
                <template #caption> <b>Frukter</b> </template>
                <template #default="{ row }">
                    <f-table-column name="name" title="Namn" type="text" shrink>
                        {{ row.name }}
                    </f-table-column>
                    <f-table-column name="origin" title="Land" type="text" shrink>
                        {{ row.origin }}
                    </f-table-column>
                    <f-table-column name="description" title="Beskrivning" type="text" expand>
                        {{ row.description }}
                    </f-table-column>
                    <f-table-column name="actions" title="Åtgärd" type="action" shrink>
                        <f-crud-button action="modify" :item="row" icon />
                        <f-crud-button action="delete" :item="row" icon />
                    </f-table-column>
                </template>
            </f-interactive-table>
        </template>
        <template #modify="{ item }">
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
            <f-text-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-text-field>
            <f-textarea-field v-model="item.description" v-validation.required>
                Beskrivning
            </f-textarea-field>
            ID {{ item.id }}
        </template>

        <template #add="{ item }">
            <f-text-field
                v-model="item.id"
                v-validation.required.maxLength="{ maxLength: { length: 4 } }"
                type="text"
            >
                ID
            </f-text-field>
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
            <f-text-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-text-field>
            <f-textarea-field v-model="item.description" v-validation.required>
                Beskrivning
            </f-textarea-field>
        </template>

        <template #delete="{ item }">
            Vill du verkligen radera fruken "{{ item.name }}" med ID {{ item.id }}
        </template>
    </f-crud-dataset>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import {
    FCrudDataset,
    FCrudButton,
    FInteractiveTable,
    FTableColumn,
    FTextField,
    FTextareaField,
} from "@fkui/vue";
import { type FruitData, fruits } from "./fruit-data";

export default defineComponent({
    components: {
        FCrudDataset,
        FCrudButton,
        FInteractiveTable,
        FTableColumn,
        FTextField,
        FTextareaField,
    },
    data() {
        return {
            fruits,
        };
    },
    methods: {
        saveModel(row: FruitData) {
            console.log("Post model to backend", row);
        },
    },
});
</script>

Förpopulera objekt

Använd propen beforeCreate med en callback som returnerar ett objekt för att förpopulera data som ska läggas till. Callback anropas innan modalen visas.

<f-crud-dataset :before-create="onBeforeCreate">
    <template #default> ... </template>
</f-crud-dataset>

function onBeforeCreate(): MyInterface {
    return {
        /* ... */
    };
}

Anpassade texter

Texterna i modaler kan anpassas för att bättre beskriva vad som läggs till, ändras eller tas bort genom att använda props. Även texten för "lägg till"-knapp kan ändras via slot add-button.

<template>
    <f-crud-dataset
        v-model="fruits"
        :before-create="beforeCreate"
        add-new-modal-header="Lägg till ny frukt"
        modify-modal-header="Ändra land"
        delete-modal-header="Vill du ta bort frukten?"
        @created="saveModel"
        @updated="saveModel"
        @deleted="saveModel"
    >
        <template #default>
            <f-list :items="fruits" element-id="example" key-attribute="id">
                <template #default="{ item }">
                    <div class="row">
                        <div class="col col--lg-7 col--md-6">
                            <h3>{{ item.name }}</h3>
                            <p>
                                Land:
                                <em> {{ item.origin }} </em>
                                <br />
                                Beskrivning:
                                <em> {{ item.description }} </em>
                                <br />
                            </p>
                        </div>
                        <div class="col col--lg-5 col--md-6">
                            <div class="row row--align-end">
                                <div class="col">
                                    <f-crud-button action="modify" :item="item" icon label />
                                </div>
                                <div class="col">
                                    <f-crud-button action="delete" :item="item" icon label />
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template #screenreader="{ item }"> Frukt ID {{ item.id }} </template>
            </f-list>
        </template>
        <template #add-button> Lägg till ny <span class="sr-only"> frukt </span> </template>
        <template #add="{ item }">
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
            <f-text-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-text-field>
            <f-textarea-field v-model="item.description" v-validation.required>
                Beskrivning
            </f-textarea-field>
        </template>

        <template #modify="{ item }">
            <f-static-field v-model="item.name" type="text">
                <template #label> Namn </template>
                <template #default> {{ item.name }}</template>
            </f-static-field>
            <f-textarea-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-textarea-field>
        </template>

        <template #delete="{ item }">
            Vill du verkligen ta bort frukten "{{ item.name }}" med ID {{ item.id }}
        </template>
    </f-crud-dataset>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import {
    FCrudDataset,
    FCrudButton,
    FList,
    FStaticField,
    FTextField,
    FTextareaField,
} from "@fkui/vue";
import { type FruitData, fruits } from "./fruit-data";

export default defineComponent({
    name: "ExampleApp",
    components: {
        FCrudDataset,
        FCrudButton,
        FList,
        FStaticField,
        FTextField,
        FTextareaField,
    },
    data() {
        return {
            fruits,
        };
    },
    methods: {
        // Förpopulera ett objekt med värden
        beforeCreate(): FruitData {
            return {
                id: String(this.getMaxId() + 1),
                name: "",
                origin: "",
                description: "",
            };
        },
        getMaxId() {
            return this.fruits.reduce((max, item) => {
                return Math.max(max, parseInt(item.id, 10));
            }, 0);
        },
        saveModel(row: FruitData) {
            console.log("Post model to backend", row);
        },
    },
});
</script>

Datatabell med lägg till-knapp

<template>
    <f-crud-dataset v-model="fruits" @created="saveModel" @updated="saveModel" @deleted="saveModel">
        <template #default>
            <f-data-table :rows="fruits" key-attribute="id">
                <template #caption> <b>Rättigheter</b> </template>
                <template #default="{ row }">
                    <f-table-column name="name" title="Namn" type="text" shrink>
                        {{ row.name }}
                    </f-table-column>
                    <f-table-column name="origin" title="Land" type="text" shrink>
                        {{ row.origin }}
                    </f-table-column>
                    <f-table-column name="description" title="Beskrivning" type="text" expand>
                        {{ row.description }}
                    </f-table-column>
                </template>
            </f-data-table>
        </template>
        <template #add="{ item }">
            <f-text-field
                v-model="item.id"
                v-validation.required.maxLength="{ maxLength: { length: 4 } }"
                type="text"
            >
                ID
            </f-text-field>
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
            <f-text-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-text-field>
            <f-textarea-field v-model="item.description" v-validation.required>
                Beskrivning
            </f-textarea-field>
        </template>
    </f-crud-dataset>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { FCrudDataset, FDataTable, FTableColumn, FTextField, FTextareaField } from "@fkui/vue";
import { type FruitData, fruits } from "./fruit-data";

export default defineComponent({
    components: {
        FCrudDataset,
        FDataTable,
        FTableColumn,
        FTextField,
        FTextareaField,
    },
    data() {
        return {
            fruits,
        };
    },
    methods: {
        saveModel(row: FruitData) {
            console.log("Post model to backend", row);
        },
    },
});
</script>

Interaktiv tabell med knapp

<template>
    <f-crud-dataset v-model="fruits" @created="saveModel" @updated="saveModel" @deleted="saveModel">
        <template #default>
            <f-interactive-table :rows="fruits" key-attribute="id">
                <template #caption> <b>Frukter</b> </template>
                <template #default="{ row }">
                    <f-table-column name="name" title="Namn" type="text" shrink>
                        {{ row.name }}
                    </f-table-column>
                    <f-table-column name="origin" title="Land" type="text" shrink>
                        {{ row.origin }}
                    </f-table-column>
                    <f-table-column name="description" title="Beskrivning" type="text" expand>
                        {{ row.description }}
                    </f-table-column>
                    <f-table-column name="actions" title="Åtgärd" shrink type="action">
                        <f-crud-button action="modify" :item="row" icon label>
                            Ändra Namn
                        </f-crud-button>
                    </f-table-column>
                </template>
            </f-interactive-table>
        </template>
        <template #modify="{ item }">
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
        </template>
    </f-crud-dataset>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { FCrudDataset, FCrudButton, FTextField, FInteractiveTable, FTableColumn } from "@fkui/vue";
import { type FruitData, fruits } from "./fruit-data";

export default defineComponent({
    name: "ExampleApp",
    components: {
        FCrudDataset,
        FCrudButton,
        FTextField,
        FInteractiveTable,
        FTableColumn,
    },
    data() {
        return {
            fruits,
        };
    },
    methods: {
        saveModel(row: FruitData) {
            console.log("Post model to backend", row);
        },
    },
});
</script>

Lista med redigering

<template>
    <f-crud-dataset
        v-model="fruits"
        data-test="f-crud-dataset-list-example"
        :before-create="beforeCreate"
        @created="saveModel"
        @updated="saveModel"
        @deleted="saveModel"
    >
        <template #default>
            <f-list :items="fruits" element-id="example" key-attribute="id" selectable>
                <template #default="{ item }">
                    <h3>{{ item.name }}</h3>
                    <div class="row">
                        <div class="col col--md-7">
                            <p>
                                Land:
                                <em> {{ item.origin }} </em>
                                <br />
                                Beskrivning:
                                <em> {{ item.description }} </em>
                                <br />
                            </p>
                        </div>
                        <div class="col col--md-5">
                            <ul class="button-list">
                                <li>
                                    <f-crud-button action="modify" :item="item" icon label />
                                </li>
                                <li>
                                    <f-crud-button action="delete" :item="item" icon label />
                                </li>
                            </ul>
                        </div>
                    </div>
                </template>
                <template #screenreader="{ item }"> Frukt ID {{ item.id }} </template>
            </f-list>
        </template>

        <template #add="{ item }">
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
            <f-text-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-text-field>
            <f-textarea-field v-model="item.description" v-validation.required>
                Beskrivning
            </f-textarea-field>
        </template>

        <template #modify="{ item }">
            <f-static-field v-model="item.name" type="text">
                <template #label> Namn </template>
                <template #default> {{ item.name }}</template>
            </f-static-field>
            <f-textarea-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-textarea-field>
        </template>

        <template #delete="{ item }">
            Vill du verkligen radera frukten "{{ item.name }}" med ID {{ item.id }}
        </template>
    </f-crud-dataset>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import {
    FCrudDataset,
    FCrudButton,
    FList,
    FStaticField,
    FTextField,
    FTextareaField,
} from "@fkui/vue";
import { type FruitData, fruits } from "./fruit-data";

export default defineComponent({
    components: {
        FCrudDataset,
        FCrudButton,
        FList,
        FStaticField,
        FTextField,
        FTextareaField,
    },
    data() {
        return {
            fruits,
        };
    },
    methods: {
        // Förpopulera ett objekt med värden
        beforeCreate(): FruitData {
            return {
                id: String(this.getMaxId() + 1),
                name: "",
                origin: "",
                description: "",
            };
        },
        getMaxId() {
            return this.fruits.reduce((max, item) => {
                return Math.max(max, parseInt(item.id, 10));
            }, 0);
        },
        saveModel(row: FruitData) {
            console.log("Post model to backend", row);
        },
    },
});
</script>

Sorterbar lista

<template>
    <f-crud-dataset v-model="fruits" :before-create="beforeCreate">
        <template #default>
            <f-sort-filter-dataset
                :data="fruits"
                :sortable-attributes="{
                    namn: 'Namn',
                    origin: 'Land',
                }"
            >
                <template #default="{ sortFilterResult }">
                    <f-list :items="sortFilterResult" key-attribute="id">
                        <template #default="{ item }">
                            <h3>{{ item.name }}</h3>
                            <div class="row">
                                <div class="col col--lg-10">
                                    Land:
                                    <em> {{ item.origin }} </em>
                                    <br />
                                    Beskrivning:
                                    <em> {{ item.description }} </em>
                                    <br />
                                </div>
                                <div class="col col--sm-1">
                                    <f-crud-button action="modify" :item="item" icon />
                                </div>
                                <div class="col col--sm-1">
                                    <f-crud-button action="delete" :item="item" icon />
                                </div>
                            </div>
                        </template>
                    </f-list>
                </template>
            </f-sort-filter-dataset>
        </template>

        <template #add="{ item }">
            <f-text-field
                v-model="item.name"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Namn
            </f-text-field>
            <f-text-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-text-field>
            <f-textarea-field v-model="item.description" v-validation.required>
                Beskrivning
            </f-textarea-field>
        </template>

        <template #modify="{ item }">
            <f-static-field v-model="item.name" type="text">
                <template #label> Namn </template>
                <template #default> {{ item.name }}</template>
            </f-static-field>
            <f-textarea-field
                v-model="item.origin"
                v-validation.required.maxLength="{ maxLength: { length: 32 } }"
                type="text"
            >
                Land
            </f-textarea-field>
        </template>

        <template #delete="{ item }">
            Vill du verkligen ta bort frukten "{{ item.name }}" med ID {{ item.id }}
        </template>
    </f-crud-dataset>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import {
    FCrudButton,
    FCrudDataset,
    FList,
    FSortFilterDataset,
    FStaticField,
    FTextField,
    FTextareaField,
} from "@fkui/vue";
import { type FruitData, fruits } from "./fruit-data";

export default defineComponent({
    components: {
        FCrudButton,
        FCrudDataset,
        FList,
        FSortFilterDataset,
        FStaticField,
        FTextField,
        FTextareaField,
    },
    data() {
        return {
            fruits,
        };
    },
    methods: {
        // Förpopulera ett objekt med värden
        beforeCreate(): FruitData {
            return {
                id: String(this.getMaxId() + 1),
                name: "",
                origin: "",
                description: "",
            };
        },
        getMaxId() {
            return this.fruits.reduce((max, item) => {
                return Math.max(max, parseInt(item.id, 10));
            }, 0);
        },
    },
});
</script>

API

Props

v-model: T[] Optional

The list of items that should be deleted, modified or added to. If the prop is not set an empty array will be used.

Default: () => []

beforeCreate: (() => T) | undefined Optional

A function that returns an item to the #add template. Can be used to populate data that the user should not input themself e.g. an id. Or to give the user suggestions for inputs. If the prop is not used an empty item will be returned.

Default: undefined

primaryButtonRight: boolean Optional

If true the primary button in the modals will be placed to the right side instead of to the left.

Default: false

beforeSubmit: FValidationFormCallback Optional

If given, this function is called before the [[submit]] event is emitted. See <f-validation-form> beforeSubmit props for more info.

Default: function() { /* do nothing */ }

beforeValidation: FValidationFormCallback Optional

If given, this function is called before the form data is validated and the [[submit]] event is emitted. See <f-validation-form> beforeValidation props for more info.

Default: function() { /* do nothing */ }

onCancel: () => void Optional

If given, this function is called after the modal has been closed.

Default: function() { return undefined; }

addNewModalHeader: string Optional

Property for changing the "add new" modal heading

Default: TranslationService.provider.translate("fkui.crud-dataset.modal.header.add", "Lägg till rad")

modifyModalHeader: string Optional

Property for changing the "modify" modal heading

Default: TranslationService.provider.translate("fkui.crud-dataset.modal.header.modify", "Ändra rad")

deleteModalHeader: string Optional

Property for changing the "delete" modal heading

Default: TranslationService.provider.translate( "fkui.crud-dataset.modal.header.delete", "Är du säker på att du vill ta bort raden?", )

Events

created

Emitted when an item is added.

Arguments:

item: T — the added item.

deleted

Emitted when an item is deleted.

Arguments:

item: T — the deleted item.

updated

Emitted when an item is updated.

Arguments:

item: T — the updated item.

Slots

default

Slot for displaying the data.

add-button

Slot for changing the text in "Add new" button`

add

Slot for inputs when creating a new item. The new item is available through v-slot="{ item }". If any data in the item should be set not by the user the prop beforeCreate can be used to set that data.

Bindings:

item: T — Item returned by beforeCreate or an empty object.

modify

Slot for inputs when modifying an item. The item being modified is available through v-slot="{ item }".

Bindings:

item: T — A clone of the current item.

delete

Slot for displaying a warning message before an item is deleted. The item being deleted is available through v-slot="{ item }".

Bindings:

item: T — Item about to be deleted.

Kakor på webbplatsen

Datamängdredigerare