🙋‍♂️🔒 UserDetail - permission layout ui

ref #12

.drone.yml

@@ -4,18 +4,6 @@ type: docker
 name: build:dev
 
 steps:
-  - name: build dev
-    image: plugins/docker
-    depends_on: [clone]
-    settings:
-      username:
-        from_secret: DOCKER_REGISTRY_USER
-      password:
-        from_secret: DOCKER_REGISTRY_PASSWORD
-      repo: registry.odit.services/lfk/frontend
-      tags:
-        - dev
-      registry: registry.odit.services
   - name: run full license export
     depends_on: ["clone"]
     image: node:alpine
@@ -33,6 +21,18 @@ steps:
       remote: git@git.odit.services:lfk/frontend.git
       ssh_key:
         from_secret: GITLAB_SSHKEY
+  - name: build dev
+    image: plugins/docker
+    depends_on: [clone]
+    settings:
+      username:
+        from_secret: DOCKER_REGISTRY_USER
+      password:
+        from_secret: DOCKER_REGISTRY_PASSWORD
+      repo: registry.odit.services/lfk/frontend
+      tags:
+        - dev
+      registry: registry.odit.services
 
 trigger:
   branch:

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:15.4.0-alpine3.12
+FROM node:15.5.1-alpine3.12
 WORKDIR /app
 RUN npm i -g pnpm
 COPY package.json ./
@@ -11,6 +11,7 @@ RUN pnpm run build
 # final image
 FROM alpine
 COPY --from=0 /app/build /app
+RUN rm -rf build/sw.js.map build/workbox-*.js.map
 RUN rm -rf /app/build/_dist_/components
 RUN rm -rf /app/build/_dist_/locales
 RUN rm -rf /app/build-manifest.json

package.json

@@ -10,7 +10,7 @@
 		"licenses:export": "license-exporter --json -o public"
 	},
 	"dependencies": {
-		"@odit/lfk-client-js": "0.0.11",
+		"@odit/lfk-client-js": "0.0.12",
 		"filepond": "4.25.1",
 		"gridjs": "3.2.1",
 		"localforage": "1.9.0",
@@ -25,13 +25,13 @@
 	},
 	"devDependencies": {
 		"@odit/license-exporter": "0.0.9",
-		"@snowpack/plugin-svelte": "3.4.1",
+		"@snowpack/plugin-svelte": "3.5.1",
 		"auto-changelog": "^2.2.1",
 		"autoprefixer": "10.2.1",
 		"postcss": "8.2.4",
 		"postcss-load-config": "3.0.0",
 		"release-it": "^14.2.2",
-		"snowpack": "3.0.0-rc.2",
+		"snowpack": "3.0.10",
 		"svelte": "3.31.2",
 		"svelte-preprocess": "4.6.1",
 		"workbox-cli": "6.0.2"

public/licenses.json

@@ -1 +1 @@
-[{"author":"ODIT.Services","repo":{"type":"git","url":"git+https://git.odit.services/lfk/lfk-client-js"},"description":"A lib to interact with https://git.odit.services/lfk/backend. Use this version for native JS applications.","name":"@odit/lfk-client-js","license":"CC-BY-NC-SA-4.0","version":"0.0.10","licensetext":"Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Creative\r\nCommons Corporation (\"Creative Commons\") is not a law firm and does not provide\r\nlegal services or legal advice. Distribution of Creative Commons public licenses\r\ndoes not create a lawyer-client or other relationship. Creative Commons makes\r\nits licenses and related information available on an \"as-is\" basis. Creative\r\nCommons gives no warranties regarding its licenses, any material licensed\r\nunder their terms and conditions, or any related information. Creative Commons\r\ndisclaims all liability for damages resulting from their use to the fullest\r\nextent possible.\r\n\r\nUsing Creative Commons Public Licenses\r\n\r\nCreative Commons public licenses provide a standard set of terms and conditions\r\nthat creators and other rights holders may use to share original works of\r\nauthorship and other material subject to copyright and certain other rights\r\nspecified in the public license below. The following considerations are for\r\ninformational purposes only, are not exhaustive, and do not form part of our\r\nlicenses.\r\n\r\nConsiderations for licensors: Our public licenses are intended for use by\r\nthose authorized to give the public permission to use material in ways otherwise\r\nrestricted by copyright and certain other rights. Our licenses are irrevocable.\r\nLicensors should read and understand the terms and conditions of the license\r\nthey choose before applying it. Licensors should also secure all rights necessary\r\nbefore applying our licenses so that the public can reuse the material as\r\nexpected. Licensors should clearly mark any material not subject to the license.\r\nThis includes other CC-licensed material, or material used under an exception\r\nor limitation to copyright. More considerations for licensors : wiki.creativecommons.org/Considerations_for_licensors\r\n\r\nConsiderations for the public: By using one of our public licenses, a licensor\r\ngrants the public permission to use the licensed material under specified\r\nterms and conditions. If the licensor's permission is not necessary for any\r\nreason–for example, because of any applicable exception or limitation to copyright–then\r\nthat use is not regulated by the license. Our licenses grant only permissions\r\nunder copyright and certain other rights that a licensor has authority to\r\ngrant. Use of the licensed material may still be restricted for other reasons,\r\nincluding because others have copyright or other rights in the material. A\r\nlicensor may make special requests, such as asking that all changes be marked\r\nor described. Although not required by our licenses, you are encouraged to\r\nrespect those requests where reasonable. More considerations for the public\r\n: wiki.creativecommons.org/Considerations_for_licensees\r\n\r\nCreative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public\r\nLicense\r\n\r\nBy exercising the Licensed Rights (defined below), You accept and agree to\r\nbe bound by the terms and conditions of this Creative Commons Attribution-NonCommercial-ShareAlike\r\n4.0 International Public License (\"Public License\"). To the extent this Public\r\nLicense may be interpreted as a contract, You are granted the Licensed Rights\r\nin consideration of Your acceptance of these terms and conditions, and the\r\nLicensor grants You such rights in consideration of benefits the Licensor\r\nreceives from making the Licensed Material available under these terms and\r\nconditions.\r\n\r\nSection 1 – Definitions.\r\n\r\na. Adapted Material means material subject to Copyright and Similar Rights\r\nthat is derived from or based upon the Licensed Material and in which the\r\nLicensed Material is translated, altered, arranged, transformed, or otherwise\r\nmodified in a manner requiring permission under the Copyright and Similar\r\nRights held by the Licensor. For purposes of this Public License, where the\r\nLicensed Material is a musical work, performance, or sound recording, Adapted\r\nMaterial is always produced where the Licensed Material is synched in timed\r\nrelation with a moving image.\r\n\r\nb. Adapter's License means the license You apply to Your Copyright and Similar\r\nRights in Your contributions to Adapted Material in accordance with the terms\r\nand conditions of this Public License.\r\n\r\nc. BY-NC-SA Compatible License means a license listed at creativecommons.org/compatiblelicenses,\r\napproved by Creative Commons as essentially the equivalent of this Public\r\nLicense.\r\n\r\nd. Copyright and Similar Rights means copyright and/or similar rights closely\r\nrelated to coLine truncated
+[{"author":"ODIT.Services","repo":{"type":"git","url":"git+https://git.odit.services/lfk/lfk-client-js"},"description":"A lib to interact with https://git.odit.services/lfk/backend. Use this version for native JS applications.","name":"@odit/lfk-client-js","license":"CC-BY-NC-SA-4.0","version":"0.0.12","licensetext":"Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Creative\r\nCommons Corporation (\"Creative Commons\") is not a law firm and does not provide\r\nlegal services or legal advice. Distribution of Creative Commons public licenses\r\ndoes not create a lawyer-client or other relationship. Creative Commons makes\r\nits licenses and related information available on an \"as-is\" basis. Creative\r\nCommons gives no warranties regarding its licenses, any material licensed\r\nunder their terms and conditions, or any related information. Creative Commons\r\ndisclaims all liability for damages resulting from their use to the fullest\r\nextent possible.\r\n\r\nUsing Creative Commons Public Licenses\r\n\r\nCreative Commons public licenses provide a standard set of terms and conditions\r\nthat creators and other rights holders may use to share original works of\r\nauthorship and other material subject to copyright and certain other rights\r\nspecified in the public license below. The following considerations are for\r\ninformational purposes only, are not exhaustive, and do not form part of our\r\nlicenses.\r\n\r\nConsiderations for licensors: Our public licenses are intended for use by\r\nthose authorized to give the public permission to use material in ways otherwise\r\nrestricted by copyright and certain other rights. Our licenses are irrevocable.\r\nLicensors should read and understand the terms and conditions of the license\r\nthey choose before applying it. Licensors should also secure all rights necessary\r\nbefore applying our licenses so that the public can reuse the material as\r\nexpected. Licensors should clearly mark any material not subject to the license.\r\nThis includes other CC-licensed material, or material used under an exception\r\nor limitation to copyright. More considerations for licensors : wiki.creativecommons.org/Considerations_for_licensors\r\n\r\nConsiderations for the public: By using one of our public licenses, a licensor\r\ngrants the public permission to use the licensed material under specified\r\nterms and conditions. If the licensor's permission is not necessary for any\r\nreason–for example, because of any applicable exception or limitation to copyright–then\r\nthat use is not regulated by the license. Our licenses grant only permissions\r\nunder copyright and certain other rights that a licensor has authority to\r\ngrant. Use of the licensed material may still be restricted for other reasons,\r\nincluding because others have copyright or other rights in the material. A\r\nlicensor may make special requests, such as asking that all changes be marked\r\nor described. Although not required by our licenses, you are encouraged to\r\nrespect those requests where reasonable. More considerations for the public\r\n: wiki.creativecommons.org/Considerations_for_licensees\r\n\r\nCreative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public\r\nLicense\r\n\r\nBy exercising the Licensed Rights (defined below), You accept and agree to\r\nbe bound by the terms and conditions of this Creative Commons Attribution-NonCommercial-ShareAlike\r\n4.0 International Public License (\"Public License\"). To the extent this Public\r\nLicense may be interpreted as a contract, You are granted the Licensed Rights\r\nin consideration of Your acceptance of these terms and conditions, and the\r\nLicensor grants You such rights in consideration of benefits the Licensor\r\nreceives from making the Licensed Material available under these terms and\r\nconditions.\r\n\r\nSection 1 – Definitions.\r\n\r\na. Adapted Material means material subject to Copyright and Similar Rights\r\nthat is derived from or based upon the Licensed Material and in which the\r\nLicensed Material is translated, altered, arranged, transformed, or otherwise\r\nmodified in a manner requiring permission under the Copyright and Similar\r\nRights held by the Licensor. For purposes of this Public License, where the\r\nLicensed Material is a musical work, performance, or sound recording, Adapted\r\nMaterial is always produced where the Licensed Material is synched in timed\r\nrelation with a moving image.\r\n\r\nb. Adapter's License means the license You apply to Your Copyright and Similar\r\nRights in Your contributions to Adapted Material in accordance with the terms\r\nand conditions of this Public License.\r\n\r\nc. BY-NC-SA Compatible License means a license listed at creativecommons.org/compatiblelicenses,\r\napproved by Creative Commons as essentially the equivalent of this Public\r\nLicense.\r\n\r\nd. Copyright and Similar Rights means copyright and/or similar rights closely\r\nrelated to coLine truncated

snowpack.config.js

@@ -5,10 +5,11 @@ module.exports = {
 		src: '/_dist_'
 	},
 	plugins: [ '@snowpack/plugin-svelte' ],
-	install: [
-		/* ... */
+	routes: [
+		/* Enable an SPA Fallback in development: */
+		{ match: 'routes', src: '.*', dest: '/index.html' }
 	],
-	installOptions: {
+	packageOptions: {
 		/* ... */
 		sourceMap: false
 	},
@@ -18,13 +19,8 @@ module.exports = {
 	buildOptions: {
 		/* ... */
 	},
-	proxy: {
-		/* ... */
-	},
 	alias: {
 		/* ... */
 	},
-	experiments: {
-		optimize: { bundle: true, minify: true }
-	}
+	optimize: { bundle: true, minify: true }
 };

src/App.svelte

@@ -49,7 +49,7 @@
   OpenAPI.BASE = config.baseurl;
   import { register as registerSW } from "./swmodule";
   store.init();
-  registerSW();
+  // registerSW();
 </script>
 
 <Route>

src/components/Dashboard.svelte

@@ -24,19 +24,40 @@
       )
         check = true;
     })(navigator.userAgent || navigator.vendor || window.opera);
+    const aspectratio=window.innerWidth/window.innerHeight;
+    if(aspectratio<=0.765){
+      check=true;
+    }
     return check;
   }
   $: mobile = ismobile();
+  window.addEventListener('resize', function(){
+    const aspectratio=window.innerWidth/window.innerHeight;
+    if(aspectratio<=0.765){
+      navOpen=false;
+      mobile=true;
+    }else{
+      navOpen=true;
+      mobile=false;
+
+    }
+  });
+//   $: if (mobile===true) {
+//     console.log("changed to mobile");
+// }
+//   $: if (mobile===false) {
+//     console.log("changed to md");
+// }
   function logout() {
     localForage.clear();
     location.replace("/");
   }
 </script>
 
-<section class="min-h-screen bg-gray-50 dark:bg-black dark:text-gray-100">
+<section class="min-h-screen bg-gray-50">
   <nav
     class:hidden={!navOpen && mobile}
-    class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 md:translate-x-0">
+    class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 md:translate-x-0 bg-gray-50">
     <a href="/" class="flex items-center px-4 py-5">
       <img
         src="/lfk-logo.png"

src/components/UserDetail.svelte

@@ -43,6 +43,20 @@
       allpermissions=allpermissions.concat([p.target + ":" + p.action])
     });
   });
+  // editable_userdata.permissions=[];
+  const user_permissions = UserService.userControllerGetPermissions(params.userid).then((val) => {
+  // console.log(val);
+  editable_userdata.permissions=[]
+  val.directlyGranted.forEach(p => {
+    editable_userdata.permissions=editable_userdata.permissions.concat([p.target + ":" + p.action])
+  });
+  val.inherited.forEach(p => {
+    editable_userdata.permissions=editable_userdata.permissions.concat([p.target + ":" + p.action])
+  });
+  // editable_userdata.permissions.push()
+  // console.log(val.directlyGranted);
+  // console.log(val.inherited);
+  })
   $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
   $: groups_changed = JSON.stringify(usergroups_array)===JSON.stringify(usergroups_array_original);
   $: save_enabled = changes_performed||!groups_changed;
@@ -171,18 +185,24 @@
         {/if}
       </span>
     </div>
-    <div class="mt-2 flex items-center">
+    <div class="mt-3 text-sm w-full">
+      <p
+        class="ml-1 font-medium text-gray-700">Profile Picture</p>
       <img
         alt={$_('profile-picture')}
-        class="inline-block h-20 w-20 rounded-full overflow-hidden bg-gray-100"
+        class="h-20 w-20 rounded-full overflow-hidden bg-gray-100"
         src={editable_userdata.profilePic} />
-      <button
+      <!-- <button
         type="button"
-        class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button>
+        class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button> -->
     </div>
     <!--  -->
     <div class="mt-3 text-sm w-full">
-      <input
+      <label
+        for="enabled"
+        class="ml-1 font-medium text-gray-700">Active?</label>
+        <br>
+      <p class="text-gray-500"> <input
         id="enabled"
         on:change={() => {
           editable_userdata.enabled = !editable_userdata.enabled;
@@ -191,11 +211,7 @@
         name="enabled"
         type="checkbox"
         checked={editable_userdata.enabled}
-        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-      <label
-        for="enabled"
-        class="ml-1 font-medium text-gray-700">Active?</label>
-      <p class="text-gray-500">set the user active/ inactive</p>
+        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />  set the user active/ inactive</p>
     </div>
     <div class="text-sm w-full">
       <label
@@ -291,8 +307,8 @@
                 class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
                 {#each allpermissions as p}
                   {#if !editable_userdata.permissions.includes(p)}
-                    <p
-                      class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
+                    <div
+                      class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input text-right">
                       {p}
                       <button
                         on:click={() => {
@@ -300,8 +316,8 @@
                           editable_userdata.permissions = editable_userdata.permissions;
                         }}
                         type="button"
-                        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 text-base font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">+</button>
-                    </p>
+                        class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">+</button>
+                    </div>
                   {/if}
                 {/each}
               </div>
@@ -311,16 +327,16 @@
                 class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
                 {#each allpermissions as p}
                   {#if editable_userdata.permissions.includes(p)}
-                    <p
-                      class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
-                      {p}
-                      <button
+                    <div
+                      class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input text-left">
+                        <button
                         on:click={() => {
                           editable_userdata.permissions = editable_userdata.permissions.filter((obj) => obj !== p);
                         }}
                         type="button"
-                        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-300 text-base font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>
-                    </p>
+                        class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-400 font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>
+                      {p}
+                    </div>
                   {/if}
                 {/each}
               </div>

src/components/UsersOverview.svelte

@@ -33,17 +33,17 @@
     {#if current_users.length === 0}
       <UsersEmptyState />
     {:else}
-      {#if advanced_search}
+      <!-- {#if advanced_search}
         advanced search
-      {:else}
+      {:else} -->
         <input
           type="search"
           bind:value={searchvalue}
           placeholder={$_('datatable.search')}
           aria-label={$_('datatable.search')}
           class="gridjs-input gridjs-search-input mb-4" />
-      {/if}
-      <button
+      <!-- {/if} -->
+      <!-- <button
         on:click={() => {
           advanced_search = !advanced_search;
         }}
@@ -52,7 +52,7 @@
         {#if advanced_search}
           toggle simple search
         {:else}toggle advanced search{/if}
-      </button>
+      </button> -->
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">