Merge pull request #48 from osoc24/33-ama-create-file-structure

Resource / File Explorer

controller/src/pod.ts

@@ -16,8 +16,7 @@ import {
   getPublicAccess,
 } from "@inrupt/solid-client/universal";
 import { Session } from "@inrupt/solid-client-authn-browser";
-// import { FOAF } from "@inrupt/vocab-common-rdf";
-import { Permission, url, Post, Appointment } from "./types";
+import { Permission, url, Post, Appointment, FormattedThing } from "./types";
 import { Schema } from "./index";
 
 /**
@@ -44,13 +43,7 @@ export async function getPod(session: Session, url: url) {
 async function listThings(
   session: Session,
   url: url
-): Promise<
-  {
-    url: url;
-    properties: url[];
-    accessModes: Record<url, Permission[]>;
-  }[]
-> {
+): Promise<FormattedThing[]> {
   const dataset = await getSolidDataset(url, { fetch: session.fetch });
   return Promise.all(
     getThingAll(dataset).map(async (t) => ({
@@ -87,6 +80,9 @@ async function getAccessModes(
 function accessModesToPermissions(
   record: Record<url, AccessModes>
 ): Record<url, Permission[]> {
+  const result: { 
+    [agent: string]: Permission[]
+  } = {};
   // List -> Set -> List is done to filter out possible duplicate Permission.Control's
   const mapToPermission = (accessModes: [string, boolean][]) => [
     ...new Set(
@@ -110,11 +106,11 @@ function accessModesToPermissions(
     ),
   ];
 
-  return Object.assign(
-    Object.entries(record).map(([agent, accessModes]) => ({
-      [agent]: mapToPermission(Object.entries(accessModes)),
-    }))
-  );
+  Object.entries(record).forEach(([agent, accessModes]) => {
+    result[agent] = mapToPermission(Object.entries(accessModes));
+  });
+
+  return result;
 }
 
 /**

controller/src/types.ts

@@ -39,6 +39,13 @@ export enum Type {
 
 export type url = string;
 
+export interface FormattedThing {
+  url: url;
+  properties: url[];
+  accessModes: Record<url, Permission[]>;
+}
+[];
+
 export interface Post {
   text: string;
   video?: string;

loama/README.md

@@ -1,6 +1,6 @@
 # LOAMA
 
-This is the actual Access Management App, written in Vue.
+LOAMA is a Linked Open Access Management App, written in Vue.
 
 ## IDP Provider
 

loama/src/components/LoginForm.vue

@@ -52,7 +52,7 @@ const login = () => {
 
   store.session.login({
     oidcIssuer: issuer,
-    redirectUrl: new URL('/home', window.location.href).toString(),
+    redirectUrl: new URL('/home/', window.location.href).toString(),
     clientName: 'LOAMA',
   })
     .then(() => {

loama/src/components/SidePanel.vue

@@ -8,7 +8,9 @@
         {{ pod.name }}
       </LoButton>
     </div>
-    <LoButton :left-icon="PhX" variant="secondary" @click="emit('toggleProvider')">Close Panel</LoButton>
+    <LoButton :left-icon="PhX" variant="secondary" @click="emit('toggleProvider')">
+      Close Panel
+    </LoButton>
   </div>
 </template>
 
@@ -41,6 +43,16 @@ const openPodUrl = (pod: { name: string; url: string }) => {
   width: 100%;
   margin-top: 10px;
   border-right: 0.25rem solid var(--solid-purple);
+  background-color: #f0f0f0;
+  width: 30%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 999;
+  overflow-y: auto;
+  padding: 20px;
+  margin: 0;
 }
 
 h2 {

loama/src/components/explorer/ExplorerBreadcrumbs.vue

@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <template v-for="(param, index) in params" :key="index">
+            <RouterLink v-if="param !== '/' && index !== params.length - 2" :to="'../'.repeat(index)">
+                {{ param }}
+            </RouterLink>
+            <div v-else>
+                {{ param }}
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+const params = computed(() => route.path.split(/(\/)/).filter(p => p !== ""))
+</script>
+
+<style scoped>
+div {
+    display: unset;
+}
+</style>

loama/src/components/explorer/ExplorerEntry.vue

@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <button class="file">
+            <component :is="icon" :size="40" />
+            <span>
+                <slot></slot>
+            </span>
+        </button>
+        <RouterLink :to="props.url">
+            <LoButton v-if="isContainer" :right-icon="PhArrowRight" class="view">View files
+            </LoButton>
+        </RouterLink>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+import LoButton from "../LoButton.vue";
+import { PhFolder, PhFile, PhArrowRight } from '@phosphor-icons/vue';
+
+const props = defineProps<{
+    url: string,
+    isContainer: boolean,
+    authProtected: boolean
+}>()
+
+const icon = props.isContainer ? PhFolder : PhFile;
+</script>
+
+<style lang="css" scoped>
+div {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+a {
+    text-decoration: none;
+}
+
+.file {
+    display: flex;
+    flex: 0 1 auto;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: var(--base-unit);
+    background-color: #0000;
+    border: none;
+    width: 100%;
+    color: var(--off-black);
+}
+
+.view {
+    width: calc(var(--base-unit)*20)
+}
+
+span {
+    font-size: calc(var(--base-unit)*3);
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    flex-grow: 1;
+    text-align: start;
+}
+</style>

loama/src/components/explorer/FallbackExplorer.vue

@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <span></span>
+        <p>
+            <slot></slot>
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+div {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    background-color: var(--off-white);
+    height: calc(100vh - calc(var(--base-unit)* 14));
+}
+
+span {
+    display: block;
+    width: 60px;
+    aspect-ratio: 1;
+    --gradient: conic-gradient(from -90deg at 10px 10px, var(--solid-purple) 90deg, #0000 0);
+    background: var(--gradient), var(--gradient), var(--gradient);
+    background-size: 50% 50%;
+    animation: shifting 1s infinite;
+}
+
+@keyframes shifting {
+    0% {
+        background-position: 0 0, 10px 10px, 20px 20px
+    }
+
+    50% {
+        background-position: 0 20px, 10px 10px, 20px 0
+    }
+
+    100% {
+        background-position: 20px 20px, 10px 10px, 0 0
+    }
+}
+</style>

loama/src/components/explorer/ResourceExplorer.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="panel-container">
+        <div class="left-panel">
+            <ExplorerBreadcrumbs />
+            <ExplorerEntry v-for="thing in getViewFormattedThings(data)" :key="thing.url"
+                :isContainer="thing.isContainer" :authProtected="false" :url="thing.name + '/'">{{ thing.name }}
+            </ExplorerEntry>
+        </div>
+        <div class="right-panel">
+            <Vault class="side-image" />
+            <strong>No folder or file selected!</strong>
+            <i>Select one to get started</i>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Vault from "@/assets/vault.svg"
+import { store } from "@/store";
+import type { Session } from "@inrupt/solid-client-authn-browser";
+import { getPod } from "loama-controller";
+import { ref, watch } from "vue";
+import { PhLock, PhLockOpen } from "@phosphor-icons/vue";
+import ExplorerEntry from "./ExplorerEntry.vue";
+import type { FormattedThing } from "loama-controller/dist/types";
+import { useRoute } from "vue-router";
+import ExplorerBreadcrumbs from "./ExplorerBreadcrumbs.vue";
+
+const data = ref(await getThingsAtLevel(store.usedPod));
+const route = useRoute();
+
+const fileUrl = (path: string | string[]) => `${store.usedPod}${path}`
+
+const uriToName = (uri: string, isContainer: boolean) => {
+    const splitted = uri.split('/');
+
+    return isContainer ? splitted[splitted.length - 2] : splitted[splitted.length - 1];
+}
+
+watch(() => route.params.filePath, async (path) => {
+    data.value = await getThingsAtLevel(fileUrl(path)), { immediate: true }
+})
+
+async function getThingsAtLevel(url: string) {
+    return (await getPod(store.session as Session, url)).things
+        // Filter out the current resource
+        .filter(thing => thing.url !== url)
+        // Filter out the things that are nested (?)
+        .filter(thing => {
+            const depth = thing.url.replace(store.usedPod, '').split('/');
+            return depth.length <= 2;
+        })
+}
+
+function getViewFormattedThings(data: FormattedThing[]) {
+    return data.map(thing => {
+        const uri = thing.url.replace(store.usedPod, '');
+        const isContainer = uri.charAt(uri.length - 1) === '/'
+        const name = uriToName(uri, isContainer);
+        const publicAccess = thing.accessModes.public.length > 0;
+        return {
+            isContainer,
+            name,
+            public: {
+                access: publicAccess,
+                icon: (publicAccess) ? PhLockOpen : PhLock
+            },
+            ...thing
+        }
+    })
+}
+</script>
+
+<style scoped>
+/* div {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    gap: var(--base-unit);
+    margin: calc(var(--base-unit)*2); */
+/* } */
+.side-image {
+    margin-bottom: calc(var(--base-unit)*2);
+}
+
+strong {
+    color: var(--off-black-50, rgba(23, 13, 51, 0.50));
+    text-align: center;
+    font-size: 16px;
+    font-weight: 700;
+}
+
+i {
+    color: var(--off-black-50, rgba(23, 13, 51, 0.50));
+    text-align: center;
+    font-size: 16px;
+    font-style: italic;
+    font-weight: 400;
+}
+
+.panel-container {
+    display: flex;
+    height: calc(100vh - var(--base-unit)*13);
+    width: 100vw;
+}
+
+.left-panel,
+.right-panel {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+}
+
+.left-panel {
+    gap: 2rem;
+    flex: 3;
+    padding: 2rem 2rem 0 2rem;
+    background-color: var(--off-white);
+}
+
+.right-panel {
+    flex: 2;
+    background-color: var(--lama-gray);
+    position: relative;
+    justify-content: center;
+    align-items: center;
+}
+</style>