Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add LocalModCard #1189

Merged
merged 1 commit into from
Jan 30, 2024
Merged

Add LocalModCard #1189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 16 additions & 104 deletions src/components/views/LocalModList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,95 +72,21 @@
@end="drag=false; $emit('sort-end')"
:force-fallback="true"
:scroll-sensitivity="100">
<expandable-card
v-for='(key, index) in draggableList' :key="`local-${key.getName()}-${profileName}-${index}-${cardExpanded}`"
@moveUp="moveUp(key)"
@moveDown="moveDown(key)"
:image="key.icon"
:id="index"
:description="key.description"
:funkyMode="funkyMode"
:showSort="canShowSortIcons"
<local-mod-card
v-for='(mod, index) in draggableList'
:key="`local-${mod.getName()}-${profileName}-${index}-${cardExpanded}`"
:mod="mod"
@disableMod="disableModRequireConfirmation"
@enableMod="enableMod"
@uninstallMod="uninstallModRequireConfirmation"
@updateMod="updateMod"
@viewDependencyList="viewDependencyList"
@downloadDependency="downloadDependency"
:disabledDependencies="getDisabledDependencies(mod)"
:missingDependencies="getMissingDependencies(mod)"
:expandedByDefault="cardExpanded"
:enabled="key.isEnabled()">
<template v-slot:title>
<span class="non-selectable">
<span v-if="key.isDeprecated()"
class="tag is-danger margin-right margin-right--half-width"
v-tooltip.right="'This mod is deprecated and could be broken'">
Deprecated
</span>
<span v-if="!key.isEnabled()"
class="tag is-warning margin-right margin-right--half-width"
v-tooltip.right="'This mod will not be used in-game'">
Disabled
</span>
<span class="card-title selectable">
<component :is="key.isEnabled() ? 'span' : 'strike'" class="selectable">
{{key.getDisplayName()}}
<span class="selectable card-byline">
v{{key.getVersionNumber()}}
</span>
<span :class="`card-byline ${key.isEnabled() && 'selectable'}`">
by {{key.getAuthorName()}}
</span>
</component>
</span>
</span>
</template>
<template v-slot:other-icons>
<!-- Show update and missing dependency icons -->
<span class='card-header-icon' v-if="getThunderstoreModFromMod(key) && getThunderstoreModFromMod(key).getDonationLink()">
<Link :url="getThunderstoreModFromMod(key).getDonationLink()" target="external" tag="span">
<i class='fas fa-heart' v-tooltip.left="'Donate to the mod author'"></i>
</Link>
</span>
<span class='card-header-icon'
@click.prevent.stop="updateMod(key)"
v-if="!isLatest(key)">
<i class='fas fa-cloud-upload-alt' v-tooltip.left="'An update is available'"></i>
</span>
<span class='card-header-icon'
v-if="getDisabledDependencies(key).length > 0 || getMissingDependencies(key).length > 0">
<i class='fas fa-exclamation-circle' v-tooltip.left="`There is an issue with the dependencies for this mod`"></i>
</span>
<span class='card-header-icon'
@click.prevent.stop="() => key.isEnabled() ? disableModRequireConfirmation(key) : enableMod(key)">
<div class="field">
<input id="switchExample" type="checkbox" name="switchExample" :class='`switch is-small ${key.isEnabled() ? "switch is-info" : ""}`' :checked="key.isEnabled()">
<label for="switchExample" v-tooltip.left="key.isEnabled() ? 'Disable' : 'Enable'"></label>
</div>
</span>
</template>
<a class='card-footer-item'
@click="uninstallModRequireConfirmation(key)">Uninstall</a>
<template>
<a class='card-footer-item' @click="disableModRequireConfirmation(key)"
v-if="key.enabled">Disable</a>
<a class='card-footer-item' @click="enableMod(key)" v-else>Enable</a>
</template>
<a class='card-footer-item' @click="viewDependencyList(key)">Associated</a>
<Link :url="key.getWebsiteUrl()"
:target="'external'"
class="card-footer-item">
Website
<i class="fas fa-external-link-alt margin-left margin-left--half-width"></i>
</Link>
<a class='card-footer-item' v-if="!isLatest(key)" @click="updateMod(key)">Update</a>
<a class='card-footer-item' v-if="getMissingDependencies(key).length > 0"
@click="downloadDependency(getMissingDependencies(key)[0])">
Download dependency
</a>
<a class='card-footer-item' v-if="getDisabledDependencies(key).length > 0"
@click="enableMod(getDisabledDependencies(key)[0])">
Enable {{getDisabledDependencies(key)[0].getDisplayName()}}
</a>
<template v-if="getThunderstoreModFromMod(key) !== undefined">
<template v-if="getThunderstoreModFromMod(key).getDonationLink() !== undefined">
<DonateButton :mod="getThunderstoreModFromMod(key)"/>
</template>
</template>
</expandable-card>
:showSort="canShowSortIcons"
:funkyMode="funkyMode" />
</draggable>

<slot name="below-list"></slot>
Expand All @@ -183,8 +109,6 @@ import ProfileInstallerProvider from '../../providers/ror2/installing/ProfileIns
import LoggerProvider, { LogSeverity } from '../../providers/ror2/logging/LoggerProvider';
import Profile from '../../model/Profile';
import ThunderstoreMod from '../../model/ThunderstoreMod';
import DownloadModModal from './DownloadModModal.vue';
import { ExpandableCard, Link, Modal } from '../all';
import ModListSort from '../../r2mm/mods/ModListSort';
import { SortDirection } from '../../model/real_enums/sort/SortDirection';
import { SortLocalDisabledMods } from '../../model/real_enums/sort/SortLocalDisabledMods';
Expand All @@ -193,23 +117,19 @@ import GameManager from '../../model/game/GameManager';
import Game from '../../model/game/Game';
import ConflictManagementProvider from '../../providers/generic/installing/ConflictManagementProvider';
import Draggable from 'vuedraggable';
import DonateButton from '../../components/buttons/DonateButton.vue';
import SearchUtils from '../../utils/SearchUtils';
import AssociatedModsModal from './LocalModList/AssociatedModsModal.vue';
import DisableModModal from './LocalModList/DisableModModal.vue';
import UninstallModModal from './LocalModList/UninstallModModal.vue';
import LocalModCard from './LocalModList/LocalModCard.vue';

@Component({
components: {
DonateButton,
DownloadModModal,
Link,
ExpandableCard,
Modal,
Draggable,
AssociatedModsModal,
DisableModModal,
UninstallModModal,
LocalModCard,
}
})
export default class LocalModList extends Vue {
Expand Down Expand Up @@ -305,10 +225,6 @@ import UninstallModModal from './LocalModList/UninstallModModal.vue';
});
}

getThunderstoreModFromMod(mod: ManifestV2) {
return ModBridge.getCachedThunderstoreModFromMod(mod);
}

async updateModListAfterChange(updatedList: ManifestV2[]) {
await this.$store.dispatch("updateModList", updatedList);

Expand Down Expand Up @@ -340,10 +256,6 @@ import UninstallModModal from './LocalModList/UninstallModModal.vue';
await this.updateModListAfterChange(updatedList);
}

isLatest(mod: ManifestV2): boolean {
return ModBridge.isCachedLatestVersion(mod);
}

getMissingDependencies(vueMod: any): string[] {
const mod: Mod = new Mod().fromReactive(vueMod);
return mod.getDependencies().filter((dependency: string) => {
Expand Down
183 changes: 183 additions & 0 deletions src/components/views/LocalModList/LocalModCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { ExpandableCard, Link } from '../../all';
import DonateButton from '../../buttons/DonateButton.vue';
import ManifestV2 from '../../../model/ManifestV2';
import ModBridge from '../../../r2mm/mods/ModBridge';

@Component({
components: {
DonateButton,
ExpandableCard,
Link,
}
})
export default class LocalModCard extends Vue {

@Prop({required: true})
readonly mod!: ManifestV2;

@Prop({required: true})
readonly disabledDependencies!: ManifestV2[];

@Prop({required: true})
readonly missingDependencies!: string[];

@Prop({required: true})
readonly expandedByDefault!: boolean;

@Prop({required: true})
readonly showSort!: boolean;

@Prop({required: true})
readonly funkyMode!: boolean;

get donationLink() {
return this.tsMod ? this.tsMod.getDonationLink() : undefined;
}

get isLatestVersion() {
return ModBridge.isCachedLatestVersion(this.mod);
}

get tsMod() {
return ModBridge.getCachedThunderstoreModFromMod(this.mod);
}

disableMod() {
this.$emit('disableMod', this.mod);
}

enableMod(mod: ManifestV2) {
this.$emit('enableMod', mod);
}

uninstallMod() {
this.$emit('uninstallMod', this.mod);
}

updateMod() {
this.$emit('updateMod', this.mod);
}

downloadDependency(dependency: string) {
this.$emit('downloadDependency', dependency);
}

viewDependencyList() {
this.$emit('viewDependencyList', this.mod);
}
}
</script>

<template>
<expandable-card
:description="mod.getDescription()"
:enabled="mod.isEnabled()"
:expandedByDefault="expandedByDefault"
:funkyMode="funkyMode"
:id="`${mod.getAuthorName()}-${mod.getName()}-${mod.getVersionNumber()}`"
:image="mod.getIcon()"
:showSort="showSort">

<template v-slot:title>
<span class="non-selectable">
<span v-if="mod.isDeprecated()"
class="tag is-danger margin-right margin-right--half-width"
v-tooltip.right="'This mod is deprecated and could be broken'">
Deprecated
</span>
<span v-if="!mod.isEnabled()"
class="tag is-warning margin-right margin-right--half-width"
v-tooltip.right="'This mod will not be used in-game'">
Disabled
</span>
<span class="card-title selectable">
<component :is="mod.isEnabled() ? 'span' : 'strike'" class="selectable">
{{mod.getDisplayName()}}
<span class="selectable card-byline">
v{{mod.getVersionNumber()}}
</span>
<span :class="`card-byline ${mod.isEnabled() && 'selectable'}`">
by {{mod.getAuthorName()}}
</span>
</component>
</span>
</span>
</template>

<template v-slot:other-icons>
<!-- Show update and missing dependency icons -->
<span v-if="donationLink" class='card-header-icon'>
<Link :url="donationLink" target="external" tag="span">
<i class='fas fa-heart' v-tooltip.left="'Donate to the mod author'"></i>
</Link>
</span>
<span v-if="!isLatestVersion"
@click.prevent.stop="updateMod()"
class='card-header-icon'>
<i class='fas fa-cloud-upload-alt' v-tooltip.left="'An update is available'"></i>
</span>
<span v-if="disabledDependencies.length || missingDependencies.length"
class='card-header-icon'>
<i v-tooltip.left="`There is an issue with the dependencies for this mod`"
class='fas fa-exclamation-circle'
></i>
</span>
<span @click.prevent.stop="() => mod.isEnabled() ? disableMod() : enableMod(mod)"
class='card-header-icon'>
<div class="field">
<input id="switchExample"
type="checkbox"
name="switchExample"
:class='`switch is-small ${mod.isEnabled() ? "switch is-info" : ""}`'
:checked="mod.isEnabled()" />
<label for="switchExample" v-tooltip.left="mod.isEnabled() ? 'Disable' : 'Enable'"></label>
</div>
</span>
</template>

<!-- Show bottom button row -->
<a @click="uninstallMod()" class='card-footer-item'>
Uninstall
</a>

<a v-if="mod.isEnabled()" @click="disableMod()" class='card-footer-item'>
Disable
</a>
<a v-else @click="enableMod(mod)" class='card-footer-item' >
Enable
</a>

<a @click="viewDependencyList()" class='card-footer-item'>
Associated
</a>

<Link :url="mod.getWebsiteUrl()" :target="'external'" class="card-footer-item">
Website
<i class="fas fa-external-link-alt margin-left margin-left--half-width"></i>
</Link>

<a v-if="!isLatestVersion" @click="updateMod()" class='card-footer-item'>
Update
</a>

<a v-if="missingDependencies.length"
@click="downloadDependency(missingDependencies[0])"
class='card-footer-item'>
Download dependency
</a>

<a v-if="disabledDependencies.length"
@click="enableMod(disabledDependencies[0])"
class='card-footer-item'>
Enable {{disabledDependencies[0].getDisplayName()}}
</a>

<DonateButton v-if="donationLink" :mod="tsMod"/>
</expandable-card>
</template>

<style scoped lang="scss">

</style>
Loading