356 lines
16 KiB
Vue
356 lines
16 KiB
Vue
<template>
|
|
<div class="container">
|
|
<h2>
|
|
<Icon v="atom-alt"/>
|
|
<T>nouns.headerLong</T>
|
|
</h2>
|
|
|
|
<section>
|
|
<T>nouns.intro</T>
|
|
|
|
<Share :title="$t('nouns.headerLong')"/>
|
|
</section>
|
|
|
|
<NounsExtra>
|
|
<details class="border mb-3" ref="dictionary">
|
|
<summary class="bg-light p-3" @click="loadNouns">
|
|
<h4 class="h5 d-inline">
|
|
<Icon v="book"/>
|
|
<T>nouns.dictionary</T>
|
|
</h4>
|
|
</summary>
|
|
<div class="border-top">
|
|
<Loading :value="nounsRaw">
|
|
<section v-if="$admin()" class="px-3">
|
|
<div class="alert alert-info">
|
|
<strong>{{ nounsCountApproved() }}</strong> <T>nouns.approved</T>,
|
|
<strong>{{ nounsCountPending() }}</strong> <T>nouns.pending</T>.
|
|
</div>
|
|
</section>
|
|
|
|
<section class="sticky-top">
|
|
<div class="input-group mb-3 bg-white">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">
|
|
<Icon v="filter"/>
|
|
</span>
|
|
</div>
|
|
<input class="form-control border-primary" v-model="filter" :placeholder="$t('crud.filterLong')" ref="filter"/>
|
|
<div class="input-group-append" v-if="filter">
|
|
<button class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
|
|
<Icon v="times"/>
|
|
</button>
|
|
</div>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-outline-success" @click="$refs.form.$el.scrollIntoView()">
|
|
<Icon v="plus-circle"/>
|
|
<T>nouns.submit.action</T>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="table-responsive">
|
|
<table :class="'table table-striped table-hover table-fixed-' + ($admin() ? 4 : 3)">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-nowrap">
|
|
<Icon v="mars"/>
|
|
<T>nouns.masculine</T>
|
|
</th>
|
|
<th class="text-nowrap">
|
|
<Icon v="venus"/>
|
|
<T>nouns.feminine</T>
|
|
</th>
|
|
<th class="text-nowrap">
|
|
<Icon v="neuter"/>
|
|
<T>nouns.neuter</T>
|
|
</th>
|
|
<th v-if="$admin()"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template v-if="visibleNouns().length">
|
|
<tr v-for="noun in visibleNouns()" :class="{'mark-left': !noun.approved}" :key="noun.id">
|
|
<td>
|
|
<ul class="list-singular">
|
|
<li v-for="w in noun.masc">{{ w }}</li>
|
|
</ul>
|
|
<ul class="list-plural">
|
|
<li v-for="w in noun.mascPl">{{ w }}</li>
|
|
</ul>
|
|
|
|
<small v-if="noun.base && nouns[noun.base]">
|
|
<p><strong><T>nouns.edited</T>:</strong></p>
|
|
<ul class="list-singular">
|
|
<li v-for="w in nouns[noun.base].masc">{{ w }}</li>
|
|
</ul>
|
|
<ul class="list-plural">
|
|
<li v-for="w in nouns[noun.base].mascPl">{{ w }}</li>
|
|
</ul>
|
|
</small>
|
|
|
|
<button v-if="!$admin()" class="btn btn-outline-primary btn-sm m-1 hover-show" @click="edit(noun)">
|
|
<Icon v="pen"/>
|
|
<T>nouns.edit</T>
|
|
</button>
|
|
</td>
|
|
<td>
|
|
<ul class="list-singular">
|
|
<li v-for="w in noun.fem">{{ w }}</li>
|
|
</ul>
|
|
<ul class="list-plural">
|
|
<li v-for="w in noun.femPl">{{ w }}</li>
|
|
</ul>
|
|
|
|
<small v-if="noun.base && nouns[noun.base]">
|
|
<p><strong><T>nouns.edited</T>:</strong></p>
|
|
<ul class="list-singular">
|
|
<li v-for="w in nouns[noun.base].fem">{{ w }}</li>
|
|
</ul>
|
|
<ul class="list-plural">
|
|
<li v-for="w in nouns[noun.base].femPl">{{ w }}</li>
|
|
</ul>
|
|
</small>
|
|
</td>
|
|
<td>
|
|
<ul class="list-singular">
|
|
<li v-for="w in noun.neutr">
|
|
<Declension :word="w"/>
|
|
</li>
|
|
</ul>
|
|
<ul class="list-plural">
|
|
<li v-for="w in noun.neutrPl">
|
|
<Declension :word="w" plural :singularOptions="noun.neutr"/>
|
|
</li>
|
|
</ul>
|
|
|
|
<small v-if="noun.base && nouns[noun.base]">
|
|
<p><strong><T>nouns.edited</T>:</strong></p>
|
|
<ul class="list-singular">
|
|
<li v-for="w in nouns[noun.base].neutr">{{ w }}</li>
|
|
</ul>
|
|
<ul class="list-plural">
|
|
<li v-for="w in nouns[noun.base].neutrPl">{{ w }}</li>
|
|
</ul>
|
|
</small>
|
|
</td>
|
|
<td v-if="$admin()">
|
|
<ul class="list-unstyled">
|
|
<li v-if="!noun.approved">
|
|
<button class="btn btn-success btn-sm m-1" @click="approve(noun)">
|
|
<Icon v="check"/>
|
|
<T>crud.approve</T>
|
|
</button>
|
|
</li>
|
|
<li v-else @click="hide(noun)">
|
|
<button class="btn btn-outline-secondary btn-sm m-1">
|
|
<Icon v="times"/>
|
|
<T>crud.hide</T>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button class="btn btn-outline-danger btn-sm m-1" @click="remove(noun)">
|
|
<Icon v="trash"/>
|
|
<T>crud.remove</T>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button class="btn btn-outline-primary btn-sm m-1" @click="edit(noun)">
|
|
<Icon v="pen"/>
|
|
<T>crud.edit</T>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<template v-else>
|
|
<tr>
|
|
<td :colspan="$admin() ? 4 : 3" class="text-center">
|
|
<Icon v="search"/>
|
|
<T>nouns.empty</T>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<Separator icon="plus"/>
|
|
|
|
<div class="px-3">
|
|
<NounSubmitForm ref="form"/>
|
|
</div>
|
|
</Loading>
|
|
</div>
|
|
</details>
|
|
</NounsExtra>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Noun } from "~/src/classes";
|
|
import { buildDict } from "../src/helpers";
|
|
import { head } from "../src/helpers";
|
|
import NounsExtra from "../data/nouns/NounsExtra.vue";
|
|
|
|
export default {
|
|
components: { NounsExtra },
|
|
data() {
|
|
return {
|
|
filter: '',
|
|
nounsRaw: undefined,
|
|
}
|
|
},
|
|
mounted() {
|
|
if (process.client) {
|
|
if (window.location.hash) {
|
|
const anchor = decodeURIComponent(window.location.hash.substr(1));
|
|
this.$nextTick(_ => {
|
|
const $anchor = document.getElementById(anchor);
|
|
if ($anchor) {
|
|
$anchor.scrollIntoView();
|
|
} else {
|
|
this.filter = anchor;
|
|
this.loadNouns();
|
|
this.$refs.dictionary.open = true;
|
|
this.$refs.dictionary.focus();
|
|
this.$refs.dictionary.scrollIntoView();
|
|
setTimeout(_ => {
|
|
this.$refs.dictionary.scrollIntoView();
|
|
}, 1000);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
async loadNouns() {
|
|
if (this.nounsRaw !== undefined) {
|
|
return;
|
|
}
|
|
this.nounsRaw = await this.$axios.$get(`/nouns/all`, { headers: this.$auth() });
|
|
},
|
|
edit(noun) {
|
|
this.$refs.form.edit(noun);
|
|
},
|
|
async approve(noun) {
|
|
await this.$axios.$post(`/nouns/approve/${noun.id}`, {}, { headers: this.$auth() });
|
|
if (noun.base) {
|
|
delete this.nouns[noun.base];
|
|
}
|
|
noun.approved = true;
|
|
noun.base = null;
|
|
this.$forceUpdate();
|
|
},
|
|
async hide(noun) {
|
|
await this.$axios.$post(`/nouns/hide/${noun.id}`, {}, { headers: this.$auth() });
|
|
noun.approved = false;
|
|
this.$forceUpdate();
|
|
},
|
|
async remove(noun) {
|
|
if (!confirm('Czy na pewno usunąć ten wpis?')) {
|
|
return false;
|
|
}
|
|
await this.$axios.$post(`/nouns/remove/${noun.id}`, {}, { headers: this.$auth() });
|
|
delete this.nouns[noun.id];
|
|
this.$forceUpdate();
|
|
},
|
|
visibleNouns() {
|
|
return Object.values(this.nouns).filter(n => n.matches(this.filter));
|
|
},
|
|
nounsCountApproved() {
|
|
return Object.values(this.nouns).filter(n => n.approved).length;
|
|
},
|
|
nounsCountPending() {
|
|
return Object.values(this.nouns).filter(n => !n.approved).length;
|
|
},
|
|
},
|
|
computed: {
|
|
nouns() {
|
|
if (this.nounsRaw === undefined) {
|
|
return {};
|
|
}
|
|
|
|
return buildDict(function* (that) {
|
|
const sorted = that.nounsRaw.sort((a, b) => {
|
|
if (a.approved && !b.approved) {
|
|
return 1;
|
|
}
|
|
if (!a.approved && b.approved) {
|
|
return -1;
|
|
}
|
|
return a.masc.toLowerCase().localeCompare(b.masc.toLowerCase());
|
|
});
|
|
for (let w of sorted) {
|
|
yield [w.id, new Noun(w)];
|
|
}
|
|
}, this);
|
|
},
|
|
},
|
|
watch: {
|
|
filter() {
|
|
if (process.client) {
|
|
if (this.filter) {
|
|
window.location.hash = this.filter;
|
|
} else {
|
|
history.pushState('', document.title, window.location.pathname + window.location.search);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
head() {
|
|
return head({
|
|
title: this.$t('nouns.headerLong'),
|
|
description: this.$t('nouns.description'),
|
|
banner: 'bannerNouns.png',
|
|
});
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "assets/style";
|
|
|
|
.list-singular {
|
|
padding-left: 0;
|
|
list-style: none;
|
|
li {
|
|
white-space: nowrap;
|
|
}
|
|
>li:before {
|
|
content: "⋅";
|
|
display: inline-block;
|
|
width: $fa-fw-width;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.list-plural {
|
|
padding-left: 0;
|
|
list-style: none;
|
|
li {
|
|
white-space: nowrap;
|
|
}
|
|
>li:before {
|
|
content: "⁖";
|
|
display: inline-block;
|
|
width: $fa-fw-width;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.mark-left {
|
|
border-left: 3px solid $primary;
|
|
}
|
|
|
|
tr {
|
|
.hover-show {
|
|
opacity: 0;
|
|
}
|
|
&:hover .hover-show {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|