Misc UI fixes (#89)

* Remove reference to tl-agency-export component

* Additional feed version display options

* Debranding of generic components

* Merge in editing interfaces

* Mixpanel

* Apollo file upload

* Login require option

* Automatic breadcrumb generation

* Move nav breadcrumbs to template and normalize gql import

* Simplify rest api methods

.vscode/settings.json

@@ -1,4 +1,7 @@
 {
+  "search.exclude": {
+    ".yarn": true,
+  },
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },

package.json

@@ -33,13 +33,10 @@
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@oruga-ui/oruga-next": "^0.7.0",
     "@oruga-ui/theme-bulma": "^0.2.11",
-    "@types/cytoscape-fcose": "^2",
-    "@types/d3-scale-chromatic": "^3",
-    "@types/mapbox__mapbox-gl-draw": "^1",
-    "@types/node": "^20.11.3",
     "@vue/apollo-composable": "^4.0.0",
     "@vue/apollo-option": "^4.0.0",
     "@vueuse/core": "^10.7.2",
+    "apollo-upload-client": "^18.0.1",
     "bulma": "^0.9.4",
     "cytoscape": "^3.28.1",
     "cytoscape-fcose": "^2.2.0",
@@ -52,16 +49,21 @@
     "h3": "^1.11.1",
     "haversine": "^1.1.1",
     "maplibre-gl": "^2.4.0",
+    "mixpanel-browser": "^2.47.0",
     "nuxt": "3.9.1",
     "protomaps-themes-base": "^1.3.1",
     "sass": "^1.69.7",
     "typescript": "^5.3.3",
     "typescript-eslint": "^0.0.1-alpha.0",
     "unstorage": "^1.10.1",
-    "vue": "^3.4.14"
+    "@types/node": "^20.11.3",
+    "vue": "^3.4.14",
+    "@types/cytoscape-fcose": "^2",
+    "@types/d3-scale-chromatic": "^3",
+    "@types/mapbox__mapbox-gl-draw": "^1",
+    "@types/cytoscape": "^3"
   },
   "packageManager": "[email protected]",
   "devDependencies": {
-    "@types/cytoscape": "^3"
   }
 }

src/runtime/assets/main.css

@@ -50,6 +50,14 @@ nav .tag {
   margin-left:10px;
 }
 
+.is-pulled-right.button {
+  margin-right:4px;
+}
+.is-pulled-right .button {
+  margin-right:4px;
+}
+
+
 @media only screen and (max-width: 600px) {
   .tab-item {
     overflow-x:auto;
@@ -60,4 +68,5 @@ nav .tag {
   .breadcrumb {
     white-space: inherit;
   }
-}
+}
+

src/runtime/components/admin/entrel-search.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <o-loading v-model:active="loading" :full-page="false" />
+    <o-loading v-model:active="loadingAll" :full-page="false" />
     <o-notification
       v-if="error"
       variant="danger"
@@ -103,6 +103,7 @@ export default {
   emits: ['select'],
   data () {
     return {
+      loadingAll: false,
       search: '',
       userStar: {
         id: '*',
@@ -124,42 +125,28 @@ export default {
   mounted () { this.getData('') },
   methods: {
     async getData (search) {
-      this.loading = true
+      this.loadingAll = true
       // users
       if (search && search.length > 1) {
-        await fetch(`${this.apiBase}/admin/users?q=` + search, {
-          headers: { authorization: await this.authBearer() }
+        await this.fetchAdmin('/users', { q: search }).then((data) => {
+          this.users = (data?.users || []).slice(0, 10)
         })
-          .then(this.handleError)
-          .then((data) => {
-            this.users = (data?.users || []).slice(0, 10)
-          })
-          .catch(this.setError)
       } else {
         this.users = []
       }
 
       // groups
-      await fetch(`${this.apiBase}/admin/groups`, {
-        headers: { authorization: await this.authBearer() }
+      await this.fetchAdmin('/groups').then((data) => {
+        this.groups = (data?.groups || []).slice(0, 100)
       })
-        .then(this.handleError)
-        .then((data) => {
-          this.groups = (data?.groups || []).slice(0, 100)
-        })
-        .catch(this.setError)
 
       // tenants
-      await fetch(`${this.apiBase}/admin/tenants`, {
-        headers: { authorization: await this.authBearer() }
+      await this.fetchAdmin('/tenants').then((data) => {
+        this.tenants = (data?.tenants || []).slice(0, 100)
       })
-        .then(this.handleError)
-        .then((data) => {
-          this.tenants = (data?.tenants || []).slice(0, 100)
-        })
-        .catch(this.setError)
 
-      this.loading = false
+      // Done
+      this.loadingAll = false
     }
   }
 }

src/runtime/components/admin/feed-version.vue

@@ -8,22 +8,6 @@
       Error: {{ error }}
     </o-notification>
     <div v-else-if="fv && perms">
-      <o-field label="Name" horizontal>
-        <tl-admin-input
-          :value="fv.name || 'Unnamed feed_version'"
-          :can-edit="perms.actions.can_edit"
-          @save="update({ name: $event })"
-        />
-      </o-field>
-
-      <o-field label="Description" horizontal>
-        <tl-admin-input
-          :value="fv.description || ''"
-          :can-edit="perms.actions.can_edit"
-          @save="update({ description: $event })"
-        />
-      </o-field>
-
       <o-field label="Your permissions" horizontal :title="`You are logged in as ${user.name} (${user.email})`">
         <tl-admin-perm-list :actions="perms.actions" />
       </o-field>
@@ -80,16 +64,6 @@ query($ids:[Int!]!) {
 }
 `
 
-const saveFeedVersionMutation = gql`
-mutation($id:Int!, $set:FeedVersionSetInput!) {
-  feed_version_update(id:$id, set:$set) {
-    id
-    name
-    description
-  }
-}
-`
-
 export default {
   mixins: [AuthzMixin, Loadable],
   props: {
@@ -133,65 +107,30 @@ export default {
       }
     },
     async getData () {
-      this.loading = true
-      await fetch(`${this.apiBase}/admin/feed_versions/${this.id}`, {
-        headers: { authorization: await this.authBearer() }
+      return await this.fetchAdmin(`/feed_versions/${this.id}`).then((data) => {
+        this.perms = data
       })
-        .then(this.handleError)
-        .then((data) => {
-          this.perms = data
-        })
-        .catch(this.setError)
-      this.loading = false
-    },
-    update (update) {
-      this.loading = true
-      this.$apollo
-        .mutate({
-          client: 'transitland',
-          mutation: saveFeedVersionMutation,
-          variables: {
-            id: this.id,
-            set: update
-          },
-          update: () => {
-            this.loading = false
-            this.$apollo.queries.fvs.refetch()
-            this.$emit('changed')
-          }
-        }).catch(this.setError)
     },
     async addPermissions (relation, value) {
       console.log('addPermissions:', relation, value)
-      await fetch(
-        `${this.apiBase}/admin/feed_versions/${this.id}/permissions`, {
-          method: 'POST',
-          headers: { authorization: await this.authBearer() },
-          body: JSON.stringify({
-            id: String(value.id),
-            type: this.ObjectTypes(value.type),
-            ref_relation: this.Relations(value.refrel),
-            relation: this.Relations(relation)
-          })
-        }
-      )
+      const data = {
+        id: String(value.id),
+        type: this.ObjectTypes(value.type),
+        ref_relation: this.Relations(value.refrel),
+        relation: this.Relations(relation)
+      }
+      await this.fetchAdmin(`/feed_versions/${this.id}/permissions`, data, 'POST')
       this.getData()
     },
     async removePermissions (relation, value) {
       console.log('removePermissions:', relation, value)
-      await fetch(
-        `${this.apiBase}/admin/feed_versions/${this.id}/permissions`, {
-          method: 'DELETE',
-          headers: { authorization: await this.authBearer() },
-          body: JSON.stringify({
-            id: String(value.id),
-            type: this.ObjectTypes(value.type),
-            ref_relation: this.Relations(value.refrel),
-            relation: this.Relations(relation)
-          })
-
-        }
-      )
+      const data = {
+        id: String(value.id),
+        type: this.ObjectTypes(value.type),
+        ref_relation: this.Relations(value.refrel),
+        relation: this.Relations(relation)
+      }
+      await this.fetchAdmin(`/feed_versions/${this.id}/permissions`, data, 'DELETE')
       this.getData()
     },
     changed () {

src/runtime/components/admin/feed.vue

@@ -101,27 +101,13 @@ export default {
   mounted () { this.getData() },
   methods: {
     async getData () {
-      this.loading = true
-      await fetch(
-        `${this.apiBase}/admin/feeds/${this.id}`, {
-          headers: { authorization: await this.authBearer() }
-        })
-        .then(this.handleError)
-        .then((data) => {
-          this.feed = data
-        })
-        .catch(this.setError)
-      this.loading = false
+      return await this.fetchAdmin(`/feeds/${this.id}`).then((data) => {
+        this.feed = data
+      })
     },
     async setGroup (value) {
-      this.loading = true
-      await fetch(
-        `${this.apiBase}/admin/feeds/${this.id}/group`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json', authorization: await this.authBearer() },
-          body: JSON.stringify({ group_id: value.id })
-        }
-      )
+      const data = { group_id: value.id }
+      await this.fetchAdmin(`/feeds/${this.id}/group`, data, 'POST')
       this.getData()
     },
     changed () {

src/runtime/components/admin/group.vue

@@ -161,82 +161,41 @@ export default {
       }
     },
     async getData () {
-      this.loading = true
-      await fetch(`${this.apiBase}/admin/groups/${this.id}`, {
-        headers: { authorization: await this.authBearer() }
+      return await this.fetchAdmin(`/groups/${this.id}`).then((data) => {
+        this.group = data
       })
-        .then(this.handleError)
-        .then((data) => {
-          this.group = data
-        })
-        .catch(this.setError)
-      this.loading = false
     },
     async saveName (value) {
       console.log('saveName', value)
-      this.loading = true
-      await fetch(
-        `${this.apiBase}/admin/groups/${this.id}`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            authorization: await this.authBearer()
-          },
-          body: JSON.stringify({ name: value })
-        }
-      )
+      await this.fetchAdmin(`/groups/${this.id}`, { name: value }, 'POST')
       this.changed()
     },
     async addPermissions (relation, value) {
       console.log('addPermissions:', relation, value)
-      this.loading = true
-      await fetch(
-        `${this.apiBase}/admin/groups/${this.id}/permissions`, {
-          method: 'POST',
-          headers: { authorization: await this.authBearer() },
-          body: JSON.stringify({
-            id: String(value.id),
-            type: this.ObjectTypes(value.type),
-            ref_relation: this.Relations(value.refrel),
-            relation: this.Relations(relation)
-          })
-        }
-      )
-        .then(this.handleError)
-        .catch(this.setError)
+      const data = {
+        id: String(value.id),
+        type: this.ObjectTypes(value.type),
+        ref_relation: this.Relations(value.refrel),
+        relation: this.Relations(relation)
+      }
+      await this.fetchAdmin(`/groups/${this.id}/permissions`, data, 'POST')
       this.getData()
     },
     async removePermissions (relation, value) {
       console.log('removePermissions:', relation, value)
-      this.loading = true
-      await fetch(
-        `${this.apiBase}/admin/groups/${this.id}/permissions`, {
-          method: 'DELETE',
-          headers: { authorization: await this.authBearer() },
-          body: JSON.stringify({
-            id: String(value.id),
-            type: this.ObjectTypes(value.type),
-            ref_relation: this.Relations(value.refrel),
-            relation: this.Relations(relation)
-          })
-        }
-      )
-        .then(this.handleError)
-        .catch(this.setError)
+      const data = {
+        id: String(value.id),
+        type: this.ObjectTypes(value.type),
+        ref_relation: this.Relations(value.refrel),
+        relation: this.Relations(relation)
+      }
+      await this.fetchAdmin(`/groups/${this.id}/permissions`, data, 'DELETE')
       this.getData()
     },
     async setTenant (value) {
       console.log('setTenant', value)
-      this.loading = true
-      await fetch(
-        `${this.apiBase}/admin/groups/${this.id}/tenant`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json', authorization: await this.authBearer() },
-          body: JSON.stringify({ tenant_id: value.id })
-        }
-      )
-        .then(this.handleError)
-        .catch(this.setError)
+      const data = { tenant_id: value.id }
+      await this.fetchAdmin(`/groups/${this.id}/tenant`, data, 'POST')
       this.getData()
     },
     changed () {