Skip to content

Commit

Permalink
refactor changes to use explicit bootstrap components etc
Browse files Browse the repository at this point in the history
Also, use imported icons instead of string icons for `FontAwesomeIcon`s
  • Loading branch information
root authored and ahmedhamidawan committed Feb 20, 2024
1 parent 59f43f6 commit 373c189
Show file tree
Hide file tree
Showing 9 changed files with 123 additions and 103 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,14 @@ const props = withDefaults(
lastChecked: Date;
filterText?: string;
showControls?: boolean;
hideReload?: boolean;
}>(),
{
isWatching: false,
lastChecked: () => new Date(),
filterText: "",
showControls: false,
hideReload: false,
}
);
Expand Down Expand Up @@ -191,6 +193,7 @@ onMounted(() => {
</BButton>

<BButton
v-if="!hideReload"
v-b-tooltip.hover
:title="reloadButtonTitle"
:variant="reloadButtonVariant"
Expand All @@ -216,3 +219,9 @@ onMounted(() => {
</BButtonGroup>
</div>
</template>

<style lang="scss" scoped>
.btn {
white-space: nowrap;
}
</style>
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<script setup lang="ts">
import { BBadge } from "bootstrap-vue";
import type { HistorySummary } from "@/api";
import { useHistoryStore } from "@/stores/historyStore";
Expand Down Expand Up @@ -47,10 +49,10 @@ function onSave(newDetails: HistorySummary) {
no-expand />
</template>
<template v-if="summarized" v-slot:update-time>
<b-badge v-b-tooltip pill>
<BBadge v-b-tooltip pill>
<span v-localize>last edited </span>
<UtcDate v-if="history.update_time" :date="history.update_time" mode="elapsed" />
</b-badge>
</BBadge>
</template>
</DetailsLayout>
</template>
70 changes: 29 additions & 41 deletions client/src/components/History/CurrentHistory/HistoryPanel.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<script setup lang="ts">
import { BAlert } from "bootstrap-vue";
import { storeToRefs } from "pinia";
import { GetComponentPropTypes } from "types/utilityTypes";
import { computed, onMounted, PropType, ref, set as VueSet, unref, watch } from "vue";
import { computed, onMounted, ref, set as VueSet, unref, watch } from "vue";
import { copyDataset } from "@/api/datasets";
import ExpandedItems from "@/components/History/Content/ExpandedItems";
Expand Down Expand Up @@ -41,35 +42,23 @@ interface BackendFilterError {
ValueError?: string;
}
const props = defineProps({
listOffset: {
type: Number,
default: 0,
},
history: {
type: Object as PropType<Record<string, any> & GetComponentPropTypes<typeof HistoryCounter>["history"]>,
required: true,
},
filter: {
type: String,
default: "",
},
canEditHistory: {
type: Boolean,
default: true,
},
shouldShowControls: {
type: Boolean,
default: true,
},
filterable: {
type: Boolean,
default: false,
},
isMultiViewItem: {
type: Boolean,
default: false,
},
interface Props {
listOffset?: number;
history: Record<string, any> & GetComponentPropTypes<typeof HistoryCounter>["history"];
filter?: string;
canEditHistory?: boolean;
shouldShowControls?: boolean;
filterable?: boolean;
isMultiViewItem?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
listOffset: 0,
filter: "",
canEditHistory: true,
shouldShowControls: true,
filterable: false,
isMultiViewItem: false,
});
const filterClass = HistoryFilters;
Expand All @@ -80,7 +69,7 @@ const offsetQueryParam = ref(0);
const searchError = ref<BackendFilterError | undefined>(undefined);
const showAdvanced = ref(false);
const showDropZone = ref(false);
const operationRunning = ref(null);
const operationRunning = ref<string | null>(null);
const operationError = ref(null);
const querySelectionBreak = ref(false);
const dragTarget = ref<EventTarget | null>(null);
Expand All @@ -92,7 +81,7 @@ const historyStore = useHistoryStore();
const historyItemsStore = useHistoryItemsStore();
const historyUpdateTime = computed(() => {
return props.history.update_time as Date;
return props.history.update_time;
});
const queryKey = computed(() => {
Expand Down Expand Up @@ -412,6 +401,7 @@ onMounted(async () => {
:last-checked="lastCheckedTime"
:show-controls="shouldShowControls"
:filter-text.sync="filterText"
:hide-reload="isMultiViewItem"
@reloadContents="reloadContents" />

<HistoryOperations
Expand Down Expand Up @@ -457,25 +447,23 @@ onMounted(async () => {
<HistoryDropZone v-if="showDropZone" />
<div>
<div v-if="isLoading && historyItems && historyItems.length === 0">
<b-alert class="m-2" variant="info" show>
<BAlert class="m-2" variant="info" show>
<LoadingSpan message="Loading History" />
</b-alert>
</BAlert>
</div>
<b-alert v-else-if="isProcessing" class="m-2" variant="info" show>
<BAlert v-else-if="isProcessing" class="m-2" variant="info" show>
<LoadingSpan message="Processing operation" />
</b-alert>
</BAlert>
<div v-else-if="historyItems.length === 0">
<HistoryEmpty v-if="queryDefault" :writable="canEditHistory" class="m-2" />

<b-alert v-else-if="formattedSearchError" class="m-2" variant="danger" show>
<BAlert v-else-if="formattedSearchError" class="m-2" variant="danger" show>
Error in filter:
<a href="javascript:void(0)" @click="showAdvanced = true">
{{ formattedSearchError.filter }}'{{ formattedSearchError.value }}'
</a>
</b-alert>
<b-alert v-else class="m-2" variant="info" show>
No data found for selected filter.
</b-alert>
</BAlert>
<BAlert v-else class="m-2" variant="info" show> No data found for selected filter. </BAlert>
</div>
<ListingLayout
v-else
Expand Down
56 changes: 33 additions & 23 deletions client/src/components/History/HistoryScrollList.vue
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<script setup lang="ts">
import { library } from "@fortawesome/fontawesome-svg-core";
import { faListAlt } from "@fortawesome/free-regular-svg-icons";
import { faArrowDown, faCheckSquare, faColumns, faSignInAlt, faSquare } from "@fortawesome/free-solid-svg-icons";
import { faCheckSquare, faListAlt, faSquare } from "@fortawesome/free-regular-svg-icons";
import { faArrowDown, faColumns, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { useInfiniteScroll } from "@vueuse/core";
import { BBadge, BButton, BButtonGroup, BListGroup, BListGroupItem } from "bootstrap-vue";
import { BAlert, BBadge, BButton, BButtonGroup, BListGroup, BListGroupItem, BOverlay } from "bootstrap-vue";
import { storeToRefs } from "pinia";
import { computed, onMounted, onUnmounted, type PropType, type Ref, ref, watch } from "vue";
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
import { useRouter } from "vue-router/composables";
import type { HistoryDetailed, HistorySummary } from "@/api";
Expand All @@ -27,14 +27,24 @@ import UtcDate from "@/components/UtcDate.vue";
type AdditionalOptions = "set-current" | "multi" | "center";
type PinnedHistory = { id: string };
const props = defineProps({
multiple: { type: Boolean, default: false },
selectedHistories: { type: Array as PropType<PinnedHistory[]>, default: () => [] },
additionalOptions: { type: Array as PropType<AdditionalOptions[]>, default: () => [] },
showModal: { type: Boolean, default: false },
inModal: { type: Boolean, default: false },
filter: { type: String, default: "" },
loading: { type: Boolean, default: false },
interface Props {
multiple?: boolean;
selectedHistories?: PinnedHistory[];
additionalOptions?: AdditionalOptions[];
showModal?: boolean;
inModal?: boolean;
filter: string;
loading: boolean;
}
const props = withDefaults(defineProps<Props>(), {
multiple: false,
selectedHistories: () => [],
additionalOptions: () => [],
showModal: false,
inModal: false,
filter: "",
loading: false,
});
const emit = defineEmits<{
Expand All @@ -48,7 +58,7 @@ library.add(faColumns, faSignInAlt, faListAlt, faArrowDown, faCheckSquare, faSqu
const busy = ref(false);
const showAdvanced = ref(false);
const scrollableDiv: Ref<HTMLElement | null> = ref(null);
const scrollableDiv = ref<HTMLElement | null>(null);
const historyStore = useHistoryStore();
const { currentHistoryId, histories, totalHistoryCount, pinnedHistories } = storeToRefs(historyStore);
Expand Down Expand Up @@ -109,7 +119,7 @@ watch(
);
/** `historyStore` histories for current user */
const historiesProxy: Ref<HistorySummary[]> = ref([]);
const historiesProxy = ref<HistorySummary[]>([]);
watch(
() => histories.value as HistoryDetailed[],
(h: HistoryDetailed[]) => {
Expand All @@ -122,7 +132,7 @@ watch(
}
);
const filtered: Ref<HistorySummary[]> = computed(() => {
const filtered = computed<HistorySummary[]>(() => {
let filteredHistories: HistorySummary[] = [];
if (!validFilter.value) {
filteredHistories = historiesProxy.value;
Expand Down Expand Up @@ -215,7 +225,7 @@ async function loadMore(noScroll = false) {
<BBadge v-if="props.filter && !validFilter" class="alert-danger w-100 mb-2">
Search string too short!
</BBadge>
<b-alert v-else-if="!busy && hasNoResults" class="mb-2" variant="danger" show>No histories found.</b-alert>
<BAlert v-else-if="!busy && hasNoResults" class="mb-2" variant="danger" show>No histories found.</BAlert>
</div>

<div
Expand Down Expand Up @@ -303,7 +313,7 @@ async function loadMore(noScroll = false) {
variant="link"
class="p-0 px-1"
@click.stop="() => setCurrentHistory(history)">
<FontAwesomeIcon icon="fa-sign-in-alt" />
<FontAwesomeIcon :icon="faSignInAlt" />
</BButton>

<BButton
Expand All @@ -313,7 +323,7 @@ async function loadMore(noScroll = false) {
variant="link"
class="p-0 px-1"
@click.stop="() => openInMulti(history)">
<FontAwesomeIcon icon="fa-columns" />
<FontAwesomeIcon :icon="faColumns" />
</BButton>

<BButton
Expand All @@ -323,22 +333,22 @@ async function loadMore(noScroll = false) {
variant="link"
class="p-0 px-1"
@click.stop="() => setCenterPanelHistory(history)">
<FontAwesomeIcon icon="far fa-list-alt" />
<FontAwesomeIcon :icon="faListAlt" />
</BButton>
</BButtonGroup>
</div>
</div>
<div v-if="isMultiviewPanel">
<FontAwesomeIcon v-if="isActiveItem(history)" :icon="['far', 'check-square']" size="lg" />
<FontAwesomeIcon v-else :icon="['far', 'square']" size="lg" />
<FontAwesomeIcon v-if="isActiveItem(history)" :icon="faCheckSquare" size="lg" />
<FontAwesomeIcon v-else :icon="faSquare" size="lg" />
</div>
</BListGroupItem>
<div>
<div v-if="allLoaded || props.filter !== ''" class="list-end my-2">
<span v-if="filtered.length == 1">- {{ filtered.length }} history loaded -</span>
<span v-else-if="filtered.length > 1">- All {{ filtered.length }} histories loaded -</span>
</div>
<b-overlay :show="busy" opacity="0.5" />
<BOverlay :show="busy" opacity="0.5" />
</div>
</BListGroup>
</div>
Expand All @@ -359,7 +369,7 @@ async function loadMore(noScroll = false) {
:title="localize('Load More')"
variant="link"
@click="loadMore()">
<FontAwesomeIcon icon="fa-arrow-down" />
<FontAwesomeIcon :icon="faArrowDown" />
</BButton>
</div>

Expand Down
1 change: 1 addition & 0 deletions client/src/components/History/Layout/DetailsLayout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,7 @@ function selectText() {
.summarized-details {
min-height: 8.5em;
margin: 1rem 1rem 0 1rem;
max-width: 15rem;
.tags {
min-height: 2rem;
Expand Down
26 changes: 17 additions & 9 deletions client/src/components/History/Modals/SelectorModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { BButton, BFormGroup, BModal } from "bootstrap-vue";
import { orderBy } from "lodash";
import isEqual from "lodash.isequal";
import { storeToRefs } from "pinia";
import { computed, type PropType, type Ref, ref, watch } from "vue";
import { computed, ref, watch } from "vue";
import type { HistorySummary } from "@/api";
import { HistoriesFilters } from "@/components/History/HistoriesFilters";
Expand All @@ -17,12 +17,20 @@ import HistoryList from "@/components/History/HistoryScrollList.vue";
type AdditionalOptions = "set-current" | "multi" | "center";
type PinnedHistory = { id: string };
const props = defineProps({
multiple: { type: Boolean, default: false },
title: { type: String, default: "Switch to history" },
histories: { type: Array as PropType<HistorySummary[]>, default: () => [] },
additionalOptions: { type: Array as PropType<AdditionalOptions[]>, default: () => [] },
showModal: { type: Boolean, default: false },
interface Props {
multiple?: boolean;
title?: string;
histories: HistorySummary[];
additionalOptions?: AdditionalOptions[];
showModal: boolean;
}
const props = withDefaults(defineProps<Props>(), {
multiple: false,
title: "Switch to history",
histories: () => [],
additionalOptions: () => [],
showModal: false,
});
const emit = defineEmits<{
Expand All @@ -40,11 +48,11 @@ const propShowModal = computed({
},
});
const selectedHistories: Ref<PinnedHistory[]> = ref([]);
const selectedHistories = ref<PinnedHistory[]>([]);
const filter = ref("");
const busy = ref(false);
const showAdvanced = ref(false);
const modal: Ref<BModal | null> = ref(null);
const modal = ref<BModal | null>(null);
const { pinnedHistories } = storeToRefs(useHistoryStore());
Expand Down
Loading

0 comments on commit 373c189

Please sign in to comment.