Page MenuHomec4science
Files F83460469

PlayerView.vue
No OneTemporary
Actions

File Metadata

Created
Tue, Sep 17, 06:33

PlayerView.vue
View Options

<script setup>
import { ref, reactive } from 'vue';
import { usePlayerStore } from '../stores';
const store = usePlayerStore();
await store.fetch();
const name = ref();
const editName = ref();
const menu = reactive({});
store.state.forEach(v => menu[v.id] = false);
const rule = [ v => !!v || 'Champs requis' ];
const add = async () => {
await store.add({ name: name.value });
name.value = '';
}
const edit = async (obj) => {
await store.update(obj)
menu[obj.id] = false;
editName.value = '';
}
</script>
<template>
<v-container>
<v-row justify="center">
<v-col sm="6" cols="12">
<v-row>
<v-col>
<v-list
elevation="3"
item-props
>
<v-list-item
v-for="player in store.state"
:key="player.id"
:title="player.name"
>
<template v-slot:append>
<v-menu
v-model="menu[player.id]"
:close-on-content-click="false"
>
<template v-slot:activator="{ props }">
<v-btn
size="small"
variant="text"
icon
v-bind="props"
>
<v-icon color="blue">mdi-pencil</v-icon>
</v-btn>
</template>
<v-card min-width="300px">
<v-row justify="space-between" class="align-center ma-3">
<v-col cols="9" class="pa-0">
<v-text-field
v-model="editName"
:rules="rule"
variant="solo"
density="compact"
hide-details
single-line
label="Nom du joueur"
></v-text-field>
</v-col>
<v-btn
icon="mdi-content-save"
@click="edit({ id: player.id, name: editName })"
></v-btn>
</v-row>
</v-card>
</v-menu>
<v-btn
@click="store.remove(player)"
size="small"
variant="text"
icon
>
<v-icon color="red">mdi-delete</v-icon>
</v-btn>
</template>
</v-list-item>
</v-list>
</v-col>
</v-row>
<v-row justify="center" class="align-center pa-4 ma-4">
<v-col cols="12">
<v-text-field
class="pb-0"
v-model="name"
:rules="rule"
clearable
variant="solo"
label="Nom du joueur"
></v-text-field>
</v-col>
<v-btn @click="add">Ajouter le joueur</v-btn>
</v-row>
</v-col>
</v-row>
</v-container>
</template>

Event Timeline

c4science · Help