Single page Modlist edit view

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    'plugin:vue/recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 2020
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  }
+}

assets/modList/components/Modlist.vue

@@ -0,0 +1,23 @@
+<template>
+    <form class="d-flex justify-content-center">
+        <div v-if="isLoading" class="spinner-grow text-primary" role="status">
+            <span class="sr-only">Loading...</span>
+        </div>
+        <template v-else>
+            <ModsTable></ModsTable>
+        </template>
+    </form>
+</template>
+
+<script>
+    import {mapState} from 'vuex';
+    import ModsTable from './ModsTable';
+
+    export default {
+        name: "Modlist",
+        components: {ModsTable},
+        computed: {
+            ...mapState(['isLoading'])
+        },
+    };
+</script>

assets/modList/components/ModsTable.vue

@@ -0,0 +1,19 @@
+<template>
+    <table>
+        <tr v-for="mod in mods" :key="mod.id">
+            <td>{{ mod.id }}</td>
+            <td>{{ mod.name }}</td>
+        </tr>
+    </table>
+</template>
+
+<script>
+    import {mapState} from 'vuex';
+
+    export default {
+        name: "ModsTable",
+        computed: {
+            ...mapState(['mods']),
+        },
+    };
+</script>

assets/modList/index.js

@@ -0,0 +1,14 @@
+import Vue from 'vue';
+import Modlist from './components/Modlist';
+import {createStore} from './store';
+
+new Vue({
+    el: "#modlist",
+    store: createStore(),
+    mounted() {
+        this.$store.dispatch('initStore');
+    },
+    render(createElement) {
+        return createElement(Modlist)
+    },
+});

assets/modList/store/actions.js

@@ -0,0 +1,19 @@
+import axios from 'axios';
+import * as types from './mutationTypes';
+
+export const fetchMods = ({ state, commit }) => {
+    return axios(state.modsEndpoint)
+        .then(({ data }) => commit(types.RECEIVE_MODS_SUCCESS, data))
+        .catch((error) => {
+            commit(types.RECEIVE_MODS_ERROR, error)
+            alert('Wystąpił błąd podczas pobierania modów');
+        });
+};
+
+export const initStore =  async ({ state, commit, dispatch }) => {
+    await Promise.all([
+        dispatch('fetchMods'),
+    ]);
+
+    commit(types.SET_LOADED);
+}

assets/modList/store/getters.js

@@ -0,0 +1,4 @@
+
+export const getServerMods = (state, getters) => {
+    return state.mods.filter(mod => mod.type === 'server_side');
+};

assets/modList/store/index.js

@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import * as actions from './actions';
+import * as getters from './getters';
+import mutations from './mutations';
+import state from './state';
+
+Vue.use(Vuex);
+
+export const createStore = () =>
+    new Vuex.Store({
+        strict: process.env.NODE_ENV !== 'production',
+        actions,
+        getters,
+        mutations,
+        state: state(),
+    });

assets/modList/store/mutationTypes.js

@@ -0,0 +1,6 @@
+
+export const SET_LOADED = 'SET_LOADED';
+
+export const RECEIVE_MODS_SUCCESS = 'RECEIVE_MODS_SUCCESS';
+export const RECEIVE_MODS_ERROR = 'RECEIVE_MODS_ERROR';
+

assets/modList/store/mutations.js

@@ -0,0 +1,10 @@
+import * as types from './mutationTypes';
+
+export default {
+    [types.SET_LOADED](state) {
+        state.isLoading = false;
+    },
+    [types.RECEIVE_MODS_SUCCESS](state, mods) {
+        state.mods = mods;
+    },
+};

assets/modList/store/state.js

@@ -0,0 +1,11 @@
+
+export default () => ({
+    modsEndpoint: '/api/mods',
+    modslistsEndpoint: '/api/mod-lists',
+
+    isLoading: true,
+    error: null,
+
+    mods: [],
+    modlist: null,
+});

config/api_platform/resources.yaml

@@ -1,6 +1,7 @@
 App\Entity\ModList\ModList:
     attributes:
         output: 'App\Api\Dto\ModListOutput'
+        pagination_enabled: false
 
     itemOperations:
         get:
@@ -14,3 +15,17 @@ App\Entity\ModList\ModList:
 
     collectionOperations:
         get: ~
+
+App\Entity\Mod\AbstractMod:
+    attributes:
+        output: 'App\Api\Dto\ModOutput'
+        pagination_enabled: false
+
+    itemOperations:
+        get:
+            path: '/mods/{id}'
+            output: 'App\Api\Dto\ModOutput'
+
+    collectionOperations:
+        get:
+            path: '/mods'