diff --git a/web/app/components/custom-editable-field.ts b/web/app/components/custom-editable-field.ts index e5bb6cef8..462742ce2 100644 --- a/web/app/components/custom-editable-field.ts +++ b/web/app/components/custom-editable-field.ts @@ -14,7 +14,7 @@ interface CustomEditableFieldComponentSignature { field: string; attributes: CustomEditableField; onChange: (value: any) => void; - loading?: boolean; + isSaving?: boolean; disabled?: boolean; }; } diff --git a/web/app/components/document/index.hbs b/web/app/components/document/index.hbs index 9a63b6b88..65e4008a0 100644 --- a/web/app/components/document/index.hbs +++ b/web/app/components/document/index.hbs @@ -1,4 +1,7 @@ -
+
@@ -11,19 +14,18 @@ @profile={{this.authenticatedUser.info}} @document={{@document}} @deleteDraft={{perform this.deleteDraft}} - @docType={{@docType}} @isCollapsed={{this.sidebarIsCollapsed}} @toggleCollapsed={{this.toggleSidebarCollapsedState}} /> {{/unless}}
-
+
{{#unless @modelIsChanging}} {{! diff --git a/web/app/components/document/index.ts b/web/app/components/document/index.ts index 0095d517d..09301b0e9 100644 --- a/web/app/components/document/index.ts +++ b/web/app/components/document/index.ts @@ -12,7 +12,6 @@ import { action } from "@ember/object"; interface DocumentIndexComponentSignature { document: HermesDocument; - docType: string; modelIsChanging: boolean; } @@ -30,6 +29,21 @@ export default class DocumentIndexComponent extends Component { try { let fetchResponse = await this.fetchSvc.fetch("/api/v1/drafts/" + docID, { diff --git a/web/app/components/document/sidebar.ts b/web/app/components/document/sidebar.ts index 20488c733..d2a62190b 100644 --- a/web/app/components/document/sidebar.ts +++ b/web/app/components/document/sidebar.ts @@ -28,13 +28,20 @@ import Ember from "ember"; import htmlElement from "hermes/utils/html-element"; import ConfigService from "hermes/services/config"; import isValidURL from "hermes/utils/is-valid-u-r-l"; +import { GoogleUser } from "../inputs/people-select"; import { HermesDocumentType } from "hermes/types/document-type"; +const serializePeople = (people: GoogleUser[]): HermesUser[] => { + return people.map((p) => ({ + email: p.emailAddresses[0]?.value as string, + imgURL: p.photos?.[0]?.url, + })); +}; + interface DocumentSidebarComponentSignature { Args: { profile: AuthenticatedUser; document: HermesDocument; - docType: HermesDocumentType; deleteDraft: (docId: string) => void; isCollapsed: boolean; toggleCollapsed: () => void; @@ -73,6 +80,8 @@ export default class DocumentSidebarComponent extends Component { + const docTypes = (await this.fetchSvc + .fetch("/api/v1/document-types") + .then((r) => r?.json())) as HermesDocumentType[]; + + assert("docTypes must exist", docTypes); + + const docType = docTypes.find( + (dt) => dt.name === this.args.document.docType + ); + + assert("docType must exist", docType); + this.docType = docType; + }); + @action refreshRoute() { // We force refresh due to a bug with `refreshModel: true` // See: https://github.com/emberjs/ember.js/issues/19260 @@ -510,6 +534,40 @@ export default class DocumentSidebarComponent extends Component { + let maybePromises = []; + + const contributorsPromise = this.fetchSvc + .fetch(`/api/v1/people?emails=${this.contributors.join(",")}`) + .then((r) => r?.json()); + + const approversPromise = this.fetchSvc + .fetch(`/api/v1/people?emails=${this.approvers.join(",")}`) + .then((r) => r?.json()); + + maybePromises.push(this.contributors.length ? contributorsPromise : []); + maybePromises.push(this.approvers.length ? approversPromise : []); + + if (!maybePromises.length) { + return; + } + + const [contributors, approvers] = await Promise.all(maybePromises); + + if (contributors.length) { + this.contributors = serializePeople(contributors); + } + + if (approvers.length) { + this.approvers = serializePeople(approvers); + } + }); + /** * A task that waits for a short time and then resolves. * Used to trigger the "link created" state of the share button. diff --git a/web/app/components/document/sidebar/header.hbs b/web/app/components/document/sidebar/header.hbs index 25af86344..bdf19afb5 100644 --- a/web/app/components/document/sidebar/header.hbs +++ b/web/app/components/document/sidebar/header.hbs @@ -1,4 +1,4 @@ -
+
- {{#if (and this.editingIsEnabled (not @loading))}} - + {{#if this.editingBlockIsShown}} {{on-document "keydown" this.handleKeydown}}
@@ -69,8 +67,13 @@
{{else}} - {{#if @loading}} - + {{#if (or @isSaving @isLoading)}} +
+ +
{{/if}} void; - loading?: boolean; + isLoading?: boolean; + isSaving?: boolean; disabled?: boolean; isRequired?: boolean; class?: string; @@ -33,7 +32,7 @@ interface EditableFieldComponentSignature { value: any; update: (value: any) => void; applyPeopleSelectClasses: (element: HTMLElement) => void; - } + }, ]; }; } @@ -80,6 +79,11 @@ export default class EditableFieldComponent extends Component element.classList.add("relative", "z-10"); @@ -115,7 +119,7 @@ export default class EditableFieldComponent extends Component( - ([time, monthFormat = "short"]: [ - string | number | Date | undefined, - undefined | "short" | "long" - ]) => { + ([time, monthFormat = "short"]) => { return parseDate(time, monthFormat); } ); diff --git a/web/app/routes/authenticated/document.ts b/web/app/routes/authenticated/document.ts index 7aaa2fd50..3122fa8f9 100644 --- a/web/app/routes/authenticated/document.ts +++ b/web/app/routes/authenticated/document.ts @@ -1,40 +1,27 @@ import Route from "@ember/routing/route"; import { inject as service } from "@ember/service"; -import RSVP from "rsvp"; import htmlElement from "hermes/utils/html-element"; import { schedule } from "@ember/runloop"; -import { GoogleUser } from "hermes/components/inputs/people-select"; -import ConfigService from "hermes/services/config"; import FetchService from "hermes/services/fetch"; -import RecentlyViewedDocsService from "hermes/services/recently-viewed-docs"; -import AlgoliaService from "hermes/services/algolia"; -import SessionService from "hermes/services/session"; import FlashMessageService from "ember-cli-flash/services/flash-messages"; import RouterService from "@ember/routing/router-service"; -import { HermesDocument, HermesUser } from "hermes/types/document"; +import { HermesDocument } from "hermes/types/document"; import Transition from "@ember/routing/transition"; import { HermesDocumentType } from "hermes/types/document-type"; import AuthenticatedDocumentController from "hermes/controllers/authenticated/document"; -const serializePeople = (people: GoogleUser[]): HermesUser[] => { - return people.map((p) => ({ - email: p.emailAddresses[0]?.value as string, - imgURL: p.photos?.[0]?.url, - })); -}; - -interface DocumentRouteParams { +interface AuthenticatedDocumentRouteParams { document_id: string; draft: boolean; } -export default class DocumentRoute extends Route { - @service("config") declare configSvcL: ConfigService; +interface AuthenticatedDocumentRouteModel { + doc: HermesDocument; + docType: HermesDocumentType; +} + +export default class AuthenticatedDocumentRoute extends Route { @service("fetch") declare fetchSvc: FetchService; - @service("recently-viewed-docs") - declare recentDocs: RecentlyViewedDocsService; - @service declare algolia: AlgoliaService; - @service declare session: SessionService; @service declare flashMessages: FlashMessageService; @service declare router: RouterService; @@ -59,7 +46,10 @@ export default class DocumentRoute extends Route { }); } - async model(params: DocumentRouteParams, transition: Transition) { + async model( + params: AuthenticatedDocumentRouteParams, + transition: Transition, + ) { let doc = {}; let draftFetched = false; @@ -87,7 +77,6 @@ export default class DocumentRoute extends Route { */ transition.abort(); this.router.transitionTo("authenticated.document", params.document_id); - return; } } @@ -115,64 +104,7 @@ export default class DocumentRoute extends Route { } } - // With the document fetched and added to the db's RecentlyViewedDocs index, - // make a background call to update the front-end index. - void this.recentDocs.fetchAll.perform(); - - let typedDoc = doc as HermesDocument; - - // Record analytics. - try { - await this.fetchSvc.fetch("/api/v1/web/analytics", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ - document_id: params.document_id, - product_name: typedDoc.product, - }), - }); - } catch (err) { - console.error("Error recording analytics: " + err); - } - - // Load the document as well as the logged in user info - - // Preload avatars for all approvers in the Algolia index. - if (typedDoc.contributors?.length) { - const contributors = await this.fetchSvc - .fetch(`/api/v1/people?emails=${typedDoc.contributors.join(",")}`) - .then((r) => r?.json()); - - if (contributors) { - typedDoc.contributors = serializePeople(contributors); - } else { - typedDoc.contributors = []; - } - } - if (typedDoc.approvers?.length) { - const approvers = await this.fetchSvc - .fetch(`/api/v1/people?emails=${typedDoc.approvers.join(",")}`) - .then((r) => r?.json()); - - if (approvers) { - typedDoc.approvers = serializePeople(approvers); - } else { - typedDoc.approvers = []; - } - } - - let docTypes = await this.fetchSvc - .fetch("/api/v1/document-types") - .then((r) => r?.json()); - - let docType = docTypes.find( - (docType: HermesDocumentType) => docType.name === typedDoc.docType - ); - - return RSVP.hash({ - doc: typedDoc, - docType, - }); + return doc as HermesDocument; } /** @@ -182,7 +114,7 @@ export default class DocumentRoute extends Route { * `modelIsChanging` property to remove and rerender the sidebar, * resetting its local state to reflect the new model data. */ - afterModel(model: any, transition: any) { + afterModel(_model: AuthenticatedDocumentRouteModel, transition: any) { if (transition.from) { if (transition.from.name === transition.to.name) { if ( diff --git a/web/app/styles/components/editable-field.scss b/web/app/styles/components/editable-field.scss index 455307fd6..44a2e7ebe 100644 --- a/web/app/styles/components/editable-field.scss +++ b/web/app/styles/components/editable-field.scss @@ -22,6 +22,10 @@ } } + &.saving { + opacity: 0.5; + } + textarea, .field-toggle { @apply px-[5px] pb-[5px] pt-[7px]; @@ -44,7 +48,9 @@ } .flight-icon { - animation: slideLeftPx 250ms ease-out, fadeIn 100ms ease-out; + animation: + slideLeftPx 250ms ease-out, + fadeIn 100ms ease-out; } } } @@ -114,12 +120,14 @@ button { &:first-child { - animation: slideDownXs 300ms cubic-bezier(0, 1, 0.5, 1), + animation: + slideDownXs 300ms cubic-bezier(0, 1, 0.5, 1), fadeIn 80ms ease-in-out; } &:nth-child(2) { - animation: slideDownXs 600ms cubic-bezier(0, 1, 0.5, 1), + animation: + slideDownXs 600ms cubic-bezier(0, 1, 0.5, 1), fadeIn 100ms ease-in-out; } } diff --git a/web/app/templates/authenticated/document.hbs b/web/app/templates/authenticated/document.hbs index 42333299e..588b7b811 100644 --- a/web/app/templates/authenticated/document.hbs +++ b/web/app/templates/authenticated/document.hbs @@ -1,8 +1,4 @@ -{{page-title (or @model.doc.title "Document")}} +{{page-title (or @model.title "Document")}} {{set-body-class "secondary-screen"}} - + diff --git a/web/app/types/document.d.ts b/web/app/types/document.d.ts index 1c6ee5a70..4668334e4 100644 --- a/web/app/types/document.d.ts +++ b/web/app/types/document.d.ts @@ -5,7 +5,26 @@ export interface HermesDocument { status: string; product?: string; - modifiedTime?: number; // Not available on drafts fetched as Hits from backend + + /** + * A human-readable date string, e.g., "Aug 16, 2028". + * Mutated in the layout by the `parse-date` helper to place + * the date before the month. + */ + created: string; + + /** + * A timestamp in seconds. Used for sorting. + */ + createdTime: number; + + /** + * A timestamp in seconds. Used Translated by the `time-ago` helper + * into a human-readable string, e.g., "2 days ago." + * Not available on drafts fetched as Hits from backend. + */ + modifiedTime?: number; + docNumber: string; docType: string; title: string; diff --git a/web/tests/integration/components/editable-field-test.ts b/web/tests/integration/components/editable-field-test.ts index 35d07d0b1..0c8c8a945 100644 --- a/web/tests/integration/components/editable-field-test.ts +++ b/web/tests/integration/components/editable-field-test.ts @@ -1,13 +1,4 @@ -import { - click, - fillIn, - find, - render, - triggerEvent, - triggerKeyEvent, - waitFor, - waitUntil, -} from "@ember/test-helpers"; +import { click, fillIn, render, triggerKeyEvent } from "@ember/test-helpers"; import { hbs } from "ember-cli-htmlbars"; import { MirageTestContext } from "ember-cli-mirage/test-support"; import { setupRenderingTest } from "ember-qunit"; @@ -15,12 +6,13 @@ import { module, test } from "qunit"; const EDITABLE_FIELD_SELECTOR = ".editable-field"; const FIELD_TOGGLE_SELECTOR = ".editable-field .field-toggle"; -const LOADING_SPINNER_SELECTOR = ".loading-indicator"; const ERROR_SELECTOR = "[data-test-empty-value-error]"; +const LOADING_SPINNER_SELECTOR = `${EDITABLE_FIELD_SELECTOR} [data-test-spinner]`; interface EditableFieldComponentTestContext extends MirageTestContext { onChange: (value: any) => void; isLoading: boolean; + isSaving: boolean; value: string; newArray: string[]; } @@ -80,31 +72,52 @@ module("Integration | Component | editable-field", function (hooks) { assert.dom(EDITABLE_FIELD_SELECTOR).exists({ count: 1 }).hasText("foo two"); }); - test("it can show a loading state", async function (this: EditableFieldComponentTestContext, assert) { - this.set("isLoading", true); + test("it can show a saving state", async function (this: EditableFieldComponentTestContext, assert) { + this.set("isSaving", true); await render(hbs` `); - assert.dom(FIELD_TOGGLE_SELECTOR).hasClass("loading").isDisabled(); - + assert.dom(FIELD_TOGGLE_SELECTOR).hasClass("saving").isDisabled(); assert.dom(LOADING_SPINNER_SELECTOR).exists(); - this.set("isLoading", false); + this.set("isSaving", false); assert .dom(FIELD_TOGGLE_SELECTOR) - .doesNotHaveClass("loading") + .doesNotHaveClass("saving") .isNotDisabled(); assert.dom(LOADING_SPINNER_SELECTOR).doesNotExist(); }); + test("it can show a loading state", async function (this: EditableFieldComponentTestContext, assert) { + this.set("isLoading", true); + + await render(hbs` + + `); + + assert + .dom(FIELD_TOGGLE_SELECTOR) + .doesNotExist("content is not yielded while loading"); + assert.dom(LOADING_SPINNER_SELECTOR).exists(); + + this.set("isLoading", false); + + assert.dom(LOADING_SPINNER_SELECTOR).doesNotExist(); + assert.dom(FIELD_TOGGLE_SELECTOR).exists(); + }); + test("it yields an emptyValueErrorIsShown property to the editing block", async function (this: EditableFieldComponentTestContext, assert) { this.set("onChange", (newValue: string) => { console.log("testtestse");