imi-bas/pronature-platform
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactoring admin console #12

Browse Source
This commit is contained in:
goynov
2026-01-25 10:45:01 +02:00
parent 80afb5c460
commit bf13c37301
10 changed files with 408 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AppHeader.vue
+7 -7
View File
@@ -7,9 +7,9 @@
<v-btn icon="mdi-plus" variant="text" v-bind="props"></v-btn> <v-btn icon="mdi-plus" variant="text" v-bind="props"></v-btn>
</template> </template>
<v-list> <v-list>
<v-list-item to="/game-objects/add">{{ l.createGameObject }}</v-list-item> <v-list-item to="/admin/game-objects/add">{{ l.createGameObject }}</v-list-item>
<v-list-item to="/scenarios/add">{{ l.createScenario }}</v-list-item> <v-list-item to="/admin/scenarios/add">{{ l.createScenario }}</v-list-item>
<v-list-item to="/games/add">{{ l.createGame }}</v-list-item> <v-list-item to="/admin/games/add">{{ l.createGame }}</v-list-item>
</v-list> </v-list>
</v-menu> </v-menu>
</v-app-bar> </v-app-bar>
@@ -20,12 +20,12 @@
</v-list> </v-list>
<v-divider></v-divider> <v-divider></v-divider>
<v-list nav> <v-list nav>
<v-list-item prepend-icon="mdi-database" to="/game-objects/list" :title="l.gameObjects"></v-list-item> <v-list-item prepend-icon="mdi-database" to="/admin/game-objects/list" :title="l.gameObjects"></v-list-item>
<v-list-item prepend-icon="mdi-receipt-text-edit-outline" to="/scenarios/list" :title="l.gameScenarios"></v-list-item> <v-list-item prepend-icon="mdi-receipt-text-edit-outline" to="/admin/scenarios/list" :title="l.gameScenarios"></v-list-item>
<!-- <v-list-item prepend-icon="mdi-cogs" :title="l.gameRules"></v-list-item> --> <!-- <v-list-item prepend-icon="mdi-cogs" :title="l.gameRules"></v-list-item> -->
<v-divider></v-divider> <v-divider></v-divider>
<v-list-item prepend-icon="mdi-controller" :title="l.games" to="/games/list"></v-list-item> <v-list-item prepend-icon="mdi-controller" :title="l.games" to="/admin/games/list"></v-list-item>
<v-list-item prepend-icon="mdi-cog-play" :title="l.preview" to="/preview/list"></v-list-item> <v-list-item prepend-icon="mdi-cog-play" :title="l.preview" to="/admin/preview/list"></v-list-item>
</v-list> </v-list>
<v-divider></v-divider> <v-divider></v-divider>
src/pages/game-objects/[[id]].vue → src/pages/admin/game-objects/[[id]].vue
+117 -117
View File
@@ -1,118 +1,118 @@
<template> <template>
<v-container max-width="1400"> <v-container max-width="1400">
<v-tabs v-model="panel"> <v-tabs v-model="panel">
<v-tab value="edit"> <v-tab value="edit">
<v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createGameObject : l.editGameObject }} <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createGameObject : l.editGameObject }}
</v-tab> </v-tab>
<v-tab value="preview" v-show="object.asset"> <v-tab value="preview" v-show="object.asset">
<v-icon icon="mdi-panorama-outline"></v-icon> {{ l.preview }} <v-icon icon="mdi-panorama-outline"></v-icon> {{ l.preview }}
</v-tab> </v-tab>
</v-tabs> </v-tabs>
<v-tabs-window v-model="panel"> <v-tabs-window v-model="panel">
<v-tabs-window-item value="edit"> <v-tabs-window-item value="edit">
<v-card class="container my-3"> <v-card class="container my-3">
<v-form class="pa-4" v-model="valid"> <v-form class="pa-4" v-model="valid">
<v-text-field :label="l.name" v-model="object.name" :rules="[rules.required]"></v-text-field> <v-text-field :label="l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
<v-textarea :label="l.description" v-model="object.description"></v-textarea> <v-textarea :label="l.description" v-model="object.description"></v-textarea>
<v-select :label="l.objectType" v-model="object.type" :items="$p.objectTypes.map(ot=>({title:l[ot.value], value:ot.value}))" tit :rules="[rules.required]"> <v-select :label="l.objectType" v-model="object.type" :items="$p.objectTypes.map(ot=>({title:l[ot.value], value:ot.value}))" tit :rules="[rules.required]">
</v-select> </v-select>
<v-file-input :label="l.objectFile" v-model="object.file" :rules="[rules.requiredFile]"></v-file-input> <v-file-input :label="l.objectFile" v-model="object.file" :rules="[rules.requiredFile]"></v-file-input>
<div v-if="object.asset">{{ object.asset.name }} | {{ object.asset.ofn }}</div> <div v-if="object.asset">{{ object.asset.name }} | {{ object.asset.ofn }}</div>
</v-form> </v-form>
<v-card-actions> <v-card-actions>
<v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="success" <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="success"
:disabled="!valid"> :disabled="!valid">
{{ l.save }} {{ l.save }}
</v-btn> </v-btn>
<v-btn @click="save({preview: true})" :loading="loading" prepend-icon="mdi-content-save" color="primary" <v-btn @click="save({preview: true})" :loading="loading" prepend-icon="mdi-content-save" color="primary"
:disabled="!valid"> :disabled="!valid">
{{ l.saveAndPreview }} {{ l.saveAndPreview }}
</v-btn> </v-btn>
<v-btn @click="publish" prepend-icon="mdi-publish" color="success" v-if="false && object.id"> <v-btn @click="publish" prepend-icon="mdi-publish" color="success" v-if="false && object.id">
{{ l.publish }}</v-btn> {{ l.publish }}</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-tabs-window-item> </v-tabs-window-item>
<v-tabs-window-item value="preview"> <v-tabs-window-item value="preview">
<v-card :title="l.preview" class="container my-3" v-if="object.asset"> <v-card :title="l.preview" class="container my-3" v-if="object.asset">
<AssetPreview :object="object" ref="assetPreview" ></AssetPreview> <AssetPreview :object="object" ref="assetPreview" ></AssetPreview>
<v-card-actions> <v-card-actions>
<v-btn @click="captureThumbnail" v-if="forRendering" prepend-icon="mdi-camera" color="secondary"> <v-btn @click="captureThumbnail" v-if="forRendering" prepend-icon="mdi-camera" color="secondary">
{{ l.captureThumbnail }} {{ l.captureThumbnail }}
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-tabs-window-item> </v-tabs-window-item>
</v-tabs-window> </v-tabs-window>
</v-container> </v-container>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
panel: this.$route.query?.tab || 'edit', panel: this.$route.query?.tab || 'edit',
object: {}, object: {},
valid: false, valid: false,
rules: { rules: {
required: v => v ? true : this.l.fieldRequired, required: v => v ? true : this.l.fieldRequired,
requiredFile: v => (v?.size || this.id != 'add') ? true : this.l.fieldRequired requiredFile: v => (v?.size || this.id != 'add') ? true : this.l.fieldRequired
}, },
loading: false loading: false
} }
}, },
async mounted() { async mounted() {
if (this.id && this.id != 'add') { if (this.id && this.id != 'add') {
this.object = (await this.$api.gameObject.load(this.id)).data; this.object = (await this.$api.gameObject.load(this.id)).data;
} }
}, },
computed: { computed: {
fileToUpload() { fileToUpload() {
return this.object?.file instanceof File return this.object?.file instanceof File
}, },
id() { id() {
return this.$route.params?.id; return this.$route.params?.id;
}, },
forRendering() { forRendering() {
return this.$p.objectTypes.find(t=> t.value == this.object?.type)?.render return this.$p.objectTypes.find(t=> t.value == this.object?.type)?.render
}, },
}, },
methods: { methods: {
async save(params) { async save(params) {
this.loading = true; this.loading = true;
try { try {
let fd = new FormData(); let fd = new FormData();
let keys = ['name', 'type']; let keys = ['name', 'type'];
if (this.fileToUpload) keys.push('file'); if (this.fileToUpload) keys.push('file');
if (this.id != 'add') keys.push('id'); if (this.id != 'add') keys.push('id');
if (this.object.thumb) keys.push('thumb'); if (this.object.thumb) keys.push('thumb');
keys.forEach(e => fd.append(e, this.object[e])) keys.forEach(e => fd.append(e, this.object[e]))
let result = await this.$api.gameObject.save(fd); let result = await this.$api.gameObject.save(fd);
Object.assign(this.object, result.data.object); Object.assign(this.object, result.data.object);
if (this.id == 'add') { if (this.id == 'add') {
this.$router.replace({ params: { id: this.object.id }, query:{ tab:'preview' } }); this.$router.replace({ params: { id: this.object.id }, query:{ tab:'preview' } });
} }
// await this.$nextTick(); // await this.$nextTick();
// this.panel = 'preview'; // this.panel = 'preview';
// if (!params?.thumbOnly) await this.$refs.assetPreview.loadAsset(); // if (!params?.thumbOnly) await this.$refs.assetPreview.loadAsset();
} catch (err) { } catch (err) {
console.error(err); console.error(err);
} }
this.loading = false; this.loading = false;
// await this.$nextTick(); // await this.$nextTick();
// this.panel = 'preview'; // this.panel = 'preview';
}, },
async captureThumbnail() { async captureThumbnail() {
this.object.thumb = await this.$refs.assetPreview.gameEngine.captureScreenshot(); this.object.thumb = await this.$refs.assetPreview.gameEngine.captureScreenshot();
await this.save({ thumbOnly: true }); await this.save({ thumbOnly: true });
}, },
async publish() { async publish() {
} }
} }
} }
</script> </script>
src/pages/game-objects/list.vue → src/pages/admin/game-objects/list.vue
+35 -35
View File
@@ -1,36 +1,36 @@
<template> <template>
<AssetBrowser @select="$router.push(`/game-objects/${$event.id}`)" ref="browser"> <AssetBrowser @select="$router.push(`/admin/game-objects/${$event.id}`)" ref="browser">
<template v-slot:action-buttons="{ object }"> <template v-slot:action-buttons="{ object }">
<v-btn variant="tonal" density="comfortable" size="small" class="browse-asset edit" icon="mdi-pencil-outline" :to="`/game-objects/${object.id}`" color="blue-lighten-3"></v-btn> <v-btn variant="tonal" density="comfortable" size="small" class="browse-asset edit" icon="mdi-pencil-outline" :to="`/admin/game-objects/${object.id}`" color="blue-lighten-3"></v-btn>
<v-btn variant="tonal" density="comfortable" size="small" class="browse-asset remove" icon="mdi-close" @click="confirmTarget = object; confirmDialog = true" color="red-lighten-2"></v-btn> <v-btn variant="tonal" density="comfortable" size="small" class="browse-asset remove" icon="mdi-close" @click="confirmTarget = object; confirmDialog = true" color="red-lighten-2"></v-btn>
</template> </template>
</AssetBrowser> </AssetBrowser>
<v-dialog v-model="confirmDialog" width="auto"> <v-dialog v-model="confirmDialog" width="auto">
<v-card :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`"> <v-card :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
<template v-slot:actions> <template v-slot:actions>
<v-btn @click="confirmDialog = false">{{ l.no }}</v-btn> <v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
<v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn> <v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
</template> </template>
</v-card> </v-card>
</v-dialog> </v-dialog>
</template> </template>
<script> <script>
export default { export default {
data(){ data(){
return { return {
confirmDialog: false, confirmDialog: false,
confirmTarget: null confirmTarget: null
} }
}, },
methods:{ methods:{
async remove(item){ async remove(item){
await this.$api.gameObject.remove(item.id); await this.$api.gameObject.remove(item.id);
this.confirmDialog = false; this.confirmDialog = false;
this.$refs.browser.load(); this.$refs.browser.load();
} }
} }
} }
</script> </script>
src/pages/games/[[id]].vue → src/pages/admin/games/[[id]].vue
+78 -78
View File
@@ -1,79 +1,79 @@
<template> <template>
<v-container max-width="1400"> <v-container max-width="1400">
<v-tabs v-model="panel" class="mb-2"> <v-tabs v-model="panel" class="mb-2">
<v-tab value="game"> <v-tab value="game">
<v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createGame : l.editGame }} <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createGame : l.editGame }}
</v-tab> </v-tab>
<v-tab value="gameDesigner" v-if="object.scenario"> <v-tab value="gameDesigner" v-if="object.scenario">
<v-icon icon="mdi-movie-open-outline"></v-icon> {{ l.gameDesigner }} <v-icon icon="mdi-movie-open-outline"></v-icon> {{ l.gameDesigner }}
</v-tab> </v-tab>
</v-tabs> </v-tabs>
<v-tabs-window v-model="panel"> <v-tabs-window v-model="panel">
<v-tabs-window-item value="game"> <v-tabs-window-item value="game">
<v-form class="pa-4" v-model="valid"> <v-form class="pa-4" v-model="valid">
<v-text-field :label="l.name" v-model="object.name" :rules="[rules.required]"></v-text-field> <v-text-field :label="l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
<v-textarea :label="l.description" v-model="object.description"></v-textarea> <v-textarea :label="l.description" v-model="object.description"></v-textarea>
<v-select :label="l.scenario" :items="scenarios" v-model="object.scenario" item-title="name" item-value="id"></v-select> <v-select :label="l.scenario" :items="scenarios" v-model="object.scenario" item-title="name" item-value="id"></v-select>
</v-form> </v-form>
</v-tabs-window-item> </v-tabs-window-item>
<v-tabs-window-item value="gameDesigner"> <v-tabs-window-item value="gameDesigner">
<GameDesigner v-model="object" ref="gameDesigner" ></GameDesigner> <GameDesigner v-model="object" ref="gameDesigner" ></GameDesigner>
</v-tabs-window-item> </v-tabs-window-item>
</v-tabs-window> </v-tabs-window>
<v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">{{ l.save }}</v-btn> <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">{{ l.save }}</v-btn>
</v-container> </v-container>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
object: {}, object: {},
valid: false, valid: false,
rules: { rules: {
required: v => v ? true : this.l.fieldRequired, required: v => v ? true : this.l.fieldRequired,
requiredFile: v => (v?.length || this.id != 'add') ? true : this.l.fieldRequired requiredFile: v => (v?.length || this.id != 'add') ? true : this.l.fieldRequired
}, },
loading: false, loading: false,
panel: [], panel: [],
scenarios: [] scenarios: []
} }
}, },
async mounted(){ async mounted(){
if (this.id && this.id != 'add') { if (this.id && this.id != 'add') {
this.object = (await this.$api.game.load(this.id)).data; this.object = (await this.$api.game.load(this.id)).data;
} }
this.scenarios = (await this.$api.scenario.search()).data.data; this.scenarios = (await this.$api.scenario.search()).data.data;
}, },
watch:{ watch:{
'object.scenario'(v){ 'object.scenario'(v){
if (v){ if (v){
this.object.thumb = this.scenarios?.find(s=>s.id == v)?.sceneThumb?.[0]; this.object.thumb = this.scenarios?.find(s=>s.id == v)?.sceneThumb?.[0];
} }
} }
}, },
computed: { computed: {
id() { id() {
return this.$route.params?.id; return this.$route.params?.id;
} }
}, },
methods:{ methods:{
async save(params) { async save(params) {
this.loading = true; this.loading = true;
try { try {
console.log('saving', this.object) console.log('saving', this.object)
let result = await this.$api.game.save(this.object); let result = await this.$api.game.save(this.object);
//Object.assign(this.object, result.data.object); //Object.assign(this.object, result.data.object);
this.object.id = result.data.object.id; this.object.id = result.data.object.id;
if (this.id == 'add') { if (this.id == 'add') {
this.$router.replace({ params: { id: this.object.id } }); this.$router.replace({ params: { id: this.object.id } });
} }
} catch (err) { } catch (err) {
console.error(err); console.error(err);
} }
this.loading = false this.loading = false
}, },
} }
} }
</script> </script>
src/pages/games/list.vue → src/pages/admin/games/list.vue
+48 -48
View File
@@ -1,49 +1,49 @@
<template> <template>
<v-container> <v-container>
<v-row> <v-row>
<v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative"> <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
<router-link :to="`/games/${v.id}`"> <router-link :to="`/admin/games/${v.id}`">
<v-img :src="`/asset/thumb/${v.thumb}.webp`"></v-img> <v-img :src="`/asset/thumb/${v.thumb}.webp`"></v-img>
</router-link> </router-link>
<div class="d-flex"> <div class="d-flex">
<span class="flex-grow-1">{{ v.name }}</span> <span class="flex-grow-1">{{ v.name }}</span>
<v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/games/${v.id}`" color="primary"></v-btn> <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/admin/games/${v.id}`" color="primary"></v-btn>
<v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn> <v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn>
</div> </div>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
<v-dialog v-model="confirmDialog" width="auto"> <v-dialog v-model="confirmDialog" width="auto">
<v-card :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`"> <v-card :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
<template v-slot:actions> <template v-slot:actions>
<v-btn @click="confirmDialog = false">{{ l.no }}</v-btn> <v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
<v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn> <v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
</template> </template>
</v-card> </v-card>
</v-dialog> </v-dialog>
</template> </template>
<script> <script>
export default { export default {
data(){ data(){
return { return {
items: [], items: [],
confirmDialog: false, confirmDialog: false,
confirmTarget: null confirmTarget: null
} }
}, },
async created(){ async created(){
this.items = (await this.$api.game.search()).data.data this.items = (await this.$api.game.search()).data.data
}, },
methods:{ methods:{
async remove(item){ async remove(item){
await this.$api.game.remove(item.id); await this.$api.game.remove(item.id);
this.confirmDialog = false; this.confirmDialog = false;
this.items.splice(this.items.indexOf(item), 1); this.items.splice(this.items.indexOf(item), 1);
} }
} }
} }
</script> </script>
src/pages/index.vue → src/pages/admin/index.vue
View File
src/pages/preview/[[id]].vue → src/pages/admin/preview/[[id]].vue
View File
src/pages/preview/list.vue → src/pages/admin/preview/list.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<v-container> <v-container>
<v-row> <v-row>
<v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative"> <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
<router-link :to="`/preview/${v.id}`"> <router-link :to="`/admin/preview/${v.id}`">
<v-img :src="`/asset/thumb/${v.thumb}.webp`"></v-img> <v-img :src="`/asset/thumb/${v.thumb}.webp`"></v-img>
</router-link> </router-link>
<div class="d-flex"> <div class="d-flex">
src/pages/scenarios/[[id]].vue → src/pages/admin/scenarios/[[id]].vue
+74 -74
View File
@@ -1,75 +1,75 @@
<template> <template>
<v-container max-width="1400"> <v-container max-width="1400">
<v-tabs v-model="panel"> <v-tabs v-model="panel">
<v-tab value="scenario"> <v-tab value="scenario">
<v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createScenario : l.editScenario }} <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createScenario : l.editScenario }}
</v-tab> </v-tab>
<v-tab value="scenes"> <v-tab value="scenes">
<v-icon icon="mdi-panorama-outline"></v-icon> {{ l.editScenes }} <v-icon icon="mdi-panorama-outline"></v-icon> {{ l.editScenes }}
</v-tab> </v-tab>
</v-tabs> </v-tabs>
<v-tabs-window v-model="panel"> <v-tabs-window v-model="panel">
<v-tabs-window-item value="scenario"> <v-tabs-window-item value="scenario">
<v-form class="pa-4" v-model="valid"> <v-form class="pa-4" v-model="valid">
<v-text-field :label="l.name" v-model="object.name" :rules="[rules.required]"></v-text-field> <v-text-field :label="l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
<v-textarea :label="l.description" v-model="object.description"></v-textarea> <v-textarea :label="l.description" v-model="object.description"></v-textarea>
</v-form> </v-form>
</v-tabs-window-item> </v-tabs-window-item>
<v-tabs-window-item value="scenes"> <v-tabs-window-item value="scenes">
<SceneDesigner v-model="object" ref="sceneDesigner" ></SceneDesigner> <SceneDesigner v-model="object" ref="sceneDesigner" ></SceneDesigner>
</v-tabs-window-item> </v-tabs-window-item>
</v-tabs-window> </v-tabs-window>
<v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">{{ l.save }}</v-btn> <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">{{ l.save }}</v-btn>
</v-container> </v-container>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
object: {}, object: {},
valid: false, valid: false,
rules: { rules: {
required: v => v ? true : this.l.fieldRequired, required: v => v ? true : this.l.fieldRequired,
requiredFile: v => (v?.length || this.id != 'add') ? true : this.l.fieldRequired requiredFile: v => (v?.length || this.id != 'add') ? true : this.l.fieldRequired
}, },
loading: false, loading: false,
panel: [] panel: []
} }
}, },
async mounted(){ async mounted(){
if (this.id && this.id != 'add') { if (this.id && this.id != 'add') {
this.object = (await this.$api.scenario.load(this.id)).data; this.object = (await this.$api.scenario.load(this.id)).data;
} }
}, },
computed: { computed: {
id() { id() {
return this.$route.params?.id; return this.$route.params?.id;
} }
}, },
watch:{ watch:{
async panel(n){ async panel(n){
if ((n||[]).includes('scenes')){ if ((n||[]).includes('scenes')){
await this.$nextTick(); await this.$nextTick();
this.$refs.sceneDesigner.resize(); this.$refs.sceneDesigner.resize();
} }
} }
}, },
methods:{ methods:{
async save(params) { async save(params) {
this.loading = true; this.loading = true;
try { try {
let result = await this.$api.scenario.save(this.object); let result = await this.$api.scenario.save(this.object);
Object.assign(this.object, result.data.object); Object.assign(this.object, result.data.object);
if (this.id == 'add') { if (this.id == 'add') {
this.$router.replace({ params: { id: this.object.id } }); this.$router.replace({ params: { id: this.object.id } });
} }
} catch (err) { } catch (err) {
console.error(err); console.error(err);
} }
this.loading = false this.loading = false
}, },
} }
} }
</script> </script>
src/pages/scenarios/list.vue → src/pages/admin/scenarios/list.vue
+48 -48
View File
@@ -1,49 +1,49 @@
<template> <template>
<v-container> <v-container>
<v-row> <v-row>
<v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative"> <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
<router-link :to="`/scenarios/${v.id}`"> <router-link :to="`/admin/scenarios/${v.id}`">
<v-img :src="`/asset/thumb/${v.sceneThumb?.[0]}.webp`"></v-img> <v-img :src="`/asset/thumb/${v.sceneThumb?.[0]}.webp`"></v-img>
</router-link> </router-link>
<div class="d-flex"> <div class="d-flex">
<span class="flex-grow-1">{{ v.name }}</span> <span class="flex-grow-1">{{ v.name }}</span>
<v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/scenarios/${v.id}`" color="primary"></v-btn> <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/admin/scenarios/${v.id}`" color="primary"></v-btn>
<v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn> <v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn>
</div> </div>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
<v-dialog v-model="confirmDialog" width="auto"> <v-dialog v-model="confirmDialog" width="auto">
<v-card :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`"> <v-card :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
<template v-slot:actions> <template v-slot:actions>
<v-btn @click="confirmDialog = false">{{ l.no }}</v-btn> <v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
<v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn> <v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
</template> </template>
</v-card> </v-card>
</v-dialog> </v-dialog>
</template> </template>
<script> <script>
export default { export default {
data(){ data(){
return { return {
items: [], items: [],
confirmDialog: false, confirmDialog: false,
confirmTarget: null confirmTarget: null
} }
}, },
async created(){ async created(){
this.items = (await this.$api.scenario.search()).data.data this.items = (await this.$api.scenario.search()).data.data
}, },
methods:{ methods:{
async remove(item){ async remove(item){
await this.$api.scenario.remove(item.id); await this.$api.scenario.remove(item.id);
this.confirmDialog = false; this.confirmDialog = false;
this.items.splice(this.items.indexOf(item), 1); this.items.splice(this.items.indexOf(item), 1);
} }
} }
} }
</script> </script>