Skip to content

Commit f0a15b4

Browse files
ahmedhamidawanahmedhamidawan
committed
add PortletSection component; use it to unify history accessibility tabs
1 parent 3f94448 commit f0a15b4

4 files changed

Lines changed: 66 additions & 50 deletions

File tree

‎client/src/components/Common/PortletSection.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script setup lang="ts">
2+
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
3+
import type { IconDefinition } from "font-awesome-6";
4+
5+
const props = defineProps<{
6+
icon?: IconDefinition;
7+
title?: string;
8+
}>();
9+
</script>
10+
11+
<template>
12+
<div class="ui-portlet-section">
13+
<div class="portlet-header">
14+
<span class="portlet-title">
15+
<FontAwesomeIcon v-if="props.icon" :icon="props.icon" class="portlet-title-icon mr-1" />
16+
17+
<b class="portlet-title-text">
18+
<slot name="title">
19+
{{ props.title }}
20+
</slot>
21+
</b>
22+
</span>
23+
</div>
24+
25+
<div class="portlet-content">
26+
<div class="mt-3">
27+
<slot />
28+
</div>
29+
</div>
30+
</div>
31+
</template>

‎client/src/components/Dataset/DatasetPermissionsForm.vue‎

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
<script lang="ts" setup>
2-
import { library } from "@fortawesome/fontawesome-svg-core";
32
import { faUsers } from "@fortawesome/free-solid-svg-icons";
4-
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
53
import { BFormCheckbox } from "bootstrap-vue";
64
import { ref, watch } from "vue";
75
6+
import PortletSection from "../Common/PortletSection.vue";
87
import FormGeneric from "@/components/Form/FormGeneric.vue";
98
import LoadingSpan from "@/components/LoadingSpan.vue";
109
1110
type FormGenericPropsType = InstanceType<typeof FormGeneric>["$props"];
1211
13-
library.add(faUsers);
14-
1512
interface DatasetPermissionsFormProps {
1613
loading: boolean;
1714
simplePermissions: boolean;
@@ -42,25 +39,15 @@ watch(props, () => {
4239
<div>
4340
<LoadingSpan v-if="loading" message="Loading permission information" />
4441
<div v-else-if="simplePermissions && !selectedAdvancedForm">
45-
<div class="ui-portlet-section">
46-
<div class="portlet-header">
47-
<span class="portlet-title">
48-
<FontAwesomeIcon :icon="faUsers" class="portlet-title-icon mr-1" />
49-
50-
<b itemprop="name" class="portlet-title-text">{{ title }}</b>
51-
</span>
42+
<PortletSection :icon="faUsers" :title="title">
43+
<div class="mb-3">
44+
<BFormCheckbox v-model="checkedInForm" name="check-button" switch @change="change">
45+
Make new datasets private
46+
</BFormCheckbox>
5247
</div>
5348

54-
<div class="portlet-content">
55-
<div class="mb-3 mt-3">
56-
<BFormCheckbox v-model="checkedInForm" name="check-button" switch @change="change">
57-
Make new datasets private
58-
</BFormCheckbox>
59-
</div>
60-
61-
<a href="#" @click="selectedAdvancedForm = true">Show advanced options.</a>
62-
</div>
63-
</div>
49+
<a href="javascript:void(0)" @click="selectedAdvancedForm = true">Show advanced options.</a>
50+
</PortletSection>
6451
</div>
6552
<div v-else>
6653
<FormGeneric v-bind="formConfig" />

‎client/src/components/History/HistoryAccessibility.vue‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useHistoryStore } from "@/stores/historyStore";
88
import localize from "@/utils/localization";
99
1010
import Heading from "../Common/Heading.vue";
11+
import PortletSection from "../Common/PortletSection.vue";
1112
import SharingPage from "../Sharing/SharingPage.vue";
1213
import HistoryDatasetPermissions from "./HistoryDatasetPermissions.vue";
1314
import HistoryMakePrivate from "./HistoryMakePrivate.vue";
@@ -57,7 +58,14 @@ function openSharingTab() {
5758
</BBadge>
5859
</template>
5960

60-
<SharingPage :id="props.historyId" plural-name="histories" model-class="History" no-heading />
61+
<PortletSection :icon="faShareAlt">
62+
<template v-slot:title>
63+
{{ localize("Share or publish history") }}
64+
"{{ historyStore.getHistoryNameById(props.historyId) }}"
65+
</template>
66+
67+
<SharingPage :id="props.historyId" plural-name="histories" model-class="History" no-heading />
68+
</PortletSection>
6169
</BTab>
6270

6371
<BTab :lazy="historyPrivacyChanged" @click="historyPrivacyChanged = false">

‎client/src/components/History/HistoryMakePrivate.vue‎

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script setup lang="ts">
22
import { faLock } from "@fortawesome/free-solid-svg-icons";
3-
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
43
import { computed } from "vue";
54
65
import { Toast } from "@/composables/toast";
@@ -9,6 +8,7 @@ import localize from "@/utils/localization";
98
import { errorMessageAsString } from "@/utils/simple-error";
109
1110
import AsyncButton from "../Common/AsyncButton.vue";
11+
import PortletSection from "../Common/PortletSection.vue";
1212
1313
const props = defineProps<{
1414
historyId: string;
@@ -43,31 +43,21 @@ async function makeHistoryPrivate() {
4343
</script>
4444

4545
<template>
46-
<div v-if="history" class="ui-portlet-section">
47-
<div class="portlet-header">
48-
<span class="portlet-title">
49-
<FontAwesomeIcon :icon="faLock" class="portlet-title-icon mr-1" />
50-
51-
<b class="portlet-title-text">
52-
{{ localize("Make history") }}
53-
"{{ history.name }}"
54-
{{ localize("private?") }}
55-
</b>
56-
</span>
57-
</div>
58-
59-
<div class="portlet-content">
60-
<div class="mt-3">
61-
<p v-localize>
62-
This will make all the data in this history private (excluding library datasets), and will set
63-
permissions such that all new data is created as private. Any datasets within that are currently
64-
shared will need to be re-shared or published. Are you sure you want to do this?
65-
</p>
66-
67-
<AsyncButton :icon="faLock" variant="primary" size="md" :action="makeHistoryPrivate">
68-
{{ localize("Make History Private") }}
69-
</AsyncButton>
70-
</div>
71-
</div>
72-
</div>
46+
<PortletSection :icon="faLock">
47+
<template v-slot:title>
48+
{{ localize("Make history") }}
49+
"{{ historyStore.getHistoryNameById(props.historyId) }}"
50+
{{ localize("private?") }}
51+
</template>
52+
53+
<p v-localize>
54+
This will make all the data in this history private (excluding library datasets), and will set permissions
55+
such that all new data is created as private. Any datasets within that are currently shared will need to be
56+
re-shared or published. Are you sure you want to do this?
57+
</p>
58+
59+
<AsyncButton :icon="faLock" :disabled="!history" variant="primary" size="md" :action="makeHistoryPrivate">
60+
{{ localize("Make History Private") }}
61+
</AsyncButton>
62+
</PortletSection>
7363
</template>

0 commit comments

Comments
 (0)
⚡