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>

onBeforeCreate(): UnknownItem {
    const item: MyInterface = {
        /* ... */
    }
    return item as unknown as UnknownItem;
}

Notera: då FCrudDataset inte är typsäker måste man casta objektet till UnknownItem.

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 {
    type UnknownItem,
    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(): UnknownItem {
            const fruit: FruitData = {
                id: String(this.getMaxId() + 1),
                name: "",
                origin: "",
                description: "",
            };
            return fruit as unknown as UnknownItem;
        },
        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 {
    type UnknownItem,
    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(): UnknownItem {
            const fruit: FruitData = {
                id: String(this.getMaxId() + 1),
                name: "",
                origin: "",
                description: "",
            };
            return fruit as unknown as UnknownItem;
        },
        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 {
    type UnknownItem,
    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(): UnknownItem {
            const fruit: FruitData = {
                id: String(this.getMaxId() + 1),
                name: "",
                origin: "",
                description: "",
            };
            return fruit as unknown as UnknownItem;
        },
        getMaxId() {
            return this.fruits.reduce((max, item) => {
                return Math.max(max, parseInt(item.id, 10));
            }, 0);
        },
    },
});
</script>

API

Props
Name	Description	Type	Required	Default
v-model	The list of items that should be deleted, modified or added to. If the prop is not set an empty array will be used.	ListArray<ListItem>	false	() => []
beforeCreate	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.	(() => ListItem) \| undefined	false	undefined
primaryButtonRight	If `true` the primary button in the modals will be placed to the right side instead of to the left.	boolean	false	false
beforeSubmit	If given, this function is called before the [[submit]] event is emitted. See <f-validation-form> `beforeSubmit` props for more info.	FValidationFormCallback	false	function() { /* do nothing */ }
beforeValidation	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.	FValidationFormCallback	false	function() { /* do nothing */ }
onCancel	If given, this function is called after the modal has been closed.	() => void	false	function() { return undefined; }
addNewModalHeader	Property for changing the "add new" modal heading	string	false	TranslationService.provider.translate("fkui.crud-dataset.modal.header.add", "Lägg till rad")
modifyModalHeader	Property for changing the "modify" modal heading	string	false	TranslationService.provider.translate("fkui.crud-dataset.modal.header.modify", "Ändra rad")
deleteModalHeader	Property for changing the "delete" modal heading	string	false	TranslationService.provider.translate( "fkui.crud-dataset.modal.header.delete", "Är du säker på att du vill ta bort raden?", )

Events
Name	Description	Properties
change	Vue2 v-model event.	<anonymous>: undefined
created	Emitted when an item is added.	item: mixed — the added item.
deleted	Emitted when an item is deleted.	item: mixed — the deleted item.
updated	Emitted when an item is updated.	item: mixed — the updated item.
update:modelValue	V-model event.	<anonymous>: undefined

Slots
Name	Description	Bindings
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.	item
modify	Slot for inputs when modifying an item.	item
delete	Slot for displaying a warning message before an item is deleted.	item

Kakor på webbplatsen

Datamängdredigerare