add UI selector for user ratings (group or own)

Allow a user to access their own dataset.
Add a route for admins to give users access to groups.

unwind-ui/src/App.vue

@@ -2,11 +2,25 @@
   <section class="section">
     <div class="container">
       <user-login
-        class="is-justify-content-end mb-6"
-        @login="(login) => (user = login)"
+        class="is-justify-content-end"
+        @login="(login) => (credentials = login)"
       />
 
-      <div class="field has-addons">
+      <div class="field is-flex is-justify-content-end" v-if="login_user">
+        <div class="control has-icons-left">
+          <div class="select is-small">
+            <select v-model="filter_group" @change="search">
+              <option selected value="">Me ({{ login_user.name }})</option>
+              <option v-for="g in login_user.groups" :value="g.id">{{g.id}}</option>
+            </select>
+          </div>
+          <div class="icon is-small is-left">
+            <span class="fas fa-group">👥</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="field has-addons mt-6">
         <div class="control is-expanded">
           <input
             class="input is-loading"
@@ -105,6 +119,9 @@ async function req(url, opts = {}, { user_id = "", secret = "" }, data = null) {
   }
 
   const resp = await window.fetch(url, opts)
+  if (!resp.ok) {
+    throw resp
+  }
   return await resp.json()
 }
 
@@ -144,16 +161,25 @@ function debounce_async(ms, func) {
 
 const debounced_get = debounce_async(100, get)
 
+type ULID = string
+type User = {
+  id: ULID,
+  name: string,
+  groups: Array<{id: ULID}>,
+}
+
 export default defineComponent({
   data: () => ({
     query: "",
     items: [],
-    user: { user_id: "", secret: "" },
+    credentials: { user_id: "", secret: "" },
+    login_user: null,
     page: 1,
     is_end: false,
     media_types,
     media_type: "",
     active: false,
+    filter_group: '',
   }),
   mounted() {
     const { query, type } = view_params()
@@ -183,6 +209,8 @@ export default defineComponent({
 
       const per_page = 100
       const media_type = this.media_type === "" ? null : this.media_type
+      const user_id = this.filter_group === '' && this.credentials.user_id || null
+      const group_id = user_id === null && this.filter_group ? this.filter_group : null
       const more = await debounced_get(
         "movies",
         {
@@ -191,9 +219,10 @@ export default defineComponent({
           include_unrated: true,
           page: this.page,
           media_type,
-          user_id: this.user.user_id,
+          user_id,
+          group_id,
         },
-        this.user,
+        this.credentials,
       )
       this.items = this.items.concat(more)
 
@@ -204,6 +233,16 @@ export default defineComponent({
       }
     },
   },
+  watch: {
+    async credentials(creds) {
+      if (!creds.user_id) {
+        return
+      }
+
+      const user: User = await get(`users/${creds.user_id}`, {}, creds)
+      this.login_user = user
+    },
+  },
 })
 </script>