Skip to content

Commit

Permalink
Sketch out Levels Card
Browse files Browse the repository at this point in the history
  • Loading branch information
@ingalls
ingalls committed Sep 14, 2023
1 parent f1d6a6e commit b31467a
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 152 deletions.
2 changes: 1 addition & 1 deletion api/web/src/components/Profile.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<div class='ms-auto btn-list'>
<button
v-if='auth && auth.access === "admin"'
v-if='auth && auth.access === "admin" && $route.name === "ProfileDefault"'
@click='$router.push(`/profile/admin`)'
class='btn btn-primary'
>Admin</button>
Expand Down
2 changes: 1 addition & 1 deletion api/web/src/components/profile/ProfileAdmin.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div>
<div class='row row-cards'>
<div class='col-12'>
<AdminActions
v-if='profile.access === "admin"'
Expand Down
76 changes: 38 additions & 38 deletions api/web/src/components/profile/admin/AdminActions.vue
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,45 @@
<template>
<div class='col col--12 grid'>
<div class='col col--4'>
<button :disabled='!unlocked || done.fabric' @click='fabric' class='btn btn--stroke round' :class='{
"color-gray": !done.fabric,
"color-green": done.fabric
}'>
Refresh Fabric
<div class='card'>
<div class='col col--4'>
<button :disabled='!unlocked || done.fabric' @click='fabric' class='btn btn--stroke round' :class='{
"color-gray": !done.fabric,
"color-green": done.fabric
}'>
Refresh Fabric

<div v-if='loading.fabric' class='loading loading--s ml12 mt3 fr'></div>
<div v-else-if='done.fabric' class='ml12 fr mt6'><svg class='icon'><use xlink:href='#icon-check'/></svg></div>
</button>
</div>
<div class='col col--4'>
<button :disabled='!unlocked || done.cache' @click='clear' class='btn btn--stroke round' :class='{
"color-gray": !done.cache,
"color-green": done.cache
}'>
Clear Cache
<div v-if='loading.cache' class='loading loading--s ml12 mt3 fr'></div>
<div v-else-if='done.cache' class='ml12 fr mt6'><svg class='icon'><use xlink:href='#icon-check'/></svg></div>
</button>
</div>
<div class='col col--4'>
<button :disabled='!unlocked || done.collections' @click='collections' class='btn btn--stroke round' :class='{
"color-gray": !done.collections,
"color-green": done.collections
}'>
Refresh Collections
<div v-if='loading.collections' class='loading loading--s ml12 mt3 fr'></div>
<div v-else-if='done.collections' class='ml12 fr mt6'><svg class='icon'><use xlink:href='#icon-check'/></svg></div>
</button>
</div>
<div v-if='loading.fabric' class='loading loading--s ml12 mt3 fr'></div>
<div v-else-if='done.fabric' class='ml12 fr mt6'><svg class='icon'><use xlink:href='#icon-check'/></svg></div>
</button>
</div>
<div class='col col--4'>
<button :disabled='!unlocked || done.cache' @click='clear' class='btn btn--stroke round' :class='{
"color-gray": !done.cache,
"color-green": done.cache
}'>
Clear Cache
<div v-if='loading.cache' class='loading loading--s ml12 mt3 fr'></div>
<div v-else-if='done.cache' class='ml12 fr mt6'><svg class='icon'><use xlink:href='#icon-check'/></svg></div>
</button>
</div>
<div class='col col--4'>
<button :disabled='!unlocked || done.collections' @click='collections' class='btn btn--stroke round' :class='{
"color-gray": !done.collections,
"color-green": done.collections
}'>
Refresh Collections
<div v-if='loading.collections' class='loading loading--s ml12 mt3 fr'></div>
<div v-else-if='done.collections' class='ml12 fr mt6'><svg class='icon'><use xlink:href='#icon-check'/></svg></div>
</button>
</div>

<div class='col col--12 clearfix mt6'>
<label class='switch-container fr'>
<p class='mr12'>Unlock Actions</p>
<input type='checkbox' v-model='unlocked'/>
<div class='switch switch--gray'></div>
</label>
</div>
<div class='col col--12 clearfix mt6'>
<label class='switch-container fr'>
<p class='mr12'>Unlock Actions</p>
<input type='checkbox' v-model='unlocked'/>
<div class='switch switch--gray'></div>
</label>
</div>
</div>
</template>

<script>
Expand Down
217 changes: 105 additions & 112 deletions api/web/src/components/profile/admin/AdminOverrides.vue
View file
Original file line number Diff line number Diff line change
@@ -1,138 +1,125 @@
<template>
<div class='col col--12 grid pt24'>
<div class='col col--12 grid border-b border--gray-light pt24'>
<div class='col col--12'>
<h2 class='txt-h4 ml12 pb12 fl'>
<span class='bg-red-faint color-red round inline-block px6 py3 txt-xs txt-bold'>Admin</span>
Level Overrides:
</h2>

<div class='fr'>
<button @click='showFilter = !showFilter' class='btn round btn--stroke color-gray mr12'>
<svg v-if='!showFilter' class='icon'><use href='#icon-search'/></svg>
<svg v-else class='icon'><use href='#icon-close'/></svg>
</button>
<div class='card'>
<div class='card-header d-flex'>
<h2 class='card-title'>Level Overrides</h2>

<button @click='addLevel' :disabled='add' class='btn round btn--stroke color-gray color-green-on-hover mr12'>
<svg class='icon'><use xlink:href='#icon-plus'/></svg>
</button>
<div class='ms-auto btn-list'>
<SearchIcon @click='showFilter = true' v-if='!showFilter' class='cursor-pointer'/>
<XIcon @click='showFilter = false' v-else class='cursor-pointer'/>

<button @click='refresh' class='btn round btn--stroke color-gray'>
<svg class='icon'><use xlink:href='#icon-refresh'/></svg>
</button>
</div>
</div>
</div>
<PlusIcon @click='addLevel' :disabled='add' class='cursor-pointer'/>

<template v-if='showFilter'>
<div class='col col--12 grid border border--gray px6 py6 round mb12 relative'>
<div class='absolute triangle--u triangle color-gray' style='top: -12px; right: 75px;'></div>
<RefreshIcon @click='refresh' class='cursor-pointer'/>
</div>
</div>

<div class='col col--6 px6'>
<label>Username/Email Filter</label>
<input v-model='filter.pattern' class='input' placeholder='john-doe' />
</div>
<div class='col col--3 px6'>
<label>Access</label>
<div class='w-full select-container'>
<select v-model='filter.access' class='select select--stroke'>
<option>all</option>
<option>disabled</option>
<option>admin</option>
<option>user</option>
</select>
<div class='select-arrow'></div>
</div>
</div>
<div class='col col--3 px6'>
<label>Level</label>
<div class='w-full select-container'>
<select v-model='filter.level' class='select select--stroke'>
<option>all</option>
<option>basic</option>
<option>backer</option>
<option>sponsor</option>
</select>
<div class='select-arrow'></div>
</div>
<template v-if='showFilter'>
<div class='card-body row'>
<div class='col-6'>
<label>Username/Email Filter</label>
<input v-model='filter.pattern' class='input' placeholder='john-doe' />
</div>
<div class='col-3'>
<label>Access</label>
<div class='w-full select-container'>
<select v-model='filter.access' class='select select--stroke'>
<option>all</option>
<option>disabled</option>
<option>admin</option>
<option>user</option>
</select>
<div class='select-arrow'></div>
</div>
</div>
</template>

<div v-if='add' class='col col--12 grid border border--gray-light round px12 py12 my6 grid'>
<div class='col col--12 pb6'>
<h2 class='txt-bold fl'>New Level Override</h2>
<button @click='add = false' class='fr btn round btn--s btn--stroke btn--gray'>
<svg class='icon'><use xlink:href='#icon-close'/></svg>
</button>
<div class='col-3'>
<label>Level</label>
<div class='w-full select-container'>
<select v-model='filter.level' class='select select--stroke'>
<option>all</option>
<option>basic</option>
<option>backer</option>
<option>sponsor</option>
</select>
<div class='select-arrow'></div>
</div>
</div>
</div>
</template>

<div v-if='add' class='col col--12 grid border border--gray-light round px12 py12 my6 grid'>
<div class='col col--12 pb6'>
<h2 class='txt-bold fl'>New Level Override</h2>
<button @click='add = false' class='fr btn round btn--s btn--stroke btn--gray'>
<svg class='icon'><use xlink:href='#icon-close'/></svg>
</button>
</div>

<div class='col col--12 grid grid--gut12'>
<div class='col col--9'>
<label>Email RegExp Pattern </label>
<input class='input' v-model='newLevel.pattern'/>
</div>
<div class='col col--12 grid grid--gut12'>
<div class='col col--9'>
<label>Email RegExp Pattern </label>
<input class='input' v-model='newLevel.pattern'/>
</div>

<div class='col col--3'>
<label>Account Level</label>
<div class='w-full select-container'>
<select v-model='newLevel.level' class='select select--stroke'>
<option>basic</option>
<option>backer</option>
<option>sponsor</option>
</select>
<div class='select-arrow'></div>
</div>
<div class='col col--3'>
<label>Account Level</label>
<div class='w-full select-container'>
<select v-model='newLevel.level' class='select select--stroke'>
<option>basic</option>
<option>backer</option>
<option>sponsor</option>
</select>
<div class='select-arrow'></div>
</div>
</div>

<div class='col col--12 clearfix'>
<div class='col col--2 fr'>
<button @click='createLevel' class='my12 w-full btn btn--stroke round color-gray color-green-on-hover'>
<svg class='fl icon mt6'><use href='#icon-check'/></svg><span>Save</span>
</button>
</div>
<div class='col col--12 clearfix'>
<div class='col col--2 fr'>
<button @click='createLevel' class='my12 w-full btn btn--stroke round color-gray color-green-on-hover'>
<svg class='fl icon mt6'><use href='#icon-check'/></svg><span>Save</span>
</button>
</div>
</div>
</div>
</div>

<template v-if='loading'>
<div class='flex flex--center-main w-full py24'>
<div class='loading'></div>
</div>
</template>
<template v-else-if='!levels.length'>
<div class='flex flex--center-main w-full'>
<div class='py24'>
<svg class='icon h60 w60 color-gray'><use href='#icon-info'/></svg>
</div>
</div>
<div class='w-full align-center txt-bold'>No Level Overrides Found</div>
</template>
<template v-else>
<div :key='level.id' v-for='level in levels' class='col col--12 grid'>
<div class='grid col col--12 bg-gray-light-on-hover cursor-pointer px12 py12 round relative'>
<div class='col col--11 relative'>
<span class='txt-truncate pre' v-text='level.pattern'/>

<div class='absolute' style='top: 11px; right: 11px;'>
<span class='mx3 fr bg-purple-faint color-purple round inline-block px6 py3 txt-xs txt-bold' v-text='level.level'></span>
</div>
</div>
<div class='col col--1'>
<button @click='deleteLevel(level)' style='margin-top: 9px;' class='mx6 btn btn--stroke round color-gray color-red-on-hover'>
<svg class='icon'><use xlink:href='#icon-trash'/></svg>
</button>
<TablerLoading v-if='loading'/>
<TablerNone v-else-if='!levels.length'/>
<template v-else>
<div :key='level.id' v-for='level in levels' class='col col--12 grid'>
<div class='grid col col--12 bg-gray-light-on-hover cursor-pointer px12 py12 round relative'>
<div class='col col--11 relative'>
<span class='txt-truncate pre' v-text='level.pattern'/>

<div class='absolute' style='top: 11px; right: 11px;'>
<span class='mx3 fr bg-purple-faint color-purple round inline-block px6 py3 txt-xs txt-bold' v-text='level.level'></span>
</div>
</div>
<div class='col col--1'>
<button @click='deleteLevel(level)' style='margin-top: 9px;' class='mx6 btn btn--stroke round color-gray color-red-on-hover'>
<svg class='icon'><use xlink:href='#icon-trash'/></svg>
</button>
</div>
</div>
</template>
</div>
</template>

<Pager v-if='levels.length' @page='page = $event' :perpage='perpage' :total='total'/>
</div>
<Pager v-if='levels.length' @page='page = $event' :perpage='perpage' :total='total'/>
</div>
</template>

<script>
import Pager from '../../util/Pager.vue';
import {
SearchIcon,
PlusIcon,
RefreshIcon,
XIcon
} from 'vue-tabler-icons';
import {
TablerLoading,
TablerNone
} from '@tak-ps/vue-tabler';
export default {
name: 'AdminOverrides',
Expand Down Expand Up @@ -232,7 +219,13 @@ export default {
},
},
components: {
Pager
Pager,
PlusIcon,
SearchIcon,
RefreshIcon,
TablerNone,
TablerLoading,
XIcon,
}
}
</script>

0 comments on commit b31467a

Please sign in to comment.