@fleetbase/solid-engine 0.0.2 → 0.0.4

package/README.md

@@ -61,6 +61,7 @@ Solid, an innovative technology developed by Sir Tim Berners-Lee, offers a groun
 - Input their server 
 - Input their solid ID on the server 
 - Once installed, users signing up or added to the company within this instance can utilize Solid for data management.
+- More info: The interface which allows the instance administrator to link the Fleetbase Solid extension to the Solid server of their preference. Due to the nature of how Solid is built on an identity basis, and Fleetbase is built as a multi-tenant platform. Each organization on Fleetbase when accessing the instance will be prompted to link their Solid OIDC account [https://github.com/fleetbase/solid/blob/main/addon/controllers/application.js#L16] to their Fleetbase organization per the instance. Once linked all data synced between Solid and Fleetbase will be via the SolidIdentity [https://github.com/fleetbase/solid/blob/main/server/src/Models/SolidIdentity.php]
 
 ### User Authentication and Account Creation:
 
@@ -69,27 +70,97 @@ Solid, an innovative technology developed by Sir Tim Berners-Lee, offers a groun
 - Authorize fleetbase.io to access your Pod. 
 - Solid allows precise control over data access permissions. Note: The current UI version (node-solid-server V5.1) supports toggling global access permissions only. If you prefer granular control, uncheck all boxes and authorize. Then, manage permissions explicitly.
 
+### Fleetbase UI Updates 
+
+Developer/User Guide: 
+
+Fleetbase Solid ExtensionThis guide provides detailed instructions for integrating the Solid extension with your Fleetbase account. Solid is an innovative technology that lets users store their own data in personal online data stores, called "Pods," that they control. By using the Solid extension on Fleetbase, users can manage their data directly through the Fleetbase interface.
+
+1. Create a New Fleetbase Account
+- If you don't already have a Fleetbase account, you'll need to create one:
+
+- Go to the Fleetbase website
+- Click on "Sign Up" and follow the registration process.
+- Verify your account as required.
+
+![image](https://github.com/fleetbase/solid/assets/58805033/8dd8084c-5007-420e-b235-b46848cbe884)
+
+2. Install the Solid Extension
+- Once your Fleetbase account is active, follow these steps to install the Solid extension:
+
+- Log in to your Fleetbase dashboard.Navigate to the Extensions section.
+- Find the Solid extension and click "Install."Fleetbase Extensions Registry will be launching Q3 2024
+
+3. Admin Configuration
+- As an admin, you need to set up the Solid server for your organization:
+
+- After installation, navigate to Admin so you can configure the Solid extension settings.
+- Input the Solid server ID where your organization's data will be stored. This might be a private server or a service like solidcommunity.net
+
+![image](https://github.com/fleetbase/solid/assets/58805033/a9324b10-f963-4a41-89c8-9ed574b450b5)
+
+
+4. Get Started with Solid
+- Users must individually sign up for a Solid account:
+
+- Click ‘Sign up for an account’ or Visit https://solidcommunity.net/register or your organization's own Solid server.
+- Complete the registration process to create a new Solid account.
+
+![image](https://github.com/fleetbase/solid/assets/58805033/2bbc7406-ae08-4500-afb0-b52af675110b)
+
+5.​​ Retrieve Your Web ID
+- Your Web ID is your unique identifier in the Solid ecosystem:
+
+- After registering, your Web ID will typically be displayed on your Solid dashboard.Note this Web ID as it will be used to link your Solid account with Fleetbase.
+
+![image](https://github.com/fleetbase/solid/assets/58805033/1ef66dfd-fe19-4795-b1bf-3d16ba7e65f8)
+
+6.​​ Navigate to ‘Account’ in Fleetbase
+- Once your Web ID is set up:Go back to Fleetbase and navigate to the ‘Account’ section. Your User details should be pulled in automatically if properly configured.
+
+![image](https://github.com/fleetbase/solid/assets/58805033/4d3d3090-1e3e-49e6-babc-f1c3db205080)
+
+7.​​ Navigate to PodsTo manage your Pods:
+ - In Fleetbase, find and navigate to the ‘Pods’ section after linking your Solid account.
+
+![image](https://github.com/fleetbase/solid/assets/58805033/bcc83875-e4ed-4ae1-be83-6044eefe323e)
+
+8.​​ Create a New POD
+- Here’s how to create a new POD:
+
+- Click “Create New POD.”Enter a name for your POD and submit.
+
+![image](https://github.com/fleetbase/solid/assets/58805033/2677491c-7de3-4592-9f30-80448e818ff6)
+
+9.​​ Manage Files/Folders in PODs
+- To access and manage data within a POD:
+
+- Click into the POD you wish to view.
+- You’ll see files and folders stored in this POD
+
+![image](https://github.com/fleetbase/solid/assets/58805033/e04e151a-d640-4e29-a91a-a6f09347e59d)
+
+10. Operations on PODsSelect 
+
+- Box Delete: To delete files or folders, select them and use the delete option.
+- Re-sync / Back Up the PODs: To ensure your data is up-to-date, use the re-sync option to resynchronize the data in the POD.
+
+![image](https://github.com/fleetbase/solid/assets/58805033/1f5ef3a8-bed8-476b-b176-cdd19b6212cd)
+
+11. View Data in Pods
+- To view specific data within a POD:
+
+- Simply click on the file or folder you are interested in within the POD interface in Fleetbase.
+
+![image](https://github.com/fleetbase/solid/assets/58805033/55f8af9b-f82b-406d-9434-50404c282740)
+
+Next: We will continue work on completing the Sold <> Fleetbase integration with the following Further User Interface (UI) Enhancement for renaming Pods. Extensive User testing / bug fixes and production release. 
+
 ### Features:
 
+Fleetbase has implemented a Solid Client which implements the Standard Solid authentication methods to communicate with the server. The Fleetbase SolidClient is able to communicate securely with the Solid protocol using the Standard DPoP encryption method for authentication provided by the Solid specification (https://solidproject.org/TR/oidc#tokens-id)
+
 - Ability to link Fleetbase account with Solid Web ID later via user settings.
-- View and manage data stored on Solid Pod:
-  - Orders
-  - Payload
-  - Entity
-  - Service Quote
-  - Purchase Rate
-- Retrieve list of Solid Pods approved to receive data.
-- Ability to add approved pods to send order data too (Verification Process)
-- View order details 
-- Send order details 
-- Select Pod to send order details too 
-- Send order details to Solid partners:
-  - View Order
-  - Send Order
-  - Select from Dropdown of Solid Partners
-  - Confirmation popup for sending data
-  - Review and confirm data to be sent
-- Access a separate table to view all data shared with you or shared with other Solid users.
 
 # Funding
 

package/addon/components/explorer-header.hbs

@@ -0,0 +1,18 @@
+<div id="next-view-section-subheader" class="next-view-section-subheader {{if @hideActions 'actions-hidden'}}" ...attributes>
+    <div id="next-view-section-subheader-left" class="next-view-section-subheader-left {{@leftSubheaderClass}}">
+        <div class="flex flex-row items-center">
+            <FaIcon @icon="folder-tree" @size="sm" class="{{@iconClass}} text-gray-200 dark:text-gray-600 mr-2" />
+            <div class="pod-explorer-breadcrumb-container">
+                {{#each this.state as |content|}}
+                    <a href="#" class="pod-explorer-breadcrumb {{if (eq @current content.id) "active-breadcrumb"}} {{@breadcrumbClass}}" {{on "click" (fn this.onStateClicked content)}}>{{content.name}}</a>
+                {{/each}}
+            </div>
+        </div>
+    </div>
+    <div id="next-view-section-subheader-actions" class="next-view-section-subheader-actions {{@actionsWrapperClass}}">
+        {{#if @onSearch}}
+            <Input @type="text" @value={{@searchQuery}} aria-label={{t "common.search-input"}} placeholder={{or @searchPlaceholder (concat (t "common.search") " " (pluralize @title))}} class="w-64 mr-2 form-input form-input-sm {{@searchInputClass}}" {{on "keyup" @onSearch}} />
+        {{/if}}
+        {{yield}}
+    </div>
+</div>

package/addon/components/explorer-header.js

@@ -0,0 +1,25 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class ExplorerHeaderComponent extends Component {
+    @service explorerState;
+    @tracked state = [];
+
+    constructor(owner, { pod }) {
+        super(...arguments);
+        this.state = this.explorerState.get(pod);
+        this.explorerState.on('change', (id, state) => {
+            if (id === pod) {
+                this.state = state;
+            }
+        });
+    }
+
+    @action onStateClicked(content) {
+        if (typeof this.args.onStateClicked === 'function') {
+            this.args.onStateClicked(content);
+        }
+    }
+}

package/addon/components/modals/backup-pod.hbs

@@ -0,0 +1,3 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container"></div>
+</Modal::Default>

package/addon/components/modals/create-pod.hbs

@@ -0,0 +1,5 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name="Pod Name" @value={{@options.pod.name}} @helpText="Input a name for your new Pod" />
+    </div>
+</Modal::Default>

package/addon/components/modals/resync-pod.hbs

@@ -0,0 +1,3 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container"></div>
+</Modal::Default>

package/addon/components/table/cell/pod-content-actions.hbs

@@ -0,0 +1,32 @@
+<div class="cell-dropdown-button overflow-visible {{@column.wrapperClass}}" {{did-insert this.setupComponent}} ...attributes>
+    <DropdownButton @icon={{@column.ddButtonIcon}} @iconPrefix={{@column.ddButtonIconPrefix}} @text={{this.buttonText}} @size="xs" @horizontalPosition="left" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
+        <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
+            {{#if @column.ddMenuLabel}}
+                <div class="px-1">
+                    <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-800 dark:text-gray-300">
+                        {{@column.ddMenuLabel}}
+                    </div>
+                </div>
+                <div class="next-dd-menu-seperator"></div>
+            {{/if}}
+            {{#each this.actions as |action|}}
+                {{#if action.separator}}
+                    <div class="next-dd-menu-seperator"></div>
+                {{else}}
+                    {{#if (is-dd-item-visible @row action.isVisible)}}
+                        <div role="group" class="px-1">
+                            <a href="javascript:;" role="menuitem" class="next-dd-item {{action.class}}" {{on "click" (fn this.onDropdownItemClick action @row dd)}}>
+                                {{#if action.icon}}
+                                    <span class="mr-1">
+                                        <FaIcon class={{action.iconClass}} @icon={{action.icon}} @prefix={{action.iconPrefix}} />
+                                    </span>
+                                {{/if}}
+                                {{action.label}}
+                            </a>
+                        </div>
+                    {{/if}}
+                {{/if}}
+            {{/each}}
+        </div>
+    </DropdownButton>
+</div>

package/addon/components/table/cell/pod-content-actions.js

@@ -0,0 +1,73 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action, computed } from '@ember/object';
+import { isArray } from '@ember/array';
+
+export default class TableCellPodContentActionsComponent extends Component {
+    constructor(owner, { column, row }) {
+        super(...arguments);
+        if (isArray(column.actions)) {
+            this.actions = column.actions;
+        }
+
+        if (typeof column.actions === 'function') {
+            this.actions = column.actions(row);
+        }
+    }
+
+    @tracked actions = [];
+    @tracked defaultButtonText = 'Actions';
+
+    @computed('args.column.ddButtonText', 'defaultButtonText') get buttonText() {
+        const { ddButtonText } = this.args.column;
+
+        if (ddButtonText === undefined) {
+            return this.defaultButtonText;
+        }
+
+        if (ddButtonText === false) {
+            return null;
+        }
+
+        return ddButtonText;
+    }
+
+    @action setupComponent(dropdownWrapperNode) {
+        const tableCellNode = this.getOwnerTableCell(dropdownWrapperNode);
+        tableCellNode.style.overflow = 'visible';
+    }
+
+    @action getOwnerTableCell(dropdownWrapperNode) {
+        while (dropdownWrapperNode) {
+            dropdownWrapperNode = dropdownWrapperNode.parentNode;
+
+            if (dropdownWrapperNode.tagName.toLowerCase() === 'td') {
+                return dropdownWrapperNode;
+            }
+        }
+
+        return undefined;
+    }
+
+    @action onDropdownItemClick(columnAction, row, dd) {
+        if (typeof dd?.actions?.close === 'function') {
+            dd.actions.close();
+        }
+
+        if (typeof columnAction?.fn === 'function') {
+            columnAction.fn(row);
+        }
+    }
+
+    @action calculatePosition(trigger) {
+        let { width } = trigger.getBoundingClientRect();
+
+        let style = {
+            marginTop: '0px',
+            right: width + 3,
+            top: 0,
+        };
+
+        return { style };
+    }
+}

package/addon/components/table/cell/pod-content-name.hbs

@@ -0,0 +1,8 @@
+<a href="#" {{on "click" this.onClick}} class={{@column.anchorClass}} disabled={{not @value}} ...attributes>
+    {{#if (has-block)}}
+        {{yield}}
+    {{else}}
+        <FaIcon @icon={{@row.type}} @size="xs" class="mr-1" />
+        <span class={{@column.anchorSpanClass}}>{{or @value @column.anchorText "-"}}</span>
+    {{/if}}
+</a>

package/addon/components/table/cell/pod-content-name.js

@@ -0,0 +1,16 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class TableCellPodContentNameComponent extends Component {
+    @action onClick() {
+        const { column, row } = this.args;
+
+        if (typeof column?.action === 'function') {
+            column.action(row);
+        }
+
+        if (typeof column?.onClick === 'function') {
+            column.onClick(row, ...arguments);
+        }
+    }
+}

package/addon/controllers/account.js

@@ -0,0 +1,130 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { alias } from '@ember/object/computed';
+import { task } from 'ember-concurrency';
+
+export default class AccountController extends Controller {
+    /**
+     * Inject the `currentUser` service.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @service currentUser;
+
+    /**
+     * Inject the `fetch` service.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @service fetch;
+
+    /**
+     * Inject the `notifications` service.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @service notifications;
+
+    /**
+     * Inject the `modalsManager` service.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @service modalsManager;
+
+    /**
+     * Alias to the currentUser service user record.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @alias('currentUser.user') user;
+
+    /**
+     * Handle upload of new photo
+     *
+     * @param {UploadFile} file
+     * @memberof ConsoleAccountIndexController
+     */
+    @action uploadNewPhoto(file) {
+        return this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/${this.user.company_uuid}/users/${this.user.slug}`,
+                subject_uuid: this.user.id,
+                subject_type: 'user',
+                type: 'user_avatar',
+            },
+            (uploadedFile) => {
+                this.user.setProperties({
+                    avatar_uuid: uploadedFile.id,
+                    avatar_url: uploadedFile.url,
+                });
+
+                return this.user.save();
+            }
+        );
+    }
+
+    /**
+     * Starts the task to change password
+     *
+     * @param {Event} event
+     * @memberof ConsoleAccountIndexController
+     */
+    @task *saveProfile(event) {
+        // If from event fired
+        if (event instanceof Event) {
+            event.preventDefault();
+        }
+
+        let canUpdateProfile = true;
+        // If email has been changed prompt for password validation
+        if (this.changedUserAttribute('email')) {
+            canUpdateProfile = yield this.validatePassword.perform();
+        }
+
+        if (canUpdateProfile === true) {
+            try {
+                const user = yield this.user.save();
+                this.notifications.success('Profile changes saved.');
+                this.currentUser.set('user', user);
+            } catch (error) {
+                this.notifications.serverError(error);
+            }
+        } else {
+            this.user.rollbackAttributes();
+        }
+    }
+
+    /**
+     * Task to validate current password
+     *
+     * @return {boolean}
+     * @memberof ConsoleAccountIndexController
+     */
+    @task *validatePassword() {
+        let isPasswordValid = false;
+
+        yield this.modalsManager.show('modals/validate-password', {
+            body: 'You must validate your password to update the account email address.',
+            onValidated: (isValid) => {
+                isPasswordValid = isValid;
+            },
+        });
+
+        return isPasswordValid;
+    }
+
+    /**
+     * Checks if any user attribute has been changed
+     *
+     * @param {string} attributeKey
+     * @return {boolean}
+     * @memberof ConsoleAccountIndexController
+     */
+    changedUserAttribute(attributeKey) {
+        const changedAttributes = this.user.changedAttributes();
+        return changedAttributes[attributeKey] !== undefined;
+    }
+}

package/addon/controllers/application.js

@@ -1,27 +1,30 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
-import { task } from 'ember-concurrency';
+import { tracked } from '@glimmer/tracking';
+import { task, timeout } from 'ember-concurrency';
 
 export default class ApplicationController extends Controller {
-    @service universe;
     @service fetch;
+    @service appCache;
+    @tracked pods = [];
 
     constructor() {
         super(...arguments);
-        this.universe.on('sidebarContext.available', (sidebarContext) => {
-            sidebarContext.hideNow();
-        });
+        this.getPods.perform();
     }
 
-    @task *authenticate() {
-        const { authenticationUrl, identifier } = yield this.fetch.get('request-authentication', {}, { namespace: 'solid/int/v1' });
-        if (authenticationUrl) {
-            window.location.href = `${authenticationUrl}/${identifier}`;
+    @task *getPods() {
+        yield timeout(600);
+
+        if (this.appCache.has('solid:pods')) {
+            this.pods = this.appCache.get('solid:pods', []);
+            return;
         }
-    }
 
-    @task *getAccountIndex() {
-        const response = yield this.fetch.get('account', {}, { namespace: 'solid/int/v1' });
-        console.log('[response]', response);
+        try {
+            this.pods = yield this.fetch.get('pods', {}, { namespace: 'solid/int/v1' });
+        } catch (error) {
+            // silence
+        }
     }
 }

package/addon/controllers/home.js

@@ -0,0 +1,23 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class HomeController extends Controller {
+    @service fetch;
+    @service notifications;
+
+    @task *authenticate() {
+        try {
+            const { authenticationUrl, identifier } = yield this.fetch.get('request-authentication', {}, { namespace: 'solid/int/v1' });
+            if (authenticationUrl) {
+                window.location.href = `${authenticationUrl}/${identifier}`;
+            }
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @task *getAccountIndex() {
+        yield this.fetch.get('account', {}, { namespace: 'solid/int/v1' });
+    }
+}

package/addon/controllers/pods/explorer/content.js

@@ -0,0 +1,12 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
+export default class PodsExplorerContentController extends Controller {
+    @action setOverlayContext(overlayContextApi) {
+        this.overlayContextApi = overlayContextApi;
+    }
+
+    @action onPressClose() {
+        window.history.back();
+    }
+}