mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-08-04 11:44:00 +00:00
134 lines
3 KiB
Vue
134 lines
3 KiB
Vue
|
<template lang="html">
|
||
|
|
<section class="ffz--widget ffz--chat-reasons">
|
||
|
|
<div class="tw-flex tw-align-items-center tw-pd-b-05">
|
||
|
|
<div class="tw-flex-grow-1">
|
||
|
|
{{ t('setting.reasons.info', 'Reasons can be selected using action context menus to add extra information to bans and timeouts.') }}
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
v-if="! empty"
|
||
|
|
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip-wrapper"
|
||
|
|
@click="clear"
|
||
|
|
>
|
||
|
|
<span class="tw-button__text ffz-i-trash">
|
||
|
|
{{ t('setting.delete-all', 'Delete All') }}
|
||
|
|
</span>
|
||
|
|
<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
|
||
|
|
{{ t('setting.reasons.delete-all', "Delete all of this profile's reasons.") }}
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
v-if="empty"
|
||
|
|
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip-wrapper"
|
||
|
|
@click="populate"
|
||
|
|
>
|
||
|
|
<span class="tw-button__text ffz-i-trash">
|
||
|
|
{{ t('setting.reasons.add-default', 'Add Defaults') }}
|
||
|
|
</span>
|
||
|
|
<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
|
||
|
|
{{ t('setting.reasons.add-default-tip', 'Add all of the default reasons to this profile.') }}
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<reason-editor
|
||
|
|
:reason="default_reason"
|
||
|
|
:adding="true"
|
||
|
|
@save="new_reason"
|
||
|
|
/>
|
||
|
|
<div v-if="empty" class="tw-mg-t-05 tw-c-text-alt-2 tw-font-size-4 tw-align-center tw-c-text-alt-2 tw-pd-05">
|
||
|
|
{{ t('setting.reasons.no-reasons', 'no reasons are defined in this profile') }}
|
||
|
|
</div>
|
||
|
|
<ul v-else class="ffz--term-list tw-mg-t-05">
|
||
|
|
<reason-editor
|
||
|
|
v-for="reason in val"
|
||
|
|
v-if="reason.t !== 'inherit'"
|
||
|
|
:key="reason.id"
|
||
|
|
:reason="reason.v"
|
||
|
|
@remove="remove(reason)"
|
||
|
|
@save="save(reason, $event)"
|
||
|
|
/>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
import SettingMixin from '../setting-mixin';
|
||
|
|
import {deep_copy} from 'utilities/object';
|
||
|
|
|
||
|
|
let last_id = 0;
|
||
|
|
|
||
|
|
export default {
|
||
|
|
mixins: [SettingMixin],
|
||
|
|
props: ['item', 'context'],
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
default_reason: {
|
||
|
|
text: '',
|
||
|
|
i18n: null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
empty() {
|
||
|
|
return ! this.val.length || this.val.length === 1 && this.hasInheritance;
|
||
|
|
},
|
||
|
|
|
||
|
|
hasInheritance() {
|
||
|
|
for(const val of this.val)
|
||
|
|
if ( val.t === 'inherit' )
|
||
|
|
return true;
|
||
|
|
},
|
||
|
|
|
||
|
|
val() {
|
||
|
|
if ( ! this.has_value )
|
||
|
|
return [];
|
||
|
|
|
||
|
|
return this.value.map(x => {
|
||
|
|
x.id = x.id || `${Date.now()}-${Math.random()}-${last_id++}`;
|
||
|
|
return x;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
populate() {
|
||
|
|
this.set(deep_copy(this.default_value));
|
||
|
|
},
|
||
|
|
|
||
|
|
new_reason(reason) {
|
||
|
|
if ( ! reason )
|
||
|
|
return;
|
||
|
|
|
||
|
|
const vals = Array.from(this.val);
|
||
|
|
vals.push({v: reason});
|
||
|
|
this.set(deep_copy(vals));
|
||
|
|
},
|
||
|
|
|
||
|
|
remove(val) {
|
||
|
|
const vals = Array.from(this.val),
|
||
|
|
idx = vals.indexOf(val);
|
||
|
|
|
||
|
|
if ( idx !== -1 ) {
|
||
|
|
vals.splice(idx, 1);
|
||
|
|
if ( vals.length )
|
||
|
|
this.set(deep_copy(vals));
|
||
|
|
else
|
||
|
|
this.clear();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
save(val, new_val) {
|
||
|
|
if ( val.v && new_val ) {
|
||
|
|
if ( new_val.i18n && new_val.text !== val.v.text )
|
||
|
|
new_val.i18n = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
val.v = new_val;
|
||
|
|
this.set(deep_copy(this.val));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|