normalize template parameters from database

app/corpora/routes.py

@@ -54,7 +54,7 @@ def create_corpus():
 def corpus(corpus_id):
     corpus = Corpus.query.get_or_404(corpus_id)
     corpus_follower_roles = CorpusFollowerRole.query.all()
-    users = [u.to_json_serializeable() for u in User.query.filter(User.is_public == True, User.id != current_user.id).all()]
+    users = User.query.filter(User.is_public == True, User.id != current_user.id).all()
     # TODO: Add URL query option to toggle view
     if corpus.user == current_user or current_user.is_administrator():
         return render_template(
@@ -66,14 +66,10 @@ def corpus(corpus_id):
         )
     if current_user.is_following_corpus(corpus) or corpus.is_public:
         cfa = CorpusFollowerAssociation.query.filter_by(corpus_id=corpus_id, follower_id=current_user.id).first_or_404()
-        corpus_files = [x.to_json_serializeable() for x in corpus.files]
-        owner = corpus.user.to_json_serializeable()
         return render_template(
             'corpora/public_corpus.html.j2',
             corpus=corpus,
-            corpus_files=corpus_files,
             cfa=cfa,
-            owner=owner,
             title=corpus.title
         )
     abort(403)

app/main/routes.py

@@ -61,14 +61,16 @@ def terms_of_use():
 @bp.route('/social-area')
 @register_breadcrumb(bp, '.social_area', '<i class="material-icons left">group</i>Social Area')
 def social_area():
-    users = [
+    # corpora = [
-        u.to_json_serializeable(relationships=True, filter_by_privacy_settings=True,) for u
+    #     c.to_json_serializeable() for c
-        in User.query.filter(User.is_public == True, User.id != current_user.id).all()
+    #     in Corpus.query.filter(Corpus.is_public == True, Corpus.user != current_user).all()
-    ]
+    # ]
-    corpora = [
+    corpora = Corpus.query.filter(Corpus.is_public == True, Corpus.user != current_user).all()
-        c.to_json_serializeable() for c
+    # users = [
-        in Corpus.query.filter(Corpus.is_public == True, Corpus.user != current_user).all()
+    #     u.to_json_serializeable(relationships=True, filter_by_privacy_settings=True,) for u
-    ]
+    #     in User.query.filter(User.is_public == True, User.id != current_user.id).all()
+    # ]
+    users = User.query.filter(User.is_public == True, User.id != current_user.id).all()
     return render_template(
         'main/social_area.html.j2',
         users=users,

app/templates/admin/corpora.html.j2

@@ -21,8 +21,7 @@
   corpusList.add(
     [
       {% for corpus in corpora %}
-      {{ corpus.to_json_serializeable(backrefs=True)|tojson }}
+      {{ corpus.to_json_serializeable(backrefs=True)|tojson }},
-      {% if not loop.last %},{% endif %}
       {% endfor %}
     ]
   );

app/templates/admin/users.html.j2

@@ -26,8 +26,7 @@
   adminUserList.add(
     [
       {% for user in users %}
-      {{ user.to_json_serializeable(backrefs=True)|tojson }}
+      {{ user.to_json_serializeable(backrefs=True)|tojson }},
-      {% if not loop.last %},{% endif %}
       {% endfor %}
     ]
   );

app/templates/corpora/corpus.html.j2

@@ -216,3 +216,137 @@
   </div>
 </div>
 {% endblock modals %}
+
+{% block scripts %}
+{{ super() }}
+<script>
+let corpusDisplay = new CorpusDisplay(document.querySelector('#corpus-display'));
+
+// #region Publishing
+let publishingModalIsPublicSwitchElement = document.querySelector('#publishing-modal-is-public-switch');
+publishingModalIsPublicSwitchElement.addEventListener('change', (event) => {
+  let newIsPublic = publishingModalIsPublicSwitchElement.checked;
+  Requests.corpora.entity.isPublic.update({{ corpus.hashid|tojson }}, newIsPublic)
+    .catch((response) => {
+      publishingModalIsPublicSwitchElement.checked = !newIsPublic;
+    });
+});
+// #endregion Publishing
+
+// #region Delete
+let deleteModalDeleteButtonElement = document.querySelector('#delete-modal-delete-button');
+deleteModalDeleteButtonElement.addEventListener('click', (event) => {
+  Requests.corpora.entity.delete({{ corpus.hashid|tojson }})
+    .then((response) => {
+      window.location.href = {{ url_for('main.dashboard')|tojson }};
+    });
+});
+// #endregion Delete
+
+// #region Invite users
+let inviteUserModalElement = document.querySelector('#invite-user-modal');
+let inviteUserModalSearchElement = document.querySelector('#invite-user-modal-search');
+let inviteUserModalInviteButtonElement = document.querySelector('#invite-user-modal-invite-button');
+let users = {
+  {% for user in users %}
+  {{ user.username|tojson }}: {{ url_for('users.user_avatar', user_id=user.id)|tojson }}
+  {% if not loop.last %},{% endif %}
+  {% endfor %}
+};
+
+let inviteUserModalSearch = M.Chips.init(
+  inviteUserModalSearchElement,
+  {
+    autocompleteOptions: {
+      data: users
+    },
+    limit: 3,
+    onChipAdd: (a, chipElement) => {
+      if (!(chipElement.firstChild.data in inviteUserModalSearch.autocomplete.options.data)) {
+        chipElement.firstElementChild.click();
+      }
+    },
+    placeholder: 'Enter username',
+    secondaryPlaceholder: 'Add more users'
+  }
+);
+
+M.Modal.init(
+  inviteUserModalElement,
+  {
+    onOpenStart: (modalElement, modalTriggerElement) => {
+      while (inviteUserModalSearch.chipsData.length > 0) {
+        inviteUserModalSearch.deleteChip(0);
+      }
+    }
+  }
+)
+
+inviteUserModalInviteButtonElement.addEventListener('click', (event) => {
+  let usernames = inviteUserModalSearch.chipsData.map((chipData) => chipData.tag);
+  Requests.corpora.entity.followers.add({{ corpus.hashid|tojson }}, usernames);
+});
+// #endregion Invite users
+
+// #region Share link
+let shareLinkModalElement = document.querySelector('#share-link-modal');
+let shareLinkModalCorpusFollowerRoleSelectElement = document.querySelector('#share-link-modal-corpus-follower-role-select');
+let shareLinkModalExpirationDateDatepickerElement = document.querySelector('#share-link-modal-expiration-date-datepicker');
+let shareLinkModalCreateButtonElement = document.querySelector('#share-link-modal-create-button');
+let shareLinkModalOutputContainerElement = document.querySelector('#share-link-modal-output-container');
+let shareLinkModalOutputFieldElement = document.querySelector('#share-link-modal-output-field');
+let shareLinkModalOutputCopyButtonElement = document.querySelector('#share-link-modal-output-copy-button');
+
+let today = new Date();
+let tomorrow = new Date();
+tomorrow.setDate(today.getDate() + 1);
+let oneWeekLater = new Date();
+oneWeekLater.setDate(today.getDate() + 7);
+let fourWeeksLater = new Date();
+fourWeeksLater.setDate(today.getDate() + 28);
+
+M.Datepicker.init(
+  shareLinkModalExpirationDateDatepickerElement,
+  {
+    container: document.querySelector('main'),
+    defaultDate: oneWeekLater,
+    setDefaultDate: true,
+    minDate: tomorrow,
+    maxDate: fourWeeksLater
+  }
+);
+
+M.Modal.init(
+  shareLinkModalElement,
+  {
+    onOpenStart: (modalElement, modalTriggerElement) => {
+      shareLinkModalOutputFieldElement.value = '';
+      shareLinkModalOutputContainerElement.classList.add('hide');
+    }
+  }
+)
+
+shareLinkModalCreateButtonElement.addEventListener('click', (event) => {
+  let role = shareLinkModalCorpusFollowerRoleSelectElement.value;
+  let expiration = shareLinkModalExpirationDateDatepickerElement.value
+  Requests.corpora.entity.generateShareLink({{ corpus.hashid|tojson }}, role, expiration)
+    .then((response) => {
+      response.json()
+        .then((json) => {
+          shareLinkModalOutputContainerElement.classList.remove('hide');
+          shareLinkModalOutputFieldElement.value = json.corpusShareLink;
+        });
+    });
+});
+
+shareLinkModalOutputCopyButtonElement.addEventListener('click', (event) => {
+  navigator.clipboard.writeText(shareLinkModalOutputFieldElement.value)
+    .then(
+      () => {app.flash('Copied!');},
+      () => {app.flash('Could not copy to clipboard. Please copy manually.', 'error');}
+    );
+  
+});
+// #endregion Share link
+</script>
+{% endblock scripts %}

app/templates/corpora/corpus.js.j2

@@ -1,128 +0,0 @@
-let corpusId = {{ corpus.hashid|tojson }};
-let corpusDisplay = new CorpusDisplay(document.querySelector('#corpus-display'));
-
-// #region Publishing
-let publishingModalIsPublicSwitchElement = document.querySelector('#publishing-modal-is-public-switch');
-publishingModalIsPublicSwitchElement.addEventListener('change', (event) => {
-  let newIsPublic = publishingModalIsPublicSwitchElement.checked;
-  Requests.corpora.entity.isPublic.update(corpusId, newIsPublic)
-    .catch((response) => {
-      publishingModalIsPublicSwitchElement.checked = !newIsPublic;
-    });
-});
-// #endregion Publishing
-
-// #region Delete
-let deleteModalDeleteButtonElement = document.querySelector('#delete-modal-delete-button');
-deleteModalDeleteButtonElement.addEventListener('click', (event) => {
-  Requests.corpora.entity.delete(corpusId)
-    .then((response) => {
-      window.location.href = {{ url_for('main.dashboard')|tojson }};
-    });
-});
-// #endregion Delete
-
-// #region Invite users
-let inviteUserModalElement = document.querySelector('#invite-user-modal');
-let inviteUserModalSearchElement = document.querySelector('#invite-user-modal-search');
-let inviteUserModalInviteButtonElement = document.querySelector('#invite-user-modal-invite-button');
-const users = {};
-
-for (let user of {{ users|tojson }}) {
-  users[user.username] = user.avatar ? `/users/${user.id}/avatar` : '/static/images/user_avatar.png';
-}
-
-let inviteUserModalSearch = M.Chips.init(
-  inviteUserModalSearchElement,
-  {
-    autocompleteOptions: {
-      data: users
-    },
-    limit: 3,
-    onChipAdd: (a, chipElement) => {
-      if (!(chipElement.firstChild.data in inviteUserModalSearch.autocomplete.options.data)) {
-        chipElement.firstElementChild.click();
-      }
-    },
-    placeholder: 'Enter username',
-    secondaryPlaceholder: 'Add more users'
-  }
-);
-
-M.Modal.init(
-  inviteUserModalElement,
-  {
-    onOpenStart: (modalElement, modalTriggerElement) => {
-      while (inviteUserModalSearch.chipsData.length > 0) {
-        inviteUserModalSearch.deleteChip(0);
-      }
-    }
-  }
-)
-
-inviteUserModalInviteButtonElement.addEventListener('click', (event) => {
-  let usernames = inviteUserModalSearch.chipsData.map((chipData) => chipData.tag);
-  Requests.corpora.entity.followers.add(corpusId, usernames);
-});
-// #endregion Invite users
-
-// #region Share link
-let shareLinkModalElement = document.querySelector('#share-link-modal');
-let shareLinkModalCorpusFollowerRoleSelectElement = document.querySelector('#share-link-modal-corpus-follower-role-select');
-let shareLinkModalExpirationDateDatepickerElement = document.querySelector('#share-link-modal-expiration-date-datepicker');
-let shareLinkModalCreateButtonElement = document.querySelector('#share-link-modal-create-button');
-let shareLinkModalOutputContainerElement = document.querySelector('#share-link-modal-output-container');
-let shareLinkModalOutputFieldElement = document.querySelector('#share-link-modal-output-field');
-let shareLinkModalOutputCopyButtonElement = document.querySelector('#share-link-modal-output-copy-button');
-
-let today = new Date();
-let tomorrow = new Date();
-tomorrow.setDate(today.getDate() + 1);
-let oneWeekLater = new Date();
-oneWeekLater.setDate(today.getDate() + 7);
-let fourWeeksLater = new Date();
-fourWeeksLater.setDate(today.getDate() + 28);
-
-M.Datepicker.init(
-  shareLinkModalExpirationDateDatepickerElement,
-  {
-    container: document.querySelector('main'),
-    defaultDate: oneWeekLater,
-    setDefaultDate: true,
-    minDate: tomorrow,
-    maxDate: fourWeeksLater
-  }
-);
-
-M.Modal.init(
-  shareLinkModalElement,
-  {
-    onOpenStart: (modalElement, modalTriggerElement) => {
-      shareLinkModalOutputFieldElement.value = '';
-      shareLinkModalOutputContainerElement.classList.add('hide');
-    }
-  }
-)
-
-shareLinkModalCreateButtonElement.addEventListener('click', (event) => {
-  let role = shareLinkModalCorpusFollowerRoleSelectElement.value;
-  let expiration = shareLinkModalExpirationDateDatepickerElement.value
-  Requests.corpora.entity.generateShareLink(corpusId, role, expiration)
-    .then((response) => {
-      response.json()
-        .then((json) => {
-          shareLinkModalOutputContainerElement.classList.remove('hide');
-          shareLinkModalOutputFieldElement.value = json.corpusShareLink;
-        });
-    });
-});
-
-shareLinkModalOutputCopyButtonElement.addEventListener('click', (event) => {
-  navigator.clipboard.writeText(shareLinkModalOutputFieldElement.value)
-    .then(
-      () => {app.flash('Copied!');},
-      () => {app.flash('Could not copy to clipboard. Please copy manually.', 'error');}
-    );
-  
-});
-// #endregion Share link

app/templates/corpora/public_corpus.html.j2

@@ -53,12 +53,12 @@
                   <td></td>
                   <td>
                     <ul>
-                      <li><b>{{ owner.username }}</b></li>
+                      <li><b>{{ corpus.user.username }}</b></li>
-                      {% if owner.full_name %}
+                      {% if corpus.user.full_name %}
-                      <li>{{ owner.full_name }}</li>
+                      <li>{{ corpus.user.full_name }}</li>
                       {% endif %}
-                      {% if owner.show_email %}
+                      {% if corpus.user.show_email %}
-                      <li></li><a href="mailto:{{ owner.email }}">{{ owner.email }}</a></li>
+                      <li></li><a href="mailto:{{ corpus.user.email }}">{{ corpus.user.email }}</a></li>
                       {% endif %}
                     </ul>
                   </td>
@@ -78,8 +78,8 @@
       {% if cfa.role.has_permission('VIEW') %}
       <div class="card">
         <div class="card-content">
-          <span class="card-title" id="files">Corpus files</span>
+          <span class="card-title" id="corpus-files">Corpus files</span>
-          <div class="corpus-file-list no-autoinit" data-user-id="{{ owner.hashid }}" data-corpus-id="{{ corpus.hashid }}"></div>
+          <div class="corpus-file-list no-autoinit" id="corpus-file-list"></div>
         </div>
       </div>
       {% endif %}
@@ -87,8 +87,8 @@
       {% if cfa.role.has_permission('UPDATE_FOLLOWER') %}
       <div class="card">
         <div class="card-content">
-          <span class="card-title" id="files">Corpus followers</span>
+          <span class="card-title" id="corpus-followers">Corpus followers</span>
-          <div class="corpus-follower-list" data-user-id="{{ corpus.user.hashid }}" data-corpus-id="{{ corpus.hashid }}"></div>
+          <div class="corpus-follower-list no-autoinit"></div>
         </div>
       </div>
       {% endif %}
@@ -97,3 +97,26 @@
   </div>
 </div>
 {% endblock page_content %}
+
+
+{% block scripts %}
+{{ super() }}
+<script>
+let publicCorpusFileList = new PublicCorpusFileList(document.querySelector('#corpus-file-list'));
+publicCorpusFileList.add(
+  [
+    {% for corpus_file in corpus.files %}
+    {{ corpus_file.to_json_serializeable()|tojson }},
+    {% endfor %}
+  ]
+);
+
+let unfollowRequestElement = document.querySelector('.action-button[data-action="unfollow-request"]');
+unfollowRequestElement.addEventListener('click', () => {
+  Requests.corpora.entity.followers.entity.delete({{ corpus.hashid|tojson }}, {{ corpus.user.hashid|tojson }})
+    .then((response) => {
+      window.location.href = {{ url_for('main.dashboard')|tojson }};
+    });
+});
+</script>
+{% endblock scripts %}

app/templates/corpora/public_corpus.js.j2

@@ -1,11 +0,0 @@
-let corpusId = {{ corpus.hashid|tojson }};
-let corpusFileList = new PublicCorpusFileList(document.querySelector('.corpus-file-list'));
-corpusFileList.add({{ corpus_files|tojson }});
-
-let unfollowRequestElement = document.querySelector('.action-button[data-action="unfollow-request"]');
-unfollowRequestElement.addEventListener('click', () => {
-  Requests.corpora.entity.followers.entity.delete(corpusId, currentUserId)
-    .then((response) => {
-      window.location.href = {{ url_for('main.dashboard')|tojson }};
-    });
-});

app/templates/main/social_area.html.j2

@@ -63,8 +63,20 @@
 {{ super() }}
 <script>
   let userList = new UserList(document.querySelector('.user-list'));
-  userList.add({{ users|tojson }});
+  userList.add(
+    [
+      {% for user in users %}
+      {{ user.to_json_serializeable(relationships=True, filter_by_privacy_settings=True)|tojson }},
+      {% endfor %}
+    ]
+  );
   let publicCorpusList = new PublicCorpusList(document.querySelector('.public-corpus-list'));
-  publicCorpusList.add({{ corpora|tojson }});
+  publicCorpusList.add(
+    [
+      {% for corpus in corpora %}
+      {{ corpus.to_json_serializeable()|tojson }},
+      {% endfor %}
+    ]
+  );
 </script>
 {% endblock scripts %}

app/templates/users/user.html.j2

@@ -123,8 +123,7 @@ let followedCorpusList = new FollowedCorpusList(document.querySelector('.followe
 followedCorpusList.add(
   [
     {% for corpus in user.followed_corpora %}
-    {{ corpus.to_json_serializeable()|tojson }}
+    {{ corpus.to_json_serializeable()|tojson }},
-    {% if not loop.last %},{% endif %}
     {% endfor %}
   ]
 );
@@ -132,8 +131,7 @@ let publicCorpusList = new PublicCorpusList(document.querySelector('.public-corp
 publicCorpusList.add(
   [
     {% for corpus in user.corpora if corpus.is_public %}
-    {{ corpus.to_json_serializeable()|tojson }}
+    {{ corpus.to_json_serializeable()|tojson }},
-    {% if not loop.last %},{% endif %}
     {% endfor %}
   ]
 );