forked from DebaucheryLibrarian/traxxx
List alerts in profile
This commit is contained in:
DebaucheryLibrarian
249
assets/components/users/alert.vue
Normal file
249
assets/components/users/alert.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<div class="alert">
|
||||
<div class="alert-section alert-header">
|
||||
<div class="alert-targets">
|
||||
<Icon
|
||||
v-if="alert.notify"
|
||||
icon="bell2"
|
||||
class="alert-action"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-if="alert.email"
|
||||
icon="envelop"
|
||||
class="alert-action"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-if="alert.stashes?.length > 0"
|
||||
v-tooltip="alert.stashes.map(stash => stash.name).join()"
|
||||
icon="heart7"
|
||||
class="alert-action"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span class="header-actions noselect">
|
||||
<Icon
|
||||
v-if="isMe"
|
||||
icon="bin"
|
||||
class="alert-remove"
|
||||
@click.native="showRemoveAlert = true"
|
||||
/>
|
||||
|
||||
<RemoveAlert
|
||||
v-if="showRemoveAlert"
|
||||
:alert="alert"
|
||||
@close="removeAlert"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="alert-triggers">
|
||||
<div
|
||||
v-if="alert.actors?.length > 0"
|
||||
class="alert-section alert-trigger"
|
||||
>
|
||||
<h4
|
||||
v-if="alert.actors.length > 1"
|
||||
class="alert-heading"
|
||||
>Actors</h4>
|
||||
|
||||
<h4
|
||||
v-else
|
||||
class="alert-heading"
|
||||
>Actor</h4>
|
||||
|
||||
<ul class="alert-actors nolist">
|
||||
<li
|
||||
v-for="actor in alert.actors"
|
||||
:key="`actor-${actor.id}`"
|
||||
class="alert-actor"
|
||||
>
|
||||
<ActorPreview
|
||||
:actor="actor"
|
||||
:alert="alert"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="alert.tags?.length > 0"
|
||||
class="alert-section alert-trigger"
|
||||
>
|
||||
<h4
|
||||
v-if="alert.tags.length > 1"
|
||||
class="alert-heading"
|
||||
>Tags</h4>
|
||||
|
||||
<h4
|
||||
v-else
|
||||
class="alert-heading"
|
||||
>Tag</h4>
|
||||
|
||||
<ul class="alert-tags nolist">
|
||||
<li
|
||||
v-for="tag in alert.tags"
|
||||
:key="`tag-${tag.id}`"
|
||||
><router-link
|
||||
:to="`/tag/${tag.slug}`"
|
||||
class="tag nolink"
|
||||
>{{ tag.name }}</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="alert-section alert-trigger">
|
||||
<h4 class="alert-heading">Channel</h4>
|
||||
|
||||
<Entity
|
||||
v-if="alert.entity"
|
||||
:entity="alert.entity"
|
||||
class="entity"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ActorPreview from '../actors/preview.vue';
|
||||
import RemoveAlert from '../alerts/remove.vue';
|
||||
import Entity from '../entities/tile.vue';
|
||||
|
||||
async function removeAlert(removed) {
|
||||
this.showRemoveAlert = false;
|
||||
|
||||
if (removed) {
|
||||
this.$emit('remove');
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ActorPreview,
|
||||
Entity,
|
||||
RemoveAlert,
|
||||
},
|
||||
props: {
|
||||
alert: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
isMe: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['remove'],
|
||||
data() {
|
||||
return {
|
||||
showRemoveAlert: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
removeAlert,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.alert {
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 3px var(--darken-weak);
|
||||
}
|
||||
|
||||
.alert-header {
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
}
|
||||
|
||||
.alert-section {
|
||||
display: inline-block;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.alert-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
|
||||
.alert-action {
|
||||
padding: .5rem;
|
||||
fill: var(--shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.alert-triggers {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.alert-heading {
|
||||
display: block;
|
||||
padding: 0 .5rem .5rem 0;
|
||||
margin: 0;
|
||||
color: var(--shadow-strong);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.alert-more {
|
||||
flex-shrink: 0;
|
||||
margin: 0 0 0 .5rem;
|
||||
color: var(--shadow);
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.alert-remove {
|
||||
height: auto;
|
||||
padding: 0 .5rem 0 .75rem;
|
||||
fill: var(--shadow);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
fill: var(--shadow-strong);
|
||||
}
|
||||
}
|
||||
|
||||
.alert-triggers {
|
||||
dislay: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.alert-trigger {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.alert-actors,
|
||||
.alert-tags {
|
||||
display: flex;
|
||||
grid-gap: .5rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: var(--shadow-strong);
|
||||
padding: .5rem;
|
||||
border: solid 1px var(--shadow-hint);
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
border: solid 1px var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.entity {
|
||||
width: 10rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -84,7 +84,7 @@
|
||||
<script>
|
||||
import ActorPreview from '../actors/preview.vue';
|
||||
import ScenePreview from '../releases/scene-preview.vue';
|
||||
import RemoveStash from '../stashes/remove-stash.vue';
|
||||
import RemoveStash from '../stashes/remove.vue';
|
||||
import Toggle from '../form/toggle.vue';
|
||||
|
||||
async function publishStash(isPublic) {
|
||||
|
||||
@@ -43,18 +43,61 @@
|
||||
<Icon icon="plus2" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<AddStash
|
||||
v-if="showAddStash"
|
||||
@close="closeAddStash"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<AddStash
|
||||
v-if="showAddStash"
|
||||
@close="closeAddStash"
|
||||
/>
|
||||
<section
|
||||
v-if="user.alerts?.length > 0"
|
||||
class="section"
|
||||
>
|
||||
<div class="section-header">
|
||||
<h3 class="section-heading">Alerts</h3>
|
||||
|
||||
<Icon
|
||||
icon="plus3"
|
||||
class="header-add"
|
||||
@click="showAddAlert = true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ul class="section-body alerts nolist">
|
||||
<li
|
||||
v-for="alert in user.alerts"
|
||||
:key="`alert-${alert.id}`"
|
||||
class="alert"
|
||||
>
|
||||
<Alert
|
||||
:alert="alert"
|
||||
:is-me="isMe"
|
||||
@remove="() => fetchUser()"
|
||||
/>
|
||||
</li>
|
||||
|
||||
<li
|
||||
class="alerts-add"
|
||||
@click="showAddAlert = true"
|
||||
>
|
||||
<Icon icon="plus2" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<AddAlert
|
||||
v-if="showAddAlert"
|
||||
@close="closeAddAlert"
|
||||
>Alert</AddAlert>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Stash from './stash.vue';
|
||||
import AddStash from '../stashes/add-stash.vue';
|
||||
import Alert from './alert.vue';
|
||||
import AddStash from '../stashes/add.vue';
|
||||
import AddAlert from '../alerts/add.vue';
|
||||
|
||||
async function fetchUser() {
|
||||
this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
|
||||
@@ -71,13 +114,23 @@ async function closeAddStash(addedStash) {
|
||||
}
|
||||
}
|
||||
|
||||
async function closeAddAlert(addedAlert) {
|
||||
this.showAddAlert = false;
|
||||
|
||||
if (addedAlert) {
|
||||
await this.fetchUser();
|
||||
}
|
||||
}
|
||||
|
||||
async function mounted() {
|
||||
await this.fetchUser();
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddAlert,
|
||||
AddStash,
|
||||
Alert,
|
||||
Stash,
|
||||
},
|
||||
data() {
|
||||
@@ -88,10 +141,12 @@ export default {
|
||||
isMe: false,
|
||||
pageTitle: null,
|
||||
showAddStash: false,
|
||||
showAddAlert: false,
|
||||
};
|
||||
},
|
||||
mounted,
|
||||
methods: {
|
||||
closeAddAlert,
|
||||
closeAddStash,
|
||||
fetchUser,
|
||||
},
|
||||
@@ -122,7 +177,8 @@ export default {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.stashes {
|
||||
.stashes,
|
||||
.alerts {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-rows: 15fr;
|
||||
@@ -162,7 +218,8 @@ export default {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.stashes-add {
|
||||
.stashes-add,
|
||||
.alerts-add {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -186,7 +243,8 @@ export default {
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-kilo) {
|
||||
.stashes {
|
||||
.stashes,
|
||||
.alerts {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user