koel/resources/assets/js/components/screens/UserListScreen.vue

57 lines
1.6 KiB
Vue
Raw Normal View History

2022-04-15 14:24:30 +00:00
<template>
<section id="usersWrapper">
2022-07-16 15:44:45 +00:00
<ScreenHeader layout="collapsed">
2022-04-15 14:24:30 +00:00
Users
2022-12-02 16:17:37 +00:00
<ControlsToggle v-model="showingControls" />
2022-04-15 14:24:30 +00:00
2022-12-02 16:17:37 +00:00
<template #controls>
<BtnGroup v-if="showingControls || !isPhone" uppercased>
<Btn class="btn-add" green @click="showAddUserForm">
2022-12-02 16:17:37 +00:00
<icon :icon="faPlus" />
2022-04-15 14:24:30 +00:00
Add
2022-04-15 17:00:08 +00:00
</Btn>
</BtnGroup>
2022-04-15 14:24:30 +00:00
</template>
2022-04-15 17:00:08 +00:00
</ScreenHeader>
2022-04-15 14:24:30 +00:00
<div v-koel-overflow-fade class="main-scroll-wrap">
<ul class="users">
<li v-for="user in users" :key="user.id">
2022-12-02 16:17:37 +00:00
<UserCard :user="user" />
</li>
</ul>
2022-04-15 14:24:30 +00:00
</div>
</section>
</template>
2022-04-15 17:00:08 +00:00
<script lang="ts" setup>
2022-07-15 07:23:55 +00:00
import { faPlus } from '@fortawesome/free-solid-svg-icons'
2022-04-15 14:24:30 +00:00
import isMobile from 'ismobilejs'
2022-06-10 10:47:46 +00:00
import { defineAsyncComponent, onMounted, ref, toRef } from 'vue'
2022-04-15 14:24:30 +00:00
import { userStore } from '@/stores'
import { eventBus } from '@/utils'
import ScreenHeader from '@/components/ui/ScreenHeader.vue'
import ControlsToggle from '@/components/ui/ScreenControlsToggle.vue'
import UserCard from '@/components/user/UserCard.vue'
2022-04-21 18:39:18 +00:00
const Btn = defineAsyncComponent(() => import('@/components/ui/Btn.vue'))
2022-04-21 16:06:45 +00:00
const BtnGroup = defineAsyncComponent(() => import('@/components/ui/BtnGroup.vue'))
2022-04-15 14:24:30 +00:00
2022-04-23 22:04:16 +00:00
const users = toRef(userStore.state, 'users')
2022-04-15 17:00:08 +00:00
const isPhone = isMobile.phone
const showingControls = ref(false)
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
const showAddUserForm = () => eventBus.emit('MODAL_SHOW_ADD_USER_FORM')
2022-06-10 10:47:46 +00:00
onMounted(async () => await userStore.fetch())
2022-04-15 14:24:30 +00:00
</script>
<style lang="scss" scoped>
.users {
display: grid;
grid-gap: .7rem 1rem;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
2022-04-15 14:24:30 +00:00
}
</style>