Shows Repository information in frontend. Still need to add updating …

…support.
wyatt-herkamp · Oct 25, 2021 · 8f0ebcc · 8f0ebcc
1 parent ef1421c
commit 8f0ebcc
Show file tree

Hide file tree

Showing 11 changed files with 558 additions and 1,151 deletions.
diff --git a/site/package-lock.json b/site/package-lock.json
diff --git a/site/package.json b/site/package.json
@@ -16,12 +16,13 @@
     "vue": "^3.2.19",
     "vue-axios": "^3.3.7",
     "vue-class-component": "^8.0.0-0",
+    "vue-color-kit": "^1.0.5",
     "vue-cookie-next": "^1.3.0",
     "vue-router": "^4.0.12",
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.1.0",
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
     "@vue/cli-plugin-babel": "~4.5.14",
     "@vue/cli-plugin-eslint": "~4.5.14",
@@ -32,7 +33,7 @@
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
-    "eslint": "^8.1.0",
+    "eslint": "^6.8.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.20.0",
     "prettier": "2.4.1",

diff --git a/site/src/backend/Response.ts b/site/src/backend/Response.ts
@@ -43,9 +43,10 @@ export interface SecurityRules {
   readers: Array<number>;
   deployers: Array<number>;
 }
+
 export interface Frontend {
-  active: boolean;
-  enabled: string;
+  page_provider: string;
+  enabled: boolean;
 }
 export interface BadgeSettings {
   style: string;

diff --git a/site/src/components/CreateRepo.vue b/site/src/components/CreateRepo.vue
@@ -65,7 +65,7 @@ export default defineComponent({
     const cookie = useCookie();
     const isLoading = ref(false);
 
-    const error = ref(null);
+    const error = ref("");
     let storages = ref(DEFAULT_STORAGE_LIST);
     const getStorage = async () => {
       isLoading.value = true;
@@ -75,7 +75,7 @@ export default defineComponent({
 
         isLoading.value = false;
       } catch (e) {
-        error.value = e;
+        error.value = "Error";
       }
     };
     getStorage();

diff --git a/site/src/components/Repositories.vue b/site/src/components/Repositories.vue
@@ -14,7 +14,7 @@
           <i class="el-icon-watermelon"></i>
           <template #title>Loading </template>
         </el-menu-item>
-        <div v-else-if="error != null">
+        <div v-else-if="error != ''">
           {{ error }} <button @click="getRepos">try again</button>
         </div>
         <el-menu-item
@@ -60,7 +60,7 @@ export default defineComponent({
     const isLoading = ref(false);
     const cookie = useCookie();
 
-    const error = ref(null);
+    const error = ref("");
     let repositories = ref(DEFAULT_REPO_LIST);
     const getRepos = async () => {
       isLoading.value = true;
@@ -70,7 +70,7 @@ export default defineComponent({
 
         isLoading.value = false;
       } catch (e) {
-        error.value = e;
+        error.value = "Error";
       }
     };
     getRepos();

diff --git a/site/src/components/Storages.vue b/site/src/components/Storages.vue
@@ -14,7 +14,7 @@
           <i class="el-icon-watermelon"></i>
           <template #title>Loading </template>
         </el-menu-item>
-        <div v-else-if="error != null">
+        <div v-else-if="error != ''">
           {{ error }} <button @click="getStorage">try again</button>
         </div>
         <el-menu-item
@@ -56,7 +56,7 @@ export default defineComponent({
     const cookie = useCookie();
     const isLoading = ref(false);
 
-    const error = ref(null);
+    const error = ref("");
     let storages = ref(DEFAULT_STORAGE_LIST);
     const getStorage = async () => {
       isLoading.value = true;
@@ -66,7 +66,7 @@ export default defineComponent({
 
         isLoading.value = false;
       } catch (e) {
-        error.value = e;
+        error.value = "Error";
       }
     };
     getStorage();

diff --git a/site/src/components/UpdateRepository.vue b/site/src/components/UpdateRepository.vue
@@ -6,7 +6,8 @@
     mode="horizontal"
   >
     <el-menu-item @click="tab = 0" index="0">General Settings</el-menu-item>
-    <el-menu-item @click="tab = 1" index="1">Security Settings</el-menu-item>
+    <el-menu-item @click="tab = 1" index="1">Frontend Settings</el-menu-item>
+    <el-menu-item @click="tab = 2" index="2">Security Settings</el-menu-item>
   </el-menu>
   <div v-if="tab == 0">
     <el-alert
@@ -17,6 +18,28 @@
     />
     <el-form label-position="top" :model="settingForm" label-width="120px">
       <el-form-item>
+        <el-form-item label="Name">
+          <el-input disabled v-model="$props.repo.name"></el-input>
+        </el-form-item>
+        <el-form-item label="Storage">
+          <el-input disabled v-model="storage.name"></el-input>
+        </el-form-item>
+        <el-form-item label="Type">
+          <el-input disabled v-model="$props.repo.repo_type"></el-input>
+        </el-form-item>
+        <el-form-item label="Created On">
+          <el-input disabled v-model="date"></el-input>
+        </el-form-item>
+        <el-form-item label="Active">
+          <el-switch v-model="settingForm.active" />
+        </el-form-item>
+        <el-form-item label="Repository Policy">
+          <el-select v-model="settingForm.policy">
+            <el-option label="Release" value="Release"></el-option>
+            <el-option label="Snapshot" value="Snapshot"></el-option>
+            <el-option label="Mixed" value="Mixed"></el-option>
+          </el-select>
+        </el-form-item>
         <!--Yeah, I know. But please don't judge -->
         <el-button disabled type="primary" @click="onSettingSubmit"
           >Update Settings</el-button
@@ -31,8 +54,54 @@
       type="error"
       closable="false"
     />
-    <el-form label-position="top" :model="settingForm" label-width="120px">
+    <el-form label-position="top" :model="frontendForm" label-width="120px">
+      <el-form-item>
+        <el-form-item label="Frontend Page Enabled">
+          <el-switch v-model="frontendForm.frontend_enabled" />
+        </el-form-item>
+        <el-form-item label="Page Provider">
+          <el-select v-model="frontendForm.frontend_page_provider">
+            <el-option label="README" value="README"></el-option>
+            <el-option label="None" value="None"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-divider></el-divider>
+        <el-form-item label="Badge Style ">
+          <el-select v-model="frontendForm.badge_style">
+            <el-option label="Flat" value="Flat"></el-option>
+            <el-option label="FlatSquare" value="FlatSquare"></el-option>
+            <el-option label="Plastic" value="Plastic"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="Badge Color ">
+          <el-color-picker  v-model="frontendForm.badge_color" />
+        </el-form-item>        
+        <el-form-item label="Badge Color ">
+          <el-color-picker v-model="frontendForm.badge_label_color" />
+        </el-form-item>
+
+        <!--Yeah, I know. But please don't judge -->
+        <el-button disabled type="primary" @click="onSettingSubmit"
+          >Update Frontend Settings</el-button
+        >
+      </el-form-item>
+    </el-form>
+  </div>
+  <div v-if="tab == 2">
+    <el-alert
+      v-if="settingForm.error.length != 0"
+      :title="settingForm.error"
+      type="error"
+      closable="false"
+    />
+    <el-form label-position="top" :model="securityForm" label-width="120px">
       <el-form-item>
+        <el-select v-model="securityForm.visibility">
+          <el-option label="Public" value="Public"></el-option>
+          <el-option label="Private" value="Private"></el-option>
+          <el-option label="Hidden" value="Hidden"></el-option>
+        </el-select>
+
         <!--Yeah, I know. But please don't judge -->
         <el-button disabled type="primary" @click="onSettingSubmit"
           >Update Security Settings</el-button
@@ -73,18 +142,28 @@ export default defineComponent({
       policy: props.repo.settings.policy,
       error: "",
     });
+    let frontendForm = ref({
+      frontend_enabled: props.repo.settings.frontend.enabled,
+      frontend_page_provider: props.repo.settings.frontend.page_provider,
+      badge_style: props.repo.settings.badge.style,
+      badge_label_color: props.repo.settings.badge.label_color,
+      badge_color: props.repo.settings.badge.color,
+
+      error: "",
+    });
     let securityForm = ref({
       open_to_all_deployers: props.repo.security.open_to_all_deployers,
       open_to_all_readers: props.repo.security.open_to_all_readers,
       visibility: props.repo.security.visibility,
       error: "",
     });
+    let date = new Date(props.repo.created).toLocaleDateString("en-US");
 
     const cookie = useCookie();
     const isLoading = ref(false);
     const tab = ref(0);
     const activeName = ref("first");
-    const error = ref(null);
+    const error = ref("");
     let storage = ref(DEFAULT_STORAGE);
     const getStorageByID = async () => {
       isLoading.value = true;
@@ -97,12 +176,20 @@ export default defineComponent({
 
         isLoading.value = false;
       } catch (e) {
-        error.value = e;
+        error.value = "";
       }
     };
     getStorageByID();
 
-    return { settingForm, securityForm, storage, tab, activeName };
+    return {
+      settingForm,
+      securityForm,
+      frontendForm,
+      storage,
+      tab,
+      activeName,
+      date,
+    };
   },
   methods: {
     async onSettingSubmit() {

diff --git a/site/src/components/Users.vue b/site/src/components/Users.vue
@@ -14,7 +14,7 @@
           <i class="el-icon-watermelon"></i>
           <template #title>Loading </template>
         </el-menu-item>
-        <div v-else-if="error != null">
+        <div v-else-if="error != ''">
           {{ error }} <button @click="getUser">try again</button>
         </div>
         <el-menu-item
@@ -56,7 +56,7 @@ export default defineComponent({
     const cookie = useCookie();
     const isLoading = ref(false);
 
-    const error = ref(null);
+    let error = ref("");
     let users = ref(DEFAULT_USER_LIST);
     const getUser = async () => {
       isLoading.value = true;
@@ -66,7 +66,7 @@ export default defineComponent({
 
         isLoading.value = false;
       } catch (e) {
-        error.value = e;
+        error.value="Error Loading";
       }
     };
     getUser();

diff --git a/site/src/main.ts b/site/src/main.ts
@@ -1,3 +1,4 @@
+ /* eslint-disable */ 
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";

diff --git a/site/src/views/Admin.vue b/site/src/views/Admin.vue
@@ -46,9 +46,8 @@
         <UpdateUser :user="userStore.state.user" :me="true" />
       </div>
       <div v-else-if="index == 5">
-        <h1>Settings</h1>
-        <p>Paragraph 1</p>
-        <p>Paragraph 2</p>
+        <Settings />
+
       </div>
     </el-container>
   </el-container>
@@ -59,11 +58,12 @@ import { defineComponent, onBeforeMount, onMounted, ref } from "vue";
 import Storages from "@/components/Storages.vue";
 import Users from "@/components/Users.vue";
 import Repositories from "@/components/Repositories.vue";
+import Settings from "@/components/Settings.vue";
 import UpdateUser from "@/components/UpdateUser.vue";
 import userStore from "@/store/user";
 
 export default defineComponent({
-  components: { Storages, Repositories, Users, UpdateUser },
+  components: { Storages, Repositories, Users, UpdateUser , Settings},
 
   setup() {
     let index = ref(4);

diff --git a/site/src/views/Login.vue b/site/src/views/Login.vue
@@ -18,7 +18,7 @@
           />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="onSubmit">Login</el-button>
+          <el-button type="primary" @click="onSubmit">Log In</el-button>
         </el-form-item>
       </el-form>
     </el-main>