c3lf/c3lf-system-3
9
0
Fork 0
Code Issues 55 Pull requests Projects 2 Releases Wiki Activity Actions

[WIP] add user notifications and text templates
All checks were successful
/ test (push) Successful in 54s
Details

Browse source
This commit is contained in:
j3d1 2024-11-17 00:35:45 +01:00
parent f7fda52fd0
commit ba031a3204
22 changed files with 750 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web/src/views/admin/Admin.vue
View file

@ -8,9 +8,15 @@
<li class="nav-item">
<router-link class="nav-link" :to="{name: 'admin'}" active-class="dummy" exact-active-class="active">Dashboard</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" :to="{name: 'settings'}" active-class="active">Settings</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" :to="{name: 'events'}" active-class="active">Events</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" :to="{name: 'notifications'}" active-class="active">Notifications</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" :to="{name: 'shipping'}" active-class="active">Shipping</router-link>
</li>

53
web/src/views/admin/Notifications.vue Normal file
View file

@ -0,0 +1,53 @@
<template>
<div>
<Table :items="userNotificationChannels.map(channel => ({...channel, username: channel.user.username || {}}))"
:columns="['id', 'username', 'channel_type', 'channel_target', 'event_filter', /*'active', 'created'*/]">
<template #actions="{ item }">
<div class="btn-group">
<button class="btn btn-danger" @click.stop="">
<font-awesome-icon icon="trash"/>
delete
</button>
</div>
</template>
</Table>
<div class="card bg-dark">
<div class="card-body">
<div class="input-group">
<select class="form-control">
<option value="1">user</option>
<option value="2">admin</option>
</select>
<select class="form-control">
<option value="email">Email</option>
<option value="telegram">Telegram</option>
</select>
<input type="text" class="form-control" placeholder="channel_target">
<input type="text" class="form-control" value="*">
<div class="input-group-append">
<button class="btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {mapActions, mapState} from 'vuex';
import Table from '@/components/Table';
export default {
name: 'Notifications',
components: {Table},
computed: mapState(['userNotificationChannels']),
methods: mapActions(['fetchUserNotificationChannels']),
mounted() {
this.fetchUserNotificationChannels();
}
};
</script>
<style scoped>
</style>

109
web/src/views/admin/Settings.vue Normal file
View file

@ -0,0 +1,109 @@
<template>
<h3 class="text-center">Available Message Template Variables</h3>
<p>
<span v-for="(variable, key) in messageTemplateVariables" :key="key" class="badge badge-primary"
style="margin: 5px;">
{{ variable }}
</span>
</p>
<h3 class="text-center">Message Templates</h3>
<div v-for="template in messageTemplatesIntermediate" :key="template.id" class="card bg-dark"
style="margin-bottom: 10px;">
<div class="card-header">{{ template.name }}</div>
<FormatedText :value="template.message" :format="formatText" class="card-body"
@input="changeMessageTemplate(template.id, $event)"/>
<div class="card-body">
<button class="btn btn-primary" @click="resetMessageTemplate(template.id)"
:disabled="messageTemplates.find(t => t.id === template.id).message === template.message">Reset
</button>
<button class="btn btn-success" @click="saveMessageTemplate(template.id)"
:disabled="messageTemplates.find(t => t.id === template.id).message === template.message">Save
</button>
</div>
</div>
<div class="card bg-dark">
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" v-model="newTemplateName" placeholder="New Template Name">
<button class="btn btn-success input-group-btn" @click="createMessageTemplateAndReset()"
ref="createButton">Create
</button>
</div>
</div>
</div>
</template>
<script>
import {mapActions, mapState} from 'vuex';
import Table from '@/components/Table';
import FormatedText from "@/components/inputs/FormatedText.vue";
export default {
name: 'Settings',
components: {FormatedText, Table},
data() {
return {
messageTemplatesIntermediate: [],
newTemplateName: '',
};
},
computed: mapState(['messageTemplates', 'messageTemplateVariables']),
methods: {
...mapActions(['fetchMessageTemplates', 'fetchMessageTemplateVariables', 'updateMessageTemplate', 'createMessageTemplate']),
formatText(value) {
return value.replace(/{{(.+?)}}/g, (match, key) => {
return `<span class="text-primary">{{${key}}}</span>`;
}).replace(/\n/g, '<br>').replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;');
},
changeMessageTemplate(id, message) {
console.log(id, message);
this.messageTemplatesIntermediate.forEach(template => {
if (template.id === id) {
template.message = message;
}
});
},
saveMessageTemplate(id) {
this.updateMessageTemplate(this.messageTemplatesIntermediate.find(template => template.id === id));
},
resetMessageTemplate(id) {
this.messageTemplatesIntermediate.find(template => template.id === id).message =
this.messageTemplates.find(template => template.id === id).message;
},
async createMessageTemplateAndReset() {
this.$refs.createButton.disabled = true;
await this.createMessageTemplate(this.newTemplateName);
this.newTemplateName = '';
this.$refs.createButton.disabled = false;
},
},
mounted() {
this.fetchMessageTemplates().then(() => {
this.messageTemplatesIntermediate = JSON.parse(JSON.stringify(this.messageTemplates));
});
this.fetchMessageTemplateVariables();
},
watch: {
messageTemplates() {
for (const template of this.messageTemplates) {
if (!this.messageTemplatesIntermediate.find(t => t.id === template.id)) {
this.messageTemplatesIntermediate.push(JSON.parse(JSON.stringify(template)));
}
}
for (const template of this.messageTemplatesIntermediate) {
if (!this.messageTemplates.find(t => t.id === template.id)) {
this.messageTemplatesIntermediate = this.messageTemplatesIntermediate.filter(t => t.id !== template.id);
}
}
}
}
};
</script>
<style scoped>
pre {
white-space: pre-wrap;
word-wrap: break-word;
color: inherit;
}
</style>