erudit 3.0.0-dev.2 → 3.0.0-dev.21

package/app/components/aside/minor/content/AsideMinorContent.vue

@@ -1,92 +1,89 @@
-<script lang="ts" setup>
-import type { AsideMinorContent } from '@shared/aside/minor';
-import { injectAsideData } from '@app/scripts/aside/minor/state';
-
-const contentData = injectAsideData<AsideMinorContent>();
-const phrase = await usePhrases('contributors', 'no_contributors');
-const contributePaneVisible = ref(false);
-
-watch(contentData, () => (contributePaneVisible.value = false));
-</script>
-
-<template>
-    <AsideMinorPane :class="$style.asideMinorContent">
-        <section :class="$style.contentNav">
-            <AsideMinorTopLink
-                :title="contentData.nav?.previous?.title"
-                :link="contentData.nav?.previous?.link"
-                :icon="'arrow-left'"
-            />
-
-            <div :class="$style.title">
-                {{ phrase.contributors }}:
-                <span>{{ contentData.contributors?.length || 0 }}</span>
-            </div>
-
-            <AsideMinorTopLink
-                :title="contentData.nav?.next?.title"
-                :link="contentData.nav?.next?.link"
-                :icon="'arrow-left'"
-                class="icon-flip-h"
-            />
-        </section>
-        <section v-if="contentData.contributors" :class="$style.contributors">
-            <ContributorListItem
-                v-for="contributor of contentData.contributors"
-                v-bind="contributor"
-            />
-        </section>
-        <section v-else :class="$style.noContributors">
-            {{ phrase.no_contributors }}
-        </section>
-        <AsideMinorContribute
-            :fullContentId="contentData.fullContentId"
-            v-model:pane="contributePaneVisible"
-        />
-    </AsideMinorPane>
-</template>
-
-<style lang="scss" module>
-.asideMinorContent {
-    display: flex;
-    flex-direction: column;
-
-    .contentNav {
-        border-bottom: 1px solid var(--border);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 10px;
-
-        .title {
-            text-align: center;
-            color: var(--text);
-            font-size: 1.1em;
-            font-weight: 600;
-            width: 158px;
-
-            span {
-                padding-left: var(--gap);
-                color: var(--textMuted);
-            }
-        }
-    }
-
-    .contributors {
-        flex: 1;
-        overflow: auto;
-        @include scroll;
-
-        > * {
-            border-bottom: 1px solid var(--border);
-        }
-    }
-
-    .noContributors {
-        flex: 1;
-        text-align: center;
-        padding: var(--gap);
-        color: var(--textMuted);
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { AsideMinorContentBase } from '@shared/aside/minor';
+import { injectAsideData } from '@app/scripts/aside/minor/state';
+
+const contentData = injectAsideData<AsideMinorContentBase>();
+const phrase = await usePhrases('contributors', 'no_contributors');
+const contributePaneVisible = ref(false);
+
+watch(contentData, () => (contributePaneVisible.value = false));
+</script>
+
+<template>
+    <AsideMinorPane :class="$style.asideMinorContent">
+        <section :class="$style.contentNav">
+            <AsideMinorTopLink
+                :title="contentData.previousNext?.previous?.title"
+                :link="contentData.previousNext?.previous?.link"
+                :icon="'arrow-left'"
+            />
+
+            <div :class="$style.title">
+                {{ phrase.contributors }}:
+                <span>{{ contentData.contributors?.length || 0 }}</span>
+            </div>
+
+            <AsideMinorTopLink
+                :title="contentData.previousNext?.next?.title"
+                :link="contentData.previousNext?.next?.link"
+                :icon="'arrow-left'"
+                class="icon-flip-h"
+            />
+        </section>
+        <section v-if="contentData.contributors" :class="$style.contributors">
+            <ContributorListItem
+                v-for="contributor of contentData.contributors"
+                v-bind="contributor"
+            />
+        </section>
+        <section v-else :class="$style.noContributors">
+            {{ phrase.no_contributors }}
+        </section>
+        <AsideMinorContribute v-model:pane="contributePaneVisible" />
+    </AsideMinorPane>
+</template>
+
+<style lang="scss" module>
+.asideMinorContent {
+    display: flex;
+    flex-direction: column;
+
+    .contentNav {
+        border-bottom: 1px solid var(--border);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+
+        .title {
+            text-align: center;
+            color: var(--text);
+            font-size: 1.1em;
+            font-weight: 600;
+            width: 158px;
+
+            span {
+                padding-left: var(--gap);
+                color: var(--textMuted);
+            }
+        }
+    }
+
+    .contributors {
+        flex: 1;
+        overflow: auto;
+        @include scroll;
+
+        > * {
+            border-bottom: 1px solid var(--border);
+        }
+    }
+
+    .noContributors {
+        flex: 1;
+        text-align: center;
+        padding: var(--gap);
+        color: var(--textMuted);
+    }
+}
+</style>

package/app/components/aside/minor/contributor/AsideMinorContributor.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { type AsideMinorContributor } from '@shared/aside/minor';
+import { CONTENT_TYPE_ICON } from '@shared/icons';
+import { injectAsideData } from '@erudit/app/scripts/aside/minor/state';
+
+import BookContribution from './BookContribution.vue';
+
+const contributorData = injectAsideData<AsideMinorContributor>();
+const phrase = await usePhrases('contribution');
+
+const bookIdContributions = (() => {
+    const grouped: Record<string, typeof contributorData.value.contributions> =
+        {};
+
+    contributorData.value.contributions.forEach((contribution) => {
+        const bookId = contribution.bookId || '';
+        if (!grouped[bookId]) {
+            grouped[bookId] = [];
+        }
+        grouped[bookId].push(contribution);
+    });
+
+    return grouped;
+})();
+
+const topLevelContributions = bookIdContributions[''];
+delete bookIdContributions[''];
+</script>
+
+<template>
+    <AsideMinorPane>
+        <section :class="$style.contributionsHeader">
+            {{ phrase.contribution }}:
+            <span>{{ contributorData.contributions.length }}</span>
+        </section>
+        <div :class="$style.contributions">
+            <TreeContainer>
+                <template v-for="contribution of topLevelContributions">
+                    <TreeItem
+                        :icon="CONTENT_TYPE_ICON[contribution.contentType]"
+                        :label="contribution.contentTitle"
+                        :link="contribution.contentLink"
+                    />
+                </template>
+                <BookContribution
+                    v-for="(contributions, bookId) in bookIdContributions"
+                    :bookTitle="contributions[0]!.bookTitle!"
+                    :contributions
+                />
+            </TreeContainer>
+        </div>
+    </AsideMinorPane>
+</template>
+
+<style lang="scss" module>
+.contributionsHeader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border-bottom: 1px solid var(--border);
+    color: var(--text);
+    font-size: 1.1em;
+    font-weight: 600;
+    height: 62px;
+
+    span {
+        padding-left: var(--gap);
+        color: var(--textMuted);
+    }
+}
+
+.contributions {
+    max-height: calc(100% - 62px);
+    overflow-y: auto;
+    @include scroll;
+}
+</style>

package/app/components/aside/minor/contributor/BookContribution.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import type { Contribution } from '@shared/contributor';
+import { CONTENT_TYPE_ICON } from '@shared/icons';
+
+defineProps<{
+    bookTitle: string;
+    contributions: Contribution[];
+}>();
+
+const expanded = ref(false);
+</script>
+
+<template>
+    <div :class="[$style.bookContainer, expanded && $style.expanded]">
+        <TreeItem
+            :icon="CONTENT_TYPE_ICON.book"
+            :label="bookTitle"
+            :class="$style.bookTitle"
+            @click="expanded = !expanded"
+        >
+            <MyIcon :class="$style.bookExpandIcon" name="plus" />
+        </TreeItem>
+        <div :class="$style.bookContributions">
+            <TreeItem
+                v-for="contribution in contributions"
+                :icon="CONTENT_TYPE_ICON[contribution.contentType]"
+                :label="contribution.contentTitle"
+                :link="contribution.contentLink"
+                :level="1"
+            />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" module>
+.bookContainer {
+    .bookTitle {
+        @include transition(color, background);
+    }
+
+    &.expanded .bookTitle {
+        color: var(--text);
+    }
+
+    .bookExpandIcon {
+        @include transition(transform);
+        transform: rotate(0deg);
+    }
+
+    &.expanded .bookExpandIcon {
+        transform: rotate(45deg);
+    }
+
+    .bookContributions {
+        overflow: hidden;
+        height: 0;
+        @include transition(height);
+    }
+
+    &.expanded .bookContributions {
+        height: auto;
+    }
+}
+</style>

package/app/components/aside/minor/topic/AsideMinorTopic.vue

@@ -1,32 +1,31 @@
-<script lang="ts" setup>
-import type { AsideMinorTopic } from '@shared/aside/minor';
-import { injectAsideData } from '@app/scripts/aside/minor/state';
-
-import TopicNav from './TopicNav.vue';
-import TopicToc from './TopicToc.vue';
-import TopicContributors from './TopicContributors.vue';
-
-const topicData = injectAsideData<AsideMinorTopic>();
-const contributePaneVisible = ref(false);
-
-watch(topicData, () => (contributePaneVisible.value = false));
-</script>
-
-<template>
-    <AsideMinorPane :class="$style.asideMinorTopic">
-        <TopicNav />
-        <TopicToc />
-        <TopicContributors v-if="topicData.contributors" />
-        <AsideMinorContribute
-            :fullContentId="topicData.fullContentId"
-            v-model:pane="contributePaneVisible"
-        />
-    </AsideMinorPane>
-</template>
-
-<style lang="scss" module>
-.asideMinorTopic {
-    display: flex;
-    flex-direction: column;
-}
-</style>
+<script lang="ts" setup>
+import type { AsideMinorTopic } from '@shared/aside/minor';
+import { injectAsideData } from '@app/scripts/aside/minor/state';
+
+import TopicNav from './TopicNav.vue';
+import TopicToc from './TopicToc.vue';
+import TopicContributors from './TopicContributors.vue';
+
+const topicData = injectAsideData<AsideMinorTopic>();
+const contributePaneVisible = ref(false);
+
+watch(topicData, () => {
+    contributePaneVisible.value = false;
+});
+</script>
+
+<template>
+    <AsideMinorPane :class="$style.asideMinorTopic">
+        <TopicNav />
+        <TopicToc />
+        <TopicContributors v-if="topicData.contributors" />
+        <AsideMinorContribute v-model:pane="contributePaneVisible" />
+    </AsideMinorPane>
+</template>
+
+<style lang="scss" module>
+.asideMinorTopic {
+    display: flex;
+    flex-direction: column;
+}
+</style>