Skip to content

Commit

Permalink
feat(Premium pages): add and organize info
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlejandroAkbal
AlejandroAkbal committed Sep 24, 2022
1 parent d49145b commit bbf608f
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 90 deletions.
91 changes: 50 additions & 41 deletions pages/premium/custom-boorus.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,45 +8,45 @@
style="border-spacing: 0.25em"
>
<thead>
<tr>
<th class="text-lg font-normal text-gray-200">Domain</th>
<th class="text-lg font-normal text-gray-200">Type</th>
<th class="text-lg font-normal text-gray-200">NSFW</th>
<th class="text-lg font-normal text-gray-200">Config</th>
</tr>
<tr>
<th class="text-lg font-normal text-gray-200">Domain</th>
<th class="text-lg font-normal text-gray-200">Type</th>
<th class="text-lg font-normal text-gray-200">NSFW</th>
<th class="text-lg font-normal text-gray-200">Config</th>
</tr>
</thead>

<tbody class="text-gray-300">
<template v-if="getCustomBoorus.length">
<tr v-for="booru in getCustomBoorus" :key="booru.domain">
<td @click="removeCustomBooru(booru)">
{{ booru.domain }}
</td>
<template v-if="getCustomBoorus.length">
<tr v-for="booru in getCustomBoorus" :key="booru.domain">
<td @click="removeCustomBooru(booru)">
{{ booru.domain }}
</td>

<td @click="copyBooruToForm(booru)">
{{ booru.type }}
</td>
<td @click="copyBooruToForm(booru)">
{{ booru.type }}
</td>

<td>{{ booru.nsfw }}</td>
<td>{{ booru.nsfw }}</td>

<td>{{ booru.config !== null }}</td>
</tr>
</template>
<td>{{ booru.config !== null }}</td>
</tr>
</template>

<!-- No boorus -->
<template v-else>
<tr>
<td class="text-center" colspan="999">
There are no custom boorus
</td>
</tr>
</template>
<!-- No boorus -->
<template v-else>
<tr>
<td class="text-center" colspan="999">
There are no custom boorus
</td>
</tr>
</template>
</tbody>
</table>
</div>

<p class="p-2 text-xs text-center text-gray-300">
Click on the `domain` to remove. Click on the `type` to copy.
Click on the `domain` to remove. Click on the `type` to copy
</p>
</div>

Expand All @@ -59,7 +59,7 @@
@submit.prevent="addFormBooruToCustomBoorus"
>
<!-- Domain -->
<label class="space-y-1">
<label class="space-y-2">
<p class="text-gray-200">Domain</p>

<input
Expand All @@ -79,6 +79,12 @@
required
type="text"
/>

<p class="text-xs text-gray-300">
Not the URL, the domain
<br>
Use `example.com` not `http://example.com/index.php`
</p>
</label>

<!-- Type -->
Expand Down Expand Up @@ -133,7 +139,10 @@

<!-- Configuration -->
<label class="flex-auto space-y-1">
<p class="text-gray-200">Configuration</p>
<p class="text-gray-200">
Configuration
<span class="italic text-sm">(Optional)</span>
</p>

<textarea
v-model="formBooru.config"
Expand Down Expand Up @@ -191,8 +200,8 @@ export default {
domain: null,
type: null,
nsfw: true,
config: null,
},
config: null
}
}
},
Expand All @@ -203,14 +212,14 @@ export default {
{
hid: 'description',
name: 'description',
content: 'Add more Boorus.',
},
],
content: 'Add more Boorus.'
}
]
}
},
computed: {
...mapGetters('user', ['getCustomBoorus']),
...mapGetters('user', ['getCustomBoorus'])
},
methods: {
Expand All @@ -230,15 +239,15 @@ export default {
operation: 'add',
value: {
...this.formBooru,
config: parsedConfig,
},
config: parsedConfig
}
})
},
removeCustomBooru(booruObj) {
this.customBoorusManager({
operation: 'remove',
value: booruObj,
value: booruObj
})
},
Expand All @@ -248,9 +257,9 @@ export default {
domain: booru.domain,
type: booru.type,
nsfw: booru.nsfw,
config: JSON.stringify(booru.config),
config: JSON.stringify(booru.config)
}
},
},
}
}
}
</script>
98 changes: 49 additions & 49 deletions pages/premium/tag-collections.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,45 +8,45 @@
style="border-spacing: 0.25em"
>
<thead>
<tr>
<th class="text-lg font-normal text-gray-200">Name</th>
<th class="text-lg font-normal text-gray-200">Tags</th>
</tr>
<tr>
<th class="text-lg font-normal text-gray-200">Name</th>
<th class="text-lg font-normal text-gray-200">Tags</th>
</tr>
</thead>

<tbody class="text-gray-300 truncate">
<template v-if="getTagCollections.length">
<tr
v-for="tagCollection in getTagCollections"
:key="tagCollection.name"
<template v-if="getTagCollections.length">
<tr
v-for="tagCollection in getTagCollections"
:key="tagCollection.name"
>
<td @click="deleteTagCollection(tagCollection)">
{{ tagCollection.name }}
</td>

<td
class="text-sm"
@click="copyTagCollectionToFormCollection(tagCollection)"
>
<td @click="deleteTagCollection(tagCollection)">
{{ tagCollection.name }}
</td>

<td
class="text-sm"
@click="copyTagCollectionToFormCollection(tagCollection)"
>
{{ tagCollection.tags.join(', ') }}
</td>
</tr>
</template>

<!-- No tag collections -->
<template v-else>
<tr>
<td class="text-center" colspan="999">
There are no custom tag collections
</td>
</tr>
</template>
{{ tagCollection.tags.join(', ') }}
</td>
</tr>
</template>

<!-- No tag collections -->
<template v-else>
<tr>
<td class="text-center" colspan="999">
There are no custom tag collections
</td>
</tr>
</template>
</tbody>
</table>
</div>

<p class="p-2 text-xs text-center text-gray-300">
Click on the `name` to remove. Click on the `tags` to copy.
Click on the `name` to remove. Click on the `tags` to copy
</p>
</div>

Expand All @@ -64,10 +64,10 @@

<input
v-model="formTagCollection.name"
type="text"
name="tagCollectionName"
class="block p-1 text-gray-300 outline-none border-util bg-darkGray-700 focus:focus-util"
name="tagCollectionName"
required
type="text"
/>
</label>

Expand All @@ -79,19 +79,19 @@
v-model="formTagCollection.tags"
class="block w-full p-1 text-gray-300 outline-none bg-darkGray-700 border-util focus:focus-util"
name="tagCollectionTags"
rows="3"
required
rows="3"
spellcheck="false"
/>

<p class="p-2 text-xs italic text-right text-gray-300">
Separate tags with spaced commas (", ").
<p class="p-2 text-xs text-gray-300">
Separate tags with spaced commas: `, `
</p>
</label>

<button
type="submit"
class="w-full px-2 py-1 tracking-wide rounded-full bg-gradient-to-r from-primary-400 to-accent-400 focus:focus-util"
type="submit"
>
Add
</button>
Expand All @@ -100,15 +100,15 @@
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { mapActions, mapGetters } from 'vuex'
export default {
data() {
return {
formTagCollection: {
name: null,
tags: null,
},
tags: null
}
}
},
Expand All @@ -119,14 +119,14 @@ export default {
{
hid: 'description',
name: 'description',
content: 'Create collections of tags.',
},
],
content: 'Create collections of tags.'
}
]
}
},
computed: {
...mapGetters('user', ['getTagCollections']),
...mapGetters('user', ['getTagCollections'])
},
methods: {
Expand All @@ -137,25 +137,25 @@ export default {
operation: 'add',
value: {
name: this.formTagCollection.name,
tags: this.formTagCollection.tags.split(', '),
},
tags: this.formTagCollection.tags.split(', ')
}
})
},
deleteTagCollection(tagCollection) {
this.customTagCollectionsManager({
operation: 'remove',
value: tagCollection,
value: tagCollection
})
},
copyTagCollectionToFormCollection(tagCollection) {
// Clone as a weird fix so Vuex does not crash
this.formTagCollection = {
name: tagCollection.name,
tags: tagCollection.tags.join(', '),
tags: tagCollection.tags.join(', ')
}
},
},
}
}
}
</script>

0 comments on commit bbf608f

Please sign in to comment.