Add admin settings partials

This commit is contained in:
Daniel Supernault 2024-03-14 05:07:49 -06:00
parent 704e7b12e0
commit eb4871237b
No known key found for this signature in database
GPG key ID: 23740873EE6F76A1
3 changed files with 179 additions and 0 deletions

View file

@ -0,0 +1,42 @@
<template>
<div class="card shadow-none border card-body">
<div class="form-group mb-0">
<div class="custom-control custom-checkbox">
<input type="checkbox" :name="elementId" class="custom-control-input" :id="elementId" :checked="value" @change="$emit('change', !value)">
<label class="custom-control-label font-weight-bold" :for="elementId">{{ name }}</label>
</div>
<p class="mt-1 mb-0 small text-muted" v-html="description"></p>
</div>
</div>
</template>
<script>
export default {
props: {
name: {
type: String
},
value: {
type: Boolean
},
description: {
type: String
}
},
computed: {
elementId: {
get() {
let name = this.name;
name = name.toLowerCase();
name = name.replace(/[^a-z0-9 -]/g, ' ');
name = name.replace(/\s+/g, '-');
name = name.replace(/^-+|-+$/g, '');
return 'fec_' + name;
}
}
}
}
</script>

View file

@ -0,0 +1,74 @@
<template>
<div :class="[ isCard ? 'card shadow-none border card-body' : '' ]">
<div
class="form-group"
:class="[ isInline ? 'd-flex align-items-center gap-1' : 'mb-1' ]">
<label :for="elementId" class="font-weight-bold mb-0">{{ name }}</label>
<input
:id="elementId"
class="form-control form-control-muted mb-0"
:placeholder="placeholder"
:value="value"
@input="$emit('change', $event.target.value)"
:disabled="isDisabled" />
</div>
<p v-if="description && description.length" class="help-text small text-muted mb-0" v-html="description">
</p>
</div>
</template>
<script>
export default {
props: {
name: {
type: String
},
value: {
type: String
},
placeholder: {
type: String
},
description: {
type: String
},
isCard: {
type: Boolean,
default: true
},
isInline: {
type: Boolean,
default: false
},
isDisabled: {
type: Boolean,
default: false
}
},
computed: {
elementId: {
get() {
let name = this.name;
name = name.toLowerCase();
name = name.replace(/[^a-z0-9 -]/g, ' ');
name = name.replace(/\s+/g, '-');
name = name.replace(/^-+|-+$/g, '');
return 'fec_' + name;
}
}
}
}
</script>
<style lang="scss" scoped="true">
.gap-1 {
gap: 1rem;
}
</style>

View file

@ -0,0 +1,63 @@
<template>
<div>
<div class="d-flex justify-content-between align-items-center">
<div style="width:100px;"></div>
<div>
<h2 class="display-4 mb-0" style="font-weight: 800;">{{ title }}</h2>
</div>
<div>
<button
class="btn btn-primary rounded-pill font-weight-bold px-5"
:disabled="isSaving || saved"
@click.prevent="save">
<template v-if="isSaving === true"><b-spinner small class="mx-2" /></template>
<template v-else>{{ buttonLabel }}</template>
</button>
</div>
</div>
<hr class="mt-3">
</div>
</template>
<script>
export default {
props: {
title: {
type: String
},
saving: {
type: Boolean
},
saved: {
type: Boolean
}
},
computed: {
buttonLabel: {
get() {
if(this.saved) {
return 'Saved';
}
if(this.saving) {
return 'Saving';
}
return 'Save';
}
},
isSaving: {
get() {
return this.saving;
}
}
},
methods: {
save($event) {
$event.currentTarget?.blur();
this.$emit('save');
}
}
}
</script>