Skip to content

Commit

Permalink
Improved admin dictionaries table
Browse files Browse the repository at this point in the history
  • Loading branch information
@simjanos-dev
simjanos-dev committed May 23, 2024
1 parent 6e9f6f9 commit 55036c9
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 253 deletions.
301 changes: 96 additions & 205 deletions resources/js/components/Admin/AdminDictionarySettings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
content="An error has occurred while deleting the dictionary."
/>

<!-- Dictionaries -->
<!-- Dictionaries list -->
<div class="d-flex subheader mt-4 mb-4 px-2 ">
Dictionaries
<v-spacer/>
Expand All @@ -39,211 +39,68 @@
<span id="import-button-text-short">Import</span>
</v-btn>
</div>
<v-simple-table id="dictionaries" class="no-hover border rounded-lg">
<thead>
<tr>
<th class="text-center">Name</th>
<th class="text-center">Records</th>
<th class="text-center">Database name</th>
<th class="text-center">Source language</th>
<th class="text-center">Target language</th>
<th class="text-center">Enabled</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(dictionary, index) in dictionaries" :key="index">
<!-- Name -->
<td class="text-center">{{ dictionary.name }}</td>

<!-- Records -->
<td class="text-center">{{ dictionary.records == '-' ? '-' : formatNumber(dictionary.records) }}</td>

<!-- Database table name -->
<td class="text-center">{{ dictionary.database_table_name }}</td>

<!-- Source language -->
<td>
<v-img class="mx-auto border" :src="'/images/flags/' + dictionary.source_language + '.png'" max-width="43" height="28" />
</td>

<!-- Target language -->
<td>
<v-img class="mx-auto border" :src="'/images/flags/' + dictionary.target_language + '.png'" max-width="43" height="28" />
</td>

<!-- Enabled/disabled -->
<td>
<div class="d-flex justify-center">
<v-switch
color="primary"
v-model="dictionaries[index].enabled"
@change="saveDictionary(index)"
></v-switch>
</div>
</td>

<!-- Actions -->
<td class="text-center">
<v-btn
icon
title="Edit"
@click="editDictionary(dictionary.id)"
>
<v-icon>mdi-pencil</v-icon>
</v-btn>
<v-btn
v-if="dictionary.imported === '1'"
icon
title="Delete"
color="error"
@click="deleteDictionary(dictionary.name, dictionary.database_table_name)"
>
<v-icon>mdi-delete</v-icon>
</v-btn>
</td>
</tr>
</tbody>
</v-simple-table>


<!-- Dictionaries mobile -->
<div id="dictionaries-mobile" class="div border rounded-lg">
<v-card
v-for="(dictionary, index) in dictionaries" :key="index"
:class="{'expansion-card': true, 'open': dictionary.expanded}"
elevation="0"
<v-card outlined class="rounded-lg pa-2 pb-0">
<v-card-title>
<v-text-field
v-model="dictionaryTableFilter"
append-icon="mdi-magnify"
label="Search"
filled
dense
hide-details
single-line
rounded
></v-text-field>
</v-card-title>

<v-data-table
class="ma-4 mb-0 no-hover"
:headers="dictionaryTableHeaders"
:items="dictionaries"
:loading="loading"
:search="dictionaryTableFilter"
>
<v-card-title class="expansion-card-title py-3 px-0" @click="toggleExpansion(index)">
<v-img class="mx-4 border" :src="'/images/flags/' + dictionary.source_language + '.png'" max-width="43" height="28" />
{{ dictionary.name }}
<v-spacer />
<v-icon class="mr-4">{{ dictionary.expanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
</v-card-title>
<v-card-text class="expansion-card-content">
<v-simple-table class="no-lines no-hover my-2">
<tbody>
<!-- Name -->
<tr>
<td>Name:</td>
<td class="text-center">{{ dictionary.name }}</td>
</tr>

<!-- Color -->
<tr>
<td>Color:</td>
<td>
<v-menu
v-model="dictionary.colorPickerMobile"
width="290px"
offset-y
nudge-top="-10px"
right
:close-on-content-click="false"
class="bg-white"
>

<template v-slot:activator="{ on, attrs }">
<v-card
class="border mx-auto"
outlined
:color="dictionary.color"
width="48px"
height="26px"
@click="dictionary.colorPickerMobile = true;"
></v-card>
</template>

<v-color-picker hide-inputs v-model="dictionary.tempColor" />
<div class="bg-white w-full d-flex">
<v-spacer />
<v-btn
rounded
small
text
class="mt-2"
@click="dictionary.colorPickerMobile = false;"
>Cancel</v-btn>
<v-btn
rounded
small
class="ma-2"
color="primary"
@click="saveColor(index)"
>Save</v-btn>
</div>
</v-menu>
</td>
</tr>

<!-- Records -->
<tr>
<td>Records</td>
<td class="text-center">{{ dictionary.records == '-' ? '-' : formatNumber(dictionary.records) }}</td>
</tr>

<!-- Database table name -->
<tr>
<td>Database table name</td>
<td class="text-center">{{ dictionary.database_table_name }}</td>
</tr>

<!-- Source language -->
<tr>
<td>Source language</td>
<td><v-img class="mx-auto border" :src="'/images/flags/' + dictionary.source_language + '.png'" max-width="43" height="28" /> </td>
</tr>

<!-- Target language -->
<tr>
<td>Target language</td>
<td><v-img class="mx-auto border" :src="'/images/flags/' + dictionary.target_language + '.png'" max-width="43" height="28" /> </td>
</tr>

<!-- Enabled/disabled -->
<tr>
<td>Enabled</td>
<td>
<div class="d-flex justify-center">
<v-switch
color="primary"
v-model="dictionaries[index].enabled"
@change="saveDictionary(index)"
></v-switch>
</div>
</td>
</tr>

<!-- Actions -->
<tr>
<td>Actions</td>
<td class="text-center">
<v-menu offset-y class="rounded-lg">
<template v-slot:activator="{ on, attrs }">
<v-btn rounded depressed v-bind="attrs" v-on="on">
Actions
<v-icon v-if="attrs['aria-expanded'] === 'true'">mdi-chevron-up</v-icon>
<v-icon v-if="attrs['aria-expanded'] !== 'true'">mdi-chevron-down</v-icon>
</v-btn>
</template>
<v-btn class="menu-button" tile color="white" @click="editDictionary(dictionary.id)">Edit</v-btn>
<v-btn
class="menu-button"
tile
color="white"
@click="deleteDictionary(dictionary.name, dictionary.database_table_name)"
v-if="dictionary.imported === '1'"
>
Delete
</v-btn>
</v-menu>
</td>
</tr>
</tbody>
</v-simple-table>
</v-card-text>
</v-card>
</div>
<!-- Source language -->
<template v-slot:item.source_language="{ item }">
<v-img class="mx-auto border" :src="'/images/flags/' + item.source_language + '.png'" max-width="43" height="28" />
</template>

<!-- Target language -->
<template v-slot:item.target_language="{ item }">
<v-img class="mx-auto border" :src="'/images/flags/' + item.target_language + '.png'" max-width="43" height="28" />
</template>

<!-- Enabled -->
<template v-slot:item.enabled="{ item, index }">
<v-switch
color="primary"
v-model="item.enabled"
@change="saveDictionary(index)"
></v-switch>
</template>

<!-- Actions -->
<template v-slot:item.actions="{ item }">
<v-btn
icon
title="Edit"
@click="editDictionary(item.id)"
>
<v-icon>mdi-pencil</v-icon>
</v-btn>
<v-btn
v-if="item.imported === '1'"
icon
title="Delete"
color="error"
@click="deleteDictionary(item.name, item.database_table_name)"
>
<v-icon>mdi-delete</v-icon>
</v-btn>
</template>
</v-data-table>
</v-card>
</div>
</template>

Expand All @@ -252,6 +109,7 @@
export default {
data: function() {
return {
loading: true,
dictionaries: [],
importDialog: false,
deleteDialog: {
Expand All @@ -265,7 +123,38 @@
},
errorDialog: {
active: false
}
},
dictionaryTableFilter: '',
dictionaryTableHeaders: [
{
text: 'Name',
value: 'name',
},
{
text: 'Records',
value: 'records',
},
{
text: 'Database',
value: 'database_table_name',
},
{
text: 'Source language',
value: 'source_language',
},
{
text: 'Target language',
value: 'target_language',
},
{
text: 'Enabled',
value: 'enabled',
},
{
text: 'Actions',
value: 'actions',
},
]
}
},
props: {
Expand Down Expand Up @@ -321,7 +210,9 @@
});
},
loadDictionaries() {
this.loading = true;
axios.get('/dictionaries/get').then((response) => {
this.loading = false;
let data = response.data;
for (let dictionaryIndex = 0; dictionaryIndex < data.length; dictionaryIndex ++) {
Expand Down
2 changes: 1 addition & 1 deletion resources/js/components/Admin/AdminSettingsLayout.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<v-container>
<v-tabs v-model="tab" background-color="white" class="rounded-lg border overflow-hidden" @change="tabChanged">
<v-tabs v-model="tab" background-color="foreground" class="rounded-lg border overflow-hidden" @change="tabChanged">
<v-tab>Users</v-tab>
<v-tab>Languages</v-tab>
<v-tab>Dictionaries</v-tab>
Expand Down
1 change: 1 addition & 0 deletions resources/js/components/Home/PatchNotes.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
<li>Added support for using remote MySQL server.</li>
<li>Added an import option for e-books that lets users order the chapters based on the e-book's spine metadata. In some rare cases, this will fix incorrect chapter order for imported e-books.</li>
<li>Added an option to set preferred hover vocabulary position. Now it can appear both above or below the hovered words based on the selected setting.</li>
<li>Added filtering, sorting and pagination to the admin dictionary settings page.</li>
</ul>

<b>Bug fixes:</b>
Expand Down
Loading

0 comments on commit 55036c9

Please sign in to comment.